68 | //
69 | //
70 | .o-crop {
71 | @each $crop in $crop-ratios {
72 | @each $antecedent, $consequent in $crop {
73 | @if (type-of($antecedent) != number) {
74 | @error "`#{$antecedent}` needs to be a number."
75 | }
76 |
77 | @if (type-of($consequent) != number) {
78 | @error "`#{$consequent}` needs to be a number."
79 | }
80 |
81 | &.-#{$antecedent}\:#{$consequent} {
82 | padding-bottom: ($consequent/$antecedent) * 100%;
83 | }
84 | }
85 | }
86 | }
87 |
88 | /* stylelint-enable */
89 |
--------------------------------------------------------------------------------
/assets/styles/objects/_layout.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Objects / Layout
3 | // ==========================================================================
4 |
5 | //
6 | // Grid-like layout system.
7 | //
8 | // The layout object provides us with a column-style layout system. This file
9 | // contains the basic structural elements, but classes should be complemented
10 | // with width utilities, for example:
11 | //
12 | // @example
13 | //
14 | //
15 | //
16 | //
17 | //
18 | //
19 | //
20 | //
21 | //
22 | // We can also manipulate entire layout systems by adding a series of modifiers
23 | // to the `.o-layout` block. For example:
24 | //
25 | // @example
26 | //
27 | //
28 | // This will reverse the displayed order of the system so that it runs in the
29 | // opposite order to our source, effectively flipping the system over.
30 | //
31 | // @example
32 | //
33 | //
34 | // This will cause the system to fill up from either the centre or the right
35 | // hand side. Default behaviour is to fill up the layout system from the left.
36 | //
37 | // @requires tools/layout
38 | // @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
39 | //
40 |
41 | .o-layout {
42 | @include o-layout;
43 |
44 | // Gutter modifiers
45 | &.-gutter {
46 | margin-left: rem(-$unit);
47 | }
48 |
49 | &.-gutter-small {
50 | margin-left: rem(-$unit/2);
51 | }
52 |
53 | // Horizontal aligment modifiers
54 | &.-center {
55 | text-align: center;
56 | }
57 |
58 | &.-right {
59 | text-align: right;
60 | }
61 |
62 | &.-reverse {
63 | direction: rtl;
64 |
65 | &.-flex {
66 | flex-direction: row-reverse;
67 | }
68 | }
69 |
70 | &.-flex {
71 | display: flex;
72 |
73 | &.-top {
74 | align-items: flex-start;
75 | }
76 | &.-middle {
77 | align-items: center;
78 | }
79 | &.-bottom {
80 | align-items: flex-end;
81 | }
82 | }
83 | &.-stretch {
84 | align-items: stretch;
85 | }
86 | }
87 |
88 | .o-layout_item {
89 | @include o-layout_item;
90 |
91 | // Gutter modifiers
92 | .o-layout.-gutter > & {
93 | padding-left: rem($unit);
94 | }
95 |
96 | .o-layout.-gutter-small > & {
97 | padding-left: rem($unit/2);
98 | }
99 |
100 | // Vertical alignment modifiers
101 | .o-layout.-middle > & {
102 | vertical-align: middle;
103 | }
104 |
105 | .o-layout.-bottom > & {
106 | vertical-align: bottom;
107 | }
108 |
109 | // Horizontal aligment modifiers
110 | .o-layout.-center > &,
111 | .o-layout.-right > &,
112 | .o-layout.-reverse > & {
113 | text-align: left;
114 | }
115 |
116 | .o-layout.-reverse > & {
117 | direction: ltr;
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/assets/styles/objects/_ratio.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Objects / Ratio
3 | // ==========================================================================
4 |
5 | /**
6 | * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
7 | * their correct aspect ratios.
8 | *
9 | * http://alistapart.com/article/creating-intrinsic-ratios-for-video
10 | *
11 | * 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
12 | */
13 | .o-ratio {
14 | position: relative;
15 | display: block;
16 | overflow: hidden;
17 |
18 | &:before {
19 | display: block;
20 | padding-bottom: 100%; /* [1] */
21 | width: 100%;
22 | content: "";
23 | }
24 | }
25 |
26 | .o-ratio_content,
27 | .o-ratio > img,
28 | .o-ratio > iframe,
29 | .o-ratio > embed,
30 | .o-ratio > object {
31 | position: absolute;
32 | top: 0;
33 | bottom: 0;
34 | left: 0;
35 | width: 100%;
36 | // height: 100%;
37 | }
38 |
--------------------------------------------------------------------------------
/assets/styles/objects/_scroll.scss:
--------------------------------------------------------------------------------
1 | .o-scroll {
2 | min-height: 100vh;
3 | }
4 |
--------------------------------------------------------------------------------
/assets/styles/objects/_table.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Objects / Tables
3 | // ==========================================================================
4 | .o-table {
5 | width: 100%;
6 |
7 | /**
8 | * Force all cells within a table to occupy the same width as each other.
9 | *
10 | * @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
11 | */
12 | &.-fixed {
13 | table-layout: fixed;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/assets/styles/settings/_config.colors.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Settings / Config / Colors
3 | // ==========================================================================
4 |
5 | // Palette
6 | // =============================================================================
7 | $white: #FFFFFF;
8 | $black: #000000;
9 |
10 | // Specific
11 | // =============================================================================
12 | // Link
13 | $link-color: #1A0DAB;
14 | $link-focus-color: #1A0DAB;
15 | $link-hover-color: darken(#1A0DAB, 10%);
16 | // Selection
17 | $selection-text-color: #3297FD;
18 | $selection-background-color: #FFFFFF;
19 |
20 | // Social Colors
21 | // =============================================================================
22 | $facebook-color: #3B5998;
23 | $instagram-color: #E1306C;
24 | $youtube-color: #CD201F;
25 | $twitter-color: #1DA1F2;
26 |
--------------------------------------------------------------------------------
/assets/styles/settings/_config.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Settings / Config
3 | // ==========================================================================
4 |
5 | // Context
6 | // =============================================================================
7 | // The current stylesheet context. Available values: frontend, editor.
8 | $context: frontend !default;
9 |
10 | // Path is relative to the stylesheets directory.
11 | $assets-path: "../" !default;
12 |
13 | // Typefaces
14 | // =============================================================================
15 | $font-sans-serif: sans-serif;
16 |
17 | // Typography
18 | // =============================================================================
19 | // Base
20 | $font-size: 16px;
21 | $line-height: 24px / $font-size;
22 | $font-family: $font-sans-serif;
23 | $color: #222222;
24 | // Headings
25 | $font-size-h1: 36px !default;
26 | $font-size-h2: 28px !default;
27 | $font-size-h3: 24px !default;
28 | $font-size-h4: 20px !default;
29 | $font-size-h5: 18px !default;
30 | $font-size-h6: 16px !default;
31 | $line-height-h: $line-height;
32 | // Weights
33 | $light: 300;
34 | $normal: 400;
35 | $medium: 500;
36 | $bold: 700;
37 |
38 | // Transitions
39 | // =============================================================================
40 | $speed: 0.3s;
41 | $easing: linear;
42 |
43 | // Spacing Units
44 | // =============================================================================
45 | $unit: 60px;
46 | $unit-small: 30px;
47 |
48 | // Container
49 | // ==========================================================================
50 | $container-width: 2000px;
51 | $padding: $unit;
52 |
53 | // Breakpoints
54 | // =============================================================================
55 | $from-tiny: 500px !default;
56 | $to-tiny: $from-tiny - 1 !default;
57 | $from-small: 700px !default;
58 | $to-small: $from-small - 1 !default;
59 | $from-medium: 1000px !default;
60 | $to-medium: $from-medium - 1 !default;
61 | $from-large: 1200px !default;
62 | $to-large: $from-large - 1 !default;
63 | $from-big: 1400px !default;
64 | $to-big: $from-big - 1 !default;
65 | $from-huge: 1600px !default;
66 | $to-huge: $from-huge - 1 !default;
67 | $from-enormous: 1800px !default;
68 | $to-enormous: $from-enormous - 1 !default;
69 | $from-gigantic: 2000px !default;
70 | $to-gigantic: $from-gigantic - 1 !default;
71 | $from-colossal: 2400px !default;
72 | $to-colossal: $from-colossal - 1 !default;
73 |
--------------------------------------------------------------------------------
/assets/styles/templates/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/locomotivemtl/webgl-images/50aa6c50d7c1c0ee4cc99107046e16044fe8f9ed/assets/styles/templates/.gitkeep
--------------------------------------------------------------------------------
/assets/styles/tools/_family.scss:
--------------------------------------------------------------------------------
1 | //
2 | //
3 | // DOCS : https://lukyvj.github.io/family.scss/
4 | //
5 | //
6 | /// Select all children from the first to `$num`.
7 | /// @group with-arguments
8 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
9 | /// @param {number} $num - id of the child
10 | @mixin first($num) {
11 | @if $num == 1 {
12 | &:first-child {
13 | @content;
14 | }
15 | } @else {
16 | &:nth-child(-n + #{$num}) {
17 | @content;
18 | }
19 | }
20 | }
21 |
22 | /// Select all children from the last to `$num`.
23 | /// @group with-arguments
24 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
25 | /// @param {number} $num - id of the child
26 | @mixin last($num) {
27 | &:nth-last-child(-n + #{$num}) {
28 | @content;
29 | }
30 | }
31 |
32 | /// Select all children after the first to `$num`.
33 | /// @group with-arguments
34 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
35 | /// @param {number} $num - id of the child
36 | @mixin after-first($num) {
37 | &:nth-child(n + #{$num + 1}) {
38 | @content;
39 | }
40 | }
41 |
42 | /// Select all children before `$num` from the last.
43 | /// @group with-arguments
44 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
45 | /// @param {number} $num - id of the child
46 | @mixin from-end($num) {
47 | &:nth-last-child(#{$num}) {
48 | @content;
49 | }
50 | }
51 |
52 | /// Select all children between `$first` and `$last`.
53 | /// @group with-arguments
54 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
55 | @mixin between($first, $last) {
56 | &:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
57 | @content;
58 | }
59 | }
60 |
61 | /// Select all even children between `$first` and `$last`.
62 | /// @group with-arguments
63 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
64 | @mixin even-between($first, $last) {
65 | &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
66 | @content;
67 | }
68 | }
69 |
70 | /// Select all odd children between `$first` and `$last`.
71 | /// @group with-arguments
72 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
73 | @mixin odd-between($first, $last) {
74 | &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
75 | @content;
76 | }
77 | }
78 |
79 | /// Select all `$num` children between `$first` and `$last`.
80 | /// @group with-arguments
81 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
82 | @mixin n-between($num, $first, $last) {
83 | &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
84 | @content;
85 | }
86 | }
87 |
88 |
89 | /// Select all children but `$num`.
90 | /// @group with-arguments
91 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
92 | /// @param {number} $num - id of the child
93 | @mixin all-but($num) {
94 | &:not(:nth-child(#{$num})) {
95 | @content;
96 | }
97 | }
98 |
99 | /// Select children each `$num`.
100 | /// @group with-arguments
101 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
102 | /// @param {number} $num - id of the child
103 | /// @alias every
104 | @mixin each($num) {
105 | &:nth-child(#{$num}n) {
106 | @content;
107 | }
108 | }
109 |
110 | /// Select children each `$num`.
111 | /// @group with-arguments
112 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
113 | /// @param {number} $num - id of the child
114 | @mixin every($num) {
115 | &:nth-child(#{$num}n) {
116 | @content;
117 | }
118 | }
119 |
120 | /// Select the `$num` child from the start and the `$num` child from the last.
121 | /// @group with-arguments
122 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
123 | /// @param {number} $num - id of the child
124 | @mixin from-first-last($num) {
125 | &:nth-child(#{$num}),
126 | &:nth-last-child(#{$num}) {
127 | @content;
128 | }
129 | }
130 |
131 |
132 | /// Select the item in the middle of `$num` child. Only works with odd number
133 | /// chain.
134 | /// @group with-arguments
135 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
136 | /// @param {number} $num - id of the child
137 | @mixin middle($num) {
138 | &:nth-child(#{round($num / 2)}) {
139 | @content;
140 | }
141 | }
142 |
143 |
144 | /// Select all children between the `$num` first and the `$num` last.
145 | /// @group with-arguments
146 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
147 | /// @param {number} $num - id of the child
148 | @mixin all-but-first-last($num) {
149 | &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
150 | @content;
151 | }
152 | }
153 |
154 |
155 | /// This quantity-query mixin will only select the first of `$limit` items. It will not
156 | /// work if there is not as much as item as you set in `$limit`.
157 | /// @group Quantity queries
158 | /// @param {number} $limit
159 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
160 | @mixin first-of($limit) {
161 | &:nth-last-child(#{$limit}):first-child {
162 | @content;
163 | }
164 | }
165 |
166 | /// This quantity-query mixin will only select the last of `$limit` items. It will not
167 | /// if there is not as much as item as you set in `$limit`.
168 | /// @group Quantity queries
169 | /// @param {number} $limit
170 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
171 | @mixin last-of($limit) {
172 | &:nth-of-type(#{$limit}):nth-last-of-type(1) {
173 | @content;
174 | }
175 | }
176 |
177 | /// This quantity-query mixin will select every items if there is at least `$num` items. It will not
178 | /// if there is not as much as item as you set in `$num`.
179 | /// @group Quantity queries
180 | /// @param {number} $limit
181 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
182 | @mixin at-least($num) {
183 | $selector: &;
184 | $child: nth(nth($selector, -1), -1);
185 |
186 | &:nth-last-child(n + #{$num}),
187 | &:nth-last-child(n + #{$num}) ~ #{$child} {
188 | @content;
189 | }
190 | }
191 |
192 | /// This quantity-query mixin will select every items if there is at most `$num` items. It will not
193 | /// if there is not as much as item as you set in `$num`.
194 | /// @group Quantity queries
195 | /// @param {number} $limit
196 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
197 | @mixin at-most($num) {
198 | $selector: &;
199 | $child: nth(nth($selector, -1), -1);
200 |
201 | &:nth-last-child(-n + #{$num}):first-child,
202 | &:nth-last-child(-n + #{$num}):first-child ~ #{$child} {
203 | @content;
204 | }
205 | }
206 |
207 | /// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
208 | /// @group Quantity queries
209 | /// @param {number} $limit
210 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
211 | @mixin in-between($min, $max) {
212 | $selector: &;
213 | $child: nth(nth($selector, -1), -1);
214 |
215 | &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child,
216 | &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} {
217 | @content;
218 | }
219 | }
220 |
221 | /// Select the first exact child
222 | /// @group no-arguments
223 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
224 | @mixin first-child() {
225 | &:first-of-type {
226 | @content
227 | }
228 | }
229 |
230 | /// Select the last exact child
231 | /// @group no-arguments
232 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
233 | @mixin last-child() {
234 | &:last-of-type {
235 | @content
236 | }
237 | }
238 |
239 | /// Select all even children.
240 | /// @group no-arguments
241 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
242 | @mixin even() {
243 | &:nth-child(even) {
244 | @content;
245 | }
246 | }
247 |
248 | /// Select all odd children.
249 | /// @group no-arguments
250 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
251 | @mixin odd() {
252 | &:nth-child(odd) {
253 | @content;
254 | }
255 | }
256 |
257 | /// Select only the first and last child.
258 | /// @group no-arguments
259 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
260 | @mixin first-last() {
261 | &:first-child,
262 | &:last-child {
263 | @content;
264 | }
265 | }
266 |
267 | /// Will only select the child if it’s unique.
268 | /// @group no-arguments
269 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
270 | /// @alias only
271 | @mixin unique() {
272 | &:only-child {
273 | @content;
274 | }
275 | }
276 |
277 | /// Will only select the child if it’s unique.
278 | /// @group no-arguments
279 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
280 | @mixin only() {
281 | &:only-child {
282 | @content;
283 | }
284 | }
285 |
286 | /// Will only select children if they are not unique. Meaning if there is at
287 | /// least 2 children, the style is applied.
288 | /// @group no-arguments
289 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
290 | @mixin not-unique() {
291 | &:not(:only-child) {
292 | @content;
293 | }
294 | }
295 |
296 |
297 | /// This mixin is used to automatically sort z-index in numerical order. But it
298 | /// can also sort them in anti-numerical order, depending the parameters you use.
299 | /// @group using functions
300 | /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
301 | /// @param {number} $num - Number of children
302 | /// @param {string} $direction [forward] - Direction of the sort
303 | /// @param {number} $index [0] - Index of the sorting
304 | @mixin child-index($num, $direction: 'forward', $index: 0) {
305 | @for $i from 1 through $num {
306 | @if ($direction == 'forward') {
307 | &:nth-child(#{$i}) {
308 | z-index: order-index($i, $index);
309 | @content;
310 | }
311 | } @else if ($direction == 'backward') {
312 | &:nth-last-child(#{$i}) {
313 | z-index: order-index($i, $index);
314 | @content;
315 | }
316 | }
317 | }
318 | }
319 |
320 | /// Used by the child-index mixin. It will returned the proper sorted numbers
321 | /// depending on the `$index` value.
322 | /// @access private
323 | /// @param {number} $num - Number of children
324 | /// @param {number} $index - Index of the sorting
325 | @function order-index($i, $index) {
326 | @return ($index + $i);
327 | }
328 |
--------------------------------------------------------------------------------
/assets/styles/tools/_fonts.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Tools / Font Faces
3 | // ==========================================================================
4 |
5 | $global-font-file-formats: "woff2", "woff" !default;
6 |
7 | //
8 | // Builds the `src` list for an `@font-face` declaration.
9 | //
10 | // @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
11 | // @link http://goo.gl/Ru1bKP
12 | //
13 | // @param {String} $font-family - The font family name.
14 | // @param {String} $file-path - The path to the font family.
15 | // @param {List} $file-formats - The file formats to request.
16 | // @return {List}
17 | //
18 | // @require {function} list-contains
19 | //
20 | // @access private
21 | //
22 | @function font-source-declaration(
23 | $font-family,
24 | $file-path,
25 | $file-formats
26 | ) {
27 | $src: ();
28 | $formats-map: (
29 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
30 | woff2: "#{$file-path}.woff2" format("woff2"),
31 | woff: "#{$file-path}.woff" format("woff"),
32 | ttf: "#{$file-path}.ttf" format("truetype"),
33 | svg: "#{$file-path}.svg##{$font-family}" format("svg"),
34 | );
35 |
36 | @each $key, $values in $formats-map {
37 | @if list-contains($file-formats, $key) {
38 | $file-path: nth($values, 1);
39 | $font-format: nth($values, 2);
40 | $src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
41 | }
42 | }
43 |
44 | @return $src;
45 | }
46 |
47 | //
48 | // Generates an `@font-face` declaration.
49 | //
50 | // You can choose the specific file formats you need to output; the mixin supports
51 | // `eot`, `ttf`, `svg`, `woff2` and `woff`.
52 | //
53 | // @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
54 | //
55 | // @param {String} $font-family - The font family name.
56 | // @param {String} $file-path - The path to the font family.
57 | // @param {String|List} $file-formats [("ttf", "woff2", "woff")]
58 | // A list of file formats to support,
59 | // for example ("eot", "ttf", "svg", "woff2", "woff").
60 | //
61 | // @content
62 | // Any additional CSS properties that are included in the `@include`
63 | // directive will be output within the `@font-face` declaration, e.g.
64 | // you can pass in `font-weight`, `font-style` and/or `unicode-range`.
65 | //
66 | // @example scss
67 | // @include font-face(
68 | // "source-sans-pro",
69 | // "fonts/source-sans-pro-regular",
70 | // ("woff2", "woff")
71 | // ) {
72 | // font-style: normal;
73 | // font-weight: 400;
74 | // }
75 | //
76 | // // CSS Output
77 | // @font-face {
78 | // font-family: "source-sans-pro";
79 | // src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
80 | // url("fonts/source-sans-pro-regular.woff") format("woff");
81 | // font-style: normal;
82 | // font-weight: 400;
83 | // }
84 | //
85 | // @require {function} _font-source-declaration
86 | // @require {function} _retrieve-bourbon-setting
87 | //
88 | @mixin font-face(
89 | $font-family,
90 | $file-path,
91 | $file-formats: $global-font-file-formats
92 | ) {
93 | @font-face {
94 | font-family: $font-family;
95 | src: font-source-declaration( $font-family, $file-path, $file-formats);
96 | @content;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/assets/styles/tools/_functions.scss:
--------------------------------------------------------------------------------
1 | // Tools / Functions
2 | // ==========================================================================
3 |
4 | //
5 | // Converts the given pixel value to its EM quivalent.
6 | //
7 | // @param {Number} $size - The pixel value to convert.
8 | // @param {Number} $base [$font-size] - The assumed base font size.
9 | // @return {Number} Scalable pixel value in EMs.
10 | //
11 | @function em($size, $base: $font-size) {
12 | @if (type-of($size) == number) {
13 | @if (unit($size) != "px") {
14 | @error "`#{$size}` needs to be a pixel value.";
15 | }
16 | } @else {
17 | @error "`#{$size}` needs to be a number.";
18 | }
19 |
20 | @if (type-of($base) == number) {
21 | @if (unit($base) != "px") {
22 | @error "`#{$base}` needs to be a pixel value.";
23 | }
24 | } @else {
25 | @error "`#{$base}` needs to be a number.";
26 | }
27 |
28 | @return ($size / $base) * 1em;
29 | }
30 |
31 | //
32 | // Converts the given pixel value to its REM quivalent.
33 | //
34 | // @param {Number} $size - The pixel value to convert.
35 | // @param {Number} $base [$font-size] - The assumed base font size.
36 | // @return {Number} Scalable pixel value in REMs.
37 | //
38 | @function rem($size, $base: $font-size) {
39 | @if (type-of($size) == number) {
40 | @if (unit($size) != "px") {
41 | @error "`#{$size}` needs to be a pixel value.";
42 | }
43 | } @else {
44 | @error "`#{$size}` needs to be a number.";
45 | }
46 |
47 | @if (type-of($base) == number) {
48 | @if (unit($base) != "px") {
49 | @error "`#{$base}` needs to be a pixel value.";
50 | }
51 | } @else {
52 | @error "`#{$base}` needs to be a number.";
53 | }
54 |
55 | @return ($size / $base) * 1rem;
56 | }
57 |
58 | //
59 | // Converts a number to a percentage.
60 | //
61 | // @alias percentage()
62 | // @link http://sassdoc.com/annotations/#alias
63 | // @param {Number} $number - The value to convert.
64 | // @return {Number} A percentage.
65 | //
66 | @function span($number) {
67 | @return percentage($number);
68 | }
69 |
70 | //
71 | // Checks if a list contains a value(s).
72 | //
73 | // @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
74 | // @param {List} $list - The list to check against.
75 | // @param {List} $values - A single value or list of values to check for.
76 | // @return {Boolean}
77 | // @access private
78 | //
79 | @function list-contains(
80 | $list,
81 | $values...
82 | ) {
83 | @each $value in $values {
84 | @if type-of(index($list, $value)) != "number" {
85 | @return false;
86 | }
87 | }
88 |
89 | @return true;
90 | }
91 |
92 | //
93 | // Resolve whether a rule is important or not.
94 | //
95 | // @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE).
96 | // @return {String|Null} Returns `!important` or NULL.
97 | //
98 | @function important($flag: false) {
99 | @if ($flag == true) {
100 | @return !important;
101 | } @elseif ($important == false) {
102 | @return null;
103 | } @else {
104 | @error "`#{$flag}` needs to be `true` or `false`."
105 | }
106 | }
107 |
108 | //
109 | // Determine if the current context is for a WYSIWYG editor.
110 | //
111 | // @requires {String} $context - The global context of the stylesheet.
112 | // @return {Boolean} If the $context is set to "editor".
113 | //
114 | @function is-editor() {
115 | @return ('editor' == $context);
116 | }
117 |
118 | //
119 | // Determine if the current context is for the front-end.
120 | //
121 | // @requires {String} $context - The global context of the stylesheet.
122 | // @return {Boolean} If the $context is set to "frontend".
123 | //
124 | @function is-frontend() {
125 | @return ('frontend' == $context);
126 | }
127 |
128 | $context: 'frontend' !default;
129 |
--------------------------------------------------------------------------------
/assets/styles/tools/_layout.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Tools / Layout
3 | // ==========================================================================
4 |
5 | //
6 | // Grid-like layout system.
7 | //
8 | // The layout tools provide a column-style layout system. This file contains
9 | // the mixins to generate basic structural elements.
10 | //
11 | // @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
12 | //
13 |
14 | //
15 | // Generate the layout container.
16 | //
17 | // 1. Use the negative margin trick for multi-row grids:
18 | // http://csswizardry.com/2011/08/building-better-grid-systems/
19 | //
20 | // @requires {function} u-list-reset
21 | // @output `font-size`, `margin`, `padding`, `list-style`
22 | //
23 | @mixin o-layout($gutter: 0, $fix-whitespace: true) {
24 | margin: 0;
25 | padding: 0;
26 | list-style: none;
27 |
28 | @if ($fix-whitespace) {
29 | font-size: 0;
30 | }
31 |
32 | @if (type-of($gutter) == number) {
33 | margin-left: -$gutter; // [1]
34 | }
35 | }
36 |
37 | //
38 | // Generate the layout item.
39 | //
40 | // 1. Required in order to combine fluid widths with fixed gutters.
41 | // 2. Allows us to manipulate grids vertically, with text-level properties,
42 | // etc.
43 | // 3. Default item alignment is with the tops of each other, like most
44 | // traditional grid/layout systems.
45 | // 4. By default, all layout items are full-width (mobile first).
46 | // 5. Gutters provided by left padding:
47 | // http://csswizardry.com/2011/08/building-better-grid-systems/
48 | //
49 | @mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
50 | display: inline-block; // [2]
51 | width: 100%; // [4]
52 | vertical-align: top; // [3]
53 |
54 | @if ($fix-whitespace) {
55 | font-size: 1rem;
56 | }
57 |
58 | @if (type-of($gutter) == number) {
59 | padding-left: $gutter; // [5]
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/assets/styles/tools/_mixins.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Tools / Mixins
3 | // ==========================================================================
4 |
5 | //
6 | // Set the color of the highlight that appears over a link while it's being tapped.
7 | //
8 | // By default, the highlight is suppressed.
9 | //
10 | // @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight.
11 | // @output `-webkit-tap-highlight-color`
12 | //
13 | @mixin tap-highlight-color($value: rgba(0, 0, 0, 0)) {
14 | -webkit-tap-highlight-color: $value;
15 | }
16 |
17 | //
18 | // Set whether or not touch devices use momentum-based scrolling for the given element.
19 | //
20 | // By default, applies momentum-based scrolling for the current element.
21 | //
22 | // @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling.
23 | // @output `-webkit-overflow-scrolling`
24 | //
25 | @mixin overflow-scrolling($value: touch) {
26 | -webkit-overflow-scrolling: $value;
27 | }
28 |
29 | //
30 | // Micro clearfix rules for containing floats.
31 | //
32 | // @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
33 | // @param {List} $supports The type of clearfix to generate.
34 | // @output Injects `:::after` pseudo-element.
35 | //
36 | @mixin u-clearfix($supports...) {
37 | &::after {
38 | display: if(list-contains($supports, table), table, block);
39 | clear: both;
40 | content: if(list-contains($supports, opera), " ", "");
41 | }
42 | }
43 |
44 | //
45 | // Generate a font-size and baseline-compatible line-height.
46 | //
47 | // @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss
48 | // @param {Number} $font-size - The size of the font.
49 | // @param {Number} $line-height [auto] - The line box height.
50 | // @param {Boolean} $important [false] - Whether the font-size is important.
51 | // @output `font-size`, `line-height`
52 | //
53 | @mixin font-size($font-size, $line-height: auto, $important: false) {
54 | $important: important($important);
55 | font-size: rem($font-size) $important;
56 |
57 | @if ($line-height == "auto") {
58 | line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
59 | }
60 | @else {
61 | @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
62 | line-height: $line-height $important;
63 | }
64 | @elseif ($line-height != "none" and $line-height != false) {
65 | @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
66 | }
67 | }
68 | }
69 |
70 | //
71 | // Vertically-center the direct descendants of the current element.
72 | //
73 | // Centering is achieved by displaying children as inline-blocks. Any whitespace
74 | // between elements is nullified by redefining the font size of the container
75 | // and its children.
76 | //
77 | // @output `font-size`, `display`, `vertical-align`
78 | //
79 | @mixin o-vertical-center {
80 | font-size: 0;
81 |
82 | &::before {
83 | display: inline-block;
84 | height: 100%;
85 | content: "";
86 | vertical-align: middle;
87 | }
88 |
89 | > * {
90 | display: inline-block;
91 | vertical-align: middle;
92 | font-size: 1rem;
93 | }
94 | }
95 |
96 | //
97 | // Generate `:hover` and `:focus` styles in one go.
98 | //
99 | // @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss
100 | // @content Wrapped in `:focus` and `:hover` pseudo-classes.
101 | // @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
102 | //
103 | @mixin u-hocus {
104 | &:focus,
105 | &:hover {
106 | @content;
107 | }
108 | }
109 |
110 | //
111 | // Generate `:active` and `:focus` styles in one go.
112 | //
113 | // @see {Mixin} u-hocus
114 | // @content Wrapped in `:focus` and `:active` pseudo-classes.
115 | // @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
116 | //
117 | @mixin u-actus {
118 | &:focus,
119 | &:active {
120 | @content;
121 | }
122 | }
123 |
124 | //
125 | // Prevent text from wrapping onto multiple lines for the current element.
126 | //
127 | // An ellipsis is appended to the end of the line.
128 | //
129 | // 1. Ensure that the node has a maximum width after which truncation can occur.
130 | // 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor nodes.
131 | //
132 | // @param {Number} $width [100%] - The maximum width of element.
133 | // @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
134 | //
135 | @mixin u-truncate($width: 100%) {
136 | overflow: hidden;
137 | text-overflow: ellipsis;
138 | white-space: nowrap;
139 | word-wrap: normal; // [2]
140 | @if $width {
141 | max-width: $width; // [1]
142 | }
143 | }
144 |
145 | //
146 | // Applies accessible hiding to the current element.
147 | //
148 | // @param {Boolean} $important [true] - Whether the visibility is important.
149 | // @output Properties for removing the element from the document flow.
150 | //
151 | @mixin u-accessibly-hidden($important: true) {
152 | $important: important($important);
153 | position: absolute $important;
154 | overflow: hidden;
155 | clip: rect(0 0 0 0);
156 | margin: 0;
157 | padding: 0;
158 | width: 1px;
159 | height: 1px;
160 | border: 0;
161 | }
162 |
163 | //
164 | // Allows an accessibly hidden element to be focusable via keyboard navigation.
165 | //
166 | // @content For styling the now visible element.
167 | // @output Injects `:focus`, `:active` pseudo-classes.
168 | //
169 | @mixin u-accessibly-focusable {
170 | @include u-actus {
171 | clip: auto;
172 | width: auto;
173 | height: auto;
174 |
175 | @content;
176 | }
177 | }
178 |
179 | //
180 | // Hide the current element from all.
181 | //
182 | // The element will be hidden from screen readers and removed from the document flow.
183 | //
184 | // @link http://juicystudio.com/article/screen-readers-display-none.php
185 | // @param {Boolean} $important [true] - Whether the visibility is important.
186 | // @output `display`, `visibility`
187 | //
188 | @mixin u-hidden($important: true) {
189 | $important: important($important);
190 | display: none $important;
191 | visibility: hidden $important;
192 | }
193 |
194 | //
195 | // Show the current element for all.
196 | //
197 | // The element will be accessible from screen readers and visible in the document flow.
198 | //
199 | // @param {String} $display [block] - The rendering box used for the element.
200 | // @param {Boolean} $important [true] - Whether the visibility is important.
201 | // @output `display`, `visibility`
202 | //
203 | @mixin u-shown($display: block, $important: true) {
204 | $important: important($important);
205 | display: $display $important;
206 | visibility: visible $important;
207 | }
208 |
--------------------------------------------------------------------------------
/assets/styles/tools/_widths.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Tools / Widths
3 | // ==========================================================================
4 |
5 | // Optionally, the boilerplate can generate classes to offset items by a
6 | // certain width. Would you like to generate these types of class as well? E.g.:
7 | //
8 | // @example css
9 | // .u-push-1/3
10 | // .u-pull-2/4
11 | // .u-pull-1/5
12 | // .u-push-2/3
13 | $widths-offsets: false !default;
14 |
15 | // By default, the boilerplate uses fractions-like classes like `
`.
16 | // You can change the `/` to whatever you fancy with this variable.
17 | $fractions-delimiter: \/ !default;
18 |
19 | // When using Sass-MQ, this defines the separator for the breakpoints suffix
20 | // in the class name. By default, we are generating the responsive suffixes
21 | // for the classes with a `@` symbol so you get classes like:
22 | //
23 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to
24 |