git.roojs.org Git - bootswatch/blob - spacelab/bootswatch.less

   1 // Bootswatch.less
   2 // Swatch: Spacelab
   3 // Version: 2.0.2
   4 // -----------------------------------------------------
   5
   6 // NAVBAR
   7 // -----------------------------------------------------
   8
   9 // navbar style
  10 .navbar {
  11         border-bottom: 1px solid #CACACA;
  12
  13         .brand {
  14                 font-size: 20px;
  15                 font-weight: bold;
  16                 color: @textColor;
  17
  18                 &:hover {
  19                         color: @linkColor;
  20                 }
  21         }
  22 }
  23
  24 // navbar dropshadow
  25 .navbar .navbar-inner {
  26         .box-shadow(0 1px 0 rgba(255,255,255,0.4));
  27         .box-shadow(0 0 10px rgba(0,0,0,0.1));
  28 }
  29
  30 // nav item typography
  31 .navbar .nav > li > a {
  32         font-weight: bold;
  33         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  34 }
  35
  36 .navbar .nav .active > a {
  37         background-color: transparent;
  38         color: @textColor;
  39
  40         &:hover {
  41                 background-color: transparent;
  42                 color: @linkColor;
  43         }
  44 }
  45
  46 .navbar .nav > li > a:hover,
  47 .navbar .nav .open.dropdown .dropdown-toggle {
  48         color: @linkColor !important;
  49 }
  50
  51 .navbar .nav .dropdown-toggle .caret {
  52         border-top-color: @textColor;
  53         opacity: 1;
  54 }
  55
  56 .nav .open.dropdown .caret,
  57 .nav .dropdown-toggle:hover .caret {
  58         border-top-color: @linkColor !important;
  59 }
  60
  61 div.subnav .nav > li > a {
  62         font-weight: bold;
  63         color: #777;
  64
  65         &:hover {
  66                 color: @linkColor;
  67         }
  68 }
  69
  70 div.subnav .nav > li.active > a {
  71         color: @textColor;
  72
  73         &:hover {
  74                 color: @grayDark;
  75         }
  76 }
  77
  78 div.subnav .nav > li > .dropdown-toggle {
  79         background-color: transparent;
  80         color: @linkColor;
  81 }
  82
  83 .navbar-search .search-query,
  84 .navbar-search .search-query:hover {
  85         border: none;
  86         color: @grayLight;
  87         .placeholder(@grayLight);
  88         .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  89
  90     &:focus,
  91     &.focused {
  92                 .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  93                 color: @textColor;
  94         }
  95 }
  96
  97 .navbar .nav-collapse.in > .nav li > a {
  98
  99         color: @textColor;
 100
 101         .caret {
 102                 border-top-color: @grayLight;
 103         }
 104 }
 105
 106
 107 .navbar .nav-collapse.in > .nav li > a:hover {
 108         text-shadow: none;
 109         color: @linkColor;
 110         background-color: transparent;
 111
 112         .caret {
 113                 border-top-color: @white;
 114         }
 115 }
 116
 117 // BUTTON
 118 // -----------------------------------------------------
 119
 120 .btn {
 121         .buttonBackground(#F4F4F4, #ECECEC);
 122 }
 123
 124 .btn-primary {
 125         .buttonBackground(#909090, #3F3F3F);
 126 }
 127
 128 .btn-warning {
 129   .buttonBackground(lighten(@yellow, 15%), @yellow);
 130 }
 131
 132 .btn-danger {
 133   .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
 134 }
 135
 136 .btn-success {
 137   .buttonBackground(#8ADD6D, #60B044);
 138 }
 139
 140 .btn-info {
 141   .buttonBackground(lighten(#4488BB, 15%), #4488BB);
 142 }
 143
 144 .btn-inverse {
 145   .buttonBackground(lighten(@purple, 5%), @purple);
 146 }
 147
 148 // FORMS
 149 // -----------------------------------------------------
 150
 151 .control-group.warning {
 152   .formFieldState(#E29235, #E29235, @warningBackground);
 153 }
 154
 155 .control-group.error {
 156   .formFieldState(#C00, #C00, @errorBackground);
 157 }
 158
 159 .control-group.success {
 160   .formFieldState(#2BA949, #2BA949, @successBackground);
 161 }
 162
 163
 164 // LABELS
 165 // -----------------------------------------------------
 166
 167 .label-important { background-color: #BD2C00; }
 168 .label-warning   { background-color: #E3E84D; }
 169 .label-success   { background-color: #6CC644; }
 170 .label-info      { background-color: #4183C4; }