gridle 1.3.36 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/gridle.rb +2 -2
- data/stylesheets/_gridle-flex.scss +4 -0
- data/stylesheets/gridle/_api.scss +508 -0
- data/stylesheets/gridle/_driver-default.scss +445 -0
- data/stylesheets/gridle/_driver-flex.scss +418 -0
- data/stylesheets/gridle/_flexbox.scss +422 -0
- data/stylesheets/gridle/_functions.scss +575 -175
- data/stylesheets/gridle/_generate-mixins.scss +320 -381
- data/stylesheets/gridle/_gridle-flex.scss +60 -0
- data/stylesheets/gridle/_gridle.scss +6 -88
- data/stylesheets/gridle/_init.scss +131 -0
- data/stylesheets/gridle/_mixins.scss +289 -728
- data/stylesheets/gridle/_settings-mixins.scss +310 -45
- data/stylesheets/gridle/_settings.scss +128 -61
- metadata +9 -4
- data/stylesheets/gridle/_common-mixins.scss +0 -124
- data/stylesheets/gridle/_silent-classes.scss +0 -104
@@ -0,0 +1,60 @@
|
|
1
|
+
// |------------------------------------------------------
|
2
|
+
// |------------------------------------------------------
|
3
|
+
// Gridle (.scss)
|
4
|
+
// Gridle is an one and unique grid system file that allows you to generate almost all
|
5
|
+
// grid you've ever dreamt about.
|
6
|
+
// |------------------------------------------------------
|
7
|
+
// |------------------------------------------------------
|
8
|
+
|
9
|
+
// |------------------------------------------------------
|
10
|
+
// |------------------------------------------------------
|
11
|
+
// Copyright (c) 2014 Olivier Bossel
|
12
|
+
|
13
|
+
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
14
|
+
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
15
|
+
// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
16
|
+
// and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
17
|
+
|
18
|
+
// The above copyright notice and this permission notice shall be included in all copies or substantial portions
|
19
|
+
// of the Software.
|
20
|
+
|
21
|
+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
22
|
+
// TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
23
|
+
// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
24
|
+
// CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
25
|
+
// IN THE SOFTWARE.
|
26
|
+
// |------------------------------------------------------
|
27
|
+
// |------------------------------------------------------
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
|
32
|
+
// |------------------------------------------------------
|
33
|
+
// |------------------------------------------------------
|
34
|
+
// | Driver
|
35
|
+
// |------------------------------------------------------
|
36
|
+
// |------------------------------------------------------
|
37
|
+
|
38
|
+
$_gridle-driver : flex;
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
// |------------------------------------------------------
|
44
|
+
// |------------------------------------------------------
|
45
|
+
// | Default init
|
46
|
+
// |------------------------------------------------------
|
47
|
+
// |------------------------------------------------------
|
48
|
+
|
49
|
+
@import 'init';
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
// |------------------------------------------------------
|
55
|
+
// |------------------------------------------------------
|
56
|
+
// | Driver flex
|
57
|
+
// |------------------------------------------------------
|
58
|
+
// |------------------------------------------------------
|
59
|
+
|
60
|
+
@import 'driver-flex';
|
@@ -26,116 +26,34 @@
|
|
26
26
|
// |------------------------------------------------------
|
27
27
|
// |------------------------------------------------------
|
28
28
|
|
29
|
-
// |------------------------------------------------------
|
30
|
-
// |------------------------------------------------------
|
31
|
-
// @created 25.03.13
|
32
|
-
// @updated 29.01.15
|
33
|
-
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
34
|
-
// @version 1.3.36
|
35
|
-
// |------------------------------------------------------
|
36
|
-
// |------------------------------------------------------
|
37
|
-
|
38
|
-
$_gridle-version : "1.3.36";
|
39
|
-
|
40
|
-
|
41
|
-
|
42
29
|
|
43
|
-
// |------------------------------------------------------
|
44
|
-
// |------------------------------------------------------
|
45
|
-
// | Variables
|
46
|
-
// |------------------------------------------------------
|
47
|
-
// |------------------------------------------------------
|
48
30
|
|
49
|
-
$_gridle_settings : (); // the default settings
|
50
|
-
$_gridle_states : (); // the variable map for each states
|
51
|
-
$_gridle_clear_classes :(); // store each automatic clear count
|
52
|
-
$_gridle_columns : (); // store the registered special columns
|
53
|
-
$_gridle_states_debug_devices : (); // save the debug states devices
|
54
31
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
// |------------------------------------------------------
|
59
32
|
// |------------------------------------------------------
|
60
|
-
// | Settings
|
61
33
|
// |------------------------------------------------------
|
62
|
-
//
|
63
|
-
|
64
|
-
@import 'settings';
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
// |------------------------------------------------------
|
70
|
-
// |------------------------------------------------------
|
71
|
-
// | Silent classes
|
72
|
-
// |------------------------------------------------------
|
73
|
-
// |------------------------------------------------------
|
74
|
-
|
75
|
-
@import 'silent-classes';
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
34
|
+
// | Driver
|
80
35
|
// |------------------------------------------------------
|
81
36
|
// |------------------------------------------------------
|
82
|
-
// | Common mixins
|
83
|
-
// |------------------------------------------------------
|
84
|
-
// |------------------------------------------------------
|
85
|
-
|
86
|
-
@import 'common-mixins';
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
// |------------------------------------------------------
|
92
|
-
// |------------------------------------------------------
|
93
|
-
// | Functions
|
94
|
-
// |------------------------------------------------------
|
95
|
-
// |------------------------------------------------------
|
96
|
-
|
97
|
-
@import 'functions';
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
// |------------------------------------------------------
|
103
|
-
// |------------------------------------------------------
|
104
|
-
// | Settings mixins
|
105
|
-
// |------------------------------------------------------
|
106
|
-
// |------------------------------------------------------
|
107
|
-
|
108
|
-
@import 'settings-mixins';
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
// |------------------------------------------------------
|
114
|
-
// |------------------------------------------------------
|
115
|
-
// | Mixins
|
116
|
-
// |------------------------------------------------------
|
117
|
-
// |------------------------------------------------------
|
118
|
-
|
119
|
-
@import 'mixins';
|
120
37
|
|
38
|
+
$_gridle-driver : default;
|
121
39
|
|
122
40
|
|
123
41
|
|
124
42
|
// |------------------------------------------------------
|
125
43
|
// |------------------------------------------------------
|
126
|
-
// |
|
44
|
+
// | Default init
|
127
45
|
// |------------------------------------------------------
|
128
46
|
// |------------------------------------------------------
|
129
47
|
|
130
|
-
@import '
|
48
|
+
@import 'init';
|
131
49
|
|
132
50
|
|
133
51
|
|
134
52
|
|
135
53
|
// |------------------------------------------------------
|
136
54
|
// |------------------------------------------------------
|
137
|
-
// |
|
55
|
+
// | Driver default
|
138
56
|
// |------------------------------------------------------
|
139
57
|
// |------------------------------------------------------
|
140
58
|
|
141
|
-
@import 'default
|
59
|
+
@import 'driver-default';
|
@@ -0,0 +1,131 @@
|
|
1
|
+
// |------------------------------------------------------
|
2
|
+
// |------------------------------------------------------
|
3
|
+
// @created 25.03.13
|
4
|
+
// @updated 29.09.15
|
5
|
+
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
6
|
+
// @version 2.0.0
|
7
|
+
// |------------------------------------------------------
|
8
|
+
// |------------------------------------------------------
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
// |------------------------------------------------------
|
14
|
+
// |------------------------------------------------------
|
15
|
+
// | Version
|
16
|
+
// |------------------------------------------------------
|
17
|
+
// |------------------------------------------------------
|
18
|
+
|
19
|
+
$_gridle-version : "2.0.0";
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
// |------------------------------------------------------
|
25
|
+
// |------------------------------------------------------
|
26
|
+
// | Variables
|
27
|
+
// |------------------------------------------------------
|
28
|
+
// |------------------------------------------------------
|
29
|
+
|
30
|
+
$_gridle_is_in_generate_phase : false; // keep track if we are in generate phase or not anymore
|
31
|
+
$_gridle_inited : false; // keep track if gridle has been inited (silent classes, etc..) or not
|
32
|
+
$_gridle_settings : (); // the default settings
|
33
|
+
$_gridle_states : (); // the variable map for each states
|
34
|
+
$_gridle_clear_classes : (); // store each automatic clear count
|
35
|
+
$_gridle_columns : (); // store the registered special columns
|
36
|
+
$_gridle_extend_base_classes : (); // save the rules that will extend the default gridle onces
|
37
|
+
$_gridle_apply_css_for : (); // save the rules that will be applied for each states on a specified gridle mixin type
|
38
|
+
|
39
|
+
$_gridle_current_state : (); // save the current state
|
40
|
+
$_gridle_current_stateName : default; // save the current state name
|
41
|
+
|
42
|
+
$_content_arg_state : null; // this variable is used to pass state through global variable into an @content
|
43
|
+
|
44
|
+
$gridle-vendor-prefix : true; // set if need to add vendor prefixes when needed
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
// |------------------------------------------------------
|
49
|
+
// |------------------------------------------------------
|
50
|
+
// | Vendors
|
51
|
+
// |------------------------------------------------------
|
52
|
+
// |------------------------------------------------------
|
53
|
+
|
54
|
+
@import 'flexbox';
|
55
|
+
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
// |------------------------------------------------------
|
60
|
+
// |------------------------------------------------------
|
61
|
+
// | Settings
|
62
|
+
// |------------------------------------------------------
|
63
|
+
// |------------------------------------------------------
|
64
|
+
|
65
|
+
@import 'settings';
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
|
70
|
+
// |------------------------------------------------------
|
71
|
+
// |------------------------------------------------------
|
72
|
+
// | Functions
|
73
|
+
// |------------------------------------------------------
|
74
|
+
// |------------------------------------------------------
|
75
|
+
|
76
|
+
@import 'functions';
|
77
|
+
|
78
|
+
|
79
|
+
|
80
|
+
|
81
|
+
// |------------------------------------------------------
|
82
|
+
// |------------------------------------------------------
|
83
|
+
// | Settings mixins
|
84
|
+
// |------------------------------------------------------
|
85
|
+
// |------------------------------------------------------
|
86
|
+
|
87
|
+
@import 'settings-mixins';
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
|
92
|
+
// |------------------------------------------------------
|
93
|
+
// |------------------------------------------------------
|
94
|
+
// | Mixins
|
95
|
+
// |------------------------------------------------------
|
96
|
+
// |------------------------------------------------------
|
97
|
+
|
98
|
+
@import 'mixins';
|
99
|
+
|
100
|
+
|
101
|
+
|
102
|
+
|
103
|
+
// |------------------------------------------------------
|
104
|
+
// |------------------------------------------------------
|
105
|
+
// | Api
|
106
|
+
// |------------------------------------------------------
|
107
|
+
// |------------------------------------------------------
|
108
|
+
|
109
|
+
@import 'api';
|
110
|
+
|
111
|
+
|
112
|
+
|
113
|
+
|
114
|
+
// |------------------------------------------------------
|
115
|
+
// |------------------------------------------------------
|
116
|
+
// | Generate mixins
|
117
|
+
// |------------------------------------------------------
|
118
|
+
// |------------------------------------------------------
|
119
|
+
|
120
|
+
@import 'generate-mixins';
|
121
|
+
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
// |------------------------------------------------------
|
126
|
+
// |------------------------------------------------------
|
127
|
+
// | Default states
|
128
|
+
// |------------------------------------------------------
|
129
|
+
// |------------------------------------------------------
|
130
|
+
|
131
|
+
// @import 'default-states';
|
@@ -4,828 +4,389 @@
|
|
4
4
|
// |------------------------------------------------------
|
5
5
|
// |------------------------------------------------------
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
@include gridle($sv, $state);
|
28
|
-
} @else if $sn == push {
|
29
|
-
@include gridle_push($sv, $state);
|
30
|
-
} @else if $sn == pull {
|
31
|
-
@include gridle_pull($sv, $state);
|
32
|
-
} @else if $sn == prefix {
|
33
|
-
@include gridle_prefix($sv, $state);
|
34
|
-
} @else if $sn == suffix {
|
35
|
-
@include gridle_suffix($sv, $state);
|
36
|
-
} @else if $sn == pull {
|
37
|
-
@include gridle_pull($sv, $state);
|
38
|
-
} @else if $sn == clear_each {
|
39
|
-
@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
|
40
|
-
} @else if $sn == centered {
|
41
|
-
@include gridle_centered($state);
|
42
|
-
} @else if $sn == parent {
|
43
|
-
@include gridle_parent($state);
|
44
|
-
} @else if $sn == vertical_align {
|
45
|
-
@include gridle_vertical_align($sv, $state);
|
46
|
-
} @else if $sn == hide {
|
47
|
-
@if $sv == true {
|
48
|
-
@include gridle_hide($state);
|
49
|
-
} @else {
|
50
|
-
@include gridle_show($state);
|
51
|
-
}
|
52
|
-
} @else if $sn == show {
|
53
|
-
@if $sv == true {
|
54
|
-
@include gridle_show($state);
|
55
|
-
} @else {
|
56
|
-
@include gridle_hide($state);
|
57
|
-
}
|
58
|
-
} @else if $sn == visible {
|
59
|
-
@if $sv == true {
|
60
|
-
@include gridle_visible($state);
|
61
|
-
} @else {
|
62
|
-
@include gridle_not_visible($state);
|
63
|
-
}
|
64
|
-
} @else if $sn == not_visible {
|
65
|
-
@if $sv == true {
|
66
|
-
@include gridle_not_visible($state);
|
67
|
-
} @else {
|
68
|
-
@include gridle_visible($state);
|
69
|
-
}
|
70
|
-
} @else if $sn == show_inline {
|
71
|
-
@if $sv == true {
|
72
|
-
@include gridle_show_inline($state);
|
73
|
-
} @else {
|
74
|
-
@include gridle_hide($state);
|
7
|
+
|
8
|
+
//
|
9
|
+
// Init
|
10
|
+
// called by _gridle_call mixin multiple times
|
11
|
+
//
|
12
|
+
@mixin gridle_init() {
|
13
|
+
@if $_gridle_inited == false {
|
14
|
+
$_gridle_inited : true !global;
|
15
|
+
@each $stateName, $state in $_gridle_states {
|
16
|
+
$classes : gridle_get_state_var(classes, $state);
|
17
|
+
@if $classes {
|
18
|
+
@at-root (without:all) {
|
19
|
+
$q : gridle_get_media_query($state);
|
20
|
+
@if $q {
|
21
|
+
@media #{$q} {
|
22
|
+
@include _gridle_init_common_silent_classes($state);
|
23
|
+
}
|
24
|
+
} @else {
|
25
|
+
@include _gridle_init_common_silent_classes($state);
|
26
|
+
}
|
75
27
|
}
|
76
|
-
} @else if $sn == float {
|
77
|
-
@include gridle_float($sv, $state);
|
78
|
-
} @else if $sn == clear {
|
79
|
-
@include gridle_clear($sv, $state);
|
80
|
-
} @else if $sn == no_gutter
|
81
|
-
or $sn == no_margin {
|
82
|
-
@include gridle_no_gutter($sv, $state);
|
83
|
-
} @else if $sn == gutter
|
84
|
-
or $sn == margin {
|
85
|
-
@include gridle_gutter($sv, $state);
|
86
|
-
} @else {
|
87
|
-
// we do nothing
|
88
28
|
}
|
89
29
|
}
|
90
30
|
}
|
91
31
|
}
|
92
32
|
|
93
|
-
// Responsive helpers mixins :
|
94
|
-
@mixin gridle_state(
|
95
|
-
$states,
|
96
|
-
$has-parent : true
|
97
|
-
) {
|
98
33
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
@if ($html-states-classes or $debug)
|
113
|
-
and $stateName {
|
114
|
-
// html class :
|
115
|
-
@if $has-parent {
|
116
|
-
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
117
|
-
} @else {
|
118
|
-
html#{_gridle_classname("#{$stateName}")} { @content; }
|
119
|
-
}
|
120
|
-
}
|
121
|
-
|
122
|
-
// get the media query :
|
123
|
-
$q : _gridle_get_media_query($state);
|
124
|
-
|
125
|
-
// make the media query if a query exist :
|
126
|
-
@if $q {
|
127
|
-
@media #{$q} {
|
128
|
-
@content;
|
129
|
-
}
|
130
|
-
}
|
131
|
-
@else
|
132
|
-
{
|
133
|
-
@content;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
} @else {
|
138
|
-
|
139
|
-
// variables :
|
140
|
-
$html-states-classes : _gridle_get_var_value(html-states-classes, $states);
|
141
|
-
$debug : _gridle_get_var_value(debug, $states);
|
142
|
-
$stateName : _gridle_get_var_value(name, $states);
|
143
|
-
|
144
|
-
// check if is a state :
|
145
|
-
@if ($html-states-classes or $debug)
|
146
|
-
and $stateName {
|
147
|
-
// html class :
|
148
|
-
@if $has-parent {
|
149
|
-
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
150
|
-
} @else {
|
151
|
-
html#{_gridle_classname("#{$stateName}")} { @content; }
|
152
|
-
}
|
34
|
+
//
|
35
|
+
// Init silent classes
|
36
|
+
//
|
37
|
+
@mixin _gridle_common_silent_class_name(
|
38
|
+
$for,
|
39
|
+
$stateName : default
|
40
|
+
) {
|
41
|
+
@if mixin-exists('_gridle_common_#{$for}') {
|
42
|
+
%#{$stateName}-#{$for} {
|
43
|
+
// inject content
|
44
|
+
@content;
|
45
|
+
// extend common class by the registered css
|
46
|
+
@include _gridle_extend_common_class($for, $stateName);
|
153
47
|
}
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
// make the media query if a query exist :
|
159
|
-
@if $q {
|
160
|
-
@media #{$q} {
|
48
|
+
@at-root (without: media) {
|
49
|
+
%at-root-#{$stateName}-#{$for} {
|
50
|
+
// inject content
|
161
51
|
@content;
|
52
|
+
// extend common class by the registered css
|
53
|
+
@include _gridle_extend_common_class($for, $stateName);
|
162
54
|
}
|
163
55
|
}
|
164
|
-
@else
|
165
|
-
{
|
166
|
-
@content;
|
167
|
-
}
|
168
|
-
|
169
56
|
}
|
170
57
|
}
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
// Container mixin :
|
175
|
-
@mixin gridle_container(
|
58
|
+
@mixin _gridle_init_common_silent_classes(
|
176
59
|
$state : default
|
177
60
|
) {
|
178
|
-
|
179
|
-
|
61
|
+
// get state name
|
62
|
+
$stateName : gridle_get_state_var(name, $state);
|
180
63
|
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
@mixin gridle(
|
185
|
-
$columns,
|
186
|
-
$state-or-context : default,
|
187
|
-
$state : default
|
188
|
-
) {
|
189
|
-
// manage state and context :
|
190
|
-
$context : null;
|
191
|
-
@if type-of($state-or-context) == number {
|
192
|
-
$context : $state-or-context;
|
193
|
-
} @else {
|
194
|
-
$state : $state-or-context;
|
64
|
+
// container
|
65
|
+
@include _gridle_common_silent_class_name(container, $stateName) {
|
66
|
+
@include _gridle_common_container($state);
|
195
67
|
}
|
196
68
|
|
197
|
-
//
|
198
|
-
@include
|
199
|
-
|
200
|
-
@if $state {
|
201
|
-
@include gridle_state($state) {
|
202
|
-
@include _gridle($columns, $state, $context);
|
203
|
-
}
|
204
|
-
} @else {
|
205
|
-
@include _gridle($columns, $state, $context);
|
206
|
-
}
|
207
|
-
}
|
208
|
-
@mixin _gridle(
|
209
|
-
$columns,
|
210
|
-
$state : default,
|
211
|
-
$context : null
|
212
|
-
) {
|
213
|
-
// vars :
|
214
|
-
$name : _gridle_get_var_value(name, $state);
|
215
|
-
@if type-of($context) != number {
|
216
|
-
$context : _gridle_get_var_value(context, $state);
|
217
|
-
}
|
218
|
-
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
219
|
-
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
220
|
-
$ie7-support : _gridle_get_var_value(ie7-support, $state);
|
221
|
-
$debug : _gridle_get_var_value(debug, $state);
|
222
|
-
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
223
|
-
|
224
|
-
// manage columns
|
225
|
-
@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
|
226
|
-
// the columns is a saved one, get the context and column value
|
227
|
-
$column : map-get($_gridle_columns, $columns);
|
228
|
-
$context : map-get($column, context);
|
229
|
-
$columns : map-get($column, columns);
|
230
|
-
} @else if type-of($columns) == number {
|
231
|
-
$columns : $columns / $name-multiplicator;
|
232
|
-
} @else {
|
233
|
-
@error "the column #{$columns} does not exist...";
|
234
|
-
}
|
235
|
-
|
236
|
-
// vars :
|
237
|
-
$width : percentage(1 / $context * $columns);
|
238
|
-
|
239
|
-
// set value :
|
240
|
-
width:$width;
|
241
|
-
|
242
|
-
// ie7 support :
|
243
|
-
@if $ie7-support == true {
|
244
|
-
*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
|
245
|
-
}
|
246
|
-
|
247
|
-
// debug :
|
248
|
-
@if $debug == true and $debug-show-class-names == true {
|
249
|
-
#{$gridle-debug-selector} {
|
250
|
-
&:before {
|
251
|
-
@if $name == default {
|
252
|
-
content:"grid-#{$name}-#{$columns}";
|
253
|
-
} @else {
|
254
|
-
content:"grid-#{$name}-#{$columns}" !important;
|
255
|
-
}
|
256
|
-
}
|
257
|
-
&.parent:before {
|
258
|
-
@if $name == default {
|
259
|
-
content:"grid-parent-#{$name}-#{$columns}";
|
260
|
-
} @else {
|
261
|
-
content:"grid-parent-#{$name}-#{$columns}" !important;
|
262
|
-
}
|
263
|
-
}
|
264
|
-
}
|
69
|
+
// order
|
70
|
+
@include _gridle_common_silent_class_name(grid-order, $stateName) {
|
71
|
+
@include _gridle_common_grid_order($state);
|
265
72
|
}
|
266
|
-
}
|
267
|
-
|
268
73
|
|
269
|
-
//
|
270
|
-
|
271
|
-
@
|
272
|
-
$columns,
|
273
|
-
$state-or-context : default,
|
274
|
-
$state : default
|
275
|
-
) {
|
276
|
-
// manage state and context
|
277
|
-
$context : null;
|
278
|
-
@if type-of($state-or-context) == number {
|
279
|
-
$context : $state-or-context;
|
280
|
-
} @else {
|
281
|
-
$state : $state-or-context;
|
74
|
+
// row
|
75
|
+
@include _gridle_common_silent_class_name(row, $stateName) {
|
76
|
+
@include _gridle_common_row($state);
|
282
77
|
}
|
283
78
|
|
284
|
-
//
|
285
|
-
@include
|
286
|
-
|
287
|
-
// check if need media query :
|
288
|
-
@if $state {
|
289
|
-
@include gridle_state($state) {
|
290
|
-
@include _gridle_push($columns, $state, $context);
|
291
|
-
}
|
292
|
-
} @else {
|
293
|
-
@include _gridle_push($columns, $state, $context);
|
79
|
+
// row-full
|
80
|
+
@include _gridle_common_silent_class_name(row-full, $stateName) {
|
81
|
+
@include _gridle_common_row_full($state);
|
294
82
|
}
|
295
|
-
}
|
296
|
-
@mixin _gridle_push(
|
297
|
-
$columns,
|
298
|
-
$state : default,
|
299
|
-
$context : null
|
300
|
-
) {
|
301
|
-
// variables :
|
302
|
-
$name : _gridle_get_var_value(name, $state);
|
303
|
-
@if type-of($context) != number {
|
304
|
-
$context : _gridle_get_var_value(context, $state);
|
305
|
-
}
|
306
|
-
$direction : _gridle_get_var_value(direction, $state);
|
307
|
-
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
308
|
-
$debug : _gridle_get_var_value(debug, $state);
|
309
|
-
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
310
|
-
|
311
|
-
// vars :
|
312
|
-
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
313
|
-
@if $direction == rtl { $width : $width*-1; }
|
314
|
-
left:$width;
|
315
|
-
|
316
|
-
// debug css :
|
317
|
-
@if $debug == true and $debug-show-class-names == true {
|
318
|
-
#{$gridle-debug-selector} {
|
319
|
-
&:after {
|
320
|
-
@if $name == default {
|
321
|
-
content:"push-#{$name}-#{$columns}";
|
322
|
-
} @else {
|
323
|
-
content:"push-#{$name}-#{$columns}" !important;
|
324
|
-
}
|
325
|
-
}
|
326
|
-
}
|
327
|
-
}
|
328
|
-
|
329
|
-
}
|
330
83
|
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
@mixin gridle_pull(
|
335
|
-
$columns,
|
336
|
-
$state : default
|
337
|
-
) {
|
338
|
-
// common :
|
339
|
-
@include _gridle_pull_common($state);
|
340
|
-
|
341
|
-
// check if need media query :
|
342
|
-
@if $state {
|
343
|
-
@include gridle_state($state) {
|
344
|
-
@include _gridle_pull($columns,$state);
|
345
|
-
}
|
346
|
-
} @else {
|
347
|
-
@include _gridle_pull($columns,$state);
|
348
|
-
}
|
349
|
-
}
|
350
|
-
@mixin _gridle_pull(
|
351
|
-
$columns,
|
352
|
-
$state : default
|
353
|
-
) {
|
354
|
-
// vars :
|
355
|
-
$name : _gridle_get_var_value(name, $state);
|
356
|
-
$context : _gridle_get_var_value(context, $state);
|
357
|
-
$direction : _gridle_get_var_value(direction, $state);
|
358
|
-
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
359
|
-
$debug : _gridle_get_var_value(debug, $state);
|
360
|
-
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
361
|
-
|
362
|
-
// vars :
|
363
|
-
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
364
|
-
@if $direction == rtl { $width : $width*-1; }
|
365
|
-
right:$width;
|
366
|
-
|
367
|
-
// debug css :
|
368
|
-
@if $debug == true and $debug-show-class-names == true {
|
369
|
-
#{$gridle-debug-selector} {
|
370
|
-
&:after {
|
371
|
-
@if $name == default {
|
372
|
-
content:"pull-#{$name}-#{$columns}";
|
373
|
-
} @else {
|
374
|
-
content:"pull-#{$name}-#{$columns}" !important;
|
375
|
-
}
|
376
|
-
}
|
377
|
-
}
|
84
|
+
// col
|
85
|
+
@include _gridle_common_silent_class_name(col, $stateName) {
|
86
|
+
@include _gridle_common_col($state);
|
378
87
|
}
|
379
|
-
}
|
380
88
|
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
@mixin gridle_prefix(
|
385
|
-
$columns,
|
386
|
-
$state : default
|
387
|
-
) {
|
388
|
-
// common :
|
389
|
-
@include _gridle_prefix_common($state);
|
390
|
-
|
391
|
-
// check if need media query :
|
392
|
-
@if $state {
|
393
|
-
@include gridle_state($state) {
|
394
|
-
@include _gridle_prefix($columns,$state);
|
395
|
-
}
|
396
|
-
} @else {
|
397
|
-
@include _gridle_prefix($columns,$state);
|
398
|
-
}
|
399
|
-
}
|
400
|
-
@mixin _gridle_prefix(
|
401
|
-
$columns,
|
402
|
-
$state : default
|
403
|
-
) {
|
404
|
-
// vars :
|
405
|
-
$name : _gridle_get_var_value(name, $state);
|
406
|
-
$context : _gridle_get_var_value(context, $state);
|
407
|
-
$direction : _gridle_get_var_value(direction, $state);
|
408
|
-
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
409
|
-
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
410
|
-
$debug : _gridle_get_var_value(debug, $state);
|
411
|
-
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
412
|
-
|
413
|
-
// vars :
|
414
|
-
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
415
|
-
|
416
|
-
// set value :
|
417
|
-
@if $direction == rtl { margin-right:$width; }
|
418
|
-
@else { margin-left:$width; }
|
419
|
-
|
420
|
-
// debug css :
|
421
|
-
@if $debug == true and $debug-show-class-names == true {
|
422
|
-
#{$gridle-debug-selector} {
|
423
|
-
&:after {
|
424
|
-
@if $name == default {
|
425
|
-
content:"prefix-#{$name}-#{$columns}";
|
426
|
-
} @else {
|
427
|
-
content:"prefix-#{$name}-#{$columns}" !important;
|
428
|
-
}
|
429
|
-
}
|
430
|
-
}
|
89
|
+
// grid
|
90
|
+
@include _gridle_common_silent_class_name(grid, $stateName) {
|
91
|
+
@include _gridle_common_grid($state);
|
431
92
|
}
|
432
|
-
}
|
433
|
-
|
434
93
|
|
435
|
-
//
|
436
|
-
|
437
|
-
@
|
438
|
-
|
439
|
-
$state : default
|
440
|
-
) {
|
441
|
-
// common :
|
442
|
-
@include _gridle_suffix_common($state);
|
94
|
+
// grid-table
|
95
|
+
@include _gridle_common_silent_class_name(grid-table, $stateName) {
|
96
|
+
@include _gridle_common_grid_table($state);
|
97
|
+
}
|
443
98
|
|
444
|
-
//
|
445
|
-
@
|
446
|
-
@include
|
447
|
-
@include _gridle_suffix($columns,$state);
|
448
|
-
}
|
449
|
-
} @else {
|
450
|
-
@include _gridle_suffix($columns,$state);
|
99
|
+
// grid-adapt
|
100
|
+
@include _gridle_common_silent_class_name(grid-adapt, $stateName) {
|
101
|
+
@include _gridle_common_grid_adapt($state);
|
451
102
|
}
|
452
|
-
|
453
|
-
|
454
|
-
$
|
455
|
-
|
456
|
-
) {
|
457
|
-
// vars :
|
458
|
-
$name : _gridle_get_var_value(name, $state);
|
459
|
-
$context : _gridle_get_var_value(context, $state);
|
460
|
-
$direction : _gridle_get_var_value(direction, $state);
|
461
|
-
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
462
|
-
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
463
|
-
$debug : _gridle_get_var_value(debug, $state);
|
464
|
-
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
465
|
-
|
466
|
-
// vars :
|
467
|
-
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
468
|
-
|
469
|
-
// set value :
|
470
|
-
@if $direction == rtl { margin-left:$width; }
|
471
|
-
@else { margin-right:$width; }
|
472
|
-
|
473
|
-
// debug css :
|
474
|
-
@if $debug == true and $debug-show-class-names == true {
|
475
|
-
#{$gridle-debug-selector} {
|
476
|
-
&:after {
|
477
|
-
@if $name == default {
|
478
|
-
content:"suffix-#{$name}-#{$columns}";
|
479
|
-
} @else {
|
480
|
-
content:"suffix-#{$name}-#{$columns}" !important;
|
481
|
-
}
|
482
|
-
}
|
483
|
-
}
|
103
|
+
|
104
|
+
// grid-grow
|
105
|
+
@include _gridle_common_silent_class_name(grid-grow, $stateName) {
|
106
|
+
@include _gridle_common_grid_grow($state);
|
484
107
|
}
|
485
|
-
}
|
486
108
|
|
109
|
+
// push
|
110
|
+
@include _gridle_common_silent_class_name(push, $stateName) {
|
111
|
+
@include _gridle_common_push($state);
|
112
|
+
}
|
487
113
|
|
488
|
-
//
|
489
|
-
|
490
|
-
@
|
491
|
-
$state : default
|
492
|
-
) {
|
493
|
-
// check if need media query :
|
494
|
-
@if $state {
|
495
|
-
@include gridle_state($state) {
|
496
|
-
@include _gridle_grid_background($state);
|
497
|
-
}
|
498
|
-
} @else {
|
499
|
-
@include _gridle_grid_background($state);
|
114
|
+
// pull
|
115
|
+
@include _gridle_common_silent_class_name(pull, $stateName) {
|
116
|
+
@include _gridle_common_pull($state);
|
500
117
|
}
|
501
|
-
|
502
|
-
|
503
|
-
$
|
504
|
-
)
|
505
|
-
|
506
|
-
// variables :
|
507
|
-
$context : _gridle_get_var_value(context, $state);
|
508
|
-
|
509
|
-
position:relative;
|
510
|
-
z-index:9999;
|
511
|
-
&:before {
|
512
|
-
content:'';
|
513
|
-
position:absolute;
|
514
|
-
top:0; left:0;
|
515
|
-
width:100%; height:100% !important;
|
516
|
-
// vars :
|
517
|
-
$width : percentage(1 / $context);
|
518
|
-
background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
|
519
|
-
background-size:($width*2) 100%;
|
520
|
-
// background-position:$gridle-gutter-width/2 0;
|
118
|
+
|
119
|
+
// prefix
|
120
|
+
@include _gridle_common_silent_class_name(prefix, $stateName) {
|
121
|
+
@include _gridle_common_prefix($state);
|
521
122
|
}
|
522
|
-
}
|
523
123
|
|
124
|
+
// suffix
|
125
|
+
@include _gridle_common_silent_class_name(suffix, $stateName) {
|
126
|
+
@include _gridle_common_suffix($state);
|
127
|
+
}
|
524
128
|
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
// Grid mixin :
|
529
|
-
// Set the width of the specified grid column :
|
530
|
-
@mixin gridle_clear_each(
|
531
|
-
$clearEach,
|
532
|
-
$clearWhat : both,
|
533
|
-
$state : default
|
534
|
-
) {
|
535
|
-
// check if need media query :
|
536
|
-
@if $state {
|
537
|
-
@include gridle_state($state) {
|
538
|
-
@include _gridle_clear_each($clearEach, $clearWhat);
|
539
|
-
}
|
540
|
-
} @else {
|
541
|
-
@include _gridle_clear_each($clearEach, $clearWhat);
|
129
|
+
// nowrap
|
130
|
+
@include _gridle_common_silent_class_name(nowrap, $stateName) {
|
131
|
+
@include _gridle_common_nowrap($state);
|
542
132
|
}
|
543
|
-
|
544
|
-
|
545
|
-
$
|
546
|
-
|
547
|
-
) {
|
548
|
-
> *:nth-child(#{$clearEach}n+1) {
|
549
|
-
clear : $clearWhat;
|
133
|
+
|
134
|
+
// wrap
|
135
|
+
@include _gridle_common_silent_class_name(wrap, $stateName) {
|
136
|
+
@include _gridle_common_wrap($state);
|
550
137
|
}
|
551
|
-
}
|
552
138
|
|
139
|
+
// clear-each
|
140
|
+
@include _gridle_common_silent_class_name(clear-each, $stateName) {
|
141
|
+
@include _gridle_common_clear_each($state);
|
142
|
+
}
|
553
143
|
|
554
|
-
//
|
555
|
-
@
|
556
|
-
|
557
|
-
) {
|
558
|
-
// check if need media query :
|
559
|
-
@if $state {
|
560
|
-
@include gridle_state($state) {
|
561
|
-
@include _gridle_centered();
|
562
|
-
}
|
563
|
-
} @else {
|
564
|
-
@include _gridle_centered();
|
144
|
+
// centered
|
145
|
+
@include _gridle_common_silent_class_name(grid-centered, $stateName) {
|
146
|
+
@include _gridle_common_grid_centered($state);
|
565
147
|
}
|
566
|
-
}
|
567
|
-
@mixin _gridle_centered() {
|
568
|
-
display:block !important;
|
569
|
-
float:none !important;
|
570
|
-
margin-left:auto !important;
|
571
|
-
margin-right:auto !important;
|
572
|
-
clear:both !important;
|
573
|
-
}
|
574
148
|
|
149
|
+
// align
|
150
|
+
@include _gridle_common_silent_class_name(row-align, $stateName) {
|
151
|
+
@include _gridle_common_row_align($state);
|
152
|
+
}
|
575
153
|
|
576
|
-
//
|
577
|
-
@
|
578
|
-
|
579
|
-
) {
|
580
|
-
// common :
|
581
|
-
@include _gridle_parent_common();
|
582
|
-
// check if need media query :
|
583
|
-
@if $state {
|
584
|
-
@include gridle_state($state) {
|
585
|
-
@include _gridle_parent();
|
586
|
-
}
|
587
|
-
} @else {
|
588
|
-
@include _gridle_parent();
|
154
|
+
// hide
|
155
|
+
@include _gridle_common_silent_class_name(hide, $stateName) {
|
156
|
+
@include _gridle_common_hide($state);
|
589
157
|
}
|
590
|
-
}
|
591
|
-
@mixin _gridle_parent() {
|
592
|
-
@include gridle_no_gutter();
|
593
|
-
}
|
594
158
|
|
159
|
+
// not-visible
|
160
|
+
@include _gridle_common_silent_class_name(not-visible, $stateName) {
|
161
|
+
@include _gridle_common_not_visible($state);
|
162
|
+
}
|
595
163
|
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
@mixin gridle_vertical_align(
|
600
|
-
$align : middle,
|
601
|
-
$state : default
|
602
|
-
) {
|
603
|
-
// check if need media query :
|
604
|
-
@if $state {
|
605
|
-
@include gridle_state($state) {
|
606
|
-
@include _gridle_vertical_align($align);
|
607
|
-
}
|
608
|
-
} @else {
|
609
|
-
@include _gridle_vertical_align($align);
|
164
|
+
// show
|
165
|
+
@include _gridle_common_silent_class_name(show, $stateName) {
|
166
|
+
@include _gridle_common_show($state);
|
610
167
|
}
|
611
|
-
}
|
612
|
-
@mixin _gridle_vertical_align(
|
613
|
-
$align : middle
|
614
|
-
) {
|
615
|
-
font-size:0;
|
616
|
-
clear:both;
|
617
168
|
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
vertical-align:$align;
|
622
|
-
font-size:1rem;
|
169
|
+
// show-inline
|
170
|
+
@include _gridle_common_silent_class_name(show-inline, $stateName) {
|
171
|
+
@include _gridle_common_show_inline($state);
|
623
172
|
}
|
624
|
-
}
|
625
173
|
|
174
|
+
// visible
|
175
|
+
@include _gridle_common_silent_class_name(visible, $stateName) {
|
176
|
+
@include _gridle_common_visible($state);
|
177
|
+
}
|
626
178
|
|
627
|
-
//
|
628
|
-
|
629
|
-
@
|
630
|
-
$state : default
|
631
|
-
) {
|
632
|
-
// check if need media query :
|
633
|
-
@if $state {
|
634
|
-
@include gridle_state($state) {
|
635
|
-
@include _gridle_hide();
|
636
|
-
}
|
637
|
-
} @else {
|
638
|
-
@include _gridle_hide();
|
179
|
+
// float
|
180
|
+
@include _gridle_common_silent_class_name(float, $stateName) {
|
181
|
+
@include _gridle_common_float($state);
|
639
182
|
}
|
640
|
-
}
|
641
|
-
@mixin _gridle_hide() {
|
642
|
-
display:none;
|
643
|
-
}
|
644
183
|
|
184
|
+
// clear
|
185
|
+
@include _gridle_common_silent_class_name(clear, $stateName) {
|
186
|
+
@include _gridle_common_clear($state);
|
187
|
+
}
|
645
188
|
|
646
|
-
//
|
647
|
-
|
648
|
-
@
|
649
|
-
$state : default
|
650
|
-
) {
|
651
|
-
// check if need media query :
|
652
|
-
@if $state {
|
653
|
-
@include gridle_state($state) {
|
654
|
-
@include _gridle_not_visible();
|
655
|
-
}
|
656
|
-
} @else {
|
657
|
-
@include _gridle_not_visible();
|
189
|
+
// no-gutter
|
190
|
+
@include _gridle_common_silent_class_name(no-gutter, $stateName) {
|
191
|
+
@include _gridle_common_no_gutter($state);
|
658
192
|
}
|
659
|
-
}
|
660
|
-
@mixin _gridle_not_visible() {
|
661
|
-
visibility:hidden;
|
662
|
-
}
|
663
193
|
|
194
|
+
// gutter
|
195
|
+
@include _gridle_common_silent_class_name(gutter, $stateName) {
|
196
|
+
@include _gridle_common_gutter($state);
|
197
|
+
}
|
664
198
|
|
665
|
-
//
|
666
|
-
|
667
|
-
@
|
668
|
-
$state : default
|
669
|
-
) {
|
670
|
-
// check if need media query :
|
671
|
-
@if $state {
|
672
|
-
@include gridle_state($state) {
|
673
|
-
@include _gridle_show();
|
674
|
-
}
|
675
|
-
} @else {
|
676
|
-
@include _gridle_show();
|
199
|
+
// row debug
|
200
|
+
@include _gridle_common_silent_class_name(row-debug, $stateName) {
|
201
|
+
@include _gridle_common_row_debug($state);
|
677
202
|
}
|
678
203
|
}
|
679
|
-
@mixin _gridle_show() {
|
680
|
-
display:block;
|
681
|
-
}
|
682
204
|
|
683
205
|
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
@mixin gridle_show_inline(
|
690
|
-
$state : default
|
206
|
+
//
|
207
|
+
// Wrap gridle mixin content to init if needed and then extend if needed
|
208
|
+
//
|
209
|
+
@mixin _gridle_call(
|
210
|
+
$for : null
|
691
211
|
) {
|
692
|
-
//
|
693
|
-
@
|
694
|
-
@include gridle_state($state) {
|
695
|
-
@include _gridle_show_inline();
|
696
|
-
}
|
697
|
-
} @else {
|
698
|
-
@include _gridle_show_inline();
|
699
|
-
}
|
700
|
-
}
|
701
|
-
@mixin _gridle_show_inline() {
|
702
|
-
display:inline-block;
|
703
|
-
}
|
212
|
+
// init if needed
|
213
|
+
@include gridle_init();
|
704
214
|
|
215
|
+
// put content
|
216
|
+
@content;
|
705
217
|
|
706
|
-
//
|
707
|
-
|
708
|
-
@
|
709
|
-
|
710
|
-
)
|
711
|
-
// check if need media query :
|
712
|
-
@if $state {
|
713
|
-
@include gridle_state($state) {
|
714
|
-
@include _gridle_visible();
|
218
|
+
// extend and apply css for different states
|
219
|
+
@if $for {
|
220
|
+
@include _gridle_extend($for);
|
221
|
+
@if _gridle_is_in_generate_phase() == false {
|
222
|
+
@include _gridle_apply_css_for($for);
|
715
223
|
}
|
716
|
-
} @else {
|
717
|
-
@include _gridle_visible();
|
718
224
|
}
|
719
225
|
}
|
720
|
-
@mixin _gridle_visible() {
|
721
|
-
visibility:visible;
|
722
|
-
}
|
723
226
|
|
724
227
|
|
725
|
-
//
|
726
|
-
|
727
|
-
|
728
|
-
|
228
|
+
//
|
229
|
+
// Extend
|
230
|
+
// @stateContext
|
231
|
+
// @calledBy _gridle_call
|
232
|
+
//
|
233
|
+
@mixin _gridle_extend(
|
234
|
+
$for
|
729
235
|
) {
|
730
|
-
// check if need
|
731
|
-
|
732
|
-
|
733
|
-
|
236
|
+
// check if we need the state classes
|
237
|
+
$states-classes : gridle_get_state_var(states-classes);
|
238
|
+
|
239
|
+
// extend the "at-root" version for the .state-{stateName} classes
|
240
|
+
@if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
|
241
|
+
@at-root (without: media) {
|
242
|
+
// @debug("%at-root-#{$_gridle_current_stateName}-#{$for}");
|
243
|
+
@extend %at-root-#{$_gridle_current_stateName}-#{$for} !optional;
|
734
244
|
}
|
735
245
|
} @else {
|
736
|
-
|
246
|
+
// extend using the current state name set in each gridle_state call
|
247
|
+
// @debug("%#{$_gridle_current_stateName}-#{$for}");
|
248
|
+
@extend %#{$_gridle_current_stateName}-#{$for} !optional;
|
249
|
+
}
|
250
|
+
}
|
251
|
+
|
252
|
+
|
253
|
+
//
|
254
|
+
// Apply the registered css for a certain type (grid, push, etc...)
|
255
|
+
// in each states
|
256
|
+
//
|
257
|
+
$_gridle_applied_for : ();
|
258
|
+
@mixin _gridle_apply_css_for(
|
259
|
+
$_for
|
260
|
+
) {
|
261
|
+
$selector : "#{&}-#{$_for}"; // generate a unique name that will be stacked in a map to generate only 1 time
|
262
|
+
@if map-get($_gridle_applied_for, $selector) == null {
|
263
|
+
$_gridle_applied_for : map-set($_gridle_applied_for, $selector, true) !global;
|
264
|
+
$fors-patterns : $_gridle-packages;
|
265
|
+
@each $map in $_gridle_apply_css_for {
|
266
|
+
@each $stateName, $fors in $map {
|
267
|
+
$rules : map-get($fors, $_for);
|
268
|
+
@if $rules and map-get($fors-patterns, $_for) {
|
269
|
+
@at-root (without : media) {
|
270
|
+
@include _gridle_state($stateName, true, false) {
|
271
|
+
@include gridle_use_state($stateName) {
|
272
|
+
@include _gridle_map_2_css($rules);
|
273
|
+
}
|
274
|
+
}
|
275
|
+
}
|
276
|
+
}
|
277
|
+
}
|
278
|
+
}
|
737
279
|
}
|
738
280
|
}
|
739
|
-
@mixin _gridle_float(
|
740
|
-
$float-direction : left
|
741
|
-
) {
|
742
|
-
float:#{$float-direction};
|
743
|
-
}
|
744
281
|
|
745
282
|
|
746
|
-
//
|
747
|
-
//
|
748
|
-
//
|
749
|
-
@
|
750
|
-
|
751
|
-
|
283
|
+
//
|
284
|
+
// Gridle state
|
285
|
+
//
|
286
|
+
// @param string|map|list $states A list of states, a state name or a state map
|
287
|
+
// @param boolean $has-parent Mostly always true, mean that the mixin is used in a css selector and not in css root level
|
288
|
+
//
|
289
|
+
@mixin _gridle_state(
|
290
|
+
$state : default,
|
291
|
+
$has-parent : true,
|
292
|
+
$track-current-state : true
|
752
293
|
) {
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
294
|
+
|
295
|
+
// variables :
|
296
|
+
$state : gridle_get_state($state);
|
297
|
+
$states-classes : gridle_get_state_var(states-classes, $state);
|
298
|
+
$stateName : gridle_get_state_var(name, $state);
|
299
|
+
|
300
|
+
// check if need to tack the current state
|
301
|
+
@if $track-current-state {
|
302
|
+
// save current state
|
303
|
+
$_gridle_current_state : $state !global;
|
304
|
+
$_gridle_current_stateName : $stateName !global;
|
305
|
+
}
|
306
|
+
|
307
|
+
// check if is a state :
|
308
|
+
@if ($states-classes)
|
309
|
+
and $stateName {
|
310
|
+
// html class :
|
311
|
+
@at-root (without: media) {
|
312
|
+
@if $has-parent {
|
313
|
+
.state-#{$stateName} & {
|
314
|
+
@content;
|
315
|
+
}
|
316
|
+
} @else {
|
317
|
+
.state-#{$stateName} {
|
318
|
+
@content;
|
319
|
+
}
|
320
|
+
}
|
757
321
|
}
|
758
|
-
} @else {
|
759
|
-
@include _gridle_clear($clear-direction);
|
760
322
|
}
|
761
|
-
}
|
762
|
-
@mixin _gridle_clear(
|
763
|
-
$clear-direction : both
|
764
|
-
) {
|
765
|
-
clear:#{$clear-direction};
|
766
|
-
}
|
767
323
|
|
324
|
+
// get the media query :
|
325
|
+
$q : gridle_get_media_query($state);
|
768
326
|
|
769
|
-
//
|
770
|
-
|
771
|
-
|
772
|
-
@
|
773
|
-
$side : left right,
|
774
|
-
$state : default
|
775
|
-
) {
|
776
|
-
// check if need media query :
|
777
|
-
@if $state {
|
778
|
-
@include gridle_state($state) {
|
779
|
-
@include _gridle_no_gutter($side);
|
327
|
+
// make the media query if a query exist :
|
328
|
+
@if $q {
|
329
|
+
@media #{$q} {
|
330
|
+
@content;
|
780
331
|
}
|
781
332
|
} @else {
|
782
|
-
@
|
333
|
+
@content;
|
783
334
|
}
|
784
|
-
|
785
|
-
|
786
|
-
$
|
787
|
-
|
788
|
-
|
789
|
-
@include gridle_no_gutter($side, $state);
|
790
|
-
}
|
791
|
-
@mixin _gridle_no_gutter(
|
792
|
-
$side : left right
|
793
|
-
) {
|
794
|
-
@each $s in $side {
|
795
|
-
padding-#{$s} : 0;
|
335
|
+
|
336
|
+
// reset current state to default
|
337
|
+
@if $track-current-state {
|
338
|
+
$_gridle_current_state : $_gridle_settings !global;
|
339
|
+
$_gridle_current_stateName : default !global;
|
796
340
|
}
|
797
341
|
}
|
798
342
|
|
799
343
|
|
800
|
-
//
|
801
|
-
//
|
802
|
-
//
|
803
|
-
@mixin
|
804
|
-
$
|
805
|
-
$state : default
|
344
|
+
//
|
345
|
+
// Transform map to css
|
346
|
+
//
|
347
|
+
@mixin _gridle_map_2_css(
|
348
|
+
$map
|
806
349
|
) {
|
807
|
-
|
808
|
-
|
809
|
-
|
810
|
-
|
350
|
+
@each $key, $value in $map {
|
351
|
+
@if type-of($value) == map {
|
352
|
+
&#{$key} {
|
353
|
+
@each $k, $v in $value {
|
354
|
+
@if $k != null and str-index($k, gridle) and mixin-exists($k) {
|
355
|
+
$set-name : str-replace($k, "gridle_", "");
|
356
|
+
$set-name : str-replace($set-name, "_", "-", 1);
|
357
|
+
@include _gridle_set((
|
358
|
+
$set-name : $v
|
359
|
+
));
|
360
|
+
} @else {
|
361
|
+
#{$k}:#{$v};
|
362
|
+
}
|
363
|
+
}
|
364
|
+
}
|
365
|
+
} @else {
|
366
|
+
@if $key != null and str-index($key, gridle) and mixin-exists($key) {
|
367
|
+
$set-name : str-replace($key, "gridle_", "");
|
368
|
+
$set-name : str-replace($set-name, "_", "-", 1);
|
369
|
+
@include _gridle_set((
|
370
|
+
$set-name : $value
|
371
|
+
));
|
372
|
+
} @else {
|
373
|
+
#{$key}:#{$value};
|
374
|
+
}
|
811
375
|
}
|
812
|
-
} @else {
|
813
|
-
@include _gridle_gutter($side);
|
814
376
|
}
|
815
377
|
}
|
816
|
-
|
817
|
-
|
818
|
-
|
819
|
-
|
820
|
-
|
821
|
-
|
822
|
-
}
|
823
|
-
@mixin _gridle_gutter(
|
824
|
-
$side : left right,
|
378
|
+
|
379
|
+
//
|
380
|
+
// Extend common class
|
381
|
+
//
|
382
|
+
@mixin _gridle_extend_common_class(
|
383
|
+
$what,
|
825
384
|
$state : default
|
826
385
|
) {
|
827
|
-
|
828
|
-
|
829
|
-
|
386
|
+
// extend
|
387
|
+
$stateName : gridle_get_state_var(name, $state);
|
388
|
+
$extend : gridle_get_extend_class_map($what, $stateName);
|
389
|
+
@if $extend != null {
|
390
|
+
@include _gridle_map_2_css($extend);
|
830
391
|
}
|
831
392
|
}
|