mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-10 06:58:27 +03:00
Resolve #159 and more design issues
This commit is contained in:
parent
6b8020b8f5
commit
8a351e5763
15 changed files with 31 additions and 110 deletions
|
|
@ -153,47 +153,14 @@ html.rl-side-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-height: 60vh;
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--dropdown-menu-color, #333);
|
||||
background-color: var(--dropdown-menu-bg-color, #fff);
|
||||
}
|
||||
|
||||
li.selected > a {
|
||||
background-color: var(--dropdown-menu-selected-bg-color, #eee);
|
||||
}
|
||||
|
||||
li:not(.disabled) > a:focus,
|
||||
li:not(.disabled) > a:hover {
|
||||
background-color: var(--dropdown-menu-hover-bg-color, #444);
|
||||
background-image: none;
|
||||
color: var(--dropdown-menu-hover-color, #eee);
|
||||
}
|
||||
|
||||
li.disabled > a {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu * + .dividerbar {
|
||||
margin-top: 9px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.dropdown.colored-toggle.show .btn.dropdown-toggle {
|
||||
color: #BD362F;
|
||||
|
||||
.caret {
|
||||
border-top-color: #BD362F;
|
||||
}
|
||||
.dropdown.show {
|
||||
box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
|
||||
}
|
||||
|
||||
.btn.btn-transparent {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.inputSearch {
|
||||
display: inline-block;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,17 +9,12 @@ label.inline, span.inline {
|
|||
padding: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize * 1.5;
|
||||
line-height: @baseLineHeight * 2;
|
||||
line-height: @baseLineHeight * 1.5;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @dropdownDividerTop;
|
||||
}
|
||||
|
||||
.legend + .control-group {
|
||||
margin-top: @baseLineHeight;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
.btn-small.btn-small-small {
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<i class="icon-spinner not-animated"></i>
|
||||
</a>
|
||||
<!-- ko if: !newMoveToFolder -->
|
||||
<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<div class="btn-group dropdown hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="fontastic hidden-on-ctrl-btn">📁</i>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<a class="btn button-delete fontastic"
|
||||
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
|
||||
</div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<a class="btn" data-i18n="GLOBAL/BCC"
|
||||
data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
|
||||
<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
|
||||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
|
||||
<a class="btn dropdown-toggle fontastic">☰</a>
|
||||
<ul class="dropdown-menu right-edge" role="menu">
|
||||
<li data-bind="click: function () { showBcc(!showBcc()); }">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>
|
||||
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
|
||||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
|
||||
<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1">☰</a>
|
||||
<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
|
||||
<li role="presentation">
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
|
||||
<div class="btn-group dropdown button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
|
||||
<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle">
|
||||
<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
|
||||
<span class="caret"></span>
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
|
||||
</a>
|
||||
</li>
|
||||
<!-
|
||||
<!--
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: addNewAddress">
|
||||
<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-horizontal" data-bind="visible: allowContactsSync">
|
||||
<div class="legend" data-i18n="SETTINGS_CONTACTS/LEGEND_CONTACTS_SYNC"></div>
|
||||
<div class="control-group">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<i class="stopIcon fontastic">⏸</i>
|
||||
</div>
|
||||
<div class="accountPlace hide-mobile" data-bind="text: emailTitle()"></div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
|
||||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
|
||||
<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-block dropdown-toggle">
|
||||
<i class="fontastic" data-bind="css: {'icon-spinner': accountsLoading()}">👤</i>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
--dropdown-menu-hover-bg-color: #444;
|
||||
--dropdown-menu-hover-color: #eee;
|
||||
--dropdown-menu-disabled-color: #999;
|
||||
--dropdown-menu-selected-bg-color: #eee;
|
||||
|
||||
// FOLDERS
|
||||
--folders-color: #333;
|
||||
|
|
|
|||
4
vendors/bootstrap/less/buttons.less
vendored
4
vendors/bootstrap/less/buttons.less
vendored
|
|
@ -69,8 +69,8 @@
|
|||
// Small
|
||||
.btn-small {
|
||||
padding: 3px 9px;
|
||||
font-size: @baseFontSize - 2px;
|
||||
line-height: @baseLineHeight - 2px;
|
||||
font-size: (@baseFontSize * 0.85);
|
||||
line-height: (@baseLineHeight * 0.85);
|
||||
}
|
||||
|
||||
// Block button
|
||||
|
|
|
|||
4
vendors/bootstrap/less/code.less
vendored
4
vendors/bootstrap/less/code.less
vendored
|
|
@ -26,8 +26,8 @@ code {
|
|||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
padding: (@baseLineHeight - 1) / 2;
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
padding: (@baseLineHeight / 2);
|
||||
margin: 0 0 (@baseLineHeight / 2);
|
||||
font-size: @baseFontSize - 1; // 14px to 13px
|
||||
line-height: @baseLineHeight;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
35
vendors/bootstrap/less/dropdowns.less
vendored
35
vendors/bootstrap/less/dropdowns.less
vendored
|
|
@ -28,6 +28,9 @@
|
|||
// The dropdown menu (ul)
|
||||
// ----------------------
|
||||
.dropdown-menu {
|
||||
max-height: 60vh;
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
|
@ -51,32 +54,22 @@
|
|||
|
||||
// Links within the dropdown menu
|
||||
a {
|
||||
background-color: var(--dropdown-menu-bg-color, #fff);
|
||||
color: var(--main-color, @dropdownLinkColor);
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: @baseLineHeight;
|
||||
color: @dropdownLinkColor;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
// -----------
|
||||
.dropdown-menu li > a:hover,
|
||||
.dropdown-menu li > a:focus {
|
||||
.dropdown-menu li:not(.disabled) > a:hover,
|
||||
.dropdown-menu li:not(.disabled) > a:focus {
|
||||
background-color: var(--dropdown-menu-hover-bg-color, #444);
|
||||
color: var(--dropdown-menu-hover-color, #eee);
|
||||
text-decoration: none;
|
||||
color: @dropdownLinkColorHover;
|
||||
background-color: @dropdownLinkBackgroundHover;
|
||||
}
|
||||
|
||||
// Active state
|
||||
// ------------
|
||||
.dropdown-menu .active > a,
|
||||
.dropdown-menu .active > a:hover {
|
||||
color: @dropdownLinkColorHover;
|
||||
text-decoration: none;
|
||||
background-color: @dropdownLinkBackgroundActive;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
|
|
@ -85,10 +78,6 @@
|
|||
.dropdown-menu .disabled > a,
|
||||
.dropdown-menu .disabled > a:hover {
|
||||
color: @grayLight;
|
||||
}
|
||||
// Nuke hover effects
|
||||
.dropdown-menu .disabled > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
29
vendors/bootstrap/less/forms.less
vendored
29
vendors/bootstrap/less/forms.less
vendored
|
|
@ -11,26 +11,6 @@ form {
|
|||
margin: 0 0 @baseLineHeight;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
legend {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize * 1.5;
|
||||
line-height: @baseLineHeight * 2;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
display: block;
|
||||
|
|
@ -64,7 +44,6 @@ textarea,
|
|||
input {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: @baseLineHeight + 10;
|
||||
padding: 4px 6px;
|
||||
color: @gray;
|
||||
border-radius: @inputBorderRadius;
|
||||
|
|
@ -242,13 +221,7 @@ input[type="checkbox"][readonly] {
|
|||
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: @baseLineHeight / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: @baseLineHeight;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
margin-bottom: (@baseLineHeight / 2);
|
||||
}
|
||||
|
||||
// Horizontal-specific styles
|
||||
|
|
|
|||
6
vendors/bootstrap/less/type.less
vendored
6
vendors/bootstrap/less/type.less
vendored
|
|
@ -7,7 +7,7 @@
|
|||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
margin: 0 0 (@baseLineHeight / 2);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ h6 { font-size: 12px; line-height: 20px; }
|
|||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0 0 @baseLineHeight / 2 25px;
|
||||
margin: 0 0 (@baseLineHeight / 2) 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
|
|
@ -91,7 +91,7 @@ blockquote {
|
|||
border-left: 5px solid @grayLighter;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
line-height: @baseLineHeight * 1.25;
|
||||
line-height: (@baseLineHeight * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
2
vendors/bootstrap/less/variables.less
vendored
2
vendors/bootstrap/less/variables.less
vendored
|
|
@ -31,7 +31,7 @@
|
|||
// Typography
|
||||
// -------------------------
|
||||
@baseFontSize: 14px;
|
||||
@baseLineHeight: 20px;
|
||||
@baseLineHeight: 1.43em;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue