..F....... [DEV-2213] fixed checkboxes position; fixed range control height; fixed geomap widget filter paddings

6 files changed, 64 insertions, 89 deletions

diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index 26e915be155..ae326832b64 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -51,6 +51,7 @@ $font-selected-color: #ffffff !default;
 $font-alt-color: #768d99 !default;
 $body-bg-color: #ebeef0 !default;
 $overlay-bg-color: #ffffff !default;
+$overlay-border-color: #ccd5d9 !default;
 
 // Main menu
 $menu-main-color: #ebeef0 !default;
diff --git a/sass/stylesheets/sass/components/_range-control.scss b/sass/stylesheets/sass/components/_range-control.scss
index c630e5dde77..b76075ad0af 100644
--- a/sass/stylesheets/sass/components/_range-control.scss
+++ b/sass/stylesheets/sass/components/_range-control.scss
@@ -10,19 +10,18 @@ $range-input-width: 31px;
 
 .range-control {
 	position: relative;
-	display: inline-block;
-	vertical-align: middle;
+	display: inline-flex;
 
 	input[type=range] {
+		width: calc(100% + 10px);
+		height: 20px;
+		margin: 2px -5px;
+		padding: 0;
+		vertical-align: top;
+		opacity: 0;
 		cursor: pointer;
 		-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
 		-moz-appearance: none; /* Hides the slider so that custom slider can be made */
-		width: calc(100% + 10px);
-		opacity: 0;
-		vertical-align: middle;
-		margin: 0 -5px;
-		padding: 0;
-		height: 20px;
 
 		&:focus {
 			outline: none;
@@ -31,9 +30,9 @@ $range-input-width: 31px;
 		/* Special styling for WebKit/Blink */
 		&::-webkit-slider-thumb,
 		&::-moz-range-thumb {
-			margin-top: 1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 			height: $range-thumb-size;
 			width: $range-thumb-size;
+			margin-top: 1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 			opacity: 0;
 		}
 
@@ -45,23 +44,21 @@ $range-input-width: 31px;
 
 	input[type=text] {
 		width: $range-input-width;
-		float: right;
 	}
 
 	> div {
 		position: relative;
 		width: calc(100% - 10px - #{$range-input-width});
-		margin: 2px $range-thumb-size 0 0;
-		float: left;
+		margin-right: $range-thumb-size;
 	}
 
 	.range-control-track,
 	.range-control-progress {
 		position: absolute;
 		top: 50%;
-		margin-top: -$range-track-height / 2;
 		left: 0;
 		height: $range-track-height;
+		margin-top: -$range-track-height / 2;
 		cursor: pointer;
 	}
 
@@ -77,12 +74,12 @@ $range-input-width: 31px;
 	.range-control-thumb {
 		position: absolute;
 		top: 50%;
-		margin-top: -$range-thumb-size / 2;
-		margin-left: -$range-thumb-size / 2;
 		width: $range-thumb-size;
 		height: $range-thumb-size;
-		border-radius: 50%;
+		margin-top: -$range-thumb-size / 2;
+		margin-left: -$range-thumb-size / 2;
 		background: $range-thumb-color;
+		border-radius: 50%;
 	}
 
 	&.range-control-focus {
@@ -112,16 +109,16 @@ $range-input-width: 31px;
 
 	datalist {
 		position: absolute;
+		top: 50%;
 		display: flex;
 		width: 100%;
-		top: 50%;
 		margin-top: -$range-track-height / 2;
 
 		option {
-			padding: 0;
-			font-size: 0;
 			flex: 1 0 0;
 			height: $range-track-height;
+			padding: 0;
+			font-size: 0;
 			border-left: 1px solid $body-bg-color;
 		}
 	}
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index 5fed2af4807..6cf13b55325 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -39,6 +39,7 @@ $font-selected-color: #f2f2f2;
 $font-alt-color: #737373;
 $body-bg-color: #0e1012;
 $overlay-bg-color: #000000;
+$overlay-border-color: #383838;
 
 // Main menu
 $menu-main-color: #f2f2f2;
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index eb0bbba197b..1387066e8bf 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -42,6 +42,7 @@ $font-selected-color: #ffffff;
 $font-alt-color: #cacaca;
 $body-bg-color: #111111;
 $overlay-bg-color: #222222;
+$overlay-border-color: #666666;
 
 // Main menu
 
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index 510ba6ef4df..b0333d6cc98 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -40,6 +40,7 @@ $font-selected-color: #ffffff;
 $font-alt-color: #333333;
 $body-bg-color: #ffffff;
 $overlay-bg-color: #000000;
+$overlay-border-color: #383838;
 
 // Main menu
 $menu-main-color: #ffffff;
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index a813491df38..1844c4dab0e 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -450,7 +450,6 @@ form {
 			box-shadow: inset 0 -1px 0 0 rgba($font-color, .1);
 			color: $font-color;
 			height: 22px;
-			line-height: 1;
 			vertical-align: middle;
 			white-space: nowrap;
 
@@ -757,12 +756,6 @@ form {
 			}
 		}
 	}
-
-	td {
-		.checkbox-radio + label span {
-			top: -2px;
-		}
-	}
 }
 
 .table-paging {
@@ -1449,16 +1442,6 @@ form {
 				margin-top: 5px;
 			}
 		}
-
-		.checkbox-radio + label span {
-			top: -1px;
-		}
-
-		.checkbox-list {
-			.checkbox-radio + label span {
-				top: -3px;
-			}
-		}
 	}
 
 	h4 {
@@ -1615,10 +1598,6 @@ input {
 		@extend %form-input-style;
 	}
 
-	&[type="checkbox"] {
-		@extend %form-check-radio-style;
-	}
-
 	&[type="radio"] {
 		@extend %form-check-radio-style;
 	}
@@ -1715,6 +1694,36 @@ select {
 }
 
 .checkbox-radio {
+	position: absolute !important;
+	top: auto !important;
+	z-index: 1;
+	width: 16px !important;
+	height: 16px !important;
+	opacity: 0;
+
+	& + label {
+		span {
+			position: relative;
+			top: 1px;
+			display: inline-block;
+			width: 14px;
+			height: 14px;
+			margin-right: 4px;
+			vertical-align: text-bottom;
+			background-color: $form-bg-color;
+			border: 1px solid $form-border-color;
+
+			&:active {
+				border-color: $form-border-color;
+			}
+		}
+
+		&.label-pos-left span {
+			margin-left: 4px;
+			margin-right: 0;
+		}
+	}
+
 	&:checked[readonly] + label span {
 		transition: none;
 
@@ -1725,7 +1734,7 @@ select {
 
 	&[readonly] {
 		&,
-		+ label {
+		& + label {
 			pointer-events: none;
 
 			span {
@@ -1736,7 +1745,7 @@ select {
 	}
 
 	&[type="checkbox"] {
-		+ label span {
+		& + label span {
 			border-radius: 2px;
 		}
 
@@ -1763,7 +1772,7 @@ select {
 	}
 
 	&[type="radio"] {
-		+ label span {
+		& + label span {
 			border-radius: 50%;
 		}
 
@@ -1788,36 +1797,6 @@ select {
 		}
 	}
 
-	position: absolute !important;
-	top: auto !important;
-	width: 16px !important;
-	height: 16px !important;
-	opacity: 0;
-	z-index: 1;
-
-	+ label {
-		span {
-			position: relative;
-			display: inline-block;
-			width: 14px;
-			height: 14px;
-			margin-right: 4px;
-			top: -2px;
-			vertical-align: middle;
-			border: 1px solid $form-border-color;
-			background-color: $form-bg-color;
-
-			&:active {
-				border-color: $form-border-color;
-			}
-		}
-	}
-
-	+ label.label-pos-left span {
-		margin-left: 6px;
-		margin-right: 1px;
-	}
-
 	&:focus + label span {
 		border-color: $form-border-focus-color;
 	}
@@ -2971,8 +2950,8 @@ $form-icon-btn: (
 	min-width: 166px;
 	max-width: 250px;
 	background-color: $ui-bg-color;
-	border: 1px solid $action-border-color;
-	border-bottom-color: darken($action-border-color, 1%);
+	border: 1px solid $overlay-border-color;
+	border-bottom-color: darken($overlay-border-color, 1%);
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 
 	&:focus {
@@ -3066,8 +3045,8 @@ $form-icon-btn: (
 		width: 12px;
 		height: 12px;
 		background-color: $ui-bg-color;
-		border-top: 1px solid $action-border-color;
-		border-left: 1px solid $action-border-color;
+		border-top: 1px solid $overlay-border-color;
+		border-left: 1px solid $overlay-border-color;
 		transform: rotate(45deg);
 	}
 }
@@ -3078,8 +3057,8 @@ $form-icon-btn: (
 	z-index: 1000;
 	padding: 13px 10px 10px;
 	background-color: $ui-bg-color;
-	border: 1px solid $action-border-color;
-	border-bottom-color: darken($action-border-color, 1%);
+	border: 1px solid $overlay-border-color;
+	border-bottom-color: darken($overlay-border-color, 1%);
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 
 	.dashboard-widget-head {
@@ -4456,7 +4435,7 @@ span {
 .menu-popup-preloader,
 .hintbox-preloader {
 	background: $preloader-bg-color;
-	border: 1px solid $action-border-color;
+	border: 1px solid $overlay-border-color;
 	box-shadow: 0 4px 20px 0 $action-shadow-color;
 	height: 128px;
 	width: 128px;
@@ -4889,12 +4868,7 @@ svg {
 	li {
 		overflow: hidden;
 		text-overflow: ellipsis;
-		line-height: 20px;
-
-		label {
-			line-height: 16px;
-			vertical-align: bottom;
-		}
+		line-height: 24px;
 	}
 }
 
@@ -6488,9 +6462,9 @@ z-select,
 	background-position: -117px -506px !important;
 }
 .geomap-filter {
-	border: 2px solid rgba($ui-border-color, .4);
+	border: 1px solid $overlay-border-color;
 	background-color: $ui-bg-color;
-	padding: 10px 30px 5px 10px;
+	padding: 5px 20px 5px 10px;
 	position: absolute;
 	margin-right: -2px;
 	margin-top: 5px;
@@ -6498,7 +6472,7 @@ z-select,
 	right: 0;
 }
 .geomap-filter.collapsed {
-	display: table;
+	display: block;
 }
 .geomap-filter li {
 	width: calc(100% + 20px);