github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_navbar.scss (about)

     1  nav {
     2    color: $navbar-font-color;
     3    @extend .z-depth-1;
     4    background-color: $primary-color;
     5    width: 100%;
     6    height: $navbar-height-mobile;
     7    line-height: $navbar-height-mobile;
     8  
     9    a { color: $navbar-font-color; }
    10  
    11    .nav-wrapper {
    12      position: relative;
    13      height: 100%;
    14  
    15      i {
    16        display: block;
    17        font-size: 2rem;
    18      }
    19    }
    20  
    21    @media #{$large-and-up} {
    22      a.button-collapse { display: none; }
    23    }
    24  
    25  
    26    // Collapse button
    27    .button-collapse {
    28      float: left;
    29      position: relative;
    30      z-index: 1;
    31      height: $navbar-height-mobile;
    32  
    33      i {
    34        font-size: 2.7rem;
    35        height: $navbar-height-mobile;
    36        line-height: $navbar-height-mobile;
    37      }
    38    }
    39  
    40  
    41    // Logo
    42    .brand-logo {
    43      position: absolute;
    44      color: $navbar-font-color;
    45      display: inline-block;
    46      font-size: $navbar-brand-font-size;
    47      padding: 0;
    48      white-space: nowrap;
    49  
    50      &.center {
    51        left: 50%;
    52        @include transform(translateX(-50%));
    53      }
    54  
    55      @media #{$medium-and-down} {
    56        left: 50%;
    57        @include transform(translateX(-50%));
    58      }
    59  
    60      &.right {
    61        right: 0.5rem;
    62        padding: 0;
    63      }
    64    }
    65  
    66  
    67    // Navbar Links
    68    ul {
    69      margin: 0;
    70  
    71      li {
    72        @include transition(background-color .3s);
    73        float: left;
    74        padding: 0;
    75  
    76        &:hover, &.active {
    77          background-color: rgba(0,0,0,.1);
    78        }
    79      }
    80      a {
    81        font-size: 1rem;
    82        color: $navbar-font-color;
    83        display: block;
    84        padding: 0 15px;
    85      }
    86  
    87      &.left {
    88        float: left;
    89      }
    90    }
    91  
    92    // Navbar Search Form
    93    .input-field {
    94      margin: 0;
    95  
    96      input {
    97        height: 100%;
    98        font-size: 1.2rem;
    99        border: none;
   100        padding-left: 2rem;
   101  
   102        &:focus, &[type=text]:valid, &[type=password]:valid,
   103        &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
   104          border: none;
   105          box-shadow: none;
   106        }
   107      }
   108      label {
   109        top: 0;
   110        left: 0;
   111  
   112        i {
   113          color: rgba(255,255,255,.7);
   114          @include transition(color .3s);
   115        }
   116        &.active i { color: $navbar-font-color; }
   117        &.active {
   118          @include transform(translateY(0));
   119        }
   120      }
   121  
   122    }
   123  
   124  }
   125  
   126  // Fixed Navbar
   127  .navbar-fixed {
   128    position: relative;
   129    height: $navbar-height-mobile;
   130    z-index: 998;
   131  
   132    nav {
   133      position: fixed;
   134    }
   135  }
   136  @media #{$medium-and-up} {
   137    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
   138      height: $navbar-height;
   139      line-height: $navbar-height;
   140    }
   141    .navbar-fixed {
   142      height: $navbar-height;
   143    }
   144  }