dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Button.module.scss (1165B)

      1 @use 'sass:map';
      2 @use 'core/elevate';
      3 @use 'core/colors';
      4 
      5 $min-width: 5rem;
      6 $padding: 0 1rem;
      7 $height: 2rem;
      8 $border-color: 'outline';
      9 $border-radius: 9999px;
     10 
     11 @mixin _button-color($theme, $color) {
     12   @include elevate.apply-background-color($theme, 1, $color);
     13   color: colors.get($theme, $color);
     14 
     15   &:hover {
     16     @include elevate.apply-background-color($theme, 2, $color);
     17   }
     18 
     19   &:active {
     20     @include elevate.apply-background-color($theme, 1, $color);
     21   }
     22 
     23   &.is-disabled {
     24     @include elevate.apply-background-color($theme, 0, $color);
     25     color: rgba(colors.get($theme, $color), 0.5);
     26   }
     27 }
     28 
     29 .button {
     30   display: inline-block;
     31   min-width: $min-width;
     32   padding: $padding;
     33   height: $height;
     34   text-align: center;
     35   border: 1px solid transparent;
     36   border-radius: $border-radius;
     37   vertical-align: top;
     38   transition: background-color 100ms, box-shadow 100ms;
     39   user-select: none;
     40   cursor: pointer;
     41 
     42   @include colors.apply-themes using ($theme) {
     43     @include _button-color($theme, 'on-surface');
     44 
     45     @include colors.sets($theme) using ($key, $color, $color-on) {
     46       &.is-#{$key} {
     47         @include _button-color($theme, $color);
     48       }
     49     }
     50   }
     51 }