git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/navs.less

   1 /*
   2     Component: Navs
   3 */
   4
   5 /* NAV PILLS */
   6 .nav.nav-pills {
   7     > li > a {
   8         border-top: 3px solid transparent;
   9         .border-radius(0);
  10         color: #444;
  11         > .fa, > .glyphicon, > .ion {
  12             margin-right: 5px;
  13         }
  14     }
  15     > li.active > a, > li.active > a:hover {
  16         background-color: #f6f6f6;
  17         border-top-color: @light-blue;
  18         color: #444;
  19     }
  20     > li.active > a {
  21         font-weight: 600;
  22     }
  23     > li > a:hover {
  24         background-color: #f6f6f6;
  25     }
  26
  27     &.nav-stacked {
  28         > li > a {
  29             border-top: 0;
  30             border-left: 3px solid transparent;
  31             .border-radius(0);
  32             color: #444;
  33         }
  34         > li.active > a, > li.active > a:hover {
  35             background-color: #f6f6f6;
  36             border-left-color: @light-blue;
  37             color: #444;
  38         }
  39
  40         > li.header {
  41             border-bottom: 1px solid #ddd;
  42             color: #777;
  43             margin-bottom: 10px;
  44             padding: 5px 10px;
  45             text-transform: uppercase;
  46         }
  47     }
  48 }
  49
  50 /* NAV TABS */
  51 .nav-tabs-custom {
  52     margin-bottom: 20px;
  53     background: #fff;
  54     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  55     > .nav-tabs {
  56         margin: 0;
  57         border-bottom-color: #f4f4f4;
  58         > li {
  59             border-top: 3px solid transparent;
  60             margin-bottom: -2px;
  61             > a {
  62                 .border-radius(0)!important;
  63                 &, &:hover {
  64                     background: transparent;
  65                     margin: 0;
  66                 }
  67             }
  68             &:not(.active) {
  69                 > a:hover, > a:focus, > a:active {
  70                     border-color: transparent;
  71                 }
  72             }
  73             margin-right: 5px;
  74         }
  75
  76         > li.active {
  77             border-top-color: @light-blue;
  78             & > a, &:hover > a{
  79                 background-color: #fff;
  80
  81             }
  82             > a {
  83                 border-top: 0;
  84                 border-left-color: #f4f4f4;
  85                 border-right-color: #f4f4f4;
  86             }
  87
  88         }
  89
  90         > li:first-of-type {
  91             margin-left: 0px;
  92             &.active {
  93                 > a {
  94                     border-left-width: 0;
  95                 }
  96             }
  97         }
  98
  99         //Pulled to the right
 100         &.pull-right {
 101             float: none!important;
 102             > li {
 103                 float: right;
 104             }
 105             > li:first-of-type {
 106                 margin-right: 0px;
 107                 &.active {
 108                     > a {
 109                         border-left-width: 1px;
 110                         border-right-width: 0px;
 111                     }
 112                 }
 113             }
 114         }
 115
 116         > li.header {
 117             font-weight: 400;
 118             line-height: 35px;
 119             padding: 0 10px;
 120             font-size: 20px;
 121             color: #444;
 122             cursor: default;
 123             > .fa, > .glyphicon, > .ion {
 124                 margin-right: 10px;
 125             }
 126         }
 127     }
 128
 129     > .tab-content {
 130         background: #fff;
 131         padding: 10px;
 132     }
 133 }
 134
 135 /* PAGINATION */
 136 .pagination {
 137     > li > a {
 138         background: #fafafa;
 139         color: #666;
 140         -webkit-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.09);
 141         -moz-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.09);
 142         box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.09);
 143     }
 144     > li:first-of-type a, > li:last-of-type a {
 145         .border-radius(0);
 146     }
 147 }