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

   1 // Bootswatch.less
   2 // Swatch: Spacelab
   3 // Version: 2.1.1
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('http://fonts.googleapis.com/css?family=Muli');
  10
  11 // SCAFFOLDING
  12 // -----------------------------------------------------
  13
  14 // NAVBAR
  15 // -----------------------------------------------------
  16
  17 .navbar {
  18
  19         .navbar-inner {
  20                 border-bottom: 1px solid #CACACA;
  21                 .box-shadow(0 1px 0 rgba(255,255,255,0.4)~", "0 0 10px rgba(0,0,0,0.1));
  22         }
  23
  24         .brand {
  25
  26                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  27
  28                 &:hover {
  29                         color: @linkColor;
  30                 }
  31         }
  32
  33         .nav > li > a {
  34                 padding: 11px 10px 9px;
  35                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  36         }
  37
  38         .navbar-text {
  39                 margin-top: 2px;
  40                 padding: 0 10px;
  41                 line-height: 38px;
  42         }
  43
  44         .navbar-search .search-query,
  45         .navbar-search .search-query:hover {
  46                 margin-bottom: 0;
  47                 line-height: normal;
  48                 color: @grayLight;
  49                 .placeholder(@grayLight);
  50                 .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  51
  52             &:focus,
  53             &.focused {
  54                         .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  55                         color: @textColor;
  56                 }
  57         }
  58
  59         &-inverse {
  60
  61                 .brand {
  62                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  63
  64                         &:hover {
  65                                 color: @white;
  66                         }
  67                 }
  68
  69                 .nav > li > a {
  70                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  71                 }
  72
  73                 .nav li.dropdown.open > .dropdown-toggle .caret,
  74                 .nav li.dropdown:hover > .dropdown-toggle .caret,
  75                 .nav li.dropdown.open:hover > .dropdown-toggle .caret {
  76                         border-top-color: @white;
  77                 }
  78
  79                 .navbar-search .search-query,
  80                 .navbar-search .search-query:hover {
  81
  82                         color: @white;
  83
  84                         .placeholder(@grayLighter);
  85                 }
  86         }
  87 }
  88
  89 @media (max-width: @navbarCollapseWidth) {
  90
  91         .navbar .nav-collapse {
  92
  93                 .nav li > a:hover {
  94                         background-color: @linkColor;
  95                         color: @white;
  96                         text-shadow: none;
  97                 }
  98
  99                 .navbar-search {
 100                         border-top: none;
 101                         border-bottom: none;
 102                 }
 103         }
 104
 105         .navbar-inverse .nav-collapse {
 106
 107                 .nav li > a {
 108                         color: @grayLighter;
 109
 110                         &:hover {
 111                                 background-color: @linkColor !important;
 112                         }
 113                 }
 114
 115                 .nav-header {
 116                         color: @grayLighter;
 117                 }
 118         }
 119 }
 120
 121 div.subnav {
 122
 123         .nav > li > a {
 124
 125                 color: @textColor;
 126
 127                 &:hover {
 128                         color: @linkColor;
 129                 }
 130         }
 131
 132         .nav > li.active > a {
 133
 134                 color: @textColor;
 135
 136                 &:hover {
 137                         color: @textColor;
 138                 }
 139         }
 140
 141         .nav > li.dropdown > .dropdown-toggle {
 142                 background-color: transparent;
 143         }
 144
 145         .nav > li.dropdown.open > .dropdown-toggle {
 146
 147                 border-left: 1px solid whiteSmoke;
 148                 border-right: 1px solid #E5E5E5;
 149                 color: @textColor;
 150
 151                 &:hover {
 152                         color: @linkColor;
 153                 }
 154         }
 155 }
 156
 157 // NAV
 158 // -----------------------------------------------------
 159
 160 .nav > li.dropdown > .dropdown-toggle,
 161 .nav > li.dropdown.active > .dropdown-toggle,
 162 .nav > li.dropdown.open > .dropdown-toggle,
 163 .nav > li.dropdown.open.active > .dropdown-toggle  {
 164
 165         .caret {
 166                 border-top: 4px solid @textColor;
 167                 border-top-color: @textColor;
 168                 opacity: 1;
 169         }
 170
 171         &:hover .caret {
 172                 border-top: 4px solid @linkColorHover;
 173                 border-top-color: @linkColorHover;
 174         }
 175 }
 176
 177 // BUTTONS
 178 // -----------------------------------------------------
 179
 180 .btn {
 181
 182
 183         &-info,
 184         &-info:hover,
 185         &-info.disabled {
 186
 187                 color: @textColor;
 188                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
 189
 190                 .caret {
 191                         border-top-color: @textColor;
 192                         border-bottom-color: @textColor;
 193                 }
 194         }
 195
 196 }
 197
 198 /*.btn {
 199         .buttonBackground(#F4F4F4, #ECECEC);
 200         color: @textColor;
 201         text-shadow: none;
 202
 203
 204         &:hover,
 205         &:active,
 206         &.active,
 207         &.disabled,
 208         &[disabled] {
 209                 color: @grayDark;
 210         }
 211 }
 212
 213 .btn-primary {
 214         .buttonBackground(#909090, #3F3F3F);
 215 }
 216
 217 .btn-warning {
 218   .buttonBackground(lighten(@yellow, 15%), @yellow);
 219 }
 220
 221 .btn-danger {
 222   .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
 223 }
 224
 225 .btn-success {
 226   .buttonBackground(#8ADD6D, #60B044);
 227 }
 228
 229 .btn-info {
 230   .buttonBackground(lighten(#4488BB, 15%), #4488BB);
 231 }
 232
 233 .btn-inverse {
 234   .buttonBackground(lighten(@purple, 5%), @purple);
 235 }*/
 236
 237 // TABLES
 238 // -----------------------------------------------------
 239
 240 // FORMS
 241 // -----------------------------------------------------
 242
 243 .control-group.warning {
 244         .formFieldState(#E29235, #E29235, @warningBackground);
 245 }
 246
 247 .control-group.error {
 248         .formFieldState(#C00, #C00, @errorBackground);
 249 }
 250
 251 .control-group.success {
 252         .formFieldState(#2BA949, #2BA949, @successBackground);
 253 }
 254
 255 // DROPDOWNS
 256 // -----------------------------------------------------
 257
 258 // ALERTS, LABELS, BADGES
 259 // -----------------------------------------------------
 260
 261 .alert {
 262         color: @white;
 263         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 264 }
 265
 266 .label, .badge {
 267
 268         padding-top: 4px;
 269
 270         &-important {
 271                 background-color: @red;
 272         }
 273
 274         &-warning {
 275                 background-color: @orange;
 276         }
 277
 278         &-success {
 279                 background-color: @green;
 280         }
 281
 282         &-info {
 283                 background-color: @blue;
 284         }
 285 }
 286
 287 // MISC
 288 // -----------------------------------------------------
 289
 290 .well {
 291         background-color: @grayLighter;
 292 }
 293
 294 .hero-unit {
 295     .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
 296     border: 1px solid rgba(0,0,0,.05);
 297 }
 298
 299 // MEDIA QUERIES
 300 // -----------------------------------------------------