@total_onion/onion-library 2.0.199 → 2.0.201

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 (22) hide show
  1. package/components/block-accent-image-v3/accent-image-v3.scss +3 -1
  2. package/components/block-accordion-v3/accordion-v3.scss +150 -146
  3. package/components/block-back-to-top-button-v3/back-to-top-button-v3.scss +53 -52
  4. package/components/block-block-interactions-v3/block-interactions-v3.scss +24 -22
  5. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +1 -1
  6. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss +1 -1
  7. package/components/block-post-info-v3/group_6866429531436.json +101 -27
  8. package/components/block-post-info-v3/post-info-v3/post-tags.twig +4 -2
  9. package/components/block-post-info-v3/post-info-v3.scss +179 -178
  10. package/components/block-site-copyright-notice-v3/site-copyright-notice-v3.js +58 -0
  11. package/components/block-site-copyright-notice-v3/site-copyright-notice-v3.scss +14 -13
  12. package/package.json +2 -1
  13. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -745
  14. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +12 -0
  15. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +6 -49
  16. package/public/block-cover-link-v3/cover-link-v3.css +9 -0
  17. package/public/block-scrolling-banner-v3/scrolling-banner-v3.css +11 -1
  18. package/public/block-scrolling-banner-v3/scrolling-banner-v3.js +90 -78
  19. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css +16 -1
  20. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.js +42 -58
  21. package/public/dynamicBlockScss-v3.css +1025 -1773
  22. package/public/publicBundle.css +1025 -1773
