playground
/
abc
mirror of https://github.com/juliancwirko/abc.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

tag page covers

pull/3/head
Julian Ćwirko 10 years ago
parent
92fadfa171
commit
0eee9f1934
26 changed files with 311 additions and 223 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      assets/css/style.css
  2. 8
      assets/js/vendor/foundation.min.js
  3. 174
      assets/scss/_foundation-settings.scss
  4. 2
      assets/scss/foundation/_functions.scss
  5. 4
      assets/scss/foundation/components/_alert-boxes.scss
  6. 1
      assets/scss/foundation/components/_block-grid.scss
  7. 2
      assets/scss/foundation/components/_breadcrumbs.scss
  8. 11
      assets/scss/foundation/components/_button-groups.scss
  9. 3
      assets/scss/foundation/components/_buttons.scss
  10. 11
      assets/scss/foundation/components/_clearing.scss
  11. 1
      assets/scss/foundation/components/_dropdown-buttons.scss
  12. 19
      assets/scss/foundation/components/_forms.scss
  13. 6
      assets/scss/foundation/components/_global.scss
  14. 34
      assets/scss/foundation/components/_icon-bar.scss
  15. 10
      assets/scss/foundation/components/_range-slider.scss
  16. 42
      assets/scss/foundation/components/_reveal.scss
  17. 12
      assets/scss/foundation/components/_split-buttons.scss
  18. 3
      assets/scss/foundation/components/_sub-nav.scss
  19. 4
      assets/scss/foundation/components/_tabs.scss
  20. 2
      assets/scss/foundation/components/_toolbar.scss
  21. 13
      assets/scss/foundation/components/_top-bar.scss
  22. 63
      assets/scss/foundation/components/_type.scss
  23. 90
      assets/scss/foundation/components/_visibility.scss
  24. 4
      default.hbs
  25. 4
      package.json
  26. 3
      tag.hbs

2
assets/css/style.css
View File

File diff suppressed because one or more lines are too long

8
assets/js/vendor/foundation.min.js vendored
View File

File diff suppressed because one or more lines are too long

174
assets/scss/_foundation-settings.scss
Unescape View File

@ -83,6 +83,8 @@ $include-html-global-classes: $include-html-classes;
// $total-columns: 12; // $total-columns: 12;
// $column-gutter: rem-calc(30); // $column-gutter: rem-calc(30);
// $last-child-float: $opposite-direction;
// c. Global // c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -92,8 +94,8 @@ $include-html-global-classes: $include-html-classes;
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
// We use these to define default font weights // We use these to define default font weights
// $font-weight-normal: normal !default; // $font-weight-normal: normal;
// $font-weight-bold: bold !default; // $font-weight-bold: bold;
// $white : #FFFFFF; // $white : #FFFFFF;
// $ghost : #FAFAFA; // $ghost : #FAFAFA;
@ -185,6 +187,7 @@ $include-html-global-classes: $include-html-classes;
// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
// $cursor-crosshair-value: crosshair; // $cursor-crosshair-value: crosshair;
// $cursor-default-value: default; // $cursor-default-value: default;
// $cursor-disabled-value: not-allowed;
// $cursor-pointer-value: pointer; // $cursor-pointer-value: pointer;
// $cursor-help-value: help; // $cursor-help-value: help;
// $cursor-text-value: text; // $cursor-text-value: text;
@ -213,12 +216,12 @@ $include-html-global-classes: $include-html-classes;
// $h6-font-size: 1rem; // $h6-font-size: 1rem;
// We use these to control header size reduction on small screens // We use these to control header size reduction on small screens
// $h1-font-reduction: rem-calc(10) !default; // $h1-font-reduction: rem-calc(10);
// $h2-font-reduction: rem-calc(10) !default; // $h2-font-reduction: rem-calc(10);
// $h3-font-reduction: rem-calc(5) !default; // $h3-font-reduction: rem-calc(5);
// $h4-font-reduction: rem-calc(5) !default; // $h4-font-reduction: rem-calc(5);
// $h5-font-reduction: 0 !default; // $h5-font-reduction: 0;
// $h6-font-reduction: 0 !default; // $h6-font-reduction: 0;
// These control how subheaders are styled. // These control how subheaders are styled.
// $subheader-line-height: 1.4; // $subheader-line-height: 1.4;
@ -256,7 +259,7 @@ $include-html-global-classes: $include-html-classes;
// $anchor-text-decoration: none; // $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none; // $anchor-text-decoration-hover: none;
// $anchor-font-color: $primary-color; // $anchor-font-color: $primary-color;
// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%); // $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
// We use these to style the <hr> element // We use these to style the <hr> element
// $hr-border-width: 1px; // $hr-border-width: 1px;
@ -362,11 +365,11 @@ $include-html-global-classes: $include-html-classes;
// $alert-close-opacity: 0.3; // $alert-close-opacity: 0.3;
// $alert-close-opacity-hover: 0.5; // $alert-close-opacity-hover: 0.5;
// $alert-close-padding: 9px 6px 4px; // $alert-close-padding: 9px 6px 4px;
// $alert-close-background: inherit;
// We use this to control border radius // We use this to control border radius
// $alert-radius: $global-radius; // $alert-radius: $global-radius;
// We use this to control transition effects
// $alert-transition-speed: 300ms; // $alert-transition-speed: 300ms;
// $alert-transition-ease: ease-out; // $alert-transition-ease: ease-out;
@ -379,7 +382,9 @@ $include-html-global-classes: $include-html-classes;
// We use this to control the maximum number of block grid elements per row // We use this to control the maximum number of block grid elements per row
// $block-grid-elements: 12; // $block-grid-elements: 12;
// $block-grid-default-spacing: rem-calc(20); // $block-grid-default-spacing: rem-calc(20);
// $align-block-grid-to-grid: false; // $align-block-grid-to-grid: false;
// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
// Enables media queries for block-grid classes. Set to false if writing semantic HTML. // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
// $block-grid-media-queries: true; // $block-grid-media-queries: true;
@ -444,8 +449,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to control various hover effects. // We use these to control various hover effects.
// $button-function-factor: -20%; // $button-function-factor: -20%;
// We use these to control button border and hover styles. // We use these to control button border styles.
// $button-border-width: 0px; // $button-border-width: 0;
// $button-border-style: solid; // $button-border-style: solid;
// $button-bg-color: $primary-color; // $button-bg-color: $primary-color;
// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
@ -456,6 +461,10 @@ $include-html-global-classes: $include-html-classes;
// $success-button-border-color: $success-button-bg-hover; // $success-button-border-color: $success-button-bg-hover;
// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
// $alert-button-border-color: $alert-button-bg-hover; // $alert-button-border-color: $alert-button-bg-hover;
// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
// $warning-button-border-color: $warning-button-bg-hover;
// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
// $info-button-border-color: $info-button-bg-hover;
// We use this to set the default radius used throughout the core. // We use this to set the default radius used throughout the core.
// $button-radius: $global-radius; // $button-radius: $global-radius;
@ -564,6 +573,7 @@ $include-html-global-classes: $include-html-classes;
// $dropdown-button-pip-color: $white; // $dropdown-button-pip-color: $white;
// $dropdown-button-pip-color-alt: $oil; // $dropdown-button-pip-color-alt: $oil;
// We use these to set the size of the pip in dropdown buttons
// $button-pip-tny: rem-calc(6); // $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7); // $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9); // $button-pip-med: rem-calc(9);
@ -635,6 +645,7 @@ $include-html-global-classes: $include-html-classes;
// $input-disabled-bg: $gainsboro; // $input-disabled-bg: $gainsboro;
// $input-disabled-cursor: $cursor-default-value; // $input-disabled-cursor: $cursor-default-value;
// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
// $input-include-glowing-effect: true;
// We use these to style the fieldset border and spacing. // We use these to style the fieldset border and spacing.
// $fieldset-border-style: solid; // $fieldset-border-style: solid;
@ -671,7 +682,6 @@ $include-html-global-classes: $include-html-classes;
// $input-error-message-font-color-alt: $oil; // $input-error-message-font-color-alt: $oil;
// We use this to style the glowing effect of inputs when focused // We use this to style the glowing effect of inputs when focused
// $input-include-glowing-effect: true;
// $glowing-effect-fade-time: 0.45s; // $glowing-effect-fade-time: 0.45s;
// $glowing-effect-color: $input-focus-border-color; // $glowing-effect-color: $input-focus-border-color;
@ -679,11 +689,11 @@ $include-html-global-classes: $include-html-classes;
// $select-bg-color: $ghost; // $select-bg-color: $ghost;
// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
// 12. Icon Bar // 12. Icon Bar
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
// We use these to style the icon-bar and items // We use these to style the icon-bar and items
// $include-html-icon-bar-classes: $include-html-classes;
// $icon-bar-bg: $oil; // $icon-bar-bg: $oil;
// $icon-bar-font-color: $white; // $icon-bar-font-color: $white;
// $icon-bar-font-color-hover: $icon-bar-font-color; // $icon-bar-font-color-hover: $icon-bar-font-color;
@ -697,6 +707,9 @@ $include-html-global-classes: $include-html-classes;
// $icon-bar-active-color: $primary-color; // $icon-bar-active-color: $primary-color;
// $icon-bar-item-padding: 1.25rem; // $icon-bar-item-padding: 1.25rem;
// We use this to set default opacity and cursor for disabled icons.
// $icon-bar-disabled-opacity: 0.7;
// 13. Inline Lists // 13. Inline Lists
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -798,11 +811,12 @@ $include-html-global-classes: $include-html-classes;
// $include-html-magellan-classes: $include-html-classes; // $include-html-magellan-classes: $include-html-classes;
// $magellan-bg: $white; // $magellan-bg: $white;
// $magellan-padding: 0 !important; // $magellan-padding: 10px;
// 18. Off-canvas // 18. Off-canvas
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
// Off Canvas Tab Bar Variables
// $include-html-off-canvas-classes: $include-html-classes; // $include-html-off-canvas-classes: $include-html-classes;
// $tabbar-bg: $oil; // $tabbar-bg: $oil;
@ -813,8 +827,9 @@ $include-html-global-classes: $include-html-classes;
// $tabbar-middle-padding: 0 rem-calc(10); // $tabbar-middle-padding: 0 rem-calc(10);
// Off Canvas Divider Styles // Off Canvas Divider Styles
// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
// $tabbar-right-section-border: $tabbar-left-section-border;
// Off Canvas Tab Bar Headers // Off Canvas Tab Bar Headers
// $tabbar-header-color: $white; // $tabbar-header-color: $white;
@ -825,7 +840,6 @@ $include-html-global-classes: $include-html-classes;
// Off Canvas Menu Variables // Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250); // $off-canvas-width: rem-calc(250);
// $off-canvas-bg: $oil; // $off-canvas-bg: $oil;
// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
// Off Canvas Menu List Variables // Off Canvas Menu List Variables
// $off-canvas-label-padding: 0.3rem rem-calc(15); // $off-canvas-label-padding: 0.3rem rem-calc(15);
@ -834,13 +848,13 @@ $include-html-global-classes: $include-html-classes;
// $off-canvas-label-font-size: rem-calc(12); // $off-canvas-label-font-size: rem-calc(12);
// $off-canvas-label-font-weight: $font-weight-bold; // $off-canvas-label-font-weight: $font-weight-bold;
// $off-canvas-label-bg: $tuatara; // $off-canvas-label-bg: $tuatara;
// $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%); // $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
// $off-canvas-label-border-bottom: none; // $off-canvas-label-border-bottom: none;
// $off-canvas-label-margin:0; // $off-canvas-label-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15); // $off-canvas-link-padding: rem-calc(10, 15);
// $off-canvas-link-color: rgba($white, 0.7); // $off-canvas-link-color: rgba($white, 0.7);
// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
// $off-canvas-back-bg: $tuatara; // $off-canvas-back-bg: #444;
// $off-canvas-back-border-top: $off-canvas-label-border-top; // $off-canvas-back-border-top: $off-canvas-label-border-top;
// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
@ -852,7 +866,7 @@ $include-html-global-classes: $include-html-classes;
// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
// $tabbar-menu-icon-text-indent: rem-calc(35); // $tabbar-menu-icon-text-indent: rem-calc(35);
// $tabbar-menu-icon-width: $tabbar-height; // $tabbar-menu-icon-width: $tabbar-icon-width;
// $tabbar-menu-icon-height: $tabbar-height; // $tabbar-menu-icon-height: $tabbar-height;
// $tabbar-menu-icon-padding: 0; // $tabbar-menu-icon-padding: 0;
@ -906,15 +920,15 @@ $include-html-global-classes: $include-html-classes;
// $orbit-slide-number-font-color: $white; // $orbit-slide-number-font-color: $white;
// $orbit-slide-number-padding: rem-calc(5); // $orbit-slide-number-padding: rem-calc(5);
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// Hide controls on small // Hide controls on small
// $orbit-nav-hide-for-small: true; // $orbit-nav-hide-for-small: true;
// $orbit-bullet-hide-for-small: true; // $orbit-bullet-hide-for-small: true;
// $orbit-timer-hide-for-small: true; // $orbit-timer-hide-for-small: true;
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// 20. Pagination // 20. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -972,6 +986,7 @@ $include-html-global-classes: $include-html-classes;
// $panel-header-adjust: true; // $panel-header-adjust: true;
// $callout-panel-link-color: $primary-color; // $callout-panel-link-color: $primary-color;
// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
// 22. Pricing Tables // 22. Pricing Tables
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1002,6 +1017,7 @@ $include-html-global-classes: $include-html-classes;
// $price-money-size: rem-calc(32); // $price-money-size: rem-calc(32);
// $price-money-font-family: $body-font-family; // $price-money-font-family: $body-font-family;
// We use these to control the description styles // We use these to control the description styles
// $price-bg: $white; // $price-bg: $white;
// $price-desc-color: $monsoon; // $price-desc-color: $monsoon;
@ -1032,7 +1048,7 @@ $include-html-global-classes: $include-html-classes;
// We use this to set the progress bar height // We use this to set the progress bar height
// $progress-bar-height: rem-calc(25); // $progress-bar-height: rem-calc(25);
// $progress-bar-color: $vapor ; // $progress-bar-color: $vapor;
// We use these to control the border styles // We use these to control the border styles
// $progress-bar-border-color: scale-color($white, $lightness: 20%); // $progress-bar-border-color: scale-color($white, $lightness: 20%);
@ -1041,7 +1057,6 @@ $include-html-global-classes: $include-html-classes;
// $progress-bar-border-radius: $global-radius; // $progress-bar-border-radius: $global-radius;
// We use these to control the margin & padding // We use these to control the margin & padding
// $progress-bar-pad: rem-calc(2);
// $progress-bar-margin-bottom: rem-calc(10); // $progress-bar-margin-bottom: rem-calc(10);
// We use these to set the meter colors // We use these to set the meter colors
@ -1055,7 +1070,7 @@ $include-html-global-classes: $include-html-classes;
// $include-html-range-slider-classes: $include-html-classes; // $include-html-range-slider-classes: $include-html-classes;
// These variables define the slider bar styles // These variabels define the slider bar styles
// $range-slider-bar-width: 100%; // $range-slider-bar-width: 100%;
// $range-slider-bar-height: rem-calc(16); // $range-slider-bar-height: rem-calc(16);
@ -1065,12 +1080,13 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-radius: $global-radius; // $range-slider-radius: $global-radius;
// $range-slider-round: $global-rounded; // $range-slider-round: $global-rounded;
// $range-slider-bar-bg-color: $ghost; // $range-slider-bar-bg-color: $ghost;
// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
// Vertical bar styles // Vertical bar styles
// $range-slider-vertical-bar-width: rem-calc(16); // $range-slider-vertical-bar-width: rem-calc(16);
// $range-slider-vertical-bar-height: rem-calc(200); // $range-slider-vertical-bar-height: rem-calc(200);
// These variables define the slider handle styles // These variabels define the slider handle styles
// $range-slider-handle-width: rem-calc(32); // $range-slider-handle-width: rem-calc(32);
// $range-slider-handle-height: rem-calc(22); // $range-slider-handle-height: rem-calc(22);
// $range-slider-handle-position-top: rem-calc(-5); // $range-slider-handle-position-top: rem-calc(-5);
@ -1083,6 +1099,9 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
// $range-slider-handle-cursor: pointer; // $range-slider-handle-cursor: pointer;
// $range-slider-disabled-opacity: 0.7;
// $range-slider-disabled-cursor: $cursor-disabled-value;
// 25. Reveal // 25. Reveal
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1102,8 +1121,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to style the reveal close button // We use these to style the reveal close button
// $reveal-close-font-size: rem-calc(40); // $reveal-close-font-size: rem-calc(40);
// $reveal-close-top: rem-calc(8); // $reveal-close-top: rem-calc(10);
// $reveal-close-side: rem-calc(11); // $reveal-close-side: rem-calc(22);
// $reveal-close-color: $base; // $reveal-close-color: $base;
// $reveal-close-weight: $font-weight-bold; // $reveal-close-weight: $font-weight-bold;
@ -1129,7 +1148,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control list styles. // We use these to control list styles.
// $side-nav-list-type: none; // $side-nav-list-type: none;
// $side-nav-list-position: inside; // $side-nav-list-position: outside;
// $side-nav-list-margin: rem-calc(0 0 7 0); // $side-nav-list-margin: rem-calc(0 0 7 0);
// We use these to control link styles. // We use these to control link styles.
@ -1214,7 +1233,9 @@ $include-html-global-classes: $include-html-classes;
// $sub-nav-border-radius: 3px; // $sub-nav-border-radius: 3px;
// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
// We use these to control the active item styles // We use these to control the active item styles
// $sub-nav-active-font-weight: $font-weight-normal; // $sub-nav-active-font-weight: $font-weight-normal;
// $sub-nav-active-bg: $primary-color; // $sub-nav-active-bg: $primary-color;
// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
@ -1230,39 +1251,21 @@ $include-html-global-classes: $include-html-classes;
// $include-html-form-classes: $include-html-classes; // $include-html-form-classes: $include-html-classes;
// Controlling border styles and background colors for the switch container // Controlling background color for the switch container
// $switch-border-color: scale-color($white, $lightness: -20%); // $switch-bg: $gainsboro;
// $switch-border-style: solid;
// $switch-border-width: 1px;
// $switch-bg: $white;
// We use these to control the switch heights for our default classes // We use these to control the switch heights for our default classes
// $switch-height-tny: rem-calc(22); // $switch-height-tny: 1.5rem;
// $switch-height-sml: rem-calc(28); // $switch-height-sml: 1.75rem;
// $switch-height-med: rem-calc(36); // $switch-height-med: 2rem;
// $switch-height-lrg: rem-calc(44); // $switch-height-lrg: 2.5rem;
// $switch-bottom-margin: rem-calc(20); // $switch-bottom-margin: 1.5rem;
// We use these to control default font sizes for our classes.
// $switch-font-size-tny: 11px;
// $switch-font-size-sml: 12px;
// $switch-font-size-med: 14px;
// $switch-font-size-lrg: 17px;
// $switch-label-side-padding: 6px;
// We use these to style the switch-paddle // We use these to style the switch-paddle
// $switch-paddle-bg: $white; // $switch-paddle-bg: $white;
// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%); // $switch-paddle-transition-speed: .15s;
// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
// $switch-paddle-border-width: 1px;
// $switch-paddle-border-style: solid;
// $switch-paddle-transition-speed: .1s;
// $switch-paddle-transition-ease: ease-out; // $switch-paddle-transition-ease: ease-out;
// $switch-positive-color: scale-color($success-color, $lightness: 94%); // $switch-active-color: $primary-color;
// $switch-negative-color: $white-smoke;
// Outline Style for tabbing through switches
// $switch-label-outline: 1px dotted $jumbo;
// 30. Tables // 30. Tables
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1279,12 +1282,25 @@ $include-html-global-classes: $include-html-classes;
// $table-border-color: $gainsboro; // $table-border-color: $gainsboro;
// These control the table head styles // These control the table head styles
// $table-head-bg: $white-smoke ; // $table-head-bg: $white-smoke;
// $table-head-font-size: rem-calc(14); // $table-head-font-size: rem-calc(14);
// $table-head-font-color: $jet; // $table-head-font-color: $jet;
// $table-head-font-weight: $font-weight-bold; // $table-head-font-weight: $font-weight-bold;
// $table-head-padding: rem-calc(8 10 10); // $table-head-padding: rem-calc(8 10 10);
// These control the table foot styles
// $table-foot-bg: $table-head-bg;
// $table-foot-font-size: $table-head-font-size;
// $table-foot-font-color: $table-head-font-color;
// $table-foot-font-weight: $table-head-font-weight;
// $table-foot-padding: $table-head-padding;
// These control the caption
// table-caption-bg: transparent;
// $table-caption-font-color: $table-head-font-color;
// $table-caption-font-size: rem-calc(16);
// $table-caption-font-weight: bold;
// These control the row padding and font styles // These control the row padding and font styles
// $table-row-padding: rem-calc(9 10); // $table-row-padding: rem-calc(9 10);
// $table-row-font-size: rem-calc(14); // $table-row-font-size: rem-calc(14);
@ -1296,13 +1312,14 @@ $include-html-global-classes: $include-html-classes;
// $table-display: table-cell; // $table-display: table-cell;
// $table-margin-bottom: rem-calc(20); // $table-margin-bottom: rem-calc(20);
// 31. Tabs // 31. Tabs
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-tabs-classes: $include-html-classes; // $include-html-tabs-classes: $include-html-classes;
// $tabs-navigation-padding: rem-calc(16); // $tabs-navigation-padding: rem-calc(16);
// $tabs-navigation-bg-color: $silver ; // $tabs-navigation-bg-color: $silver;
// $tabs-navigation-active-bg-color: $white; // $tabs-navigation-active-bg-color: $white;
// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
// $tabs-navigation-font-color: $jet; // $tabs-navigation-font-color: $jet;
@ -1375,16 +1392,6 @@ $include-html-global-classes: $include-html-classes;
// $topbar-title-weight: $font-weight-normal; // $topbar-title-weight: $font-weight-normal;
// $topbar-title-font-size: rem-calc(17); // $topbar-title-font-size: rem-calc(17);
// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $oil;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// Set the link colors and styles for top-level nav // Set the link colors and styles for top-level nav
// $topbar-link-color: $white; // $topbar-link-color: $white;
// $topbar-link-color-hover: $white; // $topbar-link-color-hover: $white;
@ -1394,19 +1401,29 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-font-size: rem-calc(13); // $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10% // $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg; // $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: $oil; // $topbar-link-bg-hover: $oil;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color; // $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family; // $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none; // $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3); // $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: $h5-font-size; // $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: 20px; // $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: 0.75rem; // $topbar-button-font-size: 0.75rem;
// $topbar-button-top: 7px; // $topbar-button-top: 7px;
// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $oil;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// $topbar-dropdown-label-color: $monsoon; // $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase; // $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold; // $topbar-dropdown-label-font-weight: $font-weight-bold;
@ -1421,6 +1438,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-menu-icon-color: $white; // $topbar-menu-icon-color: $white;
// $topbar-menu-link-color-toggled: $jumbo; // $topbar-menu-link-color-toggled: $jumbo;
// $topbar-menu-icon-color-toggled: $jumbo; // $topbar-menu-icon-color-toggled: $jumbo;
// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
// Transitions and breakpoint styles // Transitions and breakpoint styles
// $topbar-transition-speed: 300ms; // $topbar-transition-speed: 300ms;
@ -1428,18 +1446,22 @@ $include-html-global-classes: $include-html-classes;
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: $medium-up; // $topbar-media-query: $medium-up;
// Top-bar input styles
// $topbar-input-height: rem-calc(28);
// Divider Styles // Divider Styles
// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); // $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); // $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
// Sticky Class // Sticky Class
// $topbar-sticky-class: ".sticky"; // $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
// 36. Visibility Classes // 36. Visibility Classes
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes; // $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true; // $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true; // $include-legacy-visibility-classes: true;
// $include-accessibility-classes: true;

