Skip to content
This repository was archived by the owner on Nov 10, 2022. It is now read-only.

Commit 9540d98

Browse files
ALPIXELMaikiALPIXELMaiki
committed
main folder
1 parent e444fd5 commit 9540d98

9 files changed

+1642
-2
lines changed

‎chuckcss/main/animations.less

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/*
2+
== ANIMATIONS ==
3+
*/
4+
5+
/* *****
6+
@name : ._loading-spin
7+
@description : animate loading buttons
8+
***** */
9+
._loading-spin(@duration:1s){
10+
animation-name: loading-spin;
11+
animation-duration: @duration;
12+
animation-timing-function: linear;
13+
transform-origin: 50% 50%;
14+
animation-iteration-count: infinite;
15+
}
16+
@keyframes loading-spin {
17+
from {
18+
._rotate(0deg)
19+
}
20+
to{
21+
._rotate(360deg)
22+
}
23+
}
24+
25+
/* *****
26+
@name : loaderDots
27+
@description : animate dots loader
28+
***** */
29+
@keyframes loaderDots {
30+
0%, 39%, 100% {
31+
opacity:0
32+
}
33+
40% {
34+
opacity:1
35+
}
36+
}
37+
38+
/* *****
39+
@name : loaderSpinner
40+
@description : animate spinner loader
41+
***** */
42+
@keyframes loaderSpinner {
43+
0% {
44+
._rotate(0deg)
45+
}
46+
100% {
47+
._rotate(360deg)
48+
}
49+
}
50+
51+
52+
/* *****
53+
@name : loaderCaterpillar
54+
@description : animate caterpillar loader
55+
***** */
56+
@keyframes loaderCaterpillar{
57+
0% {
58+
left: 100px;
59+
top:0
60+
}
61+
80% {
62+
left: 0;
63+
top:0
64+
}
65+
85% {
66+
left: 0;
67+
top: -20px;
68+
width: 20px;
69+
height: 20px
70+
}
71+
90% {
72+
width: 40px;
73+
height: 15px
74+
}
75+
95% {
76+
left: 100px;
77+
top: -20px;
78+
width: 20px;
79+
height: 20px
80+
}
81+
100% {
82+
left: 100px;
83+
top:0
84+
}
85+
}
86+
87+
/* *****
88+
@name : checkdio
89+
@description : animate radio & checkox inputs when checked
90+
***** */
91+
@keyframes checkdio {
92+
0% {
93+
opacity:.4;
94+
._scale(3)
95+
}
96+
10% {
97+
._scale(2.5)
98+
}
99+
90% {
100+
._scale(1)
101+
}
102+
100% {
103+
transform:none
104+
}
105+
}
106+
107+
/* *****
108+
@name : showLazyImg
109+
@description : Animate img and backstretch when elements are loaded with lozad
110+
***** */
111+
img[data-loaded="true"],
112+
[data-loaded="true"] img {
113+
animation-name: showLazyImg;
114+
animation-duration: 0.7s;
115+
animation-fill-mode: both;
116+
}
117+
@keyframes showLazyImg {
118+
from {
119+
opacity: 0;
120+
}
121+
to {
122+
opacity: 1;
123+
}
124+
}

‎chuckcss/main/base.less

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*
2+
== BASE : Define <html>, <body> and selection styles ==
3+
*/
4+
html {
5+
font-size:62.5%;
6+
font-size:~'calc(1em*0.625)';
7+
overflow-x: hidden;
8+
}
9+
10+
html,
11+
body {
12+
// Opened menu (phones) or opened modal
13+
&.opened-modal,
14+
&.opened-menu {
15+
overflow: hidden !important;
16+
}
17+
}
18+
19+
20+
// General body style
21+
body {
22+
._reset;
23+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
24+
color: @text-mc;
25+
overflow-x: hidden;
26+
box-sizing:border-box;
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
29+
30+
// Font-size && line-height for default screens (0px <= Screen <= 360px)
31+
font-size: @text-fs;
32+
line-height: @text-lh;
33+
34+
// Font-size && line-height for screens >= 359px
35+
._media-xs-up({
36+
font-size: @text-fs-s;
37+
line-height: @text-lh-s;
38+
});
39+
40+
// Font-size && line-height for screens >= 767px
41+
._media-s-up({
42+
font-size: @text-fs-m;
43+
line-height: @text-lh-m;
44+
});
45+
46+
// Font-size && line-height for screens >= 989px
47+
._media-m-up({
48+
font-size: @text-fs-l;
49+
line-height: @text-lh-l;
50+
});
51+
52+
// Font-size && line-height for screens >= 1199px
53+
._media-l-up({
54+
font-size: @text-fs-xl;
55+
line-height: @text-lh-xl;
56+
});
57+
58+
/* Box-sizing */
59+
*,
60+
*:before,
61+
*:after {
62+
box-sizing:border-box;
63+
}
64+
}
65+
66+
// Reset border, padding, margin
67+
div,dl,dd,dt,p,ul,li,ol {
68+
._reset;
69+
}
70+
li {
71+
list-style:none;
72+
}
73+
74+
/* define text selection */
75+
::-moz-selection {
76+
background: @text-mc;
77+
text-shadow: none;
78+
color:white;
79+
}
80+
::selection {
81+
background: @text-mc;
82+
text-shadow: none;
83+
color:white;
84+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy