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

   1 // Yeti 3.0.2
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
   6
   7 // Navbar =====================================================================
   8
   9 .navbar {
  10         border: none;
  11         font-size: 13px;
  12         font-weight: 300;
  13
  14         .navbar-toggle:hover .icon-bar {
  15                 background-color: #b3b3b3;
  16         }
  17
  18         &-collapse {
  19                 border-top-color: @dropdown-divider-bg;
  20                 .box-shadow(none);
  21         }
  22
  23         .dropdown {
  24
  25                 &-menu {
  26                         border: none;
  27
  28                         > li > a,
  29                         > li > a:focus {
  30                                 background-color: transparent;
  31                                 font-size: 13px;
  32                                 font-weight: 300;
  33                         }
  34                 }
  35
  36                 &-header {
  37                         color: rgba(255, 255, 255, 0.5);
  38                 }
  39
  40         }
  41
  42         &-default {
  43
  44                 .dropdown-menu {
  45                         background-color: @navbar-default-bg;
  46
  47                         > li > a,
  48                         > li > a:focus {
  49                                 color: @navbar-default-color;
  50                         }
  51
  52                         > li > a:hover,
  53                         > .active > a,
  54                         > .active > a:hover {
  55                                 background-color: @navbar-default-link-hover-bg;
  56                         }
  57                 }
  58         }
  59
  60         &-inverse {
  61
  62                 .dropdown-menu {
  63                         background-color: @navbar-inverse-bg;
  64
  65                         > li > a,
  66                         > li > a:focus {
  67                                 color: @navbar-inverse-color;
  68                         }
  69
  70                         > li > a:hover,
  71                         > .active > a,
  72                         > .active > a:hover {
  73                                 background-color: @navbar-inverse-link-hover-bg;
  74                         }
  75                 }
  76         }
  77 }
  78
  79 // Buttons ====================================================================
  80
  81 .btn {
  82         padding: 14px 28px;
  83
  84         &-lg {
  85                 padding: 16px 32px;
  86         }
  87
  88         &-sm {
  89                 padding: 8px 16px;
  90         }
  91
  92         &-xs {
  93                 padding: 4px 8px;
  94         }
  95 }
  96
  97 .btn-group {
  98
  99         .btn ~ .dropdown-toggle {
 100                 padding-left: 16px;
 101                 padding-right: 16px;
 102         }
 103
 104         .dropdown-menu {
 105                 border-top-width: 0;
 106         }
 107
 108         &.dropup .dropdown-menu {
 109                 border-top-width: 1px;
 110                 border-bottom-width: 0;
 111                 margin-bottom: 0;
 112         }
 113
 114         .dropdown-toggle {
 115
 116                 &.btn-default + .dropdown-menu {
 117                         background-color: @btn-default-bg;
 118                         border-color: @btn-default-border;
 119
 120                         > li > a {
 121                                 color: @btn-default-color;
 122                         }
 123
 124                         > li > a:hover {
 125                                 background-color: darken(@btn-default-bg, 8%);
 126                         }
 127                 }
 128
 129                 &.btn-primary + .dropdown-menu {
 130                         background-color: @btn-primary-bg;
 131                         border-color: @btn-primary-border;
 132
 133                         > li > a {
 134                                 color: @btn-primary-color;
 135                         }
 136
 137                         > li > a:hover {
 138                                 background-color: darken(@btn-primary-bg, 8%);
 139                         }
 140                 }
 141
 142                 &.btn-success + .dropdown-menu {
 143                         background-color: @btn-success-bg;
 144                         border-color: @btn-success-border;
 145
 146                         > li > a {
 147                                 color: @btn-success-color;
 148                         }
 149
 150                         > li > a:hover {
 151                                 background-color: darken(@btn-success-bg, 8%);
 152                         }
 153                 }
 154
 155                 &.btn-info + .dropdown-menu {
 156                         background-color: @btn-info-bg;
 157                         border-color: @btn-info-border;
 158
 159                         > li > a {
 160                                 color: @btn-info-color;
 161                         }
 162
 163                         > li > a:hover {
 164                                 background-color: darken(@btn-info-bg, 8%);
 165                         }
 166                 }
 167
 168                 &.btn-warning + .dropdown-menu {
 169                         background-color: @btn-warning-bg;
 170                         border-color: @btn-warning-border;
 171
 172                         > li > a {
 173                                 color: @btn-warning-color;
 174                         }
 175
 176                         > li > a:hover {
 177                                 background-color: darken(@btn-warning-bg, 8%);
 178                         }
 179                 }
 180
 181                 &.btn-danger + .dropdown-menu {
 182                         background-color: @btn-danger-bg;
 183                         border-color: @btn-danger-border;
 184
 185                         > li > a {
 186                                 color: @btn-danger-color;
 187                         }
 188
 189                         > li > a:hover {
 190                                 background-color: darken(@btn-danger-bg, 8%);
 191                         }
 192                 }
 193         }
 194 }
 195
 196 // Typography =================================================================
 197
 198 .lead {
 199         color: @gray;
 200 }
 201
 202 cite {
 203         font-style: italic;
 204 }
 205
 206 blockquote {
 207         border-left-width: 1px;
 208         color: @gray;
 209
 210         &.pull-right {
 211                 border-right-width: 1px;
 212         }
 213
 214         small {
 215                 font-size: @font-size-small;
 216                 font-weight: 300;
 217         }
 218 }
 219
 220 // Tables =====================================================================
 221
 222 table {
 223         font-size: @font-size-small;
 224 }
 225
 226 // Forms ======================================================================
 227
 228 input,
 229 .form-control {
 230         padding: 7px;
 231         font-size: @font-size-small;
 232 }
 233
 234 label,
 235 .control-label,
 236 .help-block,
 237 .checkbox,
 238 .radio {
 239         font-size: @font-size-small;
 240         font-weight: normal;
 241 }
 242
 243 .form-group .btn,
 244 .input-group-addon,
 245 .input-group-btn .btn {
 246         padding: 8px 14px;
 247         font-size: @font-size-small;
 248 }
 249
 250 // Navs =======================================================================
 251
 252 .nav {
 253         .open > a,
 254         .open > a:hover,
 255         .open > a:focus {
 256                 border-color: transparent;
 257         }
 258 }
 259
 260 .nav-tabs {
 261         > li > a {
 262                 background-color: @btn-default-bg;
 263                 color: @text-color;
 264         }
 265
 266         .caret {
 267                 border-top-color: @text-color;
 268                 border-bottom-color: @text-color;
 269         }
 270 }
 271
 272 .nav-pills {
 273         font-weight: 300;
 274 }
 275
 276 .breadcrumb {
 277         border: 1px solid @table-border-color;
 278         border-radius: 3px;
 279         font-size: 10px;
 280         font-weight: 300;
 281         text-transform: uppercase;
 282 }
 283
 284 .pagination {
 285         font-size: @font-size-small;
 286         font-weight: 300;
 287         color: @gray-light;
 288
 289         > li,
 290         > li,
 291         > li:first-child,
 292         > li:last-child {
 293                 > a,
 294                 > span {
 295                         margin-left: 4px;
 296                         border-radius: 3px;
 297                         color: @gray-light;
 298                 }
 299         }
 300
 301         &-lg > li > a {
 302                 padding-left: 22px;
 303                 padding-right: 22px;
 304         }
 305
 306         &-sm > li > a {
 307                 padding: 0 5px;
 308         }
 309 }
 310
 311 .pager {
 312         font-size: @font-size-small;
 313         font-weight: 300;
 314         color: @gray-light;
 315 }
 316
 317 .list-group {
 318         font-size: @font-size-small;
 319         font-weight: 300;
 320 }
 321
 322 // Indicators =================================================================
 323
 324 .alert {
 325         font-size: @font-size-small;
 326         font-weight: 300;
 327
 328         a,
 329         .alert-link {
 330                 font-weight: normal;
 331                 color: #fff;
 332                 text-decoration: underline;
 333         }
 334 }
 335
 336 .label {
 337         padding-left: 1em;
 338         padding-right: 1em;
 339         border-radius: 0;
 340         font-weight: 300;
 341
 342         &-default {
 343                 background-color: @btn-default-bg;
 344                 color: @btn-default-color;
 345         }
 346 }
 347
 348 .badge {
 349         font-weight: 300;
 350 }
 351
 352 // Progress bars ==============================================================
 353
 354 .progress {
 355         height: 22px;
 356         padding: 2px;
 357         background-color: #f6f6f6;
 358         border: 1px solid #ccc;
 359         .box-shadow(none);
 360 }
 361
 362 // Containers =================================================================
 363
 364 .dropdown {
 365
 366         &-menu {
 367                 padding: 0;
 368                 margin-top: 0;
 369                 font-size: @font-size-small;
 370
 371                 > li > a {
 372                         padding: 12px 15px;
 373                 }
 374         }
 375
 376         &-header {
 377                 padding-left: 15px;
 378                 padding-right: 15px;
 379                 font-size: 9px;
 380                 text-transform: uppercase;
 381         }
 382 }
 383
 384 .popover {
 385         color: #fff;
 386         font-size: 12px;
 387         font-weight: 300;
 388 }