From 5a5afc37ff5dbbca358a2e327bf674e08d5f09c8 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Wed, 29 Apr 2020 14:16:38 +0200 Subject: [PATCH] Adwaita: radios and checks for menus - smaller, no border for checks, different alignments See https://gitlab.gnome.org/GNOME/gtk/-/issues/2675 --- gtk/theme/Adwaita/_colors.scss | 6 ++- gtk/theme/Adwaita/_common.scss | 96 ++++++++++++++------------------- gtk/theme/Adwaita/_drawing.scss | 23 ++++++-- 3 files changed, 65 insertions(+), 60 deletions(-) diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index be1215d795..a3f4c69a2c 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -73,8 +73,10 @@ $suggested_bg_color: $selected_bg_color; $suggested_border_color: $selected_borders_color; $progress_bg_color: $selected_bg_color; $progress_border_color: $selected_borders_color; -$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%)); +$checkradio_bg_color: $selected_bg_color; $checkradio_fg_color: $selected_fg_color; -$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%)); +$checkradio_borders_color: if($variant == 'light',darken($selected_bg_color,10%),darken($selected_bg_color,20%)); +$switch_bg_color: $selected_bg_color; +$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%)); $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7)); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 23aafc8807..cbbaad7936 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2263,9 +2263,9 @@ switch { &:checked { color: $selected_fg_color; - border-color: $checkradio_borders_color; - background-color: $checkradio_bg_color; - text-shadow: 0 1px transparentize($selected_borders_color, 0.5), + border-color: $switch_borders_color; + background-color: $switch_bg_color; + text-shadow: 0 1px transparentize($switch_borders_color, 0.5), 0 0 2px transparentize(white, 0.4); } @@ -2285,9 +2285,9 @@ switch { &:checked { @if $variant == 'light' { color: $backdrop_bg_color; } - border-color: if($variant == 'light', $checkradio_borders_color, - $selected_borders_color); - background-color: $checkradio_bg_color; + border-color: if($variant == 'light', $switch_borders_color, + $switch_borders_color); + background-color: $switch_bg_color; } &:disabled { @@ -2320,7 +2320,7 @@ switch { } } - &:checked > slider { border: 1px solid $checkradio_borders_color; } + &:checked > slider { border: 1px solid $switch_borders_color; } &:disabled > slider { @include button(insensitive); } @@ -2331,7 +2331,7 @@ switch { @include button(backdrop); } - &:checked > slider { border-color: $checkradio_borders_color; } + &:checked > slider { border-color: $switch_borders_color; } &:disabled > slider { @include button(backdrop-insensitive); } } @@ -2341,11 +2341,11 @@ switch { @if $variant == 'light' { box-shadow: none; - border-color: $checkradio_borders_color; + border-color: $switch_borders_color; - &:backdrop { border-color: $checkradio_borders_color; } + &:backdrop { border-color: $switch_borders_color; } - > slider { &:checked, & { border-color: $checkradio_borders_color; } } + > slider { &:checked, & { border-color: $switch_borders_color; } } } } } @@ -2487,31 +2487,6 @@ radio { -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } } -// ANIMATION: -// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes, -// the transformation is set on the active state and it get reset on the checked state. -radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); } - -check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } - -radio, -check { - &:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested - - &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { - -gtk-icon-transform: unset; - transition: 400ms; - } -} - -menu menuitem { - @at-root %menu_check_radio, - radio, - check { - &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; } - } -} - treeview.view check, treeview.view radio { &:selected { @@ -4366,7 +4341,7 @@ $_menu-padding: 12px; popover.menu { padding: 0px; - & box.inline-buttons { + box.inline-buttons { padding: 0 $_menu-padding; button.image-button.model { @@ -4383,7 +4358,7 @@ popover.menu { } } - & box.circular-buttons { + box.circular-buttons { padding: 6px $_menu-padding; button.circular.image-button.model { @@ -4406,33 +4381,44 @@ popover.menu { margin: 6px 0; } - & accelerator { + accelerator { color: gtkalpha(currentColor,0.55); &:dir(ltr) { margin-left: $_menu-padding; } &:dir(rtl) { margin-right: $_menu-padding; } } - & check, - & radio { - @extend %menu_check_radio; + check, + radio { + @include check('menu', 'transparent', $text_color); + + &:hover, &:active { + @include check('menu-active', 'transparent', $selected_fg_color); + } } - & arrow.left, - & radio.left, - & check.left { - margin-left: 0; - margin-right: 8px; + //only menu radios have a border + radio { border-color: $borders_color; + &:active, &:hover { + border-color: transparentize($selected_fg_color,0.5); + } } - & arrow.right, - & radio.right, - & check.right { - margin-left: 8px; - margin-right: 0; + arrow.left, + radio.left, + check.left { + margin-left: -2px; + margin-right: 6px; } - & modelbutton { + arrow.right, + radio.right, + check.right { + margin-left: 6px; + margin-right: -2px; + } + + modelbutton { min-height: 30px; min-width: 40px; padding: 0 $_menu-padding; @@ -4441,9 +4427,9 @@ popover.menu { &:selected { @extend %selected_items; } } - & label.title { + label.title { font-weight: bold; - padding: 4px $_menu-padding; + padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing } } diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 7e9e68ca31..467be6c817 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -537,7 +537,7 @@ * Check and Radio buttons * ***************************/ - @mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) { + @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) { // Check/Radio drawing function // // $t: check/radio type, @@ -546,9 +546,9 @@ // $checked: bool to chose between checked/unchecked // // possible $t values: - // normal, hover, active, insensitive, backdrop, backdrop-insensitive + // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu - $_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color); + $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color); $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7)); @if $t==normal { @@ -583,4 +583,21 @@ box-shadow: none; color: transparentize($tc, 0.3); } + + @if $t==menu { + transform: scale(0.8); + border-width: 1.2px; + border-color: transparent; + box-shadow: none; + background-image: image(transparent); + color: $tc; + } + + @if $t==menu-active { + transform: scale(0.8); + border-width: 1.2px; + color: $tc; + box-shadow: none; + background-image: image(transparent); + } }