barbican-reset 3.22.0 → 3.24.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.
Files changed (49) hide show
  1. package/components/BrButton copy.vue +112 -0
  2. package/components/BrButton.vue +101 -88
  3. package/components/BrCard.vue +35 -40
  4. package/components/BrCardTearoff.vue +11 -0
  5. package/components/BrDetails.vue +15 -35
  6. package/components/BrLink.vue +22 -0
  7. package/components/BrWrap.vue +22 -2
  8. package/icons/back_arrow.vue +9 -1
  9. package/index.js +2 -0
  10. package/package.json +1 -1
  11. package/scripts/helpers/formatKebabCase.js +1 -1
  12. package/scss/_atomic.scss +16 -1
  13. package/scss/_br-button.scss +26 -2
  14. package/scss/{card/index.scss → _br-card.scss} +13 -11
  15. package/scss/_br-wrap.scss +10 -9
  16. package/scss/_variables.scss +6 -6
  17. package/scss/atomic/_max-widths.scss +29 -0
  18. package/scss/index.scss +1 -2
  19. package/scss/mixins/_br-card.scss +25 -4
  20. package/scss/mixins/_br-form-row.scss +1 -1
  21. package/scss/mixins/_br-wrap.scss +48 -0
  22. package/scss/mixins/_buttons.scss +1 -0
  23. package/scss/mixins/_core.scss +1 -1
  24. package/scss/mixins/buttons/_custom.scss +13 -16
  25. package/scss/mixins/buttons/_setup.scss +10 -48
  26. package/scss/mixins/buttons/_slim.scss +3 -0
  27. package/scss/mixins/buttons/custom/_add-to-wallet.scss +12 -0
  28. package/scss/mixins/buttons/custom/_invisible.scss +10 -0
  29. package/scss/mixins/buttons/custom/_manage-order.scss +11 -0
  30. package/scss/mixins/buttons/custom/_navcard.scss +32 -0
  31. package/scss/mixins/buttons/custom/_outline-alert-neutral.scss +10 -0
  32. package/scss/mixins/buttons/custom/_renew-membership.scss +4 -5
  33. package/scss/mixins/buttons/custom/_summary.scss +28 -0
  34. package/scss/mixins/card/_inline.scss +0 -1
  35. package/scss/{card → mixins/card}/_membership.scss +31 -21
  36. package/scss/mixins/card/_navitem.scss +10 -2
  37. package/scss/mixins/card/_qrcode.scss +21 -0
  38. package/scss/mixins/index.scss +1 -0
  39. package/scss/mixins/table/_details.scss +9 -3
  40. package/scss/mixins/table/_etickets.scss +6 -2
  41. package/scss/mixins/table/_generic.scss +6 -2
  42. package/scss/mixins/table/_gifts.scss +8 -3
  43. package/scss/mixins/table/_orders.scss +3 -1
  44. package/scss/mixins/table/_preferences.scss +6 -2
  45. package/scss/mixins/table/_resale.scss +3 -1
  46. package/scss/mixins/table/_tickets.scss +7 -3
  47. package/scss/_card-deck.scss +0 -26
  48. package/scss/mixins/buttons/custom/_see-tickets-info.scss +0 -18
  49. package/scss/mixins/card/_ticket.scss +0 -11
package/scss/mixins/card/_navitem.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  transform: scale(1);
14
14
  }
15
15
 
