foundation_apps_styles 1.1.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 +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +41 -0
- data/Rakefile +13 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/foundation_apps_styles.gemspec +24 -0
- data/lib/foundation_apps_styles.rb +6 -0
- data/lib/foundation_apps_styles/version.rb +3 -0
- data/vendor/assets/iconic/account.svg +44 -0
- data/vendor/assets/iconic/action.svg +38 -0
- data/vendor/assets/iconic/ban.svg +17 -0
- data/vendor/assets/iconic/bell.svg +22 -0
- data/vendor/assets/iconic/bookmark.svg +14 -0
- data/vendor/assets/iconic/cart.svg +35 -0
- data/vendor/assets/iconic/chevron.svg +28 -0
- data/vendor/assets/iconic/circle-check.svg +25 -0
- data/vendor/assets/iconic/circle-x.svg +25 -0
- data/vendor/assets/iconic/cog.svg +17 -0
- data/vendor/assets/iconic/comment-square.svg +14 -0
- data/vendor/assets/iconic/dashboard.svg +38 -0
- data/vendor/assets/iconic/document.svg +28 -0
- data/vendor/assets/iconic/envelope.svg +44 -0
- data/vendor/assets/iconic/flag.svg +24 -0
- data/vendor/assets/iconic/home.svg +28 -0
- data/vendor/assets/iconic/lock.svg +55 -0
- data/vendor/assets/iconic/magnifying-glass.svg +26 -0
- data/vendor/assets/iconic/person.svg +62 -0
- data/vendor/assets/iconic/reload.svg +19 -0
- data/vendor/assets/iconic/share-boxed.svg +17 -0
- data/vendor/assets/iconic/star.svg +14 -0
- data/vendor/assets/iconic/thumb.svg +38 -0
- data/vendor/assets/iconic/zoom.svg +56 -0
- data/vendor/assets/stylesheets/_global.scss +131 -0
- data/vendor/assets/stylesheets/_includes.scss +33 -0
- data/vendor/assets/stylesheets/_settings.scss +614 -0
- data/vendor/assets/stylesheets/components/_accordion.scss +72 -0
- data/vendor/assets/stylesheets/components/_action-sheet.scss +265 -0
- data/vendor/assets/stylesheets/components/_block-list.scss +360 -0
- data/vendor/assets/stylesheets/components/_button-group.scss +197 -0
- data/vendor/assets/stylesheets/components/_button.scss +205 -0
- data/vendor/assets/stylesheets/components/_card.scss +93 -0
- data/vendor/assets/stylesheets/components/_extras.scss +54 -0
- data/vendor/assets/stylesheets/components/_forms.scss +460 -0
- data/vendor/assets/stylesheets/components/_grid.scss +422 -0
- data/vendor/assets/stylesheets/components/_iconic.scss +95 -0
- data/vendor/assets/stylesheets/components/_label.scss +134 -0
- data/vendor/assets/stylesheets/components/_list.scss +19 -0
- data/vendor/assets/stylesheets/components/_menu-bar.scss +382 -0
- data/vendor/assets/stylesheets/components/_modal.scss +129 -0
- data/vendor/assets/stylesheets/components/_motion.scss +525 -0
- data/vendor/assets/stylesheets/components/_notification.scss +207 -0
- data/vendor/assets/stylesheets/components/_off-canvas.scss +169 -0
- data/vendor/assets/stylesheets/components/_panel.scss +134 -0
- data/vendor/assets/stylesheets/components/_popup.scss +68 -0
- data/vendor/assets/stylesheets/components/_switch.scss +134 -0
- data/vendor/assets/stylesheets/components/_tabs.scss +100 -0
- data/vendor/assets/stylesheets/components/_title-bar.scss +135 -0
- data/vendor/assets/stylesheets/components/_typography.scss +345 -0
- data/vendor/assets/stylesheets/components/_utilities.scss +160 -0
- data/vendor/assets/stylesheets/foundation-apps.css +6146 -0
- data/vendor/assets/stylesheets/foundation.scss +50 -0
- data/vendor/assets/stylesheets/helpers/_breakpoints.scss +154 -0
- data/vendor/assets/stylesheets/helpers/_functions.scss +343 -0
- data/vendor/assets/stylesheets/helpers/_images.scss +19 -0
- data/vendor/assets/stylesheets/helpers/_mixins.scss +123 -0
- data/vendor/assets/stylesheets/vendor/_normalize.scss +424 -0
- metadata +140 -0
@@ -0,0 +1,72 @@
|
|
1
|
+
/*
|
2
|
+
ACCORDION
|
3
|
+
---------
|
4
|
+
|
5
|
+
The trusy accordion allows you to create a series of vertical tabs.
|
6
|
+
*/
|
7
|
+
|
8
|
+
/// @Foundation.settings
|
9
|
+
// Accordion
|
10
|
+
$accordion-border: 1px solid $gray-dark !default;
|
11
|
+
|
12
|
+
$accordion-title-background: $gray-light !default;
|
13
|
+
$accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;
|
14
|
+
$accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;
|
15
|
+
$accordion-title-color: isitlight($accordion-title-background) !default;
|
16
|
+
$accordion-title-color-active: isitlight($accordion-title-background) !default;
|
17
|
+
|
18
|
+
$accordion-title-padding: $global-padding !default;
|
19
|
+
$accordion-content-padding: $global-padding !default;
|
20
|
+
///
|
21
|
+
|
22
|
+
@mixin accordion-title(
|
23
|
+
$background: $accordion-title-background,
|
24
|
+
$background-hover: $accordion-title-background-hover,
|
25
|
+
$background-active: $accordion-title-background-active,
|
26
|
+
$color: $accordion-title-color,
|
27
|
+
$color-active: $accordion-title-color-active,
|
28
|
+
$padding: $accordion-title-padding
|
29
|
+
) {
|
30
|
+
padding: $padding;
|
31
|
+
background: $background;
|
32
|
+
color: $color;
|
33
|
+
line-height: 1;
|
34
|
+
cursor: pointer;
|
35
|
+
|
36
|
+
&:hover {
|
37
|
+
background: $background-hover;
|
38
|
+
}
|
39
|
+
|
40
|
+
.is-active > & {
|
41
|
+
background: $background-active;
|
42
|
+
color: $color-active;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin accordion-content(
|
47
|
+
$padding: $accordion-content-padding
|
48
|
+
) {
|
49
|
+
padding: $padding;
|
50
|
+
|
51
|
+
display: none;
|
52
|
+
.is-active > & {
|
53
|
+
display: block;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
@include exports(accordion) {
|
58
|
+
.accordion {
|
59
|
+
@if hasvalue($accordion-border) {
|
60
|
+
border: $accordion-border;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
.accordion-item {
|
64
|
+
|
65
|
+
}
|
66
|
+
.accordion-title {
|
67
|
+
@include accordion-title;
|
68
|
+
}
|
69
|
+
.accordion-content {
|
70
|
+
@include accordion-content;
|
71
|
+
}
|
72
|
+
}
|
@@ -0,0 +1,265 @@
|
|
1
|
+
/*
|
2
|
+
ACTION SHEET
|
3
|
+
------------
|
4
|
+
|
5
|
+
A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
|
6
|
+
*/
|
7
|
+
|
8
|
+
/// @Foundation.settings
|
9
|
+
// Action Sheet
|
10
|
+
$actionsheet-background: white !default;
|
11
|
+
$actionsheet-border-color: #ccc !default;
|
12
|
+
$actionsheet-animate: transform opacity !default;
|
13
|
+
$actionsheet-animation-speed: 0.25s !default;
|
14
|
+
$actionsheet-width: 300px !default;
|
15
|
+
$actionsheet-radius: 4px !default;
|
16
|
+
$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
|
17
|
+
$actionsheet-padding: $global-padding !default;
|
18
|
+
$actionsheet-tail-size: 10px !default;
|
19
|
+
|
20
|
+
$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
|
21
|
+
|
22
|
+
$actionsheet-link-color: #000 !default;
|
23
|
+
$actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
|
24
|
+
///
|
25
|
+
|
26
|
+
/*
|
27
|
+
Styles for the list inside an action sheet.
|
28
|
+
Don't include this mixin if you want to build custom controls inside the sheet.
|
29
|
+
*/
|
30
|
+
@mixin action-sheet-menu(
|
31
|
+
$padding: $actionsheet-padding,
|
32
|
+
$color: $actionsheet-link-color,
|
33
|
+
$border-color: $actionsheet-border-color,
|
34
|
+
$background-hover: $actionsheet-link-background-hover
|
35
|
+
) {
|
36
|
+
// Menu container
|
37
|
+
ul {
|
38
|
+
margin: -($padding);
|
39
|
+
margin-top: 0;
|
40
|
+
list-style-type: none;
|
41
|
+
user-select: none;
|
42
|
+
|
43
|
+
// If the menu has no content above it
|
44
|
+
&:first-child {
|
45
|
+
margin-top: -$padding;
|
46
|
+
|
47
|
+
li:first-child {
|
48
|
+
border-top: 0;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// Menu links
|
53
|
+
a {
|
54
|
+
display: block;
|
55
|
+
padding: $padding * 0.8;
|
56
|
+
line-height: 1;
|
57
|
+
color: $color;
|
58
|
+
border-top: 1px solid $border-color;
|
59
|
+
|
60
|
+
&:hover {
|
61
|
+
color: $color;
|
62
|
+
background: $background-hover;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
.alert > a {
|
67
|
+
color: $alert-color;
|
68
|
+
}
|
69
|
+
.disabled > a {
|
70
|
+
pointer-events: none;
|
71
|
+
color: #999;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
/*
|
77
|
+
Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
|
78
|
+
*/
|
79
|
+
@mixin action-sheet(
|
80
|
+
$position: bottom,
|
81
|
+
$shadow: $actionsheet-shadow,
|
82
|
+
$animate: $actionsheet-animate,
|
83
|
+
$animation-speed: $actionsheet-animation-speed,
|
84
|
+
$padding: $actionsheet-padding,
|
85
|
+
$background: $actionsheet-background
|
86
|
+
) {
|
87
|
+
position: fixed;
|
88
|
+
left: 0;
|
89
|
+
z-index: 1000;
|
90
|
+
width: 100%;
|
91
|
+
padding: $padding;
|
92
|
+
background: $background;
|
93
|
+
text-align: center;
|
94
|
+
transition-property: $animate;
|
95
|
+
transition-duration: $animation-speed;
|
96
|
+
transition-timing-function: ease-out;
|
97
|
+
|
98
|
+
@if hasvalue($shadow) {
|
99
|
+
box-shadow: $shadow;
|
100
|
+
}
|
101
|
+
|
102
|
+
// Positions
|
103
|
+
@if $position == bottom {
|
104
|
+
bottom: 0;
|
105
|
+
transform: translateY(100%);
|
106
|
+
|
107
|
+
&.is-active {
|
108
|
+
transform: translateY(0%);
|
109
|
+
}
|
110
|
+
}
|
111
|
+
// These two don't quite work as planned yet
|
112
|
+
@else if $position == top {
|
113
|
+
top: 0;
|
114
|
+
transform: translateY(-100%);
|
115
|
+
|
116
|
+
&.is-active {
|
117
|
+
transform: translateY(0%);
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
@mixin popup-menu(
|
123
|
+
$position: bottom,
|
124
|
+
$background: $actionsheet-background,
|
125
|
+
$width: $actionsheet-width,
|
126
|
+
$radius: $actionsheet-radius,
|
127
|
+
$shadow: $actionsheet-popup-shadow,
|
128
|
+
$tail-size: $actionsheet-tail-size
|
129
|
+
) {
|
130
|
+
/*
|
131
|
+
Core styles
|
132
|
+
*/
|
133
|
+
position: absolute;
|
134
|
+
left: 50%;
|
135
|
+
width: $width;
|
136
|
+
border-radius: $radius;
|
137
|
+
opacity: 0;
|
138
|
+
pointer-events: none;
|
139
|
+
|
140
|
+
/*
|
141
|
+
Menu shadow
|
142
|
+
*/
|
143
|
+
@if hasvalue($shadow) {
|
144
|
+
box-shadow: $shadow;
|
145
|
+
}
|
146
|
+
|
147
|
+
/*
|
148
|
+
Active state
|
149
|
+
*/
|
150
|
+
&.is-active {
|
151
|
+
opacity: 1;
|
152
|
+
pointer-events: auto;
|
153
|
+
}
|
154
|
+
|
155
|
+
/*
|
156
|
+
Menu tail
|
157
|
+
*/
|
158
|
+
&::before, &::after {
|
159
|
+
content: '';
|
160
|
+
position: absolute;
|
161
|
+
left: 50%;
|
162
|
+
display: block;
|
163
|
+
width: 0px;
|
164
|
+
height: 0px;
|
165
|
+
border-left: $tail-size solid transparent;
|
166
|
+
border-right: $tail-size solid transparent;
|
167
|
+
margin-left: -($tail-size);
|
168
|
+
}
|
169
|
+
|
170
|
+
/*
|
171
|
+
Positioning
|
172
|
+
*/
|
173
|
+
@if $position == bottom {
|
174
|
+
top: auto;
|
175
|
+
bottom: 0;
|
176
|
+
transform: translateX(-50%) translateY(110%);
|
177
|
+
&.is-active {
|
178
|
+
transform: translateX(-50%) translateY(100%);
|
179
|
+
}
|
180
|
+
|
181
|
+
&::before, &::after {
|
182
|
+
top: -($tail-size);
|
183
|
+
bottom: auto;
|
184
|
+
border-top: 0;
|
185
|
+
border-bottom: $tail-size solid $background;
|
186
|
+
}
|
187
|
+
&::before {
|
188
|
+
top: -($tail-size + 2);
|
189
|
+
border-bottom-color: rgba(black, 0.15);
|
190
|
+
}
|
191
|
+
|
192
|
+
}
|
193
|
+
@else if $position == top {
|
194
|
+
top: 0;
|
195
|
+
bottom: auto;
|
196
|
+
transform: translateX(-50%) translateY(-120%);
|
197
|
+
&.is-active {
|
198
|
+
transform: translateX(-50%) translateY(-110%);
|
199
|
+
}
|
200
|
+
|
201
|
+
&::before, &::after {
|
202
|
+
top: auto;
|
203
|
+
bottom: -($tail-size);
|
204
|
+
border-top: $tail-size solid $background;
|
205
|
+
border-bottom: 0;
|
206
|
+
}
|
207
|
+
&::before {
|
208
|
+
bottom: -($tail-size + 2);
|
209
|
+
border-top-color: rgba(black, 0.15);
|
210
|
+
}
|
211
|
+
}
|
212
|
+
}
|
213
|
+
|
214
|
+
@include exports(action-sheet) {
|
215
|
+
.action-sheet-container {
|
216
|
+
position: relative;
|
217
|
+
display: inline-block;
|
218
|
+
|
219
|
+
.button {
|
220
|
+
margin-left: 0;
|
221
|
+
margin-right: 0;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
.action-sheet {
|
225
|
+
@include action-sheet;
|
226
|
+
@include action-sheet-menu;
|
227
|
+
|
228
|
+
@include breakpoint(medium) {
|
229
|
+
@include popup-menu;
|
230
|
+
|
231
|
+
&.top {
|
232
|
+
@include popup-menu(top);
|
233
|
+
}
|
234
|
+
}
|
235
|
+
|
236
|
+
&.primary {
|
237
|
+
background: $primary-color;
|
238
|
+
color: isitlight($primary-color);
|
239
|
+
border: 0;
|
240
|
+
&::before { display: none; }
|
241
|
+
&::before, &::after { border-top-color: $primary-color; }
|
242
|
+
&.top::before, &.top::after { border-bottom-color: $primary-color; }
|
243
|
+
|
244
|
+
@include action-sheet-menu(
|
245
|
+
$color: isitlight($primary-color),
|
246
|
+
$border-color: smartscale($primary-color, 10%),
|
247
|
+
$background-hover: smartscale($primary-color)
|
248
|
+
);
|
249
|
+
}
|
250
|
+
&.dark {
|
251
|
+
background: $dark-color;
|
252
|
+
color: isitlight($dark-color);
|
253
|
+
border: 0;
|
254
|
+
&::before { display: none; }
|
255
|
+
&::before, &::after { border-top-color: $dark-color; }
|
256
|
+
&.top::before, &.top::after { border-bottom-color: $dark-color; }
|
257
|
+
|
258
|
+
@include action-sheet-menu(
|
259
|
+
$color: isitlight($dark-color),
|
260
|
+
$border-color: smartscale($dark-color, 10%),
|
261
|
+
$background-hover: smartscale($dark-color)
|
262
|
+
);
|
263
|
+
}
|
264
|
+
}
|
265
|
+
}
|
@@ -0,0 +1,360 @@
|
|
1
|
+
/*
|
2
|
+
BLOCK LIST
|
3
|
+
----------
|
4
|
+
|
5
|
+
A generic list component that can accomodate a variety of styles and controls.
|
6
|
+
|
7
|
+
Features:
|
8
|
+
- Icons
|
9
|
+
- Labels
|
10
|
+
- Chevrons
|
11
|
+
- Text fields
|
12
|
+
- Dropdown menus
|
13
|
+
- Checkbox/radio inputs
|
14
|
+
*/
|
15
|
+
|
16
|
+
/// @Foundation.settings
|
17
|
+
// Block List
|
18
|
+
$blocklist-background: #fff !default;
|
19
|
+
$blocklist-fullbleed: true !default;
|
20
|
+
$blocklist-fontsize: 1rem !default;
|
21
|
+
|
22
|
+
$blocklist-item-padding: 0.8rem 1rem !default;
|
23
|
+
$blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;
|
24
|
+
$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;
|
25
|
+
$blocklist-item-color-disabled: #999 !default;
|
26
|
+
$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;
|
27
|
+
|
28
|
+
$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;
|
29
|
+
$blocklist-item-icon-size: 0.8 !default;
|
30
|
+
|
31
|
+
$blocklist-header-fontsize: 0.8em !default;
|
32
|
+
$blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;
|
33
|
+
$blocklist-header-uppercase: true;
|
34
|
+
|
35
|
+
$blocklist-check-icons: true !default;
|
36
|
+
///
|
37
|
+
|
38
|
+
/*
|
39
|
+
Adds styles for a block list container.
|
40
|
+
|
41
|
+
$font-size: global font size for the list.
|
42
|
+
$full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
|
43
|
+
*/
|
44
|
+
%block-list-container {
|
45
|
+
margin-bottom: 1rem;
|
46
|
+
line-height: 1;
|
47
|
+
user-select: none;
|
48
|
+
|
49
|
+
&, ul {
|
50
|
+
list-style-type: none;
|
51
|
+
}
|
52
|
+
ul {
|
53
|
+
margin-left: 0;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
@mixin block-list-container(
|
57
|
+
$font-size: $blocklist-fontsize,
|
58
|
+
$full-bleed: $blocklist-fullbleed
|
59
|
+
) {
|
60
|
+
@extend %block-list-container;
|
61
|
+
font-size: $font-size;
|
62
|
+
|
63
|
+
@if $full-bleed {
|
64
|
+
margin-left: -$global-padding;
|
65
|
+
margin-right: -$global-padding;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
/*
|
70
|
+
Styles block list headers on the selector you include this mixin in (normally a <header>).
|
71
|
+
|
72
|
+
$color - color of the header.
|
73
|
+
$font-size - font size of the header.
|
74
|
+
$offset - left margin to add to the header, to line it up with the list items.
|
75
|
+
*/
|
76
|
+
@mixin block-list-header(
|
77
|
+
$color: $blocklist-header-color,
|
78
|
+
$font-size: $blocklist-header-fontsize,
|
79
|
+
$uppercase: $blocklist-header-uppercase,
|
80
|
+
$offset: get-side($blocklist-item-padding, left)
|
81
|
+
) {
|
82
|
+
margin-top: 1em;
|
83
|
+
color: $color;
|
84
|
+
font-weight: bold;
|
85
|
+
margin-bottom: 0.5em;
|
86
|
+
margin-left: $offset;
|
87
|
+
font-size: $font-size;
|
88
|
+
cursor: default;
|
89
|
+
@if $uppercase { text-transform: uppercase; }
|
90
|
+
}
|
91
|
+
|
92
|
+
/*
|
93
|
+
Styles block list items on the selector you include this mixin in (normally an <li>).
|
94
|
+
|
95
|
+
$color - color of items.
|
96
|
+
$color-hover - color of items on hover.
|
97
|
+
$background - background of items.
|
98
|
+
$background-hover - background of items on hover.
|
99
|
+
$border - border between items.
|
100
|
+
$padding - padding on items.
|
101
|
+
*/
|
102
|
+
@mixin block-list-item(
|
103
|
+
$color: $blocklist-item-color,
|
104
|
+
$color-hover: $blocklist-item-color,
|
105
|
+
$color-disabled: $blocklist-item-color-disabled,
|
106
|
+
$background: transparent,
|
107
|
+
$background-hover: $blocklist-item-background-hover,
|
108
|
+
$border: $blocklist-item-border,
|
109
|
+
$padding: $blocklist-item-padding
|
110
|
+
) {
|
111
|
+
position: relative;
|
112
|
+
|
113
|
+
@if hasvalue($border) {
|
114
|
+
border-bottom: $border;
|
115
|
+
&:first-child {
|
116
|
+
border-top: $border;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
// Inner elements share the same basic styles
|
121
|
+
> a, > span, > label {
|
122
|
+
display: block;
|
123
|
+
padding: $padding;
|
124
|
+
padding-left: get-side($padding, left);
|
125
|
+
color: $color;
|
126
|
+
line-height: 1;
|
127
|
+
}
|
128
|
+
> span {
|
129
|
+
cursor: default;
|
130
|
+
}
|
131
|
+
> a, > label {
|
132
|
+
cursor: pointer;
|
133
|
+
|
134
|
+
&:hover {
|
135
|
+
color: $color-hover;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
> a, > label, select {
|
139
|
+
&:hover {
|
140
|
+
background: $background-hover;
|
141
|
+
}
|
142
|
+
}
|
143
|
+
|
144
|
+
// Coloring classes
|
145
|
+
&.caution > a {
|
146
|
+
&, &:hover { color: $alert-color; }
|
147
|
+
}
|
148
|
+
&.disabled > a {
|
149
|
+
cursor: default;
|
150
|
+
&, &:hover { color: $color-disabled; }
|
151
|
+
&:hover { background: transparent; }
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
155
|
+
/*
|
156
|
+
Adds label styles to the class you include this mixin in.
|
157
|
+
|
158
|
+
$color - color of the label.
|
159
|
+
$left-class - extra class to flip the orientation of the label.
|
160
|
+
$left-padding - left padding to use for left-hand labels.
|
161
|
+
*/
|
162
|
+
@mixin block-list-label(
|
163
|
+
$color: $blocklist-item-label-color,
|
164
|
+
$left-class: 'left',
|
165
|
+
$left-padding: get-side($blocklist-item-padding, top)
|
166
|
+
) {
|
167
|
+
display: inline-block;
|
168
|
+
float: right;
|
169
|
+
padding: 0;
|
170
|
+
color: $color;
|
171
|
+
pointer-events: none;
|
172
|
+
|
173
|
+
&.#{$left-class} {
|
174
|
+
margin-left: $left-padding;
|
175
|
+
float: none;
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
/*
|
180
|
+
Adds support for chevrons, which appear on the right-hand side of the item.
|
181
|
+
|
182
|
+
$color - color of the chevron.
|
183
|
+
$padding - include the global padding of block list items here.
|
184
|
+
*/
|
185
|
+
@mixin block-list-chevron(
|
186
|
+
$color: $blocklist-header-color,
|
187
|
+
$padding: $blocklist-item-padding,
|
188
|
+
$label-class: 'block-list-label'
|
189
|
+
) {
|
190
|
+
// Chevrons are a pseudo-element
|
191
|
+
&::after {
|
192
|
+
content: '\203A';
|
193
|
+
display: block;
|
194
|
+
position: absolute;
|
195
|
+
right: get-side($padding, right);
|
196
|
+
top: 50%;
|
197
|
+
transform: translateY(-50%);
|
198
|
+
font-weight: bold;
|
199
|
+
color: $color;
|
200
|
+
font-size: 2em;
|
201
|
+
}
|
202
|
+
|
203
|
+
// Labels next to links move over to make room for the chevron
|
204
|
+
// TODO: this selector needs to be customiable, but adding a setting just for it might be weird
|
205
|
+
.#{$label-class} {
|
206
|
+
padding-right: get-side($padding, right) * 1.5;
|
207
|
+
}
|
208
|
+
}
|
209
|
+
|
210
|
+
/*
|
211
|
+
Adds icon styles. Call this mixin on a block list container.
|
212
|
+
|
213
|
+
$size - size of the icon as a percentage (decimal) of the list item's height.
|
214
|
+
$item-selector - overrides the 'li' selector used for list items.
|
215
|
+
*/
|
216
|
+
@mixin block-list-icons(
|
217
|
+
$size: $blocklist-item-icon-size,
|
218
|
+
$item-selector: 'li'
|
219
|
+
) {
|
220
|
+
// PH - need a better solution
|
221
|
+
$item-height:
|
222
|
+
$blocklist-fontsize
|
223
|
+
+ get-side($blocklist-item-padding, top)
|
224
|
+
+ get-side($blocklist-item-padding, top);
|
225
|
+
|
226
|
+
$icon-height: $item-height * $blocklist-item-icon-size;
|
227
|
+
$icon-offset: ($item-height - $icon-height) / 2;
|
228
|
+
|
229
|
+
#{$item-selector} {
|
230
|
+
> a, > span, > label {
|
231
|
+
padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;
|
232
|
+
}
|
233
|
+
img, .iconic {
|
234
|
+
position: absolute;
|
235
|
+
top: $icon-offset;
|
236
|
+
left: $icon-offset;
|
237
|
+
width: $icon-height;
|
238
|
+
height: $icon-height;
|
239
|
+
border-radius: 8px;
|
240
|
+
pointer-events: none;
|
241
|
+
}
|
242
|
+
}
|
243
|
+
}
|
244
|
+
|
245
|
+
/*
|
246
|
+
Adds support for text fields, select menus, and checkbox/radio groups in block lists.
|
247
|
+
|
248
|
+
$color - color of select menu arrow.
|
249
|
+
$background-hover - color of select menu when hovered over.
|
250
|
+
$padding - include the global padding of block list items here.
|
251
|
+
$dropdown-class - class to use for list items that contain a dropdown.
|
252
|
+
$switch-class - class to use for switches inside list items.
|
253
|
+
*/
|
254
|
+
@mixin block-list-inputs(
|
255
|
+
$color: $blocklist-item-color,
|
256
|
+
$background: $blocklist-background,
|
257
|
+
$background-hover: $blocklist-item-background-hover,
|
258
|
+
$padding: $blocklist-item-padding,
|
259
|
+
$icons: $blocklist-check-icons,
|
260
|
+
$dropdown-class: 'with-dropdown',
|
261
|
+
$switch-class: 'switch'
|
262
|
+
) {
|
263
|
+
// Text fields
|
264
|
+
#{$text-input-selectors} {
|
265
|
+
$top-padding: get-side($padding, top) - ($blocklist-fontsize * 0.2);
|
266
|
+
$bottom-padding: get-side($padding, bottom) - ($blocklist-fontsize * 0.2);
|
267
|
+
$left-padding: get-side($padding, left);
|
268
|
+
$right-padding: get-side($padding, right);
|
269
|
+
$height: ($blocklist-fontsize * 1.4 + $top-padding + $bottom-padding);
|
270
|
+
|
271
|
+
overflow: visible;
|
272
|
+
box-sizing: border-box;
|
273
|
+
margin: 0;
|
274
|
+
border: 0;
|
275
|
+
height: $height;
|
276
|
+
padding: $top-padding $right-padding $bottom-padding $left-padding;
|
277
|
+
color: inherit;
|
278
|
+
font-size: $blocklist-fontsize;
|
279
|
+
-webkit-font-smoothing: antialiased;
|
280
|
+
vertical-align: middle;
|
281
|
+
|
282
|
+
&:hover, &:focus {
|
283
|
+
border: 0;
|
284
|
+
}
|
285
|
+
}
|
286
|
+
|
287
|
+
// Multiple select
|
288
|
+
li > input[type="checkbox"], li > input[type="radio"] {
|
289
|
+
position: absolute;
|
290
|
+
left: -9999px;
|
291
|
+
|
292
|
+
& + label {
|
293
|
+
display: block;
|
294
|
+
font-size: $blocklist-fontsize;
|
295
|
+
margin: 0;
|
296
|
+
}
|
297
|
+
|
298
|
+
@if $icons == true {
|
299
|
+
&:checked + label {
|
300
|
+
&::before {
|
301
|
+
@include image-checkmark($color);
|
302
|
+
content: '';
|
303
|
+
background-size: 100% 100%;
|
304
|
+
width: 1.5em;
|
305
|
+
height: 1.5em;
|
306
|
+
color: $primary-color;
|
307
|
+
float: right;
|
308
|
+
pointer-events: none;
|
309
|
+
margin-top: -0.25em;
|
310
|
+
}
|
311
|
+
}
|
312
|
+
}
|
313
|
+
}
|
314
|
+
|
315
|
+
// Dropdowns
|
316
|
+
.#{$dropdown-class} {
|
317
|
+
color: inherit;
|
318
|
+
|
319
|
+
select {
|
320
|
+
// Reset pesky <select> styles
|
321
|
+
-webkit-appearance: none;
|
322
|
+
-moz-appearance: none;
|
323
|
+
outline: 0;
|
324
|
+
background: 0;
|
325
|
+
border: 0;
|
326
|
+
height: auto;
|
327
|
+
padding: $padding;
|
328
|
+
margin: 0;
|
329
|
+
font-size: 1em; // Same size as its parent
|
330
|
+
line-height: 1;
|
331
|
+
color: inherit;
|
332
|
+
background-color: transparent;
|
333
|
+
}
|
334
|
+
}
|
335
|
+
|
336
|
+
// Switches
|
337
|
+
.#{$switch-class} {
|
338
|
+
position: absolute;
|
339
|
+
top: 50%;
|
340
|
+
right: get-side($padding, right);
|
341
|
+
transform: translateY(-50%);
|
342
|
+
}
|
343
|
+
}
|
344
|
+
|
345
|
+
@include exports(block-list) {
|
346
|
+
.block-list {
|
347
|
+
@include block-list-container;
|
348
|
+
@include block-list-inputs;
|
349
|
+
|
350
|
+
&.with-icons { @include block-list-icons; }
|
351
|
+
header { @include block-list-header; }
|
352
|
+
|
353
|
+
li {
|
354
|
+
@include block-list-item;
|
355
|
+
|
356
|
+
&.with-chevron { @include block-list-chevron; }
|
357
|
+
.block-list-label { @include block-list-label; }
|
358
|
+
}
|
359
|
+
}
|
360
|
+
}
|