@total_onion/onion-library 3.0.38 → 3.0.40

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 (4) hide show
  1. package/components/component-block-padding-v3/block-padding-v3.scss +13 -13
  2. package/components/component-block-settings-v3/block-settings-v3.scss +13 -13
  3. package/onion-utils.mjs +70 -24
  4. package/package.json +1 -1
package/components/component-block-padding-v3/block-padding-v3.scss CHANGED
@@ -3,60 +3,60 @@
3
3
  @use '../../breakpoints';
4
4
 
5
5
  @mixin blockPadding() {
6
- @layer base-styles {
6
+ @layer components {
7
7
  .cmpl-block-padding {
8
8
  padding: calc(
9
9
  var(--global-inline-spacing) *
10
- var(--padding-block-multiplier-mobile-top)
10
+ var(--padding-block-multiplier-mobile-top, 0)
11
11
  )
12
12
  calc(
13
13
  var(--global-inline-spacing) *
14
- var(--padding-inline-multiplier-mobile-right)
14
+ var(--padding-inline-multiplier-mobile-right, 0)
15
15
  )
16
16
  calc(
17
17
  var(--global-inline-spacing) *
18
- var(--padding-block-multiplier-mobile-bottom)
18
+ var(--padding-block-multiplier-mobile-bottom, 0)
19
19
  )
20
20
  calc(
21
21
  var(--global-inline-spacing) *
22
- var(--padding-inline-multiplier-mobile-left)
22
+ var(--padding-inline-multiplier-mobile-left, 0)
23
23
  );
24
24
 
25
25
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
26
26
  padding: calc(
27
27
  var(--global-inline-spacing) *
28
- var(--padding-block-multiplier-portrait-top)
28
+ var(--padding-block-multiplier-portrait-top, 0)
29
29
  )
30
30
  calc(
31
31
  var(--global-inline-spacing) *
32
- var(--padding-inline-multiplier-portrait-right)
32
+ var(--padding-inline-multiplier-portrait-right, 0)
33
33
  )
34
34
  calc(
35
35
  var(--global-inline-spacing) *
36
- var(--padding-block-multiplier-portrait-bottom)
36
+ var(--padding-block-multiplier-portrait-bottom, 0)
37
37
  )
38
38
  calc(
39
39
  var(--global-inline-spacing) *
40
- var(--padding-inline-multiplier-portrait-left)
40
+ var(--padding-inline-multiplier-portrait-left, 0)
41
41
  );
42
42
  }
43
43
 
44
44
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
45
45
  padding: calc(
46
46
  var(--global-inline-spacing) *
47
- var(--padding-block-multiplier-desktop-top)
47
+ var(--padding-block-multiplier-desktop-top, 0)
48
48
  )
49
49
  calc(
50
50
  var(--global-inline-spacing) *
51
- var(--padding-inline-multiplier-desktop-right)
51
+ var(--padding-inline-multiplier-desktop-right, 0)
52
52
  )
53
53
  calc(
54
54
  var(--global-inline-spacing) *
55
- var(--padding-block-multiplier-desktop-bottom)
55
+ var(--padding-block-multiplier-desktop-bottom, 0)
56
56
  )
57
57
  calc(
58
58
  var(--global-inline-spacing) *
59
- var(--padding-inline-multiplier-desktop-left)
59
+ var(--padding-inline-multiplier-desktop-left, 0)
60
60
  );
61
61
  }
62
62
  }
package/components/component-block-settings-v3/block-settings-v3.scss CHANGED
@@ -6,38 +6,38 @@
6
6
  @layer components {
7
7
  .cmpl-block-settings {
8
8
  min-height: core-functions-v3.fluidSize(
9
- var(--block-min-height-mobile),
9
+ var(--block-min-height-mobile, 0),
10
10
  'mobile'
11
11
  );
12
12
  height: var(--block-height-mobile, auto);
13
13
  overflow: var(--block-overflow, hidden);
14
14
  border-radius: var(--block-border-radius);
15
15
  position: var(--block-position-type, relative);
16
- z-index: var(--block-z-index);
17
- top: var(--block-position-top);
18
- right: var(--block-position-right);
19
- bottom: var(--block-position-bottom);
20
- left: var(--block-position-left);
21
- background-color: var(--block-background-colour);
22
- pointer-events: var(--block-pointer-events);
23
- aspect-ratio: var(--block-aspect-ratio-mobile);
16
+ z-index: var(--block-z-index, 5);
17
+ top: var(--block-position-top, unset);
18
+ right: var(--block-position-right, unset);
19
+ bottom: var(--block-position-bottom, unset);
20
+ left: var(--block-position-left, unset);
21
+ background-color: var(--block-background-colour, transparent);
22
+ pointer-events: var(--block-pointer-events, all);
23
+ aspect-ratio: var(--block-aspect-ratio-mobile, unset);
24
24
  .wp-admin & {
25
25
  position: relative;
26
26
  }
27
27
 
28
28
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
29
29
  height: var(--block-height-portrait, auto);
30
- aspect-ratio: var(--block-aspect-ratio-portrait);
30
+ aspect-ratio: var(--block-aspect-ratio-portrait, unset);
31
31
  min-height: core-functions-v3.fluidSize(
32
- var(--block-min-height-portrait),
32
+ var(--block-min-height-portrait, 0),
33
33
  'portrait'
34
34
  );
35
35
  }
36
36
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
37
37
  height: var(--block-height-desktop, auto);
38
- aspect-ratio: var(--block-aspect-ratio);
38
+ aspect-ratio: var(--block-aspect-ratio, unset);
39
39
  min-height: core-functions-v3.fluidSize(
40
- var(--block-min-height-desktop),
40
+ var(--block-min-height-desktop, 0),
41
41
  'landscape'
42
42
  );
43
43
  }
package/onion-utils.mjs CHANGED
@@ -114,6 +114,64 @@ export function checkDevice() {
114
114
  try {
115
115
  const deviceAgent = navigator.userAgent.toLowerCase();
116
116
  const htmlElement = document.querySelector("html");
117
+
118
+ if (!htmlElement) return;
119
+
120
+ const platformRaw = navigator.platform?.toLowerCase() || "";
121
+ const isDesktop =
122
+ deviceAgent.includes("windows") ||
123
+ deviceAgent.includes("macintosh") ||
124
+ platformRaw.includes("win") ||
125
+ platformRaw.includes("mac");
126
+
127
+ function browserCheck() {
128
+ if (navigator.userAgent.search("MSIE") >= 0) {
129
+ htmlElement.classList.add("ie");
130
+ } else if (navigator.userAgent.search("Edge") >= 0) {
131
+ htmlElement.classList.add("edge-legacy");
132
+ } else if (navigator.userAgent.search("Chrome") >= 0) {
133
+ htmlElement.classList.add("chrome");
134
+ } else if (navigator.userAgent.search("Firefox") >= 0) {
135
+ htmlElement.classList.add("firefox");
136
+ } else if (
137
+ navigator.userAgent.search("Safari") >= 0 &&
138
+ navigator.userAgent.search("Chrome") < 0
139
+ ) {
140
+ htmlElement.classList.add("safari");
141
+ } else if (navigator.userAgent.search("Opera") >= 0) {
142
+ htmlElement.classList.add("opera");
143
+ }
144
+ }
145
+
146
+ if (isDesktop) {
147
+ // add platform classes (e.g. macintel, win32)
148
+ if (navigator.platform) {
149
+ let platform = navigator.platform.toLowerCase();
150
+ let platformArray = [platform];
151
+
152
+ if (platform.includes("-")) {
153
+ platformArray = platform.split("-");
154
+ }
155
+
156
+ if (platform.includes(" ")) {
157
+ platformArray = platform.split(" ");
158
+ }
159
+
160
+ htmlElement.classList.add(...platformArray);
161
+ }
162
+
163
+ if (deviceAgent.match(/(windows)/)) {
164
+ htmlElement.classList.add("windows");
165
+ }
166
+
167
+ if (deviceAgent.match(/(macintosh)/)) {
168
+ htmlElement.classList.add("mac");
169
+ }
170
+
171
+ browserCheck();
172
+ return;
173
+ }
174
+
117
175
  if (
118
176
  "ontouchstart" in globalThis &&
119
177
  window.screen.width * window.devicePixelRatio >= 2048 &&
@@ -121,52 +179,40 @@ export function checkDevice() {
121
179
  ) {
122
180
  htmlElement.classList.add("highResTabletPortrait");
123
181
  }
182
+
124
183
  if ("ontouchstart" in globalThis) {
125
184
  htmlElement.classList.add("touch");
126
185
  }
186
+
127
187
  if (navigator.connection) {
128
188
  htmlElement.classList.add(navigator.connection.effectiveType);
129
189
  }
190
+
130
191
  if (navigator.platform) {
131
192
  let platform = navigator.platform.toLowerCase();
132
193
  let platformArray = [platform];
133
- if (platform.search("-")) {
194
+
195
+ if (platform.includes("-")) {
134
196
  platformArray = platform.split("-");
135
197
  }
136
- if (platform.search(" ")) {
198
+
199
+ if (platform.includes(" ")) {
137
200
  platformArray = platform.split(" ");
138
201
  }
202
+
139
203
  htmlElement.classList.add(...platformArray);
140
204
  }
205
+
141
206
  if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
142
207
  htmlElement.classList.add("ios");
143
208
  htmlElement.classList.add("mobile");
144
209
  }
145
- if (deviceAgent.match(/(windows)/)) {
146
- htmlElement.classList.add("windows");
147
- }
148
- if (deviceAgent.match(/(macintosh)/)) {
149
- htmlElement.classList.add("mac");
150
- }
210
+
151
211
  if (deviceAgent.match(/(android)/)) {
152
212
  htmlElement.classList.add("android");
153
213
  }
154
- if (navigator.userAgent.search("MSIE") >= 0) {
155
- htmlElement.classList.add("ie");
156
- } else if (navigator.userAgent.search("Edge") >= 0) {
157
- htmlElement.classList.add("edge-legacy");
158
- } else if (navigator.userAgent.search("Chrome") >= 0) {
159
- htmlElement.classList.add("chrome");
160
- } else if (navigator.userAgent.search("Firefox") >= 0) {
161
- htmlElement.classList.add("firefox");
162
- } else if (
163
- navigator.userAgent.search("Safari") >= 0 &&
164
- navigator.userAgent.search("Chrome") < 0
165
- ) {
166
- htmlElement.classList.add("safari");
167
- } else if (navigator.userAgent.search("Opera") >= 0) {
168
- htmlElement.classList.add("opera");
169
- }
214
+
215
+ browserCheck();
170
216
  } catch (error) {
171
217
  console.error(error);
172
218
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "3.0.38",
3
+ "version": "3.0.40",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {