// ========================================================================== // Materialize variables // ========================================================================== // // Table of Contents: // // 1. Colors // 2. Badges // 3. Buttons // 4. Cards // 5. Carousel // 6. Collapsible // 7. Chips // 8. Date + Time Picker // 9. Dropdown // 10. Forms // 11. Global // 12. Grid // 13. Navigation Bar // 14. Side Navigation // 15. Photo Slider // 16. Spinners | Loaders // 17. Tabs // 18. Tables // 19. Toasts // 20. Typography // 21. Footer // 22. Flow Text // 23. Collections // 24. Progress Bar

// 1. Colors // ========================================================================== // materializecss.com/color.html

$primary-color: color(“blue-grey”, “darken-1”); $primary-color-light: lighten($primary-color, 15%); $primary-color-dark: darken($primary-color, 15%);

$secondary-color: color(“light-blue”, “lighten-1”); $success-color: color(“green”, “base”); $error-color: color(“red”, “base”); $link-color: color(“light-blue”, “darken-1”);

// 2. Badges // ==========================================================================

$badge-bg-color: $secondary-color; $badge-height: 22px;

// 3. Buttons // ==========================================================================

// Shared styles $button-border: none; $button-background-focus: lighten($secondary-color, 4%); $button-font-size: 14px; $button-icon-font-size: 1.3rem; $button-height: 36px; $button-padding: 0 16px; $button-radius: 2px;

// Disabled styles $button-disabled-background: #DFDFDF; $button-disabled-color: #9F9F9F;

// Raised buttons $button-raised-background: $secondary-color; $button-raised-background-hover: lighten($button-raised-background, 5%); $button-raised-color: fff;

// Large buttons $button-large-font-size: 15px; $button-large-icon-font-size: 1.6rem; $button-large-height: $button-height * 1.5; $button-floating-large-size: 56px;

// Small buttons $button-small-font-size: 13px; $button-small-icon-font-size: 1.2rem; $button-small-height: $button-height * .9; $button-floating-small-size: $button-height * .9;

// Flat buttons $button-flat-color: #343434; $button-flat-disabled-color: lighten(#999, 10%);

// Floating buttons $button-floating-background: $secondary-color; $button-floating-background-hover: darken($button-floating-background, 10%); $button-floating-color: fff; $button-floating-size: 40px; $button-floating-radius: 50%;

// 4. Cards // ==========================================================================

$card-padding: 24px; $card-bg-color: fff; $card-link-color: color(“orange”, “accent-2”); $card-link-color-light: lighten($card-link-color, 20%);

// 5. Carousel // ==========================================================================

$carousel-height: 400px; $carousel-item-height: $carousel-height / 2; $carousel-item-width: $carousel-item-height;

// 6. Collapsible // ==========================================================================

$collapsible-height: 3rem; $collapsible-line-height: $collapsible-height; $collapsible-header-color: fff; $collapsible-border-color: ddd;

// 7. Chips // ==========================================================================

$chip-bg-color: e4e4e4; $chip-border-color: #9e9e9e; $chip-selected-color: #26a69a; $chip-margin: 5px;

// 8. Date + Time Picker // ==========================================================================

$datepicker-display-font-size: 2.8rem; $datepicker-calendar-header-color: #999; $datepicker-weekday-color: rgba(0, 0, 0, .87); $datepicker-weekday-bg: darken($secondary-color, 7%); $datepicker-date-bg: $secondary-color; $datepicker-year: rgba(255, 255, 255, .7); $datepicker-focus: rgba(0,0,0, .05); $datepicker-selected: $secondary-color; $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%); $datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75); $datepicker-disabled-day-color: rgba(0, 0, 0, .3);

$timepicker-clock-color: rgba(0, 0, 0, .87); $timepicker-clock-plate-bg: eee;

// 9. Dropdown // ==========================================================================

$dropdown-bg-color: fff; $dropdown-hover-bg-color: eee; $dropdown-color: $secondary-color; $dropdown-item-height: 50px;

// 10. Forms // ==========================================================================

// Text Inputs + Textarea $input-height: 3rem; $input-border-color: color(“grey”, “base”); $input-border: 1px solid $input-border-color; $input-background: fff; $input-error-color: $error-color; $input-success-color: $success-color; $input-focus-color: $secondary-color; $input-font-size: 16px; $input-margin-bottom: 8px; $input-margin: 0 0 $input-margin-bottom 0; $input-padding: 0; $label-font-size: .8rem; $input-disabled-color: rgba(0,0,0, .42); $input-disabled-solid-color: #949494; $input-disabled-border: 1px dotted $input-disabled-color; $input-invalid-border: 1px solid $input-error-color; $input-icon-size: 2rem; $placeholder-text-color: lighten($input-border-color, 20%);

