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

   1 // Simplex 2.2.2
   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                 .box-shadow(inset 0 5px #fff~"," @boxShadow);
 141         }
 142
 143         .nav > li > a {
 144                 padding: 14px 12px 10px;
 145                 border-left-color: transparent;
 146                 border-right-color: transparent;
 147                 color: @navbarText;
 148                 font-weight: bold;
 149
 150                 &:hover {
 151                         background-color: transparent;
 152                         color: @linkColor;
 153                 }
 154         }
 155
 156         .nav > li.active > a,
 157         .nav > li.active > a:hover {
 158                 border-left-color: transparent;
 159                 border-right-color: transparent;
 160                 background-color: transparent;
 161                 .box-shadow(none);
 162                 color: @linkColor;
 163         }
 164 }
 165
 166 // NAV
 167 // -----------------------------------------------------
 168
 169 .nav .nav-header {
 170         font-size: 13px;
 171         font-weight: normal;
 172         text-transform: none;
 173 }
 174
 175 .nav-tabs {
 176
 177         & > li > a {
 178                 background-color: darken(@bodyBackground, 3%);
 179                 border: 1px solid #ccc;
 180                 color: @textColor;
 181
 182                 &:hover {
 183                         border: 1px solid #ccc;
 184                         background-color: @dropdownLinkBackgroundHover;
 185                         color: @linkColor;
 186                 }
 187         }
 188
 189         & > li.active > a,
 190         & > li.active > a:hover {
 191                 background-color: @bodyBackground;
 192         }
 193
 194         .dropdown {
 195
 196                 .dropdown-toggle .caret {
 197                         border-top-color: @textColor;
 198                         border-bottom-color: @textColor;
 199                         opacity: 1;
 200                 }
 201
 202                 &:hover .dropdown-toggle .caret {
 203                         border-top-color: @linkColor;
 204                         border-bottom-color: @linkColor;
 205                 }
 206         }
 207
 208         .dropdown.open .dropdown-toggle {
 209
 210                 background-color: @dropdownLinkBackgroundHover;
 211                 border-color: #ccc;
 212                 color: @linkColor;
 213
 214                 .caret,
 215                 &:hover .caret {
 216                         border-top-color: @linkColor;
 217                         border-bottom-color: @linkColor;
 218                         opacity: 1;
 219                 }
 220         }
 221
 222         .dropdown-menu {
 223
 224                 .border-radius(0);
 225
 226                 a {
 227                         padding: 8px 15px 3px;
 228                 }
 229         }
 230 }
 231
 232 .tabbable {
 233
 234         .nav-tabs > li > a,
 235         .nav-tabs > li > a:hover {
 236                 border: 1px solid #ccc;
 237         }
 238
 239         .nav-tabs > li.active > a {
 240                 border-bottom: 1px solid transparent;
 241         }
 242
 243         &.tabs-below > .nav-tabs > li.active > a,
 244         &.tabs-left > .nav-tabs > li.active > a,
 245         &.tabs-right > .nav-tabs > li.active > a {
 246                 border-bottom: 1px solid #ccc;
 247         }
 248 }
 249
 250 .nav-pills {
 251
 252         li > a {
 253                 color: @textColor;
 254
 255                 &:hover {
 256                         background-color: @dropdownLinkBackgroundHover;
 257                         color: @linkColor;
 258                 }
 259         }
 260
 261         li.active > a,
 262         li.active > a:hover {
 263                 background-color: @dropdownLinkBackgroundHover;
 264                 color: @linkColor;
 265         }
 266
 267         .dropdown .dropdown-toggle .caret {
 268                 border-top-color: @textColor;
 269                 border-bottom-color: @textColor;
 270                 opacity: 1;
 271         }
 272
 273         .dropdown .dropdown-toggle:hover .caret {
 274                 border-top-color: @linkColor;
 275                 border-bottom-color: @linkColor;
 276         }
 277
 278         .dropdown.open .dropdown-toggle,
 279         .dropdown.open:hover .dropdown-toggle {
 280                 background-color: @dropdownLinkBackgroundHover;
 281                 color: @linkColor;
 282
 283                 .caret {
 284                         border-top-color: @linkColor;
 285                         border-bottom-color: @linkColor;
 286                 }
 287         }
 288 }
 289
 290 .nav-list {
 291
 292         li > a {
 293                 color: @textColor;
 294
 295                 &:hover {
 296                         background-color: @dropdownLinkBackgroundHover;
 297                         color: @linkColor;
 298                 }
 299         }
 300
 301         li.active > a,
 302         li.active > a:hover {
 303                 background-color: @dropdownLinkBackgroundHover;
 304                 color: @linkColor;
 305         }
 306 }
 307
 308 .breadcrumb {
 309         background-color: @white;
 310         border: 0px solid transparent;
 311         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 312
 313         li {
 314                 padding-top: 2px;
 315                 text-shadow: none;
 316         }
 317
 318         .active {
 319                 color: @textColor;
 320         }
 321
 322         a {
 323                 text-shadow: none;
 324         }
 325
 326         a:hover {
 327                 text-decoration: none;
 328         }
 329 }
 330
 331 .pagination {
 332
 333         ul > li > a,
 334         ul > li > span {
 335                 padding: 2px 14px 0;
 336                 color: @textColor;
 337
 338                 &:hover {
 339                         background-color: @dropdownLinkBackgroundHover;
 340                         color: @linkColor;
 341                 }
 342         }
 343
 344         ul > .active > a,
 345         ul > .active > span {
 346                 background-color: @dropdownLinkBackgroundHover;
 347                 color: @linkColor;
 348         }
 349
 350         ul > .disabled > a,
 351         ul > .disabled > a:hover,
 352         ul > .disabled > span,
 353         ul > .disabled > span:hover {
 354                 background-color: transparent;
 355                 color: @textColor;
 356         }
 357 }
 358
 359
 360 // BUTTONS
 361 // -----------------------------------------------------
 362
 363 .btn {
 364         padding-top: .6em;
 365         font-family: @headingsFontFamily;
 366         font-weight: bold;
 367 }
 368
 369 // TABLES
 370 // -----------------------------------------------------
 371
 372 // FORMS
 373 // -----------------------------------------------------
 374
 375 legend {
 376         border-bottom: 1px solid #ddd;
 377         font-family: @headingsFontFamily;
 378 }
 379
 380 .navbar-search .search-query {
 381         border: 1px solid #ddd;
 382         .border-radius(0);
 383         background-color: @bodyBackground;
 384         color: @gray;
 385 }
 386
 387 .help-inline, .help-block {
 388         font-size: 13px;
 389 }
 390
 391 .input-append .btn,
 392 .input-prepend .btn {
 393         line-height: 16px;
 394 }
 395
 396 // DROPDOWNS
 397 // -----------------------------------------------------
 398
 399 // ALERTS, LABELS, BADGES
 400 // -----------------------------------------------------
 401
 402 .label {
 403         padding: 4px 4px 3px;
 404         margin-left: 1px;
 405         margin-right: 1px;
 406         line-height: 26px;
 407         font-weight: normal;
 408 }
 409
 410 // MISCELLANEOUS
 411 // -----------------------------------------------------
 412
 413 i[class^="icon-"]{
 414         opacity: 0.5;
 415         vertical-align: -2px;
 416 }
 417
 418 .well {
 419         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 420         border: none;
 421 }
 422
 423 .hero-unit {
 424         background-color: @navbarBackground;
 425         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 426 }
 427
 428 .thumbnail {
 429         padding: 10px;
 430         background-color: @white;
 431 }
 432
 433 .progress {
 434     #gradient > .vertical(#e0e0e0, #e8e8e8);
 435 }
 436
 437 .modal {
 438
 439         &-header {
 440                 border-bottom: none;
 441         }
 442
 443         &-header,
 444         &-body {
 445                 background-color: @navbarBackground;
 446         }
 447
 448         &-footer {
 449                 background-color: @bodyBackground;
 450         }
 451 }
 452
 453 // MEDIA QUERIES
 454 // -----------------------------------------------------