vendor/assets/stylesheets/foundation/components/_global.scss in foundation-rails-5.5.1.2 vs vendor/assets/stylesheets/foundation/components/_global.scss in foundation-rails-5.5.2.0
- old
+ new
@@ -1,10 +1,10 @@
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
-@import "../functions";
+@import '../functions';
//
// Foundation Variables
//
// Data attribute namespace
@@ -78,26 +78,26 @@
// @mixins
//
// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
- -moz-box-sizing: $type; // Firefox < 29
+ -moz-box-sizing: $type;
box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}
// @mixins
//
// We use this to create isosceles triangles
// $triangle-size - Used to set border-size. No default, set a px or em size.
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+ border: inset $triangle-size;
content: "";
display: block;
- width: 0;
height: 0;
- border: inset $triangle-size;
+ width: 0;
@if ($triangle-direction == top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
}
@if ($triangle-direction == bottom) {
@@ -126,13 +126,13 @@
// $hover-color - icon color during hover
// $offcanvas - Set to true of @include in offcanvas
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
span::after {
content: "";
- position: absolute;
display: block;
height: 0;
+ position: absolute;
@if $offcanvas {
@if $top {
top: $top;
}
@@ -146,12 +146,12 @@
@else {
left: ($tabbar-menu-icon-width - $width)/2;
}
}
@else {
- top: 50%;
margin-top: -($width/2);
+ top: 50%;
#{$opposite-direction}: $topbar-link-padding;
}
box-shadow:
0 0 0 $thickness $color,
@@ -181,34 +181,34 @@
// $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)) {
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
- box-shadow: 0 0 5px $glowing-effect-color;
border-color: $glowing-effect-color;
+ box-shadow: 0 0 5px $glowing-effect-color;
}
}
// @mixins
//
// We use this to translate elements in 2D
// $horizontal: Default: 0
// $vertical: Default: 0
@mixin translate2d($horizontal:0, $vertical:0) {
- transform: translate($horizontal,$vertical)
+ transform: translate($horizontal, $vertical)
}
// @mixins
//
// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
- position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
height: 1px;
- width: 1px;
overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
+ position: absolute !important;
+ width: 1px;
}
// @mixins
//
// Turns off the element-invisible effect.
@@ -289,21 +289,26 @@
$shiny-edge-active-color: rgba(#000, .2) !default;
// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true !default;
$include-print-styles: true !default;
+$include-js-meta-styles: true !default; // Warning! Meta styles are a dependancy of the Javascript.
$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-breakpoint: em-calc(640) !default;
+$medium-breakpoint: em-calc(1024) !default;
+$large-breakpoint: em-calc(1440) !default;
+$xlarge-breakpoint: em-calc(1920) !default;
+$small-range: (0, $small-breakpoint) !default;
+$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint) !default;
+$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint) !default;
+$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint) !default;
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default;
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
@@ -321,10 +326,19 @@
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
+$retina: (
+ "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+ "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+ "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+ "#{$screen} and (min-device-pixel-ratio: 2)",
+ "#{$screen} and (min-resolution: 192dpi)",
+ "#{$screen} and (min-resolution: 2dppx)"
+);
+
// Legacy
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;
@@ -339,104 +353,112 @@
$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 a dependancy of the Javascript.
// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.
- meta.foundation-version {
- font-family: "/5.5.1/";
- }
+ @if $include-js-meta-styles {
- meta.foundation-mq-small {
- font-family: "/" + unquote($small-up) + "/";
- width: lower-bound($small-range);
- }
+ meta.foundation-version {
+ font-family: "/5.5.2/";
+ }
- meta.foundation-mq-small-only {
- font-family: "/" + unquote($small-only) + "/";
- width: lower-bound($small-range);
- }
+ meta.foundation-mq-small {
+ font-family: "/" + unquote($small-up) + "/";
+ width: lower-bound($small-range);
+ }
- meta.foundation-mq-medium {
- font-family: "/" + unquote($medium-up) + "/";
- width: lower-bound($medium-range);
- }
+ meta.foundation-mq-small-only {
+ font-family: "/" + unquote($small-only) + "/";
+ width: lower-bound($small-range);
+ }
- meta.foundation-mq-medium-only {
- font-family: "/" + unquote($medium-only) + "/";
- width: lower-bound($medium-range);
- }
+ meta.foundation-mq-medium {
+ font-family: "/" + unquote($medium-up) + "/";
+ width: lower-bound($medium-range);
+ }
- meta.foundation-mq-large {
- font-family: "/" + unquote($large-up) + "/";
- width: lower-bound($large-range);
- }
+ meta.foundation-mq-medium-only {
+ font-family: "/" + unquote($medium-only) + "/";
+ width: lower-bound($medium-range);
+ }
- meta.foundation-mq-large-only {
- font-family: "/" + unquote($large-only) + "/";
- width: lower-bound($large-range);
- }
+ meta.foundation-mq-large {
+ font-family: "/" + unquote($large-up) + "/";
+ width: lower-bound($large-range);
+ }
- meta.foundation-mq-xlarge {
- font-family: "/" + unquote($xlarge-up) + "/";
- width: lower-bound($xlarge-range);
- }
+ meta.foundation-mq-large-only {
+ font-family: "/" + unquote($large-only) + "/";
+ width: lower-bound($large-range);
+ }
- meta.foundation-mq-xlarge-only {
- font-family: "/" + unquote($xlarge-only) + "/";
- width: lower-bound($xlarge-range);
- }
+ meta.foundation-mq-xlarge {
+ font-family: "/" + unquote($xlarge-up) + "/";
+ width: lower-bound($xlarge-range);
+ }
- meta.foundation-mq-xxlarge {
- font-family: "/" + unquote($xxlarge-up) + "/";
- width: lower-bound($xxlarge-range);
- }
+ meta.foundation-mq-xlarge-only {
+ font-family: "/" + unquote($xlarge-only) + "/";
+ width: lower-bound($xlarge-range);
+ }
- meta.foundation-data-attribute-namespace {
- font-family: #{$namespace};
+ 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%; }
// Set box-sizing globally to handle padding and border widths
+ html {
+ box-sizing: border-box;
+ }
*,
*:before,
*:after {
- @include box-sizing(border-box);
+ @include box-sizing(inherit);
}
html,
body { font-size: $base-font-size; }
// Default body styles
body {
background: $body-bg;
color: $body-font-color;
- padding: 0;
- margin: 0;
+ cursor: $cursor-auto-value;
font-family: $body-font-family;
- font-weight: $body-font-weight;
font-style: $body-font-style;
+ font-weight: $body-font-weight;
line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
+ margin: 0;
+ padding: 0;
position: relative;
- cursor: $cursor-auto-value;
}
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; }
#map_canvas,
- .map_canvas {
+ .map_canvas,
+ .mqa-display {
img,
embed,
object { max-width: none !important;
}
}