afm-client/bower_components/foundation-apps/scss/_settings.scss

   1 //  FOUNDATION FOR APPS SETTINGS
   2 //  ----------------------------
   3 //
   4 //  Table of Contents:
   5 //
   6 //  1.  CSS Exports
   7 //  2.  Global Styles
   8 //  3.  Breakpoints
   9 //  4.  Typography
  10 //  5.  Grid
  11 //  6.  Button
  12 //  7.  Accordion
  13 //  8.  Action Sheet
  14 //  9.  Block List
  15 //  10. Button Group
  16 //  11. Card
  17 //  12. Extras
  18 //  13. Forms
  19 //  14. Iconic
  20 //  15. Label
  21 //  16. Menu Bar
  22 //  17. Modal
  23 //  18. Motion UI
  24 //  19. Notification
  25 //  20. Off-canvas
  26 //  21. Panel
  27 //  22. Popup
  28 //  23. Switch
  29 //  24. Tabs
  30 //  25. Title Bar
  31
  32 @import "helpers/functions";
  33
  34 // 1. CSS Exports
  35 // - - - - - - - - - - - - - - -
  36
  37 // Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
  38
  39 // $include-css: (
  40 //   accordion: true,
  41 //   action-sheet: true,
  42 //   block-list: true,
  43 //   button: true,
  44 //   button-group: true,
  45 //   card: true,
  46 //   coloring: true,
  47 //   extras: true,
  48 //   forms: true,
  49 //   grid: true,
  50 //   iconic: true,
  51 //   label: true,
  52 //   badge: true,
  53 //   list: true,
  54 //   menu-bar: true,
  55 //   modal: true,
  56 //   motion: true,
  57 //   notification: true,
  58 //   off-canvas: true,
  59 //   panel: true,
  60 //   popup: true,
  61 //   switch: true,
  62 //   tabs: true,
  63 //   title-bar: true,
  64 //   typography: true,
  65 //   utilities: true,
  66 // );
  67
  68 // 2. Global Styles
  69 // - - - - - - - - - - - - - - -
  70
  71 // This sets 1rem to be 16px
  72 // $rem-base: 16px;
  73
  74 // The default font-size is set to 100% of the browser style sheet (usually 16px)
  75 // for compatibility with browser-based text zoom or user-set defaults.
  76
  77 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
  78 // If you want your base font-size to be different and not have it affect the grid breakpoints,
  79 // set $rem-base to $base-font-size and make sure $base-font-size is a px value.
  80 // $base-font-size: 100%;
  81
  82 // $base-line-height is 24px while $base-font-size is 16px
  83 // $base-line-height: 1.5;
  84
  85 // Text selector helpers
  86 // $headers: "h1,h2,h3,h4,h5,h6";
  87
  88 // We use these to define default font weights
  89 // $font-weight-normal: normal;
  90 // $font-weight-bold: bold;
  91
  92 // We use these to control various global styles
  93 // $body-background: #fff;
  94 // $body-font-color: #222;
  95 // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  96 // $body-font-weight: $font-weight-normal;
  97 // $body-font-style: normal;
  98 // $body-antialiased: true;
  99
 100 // Application Colors
 101 // $primary-color: #00558b;
 102 // $secondary-color: #f1f1f1;
 103 // $alert-color: #F04124;
 104 // $info-color: #A0D3E8;
 105 // $success-color: #43AC6A;
 106 // $warning-color: #F08A24;
 107 // $dark-color: #232323;
 108 // $gray: #dfdfdf;
 109 // $gray-dark: darken($gray, 8);
 110 // $gray-light: lighten($gray, 8);
 111
 112 // We use these to make sure border radius matches unless we want it different.
 113 // $global-radius: 4px;
 114 // $global-rounded: 1000px;
 115
 116 // We use this for default spacing
 117 // $global-padding: 1rem;
 118 // $global-spacing: rem-calc(15);
 119
 120 // 3. Breakpoints
 121 // - - - - - - - - - - - - - - -
 122
 123 // These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
 124 // $breakpoints: (
 125 //   small: rem-calc(0),
 126 //   medium: rem-calc(640),
 127 //   large: rem-calc(1200),
 128 //   xlarge: rem-calc(1440),
 129 //   xxlarge: rem-calc(1920),
 130 // );
 131
 132 // All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
 133 // $breakpoint-classes: (small medium large);
 134
 135 // 4. Typography
 136 // - - - - - - - - - - - - - - -
 137
 138 // We use these to control header font styles
 139 // $header-font-family: $body-font-family;
 140 // $header-font-weight: $font-weight-normal;
 141 // $header-font-style: $font-weight-normal;
 142 // $header-font-color: #222;
 143 // $header-line-height: 1.4;
 144 // $header-top-margin: .2rem;
 145 // $header-bottom-margin: .5rem;
 146 // $header-text-rendering: optimizeLegibility;
 147
 148 // We use these to control header font sizes
 149 // $h1-font-size: rem-calc(44);
 150 // $h2-font-size: rem-calc(37);
 151 // $h3-font-size: rem-calc(27);
 152 // $h4-font-size: rem-calc(23);
 153 // $h5-font-size: rem-calc(18);
 154 // $h6-font-size: 1rem;
 155
 156 // We use these to control header size reduction on small screens
 157 // $h1-font-reduction: rem-calc(10);
 158 // $h2-font-reduction: rem-calc(10);
 159 // $h3-font-reduction: rem-calc(5);
 160 // $h4-font-reduction: rem-calc(5);
 161 // $h5-font-reduction: 0;
 162 // $h6-font-reduction: 0;
 163
 164 // These control how subheaders are styled.
 165 // $subheader-line-height: 1.4;
 166 // $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
 167 // $subheader-font-weight: $font-weight-normal;
 168 // $subheader-top-margin: .2rem;
 169 // $subheader-bottom-margin: .5rem;
 170
 171 // A general <small> styling
 172 // $small-font-size: 60%;
 173 // $small-font-color: scale-color($header-font-color, $lightness: 35%);
 174
 175 // We use these to style paragraphs
 176 // $paragraph-font-family: inherit;
 177 // $paragraph-font-weight: $font-weight-normal;
 178 // $paragraph-font-size: 1rem;
 179 // $paragraph-line-height: 1.6;
 180 // $paragraph-margin-bottom: rem-calc(20);
 181 // $paragraph-aside-font-size: rem-calc(14);
 182 // $paragraph-aside-line-height: 1.35;
 183 // $paragraph-aside-font-style: italic;
 184 // $paragraph-text-rendering: optimizeLegibility;
 185
 186 // We use these to style <code> tags
 187 // $code-color: grayscale($primary-color);
 188 // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
 189 // $code-font-weight: $font-weight-normal;
 190 // $code-background-color: scale-color($secondary-color, $lightness: 70%);
 191 // $code-border-size: 1px;
 192 // $code-border-style: solid;
 193 // $code-border-color: scale-color($code-background-color, $lightness: -10%);
 194 // $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
 195
 196 // We use these to style anchors
 197 // $anchor-text-decoration: none;
 198 // $anchor-text-decoration-hover: none;
 199 // $anchor-font-color: $primary-color;
 200 // $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
 201
 202 // We use these to style the <hr> element
 203 // $hr-border-width: 1px;
 204 // $hr-border-style: solid;
 205 // $hr-border-color: #ddd;
 206 // $hr-margin: rem-calc(20);
 207
 208 // We use these to style lists
 209 // $list-font-family: $paragraph-font-family;
 210 // $list-font-size: $paragraph-font-size;
 211 // $list-line-height: $paragraph-line-height;
 212 // $list-margin-bottom: $paragraph-margin-bottom;
 213 // $list-style-position: outside;
 214 // $list-side-margin: 1.1rem;
 215 // $list-ordered-side-margin: 1.4rem;
 216 // $list-side-margin-no-bullet: 0;
 217 // $list-nested-margin: rem-calc(20);
 218 // $definition-list-header-weight: $font-weight-bold;
 219 // $definition-list-header-margin-bottom: .3rem;
 220 // $definition-list-margin-bottom: rem-calc(12);
 221
 222 // We use these to style blockquotes
 223 // $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
 224 // $blockquote-padding: rem-calc(9 20 0 19);
 225 // $blockquote-border: 1px solid #ddd;
 226 // $blockquote-cite-font-size: rem-calc(13);
 227 // $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
 228 // $blockquote-cite-link-color: $blockquote-cite-font-color;
 229
 230 // Acronym styles
 231 // $acronym-underline: 1px dotted #ddd;
 232
 233 // 5. Grid
 234 // - - - - - - - - - - - - - - -
 235
 236 // $container-width: rem-calc(900);
 237 // $block-padding: $global-padding;
 238 // $total-columns: 12;
 239 // $block-grid-max-size: 6;
 240
 241 // 6. Button
 242 // - - - - - - - - - - - - - - -
 243
 244 // $button-padding: 0.85em 1em;
 245 // $button-margin: 0 $global-padding $global-padding 0;
 246 // $button-style: solid;
 247 // $button-background: $primary-color;
 248 // $button-background-hover: scale-color($button-background, $lightness: -15%);
 249 // $button-color: auto;
 250 // $button-radius: 0;
 251 // $button-sizes: (
 252 //   tiny: 0.7,
 253 //   small: 0.8,
 254 //   medium: 1,
 255 //   large: 1.3,
 256 // );
 257 // $button-font-size: 0.9rem;
 258 // $button-opacity-disabled: 0.5;
 259 // $button-tag-selector: false;
 260
 261 // 7. Accordion
 262 // - - - - - - - - - - - - - - -
 263
 264 // $accordion-border: 1px solid $gray-dark;
 265
 266 // $accordion-title-background: $gray-light;
 267 // $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
 268 // $accordion-title-background-active: smartscale($accordion-title-background, 3%);
 269 // $accordion-title-color: isitlight($accordion-title-background);
 270 // $accordion-title-color-active: isitlight($accordion-title-background);
 271
 272 // $accordion-title-padding: $global-padding;
 273 // $accordion-content-padding: $global-padding;
 274
 275 // 8. Action Sheet
 276 // - - - - - - - - - - - - - - -
 277
 278 // $actionsheet-background: white;
 279 // $actionsheet-border-color: #ccc;
 280 // $actionsheet-animate: transform opacity;
 281 // $actionsheet-animation-speed: 0.25s;
 282 // $actionsheet-width: 300px;
 283 // $actionsheet-radius: 4px;
 284 // $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
 285 // $actionsheet-padding: $global-padding;
 286 // $actionsheet-tail-size: 10px;
 287
 288 // $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
 289
 290 // $actionsheet-link-color: #000;
 291 // $actionsheet-link-background-hover: smartscale($actionsheet-background);
 292
 293 // 9. Block List
 294 // - - - - - - - - - - - - - - -
 295
 296 // $blocklist-background: #fff;
 297 // $blocklist-fullbleed: true;
 298 // $blocklist-fontsize: 1rem;
 299
 300 // $blocklist-item-padding: 0.8rem 1rem;
 301 // $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
 302 // $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
 303 // $blocklist-item-color-disabled: #999;
 304 // $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
 305
 306 // $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
 307 // $blocklist-item-icon-size: 0.8;
 308
 309 // $blocklist-header-fontsize: 0.8em;
 310 // $blocklist-header-color: smartscale($blocklist-item-color, 40%);
 311 // $blocklist-header-uppercase: true;
 312
 313 // $blocklist-check-icons: true;
 314
 315 // 10. Button Group
 316 // - - - - - - - - - - - - - - -
 317
 318 // $btngroup-background: $primary-color;
 319 // $btngroup-color: #fff;
 320 // $btngroup-radius: $button-radius;
 321
 322 // 11. Card
 323 // - - - - - - - - - - - - - - -
 324
 325 // $card-background: #fff;
 326 // $card-color: isitlight($card-background);
 327 // $card-border: 1px solid smartscale($card-background, 7%);
 328 // $card-radius: $global-radius;
 329 // $card-shadow: 0 1px 2px rgba(#000, 0.2);
 330 // $card-padding: $global-padding;
 331 // $card-margin: 0.5rem;
 332
 333 // $card-divider-background: smartscale($card-background, 7%);
 334
 335 // 12. Extras
 336 // - - - - - - - - - - - - - - -
 337
 338 // $closebutton-position: (top right);
 339 // $closebutton-size: 2em;
 340 // $closebutton-lineheight: 0.5;
 341 // $closebutton-color: #999;
 342 // $closebutton-color-hover: #333;
 343
 344 // $thumbnail-padding: 0.5rem;
 345 // $thumbnail-shadow: 0 3px 15px rgba(black, 0.25);
 346
 347 // 13. Forms
 348 // - - - - - - - - - - - - - - -
 349
 350 // Basic form variables
 351 // $form-fontsize: 1rem;
 352 // $form-padding: 0.5rem;
 353
 354 // Text fields
 355 // $input-color: #000;
 356 // $input-color-hover: $input-color;
 357 // $input-color-focus: $input-color;
 358 // $input-background: #fff;
 359 // $input-background-hover: $input-background;
 360 // $input-background-focus: $input-background;
 361 // $input-background-disabled: smartscale($input-background);
 362 // $input-border: 1px solid #ccc;
 363 // $input-border-hover: 1px solid #bbb;
 364 // $input-border-focus: 1px solid #999;
 365 // $input-cursor-disabled: not-allowed;
 366
 367 // Select menus
 368 // $select-color: #000;
 369 // $select-background: #fafafa;
 370 // $select-background-hover: smartscale($select-background, 4%);
 371 // $select-arrow: true;
 372 // $select-arrow-color: $select-color;
 373
 374 // Labels
 375 // $form-label-fontsize: 0.9rem;
 376 // $form-label-margin: 0.5rem;
 377 // $form-label-color: #333;
 378
 379 // Inline labels
 380 // $inlinelabel-color: #333;
 381 // $inlinelabel-background: #eee;
 382 // $inlinelabel-border: $input-border;
 383
 384 // Range slider
 385 // $slider-background: #ddd;
 386 // $slider-height: 1rem;
 387 // $slider-radius: 0px;
 388 // $slider-thumb-height: 1.5rem;
 389 // $slider-thumb-color: $primary-color;
 390 // $slider-thumb-radius: 0px;
 391
 392 // Progress and meter
 393 // $meter-height: 1.5rem;
 394 // $meter-background: #ccc;
 395 // $meter-fill: $primary-color;
 396 // $meter-fill-high: $success-color;
 397 // $meter-fill-medium: #e7cf00;
 398 // $meter-fill-low: $alert-color;
 399 // $meter-radius: 0;
 400
 401 // 14. Iconic
 402 // - - - - - - - - - - - - - - -
 403
 404 // $iconic-primary-fill: $primary-color;
 405 // $iconic-primary-stroke: $primary-color;
 406 // $iconic-accent-fill: $iconic-primary-fill;
 407 // $iconic-accent-stroke: $iconic-accent-fill;
 408
 409 // 15. Label
 410 // - - - - - - - - - - - - - - -
 411
 412 // $label-fontsize: 0.8rem;
 413 // $label-padding: ($global-padding / 3) ($global-padding / 2);
 414 // $label-radius: 0;
 415 // $label-background: $primary-color;
 416 // $label-color: isitlight($primary-color);
 417
 418 // $badge-fontsize: 0.8em;
 419 // $badge-diameter: 1.5rem;
 420 // $badge-background: $primary-color;
 421 // $badge-color: #fff;
 422
 423 // 16. Menu Bar
 424 // - - - - - - - - - - - - - - -
 425
 426 // $menubar-fontsize: 1rem;
 427 // $menubar-background: #fff;
 428 // $menubar-background-hover: smartscale($menubar-background, 7%);
 429 // $menubar-background-active: $menubar-background-hover;
 430 // $menubar-color: isitlight($menubar-background);
 431 // $menubar-color-hover: $menubar-color;
 432 // $menubar-color-active: $menubar-color-hover;
 433
 434 // $menubar-item-padding: $global-padding;
 435 // $menubar-icon-size: 25px;
 436 // $menubar-icon-spacing: $menubar-item-padding;
 437
 438 // 17. Modal
 439 // - - - - - - - - - - - - - - -
 440
 441 // $modal-background: #fff;
 442 // $modal-border: 0;
 443 // $modal-radius: 0px;
 444 // $modal-shadow: none;
 445 // $modal-zindex: 1000;
 446 // $modal-sizes: (
 447 //   tiny: 300px,
 448 //   small: 500px,
 449 //   medium: 600px,
 450 //   large: 800px,
 451 // );
 452
 453 // $modal-overlay-class: 'modal-overlay';
 454 // $modal-overlay-background: rgba(#333, 0.7);
 455
 456 // 18. Motion UI
 457 // - - - - - - - - - - - - - - -
 458
 459 // Classes to use when triggering in/out animations
 460 // $motion-class: (
 461 //   in: "ng-enter",
 462 //   out: "ng-leave",
 463 // );
 464 // $motion-class-active: (
 465 //   in: "ng-enter-active",
 466 //   out: "ng-leave-active",
 467 // );
 468 // $motion-class-stagger: (
 469 //   in: "ng-enter-stagger",
 470 //   out: "ng-leave-stagger",
 471 // );
 472 // $motion-class-showhide: (
 473 //   in: "ng-hide-remove",
 474 //   out: "ng-hide-add",
 475 // );
 476 // $motion-class-showhide-active: (
 477 //   in: "ng-hide-remove-active",
 478 //   out: "ng-hide-add-active",
 479 // );
 480
 481 // Set if movement-based transitions should also fade the element in and out
 482 // $motion-slide-and-fade: false;
 483 // $motion-hinge-and-fade: true;
 484 // $motion-scale-and-fade: true;
 485 // $motion-spin-and-fade: true;
 486
 487 // Default speed for transitions and animations
 488 // $motion-duration-default: 500ms;
 489
 490 // Slow and fast modifiders
 491 // $motion-duration-slow: 750ms;
 492 // $motion-duration-fast: 250ms;
 493 // $motion-stagger-duration-default: 150ms;
 494 // $motion-stagger-duration-short: 50ms;
 495 // $motion-stagger-duration-long: 300ms;
 496
 497 // Default timing function for transitions and animations
 498 // $motion-timing-default: ease;
 499
 500 // Built-in and custom easing functions
 501 // Every item in this map becomes a CSS class
 502 // $motion-timings: (
 503 //   linear: linear,
 504 //   ease: ease,
 505 //   easeIn: ease-in,
 506 //   easeOut: ease-out,
 507 //   easeInOut: ease-in-out,
 508 //   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
 509 //   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
 510 //   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
 511 // );
 512
 513 // Default delay for all transitions and animations
 514 // $motion-delay-default: 0;
 515 // Short and long delay modifiers
 516 // $motion-delay-short: 300ms;
 517 // $motion-delay-long: 700ms;
 518
 519 // 19. Notification
 520 // - - - - - - - - - - - - - - -
 521
 522 // $notification-default-position: right top;
 523 // $notification-width: rem-calc(400);
 524 // $notification-offset: $global-padding;
 525
 526 // $notification-background: $primary-color;
 527 // $notification-color: white;
 528 // $notification-padding: $global-padding;
 529 // $notification-radius: 4px;
 530
 531 // $notification-icon-size: 60px;
 532 // $notification-icon-margin: $global-padding;
 533 // $notification-icon-align: top;
 534
 535
 536 // 20. Off-canvas
 537 // - - - - - - - - - - - - - - -
 538
 539 // $offcanvas-size-horizontal: 250px;
 540 // $offcanvas-size-vertical: 250px;
 541
 542 // $offcanvas-background: #fff;
 543 // $offcanvas-color: isitlight($offcanvas-background);
 544 // $offcanvas-padding: 0;
 545 // $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
 546 // $offcanvas-animation-speed: 0.25s;
 547
 548 // $offcanvas-frame-selector: '.grid-frame';
 549
 550 // 21. Panel
 551 // - - - - - - - - - - - - - - -
 552
 553 // $panel-size-horizontal: 300px;
 554 // $panel-size-vertical: 300px;
 555 // $panel-padding: 0;
 556
 557 // $panel-background: #fff;
 558 // $panel-shadow: 3px 0 10px rgba(black, 0.25);
 559
 560 // DEPRECATED: these variables will be removed in a future version.
 561 // $panel-animation-speed: 0.25s;
 562
 563 // 22. Popup
 564 // - - - - - - - - - - - - - - -
 565
 566 // $popup-width: rem-calc(300);
 567 // $popup-background: #fff;
 568 // $popup-border: 0;
 569 // $popup-radius: 0;
 570 // $popup-shadow: 0 0 10px rgba(#000, 0.25);
 571
 572 // 23. Switch
 573 // - - - - - - - - - - - - - - -
 574
 575 // $switch-width: rem-calc(50);
 576 // $switch-height: rem-calc(32);
 577 // $switch-background: #ccc;
 578 // $switch-background-active: $primary-color;
 579 // $switch-border: 0;
 580 // $switch-radius: 9999px;
 581 // $switch-animation-speed: 0.15s;
 582
 583 // $switch-paddle-color: white;
 584 // $switch-paddle-offset: 4px;
 585
 586 // 24. Tabs
 587 // - - - - - - - - - - - - - - -
 588
 589 // $tabstrip-background: transparent;
 590
 591 // $tab-title-background: $gray-light;
 592 // $tab-title-background-hover: smartscale($tab-title-background, 5%);
 593 // $tab-title-background-active: smartscale($tab-title-background, 3%);
 594 // $tab-title-color: isitlight($tab-title-background);
 595 // $tab-title-color-active: $tab-title-color;
 596
 597 // $tab-title-padding: $global-padding;
 598 // $tab-content-padding: $global-padding;
 599
 600 // 25. Title Bar
 601 // - - - - - - - - - - - - - - -
 602
 603 // $titlebar-center-width: 50%;
 604 // $titlebar-side-width: (100% - $titlebar-center-width) / 2;
 605 // $titlebar-background: #eee;
 606 // $titlebar-color: #000;
 607 // $titlebar-border: 1px solid #ccc;
 608 // $titlebar-padding: $global-padding;
 609 // $titlebar-item-classes: (
 610 //   center: 'center',
 611 //   left: 'left',
 612 //   right: 'right',
 613 //   title: 'title',
 614 // );