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

   1 // Bootswatch.less
   2 // Swatch: Simplex
   3 // Version: 2.0.3
   4 // -----------------------------------------------------
   5
   6 @boxShadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   7
   8 // TYPOGRAPHY
   9 // -----------------------------------------------------
  10
  11 h6, .hero-unit {
  12         color: @headingsColor;
  13 }
  14
  15 // NAVBAR
  16 // -----------------------------------------------------
  17
  18 .navbar .navbar-inner {
  19         .box-shadow(inset 0 -1px #CFCACA);
  20         border-bottom: 1px solid #FFF;
  21         border-bottom: none;
  22 }
  23
  24 .navbar .brand {
  25         padding-top: 10px;
  26         color: @headingsColor;
  27 }
  28
  29 .navbar .nav > li > a {
  30         padding-top: 14px;
  31         text-shadow: none;
  32         font-weight: normal;
  33         font-size: 11px;
  34 }
  35
  36 .navbar .navbar-text {
  37         padding: 14px 10px 11px;
  38         text-shadow: none;
  39         font-weight: normal;
  40         font-size: 11px;
  41 }
  42
  43 .navbar .nav > li > a:hover {
  44         text-decoration: underline;
  45 }
  46
  47 .navbar .nav .active > a,
  48 .navbar .nav .active > a:hover {
  49         background-color: transparent;
  50 }
  51
  52 .navbar .nav li.dropdown .dropdown-toggle .caret,
  53 .navbar .nav li.open.dropdown .dropdown-toggle .caret {
  54         border-top-color: @textColor;
  55 }
  56
  57 .dropdown.open .dropdown-toggle {
  58         color: @headingsColor;
  59 }
  60
  61 div.subnav {
  62
  63         background-image: none;
  64         background-color: @navbarBackground;
  65         border-bottom: 1px solid transparent;
  66         .box-shadow(@boxShadow);
  67
  68         &.subnav-fixed {
  69                 .box-shadow(inset 0 5px #fff~"," @boxShadow);
  70         }
  71
  72         .nav > li > a {
  73                 padding-top: 12px;
  74                 color: @navbarText;
  75                 font-weight: normal;
  76                 font-size: 11px;
  77
  78                 &:hover {
  79                         text-decoration: underline;
  80                 }
  81         }
  82
  83         .nav > li.open > a,
  84         .nav > li.open > a:hover {
  85                 background-color: transparent;
  86                 border-left: 1px solid whiteSmoke;
  87                 border-right: 1px solid #E5E5E5;
  88         }
  89 }
  90
  91 .dropdown-menu {
  92         .border-radius(0);
  93         font-size: 11px;
  94 }
  95
  96 .nav .nav-header {
  97         font-weight: normal;
  98         text-transform: none;
  99 }
 100 .navbar .nav-collapse.in .nav li > a {
 101         color: @headingsColor;
 102         font-weight: normal;
 103 }
 104
 105 .navbar .nav-collapse.in .nav li > a:hover {
 106         background-color: transparent;
 107         color: @black;
 108         text-decoration: underline;
 109 }
 110
 111 @media (max-width: 979px) {
 112         form.navbar-form, form.navbar-search {
 113                 border-top: 1px solid #ccc;
 114                 border-bottom: 1px solid #ccc;
 115         }
 116 }
 117
 118 // NAV
 119 // -----------------------------------------------------
 120
 121 .nav > li > a {
 122         font-size: 11px;
 123         border-width: 1px;
 124 }
 125
 126 .nav-tabs > li > a,
 127 .nav-tabs > li > a:hover,
 128 .tabbable > .nav-tabs > li > a,
 129 .tabbable > .nav-tabs > li > a:hover {
 130         background-color: darken(@bodyBackground, 3%);
 131         border: 1px solid #ccc;
 132 }
 133
 134 .tabbable > .nav-tabs > li.active > a {
 135         border-bottom: 1px solid transparent;
 136 }
 137
 138 .tabbable.tabs-below > .nav-tabs > li.active > a,
 139 .tabbable.tabs-left > .nav-tabs > li.active > a,
 140 .tabbable.tabs-right > .nav-tabs > li.active > a {
 141         border-bottom: 1px solid #ccc;
 142 }
 143
 144 .nav-pills > li > a:hover {
 145         background-color: transparent;
 146 }
 147
 148 .nav-tabs > li.active > a,
 149 .nav-tabs > li.active > a:hover {
 150         background-color: @bodyBackground;
 151 }
 152
 153 // FORMS
 154 // -----------------------------------------------------
 155
 156 legend {
 157         border-bottom: 1px solid #ddd;
 158 }
 159
 160 .navbar-search .search-query {
 161         border: 1px solid #ddd;
 162         .border-radius(0);
 163         background-color: @bodyBackground;
 164         color: @gray;
 165 }
 166
 167 .help-inline, .help-block {
 168         font-size: 11px;
 169 }
 170
 171 // TABLES
 172 // -----------------------------------------------------
 173
 174
 175 // BUTTONS
 176 // -----------------------------------------------------
 177
 178 .btn {
 179   .border-radius(2px);
 180   font-weight: bold;
 181   #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%));
 182 }
 183
 184 .btn-primary {
 185   .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
 186 }
 187
 188 .btn-warning {
 189   .buttonBackground(lighten(@orange, 5%), @orange);
 190 }
 191
 192 .btn-danger {
 193   .buttonBackground(lighten(@red, 5%), @red);
 194 }
 195
 196 .btn-success {
 197   .buttonBackground(lighten(@green, 5%), @green);
 198 }
 199
 200 .btn-info {
 201   .buttonBackground(lighten(#5bc0de, 5%), #5bc0de);
 202 }
 203
 204 .btn-inverse {
 205   .buttonBackground(lighten(@purple, 5%), @purple);
 206 }
 207
 208 // MODALS
 209 // -----------------------------------------------------
 210
 211 .modal,
 212 .modal-header,
 213 .modal-footer {
 214         .border-radius(0);
 215 }
 216
 217 .modal-header {
 218         border-bottom: none;
 219 }
 220
 221 .modal-header,
 222 .modal-body {
 223         background-color: @navbarBackground;
 224 }
 225
 226 .modal-footer {
 227         background-color: @bodyBackground;
 228 }
 229
 230 // MISCELLANEOUS
 231 // -----------------------------------------------------
 232
 233 i[class^="icon-"]{
 234         opacity: 0.6;
 235         vertical-align: -2px;
 236 }
 237
 238 .alert, .alert p, .alert-heading {
 239         font-size: 11px;
 240 }
 241
 242 .progress {
 243     #gradient > .vertical(#e0e0e0, #e8e8e8);
 244 }
 245
 246 .label {
 247         font-size: 11px;
 248         font-weight: normal;
 249 }
 250
 251 .hero-unit {
 252         background-color: @white;
 253         .box-shadow(@boxShadow);
 254 }
 255
 256 .well {
 257         .box-shadow(@boxShadow);
 258         background-color: @white;
 259         border: none;
 260 }
 261
 262 .breadcrumb {
 263         .box-shadow(@boxShadow);
 264         border: 0px solid transparent;
 265         font-size: 11px;
 266 }
 267
 268 footer.footer p {
 269         font-size: 11px;
 270 }