barbican-reset 1.7.6 → 1.7.9

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 (16) hide show
  1. package/components/br_loader.vue +9 -9
  2. package/helpers/mixins/_br-form-row.scss +5 -4
  3. package/helpers/mixins/_buttons.scss +22 -10
  4. package/helpers/mixins/_table.scss +11 -5
  5. package/helpers/mixins/index.scss +11 -1
  6. package/helpers/mixins/table/_details.scss +1 -5
  7. package/helpers/mixins/table/_etickets.scss +4 -6
  8. package/helpers/mixins/table/_gifts.scss +1 -1
  9. package/helpers/mixins/table/_orders.scss +4 -6
  10. package/helpers/mixins/table/_preferences.scss +1 -5
  11. package/helpers/mixins/table/_resale.scss +1 -5
  12. package/helpers/mixins/table/_tickets.scss +1 -1
  13. package/package.json +1 -1
  14. package/scss/_br-loader.scss +1 -1
  15. package/scss/_custom-checkbox.scss +1 -1
  16. package/helpers/mixins/_hide.scss +0 -27
package/components/br_loader.vue CHANGED
@@ -1,18 +1,18 @@
1
1
  <template>
2
- <b-card class="loading-animation" no-body>
3
- <div class="wrap loading-animation">
4
- <div class="icon loading-animation"></div>
5
- <div class="icon loading-animation"></div>
6
- <div class="icon loading-animation"></div>
7
- <div class="icon loading-animation"></div>
8
- <div class="icon loading-animation"></div>
9
- <div class="icon loading-animation"></div>
2
+ <b-card class="br-loader" no-body>
3
+ <div class="wrap br-loader">
4
+ <div class="icon br-loader"></div>
5
+ <div class="icon br-loader"></div>
6
+ <div class="icon br-loader"></div>
7
+ <div class="icon br-loader"></div>
8
+ <div class="icon br-loader"></div>
9
+ <div class="icon br-loader"></div>
10
10
  </div>
11
11
  </b-card>
12
12
  </template>
13
13
 
14
14
  <script>
15
15
  export default {
16
- name: "Loader",
16
+ name: "BrLoader",
17
17
  };
18
18
  </script>
package/helpers/mixins/_br-form-row.scss CHANGED
@@ -1,23 +1,24 @@
1
1
 
