summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss')
-rw-r--r--afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss123
1 files changed, 123 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss b/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss
new file mode 100644
index 0000000..403fe61
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/helpers/_mixins.scss
@@ -0,0 +1,123 @@
+// Foundation for Apps
+//
+// Mixins
+// ------
+// The framework comes with a number of mixins that help you easily create common small components,
+// like triangles and menu icons.
+
+/// CSS Triangle
+/// Creates a CSS triangle, which can be used for dropdown arrows, popup tails, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
+///
+/// @param {number} $triangle-size - Width of the triangle.
+/// @param {color} $triangle-color - Color of the triangle.
+/// @param {keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset $triangle-size;
+ @if ($triangle-direction == top) {
+ border-color: $triangle-color transparent transparent transparent;
+ border-top-style: solid;
+ }
+ @if ($triangle-direction == bottom) {
+ border-color: transparent transparent $triangle-color transparent;
+ border-bottom-style: solid;
+ }
+ @if ($triangle-direction == left) {
+ border-color: transparent transparent transparent $triangle-color;
+ border-left-style: solid;
+ }
+ @if ($triangle-direction == right) {
+ border-color: transparent $triangle-color transparent transparent;
+ border-right-style: solid;
+ }
+}
+
+// @mixins
+//
+/// Hamburger
+/// Creates a three-line menu icon, affectionately referred to as the "hamburger icon".
+///
+/// @param {number} $width - Width of the icon, in rem units.
+/// @param {number|boolean} $left - Left offset of the icon. Set to `false` to center the icon horizontally.
+/// @param {number|boolean} $top - Top offset of the icon. Set to `false` to center the icon vertically.
+/// @param {number} $thickness - Height of each line in the icon.
+/// @param {number} $gap - Amount of space between each line.
+/// @param {color} $color - Color of the lines.
+/// @param {color} $hover-color - Color of the lines on hover.
+@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
+ span::after {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 0;
+
+ @if $offcanvas {
+ @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 0px 0 $thickness $color,
+ 0 $gap + $thickness 0 $thickness $color,
+ 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+ width: $width;
+ }
+ span:hover:after {
+ box-shadow:
+ 0 0px 0 $thickness $hover-color,
+ 0 $gap + $thickness 0 $thickness $hover-color,
+ 0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
+ }
+}
+
+/// Clearfix
+/// Uses the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
+///
+/// @see http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix {
+ &:before, &:after { content: " "; display: table; }
+ &:after { clear: both; }
+}
+
+/// Invisible Element
+/// 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;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+/// Invisible Element Off
+/// Reverses the CSS output by the `element-invisible()` mixin.
+@mixin element-invisible-off {
+ position: static !important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto;
+}
+
+$text-input-selectors: 'input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea';