-
Notifications
You must be signed in to change notification settings - Fork 0
/
_trumps.widths-generator.scss
107 lines (91 loc) · 3.07 KB
/
_trumps.widths-generator.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/*!
* Widths generator plugin for inuitcss, by @EtienneMagnier
*
* Licence: MIT
* github.com/emagnier/inuitcss.widths-generator
*/
/*------------------------------------*\
#WIDTHS-GENERATOR
\*------------------------------------*/
/**
* Generate a series of width helper classes that you can use to size things
* like grid systems. Classes can take a fraction-like format (e.g. `.2/3`)
* or a spoken-word format (e.g. `two-thirds`). Toggle formats by overriding
* the `$inuit-use-fractions` variable defined below.
*/
// Predefine the variables below in order to alter and enable specific features.
$inuit-widths: 1, 2, 3, 4, 5, 6, 8, 9, 10, 12 !default;
$inuit-widths-namespace: $inuit-namespace !default;
$inuit-use-fractions: true !default;
$inuit-widths-parts-map: (
1: One,
2: Two,
3: Three,
4: Four,
5: Five,
6: Six,
7: Seven,
8: Height,
9: Nine,
10: Ten,
11: Eleven
) !default;
$inuit-widths-wholes-map: (
1: Whole,
2: Half,
3: Third,
4: Quarter,
5: Fifth,
6: Sixth,
7: Seventh,
8: Eighth,
9: Ninth,
10: Tenth,
11: Eleventh,
12: Twelfth
) !default;
@mixin inuit-widths-generator($prefix, $wholes...) {
$inuit-widths-base-selectors: () !default !global;
@each $whole in $wholes {
$part: 1;
/**
* #{map-get($inuit-widths-wholes-map, $whole) or $whole + th}.
*/
@while $part < $whole or ($whole == $part and $part == 1) {
$part-selector: #{$part};
$whole-selector: #{$whole};
$width: $part / $whole * 100 + "%";
$selector: '[class~="#{$inuit-widths-namespace}#{$prefix}#{$part-selector}/#{$whole-selector}"]';
// Use spoken-words & check if the corresponding word exists in $inuit-widths-wholes-map.
@if $inuit-use-fractions == false {
@if map-get($inuit-widths-wholes-map, $whole) != null and map-get($inuit-widths-parts-map, $part) != null {
$part-selector: #{to-lower-case(map-get($inuit-widths-parts-map, $part))};
$whole-selector: #{to-lower-case(map-get($inuit-widths-wholes-map, $whole))};
// Pluralize the selector
@if $part > 1 {
$whole-selector: $whole-selector + 's';
}
$selector: '.#{$inuit-widths-namespace}#{$prefix}#{$part-selector}-#{$whole-selector}';
}
@else {
@warn $whole + " is an undefined spoken-word width in Inuitcss.";
}
}
// First uses of a specific width.
@if map-get($inuit-widths-base-selectors, #{$inuit-widths-namespace} + #{$prefix} + $width) == null {
$inuit-widths-base-selectors: map-merge($inuit-widths-base-selectors, (#{$inuit-widths-namespace} + #{$prefix} + $width: $selector)) !global;
#{$selector} {
width: #{$width} !important;
}
}
// Extend a previous selector which has the same width property.
@else {
#{$selector} {
@extend #{map-get($inuit-widths-base-selectors, #{$inuit-widths-namespace} + #{$prefix} + $width)};
}
}
$part: $part + 1;
}
}
}
@include inuit-widths-generator("", $inuit-widths...);