Zurb Foundation update
This commit is contained in:
parent
5f01c8bae1
commit
6eae1d9984
2 changed files with 86 additions and 73 deletions
|
|
@ -25,19 +25,20 @@
|
||||||
// 20. Label
|
// 20. Label
|
||||||
// 21. Media Object
|
// 21. Media Object
|
||||||
// 22. Menu
|
// 22. Menu
|
||||||
// 23. Off-canvas
|
// 23. Meter
|
||||||
// 24. Orbit
|
// 24. Off-canvas
|
||||||
// 25. Pagination
|
// 25. Orbit
|
||||||
// 26. Progress Bar
|
// 26. Pagination
|
||||||
// 27. Reveal
|
// 27. Progress Bar
|
||||||
// 28. Slider
|
// 28. Reveal
|
||||||
// 29. Switch
|
// 29. Slider
|
||||||
// 30. Table
|
// 30. Switch
|
||||||
// 31. Tabs
|
// 31. Table
|
||||||
// 32. Thumbnail
|
// 32. Tabs
|
||||||
// 33. Title Bar
|
// 33. Thumbnail
|
||||||
// 34. Tooltip
|
// 34. Title Bar
|
||||||
// 35. Top Bar
|
// 35. Tooltip
|
||||||
|
// 36. Top Bar
|
||||||
|
|
||||||
@import 'util/util';
|
@import 'util/util';
|
||||||
|
|
||||||
|
|
@ -54,12 +55,13 @@ $debian-color: #c70338;
|
||||||
$global-font-size: 100%;
|
$global-font-size: 100%;
|
||||||
$global-width: rem-calc(1200);
|
$global-width: rem-calc(1200);
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
$primary-color: #808080;
|
$foundation-palette: (
|
||||||
//$primary-color: $debian-color;
|
primary: #2199e8,
|
||||||
$secondary-color: #777;
|
secondary: #777,
|
||||||
$success-color: #3adb76;
|
success: #3adb76,
|
||||||
$warning-color: #ffae00;
|
warning: #ffae00,
|
||||||
$alert-color: #ec5840;
|
alert: #ec5840,
|
||||||
|
);
|
||||||
$light-gray: #e6e6e6;
|
$light-gray: #e6e6e6;
|
||||||
$medium-gray: #cacaca;
|
$medium-gray: #cacaca;
|
||||||
$dark-gray: #8a8a8a;
|
$dark-gray: #8a8a8a;
|
||||||
|
|
@ -75,6 +77,10 @@ $global-weight-normal: normal;
|
||||||
$global-weight-bold: bold;
|
$global-weight-bold: bold;
|
||||||
$global-radius: 0;
|
$global-radius: 0;
|
||||||
$global-text-direction: ltr;
|
$global-text-direction: ltr;
|
||||||
|
$global-flexbox: false;
|
||||||
|
$print-transparent-backgrounds: true;
|
||||||
|
|
||||||
|
@include add-foundation-colors;
|
||||||
|
|
||||||
// 2. Breakpoints
|
// 2. Breakpoints
|
||||||
// --------------
|
// --------------
|
||||||
|
|
@ -185,9 +191,9 @@ $stat-font-size: 2.5rem;
|
||||||
|
|
||||||
$abide-inputs: true;
|
$abide-inputs: true;
|
||||||
$abide-labels: true;
|
$abide-labels: true;
|
||||||
$input-background-invalid: $alert-color;
|
$input-background-invalid: map-get($foundation-palette, alert);
|
||||||
$form-label-color-invalid: $alert-color;
|
$form-label-color-invalid: map-get($foundation-palette, alert);
|
||||||
$input-error-color: $alert-color;
|
$input-error-color: map-get($foundation-palette, 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;
|
||||||
|
|
||||||
|
|
@ -201,7 +207,7 @@ $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: foreground($accordion-content-background, $body-font-color);
|
||||||
$accordion-content-padding: 1rem;
|
$accordion-content-padding: 1rem;
|
||||||
|
|
||||||
// 8. Accordion Menu
|
// 8. Accordion Menu
|
||||||
|
|
@ -239,8 +245,8 @@ $button-margin: 0 0 $global-margin 0;
|
||||||
$button-fill: solid;
|
$button-fill: solid;
|
||||||
$button-background: $primary-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: #fff;
|
$button-color: $white;
|
||||||
$button-color-alt: #000;
|
$button-color-alt: $black;
|
||||||
$button-radius: $global-radius;
|
$button-radius: $global-radius;
|
||||||
$button-sizes: (
|
$button-sizes: (
|
||||||
tiny: 0.6rem,
|
tiny: 0.6rem,
|
||||||
|
|
@ -296,8 +302,7 @@ $drilldown-background: $white;
|
||||||
$dropdown-padding: 1rem;
|
$dropdown-padding: 1rem;
|
||||||
$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-width: 400px;
|
|
||||||
$dropdown-radius: $global-radius;
|
$dropdown-radius: $global-radius;
|
||||||
$dropdown-sizes: (
|
$dropdown-sizes: (
|
||||||
tiny: 100px,
|
tiny: 100px,
|
||||||
|
|
@ -329,7 +334,7 @@ $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: #333;
|
$helptext-color: $black;
|
||||||
$helptext-font-size: rem-calc(13);
|
$helptext-font-size: rem-calc(13);
|
||||||
$helptext-font-style: italic;
|
$helptext-font-style: italic;
|
||||||
$input-prefix-color: $black;
|
$input-prefix-color: $black;
|
||||||
|
|
@ -341,9 +346,10 @@ $form-label-font-size: rem-calc(14);
|
||||||
$form-label-font-weight: $global-weight-normal;
|
$form-label-font-weight: $global-weight-normal;
|
||||||
$form-label-line-height: 1.8;
|
$form-label-line-height: 1.8;
|
||||||
$select-background: $white;
|
$select-background: $white;
|
||||||
$select-triangle-color: #333;
|
$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-font-family: inherit;
|
$input-font-family: inherit;
|
||||||
$input-font-size: rem-calc(16);
|
$input-font-size: rem-calc(16);
|
||||||
$input-background: $white;
|
$input-background: $white;
|
||||||
|
|
@ -353,7 +359,7 @@ $input-border: 1px solid $medium-gray;
|
||||||
$input-border-focus: 1px solid $dark-gray;
|
$input-border-focus: 1px solid $dark-gray;
|
||||||
$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;
|
||||||
|
|
@ -379,12 +385,22 @@ $mediaobject-image-width-stacked: 100%;
|
||||||
|
|
||||||
$menu-margin: 0;
|
$menu-margin: 0;
|
||||||
$menu-margin-nested: 1rem;
|
$menu-margin-nested: 1rem;
|
||||||
//$menu-item-padding: 0.7rem 1rem;
|
$menu-item-padding: 0.7rem 1rem;
|
||||||
$menu-item-padding: 1.2rem 1rem;
|
$menu-item-color-active: $white;
|
||||||
|
$menu-item-background-active: map-get($foundation-palette, primary);
|
||||||
$menu-icon-spacing: 0.25rem;
|
$menu-icon-spacing: 0.25rem;
|
||||||
$menu-expand-max: 6;
|
|
||||||
|
|
||||||
// 23. Off-canvas
|
// 23. 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;
|
||||||
|
|
||||||
|
// 24. Off-canvas
|
||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
$offcanvas-size: 250px;
|
$offcanvas-size: 250px;
|
||||||
|
|
@ -397,7 +413,7 @@ $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);
|
$maincontent-shadow: 0 0 10px rgba($black, 0.5);
|
||||||
|
|
||||||
// 24. Orbit
|
// 25. Orbit
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$orbit-bullet-background: $medium-gray;
|
$orbit-bullet-background: $medium-gray;
|
||||||
|
|
@ -412,7 +428,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
|
||||||
$orbit-control-padding: 1rem;
|
$orbit-control-padding: 1rem;
|
||||||
$orbit-control-zindex: 10;
|
$orbit-control-zindex: 10;
|
||||||
|
|
||||||
// 25. Pagination
|
// 26. Pagination
|
||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
$pagination-font-size: rem-calc(14);
|
$pagination-font-size: rem-calc(14);
|
||||||
|
|
@ -429,34 +445,33 @@ $pagination-ellipsis-color: $black;
|
||||||
$pagination-mobile-items: false;
|
$pagination-mobile-items: false;
|
||||||
$pagination-arrows: true;
|
$pagination-arrows: true;
|
||||||
|
|
||||||
// 26. Progress Bar
|
// 27. Progress Bar
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// $progress-height: 1rem;
|
$progress-height: 1rem;
|
||||||
$progress-height: 2rem;
|
|
||||||
$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;
|
||||||
|
|
||||||
// 27. Reveal
|
// 28. Reveal
|
||||||
// ----------
|
// ----------
|
||||||
|
|
||||||
$reveal-background: $white;
|
$reveal-background: $white;
|
||||||
$reveal-width: 600px;
|
$reveal-width: 600px;
|
||||||
$reveal-max-width: $global-width;
|
$reveal-max-width: $global-width;
|
||||||
$reveal-offset: rem-calc(100);
|
|
||||||
$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);
|
||||||
|
|
||||||
// 28. Slider
|
// 29. Slider
|
||||||
// ----------
|
// ----------
|
||||||
|
|
||||||
|
$slider-width-vertical: 0.5rem;
|
||||||
|
$slider-transition: all 0.2s ease-in-out;
|
||||||
$slider-height: 0.5rem;
|
$slider-height: 0.5rem;
|
||||||
$slider-width-vertical: $slider-height;
|
|
||||||
$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;
|
||||||
|
|
@ -464,9 +479,8 @@ $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;
|
||||||
$slider-transition: all 0.2s ease-in-out;
|
|
||||||
|
|
||||||
// 29. Switch
|
// 30. Switch
|
||||||
// ----------
|
// ----------
|
||||||
|
|
||||||
$switch-background: $medium-gray;
|
$switch-background: $medium-gray;
|
||||||
|
|
@ -482,7 +496,7 @@ $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;
|
||||||
|
|
||||||
// 30. Table
|
// 31. Table
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$table-background: $white;
|
$table-background: $white;
|
||||||
|
|
@ -499,14 +513,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
|
||||||
$table-head-font-color: $body-font-color;
|
$table-head-font-color: $body-font-color;
|
||||||
$show-header-for-stacked: false;
|
$show-header-for-stacked: false;
|
||||||
|
|
||||||
// 31. Tabs
|
// 32. Tabs
|
||||||
// --------
|
// --------
|
||||||
|
|
||||||
$tab-margin: 0;
|
$tab-margin: 0;
|
||||||
$tab-background: $white;
|
$tab-background: $white;
|
||||||
$tab-background-active: $light-gray;
|
$tab-background-active: $light-gray;
|
||||||
$tab-border: $light-gray;
|
$tab-item-font-size: rem-calc(12);
|
||||||
$tab-item-color: foreground($tab-background, $primary-color);
|
|
||||||
$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-expand-max: 6;
|
||||||
|
|
@ -515,18 +528,17 @@ $tab-content-border: $light-gray;
|
||||||
$tab-content-color: foreground($tab-background, $primary-color);
|
$tab-content-color: foreground($tab-background, $primary-color);
|
||||||
$tab-content-padding: 1rem;
|
$tab-content-padding: 1rem;
|
||||||
|
|
||||||
// 32. Thumbnail
|
// 33. 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-shadow-hover: 0 0 6px 3px 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;
|
||||||
|
|
||||||
// 33. Title Bar
|
// 34. Title Bar
|
||||||
// -------------
|
// -------------
|
||||||
|
|
||||||
$titlebar-background: $black;
|
$titlebar-background: $black;
|
||||||
|
|
@ -537,7 +549,7 @@ $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;
|
||||||
|
|
||||||
// 34. Tooltip
|
// 35. Tooltip
|
||||||
// -----------
|
// -----------
|
||||||
|
|
||||||
$has-tip-font-weight: $global-weight-bold;
|
$has-tip-font-weight: $global-weight-bold;
|
||||||
|
|
@ -548,17 +560,17 @@ $tooltip-padding: 0.75rem;
|
||||||
$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-pip-offset: 1.25rem;
|
|
||||||
$tooltip-radius: $global-radius;
|
$tooltip-radius: $global-radius;
|
||||||
|
|
||||||
// 35. Top Bar
|
// 36. Top Bar
|
||||||
// -----------
|
// -----------
|
||||||
|
|
||||||
$topbar-padding: 0.5rem;
|
$topbar-padding: 0.5rem;
|
||||||
// $topbar-background: $light-gray;
|
$topbar-background: $light-gray;
|
||||||
$topbar-background: #2e3436;
|
$topbar-submenu-background: $topbar-background;
|
||||||
$topbar-title-spacing: 1rem;
|
$topbar-title-spacing: 1rem;
|
||||||
$topbar-input-width: 200px;
|
$topbar-input-width: 200px;
|
||||||
|
$topbar-unstack-breakpoint: medium;
|
||||||
|
|
||||||
// ---------------------------------------------------
|
// ---------------------------------------------------
|
||||||
// -------------- debshots ---------------------------
|
// -------------- debshots ---------------------------
|
||||||
|
|
|
||||||
|
|
@ -16,33 +16,34 @@
|
||||||
@include foundation-forms;
|
@include foundation-forms;
|
||||||
@include foundation-visibility-classes;
|
@include foundation-visibility-classes;
|
||||||
@include foundation-float-classes;
|
@include foundation-float-classes;
|
||||||
// @include foundation-accordion;
|
@include foundation-accordion;
|
||||||
// @include foundation-accordion-menu;
|
@include foundation-accordion-menu;
|
||||||
@include foundation-badge;
|
@include foundation-badge;
|
||||||
@include foundation-breadcrumbs;
|
@include foundation-breadcrumbs;
|
||||||
@include foundation-button-group;
|
@include foundation-button-group;
|
||||||
@include foundation-callout;
|
@include foundation-callout;
|
||||||
// @include foundation-close-button;
|
@include foundation-close-button;
|
||||||
// @include foundation-drilldown-menu;
|
@include foundation-drilldown-menu;
|
||||||
@include foundation-dropdown;
|
@include foundation-dropdown;
|
||||||
// @include foundation-dropdown-menu;
|
@include foundation-dropdown-menu;
|
||||||
// @include foundation-flex-video;
|
@include foundation-flex-video;
|
||||||
@include foundation-label;
|
@include foundation-label;
|
||||||
// @include foundation-media-object;
|
@include foundation-media-object;
|
||||||
@include foundation-menu;
|
@include foundation-menu;
|
||||||
// @include foundation-off-canvas;
|
@include foundation-menu-icon;
|
||||||
// @include foundation-orbit;
|
@include foundation-off-canvas;
|
||||||
|
@include foundation-orbit;
|
||||||
@include foundation-pagination;
|
@include foundation-pagination;
|
||||||
@include foundation-progress-bar;
|
@include foundation-progress-bar;
|
||||||
// @include foundation-slider;
|
@include foundation-slider;
|
||||||
// @include foundation-sticky;
|
@include foundation-sticky;
|
||||||
@include foundation-reveal;
|
@include foundation-reveal;
|
||||||
// @include foundation-switch;
|
@include foundation-switch;
|
||||||
// @include foundation-table;
|
@include foundation-table;
|
||||||
// @include foundation-tabs;
|
@include foundation-tabs;
|
||||||
@include foundation-thumbnail;
|
@include foundation-thumbnail;
|
||||||
@include foundation-title-bar;
|
@include foundation-title-bar;
|
||||||
// @include foundation-tooltip;
|
@include foundation-tooltip;
|
||||||
@include foundation-top-bar;
|
@include foundation-top-bar;
|
||||||
|
|
||||||
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
|
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue