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

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