├── img ├── cart.png ├── hero.jpg ├── logo.jpg ├── lupa.png ├── curso1.jpg ├── curso2.jpg ├── curso3.jpg ├── curso4.jpg ├── curso5.jpg ├── icono1.png ├── icono2.png ├── icono3.png ├── estrellas.png └── project-cart-design.jpg ├── README.md ├── css ├── styles.css └── skeleton.css ├── js └── app.js └── index.html /img/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/cart.png -------------------------------------------------------------------------------- /img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/hero.jpg -------------------------------------------------------------------------------- /img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/logo.jpg -------------------------------------------------------------------------------- /img/lupa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/lupa.png -------------------------------------------------------------------------------- /img/curso1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/curso1.jpg -------------------------------------------------------------------------------- /img/curso2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/curso2.jpg -------------------------------------------------------------------------------- /img/curso3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/curso3.jpg -------------------------------------------------------------------------------- /img/curso4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/curso4.jpg -------------------------------------------------------------------------------- /img/curso5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/curso5.jpg -------------------------------------------------------------------------------- /img/icono1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/icono1.png -------------------------------------------------------------------------------- /img/icono2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/icono2.png -------------------------------------------------------------------------------- /img/icono3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/icono3.png -------------------------------------------------------------------------------- /img/estrellas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/estrellas.png -------------------------------------------------------------------------------- /img/project-cart-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariav53/js-shopping-cart/HEAD/img/project-cart-design.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS Shopping cart 2 | A simple shopping cart created with pure Javascript, Html and CSS. The items can be saved in the shopping cart thanks to the property of Local Storage. 3 | 4 | ![Image design](/img/project-cart-design.jpg) 5 | 6 | Project from Udemy course [JavaScript Moderno](https://www.udemy.com/javascript-moderno-guia-definitiva-construye-10-proyectos) 7 | 8 | Technologies used: 9 | 10 | - HTML5 11 | 12 | - CSS3 13 | 14 | - JavaScript 15 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | overflow-x: hidden; 3 | background: #fff; 4 | font-family: 'IBM Plex Sans', sans-serif; 5 | } 6 | *{ 7 | margin: 0; 8 | padding: 0; 9 | } 10 | h1 { 11 | text-align: center; 12 | } 13 | .info__card h4 { 14 | font-size: 16px; 15 | font-weight: 700; 16 | } 17 | header { 18 | padding: 20px 0 0 0; 19 | background: white; 20 | text-align: center; 21 | display: flex; 22 | justify-content: space-between; 23 | } 24 | .logo__container { 25 | width: 50%; 26 | margin-left: 20px; 27 | } 28 | .carrito__container { 29 | width: 50%; 30 | } 31 | .carrito__container ul{ 32 | float: right; 33 | margin-right: 30px; 34 | } 35 | .submenu { 36 | position: relative; 37 | list-style-type: none; 38 | width: 50%; 39 | } 40 | .submenu #carrito{ 41 | display: none; 42 | } 43 | .submenu:hover #carrito{ 44 | display: block; 45 | position: absolute; 46 | right:0; 47 | top:100%; 48 | z-index: 1; 49 | background-color: white; 50 | padding: 20px; 51 | min-height: 400px; 52 | min-width: 300px; 53 | } 54 | .vacio { 55 | padding: 10px; 56 | background-color: crimson; 57 | text-align: center; 58 | border-radius: 10px; 59 | color: white; 60 | } 61 | .borrar-curso { 62 | background-color: red; 63 | border-radius: 50%; 64 | padding: 5px 10px; 65 | text-decoration: none; 66 | color: white; 67 | font-weight: bold; 68 | } 69 | #lista-cursos { 70 | padding: 30px 0; 71 | } 72 | .encabezado__cursos{ 73 | margin-bottom: 30px; 74 | } 75 | .cursos__container{ 76 | margin-top: 30px; 77 | display: grid; 78 | grid-gap: 25px; 79 | max-width: 1080px; 80 | margin: 0 auto; 81 | padding: 0 10px; 82 | } 83 | .curso__item{ 84 | border: 1px solid rgba(0,0,0,0.25); 85 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 86 | } 87 | .card__img, .imagen__curso{ 88 | width: 100%; 89 | } 90 | .info__card{ 91 | padding: 10px 10px; 92 | position: relative; 93 | height: 160px; 94 | } 95 | .info__card *{ 96 | margin-bottom: 10px; 97 | } 98 | .precio{ 99 | text-decoration: line-through; 100 | color: red; 101 | } 102 | .discount{ 103 | color: black; 104 | font-weight: bold; 105 | float: right; 106 | font-size: 1.25em; 107 | } 108 | .agregar-carrito{ 109 | background: #00B2BD; 110 | padding: 5px 10px; 111 | border-radius: 6px; 112 | color: white; 113 | text-decoration: none; 114 | font-weight: bold; 115 | font-size: 0.8em; 116 | position: absolute; 117 | bottom: 0; 118 | } 119 | .agregar-carrito:hover{ 120 | background: #00828a; 121 | color: white; 122 | } 123 | .fa{ margin-bottom: 0;} 124 | @media (min-width: 750px) { 125 | header { 126 | text-align: left; 127 | } 128 | } 129 | 130 | @media (min-width: 472px) and (max-width: 767px) { 131 | .cursos__container{ 132 | grid-template-columns: 1fr 1fr; 133 | } 134 | } 135 | @media all and (min-width: 768px) { 136 | .cursos__container{ 137 | grid-template-columns: 1fr 1fr 1fr; 138 | } 139 | } 140 | @media all and (min-width: 949px) { 141 | .cursos__container{ 142 | grid-template-columns: 1fr 1fr 1fr 1fr; 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | // Variables 2 | const carrito = document.getElementById('carrito'); 3 | const cursos = document.getElementById('lista-cursos'); 4 | const listaCursos = document.querySelector('#lista-carrito tbody'); 5 | const vaciarCarritoBtn = document.getElementById('vaciar-carrito'); 6 | 7 | 8 | // Listeners 9 | cargarEventListeners(); 10 | function cargarEventListeners() { 11 | // Dispara cuando se presiona "Agregar Carrito" 12 | cursos.addEventListener('click', comprarCurso); 13 | // Cuando se elimina un curso del carrito 14 | carrito.addEventListener('click', eliminarCurso); 15 | // Al Vaciar el carrito 16 | vaciarCarritoBtn.addEventListener('click', vaciarCarrito); 17 | // Al cargar el documento, mostrar LocalStorage 18 | document.addEventListener('DOMContentLoaded', leerLocalStorage); 19 | } 20 | 21 | // Funciones 22 | // Función que añade el curso al carrito 23 | function comprarCurso(e) { 24 | e.preventDefault(); 25 | // Delegation para agregar-carrito 26 | if(e.target.classList.contains('agregar-carrito')) { 27 | const curso = e.target.parentElement.parentElement; 28 | // Enviamos el curso seleccionado para tomar sus datos 29 | leerDatosCurso(curso); 30 | } 31 | } 32 | 33 | // Lee los datos del curso 34 | function leerDatosCurso(curso) { 35 | const infoCurso = { 36 | imagen: curso.querySelector('img').src, 37 | titulo: curso.querySelector('h4').textContent, 38 | precio: curso.querySelector('.discount').textContent, 39 | id: curso.querySelector('a').getAttribute('data-id') 40 | } 41 | insertarCarrito(infoCurso); 42 | } 43 | 44 | // Muestra el curso seleccionado en el Carrito 45 | function insertarCarrito(curso) { 46 | const row = document.createElement('tr'); 47 | row.innerHTML = ` 48 | 49 | 50 | 51 | ${curso.titulo} 52 | ${curso.precio} 53 | 54 | X 55 | 56 | `; 57 | listaCursos.appendChild(row); 58 | guardarCursoLocalStorage(curso); 59 | } 60 | 61 | // Elimina el curso del carrito en el DOM 62 | function eliminarCurso(e) { 63 | e.preventDefault(); 64 | let curso, 65 | cursoId; 66 | if(e.target.classList.contains('borrar-curso') ) { 67 | e.target.parentElement.parentElement.remove(); 68 | curso = e.target.parentElement.parentElement; 69 | cursoId = curso.querySelector('a').getAttribute('data-id'); 70 | } 71 | eliminarCursoLocalStorage(cursoId); 72 | } 73 | 74 | // Elimina los cursos del carrito en el DOM 75 | function vaciarCarrito() { 76 | // forma lenta 77 | // listaCursos.innerHTML = ''; 78 | // forma rapida (recomendada) 79 | while(listaCursos.firstChild) { 80 | listaCursos.removeChild(listaCursos.firstChild); 81 | } 82 | 83 | // Vaciar Local Storage 84 | vaciarLocalStorage(); 85 | return false; 86 | } 87 | 88 | // Almacena cursos en el carrito a Local Storage 89 | function guardarCursoLocalStorage(curso) { 90 | let cursos; 91 | // Toma el valor de un arreglo con datos de LS o vacio 92 | cursos = obtenerCursosLocalStorage(); 93 | // el curso seleccionado se agrega al arreglo 94 | cursos.push(curso); 95 | localStorage.setItem('cursos', JSON.stringify(cursos) ); 96 | } 97 | 98 | // Comprueba que haya elementos en Local Storage 99 | function obtenerCursosLocalStorage() { 100 | let cursosLS; 101 | // comprobamos si hay algo en localStorage 102 | if(localStorage.getItem('cursos') === null) { 103 | cursosLS = []; 104 | } else { 105 | cursosLS = JSON.parse( localStorage.getItem('cursos') ); 106 | } 107 | return cursosLS; 108 | } 109 | 110 | // Imprime los cursos de Local Storage en el carrito 111 | function leerLocalStorage() { 112 | let cursosLS; 113 | cursosLS = obtenerCursosLocalStorage(); 114 | cursosLS.forEach(function(curso){ 115 | // constrir el template 116 | const row = document.createElement('tr'); 117 | row.innerHTML = ` 118 | 119 | 120 | 121 | ${curso.titulo} 122 | ${curso.precio} 123 | 124 | X 125 | 126 | `; 127 | listaCursos.appendChild(row); 128 | }); 129 | } 130 | 131 | // Elimina el curso por el ID en Local Storage 132 | function eliminarCursoLocalStorage(curso) { 133 | let cursosLS; 134 | // Obtenemos el arreglo de cursos 135 | cursosLS = obtenerCursosLocalStorage(); 136 | // Iteramos comparando el ID del curso borrado con los del LS 137 | cursosLS.forEach(function(cursoLS, index) { 138 | if(cursoLS.id === curso) { 139 | cursosLS.splice(index, 1); 140 | } 141 | }); 142 | // Añadimos el arreglo actual a storage 143 | localStorage.setItem('cursos', JSON.stringify(cursosLS) ); 144 | } 145 | 146 | // Elimina todos los cursos de Local Storage 147 | function vaciarLocalStorage() { 148 | localStorage.clear(); 149 | } 150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carrito 8 | 9 | 10 | 11 | 12 | 13 | 14 | 44 | 45 |
46 |

Cursos En Línea

47 | 48 |
49 |
50 |
51 | 52 |
53 |

HTML5, CSS3, JavaScript para Principiantes

54 | 55 |

$200 $15

56 |   AGREGAR AL CARRITO 57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |

Curso de Comida Vegetariana

66 | 67 |

$200 $15

68 |   AGREGAR AL CARRITO 69 |
70 |
71 |
72 | 73 |
74 |
75 | 76 |
77 |

Guitarra para Principiantes

78 | 79 |

$200 $15

80 |   AGREGAR AL CARRITO 81 |
82 |
83 |
84 | 85 |
86 |
87 | 88 |
89 |

Huerto en tu casa

90 | 91 |

$200 $15

92 |   AGREGAR AL CARRITO 93 |
94 |
95 |
96 | 97 |
98 |
99 | 100 |
101 |

Decoración con productos de tu hogar

102 | 103 |

$200 $15

104 |   AGREGAR AL CARRITO 105 |
106 |
107 |
108 | 109 |
110 |
111 | 112 |
113 |

Diseño Web para Principiantes

114 | 115 |

$200 $15

116 |   AGREGAR AL CARRITO 117 |
118 |
119 |
120 | 121 |
122 |
123 | 124 |
125 |

Comida Mexicana para principiantes

126 | 127 |

$200 $15

128 |   AGREGAR AL CARRITO 129 |
130 |
131 |
132 | 133 |
134 |
135 | 136 |
137 |

Estudio Musical en tu casa

138 | 139 |

$200 $15

140 |   AGREGAR AL CARRITO 141 |
142 |
143 |
144 | 145 |
146 |
147 | 148 |
149 |

Cosecha tus propias frutas y verduras

150 | 151 |

$200 $15

152 |   AGREGAR AL CARRITO 153 |
154 |
155 |
156 | 157 |
158 |
159 | 160 |
161 |

Prepara galletas caseras

162 | 163 |

$200 $15

164 |   AGREGAR AL CARRITO 165 |
166 |
167 |
168 | 169 |
170 |
171 | 172 |
173 |

JavaScript Moderno con ES6

174 | 175 |

$200 $15

176 |   AGREGAR AL CARRITO 177 |
178 |
179 |
180 | 181 |
182 |
183 | 184 |
185 |

100 Recetas de Comida Natural

186 | 187 |

$200 $15

188 |   AGREGAR AL CARRITO 189 |
190 |
191 |
192 |
193 |
194 | 195 | 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /css/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V2.0.4 3 | * Copyright 2014, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 12/29/2014 8 | */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Grid 14 | - Base Styles 15 | - Typography 16 | - Links 17 | - Buttons 18 | - Forms 19 | - Lists 20 | - Code 21 | - Tables 22 | - Spacing 23 | - Utilities 24 | - Clearing 25 | - Media Queries 26 | */ 27 | 28 | 29 | /* Grid 30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 | .container { 32 | position: relative; 33 | width: 100%; 34 | max-width: 960px; 35 | margin: 0 auto; 36 | padding: 0 20px; 37 | box-sizing: border-box; } 38 | .column, 39 | .columns { 40 | width: 100%; 41 | float: left; 42 | box-sizing: border-box; } 43 | 44 | /* For devices larger than 400px */ 45 | @media (min-width: 400px) { 46 | .container { 47 | width: 85%; 48 | padding: 0; } 49 | } 50 | 51 | /* For devices larger than 550px */ 52 | @media (min-width: 550px) { 53 | .container { 54 | width: 80%; } 55 | .column, 56 | .columns { 57 | margin-left: 4%; } 58 | .column:first-child, 59 | .columns:first-child { 60 | margin-left: 0; } 61 | 62 | .one.column, 63 | .one.columns { width: 4.66666666667%; } 64 | .two.columns { width: 13.3333333333%; } 65 | .three.columns { width: 22%; } 66 | .four.columns { width: 30.6666666667%; } 67 | .five.columns { width: 39.3333333333%; } 68 | .six.columns { width: 48%; } 69 | .seven.columns { width: 56.6666666667%; } 70 | .eight.columns { width: 65.3333333333%; } 71 | .nine.columns { width: 74.0%; } 72 | .ten.columns { width: 82.6666666667%; } 73 | .eleven.columns { width: 91.3333333333%; } 74 | .twelve.columns { width: 100%; margin-left: 0; } 75 | 76 | .one-third.column { width: 30.6666666667%; } 77 | .two-thirds.column { width: 65.3333333333%; } 78 | 79 | .one-half.column { width: 48%; } 80 | 81 | /* Offsets */ 82 | .offset-by-one.column, 83 | .offset-by-one.columns { margin-left: 8.66666666667%; } 84 | .offset-by-two.column, 85 | .offset-by-two.columns { margin-left: 17.3333333333%; } 86 | .offset-by-three.column, 87 | .offset-by-three.columns { margin-left: 26%; } 88 | .offset-by-four.column, 89 | .offset-by-four.columns { margin-left: 34.6666666667%; } 90 | .offset-by-five.column, 91 | .offset-by-five.columns { margin-left: 43.3333333333%; } 92 | .offset-by-six.column, 93 | .offset-by-six.columns { margin-left: 52%; } 94 | .offset-by-seven.column, 95 | .offset-by-seven.columns { margin-left: 60.6666666667%; } 96 | .offset-by-eight.column, 97 | .offset-by-eight.columns { margin-left: 69.3333333333%; } 98 | .offset-by-nine.column, 99 | .offset-by-nine.columns { margin-left: 78.0%; } 100 | .offset-by-ten.column, 101 | .offset-by-ten.columns { margin-left: 86.6666666667%; } 102 | .offset-by-eleven.column, 103 | .offset-by-eleven.columns { margin-left: 95.3333333333%; } 104 | 105 | .offset-by-one-third.column, 106 | .offset-by-one-third.columns { margin-left: 34.6666666667%; } 107 | .offset-by-two-thirds.column, 108 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 109 | 110 | .offset-by-one-half.column, 111 | .offset-by-one-half.columns { margin-left: 52%; } 112 | 113 | } 114 | 115 | 116 | /* Base Styles 117 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 118 | /* NOTE 119 | html is set to 62.5% so that all the REM measurements throughout Skeleton 120 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 121 | html { 122 | font-size: 62.5%; } 123 | body { 124 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 125 | line-height: 1.6; 126 | font-weight: 400; 127 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 128 | color: #222; } 129 | 130 | 131 | /* Typography 132 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 133 | h1, h2, h3, h4, h5, h6 { 134 | margin-top: 0; 135 | margin-bottom: 2rem; 136 | font-weight: 300; } 137 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 138 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 139 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 140 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 141 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 142 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 143 | 144 | /* Larger than phablet */ 145 | @media (min-width: 550px) { 146 | h1 { font-size: 5.0rem; } 147 | h2 { font-size: 4.2rem; } 148 | h3 { font-size: 3.6rem; } 149 | h4 { font-size: 3.0rem; } 150 | h5 { font-size: 2.4rem; } 151 | h6 { font-size: 1.5rem; } 152 | } 153 | 154 | p { 155 | margin-top: 0; } 156 | 157 | 158 | /* Links 159 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 160 | a { 161 | color: #1EAEDB; } 162 | a:hover { 163 | color: #0FA0CE; } 164 | 165 | 166 | /* Buttons 167 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 168 | .button, 169 | button, 170 | input[type="submit"], 171 | input[type="reset"], 172 | input[type="button"] { 173 | display: inline-block; 174 | height: 38px; 175 | padding: 0 30px; 176 | color: #555; 177 | text-align: center; 178 | font-size: 11px; 179 | font-weight: 600; 180 | line-height: 38px; 181 | letter-spacing: .1rem; 182 | text-transform: uppercase; 183 | text-decoration: none; 184 | white-space: nowrap; 185 | background-color: transparent; 186 | border-radius: 4px; 187 | border: 1px solid #bbb; 188 | cursor: pointer; 189 | box-sizing: border-box; } 190 | .button:hover, 191 | button:hover, 192 | input[type="submit"]:hover, 193 | input[type="reset"]:hover, 194 | input[type="button"]:hover, 195 | .button:focus, 196 | button:focus, 197 | input[type="submit"]:focus, 198 | input[type="reset"]:focus, 199 | input[type="button"]:focus { 200 | color: #333; 201 | border-color: #888; 202 | outline: 0; } 203 | .button.button-primary, 204 | button.button-primary, 205 | input[type="submit"].button-primary, 206 | input[type="reset"].button-primary, 207 | input[type="button"].button-primary { 208 | color: #FFF; 209 | background-color: #33C3F0; 210 | border-color: #33C3F0; } 211 | .button.button-primary:hover, 212 | button.button-primary:hover, 213 | input[type="submit"].button-primary:hover, 214 | input[type="reset"].button-primary:hover, 215 | input[type="button"].button-primary:hover, 216 | .button.button-primary:focus, 217 | button.button-primary:focus, 218 | input[type="submit"].button-primary:focus, 219 | input[type="reset"].button-primary:focus, 220 | input[type="button"].button-primary:focus { 221 | color: #FFF; 222 | background-color: #1EAEDB; 223 | border-color: #1EAEDB; } 224 | 225 | 226 | /* Forms 227 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 228 | input[type="email"], 229 | input[type="number"], 230 | input[type="search"], 231 | input[type="text"], 232 | input[type="tel"], 233 | input[type="url"], 234 | input[type="password"], 235 | textarea, 236 | select { 237 | height: 38px; 238 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 239 | background-color: #fff; 240 | border: 1px solid #D1D1D1; 241 | border-radius: 4px; 242 | box-shadow: none; 243 | box-sizing: border-box; } 244 | /* Removes awkward default styles on some inputs for iOS */ 245 | input[type="email"], 246 | input[type="number"], 247 | input[type="search"], 248 | input[type="text"], 249 | input[type="tel"], 250 | input[type="url"], 251 | input[type="password"], 252 | textarea { 253 | -webkit-appearance: none; 254 | -moz-appearance: none; 255 | appearance: none; } 256 | textarea { 257 | min-height: 65px; 258 | padding-top: 6px; 259 | padding-bottom: 6px; } 260 | input[type="email"]:focus, 261 | input[type="number"]:focus, 262 | input[type="search"]:focus, 263 | input[type="text"]:focus, 264 | input[type="tel"]:focus, 265 | input[type="url"]:focus, 266 | input[type="password"]:focus, 267 | textarea:focus, 268 | select:focus { 269 | border: 1px solid #33C3F0; 270 | outline: 0; } 271 | label, 272 | legend { 273 | display: block; 274 | margin-bottom: .5rem; 275 | font-weight: 600; } 276 | fieldset { 277 | padding: 0; 278 | border-width: 0; } 279 | input[type="checkbox"], 280 | input[type="radio"] { 281 | display: inline; } 282 | label > .label-body { 283 | display: inline-block; 284 | margin-left: .5rem; 285 | font-weight: normal; } 286 | 287 | 288 | /* Lists 289 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 290 | ul { 291 | list-style: circle inside; } 292 | ol { 293 | list-style: decimal inside; } 294 | ol, ul { 295 | padding-left: 0; 296 | margin-top: 0; } 297 | ul ul, 298 | ul ol, 299 | ol ol, 300 | ol ul { 301 | margin: 1.5rem 0 1.5rem 3rem; 302 | font-size: 90%; } 303 | li { 304 | margin-bottom: 1rem; } 305 | 306 | 307 | /* Code 308 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 309 | code { 310 | padding: .2rem .5rem; 311 | margin: 0 .2rem; 312 | font-size: 90%; 313 | white-space: nowrap; 314 | background: #F1F1F1; 315 | border: 1px solid #E1E1E1; 316 | border-radius: 4px; } 317 | pre > code { 318 | display: block; 319 | padding: 1rem 1.5rem; 320 | white-space: pre; } 321 | 322 | 323 | /* Tables 324 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 325 | th, 326 | td { 327 | padding: 12px 15px; 328 | text-align: left; 329 | border-bottom: 1px solid #E1E1E1; } 330 | th:first-child, 331 | td:first-child { 332 | padding-left: 0; } 333 | th:last-child, 334 | td:last-child { 335 | padding-right: 0; } 336 | 337 | 338 | /* Spacing 339 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 340 | button, 341 | .button { 342 | margin-bottom: 1rem; } 343 | input, 344 | textarea, 345 | select, 346 | fieldset { 347 | margin-bottom: 1.5rem; } 348 | pre, 349 | blockquote, 350 | dl, 351 | figure, 352 | table, 353 | p, 354 | ul, 355 | ol, 356 | form { 357 | margin-bottom: 2.5rem; } 358 | 359 | 360 | /* Utilities 361 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 362 | .u-full-width { 363 | width: 100%; 364 | box-sizing: border-box; } 365 | .u-max-full-width { 366 | max-width: 100%; 367 | box-sizing: border-box; } 368 | .u-pull-right { 369 | float: right; } 370 | .u-pull-left { 371 | float: left; } 372 | 373 | 374 | /* Misc 375 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 376 | hr { 377 | margin-top: 3rem; 378 | margin-bottom: 3.5rem; 379 | border-width: 0; 380 | border-top: 1px solid #E1E1E1; } 381 | 382 | 383 | /* Clearing 384 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 385 | 386 | /* Self Clearing Goodness */ 387 | .container:after, 388 | .row:after, 389 | .u-cf { 390 | content: ""; 391 | display: table; 392 | clear: both; } 393 | 394 | 395 | /* Media Queries 396 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 397 | /* 398 | Note: The best way to structure the use of media queries is to create the queries 399 | near the relevant code. For example, if you wanted to change the styles for buttons 400 | on small devices, paste the mobile query code up in the buttons section and style it 401 | there. 402 | */ 403 | 404 | 405 | /* Larger than mobile */ 406 | @media (min-width: 400px) {} 407 | 408 | /* Larger than phablet (also point when grid becomes active) */ 409 | @media (min-width: 550px) {} 410 | 411 | /* Larger than tablet */ 412 | @media (min-width: 750px) {} 413 | 414 | /* Larger than desktop */ 415 | @media (min-width: 1000px) {} 416 | 417 | /* Larger than Desktop HD */ 418 | @media (min-width: 1200px) {} 419 | --------------------------------------------------------------------------------