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

   1 // Spacelab 2.3.0
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
  10
  11 // SCAFFOLDING
  12 // -----------------------------------------------------
  13
  14 // NAVBAR
  15 // -----------------------------------------------------
  16
  17 .navbar {
  18
  19         .navbar-inner {
  20                 .box-shadow(0 1px 0 rgba(255,255,255,0.4)~", "0 1px 0 rgba(0,0,0,0.8));
  21         }
  22
  23         .brand {
  24
  25                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  26
  27                 &:hover {
  28                         color: @navbarLinkColorHover;
  29                 }
  30         }
  31
  32         .nav > li > a {
  33                 padding: 11px 10px 8px;
  34                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  35         }
  36
  37         .navbar-text {
  38                 padding: 11px 10px 8px;
  39                 line-height: inherit;
  40         }
  41
  42         .navbar-search .search-query,
  43         .navbar-search .search-query:hover {
  44                 margin-bottom: 0;
  45                 line-height: normal;
  46                 color: @grayLight;
  47                 .placeholder(@grayLight);
  48                 .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  49
  50             &:focus,
  51             &.focused {
  52                         .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  53                         color: @textColor;
  54                 }
  55         }
  56
  57         &-inverse {
  58
  59                 .brand {
  60                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  61
  62                         &:hover {
  63                                 color: @white;
  64                         }
  65                 }
  66
  67                 .nav > li > a {
  68                         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  69                 }
  70
  71                 .nav li.dropdown.open > .dropdown-toggle .caret,
  72                 .nav li.dropdown:hover > .dropdown-toggle .caret,
  73                 .nav li.dropdown.open:hover > .dropdown-toggle .caret {
  74                         border-top-color: @white;
  75                 }
  76
  77                 .navbar-search .search-query,
  78                 .navbar-search .search-query:hover {
  79
  80                         color: @white;
  81
  82                         .placeholder(@grayLighter);
  83                 }
  84         }
  85 }
  86
  87 @media (max-width: @navbarCollapseWidth) {
  88
  89         .navbar .nav-collapse {
  90
  91                 .nav li > a:hover {
  92                         background-color: @linkColor;
  93                         color: @white;
  94                         text-shadow: none;
  95                 }
  96
  97                 .navbar-search {
  98                         border-top: none;
  99                         border-bottom: none;
 100                 }
 101         }
 102
 103         .navbar-inverse .nav-collapse {
 104
 105                 .nav li > a {
 106                         color: @grayLighter;
 107
 108                         &:hover {
 109                                 background-color: @linkColor !important;
 110                         }
 111                 }
 112
 113                 .nav-header {
 114                         color: @grayLighter;
 115                 }
 116         }
 117 }
 118
 119 div.subnav {
 120
 121         .nav > li > a {
 122
 123                 color: @navbarLinkColor;
 124
 125                 &:hover {
 126                         color: @navbarLinkColorHover;
 127                 }
 128         }
 129
 130         .nav > li.active > a {
 131
 132                 color: @textColor;
 133
 134                 &:hover {
 135                         color: @textColor;
 136                 }
 137         }
 138
 139         .nav > li.dropdown > .dropdown-toggle {
 140                 background-color: transparent;
 141         }
 142
 143         .nav > li.dropdown.open > .dropdown-toggle {
 144
 145                 border-left: 1px solid whiteSmoke;
 146                 border-right: 1px solid #E5E5E5;
 147                 color: @textColor;
 148
 149                 &:hover {
 150                         color: @linkColor;
 151                 }
 152         }
 153
 154         &-fixed {
 155                 top: @navbarHeight + 1;
 156         }
 157 }
 158
 159 // NAV
 160 // -----------------------------------------------------
 161
 162 .nav > li.dropdown > .dropdown-toggle,
 163 .nav > li.dropdown.active > .dropdown-toggle,
 164 .nav > li.dropdown.open > .dropdown-toggle,
 165 .nav > li.dropdown.open.active > .dropdown-toggle  {
 166
 167         .caret {
 168                 border-top: 4px solid @textColor;
 169                 border-top-color: @textColor;
 170                 opacity: 1;
 171         }
 172
 173         &:hover .caret {
 174                 border-top: 4px solid @linkColorHover;
 175                 border-top-color: @linkColorHover;
 176         }
 177 }
 178
 179 // BUTTONS
 180 // -----------------------------------------------------
 181
 182 // TABLES
 183 // -----------------------------------------------------
 184
 185 // FORMS
 186 // -----------------------------------------------------
 187
 188 .control-group.warning {
 189         .formFieldState(#E29235, #E29235, @warningBackground);
 190 }
 191
 192 .control-group.error {
 193         .formFieldState(#C00, #C00, @errorBackground);
 194 }
 195
 196 .control-group.success {
 197         .formFieldState(#2BA949, #2BA949, @successBackground);
 198 }
 199
 200 // DROPDOWNS
 201 // -----------------------------------------------------
 202
 203 // ALERTS, LABELS, BADGES
 204 // -----------------------------------------------------
 205
 206 .alert {
 207
 208         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 209
 210         h1, h2, h3, h4, h5, h6 {
 211                 color: @white;
 212                 font-weight: bold;
 213                 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 214         }
 215 }
 216
 217 .label, .badge {
 218
 219         padding-top: 4px;
 220
 221         &-important {
 222                 background-color: @red;
 223         }
 224
 225         &-warning {
 226                 background-color: @orange;
 227         }
 228
 229         &-success {
 230                 background-color: @green;
 231         }
 232
 233         &-info {
 234                 background-color: @blue;
 235         }
 236 }
 237
 238 // MISC
 239 // -----------------------------------------------------
 240
 241 .well {
 242         .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
 243 }
 244
 245 .hero-unit {
 246         .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
 247         border: 1px solid rgba(0,0,0,.1);
 248 }
 249
 250 // MEDIA QUERIES
 251 // -----------------------------------------------------