daysofcode/2019/70/day-76/day.css at master · w3dotdev/daysofcode · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* HEADER */
.header { border-bottom: 1px solid #ddd; margin-top: 3em; padding: 2em 0 0.5em 0; }
.title { color: #edf053; font-size: 3.5rem; }
.tagline { color: #999; float: right; font-size: 1.4rem; padding-top: 2.8rem; }
/* FOOTER */
.footer {
	height: 3em;
	width: 100%;
	line-height: 3;
	text-align: center;
	background: #8b09b3;
	position: absolute;
	color: #fff;
	left: 0;
	bottom: 0;
}
.footer--static { position: static; }
/*  */
.subtitle { margin: 2rem 0; }
/* PRODUCTS */
.products-list { display: flex; flex-direction: row; flex-flow: wrap row; margin: 1.5rem 0; }
.products-item { margin: 0 1%; width: 31%; }
/* PRODUCT */
.product { background: #fff; border-radius: 4px; padding: 10px; text-align: center; }
.product-image { border-radius: 4px; height: 100px; width: 100px; }
.product-description { color: #fff; padding: 1em; }
.product-name {
	border-bottom: 1px solid #999;
	color: #333;
	font-size: 1.4rem;
	padding-bottom: 0.2rem;
	text-transform: uppercase;
	text-align: center;
}
.product-price {
	background: #000;
	border-radius: 0 0 4px 4px;
  color: rgb(255, 255, 255);
  display: block;
  font-size: 1.4rem;
  padding: 4px 10px;
	text-align: center;
}
/* PRODUCT FORM */
.addToCart { text-align: center; }
.addToCart-label { color: #999; font-size: 1.2rem; }
.addToCart-input {
	background: #f1f1f1;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #000;
  font-size: 1.4rem;
  margin: 1rem auto;
  padding: 2px 4px;
  text-align: center;
  width: 50px;
}
/* BUTTON */
.submit {
	background: #ce24b7;
	border: 1px solid #660c50;
	border-radius: 4px;
  color: #fff;
  cursor: pointer;
	font-size: 1.2rem;
	padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
}
/* CART */
.shoppingCartForm { margin: 1.5rem 0; }
.shoppingCart { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; table-layout: fixed; width: 100%; }
.shoppingCart th { border: 1px solid #ddd; font-size: 1.3em; padding: 0.3em; text-transform: uppercase; width: 33.3%; }
.shoppingCart td { border: 1px solid #ddd; padding: 0.3em;	width: 33.3%; }
.shoppingCart tr:nth-child(even) { background: #fafafa; }
.shoppingCart td.pdelete { text-align: center; }
.pdelete a,
.pdelete a:hover { color: #c00; display: block; font-size: 2.5rem; text-align: center; text-decoration: none; }
.shoppingCart-actions { margin: 1.5rem 0; padding: 0; text-align: center; }
.shoppingCart-actions li { display: inline-block; margin-right: 1rem; }
/* CHECKOUT */
.pricing { margin: 1em 0; padding: 0.5em; }
.subTotal,
.shipping { margin: 1.5em 0; text-align: right; }
.subTotal span,
.shipping span { margin-left: 1em; }
.content > h1,
.checkoutOrderForm h2 { font-size: 2em; text-align: center; }
.pricing .subTotal,
.pricing .shipping { margin: 1em 0; }

.checkoutForm { margin: 1.5rem 0; }
.checkoutForm-grid { display: flex; flex-direction: row; flex-flow: wrap row; justify-content: space-between; }
.checkoutForm-gridItem { width: 48%; }
.checkoutForm-gridItem:first-child { margin-top: 2.3rem; }
.checkoutForm-fieldset { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1.4rem; padding: 1rem; }
.checkoutForm-legend { font-weight: bold; padding: 0.5rem; }
.checkoutForm div { margin-bottom: 1em; }
.checkoutForm-label { display: block; font-weight: bold; margin-bottom: 0.5rem; text-align: left; }
.checkoutForm-field { background: #fff; border: 1px solid #ddd; border-radius: 4px; height: 35px; margin-bottom: 10px; padding: 0.5rem; width: 100%; }
.checkoutForm-select { height: 35px; margin-bottom: 10px; width: 100%; }

.message { color: red; display: block; margin: 0.5em 0; }
/* ORDER */
.userDetails { margin: 1.5em 0; }
.userDetails > h2 { font-size: 2em; text-align: center; }

.userDetailsContent { border: 1px solid #ddd; border-radius: 6px; margin: 1.5em 0; overflow: hidden; padding: 1em; }
.userDetailsContent .detail { float: left; width: 46%; }
.userDetailsContent .detail.right { float: right; }
.userDetailsContent .detail > h2 { font-size: 1.6em; margin-bottom: 0.5em; text-align: center; }
.userDetailsContent ul { margin: 0 0 1em 0; padding: 0; }
.userDetailsContent li { border-bottom: 1px solid #ddd; display: block; margin-bottom: 0.5em; padding-bottom: 0.3em; }

.pagseguroForm { margin: 1.5rem 0; }