@total_onion/onion-library 3.0.41 → 3.0.43

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 (14) hide show
  1. package/components/block-betterreviews-display-v3/betterreviews-display-v3.scss +88 -81
  2. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss +264 -260
  3. package/components/block-cover-link-v3/cover-link-v3.scss +8 -6
  4. package/components/block-divider-v3/divider-v3.scss +74 -66
  5. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss +81 -80
  6. package/components/block-form-selection-v3/form-selection-v3.scss +28 -27
  7. package/components/block-gradient-layer-v3/gradient-layer-v3.scss +6 -4
  8. package/components/block-group-container-v3/group-container-v3.scss +34 -31
  9. package/components/block-product-info-v3/product-info-v3.scss +149 -148
  10. package/components/block-responsive-table-v3/responsive-table-v3.scss +40 -39
  11. package/components/block-section-separator-v3/section-separator-v3.scss +28 -26
  12. package/components/block-single-column-container-v3/single-column-container-v3.scss +11 -9
  13. package/components/component-content-box-settings-v3/content-box-settings-v3.scss +0 -7
  14. package/package.json +1 -1
package/components/block-divider-v3/divider-v3.scss CHANGED
@@ -2,94 +2,102 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
4
 
5
- .divider-v3 {
6
- display: grid;
7
- @include core-mixins-v3.responsiveShowHide(grid);
5
+ @layer base-styles {
6
+ .divider-v3 {
7
+ display: grid;
8
+ @include core-mixins-v3.responsiveShowHide(grid);
8
9
 
9
- &.vertical {
10
- height: 100%;
11
- .divider-v3__line {
10
+ &.vertical {
12
11
  height: 100%;
13
-
14
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
12
+ .divider-v3__line {
15
13
  height: 100%;
16
- }
17
14
 
18
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
19
- height: 100%;
15
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
16
+ height: 100%;
17
+ }
18
+
19
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
20
+ height: 100%;
21
+ }
20
22
  }
21
23
  }
22
- }
23
24
 
24
- &.horizontal {
25
- .divider-v3__line {
26
- width: 100%;
27
-
28
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
25
+ &.horizontal {
26
+ .divider-v3__line {
29
27
  width: 100%;
30
- }
31
28
 
32
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
33
- width: 100%;
29
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
30
+ width: 100%;
31
+ }
32
+
33
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
34
+ width: 100%;
35
+ }
34
36
  }
35
37
  }
36
- }
37
-
38
- &__line {
39
- background-color: var(--divider-v3-background-colour);
40
- background-image: var(--divider-v3-background-image);
41
- background-repeat: var(--divider-v3-background-repeat);
42
- background-position: var(--divider-v3-background-position-x)
43
- var(--divider-v3-background-position-y);
44
- width: core-functions-v3.fluidSize(var(--divider-v3-width), 'mobile');
45
- height: core-functions-v3.fluidSize(var(--divider-v3-height), 'mobile');
46
- place-self: var(--divider-v3-vertical-position)
47
- var(--divider-v3-horizontal-position);
48
- max-width: core-functions-v3.fluidSize(
49
- var(--divider-v3-max-width-mobile),
50
- 'mobile'
51
- );
52
- max-height: core-functions-v3.fluidSize(
53
- var(--divider-v3-max-height-mobile),
54
- 'mobile'
55
- );
56
38
 
57
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
58
- height: core-functions-v3.fluidSize(
59
- var(--divider-v3-height),
60
- 'portrait'
61
- );
39
+ &__line {
40
+ background-color: var(--divider-v3-background-colour);
41
+ background-image: var(--divider-v3-background-image);
42
+ background-repeat: var(--divider-v3-background-repeat);
43
+ background-position: var(--divider-v3-background-position-x)
44
+ var(--divider-v3-background-position-y);
62
45
  width: core-functions-v3.fluidSize(
63
46
  var(--divider-v3-width),
64
- 'portrait'
65
- );
66
- max-width: core-functions-v3.fluidSize(
67
- var(--divider-v3-max-width-portrait),
68
- 'portrait'
69
- );
70
- max-height: core-functions-v3.fluidSize(
71
- var(--divider-v3-max-height-portrait),
72
- 'portrait'
47
+ 'mobile'
73
48
  );
74
- }
75
-
76
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
77
49
  height: core-functions-v3.fluidSize(
78
50
  var(--divider-v3-height),
79
- 'desktop'
80
- );
81
- width: core-functions-v3.fluidSize(
82
- var(--divider-v3-width),
83
- 'desktop'
51
+ 'mobile'
84
52
  );
53
+ place-self: var(--divider-v3-vertical-position)
54
+ var(--divider-v3-horizontal-position);
85
55
  max-width: core-functions-v3.fluidSize(
86
- var(--divider-v3-max-width-desktop),
87
- 'desktop'
56
+ var(--divider-v3-max-width-mobile),
57
+ 'mobile'
88
58
  );
89
59
  max-height: core-functions-v3.fluidSize(
90
- var(--divider-v3-max-height-desktop),
91
- 'desktop'
60
+ var(--divider-v3-max-height-mobile),
61
+ 'mobile'
92
62
  );
63
+
64
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
65
+ height: core-functions-v3.fluidSize(
66
+ var(--divider-v3-height),
67
+ 'portrait'
68
+ );
69
+ width: core-functions-v3.fluidSize(
70
+ var(--divider-v3-width),
71
+ 'portrait'
72
+ );
73
+ max-width: core-functions-v3.fluidSize(
74
+ var(--divider-v3-max-width-portrait),
75
+ 'portrait'
76
+ );
77
+ max-height: core-functions-v3.fluidSize(
78
+ var(--divider-v3-max-height-portrait),
79
+ 'portrait'
80
+ );
81
+ }
82
+
83
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
84
+ height: core-functions-v3.fluidSize(
85
+ var(--divider-v3-height),
86
+ 'desktop'
87
+ );
88
+ width: core-functions-v3.fluidSize(
89
+ var(--divider-v3-width),
90
+ 'desktop'
91
+ );
92
+ max-width: core-functions-v3.fluidSize(
93
+ var(--divider-v3-max-width-desktop),
94
+ 'desktop'
95
+ );
96
+ max-height: core-functions-v3.fluidSize(
97
+ var(--divider-v3-max-height-desktop),
98
+ 'desktop'
99
+ );
100
+ }
93
101
  }
94
102
  }
95
103
  }
package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss CHANGED
@@ -1,92 +1,93 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
-
5
- .featured-image-gallery-v3 {
6
- display: grid;
7
- grid-template:
8
- 'featured'
9
- 'other' / 1fr;
10
- gap: core-functions-v3.fluidSize(10);
11
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
12
- grid-template: 'featured other' / 1fr 1fr;
13
- grid-gap: core-functions-v3.fluidSize(20);
14
- }
15
- &__featured-image-container {
16
- perspective: 1000px;
17
- grid-area: featured;
18
- place-self: stretch;
19
- aspect-ratio: 1;
20
- &.changing-image
21
- .featured-image-gallery-v3__featured-image-inner-container {
22
- transform: rotateY(180deg);
23
- }
24
- }
25
- &__featured-image-inner-container {
26
- position: relative;
27
- width: 100%;
28
- height: 100%;
29
- text-align: center;
30
- transition: transform 0.8s;
31
- transform-style: preserve-3d;
32
- }
33
- &__featured-image-front,
34
- &__featured-image-back {
35
- position: absolute;
36
- width: 100%;
37
- height: 100%;
38
- backface-visibility: hidden;
39
- }
40
- &__featured-image-front {
41
- background-color: var(--bally-blue-dark);
42
- }
43
- &__featured-image-back {
4
+ @layer base-styles {
5
+ .featured-image-gallery-v3 {
44
6
  display: grid;
45
- place-items: center;
46
- background-color: var(--bally-blue-dark);
47
- transform: rotateY(180deg);
48
- padding: core-functions-v3.fluidSize(20);
7
+ grid-template:
8
+ 'featured'
9
+ 'other' / 1fr;
10
+ gap: core-functions-v3.fluidSize(10);
49
11
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
50
- padding: core-functions-v3.fluidSize(120);
12
+ grid-template: 'featured other' / 1fr 1fr;
13
+ grid-gap: core-functions-v3.fluidSize(20);
51
14
  }
52
- }
53
- &__featured-image {
54
- grid-area: featured;
55
- object-fit: cover;
56
- aspect-ratio: 1;
57
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
15
+ &__featured-image-container {
16
+ perspective: 1000px;
17
+ grid-area: featured;
18
+ place-self: stretch;
19
+ aspect-ratio: 1;
20
+ &.changing-image
21
+ .featured-image-gallery-v3__featured-image-inner-container {
22
+ transform: rotateY(180deg);
23
+ }
24
+ }
25
+ &__featured-image-inner-container {
26
+ position: relative;
58
27
  width: 100%;
59
- height: auto;
28
+ height: 100%;
29
+ text-align: center;
30
+ transition: transform 0.8s;
31
+ transform-style: preserve-3d;
60
32
  }
61
- }
62
- &__other-images {
63
- grid-area: other;
64
- place-self: stretch;
65
- display: grid;
66
- aspect-ratio: 1;
67
- grid-gap: core-functions-v3.fluidSize(8);
68
- grid-template-columns: repeat(3, 1fr);
69
- grid-template-rows: repeat(3, 1fr);
70
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
71
- grid-gap: core-functions-v3.fluidSize(10);
33
+ &__featured-image-front,
34
+ &__featured-image-back {
35
+ position: absolute;
36
+ width: 100%;
37
+ height: 100%;
38
+ backface-visibility: hidden;
72
39
  }
73
- }
74
- &__image-wrapper {
75
- display: flex;
76
- overflow: hidden;
77
- box-shadow: 0px 0px 8px transparent;
78
- transition: box-shadow 0.2s;
79
- cursor: pointer;
80
- &:hover,
81
- &--active {
82
- box-shadow: 0px 0px 0px core-functions-v3.fluidSize(2) white;
40
+ &__featured-image-front {
41
+ background-color: var(--bally-blue-dark);
42
+ }
43
+ &__featured-image-back {
44
+ display: grid;
45
+ place-items: center;
46
+ background-color: var(--bally-blue-dark);
47
+ transform: rotateY(180deg);
48
+ padding: core-functions-v3.fluidSize(20);
49
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
50
+ padding: core-functions-v3.fluidSize(120);
51
+ }
52
+ }
53
+ &__featured-image {
54
+ grid-area: featured;
55
+ object-fit: cover;
56
+ aspect-ratio: 1;
57
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
58
+ width: 100%;
59
+ height: auto;
60
+ }
61
+ }
62
+ &__other-images {
63
+ grid-area: other;
64
+ place-self: stretch;
65
+ display: grid;
66
+ aspect-ratio: 1;
67
+ grid-gap: core-functions-v3.fluidSize(8);
68
+ grid-template-columns: repeat(3, 1fr);
69
+ grid-template-rows: repeat(3, 1fr);
70
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
71
+ grid-gap: core-functions-v3.fluidSize(10);
72
+ }
73
+ }
74
+ &__image-wrapper {
75
+ display: flex;
76
+ overflow: hidden;
77
+ box-shadow: 0px 0px 8px transparent;
78
+ transition: box-shadow 0.2s;
79
+ cursor: pointer;
80
+ &:hover,
81
+ &--active {
82
+ box-shadow: 0px 0px 0px core-functions-v3.fluidSize(2) white;
83
+ }
84
+ }
85
+ &__image {
86
+ object-fit: cover;
87
+ aspect-ratio: 1;
88
+ width: 100%;
89
+ height: auto;
90
+ transition: transform 0.5s ease-out;
83
91
  }
84
- }
85
- &__image {
86
- object-fit: cover;
87
- aspect-ratio: 1;
88
- width: 100%;
89
- height: auto;
90
- transition: transform 0.5s ease-out;
91
92
  }
92
93
  }
