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
Split 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. 166
      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. 72
      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

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

@ -83,6 +83,8 @@ $include-html-global-classes: $include-html-classes;
// $total-columns: 12;
// $column-gutter: rem-calc(30);
// $last-child-float: $opposite-direction;
// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -92,8 +94,8 @@ $include-html-global-classes: $include-html-classes;
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
// We use these to define default font weights
// $font-weight-normal: normal !default;
// $font-weight-bold: bold !default;
// $font-weight-normal: normal;
// $font-weight-bold: bold;
// $white : #FFFFFF;
// $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
// $cursor-crosshair-value: crosshair;
// $cursor-default-value: default;
// $cursor-disabled-value: not-allowed;
// $cursor-pointer-value: pointer;
// $cursor-help-value: help;
// $cursor-text-value: text;
@ -213,12 +216,12 @@ $include-html-global-classes: $include-html-classes;
// $h6-font-size: 1rem;
// We use these to control header size reduction on small screens
// $h1-font-reduction: rem-calc(10) !default;
// $h2-font-reduction: rem-calc(10) !default;
// $h3-font-reduction: rem-calc(5) !default;
// $h4-font-reduction: rem-calc(5) !default;
// $h5-font-reduction: 0 !default;
// $h6-font-reduction: 0 !default;
// $h1-font-reduction: rem-calc(10);
// $h2-font-reduction: rem-calc(10);
// $h3-font-reduction: rem-calc(5);
// $h4-font-reduction: rem-calc(5);
// $h5-font-reduction: 0;
// $h6-font-reduction: 0;
// These control how subheaders are styled.
// $subheader-line-height: 1.4;
@ -256,7 +259,7 @@ $include-html-global-classes: $include-html-classes;
// $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none;
// $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
// $hr-border-width: 1px;
@ -362,11 +365,11 @@ $include-html-global-classes: $include-html-classes;
// $alert-close-opacity: 0.3;
// $alert-close-opacity-hover: 0.5;
// $alert-close-padding: 9px 6px 4px;
// $alert-close-background: inherit;
// We use this to control border radius
// $alert-radius: $global-radius;
// We use this to control transition effects
// $alert-transition-speed: 300ms;
// $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
// $block-grid-elements: 12;
// $block-grid-default-spacing: rem-calc(20);
// $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.
// $block-grid-media-queries: true;
@ -444,8 +449,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to control various hover effects.
// $button-function-factor: -20%;
// We use these to control button border and hover styles.
// $button-border-width: 0px;
// We use these to control button border styles.
// $button-border-width: 0;
// $button-border-style: solid;
// $button-bg-color: $primary-color;
// $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;
// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
// $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.
// $button-radius: $global-radius;
@ -564,6 +573,7 @@ $include-html-global-classes: $include-html-classes;
// $dropdown-button-pip-color: $white;
// $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-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
@ -635,6 +645,7 @@ $include-html-global-classes: $include-html-classes;
// $input-disabled-bg: $gainsboro;
// $input-disabled-cursor: $cursor-default-value;
// $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.
// $fieldset-border-style: solid;
@ -671,7 +682,6 @@ $include-html-global-classes: $include-html-classes;
// $input-error-message-font-color-alt: $oil;
// 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-color: $input-focus-border-color;
@ -679,11 +689,11 @@ $include-html-global-classes: $include-html-classes;
// $select-bg-color: $ghost;
// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
// 12. Icon Bar
// - - - - - - - - - - - - - - - - - - - - - - - - -
// We use these to style the icon-bar and items
// $include-html-icon-bar-classes: $include-html-classes;
// $icon-bar-bg: $oil;
// $icon-bar-font-color: $white;
// $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-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
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -798,11 +811,12 @@ $include-html-global-classes: $include-html-classes;
// $include-html-magellan-classes: $include-html-classes;
// $magellan-bg: $white;
// $magellan-padding: 0 !important;
// $magellan-padding: 10px;
// 18. Off-canvas
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Off Canvas Tab Bar Variables
// $include-html-off-canvas-classes: $include-html-classes;
// $tabbar-bg: $oil;
@ -813,8 +827,9 @@ $include-html-global-classes: $include-html-classes;
// $tabbar-middle-padding: 0 rem-calc(10);
// 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-right-section-border: $tabbar-left-section-border;
// Off Canvas Tab Bar Headers
// $tabbar-header-color: $white;
@ -825,7 +840,6 @@ $include-html-global-classes: $include-html-classes;
// Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250);
// $off-canvas-bg: $oil;
// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
// Off Canvas Menu List Variables
// $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-weight: $font-weight-bold;
// $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-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15);
// $off-canvas-link-color: rgba($white, 0.7);
// $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-bottom: $off-canvas-label-border-bottom;
// $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-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-padding: 0;
@ -906,15 +920,15 @@ $include-html-global-classes: $include-html-classes;
// $orbit-slide-number-font-color: $white;
// $orbit-slide-number-padding: rem-calc(5);
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// Hide controls on small
// $orbit-nav-hide-for-small: true;
// $orbit-bullet-hide-for-small: true;
// $orbit-timer-hide-for-small: true;
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// 20. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -972,6 +986,7 @@ $include-html-global-classes: $include-html-classes;
// $panel-header-adjust: true;
// $callout-panel-link-color: $primary-color;
// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
// 22. Pricing Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1002,6 +1017,7 @@ $include-html-global-classes: $include-html-classes;
// $price-money-size: rem-calc(32);
// $price-money-font-family: $body-font-family;
// We use these to control the description styles
// $price-bg: $white;
// $price-desc-color: $monsoon;
@ -1041,7 +1057,6 @@ $include-html-global-classes: $include-html-classes;
// $progress-bar-border-radius: $global-radius;
// We use these to control the margin & padding
// $progress-bar-pad: rem-calc(2);
// $progress-bar-margin-bottom: rem-calc(10);
// 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;
// These variables define the slider bar styles
// These variabels define the slider bar styles
// $range-slider-bar-width: 100%;
// $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-round: $global-rounded;
// $range-slider-bar-bg-color: $ghost;
// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
// Vertical bar styles
// $range-slider-vertical-bar-width: rem-calc(16);
// $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-height: rem-calc(22);
// $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-cursor: pointer;
// $range-slider-disabled-opacity: 0.7;
// $range-slider-disabled-cursor: $cursor-disabled-value;
// 25. Reveal
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1102,8 +1121,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to style the reveal close button
// $reveal-close-font-size: rem-calc(40);
// $reveal-close-top: rem-calc(8);
// $reveal-close-side: rem-calc(11);
// $reveal-close-top: rem-calc(10);
// $reveal-close-side: rem-calc(22);
// $reveal-close-color: $base;
// $reveal-close-weight: $font-weight-bold;
@ -1129,7 +1148,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control list styles.
// $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);
// 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-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
// We use these to control the active item styles
// $sub-nav-active-font-weight: $font-weight-normal;
// $sub-nav-active-bg: $primary-color;
// $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;
// Controlling border styles and background colors for the switch container
// $switch-border-color: scale-color($white, $lightness: -20%);
// $switch-border-style: solid;
// $switch-border-width: 1px;
// $switch-bg: $white;
// Controlling background color for the switch container
// $switch-bg: $gainsboro;
// We use these to control the switch heights for our default classes
// $switch-height-tny: rem-calc(22);
// $switch-height-sml: rem-calc(28);
// $switch-height-med: rem-calc(36);
// $switch-height-lrg: rem-calc(44);
// $switch-bottom-margin: rem-calc(20);
// 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;
// $switch-height-tny: 1.5rem;
// $switch-height-sml: 1.75rem;
// $switch-height-med: 2rem;
// $switch-height-lrg: 2.5rem;
// $switch-bottom-margin: 1.5rem;
// We use these to style the switch-paddle
// $switch-paddle-bg: $white;
// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
// $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-speed: .15s;
// $switch-paddle-transition-ease: ease-out;
// $switch-positive-color: scale-color($success-color, $lightness: 94%);
// $switch-negative-color: $white-smoke;
// Outline Style for tabbing through switches
// $switch-label-outline: 1px dotted $jumbo;
// $switch-active-color: $primary-color;
// 30. Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1285,6 +1288,19 @@ $include-html-global-classes: $include-html-classes;
// $table-head-font-weight: $font-weight-bold;
// $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
// $table-row-padding: rem-calc(9 10);
// $table-row-font-size: rem-calc(14);
@ -1296,6 +1312,7 @@ $include-html-global-classes: $include-html-classes;
// $table-display: table-cell;
// $table-margin-bottom: rem-calc(20);
// 31. Tabs
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1375,16 +1392,6 @@ $include-html-global-classes: $include-html-classes;
// $topbar-title-weight: $font-weight-normal;
// $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
// $topbar-link-color: $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-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: $oil;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: $h5-font-size;
// $topbar-link-dropdown-padding: 20px;
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: 0.75rem;
// $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-text-transform: uppercase;
// $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-link-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
// $topbar-transition-speed: 300ms;
@ -1428,6 +1446,9 @@ $include-html-global-classes: $include-html-classes;
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: $medium-up;
// Top-bar input styles
// $topbar-input-height: rem-calc(28);
// Divider Styles
// $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%);
@ -1435,11 +1456,12 @@ $include-html-global-classes: $include-html-classes;
// Sticky Class
// $topbar-sticky-class: ".sticky";
// $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
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-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;
// 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;
@mixin exports($name) {
// 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-opacity: 0.3 !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;
// We use this to control border radius
@ -85,7 +85,7 @@ $alert-transition-ease: ease-out !default;
@mixin alert-close {
font-size: $alert-close-font-size;
padding: $alert-close-padding;
line-height: 0;
line-height: .9;
position: absolute;
top: $alert-close-top;
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.
// $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.
@mixin block-grid(
$per-row:false,

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

@ -95,7 +95,7 @@ $crumb-slash: "/" !default;
a:focus {
text-decoration: none;
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;
display: block;
}
> button {
width: 100%;
}
&:first-child {
button, .button {
@ -147,6 +150,10 @@ $button-group-border-width: 1px !default;
@if $include-html-button-classes {
.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(); }
&.stack {
@ -183,10 +190,6 @@ $button-group-border-width: 1px !default;
@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 {

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-align: $button-font-align;
-webkit-appearance: none;
-moz-appearance: none;
border-radius:0;
}
@if $display { display: $display; }
@ -134,7 +135,7 @@ $button-disabled-cursor: $cursor-default-value !default;
// We use this mixin to add button color styles
//
// $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
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $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;
#{$default-float}: 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-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-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-sml: rem-calc(7) !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-cursor: $cursor-default-value !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.
$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-size: 1px !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-alt: $white !default;
@ -427,25 +427,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.prefix-radius.row.collapse {
input,
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); }
}
.postfix-radius.row.collapse {
input,
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); }
}
.prefix-round.row.collapse {
input,
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); }
}
.postfix-round.row.collapse {
input,
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); }
}
}
@ -470,6 +474,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
select {
@include form-select;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
&[multiple] {
height: auto;
}
}
/* 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-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-disabled-value: not-allowed !default;
$cursor-pointer-value: pointer !default;
$cursor-help-value: help !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.
meta.foundation-version {
font-family: "/5.5.0/";
font-family: "/5.5.1/";
}
meta.foundation-mq-small {
@ -448,8 +449,7 @@ $cursor-text-value: text !default;
// Hide visually and from screen readers
.hide {
display: none !important;
visibility: hidden;
display: none;
}
// 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.
$icon-bar-disabled-opacity: 0.7 !default;
$icon-bar-disabled-cursor: $cursor-default-value !default;
$icon-bar-disabled-cursor: $cursor-disabled-value !default;
//
// @mixins
@ -200,6 +201,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
.item.disabled {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
pointer-events: none;
>* {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
@ -233,7 +235,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height,
$base-style:true,
$disabled:false) {
$disabled:true) {
@include icon-bar-base();
@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);
@ -324,6 +326,34 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
width: auto;
}
}
}
&.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-disabled-opacity: 0.7 !default;
$range-slider-disabled-cursor: $cursor-disabled-value !default;
//
// @mixins
//
@mixin range-slider-bar-base($vertical: false) {
display: block;
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;
margin: rem-calc(20 0);
-ms-touch-action: none;
@ -63,6 +61,10 @@ $range-slider-disabled-opacity: 0.7 !default;
display: inline-block;
width: $range-slider-vertical-bar-width;
height: $range-slider-vertical-bar-height;
} @else {
display: block;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
}
}
@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 $round == true { @include radius($range-slider-round); }
@if $disabled == true {
cursor: $cursor-default-value;
cursor: $range-slider-disabled-cursor;
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;
$close-reveal-modal-class: "close-reveal-modal" !default;
// Set base z-index
$z-index-base: 1005;
//
// @mixins
//
// We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) {
//position: fixed;
position: absolute; // allows modal background to extend beyond window position
position: fixed;
// position: absolute; // allows modal background to extend beyond window position
top: 0;
bottom: 0;
left: 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;
z-index: if( $include-z-index-value, 1004, auto );
z-index: if( $include-z-index-value, $z-index-base - 1, auto );
display: none;
#{$default-float}: 0;
}
@ -72,8 +75,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
visibility: hidden;
display: none;
position: absolute;
z-index: 1005;
width: 100vw;
z-index: $z-index-base;
width: 100%;
top:0;
border-radius: $border-radius;
#{$default-float}: 0;
@ -169,13 +172,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
@include reveal-modal-base;
@include reveal-modal-style(
$bg:$reveal-modal-bg,
$padding:$reveal-modal-padding,
$padding:$reveal-modal-padding * 1.5,
$border:true,
$box-shadow:true,
$radius:false,
$top-offset:$reveal-position-top
);
@include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
&.radius { @include reveal-modal-style($radius:true); }
&.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%); }
&.xlarge { @include reveal-modal-base(false, 95%); }
&.full {
@include reveal-modal-base(false, 100vw);
@include reveal-modal-base(false, 100%);
top:0;
left:0;
height:100%;
@ -196,28 +198,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
margin-left: 0 !important;
}
.#{$close-reveal-modal-class} { @include reveal-close; }
}
dialog {
@extend .#{$reveal-modal-class};
display: none;
&::backdrop, & + .backdrop {
@include reveal-bg(false);
}
&[open]{
display: block;
}
// Modals pushed to back
&.toback {
z-index: $z-index-base - 2;
}
// Reveal Print Styles: It should be invisible, adds no value being printed.
@media print {
dialog, .#{$reveal-modal-class} {
display: none;
background: $white !important;
}
.#{$close-reveal-modal-class} { @include reveal-close; }
}
}
}

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); }
&.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;
width: auto;
overflow: hidden;
margin: $sub-nav-list-margin;
margin-bottom: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top;
dt {
@ -72,7 +72,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
dd,
li {
float: $default-float;
display: inline;
margin-#{$default-float}: rem-calc(16);
margin-bottom: 0;
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;
float: $default-float;
> a {
outline: none;
display: block;
background: {
color: $tabs-navigation-bg-color;
@ -51,6 +50,9 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
color: $tabs-navigation-hover-bg-color;
}
}
&:focus{
outline: none;
}
}
&.active a {
background: {

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

@ -3,6 +3,8 @@
// Licensed under MIT Open Source
// toolbar styles
@import "global";
.toolbar {
background: $oil;
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-link-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
$topbar-transition-speed: 300ms !default;
@ -200,6 +201,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
height: $topbar-height;
margin: 0;
font-size: $rem-base;
// @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
h1, h2, h3, h4, p, span {
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
.toggle-topbar {
position: absolute;
#{$opposite-direction}: 0;
#{$topbar-menu-icon-position}: 0;
top: 0;
a {
@ -460,7 +462,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.toggle-topbar { display: none; }
.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,
.button,
@ -630,7 +637,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-form {
background: $topbar-link-bg;
padding: 0 ($topbar-height / 3);
padding: 0 $topbar-link-padding;
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
$header-font-family: $body-font-family !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-line-height: 1.4 !default;
$header-top-margin: .2rem !default;
@ -460,66 +460,5 @@ $align-class-breakpoints:
h5 { font-size: $h5-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; }
}
}
}
}

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

@ -266,7 +266,7 @@ $visibility-breakpoint-queries:
display: table-row-group !important;
}
#{$visibility-table-row-list} {
display: table-row !important;
display: table-row;
}
#{$visibility-table-cell-list} {
display: table-cell !important;
@ -390,9 +390,22 @@ $visibility-breakpoint-queries:
th.hide-for-touch { display: table-cell !important; }
.touch th.show-for-touch { display: table-cell !important; }
/* Print visibility */
// 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; }
@ -403,6 +416,59 @@ $visibility-breakpoint-queries:
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;
}
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; }
}
}
/* 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}}
<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="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900">
<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 --}}
<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"}}">

4
package.json
Unescape View File

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

3
tag.hbs
Unescape View File

@ -8,7 +8,7 @@
</a>
<i class="fa fa-bars js-bg-check js-main-menu-open right"></i>
</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">
{{#if @blog.logo}}
<div class="post-logo-container">
@ -29,5 +29,4 @@
</div>
{{! The tag below includes the post loop - partials/loop.hbs }}
{{> "loop"}}
</main>
Write Preview
Loading…
Cancel
Save