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

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