2
- @mixin br-form-row {
2
+ @mixin br-form-row($mq:sm) {
3
3
  &:not(:last-of-type) {
4
4
  margin-bottom: 1rem;
5
5
  }
6
6
 
7
- @include media-breakpoint-up(sm) {
7
+ @include media-breakpoint-up($mq) {
8
8
  grid-template-columns: 33fr 67fr;
9
+ align-items: flex-start;
9
10
  gap: $gap-account;
10
11
  display: grid;
11
12
  }
12
13
 
13
14
  > label {
14
- @include media-breakpoint-up(sm) {
15
+ @include media-breakpoint-up($mq) {
15
16
  margin-top: 1rem;
16
17
  }
17
18
  }
18
19
 
19
20
  label {
20
- @include media-breakpoint-down(sm) {
21
+ @include media-breakpoint-down($mq) {
21
22
  margin-bottom: 0.5rem;
22
23
  }
23
24
  }
package/helpers/mixins/_buttons.scss CHANGED
@@ -8,7 +8,11 @@
8
8
  font-weight: 700;
9
9
  transition: none;
10
10
  line-height: 1;
11
- padding: 1em;
11
+ padding: 1em;
12
+
13
+ &[slim] {
14
+ padding: 0.75em;
15
+ }
12
16
  }
13
17
 
14
18
  @mixin button-display($display:'ib',$gap:1em) {
@@ -32,18 +36,22 @@
32
36
  $background: $c-brand-orange,
33
37
  $color: $white,
34
38
  $border: 1px,
35
- $padding: 1em,
39
+ $padding: false,
36
40
  $line-height: false,
37
41
  $display: false,
38
42
  $font-size: false) {
39
43
  border: $border solid $background;
40
44
  background-color: $background;
41
- padding: $padding;
42
45
  color: $color;
46
+
47
+ @if $display {
48
+ @if $padding { @include button-display($display, $padding * 0.625); }
49
+ @else { @include button-display($display, 0.625); }
50
+ }
43
51
 
44
- @if $display { @include button-display($display, $padding * 0.625); }
45
52
  @if $line-height { line-height: $line-height; }
46
53
  @if $font-size { font-size: $font-size; }
54
+ @if $padding { padding: $padding; }
47
55
 
48
56
  path {
49
57
  fill: $color;
@@ -65,18 +73,22 @@
65
73
  $color: $c-brand-orange,
66
74
  $background: $white,
67
75
  $border: 1px,
68
- $padding: 1em,
76
+ $padding: false,
69
77
  $line-height: false,
70
78
  $display: false,
71
79
  $font-size: false) {
72
80
  background-color: $background;
73
81
  border: $border solid $color;
74
- padding: $padding;
75
82
  color: $color;
76
83
 
77
- @if $display { @include button-display($display, $padding * 0.625); }
84
+ @if $display {
85
+ @if $padding { @include button-display($display, $padding * 0.625); }
86
+ @else { @include button-display($display, 0.625); }
87
+ }
88
+
78
89
  @if $line-height { line-height: $line-height; }
79
90
  @if $font-size { font-size: $font-size; }
91
+ @if $padding { padding: $padding; }
80
92
 
81
93
  path {
82
94
  fill: $color;
@@ -98,16 +110,16 @@
98
110
  @mixin button-link(
99
111
  $color: inherit,
100
112
  $background: transparent,
101
- $padding: 0,
113
+ $padding: false,
102
114
  $line-height: false) {
103
115
  background-color: $background;
104
116
  text-decoration: underline;
105
117
  font-weight: inherit;
106
- padding: $padding;
107
118
  border-radius: 0;
108
119
  color: $color;
109
120
 
110
121
  @if $line-height { line-height: $line-height; }
122
+ @if $padding { padding: $padding; }
111
123
  }
112
124
 
113
125
  @mixin btn-primary {
@@ -301,7 +313,7 @@
301
313
  }
302
314
 
303
315
  label {
304
- visibility: hidden;
316
+ @include sr-only;
305
317
  }
306
318
  }
307
319
 
package/helpers/mixins/_table.scss CHANGED
@@ -5,11 +5,17 @@
5
5
  padding-top: $gap;
6
6
  }
7
7
 
8
- @mixin table-link {
9
- @include focus {
10
- @include single-box($c-grey-night);
11
- background-color: $c-grey-night;
12
- color: $white;
8
+ @mixin table-link--focus {
9
+ @include single-box($c-grey-night);
10
+ background-color: $c-grey-night;
11
+ color: $white;
12
+ }
13
+
14
+ @mixin table-label($mq:md) {
15
+ font-size: $font-size-lg;
16
+
17
+ @include media-breakpoint-up($mq) {
18
+ @include sr-only;
13
19
  }
14
20
  }
15
21
 
package/helpers/mixins/index.scss CHANGED
@@ -6,6 +6,17 @@
6
6
  top: $val;
7
7
  }
8
8
 
9
+ @mixin sr-only {
10
+ clip: rect(0,0,0,0);
11
+ position: absolute;
12
+ overflow: hidden;
13
+ margin: -1px;
14
+ height: 1px;
15
+ padding: 0;
16
+ width: 1px;
17
+ border: 0;
18
+ }
19
+
9
20
  @import "br-alert";
10
21
  @import "br-form-row";
11
22
  @import "br-form-update";
@@ -20,7 +31,6 @@
20
31
  @import "festival";
21
32
  @import "focus";
22
33
  @import "font";
23
- @import "hide";
24
34
  @import "loading";
25
35
  @import "input";
26
36
  @import "table";
package/helpers/mixins/table/_details.scss CHANGED
@@ -52,10 +52,6 @@
52
52
  }
53
53
 
54
54
  label {
55
- font-size: $font-size-lg;
56
-
57
- @include media-breakpoint-up($mq) {
58
- display: none;
59
- }
55
+ @include table-label($mq);
60
56
  }
61
57
  }
package/helpers/mixins/table/_etickets.scss CHANGED
@@ -45,14 +45,12 @@
45
45
  }
46
46
 
47
47
  label {
48
- font-size: $font-size-lg;
49
-
50
- @include media-breakpoint-up($mq) {
51
- display: none;
52
- }
48
+ @include table-label($mq);
53
49
  }
54
50
 
55
51
  a {
56
- @include table-link;
52
+ @include focus {
53
+ @include table-link--focus;
54
+ }
57
55
  }
58
56
  }
package/helpers/mixins/table/_gifts.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  gap: 0.75rem;
21
21
 
22
22
  label {
23
- display: none;
23
+ @include sr-only;
24
24
  }
25
25
  }
26
26
 
package/helpers/mixins/table/_orders.scss CHANGED
@@ -41,14 +41,12 @@
41
41
  }
