dh_demo

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

Navbar.module.scss (3819B)

      1 @use 'sass:math';
      2 @use 'core/colors';
      3 @use 'core/vars';
      4 @use 'core/typography';
      5 @use 'core/elevate';
      6 
      7 $height: 3.5rem;
      8 $shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
      9 $padding-horizontal: vars.$gap;
     10 $item-height: 2.5rem;
     11 $item-padding: 0 vars.$gap;
     12 $item-radius: 9999px;
     13 $item-hover-background-opacity: 10%;
     14 $dropdown-width: 10rem;
     15 $dropdown-radius: 0.5rem;
     16 $dropdown-label-padding: 0.5rem vars.$gap;
     17 
     18 @mixin _apply-navbar-color($theme, $color, $on-color) {
     19   background-color: colors.get($theme, $color);
     20   color: colors.get($theme, $on-color);
     21 
     22   .item:hover {
     23     background-color: rgba(colors.get($theme, $on-color), $item-hover-background-opacity);
     24   }
     25 }
     26 
     27 .navbar {
     28   padding: math.div(($height - $item-height), 2) 0;
     29   z-index: 10;
     30 
     31   @include colors.apply-themes() using ($theme) {
     32     @include _apply-navbar-color($theme, 'surface', 'on-surface');
     33 
     34     @include colors.container-sets using ($key, $color, $on-color) {
     35       &.is-#{$key} {
     36         @include _apply-navbar-color($theme, $color, $on-color)
     37       }
     38     }
     39   }
     40 
     41   & > .container {
     42     display: flex;
     43     padding: 0 $padding-horizontal;
     44     align-items: stretch;
     45     min-height: $item-height;
     46   }
     47 }
     48 
     49 // ----------------------------------------
     50 // Branding, Menu
     51 // ----------------------------------------
     52 
     53 .brand,
     54 .menu {
     55   display: flex;
     56   align-items: stretch;
     57 }
     58 
     59 .brand {
     60   flex-shrink: 0;
     61   @include typography.apply('title-medium');
     62 
     63   .navbar-item {
     64     font-weight: bold;
     65   }
     66 }
     67 
     68 .menu {
     69   flex: 1;
     70   justify-content: flex-end;
     71 
     72   &.is-centered {
     73     justify-content: center;
     74     margin-right: 0;
     75   }
     76 }
     77 
     78 // ----------------------------------------
     79 // Item
     80 // ----------------------------------------
     81 
     82 .item {
     83   display: flex;
     84   align-items: center;
     85   padding: $item-padding;
     86   line-height: $item-height;
     87   border-radius: $item-radius;
     88 
     89   &[href] {
     90     color: inherit;
     91 
     92     &, &:hover {
     93       text-decoration: none;
     94     }
     95   }
     96 }
     97 
     98 // ----------------------------------------
     99 // Dropdown item
    100 // ----------------------------------------
    101 
    102 .item.is-dropdown {
    103   position: relative;
    104   cursor: default;
    105 
    106   .dropdown {
    107     position: absolute;
    108     top: 100%;
    109     z-index: 10;
    110     min-width: $dropdown-width;
    111     margin-top: 0.5rem;
    112     padding: 0.5rem 0;
    113     box-shadow: $shadow;
    114     border-radius: $dropdown-radius;
    115     opacity: 0;
    116     visibility: hidden;
    117     transform: translateY(-0.5rem);
    118     transition: transform 100ms ease-in-out, opacity 150ms, visibility 150ms;
    119 
    120     .menu & {
    121       right: 0;
    122     }
    123 
    124     .brand & {
    125       left: 0;
    126     }
    127 
    128     @include elevate.apply-box-shadow(5);
    129 
    130     @include colors.apply-themes() using ($theme) {
    131       background-color: colors.get($theme, 'surface');
    132       color: colors.get($theme, 'on-surface');
    133 
    134       @include elevate.apply-background-color($theme, 5, 'surface-variant');
    135     }
    136 
    137     hr {
    138       margin: 0.5rem 0;
    139       border: 0;
    140       @include colors.apply-themes() using ($theme) {
    141         border-top: 1px solid rgba(colors.get($theme, 'on-surface-variant'), 0.24);
    142       }
    143     }
    144 
    145     .item {
    146       padding: $item-padding;
    147       line-height: $item-height;
    148       border-radius: 0;
    149     }
    150 
    151     .item:hover {
    152       //background-color: rgba(colors.get('on-surface'), $item-hover-background-opacity);
    153     }
    154   }
    155 
    156   &:hover {
    157     .dropdown {
    158       opacity: 1;
    159       visibility: visible;
    160       transform: translateY(0);
    161     }
    162   }
    163 }
    164 
    165 .dropdown-label {
    166   display: flex;
    167   align-items: center;
    168   padding: $dropdown-label-padding;
    169   line-height: $item-height;
    170   border-radius: $item-radius;
    171   cursor: default;
    172 
    173   @include typography.apply('label-medium');
    174 }
    175 
    176 // ----------------------------------------
    177 // Branding Divider
    178 // ----------------------------------------
    179 
    180 .branding-divider {
    181   width: vars.$gap;
    182   line-height: $item-height;
    183   text-align: center;
    184 
    185   &::before {
    186     content: '|'
    187   }
    188 }