dh_demo

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

WikiToolbar.module.scss (961B)

      1 @use 'core/vars';
      2 @use 'core/colors';
      3 @use 'core/elevate';
      4 @use 'core/typography';
      5 @use 'sass:math';
      6 
      7 $padding: 0 (vars.$gap * 2);
      8 $margin-bottom: vars.$gap;
      9 $item-padding: math.div(vars.$gap, 2) vars.$gap;
     10 $item-line-height: 1.5rem;
     11 $item-min-width: 5rem;
     12 
     13 .toolbar {
     14   display: flex;
     15   padding: $padding;
     16   justify-content: flex-end;
     17   margin-bottom: $margin-bottom;
     18 }
     19 
     20 .item {
     21   min-width: $item-min-width;
     22   border: 0;
     23   line-height: $item-line-height;
     24   padding: $item-padding;
     25   background: transparent;
     26   text-align: center;
     27   cursor: pointer;
     28   user-select: none;
     29 
     30   @include typography.apply('label-medium');
     31 
     32   @include colors.apply-themes() using ($theme) {
     33     color: colors.get($theme, 'on-surface');
     34     background: colors.get($theme, 'surface');
     35     transition: background 150ms;
     36     border-radius: 999px;
     37 
     38     &:hover {
     39       @include elevate.apply-background-color($theme, 1, 'primary');
     40     }
     41   }
     42 
     43   &:hover {
     44     text-decoration: none;
     45   }
     46 }