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