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

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