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