@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-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
  }
package/components/block-responsive-table-v3/responsive-table-v3.scss CHANGED
@@ -1,48 +1,49 @@
1
1
  @use '../fields-core-functions-v3/core-functions-v3';
2
2
  @use '../fields-core-mixins-v3/core-mixins-v3';
3
3
  @use '../../breakpoints';
4
-
5
- .responsive-table-v3 {
6
- &__wrapper {
7
- display: grid;
8
- grid-auto-flow: column;
9
- gap: calc(
10
- var(--global-inline-spacing) * var(--table-spacing-gap-desktop)
11
- );
12
- overflow: auto;
13
- }
14
- &__headings {
15
- display: grid;
16
- grid-auto-flow: column;
17
- grid-column: 1/ (var(--headings));
18
- grid-template-columns: subgrid;
19
- }
20
-
21
- &__heading {
22
- grid-row: 1;
23
- background-color: var(--background-column-headers);
24
- padding: core-functions-v3.fluidSize(5, 'mobile');
25
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
26
- padding: core-functions-v3.fluidSize(5, 'portrait');
4
+ @layer base-styles {
5
+ .responsive-table-v3 {
6
+ &__wrapper {
7
+ display: grid;
8
+ grid-auto-flow: column;
9
+ gap: calc(
10
+ var(--global-inline-spacing) * var(--table-spacing-gap-desktop)
11
+ );
12
+ overflow: auto;
27
13
  }
28
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
29
- padding: core-functions-v3.fluidSize(5, 'desktop');
14
+ &__headings {
15
+ display: grid;
16
+ grid-auto-flow: column;
17
+ grid-column: 1/ (var(--headings));
18
+ grid-template-columns: subgrid;
30
19
  }
31
- }
32
- &__item {
33
- display: grid;
34
- grid-auto-flow: column;
35
- grid-column: 1/ (var(--headings));
36
- grid-template-columns: subgrid;
37
- }
38
- &__item-value {
39
- background-color: var(--background-colour-items);
40
- padding: core-functions-v3.fluidSize(5, 'mobile');
41
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
42
- padding: core-functions-v3.fluidSize(5, 'portrait');
20
+
21
+ &__heading {
22
+ grid-row: 1;
23
+ background-color: var(--background-column-headers);
24
+ padding: core-functions-v3.fluidSize(5);
25
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
26
+ padding: core-functions-v3.fluidSize(5);
27
+ }
28
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
29
+ padding: core-functions-v3.fluidSize(5);
30
+ }
31
+ }
32
+ &__item {
33
+ display: grid;
34
+ grid-auto-flow: column;
35
+ grid-column: 1/ (var(--headings));
36
+ grid-template-columns: subgrid;
43
37
  }
44
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
45
- padding: core-functions-v3.fluidSize(5, 'desktop');
38
+ &__item-value {
39
+ background-color: var(--background-colour-items);
40
+ padding: core-functions-v3.fluidSize(5);
41
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
42
+ padding: core-functions-v3.fluidSize(5);
43
+ }
44
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
45
+ padding: core-functions-v3.fluidSize(5);
46
+ }
46
47
  }
47
48
  }
48
49
  }
package/components/block-section-separator-v3/section-separator-v3.scss CHANGED
@@ -2,38 +2,40 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
4
 
5
- .section-separator-v3 {
6
- @include core-mixins-v3.responsiveShowHide(grid);
5
+ @layer base-styles {
6
+ .section-separator-v3 {
7
+ @include core-mixins-v3.responsiveShowHide(grid);
7
8
 
8
- &__separator-image {
9
- width: 100%;
10
- position: absolute;
11
- display: block;
12
- translate: 0 -50%;
13
- height: auto;
14
- top: 0;
15
- }
16
-
17
- &__secondary-image {
18
- position: absolute;
19
- place-self: center var(--horizontal-position);
20
- translate: var(--horizontal-offset) var(--vertical-offset);
21
- top: 0;
22
- max-width: core-functions-v3.fluidSize(
23
- var(--max-width-mobile),
24
- 'mobile'
25
- );
9
+ &__separator-image {
10
+ width: 100%;
11
+ position: absolute;
12
+ display: block;
13
+ translate: 0 -50%;
14
+ height: auto;
15
+ top: 0;
16
+ }
26
17
 
27
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
18
+ &__secondary-image {
19
+ position: absolute;
20
+ place-self: center var(--horizontal-position);
21
+ translate: var(--horizontal-offset) var(--vertical-offset);
22
+ top: 0;
28
23
  max-width: core-functions-v3.fluidSize(
29
- var(--max-width-portrait),
30
- 'portrait'
24
+ var(--max-width-mobile),
25
+ 'mobile'
31
26
  );
32
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
27
+
28
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
33
29
  max-width: core-functions-v3.fluidSize(
34
- var(--max-width-desktop),
35
- 'desktop'
30
+ var(--max-width-portrait),
31
+ 'portrait'
36
32
  );
33
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
34
+ max-width: core-functions-v3.fluidSize(
35
+ var(--max-width-desktop),
36
+ 'desktop'
37
+ );
38
+ }
37
39
  }
38
40
  }
39
41
  }
package/components/block-single-column-container-v3/single-column-container-v3.scss CHANGED
@@ -1,12 +1,14 @@
1
- .single-column-container-v3 {
2
- display: grid;
3
- grid-template: 'main' / 1fr;
4
- place-items: center;
5
- position: relative;
6
- &__block-container {
1
+ @layer base-styles {
2
+ .single-column-container-v3 {
7
3
  display: grid;
8
- grid-area: main;
9
- z-index: 5;
10
- width: 100%;
4
+ grid-template: 'main' / 1fr;
5
+ place-items: center;
6
+ position: relative;
7
+ &__block-container {
8
+ display: grid;
9
+ grid-area: main;
10
+ z-index: 5;
11
+ width: 100%;
12
+ }
11
13
  }
12
14
  }
package/components/component-content-box-settings-v3/content-box-settings-v3.scss CHANGED
@@ -162,13 +162,6 @@
162
162
  @include core-mixins-v3.defaultTextAlign();
163
163
  @include core-mixins-v3.responsiveShowHide();
164
164
  p,
165
- h1,
166
- h2,
167
- h3,
168
- h4,
169
- h5,
170
- h6,
171
- a,
172
165
  li,
173
166
  div {
174
167
  @include core-mixins-v3.defaultFontWeight();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "3.0.41",
3
+ "version": "3.0.43",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {