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

   1 // Bootswatch.less
   2 // Swatch: Spacelab
   3 // Version: 2.1.0
   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         .nav-collapse.collapse {
  60
  61                 .navbar-search {
  62                         border-top: none;
  63                         border-bottom: none;
  64                 }
  65
  66                 & > .nav li > a:hover {
  67                         background-color: @linkColor;
  68                         color: @white;
  69                         text-shadow: none;
  70                 }
  71         }
  72
  73         &-inverse {
  74
  75                 .brand {
  76                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  77
  78                         &:hover {
  79                                 color: @white;
  80                         }
  81                 }
  82
  83                 .nav > li > a {
  84                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  85                 }
  86
  87                 .nav li.dropdown.open > .dropdown-toggle .caret,
  88                 .nav li.dropdown:hover > .dropdown-toggle .caret,
  89                 .nav li.dropdown.open:hover > .dropdown-toggle .caret {
  90                         border-top-color: @white;
  91                 }
  92
  93                 .nav-collapse.collapse {
  94                         .nav li > a,
  95                         .nav-header {
  96                                 color: @grayLighter;
  97                         }
  98                 }
  99
 100                 .navbar-search .search-query,
 101                 .navbar-search .search-query:hover {
 102
 103                         color: @white;
 104
 105                         .placeholder(@grayLighter);
 106                 }
 107         }
 108 }
 109
 110 div.subnav {
 111
 112         .nav > li > a {
 113
 114                 color: @textColor;
 115
 116                 &:hover {
 117                         color: @linkColor;
 118                 }
 119         }
 120
 121         .nav > li.active > a {
 122
 123                 color: @textColor;
 124
 125                 &:hover {
 126                         color: @textColor;
 127                 }
 128         }
 129
 130         .nav > li.dropdown > .dropdown-toggle {
 131                 background-color: transparent;
 132         }
 133
 134         .nav > li.dropdown.open > .dropdown-toggle {
 135
 136                 border-left: 1px solid whiteSmoke;
 137                 border-right: 1px solid #E5E5E5;
 138                 color: @textColor;
 139
 140                 &:hover {
 141                         color: @linkColor;
 142                 }
 143         }
 144 }
 145
 146 // NAV
 147 // -----------------------------------------------------
 148
 149 .nav > li.dropdown > .dropdown-toggle,
 150 .nav > li.dropdown.active > .dropdown-toggle,
 151 .nav > li.dropdown.open > .dropdown-toggle,
 152 .nav > li.dropdown.open.active > .dropdown-toggle  {
 153
 154         .caret {
 155                 border-top: 4px solid @textColor;
 156                 border-top-color: @textColor;
 157                 opacity: 1;
 158         }
 159
 160         &:hover .caret {
 161                 border-top: 4px solid @linkColorHover;
 162                 border-top-color: @linkColorHover;
 163         }
 164 }
 165
 166 // BUTTONS
 167 // -----------------------------------------------------
 168
 169 .btn {
 170
 171
 172         &-info,
 173         &-info:hover,
 174         &-info.disabled {
 175
 176                 color: @textColor;
 177                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
 178
 179                 .caret {
 180                         border-top-color: @textColor;
 181                         border-bottom-color: @textColor;
 182                 }
 183         }
 184
 185 }
 186
 187 /*.btn {
 188         .buttonBackground(#F4F4F4, #ECECEC);
 189         color: @textColor;
 190         text-shadow: none;
 191
 192
 193         &:hover,
 194         &:active,
 195         &.active,
 196         &.disabled,
 197         &[disabled] {
 198                 color: @grayDark;
 199         }
 200 }
 201
 202 .btn-primary {
 203         .buttonBackground(#909090, #3F3F3F);
 204 }
 205
 206 .btn-warning {
 207   .buttonBackground(lighten(@yellow, 15%), @yellow);
 208 }
 209
 210 .btn-danger {
 211   .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
 212 }
 213
 214 .btn-success {
 215   .buttonBackground(#8ADD6D, #60B044);
 216 }
 217
 218 .btn-info {
 219   .buttonBackground(lighten(#4488BB, 15%), #4488BB);
 220 }
 221
 222 .btn-inverse {
 223   .buttonBackground(lighten(@purple, 5%), @purple);
 224 }*/
 225
 226 // TABLES
 227 // -----------------------------------------------------
 228
 229 // FORMS
 230 // -----------------------------------------------------
 231
 232 .control-group.warning {
 233         .formFieldState(#E29235, #E29235, @warningBackground);
 234 }
 235
 236 .control-group.error {
 237         .formFieldState(#C00, #C00, @errorBackground);
 238 }
 239
 240 .control-group.success {
 241         .formFieldState(#2BA949, #2BA949, @successBackground);
 242 }
 243
 244 // DROPDOWNS
 245 // -----------------------------------------------------
 246
 247 // ALERTS, LABELS, BADGES
 248 // -----------------------------------------------------
 249
 250 .alert {
 251         color: @white;
 252         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 253 }
 254
 255 .label, .badge {
 256
 257         padding-top: 4px;
 258
 259         &-important {
 260                 background-color: @red;
 261         }
 262
 263         &-warning {
 264                 background-color: @orange;
 265         }
 266
 267         &-success {
 268                 background-color: @green;
 269         }
 270
 271         &-info {
 272                 background-color: @blue;
 273         }
 274 }
 275
 276 // MISC
 277 // -----------------------------------------------------
 278
 279 .well {
 280         background-color: @grayLighter;
 281 }
 282
 283 .hero-unit {
 284     .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
 285     border: 1px solid rgba(0,0,0,.05);
 286 }
 287
 288 // MEDIA QUERIES
 289 // -----------------------------------------------------