Resolve #159 and more design issues

This commit is contained in:
djmaze 2021-11-15 12:16:02 +01:00
parent 6b8020b8f5
commit 8a351e5763
15 changed files with 31 additions and 110 deletions

View file

@ -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 {

View file

@ -89,7 +89,6 @@ html.rl-no-preview-pane {
}
.inputSearch {
display: inline-block;
max-width: 300px;
width: 100%;
}

View file

@ -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;

View file

@ -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()}">

View file

@ -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()); }">

View file

@ -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>

View file

@ -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">

View file

@ -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>
<!--

View file

@ -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;

View file

@ -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

View file

@ -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;

View file

@ -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;
}

View file

@ -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

View file

@ -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);
}
}

View file

@ -31,7 +31,7 @@
// Typography
// -------------------------
@baseFontSize: 14px;
@baseLineHeight: 20px;
@baseLineHeight: 1.43em;
// Tables
// -------------------------