forked from Alicunde/HTML
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
82 lines (82 loc) · 4.17 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* Layout */
.Selector {
/* Layout */
display: flex; flex-wrap:wrap;
/* Sizes */
padding: 20px;
}
.Selector input {
/* Layout */
position: relative; flex-grow: 1;
/* Reset */
outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none;
/* Sizes */
height:50px;border-radius: 4px; background-size: cover; min-width: 120px; margin: 0px 2px 4px;
}
/* Hidden */
.Selector input::after { content: attr(title); display: block;}
/* Label */
.Selector input::after {
/* Layout */
position: relative; cursor: pointer; display: block; background-color: rgba(50, 50, 50, 0.8);
/* Text */
text-align: center; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-size: 10px;
/* Sizes */
line-height:50px; border-radius: 4px;
}
/* Hover */
.Selector input:hover:after{ background: #333;}
.Selector input:checked:after{ letter-spacing:4px; background: #111;}
/* Animation */
.Selector input:after{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
/* Active */
.Selector input:checked:before {
/* Position */
position: absolute; right: -10px; top: -10px;
/* Layout */
z-index: 3; content: ""; display:block; box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
/* Background */
background: #fff; background-size: cover;
background-image: url("data:image/svg+xml;utf8,<svg enable-background='new 0 0 512 512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(139, 139, 255)' d='m437.019 74.98c-48.352-48.351-112.639-74.98-181.019-74.98-68.381 0-132.668 26.629-181.02 74.98-48.351 48.352-74.98 112.64-74.98 181.02s26.629 132.667 74.98 181.019c48.352 48.352 112.64 74.981 181.02 74.981s132.667-26.629 181.019-74.98c48.352-48.353 74.981-112.64 74.981-181.02s-26.629-132.667-74.981-181.02zm-58.713 120.093-143.065 143.066c-2.929 2.929-6.768 4.393-10.606 4.393-3.839 0-7.678-1.464-10.607-4.393l-80.334-80.333c-5.858-5.857-5.858-15.354 0-21.213 5.857-5.858 15.355-5.858 21.213 0l69.728 69.727 132.458-132.46c5.857-5.858 15.355-5.858 21.213 0s5.858 15.355 0 21.213z'/></svg>");
/* Sizes */
border-radius:15px; height: 30px; width: 30px;
}
/* Animation (animate.css) */
@-webkit-keyframes Selector {
from, 20%, 40%, 60%, 80%, to{
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes Selector {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}
to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.Selector input:checked:before {
-webkit-animation-name: Selector;
animation-name: Selector;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
*{ font-family: 'Open Sans', sans-serif; }