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

foundation update

pull/3/head
Julian Ćwirko 10 years ago
parent
62eec96a63
commit
7997175df4
25 changed files with 703 additions and 628 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. 4
      README.md
  2. 875
      assets/css/style.css
  3. 14
      assets/js/vendor/foundation.min.js
  4. 2
      assets/js/vendor/modernizr.js
  5. 30
      assets/scss/_foundation-settings.scss
  6. 66
      assets/scss/foundation/_functions.scss
  7. 2
      assets/scss/foundation/components/_accordion.scss
  8. 2
      assets/scss/foundation/components/_button-groups.scss
  9. 6
      assets/scss/foundation/components/_buttons.scss
  10. 8
      assets/scss/foundation/components/_dropdown-buttons.scss
  11. 35
      assets/scss/foundation/components/_forms.scss
  12. 30
      assets/scss/foundation/components/_global.scss
  13. 22
      assets/scss/foundation/components/_grid.scss
  14. 66
      assets/scss/foundation/components/_icon-bar.scss
  15. 4
      assets/scss/foundation/components/_labels.scss
  16. 14
      assets/scss/foundation/components/_offcanvas.scss
  17. 22
      assets/scss/foundation/components/_orbit.scss
  18. 6
      assets/scss/foundation/components/_panels.scss
  19. 7
      assets/scss/foundation/components/_reveal.scss
  20. 2
      assets/scss/foundation/components/_sub-nav.scss
  21. 24
      assets/scss/foundation/components/_switches.scss
  22. 2
      assets/scss/foundation/components/_tabs.scss
  23. 6
      assets/scss/foundation/components/_toolbar.scss
  24. 80
      assets/scss/foundation/components/_top-bar.scss
  25. 2
      package.json

4
README.md
Unescape View File

@ -30,6 +30,10 @@ Thanks!
#### Changelog
##### 1.2.1 (14.12.2014)
- Foundation update (5.5.0)
##### 1.2.0 (20.11.2014)
- remove NiceScroll

875
assets/css/style.css
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

2
assets/js/vendor/modernizr.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -318,14 +318,14 @@ $include-html-global-classes: $include-html-classes;
// $include-html-accordion-classes: $include-html-classes;
// $accordion-navigation-padding: rem-calc(16);
// $accordion-navigation-bg-color: $silver ;
// $accordion-navigation-bg-color: $silver;
// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
// $accordion-navigation-font-color: $jet;
// $accordion-navigation-font-size: rem-calc(16);
// $accordion-navigation-font-family: $body-font-family;
// $accordion-content-padding: $column-gutter/2;
// $accordion-content-padding: ($column-gutter/2);
// $accordion-content-active-bg-color: $white;
// 02. Alert Boxes
@ -545,7 +545,7 @@ $include-html-global-classes: $include-html-classes;
// $f-dropdown-font-size: rem-calc(14);
// $f-dropdown-list-padding: rem-calc(5, 10);
// $f-dropdown-line-height: rem-calc(18);
// $f-dropdown-list-hover-bg: $smoke ;
// $f-dropdown-list-hover-bg: $smoke;
// $dropdown-mobile-default-float: 0;
// We use this to control the styles for when the dropdown has custom content.
@ -573,25 +573,25 @@ $include-html-global-classes: $include-html-classes;
// $dropdown-button-padding-tny: $button-pip-tny * 7;
// $dropdown-button-pip-size-tny: $button-pip-tny;
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
// We use these to style small dropdown buttons
// $dropdown-button-padding-sml: $button-pip-sml * 7;
// $dropdown-button-pip-size-sml: $button-pip-sml;
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
// We use these to style medium dropdown buttons
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
// We use these to style large dropdown buttons
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
// 10. Flex Video
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -667,6 +667,7 @@ $include-html-global-classes: $include-html-classes;
// $input-error-message-font-weight: $font-weight-normal;
// $input-error-message-font-style: italic;
// $input-error-message-font-color: $white;
// $input-error-message-bg-color: $alert-color;
// $input-error-message-font-color-alt: $oil;
// We use this to style the glowing effect of inputs when focused
@ -685,9 +686,11 @@ $include-html-global-classes: $include-html-classes;
// $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;
// $icon-bar-font-size: 1rem;
// $icon-bar-hover-color: $primary-color;
// $icon-bar-icon-color: $white;
// $icon-bar-icon-color-hover: $icon-bar-icon-color;
// $icon-bar-icon-size: 1.875rem;
// $icon-bar-image-width: 1.875rem;
// $icon-bar-image-height: 1.875rem;
@ -991,7 +994,7 @@ $include-html-global-classes: $include-html-classes;
// $price-title-font-family: $body-font-family;
// We use these to control the price styles
// $price-money-bg: $vapor ;
// $price-money-bg: $vapor;
// $price-money-padding: rem-calc(15 20);
// $price-money-align: center;
// $price-money-color: $oil;
@ -1268,7 +1271,7 @@ $include-html-global-classes: $include-html-classes;
// These control the background color for the table and even rows
// $table-bg: $white;
// $table-even-row-bg: $snow ;
// $table-even-row-bg: $snow;
// These control the table cell border style
// $table-border-style: solid;
@ -1308,7 +1311,7 @@ $include-html-global-classes: $include-html-classes;
// $tabs-navigation-font-family: $body-font-family;
// $tabs-content-margin-bottom: rem-calc(24);
// $tabs-content-padding: $column-gutter/2;
// $tabs-content-padding: ($column-gutter/2);
// $tabs-vertical-navigation-margin-bottom: 1.25rem;
@ -1365,7 +1368,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-bg: $topbar-bg-color;
// Height and margin
// $topbar-height: 45px;
// $topbar-height: rem-calc(45);
// $topbar-margin-bottom: 0;
// Controlling the styles for the title in the top bar
@ -1376,6 +1379,7 @@ $include-html-global-classes: $include-html-classes;
// $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;
@ -1391,12 +1395,12 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: #272727;
// $topbar-link-bg-hover: $oil;
// $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-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: $h5-font-size;
// $topbar-link-dropdown-padding: 20px;

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

@ -6,12 +6,15 @@
$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 compenents that rely on other components.
$modules: () !default;
@mixin exports($name) {
// Import from global scope
$modules: $modules !global;
// Check if a module is already on the list
$module_index: index($modules, $name);
@if (($module_index == null) or ($module_index == false)) {
$modules: append($modules, $name);
$modules: append($modules, $name) !global;
@content;
}
}
@ -22,7 +25,7 @@ $modules: () !default;
// RANGES
// We use these functions to define ranges for various things, like media queries.
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
@if length($range) <= 0 {
@return 0;
@ -43,6 +46,47 @@ $modules: () !default;
@return $num / ($num * 0 + 1);
}
// TEXT INPUT TYPES
@function text-inputs( $types: all, $selector: input ) {
$return: ();
$all-text-input-types:
text
password
date
datetime
datetime-local
month
week
email
number
search
tel
time
url
color
textarea;
@if $types == all { $types: $all-text-input-types; }
@each $type in $types {
@if $type == textarea {
@if $selector == input {
$return: append($return, unquote('#{$type}'), comma)
} @else {
$return: append($return, unquote('#{$type}#{$selector}'), comma)
}
} @else {
$return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
}
}
@return $return;
}
// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {
$value: strip-unit($value) / strip-unit($base-value) * 1rem;
@ -58,23 +102,23 @@ $modules: () !default;
@return '[data-' + $attr + ']';
}
// REM CALC
// REM CALC
// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
//
//
// rem-calc(10 20 30px 40);
//
//
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
//
//
// rem-calc((10, 20, 30, 40px));
//
//
// Optionally call with a different base (eg: 8px) to calculate rem.
//
//
// rem-calc(16px 32px 48px, 8px);
//
//
// If you require to comma separate your list
//
//
// rem-calc((16px, 32px, 48), 8px);
@function rem-calc($values, $base-value: $rem-base) {

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

@ -18,7 +18,7 @@ $accordion-navigation-font-color: $jet !default;
$accordion-navigation-font-size: rem-calc(16) !default;
$accordion-navigation-font-family: $body-font-family !default;
$accordion-content-padding: $column-gutter/2 !default;
$accordion-content-padding: ($column-gutter/2) !default;
$accordion-content-active-bg-color: $white !default;

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

@ -66,7 +66,7 @@ $button-group-border-width: 1px !default;
> button, .button {
border-top: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
border-left-width: 0px;
border-left-width: 0;
margin:0;
display: block;
}

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

@ -34,7 +34,7 @@ $button-font-align: center !default;
$button-function-factor: -20% !default;
// We use these to control button border styles.
$button-border-width: 0px !default;
$button-border-width: 0 !default;
$button-border-style: solid !default;
$button-bg-color: $primary-color !default;
$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
@ -80,7 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
text-decoration: none;
text-align: $button-font-align;
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius:0;
}
@if $display { display: $display; }
}
@ -133,7 +133,7 @@ $button-disabled-cursor: $cursor-default-value !default;
//
// We use this mixin to add button color styles
//
// $bg - Primary color set in settings file. Default: $button-bg.
// $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
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover

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

@ -22,25 +22,25 @@ $button-pip-lrg: rem-calc(11) !default;
$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
$dropdown-button-pip-size-tny: $button-pip-tny !default;
$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
$dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default;
$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
// We use these to style small dropdown buttons
$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
$dropdown-button-pip-size-sml: $button-pip-sml !default;
$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
$dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default;
$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
// We use these to style medium dropdown buttons
$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
$dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default;
$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
// We use these to style large dropdown buttons
$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
$dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// @mixins
//

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

@ -67,6 +67,7 @@ $input-error-message-font-size: rem-calc(12) !default;
$input-error-message-font-weight: $font-weight-normal !default;
$input-error-message-font-style: italic !default;
$input-error-message-font-color: $white !default;
$input-error-message-bg-color: $alert-color !default;
$input-error-message-font-color-alt: $oil !default;
// We use this to style the glowing effect of inputs when focused
@ -86,7 +87,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.row { margin: 0 ((-$form-spacing) / 2);
.column,
.columns { padding: 0 $form-spacing / 2; }
.columns { padding: 0 ($form-spacing / 2); }
// Use this to collapse the margins of a form row
&.collapse { margin: 0;
@ -102,7 +103,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
input.column,
input.columns,
textarea.column,
textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
}
// @MIXIN
@ -224,7 +225,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
padding-top: 0;
padding-bottom: 0;
text-align: center;
line-height: rem-calc(34);
border: none;
}
@ -257,7 +257,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
padding-top: 0;
padding-bottom: 0;
text-align: center;
line-height: rem-calc(34);
border: none;
}
@ -304,7 +303,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// We use this mixin to create error message styles
// $bg - Default: $alert-color (Found in settings file)
@mixin form-error-message($bg:$alert-color) {
@mixin form-error-message($bg:$input-error-message-bg-color) {
display: block;
padding: $input-error-message-padding;
margin-top: $input-error-message-top;
@ -323,7 +322,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to style select elements
@mixin form-select {
-webkit-appearance: none !important;
-webkit-border-radius: 0px;
border-radius: 0;
background-color: $select-bg-color;
// Hide the dropdown arrow shown in newer IE versions
@ -331,7 +330,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
display: none;
}
// The custom arrow have some fake horizontal padding so we can align it
// The custom arrow has some fake horizontal padding so we can align it
// from the right side of the element without relying on CSS3
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
@ -344,7 +343,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
width: $input-border-width;
color: $input-border-color;
}
padding: $form-spacing / 2;
padding: ($form-spacing / 2);
font-size: $input-font-size;
font-family: $body-font-family;
color: $input-font-color;
@ -411,23 +410,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
span.postfix,label.postfix { @include postfix(); }
/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea {
#{text-inputs(all, 'input')} {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border-radius: 0;
@include form-element;
@if $input-include-glowing-effect == false {
@include single-transition(all, 0.15s, linear);
@ -468,7 +453,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
input[type="submit"] {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border-radius: 0;
}
/* Respect enforced amount of rows for textarea */

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

@ -138,7 +138,7 @@ $base-line-height: 1.5 !default;
}
@else {
top: 50%;
margin-top: -$width/2;
margin-top: (-$width/2);
}
@if $left {
left: $left;
@ -154,14 +154,14 @@ $base-line-height: 1.5 !default;
}
box-shadow:
0 0px 0 $thickness $color,
0 0 0 $thickness $color,
0 $gap + $thickness 0 $thickness $color,
0 (2 * $gap + 2*$thickness) 0 $thickness $color;
width: $width;
}
span:hover:after {
box-shadow:
0 0px 0 $thickness $hover-color,
0 0 0 $thickness $hover-color,
0 $gap + $thickness 0 $thickness $hover-color,
0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
}
@ -296,7 +296,7 @@ $include-html-global-classes: $include-html-classes !default;
$column-gutter: rem-calc(30) !default;
// Media Query Ranges
$small-range: (0em, 40em) !default;
$small-range: (0, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
@ -345,7 +345,7 @@ $cursor-text-value: text !default;
// Forward slash placed around everything to convince PhantomJS to read the value.
meta.foundation-version {
font-family: "/5.4.7/";
font-family: "/5.5.0/";
}
meta.foundation-mq-small {
@ -353,21 +353,41 @@ $cursor-text-value: text !default;
width: lower-bound($small-range);
}
meta.foundation-mq-small-only {
font-family: "/" + unquote($small-only) + "/";
width: lower-bound($small-range);
}
meta.foundation-mq-medium {
font-family: "/" + unquote($medium-up) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-medium-only {
font-family: "/" + unquote($medium-only) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-large {
font-family: "/" + unquote($large-up) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-large-only {
font-family: "/" + unquote($large-only) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-xlarge {
font-family: "/" + unquote($xlarge-up) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xlarge-only {
font-family: "/" + unquote($xlarge-only) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xxlarge {
font-family: "/" + unquote($xxlarge-up) + "/";
width: lower-bound($xxlarge-range);

22
assets/scss/foundation/components/_grid.scss
Unescape View File

@ -116,8 +116,8 @@ $last-child-float: $opposite-direction !default;
// Gutter padding whenever a column isn't set to collapse
// (use $collapse:null to do nothing)
@else if $collapse == false {
padding-left: $column-gutter / 2;
padding-right: $column-gutter / 2;
padding-left: ($column-gutter / 2);
padding-right: ($column-gutter / 2);
}
// If a column number is given, calculate width
@ -172,11 +172,10 @@ $last-child-float: $opposite-direction !default;
.#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
}
@for $i from 0 through $total-columns - 1 {
.#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
}
.#{$size}-reset-order {
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
@ -211,6 +210,21 @@ $last-child-float: $opposite-direction !default;
.columns.#{$size}-uncentered.opposite {
float: $opposite-direction;
}
.row {
&.#{$size}-collapse {
> .column,
> .columns { @include grid-column($collapse:true, $float:false); }
.row {margin-left:0; margin-right:0;}
}
&.#{$size}-uncollapse {
> .column,
> .columns {
@include grid-column;
}
}
}
}
@include exports("grid") {

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

@ -15,15 +15,21 @@ $include-html-icon-bar-classes: $include-html-classes !default;
// We use these to style the icon-bar and items
$icon-bar-bg: $oil !default;
$icon-bar-font-color: $white !default;
$icon-bar-font-color-hover: $icon-bar-font-color !default;
$icon-bar-font-size: 1rem !default;
$icon-bar-hover-color: $primary-color !default;
$icon-bar-icon-color: $white !default;
$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
$icon-bar-icon-size: 1.875rem !default;
$icon-bar-image-width: 1.875rem !default;
$icon-bar-image-height: 1.875rem !default;
$icon-bar-active-color: $primary-color !default;
$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;
//
// @mixins
//
@ -31,7 +37,7 @@ $icon-bar-item-padding: 1.25rem !default;
// We use this mixin to create the base styles for our Icon bar element.
//
@mixin icon-bar-base() {
width: 100%;
font-size: 0;
display: inline-block;
@ -45,9 +51,9 @@ $icon-bar-item-padding: 1.25rem !default;
padding: $icon-bar-item-padding;
float: left;
i, img {
i, img {
display: block;
margin: 0 auto;
margin: 0 auto;
& + label {
margin-top: .0625rem;
@ -67,8 +73,8 @@ $icon-bar-item-padding: 1.25rem !default;
&.label-right > * {
i, img {
margin: 0 .0625rem 0 0;
i, img {
margin: 0 .0625rem 0 0;
display: inline-block;
& + label {
@ -132,7 +138,7 @@ $icon-bar-item-padding: 1.25rem !default;
font-size: $font-size;
padding: $padding;
i, img {
i, img {
& + label {
margin-top: .0625rem;
@ -154,26 +160,52 @@ $icon-bar-item-padding: 1.25rem !default;
@mixin icon-bar-style(
$bar-bg:$icon-bar-bg,
$bar-font-color:$icon-bar-font-color,
$bar-font-color-hover:$icon-bar-font-color-hover,
$bar-hover-color:$icon-bar-hover-color,
$bar-icon-color:$icon-bar-icon-color,
$bar-icon-color-hover:$icon-bar-icon-color-hover,
$bar-active-color:$icon-bar-active-color,
$base-style:true) {
$base-style:true,
$disabled:false) {
@if $base-style {
background: $bar-bg;
& > * {
label { color: $bar-font-color; }
&:hover { background: $bar-hover-color; }
i { color: $bar-icon-color; }
}
label { color: $bar-font-color; }
& > a:hover {
i {
color: $bar-icon-color;
}
background: $bar-hover-color;
label { color: $bar-font-color-hover; }
i { color: $bar-icon-color-hover; }
}
& > a.active {
background: $bar-active-color;
label { color: $bar-font-color-hover; }
i { color: $bar-icon-color-hover; }
}
}
@if $disabled {
.item.disabled {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
>* {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
}
}
}
}
@ -185,22 +217,26 @@ $icon-bar-item-padding: 1.25rem !default;
// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
// $bar-active-color - the color of an active / hover state
// $base-style - Apply base styles? Default: true.
// $disabled - Allow disabled icons? Default: false.
@mixin icon-bar(
$bar-bg:$icon-bar-bg,
$bar-font-color:$icon-bar-font-color,
$bar-font-color-hover:$icon-bar-font-color-hover,
$bar-hover-color:$icon-bar-hover-color,
$bar-icon-color:$icon-bar-icon-color,
$bar-icon-color-hover:$icon-bar-icon-color-hover,
$bar-active-color:$icon-bar-active-color,
$padding: $icon-bar-item-padding,
$font-size: $icon-bar-font-size,
$icon-size: $icon-bar-icon-size,
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height,
$base-style:true) {
$base-style:true,
$disabled:false) {
@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-hover-color, $bar-icon-color, $bar-active-color, $base-style);
@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 exports("icon-bar") {

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

@ -33,13 +33,13 @@ $label-font-family: $body-font-family !default;
white-space: nowrap;
display: inline-block;
position: relative;
margin-bottom: inherit;
margin-bottom: auto;
}
// @mixins
//
// We use this mixin to add label size styles.
// $padding - Used to determine label padding. Default: $label-padding || rem-calc(3 10 4) !default
// $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default
// $text-size - Used to determine label text-size. Default: $text-size found in settings
@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
@if $padding { padding: $padding; }

14
assets/scss/foundation/components/_offcanvas.scss
Unescape View File

@ -117,11 +117,11 @@ $menu-slide: "transform 500ms ease" !default;
-ms-overflow-style: -ms-autohiding-scrollbar;
@if $position == left {
@include translate3d(-100.5%,0,0);
@include translate3d(-100%,0,0);
left: 0;
}
@if $position == right {
@include translate3d(100.5%,0,0);
@include translate3d(100%,0,0);
right: 0;
}
}
@ -139,7 +139,8 @@ $menu-slide: "transform 500ms ease" !default;
// INNER WRAP
// Main content area that moves to reveal the off-canvas nav
@mixin inner-wrap {
@include kill-flicker;
// @include kill-flicker;
// removed for now till chrome fixes backface issue
@include wrap-base;
@include clearfix;
-webkit-transition: -webkit-#{$menu-slide};
@ -200,7 +201,8 @@ $menu-slide: "transform 500ms ease" !default;
height: $tabbar-height;
top: 0;
@media #{$medium-up} {
&.left, &.right { text-align: left; }
&.left { text-align: left; }
&.right { text-align: right; }
}
// still need to make these non-presentational
@ -483,14 +485,14 @@ $menu-slide: "transform 500ms ease" !default;
@if $include-html-off-canvas-classes {
.left-submenu {
@include off-canvas-submenu($position: left);
&.move-right {
&.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}
.right-submenu {
@include off-canvas-submenu($position: right);
&.move-left {
&.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}

22
assets/scss/foundation/components/_orbit.scss
Unescape View File

@ -116,7 +116,7 @@ $orbit-timer-hide-for-small: true !default;
}
}
.orbit-container {
overflow: hidden;
width: 100%;
@ -147,10 +147,10 @@ $orbit-timer-hide-for-small: true !default;
&:first-child {
@if $text-direction == rtl {
margin-right: 0%;
margin-right: 0;
}
@else {
margin-left: 0%;
margin-left: 0;
}
}
@ -194,7 +194,7 @@ $orbit-timer-hide-for-small: true !default;
height: 3px;
background-color: $orbit-timer-bg;
display: block;
width: 0%;
width: 0;
position: relative;
right: 20px;
top: 5px;
@ -205,7 +205,7 @@ $orbit-timer-hide-for-small: true !default;
& > span {
display: none;
position: absolute;
top: 0px;
top: 0;
#{$opposite-direction}: 0;
width: 11px;
height: 14px;
@ -213,26 +213,26 @@ $orbit-timer-hide-for-small: true !default;
border-top: none;
border-bottom: none;
}
// Pause button
&.paused {
& > span {
#{$opposite-direction}: -4px;
top: 0px;
top: 0;
width: 11px;
height: 14px;
border: inset 8px;
border-left-style: solid;
border-color: transparent;
border-left-color: $white;
&.dark {
&.dark {
border-left-color: $oil;
}
}
}
}
&:hover .orbit-timer > span { display: block; }
@ -345,7 +345,7 @@ $orbit-timer-hide-for-small: true !default;
.orbit-slides-container {height: auto !important;}
.orbit-slides-container > * {
position: relative;
margin:0% !important;
margin:0 !important;
opacity:1 !important;
}

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

@ -28,6 +28,7 @@ $panel-font-color-alt: $white !default;
$panel-header-adjust: true !default;
$callout-panel-link-color: $primary-color !default;
$callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
//
// @mixins
//
@ -82,6 +83,11 @@ $callout-panel-link-color: $primary-color !default;
@include panel(scale-color($primary-color, $lightness: 94%));
a:not(.button) {
color: $callout-panel-link-color;
&:hover,
&:focus {
color: $callout-panel-link-color-hover;
}
}
}

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

@ -26,8 +26,8 @@ $reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
// We use these to style the reveal close button
$reveal-close-font-size: rem-calc(40) !default;
$reveal-close-top: rem-calc(8) !default;
$reveal-close-side: rem-calc(11) !default;
$reveal-close-top: rem-calc(10) !default;
$reveal-close-side: rem-calc(22) !default;
$reveal-close-color: $base !default;
$reveal-close-weight: $font-weight-bold !default;
@ -49,7 +49,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
// We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) {
position: fixed;
//position: fixed;
position: absolute; // allows modal background to extend beyond window position
top: 0;
bottom: 0;
left: 0;

2
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-bottom: $sub-nav-list-margin;
margin: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top;
dt {

24
assets/scss/foundation/components/_switches.scss
Unescape View File

@ -55,7 +55,7 @@ $switch-active-color: $primary-color !default;
// Default label styles for type and transition
label {
display: block;
margin-bottom: $switch-height-med / 2;
margin-bottom: ($switch-height-med / 2);
position: relative;
color: transparent;
background: $switch-bg;
@ -87,15 +87,20 @@ $switch-active-color: $primary-color !default;
content: "";
display: block;
background: $switch-paddle-bg;
position: absolute; top: .25rem; left: .25rem;
width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
position: absolute;
top: .25rem;
left: .25rem;
width: $switch-height-med - 0.5rem;
height: $switch-height-med - 0.5rem;
-webkit-transition: left $transition-speed $transition-ease;
-moz-transition: left $transition-speed $transition-ease;
-o-transition: translate3d(0,0,0);
transition: left $transition-speed $transition-ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@ -116,11 +121,13 @@ $switch-active-color: $primary-color !default;
@mixin switch-size($height: $switch-height-med) {
label {
width: $height * 2; height: $height;
width: $height * 2;
height: $height;
}
label:after {
width: $height - 0.5rem; height: $height - 0.5rem;
width: $height - 0.5rem;
height: $height - 0.5rem;
}
input:checked + label:after {
@ -138,6 +145,7 @@ $switch-active-color: $primary-color !default;
// $base-style - Apply base styles? Default: true.
@mixin switch-style(
$paddle-bg:$switch-paddle-bg,
$active-color:$switch-active-color,
$radius:false,
$base-style:true) {
@ -153,7 +161,7 @@ $switch-active-color: $primary-color !default;
}
input:checked + label {
background: $switch-active-color;
background: $active-color;
}
}
@ -196,7 +204,7 @@ $switch-active-color: $primary-color !default;
$base-style:true) {
@include switch-base($transition-speed, $transition-ease);
@include switch-size($height);
@include switch-style($paddle-bg, $radius, $base-style);
@include switch-style($paddle-bg, $active-color, $radius, $base-style);
}
@include exports("switch") {
@ -214,7 +222,7 @@ $switch-active-color: $primary-color !default;
&.tiny { @include switch-size($switch-height-tny); }
// Add a radius to the switch
&.radius {
&.radius {
label { @include radius(4px); }
label:after { @include radius(3px); }
}

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

@ -21,7 +21,7 @@ $tabs-navigation-font-size: rem-calc(16) !default;
$tabs-navigation-font-family: $body-font-family !default;
$tabs-content-margin-bottom: rem-calc(24) !default;
$tabs-content-padding: $column-gutter/2 !default;
$tabs-content-padding: ($column-gutter/2) !default;
$tabs-vertical-navigation-margin-bottom: 1.25rem !default;

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

@ -32,7 +32,7 @@
float: none;
}
}
.tab {
text-align: center;
width: 25%;
@ -45,8 +45,8 @@
background: rgba($white, 0.1);
}
}
}
}
.toolbar .tab-content {
font-size: 16px;
text-align: center;

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

@ -17,7 +17,7 @@ $topbar-bg-color: $oil !default;
$topbar-bg: $topbar-bg-color !default;
// Height and margin
$topbar-height: 45px !default;
$topbar-height: rem-calc(45) !default;
$topbar-margin-bottom: 0 !default;
// Controlling the styles for the title in the top bar
@ -33,15 +33,15 @@ $topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: #272727 !default;
$topbar-link-bg-hover: $oil !default;
$topbar-link-bg-color-hover: $charcoal !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
$topbar-link-padding: $topbar-height / 3 !default;
$topbar-link-padding: ($topbar-height / 3) !default;
$topbar-back-link-size: rem-calc(18) !default;
$topbar-link-dropdown-padding: 20px !default;
$topbar-link-dropdown-padding: rem-calc(20) !default;
$topbar-button-font-size: 0.75rem !default;
$topbar-button-top: 7px !default;
@ -50,6 +50,7 @@ $topbar-dropdown-bg: $oil !default;
$topbar-dropdown-link-color: $white !default;
$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
$topbar-dropdown-link-bg: $oil !default;
$topbar-dropdown-link-bg-hover: $oil !default;
$topbar-dropdown-link-weight: $font-weight-normal !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: $white !default;
@ -76,6 +77,9 @@ $topbar-transition-speed: 300ms !default;
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $medium-up !default;
// Top-bar input styles
$topbar-input-height: rem-calc(28) !default;
// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
@ -127,10 +131,10 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
z-index: 99;
&.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%;
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%;
.title-area {
position: fixed;
@ -164,15 +168,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
form,
input { margin-bottom: 0; }
input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
input {
height: $topbar-input-height;
padding-top: .35rem;
padding-bottom: .35rem;
font-size: $topbar-button-font-size;
}
.button, button {
padding-top: .35rem + rem-calc(1);
padding-bottom: .35rem + rem-calc(1);
margin-bottom: 0;
font-size: $topbar-button-font-size;
// position: relative;
// top: -1px;
// position: relative;
// top: -1px;
// Corrects a slight misalignment when put next to an input field
@media #{$small-only} {
@ -192,7 +201,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
margin: 0;
font-size: $rem-base;
h1 {
h1, h2, h3, h4, p, span {
line-height: $topbar-height;
font-size: $topbar-title-font-size;
margin: 0;
@ -235,7 +244,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
height: 34px;
line-height: 33px;
padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
color: $topbar-menu-link-color;
position: relative;
@ -266,10 +275,10 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.toggle-topbar {
a { color: $topbar-menu-link-color-toggled;
span::after {
span::after {
// Shh, don't tell, but box-shadows create the menu icon :)
// Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
box-shadow: 0 0px 0 1px $topbar-menu-icon-color-toggled,
box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
0 7px 0 1px $topbar-menu-icon-color-toggled,
0 14px 0 1px $topbar-menu-icon-color-toggled;
}
@ -315,7 +324,6 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-weight: $topbar-link-weight;
text-transform: $topbar-link-text-transform;
&.button {
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
@ -347,7 +355,6 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
background: $topbar-link-bg-hover;
}
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
@ -355,8 +362,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
}
}
}
@ -420,7 +427,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-size: $topbar-back-link-size;
a {
color: $topbar-link-color;
// line-height: $topbar-height / 2;
// line-height: ($topbar-height / 2);
display: block;
&:hover { background:none; }
}
@ -460,7 +467,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
button {
font-size: rem-calc(14);
position: relative;
top: $topbar-button-top;
height: $topbar-input-height;
top: (($topbar-height - $topbar-input-height) / 2);
}
&.expanded { background: $topbar-bg; }
@ -525,18 +533,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.has-dropdown {
@if($topbar-arrows){
& > a {
padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
&:after {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
margin-top: -($topbar-dropdown-toggle-size / 2);
top: $topbar-height / 2;
top: ($topbar-height / 2);
}
}
}
&.moved { position: relative;
@ -556,19 +561,18 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.dropdown li.has-dropdown {
& > a {
@if ($topbar-dropdown-arrows){
&:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
#{$opposite-direction}: 5px;
line-height: 1.2;
}
@if ($topbar-dropdown-arrows){
&:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
#{$opposite-direction}: 5px;
line-height: 1.2;
}
}
}
}
}
.dropdown {
@ -595,8 +599,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
&:hover > a:not(.button) {
color: $topbar-dropdown-link-color-hover;
background-color: $topbar-link-bg-color-hover;
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
@if ($topbar-dropdown-link-bg-hover) {
background: $topbar-dropdown-link-bg-hover;
}
}
}
@ -626,7 +630,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-height / 3);
height: $topbar-height;
}

2
package.json
Unescape View File

@ -1,4 +1,4 @@
{
"name": "Abc",
"version": "1.2.0"
"version": "1.2.1"
}

Write Preview
Loading…
Cancel
Save