Changeset View
Changeset View
Standalone View
Standalone View
src/assets/scss/_settings.scss
Show All 25 Lines | /* ------------------------------------------------------------- | ||||
:: 6. Abide | :: 6. Abide | ||||
:: 7. Accordion | :: 7. Accordion | ||||
:: 8. Accordion Menu | :: 8. Accordion Menu | ||||
:: 9. Badge | :: 9. Badge | ||||
:: 10. Breadcrumbs | :: 10. Breadcrumbs | ||||
:: 11. Button | :: 11. Button | ||||
:: 12. Button Group | :: 12. Button Group | ||||
:: 13. Callout | :: 13. Callout | ||||
:: 14. Close Button | :: 14. Card | ||||
:: 15. Drilldown | :: 15. Close Button | ||||
:: 16. Dropdown | :: 16. Drilldown | ||||
:: 17. Dropdown Menu | :: 17. Dropdown | ||||
:: 18. Flex Video | :: 18. Dropdown Menu | ||||
:: 19. Forms | :: 19. Flexbox Utilities | ||||
:: 20. Label | :: 20. Forms | ||||
:: 21. Media Object | :: 21. Label | ||||
:: 22. Menu | :: 22. Media Object | ||||
:: 23. Meter | :: 23. Menu | ||||
:: 24. Off-canvas | :: 24. Meter | ||||
:: 25. Orbit | :: 25. Off-canvas | ||||
:: 26. Pagination | :: 26. Orbit | ||||
:: 27. Progress Bar | :: 27. Pagination | ||||
:: 28. Reveal | :: 28. Progress Bar | ||||
:: 29. Slider | :: 29. Prototype Arrow | ||||
:: 30. Switch | :: 30. Prototype Border-Box | ||||
:: 31. Table | :: 31. Prototype Border-None | ||||
:: 32. Tabs | :: 32. Prototype Bordered | ||||
:: 33. Thumbnail | :: 33. Prototype Display | ||||
:: 34. Title Bar | :: 34. Prototype Font-Styling | ||||
:: 35. Tooltip | :: 35. Prototype List-Style-Type | ||||
:: 36. Top Bar | :: 36. Prototype Overflow | ||||
:: 37. Prototype Position | |||||
:: 37. Path for fonts | :: 38. Prototype Rounded | ||||
:: 39. Prototype Separator | |||||
:: 40. Prototype Shadow | |||||
:: 41. Prototype Sizing | |||||
:: 42. Prototype Spacing | |||||
:: 43. Prototype Text-Decoration | |||||
:: 44. Prototype Text-Transformation | |||||
:: 45. Prototype Text-Utilities | |||||
:: 46. Responsive Embed | |||||
:: 47. Reveal | |||||
:: 48. Slider | |||||
:: 49. Switch | |||||
:: 50. Table | |||||
:: 51. Tabs | |||||
:: 52. Thumbnail | |||||
:: 53. Title Bar | |||||
:: 54. Tooltip | |||||
:: 55. Top Bar | |||||
:: 56. Xy Grid | |||||
:: 57. Path for fonts | |||||
*/ | */ | ||||
// 1. Global | // 1. Global | ||||
// --------- | // --------- | ||||
$global-font-size: 100%; | $global-font-size: 100%; | ||||
$global-width: rem-calc(1200); | $global-width: rem-calc(1200); | ||||
Show All 14 Lines | |||||
$body-font-color: $black; | $body-font-color: $black; | ||||
$body-font-family: Arimo, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; | $body-font-family: Arimo, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; | ||||
$body-antialiased: true; | $body-antialiased: true; | ||||
$global-margin: 1rem; | $global-margin: 1rem; | ||||
$global-padding: 1rem; | $global-padding: 1rem; | ||||
$global-weight-normal: normal; | $global-weight-normal: normal; | ||||
$global-weight-bold: bold; | $global-weight-bold: bold; | ||||
$global-radius: 0; | $global-radius: 0; | ||||
$global-menu-padding: 0.7rem 1rem; | |||||
$global-menu-nested-margin: 1rem; | |||||
$global-text-direction: ltr; | $global-text-direction: ltr; | ||||
$global-flexbox: false; | $global-flexbox: false; | ||||
$global-prototype-breakpoints: false; | |||||
$global-button-cursor: pointer; | |||||
$global-color-pick-contrast-tolerance: 0; | |||||
$print-transparent-backgrounds: true; | $print-transparent-backgrounds: true; | ||||
@include add-foundation-colors; | @include add-foundation-colors; | ||||
// 2. Breakpoints | // 2. Breakpoints | ||||
// -------------- | // -------------- | ||||
$breakpoints: ( | $breakpoints: ( | ||||
small: 0, | small: 0, | ||||
medium: 640px, | medium: 640px, | ||||
large: 1024px, | large: 1024px, | ||||
xlarge: 1200px, | xlarge: 1200px, | ||||
xxlarge: 1440px, | xxlarge: 1440px, | ||||
); | ); | ||||
$print-breakpoint: large; | |||||
$breakpoint-classes: (small medium large); | $breakpoint-classes: (small medium large); | ||||
// 3. The Grid | // 3. The Grid | ||||
// ----------- | // ----------- | ||||
$grid-row-width: $global-width; | $grid-row-width: $global-width; | ||||
$grid-column-count: 12; | $grid-column-count: 12; | ||||
$grid-column-gutter: ( | $grid-column-gutter: ( | ||||
small: 20px, | small: 20px, | ||||
medium: 30px, | medium: 30px, | ||||
); | ); | ||||
$grid-column-align-edge: true; | $grid-column-align-edge: true; | ||||
$grid-column-alias: 'columns'; | |||||
$block-grid-max: 8; | $block-grid-max: 8; | ||||
// 4. Base Typography | // 4. Base Typography | ||||
// ------------------ | // ------------------ | ||||
$header-font-family: 'Kreon', $body-font-family; | $header-font-family: 'Kreon', $body-font-family; | ||||
$header-font-weight: $global-weight-normal; | $header-font-weight: $global-weight-normal; | ||||
$header-font-style: normal; | $header-font-style: normal; | ||||
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; | $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; | ||||
$header-sizes: ( | $header-color: inherit; | ||||
$header-lineheight: 1.4; | |||||
$header-margin-bottom: 0.5rem; | |||||
$header-styles: ( | |||||
small: ( | small: ( | ||||
'h1': 24, | 'h1': ('font-size': 24), | ||||
'h2': 20, | 'h2': ('font-size': 20), | ||||
'h3': 19, | 'h3': ('font-size': 19), | ||||
'h4': 18, | 'h4': ('font-size': 18), | ||||
'h5': 17, | 'h5': ('font-size': 17), | ||||
'h6': 16, | 'h6': ('font-size': 16), | ||||
), | ), | ||||
medium: ( | medium: ( | ||||
'h1': 64, | 'h1': ('font-size': 64), | ||||
'h2': 48, | 'h2': ('font-size': 48), | ||||
'h3': 42, | 'h3': ('font-size': 42), | ||||
'h4': 36, | 'h4': ('font-size': 36), | ||||
'h5': 24, | 'h5': ('font-size': 24), | ||||
'h6': 18, | 'h6': ('font-size': 18), | ||||
), | ), | ||||
); | ); | ||||
$header-color: inherit; | |||||
$header-lineheight: 1.4; | |||||
$header-margin-bottom: 0.5rem; | |||||
$header-text-rendering: optimizeLegibility; | $header-text-rendering: optimizeLegibility; | ||||
$small-font-size: 80%; | $small-font-size: 80%; | ||||
$header-small-font-color: $medium-gray; | $header-small-font-color: $medium-gray; | ||||
$paragraph-lineheight: 1.6; | $paragraph-lineheight: 1.6; | ||||
$paragraph-margin-bottom: 1rem; | $paragraph-margin-bottom: 1rem; | ||||
$paragraph-text-rendering: optimizeLegibility; | $paragraph-text-rendering: optimizeLegibility; | ||||
$code-color: $black; | $code-color: $black; | ||||
$code-font-family: $font-family-monospace; | $code-font-family: $font-family-monospace; | ||||
Show All 17 Lines | |||||
$defnlist-margin-bottom: 1rem; | $defnlist-margin-bottom: 1rem; | ||||
$defnlist-term-weight: $global-weight-bold; | $defnlist-term-weight: $global-weight-bold; | ||||
$defnlist-term-margin-bottom: 0.3rem; | $defnlist-term-margin-bottom: 0.3rem; | ||||
$blockquote-color: $dark-gray; | $blockquote-color: $dark-gray; | ||||
$blockquote-padding: rem-calc(9 20 0 19); | $blockquote-padding: rem-calc(9 20 0 19); | ||||
$blockquote-border: 1px solid $medium-gray; | $blockquote-border: 1px solid $medium-gray; | ||||
$cite-font-size: rem-calc(13); | $cite-font-size: rem-calc(13); | ||||
$cite-color: $dark-gray; | $cite-color: $dark-gray; | ||||
$cite-pseudo-content: '\2014 \0020'; | |||||
$keystroke-font: $font-family-monospace; | $keystroke-font: $font-family-monospace; | ||||
$keystroke-color: $black; | $keystroke-color: $black; | ||||
$keystroke-background: $light-gray; | $keystroke-background: $light-gray; | ||||
$keystroke-padding: rem-calc(2 4 0); | $keystroke-padding: rem-calc(2 4 0); | ||||
$keystroke-radius: $global-radius; | $keystroke-radius: $global-radius; | ||||
$abbr-underline: 1px dotted $black; | $abbr-underline: 1px dotted $black; | ||||
// 5. Typography Helpers | // 5. Typography Helpers | ||||
// --------------------- | // --------------------- | ||||
$lead-font-size: $global-font-size * 1.25; | $lead-font-size: $global-font-size * 1.25; | ||||
$lead-lineheight: 1.6; | $lead-lineheight: 1.6; | ||||
$subheader-lineheight: 1.4; | $subheader-lineheight: 1.4; | ||||
$subheader-color: $dark-gray; | $subheader-color: $dark-gray; | ||||
$subheader-font-weight: $global-weight-normal; | $subheader-font-weight: $global-weight-normal; | ||||
$subheader-margin-top: 0.2rem; | $subheader-margin-top: 0.2rem; | ||||
$subheader-margin-bottom: 0.5rem; | $subheader-margin-bottom: 0.5rem; | ||||
$stat-font-size: 2.5rem; | $stat-font-size: 2.5rem; | ||||
// 6. Abide | // 6. Abide | ||||
// -------- | // -------- | ||||
$abide-inputs: true; | $abide-inputs: true; | ||||
$abide-labels: true; | $abide-labels: true; | ||||
$input-background-invalid: map-get($foundation-palette, alert); | $input-background-invalid: get-color(alert); | ||||
$form-label-color-invalid: map-get($foundation-palette, alert); | $form-label-color-invalid: get-color(alert); | ||||
$input-error-color: map-get($foundation-palette, alert); | $input-error-color: get-color(alert); | ||||
$input-error-font-size: rem-calc(12); | $input-error-font-size: rem-calc(12); | ||||
$input-error-font-weight: $global-weight-bold; | $input-error-font-weight: $global-weight-bold; | ||||
// 7. Accordion | // 7. Accordion | ||||
// ------------ | // ------------ | ||||
$accordion-background: $white; | $accordion-background: $white; | ||||
$accordion-plusminus: true; | $accordion-plusminus: true; | ||||
$accordion-item-color: foreground($accordion-background, $primary-color); | $accordion-title-font-size: rem-calc(12); | ||||
$accordion-item-color: $primary-color; | |||||
$accordion-item-background-hover: $light-gray; | $accordion-item-background-hover: $light-gray; | ||||
$accordion-item-padding: 1.25rem 1rem; | $accordion-item-padding: 1.25rem 1rem; | ||||
$accordion-content-background: $white; | $accordion-content-background: $white; | ||||
$accordion-content-border: 1px solid $light-gray; | $accordion-content-border: 1px solid $light-gray; | ||||
$accordion-content-color: foreground($accordion-background, $primary-color); | $accordion-content-color: $body-font-color; | ||||
$accordion-content-padding: 1rem; | $accordion-content-padding: 1rem; | ||||
// 8. Accordion Menu | // 8. Accordion Menu | ||||
// ----------------- | // ----------------- | ||||
$accordionmenu-padding: $global-menu-padding; | |||||
$accordionmenu-nested-margin: $global-menu-nested-margin; | |||||
$accordionmenu-submenu-padding: $accordionmenu-padding; | |||||
$accordionmenu-arrows: true; | $accordionmenu-arrows: true; | ||||
$accordionmenu-arrow-color: $primary-color; | $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 | // 9. Badge | ||||
// -------- | // -------- | ||||
$badge-background: $primary-color; | $badge-background: $primary-color; | ||||
$badge-color: foreground($badge-background); | $badge-color: $white; | ||||
$badge-color-alt: $black; | |||||
$badge-palette: $foundation-palette; | |||||
$badge-padding: 0.3em; | $badge-padding: 0.3em; | ||||
$badge-minwidth: 2.1em; | $badge-minwidth: 2.1em; | ||||
$badge-font-size: 0.6rem; | $badge-font-size: 0.6rem; | ||||
// 10. Breadcrumbs | // 10. Breadcrumbs | ||||
// --------------- | // --------------- | ||||
$breadcrumbs-margin: 0 0 $global-margin 0; | $breadcrumbs-margin: 0 0 $global-margin 0; | ||||
$breadcrumbs-item-font-size: rem-calc(11); | $breadcrumbs-item-font-size: rem-calc(11); | ||||
$breadcrumbs-item-color: $primary-color; | $breadcrumbs-item-color: $primary-color; | ||||
$breadcrumbs-item-color-current: $black; | $breadcrumbs-item-color-current: $black; | ||||
$breadcrumbs-item-color-disabled: $medium-gray; | $breadcrumbs-item-color-disabled: $medium-gray; | ||||
$breadcrumbs-item-margin: 0.75rem; | $breadcrumbs-item-margin: 0.75rem; | ||||
$breadcrumbs-item-uppercase: true; | $breadcrumbs-item-uppercase: true; | ||||
$breadcrumbs-item-slash: true; | $breadcrumbs-item-separator: true; | ||||
$breadcrumbs-item-separator-item: '/'; | |||||
$breadcrumbs-item-separator-item-rtl: '\\'; | |||||
$breadcrumbs-item-separator-color: $medium-gray; | |||||
// 11. Button | // 11. Button | ||||
// ---------- | // ---------- | ||||
$button-font-family: inherit; | |||||
$button-padding: 0.85em 1em; | $button-padding: 0.85em 1em; | ||||
$button-margin: 0 0 $global-margin 0; | $button-margin: 0 0 $global-margin 0; | ||||
$button-fill: solid; | $button-fill: solid; | ||||
$button-background: $secondary-color; | $button-background: $primary-color; | ||||
$button-background-hover: scale-color($button-background, $lightness: -15%); | $button-background-hover: scale-color($button-background, $lightness: -15%); | ||||
$button-color: $black; | $button-color: $white; | ||||
$button-color-alt: $black; | $button-color-alt: $black; | ||||
$button-radius: $global-radius; | $button-radius: $global-radius; | ||||
$button-hollow-border-width: 1px; | |||||
$button-sizes: ( | $button-sizes: ( | ||||
tiny: 0.6rem, | tiny: 0.6rem, | ||||
small: 0.75rem, | small: 0.75rem, | ||||
default: 0.9rem, | default: 0.9rem, | ||||
large: 1.25rem, | large: 1.25rem, | ||||
); | ); | ||||
$button-palette: $foundation-palette; | |||||
$button-opacity-disabled: 0.25; | $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 | // 12. Button Group | ||||
// ---------------- | // ---------------- | ||||
$buttongroup-margin: 1rem; | $buttongroup-margin: 1rem; | ||||
$buttongroup-spacing: 1px; | $buttongroup-spacing: 1px; | ||||
$buttongroup-child-selector: '.button'; | $buttongroup-child-selector: '.button'; | ||||
$buttongroup-expand-max: 6; | $buttongroup-expand-max: 6; | ||||
$buttongroup-radius-on-each: true; | |||||
// 13. Callout | // 13. Callout | ||||
// ----------- | // ----------- | ||||
$callout-background: $white; | $callout-background: $white; | ||||
$callout-background-fade: 85%; | $callout-background-fade: 85%; | ||||
$callout-border: 1px solid rgba($black, 0.25); | $callout-border: 1px solid rgba($black, 0.25); | ||||
$callout-margin: 0 0 1rem 0; | $callout-margin: 0 0 1rem 0; | ||||
$callout-padding: 1rem; | $callout-padding: 1rem; | ||||
$callout-font-color: $body-font-color; | $callout-font-color: $body-font-color; | ||||
$callout-font-color-alt: $body-background; | $callout-font-color-alt: $body-background; | ||||
$callout-radius: $global-radius; | $callout-radius: $global-radius; | ||||
$callout-link-tint: 30%; | $callout-link-tint: 30%; | ||||
// 14. Close Button | // 14. Card | ||||
// -------- | |||||
$card-background: $white; | |||||
$card-font-color: $body-font-color; | |||||
$card-divider-background: $light-gray; | |||||
$card-border: 1px solid $light-gray; | |||||
$card-shadow: none; | |||||
$card-border-radius: $global-radius; | |||||
$card-padding: $global-padding; | |||||
$card-margin-bottom: $global-margin; | |||||
// 15. Close Button | |||||
// ---------------- | // ---------------- | ||||
$closebutton-position: right top; | $closebutton-position: right top; | ||||
$closebutton-offset-horizontal: 1rem; | $closebutton-offset-horizontal: ( | ||||
$closebutton-offset-vertical: 0.5rem; | small: 0.66rem, | ||||
$closebutton-size: 2em; | medium: 1rem, | ||||
); | |||||
$closebutton-offset-vertical: ( | |||||
small: 0.33em, | |||||
medium: 0.5rem, | |||||
); | |||||
$closebutton-size: ( | |||||
small: 1.5em, | |||||
medium: 2em, | |||||
); | |||||
$closebutton-lineheight: 1; | $closebutton-lineheight: 1; | ||||
$closebutton-color: $dark-gray; | $closebutton-color: $dark-gray; | ||||
$closebutton-color-hover: $black; | $closebutton-color-hover: $black; | ||||
// 15. Drilldown | // 16. Drilldown | ||||
// ------------- | // ------------- | ||||
$drilldown-transition: transform 0.15s linear; | $drilldown-transition: transform 0.15s linear; | ||||
$drilldown-arrows: true; | $drilldown-arrows: true; | ||||
$drilldown-arrow-color: $primary-color; | $drilldown-padding: $global-menu-padding; | ||||
$drilldown-nested-margin: 0; | |||||
$drilldown-background: $white; | $drilldown-background: $white; | ||||
$drilldown-submenu-padding: $drilldown-padding; | |||||
$drilldown-submenu-background: $white; | |||||
$drilldown-arrow-color: $primary-color; | |||||
$drilldown-arrow-size: 6px; | |||||
// 16. Dropdown | // 17. Dropdown | ||||
// ------------ | // ------------ | ||||
$dropdown-padding: 1rem; | $dropdown-padding: 1rem; | ||||
$dropdown-background: $body-background; | |||||
$dropdown-border: 1px solid $medium-gray; | $dropdown-border: 1px solid $medium-gray; | ||||
$dropdown-font-size: 1rem; | $dropdown-font-size: 1rem; | ||||
$dropdown-width: 300px; | $dropdown-width: 300px; | ||||
$dropdown-radius: $global-radius; | $dropdown-radius: $global-radius; | ||||
$dropdown-sizes: ( | $dropdown-sizes: ( | ||||
tiny: 100px, | tiny: 100px, | ||||
small: 200px, | small: 200px, | ||||
large: 400px, | large: 400px, | ||||
); | ); | ||||
// 17. Dropdown Menu | // 18. Dropdown Menu | ||||
// ----------------- | // ----------------- | ||||
$dropdownmenu-arrows: true; | $dropdownmenu-arrows: true; | ||||
$dropdownmenu-arrow-color: $anchor-color; | $dropdownmenu-arrow-color: $anchor-color; | ||||
$dropdownmenu-arrow-size: 6px; | |||||
$dropdownmenu-arrow-padding: 1.5rem; | |||||
$dropdownmenu-min-width: 200px; | $dropdownmenu-min-width: 200px; | ||||
$dropdownmenu-background: $white; | $dropdownmenu-background: $white; | ||||
$dropdownmenu-submenu-background: $dropdownmenu-background; | |||||
$dropdownmenu-padding: $global-menu-padding; | |||||
$dropdownmenu-nested-margin: 0; | |||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding; | |||||
$dropdownmenu-border: 1px solid $medium-gray; | $dropdownmenu-border: 1px solid $medium-gray; | ||||
$dropdown-menu-item-color-active: get-color(primary); | |||||
$dropdown-menu-item-background-active: transparent; | |||||
// 18. Flex Video | // 19. Flexbox Utilities | ||||
// -------------- | // --------------------- | ||||
$flexvideo-margin-bottom: rem-calc(16); | $flex-source-ordering-count: 6; | ||||
$flexvideo-ratio: 4 by 3; | $flexbox-responsive-breakpoints: true; | ||||
$flexvideo-ratio-widescreen: 16 by 9; | |||||
// 19. Forms | // 20. Forms | ||||
// --------- | // --------- | ||||
$fieldset-border: 1px solid $medium-gray; | $fieldset-border: 1px solid $medium-gray; | ||||
$fieldset-padding: rem-calc(20); | $fieldset-padding: rem-calc(20); | ||||
$fieldset-margin: rem-calc(18 0); | $fieldset-margin: rem-calc(18 0); | ||||
$legend-padding: rem-calc(0 3); | $legend-padding: rem-calc(0 3); | ||||
$form-spacing: rem-calc(16); | $form-spacing: rem-calc(16); | ||||
$helptext-color: $black; | $helptext-color: $black; | ||||
Show All 9 Lines | |||||
$form-label-line-height: 1.8; | $form-label-line-height: 1.8; | ||||
$select-background: $white; | $select-background: $white; | ||||
$select-triangle-color: $dark-gray; | $select-triangle-color: $dark-gray; | ||||
$select-radius: $global-radius; | $select-radius: $global-radius; | ||||
$input-color: $black; | $input-color: $black; | ||||
$input-placeholder-color: $medium-gray; | $input-placeholder-color: $medium-gray; | ||||
$input-font-family: inherit; | $input-font-family: inherit; | ||||
$input-font-size: rem-calc(16); | $input-font-size: rem-calc(16); | ||||
$input-font-weight: $global-weight-normal; | |||||
$input-line-height: $global-lineheight; | |||||
$input-background: $white; | $input-background: $white; | ||||
$input-background-focus: $white; | $input-background-focus: $white; | ||||
$input-background-disabled: $light-gray; | $input-background-disabled: $light-gray; | ||||
$input-border: 1px solid $medium-gray; | $input-border: 1px solid $medium-gray; | ||||
$input-border-focus: 1px solid $dark-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: inset 0 1px 2px rgba($black, 0.1); | ||||
$input-shadow-focus: 0 0 5px $medium-gray; | $input-shadow-focus: 0 0 5px $medium-gray; | ||||
$input-cursor-disabled: default; | $input-cursor-disabled: not-allowed; | ||||
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; | ||||
$input-number-spinners: true; | $input-number-spinners: true; | ||||
$input-radius: $global-radius; | $input-radius: $global-radius; | ||||
$form-button-radius: $global-radius; | |||||
// 20. Label | // 21. Label | ||||
// --------- | // --------- | ||||
$label-background: $primary-color; | $label-background: $primary-color; | ||||
$label-color: foreground($label-background); | $label-color: $white; | ||||
$label-color-alt: $black; | |||||
$label-palette: $foundation-palette; | |||||
$label-font-size: 0.8rem; | $label-font-size: 0.8rem; | ||||
$label-padding: 0.33333rem 0.5rem; | $label-padding: 0.33333rem 0.5rem; | ||||
$label-radius: $global-radius; | $label-radius: $global-radius; | ||||
// 21. Media Object | // 22. Media Object | ||||
// ---------------- | // ---------------- | ||||
$mediaobject-margin-bottom: $global-margin; | $mediaobject-margin-bottom: $global-margin; | ||||
$mediaobject-section-padding: $global-padding; | $mediaobject-section-padding: $global-padding; | ||||
$mediaobject-image-width-stacked: 100%; | $mediaobject-image-width-stacked: 100%; | ||||
// 22. Menu | // 23. Menu | ||||
// -------- | // -------- | ||||
$menu-margin: 0; | $menu-margin: 0; | ||||
$menu-margin-nested: 1rem; | $menu-nested-margin: $global-menu-nested-margin; | ||||
$menu-item-padding: 0.7rem 1rem; | $menu-items-padding: $global-menu-padding; | ||||
$menu-simple-margin: 1rem; | |||||
$menu-item-color-active: $white; | $menu-item-color-active: $white; | ||||
$menu-item-background-active: map-get($foundation-palette, primary); | $menu-item-color-alt-active: $black; | ||||
$menu-item-background-active: get-color(primary); | |||||
$menu-icon-spacing: 0.25rem; | $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; | |||||
// 23. Meter | // 24. Meter | ||||
// --------- | // --------- | ||||
$meter-height: 1rem; | $meter-height: 1rem; | ||||
$meter-radius: $global-radius; | $meter-radius: $global-radius; | ||||
$meter-background: $medium-gray; | $meter-background: $medium-gray; | ||||
$meter-fill-good: $success-color; | $meter-fill-good: $success-color; | ||||
$meter-fill-medium: $warning-color; | $meter-fill-medium: $warning-color; | ||||
$meter-fill-bad: $alert-color; | $meter-fill-bad: $alert-color; | ||||
// 24. Off-canvas | // 25. Off-canvas | ||||
// -------------- | // -------------- | ||||
$offcanvas-size: 250px; | $offcanvas-sizes: ( | ||||
small: 250px, | |||||
); | |||||
$offcanvas-vertical-sizes: ( | |||||
small: 250px, | |||||
); | |||||
$offcanvas-background: $light-gray; | $offcanvas-background: $light-gray; | ||||
$offcanvas-zindex: -1; | $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.5s; | $offcanvas-transition-length: 0.5s; | ||||
$offcanvas-transition-timing: ease; | $offcanvas-transition-timing: ease; | ||||
$offcanvas-fixed-reveal: true; | $offcanvas-fixed-reveal: true; | ||||
$offcanvas-exit-background: rgba($white, 0.25); | $offcanvas-exit-background: rgba($white, 0.25); | ||||
$maincontent-class: 'off-canvas-content'; | $maincontent-class: 'off-canvas-content'; | ||||
$maincontent-shadow: 0 0 10px rgba($black, 0.5); | |||||
// 25. Orbit | // 26. Orbit | ||||
// --------- | // --------- | ||||
$orbit-bullet-background: $medium-gray; | $orbit-bullet-background: $medium-gray; | ||||
$orbit-bullet-background-active: $dark-gray; | $orbit-bullet-background-active: $dark-gray; | ||||
$orbit-bullet-diameter: 1.2rem; | $orbit-bullet-diameter: 1.2rem; | ||||
$orbit-bullet-margin: 0.1rem; | $orbit-bullet-margin: 0.1rem; | ||||
$orbit-bullet-margin-top: 0.8rem; | $orbit-bullet-margin-top: 0.8rem; | ||||
$orbit-bullet-margin-bottom: 0.8rem; | $orbit-bullet-margin-bottom: 0.8rem; | ||||
$orbit-caption-background: rgba($black, 0.5); | $orbit-caption-background: rgba($black, 0.5); | ||||
$orbit-caption-padding: 1rem; | $orbit-caption-padding: 1rem; | ||||
$orbit-control-background-hover: rgba($black, 0.5); | $orbit-control-background-hover: rgba($black, 0.5); | ||||
$orbit-control-padding: 1rem; | $orbit-control-padding: 1rem; | ||||
$orbit-control-zindex: 10; | $orbit-control-zindex: 10; | ||||
// 26. Pagination | // 27. Pagination | ||||
// -------------- | // -------------- | ||||
$pagination-font-size: rem-calc(14); | $pagination-font-size: rem-calc(14); | ||||
$pagination-margin-bottom: $global-margin; | $pagination-margin-bottom: $global-margin; | ||||
$pagination-item-color: $black; | $pagination-item-color: $black; | ||||
$pagination-item-padding: rem-calc(3 10); | $pagination-item-padding: rem-calc(3 10); | ||||
$pagination-item-spacing: rem-calc(1); | $pagination-item-spacing: rem-calc(1); | ||||
$pagination-radius: $global-radius; | $pagination-radius: $global-radius; | ||||
$pagination-item-background-hover: $light-gray; | $pagination-item-background-hover: $light-gray; | ||||
$pagination-item-background-current: $primary-color; | $pagination-item-background-current: $primary-color; | ||||
$pagination-item-color-current: foreground($pagination-item-background-current); | $pagination-item-color-current: $white; | ||||
$pagination-item-color-disabled: $medium-gray; | $pagination-item-color-disabled: $medium-gray; | ||||
$pagination-ellipsis-color: $black; | $pagination-ellipsis-color: $black; | ||||
$pagination-mobile-items: false; | $pagination-mobile-items: false; | ||||
$pagination-mobile-current-item: false; | |||||
$pagination-arrows: true; | $pagination-arrows: true; | ||||
// 27. Progress Bar | // 28. Progress Bar | ||||
// ---------------- | // ---------------- | ||||
$progress-height: 1rem; | $progress-height: 1rem; | ||||
$progress-background: $medium-gray; | $progress-background: $medium-gray; | ||||
$progress-margin-bottom: $global-margin; | $progress-margin-bottom: $global-margin; | ||||
$progress-meter-background: $primary-color; | $progress-meter-background: $primary-color; | ||||
$progress-radius: $global-radius; | $progress-radius: $global-radius; | ||||
// 28. Reveal | // 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-background: $white; | ||||
$reveal-width: 600px; | $reveal-width: 600px; | ||||
$reveal-max-width: $global-width; | $reveal-max-width: $global-width; | ||||
$reveal-padding: $global-padding; | $reveal-padding: $global-padding; | ||||
$reveal-border: 1px solid $medium-gray; | $reveal-border: 1px solid $medium-gray; | ||||
$reveal-radius: $global-radius; | $reveal-radius: $global-radius; | ||||
$reveal-zindex: 1005; | $reveal-zindex: 1005; | ||||
$reveal-overlay-background: rgba($black, 0.45); | $reveal-overlay-background: rgba($black, 0.45); | ||||
// 29. Slider | // 48. Slider | ||||
// ---------- | // ---------- | ||||
$slider-width-vertical: 0.5rem; | $slider-width-vertical: 0.5rem; | ||||
$slider-transition: all 0.2s ease-in-out; | $slider-transition: all 0.2s ease-in-out; | ||||
$slider-height: 0.5rem; | $slider-height: 0.5rem; | ||||
$slider-background: $light-gray; | $slider-background: $light-gray; | ||||
$slider-fill-background: $medium-gray; | $slider-fill-background: $medium-gray; | ||||
$slider-handle-height: 1.4rem; | $slider-handle-height: 1.4rem; | ||||
$slider-handle-width: 1.4rem; | $slider-handle-width: 1.4rem; | ||||
$slider-handle-background: $primary-color; | $slider-handle-background: $primary-color; | ||||
$slider-opacity-disabled: 0.25; | $slider-opacity-disabled: 0.25; | ||||
$slider-radius: $global-radius; | $slider-radius: $global-radius; | ||||
// 30. Switch | // 49. Switch | ||||
// ---------- | // ---------- | ||||
$switch-background: $medium-gray; | $switch-background: $medium-gray; | ||||
$switch-background-active: $primary-color; | $switch-background-active: $primary-color; | ||||
$switch-height: 2rem; | $switch-height: 2rem; | ||||
$switch-height-tiny: 1.5rem; | $switch-height-tiny: 1.5rem; | ||||
$switch-height-small: 1.75rem; | $switch-height-small: 1.75rem; | ||||
$switch-height-large: 2.5rem; | $switch-height-large: 2.5rem; | ||||
$switch-radius: $global-radius; | $switch-radius: $global-radius; | ||||
$switch-margin: $global-margin; | $switch-margin: $global-margin; | ||||
$switch-paddle-background: $white; | $switch-paddle-background: $white; | ||||
$switch-paddle-offset: 0.25rem; | $switch-paddle-offset: 0.25rem; | ||||
$switch-paddle-radius: $global-radius; | $switch-paddle-radius: $global-radius; | ||||
$switch-paddle-transition: all 0.25s ease-out; | $switch-paddle-transition: all 0.25s ease-out; | ||||
// 31. Table | // 50. Table | ||||
// --------- | // --------- | ||||
$table-background: $white; | $table-background: $white; | ||||
$table-color-scale: 5%; | $table-color-scale: 5%; | ||||
$table-border: 1px solid smart-scale($table-background, $table-color-scale); | $table-border: 1px solid smart-scale($table-background, $table-color-scale); | ||||
$table-padding: rem-calc(8 10 10); | $table-padding: rem-calc(8 10 10); | ||||
$table-hover-scale: 2%; | $table-hover-scale: 2%; | ||||
$table-row-hover: darken($table-background, $table-hover-scale); | $table-row-hover: darken($table-background, $table-hover-scale); | ||||
$table-row-stripe-hover: darken($table-background, $table-color-scale + $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-striped-background: smart-scale($table-background, $table-color-scale); | ||||
$table-stripe: even; | $table-stripe: even; | ||||
$table-head-background: smart-scale($table-background, $table-color-scale / 2); | $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-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-head-font-color: $body-font-color; | ||||
$table-foot-font-color: $body-font-color; | |||||
$show-header-for-stacked: false; | $show-header-for-stacked: false; | ||||
$table-stack-breakpoint: medium; | |||||
// 32. Tabs | // 51. Tabs | ||||
// -------- | // -------- | ||||
$tab-margin: 0; | $tab-margin: 0; | ||||
$tab-background: $white; | $tab-background: $white; | ||||
$tab-color: $primary-color; | |||||
$tab-background-active: $light-gray; | $tab-background-active: $light-gray; | ||||
$tab-active-color: $primary-color; | |||||
$tab-item-font-size: rem-calc(12); | $tab-item-font-size: rem-calc(12); | ||||
$tab-item-background-hover: $white; | $tab-item-background-hover: $white; | ||||
$tab-item-padding: 1.25rem 1.5rem; | $tab-item-padding: 1.25rem 1.5rem; | ||||
$tab-expand-max: 6; | |||||
$tab-content-background: $white; | $tab-content-background: $white; | ||||
$tab-content-border: $light-gray; | $tab-content-border: $light-gray; | ||||
$tab-content-color: foreground($tab-background, $primary-color); | $tab-content-color: $body-font-color; | ||||
$tab-content-padding: 1rem; | $tab-content-padding: 1rem; | ||||
// 33. Thumbnail | // 52. Thumbnail | ||||
// ------------- | // ------------- | ||||
$thumbnail-border: solid 4px $white; | $thumbnail-border: solid 4px $white; | ||||
$thumbnail-margin-bottom: $global-margin; | $thumbnail-margin-bottom: $global-margin; | ||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); | ||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); | ||||
$thumbnail-transition: box-shadow 200ms ease-out; | $thumbnail-transition: box-shadow 200ms ease-out; | ||||
$thumbnail-radius: $global-radius; | $thumbnail-radius: $global-radius; | ||||
// 34. Title Bar | // 53. Title Bar | ||||
// ------------- | // ------------- | ||||
$titlebar-background: $black; | $titlebar-background: $black; | ||||
$titlebar-color: $white; | $titlebar-color: $white; | ||||
$titlebar-padding: 0.5rem; | $titlebar-padding: 0.5rem; | ||||
$titlebar-text-font-weight: bold; | $titlebar-text-font-weight: bold; | ||||
$titlebar-icon-color: $white; | $titlebar-icon-color: $white; | ||||
$titlebar-icon-color-hover: $medium-gray; | $titlebar-icon-color-hover: $medium-gray; | ||||
$titlebar-icon-spacing: 0.25rem; | $titlebar-icon-spacing: 0.25rem; | ||||
// 35. Tooltip | // 54. Tooltip | ||||
// ----------- | // ----------- | ||||
$has-tip-cursor: help; | |||||
$has-tip-font-weight: $global-weight-bold; | $has-tip-font-weight: $global-weight-bold; | ||||
$has-tip-border-bottom: dotted 1px $dark-gray; | $has-tip-border-bottom: dotted 1px $dark-gray; | ||||
$tooltip-background-color: $black; | $tooltip-background-color: $black; | ||||
$tooltip-color: $white; | $tooltip-color: $white; | ||||
$tooltip-padding: 0.75rem; | $tooltip-padding: 0.75rem; | ||||
$tooltip-max-width: 10rem; | |||||
$tooltip-font-size: $small-font-size; | $tooltip-font-size: $small-font-size; | ||||
$tooltip-pip-width: 0.75rem; | $tooltip-pip-width: 0.75rem; | ||||
$tooltip-pip-height: $tooltip-pip-width * 0.866; | $tooltip-pip-height: $tooltip-pip-width * 0.866; | ||||
$tooltip-radius: $global-radius; | $tooltip-radius: $global-radius; | ||||
// 36. Top Bar | // 55. Top Bar | ||||
// ----------- | // ----------- | ||||
$topbar-padding: 0.5rem; | $topbar-padding: 0.5rem; | ||||
$topbar-background: $light-gray; | $topbar-background: $light-gray; | ||||
$topbar-submenu-background: $topbar-background; | $topbar-submenu-background: $topbar-background; | ||||
$topbar-title-spacing: 1rem; | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; | ||||
$topbar-input-width: 200px; | $topbar-input-width: 200px; | ||||
$topbar-unstack-breakpoint: medium; | $topbar-unstack-breakpoint: medium; | ||||
// 37. Path for fonts | // 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; | |||||
// 57. Path for fonts | |||||
// ------------------ | // ------------------ | ||||
$fi-path: "../fonts"; | $fi-path: "../fonts"; |
Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator