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

   1 // Swatch 2.3.1
   2 // Shamrock
   3 // -----------------------------------------------------
   4
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('//fonts.googleapis.com/css?family=Marcellus');
  10
  11 h1:before {
  12         content: "\2663";
  13         margin-right: 10px;
  14 }
  15
  16 strong {
  17         font-weight: normal;
  18 }
  19
  20 blockquote {
  21
  22         small {
  23                 color: @grayLighter;
  24         }
  25 }
  26
  27 .muted {
  28         color: @grayLighter;
  29 }
  30
  31 // SCAFFOLDING
  32 // -----------------------------------------------------
  33
  34 .page-header {
  35         border-bottom: 5px solid @grayLighter;
  36 }
  37
  38 // NAVBAR
  39 // -----------------------------------------------------
  40
  41 .navbar {
  42
  43         .brand {
  44
  45                 &:hover {
  46                         color: @navbarLinkColorHover;
  47                 }
  48         }
  49
  50         &-search .search-query {
  51                 line-height: normal;
  52         }
  53 }
  54
  55 @media (max-width: 979px) {
  56
  57         .navbar,
  58         .navbar.navbar-inverse {
  59
  60                 .nav-collapse {
  61
  62                         .nav > li > a,
  63                         .dropdown-menu a {
  64                                 color: @navbarLinkColor;
  65                         }
  66
  67                         .nav > li > a:hover,
  68                         .nav > li > a:focus,
  69                         .dropdown-menu a:hover,
  70                         .dropdown-menu a:focus {
  71                                 background-color: rgba(0, 0, 0, 0.1);
  72                                 color: @navbarLinkColorHover;
  73                         }
  74
  75                         .navbar-form,
  76                         .navbar-search {
  77                                 border-top-color: @grayLight;
  78                                 border-bottom-color: @grayLight;
  79                         }
  80
  81                 }
  82         }
  83 }
  84
  85 div.subnav {
  86
  87         background-image: none;
  88         background-color: @grayLight;
  89         border-color: @grayDark;
  90
  91         .nav > li > a {
  92                 border-color: transparent;
  93                 color: @textColor;
  94
  95                 &:hover {
  96                         background-color: transparent;
  97                         color: @linkColor;
  98                 }
  99         }
 100
 101         .nav > .active > a,
 102         .nav > .active > a:hover {
 103                 background-color: transparent;
 104                 .box-shadow(none);
 105                 border-color: transparent;
 106                 color: @linkColor;
 107         }
 108
 109         &-fixed {
 110                 top: @navbarHeight + 1;
 111                 .box-shadow(none);
 112         }
 113 }
 114
 115 @media (max-width: 767px) {
 116
 117         div.subnav {
 118
 119                 .nav > li > a:hover {
 120                         background-color: rgba(0, 0, 0, 0.1);
 121                 }
 122
 123                 .nav > li + li > a {
 124                         border-top: 1px solid @grayLighter;
 125                 }
 126         }
 127 }
 128
 129 // NAV
 130 // -----------------------------------------------------
 131
 132 .nav {
 133
 134         & > .active > a,
 135         & > .active > a:hover,
 136         & > .active > a:focus {
 137                 color: @textColor;
 138         }
 139
 140         & > .disabled > a {
 141                 color: @grayLighter;
 142         }
 143 }
 144
 145 .nav-list {
 146
 147         & > li > a,
 148         & > .active > a,
 149         & > .active > a:hover,
 150         & > .active > a:focus {
 151                 text-shadow: none;
 152
 153                 &:hover {
 154                         background-color: @grayDark;
 155                 }
 156         }
 157
 158         .divider {
 159                 background-color: #446e2a;
 160                 border-color: @grayDark;
 161         }
 162
 163         .nav-header {
 164                 color: @textColor;
 165                 text-shadow: none;
 166         }
 167 }
 168
 169 .nav-pills {
 170
 171         & > li > a:hover, {
 172                 background-color: @grayDark;
 173         }
 174
 175 }
 176
 177 .nav-tabs {
 178
 179         border-color: @grayDark;
 180
 181         & > li > a:hover,
 182         .open .dropdown-toggle,
 183         .open .dropdown-toggle:hover {
 184                 background-color: @grayDark;
 185                 border-color: @grayDark;
 186                 border-bottom-color: transparent;
 187         }
 188
 189         & > .active > a,
 190         & > .active > a:hover,
 191         & > .active > a:focus {
 192                 border-color: @grayDark;
 193                 border-bottom-color: transparent;
 194         }
 195
 196         &.nav-stacked > li > a {
 197                 border-color: @grayDark;
 198
 199                 &:hover,
 200                 &:focus {
 201                         border-color: @grayDark;
 202                 }
 203         }
 204 }
 205
 206 .tabs-below > .nav-tabs {
 207         border-top-color: @grayDark;
 208
 209         & > li > a:hover {
 210                 background-color: @grayDark;
 211                 border-color: @grayDark;
 212                 border-top-color: transparent;
 213         }
 214
 215         & > .active > a,
 216         & > .active > a:hover,
 217         & > .active > a:focus {
 218                 border-color: @grayDark;
 219                 border-top-color: transparent;
 220         }
 221 }
 222
 223 .tabs-left > .nav-tabs {
 224         border-right-color: @grayDark;
 225
 226         & > li > a:hover {
 227                 background-color: @grayDark;
 228                 border-color: @grayDark;
 229                 border-right-color: transparent;
 230         }
 231
 232         & > .active > a,
 233         & > .active > a:hover,
 234         & > .active > a:focus {
 235                 border-color: @grayDark;
 236                 border-right-color: transparent;
 237         }
 238 }
 239
 240 .tabs-right > .nav-tabs {
 241         border-left-color: @grayDark;
 242
 243         & > li > a:hover {
 244                 background-color: @grayDark;
 245                 border-color: @grayDark;
 246                 border-left-color: transparent;
 247         }
 248
 249         & > .active > a,
 250         & > .active > a:hover,
 251         & > .active > a:focus {
 252                 border-color: @grayDark;
 253                 border-left-color: transparent;
 254         }
 255 }
 256
 257 .breadcrumb {
 258
 259         background-color: @grayDark;
 260
 261         & > li {
 262                 color: @textColor;
 263                 text-shadow: none;
 264
 265                 & > .divider {
 266                         color: @grayLighter;
 267                 }
 268         }
 269
 270         & > .active {
 271                 color: @textColor;
 272         }
 273 }
 274
 275 .pagination {
 276
 277
 278         ul > li > a {
 279                 background-color: @grayDark;
 280                 border-color: @tableBorder;
 281
 282                 &:hover {
 283                         background-color: @grayLight;
 284                 }
 285         }
 286
 287         ul > .active > a,
 288         ul > .active > span {
 289                 background-color: @grayLight;
 290                 color: @white;
 291         }
 292
 293         ul > .disabled > span,
 294         ul > .disabled > a,
 295         ul > .disabled > a:hover,
 296         ul > .disabled > a:focus {
 297                 background-color: @grayDark;
 298                 color: @grayLighter;
 299         }
 300 }
 301
 302 .pager {
 303
 304         li > a,
 305         li > span {
 306                 background-color: @grayDark;
 307                 border: none;
 308
 309                 &:hover {
 310                         background-color: @grayLight;
 311                 }
 312         }
 313
 314         .disabled > a,
 315         .disabled > a:hover,
 316         .disabled > a:focus,
 317         .disabled > span {
 318                 background-color: @grayDark;
 319                 border: none;
 320                 color: @grayLighter;
 321         }
 322 }
 323
 324 // BUTTONS
 325 // -----------------------------------------------------
 326
 327 .btn {
 328         color: @textColor;
 329
 330         &:hover,
 331         &:focus,
 332         &:active,
 333         &.active,
 334         &.disabled,
 335         &[disabled] {
 336                 color: @textColor;
 337         }
 338 }
 339
 340 // TABLES
 341 // -----------------------------------------------------
 342
 343 .table {
 344
 345         tbody tr.success > td,
 346         tbody tr.error > td,
 347         tbody tr.info > td {
 348                 background-color: @grayLighter;
 349         }
 350 }
 351
 352 // FORMS
 353 // -----------------------------------------------------
 354
 355 legend {
 356         border-bottom: 5px solid @grayLighter;
 357         color: @textColor;
 358 }
 359
 360 .control-group.warning {
 361
 362         .control-label,
 363         .help-block,
 364         .help-inline {
 365                 color: @yellow;
 366         }
 367
 368         input,
 369         select,
 370         textarea {
 371                 border-color: @yellow;
 372         }
 373 }
 374
 375 .control-group.error {
 376
 377         .control-label,
 378         .help-block,
 379         .help-inline {
 380                 color: @yellow;
 381         }
 382
 383         input,
 384         select,
 385         textarea {
 386                 border-color: @yellow;
 387         }
 388 }
 389
 390 .control-group.success {
 391
 392         .control-label,
 393         .help-block,
 394         .help-inline {
 395                 color: @yellow;
 396         }
 397
 398         input,
 399         select,
 400         textarea {
 401                 border-color: @yellow;
 402         }
 403 }
 404
 405 .form-actions {
 406         background-color: rgba(0, 0, 0, 0.1);
 407         border-top: none;
 408 }
 409
 410 // DROPDOWNS
 411 // -----------------------------------------------------
 412
 413 .dropdown-menu {
 414
 415         .divider {
 416                 background-color: #446e2a;
 417                 border-color: @grayDark;
 418         }
 419 }
 420
 421 // ALERTS, LABELS, BADGES
 422 // -----------------------------------------------------
 423
 424 .alert {
 425         background-color: @yellow;
 426         border: none;
 427         color: @textColor;
 428         text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
 429
 430         h1, h2, h3, h4, h5, h6 {
 431                 color: @textColor;
 432                 text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
 433         }
 434 }
 435
 436 .label,
 437 .badge {
 438
 439         &-success {
 440                 background-color: @btnBackground;
 441         }
 442
 443         &-warning {
 444                 background-color: @btnWarningBackground;
 445         }
 446
 447         &-important {
 448                 background-color: @btnDangerBackground;
 449         }
 450
 451         &-info {
 452                 background-color: @btnInfoBackground;
 453         }
 454
 455         &-inverse {
 456                 background-color: @btnInverseBackground;
 457         }
 458 }
 459
 460 // MISC
 461 // -----------------------------------------------------
 462
 463 .progress {
 464         background-image: none;
 465         background-color: @grayDarker;
 466
 467         .bar {
 468                 background-color: @grayLighter;
 469                  #gradient > .vertical(@grayLighter, darken(@grayLighter, 5%));
 470         }
 471
 472         &.progress-striped .bar {
 473                 background-color: @grayLighter;
 474                 #gradient > .striped(@grayLighter);
 475         }
 476 }
 477
 478 .thumbnail,
 479 .img-polaroid {
 480         background-color: @grayDark;
 481         border: none;
 482 }
 483
 484 .modal {
 485         background-color: @grayLight;
 486
 487         &-header {
 488                 border-bottom: none;
 489         }
 490
 491         &-footer {
 492                 background-color: @grayDark;
 493                 border-top: none;
 494                 .box-shadow(none);
 495         }
 496 }
 497
 498 // MEDIA QUERIES
 499 // -----------------------------------------------------