ustyle 1.10.0 → 1.11.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/dist/ustyle-content.css +1 -1
- data/dist/ustyle-icons.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.json +1 -1
- data/lib/ustyle/version.rb +1 -1
- data/package.json +5 -3
- data/styleguide/assets/sass/modules/_logo.scss +20 -13
- data/styleguide/content/brand/logo.tpl +23 -6
- data/styleguide/partials/_header.tpl +4 -8
- data/vendor/assets/stylesheets/ustyle/components/_cta.scss +2 -2
- data/vendor/assets/stylesheets/ustyle/content/_base.scss +42 -14
- data/vendor/assets/stylesheets/ustyle/content/_c-header.scss +3 -6
- data/vendor/assets/stylesheets/ustyle/content/_c-social.scss +0 -1
- data/vendor/assets/stylesheets/ustyle/mixins/_baseline.scss +7 -5
- data/vendor/assets/stylesheets/ustyle/mixins/_typography.scss +3 -3
- metadata +2 -2
data/lib/ustyle/version.rb
CHANGED
data/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ustyle",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.1",
|
|
4
4
|
"description": "A living styleguide and pattern library by uSwitch.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -24,11 +24,13 @@
|
|
|
24
24
|
"David Annez <david.annez@uswitch.com>",
|
|
25
25
|
"Thomas Britton <thomas.britton@uswitch.com>",
|
|
26
26
|
"Ricardo Cerqueira <ricardo.cerqueira@uswitch.com>",
|
|
27
|
-
"Ivo Reis <ivo.reis@uswitch.com>"
|
|
27
|
+
"Ivo Reis <ivo.reis@uswitch.com>",
|
|
28
|
+
"Charlotte Spencer <charlotte.spencer@uswitch.com>"
|
|
28
29
|
],
|
|
29
30
|
"main": "dist/ustyle-latest.css",
|
|
30
31
|
"files": [
|
|
31
|
-
"dist
|
|
32
|
+
"dist",
|
|
33
|
+
"vendor/assets/stylesheets"
|
|
32
34
|
],
|
|
33
35
|
"repository": "uswitch/ustyle",
|
|
34
36
|
"scripts": {
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
content: "";
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
&.
|
|
51
|
-
height:
|
|
52
|
-
margin-top: -
|
|
50
|
+
&.h98:before {
|
|
51
|
+
height: 98px;
|
|
52
|
+
margin-top: -47px;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&.h64:before {
|
|
@@ -57,14 +57,14 @@
|
|
|
57
57
|
margin-top: -32px;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
&.
|
|
61
|
-
height:
|
|
62
|
-
margin-top: -
|
|
60
|
+
&.h50:before {
|
|
61
|
+
height: 50px;
|
|
62
|
+
margin-top: -25px;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
&.
|
|
66
|
-
height:
|
|
67
|
-
margin-top: -
|
|
65
|
+
&.h25:before {
|
|
66
|
+
height: 25px;
|
|
67
|
+
margin-top: -12.5px;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -79,13 +79,14 @@
|
|
|
79
79
|
&--alternate {
|
|
80
80
|
svg {
|
|
81
81
|
max-width: 100px;
|
|
82
|
-
max-height:
|
|
82
|
+
max-height: 98px;
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
&--alternate-min {
|
|
87
87
|
svg {
|
|
88
|
-
max-
|
|
88
|
+
max-width: 100px;
|
|
89
|
+
max-height: 50px;
|
|
89
90
|
}
|
|
90
91
|
}
|
|
91
92
|
}
|
|
@@ -108,7 +109,7 @@
|
|
|
108
109
|
|
|
109
110
|
&--alternate-min {
|
|
110
111
|
svg {
|
|
111
|
-
max-height:
|
|
112
|
+
max-height: 25px;
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
}
|
|
@@ -148,12 +149,13 @@
|
|
|
148
149
|
.logo__spacer--vertical,
|
|
149
150
|
.logo__spacer--horizontal {
|
|
150
151
|
position: relative;
|
|
152
|
+
padding: 40px;
|
|
151
153
|
|
|
152
154
|
&:before {
|
|
153
155
|
position: absolute;
|
|
154
156
|
top: 0;
|
|
155
157
|
left: 0;
|
|
156
|
-
width:
|
|
158
|
+
width: 40px;
|
|
157
159
|
height: 100%;
|
|
158
160
|
text-align: center;
|
|
159
161
|
background-color: $c-cyan-light;
|
|
@@ -177,4 +179,9 @@
|
|
|
177
179
|
line-height: 1;
|
|
178
180
|
background-color: $c-blue;
|
|
179
181
|
border-radius: 22px;
|
|
182
|
+
|
|
183
|
+
.us-icon--uswitch {
|
|
184
|
+
position: relative;
|
|
185
|
+
right: -2px;
|
|
186
|
+
}
|
|
180
187
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<li><a href="#minimum-sizes">Minimum sizes</a></li>
|
|
7
7
|
<li><a href="#icon-only">Icon only</a></li>
|
|
8
8
|
<li><a href="#usage-rules">Usage rules</a></li>
|
|
9
|
+
<li><a href="#logo-downloads">Logo Downloads</a></li>
|
|
9
10
|
</ul>
|
|
10
11
|
<div class="us-content-group">
|
|
11
12
|
<div class="us-grid-row">
|
|
@@ -170,11 +171,11 @@
|
|
|
170
171
|
<div class="us-col-6">
|
|
171
172
|
<div class="logo__state logo__vertical--alternate logo--blue">
|
|
172
173
|
<svg><use xlink:href="#uicon-logo-vertical-small"/>
|
|
173
|
-
<div class="logo__sizing
|
|
174
|
+
<div class="logo__sizing h98">98px</div>
|
|
174
175
|
</div>
|
|
175
176
|
<p>
|
|
176
177
|
Use the alternative version of the vertical logo when using at a
|
|
177
|
-
height of
|
|
178
|
+
height of 98px or less.
|
|
178
179
|
</p>
|
|
179
180
|
</div>
|
|
180
181
|
<div class="us-col-6">
|
|
@@ -201,19 +202,19 @@
|
|
|
201
202
|
<div class="us-col-6">
|
|
202
203
|
<div class="logo__state logo__vertical--alternate-min logo--blue">
|
|
203
204
|
<svg><use xlink:href="#uicon-logo-vertical-small"/>
|
|
204
|
-
<div class="logo__sizing
|
|
205
|
+
<div class="logo__sizing h50">50px</div>
|
|
205
206
|
</div>
|
|
206
207
|
<p>
|
|
207
|
-
The minimum height that the vertical logo may be used at is
|
|
208
|
+
The minimum height that the vertical logo may be used at is 50px.
|
|
208
209
|
</p>
|
|
209
210
|
</div>
|
|
210
211
|
<div class="us-col-6">
|
|
211
212
|
<div class="logo__state logo__horizontal--alternate-min logo--white">
|
|
212
213
|
<svg><use xlink:href="#uicon-logo-small"/></svg>
|
|
213
|
-
<div class="logo__sizing
|
|
214
|
+
<div class="logo__sizing h25">25px</div>
|
|
214
215
|
</div>
|
|
215
216
|
<p>
|
|
216
|
-
The minimum height that the horizontal logo may be used at is
|
|
217
|
+
The minimum height that the horizontal logo may be used at is 25px.
|
|
217
218
|
</p>
|
|
218
219
|
</div>
|
|
219
220
|
</div>
|
|
@@ -258,3 +259,19 @@
|
|
|
258
259
|
</div>
|
|
259
260
|
</div>
|
|
260
261
|
</div>
|
|
262
|
+
|
|
263
|
+
<div class="us-content-group">
|
|
264
|
+
<div class="us-grid-row">
|
|
265
|
+
<div class="us-col-12">
|
|
266
|
+
<h3 id="logo-downloads">Logo Downloads</h3>
|
|
267
|
+
<p>
|
|
268
|
+
Here you can download the standard and smaller versions of the uSwitch
|
|
269
|
+
logo. Each .zip file comes with .eps, .svg and .svg versions of the logo.
|
|
270
|
+
</p>
|
|
271
|
+
<ul>
|
|
272
|
+
<li><a href='https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Standard+logo+assets.zip'>Standard Logo</a></li>
|
|
273
|
+
<li><a href='https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Small+logo+assets.zip'>Logo for smaller sizes</a></li>
|
|
274
|
+
</ul>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
@@ -15,17 +15,13 @@
|
|
|
15
15
|
<path d="M77.8 42.898v-17.1h7v15.5c0 4.2 1.9 6.3 5.6 6.3 4.184 0 6.4-3.501 6.4-7.6v-14.2h7v27.6h-7v-3.8c-4.505 8.061-19 5.517-19-6.7z"/><path d="M17 34.2V8H0v25.6c0 26.622 32.502 39.889 51.402 21.1C35.893 62.409 17.546 51.556 17 34.2z"/>
|
|
16
16
|
<path d="M51.5.3L37.738 15H43v19.3c0 8.307-8.053 15.305-17.607 12.4C37.082 60.497 60 52.572 60 34.3V15h5.464L51.5.3z"/>
|
|
17
17
|
</symbol>
|
|
18
|
-
<symbol viewBox="0 0
|
|
18
|
+
<symbol viewBox="0 0 115 100" id="uicon-logo-vertical-small">
|
|
19
19
|
<title>logo-vertical-small</title>
|
|
20
|
-
<path d="
|
|
21
|
-
<path d="M27.25 34.6V9h-17v25.137c0 27.112 32.045 40.867 51.4 21.863-15.497 7.748-34.4-3.393-34.4-21.4z"/>
|
|
22
|
-
<path d="M61.75.2L48.05 15h5.2v19.4c0 8.307-7.958 15.305-17.4 12.4 11.532 13.774 33.546 6.132 34.4-11.3V15h5.4L61.75.2z"/>
|
|
20
|
+
<path d="M44.57 35.053V9.456H27.674v25.597C27.674 51.566 41.108 65 57.621 65c8.274 0 15.775-3.374 21.201-8.819-15.699 7.913-34.252-3.612-34.252-21.128z"/><path d="M79.12 1L65.443 15.705h5.228v19.349c0 8.95-8.877 15.299-17.366 12.314C64.814 61.28 87.568 53.17 87.568 35.053V15.705h5.38L79.12 1z"/><path d="M24.57 83.925c3.086 1.957 11.376 1.2 11.376 8.237 0 6.858-9.901 8.793-14.639 4.895-1.575-1.295-2.58-3.02-3.015-5.175l3.699-1.865c1.362 7.518 9.76 6.072 9.76 2.3 0-5.13-12.464-1.831-12.464-10.381 0-4.116 3.707-6.092 7.833-6.092 4.247 0 7.066 1.906 8.454 5.719l-3.295 1.927c-1.68-4.961-6.411-4.182-7.91-3.357-1.49.82-1.462 2.738.201 3.792zM50.451 82.775l2.828 10.568 2.549-10.568h3.885l-4.382 15.789h-3.885l-2.891-10.847-2.922 10.847h-3.885l-4.382-15.789h3.885L43.8 93.343l2.828-10.568h3.823zM62.303 98.564V82.775h4.041v15.789h-4.041zM69.174 86.039v-3.264h2.424v-4.258h4.01v4.258h3.45v3.264h-3.45c0 6.922-.925 10.516 3.357 9.231l.373 3.295a8.04 8.04 0 0 1-2.673.435c-6.213 0-5.066-4.812-5.066-12.961h-2.425zM93.281 92.348l3.264 2.114c-2.864 5.728-9.885 5.596-13.334 2.238-4.788-4.662-2.209-14.36 5.937-14.36 3.198 0 6.032 1.333 7.242 4.289l-3.295 2.176c-2.033-4.421-8.174-3.236-8.174 1.865 0 4.748 4.658 5.405 6.683 3.87.641-.488 1.201-1.218 1.677-2.192zM114.125 98.564h-4.01v-9.107c0-3.961-4.211-4.121-5.968-2.114-1.404 1.605-1.088 2.75-1.088 11.22h-4.01V76.279h4.01v8.983c2.435-3.752 7.407-3.564 9.558-1.414 1.953 1.951 1.508 3.463 1.508 14.716zM66.513 78.167c0 3.004-4.547 3.007-4.547 0 0-3.004 4.547-3.007 4.547 0zM.875 92.566v-9.791h4.01c0 9.123-.832 12.495 3.201 12.495 2.348 0 3.668-1.947 3.668-4.351v-8.143h4.01v15.789h-4.01v-2.181C9.221 100.961.875 99.543.875 92.566z"/>
|
|
23
21
|
</symbol>
|
|
24
|
-
<symbol viewBox="0 0
|
|
22
|
+
<symbol viewBox="0 0 155 130" id="uicon-logo-vertical">
|
|
25
23
|
<title>logo-vertical</title>
|
|
26
|
-
<path d="
|
|
27
|
-
<path d="M114.55 0L92.82 24H99v35.7c0 16.738-16.596 28.262-31.997 22.7C87.942 107.544 128.296 93.807 130 61.5V24h6.18L114.55 0z"/>
|
|
28
|
-
<path d="M29.716 142.138c0 6.551 16.696 2.08 16.696 13.703 0 11.223-20.631 13.294-23.364-.368l4.883-2.468c.84 4.673 3.36 7.035 7.455 7.035 2.893 0 5.513-1.331 5.513-3.99 0-6.866-16.486-2.356-16.486-13.756 0-5.456 4.821-8.085 10.343-8.085 5.618 0 9.345 2.52 11.183 7.56l-4.358 2.573c-1.155-3.465-3.518-5.25-6.93-5.25-2.257.001-4.935.78-4.935 3.046zm35.965 1.26l3.728 14.018 3.36-14.018h5.145l-5.828 20.896h-5.145l-3.833-14.386-3.885 14.386h-5.145l-5.828-20.896h5.145l3.36 14.018 3.728-14.018h5.198zm15.698 20.896v-20.896h5.355v20.896h-5.355zm9.083-16.591v-4.305h3.203v-5.618h5.303v5.618h4.568v4.305h-4.568v9.503c0 2.772 1.824 3.397 4.463 2.678l.473 4.358c-3.514 1.171-10.238 1.328-10.238-6.038v-10.501h-3.204zm31.922 8.348l4.305 2.783c-1.995 3.99-5.25 5.985-9.818 5.985-14.77 0-14.651-22.051-.053-22.051 4.26 0 8.045 1.763 9.608 5.67l-4.358 2.888c-2.741-5.873-10.816-4.21-10.816 2.468.001 6.596 8.038 8.703 11.132 2.257zm27.616-5.88v14.123h-5.303c0-13.158.323-13.803-1.103-15.331-2.104-2.255-8.243-1.558-8.243 4.725v10.606h-5.303v-29.506h5.303v11.918c4.008-6.137 14.649-5.153 14.649 3.465zM86.944 137.308c0 3.955-5.985 3.959-5.985 0 0-3.955 5.985-3.959 5.985 0zM0 143.398h5.303v11.761c0 3.203 1.418 4.778 4.253 4.778 3.107 0 4.83-2.556 4.83-5.775v-10.763h5.303v20.896h-5.303v-2.888C11.063 167.436 0 165.628 0 156.366"/>
|
|
24
|
+
<path d="M60.365 44.556V10.675H38.001v33.881c0 35.254 42.846 52.904 67.7 27.966-20.78 10.471-45.336-4.783-45.336-27.966z"/><path d="M106.095 1.756l-15.627 17.19h4.445v25.61c0 11.846-11.749 20.249-22.986 16.299 15.233 18.415 45.35 7.681 45.35-16.299v-25.61h4.472l-15.654-17.19z"/><path d="M32.197 105.52c0 5.067 9.591 3.423 14.388 7.801 4.895 4.469 2.434 14.923-8.625 14.923-7.164 0-11.266-3.856-12.391-9.427l4.899-2.47c.85 4.693 3.335 7.04 7.451 7.04 6.033 0 6.793-5.169 3.746-7.019-3.928-2.385-14.779-1.714-14.779-10.724 0-5.452 4.91-8.069 10.374-8.069 5.626 0 9.359 2.525 11.198 7.575l-4.364 2.552c-2.225-6.57-8.492-5.539-10.477-4.446-.947.521-1.42 1.276-1.42 2.264zM68.163 106.755l3.746 13.997 3.376-13.997h5.146l-5.805 20.913H69.48L65.652 113.3l-3.87 14.367h-5.146l-5.805-20.913h5.146l3.376 13.997 3.746-13.997h5.064zM83.862 127.668v-20.913h5.352v20.913h-5.352zM92.963 111.077v-4.323h3.211v-5.64h5.311v5.64h4.57v4.323h-4.57c0 9.834-.763 12.474 2.676 12.474.631 0 1.221-.082 1.77-.247l.494 4.364c-2.828.99-10.251 1.739-10.251-6.052v-10.539h-3.211zM124.892 119.434l4.323 2.799c-4.942 9.884-20.79 7.291-20.79-5.022 0-12.705 16.876-14.415 20.584-5.352l-4.364 2.882c-2.67-5.807-10.827-4.333-10.827 2.47 0 6.289 6.169 7.158 8.851 5.125.851-.644 1.592-1.612 2.223-2.902zM152.5 113.547v14.12h-5.311v-12.062c0-5.212-5.553-5.486-7.904-2.799-1.864 2.13-1.441 3.663-1.441 14.861h-5.311V98.151h5.311v11.897c3.964-6.108 14.656-5.169 14.656 3.499zM89.438 100.652c0 3.979-6.022 3.983-6.022 0 0-3.979 6.022-3.983 6.022 0zM2.5 119.722v-12.968h5.311v11.774c0 6.014 5.792 5.531 7.76 3.17 1.727-2.074 1.338-3.52 1.338-14.944h5.311v20.913h-5.311v-2.889c-3.355 6.064-14.409 4.186-14.409-5.056z"/>
|
|
29
25
|
</symbol>
|
|
30
26
|
<symbol viewBox="0 0 395 90" id="uicon-logo">
|
|
31
27
|
<title>logo</title>
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
.us-cta__title.us-cta__title {
|
|
38
38
|
@include heading-font;
|
|
39
39
|
margin-top: 0;
|
|
40
|
-
font-size:
|
|
41
|
-
font-size: rem($base-font-size);
|
|
40
|
+
font-size: 18px;
|
|
41
|
+
font-size: rem($base-font-size + 2px);
|
|
42
42
|
|
|
43
43
|
@include respond-to(tablet) {
|
|
44
44
|
@include heading(4, $extend: false);
|
|
@@ -1,15 +1,44 @@
|
|
|
1
1
|
@import "ustyle/content/c-header";
|
|
2
2
|
@import "ustyle/content/c-social";
|
|
3
3
|
|
|
4
|
+
$content-heading-font-sizes: 30px, 24px, 20px, 18px, 16px, 16px;
|
|
5
|
+
|
|
4
6
|
.us-content {
|
|
7
|
+
// scss-lint:disable all
|
|
8
|
+
|
|
5
9
|
margin-bottom: $gutter-width;
|
|
6
10
|
|
|
11
|
+
@include baseline($base-font-size, $root: true);
|
|
12
|
+
|
|
13
|
+
@include respond-to(tablet) {
|
|
14
|
+
@include baseline(18px, $root: true);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@include respond-to(desktop) {
|
|
18
|
+
@include baseline(20px, $root: true);
|
|
19
|
+
text-rendering: optimizeSpeed;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@for $level from 1 through 6 {
|
|
23
|
+
h#{$level},
|
|
24
|
+
.us-heading--#{$level} {
|
|
25
|
+
@include heading($level, $font-sizes: $content-heading-font-sizes);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// scss-lint:enable all
|
|
30
|
+
|
|
7
31
|
h2,
|
|
8
32
|
h3,
|
|
9
33
|
h4,
|
|
10
34
|
h5,
|
|
11
35
|
h6 {
|
|
12
|
-
margin-top:
|
|
36
|
+
margin-top: 30px;
|
|
37
|
+
margin-bottom: .5em;
|
|
38
|
+
|
|
39
|
+
@include respond-to(tablet) {
|
|
40
|
+
margin-top: 50px;
|
|
41
|
+
}
|
|
13
42
|
}
|
|
14
43
|
//
|
|
15
44
|
// Default typography styling
|
|
@@ -17,17 +46,6 @@
|
|
|
17
46
|
p,
|
|
18
47
|
ul,
|
|
19
48
|
blockquote {
|
|
20
|
-
@include baseline($base-font-size);
|
|
21
|
-
|
|
22
|
-
@include respond-to(tablet) {
|
|
23
|
-
@include baseline(18px);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@include respond-to(desktop, true) {
|
|
27
|
-
@include baseline(20px);
|
|
28
|
-
text-rendering: optimizeSpeed;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
49
|
a {
|
|
32
50
|
@extend %anchor-link;
|
|
33
51
|
}
|
|
@@ -46,6 +64,7 @@
|
|
|
46
64
|
//
|
|
47
65
|
table {
|
|
48
66
|
width: 100%;
|
|
67
|
+
font-size: 16px;
|
|
49
68
|
border-collapse: separate;
|
|
50
69
|
|
|
51
70
|
img,
|
|
@@ -60,6 +79,7 @@
|
|
|
60
79
|
td,
|
|
61
80
|
th {
|
|
62
81
|
padding: $gutter-width / 4;
|
|
82
|
+
text-align: left;
|
|
63
83
|
vertical-align: middle;
|
|
64
84
|
border-bottom: 1px solid $c-bordergrey;
|
|
65
85
|
}
|
|
@@ -94,8 +114,16 @@
|
|
|
94
114
|
}
|
|
95
115
|
|
|
96
116
|
.strap {
|
|
97
|
-
|
|
98
|
-
|
|
117
|
+
@include baseline(18px);
|
|
118
|
+
|
|
119
|
+
@include respond-to(tablet) {
|
|
120
|
+
@include baseline(22px);
|
|
121
|
+
margin-bottom: 2em;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.us-cta {
|
|
126
|
+
font-size: 16px;
|
|
99
127
|
}
|
|
100
128
|
|
|
101
129
|
.internal-menu {
|
|
@@ -12,19 +12,16 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.us-content__title {
|
|
15
|
-
@include heading(3);
|
|
16
15
|
position: relative;
|
|
17
|
-
padding: .5em 0
|
|
16
|
+
padding: .5em 0 0 0;
|
|
18
17
|
margin: 0;
|
|
19
18
|
clear: both;
|
|
19
|
+
font-size: 1.6785em; // 26px
|
|
20
20
|
color: $c-navy;
|
|
21
21
|
background-color: #fff;
|
|
22
22
|
|
|
23
|
-
@include respond-to(tablet, true) {
|
|
24
|
-
@include heading(2, $extend: false);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
23
|
@include respond-to(desktop, true) {
|
|
28
24
|
@include heading(1, $extend: false);
|
|
25
|
+
padding: .5em 0 1em 0;
|
|
29
26
|
}
|
|
30
27
|
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
/// The cap height of the font being used on the element
|
|
20
20
|
///
|
|
21
21
|
|
|
22
|
-
@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height) {
|
|
22
|
+
@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height, $root: false) {
|
|
23
23
|
// rhythm unit
|
|
24
24
|
$rhythm: $line-height * $font-size / $scale;
|
|
25
25
|
// number of rhythm units that can fit the font-size
|
|
@@ -34,8 +34,10 @@
|
|
|
34
34
|
// if you use this mixin only on elements that have one direction margins
|
|
35
35
|
// http://csswizardry.com/2012/06/single-direction-margin-declarations/
|
|
36
36
|
// you can use this method with no worries.
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
@if $root != true {
|
|
38
|
+
padding-top: $baseline-distance * $base-font-size;
|
|
39
|
+
padding-top: $baseline-distance + rem;
|
|
40
|
+
margin-bottom: ($line-height - $baseline-distance) * $base-font-size;
|
|
41
|
+
margin-bottom: $line-height - $baseline-distance + rem;
|
|
42
|
+
}
|
|
41
43
|
}
|
|
@@ -89,9 +89,9 @@
|
|
|
89
89
|
/// @param {Bool} $extend [true]
|
|
90
90
|
/// If set to `false` will redeclare the font-family settings
|
|
91
91
|
|
|
92
|
-
@mixin heading($level, $heading-font: true, $extend: true) {
|
|
93
|
-
$font-size: nth($
|
|
94
|
-
$line-height: nth($
|
|
92
|
+
@mixin heading($level, $heading-font: true, $extend: true, $font-sizes: $heading-font-sizes, $line-heights: $heading-line-heights) {
|
|
93
|
+
$font-size: nth($font-sizes, $level);
|
|
94
|
+
$line-height: nth($line-heights, $level);
|
|
95
95
|
@include heading-font($extend);
|
|
96
96
|
font-size: em($font-size);
|
|
97
97
|
line-height: $line-height + em;
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ustyle
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.11.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- uSwitch Limited
|
|
@@ -13,7 +13,7 @@ authors:
|
|
|
13
13
|
autorequire:
|
|
14
14
|
bindir: bin
|
|
15
15
|
cert_chain: []
|
|
16
|
-
date: 2017-
|
|
16
|
+
date: 2017-02-16 00:00:00.000000000 Z
|
|
17
17
|
dependencies:
|
|
18
18
|
- !ruby/object:Gem::Dependency
|
|
19
19
|
name: sass
|