16
- &.router-link-exact-active {
16
+ &.disabled {
17
17
  outline-offset: calc(var(--border-width-sm) * -1);
18
18
  background-color: var(--color-brand-generic);
19
19
  outline-color: var(--color-brand-generic);
@@ -24,7 +24,15 @@
24
24
  color: white;
25
25
  }
26
26
 
27
- &:not(.router-link-active):hover {
27
+ &.router-link-active:not(.router-link-exact-active) {
28
+ background-color: var(--color-brand-generic-15-lighten);
29
+ color: var(--color-brand-generic-90-darken);
30
+ outline-color: var(--color-brand-generic);
31
+ text-decoration: underline;
32
+ border-color: currentColor;
33
+ }
34
+
35
+ &:not(.disabled):hover {
28
36
  color: var(--color-brand-generic-90-darken);
29
37
  outline-color: var(--color-brand-generic);
30
38
  text-decoration: underline;
package/scss/mixins/card/_qrcode.scss ADDED
@@ -0,0 +1,21 @@
1
+ @use "../../mixins/breakpoints" as *;
2
+ @use "inline" as *;
3
+
4
+ @mixin br-card--qrcode {
5
+ @include br-card--inline;
6
+
7
+ & {
8
+ border-color: currentColor;
9
+ }
10
+
11
+ .br-card-text {
12
+ margin-top: var(--margin-md);
13
+ width: var(--width-qrcode);
14
+ word-wrap: break-word;
15
+ text-align: center;
16
+ }
17
+
18
+ p+p {
19
+ margin-top: var(--margin-xs);
20
+ }
21
+ }
package/scss/mixins/index.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  @forward "br-form-row";
11
11
  @forward "br-gap";
12
12
  @forward "br-skiplink";
13
+ @forward "br-wrap";
13
14
  @forward "breakpoints";
14
15
  @forward "buttons";
15
16
  @forward "city-of-london";
package/scss/mixins/table/_details.scss CHANGED
@@ -14,7 +14,9 @@
14
14
  }
15
15
 
16
16
  thead tr {
17
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
17
+ border-color: var(--color-black-25-lighten);
18
+ border-width: var(--border-width-sm);
19
+ border-style: solid;
18
20
  }
19
21
 
20
22
  tr {
@@ -30,7 +32,9 @@
30
32
  }
31
33
 
32
34
  tbody tr {
33
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
35
+ border-color: var(--color-black-25-lighten);
36
+ border-width: var(--border-width-sm);
37
+ border-style: solid;
34
38
 
35
39
  &:not(:last-of-type) {
36
40
  margin-bottom: var(--margin-lg);
@@ -49,7 +53,9 @@
49
53
 
50
54
  @include medium-up {
51
55
  &:not(:last-of-type) {
52
- border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
56
+ border-right-color: var(--color-black-25-lighten);
57
+ border-right-width: var(--border-width-sm);
58
+ border-right-style: solid;
53
59
  }
54
60
 
55
61
  &:last-of-type {
package/scss/mixins/table/_etickets.scss CHANGED
@@ -17,7 +17,9 @@
17
17
 
18
18
  thead tr,
19
19
  tbody tr.active {
20
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
20
+ border-color: var(--color-black-25-lighten);
21
+ border-width: var(--border-width-sm);
22
+ border-style: solid;
21
23
  display: grid;
22
24
 
23
25
  &:not(:last-of-type) {
@@ -39,7 +41,9 @@
39
41
 
40
42
  @include medium-up {
41
43
  &:not(:last-of-type) {
42
- border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
44
+ border-right-color: var(--color-black-25-lighten);
45
+ border-right-width: var(--border-width-sm);
46
+ border-right-style: solid;
43
47
  }
44
48
 
45
49
  &:last-of-type {
package/scss/mixins/table/_generic.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @use "../../mixins/focus" as *;
4
4
 
5
5
  @mixin table-row($gap: var(--gap-sm)) {
6
- border-bottom: var(--border-width-sm) solid var(--color-black-10-lighten);
6
+ border-bottom-color: var(--color-black-25-lighten);
7
+ border-bottom-width: var(--border-width-sm);
8
+ border-bottom-style: solid;
7
9
  padding-bottom: $gap;
8
10
  padding-top: $gap;
9
11
  }
@@ -27,7 +29,9 @@
27
29
  td {
28
30
  @include medium-up {
29
31
  &:not(:last-of-type) {
30
- border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
32
+ border-right-color: var(--color-black-25-lighten);
33
+ border-right-width: var(--border-width-sm);
34
+ border-right-style: solid;
31
35
  }
32
36
 
33
37
  &:last-of-type {
package/scss/mixins/table/_gifts.scss CHANGED
@@ -26,10 +26,13 @@
26
26
  }
27
27
 
28
28
  @include x-large-down {
29
+ border-color: var(--color-black-25-lighten);
29
30
  border-radius: var(--border-radius-lg);
30
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
31
- display: block;
31
+ border-width: var(--border-width-sm);
32
32
  padding: var(--padding-lg);
33
+ border-style: solid;
34
+ display: block;
35
+
33
36
 
34
37
  &:not(:last-of-type) {
35
38
  margin-bottom: var(--margin-xl);
@@ -44,8 +47,10 @@
44
47
  }
45
48
 
46
49
  &:not(:first-of-type):not(:last-of-type) {
47
- border-top: var(--border-width-sm) solid var(--color-black-10-lighten);
50
+ border-top-color: var(--color-black-25-lighten);
51
+ border-top-width: var(--border-width-sm);
48
52
  padding-top: var(--padding-sm);
53
+ border-top-style: solid;
49
54
  }
50
55
 
51
56
  &:last-of-type {
package/scss/mixins/table/_orders.scss CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
  thead tr,
18
18
  tbody tr {
19
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
19
+ border-color: var(--color-black-25-lighten);
20
+ border-width: var(--border-width-sm);
21
+ border-style: solid;
20
22
  display: grid;
21
23
 
22
24
  &:not(:last-of-type) {
package/scss/mixins/table/_preferences.scss CHANGED
@@ -16,7 +16,9 @@
16
16
  }
17
17
 
18
18
  tr {
19
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
19
+ border-color: var(--color-black-25-lighten);
20
+ border-width: var(--border-width-sm);
21
+ border-style: solid;
20
22
  display: grid;
21
23
 
22
24
  &:not(:last-of-type) {
@@ -40,7 +42,9 @@
40
42
  text-align: center;
41
43
 
42
44
  &:not(:last-of-type) {
43
- border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
45
+ border-right-color: var(--color-black-25-lighten);
46
+ border-right-width: var(--border-width-sm);
47
+ border-right-style: solid;
44
48
  }
45
49
 
46
50
  &:first-of-type {
package/scss/mixins/table/_resale.scss CHANGED
@@ -7,7 +7,9 @@
7
7
  margin-left: auto;
8
8
 
9
9
  tbody tr {
10
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
10
+ border-color: var(--color-black-25-lighten);
11
+ border-width: var(--border-width-sm);
12
+ border-style: solid;
11
13
  }
12
14
 
13
15
  td {
package/scss/mixins/table/_tickets.scss CHANGED
@@ -20,10 +20,12 @@
20
20
  }
21
21
 
22
22
  @include small-down {
23
+ border-color: var(--color-black-25-lighten);
23
24
  border-radius: var(--border-radius-lg);
24
- border: var(--border-width-sm) solid var(--color-black-10-lighten);
25
- display: block;
25
+ border-width: var(--border-width-sm);
26
26
  padding: var(--padding-lg);
27
+ border-style: solid;
28
+ display: block;
27
29
 
28
30
  &:first-of-type {
29
31
  display: none;
@@ -43,7 +45,9 @@
43
45
  }
44
46
 
45
47
  &:not(:first-of-type):not(:last-of-type) {
46
- border-top: var(--border-width-sm) solid var(--color-black-10-lighten);
48
+ border-top-color: var(--color-black-25-lighten);
49
+ border-top-width: var(--border-width-sm);
50
+ border-top-style: solid;
47
51
  }
48
52
 
49
53
  &:last-of-type {
package/scss/_card-deck.scss DELETED
@@ -1,26 +0,0 @@
1
- @use "mixins/breakpoints";
2
-
3
- .card-deck {
4
- justify-content: center;
5
- display: grid;
6
- gap: var(--gap-xl);
7
-
8
- @include breakpoints.medium-up {
9
- align-items: flex-start;
10
- grid-auto-flow: column;
11
- }
12
-
13
- .br-card {
14
- max-width: var(--width-title);
15
- margin-top: 0;
16
- }
17
-
18
- .br-card-title {
19
- font-size: var(--font-size-h3);
20
- }
21
-
22
- .br-card-img {
23
- border-radius: var(--border-radius-lg);
24
- margin-top: var(--margin-lg);
25
- }
26
- }
package/scss/mixins/buttons/custom/_see-tickets-info.scss DELETED
@@ -1,18 +0,0 @@
1
- @use "outline-secondary" as *;
2
-
3
- @mixin btn-see-tickets-info {
4
- @include btn-outline-secondary;
5
-
6
- & {
7
- margin-top: var(--margin-lg);
8
- padding: var(--padding-md);
9
- text-align: left;
10
-
11
- &:hover,
12
- &:focus {
13
- background-color: var(--color-brand-generic-15-lighten);
14
- border-color: var(--color-brand-generic-90-darken);
15
- color: var(--color-brand-generic-90-darken);
16
- }
17
- }
18
- }
package/scss/mixins/card/_ticket.scss DELETED
@@ -1,11 +0,0 @@
1
- @use "../../mixins/breakpoints" as *;
2
-
3
- @mixin br-card--ticket {
4
- .br-card-title {
5
- font-size: var(--font-size-h4);
6
- }
7
-
8
- .br-card-text {
9
- margin-top: var(--margin-xs);
10
- }
11
- }