barbican-reset 1.6.1 → 1.6.4
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/components/{alert.vue → br_alert.vue} +1 -1
- package/components/br_anchor.vue +35 -0
- package/components/br_form_group.vue +47 -0
- package/components/video_content.vue +3 -3
- package/helpers/mixins/_buttons.scss +26 -8
- package/helpers/mixins/input/_generic.scss +59 -46
- package/helpers/mixins/input/_text.scss +7 -1
- package/icons/account/edit.vue +5 -0
- package/icons/account/index.js +3 -1
- package/index.js +7 -5
- package/package.json +1 -1
- package/scss/_alert.scss +2 -2
- package/scss/_btn.scss +8 -0
- package/scss/_form-group.scss +59 -0
- package/scss/index.scss +1 -0
- package/components/form_group.vue +0 -92
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
|
|
3
|
+
<a v-on:click="loading = true" :href="href" :class="variant ? `btn btn-${variant}` : ``">
|
|
4
|
+
|
|
5
|
+
<slot v-if="!loading" />
|
|
6
|
+
|
|
7
|
+
<dot-typing v-else />
|
|
8
|
+
|
|
9
|
+
</a>
|
|
10
|
+
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import { DotTyping } from './br_button/components'
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: "BrAnchor",
|
|
18
|
+
data() {
|
|
19
|
+
return {
|
|
20
|
+
loading: false
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
props: {
|
|
24
|
+
variant: {
|
|
25
|
+
type: String
|
|
26
|
+
},
|
|
27
|
+
href: {
|
|
28
|
+
type: String
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
components: {
|
|
32
|
+
DotTyping
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="br-form-group">
|
|
3
|
+
<label v-if="label" :for="id">
|
|
4
|
+
<strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
|
|
5
|
+
</label>
|
|
6
|
+
<div :class="[`content`,{ editable },{ label },{ submit }]">
|
|
7
|
+
<b-button v-if="editable" variant="input-edit" @click="$emit('edit')">
|
|
8
|
+
<edit-icon />
|
|
9
|
+
</b-button>
|
|
10
|
+
<slot />
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script type="text/javascript">
|
|
16
|
+
import { BButton } from 'bootstrap-vue'
|
|
17
|
+
import { EditIcon } from '../icons/account'
|
|
18
|
+
export default {
|
|
19
|
+
name: 'BrFormGroup',
|
|
20
|
+
components: {
|
|
21
|
+
BButton,
|
|
22
|
+
EditIcon
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
label: {
|
|
26
|
+
type: String
|
|
27
|
+
},
|
|
28
|
+
required: {
|
|
29
|
+
type: Boolean
|
|
30
|
+
},
|
|
31
|
+
optional: {
|
|
32
|
+
type: Boolean
|
|
33
|
+
},
|
|
34
|
+
submit: {
|
|
35
|
+
type: Boolean
|
|
36
|
+
},
|
|
37
|
+
editable: {
|
|
38
|
+
type: Boolean
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
computed: {
|
|
42
|
+
id() {
|
|
43
|
+
return this.label.toLowerCase().split(" ").join("_");
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
<div v-html="data.markup" :class="$style.brightcove"></div>
|
|
10
10
|
|
|
11
|
-
<alert v-if="data.isExpired" error center inline>Event has passed.</alert>
|
|
11
|
+
<br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
|
|
12
12
|
|
|
13
13
|
</template>
|
|
14
14
|
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
</template>
|
|
40
40
|
|
|
41
41
|
<script>
|
|
42
|
-
import { FluidIframe,
|
|
42
|
+
import { FluidIframe, BrAlert } from 'barbican-reset'
|
|
43
43
|
export default {
|
|
44
44
|
props: {
|
|
45
45
|
data: {
|
|
@@ -58,7 +58,7 @@ export default {
|
|
|
58
58
|
this.data.isExpired = this.data.brightcove.isExpired;
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
|
-
components: { FluidIframe,
|
|
61
|
+
components: { FluidIframe, BrAlert },
|
|
62
62
|
methods: {
|
|
63
63
|
formatDateTime(date) {
|
|
64
64
|
return this.$moment(date).format("LT ddd D MMM YYYY");
|
|
@@ -106,14 +106,6 @@
|
|
|
106
106
|
@if $line { line-height: $line; }
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
@mixin btn-outline-header {
|
|
110
|
-
@include button-outline(
|
|
111
|
-
$color: $white,
|
|
112
|
-
$background: $c-brand-orange,
|
|
113
|
-
$border: 0.125rem,
|
|
114
|
-
$display: 'flex');
|
|
115
|
-
}
|
|
116
|
-
|
|
117
109
|
@mixin btn-primary {
|
|
118
110
|
@include button-solid;
|
|
119
111
|
min-width: 8rem;
|
|
@@ -136,6 +128,23 @@
|
|
|
136
128
|
@include button-outline($c-grey-night);
|
|
137
129
|
}
|
|
138
130
|
|
|
131
|
+
@mixin btn-outline-header {
|
|
132
|
+
@include button-outline(
|
|
133
|
+
$color: $white,
|
|
134
|
+
$background: $c-brand-orange,
|
|
135
|
+
$border: 0.125rem,
|
|
136
|
+
$display: 'flex');
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@mixin btn-input-edit {
|
|
140
|
+
@include button-outline($c-grey-steel);
|
|
141
|
+
background-color: $c-grey-pearl;
|
|
142
|
+
border-color: $c-border-strong;
|
|
143
|
+
border-bottom-left-radius: 0;
|
|
144
|
+
border-top-left-radius: 0;
|
|
145
|
+
padding: 0.625rem 0.75rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
139
148
|
@mixin btn-cinema {
|
|
140
149
|
@include button-solid($c-brand-cinema);
|
|
141
150
|
}
|
|
@@ -278,6 +287,15 @@
|
|
|
278
287
|
}
|
|
279
288
|
}
|
|
280
289
|
|
|
290
|
+
@mixin btn-invisible {
|
|
291
|
+
color: inherit;
|
|
292
|
+
padding: 0;
|
|
293
|
+
|
|
294
|
+
@include focus {
|
|
295
|
+
box-shadow: none;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
281
299
|
@mixin btn-expand {
|
|
282
300
|
display: block;
|
|
283
301
|
}
|
|
@@ -1,60 +1,73 @@
|
|
|
1
|
-
@mixin generic-input
|
|
1
|
+
@mixin generic-input-wrap {
|
|
2
2
|
position: relative;
|
|
3
3
|
padding: 0;
|
|
4
|
+
}
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&:checked ~ label {
|
|
28
|
-
@include focus_colors;
|
|
29
|
-
@include single-box($c-status-neutral, 0.0625rem);
|
|
30
|
-
}
|
|
6
|
+
@mixin generic-input-target($state: neutral) {
|
|
7
|
+
$size: 0.875rem;
|
|
8
|
+
position: absolute;
|
|
9
|
+
height: $size;
|
|
10
|
+
margin: auto;
|
|
11
|
+
width: $size;
|
|
12
|
+
z-index: 3;
|
|
13
|
+
left: 1rem;
|
|
14
|
+
top: 1rem;
|
|
15
|
+
|
|
16
|
+
@if $state != disabled {
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
|
|
19
|
+
@include focus {
|
|
20
|
+
outline: none;
|
|
21
|
+
|
|
22
|
+
~ label {
|
|
23
|
+
@include single-box($c-grey-steel, 0.0625rem);
|
|
24
|
+
border: 1px solid $c-grey-steel;
|
|
25
|
+
background-color: $c-grey-alpine;
|
|
31
26
|
}
|
|
32
|
-
|
|
27
|
+
|
|
33
28
|
&:checked ~ label {
|
|
34
29
|
@include focus_colors;
|
|
30
|
+
@include single-box($c-status-neutral, 0.0625rem);
|
|
35
31
|
}
|
|
36
32
|
}
|
|
37
|
-
}
|
|
38
33
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
border: 1px solid $c-grey-concrete;
|
|
42
|
-
border-radius: $border-radius-lg;
|
|
43
|
-
background-color: $white;
|
|
44
|
-
font-weight: 400;
|
|
45
|
-
|
|
46
|
-
@if $state != disabled {
|
|
47
|
-
color: $c-grey-night;
|
|
48
|
-
cursor: pointer;
|
|
34
|
+
&:checked ~ label {
|
|
35
|
+
@include focus_colors;
|
|
49
36
|
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
50
39
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
@mixin generic-input-label($state: neutral) {
|
|
41
|
+
padding: 0.75rem 0.75rem 0.625rem 2.75rem;
|
|
42
|
+
border: 1px solid $c-grey-concrete;
|
|
43
|
+
border-radius: $border-radius-lg;
|
|
44
|
+
background-color: $white;
|
|
45
|
+
font-weight: 400;
|
|
54
46
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
@if $state != disabled {
|
|
48
|
+
color: $c-grey-night;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@if $state == disabled {
|
|
53
|
+
color: $c-grey-steel;
|
|
54
|
+
cursor: not-allowed;
|
|
55
|
+
|
|
56
|
+
&.spx-label-field__checkout,
|
|
57
|
+
.spx-data-delivery-type {
|
|
58
|
+
text-decoration: line-through;
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
|
-
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin generic-input($state, $type) {
|
|
64
|
+
@include generic-input-wrap;
|
|
65
|
+
|
|
66
|
+
input[type="#{$type}"] {
|
|
67
|
+
@include generic-input-target($state);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
label {
|
|
71
|
+
@include generic-input-label($state);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -3,5 +3,11 @@
|
|
|
3
3
|
border: solid $border-width $c-border-strong;
|
|
4
4
|
padding: 0.875rem 0.875rem 0.75rem;
|
|
5
5
|
background-color: $c-grey-alpine;
|
|
6
|
-
border-radius: $border-radius-lg;
|
|
6
|
+
border-radius: $border-radius-lg;
|
|
7
|
+
color: $c-grey-night;
|
|
8
|
+
|
|
9
|
+
&:disabled, &[readonly] {
|
|
10
|
+
background-color: $c-grey-alpine;
|
|
11
|
+
color: $c-grey-steel;
|
|
12
|
+
}
|
|
7
13
|
}
|
package/icons/account/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import VideoIcon from './video'
|
|
|
4
4
|
import PaymentIcon from './payment'
|
|
5
5
|
import OrdersIcon from './orders'
|
|
6
6
|
import SupportIcon from './support'
|
|
7
|
+
import EditIcon from './edit'
|
|
7
8
|
|
|
8
9
|
export {
|
|
9
10
|
PersonalIcon,
|
|
@@ -11,5 +12,6 @@ export {
|
|
|
11
12
|
VideoIcon,
|
|
12
13
|
PaymentIcon,
|
|
13
14
|
OrdersIcon,
|
|
14
|
-
SupportIcon
|
|
15
|
+
SupportIcon,
|
|
16
|
+
EditIcon
|
|
15
17
|
}
|
package/index.js
CHANGED
|
@@ -2,7 +2,6 @@ import Container from './components/container'
|
|
|
2
2
|
import EventSummary from './components/event_summary'
|
|
3
3
|
import AccountTitle from './components/account_title'
|
|
4
4
|
import Wrap from './components/wrap'
|
|
5
|
-
import Alert from './components/alert'
|
|
6
5
|
import Loader from './components/loader'
|
|
7
6
|
import RelatedTitle from './components/related_title'
|
|
8
7
|
import RelatedCard from './components/related_card'
|
|
@@ -12,7 +11,6 @@ import Placeholder from './components/placeholder'
|
|
|
12
11
|
import CardDisplay from './components/card_display'
|
|
13
12
|
import FormSection from './components/form_section'
|
|
14
13
|
import FormUpdate from './components/form_update'
|
|
15
|
-
import FormGroup from './components/form_group'
|
|
16
14
|
import RadioGroup from './components/radio_group'
|
|
17
15
|
import FooterUpper from './components/footer_upper'
|
|
18
16
|
import FooterLogos from './components/footer_logos'
|
|
@@ -22,11 +20,14 @@ import HelpRow from './components/help_row'
|
|
|
22
20
|
import VideoContent from './components/video_content'
|
|
23
21
|
import PaymentLogo from './components/payment_logo'
|
|
24
22
|
import SkipLink from './components/skip_link'
|
|
23
|
+
import BrAlert from './components/br_alert'
|
|
25
24
|
import BrButton from './components/br_button'
|
|
25
|
+
import BrAnchor from './components/br_anchor'
|
|
26
|
+
import BrFormGroup from './components/br_form_group'
|
|
26
27
|
|
|
27
28
|
export {
|
|
28
29
|
Loader,
|
|
29
|
-
|
|
30
|
+
BrAlert,
|
|
30
31
|
RelatedTitle,
|
|
31
32
|
RelatedCard,
|
|
32
33
|
RelatedRow,
|
|
@@ -37,7 +38,7 @@ export {
|
|
|
37
38
|
Placeholder,
|
|
38
39
|
FormSection,
|
|
39
40
|
FormUpdate,
|
|
40
|
-
|
|
41
|
+
BrFormGroup,
|
|
41
42
|
RadioGroup,
|
|
42
43
|
EventSummary,
|
|
43
44
|
FooterUpper,
|
|
@@ -49,5 +50,6 @@ export {
|
|
|
49
50
|
VideoContent,
|
|
50
51
|
PaymentLogo,
|
|
51
52
|
SkipLink,
|
|
52
|
-
BrButton
|
|
53
|
+
BrButton,
|
|
54
|
+
BrAnchor
|
|
53
55
|
};
|
package/package.json
CHANGED
package/scss/_alert.scss
CHANGED
|
@@ -56,10 +56,10 @@ $error_focus: $c-status-error, $c-status-error-fade;
|
|
|
56
56
|
|
|
57
57
|
.wrap {
|
|
58
58
|
@include wrap($neutral_wrap...);
|
|
59
|
-
border-radius: $border-radius;
|
|
59
|
+
border-radius: $border-radius-lg;
|
|
60
60
|
border-width: $border-width;
|
|
61
|
+
padding: 0.75rem 0.875rem;
|
|
61
62
|
border-style: solid;
|
|
62
|
-
padding: $space;
|
|
63
63
|
|
|
64
64
|
.btn.btn-link, a {
|
|
65
65
|
@include status_focus($neutral_focus...);
|
package/scss/_btn.scss
CHANGED
|
@@ -31,6 +31,10 @@
|
|
|
31
31
|
@include btn-outline-secondary;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
&.btn-input-edit {
|
|
35
|
+
@include btn-input-edit;
|
|
36
|
+
}
|
|
37
|
+
|
|
34
38
|
&.btn-remove {
|
|
35
39
|
// solid grey, slim
|
|
36
40
|
@include btn-remove;
|
|
@@ -76,6 +80,10 @@
|
|
|
76
80
|
@include btn-carousel;
|
|
77
81
|
}
|
|
78
82
|
|
|
83
|
+
&.btn-invisible {
|
|
84
|
+
@include btn-invisible;
|
|
85
|
+
}
|
|
86
|
+
|
|
79
87
|
// modifyers
|
|
80
88
|
&.expand {
|
|
81
89
|
@include btn-expand;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
|
|
2
|
+
.br-form-group {
|
|
3
|
+
|
|
4
|
+
&:not(:last-of-type) {
|
|
5
|
+
margin-bottom: 1rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@include media-breakpoint-up(sm) {
|
|
9
|
+
grid-template-columns: 33fr 67fr;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: $gap-account;
|
|
12
|
+
display: grid;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
label {
|
|
16
|
+
font-weight: normal;
|
|
17
|
+
|
|
18
|
+
@include media-breakpoint-down(sm) {
|
|
19
|
+
margin-bottom: 0.5rem;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
input {
|
|
24
|
+
width: 100%;
|
|
25
|
+
margin: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.content {
|
|
29
|
+
|
|
30
|
+
&.editable {
|
|
31
|
+
flex-direction: row-reverse;
|
|
32
|
+
display: flex;
|
|
33
|
+
|
|
34
|
+
input[type=text], input[type=email] {
|
|
35
|
+
border-bottom-right-radius: 0;
|
|
36
|
+
border-top-right-radius: 0;
|
|
37
|
+
border-right: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:not(.label) {
|
|
42
|
+
@include media-breakpoint-up(sm) {
|
|
43
|
+
grid-column: 2 / 3;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.submit {
|
|
48
|
+
justify-content: flex-end;
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: 1rem;
|
|
51
|
+
|
|
52
|
+
@include media-breakpoint-down(sm) {
|
|
53
|
+
> button {
|
|
54
|
+
width: 100%;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
package/scss/index.scss
CHANGED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div :class="$style.container">
|
|
3
|
-
<label v-if="label" :for="id">
|
|
4
|
-
<strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
|
|
5
|
-
</label>
|
|
6
|
-
<div :class="styleContent">
|
|
7
|
-
<slot />
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script type="text/javascript">
|
|
13
|
-
export default {
|
|
14
|
-
name: 'FormGroup',
|
|
15
|
-
props: {
|
|
16
|
-
label: {
|
|
17
|
-
type: String
|
|
18
|
-
},
|
|
19
|
-
required: {
|
|
20
|
-
type: Boolean
|
|
21
|
-
},
|
|
22
|
-
optional: {
|
|
23
|
-
type: Boolean
|
|
24
|
-
},
|
|
25
|
-
submit: {
|
|
26
|
-
type: Boolean
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
computed: {
|
|
30
|
-
styleContent() {
|
|
31
|
-
const style = this.$style;
|
|
32
|
-
let output = [style.content];
|
|
33
|
-
if (!this.label) { output.push(style.no_label); }
|
|
34
|
-
if (this.submit) { output.push(style.submit); }
|
|
35
|
-
return output;
|
|
36
|
-
},
|
|
37
|
-
id() {
|
|
38
|
-
return this.label.toLowerCase().split(" ").join("_");
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
</script>
|
|
43
|
-
|
|
44
|
-
<style lang="scss" module>
|
|
45
|
-
|
|
46
|
-
.container {
|
|
47
|
-
|
|
48
|
-
&:not(:last-of-type) {
|
|
49
|
-
margin-bottom: 1rem;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@include media-breakpoint-up(sm) {
|
|
53
|
-
grid-template-columns: 33fr 67fr;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: $gap-account;
|
|
56
|
-
display: grid;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
label {
|
|
60
|
-
font-weight: normal;
|
|
61
|
-
|
|
62
|
-
@include media-breakpoint-down(sm) {
|
|
63
|
-
margin-bottom: 0.5rem;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
input {
|
|
68
|
-
width: 100%;
|
|
69
|
-
margin: 0;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.content {
|
|
74
|
-
|
|
75
|
-
&.no_label {
|
|
76
|
-
@include media-breakpoint-up(sm) {
|
|
77
|
-
grid-column: 2 / 3;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&.submit {
|
|
82
|
-
text-align: right;
|
|
83
|
-
|
|
84
|
-
@include media-breakpoint-down(sm) {
|
|
85
|
-
> button {
|
|
86
|
-
width: 100%;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
</style>
|