@total_onion/onion-library 1.0.82 → 1.0.84
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.
- package/components/block-post-info-v3/post-info-v3.scss +16 -17
- package/components/block-section-separator-v3/section-separator-v3.scss +11 -9
- package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss +0 -2
- package/components/block-standard-content-v3/standard-content-v3.scss +0 -1
- package/components/block-sub-group-container-v3/sub-group-container-v3.scss +6 -12
- package/components/component-animations-v3/animations-v3.scss +117 -0
- package/components/component-content-container-settings-v3/content-container-settings-v3.scss +13 -13
- package/components/component-element-positioning-v3/element-positioning-v3.scss +2 -3
- package/components/component-grid-layout-container-v3/grid-layout-container-v3.scss +5 -5
- package/components/component-grid-layout-element-v3/grid-layout-element-v3.scss +25 -0
- package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig +4 -1
- package/components/component-text-editor-settings-v3/group_687a4e2334e37.json +26 -11
- package/components/fields-animations-v3/animations-v3.scss +121 -0
- package/components/fields-core-critical-v3/core-critical-v3.scss +5 -5
- package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss +20 -86
- package/components/fields-core-mixins-v3/core-mixins-v3.scss +1563 -1759
- package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss +988 -0
- package/components/fields-core-typography-v3/core-typography-v3.php +53 -53
- package/components/fields-core-typography-v3/core-typography-v3.scss +445 -166
- package/package.json +1 -1
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
|
|
2
|
+
// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
|
|
3
|
+
@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
|
|
4
|
+
// @use 'Assets/scss/theme/breakpoints';
|
|
5
|
+
|
|
6
|
+
@mixin animations() {
|
|
7
|
+
.cmpl-block-animations {
|
|
8
|
+
--slide-distance-default: 50;
|
|
9
|
+
@keyframes rotate {
|
|
10
|
+
from {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
rotate: 0deg;
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
rotate: 360deg;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@keyframes fade-in {
|
|
20
|
+
from {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
100% {
|
|
24
|
+
opacity: 1;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
@keyframes fade-in-left {
|
|
28
|
+
from {
|
|
29
|
+
transform: translateX(
|
|
30
|
+
calc(
|
|
31
|
+
core-functions.fluidSize(
|
|
32
|
+
calc(
|
|
33
|
+
var(
|
|
34
|
+
--slide-distance,
|
|
35
|
+
var(--slide-distance-default)
|
|
36
|
+
) *
|
|
37
|
+
-1
|
|
38
|
+
)
|
|
39
|
+
)
|
|
40
|
+
)
|
|
41
|
+
);
|
|
42
|
+
opacity: 0;
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
transform: translateX(0%);
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@keyframes fade-in-right {
|
|
50
|
+
from {
|
|
51
|
+
transform: translateX(
|
|
52
|
+
calc(
|
|
53
|
+
core-functions.fluidSize(
|
|
54
|
+
var(--slide-distance, var(--slide-distance-default))
|
|
55
|
+
)
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
opacity: 0;
|
|
59
|
+
}
|
|
60
|
+
100% {
|
|
61
|
+
transform: translateX(0%);
|
|
62
|
+
opacity: 1;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
@keyframes fade-in-up {
|
|
66
|
+
from {
|
|
67
|
+
transform: translateY(
|
|
68
|
+
calc(
|
|
69
|
+
core-functions.fluidSize(
|
|
70
|
+
var(--slide-distance, var(--slide-distance-default))
|
|
71
|
+
)
|
|
72
|
+
)
|
|
73
|
+
);
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
|
76
|
+
100% {
|
|
77
|
+
transform: translateY(0%);
|
|
78
|
+
opacity: 1;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@keyframes fade-in-down {
|
|
82
|
+
from {
|
|
83
|
+
transform: translateY(
|
|
84
|
+
calc(
|
|
85
|
+
core-functions.fluidSize(
|
|
86
|
+
calc(
|
|
87
|
+
var(
|
|
88
|
+
--slide-distance,
|
|
89
|
+
var(--slide-distance-default)
|
|
90
|
+
) *
|
|
91
|
+
-1
|
|
92
|
+
)
|
|
93
|
+
)
|
|
94
|
+
)
|
|
95
|
+
);
|
|
96
|
+
opacity: 0;
|
|
97
|
+
}
|
|
98
|
+
100% {
|
|
99
|
+
transform: translateY(0%);
|
|
100
|
+
opacity: 1;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@keyframes scale-in {
|
|
104
|
+
from {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
scale: 0;
|
|
107
|
+
}
|
|
108
|
+
100% {
|
|
109
|
+
opacity: 1;
|
|
110
|
+
scale: 1;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.loaded {
|
|
115
|
+
animation: var(--animation-name) var(--animation-duration)
|
|
116
|
+
var(--animation-delay) var(--animation-easing)
|
|
117
|
+
var(--animation-repeat) var(--animation-fill-mode)
|
|
118
|
+
var(--animation-direction);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
|
|
2
|
-
@use 'Assets/scss/modules/library-modules/core-root-variables/core-root-variables';
|
|
3
|
-
@use 'Assets/scss/modules/library-modules/core-css-sizing-vars/core-css-sizing-vars';
|
|
4
|
-
@use 'Assets/scss/modules/library-modules/core-typography/core-typography';
|
|
5
|
-
@use 'Assets/scss/modules/library-modules/core-generic/core-generic';
|
|
6
|
-
@use 'Assets/scss/modules/library-modules/core-css-modules/core-css-modules';
|
|
2
|
+
@use 'Assets/scss/modules/library-modules/core-root-variables-v3/core-root-variables-v3';
|
|
3
|
+
@use 'Assets/scss/modules/library-modules/core-css-sizing-vars-v3/core-css-sizing-vars-v3';
|
|
4
|
+
@use 'Assets/scss/modules/library-modules/core-typography-v3/core-typography-v3';
|
|
5
|
+
@use 'Assets/scss/modules/library-modules/core-generic-v3/core-generic-v3';
|
|
6
|
+
@use 'Assets/scss/modules/library-modules/core-css-modules-v3/core-css-modules-v3';
|
|
@@ -1,162 +1,96 @@
|
|
|
1
1
|
// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
|
|
2
2
|
@use 'Assets/scss/theme/breakpoints';
|
|
3
|
-
@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
|
|
4
|
-
@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
|
|
5
|
-
|
|
6
|
-
// Do not edit this file directly as it is a library module and
|
|
7
|
-
// any changes will be overwritten by future updates.
|
|
3
|
+
@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
|
|
4
|
+
@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
|
|
8
5
|
|
|
9
6
|
body {
|
|
10
7
|
--screen-width: var(--screen-width-mobile);
|
|
11
8
|
--font-reference: var(--font-reference-mobile);
|
|
12
9
|
--design-reference: var(--mobile-design-reference);
|
|
13
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
10
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
14
11
|
--screen-width: var(--screen-width-portrait);
|
|
15
12
|
--font-reference: var(--font-reference-portrait);
|
|
16
13
|
--design-reference: var(--portrait-design-reference);
|
|
17
14
|
}
|
|
18
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
15
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
19
16
|
--screen-width: var(--screen-width-landscape);
|
|
20
17
|
--font-reference: var(--font-reference-landscape);
|
|
21
18
|
--design-reference: var(--landscape-design-reference);
|
|
22
19
|
}
|
|
23
|
-
@include core-mixins.device(breakpoints.$desktop) {
|
|
20
|
+
@include core-mixins-v3.device(breakpoints.$desktop) {
|
|
24
21
|
--screen-width: var(--screen-width-desktop);
|
|
25
22
|
--font-reference: var(--font-reference-desktop);
|
|
26
23
|
--design-reference: var(--desktop-design-reference);
|
|
27
24
|
}
|
|
28
|
-
@include core-mixins.device(breakpoints.$desktop-fullhd) {
|
|
25
|
+
@include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
|
|
29
26
|
--screen-width: var(--screen-width-fullhd);
|
|
30
27
|
--font-reference: var(--font-reference-fullhd);
|
|
31
28
|
--design-reference: var(--fullhd-design-reference);
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
body {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
//Global Inline Spacing
|
|
38
|
-
--global-inline-spacing: #{core-functions.fluidSize(
|
|
32
|
+
--global-inline-spacing: #{core-functions-v3.fluidSize(
|
|
39
33
|
var(--mobile-inline),
|
|
40
34
|
'mobile'
|
|
41
35
|
)};
|
|
42
36
|
|
|
43
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
44
|
-
--global-inline-spacing: #{core-functions.fluidSize(
|
|
37
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
38
|
+
--global-inline-spacing: #{core-functions-v3.fluidSize(
|
|
45
39
|
var(--portrait-inline),
|
|
46
40
|
'portrait'
|
|
47
41
|
)};
|
|
48
42
|
}
|
|
49
43
|
|
|
50
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
51
|
-
--global-inline-spacing: #{core-functions.fluidSize(
|
|
44
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
45
|
+
--global-inline-spacing: #{core-functions-v3.fluidSize(
|
|
52
46
|
var(--landscape-inline),
|
|
53
47
|
'landscape'
|
|
54
48
|
)};
|
|
55
49
|
}
|
|
56
50
|
|
|
57
|
-
@include core-mixins.device(breakpoints.$desktop) {
|
|
58
|
-
--global-inline-spacing: #{core-functions.fluidSize(
|
|
51
|
+
@include core-mixins-v3.device(breakpoints.$desktop) {
|
|
52
|
+
--global-inline-spacing: #{core-functions-v3.fluidSize(
|
|
59
53
|
var(--desktop-inline),
|
|
60
54
|
'desktop'
|
|
61
55
|
)};
|
|
62
56
|
}
|
|
63
57
|
}
|
|
64
|
-
body {
|
|
65
|
-
// Content box padding - inline - This setting is intentionally set to the global inline size.
|
|
66
|
-
// You can override it if you need it to be different (like in Chivas which has a stupid inline size)
|
|
67
|
-
--global-content-box-padding-inline: #{core-functions.fluidSize(
|
|
68
|
-
var(--mobile-inline),
|
|
69
|
-
'mobile'
|
|
70
|
-
)};
|
|
71
|
-
|
|
72
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
73
|
-
--global-content-box-padding-inline: #{core-functions.fluidSize(
|
|
74
|
-
var(--portrait-inline),
|
|
75
|
-
'portrait'
|
|
76
|
-
)};
|
|
77
|
-
}
|
|
78
58
|
|
|
79
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
80
|
-
--global-content-box-padding-inline: #{core-functions.fluidSize(
|
|
81
|
-
var(--landscape-inline),
|
|
82
|
-
'landscape'
|
|
83
|
-
)};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@include core-mixins.device(breakpoints.$desktop) {
|
|
87
|
-
--global-content-box-padding-inline: #{core-functions.fluidSize(
|
|
88
|
-
var(--desktop-inline),
|
|
89
|
-
'desktop'
|
|
90
|
-
)};
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
body {
|
|
94
|
-
//Content box padding - block
|
|
95
|
-
--global-content-box-padding-block: #{core-functions.fluidSize(
|
|
96
|
-
var(--mobile-inline),
|
|
97
|
-
'mobile'
|
|
98
|
-
)};
|
|
99
|
-
|
|
100
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
101
|
-
--global-content-box-padding-block: #{core-functions.fluidSize(
|
|
102
|
-
var(--portrait-inline),
|
|
103
|
-
'portrait'
|
|
104
|
-
)};
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
108
|
-
--global-content-box-padding-block: #{core-functions.fluidSize(
|
|
109
|
-
var(--landscape-inline),
|
|
110
|
-
'landscape'
|
|
111
|
-
)};
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
@include core-mixins.device(breakpoints.$desktop) {
|
|
115
|
-
--global-content-box-padding-block: #{core-functions.fluidSize(
|
|
116
|
-
var(--desktop-inline),
|
|
117
|
-
'desktop'
|
|
118
|
-
)};
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
59
|
body {
|
|
122
|
-
//Heading block Spacing
|
|
123
60
|
--heading-block-spacing: var(--heading-block-spacing-mobile);
|
|
124
61
|
|
|
125
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
62
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
126
63
|
--heading-block-spacing: var(--heading-block-spacing-portrait);
|
|
127
64
|
}
|
|
128
65
|
|
|
129
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
66
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
130
67
|
--heading-block-spacing: var(--heading-block-spacing-desktop);
|
|
131
68
|
}
|
|
132
69
|
}
|
|
133
70
|
body {
|
|
134
|
-
//Paragraph block spacing
|
|
135
71
|
--paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
|
|
136
72
|
|
|
137
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
73
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
138
74
|
--paragraph-block-spacing: var(--paragraph-block-spacing-portrait);
|
|
139
75
|
}
|
|
140
76
|
|
|
141
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
77
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
142
78
|
--paragraph-block-spacing: var(--paragraph-block-spacing-desktop);
|
|
143
79
|
}
|
|
144
80
|
}
|
|
145
81
|
body {
|
|
146
|
-
//List Item block spacing
|
|
147
82
|
--list-item-block-spacing: var(--list-item-block-spacing-mobile);
|
|
148
83
|
|
|
149
|
-
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
84
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
150
85
|
--list-item-block-spacing: var(--list-item-block-spacing-portrait);
|
|
151
86
|
}
|
|
152
87
|
|
|
153
|
-
@include core-mixins.device(breakpoints.$tabLandscape) {
|
|
88
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
154
89
|
--list-item-block-spacing: var(--list-item-block-spacing-desktop);
|
|
155
90
|
}
|
|
156
91
|
}
|
|
157
92
|
body {
|
|
158
|
-
|
|
159
|
-
--global-content-max-width: #{core-functions.fluidSize(
|
|
93
|
+
--global-content-max-width: #{core-functions-v3.fluidSize(
|
|
160
94
|
var(--global-content-max-width-setting),
|
|
161
95
|
'static'
|
|
162
96
|
)};
|