@total_onion/onion-library 3.0.31 → 3.0.33

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 (5) hide show
  1. package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss +6 -4
  2. package/components/block-standard-content-v3/standard-content-v3.scss +7 -5
  3. package/components/block-sub-group-container-v3/sub-group-container-v3.scss +19 -17
  4. package/components/block-video-content-v3/video-content-v3.scss +98 -94
  5. package/package.json +2 -2
package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss CHANGED
@@ -1,7 +1,9 @@
1
1
  @use '../component-responsive-image-v3/responsive-image-v3';
2
2
 
3
- .single-responsive-image-v3 {
4
- @include responsive-image-v3.responsiveImage();
5
- display: flex;
6
- align-items: stretch;
3
+ @layer base-styles {
4
+ .single-responsive-image-v3 {
5
+ @include responsive-image-v3.responsiveImage();
6
+ display: flex;
7
+ align-items: stretch;
8
+ }
7
9
  }
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -1,9 +1,11 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../component-content-box-v3/content-box-v3';
3
3
 
4
- .standard-content-v3 {
5
- display: grid;
6
- grid-template: 'main' / 1fr;
7
- @include core-mixins-v3.responsiveShowHide(grid);
8
- @include content-box-v3.contentBoxV3();
4
+ @layer base-styles {
5
+ .standard-content-v3 {
6
+ display: grid;
7
+ grid-template: 'main' / 1fr;
8
+ @include core-mixins-v3.responsiveShowHide(grid);
9
+ @include content-box-v3.contentBoxV3();
10
+ }
9
11
  }
package/components/block-sub-group-container-v3/sub-group-container-v3.scss CHANGED
@@ -2,24 +2,26 @@
2
2
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
3
3
  @use '../component-flex-layout-container-v3/flex-layout-container-v3';
4
4
 
5
- .sub-group-container-v3 {
6
- display: grid;
7
- grid-template: 'main' / 1fr;
8
- place-items: center;
9
- &__grid-container {
10
- grid-area: main;
11
- place-self: stretch;
12
- &.flex-layout-container {
13
- @include flex-layout-container-v3.flexLayoutContainer();
5
+ @layer base-styles {
6
+ .sub-group-container-v3 {
7
+ display: grid;
8
+ grid-template: 'main' / 1fr;
9
+ place-items: center;
10
+ &__grid-container {
11
+ grid-area: main;
12
+ place-self: stretch;
13
+ &.flex-layout-container {
14
+ @include flex-layout-container-v3.flexLayoutContainer();
15
+ }
16
+ &.grid-layout-container {
17
+ @include grid-layout-container-v3.gridLayoutContainer();
18
+ }
14
19
  }
15
- &.grid-layout-container {
16
- @include grid-layout-container-v3.gridLayoutContainer();
20
+ &__block-container {
21
+ z-index: 5;
22
+ pointer-events: none;
23
+ position: relative;
24
+ @include grid-layout-element-v3.gridLayoutElement();
17
25
  }
18
26
  }
19
- &__block-container {
20
- z-index: 5;
21
- pointer-events: none;
22
- position: relative;
23
- @include grid-layout-element-v3.gridLayoutElement();
24
- }
25
27
  }
package/components/block-video-content-v3/video-content-v3.scss CHANGED
@@ -1,119 +1,123 @@
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
- .video-content-v3 {
5
- display: grid;
6
- grid-template: 'main' / 1fr;
7
- // @include vc-styles.basic();
8
- &__video-container {
9
- display: grid;
10
- grid-template: 'video' / 1fr;
11
- grid-area: main;
12
- opacity: 0;
13
- pointer-events: none;
14
- height: 100%;
15
- width: 100%;
16
- background-color: black;
17
- transition: opacity 0.5s, background-color 1s;
18
- z-index: -1;
19
4
 
20
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
21
- object-fit: cover;
5
+ @layer base-styles {
6
+ .video-content-v3 {
7
+ display: grid;
8
+ grid-template: 'main' / 1fr;
9
+ // @include vc-styles.basic();
10
+ &__video-container {
11
+ display: grid;
12
+ grid-template: 'video' / 1fr;
22
13
  grid-area: main;
23
- }
24
-
25
- &.video-playing {
26
- pointer-events: all;
27
- opacity: 1;
28
- z-index: 10;
29
- }
14
+ opacity: 0;
15
+ pointer-events: none;
16
+ height: 100%;
17
+ width: 100%;
18
+ background-color: black;
19
+ transition: opacity 0.5s, background-color 1s;
20
+ z-index: -1;
30
21
 
31
- &.lock-video-aspect-to-image {
32
- iframe,
33
- video {
34
- position: absolute;
35
- inset: 0;
36
- width: 100%;
37
- height: 100%;
22
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
23
+ object-fit: cover;
24
+ grid-area: main;
38
25
  }
39
- }
40
26
 
41
- &.set-video-to-cover {
42
- iframe,
43
- video {
44
- object-fit: cover;
45
- object-position: center;
27
+ &.video-playing {
28
+ pointer-events: all;
29
+ opacity: 1;
30
+ z-index: 10;
46
31
  }
47
- }
48
32
 
49
- .loading-wrapper {
50
- position: absolute;
51
- left: 50%;
52
- top: 50%;
53
- transform: translate(-50%, -50%);
54
- width: core-functions-v3.fluidSize(84, 'static');
55
- height: core-functions-v3.fluidSize(84, 'static');
33
+ &.lock-video-aspect-to-image {
34
+ iframe,
35
+ video {
36
+ position: absolute;
37
+ inset: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ }
41
+ }
56
42
 
57
- --spinner-bg-colour: #ffffff54;
58
- --spinner-colour: white;
43
+ &.set-video-to-cover {
44
+ iframe,
45
+ video {
46
+ object-fit: cover;
47
+ object-position: center;
48
+ }
49
+ }
59
50
 
60
- &:before {
61
- content: '';
62
- top: 0;
63
- left: 0;
51
+ .loading-wrapper {
52
+ position: absolute;
53
+ left: 50%;
54
+ top: 50%;
55
+ transform: translate(-50%, -50%);
64
56
  width: core-functions-v3.fluidSize(84, 'static');
65
57
  height: core-functions-v3.fluidSize(84, 'static');
66
- position: absolute;
67
- border-radius: 50%;
68
- border-right: solid core-functions-v3.fluidSize(5, 'static')
69
- var(--spinner-bg-colour);
70
- border-left: solid core-functions-v3.fluidSize(5, 'static')
71
- var(--spinner-bg-colour);
72
- border-top: solid core-functions-v3.fluidSize(5, 'static')
73
- var(--spinner-bg-colour);
74
- border-bottom: solid core-functions-v3.fluidSize(5, 'static')
75
- var(--spinner-colour);
76
- animation: rotate 1s linear infinite;
58
+
59
+ --spinner-bg-colour: #ffffff54;
60
+ --spinner-colour: white;
61
+
62
+ &:before {
63
+ content: '';
64
+ top: 0;
65
+ left: 0;
66
+ width: core-functions-v3.fluidSize(84, 'static');
67
+ height: core-functions-v3.fluidSize(84, 'static');
68
+ position: absolute;
69
+ border-radius: 50%;
70
+ border-right: solid core-functions-v3.fluidSize(5, 'static')
71
+ var(--spinner-bg-colour);
72
+ border-left: solid core-functions-v3.fluidSize(5, 'static')
73
+ var(--spinner-bg-colour);
74
+ border-top: solid core-functions-v3.fluidSize(5, 'static')
75
+ var(--spinner-bg-colour);
76
+ border-bottom: solid
77
+ core-functions-v3.fluidSize(5, 'static')
78
+ var(--spinner-colour);
79
+ animation: rotate 1s linear infinite;
80
+ }
77
81
  }
78
82
  }
79
- }
80
83
 
81
- &__video-play-button {
82
- grid-area: main;
83
- place-self: center;
84
- // @include playButtonDefault();
85
- transform: scale(1);
86
- transition: transform 0.3s 0.5s;
84
+ &__video-play-button {
85
+ grid-area: main;
86
+ place-self: center;
87
+ // @include playButtonDefault();
88
+ transform: scale(1);
89
+ transition: transform 0.3s 0.5s;
87
90
 
88
- &.video-playing {
89
- transform: scale(0);
90
- transition: transform 0.5s;
91
- opacity: 0;
92
- pointer-events: none;
93
- max-height: 0px;
91
+ &.video-playing {
92
+ transform: scale(0);
93
+ transition: transform 0.5s;
94
+ opacity: 0;
95
+ pointer-events: none;
96
+ max-height: 0px;
97
+ }
94
98
  }
95
- }
96
-
97
- &__video-inner-container {
98
- grid-area: video;
99
- display: flex;
100
- width: 100%;
101
- position: relative;
102
99
 
103
- iframe {
104
- left: 0;
105
- top: 0;
100
+ &__video-inner-container {
101
+ grid-area: video;
102
+ display: flex;
106
103
  width: 100%;
107
- height: 100%;
104
+ position: relative;
105
+
106
+ iframe {
107
+ left: 0;
108
+ top: 0;
109
+ width: 100%;
110
+ height: 100%;
111
+ }
108
112
  }
109
- }
110
113
 
111
- &__video-player {
112
- height: auto;
113
- object-fit: contain;
114
- width: 100%;
115
- }
116
- &:has(.video-playing) {
117
- z-index: 99;
114
+ &__video-player {
115
+ height: auto;
116
+ object-fit: contain;
117
+ width: 100%;
118
+ }
119
+ &:has(.video-playing) {
120
+ z-index: 99;
121
+ }
118
122
  }
119
123
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "3.0.31",
3
+ "version": "3.0.33",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -19,7 +19,7 @@
19
19
  "homepage": "https://github.com/TotalOnion/onion-library#readme",
20
20
  "dependencies": {
21
21
  "@total_onion/onion-modalcontroller": "^1.1.3",
22
- "@total_onion/onion-videocontroller": "^1.2.4",
22
+ "@total_onion/onion-videocontroller": "^1.2.5",
23
23
  "lottie-web": "^5.13.0",
24
24
  "swiper": "^12.1.3"
25
25
  },