Skip to content

Commit f96acc0

Browse files
mkaminsky11mkaminsky11
committed
visual fixes, bug fixes, move to object-based
1 parent 5e1a998 commit f96acc0

11 files changed

Lines changed: 239 additions & 1329 deletions

File tree

‎css/material.css‎

Lines changed: 0 additions & 335 deletions
Original file line numberDiff line numberDiff line change
@@ -1,338 +1,3 @@
1-
.paper-checkbox{
2-
line-height: normal;
3-
box-sizing: border-box;
4-
padding: 0;
5-
}
6-
7-
/* Remove default checkbox */
8-
.paper-checkbox {
9-
display: none;
10-
}
11-
12-
.paper-checkbox + .paper-label {
13-
font-family: 'Roboto';
14-
color: white;
15-
margin-left: 10px;
16-
position: relative;
17-
padding-left: 35px;
18-
cursor: pointer;
19-
display: inline-block;
20-
height: 25px;
21-
line-height: 25px;
22-
font-size: 1rem;
23-
-webkit-user-select: none;
24-
/* webkit (safari, chrome) browsers */
25-
-moz-user-select: none;
26-
/* mozilla browsers */
27-
-khtml-user-select: none;
28-
/* webkit (konqueror) browsers */
29-
-ms-user-select: none;
30-
/* IE10+ */
31-
}
32-
33-
/* checkbox aspect */
34-
.paper-checkbox + .paper-label:before {
35-
content: '';
36-
position: absolute;
37-
margin-top: 2px;
38-
left: 0;
39-
z-index: 0;
40-
-webkit-border-radius: 1px;
41-
-moz-border-radius: 1px;
42-
border-radius: 1px;
43-
background-clip: padding-box;
44-
-webkit-transition: 0.2s;
45-
-moz-transition: 0.2s;
46-
-o-transition: 0.2s;
47-
-ms-transition: 0.2s;
48-
transition: 0.2s;
49-
}
50-
51-
/* Unchecked styles */
52-
.paper-checkbox:not(:checked) + .paper-label:before {
53-
top: 0px;
54-
width: 18px;
55-
height: 18px;
56-
border: 2px solid #5a5a5a;
57-
}
58-
59-
/* Checked styles */
60-
.paper-checkbox:checked + .paper-label:before {
61-
left: -3px;
62-
top: -4px;
63-
width: 12px;
64-
height: 22px;
65-
border-top: 2px solid transparent;
66-
border-left: 2px solid transparent;
67-
border-right: 2px solid #E74C3C;
68-
border-bottom: 2px solid #E74C3C;
69-
-webkit-transform: rotateZ(40deg);
70-
-moz-transform: rotateZ(40deg);
71-
-ms-transform: rotateZ(40deg);
72-
-o-transform: rotateZ(40deg);
73-
transform: rotateZ(40deg);
74-
-webkit-backface-visibility: hidden;
75-
-webkit-transform-origin: 100% 100%;
76-
-moz-transform-origin: 100% 100%;
77-
-ms-transform-origin: 100% 100%;
78-
-o-transform-origin: 100% 100%;
79-
transform-origin: 100% 100%;
80-
}
81-
82-
/* disabled checkbox */
83-
.paper-checkbox:disabled:not(:checked) + .paper-label:before {
84-
top: 0;
85-
left: 0;
86-
box-shadow: none;
87-
background-color: rgba(0, 0, 0, 0.26);
88-
width: 18px;
89-
height: 18px;
90-
border: 2px solid rgba(0, 0, 0, 0.26);
91-
-webkit-transform: rotateZ(0deg);
92-
-moz-transform: rotateZ(0deg);
93-
-ms-transform: rotateZ(0deg);
94-
-o-transform: rotateZ(0deg);
95-
transform: rotateZ(0deg);
96-
}
97-
98-
.paper-checkbox:disabled:checked + .paper-label:before {
99-
left: -3px;
100-
top: -4px;
101-
width: 12px;
102-
height: 22px;
103-
border-top: 2px solid transparent;
104-
border-left: 2px solid transparent;
105-
border-right: 2px solid rgba(0, 0, 0, 0.26);
106-
border-bottom: 2px solid rgba(0, 0, 0, 0.26);
107-
-webkit-transform: rotateZ(40deg);
108-
-moz-transform: rotateZ(40deg);
109-
-ms-transform: rotateZ(40deg);
110-
-o-transform: rotateZ(40deg);
111-
transform: rotateZ(40deg);
112-
-webkit-backface-visibility: hidden;
113-
-webkit-transform-origin: 100% 100%;
114-
-moz-transform-origin: 100% 100%;
115-
-ms-transform-origin: 100% 100%;
116-
-o-transform-origin: 100% 100%;
117-
transform-origin: 100% 100%;
118-
}
119-
120-
.paper-checkbox:disabled:checked + .paper-label {
121-
color: rgba(0, 0, 0, 0.26);
122-
}
123-
124-
.paper-checkbox:disabled:not(:checked) + .paper-label:hover:before {
125-
border-color: rgba(0, 0, 0, 0.26);
126-
}
127-
128-
.switch, .switch * {
129-
-webkit-user-select: none;
130-
-moz-user-select: none;
131-
-ms-user-select: none;
132-
}
133-
134-
.switch .paper-label {
135-
cursor: pointer;
136-
}
137-
138-
.switch .paper-label .paper-checkbox:first-child {
139-
opacity: 0;
140-
width: 0;
141-
height: 0;
142-
}
143-
144-
.switch .paper-label input.paper-checkbox:first-child:checked + .lever {
145-
background-color: #7bc5be;
146-
}
147-
148-
.switch .paper-label input.paper-checkbox:first-child:checked + .lever:after {
149-
background-color: #009587;
150-
}
151-
152-
.switch .paper-label .lever, .switch .paper-label input.paper-checkbox[disabled]:first-child + .lever {
153-
content: "";
154-
display: inline-block;
155-
width: 45px;
156-
height: 15px;
157-
background-color: #818181;
158-
border-radius: 15px;
159-
margin-right: 10px;
160-
transition: background 0.3s ease;
161-
vertical-align: middle;
162-
margin-left: 5px;
163-
}
164-
165-
.switch .paper-label .lever:after {
166-
content: "";
167-
display: inline-block;
168-
width: 20px;
169-
height: 20px;
170-
background-color: #F1F1F1;
171-
border-radius: 20px;
172-
position: relative;
173-
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
174-
left: -5px;
175-
top: -2px;
176-
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
177-
}
178-
179-
.switch .paper-label input.paper-checkbox[disabled]:first-child + .lever:after, .switch .paper-label input.paper-checkbox[disabled]:checked:first-child + .lever:after {
180-
background-color: #BDBDBD;
181-
}
182-
183-
input.paper-checkbox:first-child:checked ~ .lever:active:after {
184-
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
185-
}
186-
187-
input.paper-checkbox:first-child ~ .lever:active:after, input.paper-checkbox[disabled]:first-child ~ .lever:active:after {
188-
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
189-
}
190-
191-
.switch .paper-label input.paper-checkbox:first-child:checked + .lever:after {
192-
left: 30px;
193-
}
194-
195-
196-
.progress {
197-
position: relative;
198-
height: 4px;
199-
display: block;
200-
width: 100%;
201-
background-color: #acece6;
202-
-webkit-border-radius: 2px;
203-
-moz-border-radius: 2px;
204-
border-radius: 2px;
205-
background-clip: padding-box;
206-
margin: 0.5rem 0 1rem 0;
207-
overflow: hidden; }
208-
.progress .determinate {
209-
position: absolute;
210-
background-color: inherit;
211-
top: 0;
212-
bottom: 0;
213-
background-color: #26a69a;
214-
-webkit-transition: width 0.3s linear;
215-
-moz-transition: width 0.3s linear;
216-
-o-transition: width 0.3s linear;
217-
-ms-transition: width 0.3s linear;
218-
transition: width 0.3s linear; }
219-
.progress .indeterminate {
220-
background-color: #26a69a; }
221-
.progress .indeterminate:before {
222-
content: '';
223-
position: absolute;
224-
background-color: inherit;
225-
top: 0;
226-
left: 0;
227-
bottom: 0;
228-
will-change: left, right;
229-
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
230-
-moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
231-
-ms-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
232-
-o-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
233-
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
234-
.progress .indeterminate:after {
235-
content: '';
236-
position: absolute;
237-
background-color: inherit;
238-
top: 0;
239-
left: 0;
240-
bottom: 0;
241-
will-change: left, right;
242-
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
243-
-moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
244-
-ms-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
245-
-o-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
246-
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
247-
-webkit-animation-delay: 1.15s;
248-
-moz-animation-delay: 1.15s;
249-
-ms-animation-delay: 1.15s;
250-
-o-animation-delay: 1.15s;
251-
animation-delay: 1.15s; }
252-
253-
@-webkit-keyframes indeterminate {
254-
0% {
255-
left: -35%;
256-
right: 100%; }
257-
258-
60% {
259-
left: 100%;
260-
right: -90%; }
261-
262-
100% {
263-
left: 100%;
264-
right: -90%; } }
265-
266-
@-moz-keyframes indeterminate {
267-
0% {
268-
left: -35%;
269-
right: 100%; }
270-
271-
60% {
272-
left: 100%;
273-
right: -90%; }
274-
275-
100% {
276-
left: 100%;
277-
right: -90%; } }
278-
279-
@keyframes indeterminate {
280-
0% {
281-
left: -35%;
282-
right: 100%; }
283-
284-
60% {
285-
left: 100%;
286-
right: -90%; }
287-
288-
100% {
289-
left: 100%;
290-
right: -90%; } }
291-
292-
@-webkit-keyframes indeterminate-short {
293-
0% {
294-
left: -200%;
295-
right: 100%; }
296-
297-
60% {
298-
left: 107%;
299-
right: -8%; }
300-
301-
100% {
302-
left: 107%;
303-
right: -8%; } }
304-
305-
@-moz-keyframes indeterminate-short {
306-
0% {
307-
left: -200%;
308-
right: 100%; }
309-
310-
60% {
311-
left: 107%;
312-
right: -8%; }
313-
314-
100% {
315-
left: 107%;
316-
right: -8%; } }
317-
318-
@keyframes indeterminate-short {
319-
0% {
320-
left: -200%;
321-
right: 100%; }
322-
323-
60% {
324-
left: 107%;
325-
right: -8%; }
326-
327-
100% {
328-
left: 107%;
329-
right: -8%; } }
330-
331-
.progress{
332-
margin-top: 0px;
333-
margin-bottom: 0px;
334-
border-radius: 0px;
335-
}
3361

3372

3383
/*

0 commit comments

Comments
 (0)