package/components/block-form-selection-v3/form-selection-v3.scss CHANGED
@@ -1,37 +1,38 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
+ @layer base-styles {
5
+ .form-selection-v3 {
6
+ pointer-events: all;
4
7
 
5
- .form-selection-v3 {
6
- pointer-events: all;
7
-
8
- &__container-modal {
9
- display: none;
10
- position: fixed;
11
- inset: 0;
12
- z-index: 9998;
13
- background-color: rgba(0, 0, 0, 0.4);
14
- }
8
+ &__container-modal {
9
+ display: none;
10
+ position: fixed;
11
+ inset: 0;
12
+ z-index: 9998;
13
+ background-color: rgba(0, 0, 0, 0.4);
14
+ }
15
15
 
16
- &__inner {
17
- overflow-y: scroll;
18
- width: 100vw;
19
- z-index: 9999;
20
- height: 100%;
21
- }
16
+ &__inner {
17
+ overflow-y: scroll;
18
+ width: 100vw;
19
+ z-index: 9999;
20
+ height: 100%;
21
+ }
22
22
 
23
- &__modal-open {
24
- &--icon {
25
- cursor: pointer;
26
- appearance: none;
27
- border: none;
28
- background: transparent;
23
+ &__modal-open {
24
+ &--icon {
25
+ cursor: pointer;
26
+ appearance: none;
27
+ border: none;
28
+ background: transparent;
29
+ }
29
30
  }
30
- }
31
31
 
32
- &__modal-close {
33
- position: absolute;
34
- top: core-functions-v3.fluidSize(20);
35
- right: core-functions-v3.fluidSize(20);
32
+ &__modal-close {
33
+ position: absolute;
34
+ top: core-functions-v3.fluidSize(20);
35
+ right: core-functions-v3.fluidSize(20);
36
+ }
36
37
  }
37
38
  }
package/components/block-gradient-layer-v3/gradient-layer-v3.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use '../component-gradient-overlay-v3/gradient-overlay-v3';
2
- .gradient-layer-v3 {
3
- display: grid;
4
- grid-template: 'main' / 1fr;
5
- @include gradient-overlay-v3.gradientOverlay();
2
+ @layer base-styles {
3
+ .gradient-layer-v3 {
4
+ display: grid;
5
+ grid-template: 'main' / 1fr;
6
+ @include gradient-overlay-v3.gradientOverlay();
7
+ }
6
8
  }
package/components/block-group-container-v3/group-container-v3.scss CHANGED
@@ -4,39 +4,42 @@
4
4
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
5
5
  @use '../component-flex-layout-container-v3/flex-layout-container-v3';
6
6
  @use '../../breakpoints';
7
-
8
- .group-container-v3 {
9
- display: grid;
10
- grid-template: 'main' / 1fr;
11
- place-items: center;
12
- &__grid-container {
13
- grid-area: main;
14
- place-self: stretch;
15
- &.flex-layout-container {
16
- @include flex-layout-container-v3.flexLayoutContainer();
7
+ @layer base-styles {
8
+ .group-container-v3 {
9
+ display: grid;
10
+ grid-template: 'main' / 1fr;
11
+ place-items: center;
12
+ &__grid-container {
13
+ grid-area: main;
14
+ place-self: stretch;
15
+ &.flex-layout-container {
16
+ @include flex-layout-container-v3.flexLayoutContainer();
17
+ }
18
+ &.grid-layout-container {
19
+ @include grid-layout-container-v3.gridLayoutContainer();
20
+ }
17
21
  }
18
- &.grid-layout-container {
19
- @include grid-layout-container-v3.gridLayoutContainer();
22
+ &__block-container {
23
+ pointer-events: none;
24
+ position: relative;
25
+ &.grid-layout-container {
26
+ @include grid-layout-element-v3.gridLayoutElement();
27
+ }
28
+ &:has(
29
+ .video-content-v3__video-container.video-playing.video-playing--high-z-index
30
+ ) {
31
+ z-index: 50;
32
+ }
20
33
  }
21
- }
22
- &__block-container {
23
- pointer-events: none;
24
- position: relative;
25
- &.grid-layout-container {
26
- @include grid-layout-element-v3.gridLayoutElement();
27
- }
28
- &:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index) {
29
- z-index: 50;
34
+ &__block-number {
35
+ z-index: 99;
36
+ position: absolute;
37
+ font-size: 40px;
38
+ left: 50%;
39
+ top: 50%;
40
+ transform: translate(-50%, -50%);
41
+ color: white;
42
+ text-shadow: 1px 1px 1px blue;
30
43
  }
31
44
  }
32
- &__block-number {
33
- z-index: 99;
34
- position: absolute;
35
- font-size: 40px;
36
- left: 50%;
37
- top: 50%;
38
- transform: translate(-50%, -50%);
39
- color: white;
40
- text-shadow: 1px 1px 1px blue;
41
- }
42
45
  }