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

   1 // Bootswatch.less
   2 // Swatch: Simplex
   3 // Version: 2.1.1
   4 // -----------------------------------------------------
   5
   6 @boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   7
   8 // TYPOGRAPHY
   9 // -----------------------------------------------------
  10
  11 @import url('https://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         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 310         border: 0px solid transparent;
 311
 312         li {
 313                 padding-top: 5px;
 314                 text-shadow: none;
 315         }
 316
 317         a {
 318                 text-shadow: none;
 319         }
 320
 321         a:hover {
 322                 text-decoration: none;
 323         }
 324 }
 325
 326 .pagination {
 327
 328         li > a {
 329                 padding: 4px 14px 0;
 330                 color: @textColor;
 331
 332                 &:hover {
 333                         background-color: @dropdownLinkBackgroundHover;
 334                         color: @linkColor;
 335                 }
 336         }
 337
 338         li.active > a {
 339                 background-color: @dropdownLinkBackgroundHover;
 340                 color: @linkColor;
 341         }
 342 }
 343
 344
 345 // BUTTONS
 346 // -----------------------------------------------------
 347
 348 .btn {
 349         padding-top: .6em;
 350         font-family: @headingsFontFamily;
 351         font-weight: bold;
 352 }
 353
 354 // TABLES
 355 // -----------------------------------------------------
 356
 357 // FORMS
 358 // -----------------------------------------------------
 359
 360 legend {
 361         border-bottom: 1px solid #ddd;
 362         font-family: @headingsFontFamily;
 363 }
 364
 365 .navbar-search .search-query {
 366         border: 1px solid #ddd;
 367         .border-radius(0);
 368         background-color: @bodyBackground;
 369         color: @gray;
 370 }
 371
 372 .help-inline, .help-block {
 373         font-size: 13px;
 374 }
 375
 376 .input-append .btn,
 377 .input-prepend .btn {
 378         line-height: 16px;
 379 }
 380
 381 // DROPDOWNS
 382 // -----------------------------------------------------
 383
 384 // ALERTS, LABELS, BADGES
 385 // -----------------------------------------------------
 386
 387 .label {
 388         padding: 4px 4px 3px;
 389         margin-left: 1px;
 390         margin-right: 1px;
 391         line-height: 26px;
 392         font-weight: normal;
 393 }
 394
 395 // MISCELLANEOUS
 396 // -----------------------------------------------------
 397
 398 i[class^="icon-"]{
 399         opacity: 0.5;
 400         vertical-align: -2px;
 401 }
 402
 403 .well {
 404         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 405         border: none;
 406 }
 407
 408 .hero-unit {
 409         background-color: @navbarBackground;
 410         .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
 411 }
 412
 413 .thumbnail {
 414         padding: 10px;
 415         background-color: @white;
 416 }
 417
 418 .progress {
 419     #gradient > .vertical(#e0e0e0, #e8e8e8);
 420 }
 421
 422 .modal {
 423
 424         &-header {
 425                 border-bottom: none;
 426         }
 427
 428         &-header,
 429         &-body {
 430                 background-color: @navbarBackground;
 431         }
 432
 433         &-footer {
 434                 background-color: @bodyBackground;
 435         }
 436 }
 437
 438 // MEDIA QUERIES
 439 // -----------------------------------------------------