github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_navbar.scss (about)

     1  nav {
     2    &.nav-extended {
     3      height: auto;
     4  
     5      .nav-wrapper {
     6        min-height: $navbar-height-mobile;
     7        height: auto;
     8      }
     9  
    10      .nav-content {
    11        position: relative;
    12        line-height: normal;
    13      }
    14    }
    15  
    16    color: $navbar-font-color;
    17    @extend .z-depth-1;
    18    background-color: $primary-color;
    19    width: 100%;
    20    height: $navbar-height-mobile;
    21    line-height: $navbar-line-height-mobile;
    22  
    23    a { color: $navbar-font-color; }
    24  
    25    i,
    26    [class^="mdi-"], [class*="mdi-"],
    27    i.material-icons {
    28      display: block;
    29      font-size: 24px;
    30      height: $navbar-height-mobile;
    31      line-height: $navbar-line-height-mobile;
    32    }
    33  
    34    .nav-wrapper {
    35      position: relative;
    36      height: 100%;
    37    }
    38  
    39    @media #{$large-and-up} {
    40      a.button-collapse { display: none; }
    41    }
    42  
    43  
    44    // Collapse button
    45    .button-collapse {
    46      float: left;
    47      position: relative;
    48      z-index: 1;
    49      height: $navbar-height-mobile;
    50      margin: 0 18px;
    51  
    52      i {
    53        height: $navbar-height-mobile;
    54        line-height: $navbar-line-height-mobile;
    55      }
    56    }
    57  
    58  
    59    // Logo
    60    .brand-logo {
    61      position: absolute;
    62      color: $navbar-font-color;
    63      display: inline-block;
    64      font-size: $navbar-brand-font-size;
    65      padding: 0;
    66      white-space: nowrap;
    67  
    68      &.center {
    69        left: 50%;
    70        transform: translateX(-50%);
    71      }
    72  
    73      @media #{$medium-and-down} {
    74        left: 50%;
    75        transform: translateX(-50%);
    76  
    77        &.left, &.right {
    78          padding: 0;
    79          transform: none;
    80        }
    81  
    82        &.left { left: 0.5rem; }
    83        &.right {
    84          right: 0.5rem;
    85          left: auto;
    86        }
    87      }
    88  
    89      &.right {
    90        right: 0.5rem;
    91        padding: 0;
    92      }
    93  
    94      i,
    95      [class^="mdi-"], [class*="mdi-"],
    96      i.material-icons {
    97        float: left;
    98        margin-right: 15px;
    99      }
   100    }
   101  
   102  
   103    // Title
   104    .nav-title {
   105      display: inline-block;
   106      font-size: 32px;
   107      padding: 28px 0;
   108    }
   109  
   110  
   111    // Navbar Links
   112    ul {
   113      margin: 0;
   114  
   115      li {
   116        transition: background-color .3s;
   117        float: left;
   118        padding: 0;
   119  
   120        &.active {
   121          background-color: rgba(0,0,0,.1);
   122        }
   123      }
   124      a {
   125        transition: background-color .3s;
   126        font-size: $navbar-font-size;
   127        color: $navbar-font-color;
   128        display: block;
   129        padding: 0 15px;
   130        cursor: pointer;
   131  
   132        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
   133          margin-top: -2px;
   134          margin-left: 15px;
   135          margin-right: 15px;
   136  
   137          & > .material-icons {
   138            height: inherit;
   139            line-height: inherit;
   140          }
   141        }
   142  
   143        &:hover {
   144          background-color: rgba(0,0,0,.1);
   145        }
   146      }
   147  
   148      &.left {
   149        float: left;
   150      }
   151    }
   152  
   153    // Navbar Search Form
   154    form {
   155      height: 100%;
   156    }
   157  
   158    .input-field {
   159      margin: 0;
   160      height: 100%;
   161  
   162      input {
   163        height: 100%;
   164        font-size: 1.2rem;
   165        border: none;
   166        padding-left: 2rem;
   167  
   168        &:focus, &[type=text]:valid, &[type=password]:valid,
   169        &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
   170          border: none;
   171          box-shadow: none;
   172        }
   173      }
   174  
   175      label {
   176        top: 0;
   177        left: 0;
   178  
   179        i {
   180          color: rgba(255,255,255,.7);
   181          transition: color .3s;
   182        }
   183        &.active i { color: $navbar-font-color; }
   184      }
   185    }
   186  }
   187  
   188  // Fixed Navbar
   189  .navbar-fixed {
   190    position: relative;
   191    height: $navbar-height-mobile;
   192    z-index: 997;
   193  
   194    nav {
   195      position: fixed;
   196    }
   197  }
   198  @media #{$medium-and-up} {
   199    nav.nav-extended .nav-wrapper {
   200      min-height: $navbar-height;
   201    }
   202    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
   203      height: $navbar-height;
   204      line-height: $navbar-line-height;
   205    }
   206    .navbar-fixed {
   207      height: $navbar-height;
   208    }
   209  }