pull/198/head
vinceliuice 4 years ago
parent a38178974f
commit b32252b4e4

@ -2459,8 +2459,7 @@ scale {
}
> trough > slider {
transition: background-color $duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
transition: $transition;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2492,8 +2491,7 @@ scale {
&:active {
$_url: 'assets/scale-slider#{$asset-suffix}';
transition: background-color $duration $ease-out;
background-color: $overlay-hover;
background-color: $overlay-active;
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
background-size: auto, 0% 0%;
}
@ -2502,20 +2500,40 @@ scale {
> marks,
> value { color: $text-secondary; }
indicator {
> marks indicator {
background-color: $track;
color: transparent;
}
//marks margins
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
(horizontal, bottom, bottom, top),
(vertical, top, left, right),
(vertical, bottom, right, left) {
&.#{$scale_orient} marks {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
}
}
&.#{$scale_orient}.fine-tune marks {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance - 1px;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
}
}
}
&.horizontal {
indicator {
> marks indicator {
min-height: $_marks_length;
min-width: 1px;
}
}
&.vertical {
indicator {
> marks indicator {
min-height: 1px;
min-width: $_marks_length;
}
@ -2524,51 +2542,41 @@ scale {
&.marks-before:not(.marks-after),
&.marks-after:not(.marks-before) {
> trough > slider {
transform: rotate(45deg);
background-color: $primary;
min-width: 12px;
min-height: 12px;
margin: -5px;
&:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
}
&:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
}
transform: none;
box-shadow: none;
border: none;
transition: $transition;
&:disabled {
background-color: $track;
box-shadow: none;
}
}
}
&.horizontal {
&.marks-before > trough > slider {
border-top-left-radius: 0;
}
// *WARNING* scale with marks madness following
&.marks-after > trough > slider {
border-bottom-right-radius: 0;
}
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
('vertical', 'vert') {
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
('marks-after', 'marks-after:not(.marks-before)') {
&.#{$dir_class}.#{$marks_class} {
> trough > slider {
@each $state, $state_infix in ('', ''),
(':disabled', '-disabled') {
&#{$state} {
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
&.marks-before.marks-after > trough > slider {
border-radius: 100%;
}
}
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
}
}
&.vertical {
&.marks-before > trough > slider {
border-bottom-left-radius: 0;
}
&:active {
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
&.marks-after > trough > slider {
border-top-right-radius: 0;
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
}
}
}
}
}
@ -2579,7 +2587,7 @@ scale {
&.horizontal {
padding: 0 0 12px 0;
slider {
> trough > slider {
&:dir(ltr), &:dir(rtl) { // specificity bump
margin-bottom: $color_slider_margin;
margin-top: $color_marks_slider_margin;
@ -2591,7 +2599,7 @@ scale {
&:dir(ltr) {
padding: 0 0 0 12px;
slider {
> trough > slider {
margin-left: $color_slider_margin;
margin-right: $color_marks_slider_margin;
}
@ -2600,7 +2608,7 @@ scale {
&:dir(rtl) {
padding: 0 12px 0 0;
slider {
> trough > slider {
margin-right: $color_slider_margin;
margin-left: $color_marks_slider_margin;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(0, 0, 0, 0.6);
}
scale indicator {
scale > marks indicator {
background-color: rgba(0, 0, 0, 0.26);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #1A73E8;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(0, 0, 0, 0.26);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(255, 255, 255, 0.7);
}
scale indicator {
scale > marks indicator {
background-color: rgba(255, 255, 255, 0.3);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #3281ea;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(255, 255, 255, 0.3);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider-dark.png"), url("assets/scale-slider-dark@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(255, 255, 255, 0.7);
}
scale indicator {
scale > marks indicator {
background-color: rgba(255, 255, 255, 0.3);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #3281ea;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(255, 255, 255, 0.3);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled-dark.png"), url("assets/scale-horz-marks-before-slider-disabled-dark@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-dark.png"), url("assets/scale-horz-marks-before-slider-dark@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled-dark.png"), url("assets/scale-horz-marks-after-slider-disabled-dark@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-dark.png"), url("assets/scale-horz-marks-after-slider-dark@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled-dark.png"), url("assets/scale-vert-marks-before-slider-disabled-dark@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-dark.png"), url("assets/scale-vert-marks-before-slider-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled-dark.png"), url("assets/scale-vert-marks-after-slider-disabled-dark@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-dark.png"), url("assets/scale-vert-marks-after-slider-dark@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(0, 0, 0, 0.6);
}
scale indicator {
scale > marks indicator {
background-color: rgba(0, 0, 0, 0.26);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #1A73E8;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(0, 0, 0, 0.26);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(0, 0, 0, 0.6);
}
scale indicator {
scale > marks indicator {
background-color: rgba(0, 0, 0, 0.26);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #1A73E8;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(0, 0, 0, 0.26);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

@ -2786,7 +2786,7 @@ scale > trough > fill:disabled {
}
scale > trough > slider {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
@ -2822,8 +2822,7 @@ scale > trough > slider:focus:hover {
}
scale > trough > slider:active {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: alpha(currentColor, 0.08);
background-color: alpha(currentColor, 0.12);
background-image: -gtk-scaled(url("assets/scale-slider.png"), url("assets/scale-slider@2.png"));
background-size: auto, 0% 0%;
}
@ -2833,63 +2832,118 @@ scale > value {
color: rgba(0, 0, 0, 0.6);
}
scale indicator {
scale > marks indicator {
background-color: rgba(0, 0, 0, 0.26);
color: transparent;
}
scale.horizontal indicator {
scale.horizontal marks.top {
margin-bottom: 7px;
margin-top: -15px;
}
scale.horizontal.fine-tune marks.top {
margin-bottom: 6px;
margin-top: -14px;
}
scale.horizontal marks.bottom {
margin-top: 7px;
margin-bottom: -15px;
}
scale.horizontal.fine-tune marks.bottom {
margin-top: 6px;
margin-bottom: -14px;
}
scale.vertical marks.top {
margin-right: 7px;
margin-left: -15px;
}
scale.vertical.fine-tune marks.top {
margin-right: 6px;
margin-left: -14px;
}
scale.vertical marks.bottom {
margin-left: 7px;
margin-right: -15px;
}
scale.vertical.fine-tune marks.bottom {
margin-left: 6px;
margin-right: -14px;
}
scale.horizontal > marks indicator {
min-height: 8px;
min-width: 1px;
}
scale.vertical indicator {
scale.vertical > marks indicator {
min-height: 1px;
min-width: 8px;
}
scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider {
transform: rotate(45deg);
background-color: #1A73E8;
min-width: 12px;
min-height: 12px;
margin: -5px;
transform: none;
box-shadow: none;
border: none;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
}
scale.marks-before:not(.marks-after) > trough > slider:hover, scale.marks-after:not(.marks-before) > trough > slider:hover {
min-width: 16px;
min-height: 16px;
margin: -7px;
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
box-shadow: none;
}
scale.marks-before:not(.marks-after) > trough > slider:active, scale.marks-after:not(.marks-before) > trough > slider:active {
min-width: 14px;
min-height: 14px;
margin: -6px;
scale.horizontal.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled {
background-color: rgba(0, 0, 0, 0.26);
scale.horizontal.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider-disabled.png"), url("assets/scale-horz-marks-before-slider-disabled@2.png"));
}
scale.horizontal.marks-before > trough > slider {
border-top-left-radius: 0;
scale.horizontal.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-before-slider.png"), url("assets/scale-horz-marks-before-slider@2.png"));
}
scale.horizontal.marks-after > trough > slider {
border-bottom-right-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.horizontal.marks-before.marks-after > trough > slider {
border-radius: 100%;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider-disabled.png"), url("assets/scale-horz-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-before > trough > slider {
border-bottom-left-radius: 0;
scale.horizontal.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-horz-marks-after-slider.png"), url("assets/scale-horz-marks-after-slider@2.png"));
}
scale.vertical.marks-after > trough > slider {
border-top-right-radius: 0;
scale.vertical.marks-before:not(.marks-after) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider-disabled.png"), url("assets/scale-vert-marks-before-slider-disabled@2.png"));
}
scale.vertical.marks-before:not(.marks-after) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-before-slider.png"), url("assets/scale-vert-marks-before-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:disabled {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider-disabled.png"), url("assets/scale-vert-marks-after-slider-disabled@2.png"));
}
scale.vertical.marks-after:not(.marks-before) > trough > slider:active {
background-image: -gtk-scaled(url("assets/scale-vert-marks-after-slider.png"), url("assets/scale-vert-marks-after-slider@2.png"));
}
scale.color {
@ -2901,7 +2955,7 @@ scale.color.horizontal {
padding: 0 0 12px 0;
}
scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl) {
scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl) {
margin-bottom: -24px;
margin-top: 8px;
}
@ -2910,7 +2964,7 @@ scale.color.vertical:dir(ltr) {
padding: 0 0 0 12px;
}
scale.color.vertical:dir(ltr) slider {
scale.color.vertical:dir(ltr) > trough > slider {
margin-left: -24px;
margin-right: 8px;
}
@ -2919,7 +2973,7 @@ scale.color.vertical:dir(rtl) {
padding: 0 12px 0 0;
}
scale.color.vertical:dir(rtl) slider {
scale.color.vertical:dir(rtl) > trough > slider {
margin-right: -24px;
margin-left: 8px;
}

Loading…
Cancel
Save