// Radio Buttons $radio-fill-color: $secondary-color; $radio-empty-color: #5a5a5a; $radio-border: 2px solid $radio-fill-color;

// Range $range-height: 14px; $range-width: 14px; $track-height: 3px;

// Select $select-border: 1px solid f2f2f2; $select-background: rgba(255, 255, 255, 0.90); $select-focus: 1px solid lighten($secondary-color, 47%); $select-option-hover: rgba(0,0,0,.08); $select-option-focus: rgba(0,0,0,.08); $select-option-selected: rgba(0,0,0,.03); $select-padding: 5px; $select-radius: 2px; $select-disabled-color: rgba(0,0,0,.3);

// Switches $switch-bg-color: $secondary-color; $switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%); $switch-unchecked-bg: #F1F1F1; $switch-unchecked-lever-bg: rgba(0,0,0,.38); $switch-radius: 15px;

// 11. Global // ==========================================================================

// Media Query Ranges $small-screen-up: 601px; $medium-screen-up: 993px; $large-screen-up: 1201px; $small-screen: 600px; $medium-screen: 992px; $large-screen: 1200px;

$medium-and-up: “only screen and (min-width : #{$small-screen-up})”; $large-and-up: “only screen and (min-width : #{$medium-screen-up})”; $extra-large-and-up: “only screen and (min-width : #{$large-screen-up})”; $small-and-down: “only screen and (max-width : #{$small-screen})”; $medium-and-down: “only screen and (max-width : #{$medium-screen})”; $medium-only: “only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})”;

// 12. Grid // ==========================================================================

$num-cols: 12; $gutter-width: 1.5rem; $element-top-margin: $gutter-width/3; $element-bottom-margin: ($gutter-width*2)/3;

// 13. Navigation Bar // ==========================================================================

$navbar-height: 64px; $navbar-line-height: $navbar-height; $navbar-height-mobile: 56px; $navbar-line-height-mobile: $navbar-height-mobile; $navbar-font-size: 1rem; $navbar-font-color: fff; $navbar-brand-font-size: 2.1rem;

// 14. Side Navigation // ==========================================================================

$sidenav-width: 300px; $sidenav-font-size: 14px; $sidenav-font-color: rgba(0,0,0,.87); $sidenav-bg-color: fff; $sidenav-padding: 16px; $sidenav-item-height: 48px; $sidenav-line-height: $sidenav-item-height;

// 15. Photo Slider // ==========================================================================

$slider-bg-color: color('grey', 'base'); $slider-bg-color-light: color('grey', 'lighten-2'); $slider-indicator-color: color('green', 'base');

// 16. Spinners | Loaders // ==========================================================================

$spinner-default-color: $secondary-color;

// 17. Tabs // ==========================================================================

$tabs-underline-color: $primary-color-light; $tabs-text-color: $primary-color; $tabs-bg-color: fff;

// 18. Tables // ==========================================================================

$table-border-color: rgba(0,0,0,.12); $table-striped-color: rgba(242, 242, 242, 0.5);

// 19. Toasts // ==========================================================================

$toast-height: 48px; $toast-color: #323232; $toast-text-color: fff; $toast-action-color: eeff41;

// 20. Typography // ==========================================================================

$font-stack: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif; $off-black: rgba(0, 0, 0, 0.87); // Header Styles $h1-fontsize: 4.2rem; $h2-fontsize: 3.56rem; $h3-fontsize: 2.92rem; $h4-fontsize: 2.28rem; $h5-fontsize: 1.64rem; $h6-fontsize: 1.15rem;

// 21. Footer // ==========================================================================

$footer-font-color: fff; $footer-bg-color: $primary-color; $footer-copyright-font-color: rgba(255,255,255,.8); $footer-copyright-bg-color: rgba(51,51,51,.08);

// 22. Flow Text // ==========================================================================

$range : $large-screen - $small-screen; $intervals: 20; $interval-size: $range / $intervals;

// 23. Collections // ==========================================================================

$collection-border-color: e0e0e0; $collection-bg-color: fff; $collection-active-bg-color: $secondary-color; $collection-active-color: lighten($secondary-color, 55%); $collection-hover-bg-color: ddd; $collection-link-color: $secondary-color; $collection-line-height: 1.5rem;

// 24. Progress Bar // ==========================================================================

$progress-bar-color: $secondary-color;