[libadwaita/wip/jimmac/button-chin] buttons: subtle affordance indicator




commit 70a3979848b71415f72396c7d5e5dfcb9eebab7c
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Oct 29 15:02:54 2021 +0200

    buttons: subtle affordance indicator
    
    - very subtle chin. would make more prominent for dark, but
      $variant isn't accessible from the button context

 src/stylesheet/widgets/_buttons.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d3ae7b13..9c5d7672 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -1,4 +1,5 @@
 $button_color: gtkalpha(currentColor, .1);
+$button_chin_color: rgba(0,0,0,0.03); /* hardcode. can't get $variant context from here to invert for dark */
 $button_hover_color: gtkalpha(currentColor, .15);
 $button_active_color: gtkalpha(currentColor, .25);
 $button_checked_color: gtkalpha(currentColor, .2);
@@ -15,6 +16,7 @@ button {
     padding: 5px 10px;
     border-radius: $button_radius;
     font-weight: bold;
+    box-shadow: inset 0 -2px 0 1px $button_chin_color;
 
     @include focus-ring();
     transition: $button_transition;
@@ -23,7 +25,8 @@ button {
       background-color: $button_color;
 
       @if $contrast == 'high' {
-        box-shadow: inset 0 0 0 1px $border_color;
+        box-shadow: inset 0 -2px 0 1px $button_chin_color,
+        inset 0 0 0 1px $border_color;
       }
 
       &:hover {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]