5 // The framework comes with a number of mixins that help you easily create common small components,
6 // like triangles and menu icons.
9 /// 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.
11 /// @param {number} $triangle-size - Width of the triangle.
12 /// @param {color} $triangle-color - Color of the triangle.
13 /// @param {keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
14 @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
19 border: inset $triangle-size;
20 @if ($triangle-direction == top) {
21 border-color: $triangle-color transparent transparent transparent;
22 border-top-style: solid;
24 @if ($triangle-direction == bottom) {
25 border-color: transparent transparent $triangle-color transparent;
26 border-bottom-style: solid;
28 @if ($triangle-direction == left) {
29 border-color: transparent transparent transparent $triangle-color;
30 border-left-style: solid;
32 @if ($triangle-direction == right) {
33 border-color: transparent $triangle-color transparent transparent;
34 border-right-style: solid;
41 /// Creates a three-line menu icon, affectionately referred to as the "hamburger icon".
43 /// @param {number} $width - Width of the icon, in rem units.
44 /// @param {number|boolean} $left - Left offset of the icon. Set to `false` to center the icon horizontally.
45 /// @param {number|boolean} $top - Top offset of the icon. Set to `false` to center the icon vertically.
46 /// @param {number} $thickness - Height of each line in the icon.
47 /// @param {number} $gap - Amount of space between each line.
48 /// @param {color} $color - Color of the lines.
49 /// @param {color} $hover-color - Color of the lines on hover.
50 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
63 margin-top: -$width/2;
69 left: ($tabbar-menu-icon-width - $width)/2;
74 margin-top: -$width/2;
75 #{$opposite-direction}: $topbar-link-padding;
79 0 0px 0 $thickness $color,
80 0 $gap + $thickness 0 $thickness $color,
81 0 (2 * $gap + 2*$thickness) 0 $thickness $color;
86 0 0px 0 $thickness $hover-color,
87 0 $gap + $thickness 0 $thickness $hover-color,
88 0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
93 /// 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.
95 /// @see http://nicolasgallagher.com/micro-clearfix-hack/
97 &:before, &:after { content: " "; display: table; }
98 &:after { clear: both; }
101 /// Invisible Element
102 /// Makes an element visually hidden, but accessible.
104 /// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
105 @mixin element-invisible {
106 position: absolute !important;
110 clip: rect(1px, 1px, 1px, 1px);
113 /// Invisible Element Off
114 /// Reverses the CSS output by the `element-invisible()` mixin.
115 @mixin element-invisible-off {
116 position: static !important;
123 $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';