Resolve #159 and more design issues

dev/Styles/User/Layout.less

@@ -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 {
+.dropdown.show {
-	color: #BD362F;
+	box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
-
-	.caret {
-		border-top-color: #BD362F;
-	}
 }
 
 .btn.btn-transparent {

dev/Styles/User/MessageList.less

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

dev/Styles/_BootstrapFix.less

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

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

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

snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html

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

snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html

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

snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html

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

snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html

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

snappymail/v/0.0.0/themes/example.css

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

vendors/bootstrap/less/buttons.less

@@ -69,8 +69,8 @@
 // Small
 .btn-small {
   padding: 3px 9px;
-  font-size: @baseFontSize - 2px;
+  font-size: (@baseFontSize * 0.85);
-  line-height: @baseLineHeight - 2px;
+  line-height: (@baseLineHeight * 0.85);
 }
 
 // Block button

vendors/bootstrap/less/code.less

@@ -26,8 +26,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight - 1) / 2;
+  padding: (@baseLineHeight / 2);
-  margin: 0 0 @baseLineHeight / 2;
+  margin: 0 0 (@baseLineHeight / 2);
   font-size: @baseFontSize - 1; // 14px to 13px
   line-height: @baseLineHeight;
   white-space: pre-wrap;

vendors/bootstrap/less/dropdowns.less

@@ -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;
+    text-decoration: none;
-    font-weight: normal;
-    line-height: @baseLineHeight;
-    color: @dropdownLinkColor;
     white-space: nowrap;
   }
 }
 
 // Hover state
 // -----------
-.dropdown-menu li > a:hover,
+.dropdown-menu li:not(.disabled) > a:hover,
-.dropdown-menu li > a:focus {
+.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;
-}
+  cursor: not-allowed;
-// Nuke hover effects
+  opacity: 0.5;
-.dropdown-menu .disabled > a:hover {
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
 }

vendors/bootstrap/less/forms.less

@@ -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;
+  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;
 }
 
 // Horizontal-specific styles

vendors/bootstrap/less/type.less

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

vendors/bootstrap/less/variables.less

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