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

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