git.roojs.org Git - bootswatch/blob - cyborg/variables.less

   1 // Cyborg 3.0.0
   2 // Variables
   3 // --------------------------------------------------
   4
   5
   6 // Global values
   7 // --------------------------------------------------
   8
   9 // Grays
  10 // -------------------------
  11
  12 @gray-darker:            #222;
  13 @gray-dark:              #282828;
  14 @gray:                   #555;
  15 @gray-light:             #888;
  16 @gray-lighter:           #ADAFAE; // #eee
  17
  18 // Brand colors
  19 // -------------------------
  20
  21 @brand-primary:         #2A9FD6;
  22 @brand-success:         #77B300;
  23 @brand-warning:         #FF8800;
  24 @brand-danger:          #CC0000;
  25 @brand-info:            #9933CC;
  26
  27 // Scaffolding
  28 // -------------------------
  29
  30 @body-bg:               #060606;
  31 @text-color:            @gray-light;
  32
  33 // Links
  34 // -------------------------
  35
  36 @link-color:            @brand-primary;
  37 @link-hover-color:      @link-color;
  38
  39 // Typography
  40 // -------------------------
  41
  42 @font-family-sans-serif:  "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  43 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
  44 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
  45 @font-family-base:        @font-family-sans-serif;
  46
  47 @font-size-base:          14px;
  48 @font-size-large:         ceil(@font-size-base * 1.25); // ~18px
  49 @font-size-small:         ceil(@font-size-base * 0.85); // ~12px
  50
  51 @line-height-base:        1.428571429; // 20/14
  52 @line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
  53
  54 @headings-font-family:    @font-family-base;
  55 @headings-font-weight:    500;
  56 @headings-line-height:    1.1;
  57
  58
  59 // Components
  60 // -------------------------
  61 // Based on 14px font-size and 1.428 line-height (~20px to start)
  62
  63 @padding-base-vertical:          8px;
  64 @padding-base-horizontal:        12px;
  65
  66 @padding-large-vertical:         14px;
  67 @padding-large-horizontal:       16px;
  68
  69 @padding-small-vertical:         5px;
  70 @padding-small-horizontal:       10px;
  71
  72 @line-height-large:              1.33;
  73 @line-height-small:              1.5;
  74
  75 @border-radius-base:             4px;
  76 @border-radius-large:            6px;
  77 @border-radius-small:            3px;
  78
  79 @component-active-bg:            @brand-primary;
  80
  81 @caret-width-base:               4px;
  82 @caret-width-large:              5px;
  83
  84 // Tables
  85 // -------------------------
  86
  87 @table-cell-padding:                 8px;
  88 @table-condensed-cell-padding:       5px;
  89
  90 @table-bg:                           darken(@gray-darker, 4%); // overall background-color
  91 @table-bg-accent:                    darken(@table-bg, 6%); // for striping
  92 @table-bg-hover:                     @gray-dark;
  93 @table-bg-active:                    @table-bg-hover;
  94
  95 @table-border-color:                 @gray-dark; // table and cell border
  96
  97
  98 // Buttons
  99 // -------------------------
 100
 101 @btn-font-weight:                bold;
 102
 103 @btn-default-color:              #fff;
 104 @btn-default-bg:                 lighten(@gray-dark, 10%);
 105 @btn-default-border:             @btn-default-bg;
 106
 107 @btn-primary-color:              @btn-default-color;
 108 @btn-primary-bg:                 @brand-primary;
 109 @btn-primary-border:             @btn-primary-bg;
 110
 111 @btn-success-color:              @btn-default-color;
 112 @btn-success-bg:                 @brand-success;
 113 @btn-success-border:             @btn-success-bg;
 114
 115 @btn-warning-color:              @btn-default-color;
 116 @btn-warning-bg:                 @brand-warning;
 117 @btn-warning-border:             @btn-warning-bg;
 118
 119 @btn-danger-color:               @btn-default-color;
 120 @btn-danger-bg:                  @brand-danger;
 121 @btn-danger-border:              @btn-danger-bg;
 122
 123 @btn-info-color:                 @btn-default-color;
 124 @btn-info-bg:                    @brand-info;
 125 @btn-info-border:                @btn-info-bg;
 126
 127 @btn-link-disabled-color:        @gray-light;
 128
 129
 130 // Forms
 131 // -------------------------
 132
 133 @input-bg:                       #fff;
 134 @input-bg-disabled:              @gray-lighter;
 135
 136 @input-color:                    @text-color;
 137 @input-border:                   @gray-dark;
 138 @input-border-radius:            @border-radius-base;
 139 @input-border-focus:             #66afe9;
 140
 141 @input-color-placeholder:        @gray-light;
 142
 143 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
 144 @input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
 145 @input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
 146
 147 @legend-color:                   @text-color;
 148 @legend-border-color:            @gray-dark;
 149
 150 @input-group-addon-bg:           @gray-lighter;
 151 @input-group-addon-border-color: @input-border;
 152
 153
 154 // Dropdowns
 155 // -------------------------
 156
 157 @dropdown-bg:                    @gray-darker;
 158 @dropdown-border:                rgba(255,255,255,0.1);
 159 @dropdown-fallback-border:       #444;
 160 @dropdown-divider-bg:            rgba(255,255,255,0.1);
 161
 162 @dropdown-link-active-color:     #fff;
 163 @dropdown-link-active-bg:        @component-active-bg;
 164
 165 @dropdown-link-color:            #fff;
 166 @dropdown-link-hover-color:      #fff;
 167 @dropdown-link-hover-bg:         @dropdown-link-active-bg;
 168
 169 @dropdown-link-disabled-color:   @text-muted;
 170
 171 @dropdown-header-color:          @text-muted;
 172
 173 @dropdown-caret-color:           #000;
 174
 175
 176 // COMPONENT VARIABLES
 177 // --------------------------------------------------
 178
 179
 180 // Z-index master list
 181 // -------------------------
 182 // Used for a bird's eye view of components dependent on the z-axis
 183 // Try to avoid customizing these :)
 184
 185 @zindex-dropdown:          1000;
 186 @zindex-popover:           1010;
 187 @zindex-tooltip:           1030;
 188 @zindex-navbar-fixed:      1030;
 189 @zindex-modal-background:  1040;
 190 @zindex-modal:             1050;
 191
 192 // Media queries breakpoints
 193 // --------------------------------------------------
 194
 195 // Extra small screen / phone
 196 @screen-xsmall:              480px;
 197 @screen-phone:               @screen-xsmall;
 198
 199 // Small screen / tablet
 200 @screen-small:               768px;
 201 @screen-tablet:              @screen-small;
 202
 203 // Medium screen / desktop
 204 @screen-medium:              992px;
 205 @screen-desktop:             @screen-medium;
 206
 207 // Large screen / wide desktop
 208 @screen-large:               1200px;
 209 @screen-large-desktop:       @screen-large;
 210
 211 // So media queries don't overlap when required, provide a maximum
 212 @screen-phone-max:           (@screen-small - 1);
 213 @screen-small-max:           (@screen-medium - 1);
 214 @screen-tablet-max:          (@screen-desktop - 1);
 215 @screen-desktop-max:         (@screen-large-desktop - 1);
 216
 217
 218 // Grid system
 219 // --------------------------------------------------
 220
 221 // Number of columns in the grid system
 222 @grid-columns:              12;
 223 // Padding, to be divided by two and applied to the left and right of all columns
 224 @grid-gutter-width:         30px;
 225 // Point at which the navbar stops collapsing
 226 @grid-float-breakpoint:     @screen-tablet;
 227
 228
 229 // Navbar
 230 // -------------------------
 231
 232 // Basics of a navbar
 233 @navbar-height:                    50px;
 234 @navbar-margin-bottom:             @line-height-computed;
 235 @navbar-color:                     @text-color;
 236 @navbar-bg:                        @body-bg;
 237 @navbar-border:                    darken(@navbar-bg, 6.5%);
 238 @navbar-border-radius:             @border-radius-base;
 239 @navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
 240 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 241
 242 // Navbar links
 243 @navbar-link-color:                @text-color;
 244 @navbar-link-hover-color:          #fff;
 245 @navbar-link-hover-bg:             transparent;
 246 @navbar-link-active-color:         #fff;
 247 @navbar-link-active-bg:            transparent;
 248 @navbar-link-disabled-color:       @gray-light;
 249 @navbar-link-disabled-bg:          transparent;
 250
 251 // Navbar brand label
 252 @navbar-brand-color:               #fff;
 253 @navbar-brand-hover-color:         #fff;
 254 @navbar-brand-hover-bg:            transparent;
 255
 256 // Navbar toggle
 257 @navbar-toggle-hover-bg:           @gray-dark;
 258 @navbar-toggle-icon-bar-bg:        #ccc;
 259 @navbar-toggle-border-color:       @gray;
 260
 261
 262 // Inverted navbar
 263 //
 264 // Reset inverted navbar basics
 265 @navbar-inverse-color:                      @gray-light;
 266 @navbar-inverse-bg:                         @gray-darker;
 267 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 268
 269 // Inverted navbar links
 270 @navbar-inverse-link-color:                 @gray-light;
 271 @navbar-inverse-link-hover-color:           #fff;
 272 @navbar-inverse-link-hover-bg:              transparent;
 273 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
 274 @navbar-inverse-link-active-bg:             transparent;
 275 @navbar-inverse-link-disabled-color:        #aaa;
 276 @navbar-inverse-link-disabled-bg:           transparent;
 277
 278 // Inverted navbar brand label
 279 @navbar-inverse-brand-color:                #fff;
 280 @navbar-inverse-brand-hover-color:          #fff;
 281 @navbar-inverse-brand-hover-bg:             transparent;
 282
 283 // Inverted navbar search
 284 // Normal navbar needs no special styles or vars
 285 @navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
 286 @navbar-inverse-search-bg-focus:            #fff;
 287 @navbar-inverse-search-border:              @navbar-inverse-bg;
 288 @navbar-inverse-search-placeholder-color:   #ccc;
 289
 290 // Inverted navbar toggle
 291 @navbar-inverse-toggle-hover-bg:            #333;
 292 @navbar-inverse-toggle-icon-bar-bg:         #fff;
 293 @navbar-inverse-toggle-border-color:        #333;
 294
 295
 296 // Navs
 297 // -------------------------
 298
 299 @nav-link-padding:                          10px 15px;
 300 @nav-link-hover-bg:                         @gray-darker;
 301
 302 @nav-disabled-link-color:                   @gray-light;
 303 @nav-disabled-link-hover-color:             @gray-light;
 304
 305 @nav-open-link-hover-color:                 @gray-darker;
 306 @nav-open-caret-border-color:               #fff;
 307
 308 // Tabs
 309 @nav-tabs-border-color:                     @gray-dark;
 310
 311 @nav-tabs-link-hover-border-color:          transparent;
 312
 313 @nav-tabs-active-link-hover-bg:             @brand-primary;
 314 @nav-tabs-active-link-hover-color:          #fff;
 315 @nav-tabs-active-link-hover-border-color:   @gray-dark;
 316
 317 @nav-tabs-justified-link-border-color:            #ddd;
 318 @nav-tabs-justified-active-link-border-color:     @body-bg;
 319
 320 // Pills
 321 @nav-pills-active-link-hover-bg:            @component-active-bg;
 322 @nav-pills-active-link-hover-color:         #fff;
 323
 324
 325 // Pagination
 326 // -------------------------
 327
 328 @pagination-bg:                        @gray-darker;
 329 @pagination-border:                    @gray-dark;
 330
 331 @pagination-hover-bg:                  @gray-lighter;
 332
 333 @pagination-active-bg:                 @brand-primary;
 334 @pagination-active-color:              #fff;
 335
 336 @pagination-disabled-color:            @gray-light;
 337
 338
 339 // Pager
 340 // -------------------------
 341
 342 @pager-border-radius:                  15px;
 343 @pager-disabled-color:                 @gray-light;
 344
 345
 346 // Jumbotron
 347 // -------------------------
 348
 349 @jumbotron-bg:                   darken(@gray-darker, 5%);
 350 @jumbotron-heading-color:        inherit;
 351 @jumbotron-lead-color:           inherit;
 352
 353
 354 // Form states and alerts
 355 // -------------------------
 356
 357 @state-warning-text:             #fff;
 358 @state-warning-bg:               @brand-warning;
 359 @state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);
 360
 361 @state-danger-text:              #fff;
 362 @state-danger-bg:                @brand-danger;
 363 @state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);
 364
 365 @state-success-text:             #fff;
 366 @state-success-bg:               @brand-success;
 367 @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 368
 369 @state-info-text:                #fff;
 370 @state-info-bg:                  @brand-info;
 371 @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
 372
 373
 374 // Tooltips
 375 // -------------------------
 376 @tooltip-max-width:           200px;
 377 @tooltip-color:               #fff;
 378 @tooltip-bg:                  rgba(0,0,0,.9);
 379
 380 @tooltip-arrow-width:         5px;
 381 @tooltip-arrow-color:         @tooltip-bg;
 382
 383
 384 // Popovers
 385 // -------------------------
 386 @popover-bg:                          #fff;
 387 @popover-max-width:                   276px;
 388 @popover-border-color:                rgba(0,0,0,.2);
 389 @popover-fallback-border-color:       #ccc;
 390
 391 @popover-title-bg:                    darken(@popover-bg, 3%);
 392
 393 @popover-arrow-width:                 10px;
 394 @popover-arrow-color:                 #fff;
 395
 396 @popover-arrow-outer-width:           (@popover-arrow-width + 1);
 397 @popover-arrow-outer-color:           rgba(0,0,0,.25);
 398 @popover-arrow-outer-fallback-color:  #999;
 399
 400
 401 // Labels
 402 // -------------------------
 403
 404 @label-default-bg:            @btn-default-bg;
 405 @label-primary-bg:            @brand-primary;
 406 @label-success-bg:            @brand-success;
 407 @label-info-bg:               @brand-info;
 408 @label-warning-bg:            @brand-warning;
 409 @label-danger-bg:             @brand-danger;
 410
 411 @label-color:                 #fff;
 412 @label-link-hover-color:      #fff;
 413
 414
 415 // Modals
 416 // -------------------------
 417 @modal-inner-padding:         20px;
 418
 419 @modal-title-padding:         15px;
 420 @modal-title-line-height:     @line-height-base;
 421
 422 @modal-content-bg:                             #fff;
 423 @modal-content-border-color:                   rgba(0,0,0,.2);
 424 @modal-content-fallback-border-color:          #999;
 425
 426 @modal-backdrop-bg:           #000;
 427 @modal-header-border-color:   #e5e5e5;
 428 @modal-footer-border-color:   @modal-header-border-color;
 429
 430
 431 // Alerts
 432 // -------------------------
 433 @alert-padding:               15px;
 434 @alert-border-radius:         @border-radius-base;
 435 @alert-link-font-weight:      bold;
 436
 437 @alert-bg:                    @state-warning-bg;
 438 @alert-text:                  @state-warning-text;
 439 @alert-border:                @state-warning-border;
 440
 441 @alert-success-bg:            @state-success-bg;
 442 @alert-success-text:          @state-success-text;
 443 @alert-success-border:        @state-success-border;
 444
 445 @alert-danger-bg:             @state-danger-bg;
 446 @alert-danger-text:           @state-danger-text;
 447 @alert-danger-border:         @state-danger-border;
 448
 449 @alert-info-bg:               @state-info-bg;
 450 @alert-info-text:             @state-info-text;
 451 @alert-info-border:           @state-info-border;
 452
 453
 454 // Progress bars
 455 // -------------------------
 456 @progress-bg:                 @gray-darker;
 457 @progress-bar-color:          #fff;
 458
 459 @progress-bar-bg:             @brand-primary;
 460 @progress-bar-success-bg:     @brand-success;
 461 @progress-bar-warning-bg:     @brand-warning;
 462 @progress-bar-danger-bg:      @brand-danger;
 463 @progress-bar-info-bg:        @brand-info;
 464
 465
 466 // List group
 467 // -------------------------
 468 @list-group-bg:               @gray-darker;
 469 @list-group-border:           @gray-dark;
 470 @list-group-border-radius:    @border-radius-base;
 471
 472 @list-group-hover-bg:         lighten(@list-group-bg, 15%);
 473 @list-group-active-color:     #fff;
 474 @list-group-active-bg:        @component-active-bg;
 475 @list-group-active-border:    @list-group-active-bg;
 476
 477 @list-group-link-color:          @text-color;
 478 @list-group-link-heading-color:  #fff;
 479
 480
 481 // Panels
 482 // -------------------------
 483 @panel-bg:                    @gray-darker;
 484 @panel-border:                @gray-dark;
 485 @panel-border-radius:         @border-radius-base;
 486 @panel-heading-bg:            lighten(@gray-darker, 10%);
 487 @panel-footer-bg:             @panel-heading-bg;
 488
 489 @panel-primary-text:          #fff;
 490 @panel-primary-border:        @brand-primary;
 491 @panel-primary-heading-bg:    @brand-primary;
 492
 493 @panel-success-text:          @state-success-text;
 494 @panel-success-border:        @state-success-border;
 495 @panel-success-heading-bg:    @state-success-bg;
 496
 497 @panel-warning-text:          @state-warning-text;
 498 @panel-warning-border:        @state-warning-border;
 499 @panel-warning-heading-bg:    @state-warning-bg;
 500
 501 @panel-danger-text:           @state-danger-text;
 502 @panel-danger-border:         @state-danger-border;
 503 @panel-danger-heading-bg:     @state-danger-bg;
 504
 505 @panel-info-text:             @state-info-text;
 506 @panel-info-border:           @state-info-border;
 507 @panel-info-heading-bg:       @state-info-bg;
 508
 509
 510 // Thumbnails
 511 // -------------------------
 512 @thumbnail-padding:           4px;
 513 @thumbnail-bg:                @body-bg;
 514 @thumbnail-border:            #ddd;
 515 @thumbnail-border-radius:     @border-radius-base;
 516
 517 @thumbnail-caption-color:     @text-color;
 518 @thumbnail-caption-padding:   9px;
 519
 520
 521 // Wells
 522 // -------------------------
 523 @well-bg:                     darken(@gray-darker, 5%);
 524
 525
 526 // Badges
 527 // -------------------------
 528 @badge-color:                 #fff;
 529 @badge-link-hover-color:      #fff;
 530 @badge-bg:                    @brand-primary;
 531
 532 @badge-active-color:          @brand-primary;
 533 @badge-active-bg:             #fff;
 534
 535 @badge-font-weight:           bold;
 536 @badge-line-height:           1;
 537 @badge-border-radius:         10px;
 538
 539
 540 // Breadcrumbs
 541 // -------------------------
 542 @breadcrumb-bg:               @gray-darker;
 543 @breadcrumb-color:            #fff;
 544 @breadcrumb-active-color:     @text-color;
 545
 546
 547 // Carousel
 548 // ------------------------
 549
 550 @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
 551
 552 @carousel-control-color:                      #fff;
 553 @carousel-control-width:                      15%;
 554 @carousel-control-opacity:                    .5;
 555 @carousel-control-font-size:                  20px;
 556
 557 @carousel-indicator-active-bg:                #fff;
 558 @carousel-indicator-border-color:             #fff;
 559
 560 @carousel-caption-color:                      #fff;
 561
 562
 563 // Close
 564 // ------------------------
 565 @close-color:                 #000;
 566 @close-font-weight:           bold;
 567 @close-text-shadow:           0 1px 0 #fff;
 568
 569
 570 // Code
 571 // ------------------------
 572 @code-color:                  #c7254e;
 573 @code-bg:                     #f9f2f4;
 574
 575 @pre-bg:                      #f5f5f5;
 576 @pre-color:                   @gray-dark;
 577 @pre-border-color:            #ccc;
 578 @pre-scrollable-max-height:   340px;
 579
 580 // Type
 581 // ------------------------
 582 @text-muted:                  @gray-light;
 583 @abbr-border-color:           @gray-light;
 584 @headings-small-color:        @gray-light;
 585 @blockquote-small-color:      @gray;
 586 @blockquote-border-color:     @gray-dark;
 587 @page-header-border-color:    @gray-dark;
 588
 589 // Miscellaneous
 590 // -------------------------
 591
 592 // Hr border color
 593 @hr-border:                   @gray-lighter;
 594
 595 // Horizontal forms & lists
 596 @component-offset-horizontal: 180px;
 597
 598
 599 // Container sizes
 600 // --------------------------------------------------
 601
 602 // Small screen / tablet
 603 @container-tablet:          728px;
 604
 605 // Medium screen / desktop
 606 @container-desktop:         940px;
 607
 608 // Large screen / wide desktop
 609 @container-large-desktop:   1170px;