2
assets/scss/foundation/_functions.scss
Unescape View File

@ -6,7 +6,7 @@
$rem-base: 16px !default; $rem-base: 16px !default;
// IMPORT ONCE // IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. // We use this to prevent styles from being loaded multiple times for components that rely on other components.
$modules: () !default; $modules: () !default;
@mixin exports($name) { @mixin exports($name) {
// Import from global scope // Import from global scope

4
assets/scss/foundation/components/_alert-boxes.scss
Unescape View File

@ -37,7 +37,7 @@ $alert-close-position: rem-calc(4) !default;
$alert-close-font-size: rem-calc(22) !default; $alert-close-font-size: rem-calc(22) !default;
$alert-close-opacity: 0.3 !default; $alert-close-opacity: 0.3 !default;
$alert-close-opacity-hover: 0.5 !default; $alert-close-opacity-hover: 0.5 !default;
$alert-close-padding: 9px 6px 4px !default; $alert-close-padding: 0 6px 4px !default;
$alert-close-background: inherit !default; $alert-close-background: inherit !default;
// We use this to control border radius // We use this to control border radius
@ -85,7 +85,7 @@ $alert-transition-ease: ease-out !default;
@mixin alert-close { @mixin alert-close {
font-size: $alert-close-font-size; font-size: $alert-close-font-size;
padding: $alert-close-padding; padding: $alert-close-padding;
line-height: 0; line-height: .9;
position: absolute; position: absolute;
top: $alert-close-top; top: $alert-close-top;
margin-top: -($alert-close-font-size / 2); margin-top: -($alert-close-font-size / 2);

1
assets/scss/foundation/components/_block-grid.scss
Unescape View File

@ -30,6 +30,7 @@ $block-grid-media-queries: true !default;
// //
// $per-row - # of items to display per row. Default: false. // $per-row - # of items to display per row. Default: false.
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20). // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
// $include-spacing - Adds padding to our list item. Default: true.
// $base-style - Apply a base style to block grid. Default: true. // $base-style - Apply a base style to block grid. Default: true.
@mixin block-grid( @mixin block-grid(
$per-row:false, $per-row:false,

2
assets/scss/foundation/components/_breadcrumbs.scss
Unescape View File

@ -95,7 +95,7 @@ $crumb-slash: "/" !default;
a:focus { a:focus {
text-decoration: none; text-decoration: none;
color: $crumb-font-color-unavailable; color: $crumb-font-color-unavailable;
cursor: $cursor-default-value; cursor: $cursor-disabled-value;
} }
} }

11
assets/scss/foundation/components/_button-groups.scss
Unescape View File

@ -70,6 +70,9 @@ $button-group-border-width: 1px !default;
margin:0; margin:0;
display: block; display: block;
} }
> button {
width: 100%;
}
&:first-child { &:first-child {
button, .button { button, .button {
@ -147,6 +150,10 @@ $button-group-border-width: 1px !default;
@if $include-html-button-classes { @if $include-html-button-classes {
.button-group { @include button-group-container; .button-group { @include button-group-container;
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
}
& > li { @include button-group-style(); } & > li { @include button-group-style(); }
&.stack { &.stack {
@ -183,10 +190,6 @@ $button-group-border-width: 1px !default;
@include button-group-style($radius:$button-med, $orientation:vertical); @include button-group-style($radius:$button-med, $orientation:vertical);
} }
} }
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
}
} }
.button-bar { .button-bar {

3
assets/scss/foundation/components/_buttons.scss
Unescape View File

@ -80,6 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
text-decoration: none; text-decoration: none;
text-align: $button-font-align; text-align: $button-font-align;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none;
border-radius:0; border-radius:0;
} }
@if $display { display: $display; } @if $display { display: $display; }
@ -134,7 +135,7 @@ $button-disabled-cursor: $cursor-default-value !default;
// We use this mixin to add button color styles // We use this mixin to add button color styles
// //
// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color. // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true // $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $border-color - Button Border Color. Default: $button-border-color // $border-color - Button Border Color. Default: $button-border-color

11
assets/scss/foundation/components/_clearing.scss
Unescape View File

@ -93,7 +93,16 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
position: absolute; position: absolute;
#{$default-float}: 50%; #{$default-float}: 50%;
top: 50%; top: 50%;
margin-#{$default-float}: -50%; @if $default-float == left {
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}
@else {
transform: translateY(-50%) translateX(50%);
-webkit-transform: translateY(-50%) translateX(50%);
-ms-transform: translateY(-50%) translateX(50%);
};
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }

1
assets/scss/foundation/components/_dropdown-buttons.scss
Unescape View File

@ -13,6 +13,7 @@ $include-html-button-classes: $include-html-classes !default;
$dropdown-button-pip-color: $white !default; $dropdown-button-pip-color: $white !default;
$dropdown-button-pip-color-alt: $oil !default; $dropdown-button-pip-color-alt: $oil !default;
// We use these to set the size of the pip in dropdown buttons
$button-pip-tny: rem-calc(6) !default; $button-pip-tny: rem-calc(6) !default;
$button-pip-sml: rem-calc(7) !default; $button-pip-sml: rem-calc(7) !default;
$button-pip-med: rem-calc(9) !default; $button-pip-med: rem-calc(9) !default;

19
assets/scss/foundation/components/_forms.scss
Unescape View File

@ -34,7 +34,7 @@ $input-border-radius: $global-radius !default;
$input-disabled-bg: $gainsboro !default; $input-disabled-bg: $gainsboro !default;
$input-disabled-cursor: $cursor-default-value !default; $input-disabled-cursor: $cursor-default-value !default;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default; $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
$input-include-glowing-effect: true !default; $input-include-glowing-effect: false !default;
// We use these to style the fieldset border and spacing. // We use these to style the fieldset border and spacing.
$fieldset-border-style: solid !default; $fieldset-border-style: solid !default;
@ -53,7 +53,7 @@ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
$input-prefix-border-color: scale-color($white, $lightness: -20%) !default; $input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
$input-prefix-border-size: 1px !default; $input-prefix-border-size: 1px !default;
$input-prefix-border-type: solid !default; $input-prefix-border-type: solid !default;
$input-prefix-overflow: hidden !default; $input-prefix-overflow: visible !default;
$input-prefix-font-color: $oil !default; $input-prefix-font-color: $oil !default;
$input-prefix-font-color-alt: $white !default; $input-prefix-font-color-alt: $white !default;
@ -427,25 +427,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.prefix-radius.row.collapse { .prefix-radius.row.collapse {
input, input,
textarea, textarea,
select { @include radius(0); @include side-radius($opposite-direction, $button-radius); } select,
button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
.prefix { @include radius(0); @include side-radius($default-float, $button-radius); } .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
} }
.postfix-radius.row.collapse { .postfix-radius.row.collapse {
input, input,
textarea, textarea,
select { @include radius(0); @include side-radius($default-float, $button-radius); } select,
button { @include radius(0); @include side-radius($default-float, $button-radius); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); } .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
} }
.prefix-round.row.collapse { .prefix-round.row.collapse {
input, input,
textarea, textarea,
select { @include radius(0); @include side-radius($opposite-direction, $button-round); } select,
button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
.prefix { @include radius(0); @include side-radius($default-float, $button-round); } .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
} }
.postfix-round.row.collapse { .postfix-round.row.collapse {
input, input,
textarea, textarea,
select { @include radius(0); @include side-radius($default-float, $button-round); } select,
button { @include radius(0); @include side-radius($default-float, $button-round); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); } .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
} }
} }
@ -470,6 +474,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
select { select {
@include form-select; @include form-select;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
&[multiple] {
height: auto;
}
} }
/* Adjust margin for form elements below */ /* Adjust margin for form elements below */

