Skip to content

Commit cf40c2a

Browse files
renemadsenrenemadsen
authored
Merge pull request #137 from Gid733/master
SCSS Issue fix
2 parents 192e176 + fad0e96 commit cf40c2a

File tree

11 files changed

+473
-2
lines changed

11 files changed

+473
-2
lines changed

‎eform-client/src/scss/libs/_index.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '~@ngx-gallery/core/styles/scss/gallery';
2-
@import '~@ngx-gallery/core/styles/scss/lightbox';
31
@import "pell/pell";
42
@import "md-checkbox/md-checkbox";
53
@import "md-radio/md-radio";

‎eform-client/src/scss/libs/ngx-gallery/lib/core.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
gallery {
2+
position: relative;
3+
z-index: 1;
4+
overflow: hidden;
5+
display: block;
6+
height: 500px;
7+
background-color: black;
8+
* {
9+
box-sizing: border-box;
10+
}
11+
}
12+
13+
gallery, gallery-core {
14+
position: relative;
15+
overflow: hidden;
16+
}
17+
18+
gallery-core, .g-box, .g-slider {
19+
display: flex;
20+
height: 100%;
21+
width: 100%;
22+
}
23+
24+
gallery[fluid] {
25+
transform: translateX(-50vw);
26+
width: 100vw;
27+
left: 50%;
28+
&[fluid='false'] {
29+
transform: none;
30+
width: initial;
31+
left: initial;
32+
}
33+
}
34+
35+
.g-no-transition {
36+
transition: unset !important;
37+
}
38+
39+
.g-box, gallery-slider {
40+
overflow: hidden;
41+
position: relative;
42+
display: flex;
43+
flex-direction: column;
44+
flex: 1;
45+
order: 1;
46+
height: 100%;
47+
}
48+
49+
gallery-nav, .g-btn-close {
50+
svg {
51+
width: 100%;
52+
height: 100%;
53+
filter: drop-shadow(0px 0px 1px black);
54+
transition: opacity linear 0.2s;
55+
opacity: 0.6;
56+
&:hover {
57+
opacity: 1;
58+
}
59+
}
60+
}

‎eform-client/src/scss/libs/ngx-gallery/lib/counter.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.g-counter {
2+
z-index: 50;
3+
position: absolute;
4+
left: 50%;
5+
transform: translateX(-50%) perspective(1px);
6+
bottom: 0;
7+
font-size: 10px;
8+
padding: 4px 10px;
9+
color: white;
10+
background-color: rgba(0, 0, 0, 0.5);
11+
border-top-left-radius: 4px;
12+
border-top-right-radius: 4px;
13+
}

‎eform-client/src/scss/libs/ngx-gallery/lib/dots.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
gallery-dots {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
position: absolute;
6+
left: 50%;
7+
transform: translateX(-50%);
8+
}
9+
10+
.g-dot {
11+
cursor: pointer;
12+
display: flex;
13+
justify-content: center;
14+
z-index: 20;
15+
}
16+
17+
.g-dot-active .g-dot-inner {
18+
opacity: 1;
19+
transform: scale(1.6);
20+
}
21+
22+
.g-dot-inner {
23+
background-color: white;
24+
margin: 20px 15px;
25+
opacity: 0.6;
26+
width: 10px;
27+
height: 5px;
28+
border-radius: 1px;
29+
box-shadow: 0 0 1px black;
30+
transition: all ease 0.2s;
31+
}
32+

‎eform-client/src/scss/libs/ngx-gallery/lib/gallery.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import 'dots';
2+
@import 'navigations';
3+
@import 'slider';
4+
@import 'thumbnails';
5+
@import 'counter';
6+
@import 'templates';
7+
@import 'core';

‎eform-client/src/scss/libs/ngx-gallery/lib/lightbox.scss‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
lightbox {
2+
position: relative;
3+
display: block;
4+
width: 1100px;
5+
height: 800px;
6+
max-width: 94vw;
7+
max-height: 90vh;
8+
9+
gallery {
10+
overflow: hidden;
11+
margin: 0;
12+
display: block;
13+
width: 100%;
14+
height: 100%;
15+
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
16+
0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
17+
}
18+
}
19+
20+
.g-backdrop {
21+
background-color: rgba(0, 0, 0, 0.9);
22+
}
23+
24+
@mixin fullscreen() {
25+
width: 100%;
26+
lightbox {
27+
max-width: unset;
28+
max-height: unset;
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
bottom: 0;
33+
right: 0;
34+
height: 100%;
35+
width: 100%;
36+
}
37+
}
38+
39+
.fullscreen {
40+
@include fullscreen();
41+
}
42+
43+
.g-overlay {
44+
margin: auto;
45+
46+
@media only screen and (max-width: 480px) {
47+
@include fullscreen();
48+
}
49+
}
50+
51+
// OVERLAY STYLE FROM 'https://github.com/angular/material2/blob/master/src/cdk/overlay/_overlay.scss'
52+
53+
$cdk-z-index-overlay-container: 1000;
54+
$cdk-z-index-overlay: 1000;
55+
$cdk-z-index-overlay-backdrop: 1000;
56+
57+
// Background color for all of the backdrops
58+
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
59+
60+
// Default backdrop animation is based on the Material Design swift-ease-out.
61+
$backdrop-animation-duration: 400ms !default;
62+
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
63+
64+
.cdk-overlay-container,
65+
.cdk-global-overlay-wrapper {
66+
// Disable events from being captured on the overlay container.
67+
pointer-events: none;
68+
69+
// The container should be the size of the viewport.
70+
top: 0;
71+
left: 0;
72+
height: 100%;
73+
width: 100%;
74+
}
75+
76+
// The overlay-container is an invisible element which contains all individual overlays.
77+
.cdk-overlay-container {
78+
position: fixed;
79+
z-index: $cdk-z-index-overlay-container;
80+
}
81+
82+
.cdk-global-overlay-wrapper {
83+
display: flex;
84+
position: absolute;
85+
z-index: $cdk-z-index-overlay;
86+
}
87+
88+
// A single overlay pane.
89+
.cdk-overlay-pane {
90+
position: absolute;
91+
pointer-events: auto;
92+
box-sizing: border-box;
93+
z-index: $cdk-z-index-overlay;
94+
}
95+
96+
.cdk-overlay-backdrop {
97+
position: absolute;
98+
top: 0;
99+
bottom: 0;
100+
left: 0;
101+
right: 0;
102+
103+
z-index: $cdk-z-index-overlay-backdrop;
104+
pointer-events: auto;
105+
-webkit-tap-highlight-color: transparent;
106+
transition: opacity $backdrop-animation-duration
107+
$backdrop-animation-timing-function;
108+
opacity: 0;
109+
110+
&.cdk-overlay-backdrop-showing {
111+
opacity: 0.48;
112+
}
113+
}
114+
115+
.cdk-overlay-dark-backdrop {
116+
background: $cdk-overlay-dark-backdrop-background;
117+
}
118+
119+
.cdk-overlay-transparent-backdrop {
120+
background: none;
121+
}
122+
123+
// Used when disabling global scrolling.
124+
.cdk-global-scrollblock {
125+
position: fixed;
126+
width: 100%;
127+
overflow-y: scroll;
128+
}
129+
130+
.g-btn-close {
131+
position: absolute;
132+
right: 0.9em;
133+
top: 0.9em;
134+
z-index: 60;
135+
cursor: pointer;
136+
width: 20px;
137+
height: 20px;
138+
@media only screen and (max-width: 480px) {
139+
right: 0.7em;
140+
top: 0.7em;
141+
}
142+
}
143+

‎eform-client/src/scss/libs/ngx-gallery/lib/navigations.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.g-nav-next, .g-nav-prev {
2+
position: absolute;
3+
top: 50%;
4+
width: 30px;
5+
height: 40px;
6+
cursor: pointer;
7+
z-index: 999;
8+
}
9+
10+
.g-nav-next {
11+
right: 0.5em;
12+
transform: translateY(-50%) perspective(1px);
13+
}
14+
15+
.g-nav-prev {
16+
left: 0.5em;
17+
transform: translateY(-50%) perspective(1px) scale(-1, -1); //invert icon horizontally
18+
}
19+
20+
@media only screen and (max-width: 480px) {
21+
.g-nav-next {
22+
right: 0.2em;
23+
}
24+
25+
.g-nav-prev {
26+
left: 0.2em;
27+
}
28+
}

‎eform-client/src/scss/libs/ngx-gallery/lib/slider.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.g-items-container {
2+
height: 100%;
3+
}
4+
5+
.g-slider {
6+
position: absolute;
7+
transition: transform 400ms cubic-bezier(0.5, 0, 0.5, 1);
8+
}
9+
10+
gallery-core[slidingDirection='horizontal'] {
11+
.g-slider {
12+
flex-direction: row;
13+
}
14+
}
15+
16+
gallery-core[slidingDirection='vertical'] {
17+
.g-slider {
18+
flex-direction: column;
19+
}
20+
}

‎eform-client/src/scss/libs/ngx-gallery/lib/templates.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
gallery[gallerize] {
2+
gallery-item {
3+
cursor: pointer;
4+
}
5+
}
6+
7+
gallery-item, gallery-thumb {
8+
position: relative;
9+
height: 100%;
10+
width: 100%;
11+
display: block;
12+
overflow: hidden;
13+
}
14+
15+
gallery-item {
16+
z-index: 10;
17+
video {
18+
position: absolute;
19+
width: 100%;
20+
height: 100%;
21+
}
22+
iframe {
23+
position: absolute;
24+
width: 100%;
25+
height: 100%;
26+
}
27+
}
28+
29+
gallery-thumb {
30+
opacity: 0.5;
31+
cursor: pointer;
32+
transition: opacity 300ms cubic-bezier(0.5, 0, 0.5, 1);
33+
&.g-active-thumb {
34+
opacity: 1;
35+
}
36+
}
37+
38+
.g-image-item {
39+
background-position: center center;
40+
background-repeat: no-repeat;
41+
background-size: cover;
42+
width: 100%;
43+
height: 100%;
44+
}
45+
46+
.g-template {
47+
position: absolute;
48+
z-index: 10;
49+
left: 0;
50+
top: 0;
51+
right: 0;
52+
bottom: 0;
53+
color: white;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
}
58+
59+
.g-loading {
60+
position: absolute;
61+
transform: translate3d(-50%, -50%, 0);
62+
left: 50%;
63+
top: 50%;
64+
width: 80px;
65+
height: 80px;
66+
}
67+
68+
gallery[imageSize='contain'] gallery-slider .g-image-item {
69+
background-size: contain;
70+
}

0 commit comments

Comments
 (0)