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

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