]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 22e48f8)
Remove $rem-base variable, and use $base-font-size variable to calculate rems instead
authorGeoff Kimball <geoff@zurb.com>
Wed, 16 Dec 2015 19:08:06 +0000 (11:08 -0800)
committerGeoff Kimball <geoff@zurb.com>
Wed, 16 Dec 2015 19:08:09 +0000 (11:08 -0800)
docs/assets/scss/docs.scss patch | blob | blame | history
scss/_global.scss patch | blob | blame | history
scss/settings/_settings.scss patch | blob | blame | history
scss/util/_unit.scss patch | blob | blame | history

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 43dfd74bfd0ed309dfb7fac040f748eb79a42d2a..552b466100872ebe18957b44db3a047dcb17c661 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -7,6 +7,7 @@
 //
 // Feel free to submit pull requests to foundation-docs like you would Foundation itself!
 
+@import 'settings/settings';
 @import 'foundation';
 @import 'motion-ui';
 
diff --git a/scss/_global.scss b/scss/_global.scss
index 90e9c731fcc13c8c669a442ff78f48c3b610f4f0..fdc65081b3ebad30f0ac72440b711a232285fc7d 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -6,14 +6,14 @@
 /// @group global
 ////
 
-/// Global width of your site. Used by the grid to determine row width.
-/// @type Number
-$global-width: rem-calc(1200) !default;
-
 /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
 /// @type Number
 $global-font-size: 100% !default;
 
+/// Global width of your site. Used by the grid to determine row width.
+/// @type Number
+$global-width: rem-calc(1200) !default;
+
 /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
 /// @type Number
 $global-lineheight: 1.5 !default;
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index ccc05d9d2058e183e4b759bf9e57fba48296a5c3..63649f5342c55a1ed7aa72674f02070e534688be 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -44,8 +44,8 @@
 // 1. Global
 // ---------
 
-$global-width: rem-calc(1200);
 $global-font-size: 100%;
+$global-width: rem-calc(1200);
 $global-lineheight: 1.5;
 $primary-color: #2199e8;
 $secondary-color: #777;
@@ -67,7 +67,6 @@ $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;
 $global-text-direction: ltr;
-$rem-base: 16px;
 
 // 2. Breakpoints
 // --------------
@@ -303,7 +302,6 @@ $dropdownmenu-border: 1px solid $medium-gray;
 // 18. Flex Video
 // --------------
 
-$flexvideo-padding-top: rem-calc(25);
 $flexvideo-margin-bottom: rem-calc(16);
 $flexvideo-ratio: 4 by 3;
 $flexvideo-ratio-widescreen: 16 by 9;
diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index a87f07f262216d2c6e882e227f7ee5a741440cda..1193add21a91c7e07819e6429bc6c06c9dc96096 100644 (file)
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -6,12 +6,9 @@
 /// @group functions
 ////
 
-// scss-lint:disable ZeroUnit
+$global-font-size: 100% !default;
 
-/// Defines the base font size of the page, which is the value `1rem` is equal to.
-/// @type Number
-/// @group global
-$rem-base: 16px !default;
+// scss-lint:disable ZeroUnit
 
 /// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
 ///
@@ -25,15 +22,19 @@ $rem-base: 16px !default;
 /// Converts one or more pixel values into matching rem values.
 ///
 /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px.
 ///
 /// @returns {List} A list of converted values.
-@function rem-calc($values, $base: $rem-base) {
+@function rem-calc($values, $base: null) {
   $rem-values: ();
   $count: length($values);
 
   @if $base == null {
-    $base: $rem-base;
+    $base: $global-font-size;
+  }
+
+  @if unit($base) == '%' {
+    $base: 16px;
   }
 
   @if $count == 1 {
@@ -58,14 +59,14 @@ $rem-base: 16px !default;
   @return strip-unit($value) * 1em;
 }
 
-/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable.
+/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
 /// @access private
 ///
 /// @param {Number} $value - Pixel value to convert.
-/// @param {Number} $base [$rem-base] - Base for pixel conversion.
+/// @param {Number} $base [null] - Base for pixel conversion.
 ///
 /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
-@function -zf-to-rem($value, $base: $rem-base) {
+@function -zf-to-rem($value, $base: null) {
   // Calculate rem if units for $value is not rem
   @if (unit($value) != 'rem') {
     $value: strip-unit($value) / strip-unit($base) * 1rem;
Mirror of https://github.com/foundation/foundation-sites.git