Skip to content

Commit 785b8cf

Browse files
michalsnikmichalsnik
committed
Scope styles to screens only
1 parent 5d0dfc9 commit 785b8cf

File tree

1 file changed

+129
-127
lines changed

1 file changed

+129
-127
lines changed

‎src/sass/_animations.scss‎

Lines changed: 129 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,180 @@
11
// Animations variables
22
$aos-distance: 100px !default;
33

4-
html:not(.no-js) {
5-
/**
6-
* Fade animations:
7-
* fade
8-
* fade-up, fade-down, fade-left, fade-right
9-
* fade-up-right, fade-up-left, fade-down-right, fade-down-left
10-
*/
11-
12-
[data-aos^='fade'][data-aos^='fade'] {
13-
opacity: 0;
14-
transition-property: opacity, transform;
15-
16-
&.aos-animate {
17-
opacity: 1;
18-
transform: none;
4+
@media screen {
5+
html:not(.no-js) {
6+
/**
7+
* Fade animations:
8+
* fade
9+
* fade-up, fade-down, fade-left, fade-right
10+
* fade-up-right, fade-up-left, fade-down-right, fade-down-left
11+
*/
12+
13+
[data-aos^='fade'][data-aos^='fade'] {
14+
opacity: 0;
15+
transition-property: opacity, transform;
16+
17+
&.aos-animate {
18+
opacity: 1;
19+
transform: none;
20+
}
1921
}
20-
}
2122

22-
[data-aos='fade-up'] {
23-
transform: translate3d(0, $aos-distance, 0);
24-
}
23+
[data-aos='fade-up'] {
24+
transform: translate3d(0, $aos-distance, 0);
25+
}
2526

26-
[data-aos='fade-down'] {
27-
transform: translate3d(0, -$aos-distance, 0);
28-
}
27+
[data-aos='fade-down'] {
28+
transform: translate3d(0, -$aos-distance, 0);
29+
}
2930

30-
[data-aos='fade-right'] {
31-
transform: translate3d(-$aos-distance, 0, 0);
32-
}
31+
[data-aos='fade-right'] {
32+
transform: translate3d(-$aos-distance, 0, 0);
33+
}
3334

34-
[data-aos='fade-left'] {
35-
transform: translate3d($aos-distance, 0, 0);
36-
}
35+
[data-aos='fade-left'] {
36+
transform: translate3d($aos-distance, 0, 0);
37+
}
3738

38-
[data-aos='fade-up-right'] {
39-
transform: translate3d(-$aos-distance, $aos-distance, 0);
40-
}
39+
[data-aos='fade-up-right'] {
40+
transform: translate3d(-$aos-distance, $aos-distance, 0);
41+
}
4142

42-
[data-aos='fade-up-left'] {
43-
transform: translate3d($aos-distance, $aos-distance, 0);
44-
}
43+
[data-aos='fade-up-left'] {
44+
transform: translate3d($aos-distance, $aos-distance, 0);
45+
}
4546

46-
[data-aos='fade-down-right'] {
47-
transform: translate3d(-$aos-distance, -$aos-distance, 0);
48-
}
47+
[data-aos='fade-down-right'] {
48+
transform: translate3d(-$aos-distance, -$aos-distance, 0);
49+
}
4950

50-
[data-aos='fade-down-left'] {
51-
transform: translate3d($aos-distance, -$aos-distance, 0);
52-
}
51+
[data-aos='fade-down-left'] {
52+
transform: translate3d($aos-distance, -$aos-distance, 0);
53+
}
5354

5455

5556

5657

57-
/**
58-
* Zoom animations:
59-
* zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
60-
* zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
61-
*/
58+
/**
59+
* Zoom animations:
60+
* zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
61+
* zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
62+
*/
6263

63-
[data-aos^='zoom'][data-aos^='zoom'] {
64-
opacity: 0;
65-
transition-property: opacity, transform;
64+
[data-aos^='zoom'][data-aos^='zoom'] {
65+
opacity: 0;
66+
transition-property: opacity, transform;
6667

67-
&.aos-animate {
68-
opacity: 1;
69-
transform: translate3d(0, 0, 0) scale(1);
68+
&.aos-animate {
69+
opacity: 1;
70+
transform: translate3d(0, 0, 0) scale(1);
71+
}
7072
}
71-
}
7273

73-
[data-aos='zoom-in'] {
74-
transform: scale(.6);
75-
}
74+
[data-aos='zoom-in'] {
75+
transform: scale(.6);
76+
}
7677

77-
[data-aos='zoom-in-up'] {
78-
transform: translate3d(0, $aos-distance, 0) scale(.6);
79-
}
78+
[data-aos='zoom-in-up'] {
79+
transform: translate3d(0, $aos-distance, 0) scale(.6);
80+
}
8081

81-
[data-aos='zoom-in-down'] {
82-
transform: translate3d(0, -$aos-distance, 0) scale(.6);
83-
}
82+
[data-aos='zoom-in-down'] {
83+
transform: translate3d(0, -$aos-distance, 0) scale(.6);
84+
}
8485

85-
[data-aos='zoom-in-right'] {
86-
transform: translate3d(-$aos-distance, 0, 0) scale(.6);
87-
}
86+
[data-aos='zoom-in-right'] {
87+
transform: translate3d(-$aos-distance, 0, 0) scale(.6);
88+
}
8889

89-
[data-aos='zoom-in-left'] {
90-
transform: translate3d($aos-distance, 0, 0) scale(.6);
91-
}
90+
[data-aos='zoom-in-left'] {
91+
transform: translate3d($aos-distance, 0, 0) scale(.6);
92+
}
9293

93-
[data-aos='zoom-out'] {
94-
transform: scale(1.2);
95-
}
94+
[data-aos='zoom-out'] {
95+
transform: scale(1.2);
96+
}
9697

97-
[data-aos='zoom-out-up'] {
98-
transform: translate3d(0, $aos-distance, 0) scale(1.2);
99-
}
98+
[data-aos='zoom-out-up'] {
99+
transform: translate3d(0, $aos-distance, 0) scale(1.2);
100+
}
100101

101-
[data-aos='zoom-out-down'] {
102-
transform: translate3d(0, -$aos-distance, 0) scale(1.2);
103-
}
102+
[data-aos='zoom-out-down'] {
103+
transform: translate3d(0, -$aos-distance, 0) scale(1.2);
104+
}
104105

105-
[data-aos='zoom-out-right'] {
106-
transform: translate3d(-$aos-distance, 0, 0) scale(1.2);
107-
}
106+
[data-aos='zoom-out-right'] {
107+
transform: translate3d(-$aos-distance, 0, 0) scale(1.2);
108+
}
108109

109-
[data-aos='zoom-out-left'] {
110-
transform: translate3d($aos-distance, 0, 0) scale(1.2);
111-
}
110+
[data-aos='zoom-out-left'] {
111+
transform: translate3d($aos-distance, 0, 0) scale(1.2);
112+
}
112113

113114

114115

115116

116-
/**
117-
* Slide animations
118-
*/
117+
/**
118+
* Slide animations
119+
*/
119120

120-
[data-aos^='slide'][data-aos^='slide'] {
121-
transition-property: transform;
122-
visibility: hidden;
121+
[data-aos^='slide'][data-aos^='slide'] {
122+
transition-property: transform;
123+
visibility: hidden;
123124

124-
&.aos-animate {
125-
visibility: visible;
126-
transform: translate3d(0, 0, 0);
125+
&.aos-animate {
126+
visibility: visible;
127+
transform: translate3d(0, 0, 0);
128+
}
127129
}
128-
}
129130

130-
[data-aos='slide-up'] {
131-
transform: translate3d(0, 100%, 0);
132-
}
131+
[data-aos='slide-up'] {
132+
transform: translate3d(0, 100%, 0);
133+
}
133134

134-
[data-aos='slide-down'] {
135-
transform: translate3d(0, -100%, 0);
136-
}
135+
[data-aos='slide-down'] {
136+
transform: translate3d(0, -100%, 0);
137+
}
137138

138-
[data-aos='slide-right'] {
139-
transform: translate3d(-100%, 0, 0);
140-
}
139+
[data-aos='slide-right'] {
140+
transform: translate3d(-100%, 0, 0);
141+
}
141142

142-
[data-aos='slide-left'] {
143-
transform: translate3d(100%, 0, 0);
144-
}
143+
[data-aos='slide-left'] {
144+
transform: translate3d(100%, 0, 0);
145+
}
145146

146147

147148

148149

149-
/**
150-
* Flip animations:
151-
* flip-left, flip-right, flip-up, flip-down
152-
*/
150+
/**
151+
* Flip animations:
152+
* flip-left, flip-right, flip-up, flip-down
153+
*/
153154

154-
[data-aos^='flip'][data-aos^='flip'] {
155-
backface-visibility: hidden;
156-
transition-property: transform;
157-
}
155+
[data-aos^='flip'][data-aos^='flip'] {
156+
backface-visibility: hidden;
157+
transition-property: transform;
158+
}
158159

159-
[data-aos='flip-left'] {
160-
transform: perspective(2500px) rotateY(-100deg);
161-
&.aos-animate {transform: perspective(2500px) rotateY(0);}
162-
}
160+
[data-aos='flip-left'] {
161+
transform: perspective(2500px) rotateY(-100deg);
162+
&.aos-animate {transform: perspective(2500px) rotateY(0);}
163+
}
163164

164-
[data-aos='flip-right'] {
165-
transform: perspective(2500px) rotateY(100deg);
166-
&.aos-animate {transform: perspective(2500px) rotateY(0);}
167-
}
165+
[data-aos='flip-right'] {
166+
transform: perspective(2500px) rotateY(100deg);
167+
&.aos-animate {transform: perspective(2500px) rotateY(0);}
168+
}
168169

169-
[data-aos='flip-up'] {
170-
transform: perspective(2500px) rotateX(-100deg);
171-
&.aos-animate {transform: perspective(2500px) rotateX(0);}
172-
}
170+
[data-aos='flip-up'] {
171+
transform: perspective(2500px) rotateX(-100deg);
172+
&.aos-animate {transform: perspective(2500px) rotateX(0);}
173+
}
173174

174-
[data-aos='flip-down'] {
175-
transform: perspective(2500px) rotateX(100deg);
176-
&.aos-animate {transform: perspective(2500px) rotateX(0);}
175+
[data-aos='flip-down'] {
176+
transform: perspective(2500px) rotateX(100deg);
177+
&.aos-animate {transform: perspective(2500px) rotateX(0);}
178+
}
177179
}
178180
}

0 commit comments

Comments
 (0)