package/components/block-accent-image-v3/accent-image-v3.scss CHANGED
@@ -1,2 +1,4 @@
1
- .accent-image-v3 {
1
+ @layer base-styles {
2
+ .accent-image-v3 {
3
+ }
2
4
  }
package/components/block-accordion-v3/accordion-v3.scss CHANGED
@@ -2,192 +2,196 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../component-content-box-settings-v3/content-box-settings-v3';
4
4
  @use '../../breakpoints';
5
-
6
- .accordion-v3 {
7
- @include content-box-settings-v3.contentBoxSettingsV3();
8
- width: 100%;
9
- pointer-events: all;
10
- display: flex;
11
- flex-direction: column;
12
- gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
13
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
14
- gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
15
- }
16
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
17
- gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
18
- }
19
-
20
- &-wrapper {
21
- text-align: initial;
22
- background: var(--background-color);
23
- }
24
-
25
- &-question-wrapper {
26
- cursor: pointer;
27
- place-items: flex-start;
28
- button {
29
- width: 100%;
30
- align-items: center;
31
- cursor: pointer;
32
- background: unset;
33
- padding: unset;
34
- border: unset;
35
- }
36
- }
37
-
38
- &__content-container {
39
- padding: core-functions-v3.fluidSize(10, 'static')
40
- core-functions-v3.fluidSize(50, 'static')
41
- core-functions-v3.fluidSize(10, 'static') 0;
42
- }
43
-
44
- &-image-wrapper {
45
- grid-area: icon;
46
- position: absolute;
47
- right: core-functions-v3.fluidSize(2, 'static');
48
- width: core-functions-v3.fluidSize(var(--image-icon-size), 'mobile');
49
-
5
+ @layer base-styles {
6
+ .accordion-v3 {
7
+ @include content-box-settings-v3.contentBoxSettingsV3();
8
+ width: 100%;
9
+ pointer-events: all;
10
+ display: flex;
11
+ flex-direction: column;
12
+ gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
50
13
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
51
- width: core-functions-v3.fluidSize(
52
- var(--image-icon-size),
53
- 'portrait'
54
- );
14
+ gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
55
15
  }
56
-
57
16
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
58
- width: core-functions-v3.fluidSize(
59
- var(--image-icon-size),
60
- 'desktop'
61
- );
17
+ gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
62
18
  }
63
19
 
64
- img {
65
- width: 100%;
20
+ &-wrapper {
21
+ text-align: initial;
22
+ background: var(--background-color);
66
23
  }
67
- }
68
24
 
69
- &-question {
70
- text-align: left;
71
- display: grid;
72
- grid-template:
73
- 'question icon'
74
- 'answer ...' / auto min-content;
75
- &--icon-left {
76
- grid-template:
77
- 'icon question'
78
- '... answer' / min-content auto;
79
- column-gap: core-functions-v3.fluidSize(20, 'static');
25
+ &-question-wrapper {
26
+ cursor: pointer;
27
+ place-items: flex-start;
28
+ button {
29
+ width: 100%;
30
+ align-items: center;
31
+ cursor: pointer;
32
+ background: unset;
33
+ padding: unset;
34
+ border: unset;
35
+ }
80
36
  }
81
- }
82
37
 
83
- &-answer-wrapper {
84
- overflow: hidden;
85
- height: 0;
86
- grid-area: answer;
38
+ &__content-container {
39
+ padding: core-functions-v3.fluidSize(10, 'static')
40
+ core-functions-v3.fluidSize(50, 'static')
41
+ core-functions-v3.fluidSize(10, 'static') 0;
42
+ }
87
43
 
88
- p {
89
- padding-inline: core-functions-v3.fluidSize(
90
- var(--text-padding-horizontal),
44
+ &-image-wrapper {
45
+ grid-area: icon;
46
+ position: absolute;
47
+ right: core-functions-v3.fluidSize(2, 'static');
48
+ width: core-functions-v3.fluidSize(
49
+ var(--image-icon-size),
91
50
  'mobile'
92
51
  );
93
52
 
94
53
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
95
- padding-inline: core-functions-v3.fluidSize(
96
- var(--text-padding-horizontal),
54
+ width: core-functions-v3.fluidSize(
55
+ var(--image-icon-size),
97
56
  'portrait'
98
57
  );
99
58
  }
100
59
 
101
60
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
102
- padding-inline: core-functions-v3.fluidSize(
103
- var(--text-padding-horizontal),
61
+ width: core-functions-v3.fluidSize(
62
+ var(--image-icon-size),
104
63
  'desktop'
105
64
  );
106
65
  }
107
- }
108
- }
109
-
110
- &-answer {
111
- font-size: core-functions-v3.fontSize(22, 'static');
112
- grid-column: 1/-1;
113
- padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
114
- padding-top: core-functions-v3.fluidSize(20, 'mobile');
115
66
 
116
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
117
- padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
118
- padding-top: core-functions-v3.fluidSize(20, 'portrait');
67
+ img {
68
+ width: 100%;
69
+ }
119
70
  }
120
71
 
121
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
122
- padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
123
- padding-top: core-functions-v3.fluidSize(20, 'desktop');
72
+ &-question {
73
+ text-align: left;
74
+ display: grid;
75
+ grid-template:
76
+ 'question icon'
77
+ 'answer ...' / auto min-content;
78
+ &--icon-left {
79
+ grid-template:
80
+ 'icon question'
81
+ '... answer' / min-content auto;
82
+ column-gap: core-functions-v3.fluidSize(20, 'static');
83
+ }
124
84
  }
125
85
 
126
- &:last-child {
127
- padding-bottom: 0;
128
- }
129
- }
86
+ &-answer-wrapper {
87
+ overflow: hidden;
88
+ height: 0;
89
+ grid-area: answer;
130
90
 
131
- &-icon {
132
- grid-area: icon;
133
- background: var(--icon-background-color);
134
- display: flex;
135
- align-items: center;
136
- height: core-functions-v3.fluidSize(50, 'static');
137
- width: core-functions-v3.fluidSize(50, 'static');
138
-
139
- &.active {
140
- .accordion-v3-animation {
141
- &:before {
142
- transform: rotate(90deg);
91
+ p {
92
+ padding-inline: core-functions-v3.fluidSize(
93
+ var(--text-padding-horizontal),
94
+ 'mobile'
95
+ );
96
+
97
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
98
+ padding-inline: core-functions-v3.fluidSize(
99
+ var(--text-padding-horizontal),
100
+ 'portrait'
101
+ );
143
102
  }
144
103
 
145
- &:after {
146
- transform: rotate(180deg);
104
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
105
+ padding-inline: core-functions-v3.fluidSize(
106
+ var(--text-padding-horizontal),
107
+ 'desktop'
108
+ );
147
109
  }
148
110
  }
149
111
  }
150
- }
151
112
 
152
- .image-icon-active {
153
- transform: rotate(var(--image-icon-rotation-deg));
154
- transition: transform 0.3s ease;
155
- }
113
+ &-answer {
114
+ font-size: core-functions-v3.fontSize(22, 'static');
115
+ grid-column: 1/-1;
116
+ padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
117
+ padding-top: core-functions-v3.fluidSize(20, 'mobile');
156
118
 
157
- :not(.image-icon-active, .lottie-animations *) {
158
- transform: rotate(0deg);
159
- transition: transform 0.3s ease;
160
- }
119
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
120
+ padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
121
+ padding-top: core-functions-v3.fluidSize(20, 'portrait');
122
+ }
161
123
 
162
- &-animation {
163
- height: core-functions-v3.fluidSize(20, 'static');
164
- margin: auto;
165
- position: relative;
166
- transition: transform 0.3s ease;
167
- width: core-functions-v3.fluidSize(20, 'static');
168
-
169
- &:before,
170
- &:after {
171
- background-color: red;
172
- content: '';
173
- position: absolute;
174
- transition: transform 0.25s ease-out;
124
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
125
+ padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
126
+ padding-top: core-functions-v3.fluidSize(20, 'desktop');
127
+ }
128
+
129
+ &:last-child {
130
+ padding-bottom: 0;
131
+ }
132
+ }
133
+
134
+ &-icon {
135
+ grid-area: icon;
136
+ background: var(--icon-background-color);
137
+ display: flex;
138
+ align-items: center;
139
+ height: core-functions-v3.fluidSize(50, 'static');
140
+ width: core-functions-v3.fluidSize(50, 'static');
141
+
142
+ &.active {
143
+ .accordion-v3-animation {
144
+ &:before {
145
+ transform: rotate(90deg);
146
+ }
147
+
148
+ &:after {
149
+ transform: rotate(180deg);
150
+ }
151
+ }
152
+ }
175
153
  }
176
154
 
177
- &:before {
178
- height: 100%;
179
- left: 50%;
180
- margin-left: -1px;
181
- top: 0;
182
- width: 2px;
155
+ .image-icon-active {
156
+ transform: rotate(var(--image-icon-rotation-deg));
157
+ transition: transform 0.3s ease;
183
158
  }
184
159
 
185
- &:after {
186
- height: 2px;
187
- left: 0;
188
- margin-top: -1px;
189
- top: 50%;
190
- width: 100%;
160
+ :not(.image-icon-active, .lottie-animations *) {
161
+ transform: rotate(0deg);
162
+ transition: transform 0.3s ease;
163
+ }
164
+
165
+ &-animation {
166
+ height: core-functions-v3.fluidSize(20, 'static');
167
+ margin: auto;
168
+ position: relative;
169
+ transition: transform 0.3s ease;
170
+ width: core-functions-v3.fluidSize(20, 'static');
171
+
172
+ &:before,
173
+ &:after {
174
+ background-color: red;
175
+ content: '';
176
+ position: absolute;
177
+ transition: transform 0.25s ease-out;
178
+ }
179
+
180
+ &:before {
181
+ height: 100%;
182
+ left: 50%;
183
+ margin-left: -1px;
184
+ top: 0;
185
+ width: 2px;
186
+ }
187
+
188
+ &:after {
189
+ height: 2px;
190
+ left: 0;
191
+ margin-top: -1px;
192
+ top: 50%;
193
+ width: 100%;
194
+ }
191
195
  }
192
196
  }
193
197
  }
package/components/block-back-to-top-button-v3/back-to-top-button-v3.scss CHANGED
@@ -1,67 +1,68 @@
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
+ .back-to-top-button {
6
+ position: relative;
7
+ width: 100%;
8
+ z-index: 50;
9
+ overflow: unset;
4
10
 
5
- .back-to-top-button {
6
- position: relative;
7
- width: 100%;
8
- z-index: 50;
9
- overflow: unset;
11
+ &__arrow {
12
+ --arrow-colour: black;
13
+ position: absolute;
14
+ border-style: solid;
15
+ border-color: var(--arrow-colour);
16
+ border-width: 0 2px 2px 0;
17
+ display: inline-block;
18
+ transform: rotate(-135deg);
19
+ height: 20%;
20
+ width: 20%;
21
+ }
10
22
 
11
- &__arrow {
12
- --arrow-colour: black;
13
- position: absolute;
14
- border-style: solid;
15
- border-color: var(--arrow-colour);
16
- border-width: 0 2px 2px 0;
17
- display: inline-block;
18
- transform: rotate(-135deg);
19
- height: 20%;
20
- width: 20%;
21
- }
23
+ &__button {
24
+ --bg-colour: white;
25
+ display: flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ position: fixed;
29
+ cursor: pointer;
30
+ height: core-functions-v3.fluidSize(50, 'static');
31
+ width: core-functions-v3.fluidSize(50, 'static');
32
+ border: none;
33
+ border-radius: 50px;
34
+ padding: core-functions-v3.fluidSize(18, 'static');
35
+ background-color: var(--bg-colour);
36
+ right: core-functions-v3.fluidSize(10, 'mobile');
37
+ border-radius: var(--button-border-radius);
22
38
 
23
- &__button {
24
- --bg-colour: white;
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
- position: fixed;
29
- cursor: pointer;
30
- height: core-functions-v3.fluidSize(50, 'static');
31
- width: core-functions-v3.fluidSize(50, 'static');
32
- border: none;
33
- border-radius: 50px;
34
- padding: core-functions-v3.fluidSize(18, 'static');
35
- background-color: var(--bg-colour);
36
- right: core-functions-v3.fluidSize(10, 'mobile');
37
- border-radius: var(--button-border-radius);
39
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
40
+ right: core-functions-v3.fluidSize(30, 'portrait');
41
+ }
38
42
 
39
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
40
- right: core-functions-v3.fluidSize(30, 'portrait');
41
- }
43
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
44
+ right: core-functions-v3.fluidSize(60, 'desktop');
45
+ }
42
46
 
43
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
44
- right: core-functions-v3.fluidSize(60, 'desktop');
45
- }
47
+ &--fixed {
48
+ position: fixed;
49
+ bottom: core-functions-v3.fluidSize(60, 'static');
50
+ }
46
51
 
47
- &--fixed {
48
- position: fixed;
49
- bottom: core-functions-v3.fluidSize(60, 'static');
50
- }
52
+ &--absolute {
53
+ position: absolute;
54
+ translate: 0 -50%;
55
+ }
51
56
 
52
- &--absolute {
53
- position: absolute;
54
- translate: 0 -50%;
57
+ .wp-admin & {
58
+ position: absolute;
59
+ translate: 0 0;
60
+ bottom: 0;
61
+ }
55
62
  }
56
63
 
57
- .wp-admin & {
58
- position: absolute;
59
- translate: 0 0;
60
- bottom: 0;
64
+ &__image {
65
+ width: core-functions-v3.fluidSize(var(--image-size), 'static');
61
66
  }
62
67
  }
63
-
64
- &__image {
65
- width: core-functions-v3.fluidSize(var(--image-size), 'static');
66
- }
67
68
  }
package/components/block-block-interactions-v3/block-interactions-v3.scss CHANGED
@@ -2,29 +2,31 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
4
 
5
- .block-interactions-v3 {
6
- &__block-close-button {
7
- cursor: pointer;
8
- border: unset;
9
- background: unset;
10
- }
11
- &__popup-trigger {
12
- appearance: none;
13
- border: unset;
14
- background-color: unset;
15
- display: flex;
16
- cursor: pointer;
17
- }
18
- svg {
19
- width: core-functions-v3.fluidSize(30, 'mobile');
20
- height: core-functions-v3.fluidSize(30, 'mobile');
21
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
22
- width: core-functions-v3.fluidSize(30, 'portrait');
23
- height: core-functions-v3.fluidSize(30, 'portrait');
5
+ @layer base-styles {
6
+ .block-interactions-v3 {
7
+ &__block-close-button {
8
+ cursor: pointer;
9
+ border: unset;
10
+ background: unset;
11
+ }
12
+ &__popup-trigger {
13
+ appearance: none;
14
+ border: unset;
15
+ background-color: unset;
16
+ display: flex;
17
+ cursor: pointer;
24
18
  }
25
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
26
- width: core-functions-v3.fluidSize(30, 'desktop');
27
- height: core-functions-v3.fluidSize(30, 'desktop');
19
+ svg {
20
+ width: core-functions-v3.fluidSize(30, 'mobile');
21
+ height: core-functions-v3.fluidSize(30, 'mobile');
22
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
23
+ width: core-functions-v3.fluidSize(30, 'portrait');
24
+ height: core-functions-v3.fluidSize(30, 'portrait');
25
+ }
26
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
27
+ width: core-functions-v3.fluidSize(30, 'desktop');
28
+ height: core-functions-v3.fluidSize(30, 'desktop');
29
+ }
28
30
  }
29
31
  }
30
32
  }
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {getSwiperAssetsV2} from '@total_onion/onion-utils/onion-utils.mjs';
2
2
  import {Navigation, Pagination, Autoplay, EffectFade} from 'swiper/modules';
3
3
  // import Swiper and modules styles
4
- // import 'swiper/css/bundle';
4
+ import 'swiper/css/bundle';
5
5
  // import 'swiper/css/navigation';
6
6
  // import 'swiper/css/pagination';
7
7
 
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../component-element-positioning-v3/element-positioning-v3';
4
4
  @use '../../breakpoints';
5
- @use 'NodeModules/swiper/swiper-bundle.min.css';
5
+ // @use 'NodeModules/swiper/swiper-bundle.min.css';
6
6
 
7
7
  .carousel-multi-layout-v3 {
8
8
  display: grid;