42
42
 
43
43
  label {
44
- font-size: $font-size-lg;
45
-
46
- @include media-breakpoint-up($mq) {
47
- display: none;
48
- }
44
+ @include table-label($mq);
49
45
  }
50
46
 
51
47
  a {
52
- @include table-link;
48
+ @include focus {
49
+ @include table-link--focus;
50
+ }
53
51
  }
54
52
  }
package/helpers/mixins/table/_preferences.scss CHANGED
@@ -53,11 +53,7 @@
53
53
  }
54
54
 
55
55
  label {
56
- font-size: $font-size-lg;
57
-
58
- @include media-breakpoint-up($mq) {
59
- display: none;
60
- }
56
+ @include table-label($mq);
61
57
  }
62
58
 
63
59
  .custom-radio {
package/helpers/mixins/table/_resale.scss CHANGED
@@ -22,10 +22,6 @@
22
22
  }
23
23
 
24
24
  label {
25
- font-size: $font-size-lg;
26
-
27
- @include media-breakpoint-up($mq) {
28
- display: none;
29
- }
25
+ @include table-label($mq);
30
26
  }
31
27
  }
package/helpers/mixins/table/_tickets.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  gap: 0.75rem;
15
15
 
16
16
  label {
17
- display: none;
17
+ @include sr-only;
18
18
  }
19
19
  }
20
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "barbican-reset",
3
- "version": "1.7.6",
3
+ "version": "1.7.9",
4
4
  "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/_br-loader.scss CHANGED
@@ -17,7 +17,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
17
17
  margin-left: auto;
18
18
  padding-top: 2rem;
19
19
  height: 6.5rem;
20
- width: 8.5rem;
20
+ width: 9.75rem;
21
21
  }
22
22
 
23
23
  .icon.br-loader {
package/scss/_custom-checkbox.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  z-index: 1;
10
10
 
11
11
  + label {
12
- display: none;
12
+ @include sr-only;
13
13
  }
14
14
  }
15
15
 
package/helpers/mixins/_hide.scss DELETED
@@ -1,27 +0,0 @@
1
-
2
- @mixin hide-visually($state:"hide") {
3
- @if $state == "hide" {
4
- clip: rect(1px, 1px, 1px, 1px);
5
- clip-path: inset(100%);
6
- position: absolute;
7
- overflow: hidden;
8
- height: 1px;
9
- padding: 0;
10
- width: 1px;
11
- border: 0;
12
- }
13
- @if $state == "unhide" {
14
- overflow: visible;
15
- position: static;
16
- clip-path: none;
17
- height: auto;
18
- width: auto;
19
- clip: auto;
20
- }
21
- }
22
-
23
- @mixin hide-text {
24
- white-space: nowrap;
25
- text-indent: 101%;
26
- overflow: hidden;
27
- }