├── images ├── computer.png ├── products.svg ├── edit.svg ├── home.svg ├── delete.svg ├── admin.svg └── cart.svg ├── css ├── admin-home.css ├── product-listing.css ├── login.css ├── confirmation.css ├── product-form.css ├── catalog.css ├── details.css ├── cart.css └── styles.css ├── admin-home.html ├── login.html ├── detalhes.html ├── form.html ├── carrinho.html ├── confirmacao.html ├── catalogo.html └── listagem.html /images/computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsuperior/dscommerce-html-css/HEAD/images/computer.png -------------------------------------------------------------------------------- /css/admin-home.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #admin-home-section { 4 | padding: 20px 0; 5 | } 6 | -------------------------------------------------------------------------------- /css/product-listing.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #product-listing-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-product-listing-image { 8 | width: 69px; 9 | height: 69px; 10 | display: block; 11 | } 12 | 13 | .dsc-product-listing-btn { 14 | height: 20px; 15 | width: auto; 16 | cursor: pointer; 17 | margin: 5px; 18 | } 19 | -------------------------------------------------------------------------------- /css/login.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #login-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-login-form-container { 8 | width: 100%; 9 | max-width: 360px; 10 | margin: 0 auto; 11 | } 12 | 13 | .dsc-login-form-buttons { 14 | width: 100%; 15 | } 16 | 17 | @media (min-width: 576px) { 18 | #login-section { 19 | padding: 40px 0; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /css/confirmation.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #confirmation-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-confirmation-message { 8 | font-size: 16px; 9 | font-weight: 700; 10 | color: var(--dsc-color-font-primary); 11 | text-align: center; 12 | } 13 | 14 | @media (min-width: 576px) { 15 | .dsc-confirmation-message { 16 | font-size: 24px; 17 | text-align: left; 18 | } 19 | } -------------------------------------------------------------------------------- /images/products.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /css/product-form.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #product-form-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-product-form-container { 8 | width: 100%; 9 | max-width: 500px; 10 | margin: 0 auto; 11 | } 12 | 13 | .dsc-product-form-buttons { 14 | width: 100%; 15 | display: grid; 16 | grid-gap: 20px; 17 | grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); 18 | } 19 | 20 | @media (min-width: 576px) { 21 | #product-form-section { 22 | padding: 40px 0; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /images/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/catalog.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #catalog-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-catalog-cards { 8 | display: grid; 9 | grid-gap: 20px; 10 | grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); 11 | } 12 | 13 | .dsc-catalog-card-top { 14 | display: flex; 15 | justify-content: center; 16 | padding: 10px; 17 | } 18 | 19 | .dsc-catalog-card-top img { 20 | width: 150px; 21 | height: 150px; 22 | } 23 | 24 | .dsc-catalog-card-bottom { 25 | padding: 10px 20px; 26 | min-height: 110px; 27 | } 28 | 29 | .dsc-catalog-card-bottom h3 { 30 | color: var(--dsc-color-font-secondary); 31 | font-size: 20px; 32 | } 33 | 34 | .dsc-catalog-card-bottom h4 { 35 | color: var(--dsc-color-font-primary); 36 | font-size: 12px; 37 | } 38 | -------------------------------------------------------------------------------- /images/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/details.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #product-details-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-product-details-top { 8 | padding: 10px; 9 | display: flex; 10 | justify-content: center; 11 | } 12 | 13 | .dsc-product-details-top img { 14 | width: 220px; 15 | } 16 | 17 | .dsc-product-details-bottom { 18 | padding: 10px 20px; 19 | } 20 | 21 | .dsc-product-details-bottom h3 { 22 | color: var(--dsc-color-font-secondary); 23 | font-size: 20px; 24 | } 25 | 26 | .dsc-product-details-bottom h4 { 27 | color: var(--dsc-color-font-primary); 28 | font-size: 12px; 29 | } 30 | 31 | .dsc-product-details-bottom p { 32 | color: var(--dsc-color-font-primary); 33 | font-size: 12px; 34 | margin: 10px 0; 35 | } 36 | 37 | .dsc-category-container { 38 | display: flex; 39 | flex-wrap: wrap; 40 | } 41 | 42 | .dsc-category { 43 | padding: 0 20px; 44 | margin-right: 20px; 45 | margin-bottom: 10px; 46 | background-color: var(--dsc-color-bg-tertiary); 47 | border-radius: 4px; 48 | height: 30px; 49 | font-size: 12px; 50 | font-weight: 700; 51 | color: var(--dsc-color-font-tertiary); 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | } 56 | -------------------------------------------------------------------------------- /admin-home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 32 |
33 |
34 |
35 |

Bem-vindo à àrea administrativa

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /images/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/cart.css: -------------------------------------------------------------------------------- 1 | @import url("styles.css"); 2 | 3 | #cart-container-section { 4 | padding: 20px 0; 5 | } 6 | 7 | .dsc-cart-total-container { 8 | padding: 10px 20px; 9 | } 10 | 11 | .dsc-cart-total-container h3 { 12 | text-align: left; 13 | font-size: 16px; 14 | color: var(--dsc-color-font-secondary); 15 | } 16 | 17 | .dsc-cart-item-container { 18 | padding: 0 20px; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .dsc-cart-item-container img { 24 | width: 78px; 25 | height: 78px; 26 | } 27 | 28 | .dsc-cart-item-left { 29 | display: flex; 30 | } 31 | 32 | .dsc-cart-item-quantity-container { 33 | font-size: 16px; 34 | font-weight: 700; 35 | display: flex; 36 | } 37 | 38 | .dsc-cart-item-right { 39 | padding-bottom: 10px; 40 | font-size: 12px; 41 | font-weight: 700; 42 | color: var(--dsc-color-font-secondary); 43 | } 44 | 45 | .dsc-cart-item-description { 46 | padding: 10px 0; 47 | color: var(--dsc-color-font-primary); 48 | } 49 | 50 | .dsc-cart-item-description h3 { 51 | font-size: 12px; 52 | } 53 | 54 | .dsc-cart-item-quantity-btn { 55 | color: var(--dsc-color-btn-primary); 56 | cursor: pointer; 57 | } 58 | 59 | .dsc-cart-item-quantity-container p { 60 | margin: 0 5px; 61 | } 62 | 63 | @media (min-width: 576px) { 64 | .dsc-cart-item-container { 65 | flex-direction: row; 66 | justify-content: space-between; 67 | } 68 | 69 | .dsc-cart-item-right { 70 | padding-top: 10px; 71 | } 72 | 73 | .dsc-cart-total-container h3 { 74 | text-align: right; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 24 |
25 |
26 |
27 | 45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /images/admin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /detalhes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 24 |
25 |
26 |
27 |
28 |
29 | Computador 30 |
31 |
32 |

R$ 5000,00

33 |

Computador Gamer XT

34 |

35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 36 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 37 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 38 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 39 | reprehenderit in voluptate velit esse cillum dolore eu fugiat 40 | nulla pariatur. Excepteur sint occaecat cupidatat non proident, 41 | sunt in culpa qui officia deserunt mollit anim id est laborum. 42 |

43 |
44 |
45 | Eletrônicos 46 |
47 |
48 | Computadores 49 |
50 |
51 |
52 |
53 |
54 |
55 | Comprar 56 |
57 |
58 | Início 59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 32 |
33 |
34 |
35 |
36 |
37 |

Dados do produto

38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /carrinho.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 24 |
25 |
26 |
27 |
28 |
29 |
30 | Computador 31 |
32 |

Computador Gamer XT

33 |
34 |
-
35 |

1

36 |
+
37 |
38 |
39 |
40 |
41 | R$ 5000,00 42 |
43 |
44 |
45 |
46 | Computador 47 |
48 |

Computador Gamer XT

49 |
50 |
-
51 |

1

52 |
+
53 |
54 |
55 |
56 |
57 | R$ 5000,00 58 |
59 |
60 |
61 |

R$ 15000,00

62 |
63 |
64 |
65 |
66 | Finalizar pedido 67 |
68 |
69 | Continuar comprando 70 |
71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /confirmacao.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 | 13 |
14 | 31 |
32 |
33 |
34 |
35 |
36 |
37 | Computador 38 |
39 |

Computador Gamer XT

40 |
41 |

1

42 |
43 |
44 |
45 |
46 | R$ 5000,00 47 |
48 |
49 |
50 |
51 | Computador 52 |
53 |

Computador Gamer XT

54 |
55 |

1

56 |
57 |
58 |
59 |
60 | R$ 5000,00 61 |
62 |
63 |
64 |

R$ 15000,00

65 |
66 |
67 |
68 | Pedido realizado! Número 35 69 |
70 |
71 |
72 | Início 73 |
74 |
75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /catalogo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 |
32 | 33 |
34 |
35 |
36 | Computer 37 |
38 |
39 |

R$ 5000,00

40 |

41 | Computador Gamer XT 42 |

43 |
44 |
45 |
46 |
47 | Computer 48 |
49 |
50 |

R$ 5000,00

51 |

52 | Computador Gamer XT com suporte e 16GB de memória e processador 53 | turbo plus 54 |

55 |
56 |
57 |
58 |
59 | Computer 60 |
61 |
62 |

R$ 5000,00

63 |

64 | Computador Gamer XT 65 |

66 |
67 |
68 |
69 |
70 | Computer 71 |
72 |
73 |

R$ 5000,00

74 |

75 | Computador Gamer XT 76 |

77 |
78 |
79 |
80 |
81 | Computer 82 |
83 |
84 |

R$ 5000,00

85 |

86 | Computador Gamer XT 87 |

88 |
89 |
90 |
91 |
92 | Computer 93 |
94 |
95 |

R$ 5000,00

96 |

97 | Computador Gamer XT 98 |

99 |
100 |
101 |
102 |
103 | Computer 104 |
105 |
106 |

R$ 5000,00

107 |

108 | Computador Gamer XT 109 |

110 |
111 |
112 |
113 |
114 | Computer 115 |
116 |
117 |

R$ 5000,00

118 |

119 | Computador Gamer XT 120 |

121 |
122 |
123 |
124 |
125 | Computer 126 |
127 |
128 |

R$ 5000,00

129 |

130 | Computador Gamer XT 131 |

132 |
133 |
134 |
135 |
136 | Computer 137 |
138 |
139 |

R$ 5000,00

140 |

141 | Computador Gamer XT 142 |

143 |
144 |
145 |
146 | 147 |
Carregar mais
148 |
149 |
150 | 151 | 152 | -------------------------------------------------------------------------------- /listagem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSCommerce 8 | 9 | 10 | 11 | 12 |
13 | 32 |
33 |
34 |
35 |

Cadastro de produtos

