afm-client/app/Frontend/styles/foundation/_foundation-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-color: auto;
 249 // $button-radius: 0;
 250 // $button-sizes: (
 251 //   tiny: 0.7,
 252 //   small: 0.8,
 253 //   medium: 1,
 254 //   large: 1.3,
 255 // );
 256 // $button-font-size: 0.9rem;
 257 // $button-opacity-disabled: 0.5;
 258 // $button-tag-selector: false;
 259
 260 // 7. Accordion
 261 // - - - - - - - - - - - - - - -
 262
 263 // $accordion-border: 1px solid $gray-dark;
 264
 265 // $accordion-title-background: $gray-light;
 266 // $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
 267 // $accordion-title-background-active: smartscale($accordion-title-background, 3%);
 268 // $accordion-title-color: isitlight($accordion-title-background);
 269 // $accordion-title-color-active: isitlight($accordion-title-background);
 270
 271 // $accordion-title-padding: $global-padding;
 272 // $accordion-content-padding: $global-padding;
 273
 274 // 8. Action Sheet
 275 // - - - - - - - - - - - - - - -
 276
 277 // $actionsheet-background: white;
 278 // $actionsheet-border-color: #ccc;
 279 // $actionsheet-animate: transform opacity;
 280 // $actionsheet-animation-speed: 0.25s;
 281 // $actionsheet-width: 300px;
 282 // $actionsheet-radius: 4px;
 283 // $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
 284 // $actionsheet-padding: $global-padding;
 285 // $actionsheet-tail-size: 10px;
 286
 287 // $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
 288
 289 // $actionsheet-link-color: #000;
 290 // $actionsheet-link-background-hover: smartscale($actionsheet-background);
 291
 292 // 9. Block List
 293 // - - - - - - - - - - - - - - -
 294
 295 // $blocklist-background: #fff;
 296 // $blocklist-fullbleed: true;
 297 // $blocklist-fontsize: 1rem;
 298
 299 // $blocklist-item-padding: 0.8rem 1rem;
 300 // $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
 301 // $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
 302 // $blocklist-item-color-disabled: #999;
 303 // $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
 304
 305 // $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
 306 // $blocklist-item-icon-size: 0.8;
 307
 308 // $blocklist-header-fontsize: 0.8em;
 309 // $blocklist-header-color: smartscale($blocklist-item-color, 40%);
 310 // $blocklist-header-uppercase: true;
 311
 312 // $blocklist-check-icons: true;
 313
 314 // 10. Button Group
 315 // - - - - - - - - - - - - - - -
 316
 317 // $btngroup-background: $primary-color;
 318 // $btngroup-color: #fff;
 319 // $btngroup-radius: $button-radius;
 320
 321 // 11. Card
 322 // - - - - - - - - - - - - - - -
 323
 324 // $card-background: #fff;
 325 // $card-color: isitlight($card-background);
 326 // $card-border: 1px solid smartscale($card-background, 7%);
 327 // $card-radius: $global-radius;
 328 // $card-shadow: 0 1px 2px rgba(#000, 0.2);
 329 // $card-padding: $global-padding;
 330 // $card-margin: 0.5rem;
 331
 332 // $card-divider-background: smartscale($card-background, 7%);
 333
 334 // 12. Extras
 335 // - - - - - - - - - - - - - - -
 336
 337 // $closebutton-position: (top right);
 338 // $closebutton-size: 2em;
 339 // $closebutton-lineheight: 0.5;
 340 // $closebutton-color: #999;
 341 // $closebutton-color-hover: #333;
 342
 343 // $thumbnail-padding: 0.5rem;
 344 // $thumbnail-shadow: 0 3px 15px rgba(black, 0.25);
 345
 346 // 13. Forms
 347 // - - - - - - - - - - - - - - -
 348
 349 // Basic form variables
 350 // $form-fontsize: 1rem;
 351 // $form-padding: 0.5rem;
 352
 353 // Text fields
 354 // $input-color: #000;
 355 // $input-color-hover: $input-color;
 356 // $input-color-focus: $input-color;
 357 // $input-background: #fff;
 358 // $input-background-hover: $input-background;
 359 // $input-background-focus: $input-background;
 360 // $input-border: 1px solid #ccc;
 361 // $input-border-hover: 1px solid #bbb;
 362 // $input-border-focus: 1px solid #999;
 363
 364 // Select menus
 365 // $select-color: #000;
 366 // $select-background: #fafafa;
 367 // $select-background-hover: smartscale($select-background, 4%);
 368 // $select-arrow: true;
 369 // $select-arrow-color: $select-color;
 370
 371 // Labels
 372 // $form-label-fontsize: 0.9rem;
 373 // $form-label-margin: 0.5rem;
 374 // $form-label-color: #333;
 375
 376 // Inline labels
 377 // $inlinelabel-color: #333;
 378 // $inlinelabel-background: #eee;
 379 // $inlinelabel-border: $input-border;
 380
 381 // Range slider
 382 // $slider-background: #ddd;
 383 // $slider-height: 1rem;
 384 // $slider-radius: 0px;
 385 // $slider-thumb-height: 1.5rem;
 386 // $slider-thumb-color: $primary-color;
 387 // $slider-thumb-radius: 0px;
 388
 389 // Progress and meter
 390 // $meter-height: 1.5rem;
 391 // $meter-background: #ccc;
 392 // $meter-fill: $primary-color;
 393 // $meter-fill-high: $success-color;
 394 // $meter-fill-medium: #e7cf00;
 395 // $meter-fill-low: $alert-color;
 396 // $meter-radius: 0;
 397
 398 // 14. Iconic
 399 // - - - - - - - - - - - - - - -
 400
 401 // $iconic-primary-fill: $primary-color;
 402 // $iconic-primary-stroke: $primary-color;
 403 // $iconic-accent-fill: $iconic-primary-fill;
 404 // $iconic-accent-stroke: $iconic-accent-fill;
 405
 406 // 15. Label
 407 // - - - - - - - - - - - - - - -
 408
 409 // $label-fontsize: 0.8rem;
 410 // $label-padding: ($global-padding / 3) ($global-padding / 2);
 411 // $label-radius: 0;
 412 // $label-background: $primary-color;
 413 // $label-color: isitlight($primary-color);
 414
 415 // $badge-fontsize: 0.8em;
 416 // $badge-diameter: 1.5rem;
 417 // $badge-background: $primary-color;
 418 // $badge-color: #fff;
 419
 420 // DEPRECATED: these variables will be removed in v1.1.
 421 // $badge-padding: .1em .61em;
 422 // $badge-radius: $global-rounded;
 423 // $badge-font-color: #fff;
 424
 425 // 16. Menu Bar
 426 // - - - - - - - - - - - - - - -
 427
 428 // $menubar-fontsize: 1rem;
 429 // $menubar-background: #fff;
 430 // $menubar-background-hover: smartscale($menubar-background, 7%);
 431 // $menubar-background-active: $menubar-background-hover;
 432 // $menubar-color: isitlight($menubar-background);
 433 // $menubar-color-hover: $menubar-color;
 434 // $menubar-color-active: $menubar-color-hover;
 435
 436 // $menubar-item-padding: $global-padding;
 437 // $menubar-icon-size: 25px;
 438 // $menubar-icon-spacing: $menubar-item-padding;
 439
 440 // 17. Modal
 441 // - - - - - - - - - - - - - - -
 442
 443 // $modal-background: #fff;
 444 // $modal-border: 0;
 445 // $modal-radius: 0px;
 446 // $modal-shadow: none;
 447 // $modal-zindex: 1000;
 448 // $modal-sizes: (
 449 //   tiny: 300px,
 450 //   small: 500px,
 451 //   medium: 600px,
 452 //   large: 800px,
 453 // );
 454
 455 // $modal-overlay-class: 'modal-overlay';
 456 // $modal-overlay-background: rgba(#333, 0.7);
 457
 458 // 18. Motion UI
 459 // - - - - - - - - - - - - - - -
 460
 461 // Classes to use when triggering in/out animations
 462 // $motion-class: (
 463 //   in: "ng-enter",
 464 //   out: "ng-leave",
 465 // );
 466 // $motion-class-active: (
 467 //   in: "ng-enter-active",
 468 //   out: "ng-leave-active",
 469 // );
 470 // $motion-class-stagger: (
 471 //   in: "ng-enter-stagger",
 472 //   out: "ng-leave-stagger",
 473 // );
 474
 475 // Set if movement-based transitions should also fade the element in and out
 476 // $motion-slide-and-fade: false;
 477 // $motion-hinge-and-fade: true;
 478 // $motion-scale-and-fade: true;
 479 // $motion-spin-and-fade: true;
 480
 481 // Default speed for transitions and animations
 482 // $motion-duration-default: 500ms;
 483 // Slow and fast modifiders
 484 // $motion-duration-slow: 750ms;
 485 // $motion-duration-fast: 250ms;
 486 // $motion-stagger-duration-default: 150ms;
 487 // $motion-stagger-duration-short: 50ms;
 488 // $motion-stagger-duration-long: 300ms;
 489
 490 // Default timing function for transitions and animations
 491 // $motion-timing-default: ease;
 492 // Built-in and custom easing functions
 493 // Every item in this map becomes a CSS class
 494 // $motion-timings: (
 495 //   linear: linear,
 496 //   ease: ease,
 497 //   easeIn: ease-in,
 498 //   easeOut: ease-out,
 499 //   easeInOut: ease-in-out,
 500 //   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
 501 //   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
 502 //   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
 503 // );
 504
 505 // Default delay for all transitions and animations
 506 // $motion-delay-default: 0;
 507 // Short and long delay modifiers
 508 // $motion-delay-short: 300ms;
 509 // $motion-delay-long: 700ms;
 510
 511 // 19. Notification
 512 // - - - - - - - - - - - - - - -
 513
 514 // $notification-default-position: right top;
 515 // $notification-width: rem-calc(400);
 516 // $notification-offset: $global-padding;
 517
 518 // $notification-background: $primary-color;
 519 // $notification-color: white;
 520 // $notification-padding: $global-padding;
 521 // $notification-radius: 4px;
 522
 523 // $notification-icon-size: 60px;
 524 // $notification-icon-margin: $global-padding;
 525 // $notification-icon-align: top;
 526
 527
 528 // 20. Off-canvas
 529 // - - - - - - - - - - - - - - -
 530
 531 // $offcanvas-size-horizontal: 250px;
 532 // $offcanvas-size-vertical: 250px;
 533
 534 // $offcanvas-background: #fff;
 535 // $offcanvas-color: isitlight($offcanvas-background);
 536 // $offcanvas-padding: 0;
 537 // $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
 538 // $offcanvas-animation-speed: 0.25s;
 539
 540 // $offcanvas-frame-selector: '.grid-frame';
 541
 542 // 21. Panel
 543 // - - - - - - - - - - - - - - -
 544
 545 // $panel-size-horizontal: 300px;
 546 // $panel-size-vertical: 300px;
 547 // $panel-padding: 0;
 548
 549 // $panel-background: #fff;
 550 // $panel-shadow: 3px 0 10px rgba(black, 0.25);
 551 // $panel-animation-speed: 0.25s;
 552
 553 // 22. Popup
 554 // - - - - - - - - - - - - - - -
 555
 556 // $popup-width: rem-calc(300);
 557 // $popup-background: #fff;
 558 // $popup-border: 0;
 559 // $popup-radius: 0;
 560 // $popup-shadow: 0 0 10px rgba(#000, 0.25);
 561
 562 // 23. Switch
 563 // - - - - - - - - - - - - - - -
 564
 565 // $switch-width: rem-calc(50);
 566 // $switch-height: rem-calc(32);
 567 // $switch-background: #ccc;
 568 // $switch-background-active: $primary-color;
 569 // $switch-border: 0;
 570 // $switch-radius: 9999px;
 571 // $switch-animation-speed: 0.15s;
 572
 573 // $switch-paddle-color: white;
 574 // $switch-paddle-offset: 4px;
 575
 576 // 24. Tabs
 577 // - - - - - - - - - - - - - - -
 578
 579 // $tabstrip-background: transparent;
 580
 581 // $tab-title-background: $gray-light;
 582 // $tab-title-background-hover: smartscale($tab-title-background, 5%);
 583 // $tab-title-background-active: smartscale($tab-title-background, 3%);
 584 // $tab-title-color: isitlight($tab-title-background);
 585 // $tab-title-color-active: $tab-title-color;
 586
 587 // $tab-title-padding: $global-padding;
 588 // $tab-content-padding: $global-padding;
 589
 590 // 25. Title Bar
 591 // - - - - - - - - - - - - - - -
 592
 593 // $titlebar-center-width: 50%;
 594 // $titlebar-side-width: (100% - $titlebar-center-width) / 2;
 595 // $titlebar-background: #eee;
 596 // $titlebar-color: #000;
 597 // $titlebar-border: 1px solid #ccc;
 598 // $titlebar-padding: $global-padding;
 599 // $titlebar-item-classes: (
 600 //   center: 'center',
 601 //   left: 'left',
 602 //   right: 'right',
 603 //   title: 'title',
 604 // );
 605