6
assets/scss/foundation/components/_global.scss
Unescape View File

@ -333,6 +333,7 @@ $large: $large-up;
$cursor-auto-value: auto !default; $cursor-auto-value: auto !default;
$cursor-crosshair-value: crosshair !default; $cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default; $cursor-default-value: default !default;
$cursor-disabled-value: not-allowed !default;
$cursor-pointer-value: pointer !default; $cursor-pointer-value: pointer !default;
$cursor-help-value: help !default; $cursor-help-value: help !default;
$cursor-text-value: text !default; $cursor-text-value: text !default;
@ -345,7 +346,7 @@ $cursor-text-value: text !default;
// Forward slash placed around everything to convince PhantomJS to read the value. // Forward slash placed around everything to convince PhantomJS to read the value.
meta.foundation-version { meta.foundation-version {
font-family: "/5.5.0/"; font-family: "/5.5.1/";
} }
meta.foundation-mq-small { meta.foundation-mq-small {
@ -448,8 +449,7 @@ $cursor-text-value: text !default;
// Hide visually and from screen readers // Hide visually and from screen readers
.hide { .hide {
display: none !important; display: none;
visibility: hidden;
} }
// Hide visually and from screen readers, but maintain layout // Hide visually and from screen readers, but maintain layout

34
assets/scss/foundation/components/_icon-bar.scss
Unescape View File

@ -28,7 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
// We use this to set default opacity and cursor for disabled icons. // We use this to set default opacity and cursor for disabled icons.
$icon-bar-disabled-opacity: 0.7 !default; $icon-bar-disabled-opacity: 0.7 !default;
$icon-bar-disabled-cursor: $cursor-default-value !default; $icon-bar-disabled-cursor: $cursor-disabled-value !default;
// //
// @mixins // @mixins
@ -200,6 +201,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
.item.disabled { .item.disabled {
opacity: $icon-bar-disabled-opacity; opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor; cursor: $icon-bar-disabled-cursor;
pointer-events: none;
>* { >* {
opacity: $icon-bar-disabled-opacity; opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor; cursor: $icon-bar-disabled-cursor;
@ -233,7 +235,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
$image-width: $icon-bar-image-width, $image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height, $image-height: $icon-bar-image-height,
$base-style:true, $base-style:true,
$disabled:false) { $disabled:true) {
@include icon-bar-base(); @include icon-bar-base();
@include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height); @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
@include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled); @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
@ -325,5 +327,33 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
} }
} }
} }
&.seven-up {
.item { width: 14.28571%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.eight-up {
.item { width: 12.5%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
} }
} }

10
assets/scss/foundation/components/_range-slider.scss
Unescape View File

@ -45,16 +45,14 @@ $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12
$range-slider-handle-cursor: pointer !default; $range-slider-handle-cursor: pointer !default;
$range-slider-disabled-opacity: 0.7 !default; $range-slider-disabled-opacity: 0.7 !default;
$range-slider-disabled-cursor: $cursor-disabled-value !default;
// //
// @mixins // @mixins
// //
@mixin range-slider-bar-base($vertical: false) { @mixin range-slider-bar-base($vertical: false) {
display: block;
position: relative; position: relative;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color; border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
margin: rem-calc(20 0); margin: rem-calc(20 0);
-ms-touch-action: none; -ms-touch-action: none;
@ -63,6 +61,10 @@ $range-slider-disabled-opacity: 0.7 !default;
display: inline-block; display: inline-block;
width: $range-slider-vertical-bar-width; width: $range-slider-vertical-bar-width;
height: $range-slider-vertical-bar-height; height: $range-slider-vertical-bar-height;
} @else {
display: block;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
} }
} }
@mixin range-slider-bar-style( @mixin range-slider-bar-style(
@ -74,7 +76,7 @@ $range-slider-disabled-opacity: 0.7 !default;
@if $radius == true { @include radius($range-slider-radius); } @if $radius == true { @include radius($range-slider-radius); }
@if $round == true { @include radius($range-slider-round); } @if $round == true { @include radius($range-slider-round); }
@if $disabled == true { @if $disabled == true {
cursor: $cursor-default-value; cursor: $range-slider-disabled-cursor;
opacity: $range-slider-disabled-opacity; opacity: $range-slider-disabled-opacity;
} }
} }

42
assets/scss/foundation/components/_reveal.scss
Unescape View File

@ -43,21 +43,24 @@ $reveal-border-color: $steel !default;
$reveal-modal-class: "reveal-modal" !default; $reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default; $close-reveal-modal-class: "close-reveal-modal" !default;
// Set base z-index
$z-index-base: 1005;
// //
// @mixins // @mixins
// //
// We use this to create the reveal background overlay styles // We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) { @mixin reveal-bg( $include-z-index-value: true ) {
//position: fixed; position: fixed;
position: absolute; // allows modal background to extend beyond window position // position: absolute; // allows modal background to extend beyond window position
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
background: $reveal-overlay-bg; background: $reveal-overlay-bg;
z-index: if( $include-z-index-value, 1004, auto ); z-index: if( $include-z-index-value, $z-index-base - 1, auto );
display: none; display: none;
#{$default-float}: 0; #{$default-float}: 0;
} }
@ -72,8 +75,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
visibility: hidden; visibility: hidden;
display: none; display: none;
position: absolute; position: absolute;
z-index: 1005; z-index: $z-index-base;
width: 100vw; width: 100%;
top:0; top:0;
border-radius: $border-radius; border-radius: $border-radius;
#{$default-float}: 0; #{$default-float}: 0;
@ -169,13 +172,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
@include reveal-modal-base; @include reveal-modal-base;
@include reveal-modal-style( @include reveal-modal-style(
$bg:$reveal-modal-bg, $bg:$reveal-modal-bg,
$padding:$reveal-modal-padding, $padding:$reveal-modal-padding * 1.5,
$border:true, $border:true,
$box-shadow:true, $box-shadow:true,
$radius:false, $radius:false,
$top-offset:$reveal-position-top $top-offset:$reveal-position-top
); );
@include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
&.radius { @include reveal-modal-style($radius:true); } &.radius { @include reveal-modal-style($radius:true); }
&.round { @include reveal-modal-style($radius:$reveal-round); } &.round { @include reveal-modal-style($radius:$reveal-round); }
@ -186,7 +188,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
&.large { @include reveal-modal-base(false, 70%); } &.large { @include reveal-modal-base(false, 70%); }
&.xlarge { @include reveal-modal-base(false, 95%); } &.xlarge { @include reveal-modal-base(false, 95%); }
&.full { &.full {
@include reveal-modal-base(false, 100vw); @include reveal-modal-base(false, 100%);
top:0; top:0;
left:0; left:0;
height:100%; height:100%;
@ -196,28 +198,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
margin-left: 0 !important; margin-left: 0 !important;
} }
.#{$close-reveal-modal-class} { @include reveal-close; } // Modals pushed to back
} &.toback {
z-index: $z-index-base - 2;
dialog {
@extend .#{$reveal-modal-class};
display: none;
&::backdrop, & + .backdrop {
@include reveal-bg(false);
}
&[open]{
display: block;
} }
}
// Reveal Print Styles: It should be invisible, adds no value being printed. .#{$close-reveal-modal-class} { @include reveal-close; }
@media print {
dialog, .#{$reveal-modal-class} {
display: none;
background: $white !important;
}
} }
} }
} }

12
assets/scss/foundation/components/_split-buttons.scss
Unescape View File

@ -185,6 +185,18 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&.radius span { @include side-radius($opposite-direction, $global-radius); } &.radius span { @include side-radius($opposite-direction, $global-radius); }
&.round span { @include side-radius($opposite-direction, 1000px); } &.round span { @include side-radius($opposite-direction, 1000px); }
&.no-pip{
span:before{ border-style:none; }
span:after{ border-style:none; }
span>i{
top: 50%;
display: block;
position: absolute;
left: 50%;
margin-left: -0.28889em;
margin-top: -0.48889em;
}
}
} }
} }

3
assets/scss/foundation/components/_sub-nav.scss
Unescape View File

@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
display: block; display: block;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
margin: $sub-nav-list-margin; margin-bottom: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top; padding-top: $sub-nav-list-padding-top;
dt { dt {
@ -72,7 +72,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
dd, dd,
li { li {
float: $default-float; float: $default-float;
display: inline;
margin-#{$default-float}: rem-calc(16); margin-#{$default-float}: rem-calc(16);
margin-bottom: 0; margin-bottom: 0;
font-family: $sub-nav-font-family; font-family: $sub-nav-font-family;

4
assets/scss/foundation/components/_tabs.scss
Unescape View File

@ -37,7 +37,6 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
list-style: none; list-style: none;
float: $default-float; float: $default-float;
> a { > a {
outline: none;
display: block; display: block;
background: { background: {
color: $tabs-navigation-bg-color; color: $tabs-navigation-bg-color;
@ -51,6 +50,9 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
color: $tabs-navigation-hover-bg-color; color: $tabs-navigation-hover-bg-color;
} }
} }
&:focus{
outline: none;
}
} }
&.active a { &.active a {
background: { background: {

2
assets/scss/foundation/components/_toolbar.scss
Unescape View File

@ -3,6 +3,8 @@
// Licensed under MIT Open Source // Licensed under MIT Open Source
// toolbar styles // toolbar styles
@import "global";
.toolbar { .toolbar {
background: $oil; background: $oil;
width: 100%; width: 100%;

13
assets/scss/foundation/components/_top-bar.scss
Unescape View File

@ -70,6 +70,7 @@ $topbar-menu-link-color: $white !default;
$topbar-menu-icon-color: $white !default; $topbar-menu-icon-color: $white !default;
$topbar-menu-link-color-toggled: $jumbo !default; $topbar-menu-link-color-toggled: $jumbo !default;
$topbar-menu-icon-color-toggled: $jumbo !default; $topbar-menu-icon-color-toggled: $jumbo !default;
$topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon
// Transitions and breakpoint styles // Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default; $topbar-transition-speed: 300ms !default;
@ -200,6 +201,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
height: $topbar-height; height: $topbar-height;
margin: 0; margin: 0;
font-size: $rem-base; font-size: $rem-base;
// @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
h1, h2, h3, h4, p, span { h1, h2, h3, h4, p, span {
line-height: $topbar-height; line-height: $topbar-height;
@ -218,7 +220,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Menu toggle button on small devices // Menu toggle button on small devices
.toggle-topbar { .toggle-topbar {
position: absolute; position: absolute;
#{$opposite-direction}: 0; #{$topbar-menu-icon-position}: 0;
top: 0; top: 0;
a { a {
@ -460,7 +462,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.toggle-topbar { display: none; } .toggle-topbar { display: none; }
.title-area { float: $default-float; } .title-area { float: $default-float; }
.name h1 a { width: auto; } .name h1 a,
.name h2 a,
.name h3 a,
.name h4 a,
.name h5 a,
.name h6 a { width: auto; }
input, input,
.button, .button,
@ -630,7 +637,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-form { .has-form {
background: $topbar-link-bg; background: $topbar-link-bg;
padding: 0 ($topbar-height / 3); padding: 0 $topbar-link-padding;
height: $topbar-height; height: $topbar-height;
} }

63
assets/scss/foundation/components/_type.scss
Unescape View File

@ -9,7 +9,7 @@ $include-html-type-classes: $include-html-classes !default;
// We use these to control header font styles // We use these to control header font styles
$header-font-family: $body-font-family !default; $header-font-family: $body-font-family !default;
$header-font-weight: $font-weight-normal !default; $header-font-weight: $font-weight-normal !default;
$header-font-style: $font-weight-normal !default; $header-font-style: normal !default;
$header-font-color: $jet !default; $header-font-color: $jet !default;
$header-line-height: 1.4 !default; $header-line-height: 1.4 !default;
$header-top-margin: .2rem !default; $header-top-margin: .2rem !default;
@ -460,66 +460,5 @@ $align-class-breakpoints:
h5 { font-size: $h5-font-size; } h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; } h6 { font-size: $h6-font-size; }
} }
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
.print-only { display: none !important; }
@media print {
* {
background: transparent !important;
color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
}
} }
} }

90
assets/scss/foundation/components/_visibility.scss
Unescape View File

@ -266,7 +266,7 @@ $visibility-breakpoint-queries:
display: table-row-group !important; display: table-row-group !important;
} }
#{$visibility-table-row-list} { #{$visibility-table-row-list} {
display: table-row !important; display: table-row;
} }
#{$visibility-table-cell-list} { #{$visibility-table-cell-list} {
display: table-cell !important; display: table-cell !important;
@ -390,19 +390,85 @@ $visibility-breakpoint-queries:
th.hide-for-touch { display: table-cell !important; } th.hide-for-touch { display: table-cell !important; }
.touch th.show-for-touch { display: table-cell !important; } .touch th.show-for-touch { display: table-cell !important; }
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
.print-only { display: none !important; }
@media print {
* {
background: transparent !important;
color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
.show-for-print { display: block; }
.hide-for-print { display: none; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
/* Print visibility */ thead { display: table-header-group; /* h5bp.com/t */ }
@media print {
.show-for-print { display: block; }
.hide-for-print { display: none; }
table.show-for-print { display: table !important; } tr,
thead.show-for-print { display: table-header-group !important; } img { page-break-inside: avoid; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
} img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
}
/* Print visibility */
@media print {
.show-for-print { display: block; }
.hide-for-print { display: none; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
}
} }

4
default.hbs
Unescape View File

@ -16,8 +16,8 @@
{{! Styles - Foundation 5 included}} {{! Styles - Foundation 5 included}}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic">
{{!-- styles for syntax highlighter you will find more here: https://github.com/isagalaev/highlight.js/tree/master/src/styles just change .min.css file name below --}} {{!-- styles for syntax highlighter you will find more here: https://github.com/isagalaev/highlight.js/tree/master/src/styles just change .min.css file name below --}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/monokai_sublime.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/monokai_sublime.min.css">
<link rel="stylesheet" href="{{asset "css/style.css"}}"> <link rel="stylesheet" href="{{asset "css/style.css"}}">

4
package.json
Unescape View File

@ -1,8 +1,8 @@
{ {
"name": "Abc", "name": "Abc",
"version": "1.3.0", "version": "1.3.1",
"devDependencies": { "devDependencies": {
"load-grunt-tasks": "~1.0.0", "load-grunt-tasks": "~3.1.0",
"node-sass": "~2.0.0-beta", "node-sass": "~2.0.0-beta",
"grunt-sass": "~0.17.0", "grunt-sass": "~0.17.0",
"grunt": "~0.4.5", "grunt": "~0.4.5",

3
tag.hbs
Unescape View File

@ -8,7 +8,7 @@
</a> </a>
<i class="fa fa-bars js-bg-check js-main-menu-open right"></i> <i class="fa fa-bars js-bg-check js-main-menu-open right"></i>
</nav> </nav>
<header class="main-header js-blog-bg-image {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}"> <header class="main-header js-blog-bg-image {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}no-cover{{/if}}">
<div class="main-header-content"> <div class="main-header-content">
{{#if @blog.logo}} {{#if @blog.logo}}
<div class="post-logo-container"> <div class="post-logo-container">
@ -29,5 +29,4 @@
</div> </div>
{{! The tag below includes the post loop - partials/loop.hbs }} {{! The tag below includes the post loop - partials/loop.hbs }}
{{> "loop"}} {{> "loop"}}
</main> </main>
Write Preview
Loading…
Cancel
Save