36 | 37 |
38 |
Novo
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 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
IDPreçoNome
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
341ComputerR$ 5000,00Computador Gamer XT Plus UltraEditarDeletar
157 | 158 |
Carregar mais
159 |
160 |
161 | 162 | 163 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"); 2 | 3 | :root { 4 | --dsc-color-bg-primary: #e8e8e8; 5 | --dsc-color-bg-secondary: #ffe500; 6 | --dsc-color-bg-tertiary: #636363; 7 | --dsc-color-bg-quaternary: #0caf1d; 8 | 9 | --dsc-color-card-bg: #fff; 10 | --dsc-color-card-border: #d9d9d9; 11 | 12 | --dsc-color-btn-primary: #3483fa; 13 | --dsc-color-btn-inverse: #fff; 14 | 15 | --dsc-color-font-primary: #636363; 16 | --dsc-color-font-secondary: #0caf1d; 17 | --dsc-color-font-tertiary: #fff; 18 | --dsc-color-font-placeholder: #d9d9d9; 19 | 20 | --dsc-color-error: #f33; 21 | } 22 | 23 | * { 24 | box-sizing: border-box; 25 | margin: 0; 26 | padding: 0; 27 | font-family: "Open Sans"; 28 | } 29 | 30 | a, 31 | a:hover { 32 | text-decoration: none; 33 | color: unset; 34 | } 35 | 36 | html, 37 | body { 38 | background-color: var(--dsc-color-bg-primary); 39 | } 40 | 41 | main { 42 | padding: 0 20px; 43 | } 44 | 45 | /*-----------------------------------------------------------------*/ 46 | /* generic styles */ 47 | 48 | .dsc-container { 49 | width: 100%; 50 | max-width: 960px; 51 | margin: 0 auto; 52 | } 53 | 54 | .dsc-mb20 { 55 | margin-bottom: 20px; 56 | } 57 | 58 | .dsc-mt20 { 59 | margin-top: 20px; 60 | } 61 | 62 | .dsc-section-title { 63 | text-align: center; 64 | color: var(--dsc-color-font-primary); 65 | font-size: 16px; 66 | } 67 | 68 | .dsc-txt-left { 69 | text-align: left; 70 | } 71 | 72 | @media (min-width: 576px) { 73 | .dsc-section-title { 74 | text-align: left; 75 | font-size: 24px; 76 | } 77 | } 78 | 79 | /*-----------------------------------------------------------------*/ 80 | /* header styles */ 81 | 82 | header { 83 | height: 70px; 84 | display: flex; 85 | align-items: center; 86 | padding: 0 20px; 87 | } 88 | 89 | .dsc-header-client { 90 | background-color: var(--dsc-color-bg-secondary); 91 | color: var(--dsc-color-font-primary); 92 | } 93 | 94 | .dsc-header-admin { 95 | background-color: var(--dsc-color-bg-quaternary); 96 | color: var(--dsc-color-font-tertiary); 97 | } 98 | 99 | nav { 100 | display: flex; 101 | justify-content: space-between; 102 | align-items: center; 103 | } 104 | 105 | nav h1 { 106 | font-size: 16px; 107 | } 108 | 109 | nav a { 110 | font-size: 14px; 111 | } 112 | 113 | .dsc-navbar-right { 114 | display: flex; 115 | align-items: center; 116 | } 117 | 118 | .dsc-menu-items-container { 119 | display: flex; 120 | } 121 | 122 | .dsc-menu-items-container img { 123 | width: 20px; 124 | height: 20px; 125 | } 126 | 127 | .dsc-menu-item { 128 | margin-right: 20px; 129 | display: flex; 130 | align-items: center; 131 | } 132 | 133 | .dsc-menu-item p { 134 | display: none; 135 | margin-left: 5px; 136 | font-size: 14px; 137 | } 138 | 139 | .dsc-menu-item-active { 140 | font-weight: 700; 141 | } 142 | 143 | .dsc-logged-user { 144 | display: flex; 145 | flex-direction: column; 146 | align-items: flex-end; 147 | } 148 | 149 | .dsc-logged-user p { 150 | font-size: 12px; 151 | } 152 | 153 | .dsc-logged-user a { 154 | font-weight: 700; 155 | } 156 | 157 | @media (min-width: 576px) { 158 | nav h1 { 159 | font-size: 24px; 160 | } 161 | 162 | .dsc-menu-item p { 163 | display: unset; 164 | } 165 | } 166 | 167 | /*-----------------------------------------------------------------*/ 168 | /* card styles */ 169 | 170 | .dsc-card { 171 | border: 1px solid var(--dsc-color-card-border); 172 | border-radius: 4px; 173 | background-color: var(--dsc-color-card-bg); 174 | } 175 | 176 | .dsc-line-bottom { 177 | border-bottom: 1px solid var(--dsc-color-card-border); 178 | } 179 | 180 | /*-----------------------------------------------------------------*/ 181 | /* button styles */ 182 | 183 | .dsc-btn-page-container { 184 | width: 100%; 185 | display: grid; 186 | grid-gap: 20px; 187 | } 188 | 189 | @media (min-width: 576px) { 190 | .dsc-btn-page-container { 191 | width: 220px; 192 | } 193 | } 194 | 195 | .dsc-btn { 196 | width: 100%; 197 | height: 42px; 198 | border-radius: 4px; 199 | font-size: 16px; 200 | font-weight: 700; 201 | display: flex; 202 | justify-content: center; 203 | align-items: center; 204 | cursor: pointer; 205 | } 206 | 207 | .dsc-btn-blue { 208 | border: none; 209 | background-color: var(--dsc-color-btn-primary); 210 | color: var(--dsc-color-btn-inverse); 211 | } 212 | 213 | .dsc-btn-white { 214 | border: 1px solid var(--dsc-color-btn-primary); 215 | background-color: var(--dsc-color-btn-inverse); 216 | color: var(--dsc-color-btn-primary); 217 | } 218 | 219 | .dsc-btn-next-page { 220 | border: 1px solid var(--dsc-color-btn-primary); 221 | padding: 10px; 222 | border-radius: 4px; 223 | color: var(--dsc-color-btn-primary); 224 | text-align: center; 225 | font-size: 16px; 226 | font-weight: 700; 227 | cursor: pointer; 228 | } 229 | 230 | /*-----------------------------------------------------------------*/ 231 | /* search bar styles */ 232 | 233 | .dsc-search-bar { 234 | height: 40px; 235 | display: flex; 236 | color: var(--dsc-color-font-primary); 237 | } 238 | 239 | .dsc-search-bar button, .dsc-search-bar input { 240 | border: 1px solid var(--dsc-color-card-border); 241 | } 242 | 243 | .dsc-search-bar input { 244 | width: calc(100% - 80px); 245 | border-left: none; 246 | border-right: none; 247 | padding: 0 10px; 248 | font-size: 16px; 249 | color: var(--dsc-color-font-primary); 250 | } 251 | 252 | .dsc-search-bar input:focus { 253 | outline: none; 254 | } 255 | 256 | .dsc-search-bar input::placeholder { 257 | color: var(--dsc-color-font-placeholder); 258 | } 259 | 260 | .dsc-search-bar button { 261 | width: 40px; 262 | color: var(--dsc-color-font-primary); 263 | } 264 | 265 | .dsc-search-bar button[type="submit"] { 266 | border-right: none; 267 | border-radius: 4px 0 0 4px; 268 | } 269 | 270 | .dsc-search-bar button[type="reset"] { 271 | border-left: none; 272 | border-radius: 0 4px 4px 0; 273 | } 274 | 275 | /*-----------------------------------------------------------------*/ 276 | /* form styles */ 277 | 278 | .dsc-form { 279 | display: flex; 280 | flex-direction: column; 281 | align-items: center; 282 | padding: 40px 20px; 283 | } 284 | 285 | .dsc-form h2 { 286 | font-size: 16px; 287 | color: var(--dsc-color-font-primary); 288 | text-transform: uppercase; 289 | font-weight: 400; 290 | text-align: center; 291 | } 292 | 293 | .dsc-form-controls-container { 294 | width: 100%; 295 | display: grid; 296 | grid-gap: 20px; 297 | margin: 20px 0; 298 | } 299 | 300 | .dsc-form-control { 301 | width: 100%; 302 | height: 40px; 303 | font-size: 16px; 304 | padding: 0 20px; 305 | color: var(--dsc-color-font-primary); 306 | border-radius: 4px; 307 | border: 1px solid var(--dsc-color-card-border); 308 | } 309 | 310 | .dsc-form-control:focus { 311 | outline: none; 312 | } 313 | 314 | .dsc-form-control::placeholder { 315 | color: var(--dsc-color-font-placeholder); 316 | } 317 | 318 | .dsc-input-error { 319 | border: 1px solid var(--dsc-color-error); 320 | } 321 | 322 | .dsc-form-error { 323 | color: var(--dsc-color-error); 324 | font-size: 12px; 325 | padding-left: 4px; 326 | } 327 | 328 | .dsc-select:invalid { 329 | color: var(--dsc-color-font-placeholder); 330 | } 331 | 332 | .dsc-select option[disabled] { 333 | display: none; 334 | } 335 | 336 | .dsc-select option { 337 | color: var(--dsc-color-font-primary); 338 | } 339 | 340 | .dsc-textarea { 341 | resize: none; 342 | height: 128px; 343 | padding-top: 10px; 344 | } 345 | 346 | @media (min-width: 576px) { 347 | .dsc-form h2 { 348 | font-size: 24px; 349 | } 350 | } 351 | 352 | /*-----------------------------------------------------------------*/ 353 | /* table styles */ 354 | 355 | .dsc-table { 356 | width: 100%; 357 | border-spacing: 0; 358 | border-collapse: collapse; 359 | } 360 | 361 | .dsc-table thead { 362 | height: 55px; 363 | font-size: 14px; 364 | color: var(--dsc-color-font-primary); 365 | background-color: var(--dsc-color-card-bg); 366 | } 367 | 368 | .dsc-table tbody { 369 | text-align: center; 370 | font-size: 12px; 371 | color: var(--dsc-color-font-primary); 372 | background-color: var(--dsc-color-card-bg); 373 | } 374 | 375 | .dsc-table tbody tr { 376 | height: 70px; 377 | border-top: 1px solid var(--dsc-color-card-border); 378 | } 379 | 380 | .dsc-table th:nth-child(2) { 381 | border-top-left-radius: 10px; 382 | } 383 | 384 | .dsc-table th:last-child { 385 | border-top-right-radius: 10px; 386 | } 387 | 388 | .dsc-table td:nth-child(2) { 389 | padding-left: 10px; 390 | } 391 | 392 | .dsc-table td:last-child { 393 | padding-right: 5px; 394 | } 395 | 396 | .dsc-tb576 { 397 | display: none; 398 | } 399 | 400 | .dsc-tb768 { 401 | display: none; 402 | } 403 | 404 | @media (min-width: 576px) { 405 | .dsc-tb576 { 406 | display: table-cell; 407 | } 408 | 409 | .dsc-table th:nth-child(1) { 410 | padding-left: 20px; 411 | border-top-left-radius: 10px; 412 | } 413 | 414 | .dsc-table th:nth-child(2) { 415 | border-top-left-radius: 0; 416 | } 417 | 418 | .dsc-table td:nth-child(1) { 419 | padding-left: 20px; 420 | } 421 | 422 | .dsc-table td:nth-child(2) { 423 | padding-left: 0; 424 | } 425 | } 426 | 427 | @media (min-width: 768px) { 428 | .dsc-tb768 { 429 | display: table-cell; 430 | } 431 | } 432 | 433 | @media (min-width: 992px) { 434 | .dsc-table tbody { 435 | font-size: 16px; 436 | } 437 | } 438 | --------------------------------------------------------------------------------