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

   1 // Bootswatch.less
   2 // Swatch: Simplex
   3 // Version: 2.0.4
   4 // -----------------------------------------------------
   5
   6 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
   7
   8 @boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   9
  10 // TYPOGRAPHY
  11 // -----------------------------------------------------
  12
  13 h6 {
  14         color: @headingsColor;
  15 }
  16
  17 // NAVBAR
  18 // -----------------------------------------------------
  19
  20 .navbar {
  21
  22         .navbar-inner {
  23                 .box-shadow(inset 0 -1px #CFCACA);
  24         }
  25
  26         .brand {
  27                 padding: 12px 20px 8px;
  28                 font-weight: bold;
  29
  30                 &:hover {
  31                         color: @orange;
  32                 }
  33         }
  34
  35         .navbar-text {
  36                 padding: 14px 15px 7px;
  37                 line-height: 19px;
  38                 color: @grayLight;
  39         }
  40
  41         .divider-vertical {
  42                 height: @navbarHeight - 1;
  43                 background-color: @hrBorder;
  44         }
  45
  46         .nav > li > a {
  47                 padding: 14px 15px 7px;
  48                 text-shadow: none;
  49
  50                 &:hover {
  51                         text-decoration: none;
  52                 }
  53         }
  54
  55         .nav .active > a,
  56         .nav .active > a:hover {
  57                 background-color: transparent;
  58         }
  59
  60         .navbar-search {
  61                 margin-top: 5px;
  62
  63                 input[type="text"] {
  64                         margin-bottom: 5px;
  65                 }
  66         }
  67
  68         .nav li.dropdown.open > .dropdown-toggle,
  69         .nav li.dropdown.active > .dropdown-toggle:hover {
  70                 color: @linkColor;
  71         }
  72
  73         .nav li.dropdown .dropdown-toggle .caret {
  74                 border-top-color: @textColor;
  75                 border-bottom-color: @textColor;
  76                 opacity: 1;
  77         }
  78
  79         .nav li.dropdown .dropdown-toggle:hover .caret,
  80         .nav li.dropdown.active > .dropdown-toggle .caret,
  81         .nav li.dropdown.open .dropdown-toggle .caret {
  82                 border-top-color: @linkColor;
  83                 border-bottom-color: @linkColor;
  84         }
  85
  86         .nav-collapse.collapse {
  87
  88                 .nav li > a {
  89                         color: @textColor;
  90
  91                         &:hover {
  92                                 background-color: @grayLighter;
  93                         }
  94                 }
  95         }
  96 }
  97
  98 div.subnav {
  99
 100         background-image: none;
 101         background-color: @navbarBackground;
 102         border-bottom: 1px solid transparent;
 103         .box-shadow(@boxShadow);
 104
 105         &.subnav-fixed {
 106                 .box-shadow(inset 0 5px #fff~"," @boxShadow);
 107         }
 108
 109         .nav > li > a {
 110                 padding: 14px 12px 10px;
 111                 color: @navbarText;
 112                 border-left-color: transparent;
 113                 border-right-color: transparent;
 114
 115                 &:hover {
 116                         background-color: transparent;
 117                         color: @linkColor;
 118                 }
 119         }
 120
 121         .nav > li.active > a,
 122         .nav > li.active > a:hover {
 123                 border-left-color: transparent;
 124                 border-right-color: transparent;
 125                 background-color: transparent;
 126                 .box-shadow(none);
 127                 color: @linkColor;
 128         }
 129
 130         .nav > li.dropdown.open > a,
 131         .nav > li.dropdown.open > a:hover {
 132                 border-left-color: transparent;
 133                 border-right-color: transparent;
 134                 background-color: transparent;
 135                 color: @linkColor;
 136         }
 137
 138         .nav li.dropdown .dropdown-toggle .caret {
 139                 border-top-color: @textColor;
 140                 border-bottom-color: @textColor;
 141                 opacity: 1;
 142         }
 143
 144         .nav li.dropdown .dropdown-toggle:hover .caret,
 145         .nav li.dropdown.active .dropdown-toggle .caret,
 146         .nav li.dropdown.open .dropdown-toggle .caret {
 147                 border-top-color: @linkColor;
 148                 border-bottom-color: @linkColor;
 149                 opacity: 1;
 150         }
 151
 152         .dropdown.open:hover .dropdown-toggle {
 153                 background-color: transparent;
 154         }
 155 }
 156
 157 @media (max-width: 979px) {
 158         form.navbar-form, form.navbar-search {
 159                 border-top: 1px solid #ccc;
 160                 border-bottom: 1px solid #ccc;
 161         }
 162 }
 163
 164 // NAV
 165 // -----------------------------------------------------
 166
 167 .nav .nav-header {
 168         font-size: 13px;
 169         font-weight: normal;
 170         text-transform: none;
 171 }
 172
 173 .nav-tabs {
 174
 175         & > li > a {
 176                 background-color: darken(@bodyBackground, 3%);
 177                 border: 1px solid #ccc;
 178                 color: @textColor;
 179
 180                 &:hover {
 181                         border: 1px solid #ccc;
 182                         background-color: @dropdownLinkBackgroundHover;
 183                         color: @linkColor;
 184                 }
 185         }
 186
 187         & > li.active > a,
 188         & > li.active > a:hover {
 189                 background-color: @bodyBackground;
 190         }
 191
 192         .dropdown {
 193
 194                 .dropdown-toggle .caret {
 195                         border-top-color: @textColor;
 196                         border-bottom-color: @textColor;
 197                         opacity: 1;
 198                 }
 199
 200                 &:hover .dropdown-toggle .caret {
 201                         border-top-color: @linkColor;
 202                         border-bottom-color: @linkColor;
 203                 }
 204         }
 205
 206         .dropdown.open .dropdown-toggle {
 207
 208                 background-color: @dropdownLinkBackgroundHover;
 209                 border-color: #ccc;
 210                 color: @linkColor;
 211
 212                 .caret,
 213                 &:hover .caret {
 214                         border-top-color: @linkColor;
 215                         border-bottom-color: @linkColor;
 216                         opacity: 1;
 217                 }
 218         }
 219
 220         .dropdown-menu {
 221
 222                 .border-radius(0);
 223
 224                 a {
 225                         padding: 8px 15px 3px;
 226                 }
 227         }
 228 }
 229
 230 .tabbable {
 231
 232         .nav-tabs > li > a,
 233         .nav-tabs > li > a:hover {
 234                 border: 1px solid #ccc;
 235         }
 236
 237         .nav-tabs > li.active > a {
 238                 border-bottom: 1px solid transparent;
 239         }
 240
 241         &.tabs-below > .nav-tabs > li.active > a,
 242         &.tabs-left > .nav-tabs > li.active > a,
 243         &.tabs-right > .nav-tabs > li.active > a {
 244                 border-bottom: 1px solid #ccc;
 245         }
 246 }
 247
 248 .nav-pills {
 249
 250         li > a {
 251                 color: @textColor;
 252
 253                 &:hover {
 254                         background-color: @dropdownLinkBackgroundHover;
 255                         color: @linkColor;
 256                 }
 257         }
 258
 259         li.active > a,
 260         li.active > a:hover {
 261                 background-color: @dropdownLinkBackgroundHover;
 262                 color: @linkColor;
 263         }
 264
 265         .dropdown .dropdown-toggle .caret {
 266                 border-top-color: @textColor;
 267                 border-bottom-color: @textColor;
 268                 opacity: 1;
 269         }
 270
 271         .dropdown .dropdown-toggle:hover .caret {
 272                 border-top-color: @linkColor;
 273                 border-bottom-color: @linkColor;
 274         }
 275
 276         .dropdown.open .dropdown-toggle,
 277         .dropdown.open:hover .dropdown-toggle {
 278                 background-color: @dropdownLinkBackgroundHover;
 279                 color: @linkColor;
 280
 281                 .caret {
 282                         border-top-color: @linkColor;
 283                         border-bottom-color: @linkColor;
 284                 }
 285         }
 286 }
 287
 288 .nav-list {
 289
 290         li > a {
 291                 color: @textColor;
 292
 293                 &:hover {
 294                         background-color: @dropdownLinkBackgroundHover;
 295                         color: @linkColor;
 296                 }
 297         }
 298
 299         li.active > a,
 300         li.active > a:hover {
 301                 background-color: @dropdownLinkBackgroundHover;
 302                 color: @linkColor;
 303         }
 304 }
 305
 306 // FORMS
 307 // -----------------------------------------------------
 308
 309 legend {
 310         border-bottom: 1px solid #ddd;
 311 }
 312
 313 .navbar-search .search-query {
 314         border: 1px solid #ddd;
 315         .border-radius(0);
 316         background-color: @bodyBackground;
 317         color: @gray;
 318 }
 319
 320 .help-inline, .help-block {
 321         font-size: 13px;
 322 }
 323
 324 // BUTTONS
 325 // -----------------------------------------------------
 326
 327 .btn {
 328         padding: 6px 10px 2px;
 329 }
 330
 331 .btn-large {
 332         padding: 11px 14px 8px;
 333 }
 334
 335 .btn-small {
 336         padding: 5px 9px 3px;
 337 }
 338
 339 .btn-micro {
 340         padding: 3px 6px 1px;
 341 }
 342
 343 // MODALS
 344 // -----------------------------------------------------
 345
 346 .modal-header {
 347         border-bottom: none;
 348 }
 349
 350 .modal-header,
 351 .modal-body {
 352         background-color: @navbarBackground;
 353 }
 354
 355 .modal-footer {
 356         background-color: @bodyBackground;
 357 }
 358
 359 // MISCELLANEOUS
 360 // -----------------------------------------------------
 361
 362 i[class^="icon-"]{
 363         opacity: 0.5;
 364         vertical-align: -2px;
 365 }
 366
 367 hr {
 368         border-bottom: none;
 369 }
 370
 371 .progress {
 372     #gradient > .vertical(#e0e0e0, #e8e8e8);
 373 }
 374
 375 .label {
 376         padding: 4px 4px 3px;
 377         margin-left: 1px;
 378         margin-right: 1px;
 379         line-height: 26px;
 380         font-weight: normal;
 381 }
 382
 383 .hero-unit {
 384         background-color: @navbarBackground;
 385         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 386 }
 387
 388 .well {
 389         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 390         background-color: @white;
 391         border: none;
 392 }
 393
 394 .thumbnail {
 395         padding: 10px;
 396         background-color: @white;
 397 }
 398
 399 .breadcrumb {
 400         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 401         border: 0px solid transparent;
 402
 403         li {
 404                 padding-top: 5px;
 405                 text-shadow: none;
 406         }
 407
 408         a {
 409                 text-shadow: none;
 410         }
 411
 412         a:hover {
 413                 text-decoration: none;
 414         }
 415 }
 416
 417 .pagination {
 418
 419         li > a {
 420                 padding: 4px 14px 0;
 421                 color: @textColor;
 422
 423                 &:hover {
 424                         background-color: @dropdownLinkBackgroundHover;
 425                         color: @linkColor;
 426                 }
 427         }
 428
 429         li.active > a {
 430                 background-color: @dropdownLinkBackgroundHover;
 431                 color: @linkColor;
 432         }
 433 }
 434
 435 @media (max-width: 979px) {
 436
 437         .nav-collapse.collapse .navbar-form,
 438         .nav-collapse.collapse .navbar-search {
 439                 border-top: 1px solid @grayLighter;
 440                 border-bottom: 1px solid @grayLighter;
 441         }
 442 }