@total_onion/onion-library 3.0.42 → 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 (13) 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-featured-image-gallery-v3/featured-image-gallery-v3.scss +81 -80
  5. package/components/block-form-selection-v3/form-selection-v3.scss +28 -27
  6. package/components/block-gradient-layer-v3/gradient-layer-v3.scss +6 -4
  7. package/components/block-group-container-v3/group-container-v3.scss +34 -31
  8. package/components/block-product-info-v3/product-info-v3.scss +149 -148
  9. package/components/block-responsive-table-v3/responsive-table-v3.scss +40 -39
  10. package/components/block-section-separator-v3/section-separator-v3.scss +28 -26
  11. package/components/block-single-column-container-v3/single-column-container-v3.scss +11 -9
  12. package/components/component-content-box-settings-v3/content-box-settings-v3.scss +0 -7
  13. package/package.json +1 -1
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
  }
package/components/block-product-info-v3/product-info-v3.scss CHANGED
@@ -6,165 +6,166 @@
6
6
  @use '../component-content-box-settings-v3/content-box-settings-v3';
7
7
  @use '../component-gradient-overlay-v3/gradient-overlay-v3';
8
8
  @use '../../breakpoints';
9
-
10
- .product-info-v3 {
11
- display: grid;
12
- grid-auto-columns: 1fr;
13
- grid-template: 'main' / 1fr;
14
- @include content-box-settings-v3.contentBoxSettingsV3();
15
- @include grid-layout-container-v3.gridLayoutContainer();
16
- &__post-cover-link {
17
- grid-area: unset;
18
- position: absolute;
19
- inset: 0;
20
- width: 100%;
21
- height: 100%;
22
- z-index: 99;
23
- opacity: 0;
24
- }
25
- &__post-cover-label {
26
- position: absolute;
27
- width: 1px;
28
- height: 1px;
29
- margin: -1px;
30
- padding: 0;
31
- overflow: hidden;
32
- clip: rect(0, 0, 0, 0);
33
- white-space: nowrap;
34
- border: 0;
35
- }
36
- &__info-item {
37
- @include grid-layout-element-v3.gridLayoutElement();
38
- width: 100%;
39
- position: relative;
40
- }
41
- &__content-container {
42
- width: 100%;
43
- }
44
- &__cta-selection-container {
45
- @include grid-layout-element-v3.gridLayoutElement();
46
- }
47
- &__cta {
48
- display: flex;
49
- }
50
- &__cta-style-post-colour,
51
- &__cta-style-post-text-colour-style {
52
- padding-block: core-functions-v3.fluidSize(10);
53
- padding-inline: core-functions-v3.fluidSize(20);
54
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
55
- padding-block: core-functions-v3.fluidSize(10);
56
- padding-inline: core-functions-v3.fluidSize(20);
9
+ @layer base-styles {
10
+ .product-info-v3 {
11
+ display: grid;
12
+ grid-auto-columns: 1fr;
13
+ grid-template: 'main' / 1fr;
14
+ @include content-box-settings-v3.contentBoxSettingsV3();
15
+ @include grid-layout-container-v3.gridLayoutContainer();
16
+ &__post-cover-link {
17
+ grid-area: unset;
18
+ position: absolute;
19
+ inset: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ z-index: 99;
23
+ opacity: 0;
24
+ }
25
+ &__post-cover-label {
26
+ position: absolute;
27
+ width: 1px;
28
+ height: 1px;
29
+ margin: -1px;
30
+ padding: 0;
31
+ overflow: hidden;
32
+ clip: rect(0, 0, 0, 0);
33
+ white-space: nowrap;
34
+ border: 0;
35
+ }
36
+ &__info-item {
37
+ @include grid-layout-element-v3.gridLayoutElement();
38
+ width: 100%;
39
+ position: relative;
40
+ }
41
+ &__content-container {
42
+ width: 100%;
57
43
  }
58
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
44
+ &__cta-selection-container {
45
+ @include grid-layout-element-v3.gridLayoutElement();
46
+ }
47
+ &__cta {
48
+ display: flex;
49
+ }
50
+ &__cta-style-post-colour,
51
+ &__cta-style-post-text-colour-style {
59
52
  padding-block: core-functions-v3.fluidSize(10);
60
53
  padding-inline: core-functions-v3.fluidSize(20);
54
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
55
+ padding-block: core-functions-v3.fluidSize(10);
56
+ padding-inline: core-functions-v3.fluidSize(20);
57
+ }
58
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
59
+ padding-block: core-functions-v3.fluidSize(10);
60
+ padding-inline: core-functions-v3.fluidSize(20);
61
+ }
61
62
  }
62
- }
63
- &__cta-style-post-colour {
64
- color: var(--post-colour);
65
- border: 1px solid var(--post-colour);
66
- }
67
- &__cta-style-post-text-colour-style {
68
- color: var(--post-text-colour-style);
69
- border: 1px solid var(--post-text-colour-style);
70
- }
71
- &__post-link,
72
- &__better-reviews {
73
- max-width: max-content;
74
- }
75
- &__gradient-overlay {
76
- height: 100%;
77
- @include gradient-overlay-v3.gradientOverlay();
78
- }
79
- &__post-tags {
80
- pointer-events: none;
81
- display: flex;
82
- width: auto;
83
- @include grid-layout-element-v3.gridLayoutElement();
84
- }
85
- &__post-image-container {
86
- display: grid;
87
- grid-template: 'main' / 1fr;
88
- &--image-accent {
89
- position: relative;
90
- img,
91
- svg {
92
- margin: unset;
93
- @include element-positioning-v3.elementPositioning();
63
+ &__cta-style-post-colour {
64
+ color: var(--post-colour);
65
+ border: 1px solid var(--post-colour);
66
+ }
67
+ &__cta-style-post-text-colour-style {
68
+ color: var(--post-text-colour-style);
69
+ border: 1px solid var(--post-text-colour-style);
70
+ }
71
+ &__post-link,
72
+ &__better-reviews {
73
+ max-width: max-content;
74
+ }
75
+ &__gradient-overlay {
76
+ height: 100%;
77
+ @include gradient-overlay-v3.gradientOverlay();
78
+ }
79
+ &__post-tags {
80
+ pointer-events: none;
81
+ display: flex;
82
+ width: auto;
83
+ @include grid-layout-element-v3.gridLayoutElement();
84
+ }
85
+ &__post-image-container {
86
+ display: grid;
87
+ grid-template: 'main' / 1fr;
88
+ &--image-accent {
89
+ position: relative;
90
+ img,
91
+ svg {
92
+ margin: unset;
93
+ @include element-positioning-v3.elementPositioning();
94
+ }
94
95
  }
95
96
  }
96
- }
97
- &__post__image {
98
- display: flex;
99
- justify-content: center;
100
- margin-inline: auto;
101
- grid-area: main;
102
- height: auto;
103
- aspect-ratio: var(
104
- --image-aspect-ratio-mobile,
105
- var(--image-aspect-ratio-desktop)
106
- );
107
- @include grid-layout-element-v3.gridLayoutElement();
108
- width: var(--post-image-width-mobile);
97
+ &__post__image {
98
+ display: flex;
99
+ justify-content: center;
100
+ margin-inline: auto;
101
+ grid-area: main;
102
+ height: auto;
103
+ aspect-ratio: var(
104
+ --image-aspect-ratio-mobile,
105
+ var(--image-aspect-ratio-desktop)
106
+ );
107
+ @include grid-layout-element-v3.gridLayoutElement();
108
+ width: var(--post-image-width-mobile);
109
109
 
110
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
111
- aspect-ratio: var(--image-aspect-ratio-portrait);
110
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
111
+ aspect-ratio: var(--image-aspect-ratio-portrait);
112
+ }
113
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
114
+ width: var(--post-image-width-desktop);
115
+ aspect-ratio: var(--image-aspect-ratio-desktop);
116
+ }
112
117
  }
113
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
114
- width: var(--post-image-width-desktop);
115
- aspect-ratio: var(--image-aspect-ratio-desktop);
118
+ &__post__image {
119
+ object-fit: var(--image-fit-style);
120
+ margin: auto;
116
121
  }
117
- }
118
- &__post__image {
119
- object-fit: var(--image-fit-style);
120
- margin: auto;
121
- }
122
- &__global-image {
123
- z-index: var(--global-image-zindex);
124
- max-width: var(--global-image-max-width);
125
- min-height: 100%;
126
- }
127
- &__global-image__picture {
128
- width: var(--global-image-width);
129
- display: flex;
130
- position: var(--global-image-position);
131
- inset: 0;
132
- }
133
- &__global-image__image {
134
- object-fit: var(--global-image-fit-style);
135
- }
136
- &__product-logo {
137
- max-width: core-functions-v3.fluidSize(
138
- var(--logo-max-width-mobile),
139
- 'mobile'
140
- );
141
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
122
+ &__global-image {
123
+ z-index: var(--global-image-zindex);
124
+ max-width: var(--global-image-max-width);
125
+ min-height: 100%;
126
+ }
127
+ &__global-image__picture {
128
+ width: var(--global-image-width);
129
+ display: flex;
130
+ position: var(--global-image-position);
131
+ inset: 0;
132
+ }
133
+ &__global-image__image {
134
+ object-fit: var(--global-image-fit-style);
135
+ }
136
+ &__product-logo {
142
137
  max-width: core-functions-v3.fluidSize(
143
- var(--logo-max-width-desktop),
144
- 'desktop'
138
+ var(--logo-max-width-mobile),
139
+ 'mobile'
145
140
  );
141
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
142
+ max-width: core-functions-v3.fluidSize(
143
+ var(--logo-max-width-desktop),
144
+ 'desktop'
145
+ );
146
+ }
147
+ }
148
+ &__person-rating {
149
+ display: flex;
150
+ gap: 1em;
151
+ }
152
+ &__person-rating-star {
153
+ --rating-star-colour: gold;
154
+ width: core-functions-v3.fluidSize(20, 'static');
155
+ }
156
+ &__person-questionaire-list {
157
+ list-style-type: none;
158
+ }
159
+ &__person-email {
160
+ display: flex;
161
+ gap: 1em;
162
+ }
163
+ &__person-email-icon {
164
+ width: 1em;
165
+ }
166
+ &__post-text-alternative-style {
167
+ width: auto;
168
+ @include grid-layout-element-v3.gridLayoutElement();
146
169
  }
147
- }
148
- &__person-rating {
149
- display: flex;
150
- gap: 1em;
151
- }
152
- &__person-rating-star {
153
- --rating-star-colour: gold;
154
- width: core-functions-v3.fluidSize(20, 'static');
155
- }
156
- &__person-questionaire-list {
157
- list-style-type: none;
158
- }
159
- &__person-email {
160
- display: flex;
161
- gap: 1em;
162
- }
163
- &__person-email-icon {
164
- width: 1em;
165
- }
166
- &__post-text-alternative-style {
167
- width: auto;
168
- @include grid-layout-element-v3.gridLayoutElement();
169
170
  }
170
171
  }