2 /// Phantom by HTML5 UP
\r
3 /// html5up.net | @ajlkn
\r
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
\r
10 $gutter: _size(gutter);
\r
14 @include vendor('display', 'flex');
\r
15 @include vendor('flex-wrap', 'wrap');
\r
17 margin: ($gutter * -1) 0 0 ($gutter * -1);
\r
20 @include vendor('transition', (
\r
21 'transform #{$duration} #{$ease}',
\r
22 'opacity #{$duration} #{$ease}'
\r
25 width: calc(#{(100% / 3)} - #{$gutter * 1});
\r
26 margin: $gutter 0 0 $gutter;
\r
29 @include vendor('transition', 'transform #{$duration} #{$ease}');
\r
33 border-radius: _size(border-radius);
\r
42 @include vendor('pointer-events', 'none');
\r
43 @include vendor('transition', (
\r
44 'background-color #{$duration} #{$ease}',
\r
45 'opacity #{$duration} #{$ease}'
\r
60 @include vendor('pointer-events', 'none');
\r
61 @include vendor('transition', 'opacity #{$duration} #{$ease}');
\r
69 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');
\r
70 background-position: center;
\r
71 background-repeat: no-repeat;
\r
72 background-size: 100% 100%;
\r
79 @include vendor('display', 'flex');
\r
80 @include vendor('flex-direction', 'column');
\r
81 @include vendor('align-items', 'center');
\r
82 @include vendor('justify-content', 'center');
\r
83 @include vendor('transition', (
\r
84 'background-color #{$duration} #{$ease}',
\r
85 'transform #{$duration} #{$ease}'
\r
93 border-radius: _size(border-radius);
\r
95 color: _palette(fg-accent);
\r
97 text-decoration: none;
\r
105 color: _palette(fg-accent) !important;
\r
113 @include vendor('transition', (
\r
114 'max-height #{$duration} #{$ease}',
\r
115 'opacity #{$duration} #{$ease}'
\r
120 margin-top: 0.35em;
\r
131 background-color: _palette(accent1);
\r
137 background-color: _palette(accent2);
\r
143 background-color: _palette(accent3);
\r
149 background-color: _palette(accent4);
\r
155 background-color: _palette(accent5);
\r
161 background-color: _palette(accent6);
\r
165 body:not(.is-touch) & {
\r
168 @include vendor('transform', 'scale(1.1)');
\r
171 background-color: _palette(bg-accent);
\r
189 margin-top: _size(element-margin);
\r
192 body.is-loading & {
\r
194 @include vendor('transform', 'scale(0.9)');
\r
208 @include breakpoint(large) {
\r
209 $gutter: _size(gutter) * 0.5;
\r
211 margin: ($gutter * -1) 0 0 ($gutter * -1);
\r
214 width: calc(#{(100% / 3)} - #{$gutter * 1});
\r
215 margin: $gutter 0 0 $gutter;
\r
219 @include breakpoint(medium) {
\r
220 $gutter: _size(gutter);
\r
222 margin: ($gutter * -1) 0 0 ($gutter * -1);
\r
225 width: calc(#{(100% / 2)} - #{$gutter * 1});
\r
226 margin: $gutter 0 0 $gutter;
\r
230 @include breakpoint(small) {
\r
231 $gutter: _size(gutter) * 0.5;
\r
233 margin: ($gutter * -1) 0 0 ($gutter * -1);
\r
236 width: calc(#{(100% / 2)} - #{$gutter * 1});
\r
237 margin: $gutter 0 0 $gutter;
\r
241 @include vendor('transform', 'scale(1.0)');
\r
247 @include breakpoint(xsmall) {
\r
248 $gutter: _size(gutter) * 0.5;
\r
254 margin: $gutter 0 0 0;
\r