_variables.scss 29.2 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708

// Colors
// -------------------------------

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #4a87ee !default;
$calm:                            #43cee6 !default;
$balanced:                        #66cc33 !default;
$energized:                       #f0b840 !default;
$assertive:                       #ef4e3a !default;
$royal:                           #8a6de9 !default;
$dark:                            #444 !default;


// Base
// -------------------------------

$font-family-sans-serif:          "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-light-sans-serif:    "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-serif:               Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace:           Monaco, Menlo, Consolas, "Courier New", monospace !default;

$font-family-base:                $font-family-sans-serif !default;
$font-size-base:                  14px !default;
$font-size-large:                 18px !default;
$font-size-small:                 11px !default;

$line-height-base:                1.428571429 !default; // 20/14
$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
$line-height-large:               1.33 !default;
$line-height-small:               1.5 !default;

$headings-font-family:            $font-family-base !default;
$headings-font-weight:            500 !default;
$headings-line-height:            1.2 !default;

$base-background-color:           #fff !default;
$base-color:                      #000 !default;

$link-color:                      $positive !default;
$link-hover-color:                darken($link-color, 15%) !default;

$content-padding:                 10px !default;

$padding-base-vertical:           6px !default;
$padding-base-horizontal:         12px !default;

$padding-large-vertical:          10px !default;
$padding-large-horizontal:        16px !default;

$padding-small-vertical:          5px !default;
$padding-small-horizontal:        10px !default;

$border-radius-base:              4px !default;
$border-radius-large:             6px !default;
$border-radius-small:             3px !default;


// Content
// -------------------------------

$scroll-refresh-icon-color:       #666666 !default;


// Buttons
// -------------------------------

$button-color:                    #222 !default;
$button-block-margin:             10px !default;
$button-clear-padding:            6px !default;
$button-border-radius:            2px !default;
$button-border-width:             1px !default;

$button-font-size:                16px !default;
$button-height:                   42px !default;
$button-padding:                  12px !default;
$button-icon-size:                24px !default;

$button-large-font-size:          20px !default;
$button-large-height:             54px !default;
$button-large-padding:            16px !default;
$button-large-icon-size:          32px !default;

$button-small-font-size:          12px !default;
$button-small-height:             28px !default;
$button-small-padding:            4px !default;
$button-small-icon-size:          16px !default;

$button-bar-button-font-size:     13px !default;
$button-bar-button-height:        32px !default;
$button-bar-button-padding:       8px !default;
$button-bar-button-icon-size:     20px !default;

$button-light-bg:                 $light !default;
$button-light-text:               #444 !default;
$button-light-border:             #ddd !default;
$button-light-active-bg:          #fafafa !default;
$button-light-active-border:      #ccc !default;

$button-stable-bg:                $stable !default;
$button-stable-text:              #444 !default;
$button-stable-border:            #b2b2b2 !default;
$button-stable-active-bg:         #e5e5e5 !default;
$button-stable-active-border:     #a2a2a2 !default;

$button-positive-bg:              $positive !default;
$button-positive-text:            #fff !default;
$button-positive-border:          darken($positive, 15%) !default;
$button-positive-active-bg:       darken($positive, 15%) !default;
$button-positive-active-border:   darken($positive, 15%) !default;

$button-calm-bg:                  $calm !default;
$button-calm-text:                #fff !default;
$button-calm-border:              darken($calm, 15%) !default;
$button-calm-active-bg:           darken($calm, 15%) !default;
$button-calm-active-border:       darken($calm, 15%) !default;

$button-assertive-bg:             $assertive !default;
$button-assertive-text:           #fff !default;
$button-assertive-border:         darken($assertive, 15%) !default;
$button-assertive-active-bg:      darken($assertive, 15%) !default;
$button-assertive-active-border:  darken($assertive, 15%) !default;

$button-balanced-bg:              $balanced !default;
$button-balanced-text:            #fff !default;
$button-balanced-border:          darken($balanced, 15%) !default;
$button-balanced-active-bg:       darken($balanced, 15%) !default;
$button-balanced-active-border:   darken($balanced, 15%) !default;

$button-energized-bg:             $energized !default;
$button-energized-text:           #fff !default;
$button-energized-border:         darken($energized, 15%) !default;
$button-energized-active-bg:      darken($energized, 15%) !default;
$button-energized-active-border:  darken($energized, 15%) !default;

$button-royal-bg:                 $royal !default;
$button-royal-text:               #fff !default;
$button-royal-border:             darken($royal, 15%) !default;
$button-royal-active-bg:          darken($royal, 15%) !default;
$button-royal-active-border:      darken($royal, 15%) !default;

$button-dark-bg:                  $dark !default;
$button-dark-text:                #fff !default;
$button-dark-border:              #111 !default;
$button-dark-active-bg:           #262626 !default;
$button-dark-active-border:       #000 !default;

$button-default-bg:               $button-stable-bg !default;
$button-default-text:             $button-stable-text !default;
$button-default-border:           $button-stable-border !default;
$button-default-active-bg:        $button-stable-active-bg !default;
$button-default-active-border:    $button-stable-active-border !default;


// Bars
// -------------------------------

$bar-height:                      44px !default;
$bar-title-font-size:             17px !default;
$bar-padding-portrait:            5px !default;
$bar-padding-landscape:           5px !default;
$bar-transparency:                1 !default;

$bar-light-bg:                    rgba($button-light-bg, $bar-transparency) !default;
$bar-light-text:                  $button-light-text !default;
$bar-light-border:                $button-light-border !default;
$bar-light-active-bg:             $button-light-active-bg !default;
$bar-light-active-border:         $button-light-active-border !default;

$bar-stable-bg:                   rgba($button-stable-bg, $bar-transparency) !default;
$bar-stable-text:                 $button-stable-text !default;
$bar-stable-border:               $button-stable-border !default;
$bar-stable-active-bg:            $button-stable-active-bg !default;
$bar-stable-active-border:        $button-stable-active-border !default;

$bar-positive-bg:                 rgba($button-positive-bg, $bar-transparency) !default;
$bar-positive-text:               $button-positive-text !default;
$bar-positive-border:             $button-positive-border !default;
$bar-positive-active-bg:          $button-positive-active-bg !default;
$bar-positive-active-border:      $button-positive-active-border !default;

$bar-calm-bg:                     rgba($button-calm-bg, $bar-transparency) !default;
$bar-calm-text:                   $button-calm-text !default;
$bar-calm-border:                 $button-calm-border !default;
$bar-calm-active-bg:              $button-calm-active-bg !default;
$bar-calm-active-border:          $button-calm-active-border !default;

$bar-assertive-bg:                rgba($button-assertive-bg, $bar-transparency) !default;
$bar-assertive-text:              $button-assertive-text !default;
$bar-assertive-border:            $button-assertive-border !default;
$bar-assertive-active-bg:         $button-assertive-active-bg !default;
$bar-assertive-active-border:     $button-assertive-active-border !default;

$bar-balanced-bg:                 rgba($button-balanced-bg, $bar-transparency) !default;
$bar-balanced-text:               $button-balanced-text !default;
$bar-balanced-border:             $button-balanced-border !default;
$bar-balanced-active-bg:          $button-balanced-active-bg !default;
$bar-balanced-active-border:      $button-balanced-active-border !default;

$bar-energized-bg:                rgba($button-energized-bg, $bar-transparency) !default;
$bar-energized-text:              $button-energized-text !default;
$bar-energized-border:            $button-energized-border !default;
$bar-energized-active-bg:         $button-energized-active-bg !default;
$bar-energized-active-border:     $button-energized-active-border !default;

$bar-royal-bg:                    rgba($button-royal-bg, $bar-transparency) !default;
$bar-royal-text:                  $button-royal-text !default;
$bar-royal-border:                $button-royal-border !default;
$bar-royal-active-bg:             $button-royal-active-bg !default;
$bar-royal-active-border:         $button-royal-active-border !default;

$bar-dark-bg:                     rgba($button-dark-bg, $bar-transparency) !default;
$bar-dark-text:                   $button-dark-text !default;
$bar-dark-border:                 $button-dark-border !default;
$bar-dark-active-bg:              $button-dark-active-bg !default;
$bar-dark-active-border:          $button-dark-active-border !default;

$bar-default-bg:                  $bar-light-bg !default;
$bar-default-text:                $bar-light-text !default;
$bar-default-border:              $bar-light-border !default;
$bar-default-active-bg:           $bar-light-active-bg !default;
$bar-default-active-border:       $bar-light-active-border !default;


// Tabs
// -------------------------------

$tabs-height:                     49px !default;
$tabs-text-font-size:             14px !default;
$tabs-text-font-size-side-icon:   12px !default;
$tabs-icon-size:                  32px !default;
$tabs-badge-padding:              1px 6px !default;
$tabs-badge-font-size:            12px !default;
$tabs-text-font-size:             14px !default;

$tabs-light-bg:                   $button-light-bg !default;
$tabs-light-border:               $button-light-border !default;
$tabs-light-text:                 $button-light-text !default;

$tabs-stable-bg:                  $button-stable-bg !default;
$tabs-stable-border:              $button-stable-border !default;
$tabs-stable-text:                $button-stable-text !default;

$tabs-positive-bg:                $button-positive-bg !default;
$tabs-positive-border:            $button-positive-border !default;
$tabs-positive-text:              $button-positive-text !default;

$tabs-calm-bg:                    $button-calm-bg !default;
$tabs-calm-border:                $button-calm-border !default;
$tabs-calm-text:                  $button-calm-text !default;

$tabs-assertive-bg:               $button-assertive-bg !default;
$tabs-assertive-border:           $button-assertive-border !default;
$tabs-assertive-text:             $button-assertive-text !default;

$tabs-balanced-bg:                $button-balanced-bg !default;
$tabs-balanced-border:            $button-balanced-border !default;
$tabs-balanced-text:              $button-balanced-text !default;

$tabs-energized-bg:               $button-energized-bg !default;
$tabs-energized-border:           $button-energized-border !default;
$tabs-energized-text:             $button-energized-text !default;

$tabs-royal-bg:                   $button-royal-bg !default;
$tabs-royal-border:               $button-royal-border !default;
$tabs-royal-text:                 $button-royal-text !default;

$tabs-dark-bg:                    $button-dark-bg !default;
$tabs-dark-border:                $button-dark-border !default;
$tabs-dark-text:                  $button-dark-text !default;

$tabs-default-bg:                 $tabs-stable-bg !default;
$tabs-default-border:             $tabs-stable-border !default;
$tabs-default-text:               $tabs-stable-text !default;

$tab-item-max-width:              150px !default;

$tabs-striped-off-color: #000;
$tabs-striped-off-opacity: 0.4;
$tabs-striped-border-width: 2px;


// Items
// -------------------------------

$item-font-size:                  16px !default;
$item-border-width:               1px !default;
$item-padding:                    16px !default;

$item-button-font-size:           18px !default;
$item-button-line-height:         32px !default;
$item-icon-font-size:             32px !default;
$item-icon-fill-font-size:        28px !default;

$item-icon-accessory-color:       #ccc !default;
$item-icon-accessory-font-size:   16px !default;

$item-avatar-width:               40px !default;
$item-avatar-height:              40px !default;
$item-avatar-border-radius:       4px !default;

$item-thumbnail-width:            80px !default;
$item-thumbnail-height:           80px !default;
$item-thumbnail-margin:           10px !default;

$item-divider-bg:                 #f5f5f5 !default;
$item-divider-color:              #222 !default;
$item-divider-padding:            5px 15px !default;

$item-light-bg:                   $button-light-bg !default;
$item-light-border:               $button-light-border !default;
$item-light-text:                 $button-light-text !default;
$item-light-active-bg:            $button-light-active-bg !default;
$item-light-active-border:        $button-light-active-border !default;

$item-stable-bg:                  $button-stable-bg !default;
$item-stable-border:              $button-stable-border !default;
$item-stable-text:                $button-stable-text !default;
$item-stable-active-bg:           $button-stable-active-bg !default;
$item-stable-active-border:       $button-stable-active-border !default;

$item-positive-bg:                $button-positive-bg !default;
$item-positive-border:            $button-positive-border !default;
$item-positive-text:              $button-positive-text !default;
$item-positive-active-bg:         $button-positive-active-bg !default;
$item-positive-active-border:     $button-positive-active-border !default;

$item-calm-bg:                    $button-calm-bg !default;
$item-calm-border:                $button-calm-border !default;
$item-calm-text:                  $button-calm-text !default;
$item-calm-active-bg:             $button-calm-active-bg !default;
$item-calm-active-border:         $button-calm-active-border !default;

$item-assertive-bg:               $button-assertive-bg !default;
$item-assertive-border:           $button-assertive-border !default;
$item-assertive-text:             $button-assertive-text !default;
$item-assertive-active-bg:        $button-assertive-active-bg !default;
$item-assertive-active-border:    $button-assertive-active-border !default;

$item-balanced-bg:                $button-balanced-bg !default;
$item-balanced-border:            $button-balanced-border !default;
$item-balanced-text:              $button-balanced-text !default;
$item-balanced-active-bg:         $button-balanced-active-bg !default;
$item-balanced-active-border:     $button-balanced-active-border !default;

$item-energized-bg:               $button-energized-bg !default;
$item-energized-border:           $button-energized-border !default;
$item-energized-text:             $button-energized-text !default;
$item-energized-active-bg:        $button-energized-active-bg !default;
$item-energized-active-border:    $button-energized-active-border !default;

$item-royal-bg:                   $button-royal-bg !default;
$item-royal-border:               $button-royal-border !default;
$item-royal-text:                 $button-royal-text !default;
$item-royal-active-bg:            $button-royal-active-bg !default;
$item-royal-active-border:        $button-royal-active-border !default;

$item-dark-bg:                    $button-dark-bg !default;
$item-dark-border:                $button-dark-border !default;
$item-dark-text:                  $button-dark-text !default;
$item-dark-active-bg:             $button-dark-active-bg !default;
$item-dark-active-border:         $button-dark-active-border !default;

$item-default-bg:                 $item-light-bg !default;
$item-default-border:             $item-light-border !default;
$item-default-text:               $item-light-text !default;
$item-default-active-bg:          #D9D9D9 !default;
$item-default-active-border:      $item-light-active-border !default;


// Item Editing
// -------------------------------

$item-edit-transition-duration:   250ms !default;
$item-edit-transition-function:   ease-in-out !default;

$item-left-edit-left:             8px !default;  // item's left side edit's "left" property

$item-right-edit-open-width:      50px !default;
$item-left-edit-open-width:       50px !default;

$item-delete-icon-size:           24px !default;
$item-delete-icon-color:          $assertive !default;

$item-reorder-icon-size:          32px !default;
$item-reorder-icon-color:         $dark !default;


// Lists
// -------------------------------

$list-header-bg:                  transparent !default;
$list-header-color:               #222 !default;
$list-header-padding:             5px 15px !default;
$list-header-margin-top:          20px !default;


// Cards
// -------------------------------

$card-header-bg:                  #F5F5F5 !default;
$card-body-bg:                    #fff !default;
$card-footer-bg:                  #F5F5F5 !default;

$card-padding:                    10px !default;
$card-border-width:               1px !default;

$card-border-color:               #ccc !default;
$card-border-radius:              2px !default;


// Forms
// -------------------------------

$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;

$input-bg:                        $light !default;
$input-bg-disabled:               $stable !default;

$input-color:                     #111 !default;
$input-border:                    $item-default-border !default;
$input-border-width:              $item-border-width !default;
$input-label-color:               $dark !default;
$input-color-placeholder:         lighten($dark, 40%) !default;


// Progress
// -------------------------------

$progress-width:                  100% !default;
$progress-margin:                 15px auto !default;


// Toggle
// -------------------------------

$toggle-width:                    54px !default;
$toggle-height:                   32px !default;
$toggle-border-width:             2px !default;
$toggle-border-radius:            20px !default;

$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2) !default;
$toggle-handle-height:            $toggle-handle-width !default;
$toggle-handle-radius:            $toggle-handle-width !default;
$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;

$toggle-off-bg-color:             #E5E5E5 !default;
$toggle-off-border-color:         #E5E5E5 !default;

$toggle-on-light-bg:              $button-light-border !default;
$toggle-on-light-border:          $toggle-on-light-bg !default;
$toggle-on-stable-bg:             $button-stable-border !default;
$toggle-on-stable-border:         $toggle-on-stable-bg !default;
$toggle-on-positive-bg:           $positive !default;
$toggle-on-positive-border:       $toggle-on-positive-bg !default;
$toggle-on-calm-bg:               $calm !default;
$toggle-on-calm-border:           $toggle-on-calm-bg !default;
$toggle-on-assertive-bg:          $assertive !default;
$toggle-on-assertive-border:      $toggle-on-assertive-bg !default;
$toggle-on-balanced-bg:           $balanced !default;
$toggle-on-balanced-border:       $toggle-on-balanced-bg !default;
$toggle-on-energized-bg:          $energized !default;
$toggle-on-energized-border:      $toggle-on-energized-bg !default;
$toggle-on-royal-bg:              $royal !default;
$toggle-on-royal-border:          $toggle-on-royal-bg !default;
$toggle-on-dark-bg:               $dark !default;
$toggle-on-dark-border:           $toggle-on-dark-bg !default;
$toggle-on-default-bg:            $positive !default;
$toggle-on-default-border:        $toggle-on-default-bg !default;

$toggle-handle-off-bg-color:      $light !default;
$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;

$toggle-transition-duration:      .2s !default;

$toggle-hit-area-expansion:   5px;


// Checkbox
// -------------------------------

$checkbox-width:                  28px !default;
$checkbox-height:                 28px !default;
$checkbox-border-radius:          $checkbox-width !default;
$checkbox-border-width:           1px !default;

$checkbox-off-bg-color:           #fff !default;
$checkbox-off-border-light:       $button-light-border !default;
$checkbox-on-bg-light:            $button-light-border !default;
$checkbox-off-border-stable:      $button-stable-border !default;
$checkbox-on-bg-stable:           $button-stable-border !default;
$checkbox-off-border-positive:    $positive !default;
$checkbox-on-bg-positive:         $positive !default;
$checkbox-off-border-calm:        $calm !default;
$checkbox-on-bg-calm:             $calm !default;
$checkbox-off-border-assertive:   $assertive !default;
$checkbox-on-bg-assertive:        $assertive !default;
$checkbox-off-border-balanced:    $balanced !default;
$checkbox-on-bg-balanced:         $balanced !default;
$checkbox-off-border-energized:   $energized !default;
$checkbox-on-bg-energized:        $energized !default;
$checkbox-off-border-royal:       $royal !default;
$checkbox-on-bg-royal:            $royal !default;
$checkbox-off-border-dark:        $dark !default;
$checkbox-on-bg-dark:             $dark !default;
$checkbox-off-border-default:     $positive !default;
$checkbox-on-bg-default:          $positive !default;

$checkbox-check-width:            3px !default;
$checkbox-check-color:            #fff !default;


// Range
// -------------------------------

$range-track-height:              4px !default;
$range-slider-width:              20px !default;
$range-slider-height:             20px !default;
$range-slider-border-radius:      10px !default;
$range-icon-size:                 24px !default;

$range-light-track-bg:            $button-light-border !default;
$range-stable-track-bg:           $button-stable-border !default;
$range-positive-track-bg:         $button-positive-bg !default;
$range-calm-track-bg:             $button-calm-bg !default;
$range-balanced-track-bg:         $button-balanced-bg !default;
$range-assertive-track-bg:        $button-assertive-bg !default;
$range-energized-track-bg:        $button-energized-bg !default;
$range-royal-track-bg:            $button-royal-bg !default;
$range-dark-track-bg:             $button-dark-bg !default;
$range-default-track-bg:          #ccc !default;


// Menus
// -------------------------------

$menu-bg:                         #fff !default;
$menu-width:                      275px !default;
$menu-animation-speed:            200ms !default;

$menu-side-shadow:                -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;


// Modals
// -------------------------------

$modal-bg-color:                  #fff !default;
$modal-backdrop-bg-active:        rgba(0,0,0,0.5) !default;
$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;

$modal-inset-mode-break-point:    680px !default;  // @media min-width
$modal-inset-mode-top:            20% !default;
$modal-inset-mode-right:          20% !default;
$modal-inset-mode-bottom:         20% !default;
$modal-inset-mode-left:           20% !default;
$modal-inset-mode-min-height:     240px !default;


// Popovers
// -------------------------------

$popover-bg-color:                $light !default;
$popover-backdrop-bg-active:      rgba(0,0,0,0.1) !default;
$popover-backdrop-bg-inactive:    rgba(0,0,0,0) !default;
$popover-width:                   220px !default;
$popover-height:                  280px !default;
$popover-large-break-point:       680px !default;
$popover-large-width:             360px !default;

$popover-box-shadow:              0 1px 3px rgba(0,0,0,0.4) !default;
$popover-border-radius:           2px !default;

$popover-box-shadow-ios:          0 0 40px rgba(0,0,0,0.08) !default;
$popover-border-radius-ios:       10px !default;

$popover-bg-color-android:        #fafafa !default;
$popover-box-shadow-android:      0 2px 6px rgba(0,0,0,0.35) !default;


// Grids
// -------------------------------

$grid-padding-width:              10px !default;
$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet


// Action Sheets
// -------------------------------

$sheet-bg-color:                  rgba(255, 255, 255, 0.6) !default;
$sheet-opacity:                   0.95 !default;

$sheet-border-radius:             3px 3px 3px 3px !default;
$sheet-border-radius-top:         3px 3px 0px 0px !default;
$sheet-border-radius-bottom:      0px 0px 3px 3px !default;


// Popups
// -------------------------------

$popup-width:                     250px !default;
$popup-enter-animation:           superScaleIn !default;
$popup-enter-animation-duration:  0.2s !default;
$popup-leave-animation-duration:  0.1s !default;

$popup-border-radius:             0px !default;
$popup-background-color:          rgba(255,255,255,0.9) !default;

$popup-button-border-radius:      2px !default;
$popup-button-line-height:        20px !default;
$popup-button-min-height:         45px !default;


// Loading
// -------------------------------

$loading-text-color:              #fff !default;
$loading-bg-color:                rgba(0,0,0,0.7) !default;
$loading-padding:                 20px !default;
$loading-border-radius:           5px !default;
$loading-font-size:               15px !default;

$loading-backdrop-fadein-duration:0.3s !default;
$loading-backdrop-bg-color:       rgba(0,0,0,0.7) !default;


// Badges
// -------------------------------

$badge-font-size:                 14px !default;
$badge-line-height:               16px !default;
$badge-font-weight:               bold !default;
$badge-border-radius:             10px !default;

$badge-light-bg:                  $button-light-bg !default;
$badge-light-text:                $button-light-text !default;

$badge-stable-bg:                 $button-stable-bg !default;
$badge-stable-text:               $button-stable-text !default;

$badge-positive-bg:               $button-positive-bg !default;
$badge-positive-text:             $button-positive-text !default;

$badge-calm-bg:                   $button-calm-bg !default;
$badge-calm-text:                 $button-calm-text !default;

$badge-balanced-bg:               $button-balanced-bg !default;
$badge-balanced-text:             $button-balanced-text !default;

$badge-assertive-bg:              $button-assertive-bg !default;
$badge-assertive-text:            $button-assertive-text !default;

$badge-energized-bg:              $button-energized-bg !default;
$badge-energized-text:            $button-energized-text !default;

$badge-royal-bg:                  $button-royal-bg !default;
$badge-royal-text:                $button-royal-text !default;

$badge-dark-bg:                   $button-dark-bg !default;
$badge-dark-text:                 $button-dark-text !default;

$badge-default-bg:                transparent !default;
$badge-default-text:              #AAAAAA !default;


// Z-Indexes
// -------------------------------

$z-index-bar-title:               0 !default;
$z-index-item-drag:               0 !default;
$z-index-item-edit:               0 !default;
$z-index-menu:                    0 !default;
$z-index-badge:                   1 !default;
$z-index-bar-button:              1 !default;
$z-index-item-options:            1 !default;
$z-index-pane:                    1 !default;
$z-index-slider-pager:            1 !default;
$z-index-view:                    1 !default;
$z-index-item:                    2 !default;
$z-index-item-checkbox:           3 !default;
$z-index-item-radio:              3 !default;
$z-index-item-reorder:            3 !default;
$z-index-item-toggle:             3 !default;
$z-index-tabs:                    5 !default;
$z-index-item-reordering:         9 !default;
$z-index-bar:                     10 !default;
$z-index-menu-scroll-content:     10 !default;
$z-index-modal:                   10 !default;
$z-index-popover:                 10 !default;
$z-index-action-sheet:            11 !default;
$z-index-backdrop:                11 !default;
$z-index-menu-bar-header:         11 !default;
$z-index-scroll-content-false:    11 !default;
$z-index-popup:                   12 !default;
$z-index-loading:                 13 !default;
$z-index-scroll-bar:              9999 !default;
$z-index-click-block:             99999 !default;


// Platform
// -------------------------------

$ios-statusbar-height:           20px !default;