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

   1 // Swatch 2.3.0
   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 div.subnav {
  56
  57         background-image: none;
  58         background-color: @grayLight;
  59         border-color: @grayDark;
  60
  61         .nav > li > a {
  62                 border-color: transparent;
  63                 color: @textColor;
  64
  65                 &:hover {
  66                         background-color: transparent;
  67                         color: @linkColor;
  68                 }
  69         }
  70
  71         .nav > .active > a,
  72         .nav > .active > a:hover {
  73                 background-color: transparent;
  74                 .box-shadow(none);
  75                 border-color: transparent;
  76                 color: @linkColor;
  77         }
  78
  79         &-fixed {
  80                 top: @navbarHeight + 1;
  81                 .box-shadow(none);
  82         }
  83
  84
  85
  86 }
  87
  88 // NAV
  89 // -----------------------------------------------------
  90
  91 .nav {
  92
  93         & > .active > a,
  94         & > .active > a:hover,
  95         & > .active > a:focus {
  96                 color: @textColor;
  97         }
  98
  99         & > .disabled > a {
 100                 color: @grayLighter;
 101         }
 102 }
 103
 104 .nav-list {
 105
 106         & > li > a,
 107         & > .active > a,
 108         & > .active > a:hover,
 109         & > .active > a:focus {
 110                 text-shadow: none;
 111
 112                 &:hover {
 113                         background-color: @grayDark;
 114                 }
 115         }
 116
 117         .divider {
 118                 background-color: #446e2a;
 119                 border-color: @grayDark;
 120         }
 121
 122         .nav-header {
 123                 color: @textColor;
 124                 text-shadow: none;
 125         }
 126 }
 127
 128 .nav-pills {
 129
 130         & > li > a:hover, {
 131                 background-color: @grayDark;
 132         }
 133
 134 }
 135
 136 .nav-tabs {
 137
 138         border-color: @grayDark;
 139
 140         & > li > a:hover,
 141         .open .dropdown-toggle,
 142         .open .dropdown-toggle:hover {
 143                 background-color: @grayDark;
 144                 border-color: @grayDark;
 145                 border-bottom-color: transparent;
 146         }
 147
 148         & > .active > a,
 149         & > .active > a:hover,
 150         & > .active > a:focus {
 151                 border-color: @grayDark;
 152                 border-bottom-color: transparent;
 153         }
 154
 155         &.nav-stacked > li > a {
 156                 border-color: @grayDark;
 157
 158                 &:hover,
 159                 &:focus {
 160                         border-color: @grayDark;
 161                 }
 162         }
 163 }
 164
 165 .tabs-below > .nav-tabs {
 166         border-top-color: @grayDark;
 167
 168         & > li > a:hover {
 169                 background-color: @grayDark;
 170                 border-color: @grayDark;
 171                 border-top-color: transparent;
 172         }
 173
 174         & > .active > a,
 175         & > .active > a:hover,
 176         & > .active > a:focus {
 177                 border-color: @grayDark;
 178                 border-top-color: transparent;
 179         }
 180 }
 181
 182 .tabs-left > .nav-tabs {
 183         border-right-color: @grayDark;
 184
 185         & > li > a:hover {
 186                 background-color: @grayDark;
 187                 border-color: @grayDark;
 188                 border-right-color: transparent;
 189         }
 190
 191         & > .active > a,
 192         & > .active > a:hover,
 193         & > .active > a:focus {
 194                 border-color: @grayDark;
 195                 border-right-color: transparent;
 196         }
 197 }
 198
 199 .tabs-right > .nav-tabs {
 200         border-left-color: @grayDark;
 201
 202         & > li > a:hover {
 203                 background-color: @grayDark;
 204                 border-color: @grayDark;
 205                 border-left-color: transparent;
 206         }
 207
 208         & > .active > a,
 209         & > .active > a:hover,
 210         & > .active > a:focus {
 211                 border-color: @grayDark;
 212                 border-left-color: transparent;
 213         }
 214 }
 215
 216 .breadcrumb {
 217
 218         background-color: @grayDark;
 219
 220         & > li {
 221                 color: @textColor;
 222                 text-shadow: none;
 223
 224                 & > .divider {
 225                         color: @grayLighter;
 226                 }
 227         }
 228
 229         & > .active {
 230                 color: @textColor;
 231         }
 232 }
 233
 234 .pagination {
 235
 236
 237         ul > li > a {
 238                 background-color: @grayDark;
 239                 border-color: @tableBorder;
 240
 241                 &:hover {
 242                         background-color: @grayLight;
 243                 }
 244         }
 245
 246         ul > .active > a,
 247         ul > .active > span {
 248                 background-color: @grayLight;
 249                 color: @white;
 250         }
 251
 252         ul > .disabled > span,
 253         ul > .disabled > a,
 254         ul > .disabled > a:hover,
 255         ul > .disabled > a:focus {
 256                 background-color: @grayDark;
 257                 color: @grayLighter;
 258         }
 259 }
 260
 261 .pager {
 262
 263         li > a,
 264         li > span {
 265                 background-color: @grayDark;
 266                 border: none;
 267
 268                 &:hover {
 269                         background-color: @grayLight;
 270                 }
 271         }
 272
 273         .disabled > a,
 274         .disabled > a:hover,
 275         .disabled > a:focus,
 276         .disabled > span {
 277                 background-color: @grayDark;
 278                 border: none;
 279                 color: @grayLighter;
 280         }
 281 }
 282
 283 // BUTTONS
 284 // -----------------------------------------------------
 285
 286 .btn {
 287         color: @textColor;
 288
 289         &:hover,
 290         &:focus,
 291         &:active,
 292         &.active,
 293         &.disabled,
 294         &[disabled] {
 295                 color: @textColor;
 296         }
 297 }
 298
 299 // TABLES
 300 // -----------------------------------------------------
 301
 302 .table {
 303
 304         tbody tr.success > td,
 305         tbody tr.error > td,
 306         tbody tr.info > td {
 307                 background-color: @grayLighter;
 308         }
 309 }
 310
 311 // FORMS
 312 // -----------------------------------------------------
 313
 314 legend {
 315         border-bottom: 5px solid @grayLighter;
 316         color: @textColor;
 317 }
 318
 319 .control-group.warning {
 320
 321         .control-label,
 322         .help-block,
 323         .help-inline {
 324                 color: @yellow;
 325         }
 326
 327         input,
 328         select,
 329         textarea {
 330                 border-color: @yellow;
 331         }
 332 }
 333
 334 .control-group.error {
 335
 336         .control-label,
 337         .help-block,
 338         .help-inline {
 339                 color: @yellow;
 340         }
 341
 342         input,
 343         select,
 344         textarea {
 345                 border-color: @yellow;
 346         }
 347 }
 348
 349 .control-group.success {
 350
 351         .control-label,
 352         .help-block,
 353         .help-inline {
 354                 color: @yellow;
 355         }
 356
 357         input,
 358         select,
 359         textarea {
 360                 border-color: @yellow;
 361         }
 362 }
 363
 364 .form-actions {
 365         background-color: rgba(0, 0, 0, 0.1);
 366         border-top: none;
 367 }
 368
 369 // DROPDOWNS
 370 // -----------------------------------------------------
 371
 372 .dropdown-menu {
 373
 374         .divider {
 375                 background-color: #446e2a;
 376                 border-color: @grayDark;
 377         }
 378 }
 379
 380 // ALERTS, LABELS, BADGES
 381 // -----------------------------------------------------
 382
 383 .alert {
 384         background-color: @yellow;
 385         border: none;
 386         color: @textColor;
 387         text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
 388
 389         h1, h2, h3, h4, h5, h6 {
 390                 color: @textColor;
 391                 text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
 392         }
 393 }
 394
 395 .label,
 396 .badge {
 397
 398         &-success {
 399                 background-color: @btnBackground;
 400         }
 401
 402         &-warning {
 403                 background-color: @btnWarningBackground;
 404         }
 405
 406         &-important {
 407                 background-color: @btnDangerBackground;
 408         }
 409
 410         &-info {
 411                 background-color: @btnInfoBackground;
 412         }
 413
 414         &-inverse {
 415                 background-color: @btnInverseBackground;
 416         }
 417 }
 418
 419 // MISC
 420 // -----------------------------------------------------
 421
 422 .progress {
 423         background-image: none;
 424         background-color: @grayDarker;
 425
 426         .bar {
 427                 background-color: @grayLighter;
 428                  #gradient > .vertical(@grayLighter, darken(@grayLighter, 5%));
 429         }
 430
 431         &.progress-striped .bar {
 432                 background-color: @grayLighter;
 433                 #gradient > .striped(@grayLighter);
 434         }
 435 }
 436
 437 .thumbnail,
 438 .img-polaroid {
 439         background-color: @grayDark;
 440         border: none;
 441 }
 442
 443 .modal {
 444         background-color: @grayLight;
 445
 446         &-header {
 447                 border-bottom: none;
 448         }
 449
 450         &-footer {
 451                 background-color: @grayDark;
 452                 border-top: none;
 453                 .box-shadow(none);
 454         }
 455 }
 456
 457 // MEDIA QUERIES
 458 // -----------------------------------------------------