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 // SCAFFOLDING
  10 // -----------------------------------------------------
  11
  12 // NAVBAR
  13 // -----------------------------------------------------
  14
  15 .navbar {
  16
  17         .navbar-inner {
  18                 border-bottom: 1px solid #CACACA;
  19                 .box-shadow(0 1px 0 rgba(255,255,255,0.4)~", "0 0 10px rgba(0,0,0,0.1));
  20         }
  21
  22         .brand {
  23                 font-weight: bold;
  24
  25                 &:hover {
  26                         color: @linkColor;
  27                 }
  28         }
  29
  30         .nav > li > a {
  31                 padding: 11px 10px 9px;
  32                 font-weight: bold;
  33                 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  34         }
  35
  36         .navbar-text {
  37                 margin-top: 2px;
  38                 padding: 0 10px;
  39                 line-height: 38px;
  40         }
  41
  42         .navbar-search .search-query,
  43         .navbar-search .search-query:hover {
  44                 margin-bottom: 0;
  45                 color: @grayLight;
  46                 .placeholder(@grayLight);
  47                 .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  48
  49             &:focus,
  50             &.focused {
  51                         .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
  52                         color: @textColor;
  53                 }
  54         }
  55
  56         .nav-collapse.collapse {
  57
  58                 .navbar-search {
  59                         border-top: none;
  60                         border-bottom: none;
  61                 }
  62
  63                 & > .nav li > a:hover {
  64                         background-color: @linkColor;
  65                         color: @white;
  66                         text-shadow: none;
  67                 }
  68
  69         }
  70
  71         &-inverse {
  72                 .brand {
  73                         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  74
  75                         &:hover {
  76                                 color: @white;
  77                         }
  78                 }
  79
  80                 .nav > li > a {
  81                         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  82                 }
  83
  84                 .nav li.dropdown.open > .dropdown-toggle .caret,
  85                 .nav li.dropdown:hover > .dropdown-toggle .caret,
  86                 .nav li.dropdown.open:hover > .dropdown-toggle .caret {
  87                         border-top-color: @white;
  88                 }
  89
  90                 .nav-collapse.collapse {
  91                         .nav li > a,
  92                         .nav-header {
  93                                 color: @grayLighter;
  94                         }
  95                 }
  96         }
  97 }
  98
  99 div.subnav {
 100
 101         .nav > li > a {
 102                 font-weight: bold;
 103                 color: @textColor;
 104
 105                 &:hover {
 106                         color: @linkColor;
 107                 }
 108         }
 109
 110         .nav > li.active > a {
 111                 color: @textColor;
 112
 113                 &:hover {
 114                         color: @textColor;
 115                 }
 116         }
 117
 118         .nav > li.dropdown > .dropdown-toggle {
 119                 background-color: transparent;
 120         }
 121
 122         .nav > li.dropdown.open > .dropdown-toggle {
 123                 border-left: 1px solid whiteSmoke;
 124                 border-right: 1px solid #E5E5E5;
 125                 color: @textColor;
 126
 127                 &:hover {
 128                         color: @linkColor;
 129                 }
 130         }
 131 }
 132
 133 // NAV
 134 // -----------------------------------------------------
 135
 136 .nav > li.dropdown > .dropdown-toggle,
 137 .nav > li.dropdown.active > .dropdown-toggle,
 138 .nav > li.dropdown.open > .dropdown-toggle,
 139 .nav > li.dropdown.open.active > .dropdown-toggle  {
 140
 141         .caret {
 142                 border-top: 4px solid @textColor;
 143                 border-top-color: @textColor;
 144                 opacity: 1;
 145         }
 146
 147         &:hover .caret {
 148                 border-top: 4px solid @linkColorHover;
 149                 border-top-color: @linkColorHover;
 150         }
 151 }
 152
 153 // BUTTONS
 154 // -----------------------------------------------------
 155
 156 .btn {
 157         .buttonBackground(#F4F4F4, #ECECEC);
 158         color: @textColor;
 159         text-shadow: none;
 160
 161
 162         &:hover,
 163         &:active,
 164         &.active,
 165         &.disabled,
 166         &[disabled] {
 167                 color: @grayDark;
 168         }
 169 }
 170
 171 .btn-primary {
 172         .buttonBackground(#909090, #3F3F3F);
 173 }
 174
 175 .btn-warning {
 176   .buttonBackground(lighten(@yellow, 15%), @yellow);
 177 }
 178
 179 .btn-danger {
 180   .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
 181 }
 182
 183 .btn-success {
 184   .buttonBackground(#8ADD6D, #60B044);
 185 }
 186
 187 .btn-info {
 188   .buttonBackground(lighten(#4488BB, 15%), #4488BB);
 189 }
 190
 191 .btn-inverse {
 192   .buttonBackground(lighten(@purple, 5%), @purple);
 193 }
 194
 195 // TABLES
 196 // -----------------------------------------------------
 197
 198 // FORMS
 199 // -----------------------------------------------------
 200
 201 .control-group.warning {
 202         .formFieldState(#E29235, #E29235, @warningBackground);
 203 }
 204
 205 .control-group.error {
 206         .formFieldState(#C00, #C00, @errorBackground);
 207 }
 208
 209 .control-group.success {
 210         .formFieldState(#2BA949, #2BA949, @successBackground);
 211 }
 212
 213 // DROPDOWNS
 214 // -----------------------------------------------------
 215
 216 // ALERTS, LABELS, BADGES
 217 // -----------------------------------------------------
 218
 219 // MISC
 220 // -----------------------------------------------------
 221
 222 .label-important, .badge-important { background-color: #BD2C00; }
 223 .label-warning, .badge-warning   { background-color: #E3E84D; }
 224 .label-success, .badge-success   { background-color: #6CC644; }
 225 .label-info, .badge-info      { background-color: #4183C4; }
 226
 227 .hero-unit {
 228     .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
 229     border: 1px solid rgba(0,0,0,.05);
 230 }
 231
 232 // MEDIA QUERIES
 233 // -----------------------------------------------------