brevis 0.2.0 → 0.2.1
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/brevis.rb +1 -1
- data/stylesheets/brevis_utilities/_discontinued.scss +46 -0
- data/stylesheets/brevis_utilities/_layout.scss +118 -146
- data/stylesheets/brevis_utilities/_typography.scss +17 -0
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c144603c4055c750bfd11c7175915307159e416b
|
|
4
|
+
data.tar.gz: e52dd843f3024402bb6a6256b35176c423d1014d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3e37d3d13ce023688477d33f1c75adf889ac0ac22ba7cc9935d7c4e98f7c5dcea0a3d92307dfe28e9c7efa7155b7f8e2a5282e3383551be3b0a9424f34512dc1
|
|
7
|
+
data.tar.gz: b28312fe2dc72082212f99aea9e7b89a266e65a60ad8030af1c9f68829b3577df5f23ca3600b566aac5ff540e33b28d47bbf5446cda74303b9ec1d3ce41620f6
|
data/lib/brevis.rb
CHANGED
|
@@ -52,3 +52,49 @@ $fluid-grid-class-name: views-row;
|
|
|
52
52
|
$rc-rows
|
|
53
53
|
);
|
|
54
54
|
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
@mixin width-25($padding: 0) {
|
|
58
|
+
width: 25%;
|
|
59
|
+
float: left;
|
|
60
|
+
padding: $padding;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin width-33($padding: 0) {
|
|
64
|
+
width: 33.33%;
|
|
65
|
+
float: left;
|
|
66
|
+
padding: $padding;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@mixin width-50($padding: 0) {
|
|
70
|
+
width: 50%;
|
|
71
|
+
float: left;
|
|
72
|
+
padding: $padding;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@mixin width-66($padding: 0) {
|
|
76
|
+
width: 66%;
|
|
77
|
+
float: left;
|
|
78
|
+
padding: $padding;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@mixin width-75($padding: 0) {
|
|
82
|
+
width: 75%;
|
|
83
|
+
float: left;
|
|
84
|
+
padding: $padding;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@mixin width-100($padding: 0) {
|
|
88
|
+
width: 100%;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@mixin width-50-100($padding: 0) {
|
|
92
|
+
width: 100%;
|
|
93
|
+
float: left;
|
|
94
|
+
padding: $padding;
|
|
95
|
+
@include breakpoint($tablet-portrait) {
|
|
96
|
+
width: 50%;
|
|
97
|
+
float: left;
|
|
98
|
+
padding: $padding;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
///////////////////////////////////////////////////
|
|
2
|
-
// SYMMETRIC (FLUID) GRID
|
|
3
|
-
// http://sassmeister.com/gist/9226e7dc2a5f2dc0cef9
|
|
4
|
-
////////////////////////////////////////////////////
|
|
5
|
-
|
|
6
|
-
$spacing: 15px;
|
|
7
|
-
$spacing-double: $spacing * 2;
|
|
8
|
-
$spacing-triple: $spacing * 3;
|
|
9
|
-
$content-max-width: 1000px;
|
|
10
|
-
|
|
11
|
-
$sg-cols: 3;
|
|
12
|
-
$sg-spacing: 20px;
|
|
13
|
-
$sg-offset: null;
|
|
14
|
-
$sg-margin-direction: right;
|
|
15
|
-
$sg-rows: 4;
|
|
16
|
-
|
|
17
|
-
//////////////////////////////////////////////////////
|
|
18
|
-
@mixin content-max-width ($max-content-width: $content-max-width) {
|
|
19
|
-
max-width: $max-content-width;
|
|
20
|
-
margin: 0 auto;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
1
|
@mixin clearfix {
|
|
24
2
|
&::after {
|
|
25
3
|
content: "";
|
|
@@ -36,6 +14,24 @@ $sg-rows: 4;
|
|
|
36
14
|
}
|
|
37
15
|
}
|
|
38
16
|
|
|
17
|
+
/////////////////////////////////////////////////
|
|
18
|
+
$content-max-width: 1000px;
|
|
19
|
+
|
|
20
|
+
@mixin content-max-width ($max-content-width: $content-max-width) {
|
|
21
|
+
max-width: $max-content-width;
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
///////////////////////////////////////////////////
|
|
26
|
+
// SYMMETRIC (FLUID) GRID
|
|
27
|
+
// http://sassmeister.com/gist/9226e7dc2a5f2dc0cef9
|
|
28
|
+
////////////////////////////////////////////////////
|
|
29
|
+
$sg-cols: 3;
|
|
30
|
+
$sg-spacing: 20px;
|
|
31
|
+
$sg-offset: null;
|
|
32
|
+
$sg-margin-direction: right;
|
|
33
|
+
$sg-rows: 4;
|
|
34
|
+
|
|
39
35
|
@mixin symmetric-grid(
|
|
40
36
|
$cols: $sg-cols,
|
|
41
37
|
$space: $sg-spacing,
|
|
@@ -102,53 +98,119 @@ $sg-rows: 4;
|
|
|
102
98
|
//}
|
|
103
99
|
|
|
104
100
|
|
|
105
|
-
|
|
101
|
+
/////////////////////////////////////////////////////////////
|
|
102
|
+
// IPE WORKAROUND MIXINS
|
|
103
|
+
// Used best with Classy Panel Styles Module
|
|
104
|
+
// To make pane styles work with IPE:
|
|
105
|
+
// Use in @include panel-pane-with-ipe place of .panel-pane
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
// GENERAL USE
|
|
108
|
+
@mixin panel-pane-with-ipe ($pane-name: "main-layout-pane") {
|
|
109
|
+
.#{$pane-name} {
|
|
110
|
+
@content;
|
|
111
|
+
}
|
|
112
|
+
.panels-ipe-portlet-wrapper {
|
|
113
|
+
@content;
|
|
114
|
+
.#{$pane-name} {
|
|
115
|
+
width: 100% !important;
|
|
116
|
+
margin: 0;
|
|
117
|
+
padding: 0;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
111
120
|
}
|
|
112
|
-
|
|
113
|
-
@mixin
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
121
|
+
// APPEND TO SAME CONTAINER
|
|
122
|
+
@mixin panel-pane-ipe-compound ($pane-name: "main-layout-pane") {
|
|
123
|
+
&.#{$pane-name} {
|
|
124
|
+
@content;
|
|
125
|
+
}
|
|
126
|
+
&.panels-ipe-portlet-wrapper {
|
|
127
|
+
@content;
|
|
128
|
+
.#{$pane-name} {
|
|
129
|
+
width: 100% !important;
|
|
130
|
+
margin: 0;
|
|
131
|
+
border: 0;
|
|
132
|
+
padding: 0;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
117
135
|
}
|
|
118
|
-
|
|
119
|
-
@mixin
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
136
|
+
// NTH CHILD
|
|
137
|
+
@mixin panel-pane($nth: null, $pane-name: "main-layout-pane") {
|
|
138
|
+
@if ($nth) {
|
|
139
|
+
.#{$pane-name}:nth-child(#{$nth}),
|
|
140
|
+
.panels-ipe-portlet-wrapper:nth-child(#{$nth}) .#{$pane-name} {
|
|
141
|
+
@content;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
@else {
|
|
145
|
+
.#{$pane-name},
|
|
146
|
+
.panels-ipe-portlet-wrapper .#{$pane-name} {
|
|
147
|
+
@content;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
123
150
|
}
|
|
124
151
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
152
|
+
//////////////////////////////////////////////////////////////////
|
|
153
|
+
// REGION COLUMN LAYOUT MIXINS
|
|
154
|
+
// These styles only account for left & right margins between panes
|
|
155
|
+
@mixin region-1col (
|
|
156
|
+
$tablet-max-name: false,
|
|
157
|
+
$tablet-max-breakpoint: 600px,
|
|
158
|
+
$tablet-max-width: 450px
|
|
159
|
+
){
|
|
160
|
+
clear: both;
|
|
161
|
+
width: 100%;
|
|
162
|
+
margin-left: auto;
|
|
163
|
+
margin-right: auto;
|
|
164
|
+
@if $tablet-max-name {
|
|
165
|
+
@include breakpoint(max-width $tablet-max-breakpoint) {
|
|
166
|
+
@include panel-pane-ipe-compound {
|
|
167
|
+
&.#{$tablet-max-name} {
|
|
168
|
+
max-width: $tablet-max-width;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
129
173
|
}
|
|
130
|
-
|
|
131
|
-
@mixin
|
|
132
|
-
|
|
174
|
+
// SPECIALTY MIXINS
|
|
175
|
+
@mixin region-2col-1x3 {
|
|
176
|
+
margin-right: $spacing;
|
|
133
177
|
float: left;
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
178
|
+
clear: none;
|
|
179
|
+
max-width: 100%;
|
|
180
|
+
width: calc((100% / 2) - #{$spacing});
|
|
181
|
+
margin-left: 0;
|
|
182
|
+
&:nth-child(n + 2) {
|
|
183
|
+
margin-top: $spacing;
|
|
184
|
+
margin-bottom: 0;
|
|
185
|
+
margin-left: 0;
|
|
186
|
+
clear: right;
|
|
187
|
+
float: right;
|
|
188
|
+
}
|
|
189
|
+
&:nth-child(n + 3) {
|
|
190
|
+
margin-top: 0;
|
|
191
|
+
}
|
|
139
192
|
}
|
|
140
193
|
|
|
141
|
-
@mixin
|
|
142
|
-
width: 100%;
|
|
194
|
+
@mixin region-2col-60-40 {
|
|
143
195
|
float: left;
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
196
|
+
clear: none;
|
|
197
|
+
max-width: 100%;
|
|
198
|
+
width: 60%;
|
|
199
|
+
margin-left: 0%;
|
|
200
|
+
margin-right: 0%;
|
|
201
|
+
&:nth-child(even) {
|
|
202
|
+
width: 40%;
|
|
203
|
+
margin-left: 0%;
|
|
204
|
+
max-width: 300px;
|
|
205
|
+
}
|
|
206
|
+
&:nth-child(3) {
|
|
207
|
+
clear: left;
|
|
149
208
|
}
|
|
150
209
|
}
|
|
151
210
|
|
|
211
|
+
|
|
212
|
+
/////////////////////////////////////////////////
|
|
213
|
+
|
|
152
214
|
@mixin vertical-center(
|
|
153
215
|
$container-height: 300px,
|
|
154
216
|
$inner-name: ".block-inner",
|
|
@@ -239,93 +301,3 @@ $sg-rows: 4;
|
|
|
239
301
|
flex-wrap: wrap;
|
|
240
302
|
}
|
|
241
303
|
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
//////////////////////////////////////////////////////////////////
|
|
246
|
-
//////////////////////////////////////////////////////////////////
|
|
247
|
-
//////////////////////////////////////////////////////////////////
|
|
248
|
-
// Panel region layouts, used best with Classy Panel Styles
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
// To make hero styles work with IPE:
|
|
252
|
-
// Use in @include panel-pane-with-ipe place of .panel-pane
|
|
253
|
-
@mixin panel-pane-with-ipe {
|
|
254
|
-
.main-layout-pane {
|
|
255
|
-
@content;
|
|
256
|
-
}
|
|
257
|
-
.panels-ipe-portlet-wrapper {
|
|
258
|
-
@content;
|
|
259
|
-
.main-layout-pane {
|
|
260
|
-
width: 100% !important;
|
|
261
|
-
margin: 0;
|
|
262
|
-
padding: 0;
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
// To make hero styles work with IPE:
|
|
267
|
-
// Use in @include panel-pane-with-ipe place of .panel-pane
|
|
268
|
-
@mixin panel-pane-ipe-compound {
|
|
269
|
-
&.main-layout-pane {
|
|
270
|
-
@content;
|
|
271
|
-
}
|
|
272
|
-
&.panels-ipe-portlet-wrapper {
|
|
273
|
-
@content;
|
|
274
|
-
.main-layout-pane {
|
|
275
|
-
width: 100% !important;
|
|
276
|
-
margin: 0;
|
|
277
|
-
border: 0;
|
|
278
|
-
padding: 0;
|
|
279
|
-
//padding: 0 !important;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
@mixin panel-pane($nth: null) {
|
|
285
|
-
@if ($nth) {
|
|
286
|
-
.main-layout-pane:nth-child(#{$nth}),
|
|
287
|
-
.panels-ipe-portlet-wrapper:nth-child(#{$nth}) .main-layout-pane {
|
|
288
|
-
@content;
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
@else {
|
|
292
|
-
.main-layout-pane,
|
|
293
|
-
.panels-ipe-portlet-wrapper .main-layout-pane {
|
|
294
|
-
@content;
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
//////////////////////////////////////////////////////////////////
|
|
299
|
-
// REGION COLUMN LAYOUT MIXINS
|
|
300
|
-
// These styles only account for left & right margins between panes
|
|
301
|
-
@mixin region-1col {
|
|
302
|
-
clear: both;
|
|
303
|
-
width: 100%;
|
|
304
|
-
margin-left: auto;
|
|
305
|
-
margin-right: auto;
|
|
306
|
-
@include breakpoint(max-width $tab-l) {
|
|
307
|
-
@include panel-pane-ipe-compound {
|
|
308
|
-
&[class*='cta-primary'],
|
|
309
|
-
&[class*='cta-secondary'] {
|
|
310
|
-
max-width: 450px;
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
//CSS Columns - add colums using css-columns-count(3)
|
|
318
|
-
@mixin css-column-count($how-many:1){
|
|
319
|
-
-webkit-column-count: $how-many; /* Chrome, Safari, Opera */
|
|
320
|
-
-moz-column-count: $how-many; /* Firefox */
|
|
321
|
-
column-count: $how-many;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
//adds break - inside, accepts values auto: auto, avoid: avoid page breaks, initial: sets to default (auto), inherit: from parent
|
|
325
|
-
@mixin css-column-break($break-on-this:avoid){
|
|
326
|
-
-webkit-column-break-inside:$break-on-this;
|
|
327
|
-
-moz-column-break-inside:$break-on-this;
|
|
328
|
-
-o-column-break-inside:$break-on-this;
|
|
329
|
-
-ms-column-break-inside:$break-on-this;
|
|
330
|
-
column-break-inside:$break-on-this;
|
|
331
|
-
}
|
|
@@ -241,4 +241,21 @@ $icon-font: "FontAwesome";
|
|
|
241
241
|
box-shadow: none;
|
|
242
242
|
transform: none;
|
|
243
243
|
transition: none;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
//CSS Columns - add colums using css-columns-count(3)
|
|
248
|
+
@mixin css-column-count($how-many:1){
|
|
249
|
+
-webkit-column-count: $how-many; /* Chrome, Safari, Opera */
|
|
250
|
+
-moz-column-count: $how-many; /* Firefox */
|
|
251
|
+
column-count: $how-many;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
//adds break - inside, accepts values auto: auto, avoid: avoid page breaks, initial: sets to default (auto), inherit: from parent
|
|
255
|
+
@mixin css-column-break($break-on-this:avoid){
|
|
256
|
+
-webkit-column-break-inside:$break-on-this;
|
|
257
|
+
-moz-column-break-inside:$break-on-this;
|
|
258
|
+
-o-column-break-inside:$break-on-this;
|
|
259
|
+
-ms-column-break-inside:$break-on-this;
|
|
260
|
+
column-break-inside:$break-on-this;
|
|
244
261
|
}
|