diff options
author | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-11 11:42:31 +0300 |
---|---|---|
committer | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-11 11:42:54 +0300 |
commit | 912ba900010b0f0c05978d41af4011a7a789c133 (patch) | |
tree | fa1c225d57abbaa66df6d625f8cc32e49ee80868 | |
parent | ea165c479e875eead03ff770ba68290ae9af61db (diff) |
..F....... [DEV-2213] fixed range control height
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 35 |
1 files changed, 16 insertions, 19 deletions
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 19a7380328a..9b7fac6c11e 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -5610,19 +5610,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; @@ -5631,9 +5630,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; } @@ -5645,23 +5644,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; } @@ -5677,12 +5674,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 { @@ -5712,16 +5709,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; } } |