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

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