[libadwaita/wip/exalm/stylesheet2: 74/97] stylesheet: Split scale styles into a separate file
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/stylesheet2: 74/97] stylesheet: Split scale styles into a separate file
- Date: Fri, 9 Apr 2021 12:30:25 +0000 (UTC)
commit 04990df6382e382230707b820b8e8f2f6bbea105
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Fri Apr 9 13:30:12 2021 +0500
stylesheet: Split scale styles into a separate file
src/stylesheet/_common.scss | 427 -------------------------------------
src/stylesheet/_widgets.scss | 1 +
src/stylesheet/meson.build | 1 +
src/stylesheet/widgets/_scale.scss | 422 ++++++++++++++++++++++++++++++++++++
4 files changed, 424 insertions(+), 427 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index cbb9d74..bc75985 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,433 +237,6 @@ editablelabel > stack > text {
}
-/************
- * GtkScale *
- ************/
-%scale_trough {
- border: 1px solid $dark_fill;
- border-radius: 3px;
- background-color: $dark_fill;
-
- headerbar & { background-color: darken($dark_fill,8%); } //3504
-
- &:disabled {
- background-color: $insensitive_bg_color;
- border-color: $insensitive_borders_color;
- }
-
- // ...on selected list rows
- row:selected & {
- &:disabled, & {
- outline-color: $alt_focus_border_color;
- border-color: $selected_borders_color;
- }
- }
-
- // OSD
- .osd & {
- border-color: $osd_borders_color;
- background-color: transparentize($osd_borders_color, 0.2);
-
- &:disabled { background-color: $osd_insensitive_bg_color; }
- }
-}
-
-%scale_highlight {
- border: 1px solid $selected_bg_color;
- border-radius: 3px;
- background-color: $selected_bg_color;
-
- &:disabled {
- background-color: transparent;
- border-color: transparent;
- }
-
- // ...on selected list rows
- row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
-
- // OSD
- .osd & {
- border-color: $osd_borders_color;
-
- &:disabled { border-color: transparent; }
- }
-}
-
-scale {
- // sizing
- $_marks_length: 6px;
- $_marks_distance: 6px;
-
- min-height: 10px;
- min-width: 10px;
- padding: 12px;
-
- @include focus-ring("> trough", $offset: 10px);
-
- > trough {
- transition: $focus_transition;
- @extend %scale_trough;
-
- // those are inside the trough node, I need them to show their own border over the trough one, so
negative margin
- > fill,
- > highlight { margin: -1px; }
-
- // the colored part of the backing bit
- > highlight { @extend %scale_highlight; }
-
- // this is another differently styled part of the backing bit, the most relevant use case is for example
- // in media player to indicate how much video stream as been cached
- > fill {
- @extend %scale_trough;
-
- &:disabled {
- border-color: transparent;
- background-color: transparent;
- }
-
- // OSD
- .osd & {
- background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-
- &:disabled {
- border-color: transparent;
- background-color: transparent;
- }
- }
- }
-
- > slider {
- @include button(normal);
- border-width: 1px;
- border-style: solid;
- border-radius: 100%;
- transition: $button_transition;
- transition-property: background, border, box-shadow;
-
- // the slider is inside the trough, so to have make it bigger there's a negative margin
- min-height: 18px;
- min-width: 18px;
- margin: -9px;
-
- &:hover { @include button(hover); }
-
- &:active { border-color: $selected_borders_color; }
-
- &:disabled { @include button(insensitive); }
-
- // ...on selected list rows
- row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
-
- // OSD
- .osd & {
- @include button(osd);
- border-color: darken($osd_borders_color, 3%);
- background-color: opacify($osd_bg_color, 1); // solid background needed here
-
- &:hover {
- @include button(osd-hover);
- background-color: opacify($osd_bg_color, 1); // solid background needed here
- }
-
- &:active {
- @include button(osd-active);
- background-color: opacify($osd_bg_color, 1); // solid background needed here
- }
-
- &:disabled {
- @include button(osd-insensitive);
- background-color: opacify($osd_bg_color, 1); // solid background needed here
- }
- }
- }
- }
-
- // click-and-hold the slider to activate
- &.fine-tune {
- &.horizontal {
- padding-top: 9px;
- padding-bottom: 9px;
- min-height: 16px;
- }
-
- &.vertical {
- padding-left: 9px;
- padding-right: 9px;
- min-width: 16px;
- }
-
- > trough {
- // to make the trough grow in fine-tune mode
- > slider { margin: -6px; }
-
- > fill,
- > highlight,
- & {
- border-radius: 5px;
- }
- }
- }
-
- > value {
- color: gtkalpha(currentColor, 0.55);
- font-feature-settings: "tnum";
- }
-
- &.horizontal {
- > marks {
- color: gtkalpha(currentColor, 0.55);
- &.top { margin-bottom: $_marks_distance; }
- &.bottom { margin-top: $_marks_distance; }
-
- indicator {
- background-color: currentColor;
- min-height: $_marks_length;
- min-width: 1px;
- }
- }
-
- > value.left { margin-right: 9px; }
- > value.right { margin-left: 9px; }
-
- &.fine-tune > marks {
- &.top { margin-top: 3px; }
- &.bottom { margin-bottom: 3px; }
-
- indicator { min-height: ($_marks_length - 3px); }
- }
- }
-
- &.vertical {
- > marks {
- color: gtkalpha(currentColor, 0.55);
- &.top { margin-right: $_marks_distance; }
- &.bottom { margin-left: $_marks_distance; }
-
- indicator {
- background-color: currentColor;
- min-height: 1px;
- min-width: $_marks_length;
- }
- }
-
- > value.top { margin-bottom: 9px; }
- > value.bottom { margin-top: 9px; }
-
- &.fine-tune > marks {
- &.top { margin-left: 3px; }
- &.bottom { margin-right: 3px; }
-
- indicator { min-height: ($_marks_length - 3px); }
- }
- }
-
- // *WARNING* scale with marks madness following
-
- // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for
those...
- $suffix: if($variant == 'light', '', '-dark');
-
- @each $dir_class, $dir_infix in ('horizontal', 'horz'),
- ('vertical', 'vert') {
- @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
- ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
- @each $state, $state_infix in ('', ''),
- (':hover', '-hover'),
- (':active', '-active'),
- (':disabled', '-insensitive') {
- &.#{$dir_class}.#{$marks_class} {
-
- > trough > slider {
- &#{$state} {
- // an asymmetric slider asset is used here, so the margins are uneven, the smaller
- // margin is set on the point side.
- margin: -10px;
- $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
- border-style: none;
- border-radius: 0;
-
- background-color: transparent;
- background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
-
- $_scale_slider_bg_pos: bottom;
-
- @if $dir_class == 'horizontal' {
- min-height: 26px;
- min-width: 22px;
-
- @if $marks_infix == 'scale-has-marks-above' {
- margin-top: -14px;
-
- $_scale_slider_bg_pos: top;
- }
-
- @else { margin-bottom: -14px; }
- }
-
- @else {
- min-height: 22px;
- min-width: 26px;
-
- @if $marks_infix == 'scale-has-marks-above' {
- margin-left: -14px;
-
- $_scale_slider_bg_pos: left bottom;
- }
-
- @else {
- margin-right: -14px;
-
- $_scale_slider_bg_pos: right bottom;
- }
- }
-
- background-position: $_scale_slider_bg_pos;
- background-repeat: no-repeat;
- box-shadow: none;
- }
- }
-
- &.fine-tune > trough > slider {
- @if $dir_class == 'horizontal' {
- // bigger negative margins to make the trough grow here as well
- margin: -7px -10px;
-
- @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
-
- @else { margin-bottom: -11px; }
- }
-
- @else {
- margin: -10px -7px;
-
- @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
-
- @else { margin-right: -11px; }
- }
- }
- }
- }
- }
- }
-
- &.color {
- min-height: 0;
- min-width: 0;
-
- > trough {
- background-image: image($borders_color);
- background-repeat: no-repeat;
- }
-
- &.horizontal {
- padding: 0 0 15px 0;
-
- > trough {
- padding-bottom: 4px;
- background-position: 0 -3px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
-
- > slider {
- &:dir(ltr), &:dir(rtl) { // specificity bump
- &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
- margin-bottom: -15px;
- margin-top: 6px;
- }
- }
- }
- }
- }
-
- &.vertical {
- &:dir(ltr) {
- padding: 0 0 0 15px;
-
- > trough {
- padding-left: 4px;
- background-position: 3px 0;
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
-
- > slider {
- &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
- margin-left: -15px;
- margin-right: 6px;
- }
- }
- }
- }
-
- &:dir(rtl) {
- padding: 0 15px 0 0;
-
- > trough {
- padding-right: 4px;
- background-position: -3px 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
-
- > slider {
- &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
- margin-right: -15px;
- margin-left: 6px;
- }
- }
- }
- }
- }
-
- &.fine-tune {
- &.horizontal {
- &:dir(ltr), &:dir(rtl) { // specificity bump
- padding: 0 0 12px 0;
-
- > trough {
- padding-bottom: 7px;
- background-position: 0 -6px;
-
- > slider {
- margin-bottom: -15px;
- margin-top: 6px;
- }
- }
- }
- }
-
- &.vertical {
- &:dir(ltr) {
- padding: 0 0 0 12px;
-
- > trough {
- padding-left: 7px;
- background-position: 6px 0;
-
- > slider {
- margin-left: -15px;
- margin-right: 6px;
- }
- }
- }
-
- &:dir(rtl) {
- padding: 0 12px 0 0;
-
- > trough {
- padding-right: 7px;
- background-position: -6px 0;
-
- > slider {
- margin-right: -15px;
- margin-left: 6px;
- }
- }
- }
- }
- }
- }
-}
-
-
/*****************
* Progress bars *
*****************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 595f8c4..a064161 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -7,6 +7,7 @@
@import 'widgets/menus';
@import 'widgets/notebook';
@import 'widgets/popovers';
+@import 'widgets/scale';
@import 'widgets/scrolling';
@import 'widgets/spinner';
@import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index ee98cdd..a5aa33e 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -29,6 +29,7 @@ if not fs.exists('Adwaita-light.css')
'widgets/_menus.scss',
'widgets/_notebook.scss',
'widgets/_popovers.scss',
+ 'widgets/_scale.scss',
'widgets/_scrolling.scss',
'widgets/_spinner.scss',
'widgets/_spin-button.scss',
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
new file mode 100644
index 0000000..67e4dfe
--- /dev/null
+++ b/src/stylesheet/widgets/_scale.scss
@@ -0,0 +1,422 @@
+%scale_trough {
+ border: 1px solid $dark_fill;
+ border-radius: 3px;
+ background-color: $dark_fill;
+
+ headerbar & { background-color: darken($dark_fill,8%); } //3504
+
+ &:disabled {
+ background-color: $insensitive_bg_color;
+ border-color: $insensitive_borders_color;
+ }
+
+ // ...on selected list rows
+ row:selected & {
+ &:disabled, & {
+ outline-color: $alt_focus_border_color;
+ border-color: $selected_borders_color;
+ }
+ }
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+ background-color: transparentize($osd_borders_color, 0.2);
+
+ &:disabled { background-color: $osd_insensitive_bg_color; }
+ }
+}
+
+%scale_highlight {
+ border: 1px solid $selected_bg_color;
+ border-radius: 3px;
+ background-color: $selected_bg_color;
+
+ &:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+
+ &:disabled { border-color: transparent; }
+ }
+}
+
+scale {
+ // sizing
+ $_marks_length: 6px;
+ $_marks_distance: 6px;
+
+ min-height: 10px;
+ min-width: 10px;
+ padding: 12px;
+
+ @include focus-ring("> trough", $offset: 10px);
+
+ > trough {
+ transition: $focus_transition;
+ @extend %scale_trough;
+
+ // those are inside the trough node, I need them to show their own border over the trough one, so
negative margin
+ > fill,
+ > highlight { margin: -1px; }
+
+ // the colored part of the backing bit
+ > highlight { @extend %scale_highlight; }
+
+ // this is another differently styled part of the backing bit, the most relevant use case is for example
+ // in media player to indicate how much video stream as been cached
+ > fill {
+ @extend %scale_trough;
+
+ &:disabled {
+ border-color: transparent;
+ background-color: transparent;
+ }
+
+ // OSD
+ .osd & {
+ background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+ &:disabled {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+ }
+
+ > slider {
+ @include button(normal);
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 100%;
+ transition: $button_transition;
+ transition-property: background, border, box-shadow;
+
+ // the slider is inside the trough, so to have make it bigger there's a negative margin
+ min-height: 18px;
+ min-width: 18px;
+ margin: -9px;
+
+ &:hover { @include button(hover); }
+
+ &:active { border-color: $selected_borders_color; }
+
+ &:disabled { @include button(insensitive); }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+ // OSD
+ .osd & {
+ @include button(osd);
+ border-color: darken($osd_borders_color, 3%);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+ &:hover {
+ @include button(osd-hover);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+
+ &:active {
+ @include button(osd-active);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+
+ &:disabled {
+ @include button(osd-insensitive);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+ }
+ }
+ }
+
+ // click-and-hold the slider to activate
+ &.fine-tune {
+ &.horizontal {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ min-height: 16px;
+ }
+
+ &.vertical {
+ padding-left: 9px;
+ padding-right: 9px;
+ min-width: 16px;
+ }
+
+ > trough {
+ // to make the trough grow in fine-tune mode
+ > slider { margin: -6px; }
+
+ > fill,
+ > highlight,
+ & {
+ border-radius: 5px;
+ }
+ }
+ }
+
+ > value {
+ color: gtkalpha(currentColor, 0.55);
+ font-feature-settings: "tnum";
+ }
+
+ &.horizontal {
+ > marks {
+ color: gtkalpha(currentColor, 0.55);
+ &.top { margin-bottom: $_marks_distance; }
+ &.bottom { margin-top: $_marks_distance; }
+
+ indicator {
+ background-color: currentColor;
+ min-height: $_marks_length;
+ min-width: 1px;
+ }
+ }
+
+ > value.left { margin-right: 9px; }
+ > value.right { margin-left: 9px; }
+
+ &.fine-tune > marks {
+ &.top { margin-top: 3px; }
+ &.bottom { margin-bottom: 3px; }
+
+ indicator { min-height: ($_marks_length - 3px); }
+ }
+ }
+
+ &.vertical {
+ > marks {
+ color: gtkalpha(currentColor, 0.55);
+ &.top { margin-right: $_marks_distance; }
+ &.bottom { margin-left: $_marks_distance; }
+
+ indicator {
+ background-color: currentColor;
+ min-height: 1px;
+ min-width: $_marks_length;
+ }
+ }
+
+ > value.top { margin-bottom: 9px; }
+ > value.bottom { margin-top: 9px; }
+
+ &.fine-tune > marks {
+ &.top { margin-left: 3px; }
+ &.bottom { margin-right: 3px; }
+
+ indicator { min-height: ($_marks_length - 3px); }
+ }
+ }
+
+ // *WARNING* scale with marks madness following
+
+ // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for
those...
+ $suffix: if($variant == 'light', '', '-dark');
+
+ @each $dir_class, $dir_infix in ('horizontal', 'horz'),
+ ('vertical', 'vert') {
+ @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+ ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
+ @each $state, $state_infix in ('', ''),
+ (':hover', '-hover'),
+ (':active', '-active'),
+ (':disabled', '-insensitive') {
+ &.#{$dir_class}.#{$marks_class} {
+
+ > trough > slider {
+ &#{$state} {
+ // an asymmetric slider asset is used here, so the margins are uneven, the smaller
+ // margin is set on the point side.
+ margin: -10px;
+ $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+ border-style: none;
+ border-radius: 0;
+
+ background-color: transparent;
+ background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+
+ $_scale_slider_bg_pos: bottom;
+
+ @if $dir_class == 'horizontal' {
+ min-height: 26px;
+ min-width: 22px;
+
+ @if $marks_infix == 'scale-has-marks-above' {
+ margin-top: -14px;
+
+ $_scale_slider_bg_pos: top;
+ }
+
+ @else { margin-bottom: -14px; }
+ }
+
+ @else {
+ min-height: 22px;
+ min-width: 26px;
+
+ @if $marks_infix == 'scale-has-marks-above' {
+ margin-left: -14px;
+
+ $_scale_slider_bg_pos: left bottom;
+ }
+
+ @else {
+ margin-right: -14px;
+
+ $_scale_slider_bg_pos: right bottom;
+ }
+ }
+
+ background-position: $_scale_slider_bg_pos;
+ background-repeat: no-repeat;
+ box-shadow: none;
+ }
+ }
+
+ &.fine-tune > trough > slider {
+ @if $dir_class == 'horizontal' {
+ // bigger negative margins to make the trough grow here as well
+ margin: -7px -10px;
+
+ @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
+
+ @else { margin-bottom: -11px; }
+ }
+
+ @else {
+ margin: -10px -7px;
+
+ @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
+
+ @else { margin-right: -11px; }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.color {
+ min-height: 0;
+ min-width: 0;
+
+ > trough {
+ background-image: image($borders_color);
+ background-repeat: no-repeat;
+ }
+
+ &.horizontal {
+ padding: 0 0 15px 0;
+
+ > trough {
+ padding-bottom: 4px;
+ background-position: 0 -3px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ > slider {
+ &:dir(ltr), &:dir(rtl) { // specificity bump
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 15px;
+
+ > trough {
+ padding-left: 4px;
+ background-position: 3px 0;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+
+ > slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 15px 0 0;
+
+ > trough {
+ padding-right: 4px;
+ background-position: -3px 0;
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+
+ > slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+
+ &.fine-tune {
+ &.horizontal {
+ &:dir(ltr), &:dir(rtl) { // specificity bump
+ padding: 0 0 12px 0;
+
+ > trough {
+ padding-bottom: 7px;
+ background-position: 0 -6px;
+
+ > slider {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 12px;
+
+ > trough {
+ padding-left: 7px;
+ background-position: 6px 0;
+
+ > slider {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 12px 0 0;
+
+ > trough {
+ padding-right: 7px;
+ background-position: -6px 0;
+
+ > slider {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
