git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_pills.scss

   1 .nav-pills{
   2
   3     > li {
   4         > a{
   5             line-height: $mdb-btn-font-size-base * 2;
   6             text-transform: uppercase;
   7             font-size: $mdb-btn-font-size-base;
   8             font-weight: $font-weight-bold;
   9             min-width: 100px;
  10             text-align: center;
  11             color: $gray;
  12             transition: all .3s;
  13
  14             &:hover{
  15                 background-color: rgba(200, 200, 200, 0.2);
  16             }
  17         }
  18
  19         i{
  20             display: block;
  21             font-size: 30px;
  22             padding: 15px 0;
  23         }
  24
  25         &.active > a{
  26             &,
  27             &:focus,
  28             &:hover{
  29                 background-color: $brand-primary;
  30                 color: $white-color;
  31                 @include shadow-big-color($brand-primary);
  32             }
  33         }
  34
  35     }
  36
  37     &.nav-pills-info{
  38         > li {
  39             &.active > a{
  40                 &,
  41                 &:focus,
  42                 &:hover{
  43                     background-color: $brand-info;
  44                     @include shadow-big-color($brand-info);
  45                 }
  46             }
  47         }
  48     }
  49
  50     &.nav-pills-success{
  51         > li {
  52             &.active > a{
  53                 &,
  54                 &:focus,
  55                 &:hover{
  56                     background-color: $brand-success;
  57                     @include shadow-big-color($brand-success);
  58                 }
  59             }
  60         }
  61     }
  62
  63     &.nav-pills-warning{
  64         > li {
  65             &.active > a{
  66                 &,
  67                 &:focus,
  68                 &:hover{
  69                     background-color: $brand-warning;
  70                     @include shadow-big-color($brand-warning);
  71                 }
  72             }
  73         }
  74     }
  75
  76     &.nav-pills-danger{
  77         > li {
  78             &.active > a{
  79                 &,
  80                 &:focus,
  81                 &:hover{
  82                     background-color: $brand-danger;
  83                     @include shadow-big-color($brand-danger);
  84                 }
  85             }
  86         }
  87     }
  88 }
  89 .tab-space{
  90     padding: 20px 0 50px 0px;
  91 }