Skip to content

Commit 5031d55

Browse files
benjaminforrasbenjaminforras
committed
Updated UI
1 parent dfafb34 commit 5031d55

File tree

5 files changed

+346
-34
lines changed

5 files changed

+346
-34
lines changed

‎app/css/main.css

+303
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,306 @@ a:active,
3232
a:focus {
3333
outline: 0;
3434
}
35+
36+
37+
/**
38+
*
39+
* https://codepen.io/jczimm/pen/vEBpoL
40+
*
41+
**/
42+
43+
.showbox {
44+
position: absolute;
45+
top: 0;
46+
bottom: 0;
47+
left: 0;
48+
right: 0;
49+
padding: 5%;
50+
}
51+
52+
.loader {
53+
position: relative;
54+
margin: 0 auto;
55+
width: 100px;
56+
}
57+
58+
.loader:before {
59+
content: '';
60+
display: block;
61+
padding-top: 100%;
62+
}
63+
64+
.circular {
65+
-webkit-animation: rotate 2s linear infinite;
66+
animation: rotate 2s linear infinite;
67+
height: 100%;
68+
-webkit-transform-origin: center center;
69+
transform-origin: center center;
70+
width: 100%;
71+
position: absolute;
72+
top: 0;
73+
bottom: 0;
74+
left: 0;
75+
right: 0;
76+
margin: auto;
77+
}
78+
79+
.path {
80+
stroke-dasharray: 1, 200;
81+
stroke-dashoffset: 0;
82+
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
83+
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
84+
stroke-linecap: round;
85+
}
86+
87+
@-webkit-keyframes rotate {
88+
100% {
89+
-webkit-transform: rotate(360deg);
90+
transform: rotate(360deg);
91+
}
92+
}
93+
94+
@keyframes rotate {
95+
100% {
96+
-webkit-transform: rotate(360deg);
97+
transform: rotate(360deg);
98+
}
99+
}
100+
101+
@-webkit-keyframes dash {
102+
0% {
103+
stroke-dasharray: 1, 200;
104+
stroke-dashoffset: 0;
105+
}
106+
50% {
107+
stroke-dasharray: 89, 200;
108+
stroke-dashoffset: -35px;
109+
}
110+
100% {
111+
stroke-dasharray: 89, 200;
112+
stroke-dashoffset: -124px;
113+
}
114+
}
115+
116+
@keyframes dash {
117+
0% {
118+
stroke-dasharray: 1, 200;
119+
stroke-dashoffset: 0;
120+
}
121+
50% {
122+
stroke-dasharray: 89, 200;
123+
stroke-dashoffset: -35px;
124+
}
125+
100% {
126+
stroke-dasharray: 89, 200;
127+
stroke-dashoffset: -124px;
128+
}
129+
}
130+
131+
@-webkit-keyframes color {
132+
100%,
133+
0% {
134+
stroke: #d62d20;
135+
}
136+
40% {
137+
stroke: #0057e7;
138+
}
139+
66% {
140+
stroke: #008744;
141+
}
142+
80%,
143+
90% {
144+
stroke: #ffa700;
145+
}
146+
}
147+
148+
@keyframes color {
149+
100%,
150+
0% {
151+
stroke: #d62d20;
152+
}
153+
40% {
154+
stroke: #0057e7;
155+
}
156+
66% {
157+
stroke: #008744;
158+
}
159+
80%,
160+
90% {
161+
stroke: #ffa700;
162+
}
163+
}
164+
165+
166+
/**
167+
*
168+
* From bootstrap-material-design
169+
* https://github.com/FezVrasta/bootstrap-material-design
170+
*
171+
**/
172+
173+
.card {
174+
font-size: .875rem;
175+
font-weight: 400;
176+
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
177+
}
178+
179+
.card-block {
180+
padding: 1.25rem
181+
}
182+
183+
.card-block:after {
184+
content: "";
185+
display: table;
186+
clear: both
187+
}
188+
189+
.card-title {
190+
margin-bottom: .75rem
191+
}
192+
193+
.card-subtitle {
194+
margin-top: -.375rem
195+
}
196+
197+
.card-subtitle,
198+
.card-text:last-child {
199+
margin-bottom: 0
200+
}
201+
202+
.card-link:hover {
203+
text-decoration: none
204+
}
205+
206+
.card-link+.card-link {
207+
margin-left: 1.25rem
208+
}
209+
210+
.card-header {
211+
padding: .75rem 1.25rem;
212+
background-color: #fff;
213+
border-bottom: 1px solid rgba(0, 0, 0, .12)
214+
}
215+
216+
.card-header:after {
217+
content: "";
218+
display: table;
219+
clear: both
220+
}
221+
222+
.card-header:first-child {
223+
border-radius: .125rem .125rem 0 0
224+
}
225+
226+
.card-footer {
227+
padding: .75rem 1.25rem;
228+
background-color: #fff;
229+
border-top: 1px solid rgba(0, 0, 0, .12)
230+
}
231+
232+
.card-footer:after {
233+
content: "";
234+
display: table;
235+
clear: both
236+
}
237+
238+
.card-footer:last-child {
239+
border-radius: 0 0 .125rem .125rem
240+
}
241+
242+
.card-header-tabs {
243+
margin-bottom: -.75rem;
244+
border-bottom: 0
245+
}
246+
247+
.card-header-pills,
248+
.card-header-tabs {
249+
margin-right: -.625rem;
250+
margin-left: -.625rem
251+
}
252+
253+
.card-inverse .card-footer,
254+
.card-inverse .card-header {
255+
border-color: hsla(0, 0%, 100%, .2)
256+
}
257+
258+
.card-inverse .card-blockquote,
259+
.card-inverse .card-footer,
260+
.card-inverse .card-header,
261+
.card-inverse .card-title {
262+
color: #fff
263+
}
264+
265+
.card-inverse .card-blockquote .blockquote-footer,
266+
.card-inverse .card-link,
267+
.card-inverse .card-subtitle,
268+
.card-inverse .card-text {
269+
color: hsla(0, 0%, 100%, .65)
270+
}
271+
272+
.card-inverse .card-link:focus,
273+
.card-inverse .card-link:hover {
274+
color: #fff
275+
}
276+
277+
.card-blockquote {
278+
padding: 0;
279+
margin-bottom: 0;
280+
border-left: 0
281+
}
282+
283+
.card-img {
284+
border-radius: .25rem
285+
}
286+
287+
.card-img-overlay {
288+
position: absolute;
289+
top: 0;
290+
right: 0;
291+
bottom: 0;
292+
left: 0;
293+
padding: 1.25rem
294+
}
295+
296+
.card-img-top {
297+
border-top-right-radius: .125rem;
298+
border-top-left-radius: .125rem
299+
}
300+
301+
.card-img-bottom {
302+
border-bottom-right-radius: .125rem;
303+
border-bottom-left-radius: .125rem
304+
}
305+
306+
.card .card-header {
307+
padding: 1rem
308+
}
309+
310+
.card .card-block {
311+
padding: 1.5rem 1rem 1rem
312+
}
313+
314+
.card h1.card-title,
315+
.card h2.card-title,
316+
.card h3.card-title,
317+
.card h4.card-title,
318+
.card h5.card-title,
319+
.card h6.card-title {
320+
font-size: 1.5rem;
321+
font-weight: 300
322+
}
323+
324+
.card .bmd-card-actions,
325+
.card .card-footer {
326+
padding: .5rem
327+
}
328+
329+
.card.bmd-card-raised {
330+
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
331+
}
332+
333+
@media (min-width:992px) {
334+
.card.bmd-card-flat {
335+
box-shadow: none
336+
}
337+
}

‎app/css/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)