Commit b68b4651 authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Commit Bot

WebUI: cr-slider, use border-top to display bar to support low zoom levels (e.g. 33%)

Bug: 701684
Change-Id: I668646a89402851ec19acc8b11f0fbd979157eeb
Reviewed-on: https://chromium-review.googlesource.com/c/1334943
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609040}
parent 4e243fc4
...@@ -25,9 +25,17 @@ ...@@ -25,9 +25,17 @@
position: relative; position: relative;
} }
#barContainer,
#bar {
/* Using border instead of background-color to address pixel rounding
at low zoom levels (e.g. 33%). The browser will round border widths
to a minimum of 1px.*/
border-top-style: solid;
border-top-width: 2px;
}
#barContainer { #barContainer {
background-color: var(--google-blue-600-opacity-24); border-top-color: var(--google-blue-600-opacity-24);
border-radius: 1px;
height: 2px; height: 2px;
margin: 0 16px; margin: 0 16px;
position: absolute; position: absolute;
...@@ -36,11 +44,11 @@ ...@@ -36,11 +44,11 @@
} }
#bar { #bar {
background-color: var(--google-blue-600); border-top-color: var(--google-blue-600);
border-radius: 1px;
height: 2px; height: 2px;
left: 0; left: 0;
position: absolute; position: absolute;
top: -2px;
transition: width 80ms ease; transition: width 80ms ease;
width: 0; width: 0;
} }
...@@ -153,11 +161,11 @@ ...@@ -153,11 +161,11 @@
} }
:host([disabled_]) #barContainer { :host([disabled_]) #barContainer {
background-color: var(--google-grey-600-opacity-24); border-top-color: var(--google-grey-600-opacity-24);
} }
:host([disabled_]) #bar { :host([disabled_]) #bar {
background-color: var(--google-grey-600); border-top-color: var(--google-grey-600);
} }
:host([disabled_]) inactive-marker::after, :host([disabled_]) inactive-marker::after,
...@@ -166,7 +174,7 @@ ...@@ -166,7 +174,7 @@
} }
:host([disabled_]) #knobContainer { :host([disabled_]) #knobContainer {
margin-inline-start: 9px; margin-inline-start: 10px;
top: 9px; top: 9px;
} }
:host([disabled_]) #knob { :host([disabled_]) #knob {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment