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

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