@total_onion/onion-library 1.0.89 → 1.0.90

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 (9) hide show
  1. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss +3 -4
  2. package/components/block-group-container-v3/group-container-v3.scss +5 -5
  3. package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss +1 -1
  4. package/components/block-standard-content-v3/standard-content-v3-extra.scss +15 -13
  5. package/components/block-standard-content-v3/standard-content-v3.scss +1 -1
  6. package/components/block-sub-group-container-v3/sub-group-container-v3.scss +1 -1
  7. package/components/block-video-content-v3/video-content-v3.scss +1 -1
  8. package/components/component-responsive-image-v3/responsive-image-v3.scss +61 -0
  9. package/package.json +1 -1
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss CHANGED
@@ -1,7 +1,7 @@
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/modules/library-modules/core-mixins-v3/core-mixins-v3';
3
3
  @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
4
- @use 'Assets/scss/modules/library-modules/element-positioning/element-positioning';
4
+ @use 'Assets/scss/modules/library-modules/element-positioning-v3/element-positioning-v3';
5
5
  @use 'Assets/scss/theme/breakpoints';
6
6
  @use 'Assets/scss/blocks/carousel-multi-layout-v3/carousel-multi-layout-v3-extra';
7
7
 
@@ -113,7 +113,7 @@
113
113
  width: unset;
114
114
  }
115
115
  .swiper-pagination {
116
- @include element-positioning.elementPositioning();
116
+ @include element-positioning-v3.elementPositioning();
117
117
  }
118
118
 
119
119
  .swiper-pagination-bullet {
@@ -150,6 +150,5 @@
150
150
  display: var(--display-arrows-desktop);
151
151
  }
152
152
  }
153
-
154
- @include carousel-multi-layout-v3-extra.additionalStyles();
155
153
  }
154
+ @include carousel-multi-layout-v3-extra.additionalStyles();
package/components/block-group-container-v3/group-container-v3.scss CHANGED
@@ -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/grid-layout-element/grid-layout-element';
3
- @use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
2
+ @use 'Assets/scss/modules/library-modules/grid-layout-element-v3/grid-layout-element-v3';
3
+ @use 'Assets/scss/modules/library-modules/grid-layout-container-v3/grid-layout-container-v3';
4
4
  @use 'Assets/scss/blocks/group-container-v3/group-container-v3-extra';
5
5
 
6
6
  .group-container-v3 {
@@ -10,10 +10,10 @@
10
10
  &__grid-container {
11
11
  grid-area: main;
12
12
  place-self: stretch;
13
- @include grid-layout-container.gridLayoutContainer();
13
+ @include grid-layout-container-v3.gridLayoutContainer();
14
14
  }
15
15
  &__block-container {
16
- @include grid-layout-element.gridLayoutElement();
16
+ @include grid-layout-element-v3.gridLayoutElement();
17
17
  z-index: 5;
18
18
  pointer-events: none;
19
19
  position: relative;
@@ -31,5 +31,5 @@
31
31
  color: white;
32
32
  text-shadow: 1px 1px 1px blue;
33
33
  }
34
- @include group-container-v3-extra.additionalStyles();
35
34
  }
35
+ @include group-container-v3-extra.additionalStyles();
package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss CHANGED
@@ -3,5 +3,5 @@
3
3
 
4
4
  .single-responsive-image-v3 {
5
5
  @include responsive-image.responsiveImage();
6
- @include single-responsive-image-v3-extra.additionalStyles();
7
6
  }
7
+ @include single-responsive-image-v3-extra.additionalStyles();
package/components/block-standard-content-v3/standard-content-v3-extra.scss CHANGED
@@ -5,17 +5,19 @@
5
5
  // @use 'Assets/scss/theme/animations';
6
6
 
