barbican-reset 1.1.1 → 1.1.5
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.
- package/helpers/mixins/_basket.scss +35 -0
- package/helpers/mixins/_buttons.scss +71 -24
- package/helpers/mixins/_content.scss +11 -11
- package/helpers/mixins/index.scss +4 -17
- package/index.js +2 -2
- package/package.json +1 -1
- package/scss/_atomic.scss +9 -1
- package/scss/_btn.scss +13 -1
- package/scss/_input.scss +28 -20
- package/scss/index.scss +5 -1
- package/scss/table/_tickets.scss +58 -0
- package/scss/{_table.scss → table/index.scss} +22 -11
- package/vue/account_card.vue +31 -0
- package/vue/{Account/Title/index.vue → account_title.vue} +18 -1
- package/vue/Account/Card/card.scss +0 -12
- package/vue/Account/Card/index.vue +0 -13
- package/vue/Account/Title/title.scss +0 -15
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
|
|
2
|
+
@mixin sidebar-sm {
|
|
3
|
+
@include media-breakpoint-down(md) {
|
|
4
|
+
@content;
|
|
5
|
+
}
|
|
6
|
+
@include media-breakpoint-only(lg) {
|
|
7
|
+
@content;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin sidebar-lg {
|
|
12
|
+
@include media-breakpoint-only(md) {
|
|
13
|
+
@content;
|
|
14
|
+
}
|
|
15
|
+
@include media-breakpoint-only(xl) {
|
|
16
|
+
@content;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin basket-row-grid {
|
|
21
|
+
grid-auto-flow: column;
|
|
22
|
+
align-items: center;
|
|
23
|
+
display: grid;
|
|
24
|
+
gap: 0.75rem;
|
|
25
|
+
|
|
26
|
+
@include sidebar-sm {
|
|
27
|
+
grid-auto-flow: row;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin table-row($gap: 0.75rem) {
|
|
32
|
+
border-bottom: 1px solid $c-grey-pearl;
|
|
33
|
+
padding-bottom: $gap;
|
|
34
|
+
padding-top: $gap;
|
|
35
|
+
}
|
|
@@ -1,31 +1,30 @@
|
|
|
1
1
|
|
|
2
|
-
@mixin button_setup
|
|
3
|
-
$pad: 1em,
|
|
4
|
-
$line: 1,
|
|
5
|
-
$flex: false) {
|
|
2
|
+
@mixin button_setup {
|
|
6
3
|
-webkit-font-smoothing: antialiased;
|
|
7
4
|
-moz-osx-font-smoothing: grayscale;
|
|
8
5
|
border-radius: $border-radius-lg;
|
|
9
6
|
text-decoration: none;
|
|
10
|
-
line-height: $line;
|
|
11
7
|
text-align: center;
|
|
12
8
|
font-weight: 700;
|
|
13
9
|
transition: none;
|
|
14
|
-
|
|
15
|
-
padding:
|
|
10
|
+
line-height: 1;
|
|
11
|
+
padding: 1em;
|
|
12
|
+
}
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
align-items: center;
|
|
20
|
-
gap: $pad * 0.625;
|
|
21
|
-
} @else {
|
|
14
|
+
@mixin button_display($display:'ib',$gap:1rem) {
|
|
15
|
+
@if $display == 'ib' {
|
|
22
16
|
vertical-align: middle;
|
|
23
17
|
display: inline-block;
|
|
24
18
|
|
|
25
19
|
> * {
|
|
26
20
|
vertical-align: middle;
|
|
27
21
|
display: inline-block;
|
|
28
|
-
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
@else if $display == 'flex' {
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: $gap;
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
30
|
|
|
@@ -33,14 +32,17 @@
|
|
|
33
32
|
$background: $c-brand-orange,
|
|
34
33
|
$color: $white,
|
|
35
34
|
$border: 1px,
|
|
36
|
-
$
|
|
37
|
-
$line:
|
|
38
|
-
$
|
|
39
|
-
@include button_setup($pad, $line, $flex);
|
|
35
|
+
$padding: 1rem,
|
|
36
|
+
$line: false,
|
|
37
|
+
$display: false) {
|
|
40
38
|
border: $border solid $background;
|
|
41
39
|
background-color: $background;
|
|
40
|
+
padding: $padding;
|
|
42
41
|
color: $color;
|
|
43
42
|
|
|
43
|
+
@if $display { @include button_display($display, $padding * 0.625); }
|
|
44
|
+
@if $line { line-height: $line; }
|
|
45
|
+
|
|
44
46
|
@include focus {
|
|
45
47
|
@include double-box($color, $background);
|
|
46
48
|
border: $border solid $background;
|
|
@@ -52,15 +54,18 @@
|
|
|
52
54
|
@mixin button_outline(
|
|
53
55
|
$color: $c-brand-orange,
|
|
54
56
|
$background: $white,
|
|
55
|
-
$pad: 1em,
|
|
56
57
|
$border: 1px,
|
|
57
|
-
$
|
|
58
|
-
$
|
|
59
|
-
|
|
60
|
-
border: $border solid $color;
|
|
58
|
+
$padding: 1rem,
|
|
59
|
+
$line: false,
|
|
60
|
+
$display: false) {
|
|
61
61
|
background-color: $background;
|
|
62
|
+
border: $border solid $color;
|
|
63
|
+
padding: $padding;
|
|
62
64
|
color: $color;
|
|
63
65
|
|
|
66
|
+
@if $display { @include button_display($display, $padding * 0.625); }
|
|
67
|
+
@if $line { line-height: $line; }
|
|
68
|
+
|
|
64
69
|
@include focus {
|
|
65
70
|
border: $border solid $color;
|
|
66
71
|
background-color: $color;
|
|
@@ -68,12 +73,33 @@
|
|
|
68
73
|
}
|
|
69
74
|
}
|
|
70
75
|
|
|
76
|
+
@mixin button_link(
|
|
77
|
+
$color: inherit,
|
|
78
|
+
$background: transparent,
|
|
79
|
+
$padding: 0,
|
|
80
|
+
$line: false) {
|
|
81
|
+
background-color: $background;
|
|
82
|
+
text-decoration: underline;
|
|
83
|
+
font-weight: inherit;
|
|
84
|
+
padding: $padding;
|
|
85
|
+
border-radius: 0;
|
|
86
|
+
color: $color;
|
|
87
|
+
|
|
88
|
+
@if $line { line-height: $line; }
|
|
89
|
+
|
|
90
|
+
@include focus {
|
|
91
|
+
@include single-box($c-grey-night);
|
|
92
|
+
background-color: $c-grey-night;
|
|
93
|
+
color: $white;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
71
97
|
@mixin btn-outline-header {
|
|
72
98
|
@include button_outline(
|
|
73
99
|
$color: $white,
|
|
74
100
|
$background: $c-brand-orange,
|
|
75
101
|
$border: 0.125rem,
|
|
76
|
-
$
|
|
102
|
+
$display: 'flex');
|
|
77
103
|
}
|
|
78
104
|
|
|
79
105
|
@mixin btn-primary {
|
|
@@ -111,10 +137,31 @@
|
|
|
111
137
|
@mixin btn-remove {
|
|
112
138
|
@include button_solid(
|
|
113
139
|
$background: $c-grey-night,
|
|
114
|
-
$
|
|
140
|
+
$padding: 0.625rem,
|
|
115
141
|
$line: 1.375);
|
|
116
142
|
}
|
|
117
143
|
|
|
144
|
+
@mixin btn-link {
|
|
145
|
+
@include button_link;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@mixin btn-remove-ticket {
|
|
149
|
+
@include media-breakpoint-down(sm) {
|
|
150
|
+
@include btn-remove;
|
|
151
|
+
width: 100%;
|
|
152
|
+
}
|
|
153
|
+
@include media-breakpoint-up(sm) {
|
|
154
|
+
@include button_link;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@mixin btn-membership-card {
|
|
159
|
+
@include button_outline(
|
|
160
|
+
$color: $white,
|
|
161
|
+
$background: transparent
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
|
|
118
165
|
@mixin btn-expand {
|
|
119
166
|
display: block;
|
|
120
167
|
}
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
@mixin all-text-inputs {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
35
|
+
// @mixin all-text-inputs {
|
|
36
|
+
// border: solid $border-width $c-border-strong;
|
|
37
|
+
// $background: lighten($c-grey-alpine, 1%);
|
|
38
|
+
// border-radius: $border-radius-sm;
|
|
39
|
+
// background-color: $background;
|
|
40
|
+
// // padding: 0.8rem 0.8rem 0.6rem;
|
|
41
|
+
|
|
42
|
+
// &:focus {
|
|
43
|
+
// background-color: $background;
|
|
44
|
+
// }
|
|
45
|
+
// }
|
|
46
46
|
|
|
47
47
|
@mixin card-container {
|
|
48
48
|
border-radius: $border-radius-lg;
|
|
@@ -1,24 +1,11 @@
|
|
|
1
1
|
// paths more explicit for gulp-sass
|
|
2
2
|
@import "~bourbon/core/bourbon.scss";
|
|
3
|
+
@import "account/orders.scss";
|
|
4
|
+
@import "basket.scss";
|
|
3
5
|
@import "buttons.scss";
|
|
4
6
|
@import "content.scss";
|
|
5
7
|
@import "core.scss";
|
|
8
|
+
@import "festival.scss";
|
|
6
9
|
@import "focus.scss";
|
|
7
10
|
@import "font.scss";
|
|
8
|
-
@import "loading.scss";
|
|
9
|
-
@import "festival.scss";
|
|
10
|
-
@import "account/orders.scss";
|
|
11
|
-
|
|
12
|
-
@mixin basket-row-grid {
|
|
13
|
-
grid-auto-flow: column;
|
|
14
|
-
display: grid;
|
|
15
|
-
gap: 0.75rem;
|
|
16
|
-
|
|
17
|
-
@include media-breakpoint-down(md) {
|
|
18
|
-
grid-auto-flow: row;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@include media-breakpoint-only(lg) {
|
|
22
|
-
grid-auto-flow: row;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
11
|
+
@import "loading.scss";
|
package/index.js
CHANGED
|
@@ -4,8 +4,6 @@ import RelatedTitle from './vue/RelatedTitle'
|
|
|
4
4
|
import TypeText from './vue/TypeText'
|
|
5
5
|
import Wrap from './vue/Wrap'
|
|
6
6
|
import Carousel from './vue/Carousel'
|
|
7
|
-
import AccountCard from './vue/Account/Card'
|
|
8
|
-
import AccountTitle from './vue/Account/Title'
|
|
9
7
|
import Placeholder from './vue/Placeholder'
|
|
10
8
|
import LoginForm from './vue/Login/Form'
|
|
11
9
|
import FormRow from './vue/form_row'
|
|
@@ -16,6 +14,8 @@ import Card from './vue/card'
|
|
|
16
14
|
import Container from './vue/container'
|
|
17
15
|
import Block from './vue/block'
|
|
18
16
|
import EventSummary from './vue/event_summary'
|
|
17
|
+
import AccountCard from './vue/account_card'
|
|
18
|
+
import AccountTitle from './vue/account_title'
|
|
19
19
|
|
|
20
20
|
export {
|
|
21
21
|
LoadingAnimation,
|
package/package.json
CHANGED
package/scss/_atomic.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
$rules: "margin-top", "margin-bottom";
|
|
2
|
+
$rules: "margin-top", "margin-bottom", "min-height";
|
|
3
3
|
|
|
4
4
|
@each $rule in $rules {
|
|
5
5
|
@for $i from 1 to 5 {
|
|
@@ -17,6 +17,14 @@ $rules: "margin-top", "margin-bottom";
|
|
|
17
17
|
font-weight: 700;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.font-size-lg {
|
|
21
|
+
font-size: $font-size-lg;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.font-size-h3 {
|
|
25
|
+
font-size: $h3-font-size;
|
|
26
|
+
}
|
|
27
|
+
|
|
20
28
|
.text-align-right {
|
|
21
29
|
text-align: right;
|
|
22
30
|
}
|
package/scss/_btn.scss
CHANGED
|
@@ -36,8 +36,20 @@
|
|
|
36
36
|
@include btn-remove;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
&.btn-link {
|
|
40
|
+
@include btn-link;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.btn-remove-ticket {
|
|
44
|
+
@include btn-remove-ticket;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.btn-membership-card {
|
|
48
|
+
@include btn-membership-card;
|
|
49
|
+
}
|
|
50
|
+
|
|
39
51
|
// modifyers
|
|
40
52
|
&.expand {
|
|
41
53
|
@include btn-expand;
|
|
42
54
|
}
|
|
43
|
-
}
|
|
55
|
+
}
|
package/scss/_input.scss
CHANGED
|
@@ -1,33 +1,41 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
@include single-box($c-grey-steel, 0.0625rem);
|
|
7
|
-
border: 1px solid $c-grey-steel;
|
|
8
|
-
background-color: $c-grey-alpine;
|
|
9
|
-
}
|
|
2
|
+
@mixin input-focus {
|
|
3
|
+
@include single-box($c-grey-steel, 0.0625rem);
|
|
4
|
+
border: 1px solid $c-grey-steel;
|
|
5
|
+
background-color: $c-grey-alpine;
|
|
10
6
|
}
|
|
11
7
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
padding: 0.8rem 0.8rem 0.6rem;
|
|
8
|
+
.form-control {
|
|
9
|
+
@include focus {
|
|
10
|
+
@include input-focus;
|
|
11
|
+
}
|
|
17
12
|
}
|
|
18
13
|
|
|
19
14
|
input::placeholder {
|
|
20
15
|
color: $c-grey-concrete;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
|
-
input[type=
|
|
24
|
-
|
|
18
|
+
input[type=number], input[type=text] {
|
|
19
|
+
@include focus {
|
|
20
|
+
@include input-focus;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
input[type=checkbox],
|
|
25
|
+
input[type=radio] {
|
|
25
26
|
margin-bottom: 0.5rem;
|
|
26
27
|
margin-right: $space;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
input[type=
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
30
|
+
input[type=button],
|
|
31
|
+
input[type=submit] {
|
|
32
|
+
border-radius: $border-radius-lg;
|
|
33
|
+
appearance: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#{$all-text-inputs} {
|
|
37
|
+
border: solid $border-width $c-border-strong;
|
|
38
|
+
padding: 0.875rem 0.875rem 0.75rem;
|
|
39
|
+
background-color: $c-grey-alpine;
|
|
40
|
+
border-radius: $border-radius-lg;
|
|
41
|
+
}
|
package/scss/index.scss
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@import "loading-animation.scss";
|
|
10
10
|
@import "type-text.scss";
|
|
11
11
|
@import "close-icon.scss";
|
|
12
|
-
@import "table.scss";
|
|
12
|
+
@import "table/index.scss";
|
|
13
13
|
|
|
14
14
|
// bootstrap component styles
|
|
15
15
|
@import "btn.scss";
|
|
@@ -29,4 +29,8 @@ body {
|
|
|
29
29
|
|
|
30
30
|
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
|
|
31
31
|
font-weight: 700;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
a {
|
|
35
|
+
color: inherit;
|
|
32
36
|
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
table.tickets {
|
|
2
|
+
|
|
3
|
+
th {
|
|
4
|
+
font-weight: 700;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
tr {
|
|
8
|
+
@include media-breakpoint-up(sm) {
|
|
9
|
+
@include table-row;
|
|
10
|
+
grid-template-columns: 2fr 5fr 5fr 2fr;
|
|
11
|
+
display: grid;
|
|
12
|
+
gap: 0.75rem;
|
|
13
|
+
|
|
14
|
+
label {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@include media-breakpoint-down(sm) {
|
|
20
|
+
border-radius: $border-radius-lg;
|
|
21
|
+
border: 1px solid $c-grey-pearl;
|
|
22
|
+
display: block;
|
|
23
|
+
padding: 1rem;
|
|
24
|
+
|
|
25
|
+
&:first-of-type {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:not(:last-of-type) {
|
|
30
|
+
margin-bottom: 1rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
td {
|
|
34
|
+
justify-content: space-between;
|
|
35
|
+
display: flex;
|
|
36
|
+
|
|
37
|
+
&:not(:last-of-type) {
|
|
38
|
+
padding-bottom: 0.25rem;
|
|
39
|
+
padding-top: 0.25rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:not(:first-of-type):not(:last-of-type) {
|
|
43
|
+
border-top: 1px solid $c-grey-pearl;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:last-of-type {
|
|
47
|
+
margin-top: 0.5rem;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ticket-name {
|
|
54
|
+
@include media-breakpoint-down(sm) {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
|
|
2
|
+
@import "tickets.scss";
|
|
3
|
+
|
|
2
4
|
table {
|
|
3
5
|
border-spacing: 0;
|
|
4
6
|
width: 100%;
|
|
@@ -8,21 +10,20 @@ td {
|
|
|
8
10
|
padding: 0;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
$gap: 0.75rem;
|
|
12
|
-
|
|
13
13
|
table.basket tr {
|
|
14
|
-
|
|
14
|
+
@include table-row;
|
|
15
15
|
justify-content: space-between;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
display: flex;
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: 0.75rem;
|
|
19
18
|
|
|
20
|
-
&.
|
|
21
|
-
|
|
19
|
+
&.promo {
|
|
20
|
+
padding-bottom: 1rem;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
&.donation {
|
|
25
24
|
@include basket-row-grid;
|
|
25
|
+
padding-bottom: 1rem;
|
|
26
|
+
padding-top: 1rem;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
&.total {
|
|
@@ -30,14 +31,24 @@ table.basket tr {
|
|
|
30
31
|
border-bottom: none;
|
|
31
32
|
font-weight: 700;
|
|
32
33
|
}
|
|
34
|
+
|
|
35
|
+
&.continue {
|
|
36
|
+
border-bottom: none;
|
|
37
|
+
|
|
38
|
+
td {
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
33
42
|
}
|
|
34
43
|
|
|
35
44
|
table.section {
|
|
36
|
-
padding-bottom:
|
|
37
|
-
padding-top:
|
|
45
|
+
padding-bottom: 0.75rem;
|
|
46
|
+
padding-top: 0.75rem;
|
|
38
47
|
display: block;
|
|
39
48
|
|
|
40
49
|
tr:not(:first-of-type) {
|
|
41
|
-
|
|
50
|
+
@include sidebar-lg {
|
|
51
|
+
margin-left: 0.75rem;
|
|
52
|
+
}
|
|
42
53
|
}
|
|
43
54
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="$style.container">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
name: 'AccountCard'
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<style lang="scss" module>
|
|
14
|
+
|
|
15
|
+
.container {
|
|
16
|
+
border-radius: $border-radius-lg;
|
|
17
|
+
border: 1px solid $c-grey-pearl;
|
|
18
|
+
background-color: $white;
|
|
19
|
+
padding: $gap-account;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
|
|
22
|
+
&:first-of-type {
|
|
23
|
+
margin-top: $gap-account;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:not(:last-of-type) {
|
|
27
|
+
margin-bottom: $gap-account;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
</style>
|
|
@@ -21,4 +21,21 @@ export default {
|
|
|
21
21
|
}
|
|
22
22
|
</script>
|
|
23
23
|
|
|
24
|
-
<style
|
|
24
|
+
<style lang="scss" module>
|
|
25
|
+
|
|
26
|
+
.title {
|
|
27
|
+
font-size: $h2-font-size;
|
|
28
|
+
margin-bottom: 1.25rem;
|
|
29
|
+
|
|
30
|
+
@include media-breakpoint-up(md) {
|
|
31
|
+
font-size: $h1-font-size;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.placeholder {
|
|
36
|
+
composes: title;
|
|
37
|
+
@include placeholder;
|
|
38
|
+
width: 30%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
</style>
|