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

   1 // Yeti 3.0.3
   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                 > a,
 291                 > span {
 292                         margin-left: 4px;
 293                         color: @gray-light;
 294                 }
 295         }
 296
 297         > .active {
 298                 > a,
 299                 > span {
 300                         color: #fff;
 301                 }
 302         }
 303
 304         > li,
 305         > li:first-child,
 306         > li:last-child {
 307                 > a,
 308                 > span {
 309                         border-radius: 3px;
 310                 }
 311         }
 312
 313         &-lg > li > a {
 314                 padding-left: 22px;
 315                 padding-right: 22px;
 316         }
 317
 318         &-sm > li > a {
 319                 padding: 0 5px;
 320         }
 321 }
 322
 323 .pager {
 324         font-size: @font-size-small;
 325         font-weight: 300;
 326         color: @gray-light;
 327 }
 328
 329 .list-group {
 330         font-size: @font-size-small;
 331         font-weight: 300;
 332 }
 333
 334 // Indicators =================================================================
 335
 336 .alert {
 337         font-size: @font-size-small;
 338         font-weight: 300;
 339
 340         a,
 341         .alert-link {
 342                 font-weight: normal;
 343                 color: #fff;
 344                 text-decoration: underline;
 345         }
 346 }
 347
 348 .label {
 349         padding-left: 1em;
 350         padding-right: 1em;
 351         border-radius: 0;
 352         font-weight: 300;
 353
 354         &-default {
 355                 background-color: @btn-default-bg;
 356                 color: @btn-default-color;
 357         }
 358 }
 359
 360 .badge {
 361         font-weight: 300;
 362 }
 363
 364 // Progress bars ==============================================================
 365
 366 .progress {
 367         height: 22px;
 368         padding: 2px;
 369         background-color: #f6f6f6;
 370         border: 1px solid #ccc;
 371         .box-shadow(none);
 372 }
 373
 374 // Containers =================================================================
 375
 376 .dropdown {
 377
 378         &-menu {
 379                 padding: 0;
 380                 margin-top: 0;
 381                 font-size: @font-size-small;
 382
 383                 > li > a {
 384                         padding: 12px 15px;
 385                 }
 386         }
 387
 388         &-header {
 389                 padding-left: 15px;
 390                 padding-right: 15px;
 391                 font-size: 9px;
 392                 text-transform: uppercase;
 393         }
 394 }
 395
 396 .popover {
 397         color: #fff;
 398         font-size: 12px;
 399         font-weight: 300;
 400 }