Skip to content

Instantly share code, notes, and snippets.

@allanwhite
Last active January 2, 2019 20:44
Show Gist options
  • Save allanwhite/c4f5866786a8d22ef91540f60068f970 to your computer and use it in GitHub Desktop.
Save allanwhite/c4f5866786a8d22ef91540f60068f970 to your computer and use it in GitHub Desktop.
// Helpers
$font_backup: -apple-system, BlinkMacSystemFont, "Roboto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font_sans: "GT America", $font_backup;
$font_serif: "Source Serif Pro", Georgia, serif;
// Font Weights // GT America Mapping; omitting ones that aren't loaded. Can be restored and loaded in fonts.scss.
$font-weight-xlight: 100; // ultra light
$font-weight-thin: 200; // thin
$font-weight-light: 300; // light
$font-weight-regular: 400; // regular
$font-weight-mid: 500; // medium
$font-weight-sem: 600; // N/A
$font-weight-bold: 700; // bold
$font-weight-heavy: 800; // N/A
$font-weight-black: 900; // black
// 1. Global
// ---------
$global-left: left;
$global-font-size: 100%; // this permits user to ± font size, foundation default
$global-width: rem-calc(1280);
$global-lineheight: 1.5;
// 1a. Colors
// ---------
$gray-1: hsl(204, 10%, 8%);
$gray-2: hsl(204, 10%, 16%);
$gray-3: hsl(204, 8%, 25%);
$gray-4: hsl(204, 8%, 33%);
$gray-5: hsl(204, 8%, 41%);
$gray-6: hsl(204, 8%, 50%);
$gray-7: hsl(204, 8%, 58%);
$gray-8: hsl(204, 8%, 66%);
$gray-9: hsl(204, 8%, 75%);
$gray-10: hsl(204, 14%, 83%);
$gray-11: hsl(204, 15%, 91%);
$gray-12: hsl(204, 15%, 96);
// for color functions
$gray-list: (
gray-1 : $gray-1,
gray-2 : $gray-2,
gray-3 : $gray-3,
gray-4 : $gray-4,
gray-5 : $gray-5,
gray-6 : $gray-6,
gray-7 : $gray-7,
gray-8 : $gray-8,
gray-9 : $gray-9,
gray-10: $gray-10,
gray-11: $gray-11,
gray-12: $gray-12
);
// in general, we only need the lightest and darkest grays in the brand. If generating a list of things from grays, start with this one.
$gray-list-short: (
gray-1 : $gray-1,
gray-2 : $gray-2,
gray-3 : $gray-3,
// gray-4 : $gray-4,
// gray-5 : $gray-5,
// gray-6 : $gray-6,
// gray-7 : $gray-7,
// gray-8 : $gray-8,
// gray-9 : $gray-9,
gray-10: $gray-10,
gray-11: $gray-11,
gray-12: $gray-12
);
// Datica Colors
$color_blue: hsl(219, 94%, 48%);
$color_green: hsl(158, 100%, 34%); //hsl(150, 85%, 39%); // hsl(160, 100%, 34%);
$color_shadow: #DCE4E9;
$color_highlight-yellow: #FEDB45;
$color_red: hsl(349, 72%, 39%); // cool darker red
$color_deep: #010101;
$color_deep-alt: #1E2127;
$color_prime: hsl(235, 88%, 51%);
$color_prime-alt: $color_blue;
$color_product: #426788;
$color_product-alt: #6C93B5;
$color_service: #D93939;
$color_service-alt: #FC7070;
$color_talk: #4E565D;
$color_talk-alt: #7A848D;
$color_light: $gray-10; //hsl(204, 29%, 77%);
$color_light-alt: $gray-12; //hsl(204, 18%, 94%);
$color_border: lighten(#B3C8D6, 10%);
// named color lists
$color-slugs: (
white,
blue,
red,
blue-bright,
gray-light,
white-to-gray-light,
dark,
gray-dark-grad,
gray-dark-grad-noise,
purple-grad
);
$product-colors: (
cks: #9A0BFF,
cmi: #6E52FF,
cpaas: #498CFF,
ccms: #25C6FF
);
// Art Directed Colors !! Use these sparingly and wisely
// Datica 2017 neons, baby
$color_magenta-glow: hsl(328, 100%, 69%);
$color_orange-glow: hsl(37, 100%, 67%);
$color_yellow-glow: hsl(57, 100%, 72%);
$color_green-glow: hsl(107, 100%, 70%);
$color_aqua-glow: hsl(175, 100%, 62%);
$color_blue-glow: hsl(192, 100%, 58%);
$color_neon-purple: #C41BF1;
$color_purple-deep: hsl(236, 27%, 26%);
//$color_blue-bright: hsl(220, 100%, 53%);
// future dark, saturated gradients
// $grad-color-list: (
// df-1: hsl(152, 100%, 26%),
// df-2: hsl(199, 100%, 35%),
// df-3: hsl(226, 70%, 50%),
// df-4: hsl(259, 100%, 40%),
// df-5: hsl(270, 100%, 40%),
// df-6: hsl(289, 100%, 40%)
// );
// Foundation Color Settings
$foundation-palette:(
default: $color_prime-alt,
primary: $color_prime-alt,
secondary: $gray-5,
tertiary: white,
dark: $gray-2,
info: $gray-7,
success: $color_green,
warning: $color_prime-alt,
alert: $color_red
);
$badge-palette: $foundation-palette;
// Basic Grays/Black/White
$light-gray: $gray-11;
// $light-gray: $gray-9;
$medium-gray: $gray-6;
$dark-gray: $gray-2;
$black: #000;
$white: #fff;
$color_white: $white;
$color_black: $black;
$body-background: $white;
// This is a sass list of the most-used brand colors. Great for generating classes from (text, containers, etc.).
$fill-color-list: (
"magenta-glow": hsl(328, 100%, 69%),
"orange-glow": hsl(37, 100%, 67%),
"yellow-glow": hsl(57, 100%, 72%),
"green-glow": hsl(127, 100%, 70%),
"aqua-glow": hsl(175, 100%, 62%),
"blue-glow": hsl(192, 100%, 58%),
"purple-deep": hsl(236, 27%, 26%),
"blue-bright": hsl(220, 100%, 53%),
"brand": $color_prime,
"blue": $color_prime-alt,
"red": $color_service,
"green": adjust-color($color_green, $hue: -5, $saturation: 40%, $lightness: -5%),
"gray": $color_talk,
"gray-1": $gray-1,
"gray-2": $gray-2,
"gray-3": $gray-3,
"gray-4": $gray-4,
"gray-5": $gray-5,
"gray-6": $gray-6,
"gray-7": $gray-7,
"gray-8": $gray-8,
"gray-9": $gray-9,
"gray-10": $gray-10,
"gray-11": $gray-11,
"gray-12": $gray-12,
"white": #ffffff,
"black": #000
);
// Font Settings
$body-font-color: $gray-3;
$body-font-family: $font_sans;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: 400;
$global-weight-bold: 700;
$global-radius: 6px;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-menu-padding: 0.9rem 1.1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true; // watch this for any problems
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
// @include add-foundation-colors;
// Set Global Padding Variable
$pad: 2rem;
// Default global transition timing
$timing-default: 175ms;
$transition-speed: $timing-default; // synonyms
$transition-default: $timing-default;
$timing-medium: 250ms;
$timing-slow: 350ms;
// S, M, L, XL sizes for round/square things
$thing-tiny: 0.5rem;//8px;
$thing-s: 1.5rem;//24px;
$thing-m: 3rem;//48px;
$thing-l: 4rem;//64px;
$thing-xl: 11rem;//72px;
// Include Foundation Color Pallete
@include add-foundation-colors;
// 2. Breakpoints
// ---------
$breakpoints:(
small: 0,
medium: 640px,
medium-large: 840px,
large: 1024px,
xlarge: 1400px,
xxlarge: 1600px
);
$print-breakpoint: large;
$breakpoint-classes: (small medium medium-large large xlarge);
// Custom breakpoints
$custom_breakpoint-mid: 52.5rem; // 840px "medium-large"
$custom_breakpoint-larger-nav: 63.13rem; //1010px... this seems too close to 1024/large
$custom_breakpoint-table: 32.5rem; // 520px
// 3. Grid
// ---------
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 24px,
medium: 40px,
large: 54px,
xlarge: 64px
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
// ---------
$header-font-family: $font_sans;
$header-font-weight: $font-weight-light;
$header-font-style: normal;
$font-family-monospace: courier, Consolas, 'Liberation Mono', monospace;
$header-color: inherit;
$header-lineheight: 1.2;
$header-margin-bottom: 0.5em;
$header-styles: (
small: (
'h1': ('font-size': 40, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h2': ('font-size': 30, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h3': ('font-size': 26, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h4': ('font-size': 22, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h5': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h6': ('font-size': 16, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
),
medium: (
'h1': ('font-size': 40, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h2': ('font-size': 30, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h3': ('font-size': 26, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h4': ('font-size': 22, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h5': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h6': ('font-size': 16, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
),
large: (
'h1': ('font-size': 52, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h2': ('font-size': 40, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h3': ('font-size': 28, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h4': ('font-size': 22, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h5': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
'h6': ('font-size': 16, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
),
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 85%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.5;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: inherit;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: initial; //transparentize($gray-5, 0.5);//hsla(219, 100%, 52%, 0.2);
$code-border: none; //1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: underline;
$hr-width: $global-width - $pad;
$hr-border: 1px solid rgba(150,150,150,0.35);//$medium-gray;
$hr-margin: rem-calc($pad) auto;
$list-lineheight: $paragraph-lineheight * 0.8;
$list-margin-bottom: $paragraph-margin-bottom * 0.6;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 2rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.2rem;
$blockquote-color: $color_prime-alt;
$blockquote-padding: rem-calc(4 20 10 19);//rem-calc(4 20 0 19);
$blockquote-border: none;//2px solid $color_prime-alt;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;
// 5. Typography Helpers
// ---------------------
$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.5;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
// 6. Abide
// --------
$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: get-color(alert);
$form-label-color-invalid: get-color(alert);
$input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
// 7. Accordion
// ------------
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
$accordionmenu-padding: $global-menu-padding;
$accordionmenu-nested-margin: $global-menu-nested-margin;
$accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
$accordionmenu-item-background: null;
$accordionmenu-border: null;
$accordionmenu-submenu-toggle-background: null;
$accordion-submenu-toggle-border: $accordionmenu-border;
$accordionmenu-submenu-toggle-width: 40px;
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
$accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
$badge-color: $white;
$badge-color-alt: $black;
$badge-palette: $foundation-palette;
$badge-padding: 0.7em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.7rem;
// 10. Breadcrumbs
// ---------------
$breadcrumbs-margin: 0 0 $global-margin 0;
$breadcrumbs-item-font-size: rem-calc(13);
$breadcrumbs-item-color: $primary-color;
$breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.5rem;
$breadcrumbs-item-uppercase: false;
$breadcrumbs-item-slash: true;
$breadcrumbs-item-separator-item: '|';
// 11. Button
// ----------
$button-padding: 0.75em 0.9em;
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 1rem,
large: 1.15rem,
);
$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%;
$button-hollow-hover-lightness: -50%;
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
// 12. Button Group
// ----------------
$buttongroup-margin: 1rem;
$buttongroup-spacing: 1rem;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
$buttongroup-radius-on-each: true;
// 13. Callout
// ---------
$callout-background: $white;//rgba($black, 0.25);
$callout-background-fade: 0;
$callout-border: none; //1px solid rgba($black, 0.25);
$callout-margin: 0 0 3rem 0;
$callout-padding: 1.5rem 1.5rem;
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
// 14. Card
// --------
$card-background: $white;
$card-font-color: $body-font-color;
$card-divider-background: transparent;
$card-border: none; //1px solid $light-gray;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding * 1.5;
$card-margin: $global-margin * 2;
// 15. Close Button
// ----------------
$closebutton-position: right top;
$closebutton-offset-horizontal: (
small: 0.66rem,
medium: 1rem,
);
$closebutton-offset-vertical: (
small: 0.33em,
medium: 0.5rem,
);
$closebutton-size: (
small: 1.5em,
medium: 2em,
large: 3em,
);
$closebutton-lineheight: 1;
$closebutton-color: $gray-6;
$closebutton-color-hover: $gray-3;
// 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
$drilldown-padding: $global-menu-padding;
$drilldown-nested-margin: 0;
$drilldown-background: $white;
$drilldown-submenu-padding: $drilldown-padding;
$drilldown-submenu-background: $white;
$drilldown-arrow-color: $primary-color;
$drilldown-arrow-size: 6px;
// $drilldown-background: $white;
// 17. Dropdown
// ------------
$dropdown-padding: 1rem;
$dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
$dropdown-font-size: 1rem;
$dropdown-width: 350px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
tiny: 200px,
small: 300px,
large: 500px,
);
// 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: transparentize($gray-6, 0.4);
$dropdownmenu-arrow-size: 5px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 260px;
$dropdownmenu-background: $white;
$dropdownmenu-submenu-background: $dropdownmenu-background;
$dropdownmenu-padding: $global-menu-padding;
$dropdownmenu-nested-margin: 0;
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
$dropdownmenu-border: none; //1px solid $medium-gray;
$dropdown-menu-item-color-active: get-color(primary);
$dropdown-menu-item-background-active: transparent;
// 19. Flexbox Utilities
// ---------------------
$flex-source-ordering-count: 6;
$flexbox-responsive-breakpoints: true;
// 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.4;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal;
$input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;
// 21. Label
// ---------
$label-background: $gray-7;
$label-background: $primary-color;
$label-color: $white;
$label-color-alt: $black;
$label-palette: $foundation-palette;
$label-font-size: 0.7rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
// 22. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
// 23. Menu
// --------
$menu-margin: 0;
$menu-nested-margin: $global-menu-nested-margin;
$menu-items-padding: $global-menu-padding;
$menu-simple-margin: 0.8rem;
$menu-item-color-active: $white;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-item-background-hover: $light-gray;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;
// 24. Meter
// ---------
$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
// 25. Off-canvas
// --------------
$offcanvas-sizes: (
small: 250px,
);
$offcanvas-vertical-sizes: (
small: 250px,
);
$offcanvas-background: $gray-2;
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
$offcanvas-inner-shadow-size: 20px;
$offcanvas-inner-shadow-color: rgba($black, 0.25);
$offcanvas-overlay-zindex: 11;
$offcanvas-push-zindex: 12;
$offcanvas-overlap-zindex: 13;
$offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.3s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
// 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
$orbit-bullet-background-active: $dark-gray;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
// 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $black;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
$pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
// 28. Progress Bar
// ----------------
$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
// 29. Prototype Arrow
// -------------------
$prototype-arrow-directions: (
down,
up,
right,
left
);
$prototype-arrow-size: 0.4375rem;
$prototype-arrow-color: $black;
// 30. Prototype Border-Box
// ------------------------
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
// 31. Prototype Border-None
// -------------------------
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
// 32. Prototype Bordered
// ----------------------
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
$prototype-border-width: rem-calc(1);
$prototype-border-type: solid;
$prototype-border-color: $medium-gray;
// 33. Prototype Display
// ---------------------
$prototype-display-breakpoints: $global-prototype-breakpoints;
$prototype-display: (
inline,
inline-block,
block,
table,
table-cell
);
// 34. Prototype Font-Styling
// --------------------------
$prototype-font-breakpoints: $global-prototype-breakpoints;
$prototype-wide-letter-spacing: rem-calc(4);
$prototype-font-normal: $global-weight-normal;
$prototype-font-bold: $global-weight-bold;
// 35. Prototype List-Style-Type
// -----------------------------
$prototype-list-breakpoints: $global-prototype-breakpoints;
$prototype-style-type-unordered: (
disc,
circle,
square
);
$prototype-style-type-ordered: (
decimal,
lower-alpha,
lower-latin,
lower-roman,
upper-alpha,
upper-latin,
upper-roman
);
// 36. Prototype Overflow
// ----------------------
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
$prototype-overflow: (
visible,
hidden,
scroll
);
// 37. Prototype Position
// ----------------------
$prototype-position-breakpoints: $global-prototype-breakpoints;
$prototype-position: (
static,
relative,
absolute,
fixed
);
$prototype-position-z-index: 975;
// 38. Prototype Rounded
// ---------------------
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
$prototype-border-radius: rem-calc(3);
// 39. Prototype Separator
// -----------------------
$prototype-separator-breakpoints: $global-prototype-breakpoints;
$prototype-separator-align: center;
$prototype-separator-height: rem-calc(2);
$prototype-separator-width: 3rem;
$prototype-separator-background: $primary-color;
$prototype-separator-margin-top: $global-margin;
// 40. Prototype Shadow
// --------------------
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
0 2px 10px 0 rgba(0,0,0,.12);
// 41. Prototype Sizing
// --------------------
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
$prototype-sizing: (
width,
height
);
$prototype-sizes: (
25: 25%,
50: 50%,
75: 75%,
100: 100%
);
// 42. Prototype Spacing
// ---------------------
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
$prototype-spacers-count: 3;
// 43. Prototype Text-Decoration
// -----------------------------
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
$prototype-text-decoration: (
overline,
underline,
line-through,
);
// 44. Prototype Text-Transformation
// ---------------------------------
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
$prototype-text-transformation: (
lowercase,
uppercase,
capitalize
);
// 45. Prototype Text-Utilities
// ----------------------------
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
$prototype-text-overflow: ellipsis;
// 46. Responsive Embed
// --------------------
$responsive-embed-margin-bottom: rem-calc(16);
$responsive-embed-ratios: (
default: 4 by 3,
widescreen: 16 by 9,
);
// 47. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: 0; //$global-padding;
$reveal-border: none; //1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.4);
// 48. Slider
// ----------
$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
$slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
// 49. Switch
// ----------
$switch-background: $medium-gray;
$switch-background-active: $primary-color;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $global-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
// 50. Table
// ---------
$table-background: $white;
$table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
$table-stack-breakpoint: medium;
// 51. Tabs
// --------
$tab-margin: 0;
$tab-background: rgba(255,255,255,0);
$tab-color: $gray-1;
$tab-background-active: rgba(255,255,255,0.8);
$tab-active-color: $gray-3;
$tab-item-font-size: rem-calc(16);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem;
$tab-expand-max: 6;
$tab-content-background: none;
$tab-content-border: none;
$tab-content-color: $gray-1;
$tab-content-padding: 1rem;
// 52. Thumbnail
// -------------
$thumbnail-border: none; //solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: none; // 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius * 0.8;
// 53. Title Bar
// -------------
$titlebar-background: $gray-2;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
// 54. Tooltip
// -----------
$has-tip-cursor: help;
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: none; //dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
$tooltip-max-width: 13rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.5rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-radius: 0; //$global-radius;
// 55. Top Bar
// -----------
$topbar-padding: 1rem;
$topbar-background: none;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
// 56. Xy Grid
// -----------
$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
small: 20px,
medium: 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width;
$xy-block-grid-max: 8;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment