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

   1 // Spacelab 2.2.2
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('http://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
 155 // NAV
 156 // -----------------------------------------------------
 157
 158 .nav > li.dropdown > .dropdown-toggle,
 159 .nav > li.dropdown.active > .dropdown-toggle,
 160 .nav > li.dropdown.open > .dropdown-toggle,
 161 .nav > li.dropdown.open.active > .dropdown-toggle  {
 162
 163         .caret {
 164                 border-top: 4px solid @textColor;
 165                 border-top-color: @textColor;
 166                 opacity: 1;
 167         }
 168
 169         &:hover .caret {
 170                 border-top: 4px solid @linkColorHover;
 171                 border-top-color: @linkColorHover;
 172         }
 173 }
 174
 175 // BUTTONS
 176 // -----------------------------------------------------
 177
 178 // TABLES
 179 // -----------------------------------------------------
 180
 181 // FORMS
 182 // -----------------------------------------------------
 183
 184 .control-group.warning {
 185         .formFieldState(#E29235, #E29235, @warningBackground);
 186 }
 187
 188 .control-group.error {
 189         .formFieldState(#C00, #C00, @errorBackground);
 190 }
 191
 192 .control-group.success {
 193         .formFieldState(#2BA949, #2BA949, @successBackground);
 194 }
 195
 196 // DROPDOWNS
 197 // -----------------------------------------------------
 198
 199 // ALERTS, LABELS, BADGES
 200 // -----------------------------------------------------
 201
 202 .alert {
 203
 204         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 205
 206         h1, h2, h3, h4, h5, h6 {
 207                 color: @white;
 208                 font-weight: bold;
 209                 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 210         }
 211 }
 212
 213 .label, .badge {
 214
 215         padding-top: 4px;
 216
 217         &-important {
 218                 background-color: @red;
 219         }
 220
 221         &-warning {
 222                 background-color: @orange;
 223         }
 224
 225         &-success {
 226                 background-color: @green;
 227         }
 228
 229         &-info {
 230                 background-color: @blue;
 231         }
 232 }
 233
 234 // MISC
 235 // -----------------------------------------------------
 236
 237 .well {
 238         .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
 239 }
 240
 241 .hero-unit {
 242         .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
 243         border: 1px solid rgba(0,0,0,.1);
 244 }
 245
 246 // MEDIA QUERIES
 247 // -----------------------------------------------------