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 > .caret {
  92         border-top-color: @grayLight;
  93 }
  94
  95 .navbar .nav-collapse > .nav > li > a:hover {
  96         text-shadow: none;
  97         color: @white;
  98
  99         .caret {
 100                 border-top-color: @white;
 101         }
 102 }
 103
 104
 105 // BUTTON
 106 // -----------------------------------------------------
 107
 108 .btn {
 109         .buttonBackground(#F4F4F4, #ECECEC);
 110 }
 111
 112 .btn-warning {
 113   .caret {
 114     border-top-color: @white;
 115     .opacity(75);
 116   }
 117 }
 118
 119 .btn-primary {
 120         .buttonBackground(#909090, #3F3F3F);
 121 }
 122
 123 .btn-warning {
 124   .buttonBackground(lighten(@yellow, 15%), @yellow);
 125 }
 126
 127 .btn-danger {
 128   .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
 129 }
 130
 131 .btn-success {
 132   .buttonBackground(#8ADD6D, #60B044);
 133 }
 134
 135 .btn-info {
 136   .buttonBackground(lighten(#4488BB, 15%), #4488BB);
 137 }
 138
 139 // FORMS
 140 // -----------------------------------------------------
 141
 142
 143 // Warning
 144 .control-group.warning {
 145   .formFieldState(#E29235, #E29235, @warningBackground);
 146 }
 147 // Error
 148 .control-group.error {
 149   .formFieldState(#C00, #C00, @errorBackground);
 150 }
 151 // Success
 152 .control-group.success {
 153   .formFieldState(#2BA949, #2BA949, @successBackground);
 154 }
 155
 156
 157 // LABELS
 158 // -----------------------------------------------------
 159
 160 .label-important { background-color: #BD2C00; }
 161 .label-warning   { background-color: #E3E84D; }
 162 .label-success   { background-color: #6CC644; }
 163 .label-info      { background-color: #4183C4; }