7
7
  @mixin additionalStyles() {
8
- &:has(.standard-content-v2__cover-link.cover-link-hover-effect) {
9
- &:hover {
10
- .standard-content-v2__inner-container {
11
- * {
12
- color: red;
13
- }
14
- }
15
- }
16
- }
17
- &__cta-animation-style-1 {
18
- }
19
- &__wysiwyg-decoration-1 {
20
- }
8
+ // .standard-content-v3:has(
9
+ // .standard-content-v2__cover-link.cover-link-hover-effect
10
+ // ) {
11
+ // &:hover {
12
+ // .standard-content-v2__inner-container {
13
+ // * {
14
+ // color: red;
15
+ // }
16
+ // }
17
+ // }
18
+ // }
19
+ // &__cta-animation-style-1 {
20
+ // }
21
+ // &__wysiwyg-decoration-1 {
22
+ // }
21
23
  }
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -7,5 +7,5 @@
7
7
  grid-template: 'main' / 1fr;
8
8
  @include core-mixins-v3.responsiveShowHide(grid);
9
9
  @include content-container-v3.contentContainerV3();
10
- @include standard-content-v3-extra.additionalStyles();
11
10
  }
11
+ @include standard-content-v3-extra.additionalStyles();
package/components/block-sub-group-container-v3/sub-group-container-v3.scss CHANGED
@@ -16,5 +16,5 @@
16
16
  z-index: 5;
17
17
  @include grid-layout-element-v3.gridLayoutElement();
18
18
  }
19
- @include sub-group-container-v3-extra.additionalStyles();
20
19
  }
20
+ @include sub-group-container-v3-extra.additionalStyles();
package/components/block-video-content-v3/video-content-v3.scss CHANGED
@@ -7,5 +7,5 @@
7
7
  &:has(.video-playing) {
8
8
  z-index: 99;
9
9
  }
10
- @include video-content-v3-extra.additionalStyles();
11
10
  }
11
+ @include video-content-v3-extra.additionalStyles();
package/components/component-responsive-image-v3/responsive-image-v3.scss ADDED
@@ -0,0 +1,61 @@
1
+ @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ @use 'Assets/scss/theme/breakpoints';
4
+
5
+ @mixin responsiveImage() {
6
+ &__picture {
7
+ width: var(--image-width-mobile, 100%);
8
+ grid-area: var(--image-grid-area, main);
9
+ position: var(--image-position, relative);
10
+ inset: 0;
11
+ min-height: 100%;
12
+ display: flex;
13
+ z-index: var(--image-z-index);
14
+ border: core-functions.fluidSize(var(--image-border-width), 'static')
15
+ var(--image-border-style) var(--image-border-colour);
16
+ @include core-mixins.device(breakpoints.$tabPortrait) {
17
+ width: var(--image-width-portrait, 100%);
18
+ }
19
+ @include core-mixins.device(breakpoints.$tabLandscape) {
20
+ width: var(--image-width, 100%);
21
+ }
22
+ }
23
+
24
+ &__image {
25
+ object-fit: var(--image-fit-style, cover);
26
+ position: relative;
27
+ object-position: var(--image-object-position-align);
28
+ translate: var(--image-offset-horiz) var(--image-offset-vert);
29
+ opacity: var(--image-opacity, 1);
30
+ aspect-ratio: var(
31
+ --image-aspect-ratio-mobile,
32
+ var(--image-aspect-ratio-desktop)
33
+ );
34
+ border-radius: var(--image-border-radius);
35
+ min-height: calc(
36
+ var(--image-min-height-mobile) - calc(
37
+ var(--global-site-header-height, 0px) - var(
38
+ --cancel-header-height
39
+ )
40
+ )
41
+ );
42
+
43
+ @include core-mixins.device(breakpoints.$tabPortrait) {
44
+ aspect-ratio: var(--image-aspect-ratio-portrait);
45
+ }
46
+
47
+ @include core-mixins.device(breakpoints.$tabLandscape) {
48
+ aspect-ratio: var(--image-aspect-ratio-desktop);
49
+ min-height: calc(
50
+ var(--image-min-height-desktop) - calc(
51
+ var(--global-site-header-height, 0px) - var(
52
+ --cancel-header-height
53
+ )
54
+ )
55
+ );
56
+ // .wp-admin & {
57
+ // min-height: unset;
58
+ // }
59
+ }
60
+ }
61
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "1.0.89",
3
+ "version": "1.0.90",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {