## Lato – A Sans Serif Typeface Family
@@ -281,18 +279,13 @@ Need a break? I give you three!
If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2]
-
-
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
[2]: http://phlow.de/
[3]: http://en.wikipedia.org/wiki/Ed_Benguiat
[4]: https://www.google.com/fonts/specimen/Lato
[5]: https://www.google.com/fonts/specimen/Volkhov
[6]: http://www.latofonts.com/
- [7]: http://modularscale.com/
- [8]: #
- [9]: #
- [10]: #
+ [7]: https://www.modularscale.com/
[^1]: Find out more about Kramdown on
@@ -379,12 +372,6 @@ element
-
-
-
-
-
-
diff --git a/_sass/_01_settings_colors.scss b/_sass/_01_settings_colors.scss
index a7bea7459eb..dcedd19f183 100644
--- a/_sass/_01_settings_colors.scss
+++ b/_sass/_01_settings_colors.scss
@@ -16,9 +16,9 @@
/* Basics
------------------------------------------------------------------- */
-$text-color: #111;
-$body-font-color: $text-color;
-$body-bg: #fdfdfd;
+$text-color : #111;
+$body-font-color : $text-color;
+$body-bg : #fdfdfd;
@@ -26,59 +26,59 @@ $body-bg: #fdfdfd;
https://color.adobe.com/de/Flat-Design-Colors-v2-color-theme-4341903/
------------------------------------------------------------------- */
-$ci-1: #334D5C; // dark turquoise
-$ci-2: #45B29D; // turquoise
-$ci-3: #EFC94C; // yellow
-$ci-4: #E27A3F; // orange
-$ci-5: #DF4949; // red
-$ci-6: #A1D044; // green
+$ci-1 : #334D5C; // dark turquoise
+$ci-2 : #45B29D; // turquoise
+$ci-3 : #EFC94C; // yellow
+$ci-4 : #E27A3F; // orange
+$ci-5 : #DF4949; // red
+$ci-6 : #A1D044; // green
/* Foundation Color Variables
------------------------------------------------------------------- */
-$primary-color: $ci-1;
-$secondary-color: $ci-6;
-$alert-color: $ci-5;
-$success-color: $ci-6;
-$warning-color: $ci-4;
-$info-color: $ci-1;
+$primary-color : $ci-1;
+$secondary-color : $ci-6;
+$alert-color : $ci-5;
+$success-color : $ci-6;
+$warning-color : $ci-4;
+$info-color : $ci-1;
/* Grey Scale
------------------------------------------------------------------- */
-$grey-1: #E4E4E4;
-$grey-2: #D7D7D7;
-$grey-3: #CBCBCB;
-$grey-4: #BEBEBE;
-$grey-5: #A4A4A4;
-$grey-6: #979797;
-$grey-7: #8B8B8B;
-$grey-8: #7E7E7E;
-$grey-9: #646464;
-$grey-10: #575757;
-$grey-11: #4B4B4B;
-$grey-12: #3E3E3E;
-$grey-13: #313131;
-$grey-14: #242424;
-$grey-15: #171717;
-$grey-16: #0B0B0B;
+$grey-1 : #E4E4E4;
+$grey-2 : #D7D7D7;
+$grey-3 : #CBCBCB;
+$grey-4 : #BEBEBE;
+$grey-5 : #A4A4A4;
+$grey-6 : #979797;
+$grey-7 : #8B8B8B;
+$grey-8 : #7E7E7E;
+$grey-9 : #646464;
+$grey-10 : #575757;
+$grey-11 : #4B4B4B;
+$grey-12 : #3E3E3E;
+$grey-13 : #313131;
+$grey-14 : #242424;
+$grey-15 : #171717;
+$grey-16 : #0B0B0B;
/* Topbar-Navigation
------------------------------------------------------------------- */
-$topbar-bg-color: $body-bg;
-$topbar-bg: $topbar-bg-color;
+$topbar-bg-color : $body-bg;
+$topbar-bg : $topbar-bg-color;
$topbar-dropdown-toggle-color: $ci-1;
-$topbar-link-color: #000;
+$topbar-link-color : #000;
$topbar-link-color-hover: #000;
$topbar-link-color-active: #000;
$topbar-link-color-active-hover: #000;
@@ -107,13 +107,13 @@ $topbar-menu-icon-color-toggled: $ci-6;
/* Footer
------------------------------------------------------------------- */
-$footer-bg: $grey-8;
-$footer-color: #fff;
-$footer-link-color: $ci-6;
+$footer-bg : $grey-8;
+$footer-color : #fff;
+$footer-link-color : $ci-6;
-$subfooter-bg: $grey-13;
-$subfooter-color: $grey-8;
+$subfooter-bg : $grey-13;
+$subfooter-color : $grey-8;
$subfooter-link-color: $grey-8;
diff --git a/_sass/_03_settings_mixins_media_queries.scss b/_sass/_03_settings_mixins_media_queries.scss
index 3f971f3a8b9..8be24715ec9 100644
--- a/_sass/_03_settings_mixins_media_queries.scss
+++ b/_sass/_03_settings_mixins_media_queries.scss
@@ -29,7 +29,7 @@ $base-font-size: 100% !default;
//
// We use this to control border radius.
// $radius - Default: $global-radius || 4px
-@mixin radius($radius:$global-radius) {
+@mixin radius($radius: $global-radius) {
@if $radius {
border-radius: $radius;
}
@@ -39,13 +39,15 @@ $base-font-size: 100% !default;
//
// We use this to create equal side border radius on elements.
// $side - Options: left, right, top, bottom
-@mixin side-radius($side, $radius:$global-radius) {
- @if ($side == left or $side == right) {
+@mixin side-radius($side, $radius: $global-radius) {
+ @if ($side ==left or $side ==right) {
-webkit-border-bottom-#{$side}-radius: $radius;
-webkit-border-top-#{$side}-radius: $radius;
border-bottom-#{$side}-radius: $radius;
border-top-#{$side}-radius: $radius;
- } @else {
+ }
+
+ @else {
-webkit-#{$side}-left-radius: $radius;
-webkit-#{$side}-right-radius: $radius;
border-#{$side}-left-radius: $radius;
@@ -57,11 +59,14 @@ $base-font-size: 100% !default;
//
// We can control whether or not we have inset shadows edges.
// $active - Default: true, Options: false
-@mixin inset-shadow($active:true) {
+@mixin inset-shadow($active: true) {
box-shadow: $shiny-edge-size $shiny-edge-color inset;
- @if $active { &:active {
- box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+ @if $active {
+ &:active {
+ box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+ }
+ }
}
// @mixins
@@ -70,17 +75,17 @@ $base-font-size: 100% !default;
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
-@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+@mixin single-transition($property: all, $speed: 300ms, $ease: ease-out) {
transition: $property $speed $ease;
}
// @mixins
//
// We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type:border-box) {
+@mixin box-sizing($type: border-box) {
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
- -moz-box-sizing: $type; // Firefox < 29
- box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+ -moz-box-sizing: $type; // Firefox < 29
+ box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}
// @mixins
@@ -95,19 +100,23 @@ $base-font-size: 100% !default;
width: 0;
height: 0;
border: inset $triangle-size;
- @if ($triangle-direction == top) {
+
+ @if ($triangle-direction ==top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
}
- @if ($triangle-direction == bottom) {
+
+ @if ($triangle-direction ==bottom) {
border-color: transparent transparent $triangle-color transparent;
border-bottom-style: solid;
}
- @if ($triangle-direction == left) {
+
+ @if ($triangle-direction ==left) {
border-color: transparent transparent transparent $triangle-color;
border-left-style: solid;
}
- @if ($triangle-direction == right) {
+
+ @if ($triangle-direction ==right) {
border-color: transparent $triangle-color transparent transparent;
border-right-style: solid;
}
@@ -135,29 +144,33 @@ $base-font-size: 100% !default;
@if $top {
top: $top;
}
+
@else {
top: 50%;
margin-top: (-$width/2);
}
+
@if $left {
left: $left;
}
+
@else {
left: ($tabbar-menu-icon-width - $width)/2;
}
}
+
@else {
top: 50%;
margin-top: -($width/2);
#{$opposite-direction}: $topbar-link-padding;
}
- box-shadow:
- 0 0 0 $thickness $color,
- 0 $gap + $thickness 0 $thickness $color,
- 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+ box-shadow: 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 0 0 $thickness $hover-color,
@@ -168,8 +181,16 @@ $base-font-size: 100% !default;
// We use this to do clear floats
@mixin clearfix {
- &:before, &:after { content: " "; display: table; }
- &:after { clear: both; }
+
+ &:before,
+ &:after {
+ content: " ";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
}
// @mixins
@@ -178,7 +199,7 @@ $base-font-size: 100% !default;
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
// $fade-time - Default: 300ms
// $glowing-effect-color - Default: fade-out($primary-color, .25)
-@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+@mixin block-glowing-effect($selector: focus, $fade-time: 300ms, $glowing-effect-color: fade-out($primary-color, .25)) {
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
@@ -192,8 +213,8 @@ $base-font-size: 100% !default;
// We use this to translate elements in 2D
// $horizontal: Default: 0
// $vertical: Default: 0
-@mixin translate2d($horizontal:0, $vertical:0) {
- transform: translate($horizontal,$vertical)
+@mixin translate2d($horizontal: 0, $vertical: 0) {
+ transform: translate($horizontal, $vertical)
}
// @mixins
@@ -224,10 +245,13 @@ $base-font-size: 100% !default;
$text-direction: ltr !default;
$default-float: left !default;
$opposite-direction: right !default;
-@if $text-direction == ltr {
+
+@if $text-direction ==ltr {
$default-float: left;
$opposite-direction: right;
-} @else {
+}
+
+@else {
$default-float: right;
$opposite-direction: left;
}
@@ -250,11 +274,26 @@ $column-gutter: rem-calc(30) !default;
// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -
-$small-range: (0em, 40em);
-$medium-range: (40.063em, 64em);
-$large-range: (64.063em, 90em);
-$xlarge-range: (90.063em, 120em);
-$xxlarge-range: (120.063em, 99999999em);
+$small-range: (
+ 0em,
+ 40em
+);
+$medium-range: (
+ 40.063em,
+ 64em
+);
+$large-range: (
+ 64.063em,
+ 90em
+);
+$xlarge-range: (
+ 90.063em,
+ 120em
+);
+$xxlarge-range: (
+ 120.063em,
+ 99999999em
+);
$screen: "only screen" !default;
@@ -293,7 +332,7 @@ $cursor-text-value: text !default;
@include exports("global") {
- // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+ // Meta styles are included in all builds, as they are a dependency of the Javascript.
// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.
@@ -353,7 +392,10 @@ $cursor-text-value: text !default;
@if $include-html-global-classes {
// Must be 100% for off canvas to work
- html, body { height: 100%; }
+ html,
+ body {
+ height: 100%;
+ }
// Set box-sizing globally to handle padding and border widths
*,
@@ -363,7 +405,9 @@ $cursor-text-value: text !default;
}
html,
- body { font-size: $base-font-size; }
+ body {
+ font-size: $base-font-size;
+ }
// Default body styles
body {
@@ -379,25 +423,42 @@ $cursor-text-value: text !default;
cursor: $cursor-auto-value;
}
- a:hover { cursor: $cursor-pointer-value; }
+ a:hover {
+ cursor: $cursor-pointer-value;
+ }
// Grid Defaults to get images and embeds to work properly
- img { max-width: 100%; height: auto; }
+ img {
+ max-width: 100%;
+ height: auto;
+ }
- img { -ms-interpolation-mode: bicubic; }
+ img {
+ -ms-interpolation-mode: bicubic;
+ }
#map_canvas,
.map_canvas {
+
img,
embed,
- object { max-width: none !important;
+ object {
+ max-width: none !important;
}
}
// Miscellaneous useful HTML classes
- .left { float: left !important; }
- .right { float: right !important; }
- .clearfix { @include clearfix; }
+ .left {
+ float: left !important;
+ }
+
+ .right {
+ float: right !important;
+ }
+
+ .clearfix {
+ @include clearfix;
+ }
// Hide visually and from screen readers
.hide {
@@ -406,13 +467,18 @@ $cursor-text-value: text !default;
}
// Hide visually and from screen readers, but maintain layout
- .invisible { visibility: hidden; }
+ .invisible {
+ visibility: hidden;
+ }
// Font smoothing
// Antialiased font smoothing works best for light text on a dark background.
// Apply to single elements instead of globally to body.
// Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
- .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+ .antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
// Get rid of gap under images by making them display: inline-block; by default
img {
@@ -425,9 +491,14 @@ $cursor-text-value: text !default;
//
// Make sure textarea takes on height automatically
- textarea { height: auto; min-height: 50px; }
+ textarea {
+ height: auto;
+ min-height: 50px;
+ }
// Make select elements 100% width by default
- select { width: 100%; }
+ select {
+ width: 100%;
+ }
}
-}
+}
\ No newline at end of file
diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss
old mode 100644
new mode 100755
index 5df1b39eb9b..2c5bc6b43d9
--- a/_sass/_06_typography.scss
+++ b/_sass/_06_typography.scss
@@ -83,6 +83,9 @@ p.button a {
/* Headlines
+ The hK::before logic is to accomodate a vert. offset for persistent
+ top of page menu. The logic is copied from
+ https://css-tricks.com/hash-tag-links-padding/
------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
@@ -90,7 +93,6 @@ h1, h2, h3, h4, h5, h6 {
font-weight: normal;
padding: 0;
}
-
h1 {
font-size: $font-size-h1;
margin-top: 0;
diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss
index 2204004c394..33095653358 100644
--- a/_sass/_09_elements.scss
+++ b/_sass/_09_elements.scss
@@ -148,3 +148,15 @@ img.lazy {
transition: opacity 0.7s;
opacity: 1;
}
+
+*:target:not([id^='fn:']):not([id^='fnref:']) {
+ &::before {
+ content: " ";
+ width: 0;
+ height: 0;
+
+ display: block;
+ padding-top: 50px;
+ margin-top: -50px;
+ }
+}
diff --git a/_sass/_11_syntax-highlighting.scss b/_sass/_11_syntax-highlighting.scss
index f0a2a0c1e22..ea411a5d0e9 100644
--- a/_sass/_11_syntax-highlighting.scss
+++ b/_sass/_11_syntax-highlighting.scss
@@ -4,6 +4,13 @@
.highlight {
background: #fff;
+ [data-lang]::before {
+ content: attr(data-lang);
+ display: block;
+ text-align: right;
+ margin-right: 5px;
+ text-transform: uppercase;
+ }
.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { font-weight: bold } // Keyword
diff --git a/_sass/_functions.scss b/_sass/_functions.scss
index 60dd1e2ade0..3b51e97631c 100644
--- a/_sass/_functions.scss
+++ b/_sass/_functions.scss
@@ -7,17 +7,21 @@
$rem-base: 16px !default;
// IMPORT ONCE
-// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
-$modules: () !default;
+// 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
$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) !global;
- @content;
- }
+ $module_index: index($modules, $name
+);
+
+@if (($module_index ==null) or ($module_index ==false)) {
+ $modules: append($modules, $name) !global;
+ @content;
+}
}
//
@@ -27,80 +31,101 @@ $modules: () !default;
// RANGES
// We use these functions to define ranges for various things, like media queries.
-@function lower-bound($range){
- @if length($range) <= 0 {
+@function lower-bound($range) {
+ @if length($range) <=0 {
@return 0;
}
- @return nth($range,1);
+
+ @return nth($range, 1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
+
@return nth($range, 2);
}
+/// TODO: This is bad practice, calculating between units should be done by converting as by the sass development team:
+/// https://github.com/sass/sass/issues/533 (right now this is a work around)
// STRIP UNIT
// It strips the unit of measure and returns it
-@function strip-unit($num) {
- @return $num / ($num * 0 + 1);
+@function strip-unit($value) {
+ @if type-of($value)=="number" {
+ @if (unitless($value)) {
+ @return $value;
+ }
+
+ @else if unit($value)=="em" {
+ @return calc($value / 1em);
+ }
+
+ @else if unit($value)=="px" {
+ @return calc($value / 1px);
+ }
+
+ @else if unit($value)=="pt" {
+ @return calc($value / 1pt);
+ }
+ }
+
+ @else {
+ @warn "Not a number value: #{$value}";
+ @return $value;
+ }
}
// 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)
- }
+@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)
+ }
}
- @return $return;
+ @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;
- @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
+@function convert-to-rem($value, $base-value: $rem-base) {
+ $value: calc(strip-unit($value) / strip-unit($base-value) * 1rem);
+
+ @if ($value ==0rem) {
+ $value: 0;
+ }
+
+ // Turn 0rem into 0
@return $value;
}
@function data($attr) {
@if $namespace {
- @return '[data-' + $namespace + '-' + $attr + ']';
+ @return ('[data-' + $namespace + '-' + $attr + ']');
}
- @return '[data-' + $attr + ']';
+ @return ('[data-' + $attr + ']');
}
// REM CALC
@@ -125,23 +150,28 @@ $modules: () !default;
@function rem-calc($values, $base-value: $rem-base) {
$max: length($values);
- @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
-
- $remValues: ();
- @for $i from 1 through $max {
- $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+ @if $max ==1 {
+ @return convert-to-rem(nth($values, 1), $base-value);
}
- @return $remValues;
+
+ $remValues: (
+ );
+
+@for $i from 1 through $max {
+ $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+}
+
+@return $remValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
-@function emCalc($values){
+@function emCalc($values) {
@return rem-calc($values);
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
-@function em-calc($values){
+@function em-calc($values) {
@return rem-calc($values);
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_accordion.scss b/_sass/foundation-components/_accordion.scss
index fb575095769..1676e7ee2d1 100644
--- a/_sass/foundation-components/_accordion.scss
+++ b/_sass/foundation-components/_accordion.scss
@@ -18,12 +18,12 @@ $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: calc($column-gutter / 2) !default;
$accordion-content-active-bg-color: $white !default;
// Mixin: accordion-container()
-// Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
+// Description: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
// Explicit Dependencies: a clearfix mixin *is* defined.
// Implicit Dependencies: None
@@ -38,55 +38,68 @@ $accordion-content-active-bg-color: $white !default;
// @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
// @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
// @params $font-color [ color or string ]: Color of the font for accordion
-// @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
-// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+// @params $font-size [ number ]: Specify the font-size of the text inside the navigation element
+// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accordion
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
+@mixin accordion-navigation($bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ) {
display: block;
margin-bottom: 0 !important;
- @if type-of($active_class) != "string" {
+
+ @if type-of($active_class) !="string" {
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
}
+
@else {
- &.#{ $active_class } > a {
+ &.#{ $active_class }>a {
background: $active-bg;
}
}
- > a {
+
+ >a {
background: $bg;
color: $font-color;
- @if type-of($padding) != number {
+
+ @if type-of($padding) !=number {
@warn "`#{$padding}` was read as #{type-of($padding)}";
- @if $accordion-navigation-padding != null {
+
+ @if $accordion-navigation-padding !=null {
@warn "#{$padding} was read as a #{type-of($padding)}";
@warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
padding: $accordion-navigation-padding;
}
+
@else {
@warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
padding: null;
}
}
+
@else {
padding: $padding;
}
+
display: block;
font-family: $font-family;
- @if type-of($font-size) != number {
+
+ @if type-of($font-size) !=number {
@warn "`#{$font-size}` was read as a #{type-of($font-size)}";
- @if $accordion-navigation-font-size != null {
+
+ @if $accordion-navigation-font-size !=null {
@warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
font-size: $accordion-navigation-font-size;
}
- @else{
+
+ @else {
@warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
font-size: null;
}
}
+
@else {
font-size: $font-size;
}
+
&:hover {
background: $hover-bg;
}
@@ -98,24 +111,31 @@ $accordion-content-active-bg-color: $white !default;
// @params $bg [ color ]: Background color for the content when it's visible
// @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
-@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
+@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
display: none;
- @if type-of($padding) != "number" {
+
+ @if type-of($padding) !="number" {
@warn "#{$padding} was read as a #{type-of($padding)}";
- @if $accordion-content-padding != null {
+
+ @if $accordion-content-padding !=null {
@warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
padding: $accordion-content-padding;
- } @else {
+ }
+
+ @else {
@warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
padding: null;
}
- } @else {
+ }
+
+ @else {
padding: $padding;
}
- @if type-of($active_class) != "string" {
+ @if type-of($active_class) !="string" {
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
}
+
@else {
&.#{$active_class} {
display: block;
@@ -129,23 +149,33 @@ $accordion-content-active-bg-color: $white !default;
.accordion {
@include clearfix;
margin-bottom: 0;
- .accordion-navigation, dd {
+
+ .accordion-navigation,
+ dd {
display: block;
margin-bottom: 0 !important;
- &.active > a { background: $accordion-navigation-active-bg-color; }
- > a {
+
+ &.active>a {
+ background: $accordion-navigation-active-bg-color;
+ }
+
+ >a {
background: $accordion-navigation-bg-color;
color: $accordion-navigation-font-color;
padding: $accordion-navigation-padding;
display: block;
font-family: $accordion-navigation-font-family;
font-size: $accordion-navigation-font-size;
- &:hover { background: $accordion-navigation-hover-bg-color; }
+
+ &:hover {
+ background: $accordion-navigation-hover-bg-color;
+ }
}
- > .content {
+ >.content {
display: none;
padding: $accordion-content-padding;
+
&.active {
display: block;
background: $accordion-content-active-bg-color;
@@ -154,4 +184,4 @@ $accordion-content-active-bg-color: $white !default;
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_alert-boxes.scss b/_sass/foundation-components/_alert-boxes.scss
index 493fbaa17e7..65028d72e41 100644
--- a/_sass/foundation-components/_alert-boxes.scss
+++ b/_sass/foundation-components/_alert-boxes.scss
@@ -66,7 +66,7 @@ $alert-transition-ease: ease-out !default;
// We use this mixin to add alert styles
//
// $bg - The background of the alert. Default: $primary-color.
-@mixin alert-style($bg:$primary-color) {
+@mixin alert-style($bg: $primary-color) {
// This finds the lightness percentage of the background color.
$bg-lightness: lightness($bg);
@@ -76,8 +76,13 @@ $alert-transition-ease: ease-out !default;
border-color: scale-color($bg, $lightness: $alert-function-factor);
// We control the text color for you based on the background color.
- @if $bg-lightness > 70% { color: $alert-font-color-alt; }
- @else { color: $alert-font-color; }
+ @if $bg-lightness >70% {
+ color: $alert-font-color-alt;
+ }
+
+ @else {
+ color: $alert-font-color;
+ }
}
@@ -88,20 +93,23 @@ $alert-transition-ease: ease-out !default;
line-height: 0;
position: absolute;
top: $alert-close-top;
- margin-top: -($alert-close-font-size / 2);
+ margin-top: -(calc($alert-close-font-size / 2));
#{$opposite-direction}: $alert-close-position;
color: $alert-close-color;
opacity: $alert-close-opacity;
background: $alert-close-background;
+
&:hover,
- &:focus { opacity: $alert-close-opacity-hover; }
+ &:focus {
+ opacity: $alert-close-opacity-hover;
+ }
}
// We use this to quickly create alerts with a single mixin.
//
// $bg - Background of alert. Default: $primary-color.
// $radius - Radius of alert box. Default: false.
-@mixin alert($bg:$primary-color, $radius:false) {
+@mixin alert($bg: $primary-color, $radius: false) {
@include alert-base;
@include alert-style($bg);
@include radius($radius);
@@ -112,17 +120,41 @@ $alert-transition-ease: ease-out !default;
.alert-box {
@include alert;
- .close { @include alert-close; }
+ .close {
+ @include alert-close;
+ }
+
+ &.radius {
+ @include radius($alert-radius);
+ }
- &.radius { @include radius($alert-radius); }
- &.round { @include radius($global-rounded); }
+ &.round {
+ @include radius($global-rounded);
+ }
- &.success { @include alert-style($success-color); }
- &.alert { @include alert-style($alert-color); }
- &.secondary { @include alert-style($secondary-color); }
- &.warning { @include alert-style($warning-color); }
- &.info { @include alert-style($info-color); }
- &.alert-close { opacity: 0}
+ &.success {
+ @include alert-style($success-color);
+ }
+
+ &.alert {
+ @include alert-style($alert-color);
+ }
+
+ &.secondary {
+ @include alert-style($secondary-color);
+ }
+
+ &.warning {
+ @include alert-style($warning-color);
+ }
+
+ &.info {
+ @include alert-style($info-color);
+ }
+
+ &.alert-close {
+ opacity: 0
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_block-grid.scss b/_sass/foundation-components/_block-grid.scss
index 5c7bf14611b..cf6b31cfeac 100644
--- a/_sass/foundation-components/_block-grid.scss
+++ b/_sass/foundation-components/_block-grid.scss
@@ -15,6 +15,7 @@ $block-grid-elements: 12 !default;
$block-grid-default-spacing: rem-calc(20) !default;
$align-block-grid-to-grid: false !default;
+
@if $align-block-grid-to-grid {
$block-grid-default-spacing: $column-gutter;
}
@@ -31,42 +32,54 @@ $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).
// $base-style - Apply a base style to block grid. Default: true.
-@mixin block-grid(
- $per-row:false,
- $spacing:$block-grid-default-spacing,
- $include-spacing:true,
- $base-style:true) {
+@mixin block-grid($per-row: false,
+ $spacing: $block-grid-default-spacing,
+ $include-spacing: true,
+ $base-style: true) {
@if $base-style {
display: block;
padding: 0;
+
@if $align-block-grid-to-grid {
margin: 0;
- } @else {
- margin: 0 (-$spacing/2);
}
+
+ @else {
+ margin: 0 calc(-1 * $spacing / 2);
+ }
+
@include clearfix;
&>li {
display: block;
height: auto;
float: $default-float;
+
@if $include-spacing {
- padding: 0 ($spacing/2) $spacing;
+ padding: 0 calc($spacing / 2) $spacing;
}
}
}
@if $per-row {
&>li {
- width: 100%/$per-row;
+ width: calc(100% / $per-row);
+
@if $include-spacing {
padding: 0 ($spacing/2) $spacing;
}
+
list-style: none;
- &:nth-of-type(1n) { clear: none; }
- &:nth-of-type(#{$per-row}n+1) { clear: both; }
+ &:nth-of-type(1n) {
+ clear: none;
+ }
+
+ &:nth-of-type(#{$per-row}n+1) {
+ clear: both;
+ }
+
@if $align-block-grid-to-grid {
@include block-grid-aligned($per-row, $spacing);
}
@@ -76,11 +89,13 @@ $block-grid-media-queries: true !default;
@mixin block-grid-aligned($per-row, $spacing) {
@for $i from 1 through $block-grid-elements {
- @if $per-row >= $i {
- $grid-column: '+' + $i;
- @if $per-row == $i {
+ @if $per-row >=$i {
+ $grid-column: '+'+$i;
+
+ @if $per-row ==$i {
$grid-column: '';
}
+
&:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
padding-right: ($spacing - (($spacing / $per-row) * $i));
@@ -92,10 +107,10 @@ $block-grid-media-queries: true !default;
// Generate presentational markup for block grid.
//
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size,$include-spacing) {
+@mixin block-grid-html-classes($size, $include-spacing) {
@for $i from 1 through $block-grid-elements {
.#{$size}-block-grid-#{($i)} {
- @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
+ @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
}
}
}
@@ -103,30 +118,32 @@ $block-grid-media-queries: true !default;
@include exports("block-grid") {
@if $include-html-block-grid-classes {
- [class*="block-grid-"] { @include block-grid; }
+ [class*="block-grid-"] {
+ @include block-grid;
+ }
@if $block-grid-media-queries {
@media #{$small-up} {
- @include block-grid-html-classes($size:small,$include-spacing:false);
+ @include block-grid-html-classes($size: small, $include-spacing: false);
}
@media #{$medium-up} {
- @include block-grid-html-classes($size:medium,$include-spacing:false);
+ @include block-grid-html-classes($size: medium, $include-spacing: false);
}
@media #{$large-up} {
- @include block-grid-html-classes($size:large,$include-spacing:false);
+ @include block-grid-html-classes($size: large, $include-spacing: false);
}
@if $include-xl-html-block-grid-classes {
@media #{$xlarge-up} {
- @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+ @include block-grid-html-classes($size: xlarge, $include-spacing: false);
}
@media #{$xxlarge-up} {
- @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+ @include block-grid-html-classes($size: xxlarge, $include-spacing: false);
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_button-groups.scss b/_sass/foundation-components/_button-groups.scss
index c989dfbaf07..5afb7556aec 100644
--- a/_sass/foundation-components/_button-groups.scss
+++ b/_sass/foundation-components/_button-groups.scss
@@ -19,30 +19,37 @@ $button-group-border-width: 1px !default;
//
// We use this to add styles for a button group container
-@mixin button-group-container($styles:true, $float:false) {
+@mixin button-group-container($styles: true, $float: false) {
@if $styles {
list-style: none;
margin: 0;
#{$default-float}: 0;
@include clearfix();
}
+
@if $float {
float: #{$default-float};
margin-#{$opposite-direction}: $button-bar-margin-opposite;
- & div { overflow: hidden; }
+
+ & div {
+ overflow: hidden;
+ }
}
}
// We use this to control styles for button groups
-@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
+@mixin button-group-style($radius: false, $even: false, $float: false, $orientation: horizontal) {
- > button, .button {
+ >button,
+ .button {
border-#{$default-float}: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
}
&:first-child {
- button, .button {
+
+ button,
+ .button {
border-#{$default-float}: 0;
}
}
@@ -52,84 +59,107 @@ $button-group-border-width: 1px !default;
margin: 0;
float: $float;
display: list-item;
+
// Make sure the first child doesn't get the negative margin.
- &:first-child { margin-#{$default-float}: 0; }
+ &:first-child {
+ margin-#{$default-float}: 0;
+ }
}
+
@else {
margin: 0 -2px;
display: inline-block;
}
- @if $orientation == vertical {
- display:block;
- margin:0;
- > button, .button {
+ @if $orientation ==vertical {
+ display: block;
+ margin: 0;
+
+ >button,
+ .button {
border-top: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
border-left-width: 0;
- margin:0;
+ margin: 0;
display: block;
}
&:first-child {
- button, .button {
+
+ button,
+ .button {
border-top: 0;
}
}
}
// We use these to control left and right radius on first/last buttons in the group.
- @if $radius == true {
+ @if $radius ==true {
+
&,
- & > a,
- & > button,
- & > .button { @include radius(0); }
+ &>a,
+ &>button,
+ &>.button {
+ @include radius(0);
+ }
+
&:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
+ &:first-child>a,
+ &:first-child>button,
+ &:first-child>.button {
+ @if $orientation ==vertical {
@include side-radius(top, $button-radius);
}
+
@else {
@include side-radius($default-float, $button-radius);
}
}
+
&:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
+ &:last-child>a,
+ &:last-child>button,
+ &:last-child>.button {
+ @if $orientation ==vertical {
@include side-radius(bottom, $button-radius);
}
+
@else {
@include side-radius($opposite-direction, $button-radius);
}
}
}
+
@else if $radius {
+
&,
- & > a,
- & > button,
- & > .button { @include radius(0); }
+ &>a,
+ &>button,
+ &>.button {
+ @include radius(0);
+ }
+
&:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
+ &:first-child>a,
+ &:first-child>button,
+ &:first-child>.button {
+ @if $orientation ==vertical {
@include side-radius(top, $radius);
}
+
@else {
@include side-radius($default-float, $radius);
}
}
+
&:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
+ &:last-child>a,
+ &:last-child>button,
+ &:last-child>.button {
+ @if $orientation ==vertical {
@include side-radius(bottom, $radius);
}
+
@else {
@include side-radius($opposite-direction, $radius);
}
@@ -138,60 +168,90 @@ $button-group-border-width: 1px !default;
// We use this to make the buttons even width across their container
@if $even {
- width: percentage((100/$even) / 100);
- button, .button { width: 100%; }
+ width: percentage(calc((100/$even) / 100));
+
+ button,
+ .button {
+ width: 100%;
+ }
}
}
@include exports("button-group") {
@if $include-html-button-classes {
- .button-group { @include button-group-container;
+ .button-group {
+ @include button-group-container;
- & > li { @include button-group-style(); }
+ &>li {
+ @include button-group-style();
+ }
&.stack {
- & > li { @include button-group-style($orientation:vertical); float: none; }
+ &>li {
+ @include button-group-style($orientation: vertical);
+ float: none;
+ }
}
&.stack-for-small {
- & > li {
- @include button-group-style($orientation:horizontal);
+ &>li {
+ @include button-group-style($orientation: horizontal);
+
@media #{$small-only} {
- @include button-group-style($orientation:vertical);
+ @include button-group-style($orientation: vertical);
}
}
}
- &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
- &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
- &.radius.stack-for-small > * {
+ &.radius>* {
+ @include button-group-style($radius: $button-radius, $float: null);
+ }
+
+ &.radius.stack>* {
+ @include button-group-style($radius: $button-radius, $float: null, $orientation: vertical);
+ }
+
+ &.radius.stack-for-small>* {
@media #{$medium-up} {
- @include button-group-style($radius:$button-radius, $orientation:horizontal);
+ @include button-group-style($radius: $button-radius, $orientation: horizontal);
}
+
@media #{$small-only} {
- @include button-group-style($radius:$button-radius, $orientation:vertical);
+ @include button-group-style($radius: $button-radius, $orientation: vertical);
}
}
- &.round > * { @include button-group-style($radius:$button-round, $float:null); }
- &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
- &.round.stack-for-small > * {
+ &.round>* {
+ @include button-group-style($radius: $button-round, $float: null);
+ }
+
+ &.round.stack>* {
+ @include button-group-style($radius: $button-med, $float: null, $orientation: vertical);
+ }
+
+ &.round.stack-for-small>* {
@media #{$medium-up} {
- @include button-group-style($radius:$button-round, $orientation:horizontal);
+ @include button-group-style($radius: $button-round, $orientation: horizontal);
}
+
@media #{$small-only} {
- @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); }
+ &.even-#{$i} li {
+ @include button-group-style($even: $i, $float: null);
+ }
}
}
.button-bar {
@include clearfix;
- .button-group { @include button-group-container($styles:false, $float:true); }
+
+ .button-group {
+ @include button-group-container($styles: false, $float: true);
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_dropdown-buttons.scss b/_sass/foundation-components/_dropdown-buttons.scss
index 3e45e5a5e0c..715c9925709 100644
--- a/_sass/foundation-components/_dropdown-buttons.scss
+++ b/_sass/foundation-components/_dropdown-buttons.scss
@@ -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: calc(-1 * $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: calc(-1 * $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: calc(-1 * $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: calc(-1 * $button-pip-lrg / 2) + rem-calc(3) !default;
// @mixins
//
@@ -52,7 +52,7 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
// $base-style - Add in base-styles. This can be set to false. Default:true
-@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
+@mixin dropdown-button($padding: medium, $pip-color: $white, $base-style: true) {
// We add in base styles, but they can be negated by setting to 'false'.
@if $base-style {
@@ -73,8 +73,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with tiny buttons, use these styles
- @if $padding == tiny {
+ @if $padding ==tiny {
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+
&:after {
border-width: $dropdown-button-pip-size-tny;
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
@@ -83,8 +84,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with small buttons, use these styles
- @if $padding == small {
+ @if $padding ==small {
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+
&::after {
border-width: $dropdown-button-pip-size-sml;
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
@@ -93,8 +95,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with default (medium) buttons, use these styles
- @if $padding == medium {
+ @if $padding ==medium {
padding-#{$opposite-direction}: $dropdown-button-padding-med;
+
&::after {
border-width: $dropdown-button-pip-size-med;
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
@@ -103,8 +106,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
}
// If we're dealing with large buttons, use these styles
- @if $padding == large {
+ @if $padding ==large {
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+
&::after {
border-width: $dropdown-button-pip-size-lrg;
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
@@ -114,17 +118,34 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
@if $pip-color {
- &::after { border-color: $pip-color transparent transparent transparent; }
+ &::after {
+ border-color: $pip-color transparent transparent transparent;
+ }
}
}
@include exports("dropdown-button") {
@if $include-html-button-classes {
- .dropdown.button, button.dropdown { @include dropdown-button;
- &.tiny { @include dropdown-button(tiny,$base-style:false); }
- &.small { @include dropdown-button(small,$base-style:false); }
- &.large { @include dropdown-button(large,$base-style:false); }
- &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+
+ .dropdown.button,
+ button.dropdown {
+ @include dropdown-button;
+
+ &.tiny {
+ @include dropdown-button(tiny, $base-style: false);
+ }
+
+ &.small {
+ @include dropdown-button(small, $base-style: false);
+ }
+
+ &.large {
+ @include dropdown-button(large, $base-style: false);
+ }
+
+ &.secondary:after {
+ border-color: $dropdown-button-pip-color-alt transparent transparent transparent;
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_forms.scss b/_sass/foundation-components/_forms.scss
index 80124fd0653..d89e23d725d 100644
--- a/_sass/foundation-components/_forms.scss
+++ b/_sass/foundation-components/_forms.scss
@@ -22,7 +22,7 @@ $form-label-font-color: scale-color($black, $lightness: 30%) !default;
$form-label-small-transform: capitalize !default;
$form-label-bottom-margin: 0 !default;
$input-font-family: inherit !default;
-$input-font-color: rgba(0,0,0,0.75) !default;
+$input-font-color: rgba(0, 0, 0, 0.75) !default;
$input-font-size: rem-calc(14) !default;
$input-bg-color: $white !default;
$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
@@ -33,7 +33,7 @@ $input-border-width: 1px !default;
$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-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !default;
$input-include-glowing-effect: true !default;
// We use these to style the fieldset border and spacing.
@@ -84,26 +84,36 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to give us form styles for rows inside of forms
@mixin form-row-base {
- .row { margin: 0 ((-$form-spacing) / 2);
+ .row {
+ margin: 0 calc((-1 * $form-spacing) / 2);
.column,
- .columns { padding: 0 ($form-spacing / 2); }
+ .columns {
+ padding: 0 calc($form-spacing / 2);
+ }
// Use this to collapse the margins of a form row
- &.collapse { margin: 0;
+ &.collapse {
+ margin: 0;
.column,
- .columns { padding: 0; }
+ .columns {
+ padding: 0;
+ }
+
input {
@include side-radius($opposite-direction, 0);
}
}
}
+
input.column,
input.columns,
textarea.column,
- textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
+ textarea.columns {
+ padding-#{$default-float}: calc($form-spacing / 2);
+ }
}
// @MIXIN
@@ -112,30 +122,35 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@mixin form-element {
background-color: $input-bg-color;
font-family: $input-font-family;
+
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
+
box-shadow: $input-box-shadow;
color: $input-font-color;
display: block;
font-size: $input-font-size;
margin: 0 0 $form-spacing 0;
- padding: $form-spacing / 2;
+ padding: calc($form-spacing / 2);
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
width: 100%;
@include box-sizing(border-box);
+
@if $input-include-glowing-effect {
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
}
+
// Basic focus styles
&:focus {
background: $input-focus-bg-color;
border-color: $input-focus-border-color;
outline: none;
}
- // Disbaled Styles
+
+ // Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
@@ -156,7 +171,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// $alignment - Alignment options. Default: false. Options: [right, inline, false]
// $base-style - Control whether or not the base styles come through. Default: true.
-@mixin form-label($alignment:false, $base-style:true) {
+@mixin form-label($alignment: false, $base-style: true) {
// Control whether or not the base styles come through.
@if $base-style {
@@ -170,13 +185,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
// Alignment options
- @if $alignment == right {
+ @if $alignment ==right {
float: none !important;
text-align: right;
}
- @else if $alignment == inline {
+
+ @else if $alignment ==inline {
margin: 0 0 $form-spacing 0;
- padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
+ padding: calc($form-spacing / 2) + rem-calc($input-border-width) 0;
}
}
@@ -203,7 +219,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default:false
//
-@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+@mixin prefix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -211,8 +227,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-#{$opposite-direction}: none;
// Control the font color based on background brightness
- @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
- @else { color: $input-prefix-font-color-alt; }
+ @if $bg-lightness >70% or $bg ==yellow {
+ color: $input-prefix-font-color;
+ }
+
+ @else {
+ color: $input-prefix-font-color-alt;
+ }
}
@if $border {
@@ -235,7 +256,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to create postfix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
-@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+@mixin postfix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -243,8 +264,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-#{$default-float}: none;
// Control the font color based on background brightness
- @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
- @else { color: $input-prefix-font-color-alt; }
+ @if $bg-lightness >70% or $bg ==yellow {
+ color: $input-prefix-font-color;
+ }
+
+ @else {
+ color: $input-prefix-font-color-alt;
+ }
}
@if $border {
@@ -282,7 +308,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// We use this mixin to control border and background color of error inputs
// $color - Default: $alert-color (found in settings file)
-@mixin form-error-color($color:$alert-color) {
+@mixin form-error-color($color: $alert-color) {
border-color: $color;
background-color: rgba($color, 0.1);
@@ -297,13 +323,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// We use this simple mixin to style labels for error inputs
// $color - Default:$alert-color. Found in settings file
-@mixin form-label-error-color($color:$alert-color) { color: $color; }
+@mixin form-label-error-color($color: $alert-color) {
+ color: $color;
+}
// @MIXIN
//
// We use this mixin to create error message styles
// $bg - Default: $alert-color (Found in settings file)
-@mixin form-error-message($bg:$input-error-message-bg-color) {
+@mixin form-error-message($bg: $input-error-message-bg-color) {
display: block;
padding: $input-error-message-padding;
margin-top: $input-error-message-top;
@@ -315,12 +343,18 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We can control the text color based on the brightness of the background.
$bg-lightness: lightness($bg);
background: $bg;
- @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
- @else { color: $input-error-message-font-color-alt; }
+
+ @if $bg-lightness < 70% or $bg ==yellow {
+ color: $input-error-message-font-color;
+ }
+
+ @else {
+ color: $input-error-message-font-color-alt;
+ }
}
// We use this mixin to style select elements
-@mixin form-select {
+@mixin form-select {
-webkit-appearance: none !important;
border-radius: 0;
background-color: $select-bg-color;
@@ -335,25 +369,32 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
// We can safely use leftmost and rightmost now
- background-position: if($text-direction == 'rtl', 0%, 100%) center;
+ background-position: if($text-direction =='rtl', 0%, 100%) center;
background-repeat: no-repeat;
+
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
- padding: ($form-spacing / 2);
+
+ padding: calc($form-spacing / 2);
font-size: $input-font-size;
font-family: $body-font-family;
color: $input-font-color;
line-height: normal;
@include radius(0);
- &.radius { @include radius($global-radius); }
+
+ &.radius {
+ @include radius($global-radius);
+ }
+
&:hover {
background-color: $select-hover-bg-color;
border-color: $input-focus-border-color;
}
+
// Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
@@ -362,29 +403,44 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
// We use this mixin to turn on/off HTML5 number spinners
-@mixin html5number($browser, $on:true) {
+@mixin html5number($browser, $on: true) {
@if $on==false {
- @if $browser==webkit {
- -webkit-appearance: none;
- margin: 0;
- } @else if $browser==moz {
- -moz-appearance: textfield;
- }
+ @if $browser==webkit {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ @else if $browser==moz {
+ -moz-appearance: textfield;
+ }
}
}
@include exports("form") {
@if $include-html-form-classes {
+
/* Standard Forms */
- form { margin: 0 0 $form-spacing; }
+ form {
+ margin: 0 0 $form-spacing;
+ }
/* Using forms within rows, we need to set some defaults */
- form .row { @include form-row-base; }
+ form .row {
+ @include form-row-base;
+ }
/* Label Styles */
- label { @include form-label;
- &.right { @include form-label(right,false); }
- &.inline { @include form-label(inline,false); }
+ label {
+ @include form-label;
+
+ &.right {
+ @include form-label(right, false);
+ }
+
+ &.inline {
+ @include form-label(inline, false);
+ }
+
/* Styles for required inputs */
small {
text-transform: $form-label-small-transform;
@@ -394,29 +450,62 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Attach elements to the beginning or end of an input */
.prefix,
- .postfix { @include prefix-postfix-base; }
+ .postfix {
+ @include prefix-postfix-base;
+ }
/* Adjust padding, alignment and radius if pre/post element is a button */
- .postfix.button { @include button-size(false,false); @include postfix(false, false, true); }
- .prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
+ .postfix.button {
+ @include button-size(false, false);
+ @include postfix(false, false, true);
+ }
- .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
- .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
- .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
- .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ .prefix.button {
+ @include button-size(false, false);
+ @include prefix(false, false, true);
+ }
+
+ .prefix.button.radius {
+ @include radius(0);
+ @include side-radius($default-float, $button-radius);
+ }
+
+ .postfix.button.radius {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-radius);
+ }
+
+ .prefix.button.round {
+ @include radius(0);
+ @include side-radius($default-float, $button-round);
+ }
+
+ .postfix.button.round {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-round);
+ }
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
- span.prefix,label.prefix { @include prefix(); }
- span.postfix,label.postfix { @include postfix(); }
+ span.prefix,
+ label.prefix {
+ @include prefix();
+ }
+
+ span.postfix,
+ label.postfix {
+ @include postfix();
+ }
/* We use this to get basic styling on all basic form elements */
#{text-inputs(all, 'input')} {
-webkit-appearance: none;
border-radius: 0;
@include form-element;
- @if $input-include-glowing-effect == false {
- @include single-transition(all, 0.15s, linear);
+
+ @if $input-include-glowing-effect ==false {
+ @include single-transition(all, 0.15s, linear);
}
+
&.radius {
@include radius($input-border-radius);
}
@@ -425,28 +514,63 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
form {
.row {
.prefix-radius.row.collapse {
+
input,
textarea,
- select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
- .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
+ select {
+ @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); }
- .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+ select {
+ @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); }
- .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+ select {
+ @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); }
- .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ select {
+ @include radius(0);
+ @include side-radius($default-float, $button-round);
+ }
+
+ .postfix {
+ @include radius(0);
+ @include side-radius($opposite-direction, $button-round);
+ }
}
}
}
@@ -461,10 +585,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
height: auto;
}
- /* Not allow resize out of parent */
- textarea {
- max-width: 100%;
- }
+ /* Not allow resize out of parent */
+ textarea {
+ max-width: 100%;
+ }
/* Add height value for select elements to match text input height */
select {
@@ -480,8 +604,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
margin: 0 0 $form-spacing 0;
}
- input[type="checkbox"] + label,
- input[type="radio"] + label {
+ input[type="checkbox"]+label,
+ input[type="radio"]+label {
display: inline-block;
margin-#{$default-float}: $form-spacing * .5;
margin-#{$opposite-direction}: $form-spacing;
@@ -491,13 +615,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Normalize file input width */
input[type="file"] {
- width:100%;
+ width: 100%;
}
/* HTML5 Number spinners settings */
input[type=number] {
@include html5number(moz, $input-number-spinners)
}
+
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
@include html5number(webkit, $input-number-spinners);
@@ -511,17 +636,27 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Error Handling */
#{data('abide')} {
- .error small.error, .error span.error, span.error, small.error {
+
+ .error small.error,
+ .error span.error,
+ span.error,
+ small.error {
@include form-error-message;
}
- span.error, small.error { display: none; }
+
+ span.error,
+ small.error {
+ display: none;
+ }
}
- span.error, small.error {
+ span.error,
+ small.error {
@include form-error-message;
}
.error {
+
input,
textarea,
select {
@@ -542,8 +677,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@include form-error-message;
}
- > label {
- > small {
+ >label {
+ >small {
color: scale-color($form-label-font-color, $lightness: 15%);
background: transparent;
padding: 0;
@@ -565,6 +700,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
select.error {
margin-bottom: 0;
}
- label.error { @include form-label-error-color; }
+
+ label.error {
+ @include form-label-error-color;
+ }
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_global.scss b/_sass/foundation-components/_global.scss
index 37d96eb1dd4..d0137070cec 100644
--- a/_sass/foundation-components/_global.scss
+++ b/_sass/foundation-components/_global.scss
@@ -30,7 +30,7 @@ $base-line-height: 1.5 !default;
//
// We use this to control border radius.
// $radius - Default: $global-radius || 4px
-@mixin radius($radius:$global-radius) {
+@mixin radius($radius: $global-radius) {
@if $radius {
border-radius: $radius;
}
@@ -40,13 +40,15 @@ $base-line-height: 1.5 !default;
//
// We use this to create equal side border radius on elements.
// $side - Options: left, right, top, bottom
-@mixin side-radius($side, $radius:$global-radius) {
- @if ($side == left or $side == right) {
+@mixin side-radius($side, $radius: $global-radius) {
+ @if ($side ==left or $side ==right) {
-webkit-border-bottom-#{$side}-radius: $radius;
-webkit-border-top-#{$side}-radius: $radius;
border-bottom-#{$side}-radius: $radius;
border-top-#{$side}-radius: $radius;
- } @else {
+ }
+
+ @else {
-webkit-#{$side}-left-radius: $radius;
-webkit-#{$side}-right-radius: $radius;
border-#{$side}-left-radius: $radius;
@@ -58,11 +60,14 @@ $base-line-height: 1.5 !default;
//
// We can control whether or not we have inset shadows edges.
// $active - Default: true, Options: false
-@mixin inset-shadow($active:true) {
+@mixin inset-shadow($active: true) {
box-shadow: $shiny-edge-size $shiny-edge-color inset;
- @if $active { &:active {
- box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+ @if $active {
+ &:active {
+ box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+ }
+ }
}
// @mixins
@@ -71,17 +76,17 @@ $base-line-height: 1.5 !default;
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
-@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+@mixin single-transition($property: all, $speed: 300ms, $ease: ease-out) {
transition: $property $speed $ease;
}
// @mixins
//
// We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type:border-box) {
+@mixin box-sizing($type: border-box) {
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
- -moz-box-sizing: $type; // Firefox < 29
- box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+ -moz-box-sizing: $type; // Firefox < 29
+ box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}
// @mixins
@@ -96,19 +101,23 @@ $base-line-height: 1.5 !default;
width: 0;
height: 0;
border: inset $triangle-size;
- @if ($triangle-direction == top) {
+
+ @if ($triangle-direction ==top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
}
- @if ($triangle-direction == bottom) {
+
+ @if ($triangle-direction ==bottom) {
border-color: transparent transparent $triangle-color transparent;
border-bottom-style: solid;
}
- @if ($triangle-direction == left) {
+
+ @if ($triangle-direction ==left) {
border-color: transparent transparent transparent $triangle-color;
border-left-style: solid;
}
- @if ($triangle-direction == right) {
+
+ @if ($triangle-direction ==right) {
border-color: transparent $triangle-color transparent transparent;
border-right-style: solid;
}
@@ -136,29 +145,33 @@ $base-line-height: 1.5 !default;
@if $top {
top: $top;
}
+
@else {
top: 50%;
margin-top: (-$width/2);
}
+
@if $left {
left: $left;
}
+
@else {
left: ($tabbar-menu-icon-width - $width)/2;
}
}
+
@else {
top: 50%;
- margin-top: -($width/2);
+ margin-top: -(calc($width / 2));
#{$opposite-direction}: $topbar-link-padding;
}
- box-shadow:
- 0 0 0 $thickness $color,
- 0 $gap + $thickness 0 $thickness $color,
- 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+ box-shadow: 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 0 0 $thickness $hover-color,
@@ -169,8 +182,16 @@ $base-line-height: 1.5 !default;
// We use this to do clear floats
@mixin clearfix {
- &:before, &:after { content: " "; display: table; }
- &:after { clear: both; }
+
+ &:before,
+ &:after {
+ content: " ";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
}
// @mixins
@@ -179,7 +200,7 @@ $base-line-height: 1.5 !default;
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
// $fade-time - Default: 300ms
// $glowing-effect-color - Default: fade-out($primary-color, .25)
-@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+@mixin block-glowing-effect($selector: focus, $fade-time: 300ms, $glowing-effect-color: fade-out($primary-color, .25)) {
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
@@ -193,8 +214,8 @@ $base-line-height: 1.5 !default;
// We use this to translate elements in 2D
// $horizontal: Default: 0
// $vertical: Default: 0
-@mixin translate2d($horizontal:0, $vertical:0) {
- transform: translate($horizontal,$vertical)
+@mixin translate2d($horizontal: 0, $vertical: 0) {
+ transform: translate($horizontal, $vertical)
}
// @mixins
@@ -220,33 +241,33 @@ $base-line-height: 1.5 !default;
clip: auto;
}
-$white : #FFFFFF !default;
-$ghost : #FAFAFA !default;
-$snow : #F9F9F9 !default;
-$vapor : #F6F6F6 !default;
-$white-smoke : #F5F5F5 !default;
-$silver : #EFEFEF !default;
-$smoke : #EEEEEE !default;
-$gainsboro : #DDDDDD !default;
-$iron : #CCCCCC !default;
-$base : #AAAAAA !default;
-$aluminum : #999999 !default;
-$jumbo : #888888 !default;
-$monsoon : #777777 !default;
-$steel : #666666 !default;
-$charcoal : #555555 !default;
-$tuatara : #444444 !default;
-$oil : #333333 !default;
-$jet : #222222 !default;
-$black : #000000 !default;
+$white : #FFFFFF !default;
+$ghost : #FAFAFA !default;
+$snow : #F9F9F9 !default;
+$vapor : #F6F6F6 !default;
+$white-smoke : #F5F5F5 !default;
+$silver : #EFEFEF !default;
+$smoke : #EEEEEE !default;
+$gainsboro : #DDDDDD !default;
+$iron : #CCCCCC !default;
+$base : #AAAAAA !default;
+$aluminum : #999999 !default;
+$jumbo : #888888 !default;
+$monsoon : #777777 !default;
+$steel : #666666 !default;
+$charcoal : #555555 !default;
+$tuatara : #444444 !default;
+$oil : #333333 !default;
+$jet : #222222 !default;
+$black : #000000 !default;
// We use these as default colors throughout
-$primary-color: #008CBA !default; // bondi-blue
+$primary-color: #008CBA !default; // bondi-blue
$secondary-color: #e7e7e7 !default; // white-lilac
-$alert-color: #f04124 !default; // cinnabar
-$success-color: #43AC6A !default; // sea-green
-$warning-color: #f08a24 !default; // carrot
-$info-color: #a0d3e8 !default; // cornflower
+$alert-color: #f04124 !default; // cinnabar
+$success-color: #43AC6A !default; // sea-green
+$warning-color: #f08a24 !default; // carrot
+$info-color: #a0d3e8 !default; // cornflower
// We use these to define default font stacks
$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
@@ -271,10 +292,13 @@ $font-smoothing: antialiased !default;
$text-direction: ltr !default;
$default-float: left !default;
$opposite-direction: right !default;
-@if $text-direction == ltr {
+
+@if $text-direction ==ltr {
$default-float: left;
$opposite-direction: right;
-} @else {
+}
+
+@else {
$default-float: right;
$opposite-direction: left;
}
@@ -296,11 +320,21 @@ $include-html-global-classes: $include-html-classes !default;
$column-gutter: rem-calc(30) !default;
// Media Query Ranges
-$small-range: (0, 40em) !default;
-$medium-range: (40.063em, 64em) !default;
-$large-range: (64.063em, 90em) !default;
-$xlarge-range: (90.063em, 120em) !default;
-$xxlarge-range: (120.063em, 99999999em) !default;
+$small-range: (
+ 0,
+ 40em) !default;
+$medium-range: (
+ 40.063em,
+ 64em) !default;
+$large-range: (
+ 64.063em,
+ 90em) !default;
+$xlarge-range: (
+ 90.063em,
+ 120em) !default;
+$xxlarge-range: (
+ 120.063em,
+ 99999999em) !default;
$screen: "only screen" !default;
@@ -340,7 +374,7 @@ $cursor-text-value: text !default;
@include exports("global") {
- // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+ // Meta styles are included in all builds, as they are a dependency of the Javascript.
// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.
@@ -350,131 +384,164 @@ $cursor-text-value: text !default;
meta.foundation-mq-small {
font-family: "/" + unquote($small-up) + "/";
- width: lower-bound($small-range);
- }
+ width: lower-bound($small-range
+ );
+}
- meta.foundation-mq-small-only {
- font-family: "/" + unquote($small-only) + "/";
- 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 {
+ 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-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 {
+ 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-large-only {
- font-family: "/" + unquote($large-only) + "/";
- width: lower-bound($large-range);
+meta.foundation-mq-xxlarge {
+ font-family: "/" + unquote($xxlarge-up) + "/";
+ width: lower-bound($xxlarge-range);
+}
+
+meta.foundation-data-attribute-namespace {
+ font-family: #{$namespace};
+}
+
+@if $include-html-global-classes {
+
+ // Must be 100% for off canvas to work
+ html,
+ body {
+ height: 100%;
}
- meta.foundation-mq-xlarge {
- font-family: "/" + unquote($xlarge-up) + "/";
- width: lower-bound($xlarge-range);
+ // Set box-sizing globally to handle padding and border widths
+ *,
+ *:before,
+ *:after {
+ @include box-sizing(border-box);
}
- meta.foundation-mq-xlarge-only {
- font-family: "/" + unquote($xlarge-only) + "/";
- width: lower-bound($xlarge-range);
+ html,
+ body {
+ font-size: $base-font-size;
}
- meta.foundation-mq-xxlarge {
- font-family: "/" + unquote($xxlarge-up) + "/";
- width: lower-bound($xxlarge-range);
+ // Default body styles
+ body {
+ background: $body-bg;
+ color: $body-font-color;
+ padding: 0;
+ margin: 0;
+ font-family: $body-font-family;
+ font-weight: $body-font-weight;
+ font-style: $body-font-style;
+ line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
+ position: relative;
+ cursor: $cursor-auto-value;
}
- meta.foundation-data-attribute-namespace {
- font-family: #{$namespace};
+ a:hover {
+ cursor: $cursor-pointer-value;
}
- @if $include-html-global-classes {
+ // Grid Defaults to get images and embeds to work properly
+ img {
+ max-width: 100%;
+ height: auto;
+ }
- // Must be 100% for off canvas to work
- html, body { height: 100%; }
+ img {
+ -ms-interpolation-mode: bicubic;
+ }
- // Set box-sizing globally to handle padding and border widths
- *,
- *:before,
- *:after {
- @include box-sizing(border-box);
- }
+ #map_canvas,
+ .map_canvas {
- html,
- body { font-size: $base-font-size; }
-
- // Default body styles
- body {
- background: $body-bg;
- color: $body-font-color;
- padding: 0;
- margin: 0;
- font-family: $body-font-family;
- font-weight: $body-font-weight;
- font-style: $body-font-style;
- line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
- position: relative;
- cursor: $cursor-auto-value;
+ img,
+ embed,
+ object {
+ max-width: none !important;
}
+ }
- a:hover { cursor: $cursor-pointer-value; }
-
- // Grid Defaults to get images and embeds to work properly
- img { max-width: 100%; height: auto; }
-
- img { -ms-interpolation-mode: bicubic; }
+ // Miscellaneous useful HTML classes
+ .left {
+ float: left !important;
+ }
- #map_canvas,
- .map_canvas {
- img,
- embed,
- object { max-width: none !important;
- }
- }
+ .right {
+ float: right !important;
+ }
- // Miscellaneous useful HTML classes
- .left { float: left !important; }
- .right { float: right !important; }
- .clearfix { @include clearfix; }
+ .clearfix {
+ @include clearfix;
+ }
- // Hide visually and from screen readers
- .hide {
- display: none !important;
- visibility: hidden;
- }
+ // Hide visually and from screen readers
+ .hide {
+ display: none !important;
+ visibility: hidden;
+ }
- // Hide visually and from screen readers, but maintain layout
- .invisible { visibility: hidden; }
+ // Hide visually and from screen readers, but maintain layout
+ .invisible {
+ visibility: hidden;
+ }
- // Font smoothing
- // Antialiased font smoothing works best for light text on a dark background.
- // Apply to single elements instead of globally to body.
- // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
- .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+ // Font smoothing
+ // Antialiased font smoothing works best for light text on a dark background.
+ // Apply to single elements instead of globally to body.
+ // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
+ .antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
- // Get rid of gap under images by making them display: inline-block; by default
- img {
- display: inline-block;
- vertical-align: middle;
- }
+ // Get rid of gap under images by making them display: inline-block; by default
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ }
- //
- // Global resets for forms
- //
+ //
+ // Global resets for forms
+ //
- // Make sure textarea takes on height automatically
- textarea { height: auto; min-height: 50px; }
+ // Make sure textarea takes on height automatically
+ textarea {
+ height: auto;
+ min-height: 50px;
+ }
- // Make select elements 100% width by default
- select { width: 100%; }
+ // Make select elements 100% width by default
+ select {
+ width: 100%;
}
}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_grid.scss b/_sass/foundation-components/_grid.scss
index aa4e77cdef7..8ad18546502 100644
--- a/_sass/foundation-components/_grid.scss
+++ b/_sass/foundation-components/_grid.scss
@@ -29,7 +29,7 @@ $last-child-float: $opposite-direction !default;
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
- @return percentage(($colNumber / $totalColumns));
+ @return percentage(calc($colNumber / $totalColumns));
}
//
@@ -43,24 +43,24 @@ $last-child-float: $opposite-direction !default;
@mixin grid-row($behavior: false) {
// use @include grid-row(nest); to include a nested row
- @if $behavior == nest {
+ @if $behavior ==nest {
width: auto;
- margin-#{$default-float}: -($column-gutter/2);
- margin-#{$opposite-direction}: -($column-gutter/2);
+ margin-#{$default-float}: - calc($column-gutter/2);
+ margin-#{$opposite-direction}: - calc($column-gutter/2);
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
// use @include grid-row(collapse); to collapsed a container row margins
- @else if $behavior == collapse {
+ @else if $behavior ==collapse {
width: 100%;
margin: 0;
max-width: $row-width;
}
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
- @else if $behavior == nest-collapse {
+ @else if $behavior ==nest-collapse {
width: auto;
margin: 0;
max-width: none;
@@ -90,16 +90,15 @@ $last-child-float: $opposite-direction !default;
// $pull - # of columns to pull. Default: false.
// $collapse - Get rid of gutter padding on column? Default: false.
// $float - Should this float? Default: true. Options: true, false, left, right.
-@mixin grid-column(
- $columns:false,
- $last-column:false,
- $center:false,
- $offset:false,
- $push:false,
- $pull:false,
- $collapse:false,
- $float:true,
- $position:false) {
+@mixin grid-column($columns: false,
+ $last-column: false,
+ $center: false,
+ $offset: false,
+ $push: false,
+ $pull: false,
+ $collapse: false,
+ $float: true,
+ $position: false) {
// If positioned for default .column, include relative position
// push and pull require position set
@@ -115,9 +114,9 @@ $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);
+ @else if $collapse ==false {
+ padding-left: calc($column-gutter / 2);
+ padding-right: calc($column-gutter / 2);
}
// If a column number is given, calculate width
@@ -125,17 +124,34 @@ $last-child-float: $opposite-direction !default;
width: grid-calc($columns, $total-columns);
// If last column, float naturally instead of to the right
- @if $last-column { float: $opposite-direction; }
+ @if $last-column {
+ float: $opposite-direction;
+ }
}
// Source Ordering, adds left/right depending on which you use.
- @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
- @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
+ @if $push {
+ #{$default-float}: grid-calc($push, $total-columns);
+ #{$opposite-direction}: auto;
+ }
+
+ @if $pull {
+ #{$opposite-direction}: grid-calc($pull, $total-columns);
+ #{$default-float}: auto;
+ }
@if $float {
- @if $float == left or $float == true { float: $default-float; }
- @else if $float == right { float: $opposite-direction; }
- @else { float: none; }
+ @if $float ==left or $float ==true {
+ float: $default-float;
+ }
+
+ @else if $float ==right {
+ float: $opposite-direction;
+ }
+
+ @else {
+ float: none;
+ }
}
// If centered, get rid of float and add appropriate margins
@@ -146,7 +162,9 @@ $last-child-float: $opposite-direction !default;
}
// If offset, calculate appropriate margins
- @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }
+ @if $offset {
+ margin-#{$default-float}: grid-calc($offset, $total-columns) !important;
+ }
}
@@ -157,23 +175,30 @@ $last-child-float: $opposite-direction !default;
@for $i from 0 through $total-columns - 1 {
.#{$size}-push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.#{$size}-pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
.column,
- .columns { @include grid-column($columns:false, $position:true); }
+ .columns {
+ @include grid-column($columns: false, $position: true);
+ }
@for $i from 1 through $total-columns {
- .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+ .#{$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}-offset-#{$i} {
+ @include grid-column($offset: $i, $collapse: null, $float: false);
+ }
}
.#{$size}-reset-order {
@@ -185,7 +210,9 @@ $last-child-float: $opposite-direction !default;
}
.column.#{$size}-centered,
- .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+ .columns.#{$size}-centered {
+ @include grid-column($center: true, $collapse: null, $float: false);
+ }
.column.#{$size}-uncentered,
.columns.#{$size}-uncentered {
@@ -196,7 +223,7 @@ $last-child-float: $opposite-direction !default;
// Fighting [class*="column"] + [class*="column"]:last-child
.column.#{$size}-centered:last-child,
- .columns.#{$size}-centered:last-child{
+ .columns.#{$size}-centered:last-child {
float: none;
}
@@ -211,20 +238,28 @@ $last-child-float: $opposite-direction !default;
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;
- }
- }
- }
+ .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") {
@@ -233,57 +268,81 @@ $last-child-float: $opposite-direction !default;
@include grid-row;
&.collapse {
- > .column,
- > .columns { @include grid-column($collapse:true, $float:false); }
- .row {margin-left:0; margin-right:0;}
+ >.column,
+ >.columns {
+ @include grid-column($collapse: true, $float: false);
+ }
+
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
- .row { @include grid-row($behavior:nest);
- &.collapse { @include grid-row($behavior:nest-collapse); }
+ .row {
+ @include grid-row($behavior: nest);
+
+ &.collapse {
+ @include grid-row($behavior: nest-collapse);
+ }
}
}
.column,
- .columns { @include grid-column($columns:$total-columns); }
+ .columns {
+ @include grid-column($columns: $total-columns);
+ }
- [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
- [class*="column"] + [class*="column"].end { float: $default-float; }
+ [class*="column"]+[class*="column"]:last-child {
+ float: $last-child-float;
+ }
+
+ [class*="column"]+[class*="column"].end {
+ float: $default-float;
+ }
@media #{$small-up} {
- @include grid-html-classes($size:small);
+ @include grid-html-classes($size: small);
}
@media #{$medium-up} {
- @include grid-html-classes($size:medium);
+ @include grid-html-classes($size: medium);
+
// Old push and pull classes
@for $i from 0 through $total-columns - 1 {
.push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
}
+
@media #{$large-up} {
- @include grid-html-classes($size:large);
+ @include grid-html-classes($size: large);
+
@for $i from 0 through $total-columns - 1 {
.push-#{$i} {
- @include grid-column($push:$i, $collapse:null, $float:false);
+ @include grid-column($push: $i, $collapse: null, $float: false);
}
+
.pull-#{$i} {
- @include grid-column($pull:$i, $collapse:null, $float:false);
+ @include grid-column($pull: $i, $collapse: null, $float: false);
}
}
}
}
+
@if $include-xl-html-grid-classes {
@media #{$xlarge-up} {
- @include grid-html-classes($size:xlarge);
+ @include grid-html-classes($size: xlarge);
}
+
@media #{$xxlarge-up} {
- @include grid-html-classes($size:xxlarge);
+ @include grid-html-classes($size: xxlarge);
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_panels.scss b/_sass/foundation-components/_panels.scss
index b3018e32e05..b7bba360f3a 100644
--- a/_sass/foundation-components/_panels.scss
+++ b/_sass/foundation-components/_panels.scss
@@ -29,6 +29,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
//
@@ -36,7 +37,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
-@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
+@mixin panel($bg: $panel-bg, $padding: $panel-padding, $adjust: $panel-header-adjust) {
@if $bg {
$bg-lightness: lightness($bg);
@@ -48,26 +49,70 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
padding: $padding;
background: $bg;
- @if $bg-lightness >= 50% { color: $panel-font-color; }
- @else { color: $panel-font-color-alt; }
+
+ @if $bg-lightness >=50% {
+ color: $panel-font-color;
+ }
+
+ @else {
+ color: $panel-font-color-alt;
+ }
// Respect the padding, fool.
- &>:first-child { margin-top: 0; }
- &>:last-child { margin-bottom: 0; }
+ &>:first-child {
+ margin-top: 0;
+ }
+
+ &>:last-child {
+ margin-bottom: 0;
+ }
@if $adjust {
+
// We set the font color based on the darkness of the bg.
- @if $bg-lightness >= 50% {
- h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+ @if $bg-lightness >=50% {
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ li,
+ dl {
+ color: $panel-font-color;
+ }
}
- @else {
- h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+
+ @else {
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ li,
+ dl {
+ color: $panel-font-color-alt;
+ }
}
// reset header line-heights for panels
- h1,h2,h3,h4,h5,h6 {
- line-height: 1; margin-bottom: rem-calc(20) / 2;
- &.subheader { line-height: 1.4; }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1;
+ margin-bottom: calc(rem-calc(20) / 2);
+
+ &.subheader {
+ line-height: 1.4;
+ }
}
}
}
@@ -77,10 +122,12 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
@if $include-html-panel-classes {
/* Panels */
- .panel { @include panel;
+ .panel {
+ @include panel;
&.callout {
@include panel(scale-color($primary-color, $lightness: 94%));
+
a:not(.button) {
color: $callout-panel-link-color;
@@ -98,4 +145,4 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_side-nav.scss b/_sass/foundation-components/_side-nav.scss
index d16be157135..ba29e6e6f63 100644
--- a/_sass/foundation-components/_side-nav.scss
+++ b/_sass/foundation-components/_side-nav.scss
@@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default;
$side-nav-link-color: $primary-color !default;
$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
-$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default;
+$side-nav-link-bg-hover: hsla(0deg, 0%, 0%, 0.025) !default;
$side-nav-link-margin: 0 !default;
$side-nav-link-padding: rem-calc(7 14) !default;
$side-nav-font-size: rem-calc(14) !default;
@@ -54,12 +54,11 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
// $font-size - Font size of nav items. Default: $side-nav-font-size.
// $link-color - Color of navigation links. Default: $side-nav-link-color.
// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover.
-@mixin side-nav(
- $divider-color:$side-nav-divider-color,
- $font-size:$side-nav-font-size,
- $link-color:$side-nav-link-color,
- $link-color-hover:$side-nav-link-color-hover,
- $link-bg-hover:$side-nav-link-bg-hover) {
+@mixin side-nav($divider-color: $side-nav-divider-color,
+ $font-size: $side-nav-font-size,
+ $link-color: $side-nav-link-color,
+ $link-color-hover: $side-nav-link-color-hover,
+ $link-bg-hover: $side-nav-link-bg-hover) {
display: block;
margin: 0;
padding: $side-nav-padding;
@@ -77,6 +76,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
color: $link-color;
margin: $side-nav-link-margin;
padding: $side-nav-link-padding;
+
&:hover,
&:focus {
background: $link-bg-hover;
@@ -84,7 +84,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
}
}
- &.active > a:first-child:not(.button) {
+ &.active>a:first-child:not(.button) {
color: $side-nav-link-color-active;
font-weight: $side-nav-font-weight-active;
font-family: $side-nav-font-family-active;
@@ -100,10 +100,12 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
&.heading {
color: $side-nav-heading-color;
+
font: {
size: $side-nav-heading-font-size;
weight: $side-nav-heading-font-weight;
}
+
text-transform: $side-nav-heading-text-transform;
}
}
@@ -111,6 +113,8 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
@include exports("side-nav") {
@if $include-html-nav-classes {
- .side-nav { @include side-nav; }
+ .side-nav {
+ @include side-nav;
+ }
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_top-bar.scss b/_sass/foundation-components/_top-bar.scss
index ce59a47d599..b6d5ffa10dc 100644
--- a/_sass/foundation-components/_top-bar.scss
+++ b/_sass/foundation-components/_top-bar.scss
@@ -39,7 +39,7 @@ $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: calc($topbar-height / 3) !default;
$topbar-back-link-size: rem-calc(18) !default;
$topbar-link-dropdown-padding: rem-calc(20) !default;
$topbar-button-font-size: 0.75rem !default;
@@ -119,7 +119,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width: 100%;
background: $topbar-bg;
- .top-bar { margin-bottom: $topbar-margin-bottom; }
+ .top-bar {
+ margin-bottom: $topbar-margin-bottom;
+ }
}
// Wrapped around .top-bar to make it stick to the top
@@ -141,6 +143,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width: 100%;
z-index: 99;
}
+
// Ensure you can scroll the menu on small screens
.top-bar-section {
z-index: 98;
@@ -163,19 +166,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
list-style: none;
}
- .row { max-width: none; }
+ .row {
+ max-width: none;
+ }
form,
- input { margin-bottom: 0; }
+ input {
+ margin-bottom: 0;
+ }
- input {
- height: $topbar-input-height;
- 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 {
+ .button,
+ button {
padding-top: .35rem + rem-calc(1);
padding-bottom: .35rem + rem-calc(1);
margin-bottom: 0;
@@ -201,10 +209,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
margin: 0;
font-size: $rem-base;
- h1, h2, h3, h4, p, span {
+ h1,
+ h2,
+ h3,
+ h4,
+ p,
+ span {
line-height: $topbar-height;
font-size: $topbar-title-font-size;
margin: 0;
+
a {
font-weight: $topbar-title-weight;
color: $topbar-link-color;
@@ -239,9 +253,10 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
margin-top: -16px;
a {
- @if $text-direction == rtl {
+ @if $text-direction ==rtl {
text-indent: -58px;
}
+
height: 34px;
line-height: 33px;
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
@@ -271,16 +286,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
height: auto;
background: transparent;
- .title-area { background: $topbar-bg; }
+ .title-area {
+ background: $topbar-bg;
+ }
.toggle-topbar {
- a { color: $topbar-menu-link-color-toggled;
- span::after {
+ a {
+ color: $topbar-menu-link-color-toggled;
+
+ 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 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;
+ 0 7px 0 1px $topbar-menu-icon-color-toggled,
+ 0 14px 0 1px $topbar-menu-icon-color-toggled;
}
}
}
@@ -313,7 +332,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
ul li {
background: $topbar-dropdown-bg;
- & > a {
+
+ &>a {
display: block;
width: 100%;
color: $topbar-link-color;
@@ -328,39 +348,65 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
- @include button-style($bg:$primary-color);
+ @include button-style($bg: $primary-color);
+ }
+
+ &.button.secondary {
+ @include button-style($bg: $secondary-color);
+ }
+
+ &.button.success {
+ @include button-style($bg: $success-color);
+ }
+
+ &.button.alert {
+ @include button-style($bg: $alert-color);
+ }
+
+ &.button.warning {
+ @include button-style($bg: $warning-color);
}
- &.button.secondary { @include button-style($bg:$secondary-color); }
- &.button.success { @include button-style($bg:$success-color); }
- &.button.alert { @include button-style($bg:$alert-color); }
- &.button.warning { @include button-style($bg:$warning-color); }
}
- > button {
+ >button {
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
- @include button-style($bg:$primary-color);
+ @include button-style($bg: $primary-color);
+
+ &.secondary {
+ @include button-style($bg: $secondary-color);
+ }
- &.secondary { @include button-style($bg:$secondary-color); }
- &.success { @include button-style($bg:$success-color); }
- &.alert { @include button-style($bg:$alert-color); }
- &.warning { @include button-style($bg:$warning-color); }
+ &.success {
+ @include button-style($bg: $success-color);
+ }
+
+ &.alert {
+ @include button-style($bg: $alert-color);
+ }
+
+ &.warning {
+ @include button-style($bg: $warning-color);
+ }
}
// Apply the hover link color when it has that class
- &:hover:not(.has-form) > a {
+ &:hover:not(.has-form)>a {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
- &.active > a {
+ &.active>a {
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
+
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -369,31 +415,37 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
// Add some extra padding for list items contains buttons
- .has-form { padding: $topbar-link-padding; }
+ .has-form {
+ padding: $topbar-link-padding;
+ }
// Styling for list items that have a dropdown within them.
.has-dropdown {
position: relative;
- & > a {
+ &>a {
&:after {
- @if ($topbar-arrows){
+ @if ($topbar-arrows) {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
}
+
margin-#{$opposite-direction}: $topbar-link-padding;
- margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
+ margin-top: -(calc($topbar-dropdown-toggle-size / 2)) - 2;
position: absolute;
top: 50%;
#{$opposite-direction}: 0;
}
}
- &.moved { position: static;
- & > .dropdown {
+ &.moved {
+ position: static;
+
+ &>.dropdown {
@include topbar-show-dropdown();
width: 100%;
}
- & > a:after {
+
+ &>a:after {
display: none;
}
}
@@ -415,25 +467,38 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
a {
font-weight: $topbar-dropdown-link-weight;
padding: 8px $topbar-link-padding;
+
&.parent-link {
font-weight: $topbar-link-weight;
}
}
- &.title h5, &.parent-link {
+ &.title h5,
+ &.parent-link {
// Back Button
margin-bottom: 0;
margin-top: 0;
font-size: $topbar-back-link-size;
+
a {
color: $topbar-link-color;
// line-height: ($topbar-height / 2);
display: block;
- &:hover { background:none; }
+
+ &:hover {
+ background: none;
+ }
}
}
- &.has-form { padding: 8px $topbar-link-padding; }
- .button, button { top: auto; }
+
+ &.has-form {
+ padding: 8px $topbar-link-padding;
+ }
+
+ .button,
+ button {
+ top: auto;
+ }
}
label {
@@ -447,7 +512,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
- .js-generated { display: block; }
+ .js-generated {
+ display: block;
+ }
// Top Bar styles intended for screen sizes above the breakpoint.
@@ -457,10 +524,17 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
@include clearfix;
overflow: visible;
- .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 {
+ width: auto;
+ }
input,
.button,
@@ -468,10 +542,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
font-size: rem-calc(14);
position: relative;
height: $topbar-input-height;
- top: (($topbar-height - $topbar-input-height) / 2);
+ top: calc(($topbar-height - $topbar-input-height) / 2);
}
- &.expanded { background: $topbar-bg; }
+ &.expanded {
+ background: $topbar-bg;
+ }
}
.contain-to-grid .top-bar {
@@ -481,7 +557,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.top-bar-section {
- @include single-transition(none,0,0);
+ @include single-transition(none, 0, 0);
#{$default-float}: 0 !important;
ul {
@@ -491,39 +567,49 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
li {
float: $default-float;
- .js-generated { display: none; }
+
+ .js-generated {
+ display: none;
+ }
}
}
li {
&.hover {
- > a:not(.button) {
+ >a:not(.button) {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
}
+
&:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
background: $topbar-link-bg;
+
&:hover {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
}
}
+
&.active:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
color: $topbar-link-color-active;
background: $topbar-link-bg-active;
+
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -533,35 +619,40 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.has-dropdown {
- @if($topbar-arrows){
- & > a {
+ @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);
+ margin-top: -(calc($topbar-dropdown-toggle-size / 2));
+ top: calc($topbar-height / 2);
}
}
}
- &.moved { position: relative;
- & > .dropdown {
+ &.moved {
+ position: relative;
+
+ &>.dropdown {
@include topbar-hide-dropdown();
}
}
- &.hover, &.not-click:hover {
- & > .dropdown {
+ &.hover,
+ &.not-click:hover {
+ &>.dropdown {
@include topbar-show-dropdown();
}
}
- > a:focus + .dropdown {
+
+ >a:focus+.dropdown {
@include topbar-show-dropdown();
}
.dropdown li.has-dropdown {
- & > a {
- @if ($topbar-dropdown-arrows){
+ &>a {
+ @if ($topbar-dropdown-arrows) {
&:after {
border: none;
content: "\00bb";
@@ -591,14 +682,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
&:not(.has-form):not(.active) {
- & > a:not(.button) {
+ &>a:not(.button) {
color: $topbar-dropdown-link-color;
background: $topbar-dropdown-link-bg;
}
- &:hover > a:not(.button) {
+ &:hover>a:not(.button) {
color: $topbar-dropdown-link-color-hover;
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-dropdown-link-bg-hover) {
background: $topbar-dropdown-link-bg-hover;
}
@@ -618,8 +710,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
- & > ul > .divider,
- & > ul > [role="separator"] {
+ &>ul>.divider,
+ &>ul>[role="separator"] {
border-bottom: none;
border-top: none;
border-#{$opposite-direction}: $topbar-divider-border-bottom;
@@ -630,7 +722,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 calc($topbar-height / 3);
height: $topbar-height;
}
@@ -640,15 +732,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
#{$default-float}: auto;
#{$opposite-direction}: 0;
- li .dropdown { #{$opposite-direction}: 100%; }
+ li .dropdown {
+ #{$opposite-direction}: 100%;
+ }
}
}
+
.#{$default-float} {
li .dropdown {
#{$opposite-direction}: auto;
#{$default-float}: 0;
- li .dropdown { #{$default-float}: 100%; }
+ li .dropdown {
+ #{$default-float}: 100%;
+ }
}
}
}
@@ -657,17 +754,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// background & text color on hover.
.no-js .top-bar-section {
ul li {
+
// Apply the hover link color when it has that class
- &:hover > a {
+ &:hover>a {
background-color: $topbar-link-bg-color-hover;
+
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
+
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
- &:active > a {
+ &:active>a {
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
}
@@ -675,15 +775,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-dropdown {
&:hover {
- & > .dropdown {
+ &>.dropdown {
@include topbar-show-dropdown();
}
}
- > a:focus + .dropdown {
+
+ >a:focus+.dropdown {
@include topbar-show-dropdown();
}
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/foundation-components/_type.scss b/_sass/foundation-components/_type.scss
index ff199963185..33f59f3bc8b 100644
--- a/_sass/foundation-components/_type.scss
+++ b/_sass/foundation-components/_type.scss
@@ -59,7 +59,7 @@ $code-color: $oil !default;
$code-font-family: $font-family-monospace !default;
$code-font-weight: $font-weight-normal !default;
$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
-$code-border-size: 1px !default;
+$code-border-size: 0px !default;
$code-border-style: solid !default;
$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
diff --git a/assets/mediaelement_js/jquery.js b/assets/mediaelement_js/jquery.js
index 86a330515ee..3030229275c 100755
--- a/assets/mediaelement_js/jquery.js
+++ b/assets/mediaelement_js/jquery.js
@@ -349,8 +349,9 @@ jQuery.extend = jQuery.fn.extend = function() {
src = target[ name ];
copy = options[ name ];
+ // Prevent Object.prototype pollution
// Prevent never-ending loop
- if ( target === copy ) {
+ if ( name === "__proto__" || target === copy ) {
continue;
}
@@ -8204,6 +8205,11 @@ function ajaxConvert( s, response ) {
// Convert response if prev dataType is non-auto and differs from current
if ( prev !== "*" && prev !== current ) {
+ // Mitigate possible XSS vulnerability (gh-2432)
+ if ( s.crossDomain && current === "script" ) {
+ continue;
+ }
+
// Seek a direct converter
conv = converters[ prev + " " + current ] || converters[ "* " + current ];
@@ -9594,4 +9600,4 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
-})( window );
\ No newline at end of file
+})( window );
diff --git a/images/webdesign_screenshot_andersneu.jpg b/images/webdesign_screenshot_andersneu.jpg
new file mode 100644
index 00000000000..99490bfa3df
Binary files /dev/null and b/images/webdesign_screenshot_andersneu.jpg differ
diff --git a/images/webdesign_screenshot_moritz_sauer.jpg b/images/webdesign_screenshot_moritz_sauer.jpg
new file mode 100644
index 00000000000..c26c9793145
Binary files /dev/null and b/images/webdesign_screenshot_moritz_sauer.jpg differ
diff --git a/images/webdesign_screenshot_mosonic.jpg b/images/webdesign_screenshot_mosonic.jpg
new file mode 100644
index 00000000000..c475febb67f
Binary files /dev/null and b/images/webdesign_screenshot_mosonic.jpg differ
diff --git a/images/webdesign_screenshot_nixdorf.jpg b/images/webdesign_screenshot_nixdorf.jpg
deleted file mode 100644
index 5c2936f4568..00000000000
Binary files a/images/webdesign_screenshot_nixdorf.jpg and /dev/null differ
diff --git a/images/webdesign_screenshot_phlow.jpg b/images/webdesign_screenshot_phlow.jpg
index b066c8944e6..3e16fe794e2 100644
Binary files a/images/webdesign_screenshot_phlow.jpg and b/images/webdesign_screenshot_phlow.jpg differ
diff --git a/images/webdesign_screenshot_schriefer.jpg b/images/webdesign_screenshot_schriefer.jpg
deleted file mode 100644
index 86d80566124..00000000000
Binary files a/images/webdesign_screenshot_schriefer.jpg and /dev/null differ
diff --git a/images/webdesign_screenshot_stilwandel.jpg b/images/webdesign_screenshot_stilwandel.jpg
deleted file mode 100644
index d8c6753d08f..00000000000
Binary files a/images/webdesign_screenshot_stilwandel.jpg and /dev/null differ
diff --git a/images/webdesign_screenshot_tarnkappe.jpg b/images/webdesign_screenshot_tarnkappe.jpg
deleted file mode 100644
index cec00fcf32c..00000000000
Binary files a/images/webdesign_screenshot_tarnkappe.jpg and /dev/null differ
diff --git a/jekyll-theme-feeling-responsive.gemspec b/jekyll-theme-feeling-responsive.gemspec
new file mode 100644
index 00000000000..b68e53afecf
--- /dev/null
+++ b/jekyll-theme-feeling-responsive.gemspec
@@ -0,0 +1,20 @@
+Gem::Specification.new do |s|
+ s.name = 'jekyll-theme-feeling-responsive'
+ s.version = '1.1'
+ s.date = '2021-06-21'
+ s.summary = 'A free flexible theme for Jekyll built on Foundation framework'
+ s.description = <
@@ -122,7 +122,7 @@ With foundation responsive videos are easy. [More ›](http://foundation.zurb.co
## Images: Title, Thumbnails, Homepage {#images}
-There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/).
+There are several types of images you can define via front matter. If you want to change the images used in the header, have a look at [Style your Header]({{ site.url }}{{ site.baseurl }}/headers/).
### Title Images
@@ -154,7 +154,7 @@ image:
### Captions with URL
-Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest:
+Sometimes, you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest:
~~~
image:
@@ -182,7 +182,7 @@ image:
## Create a Table of Contents
{: .t60}
-With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
+With the Kramdown parser for Markdown, you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
### Bare Bones Version
{% highlight html %}
@@ -244,7 +244,7 @@ This include creates a next/previous link to a post of the same category using t
### improve_content
-If your content is on Jekyll you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/).
+If your content is on Jekyll, you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/).
~~~
{% raw %}{% include _improve_content.html %}{% endraw %}
@@ -252,7 +252,7 @@ If your content is on Jekyll you can use this include to automatically generate
### list-collection
-This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page the page gots filtered out via unless. The following example loops through a collection called *wordpress*.
+This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page, the page gots filtered out via unless. The following example loops through a collection called *wordpress*.
~~~
{% raw %}{% include list-collection collection='wordpress' %}{% endraw %}
@@ -260,7 +260,7 @@ This include lets you loop through a collection to list all entries in that coll
### alert – Embed an alert in your content
-This include lets you easily display an alert. To use the include no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`.
+This include lets you easily display an alert. To use the include, no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`.
~~~
{% raw %}{% include alert warning='This is a warning.' %}
@@ -291,7 +291,7 @@ You can even use ``-tags inside the alert. Beware: Use " and ' properly.
## Javascript/Foundation modules
-*Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster.
+*Feeling Responsive* uses the foundation framework and some of its Javascript components. I reduced the modules, to decrease page load and make the theme faster.
I only added one other javascript-module: [`backstretch`][3] by Scott Robbin. These modules are currently used by the theme and included in `javascript.min.js`. There is also a non-minified version, if you want to take a closer look: `javascript.js`.
diff --git a/pages/getting-started.md b/pages/getting-started.md
index b5faef3f0ec..c68398a794e 100644
--- a/pages/getting-started.md
+++ b/pages/getting-started.md
@@ -1,23 +1,23 @@
---
-layout: page
-show_meta: false
-title: "Getting Started"
-subheadline: "A Step-by-Step Guide"
-teaser: "This step-by-step guide helps you to customize Feeling Responsive to your needs."
+layout : page
+show_meta : false
+title : "Getting Started in 10 Steps"
+subheadline : "A Step-by-Step Guide"
+teaser : "This step-by-step guide helps you to customize Feeling Responsive to your needs."
header:
- image_fullwidth: "header_homepage_13.jpg"
-permalink: "/getting-started/"
+ image_fullwidth : "header_homepage_13.jpg"
+permalink : "/getting-started/"
---
-1. Open `_config.yml` and work it through, it's well documented
+1. Open `_config.yml` and work it through, it's well documented.
1. Add your own `logo.png` to `/assets/img/`.
-1. Open `_data/socialmedia.yml` and add your own social media links.
-1. Open `_data/navigation.yml` and customize your navigation.
-1. Open `_data/language.yml` and translate the theme if necessary.
-1. Open `_data/services.yml` and customize links in the footer.
-1. Open `_data/network.yml` and customize links in the footer.
+1. Add your own social media links and open `_data/socialmedia.yml`.
+1. Open `_sass/_01_settings_colors.scss` and adjust the the colors to your taste.
+1. Customize your navigation and open `_data/navigation.yml`.
+1. Translate this theme and open `_data/language.yml`.
+1. Change the links in the footer and open `_data/services.yml` and `_data/network.yml`.
1. Open `_data/authors.yml` and edit author information and set default author in `config.yml`.
-1. [Read the documentation][1] to check out all features of *Feeling Responsive*.
1. Make it yours and add your own content.
+1. [Read the documentation][1] to check out all features of *Feeling Responsive*.
Check out the documentation for all the tricks ›
diff --git a/pages/pages-root-folder/index.md b/pages/pages-root-folder/index.md
index 9b63780c4a9..6b095358eb1 100644
--- a/pages/pages-root-folder/index.md
+++ b/pages/pages-root-folder/index.md
@@ -21,7 +21,7 @@ widget3:
title: "Download Theme"
url: 'https://github.com/Phlow/feeling-responsive'
image: widget-github-303x182.jpg
- text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. Grab the Bare-Bones-Version for a fresh start or learn how to use it with the education-version with sample posts and images. Then tell me via Twitter @phlow.'
+ text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. The code is well-documented and explains you how it works.'
#
# Use the call for action to show a button on the frontpage
#
diff --git a/pages/roadmap.md b/pages/roadmap.md
index f823aebef1a..10ef61a4481 100644
--- a/pages/roadmap.md
+++ b/pages/roadmap.md
@@ -1,56 +1,10 @@
---
-layout: page
-title: "Roadmap"
-subheadline: "ToDo-List & Ideas"
-teaser: "Here are some ideas and features I want to implement in the future."
+layout : page
+title : "Roadmap – What's up next?!?"
+subheadline : "ToDo-List & Ideas"
+teaser : "Feeling Responsive works fine. I am happy lots of people use it. Currently I have no plans to make it better or worse."
header:
- image_fullwidth: "header_roadmap_3.jpg"
-permalink: "/roadmap/"
+ image_fullwidth : "header_roadmap_3.jpg"
+permalink : "/roadmap/"
---
-## Ideas and possible new features
-{: .t30 }
-
-* Get rid of Backstretch.js and solve it with pure CSS
-* [Custom Scrollbar](https://css-tricks.com/custom-scrollbars-in-webkit/)
-* Layout/Template for category-archives
-* Layout/Template for collections
-* Layout/Template for Landingpage
-* Clean bare-bones version of *Feeling Responsive*
-* Even better responsive typography
-* Google AdSense ads
-* More post-formats for blogging like special post formats for links, audio, tweets,...
-* Make a video-sitemap.xml
-
-
-
-## Done
-
-* [Add schema.org Markup for Videos](https://support.google.com/webmasters/answer/2413309?hl=en)
-* [Submit Feeling Responsive to jekyllthemes.org](http://jekyllthemes.org/themes/feeling-responsive/)
-* Use `style` in front matter to inject css-styles into `
-* Add include to loop through collections
-* Now with optional caption for header
-* [Refined humans.txt](http://humanstxt.org/)
-* [Produce an introduction video to showcase *Feeling Responsive*](https://www.youtube.com/embed/3b5zCFSmVvU)
-* [Additional header with text]({{ site.url }}{{ site.baseurl }}/headers/)
-* Added Google Analtics support
-* [Add redirection layout by KanishkKanishk](http://codingtips.kanishkkunal.in/redirects-jekyll-github-pages/)
-* Convert Foundation Sass to use native Jekyll Sass support
-* Optimize HTML and use Schema.org-Attributes › http://schema.org/Article
-* Disqus comments
-* Rework `list-entries.html` › now language ready
-* [Create custom 404.html-webpage](https://help.github.com/articles/custom-404-pages/)
-* Add simple search box with Google
-* Alternative non-landscape header
-* Patterns for header
-* Clean up color scheme and highlighting colors
-* Make theme translation ready
-* [Add draft-templates for new pages/posts](https://github.com/Phlow/feeling-responsive/tree/gh-pages/_drafts)
-* [Step-by-Step-Guide to customize *Feeling Responsive*]({{ site.url }}{{ site.baseurl }}/getting-started/)
-* [Video-Post-Format to feature videos in a huge way]({{ site.url }}{{ site.baseurl }}/design/video/)
-* Title and captions for images
-* SEO › Add metadescription to header.html and front matter
-* [Adding Open Graph for Jekyll](https://gist.github.com/pathawks/1406355)
-* [Gallery Post Example]({{ site.url }}{{ site.baseurl }}/design/gallery/)
-* [Adding pagination](http://jekyllrb.com/docs/pagination/)
\ No newline at end of file
- 
+ 
- 
+ 
+ 
- 
+ 
- 
+