├── .gitignore ├── Readme.md ├── css └── style.css ├── index.html ├── prepros-6.config ├── scss ├── _partials.scss ├── base │ ├── _buttons.scss │ ├── _figures.scss │ ├── _forms.scss │ ├── _images.scss │ ├── _links.scss │ ├── _tables.scss │ └── _typography.scss ├── components │ ├── _grid.scss │ └── _utilities.scss ├── layout │ ├── _site.scss │ └── _textures.scss ├── lib │ ├── _debug.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _mixins.scss │ ├── _placeholders.scss │ ├── _reset.scss │ └── _settings.scss └── style.scss └── styleguides ├── css └── styleguide.css └── scss └── patternstyles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignorar el cache de sass 2 | .sass-cache 3 | # Ignorar directorio de dependencias 4 | node_modules 5 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Wakkos SASS framework 2 | 3 | ### Configuración: 4 | 5 | #### settings.scss 6 | Configura primeramente el archivo `lib/settings.scss`. 7 | 8 | Pasa a configurar las variables y diferentes opciones de la atmósfera de diseño, 9 | donde podremos configurar colores, fuentes, tamaños, etc... 10 | 11 | ### Breakpoints 12 | Los breakpoints los he colocado en EM en vez de pixels para que el diseño no se 13 | vea afectado por acciones como el ZOOM. Para más info leer a 14 | [Chris Coyer](http://css-tricks.com/why-ems/) y a [Lyza Gardner](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/) con argumentos al respecto. 15 | 16 | ```scss 17 | $breakpoints: ( 18 | 19 | 'small' : 48em, 20 | 'medium' : 56.25em, 21 | 'large' : 68.75em, 22 | 23 | ) !default; 24 | ``` 25 | 26 | ### Nomenclatura 27 | La convención de nombre sigue este patrón: 28 | ```css 29 | .bloque{} 30 | .bloque__elemento{} 31 | .bloque--modificador{} 32 | ``` 33 | 34 | * '.bloque' representa el primer nivel de una abstracción o componente. 35 | * '.bloque__elemento' representa un descendente de '.bloque' que se ayuda de 36 | '.bloque' como un conjunto. 37 | * '.bloque--modificador' representa un estado diferente de '.bloque'. 38 | 39 | Una **analogía** del funcionamiento de las clases BEM sería: 40 | ```css 41 | .persona{} 42 | .persona--mujer{} 43 | .persona__mano{} 44 | .persona__mano--izquierda{} 45 | .persona__mano--derecha{} 46 | ``` 47 | 48 | Para más info podéis leer mi traducción de la [guía de CSS](https://github.com/Wakkos/CSS-Guidelines) de [Harry Roberts](https://twitter.com/csswizardry) 49 | a la cual me he ajustado en su mayoría para crear este framework. 50 | 51 | También tenemos espacio entre secciones para que sea fácil de ubicar al ver el 52 | archivo compilado `style.css`. 53 | 54 | ### Organización 55 | Los archivos de **SCSS** están todos dentro de la carpeta `scss` y distribuidos 56 | de la siguiente manera: 57 | 58 | ``` 59 | --scss 60 | style.scss 61 | -abstracciones 62 | _botones.scss 63 | _fonticon.scss 64 | _grid.scss 65 | _paginacion.scss 66 | _texturas.scss 67 | --base 68 | _contenido.scss 69 | _reset.scss 70 | _debug.scss 71 | --elementos 72 | _figure.scss 73 | _formulario.scss 74 | _imagenes.scss 75 | _links.scss 76 | _reset.scss 77 | _tipografia.scss 78 | _tablas.scss 79 | --layout 80 | _navegacion.scss 81 | _sitio.scss 82 | --lib 83 | _flex.scss 84 | _mixins.scss 85 | _placeholders.scss 86 | _settings.scss 87 | ``` 88 | 89 | El archivo `contenido.scss` se compila al principio del `style.css` para dar una 90 | guía de donde tenemos nuestros elementos y su nombre, gracias a los comentarios 91 | BEM na búsqueda `cmd/ctrl + f` en nuestro editor que empiece por $NOMBREDESECCION 92 | nos ayudará mucho a encontrar el contenido. 93 | 94 | A su vez están todas las secciones separadas unas de las otras para ubicar rápidamente 95 | cuando echamos un vistazo. 96 | 97 | El archivo `_debug.scss` lo usamos para tener una 98 | pequeña guía de la semántica de tu documento html. 99 | 100 | 101 | ### Codekit 102 | Iré adaptándolo a Codekit pero sin que afecte a los que no lo usan. De momento si 103 | usas Codekit, incluyo el archivo `config.codekit`y todos los `.scss`son compilados 104 | en la carpeta `css`. 105 | 106 | ### Gulp 107 | Una alternativa a Codekit y que además permite su uso en otros sistemas operativos es Gulp. 108 | 109 | #### Instalación 110 | Se necesita tener instalado Nodejs (https://nodejs.org/en/) y Gulp: 111 | `npm install gulp -g` 112 | 113 | Una vez instalados los requisitos anteriores se ejecuta: 114 | `npm install` 115 | en el raíz del proyecto. Esto instalará todas las dependencias para que Gulp pueda compilar Sass. 116 | 117 | #### Actualizar dependencias 118 | 119 | Las dependencias están continuamente actualizándose, una buen método para automatizar esta tarea es utilizar ```npm-check-updates``` 120 | 121 | ```sh 122 | npm install -g npm-check-updates 123 | ``` 124 | 125 | Ahora ejecutamos en el terminal el siguiente comando para actualizar todas las dependencias. 126 | 127 | ```sh 128 | ncu 129 | ``` 130 | 131 | El terminal nos informará de las dependencias que se han actualizado. 132 | 133 | ```sh 134 | autoprefixer ^6.0.3 → ^6.1.2 135 | gulp-minify-css ^1.2.1 → ^1.2.2 136 | ``` 137 | 138 | #### Configuración y uso 139 | Para configurar gulp podéis entrar a `gulpfile.js` y modificar el json de configuración (primeras líneas): 140 | ``` 141 | config = { 142 | autoprefixer : true, //Prefijos de navegadores para CSS: compatibilidad con browsers 143 | minify : true, // Minificado de CSS 144 | mergeMediaQueries: true, // Unimos el interior de las mediaQueries con las misma condición 145 | paths : { 146 | ... 147 | } 148 | } 149 | ``` 150 | **Tarea autoprefixer** (true o false): tras compilar el `.scss` añade prefijos de navegadores para mejorar la compatibilidad con estos. 151 | **Tarea minify** (true o false): tras compilar el `.scss`, minificamos el css, borrando todos los espacios innecesarios y comentarios. 152 | **Tarea mergeMediaQueries** (true o false): tras compilar el `.scss`, unificamos todas las mediaqueries con la misma condición, lo cual es perfecto para combinar con el mixing `respond-to()`. 153 | 154 | Nota: todas las tareas se pueden combinar como se desee. 155 | 156 | Para hacer que gulp compile nuestro `.scss` debemos escribir `gulp` en consola. 157 | 158 | ## Patrones 159 | Lo trabajaré en otra rama, ya que ahora mismo no provee ninguna ventaja. 160 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*------------------------------------* $STYLE 3 | \*------------------------------------*/ 4 | /** 5 | * Let's define the settings file here, or the partials to be included. 6 | * This way we can have different .css files compiled with different partials each. 7 | */ 8 | /*------------------------------------* $PARTIALS 9 | \*------------------------------------*/ 10 | /** 11 | * All files to be compiled 12 | */ 13 | /** 14 | * Scss Libraries, mixins, functions and any Scss focused logic 15 | **/ 16 | /*------------------------------------* $SETTINGS 17 | \*------------------------------------*/ 18 | /** 19 | * 20 | * Define all variables and values to use 21 | * 22 | */ 23 | /*------------------------------------* $INCLUDED-COMPONENTS 24 | \*------------------------------------*/ 25 | /** 26 | * We can tell the components to use here, `true` for used, `false` unused. 27 | * Remember you can overwrite this value anywhere else by removing the `!default` property 28 | */ 29 | /*------------------------------------* $BREAKPOINTS 30 | \*------------------------------------*/ 31 | /** 32 | * "Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!" 33 | * Used with mixin `respond-to($breakpoint)`: 34 | 35 | .div { 36 | color: pink; 37 | @include respond-to(medium) { 38 | color: maroon; 39 | } 40 | } 41 | * 42 | */ 43 | /*------------------------------------* $Z-INDEX 44 | \*------------------------------------*/ 45 | /** 46 | * We can have control over z-index and not ending up having 900 to infinite. 47 | * To use this values, we use the `z($layers)` function: 48 | .element { 49 | z-index: z(goku); 50 | } 51 | * 52 | */ 53 | /*------------------------------------* $DIR 54 | \*------------------------------------*/ 55 | /** 56 | * Sometimes we change image dir from develop to production: 57 | */ 58 | /* 59 | * In case we use local fonts (I use them fewer and fewer lately) 60 | */ 61 | /*------------------------------------* $LAYOUT 62 | \*------------------------------------*/ 63 | /** 64 | * Constant layout values, apart from these we can also declare values 65 | * for different blocks sizes and more. 66 | */ 67 | /*------------------------------------* $GRID 68 | \*------------------------------------*/ 69 | /** 70 | * These are the variables we use for our Grid 71 | */ 72 | /*------------------------------------* $FONT-FACE 73 | \*------------------------------------*/ 74 | /** 75 | * Fonts definitions 76 | */ 77 | /* 78 | * Font Size variables are defined in a Scss MAP, this MAP will create 79 | * a class (in `utilities.scss`) for every size with the value in REM units, you can check 80 | * `utilities.scss` if you need to change the loop: 81 | 82 | .x-small { font-size: .8rem} 83 | 84 | * We also have a function to assign font sizes, call `fs`: 85 | 86 | .selector { font-size: fs(x-small);} 87 | 88 | * 89 | */ 90 | /*------------------------------------* $COLORS 91 | \*------------------------------------*/ 92 | /** 93 | * Brand colors 94 | */ 95 | /** 96 | * Grey Scale 97 | * This is mainly to hold back designers from adding 200 different greys ;) 98 | */ 99 | /** 100 | * Colors Map 101 | * We may also need a map with all these colors, to create classes. 102 | */ 103 | /*------------------------------------* $TEXTURAS 104 | \*------------------------------------*/ 105 | /** 106 | * Definimos Colores y elementos de popups, mensajes de alerta, etc... 107 | */ 108 | /*------------------------------------* $MIXINS 109 | \*------------------------------------*/ 110 | /* 111 | * Fácil de usar: las variables a usar están en settings.scss y son: 112 | 113 | 'small' : 48em, 114 | 'medium' : 56.25em, 115 | 'large' : 68.75em, 116 | 117 | * Y el uso va como sigue: 118 | 119 | .foo { 120 | color: red; 121 | @include respond-to('small') { 122 | color: blue; 123 | } 124 | } 125 | */ 126 | /** 127 | * Centrar y dar un ancho máximo igual a $pagemaxwidth. 128 | */ 129 | /*------------------------------------* $FUNCTIONS 130 | \*------------------------------------*/ 131 | /* 132 | * Function to control Index values 133 | 134 | .selector { z-index: z(goku);} 135 | 136 | * Compiles to: 137 | 138 | .selector { z-index: 9001;} 139 | 140 | * You can see the current values and variables in settings.scss 141 | */ 142 | /* 143 | * Function to keep font size consistent 144 | 145 | .selector { font-size: fs(x-small);} 146 | 147 | * You can see the current values and variables in settings.scss 148 | */ 149 | /* 150 | * Function to use colors in our Scss 151 | 152 | .selector { font-size: fs(x-small);} 153 | 154 | * You can see the current values and variables in settings.scss 155 | */ 156 | /** 157 | * Base 158 | **/ 159 | /*------------------------------------* $CONTENIDO 160 | \*------------------------------------*/ 161 | /** 162 | * Contenido..................... Esto que lees 163 | 164 | * Variables..................... Configuramos todas las variables del framework 165 | 166 | * Mixins........................ Mixins de SASS 167 | 168 | * Helpers....................... Clases de ayuda 169 | 170 | * Reset......................... Reinicio de valores CSS 171 | 172 | * Fuentes....................... Fuentes que vamos a importar 173 | 174 | * Links......................... Formas y estilos de los links 175 | 176 | * Tablas........................ Estilos de las tablas 177 | 178 | * Botones....................... Estilos de Botones, skins y variantes 179 | 180 | * Elementos..................... Elementos varios como Imagen, HR, etc... 181 | 182 | * Tipografía.................... Encabezados, small, párrafos, listas, etc... 183 | 184 | * Navegación.................... Una navegación, por si quieres usar esta y no la tuya propia 185 | 186 | * Formularios................... Estilos de todos los elementos de formularios y sus variantes 187 | 188 | * Sitio......................... Aquí escribes tus estilos para la web se vea como tú quieres ;) 189 | 190 | * Paginación.................... Estilos básicos para las paginaciones 191 | 192 | * Texturas...................... Badges, cajas y wells 193 | 194 | * Breakpoints................... Importamos breakpoints basados en las variables @bp$ 195 | 196 | * Patron........................ Estilos para la guía de patrones 197 | */ 198 | /*------------------------------------* $RESET 199 | \*------------------------------------*/ 200 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video { 201 | margin: 0; 202 | padding: 0; 203 | border: 0; 204 | outline: 0; 205 | font-size: 100%; 206 | vertical-align: baseline; 207 | background: transparent; } 208 | 209 | article, 210 | aside, 211 | details, 212 | figcaption, 213 | figure, 214 | footer, 215 | header, 216 | main, 217 | menu, 218 | nav, 219 | section, 220 | summary { 221 | display: block; } 222 | 223 | *, *::before, *::after { 224 | -webkit-box-sizing: border-box; 225 | -moz-box-sizing: border-box; 226 | -ms-box-sizing: border-box; 227 | -o-box-sizing: border-box; 228 | box-sizing: border-box; } 229 | 230 | img { 231 | max-width: 100%; 232 | border-width: 0; 233 | vertical-align: middle; 234 | -ms-interpolation-mode: bicubic; } 235 | 236 | /** 237 | * HTML elements 238 | **/ 239 | /*------------------------------------* $ELEMENTOS-FIGURE 240 | \*------------------------------------*/ 241 | figure { 242 | margin-bottom: 1.5; } 243 | figure img { 244 | margin-bottom: 0.375; } 245 | figure figcaption { 246 | display: block; 247 | font-weight: normal; 248 | font-size: 0.8rem; 249 | font-style: italic; 250 | color: #4d4d4d; } 251 | 252 | /*------------------------------------* $FORMULARIOS 253 | \*------------------------------------*/ 254 | form { 255 | margin: 0 0 1.5 0; } 256 | form fieldset { 257 | margin-bottom: 1.5; 258 | padding: 0; 259 | border-width: 0; } 260 | form legend { 261 | display: block; 262 | width: 100%; 263 | margin-bottom: 3; 264 | padding: 0; 265 | color: #4d4d4d; 266 | border: 0; 267 | border-bottom: 1px solid #bfbfbf; 268 | white-space: normal; } 269 | form legend small { 270 | font-size: 0.6rem; 271 | color: #bfbfbf; } 272 | form p { 273 | margin-bottom: 0.75; } 274 | form ul { 275 | list-style-type: none; 276 | margin: 0 0 1.5 0; 277 | padding: 0; } 278 | form br { 279 | display: none; } 280 | 281 | label, 282 | input, 283 | button, 284 | select, 285 | textarea { 286 | font-size: 0.6rem; 287 | border-radius: 3px; 288 | vertical-align: baseline; } 289 | 290 | input, 291 | button, 292 | select, 293 | textarea { 294 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 295 | -webkit-box-sizing: border-box; 296 | -moz-box-sizing: border-box; 297 | -ms-box-sizing: border-box; 298 | box-sizing: border-box; } 299 | 300 | label { 301 | display: inline-block; 302 | margin-bottom: 0.1875; 303 | font-family: 0.6rem; 304 | font-weight: bold; 305 | color: #4d4d4d; 306 | cursor: pointer; } 307 | 308 | input, 309 | textarea, 310 | select { 311 | display: inline-block; 312 | vertical-align: middle; 313 | width: 100%; 314 | padding: 4px; 315 | margin-bottom: 1.5; 316 | background-color: white; 317 | border: 1px solid #bfbfbf; 318 | color: #4d4d4d; 319 | -webkit-appearance: none; 320 | -moz-appearance: none; 321 | appearance: none; } 322 | input:hover, 323 | textarea:hover, 324 | select:hover { 325 | border-color: gray; } 326 | 327 | .input-small { 328 | width: 60px; } 329 | 330 | .input-medium { 331 | width: 150px; } 332 | 333 | .input-big { 334 | width: 300px; } 335 | 336 | input[type="image"] { 337 | width: auto; 338 | height: auto; 339 | padding: 0; 340 | margin: 3px 0; 341 | line-height: normal; 342 | cursor: pointer; } 343 | 344 | input[type="checkbox"], 345 | input[type="radio"] { 346 | width: 12px; 347 | height: 12px; 348 | padding: 0; 349 | margin: 0 3px 0 0; 350 | line-height: normal; 351 | cursor: pointer; 352 | background-color: white; } 353 | input[type="checkbox"]:checked, 354 | input[type="radio"]:checked { 355 | background-color: #bfbfbf; 356 | border-color: white; 357 | border-width: 1px; 358 | -webkit-box-shadow: 0 0 0 1px #bfbfbf; 359 | box-shadow: 0 0 0 1px #bfbfbf; } 360 | input[type="checkbox"] + label, 361 | input[type="radio"] + label { 362 | margin-right: 24px; } 363 | 364 | input[type="radio"] { 365 | border-radius: 100%; } 366 | 367 | label input[type="checkbox"], 368 | label input[type="radio"] { 369 | margin-right: 6px; } 370 | 371 | input[type="image"] { 372 | border: 0; 373 | -webkit-box-shadow: none; 374 | box-shadow: none; } 375 | 376 | input[type="file"] { 377 | width: auto; 378 | padding: initial; 379 | line-height: initial; 380 | border: initial; 381 | background-color: transparent; 382 | background-color: initial; 383 | -webkit-box-shadow: none; 384 | box-shadow: none; } 385 | 386 | input[type="button"], 387 | input[type="reset"], 388 | input[type="submit"] { 389 | width: auto; 390 | height: auto; 391 | cursor: pointer; 392 | *overflow: visible; } 393 | 394 | textarea { 395 | resize: vertical; 396 | overflow: auto; 397 | height: auto; 398 | overflow: auto; 399 | vertical-align: top; } 400 | 401 | input[type="hidden"] { 402 | display: none; } 403 | 404 | input[disabled], 405 | select[disabled], 406 | textarea[disabled], 407 | input[readonly], 408 | select[readonly], 409 | textarea[readonly] { 410 | -webkit-opacity: 0.5; 411 | -moz-opacity: 0.5; 412 | opacity: 0.5; 413 | cursor: not-allowed; } 414 | 415 | input:focus, 416 | textarea:focus { 417 | border-color: #007EE5, 40%; 418 | -webkit-box-shadow: 0 0 1px 1px #bfbfbf; 419 | box-shadow: 0 0 1px 1px #bfbfbf; 420 | outline: none; } 421 | 422 | ::-webkit-input-placeholder { 423 | font-size: 0.8rem; } 424 | 425 | input:-moz-placeholder { 426 | font-size: 0.8rem; } 427 | 428 | /** 429 | * Validamos los formularios que son "required": 430 | * http://coolvillage.es/ayuda-al-usuario-a-rellenar-formularios-con-css/ 431 | */ 432 | input:required:focus:invalid { 433 | background-color: #fef2e7; 434 | border: 1px solid #fce4cf; } 435 | 436 | input:required:focus:valid { 437 | background-color: #e9f5e9; 438 | border: 1px solid #5bb75b; } 439 | 440 | /*------------------------------------* $BOTONES 441 | \*------------------------------------*/ 442 | /* 443 | * Definimos los botones y sus variantes 444 | */ 445 | /** 446 | * .btn es la clase principal para definir un botón 447 | */ 448 | .btn--disabled, .btn--info, .btn--error, .btn--warning, .btn--success, .btn--primary { 449 | display: inline-block; 450 | line-height: 3; 451 | color: #4d4d4d; 452 | text-align: center; 453 | vertical-align: middle; 454 | font-size: 1rem; 455 | white-space: nowrap; 456 | background-color: transparent; 457 | border-top: 1px solid currentcolor; 458 | border-right: 1px solid currentcolor; 459 | border-bottom: 2px solid currentcolor; 460 | border-left: 1px solid currentcolor; 461 | cursor: pointer; 462 | margin: 0; 463 | padding-top: 0; 464 | padding-bottom: 0; 465 | padding-right: 1em; 466 | padding-left: 1em; 467 | border-radius: 3px; 468 | -webkit-transition: all 0.3s ease-in; 469 | -moz-transition: all 0.3s ease-in; 470 | -ms-transition: all 0.3s ease-in; 471 | -o-transition: all 0.3s ease-in; 472 | transition: all 0.3s ease-in; 473 | /** 474 | * Nadie quiere un botón con texto subrayado cuando 475 | * hacemos hover. 476 | */ } 477 | .btn--disabled:hover, .btn--info:hover, .btn--error:hover, .btn--warning:hover, .btn--success:hover, .btn--primary:hover { 478 | text-decoration: none; 479 | color: #4d4d4d; } 480 | .btn--disabled:active, .btn--info:active, .btn--error:active, .btn--warning:active, .btn--success:active, .btn--primary:active, .btn--disabled:focus, .btn--info:focus, .btn--error:focus, .btn--warning:focus, .btn--success:focus, .btn--primary:focus { 481 | outline: none; } 482 | .btn--disabled:visited, .btn--info:visited, .btn--error:visited, .btn--warning:visited, .btn--success:visited, .btn--primary:visited { 483 | color: #4d4d4d; } 484 | 485 | /*------------------------------------* $BOTONES-VARIANTES 486 | \*------------------------------------*/ 487 | /** 488 | * Variantes de los botones: color para dar sensaciones. 489 | * 490 | */ 491 | /** 492 | * Inputs con estilo de botones 493 | */ 494 | input[type="submit"].btn:hover { 495 | border-color: currentcolor; } 496 | 497 | /** 498 | * Botón no disponible 499 | */ 500 | .btn--disabled { 501 | -webkit-opacity: 0.5; 502 | -moz-opacity: 0.5; 503 | opacity: 0.5; 504 | cursor: not-allowed; 505 | background-color: #f2f2f2; } 506 | 507 | /** 508 | * Botón de Info 509 | */ 510 | .btn--info { 511 | color: #42b8dd; } 512 | .btn--info:hover { 513 | color: #42b8dd; } 514 | .btn--info:visited { 515 | color: #42b8dd; } 516 | 517 | /** 518 | * Botón de Error 519 | */ 520 | .btn--error { 521 | color: #da4f49; } 522 | .btn--error:hover { 523 | color: #da4f49; } 524 | .btn--error:visited { 525 | color: #da4f49; } 526 | 527 | /** 528 | * Botón de advertencia 529 | */ 530 | .btn--warning { 531 | color: #e78730; } 532 | .btn--warning:hover { 533 | color: #e78730; } 534 | .btn--warning:visited { 535 | color: #e78730; } 536 | 537 | /** 538 | * Botón de OK 539 | */ 540 | .btn--success { 541 | color: #5bb75b; } 542 | .btn--success:hover { 543 | color: #5bb75b; } 544 | .btn--success:visited { 545 | color: #5bb75b; } 546 | 547 | /** 548 | * Botón principal 549 | */ 550 | .btn--primary { 551 | color: #007EE5; } 552 | .btn--primary:hover { 553 | color: #007EE5; } 554 | .btn--primary:visited { 555 | color: #007EE5; } 556 | 557 | /*------------------------------------* $BOTONES-TAMAÑOS 558 | \*------------------------------------*/ 559 | /** 560 | * Variantes de los botones por tamaño. 561 | * 562 | */ 563 | .btn--mini { 564 | padding-right: 0.5em; 565 | padding-left: 0.5em; 566 | line-height: 1.5; 567 | font-size: 0.6rem; } 568 | 569 | .btn--small { 570 | padding-right: 1.5em; 571 | padding-left: 1.5em; 572 | line-height: 2; 573 | font-size: 0.8rem; } 574 | 575 | .btn--large { 576 | padding-right: 3em; 577 | padding-left: 3em; 578 | line-height: 3; 579 | font-size: 1.5rem; } 580 | 581 | /*------------------------------------* $BOTONES-GRUPOS 582 | \*------------------------------------*/ 583 | /** 584 | * Con esta clase podemos agrupar los botones 585 | * en grupos horizontales. 586 | * 587 | */ 588 | .btn-group { 589 | position: relative; } 590 | .btn-group [class^="btn--"], .btn-group [class*=" btn--"] { 591 | position: relative; 592 | border-radius: 0; 593 | float: left; 594 | margin-left: -1px; } 595 | .btn-group [class^="btn--"]:first-child, .btn-group [class*=" btn--"]:first-child { 596 | margin-left: 0; 597 | -webkit-border-top-right-radius: 0; 598 | -webkit-border-bottom-right-radius: 0; 599 | -webkit-border-bottom-left-radius: 3px; 600 | -webkit-border-top-left-radius: 3px; 601 | -moz-border-radius-topright: 0; 602 | -moz-border-radius-bottomright: 0; 603 | -moz-border-radius-bottomleft: 3px; 604 | -moz-border-radius-topleft: 3px; 605 | border-top-right-radius: 0; 606 | border-bottom-right-radius: 0; 607 | border-bottom-left-radius: 3px; 608 | border-top-left-radius: 3px; 609 | -webkit-background-clip: padding-box; 610 | -moz-background-clip: padding; 611 | background-clip: padding-box; } 612 | .btn-group [class^="btn--"]:last-child, .btn-group [class*=" btn--"]:last-child { 613 | -webkit-border-top-right-radius: 3px; 614 | -webkit-border-bottom-right-radius: 3px; 615 | -webkit-border-bottom-left-radius: 0; 616 | -webkit-border-top-left-radius: 0; 617 | -moz-border-radius-topright: 3px; 618 | -moz-border-radius-bottomright: 3px; 619 | -moz-border-radius-bottomleft: 0; 620 | -moz-border-radius-topleft: 0; 621 | border-top-right-radius: 3px; 622 | border-bottom-right-radius: 3px; 623 | border-bottom-left-radius: 0; 624 | border-top-left-radius: 0; 625 | -webkit-background-clip: padding-box; 626 | -moz-background-clip: padding; 627 | background-clip: padding-box; } 628 | 629 | /*------------------------------------* $IMÁGENES 630 | \*------------------------------------*/ 631 | .img--rounded { 632 | border-radius: 12px; } 633 | 634 | .img--polaroid { 635 | padding: 12px; 636 | background-color: white; 637 | border: 1px solid #f2f2f2; 638 | -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 639 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } 640 | 641 | .img--circle { 642 | border-radius: 100%; } 643 | 644 | /*------------------------------------* $LINKS 645 | \*------------------------------------*/ 646 | a { 647 | text-decoration: none; 648 | color: color-brand(color-brand); } 649 | a:visited { 650 | color: color-brand(color-brand); } 651 | a:hover { 652 | text-decoration: underline; 653 | color: color-brand(color-brand); } 654 | a:focus { 655 | outline: thin dotted; 656 | color: color-brand(color-brand); } 657 | a:hover, a:active { 658 | outline: 0; } 659 | 660 | /*------------------------------------* $TIPOGRAFÍA 661 | \*------------------------------------*/ 662 | h1, 663 | h2, 664 | h3, 665 | h4, 666 | h5, 667 | h6 { 668 | margin: 0; 669 | font-family: Georgia, Times, "Times New Roman"; 670 | font-weight: normal; 671 | color: inherit; 672 | text-rendering: optimizelegibility; } 673 | h1.altheader, 674 | h2.altheader, 675 | h3.altheader, 676 | h4.altheader, 677 | h5.altheader, 678 | h6.altheader { 679 | color: #4d4d4d; 680 | text-transform: uppercase; 681 | display: block; } 682 | 683 | h1, .h1 { 684 | margin-bottom: 0; 685 | font-size: 2.5rem; 686 | line-height: 1.5; } 687 | 688 | h2, .h2 { 689 | margin-bottom: 0; 690 | font-size: 2.4rem; 691 | line-height: 1.5; } 692 | 693 | h3, .h3 { 694 | margin-bottom: 0; 695 | font-size: 2.1rem; 696 | line-height: 1.5; } 697 | 698 | h4, .h4 { 699 | margin-bottom: 0; 700 | font-size: 1.8rem; 701 | line-height: 1.5; } 702 | 703 | h5, .h5 { 704 | margin-bottom: 0; 705 | font-size: 1.6rem; 706 | line-height: 1.5; } 707 | 708 | h6, .h6 { 709 | margin-bottom: 0; 710 | font-size: 1.4rem; 711 | line-height: 1.5; } 712 | 713 | p, 714 | ol, 715 | ul, 716 | dl, 717 | address { 718 | margin-bottom: 1.5; 719 | line-height: 1.5; } 720 | 721 | small { 722 | font-size: 0.6rem; 723 | color: #4d4d4d; } 724 | 725 | ul, 726 | ol { 727 | margin: 0 0 1.5 0; 728 | padding: 0 0 0 24px; } 729 | 730 | li ul, 731 | li ol { 732 | margin: 0; } 733 | 734 | blockquote { 735 | margin: 0 0 1.5 0; 736 | padding-left: 24px; 737 | border-left: 2px solid #f2f2f2; 738 | font-family: Georgia, Times, "Times New Roman"; 739 | font-style: normal; } 740 | blockquote p { 741 | font-size: 0.8rem; 742 | color: #4d4d4d; 743 | font-style: italic; 744 | line-height: 1.5; } 745 | 746 | q { 747 | quotes: none; 748 | font-style: italic; } 749 | 750 | blockquote p::before, 751 | blockquote p::after, 752 | q:before, 753 | q:after { 754 | content: ""; } 755 | 756 | cite { 757 | font-style: normal; } 758 | 759 | dl, 760 | dd { 761 | margin-bottom: 1.5; } 762 | 763 | dt { 764 | font-weight: bold; } 765 | 766 | .dl-horizontal dt { 767 | float: left; 768 | clear: left; 769 | width: 20.25%; 770 | text-align: right; } 771 | 772 | .dl-horizontal dd { 773 | margin-left: 22.78%; } 774 | 775 | abbr[title] { 776 | border-bottom: 1px dotted #f2f2f2; 777 | cursor: help; } 778 | 779 | b, strong { 780 | font-weight: bold; } 781 | 782 | dfn { 783 | font-style: italic; } 784 | 785 | ins { 786 | background-color: white; 787 | color: #4d4d4d; 788 | text-decoration: none; } 789 | 790 | mark { 791 | background-color: yellow; 792 | color: #4d4d4d; } 793 | 794 | pre, 795 | code, 796 | kbd, 797 | samp { 798 | font-family: "Courier New", monospace; 799 | font-size: 0.8rem; 800 | line-height: 1.5; } 801 | 802 | code { 803 | background-color: #f5f2f0; 804 | padding: 0.1em 0.3em; 805 | border-radius: 3px; } 806 | 807 | pre { 808 | white-space: pre; 809 | white-space: pre-wrap; 810 | word-wrap: break-word; } 811 | 812 | sub, 813 | sup { 814 | position: relative; 815 | font-size: 0.6rem; 816 | line-height: 0; 817 | vertical-align: 1.5; } 818 | 819 | sup { 820 | top: -.5em; } 821 | 822 | sub { 823 | bottom: -.25em; } 824 | 825 | hr { 826 | clear: both; 827 | display: block; 828 | margin: 1.5 0; 829 | padding: 0; 830 | height: 1px; 831 | border: 0; 832 | border-top: 1px solid #f2f2f2; } 833 | 834 | .intro { 835 | font-weight: bold; } 836 | 837 | /* 838 | * Creamos clases para cada uno de los tamaños de fuentes. Se pueden ver en Settings. 839 | * Son los nombres de las varables con el prefijo font- 840 | * Por ejemplo: 841 | 842 | .font-x-small { 843 | font-size: .8rem; 844 | } 845 | 846 | 847 | */ 848 | .font-x-small { 849 | font-size: 0.6rem; } 850 | 851 | .font-small { 852 | font-size: 0.8rem; } 853 | 854 | .font-normal { 855 | font-size: 1rem; } 856 | 857 | .font-big { 858 | font-size: 1.5rem; } 859 | 860 | .font-huge { 861 | font-size: 2rem; } 862 | 863 | /*------------------------------------* $TABLAS 864 | \*------------------------------------*/ 865 | table { 866 | width: 100%; 867 | max-width: 100%; 868 | margin-bottom: 1.5; 869 | border-collapse: collapse; 870 | border-spacing: 0; 871 | background-color: transparent; } 872 | table th, 873 | table td { 874 | padding: 8px; 875 | vertical-align: top; 876 | border-top: 1px solid #4d4d4d; 877 | font-size: 0.8rem; 878 | line-height: 1.5; 879 | text-align: left; } 880 | table th { 881 | font-weight: bold; } 882 | table thead th { 883 | vertical-align: bottom; } 884 | table colgroup + thead tr:first-child th, 885 | table colgroup + thead tr:first-child td, 886 | table thead:first-child tr:first-child th, 887 | table thead:first-child tr:first-child td { 888 | border-top: 0; } 889 | table tbody + tbody { 890 | border-top: 2px solid #4d4d4d; } 891 | table tbody tr td, 892 | table tbody tr th { 893 | -webkit-transition: background-color 0.25s 0 linear; 894 | -moz-transition: background-color 0.25s 0 linear; 895 | -ms-transition: background-color 0.25s 0 linear; 896 | -o-transition: background-color 0.25s 0 linear; 897 | transition: background-color 0.25s 0 linear; } 898 | table tbody tr:hover td, 899 | table tbody tr:hover th { 900 | background-color: #f2f2f2; } 901 | 902 | .table-condensed th, 903 | .table-condensed td { 904 | padding: 4px 5px; } 905 | 906 | .table-bordered { 907 | border: 1px solid #4d4d4d; 908 | border-left: 0; 909 | border-collapse: separate; 910 | *border-collapse: collapsed; } 911 | .table-bordered th, 912 | .table-bordered td { 913 | border-left: 1px solid #4d4d4d; } 914 | .table-bordered thead:first-child tr:first-child th, 915 | .table-bordered tbody:first-child tr:first-child th, 916 | .table-bordered tbody:first-child tr:first-child td { 917 | border-top: 0; } 918 | 919 | .table-striped tbody tr:nth-child(odd) td, 920 | .table-striped tbody tr:nth-child(odd) th { 921 | background-color: #f2f2f2; } 922 | 923 | /** 924 | * Layout and general styles 925 | **/ 926 | /*------------------------------------* $SITIO 927 | \*------------------------------------*/ 928 | @-webkit-viewport { 929 | width: device-width; } 930 | 931 | @-moz-viewport { 932 | width: device-width; } 933 | 934 | @-ms-viewport { 935 | width: device-width; } 936 | 937 | @-o-viewport { 938 | width: device-width; } 939 | 940 | @viewport { 941 | width: device-width; } 942 | 943 | html { 944 | background: white; 945 | font-size: 87.5%; 946 | -webkit-overflow-scrolling: touch; 947 | -webkit-tap-highlight-color: transparent; 948 | -webkit-text-size-adjust: 100%; 949 | -ms-text-size-adjust: 100%; } 950 | 951 | body { 952 | margin: 0; 953 | padding: 0; 954 | width: 100%; 955 | background-color: transparent; 956 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 957 | line-height: 1.5; 958 | color: #4d4d4d; } 959 | 960 | /** 961 | * A partir de aquí es donde debes escribir los estilos de posicionamiento 962 | * y detalles que forman tu web. Disfruta! 963 | */ 964 | /*------------------------------------* $TEXTURAS 965 | \*------------------------------------*/ 966 | .alert--success, .alert--warning, .alert--error, .alert--info, .alert--block { 967 | margin-bottom: 1.5; 968 | padding: 8px 35px 8px 14px; 969 | background-color: #fce4cf; 970 | border: 1px solid #f6ae6f; 971 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 972 | font-size: 0.8rem; 973 | color: #904809; 974 | border-radius: 3px; 975 | position: relative; } 976 | .alert--success .alert--heading, .alert--warning .alert--heading, .alert--error .alert--heading, .alert--info .alert--heading, .alert--block .alert--heading { 977 | color: inherit; } 978 | .alert--success .close, .alert--warning .close, .alert--error .close, .alert--info .close, .alert--block .close { 979 | position: absolute; 980 | top: -2px; 981 | right: 2px; 982 | float: right; 983 | font-size: 0.8rem; 984 | font-weight: bold; 985 | line-height: 18px; 986 | color: inherit; } 987 | 988 | .alert--success { 989 | background-color: #c5e6c5; 990 | border-color: #a2d6a2; 991 | color: #347834; } 992 | 993 | .alert--warning { 994 | background-color: #f7d6b9; 995 | border-color: #f2bc8b; 996 | color: #9f5512; } 997 | 998 | .alert--error { 999 | background-color: #f4cac8; 1000 | border-color: #eba19e; 1001 | color: #da4f49; } 1002 | 1003 | .alert--info { 1004 | background-color: #6dc8e5; 1005 | border-color: #24a1c8; 1006 | color: #05161b; } 1007 | 1008 | .alert--block { 1009 | padding-top: 14px; 1010 | padding-bottom: 14px; } 1011 | .alert--block .alert--heading { 1012 | margin-bottom: 0.1875; 1013 | font-size: inherit; 1014 | font-weight: bold; } 1015 | .alert--block > p, 1016 | .alert--block > ul { 1017 | margin-bottom: 0; } 1018 | .alert--block p + p { 1019 | margin-top: 5px; } 1020 | 1021 | .badge--primary, .badge--error, .badge--warning, .badge--success, .badge--info { 1022 | padding: 0.1em 0.3em; 1023 | margin-right: 3px; 1024 | font-size: 0.8rem; 1025 | white-space: nowrap; 1026 | border: 1px solid currentcolor; 1027 | border-radius: 3px; 1028 | color: #4d4d4d; 1029 | background-color: transparent; 1030 | -webkit-transition: background-color 0.25s 0 linear; 1031 | -moz-transition: background-color 0.25s 0 linear; 1032 | -ms-transition: background-color 0.25s 0 linear; 1033 | -o-transition: background-color 0.25s 0 linear; 1034 | transition: background-color 0.25s 0 linear; } 1035 | .badge--primary:hover, .badge--error:hover, .badge--warning:hover, .badge--success:hover, .badge--info:hover { 1036 | color: #4d4d4d; 1037 | text-decoration: none; 1038 | cursor: pointer; } 1039 | 1040 | .badge--error { 1041 | color: #da4f49; } 1042 | 1043 | .badge--warning { 1044 | color: #e78730; } 1045 | 1046 | .badge--success { 1047 | color: #5bb75b; } 1048 | 1049 | .badge--info { 1050 | color: #42b8dd; } 1051 | 1052 | .badge--icon { 1053 | display: inline-block; 1054 | color: #4d4d4d; 1055 | border: 1px solid #f2f2f2; 1056 | border-radius: 3px; 1057 | padding: 12px; 1058 | background-color: transparent; 1059 | text-align: center; } 1060 | 1061 | ::-moz-selection { 1062 | background-color: white; 1063 | color: #007EE5; 1064 | text-shadow: none; } 1065 | 1066 | ::selection { 1067 | background-color: white; 1068 | color: #007EE5; 1069 | text-shadow: none; } 1070 | 1071 | /** 1072 | * Componets used for layouts, headers, articles, etc... 1073 | **/ 1074 | /*------------------------------------* $grid 1075 | \*------------------------------------*/ 1076 | * { 1077 | -webkit-box-sizing: border-box; 1078 | box-sizing: border-box; } 1079 | 1080 | .grid { 1081 | display: -webkit-box; 1082 | display: -ms-flexbox; 1083 | display: flex; 1084 | -webkit-box-align: stretch; 1085 | -ms-flex-align: stretch; 1086 | align-items: stretch; 1087 | -ms-flex-wrap: wrap; 1088 | flex-wrap: wrap; } 1089 | 1090 | [class^="item-"], [class*=" item-"] { 1091 | background-color: pink; 1092 | -ms-flex-negative: 0; 1093 | flex-shrink: 0; 1094 | -webkit-box-flex: 1; 1095 | -ms-flex-positive: 1; 1096 | flex-grow: 1; 1097 | margin: 6px; 1098 | padding: 5px; 1099 | min-height: 100px; } 1100 | 1101 | .item-1 { 1102 | -ms-flex-preferred-size: 100%; 1103 | flex-basis: 100%; } 1104 | @media (min-width: 56.25em) { 1105 | .item-1 { 1106 | -webkit-box-flex: 0; 1107 | -ms-flex: 0 0 calc(8.33333% - 12px); 1108 | flex: 0 0 calc(8.33333% - 12px); } } 1109 | 1110 | .item-2 { 1111 | -ms-flex-preferred-size: 100%; 1112 | flex-basis: 100%; } 1113 | @media (min-width: 56.25em) { 1114 | .item-2 { 1115 | -webkit-box-flex: 0; 1116 | -ms-flex: 0 0 calc(16.66667% - 12px); 1117 | flex: 0 0 calc(16.66667% - 12px); } } 1118 | 1119 | .item-3 { 1120 | -ms-flex-preferred-size: 100%; 1121 | flex-basis: 100%; } 1122 | @media (min-width: 56.25em) { 1123 | .item-3 { 1124 | -webkit-box-flex: 0; 1125 | -ms-flex: 0 0 calc(25% - 12px); 1126 | flex: 0 0 calc(25% - 12px); } } 1127 | 1128 | .item-4 { 1129 | -ms-flex-preferred-size: 100%; 1130 | flex-basis: 100%; } 1131 | @media (min-width: 56.25em) { 1132 | .item-4 { 1133 | -webkit-box-flex: 0; 1134 | -ms-flex: 0 0 calc(33.33333% - 12px); 1135 | flex: 0 0 calc(33.33333% - 12px); } } 1136 | 1137 | .item-5 { 1138 | -ms-flex-preferred-size: 100%; 1139 | flex-basis: 100%; } 1140 | @media (min-width: 56.25em) { 1141 | .item-5 { 1142 | -webkit-box-flex: 0; 1143 | -ms-flex: 0 0 calc(41.66667% - 12px); 1144 | flex: 0 0 calc(41.66667% - 12px); } } 1145 | 1146 | .item-6 { 1147 | -ms-flex-preferred-size: 100%; 1148 | flex-basis: 100%; } 1149 | @media (min-width: 56.25em) { 1150 | .item-6 { 1151 | -webkit-box-flex: 0; 1152 | -ms-flex: 0 0 calc(50% - 12px); 1153 | flex: 0 0 calc(50% - 12px); } } 1154 | 1155 | .item-7 { 1156 | -ms-flex-preferred-size: 100%; 1157 | flex-basis: 100%; } 1158 | @media (min-width: 56.25em) { 1159 | .item-7 { 1160 | -webkit-box-flex: 0; 1161 | -ms-flex: 0 0 calc(58.33333% - 12px); 1162 | flex: 0 0 calc(58.33333% - 12px); } } 1163 | 1164 | .item-8 { 1165 | -ms-flex-preferred-size: 100%; 1166 | flex-basis: 100%; } 1167 | @media (min-width: 56.25em) { 1168 | .item-8 { 1169 | -webkit-box-flex: 0; 1170 | -ms-flex: 0 0 calc(66.66667% - 12px); 1171 | flex: 0 0 calc(66.66667% - 12px); } } 1172 | 1173 | .item-9 { 1174 | -ms-flex-preferred-size: 100%; 1175 | flex-basis: 100%; } 1176 | @media (min-width: 56.25em) { 1177 | .item-9 { 1178 | -webkit-box-flex: 0; 1179 | -ms-flex: 0 0 calc(75% - 12px); 1180 | flex: 0 0 calc(75% - 12px); } } 1181 | 1182 | .item-10 { 1183 | -ms-flex-preferred-size: 100%; 1184 | flex-basis: 100%; } 1185 | @media (min-width: 56.25em) { 1186 | .item-10 { 1187 | -webkit-box-flex: 0; 1188 | -ms-flex: 0 0 calc(83.33333% - 12px); 1189 | flex: 0 0 calc(83.33333% - 12px); } } 1190 | 1191 | .item-11 { 1192 | -ms-flex-preferred-size: 100%; 1193 | flex-basis: 100%; } 1194 | @media (min-width: 56.25em) { 1195 | .item-11 { 1196 | -webkit-box-flex: 0; 1197 | -ms-flex: 0 0 calc(91.66667% - 12px); 1198 | flex: 0 0 calc(91.66667% - 12px); } } 1199 | 1200 | .item-12 { 1201 | -ms-flex-preferred-size: 100%; 1202 | flex-basis: 100%; } 1203 | @media (min-width: 56.25em) { 1204 | .item-12 { 1205 | -webkit-box-flex: 0; 1206 | -ms-flex: 0 0 calc(100% - 12px); 1207 | flex: 0 0 calc(100% - 12px); } } 1208 | 1209 | /*------------------------------------* $UTILITIES 1210 | \*------------------------------------*/ 1211 | /* 1212 | * 1213 | * Selectors repeated constantly 1214 | */ 1215 | /* 1216 | * Classes for font- sizes, you can check them in Settings.scss 1217 | * Same name of the variables with the `font-` prefix 1218 | 1219 | .font-x-small { 1220 | font-size: .9rem; 1221 | } 1222 | 1223 | 1224 | */ 1225 | .font-x-small { 1226 | font-size: 0.6rem; 1227 | line-height: 1.5; } 1228 | 1229 | .font-small { 1230 | font-size: 0.8rem; 1231 | line-height: 1.5; } 1232 | 1233 | .font-normal { 1234 | font-size: 1rem; 1235 | line-height: 1.5; } 1236 | 1237 | .font-big { 1238 | font-size: 1.5rem; 1239 | line-height: 1.5; } 1240 | 1241 | .font-huge { 1242 | font-size: 2rem; 1243 | line-height: 1.5; } 1244 | 1245 | .float-right { 1246 | float: right; } 1247 | 1248 | .inline-block { 1249 | display: inline-block; } 1250 | 1251 | .nomargin-bottom { 1252 | margin-bottom: 0; } 1253 | 1254 | .margin-bottom { 1255 | margin-bottom: 24px; } 1256 | 1257 | /*------------------------------------* $PLACEHOLDERS 1258 | \*------------------------------------*/ 1259 | /** 1260 | * The ghost, nudged to maintain perfect centering 1261 | */ 1262 | /** 1263 | * Escondemos el texto solo VISUALMENTE 1264 | */ 1265 | /** 1266 | * Escondemos el texto de VISUALMENTE y SCREENREADERS 1267 | */ 1268 | /** 1269 | * Escondemos pero mantenemos layout. 1270 | */ 1271 | /** 1272 | * Visualmente escondido, pero se puede detectar con teclado (focus). 1273 | */ 1274 | .visuallyhidden.focusable:active, 1275 | .visuallyhidden.focusable:focus { 1276 | position: static; 1277 | clip: auto; 1278 | height: auto; 1279 | width: auto; 1280 | margin: 0; 1281 | overflow: visible; } 1282 | 1283 | /** 1284 | * Clear floats. 1285 | * http://bit.ly/1e3YaBH 1286 | */ 1287 | .btn-group:after { 1288 | content: ""; 1289 | display: table; 1290 | clear: both; } 1291 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | A Wakkos SASS Framework 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 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 |

Wakkos Sass framework

51 | Añade tu HTML 52 | 53 | 54 | 55 | Descomenta si usas scripts 56 | 57 | 58 | 59 | 60 | 61 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /prepros-6.config: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Wakkos-CSS-Framework", 3 | "firstRun": false, 4 | "exportConfig": true, 5 | "fileConfigs": [], 6 | "fileTree": { 7 | "expandedDirs": [ 8 | "scss" 9 | ], 10 | "hideSystemFiles": true, 11 | "systemFiles": [ 12 | ".*", 13 | "desktop.ini", 14 | "prepros.config", 15 | "$RECYCLE.BIN", 16 | "prepros.cfg", 17 | "prepros-6.config", 18 | "Prepros Export" 19 | ], 20 | "hideUnwatchedFiles": false 21 | }, 22 | "imports": [ 23 | { 24 | "path": "scss/style.scss", 25 | "imports": [ 26 | "scss/_partials.scss", 27 | "scss/lib/_settings.scss", 28 | "scss/lib/_mixins.scss", 29 | "scss/lib/_functions.scss", 30 | "scss/lib/_debug.scss", 31 | "scss/lib/_index.scss", 32 | "scss/lib/_reset.scss", 33 | "scss/base/_figures.scss", 34 | "scss/base/_forms.scss", 35 | "scss/base/_buttons.scss", 36 | "scss/base/_images.scss", 37 | "scss/base/_links.scss", 38 | "scss/base/_typography.scss", 39 | "scss/base/_tables.scss", 40 | "scss/layout/_site.scss", 41 | "scss/layout/_textures.scss", 42 | "scss/components/_grid.scss", 43 | "scss/components/_utilities.scss" 44 | ] 45 | }, 46 | { 47 | "path": "scss/_partials.scss", 48 | "imports": [ 49 | "scss/lib/_settings.scss", 50 | "scss/lib/_mixins.scss", 51 | "scss/lib/_functions.scss", 52 | "scss/lib/_debug.scss", 53 | "scss/lib/_index.scss", 54 | "scss/lib/_reset.scss", 55 | "scss/base/_figures.scss", 56 | "scss/base/_forms.scss", 57 | "scss/base/_buttons.scss", 58 | "scss/base/_images.scss", 59 | "scss/base/_links.scss", 60 | "scss/base/_typography.scss", 61 | "scss/base/_tables.scss", 62 | "scss/layout/_site.scss", 63 | "scss/layout/_textures.scss", 64 | "scss/components/_grid.scss", 65 | "scss/components/_utilities.scss" 66 | ] 67 | } 68 | ], 69 | "projectView": { 70 | "selectedView": "log" 71 | }, 72 | "fileWatcher": { 73 | "enabled": true, 74 | "watchedExtensions": [ 75 | "less", 76 | "sass", 77 | "scss", 78 | "styl", 79 | "md", 80 | "markdown", 81 | "coffee", 82 | "js", 83 | "jade", 84 | "haml", 85 | "slim", 86 | "ls", 87 | "kit", 88 | "png", 89 | "jpg", 90 | "jpeg", 91 | "ts", 92 | "pug", 93 | "css", 94 | "html", 95 | "htm", 96 | "php" 97 | ] 98 | }, 99 | "pathFilters": [ 100 | "node_modules", 101 | ".*", 102 | "bower_components", 103 | "prepros.config", 104 | "Prepros Export", 105 | "prepros-6.config", 106 | "prepros.cfg", 107 | "wp-admin", 108 | "wp-includes" 109 | ], 110 | "server": { 111 | "port": 7883, 112 | "assignNewPortAutomatically": true, 113 | "enable": true, 114 | "proxy": { 115 | "enable": false, 116 | "url": "" 117 | } 118 | }, 119 | "browser-sync": { 120 | "enable": false, 121 | "clicks": true, 122 | "forms": true, 123 | "scroll": true 124 | }, 125 | "live-reload": { 126 | "enable": true, 127 | "animate": true, 128 | "delay": 0 129 | }, 130 | "ftp-deploy": { 131 | "connectionType": "ftp", 132 | "remotePath": "", 133 | "uploadTimeout": 20000, 134 | "uploadOnChange": false, 135 | "ftp": { 136 | "secure": false, 137 | "keepAlive": true, 138 | "host": "", 139 | "port": 21, 140 | "user": "", 141 | "password": "" 142 | }, 143 | "sftp": { 144 | "host": "", 145 | "port": 22, 146 | "usePrivateKey": false, 147 | "username": "", 148 | "password": "", 149 | "privateKey": "", 150 | "passphrase": "" 151 | }, 152 | "pathFilters": [ 153 | "config.rb", 154 | "prepros.config", 155 | "prepros-6.config", 156 | "node_modules", 157 | "Prepros Export", 158 | ".git", 159 | ".idea", 160 | ".sass-cache", 161 | ".hg", 162 | ".svn", 163 | ".cache", 164 | ".DS_Store", 165 | "*.sass", 166 | "*.scss", 167 | "*.less", 168 | "*.pug", 169 | "*.jade", 170 | "*.styl", 171 | "*.haml", 172 | "*.slim", 173 | "*.coffee", 174 | "*.ls", 175 | "*.kit", 176 | "*.ts" 177 | ], 178 | "history": [] 179 | }, 180 | "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}", 181 | "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}", 182 | "autoprefixer": { 183 | "browsers": "last 5 versions" 184 | }, 185 | "file-type-pug": "{\"compilers\":[\"pug\"]}", 186 | "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}", 187 | "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}", 188 | "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}", 189 | "file-type-markdown": "{\"compilers\":[\"markdown\"]}", 190 | "file-type-haml": "{\"compilers\":[\"haml\"]}", 191 | "file-type-slim": "{\"compilers\":[\"slim\"]}", 192 | "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}", 193 | "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}", 194 | "file-type-kit": "{\"compilers\":[\"kit\"]}", 195 | "uglify-js": { 196 | "ie8": false, 197 | "compress": { 198 | "sequences": true, 199 | "properties": true, 200 | "dead_code": true, 201 | "drop_debugger": true, 202 | "unsafe": false, 203 | "unsafe_comps": false, 204 | "unsafe_math": false, 205 | "unsafe_proto": false, 206 | "unsafe_regexp": false, 207 | "conditionals": true, 208 | "comparisons": true, 209 | "evaluate": true, 210 | "booleans": true, 211 | "loops": true, 212 | "unused": true, 213 | "toplevel": false, 214 | "top_retain": "", 215 | "hoist_funs": true, 216 | "hoist_vars": false, 217 | "if_return": true, 218 | "join_vars": true, 219 | "collapse_vars": true, 220 | "reduce_vars": true, 221 | "warnings": true, 222 | "negate_iife": true, 223 | "pure_getters": false, 224 | "pure_funcs": [], 225 | "drop_console": false, 226 | "expression": false, 227 | "keep_fargs": true, 228 | "keep_fnames": false, 229 | "passes": 1, 230 | "keep_infinity": false, 231 | "side_effects": true, 232 | "global_defs": [] 233 | }, 234 | "output": { 235 | "ascii_only": false, 236 | "beautify": false, 237 | "comments": "", 238 | "indent_level": 4, 239 | "indent_start": 0, 240 | "inline_script": false, 241 | "keep_quoted_props": false, 242 | "max_line_len": false, 243 | "preamble": "", 244 | "preserve_line": false, 245 | "quote_keys": false, 246 | "quote_style": 0, 247 | "semicolons": true, 248 | "shebang": true, 249 | "width": 80 250 | } 251 | }, 252 | "cssnext": { 253 | "customProperties": true, 254 | "applyRule": true, 255 | "calc": false, 256 | "nesting": true, 257 | "customMedia": true, 258 | "mediaQueriesRange": true, 259 | "customSelectors": true, 260 | "attributeCaseInsensitive": true, 261 | "colorRebeccapurple": true, 262 | "colorHwb": true, 263 | "colorGray": true, 264 | "colorHexAlpha": true, 265 | "colorFunction": true, 266 | "fontVariant": true, 267 | "filter": true, 268 | "initial": true, 269 | "rem": true, 270 | "pseudoElements": true, 271 | "pseudoClassMatches": true, 272 | "pseudoClassNot": true, 273 | "pseudoClassAnyLink": true, 274 | "colorRgba": true, 275 | "overflowWrap": true 276 | }, 277 | "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}", 278 | "babel": { 279 | "useBabelRc": true, 280 | "presets": { 281 | "babel-preset-es2015": true 282 | }, 283 | "plugins": { 284 | "babel-plugin-syntax-jsx": true, 285 | "babel-plugin-transform-react-jsx": true, 286 | "babel-plugin-transform-async-to-generator": true, 287 | "babel-plugin-transform-class-properties": true, 288 | "babel-plugin-transform-object-rest-spread": true 289 | } 290 | }, 291 | "file-type-png": "{\"compilers\":[\"png\"]}", 292 | "file-type-jpg": "{\"compilers\":[\"jpg\"]}" 293 | } -------------------------------------------------------------------------------- /scss/_partials.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /*------------------------------------*\ 6 | $PARTIALS 7 | \*------------------------------------*/ 8 | /** 9 | * All files to be compiled 10 | */ 11 | 12 | /** 13 | * Scss Libraries, mixins, functions and any Scss focused logic 14 | **/ 15 | @import "lib/settings"; 16 | @import "lib/mixins"; 17 | @import "lib/functions"; 18 | @import "lib/debug"; 19 | 20 | 21 | 22 | 23 | 24 | /** 25 | * Base 26 | **/ 27 | @import "lib/index"; 28 | @import "lib/reset"; 29 | @import "lib/debug"; 30 | 31 | 32 | 33 | 34 | 35 | /** 36 | * HTML elements 37 | **/ 38 | @import "base/figures"; 39 | @import "base/forms"; 40 | @import "base/buttons"; 41 | @import "base/images"; 42 | @import "base/links"; 43 | @import "base/typography"; 44 | @import "base/tables"; 45 | 46 | 47 | 48 | 49 | 50 | /** 51 | * Layout and general styles 52 | **/ 53 | @import "layout/site"; 54 | @import "layout/textures"; 55 | 56 | 57 | 58 | 59 | 60 | /** 61 | * Componets used for layouts, headers, articles, etc... 62 | **/ 63 | @import "components/grid"; 64 | 65 | @import "components/utilities"; // always last file to import -------------------------------------------------------------------------------- /scss/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | @if $include-buttons == true{ 2 | 3 | 4 | 5 | 6 | 7 | /*------------------------------------*\ 8 | $BOTONES 9 | \*------------------------------------*/ 10 | /* 11 | * Definimos los botones y sus variantes 12 | */ 13 | 14 | 15 | /** 16 | * .btn es la clase principal para definir un botón 17 | */ 18 | %btn { 19 | display: inline-block; 20 | line-height: $baselineheight * 2; 21 | color: $buttoncolor; 22 | text-align: center; 23 | vertical-align: middle; 24 | font-size: fs(normal); 25 | white-space: nowrap; 26 | background-color: $buttonbackground; 27 | border-top: $buttonborderwidth $buttonborderstyle $buttonbordercolor; 28 | border-right: $buttonborderwidth $buttonborderstyle $buttonbordercolor; 29 | border-bottom: ($buttonborderwidth * 2) $buttonborderstyle $buttonbordercolor; 30 | border-left: $buttonborderwidth $buttonborderstyle $buttonbordercolor; 31 | cursor: pointer; 32 | margin:0; 33 | padding-top: 0; 34 | padding-bottom:0; 35 | padding-right:1em; 36 | padding-left: 1em; 37 | border-radius: $radius; 38 | @include transition(all $hovertransition ease-in); 39 | 40 | /** 41 | * Nadie quiere un botón con texto subrayado cuando 42 | * hacemos hover. 43 | */ 44 | 45 | &:hover { 46 | text-decoration: none; 47 | color: $buttoncolor; 48 | } 49 | &:active, 50 | &:focus{ 51 | outline:none; 52 | } 53 | &:visited { 54 | color: $buttoncolor; 55 | } 56 | } 57 | 58 | /*------------------------------------*\ 59 | $BOTONES-VARIANTES 60 | \*------------------------------------*/ 61 | /** 62 | * Variantes de los botones: color para dar sensaciones. 63 | * 64 | */ 65 | 66 | 67 | /** 68 | * Inputs con estilo de botones 69 | */ 70 | input[type="submit"].btn:hover { 71 | border-color: $buttonbordercolor; 72 | } 73 | 74 | 75 | /** 76 | * Botón no disponible 77 | */ 78 | .btn--disabled { 79 | @extend %btn; 80 | @include opacity(.5); 81 | cursor: not-allowed; 82 | background-color: $color-lightergrey; 83 | } 84 | 85 | 86 | 87 | 88 | 89 | /** 90 | * Botón de Info 91 | */ 92 | .btn--info { 93 | @extend %btn; 94 | color: $color-info; 95 | &:hover { 96 | color: $color-info; 97 | } 98 | &:visited { 99 | color: $color-info; 100 | } 101 | } 102 | 103 | 104 | 105 | 106 | /** 107 | * Botón de Error 108 | */ 109 | .btn--error { 110 | @extend %btn; 111 | color: $color-error; 112 | &:hover { 113 | color: $color-error; 114 | } 115 | &:visited { 116 | color: $color-error; 117 | } 118 | } 119 | 120 | 121 | 122 | 123 | /** 124 | * Botón de advertencia 125 | */ 126 | .btn--warning { 127 | @extend %btn; 128 | color: $color-warning; 129 | &:hover { 130 | color: $color-warning; 131 | } 132 | &:visited { 133 | color: $color-warning; 134 | } 135 | } 136 | 137 | 138 | 139 | 140 | /** 141 | * Botón de OK 142 | */ 143 | 144 | .btn--success { 145 | @extend %btn; 146 | color: $color-success; 147 | &:hover { 148 | color: $color-success; 149 | } 150 | &:visited { 151 | color: $color-success; 152 | } 153 | } 154 | 155 | 156 | 157 | /** 158 | * Botón principal 159 | */ 160 | 161 | .btn--primary { 162 | @extend %btn; 163 | color: $color-brand; 164 | &:hover { 165 | color: $color-brand; 166 | } 167 | &:visited { 168 | color: $color-brand; 169 | } 170 | } 171 | 172 | 173 | 174 | 175 | 176 | /*------------------------------------*\ 177 | $BOTONES-TAMAÑOS 178 | \*------------------------------------*/ 179 | /** 180 | * Variantes de los botones por tamaño. 181 | * 182 | */ 183 | 184 | .btn--mini{ 185 | padding-right:0.5em; 186 | padding-left: 0.5em; 187 | line-height:1.5; 188 | font-size: fs(x-small); 189 | } 190 | 191 | .btn--small{ 192 | padding-right:1.5em; 193 | padding-left: 1.5em; 194 | line-height:2; 195 | font-size: fs(small); 196 | } 197 | 198 | .btn--large{ 199 | padding-right:3em; 200 | padding-left: 3em; 201 | line-height:3; 202 | font-size: fs(big); 203 | } 204 | 205 | 206 | 207 | 208 | /*------------------------------------*\ 209 | $BOTONES-GRUPOS 210 | \*------------------------------------*/ 211 | /** 212 | * Con esta clase podemos agrupar los botones 213 | * en grupos horizontales. 214 | * 215 | */ 216 | .btn-group { 217 | position: relative; 218 | @extend %clearfix; 219 | [class^="btn--"], [class*=" btn--"] { 220 | position: relative; 221 | border-radius: 0; 222 | float: left; 223 | margin-left: -1px; 224 | &:first-child { 225 | margin-left: 0; 226 | @include border-radius(0, 0, $radius, $radius); 227 | } 228 | &:last-child { 229 | @include border-radius($radius, $radius, 0, 0); 230 | } 231 | } 232 | } 233 | 234 | 235 | 236 | } // endif -------------------------------------------------------------------------------- /scss/base/_figures.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /*------------------------------------*\ 6 | $ELEMENTOS-FIGURE 7 | \*------------------------------------*/ 8 | figure { 9 | margin-bottom : $baselineheight; 10 | 11 | img { 12 | margin-bottom : $baselineheight / 4; 13 | } 14 | 15 | figcaption { 16 | display : block; 17 | font-weight : normal; 18 | font-size: fs(small); 19 | font-style : italic; 20 | color : $color-grey; 21 | } 22 | } -------------------------------------------------------------------------------- /scss/base/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $FORMULARIOS 8 | \*------------------------------------*/ 9 | 10 | form { 11 | margin : 0 0 $baselineheight 0; 12 | 13 | fieldset { 14 | margin-bottom : $baselineheight; 15 | padding : 0; 16 | border-width : 0; 17 | } 18 | 19 | legend { 20 | display : block; 21 | width : 100%; 22 | margin-bottom : $baselineheight * 2; 23 | padding : 0; 24 | color : $textcolor; 25 | border : 0; 26 | border-bottom : $inputborderwidth $inputborderstyle $inputborder; 27 | white-space : normal; 28 | 29 | small { 30 | font-size: fs(x-small); 31 | color : $color-lightgrey; 32 | } 33 | } 34 | 35 | p { 36 | margin-bottom : $baselineheight / 2; 37 | } 38 | 39 | ul { 40 | list-style-type : none; 41 | margin : 0 0 $baselineheight 0; 42 | padding : 0; 43 | } 44 | 45 | br { 46 | display : none; 47 | } 48 | } 49 | 50 | label, 51 | input, 52 | button, 53 | select, 54 | textarea { 55 | font-size: fs(x-small); 56 | border-radius: $radius; 57 | vertical-align : baseline; 58 | } 59 | 60 | input, 61 | button, 62 | select, 63 | textarea { 64 | font-family : $basefont; 65 | @include box-sizing(border-box); 66 | } 67 | 68 | label { 69 | display : inline-block; 70 | margin-bottom : $baselineheight/ 8; 71 | font-family: fs(x-small); 72 | font-weight : bold; 73 | color : $textcolor; 74 | cursor : pointer; 75 | } 76 | 77 | input, 78 | textarea, 79 | select { 80 | display : inline-block; 81 | vertical-align: middle; 82 | width : 100%; 83 | padding : 4px; 84 | margin-bottom : $baselineheight; 85 | background-color : $inputbackground; 86 | border : $inputborderwidth $inputborderstyle $inputborder; 87 | color : $textcolor; 88 | -webkit-appearance: none; 89 | -moz-appearance: none; 90 | appearance: none; 91 | 92 | &:hover { 93 | border-color : $inputhover; 94 | } 95 | } 96 | 97 | 98 | // Some fields width variations, add as many as you want or modify them. 99 | 100 | .input-small { 101 | width : 60px; 102 | } 103 | 104 | .input-medium { 105 | width: 150px 106 | } 107 | .input-big { 108 | width : 300px; 109 | } 110 | 111 | input[type="image"] { 112 | width : auto; 113 | height : auto; 114 | padding : 0; 115 | margin : 3px 0; 116 | line-height : normal; 117 | cursor : pointer; 118 | } 119 | 120 | input[type="checkbox"], 121 | input[type="radio"] { 122 | width : $gutterwidth / 2; 123 | height : $gutterwidth / 2; 124 | padding : 0; 125 | margin :0 3px 0 0; 126 | line-height : normal; 127 | cursor : pointer; 128 | background-color: $color-white; 129 | &:checked { 130 | background-color: $inputborder; 131 | border-color: $color-white; 132 | border-width: 1px; 133 | box-shadow: 0 0 0 1px $inputborder; 134 | } 135 | + label { 136 | margin-right: $gutterwidth; 137 | } 138 | } 139 | input[type="radio"] { 140 | border-radius: 100%; 141 | } 142 | 143 | label { 144 | input[type="checkbox"], 145 | input[type="radio"] { 146 | margin-right: $gutterwidth / 4; 147 | } 148 | } 149 | 150 | input[type="image"] { 151 | border : 0; 152 | @include box-shadow(none); 153 | } 154 | 155 | input[type="file"] { 156 | width : auto; 157 | padding : initial; 158 | line-height : initial; 159 | border : initial; 160 | background-color : transparent; 161 | background-color : initial; 162 | @include box-shadow(none); 163 | } 164 | 165 | input[type="button"], 166 | input[type="reset"], 167 | input[type="submit"] { 168 | width : auto; 169 | height : auto; 170 | cursor : pointer; 171 | *overflow : visible; 172 | } 173 | 174 | 175 | textarea { 176 | @include resize(vertical); 177 | height : auto; 178 | overflow : auto; 179 | vertical-align : top; 180 | } 181 | 182 | input[type="hidden"] { 183 | display : none; 184 | } 185 | 186 | 187 | 188 | // disabled 189 | 190 | input[disabled], 191 | select[disabled], 192 | textarea[disabled], 193 | input[readonly], 194 | select[readonly], 195 | textarea[readonly] { 196 | @include opacity(.5); 197 | cursor : not-allowed; 198 | } 199 | 200 | // focus and active 201 | 202 | input:focus, 203 | textarea:focus { 204 | border-color : $inputfocus; 205 | box-shadow: 0 0 1px 1px $color-lightgrey; 206 | outline: none; 207 | } 208 | 209 | ::-webkit-input-placeholder { 210 | font-size: fs(small); 211 | } 212 | 213 | input:-moz-placeholder { 214 | font-size: fs(small); 215 | } 216 | 217 | 218 | /** 219 | * Validamos los formularios que son "required": 220 | * http://coolvillage.es/ayuda-al-usuario-a-rellenar-formularios-con-css/ 221 | */ 222 | 223 | input:required:focus:invalid { 224 | background-color:lighten($color-alert, 5%); 225 | border:1px solid $color-alert; 226 | } 227 | input:required:focus:valid { 228 | background-color:lighten($color-success, 40%); 229 | border:1px solid $color-success; 230 | } -------------------------------------------------------------------------------- /scss/base/_images.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $IMÁGENES 8 | \*------------------------------------*/ 9 | 10 | @if $include-images == true { 11 | 12 | 13 | .img--rounded { 14 | border-radius :$radius * 4; 15 | } 16 | 17 | .img--polaroid { 18 | padding : $gutterwidth / 2; 19 | background-color : $color-white; 20 | border : 1px solid $color-border; 21 | box-shadow : 0 1px 3px rgba(0,0,0,.1); 22 | } 23 | 24 | .img--circle { 25 | border-radius : 100%; 26 | } 27 | 28 | } //endif -------------------------------------------------------------------------------- /scss/base/_links.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $LINKS 8 | \*------------------------------------*/ 9 | a { 10 | text-decoration : none; 11 | color : $linkcolor; 12 | 13 | &:visited { 14 | color : $linkcolorvisited; 15 | } 16 | 17 | &:hover { 18 | text-decoration : underline; 19 | color : $linkcolorhover; 20 | } 21 | 22 | &:focus { 23 | outline : thin dotted; 24 | color : $linkcolorfocus; 25 | } 26 | 27 | &:hover, 28 | &:active { 29 | outline : 0; 30 | } 31 | } -------------------------------------------------------------------------------- /scss/base/_tables.scss: -------------------------------------------------------------------------------- 1 | @if $include-tables == true{ 2 | 3 | 4 | 5 | 6 | 7 | /*------------------------------------*\ 8 | $TABLAS 9 | \*------------------------------------*/ 10 | 11 | table { 12 | width : 100%; 13 | max-width : 100%; 14 | margin-bottom : $baselineheight; 15 | border-collapse : collapse; 16 | border-spacing : 0; 17 | background-color : $tablebackground; 18 | 19 | th, 20 | td { 21 | padding : 8px; 22 | vertical-align : top; 23 | border-top : $tableborderwidth $tableborderstyle $tableborder; 24 | font-size: fs(small); 25 | line-height : $baselineheight; 26 | text-align : left; 27 | } 28 | 29 | th { 30 | font-weight : bold; 31 | } 32 | 33 | thead th { 34 | vertical-align : bottom; 35 | } 36 | 37 | colgroup + thead tr:first-child th, 38 | colgroup + thead tr:first-child td, 39 | thead:first-child tr:first-child th, 40 | thead:first-child tr:first-child td { 41 | border-top : 0; 42 | } 43 | 44 | tbody + tbody { 45 | border-top : $tableborderwidth * 2 $tableborderstyle $tableborder; 46 | } 47 | 48 | tbody tr td, 49 | tbody tr th { 50 | @include transition(background-color .25s 0 linear); 51 | } 52 | 53 | tbody tr:hover td, 54 | tbody tr:hover th { 55 | background-color : $tablehover; 56 | } 57 | } 58 | 59 | // CONDENSED ==================================================== 60 | 61 | .table-condensed { 62 | 63 | th, 64 | td { 65 | padding : 4px 5px; } 66 | } 67 | 68 | // BORDERED ==================================================== 69 | 70 | .table-bordered { 71 | border : $tableborderwidth $tableborderstyle $tableborder; 72 | border-left : 0; 73 | border-collapse : separate; 74 | *border-collapse : collapsed; 75 | 76 | th, 77 | td { 78 | border-left : $tableborderwidth $tableborderstyle $tableborder; 79 | } 80 | 81 | thead:first-child tr:first-child th, 82 | tbody:first-child tr:first-child th, 83 | tbody:first-child tr:first-child td { 84 | border-top : 0; 85 | } 86 | } 87 | 88 | // STRIPED ==================================================== 89 | 90 | .table-striped { 91 | 92 | tbody tr:nth-child(odd) td, 93 | tbody tr:nth-child(odd) th { 94 | background-color : $tablestripe; 95 | } 96 | } 97 | 98 | } // endif -------------------------------------------------------------------------------- /scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $TIPOGRAFÍA 8 | \*------------------------------------*/ 9 | 10 | 11 | // HEADINGS ==================================================== 12 | 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6 { 19 | margin : 0; 20 | font-family : $baseheadingfont; 21 | font-weight : $baseheadingfontweight; 22 | color : $baseheadingfontcolor; 23 | text-rendering : optimizelegibility; 24 | &.altheader { 25 | color:$color-grey; 26 | text-transform: uppercase; 27 | display: block; 28 | } 29 | } 30 | 31 | 32 | // Set headers line-height, margin bottom and font size 33 | @each $header, 34 | $margin-bot, 35 | $font-size, 36 | $line-height 37 | in (h1, 0, 2.5, 1.5) 38 | (h2, 0, 2.4, 1.5) 39 | (h3, 0, 2.1, 1.5) 40 | (h4, 0, 1.8, 1.5) 41 | (h5, 0, 1.6, 1.5) 42 | (h6, 0, 1.4, 1.5){ 43 | 44 | #{$header}, .#{$header} { 45 | margin-bottom : $margin-bot; 46 | font-size: ($font-size) * 1rem; 47 | line-height : $line-height; 48 | } 49 | } 50 | // TYPOGRAFÍA ==================================================== 51 | 52 | p, 53 | ol, 54 | ul, 55 | dl, 56 | address { 57 | margin-bottom : $baselineheight; 58 | line-height : $baselineheight; 59 | } 60 | 61 | small { 62 | font-size: fs(x-small); 63 | color: $color-grey; 64 | } 65 | 66 | ul, 67 | ol { 68 | margin : 0 0 $baselineheight 0; 69 | padding : 0 0 0 $gutterwidth; 70 | } 71 | 72 | li ul, 73 | li ol { 74 | margin : 0; 75 | } 76 | 77 | // blockquote 78 | 79 | blockquote { 80 | margin : 0 0 $baselineheight 0; 81 | padding-left : $gutterwidth; 82 | border-left : 2px solid $color-border; 83 | font-family : $altfont; 84 | font-style : normal; 85 | p { 86 | font-size: fs(small); 87 | color:$color-grey; 88 | font-style: italic; 89 | line-height: 1.5; 90 | } 91 | } 92 | 93 | q { 94 | quotes : none; 95 | font-style: italic; 96 | } 97 | 98 | blockquote p::before, 99 | blockquote p::after, 100 | q:before, 101 | q:after { 102 | content : ""; 103 | } 104 | 105 | cite { 106 | font-style : normal; 107 | } 108 | 109 | // definition lists 110 | 111 | dl, 112 | dd { 113 | margin-bottom : $baselineheight; 114 | } 115 | 116 | dt { 117 | font-weight : bold; 118 | } 119 | 120 | .dl-horizontal { 121 | 122 | dt { 123 | float : left; 124 | clear : left; 125 | width : 20.25%; 126 | text-align : right; 127 | } 128 | 129 | dd { 130 | margin-left : 22.78%; 131 | } 132 | } 133 | 134 | // text-level 135 | 136 | abbr[title] { 137 | border-bottom : 1px dotted $color-border; 138 | cursor : help; 139 | } 140 | 141 | b, strong { 142 | font-weight : bold; 143 | } 144 | 145 | dfn { 146 | font-style : italic; 147 | } 148 | 149 | ins { 150 | background-color : lighten($color-brand, 75%); 151 | color : $textcolor; 152 | text-decoration : none; 153 | } 154 | 155 | mark { 156 | background-color : yellow; 157 | color : $textcolor; 158 | } 159 | 160 | pre, 161 | code, 162 | kbd, 163 | samp { 164 | font-family : $codefont; 165 | font-size: fs(small); 166 | line-height : $baselineheight; 167 | } 168 | code { 169 | background-color: #f5f2f0; 170 | padding: 0.1em 0.3em; 171 | border-radius: $radius; 172 | } 173 | pre { 174 | white-space : pre; 175 | white-space : pre-wrap; 176 | word-wrap : break-word; 177 | } 178 | 179 | sub, 180 | sup { 181 | position : relative; 182 | font-size: fs(x-small); 183 | line-height : 0; 184 | vertical-align : $baselineheight; 185 | } 186 | 187 | sup { 188 | top : -.5em; 189 | } 190 | 191 | sub { 192 | bottom : -.25em; 193 | } 194 | 195 | 196 | hr { 197 | clear : both; 198 | display : block; 199 | margin : $baselineheight 0; 200 | padding : 0; 201 | height : 1px; 202 | border : 0; 203 | border-top : 1px solid $color-border; 204 | } 205 | 206 | // Especificidades de fuentes 207 | 208 | .intro { 209 | font-weight: bold; 210 | } 211 | 212 | /* 213 | * Creamos clases para cada uno de los tamaños de fuentes. Se pueden ver en Settings. 214 | * Son los nombres de las varables con el prefijo font- 215 | * Por ejemplo: 216 | 217 | .font-x-small { 218 | font-size: .8rem; 219 | } 220 | 221 | 222 | */ 223 | 224 | @each $name, $value in $size-vars { 225 | .font-#{$name} { 226 | font-size: $value * 1rem; 227 | } 228 | } -------------------------------------------------------------------------------- /scss/components/_grid.scss: -------------------------------------------------------------------------------- 1 | @if $include-grid == true{ 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $grid 8 | \*------------------------------------*/ 9 | 10 | 11 | * { 12 | box-sizing: border-box; 13 | } 14 | .grid { 15 | display: flex; 16 | align-items: stretch; 17 | flex-wrap: wrap; 18 | 19 | } 20 | 21 | [class^="item-"], [class*=" item-"] { 22 | background-color: pink; 23 | flex-shrink: 0; 24 | flex-grow: 1; 25 | margin: $gap / 2; 26 | padding: 5px; 27 | min-height: 100px; // remove, it's only for presentation purposes. 28 | } 29 | 30 | @for $i from 1 to ($grid-size + 1) { 31 | // Total size (We would need to substract the margin to avoid wrapping); 32 | $width : 100 / $grid-size * $i * 1%; 33 | 34 | .item-#{$i} { 35 | flex-basis: 100%; 36 | @include respond-to(medium) { 37 | flex:0 0 calc(#{$width} - #{$gap}); 38 | } 39 | } 40 | } 41 | 42 | } // end if 43 | -------------------------------------------------------------------------------- /scss/components/_utilities.scss: -------------------------------------------------------------------------------- 1 | @if $include-utilities == true{ 2 | 3 | /*------------------------------------*\ 4 | $UTILITIES 5 | \*------------------------------------*/ 6 | /* 7 | * 8 | * Selectors repeated constantly 9 | */ 10 | 11 | /* 12 | * Classes for font- sizes, you can check them in Settings.scss 13 | * Same name of the variables with the `font-` prefix 14 | 15 | .font-x-small { 16 | font-size: .9rem; 17 | } 18 | 19 | 20 | */ 21 | 22 | @each $name, $value in $size-vars { 23 | .font-#{$name} { 24 | font-size: $value * 1rem; 25 | line-height: 1.5; 26 | } 27 | } 28 | 29 | 30 | 31 | 32 | .float-right{ 33 | float:right; 34 | } 35 | 36 | // Para cuando queremos tener varios elementos en inline-block: 37 | .inline-block { 38 | display: inline-block; 39 | } 40 | 41 | // Diferentes especificaciones para márgenes 42 | .nomargin-bottom { 43 | margin-bottom: 0; 44 | } 45 | .margin-bottom { 46 | margin-bottom: $padding; 47 | } 48 | 49 | 50 | 51 | 52 | 53 | /*------------------------------------*\ 54 | $PLACEHOLDERS 55 | \*------------------------------------*/ 56 | // Scss placeholder 57 | 58 | 59 | 60 | %text-overflow { 61 | overflow : hidden; 62 | text-overflow : ellipsis; 63 | white-space : nowrap; 64 | } 65 | 66 | /** 67 | * The ghost, nudged to maintain perfect centering 68 | */ 69 | %vcenter { 70 | &:before { 71 | content: ''; 72 | display: inline-block; 73 | height: 100%; 74 | vertical-align: middle; 75 | } 76 | } 77 | 78 | /** 79 | * Escondemos el texto solo VISUALMENTE 80 | */ 81 | %hide-text { 82 | text-indent: 100%; 83 | white-space: nowrap; 84 | overflow: hidden; 85 | } 86 | 87 | /** 88 | * Escondemos el texto de VISUALMENTE y SCREENREADERS 89 | */ 90 | %hidden { 91 | display : none !important; 92 | visibility : hidden; 93 | } 94 | 95 | 96 | /** 97 | * Escondemos pero mantenemos layout. 98 | */ 99 | %invisible { 100 | visibility : hidden; 101 | } 102 | 103 | 104 | /** 105 | * Visualmente escondido, pero se puede detectar con teclado (focus). 106 | */ 107 | .visuallyhidden.focusable:active, 108 | .visuallyhidden.focusable:focus { 109 | position : static; 110 | clip : auto; 111 | height : auto; 112 | width : auto; 113 | margin : 0; 114 | overflow: visible; 115 | } 116 | 117 | 118 | /** 119 | * Clear floats. 120 | * http://bit.ly/1e3YaBH 121 | */ 122 | %clearfix { 123 | &:after{ 124 | content:""; 125 | display:table; 126 | clear:both; 127 | } 128 | } 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | } // if -------------------------------------------------------------------------------- /scss/layout/_site.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $SITIO 8 | \*------------------------------------*/ 9 | 10 | 11 | @-webkit-viewport { 12 | width : device-width; 13 | } 14 | 15 | @-moz-viewport { 16 | width : device-width; 17 | } 18 | 19 | @-ms-viewport { 20 | width : device-width; 21 | } 22 | 23 | @-o-viewport { 24 | width : device-width; 25 | } 26 | 27 | @viewport { 28 | width : device-width; 29 | } 30 | 31 | html { 32 | background : $background; 33 | font-size : 87.5%; 34 | -webkit-overflow-scrolling : touch; 35 | -webkit-tap-highlight-color : transparent; 36 | -webkit-text-size-adjust : 100%; 37 | -ms-text-size-adjust : 100%; 38 | } 39 | 40 | body { 41 | margin : 0; 42 | padding : 0; 43 | width : 100%; 44 | background-color : transparent; 45 | font-family : $basefont; 46 | line-height : $baselineheight; 47 | color : $textcolor; 48 | } 49 | 50 | /** 51 | * A partir de aquí es donde debes escribir los estilos de posicionamiento 52 | * y detalles que forman tu web. Disfruta! 53 | */ 54 | 55 | -------------------------------------------------------------------------------- /scss/layout/_textures.scss: -------------------------------------------------------------------------------- 1 | @if $include-textures == true{ 2 | 3 | 4 | 5 | 6 | 7 | /*------------------------------------*\ 8 | $TEXTURAS 9 | \*------------------------------------*/ 10 | // Más estilos adicionales: 11 | // http://twitter.github.com/bootstrap/components.html#alerts" 12 | // https://github.com/twitter/bootstrap/blob/master/less/alerts.less" 13 | 14 | 15 | %alert { 16 | margin-bottom : $baselineheight; 17 | padding : 8px 35px 8px 14px; 18 | background-color : $color-alert; 19 | border : $alertborderwidth $alertborderstyle $alertbordercolor; 20 | font-family : $basefont; 21 | font-size: fs(small); 22 | color : $alerttext; 23 | border-radius: $radius; 24 | position: relative; 25 | 26 | .alert--heading { 27 | color : inherit; 28 | } 29 | 30 | .close { 31 | position : absolute; 32 | top : -2px; 33 | right : 2px; 34 | float : right; 35 | font-size: fs(small); 36 | font-weight : bold; 37 | line-height : 18px; 38 | color : inherit; 39 | } 40 | } 41 | 42 | .alert--success { 43 | @extend %alert; 44 | background-color : $alertsuccesscolor; 45 | border-color : $alertsuccessborder; 46 | color : $alertsuccesstext; 47 | } 48 | 49 | .alert--warning { 50 | @extend %alert; 51 | background-color : $alertwarningcolor; 52 | border-color : $alertwarningborder; 53 | color : $alertwarningtext; 54 | } 55 | 56 | .alert--error { 57 | @extend %alert; 58 | background-color : $alerterrorcolor; 59 | border-color : $alerterrorborder; 60 | color : $alerterrortext; 61 | } 62 | 63 | .alert--info { 64 | @extend %alert; 65 | background-color : $alertinfocolor; 66 | border-color : $alertinfoborder; 67 | color : $alertinfotext; 68 | } 69 | 70 | // alert block 71 | 72 | .alert--block { 73 | @extend %alert; 74 | padding-top : 14px; 75 | padding-bottom : 14px; 76 | 77 | .alert--heading { 78 | margin-bottom : $baselineheight / 8; 79 | font-size : inherit; 80 | font-weight : bold; 81 | } 82 | 83 | > p, 84 | > ul { 85 | margin-bottom : 0; 86 | } 87 | 88 | p + p { 89 | margin-top : 5px; 90 | } 91 | } 92 | 93 | // BADGES ==================================================== 94 | 95 | %badge { 96 | padding: 0.1em 0.3em; 97 | margin-right: 3px; 98 | font-size: fs(small); 99 | white-space : nowrap; 100 | border: 1px solid currentcolor; 101 | border-radius: $radius; 102 | color : $badgecolor; 103 | background-color : $badgebackground; 104 | @include transition(background-color .25s 0 linear); 105 | 106 | &:hover { 107 | color : $badgecolor; 108 | text-decoration : none; 109 | cursor : pointer; 110 | } 111 | } 112 | 113 | 114 | .badge--primary { 115 | @extend %badge; 116 | } 117 | .badge--error { 118 | @extend %badge; 119 | color : $color-error; 120 | } 121 | 122 | .badge--warning { 123 | @extend %badge; 124 | color : $color-warning; 125 | } 126 | 127 | .badge--success { 128 | @extend %badge; 129 | color : $color-success; 130 | } 131 | 132 | .badge--info { 133 | @extend %badge; 134 | color : $color-info; 135 | } 136 | 137 | .badge--icon { 138 | display: inline-block; 139 | color: $badgecolor; 140 | border: 1px solid $color-border; 141 | border-radius: $radius; 142 | padding: $gutterwidth / 2; 143 | background-color: $badgebackground; 144 | text-align: center; 145 | } 146 | 147 | 148 | // Web Colours 149 | ::-moz-selection { 150 | background-color : lighten($color-brand, 65%); 151 | color : $color-brand; 152 | text-shadow : none; 153 | } 154 | 155 | ::selection { 156 | background-color : lighten($color-brand, 65%); 157 | color : $color-brand; 158 | text-shadow : none; 159 | } 160 | 161 | } // endif -------------------------------------------------------------------------------- /scss/lib/_debug.scss: -------------------------------------------------------------------------------- 1 | @if $include-debug== true{ 2 | 3 | 4 | 5 | 6 | 7 | /*------------------------------------*\ 8 | $DEBUG 9 | \*------------------------------------*/ 10 | /** 11 | * Activa esta hoja de estilos para detectar visualmente cualquier 12 | * anidación impropia o marcado potencialmente inválido. 13 | * 14 | * Rojo == Definitivamente un error 15 | * Amarillo == a revisar 16 | * Ninguno == debería estar bien 17 | * 18 | * Este método de validación no es más que una guía, no te bases en el 19 | * para validar tu marcado 20 | * 21 | */ 22 | 23 | 24 | /** 25 | * Hay elementos vacíos? 26 | */ 27 | :empty{ 28 | outline:5px solid yellow; 29 | } 30 | 31 | 32 | /** 33 | * Las imágenes requieren el atributo ALT, un ALT vacío no es del todo malo 34 | * pero una imagen sin ALT definitivamente está mal. 35 | */ 36 | img{ 37 | outline:5px solid red; 38 | } 39 | img[alt]{ 40 | outline:none; 41 | } 42 | img[alt=""]{ 43 | outline:5px solid yellow; 44 | } 45 | 46 | 47 | /** 48 | * Los links algunas veces, no siempre, se benefician del atributo "title". 49 | * Links sin 'title' no son inválidos, pero es buena idea revisar. 50 | */ 51 | a{ 52 | outline:5px solid yellow; 53 | } 54 | a[title]{ 55 | outline:none; 56 | } 57 | 58 | 59 | /** 60 | * Revisa los "href" con contenido dudoso. 61 | */ 62 | a[href="#"], 63 | a[href*="javascript"]{ 64 | outline:5px solid yellow; 65 | } 66 | 67 | 68 | /** 69 | * El atributo 'target=""' es.... bueno, revisa. 70 | */ 71 | a[target]{ 72 | outline:5px solid yellow; 73 | } 74 | 75 | 76 | /** 77 | * Asegúrate que una lista solo anida LI's 78 | */ 79 | ul, 80 | ol{ 81 | > *:not(li){ 82 | outline:5px solid red; 83 | } 84 | } 85 | 86 | 87 | /** 88 | * Deberíamos asignar un atributo 'scope' a los th 89 | * http://bit.ly/1aHBDgW 90 | */ 91 | th{ 92 | outline:5px solid yellow; 93 | } 94 | th[scope]{ 95 | outline:none; 96 | } 97 | 98 | 99 | /** 100 | * los tr hijos de 'table' no son buenos, ¿necesitabas un 'thead' / 'tbody'? 101 | */ 102 | table > tr{ 103 | outline:5px solid yellow; 104 | } 105 | 106 | 107 | /** 108 | * `tfoot` debe estar *antes* de `tbody`. 109 | */ 110 | tbody + tfoot{ 111 | outline:5px solid yellow; 112 | } 113 | 114 | 115 | /** 116 | * Forms necesitan del atributo `action` 117 | */ 118 | form{ 119 | outline:5px solid red; 120 | } 121 | form[action]{ 122 | outline:none; 123 | } 124 | 125 | 126 | /** 127 | * Varios elementos de formularios requieren atributos. 'input' necsita de 'type' 128 | * 'textarea' necesita `rows' y 'cols' y 'submit' necesita del atributo 'value'. 129 | */ 130 | textarea, 131 | input{ 132 | outline:5px solid red; 133 | } 134 | input[type]{ 135 | outline:none; 136 | } 137 | textarea[rows][cols]{ 138 | outline:none; 139 | } 140 | input[type=submit]{ 141 | outline:5px solid red; 142 | } 143 | input[type=submit][value]{ 144 | outline:none; 145 | } 146 | 147 | 148 | /** 149 | * Evitamos estilos _inline_ a ser posible. 150 | */ 151 | [style]{ 152 | outline:5px solid yellow; 153 | } 154 | 155 | 156 | /** 157 | * Deberías evitar IDs para CSS. 158 | */ 159 | [id]{ 160 | outline:5px solid yellow; 161 | } 162 | } // endif 163 | -------------------------------------------------------------------------------- /scss/lib/_functions.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $FUNCTIONS 3 | \*------------------------------------*/ 4 | 5 | 6 | 7 | 8 | /* 9 | * Function to control Index values 10 | 11 | .selector { z-index: z(goku);} 12 | 13 | * Compiles to: 14 | 15 | .selector { z-index: 9001;} 16 | 17 | * You can see the current values and variables in settings.scss 18 | */ 19 | 20 | @function z($layer) { 21 | @return map-get($z-layers, $layer); 22 | } 23 | 24 | 25 | /* 26 | * Function to keep font size consistent 27 | 28 | .selector { font-size: fs(x-small);} 29 | 30 | * You can see the current values and variables in settings.scss 31 | */ 32 | 33 | @function fs($font-size) { 34 | @return map-get($size-vars, $font-size) * 1rem; 35 | } 36 | 37 | 38 | 39 | /* 40 | * Function to use colors in our Scss 41 | 42 | .selector { font-size: fs(x-small);} 43 | 44 | * You can see the current values and variables in settings.scss 45 | */ 46 | @function color($color) { 47 | @return map-get($colors, $color); 48 | } 49 | 50 | 51 | -------------------------------------------------------------------------------- /scss/lib/_index.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $CONTENIDO 3 | \*------------------------------------*/ 4 | /** 5 | * Contenido..................... Esto que lees 6 | 7 | * Variables..................... Configuramos todas las variables del framework 8 | 9 | * Mixins........................ Mixins de SASS 10 | 11 | * Helpers....................... Clases de ayuda 12 | 13 | * Reset......................... Reinicio de valores CSS 14 | 15 | * Fuentes....................... Fuentes que vamos a importar 16 | 17 | * Links......................... Formas y estilos de los links 18 | 19 | * Tablas........................ Estilos de las tablas 20 | 21 | * Botones....................... Estilos de Botones, skins y variantes 22 | 23 | * Elementos..................... Elementos varios como Imagen, HR, etc... 24 | 25 | * Tipografía.................... Encabezados, small, párrafos, listas, etc... 26 | 27 | * Navegación.................... Una navegación, por si quieres usar esta y no la tuya propia 28 | 29 | * Formularios................... Estilos de todos los elementos de formularios y sus variantes 30 | 31 | * Sitio......................... Aquí escribes tus estilos para la web se vea como tú quieres ;) 32 | 33 | * Paginación.................... Estilos básicos para las paginaciones 34 | 35 | * Texturas...................... Badges, cajas y wells 36 | 37 | * Breakpoints................... Importamos breakpoints basados en las variables @bp$ 38 | 39 | * Patron........................ Estilos para la guía de patrones 40 | */ -------------------------------------------------------------------------------- /scss/lib/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $MIXINS 8 | \*------------------------------------*/ 9 | 10 | 11 | 12 | /* 13 | * Fácil de usar: las variables a usar están en settings.scss y son: 14 | 15 | 'small' : 48em, 16 | 'medium' : 56.25em, 17 | 'large' : 68.75em, 18 | 19 | * Y el uso va como sigue: 20 | 21 | .foo { 22 | color: red; 23 | @include respond-to('small') { 24 | color: blue; 25 | } 26 | } 27 | */ 28 | @mixin respond-to($breakpoint) { 29 | @if map-has-key($breakpoints, $breakpoint) { 30 | @media (min-width: map-get($breakpoints, $breakpoint)) { 31 | @content; 32 | } 33 | } 34 | 35 | @else { 36 | @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " 37 | + "Please make sure it is defined in `$breakpoints` map."; 38 | } 39 | } 40 | 41 | /** 42 | * Centrar y dar un ancho máximo igual a $pagemaxwidth. 43 | */ 44 | @mixin max-width($max-width : $pagemaxwidth) { 45 | margin-left:auto; 46 | margin-right:auto; 47 | max-width: $max-width; 48 | width:100%; 49 | } 50 | 51 | 52 | // gradients 53 | @mixin horizontal($startColor : $color-white, $endColor : $color-lightergrey) { 54 | background-color: $endColor; 55 | background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ 56 | background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ 57 | background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ 58 | background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 59 | background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 60 | background-image : linear-gradient(left, $startColor, $endColor); // W3C 61 | background-repeat : repeat-x; 62 | } 63 | 64 | @mixin vertical($startColor : $color-white, $endColor: $color-lightergrey) { 65 | background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ 66 | background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ 67 | background-color : $endColor; 68 | background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ 69 | background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 70 | background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 71 | background-image : linear-gradient(top, $startColor, $endColor); // W3C 72 | background-repeat : repeat-x; 73 | } 74 | 75 | @mixin directional($startColor : $color-white, $endColor : $color-lightergrey, $deg : 45deg) { 76 | background-color : $endColor; 77 | background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ 78 | background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 79 | background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ 80 | background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 81 | background-image : linear-gradient($deg, $startColor, $endColor); // W3C 82 | background-repeat : repeat-x; 83 | } 84 | 85 | // .bordered(COLOR, COLOR, COLOR, COLOR); 86 | @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { 87 | border-top : solid 1px $top-color; 88 | border-left : solid 1px $left-color; 89 | border-right : solid 1px $right-color; 90 | border-bottom : solid 1px $bottom-color; 91 | } 92 | 93 | // .border-radius(VALUE,VALUE,VALUE,VALUE); 94 | @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { 95 | -webkit-border-top-right-radius : $topright; 96 | -webkit-border-bottom-right-radius : $bottomright; 97 | -webkit-border-bottom-left-radius : $bottomleft; 98 | -webkit-border-top-left-radius : $topleft; 99 | -moz-border-radius-topright : $topright; 100 | -moz-border-radius-bottomright : $bottomright; 101 | -moz-border-radius-bottomleft : $bottomleft; 102 | -moz-border-radius-topleft : $topleft; 103 | border-top-right-radius : $topright; 104 | border-bottom-right-radius : $bottomright; 105 | border-bottom-left-radius : $bottomleft; 106 | border-top-left-radius : $topleft; 107 | -webkit-background-clip : padding-box; 108 | -moz-background-clip : padding; 109 | background-clip : padding-box; 110 | } 111 | 112 | // .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) 113 | @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { 114 | -webkit-box-shadow : $shadow; 115 | box-shadow : $shadow; 116 | } 117 | 118 | // .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); 119 | @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { 120 | -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); 121 | -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); 122 | box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); 123 | } 124 | 125 | // .opacity(VALUE); 126 | @mixin opacity($opacity : .5) { 127 | -webkit-opacity : $opacity; 128 | -moz-opacity : $opacity; 129 | opacity : $opacity; 130 | } 131 | 132 | // .rotate(VALUEdeg); 133 | @mixin rotate($deg) { 134 | -webkit-transform : rotate($deg); 135 | -moz-transform : rotate($deg); 136 | -ms-transform : rotate($deg); 137 | -o-transform : rotate($deg); 138 | transform : rotate($deg); 139 | } 140 | 141 | // .scale(VALUE); 142 | @mixin scale($ratio) { 143 | -webkit-transform : scale($ratio); 144 | -moz-transform : scale($ratio); 145 | -ms-transform : scale($ratio); 146 | -o-transform : scale($ratio); 147 | transform : scale($ratio); 148 | } 149 | 150 | // .skew(VALUE, VALUE); 151 | @mixin skew($x: 0, $y: 0) { 152 | -webkit-transform : skew($x, $y); 153 | -moz-transform : skew($x, $y); 154 | -ms-transform : skew($x, $y); 155 | -o-transform : skew($x, $y); 156 | transform : skew($x, $y); 157 | } 158 | 159 | // .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); 160 | @mixin transition($transition) { 161 | -webkit-transition : $transition; 162 | -moz-transition : $transition; 163 | -ms-transition : $transition; 164 | -o-transition : $transition; 165 | transition : $transition; 166 | } 167 | 168 | // .translate(VALUE, VALUE) 169 | @mixin translate($x: 0, $y: 0) { 170 | -webkit-transform : translate($x, $y); 171 | -moz-transform : translate($x, $y); 172 | -ms-transform : translate($x, $y); 173 | -o-transform : translate($x, $y); 174 | transform : translate($x, $y); 175 | } 176 | 177 | @mixin translate3d($x: 0, $y: 0, $z: 0) { 178 | -webkit-transform : translate3d($x, $y, $z); 179 | -moz-transform : translate3d($x, $y, $z); 180 | -ms-transform : translate3d($x, $y, $z); 181 | -o-transform : translate3d($x, $y, $z); 182 | transform : translate3d($x, $y, $z); 183 | } 184 | 185 | 186 | // .background-alpha(VALUE VALUE); 187 | @mixin background-alpha($color: $color-white, $alpha: 1) { 188 | background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); 189 | } 190 | 191 | // .background-size(VALUE VALUE); 192 | @mixin background-size($size){ 193 | -webkit-background-size : $size; 194 | -moz-background-size : $size; 195 | -o-background-size : $size; 196 | background-size : $size; 197 | } 198 | 199 | // .background-clip(VALUE); (border-box, padding-box, content-box) 200 | @mixin background-clip($clip) { 201 | -webkit-background-clip : $clip; 202 | -moz-background-clip : $clip; 203 | background-clip : $clip; 204 | } 205 | 206 | // .box-sizing(VALUE); (border-box, padding-box, content-box) 207 | @mixin box-sizing($boxsize: border-box) { 208 | -webkit-box-sizing : $boxsize; 209 | -moz-box-sizing : $boxsize; 210 | -ms-box-sizing : $boxsize; 211 | box-sizing : $boxsize; 212 | } 213 | 214 | 215 | // .resize(VALUE) (none, both, horizontal, vertical, inherit) 216 | 217 | @mixin resize($direction: both) { 218 | resize : $direction; 219 | overflow : auto; 220 | } 221 | 222 | // .userselect(VALUE) (all, element, none, text) 223 | 224 | @mixin user-select($select) { 225 | -webkit-user-select : $select; 226 | -moz-user-select : $select; 227 | -o-user-select : $select; 228 | user-select : $select; 229 | } 230 | 231 | 232 | 233 | 234 | 235 | // .columns(250px, 0, 24px, COLOR, solid, 1px) 236 | 237 | @mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eee, $columnRuleStyle: solid, $columnRuleWidth: 1px) { 238 | -webkit-column-width : $colwidth; 239 | -webkit-column-count : $colcount; 240 | -webkit-column-gap : $colgap; 241 | -webkit-column-rule-color : $columnRuleColor; 242 | -webkit-column-rule-style : $columnRuleStyle; 243 | -webkit-column-rule-width : $columnRuleWidth; 244 | -moz-column-width : $colwidth; 245 | -moz-column-count : $colcount; 246 | -moz-column-gap : $colgap; 247 | -moz-column-rule-color : $columnRuleColor; 248 | -moz-column-rule-style : $columnRuleStyle; 249 | -moz-column-rule-width : $columnRuleWidth; 250 | column-width : $colwidth; 251 | column-count : $colcount; 252 | column-gap : $colgap; 253 | column-rule-color : $columnRuleColor; 254 | column-rule-style : $columnRuleStyle; 255 | column-rule-width : $columnRuleWidth; 256 | } 257 | 258 | 259 | // 260 | //Creamos prefijos para todo dios 261 | // 262 | // `@include vendor(border-radius, 4px);` 263 | // 264 | // 265 | @mixin vendor($property, $value...){ 266 | -webkit-#{$property}:$value; 267 | -moz-#{$property}:$value; 268 | -ms-#{$property}:$value; 269 | -o-#{$property}:$value; 270 | #{$property}:$value; 271 | } -------------------------------------------------------------------------------- /scss/lib/_placeholders.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $PLACEHOLDERS 8 | \*------------------------------------*/ 9 | 10 | %text-overflow { 11 | overflow : hidden; 12 | text-overflow : ellipsis; 13 | white-space : nowrap; 14 | } 15 | 16 | /** 17 | * The ghost, nudged to maintain perfect centering 18 | */ 19 | %vcenter { 20 | &:before { 21 | content: ''; 22 | display: inline-block; 23 | height: 100%; 24 | vertical-align: middle; 25 | } 26 | } 27 | 28 | /** 29 | * Escondemos el texto solo VISUALMENTE 30 | */ 31 | %hide-text { 32 | text-indent: 100%; 33 | white-space: nowrap; 34 | overflow: hidden; 35 | } 36 | 37 | /** 38 | * Escondemos el texto de VISUALMENTE y SCREENREADERS 39 | */ 40 | %hidden { 41 | display : none !important; 42 | visibility : hidden; 43 | } 44 | 45 | 46 | /** 47 | * Escondemos pero mantenemos layout. 48 | */ 49 | %invisible { 50 | visibility : hidden; 51 | } 52 | 53 | 54 | /** 55 | * Visualmente escondido, pero se puede detectar con teclado (focus). 56 | */ 57 | .visuallyhidden.focusable:active, 58 | .visuallyhidden.focusable:focus { 59 | position : static; 60 | clip : auto; 61 | height : auto; 62 | width : auto; 63 | margin : 0; 64 | overflow: visible; 65 | } 66 | 67 | 68 | /** 69 | * Clear floats. 70 | * http://bit.ly/1e3YaBH 71 | */ 72 | %clearfix { 73 | &:after{ 74 | content:""; 75 | display:table; 76 | clear:both; 77 | } 78 | } -------------------------------------------------------------------------------- /scss/lib/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | /*------------------------------------*\ 7 | $RESET 8 | \*------------------------------------*/ 9 | 10 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,main,menu,nav,section,time,mark,audio,video 11 | { 12 | margin:0; 13 | padding:0; 14 | border:0; 15 | outline:0; 16 | font-size:100%; 17 | vertical-align:baseline; 18 | background:transparent 19 | } 20 | 21 | article, 22 | aside, 23 | details, 24 | figcaption, 25 | figure, 26 | footer, 27 | header, 28 | main, 29 | menu, 30 | nav, 31 | section, 32 | summary 33 | { 34 | display:block 35 | } 36 | 37 | *{ 38 | &, 39 | &::before, 40 | &::after{ 41 | @include vendor(box-sizing, border-box); 42 | } 43 | } 44 | 45 | img { 46 | max-width : 100%; 47 | border-width : 0; 48 | vertical-align : middle; 49 | -ms-interpolation-mode : bicubic; 50 | } 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /scss/lib/_settings.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $SETTINGS 3 | \*------------------------------------*/ 4 | /** 5 | * 6 | * Define all variables and values to use 7 | * 8 | */ 9 | 10 | 11 | 12 | 13 | 14 | /*------------------------------------*\ 15 | $INCLUDED-COMPONENTS 16 | \*------------------------------------*/ 17 | /** 18 | * We can tell the components to use here, `true` for used, `false` unused. 19 | * Remember you can overwrite this value anywhere else by removing the `!default` property 20 | */ 21 | 22 | // Base components: Usually we include all of this, except in small sites where, 23 | // let's say, tables.scss won't be used. 24 | $include-grid: true!default; 25 | $include-debug: false!default; 26 | $include-buttons: true!default; 27 | $include-images: true!default; 28 | $include-utilities: true!default; 29 | $include-tables: true!default; 30 | $include-textures: true!default; 31 | 32 | 33 | 34 | 35 | 36 | // Components used and created for the current project (or for many projects) 37 | $include-grids: true!default; 38 | $include-utilities: true!default; 39 | 40 | 41 | 42 | 43 | // Partials used to create layout: headers, footers, articles, etc... 44 | $include-site: true!default; 45 | $include-textures: true!default; 46 | 47 | 48 | 49 | 50 | 51 | /*------------------------------------*\ 52 | $BREAKPOINTS 53 | \*------------------------------------*/ 54 | /** 55 | * "Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!" 56 | * Used with mixin `respond-to($breakpoint)`: 57 | 58 | .div { 59 | color: pink; 60 | @include respond-to(medium) { 61 | color: maroon; 62 | } 63 | } 64 | * 65 | */ 66 | 67 | $breakpoints: ( 68 | 'small': 48em, 69 | 'medium': 56.25em, 70 | 'large': 68.75em, 71 | ) !default; 72 | 73 | 74 | 75 | 76 | 77 | /*------------------------------------*\ 78 | $Z-INDEX 79 | \*------------------------------------*/ 80 | /** 81 | * We can have control over z-index and not ending up having 900 to infinite. 82 | * To use this values, we use the `z($layers)` function: 83 | .element { 84 | z-index: z(goku); 85 | } 86 | * 87 | */ 88 | 89 | $z-layers: ( 90 | "modal": 9000, 91 | "over": 900, 92 | "default": 1, 93 | "below": -1, 94 | "bottomless-pit": -9000 95 | ); 96 | 97 | 98 | 99 | 100 | 101 | /*------------------------------------*\ 102 | $DIR 103 | \*------------------------------------*/ 104 | /** 105 | * Sometimes we change image dir from develop to production: 106 | */ 107 | $image-dir: "../img"; 108 | 109 | //Use: background-image:url("#{$image-dir}/btn.jpg"); 110 | 111 | /* 112 | * In case we use local fonts (I use them fewer and fewer lately) 113 | */ 114 | 115 | $font-dir: "../fonts"; 116 | 117 | 118 | 119 | 120 | 121 | 122 | /*------------------------------------*\ 123 | $LAYOUT 124 | \*------------------------------------*/ 125 | /** 126 | * Constant layout values, apart from these we can also declare values 127 | * for different blocks sizes and more. 128 | */ 129 | $baselineheight: 1.5; 130 | $gutterwidth: 24px; 131 | $padding: $gutterwidth; 132 | $minigutter: $gutterwidth / 2; 133 | $pagemaxwidth: 1024px; 134 | $radius: 3px; 135 | $hovertransition: .3s; 136 | $animationtime: .8s; 137 | 138 | 139 | 140 | 141 | /*------------------------------------*\ 142 | $GRID 143 | \*------------------------------------*/ 144 | /** 145 | * These are the variables we use for our Grid 146 | */ 147 | $gap : $minigutter; 148 | $grid-size: 12; 149 | 150 | 151 | 152 | 153 | /*------------------------------------*\ 154 | $FONT-FACE 155 | \*------------------------------------*/ 156 | /** 157 | * Fonts definitions 158 | */ 159 | $basefont : "Helvetica Neue", Helvetica, Arial, sans-serif; 160 | $altfont : Georgia, Times, "Times New Roman"; 161 | $codefont : "Courier New", monospace; 162 | $baseheadingfont : $altfont; 163 | 164 | $baseheadingfontweight : normal; 165 | $baseheadingfontcolor : inherit; 166 | 167 | $basefontsize : 16; 168 | 169 | 170 | /* 171 | * Font Size variables are defined in a Scss MAP, this MAP will create 172 | * a class (in `utilities.scss`) for every size with the value in REM units, you can check 173 | * `utilities.scss` if you need to change the loop: 174 | 175 | .x-small { font-size: .8rem} 176 | 177 | * We also have a function to assign font sizes, call `fs`: 178 | 179 | .selector { font-size: fs(x-small);} 180 | 181 | * 182 | */ 183 | $size-vars: ( 184 | "x-small" : .6, 185 | "small" : .8, 186 | "normal" : 1, 187 | "big" : 1.5, 188 | "huge" : 2 189 | ); 190 | 191 | 192 | 193 | 194 | /*------------------------------------*\ 195 | $COLORS 196 | \*------------------------------------*/ 197 | /** 198 | * Brand colors 199 | */ 200 | $color-brand: #007EE5; 201 | $color-secondary: #DACC3E; 202 | $color-cta: #7CB920; 203 | 204 | 205 | 206 | 207 | 208 | /** 209 | * Grey Scale 210 | * This is mainly to hold back designers from adding 200 different greys ;) 211 | */ 212 | $color-black: rgb(0,0,0); 213 | $color-darkergrey: lighten(black, 10%); 214 | $color-darkgrey: lighten(black, 20%); 215 | $color-grey: lighten(black, 30%); 216 | $color-lightgrey: lighten(black, 75%); 217 | $color-lightergrey: lighten(black, 95%); 218 | $color-white: rgb(255,255,255); 219 | 220 | /** 221 | * Colors Map 222 | * We may also need a map with all these colors, to create classes. 223 | */ 224 | $colors-map: ( 225 | color-brand: $color-brand, 226 | color-secondary: $color-secondary, 227 | color-black: $color-black, 228 | color-darkergrey: $color-darkergrey, 229 | color-darkgrey: $color-darkgrey, 230 | color-grey: $color-grey, 231 | color-lightgrey: $color-lightgrey, 232 | color-lightergrey: $color-lightergrey, 233 | color-white: $color-white 234 | ); 235 | 236 | 237 | // Atmosphere 238 | $background: $color-white; 239 | $headingcolor: lighten(black, 20%); 240 | $textcolor: lighten(black, 30%); 241 | $color-border : $color-lightergrey; 242 | 243 | 244 | 245 | 246 | 247 | 248 | // Links 249 | $linkcolor : color-brand(color-brand); 250 | $linkcolorhover : $linkcolor; 251 | $linkcolorvisited : $linkcolor; 252 | $linkcolorfocus : $linkcolor; 253 | 254 | 255 | 256 | 257 | 258 | 259 | /*------------------------------------*\ 260 | $TEXTURAS 261 | \*------------------------------------*/ 262 | /** 263 | * Definimos Colores y elementos de popups, mensajes de alerta, etc... 264 | */ 265 | $color-alert : rgb(252,228,207); 266 | $color-error : rgb(218,79,73); 267 | $color-info : rgb(66, 184, 221); 268 | $color-success : rgb(91,183,91); 269 | $color-warning : rgb(231,135,48); 270 | 271 | 272 | // Texturas de popups 273 | $alertbordercolor : darken($color-alert, 20%); 274 | $alertborderwidth : 1px; 275 | $alertborderstyle : solid; 276 | $alerttext : darken($color-alert, 60%); 277 | 278 | // Error 279 | $alerterrorcolor : lighten($color-error, 30%); 280 | $alerterrorborder : lighten($color-error, 20%); 281 | $alerterrortext : $color-error; 282 | 283 | // Info 284 | $alertinfocolor : lighten($color-info, 10%); 285 | $alertinfoborder : darken($color-info, 10%); 286 | $alertinfotext : darken($color-info, 50%); 287 | 288 | 289 | // Success 290 | $alertsuccesscolor : lighten($color-success, 30%); 291 | $alertsuccessborder : lighten($color-success, 20%); 292 | $alertsuccesstext : darken($color-success, 20%); 293 | 294 | // Advertencia 295 | $alertwarningcolor : lighten($color-warning, 30%); 296 | $alertwarningborder : lighten($color-warning, 20%); 297 | $alertwarningtext : darken($color-warning, 20%); 298 | 299 | 300 | 301 | // badges 302 | $badgebackground : transparent; 303 | $badgecolor : $textcolor; 304 | 305 | // botones 306 | $buttonbackground : transparent; 307 | $buttonbordercolor : currentcolor; 308 | $buttoncolor : $textcolor; 309 | $buttonborderwidth : 1px; 310 | $buttonborderstyle : solid; 311 | 312 | // boxes (well) 313 | $wellbackground : red; 314 | $wellbordercolor : darken($wellbackground, 20%); 315 | $wellborderwidth : 1px; 316 | $wellborderstyle : solid; 317 | $wellshadow : darken($wellbackground, 10%); 318 | $wellshadowblur : 10px; 319 | 320 | // tablas 321 | $tablebackground : transparent; 322 | $tablestripe : $color-lightergrey; 323 | $tablehover : $color-lightergrey; 324 | $tableborder : $color-grey; 325 | $tableborderwidth : 1px; 326 | $tableborderstyle : solid; 327 | 328 | // formularios 329 | $inputbackground : $color-white; 330 | $inputborder : $color-lightgrey; 331 | $inputborderwidth : 1px; 332 | $inputborderstyle : solid; 333 | $inputhover : lighten($color-black, 50%); 334 | $inputfocus : $color-brand, 40%; 335 | $placeholdercolor : $color-lightergrey; 336 | 337 | 338 | // Navegación 339 | $nav-width: 42px; 340 | $nav-height: $nav-width; 341 | $nav-icon-size: 16px; 342 | $nav-color: $color-brand; 343 | $nav-background: $color-white; 344 | $nav-borders: lighten($nav-background, 10%); 345 | $nav-lists-background: $color-brand; 346 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /*------------------------------------*\ 6 | $STYLE 7 | \*------------------------------------*/ 8 | /** 9 | * Let's define the settings file here, or the partials to be included. 10 | * This way we can have different .css files compiled with different partials each. 11 | */ 12 | @import "partials"; -------------------------------------------------------------------------------- /styleguides/css/styleguide.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*------------------------------------*\ 3 | $STYLE 4 | \*------------------------------------*/ 5 | /** 6 | * Aquí incluímos todos los módulos (archivos .scss) que se van 7 | * a compilar en el CSS definitivo: /css/style.css. 8 | */ 9 | /** 10 | * Librerías 11 | **/ 12 | /*------------------------------------*\ 13 | $SETTINGS 14 | \*------------------------------------*/ 15 | /*------------------------------------*\ 16 | $OBJETOS Y ABSTRACCIONES 17 | \*------------------------------------*/ 18 | /** 19 | * Qué objetos y abstracciones vamos a usar? (true: se usa, false: no se usa) 20 | */ 21 | /** 22 | * 23 | * Definimos y configuramos las variables CSS que vamos a utilizar 24 | * 25 | */ 26 | /*------------------------------------*\ 27 | $BREAKPOINTS 28 | \*------------------------------------*/ 29 | /** 30 | * "Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!" 31 | * Lo usamos con el mixin respond-to($breakpoint): 32 | 33 | .text { 34 | color: pink; 35 | @include respond-to(medium) { 36 | color: maroon; 37 | } 38 | } 39 | * 40 | */ 41 | /*------------------------------------*\ 42 | $Z-INDEX 43 | \*------------------------------------*/ 44 | /** 45 | * Podemos controlar los z-index con variables más reconocibles. 46 | * Para usarlo, implementamos la función z($layers): 47 | .element { 48 | z-index: z(goku); 49 | } 50 | * 51 | */ 52 | /*------------------------------------*\ 53 | $DIR 54 | \*------------------------------------*/ 55 | /** 56 | * Con agregar esta variable a las imágenes declaradas en CSS apañamos: 57 | */ 58 | /* 59 | * Igual para las fuentes 60 | */ 61 | /* 62 | * src:url('../fonts/icomoon.eot'); 63 | * src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 64 | * url('../fonts/icomoon.woff') format('woff'), 65 | * url('../fonts/icomoon.ttf') format('truetype'), 66 | * url('../fonts/icomoon.svg#icomoon') format('svg'); 67 | */ 68 | /*------------------------------------*\ 69 | $LAYOUT 70 | \*------------------------------------*/ 71 | /** 72 | * Definimos elementos constantes del layout 73 | */ 74 | /*------------------------------------*\ 75 | $grid 76 | \*------------------------------------*/ 77 | /*------------------------------------*\ 78 | $FONT-FACE 79 | \*------------------------------------*/ 80 | /** 81 | * Definimos las fuentes a utilizar: 82 | * $basefont para todos los textos inline 83 | * $altfont para textos alternativos, como citas, intro, etc... 84 | * $codefont para código 85 | */ 86 | /*------------------------------------*\ 87 | $TAMAÑOS 88 | \*------------------------------------*/ 89 | /** 90 | * Definimos los tamaños de fuentes: 91 | 92 | */ 93 | /* 94 | * Las variables de tamaño las definimos en un MAP, puedes añadir, quitar o cambiarlas. 95 | * Vienen dadas en REM. Esto creará una clase con el mismo nombre de la variable: 96 | 97 | .x-small { font-size: .8rem} 98 | 99 | * También podemos asignar tamaños con un función llamada fs: 100 | 101 | .selector { font-size: fs(x-small);} 102 | 103 | * 104 | */ 105 | /*------------------------------------*\ 106 | $COLORS 107 | \*------------------------------------*/ 108 | /** 109 | * Brand stuff 110 | */ 111 | /** 112 | * Escala de grises 113 | * A veces no queremos que el negro sea "negro" o el blanco "blanco", puedes cambiarlos. 114 | */ 115 | /*------------------------------------*\ 116 | $TEXTURAS 117 | \*------------------------------------*/ 118 | /** 119 | * Definimos Colores y elementos de popups, mensajes de alerta, etc... 120 | */ 121 | /* Colores sociales -> son los colores corporativos, pero cambiadlos 122 | * si hace falta. (también podéis añadir más) /////////////////////// 123 | */ 124 | /*------------------------------------*\ 125 | $MIXINS 126 | \*------------------------------------*/ 127 | /* 128 | * Fácil de usar: las variables a usar están en settings.scss y son: 129 | 130 | 'small' : 48em, 131 | 'medium' : 56.25em, 132 | 'large' : 68.75em, 133 | 134 | * Y el uso va como sigue: 135 | 136 | .foo { 137 | color: red; 138 | @include respond-to('small') { 139 | color: blue; 140 | } 141 | } 142 | */ 143 | /** 144 | * Centrar y dar un ancho máximo igual a $pagemaxwidth. 145 | */ 146 | /*------------------------------------*\ 147 | $FUNCIONES 148 | \*------------------------------------*/ 149 | /* 150 | * Función para controlar el index 151 | 152 | .selector { z-index: z(goku);} 153 | 154 | * compila: 155 | 156 | .selector { z-index: 9001;} 157 | 158 | * Puedes ver las variables en el MAP en settings.scss 159 | */ 160 | /* 161 | * Función para mantener el tamaño de fuente consistente 162 | 163 | .selector { font-size: fs(x-small);} 164 | 165 | * Puedes ver en settings.scss las variables que se utilizan. 166 | */ 167 | /*------------------------------------*\ 168 | $PLACEHOLDERS 169 | \*------------------------------------*/ 170 | /** 171 | * The ghost, nudged to maintain perfect centering 172 | */ 173 | /** 174 | * Escondemos el texto solo VISUALMENTE 175 | */ 176 | /** 177 | * Escondemos el texto de VISUALMENTE y SCREENREADERS 178 | */ 179 | /** 180 | * Escondemos pero mantenemos layout. 181 | */ 182 | /** 183 | * Visualmente escondido, pero se puede detectar con teclado (focus). 184 | */ 185 | .visuallyhidden.focusable:active, 186 | .visuallyhidden.focusable:focus { 187 | position: static; 188 | clip: auto; 189 | height: auto; 190 | width: auto; 191 | margin: 0; 192 | overflow: visible; } 193 | 194 | /** 195 | * Clear floats. 196 | * http://bit.ly/1e3YaBH 197 | */ 198 | .btn-group:after { 199 | content: ""; 200 | display: table; 201 | clear: both; } 202 | 203 | /** 204 | * Bases 205 | **/ 206 | /*------------------------------------*\ 207 | $CONTENIDO 208 | \*------------------------------------*/ 209 | /** 210 | * Contenido..................... Esto que lees 211 | 212 | * Variables..................... Configuramos todas las variables del framework 213 | 214 | * Mixins........................ Mixins de SASS 215 | 216 | * Helpers....................... Clases de ayuda 217 | 218 | * Reset......................... Reinicio de valores CSS 219 | 220 | * Fuentes....................... Fuentes que vamos a importar 221 | 222 | * Links......................... Formas y estilos de los links 223 | 224 | * Tablas........................ Estilos de las tablas 225 | 226 | * Botones....................... Estilos de Botones, skins y variantes 227 | 228 | * Elementos..................... Elementos varios como Imagen, HR, etc... 229 | 230 | * Tipografía.................... Encabezados, small, párrafos, listas, etc... 231 | 232 | * Navegación.................... Una navegación, por si quieres usar esta y no la tuya propia 233 | 234 | * Formularios................... Estilos de todos los elementos de formularios y sus variantes 235 | 236 | * Sitio......................... Aquí escribes tus estilos para la web se vea como tú quieres ;) 237 | 238 | * Paginación.................... Estilos básicos para las paginaciones 239 | 240 | * Texturas...................... Badges, cajas y wells 241 | 242 | * Breakpoints................... Importamos breakpoints basados en las variables @bp$ 243 | 244 | * Patron........................ Estilos para la guía de patrones 245 | */ 246 | /*------------------------------------*\ 247 | $RESET 248 | \*------------------------------------*/ 249 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video { 250 | margin: 0; 251 | padding: 0; 252 | border: 0; 253 | outline: 0; 254 | font-size: 100%; 255 | vertical-align: baseline; 256 | background: transparent; } 257 | 258 | article, 259 | aside, 260 | details, 261 | figcaption, 262 | figure, 263 | footer, 264 | header, 265 | main, 266 | menu, 267 | nav, 268 | section, 269 | summary { 270 | display: block; } 271 | 272 | *, *::before, *::after { 273 | -webkit-box-sizing: border-box; 274 | -moz-box-sizing: border-box; 275 | -ms-box-sizing: border-box; 276 | -o-box-sizing: border-box; 277 | box-sizing: border-box; } 278 | 279 | img { 280 | max-width: 100%; 281 | border-width: 0; 282 | vertical-align: middle; 283 | -ms-interpolation-mode: bicubic; } 284 | 285 | /** 286 | * Selectores de elemento: un super "normalize": 287 | **/ 288 | /*------------------------------------*\ 289 | $ELEMENTOS-FIGURE 290 | \*------------------------------------*/ 291 | figure { 292 | margin-bottom: 1em; } 293 | figure img { 294 | margin-bottom: 0.25em; } 295 | figure figcaption { 296 | display: block; 297 | font-weight: normal; 298 | font-size: 0.8rem; 299 | font-style: italic; 300 | color: #737373; } 301 | 302 | /*------------------------------------*\ 303 | $FORMULARIOS 304 | \*------------------------------------*/ 305 | form { 306 | margin: 0 0 1em 0; } 307 | form fieldset { 308 | margin-bottom: 1em; 309 | padding: 0; 310 | border-width: 0; } 311 | form legend { 312 | display: block; 313 | width: 100%; 314 | margin-bottom: 2em; 315 | padding: 0; 316 | color: #494949; 317 | border: 0; 318 | border-bottom: 1px solid #bfbfbf; 319 | white-space: normal; } 320 | form legend small { 321 | font-size: 0.6rem; 322 | color: #bfbfbf; } 323 | form p { 324 | margin-bottom: 0.5em; } 325 | form ul { 326 | list-style-type: none; 327 | margin: 0 0 1em 0; 328 | padding: 0; } 329 | form br { 330 | display: none; } 331 | 332 | label, 333 | input, 334 | button, 335 | select, 336 | textarea { 337 | font-size: 0.6rem; 338 | border-radius: 3px; 339 | vertical-align: baseline; } 340 | 341 | input, 342 | button, 343 | select, 344 | textarea { 345 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 346 | -webkit-box-sizing: border-box; 347 | -moz-box-sizing: border-box; 348 | -ms-box-sizing: border-box; 349 | box-sizing: border-box; } 350 | 351 | label { 352 | display: inline-block; 353 | margin-bottom: 0.125em; 354 | font-family: 0.6rem; 355 | font-weight: bold; 356 | color: #494949; 357 | cursor: pointer; } 358 | 359 | input, 360 | textarea, 361 | select { 362 | display: inline-block; 363 | vertical-align: middle; 364 | width: 100%; 365 | padding: 4px; 366 | margin-bottom: 1em; 367 | background-color: white; 368 | border: 1px solid #bfbfbf; 369 | color: #494949; 370 | -webkit-appearance: none; 371 | -moz-appearance: none; 372 | appearance: none; } 373 | input:hover, 374 | textarea:hover, 375 | select:hover { 376 | border-color: gray; } 377 | 378 | .input-small { 379 | width: 60px; } 380 | 381 | .input-medium { 382 | width: 150px; } 383 | 384 | .input-big { 385 | width: 300px; } 386 | 387 | input[type="image"] { 388 | width: auto; 389 | height: auto; 390 | padding: 0; 391 | margin: 3px 0; 392 | line-height: normal; 393 | cursor: pointer; } 394 | 395 | input[type="checkbox"], 396 | input[type="radio"] { 397 | width: 12px; 398 | height: 12px; 399 | padding: 0; 400 | margin: 0 3px 0 0; 401 | line-height: normal; 402 | cursor: pointer; 403 | background-color: white; } 404 | input[type="checkbox"]:checked, 405 | input[type="radio"]:checked { 406 | background-color: #bfbfbf; 407 | border-color: white; 408 | border-width: 1px; 409 | box-shadow: 0 0 0 1px #bfbfbf; } 410 | input[type="checkbox"] + label, 411 | input[type="radio"] + label { 412 | margin-right: 24px; } 413 | 414 | input[type="radio"] { 415 | border-radius: 100%; } 416 | 417 | label input[type="checkbox"], 418 | label input[type="radio"] { 419 | margin-right: 6px; } 420 | 421 | input[type="image"] { 422 | border: 0; 423 | -webkit-box-shadow: none; 424 | box-shadow: none; } 425 | 426 | input[type="file"] { 427 | width: auto; 428 | padding: initial; 429 | line-height: initial; 430 | border: initial; 431 | background-color: transparent; 432 | background-color: initial; 433 | -webkit-box-shadow: none; 434 | box-shadow: none; } 435 | 436 | input[type="button"], 437 | input[type="reset"], 438 | input[type="submit"] { 439 | width: auto; 440 | height: auto; 441 | cursor: pointer; 442 | *overflow: visible; } 443 | 444 | textarea { 445 | resize: vertical; 446 | overflow: auto; 447 | height: auto; 448 | overflow: auto; 449 | vertical-align: top; } 450 | 451 | input[type="hidden"] { 452 | display: none; } 453 | 454 | input[disabled], 455 | select[disabled], 456 | textarea[disabled], 457 | input[readonly], 458 | select[readonly], 459 | textarea[readonly] { 460 | -webkit-opacity: 0.5; 461 | -moz-opacity: 0.5; 462 | opacity: 0.5; 463 | cursor: not-allowed; } 464 | 465 | input:focus, 466 | textarea:focus { 467 | border-color: #bb2299, 40%; 468 | box-shadow: 0 0 1px 1px #bfbfbf; 469 | outline: none; } 470 | 471 | ::-webkit-input-placeholder { 472 | font-size: 0.8rem; } 473 | 474 | input:-moz-placeholder { 475 | font-size: 0.8rem; } 476 | 477 | /** 478 | * Validamos los formularios que son "required": 479 | * http://coolvillage.es/ayuda-al-usuario-a-rellenar-formularios-con-css/ 480 | */ 481 | input:required:focus:invalid { 482 | background-color: #fef2e7; 483 | border: 1px solid #fce4cf; } 484 | 485 | input:required:focus:valid { 486 | background-color: #e9f5e9; 487 | border: 1px solid #5bb75b; } 488 | 489 | /*------------------------------------*\ 490 | $IMÁGENES 491 | \*------------------------------------*/ 492 | /*------------------------------------*\ 493 | $LINKS 494 | \*------------------------------------*/ 495 | a { 496 | text-decoration: none; 497 | color: #bb2299; } 498 | a:visited { 499 | color: #bb2299; } 500 | a:hover { 501 | text-decoration: underline; 502 | color: #bb2299; } 503 | a:focus { 504 | outline: thin dotted; 505 | color: #bb2299; } 506 | a:hover, a:active { 507 | outline: 0; } 508 | 509 | /*------------------------------------*\ 510 | $TIPOGRAFÍA 511 | \*------------------------------------*/ 512 | h1, 513 | h2, 514 | h3, 515 | h4, 516 | h5, 517 | h6 { 518 | margin: 0; 519 | font-family: Georgia, Times, "Times New Roman"; 520 | font-weight: normal; 521 | color: inherit; 522 | text-rendering: optimizelegibility; } 523 | h1.altheader, 524 | h2.altheader, 525 | h3.altheader, 526 | h4.altheader, 527 | h5.altheader, 528 | h6.altheader { 529 | color: #737373; 530 | text-transform: uppercase; 531 | display: block; } 532 | 533 | h1, .h1 { 534 | margin-bottom: 0; 535 | font-size: 2.5rem; 536 | line-height: 1.5; } 537 | 538 | h2, .h2 { 539 | margin-bottom: 0; 540 | font-size: 2.4rem; 541 | line-height: 1.5; } 542 | 543 | h3, .h3 { 544 | margin-bottom: 0; 545 | font-size: 2.1rem; 546 | line-height: 1.5; } 547 | 548 | h4, .h4 { 549 | margin-bottom: 0; 550 | font-size: 1.8rem; 551 | line-height: 1.5; } 552 | 553 | h5, .h5 { 554 | margin-bottom: 0; 555 | font-size: 1.6rem; 556 | line-height: 1.5; } 557 | 558 | h6, .h6 { 559 | margin-bottom: 0; 560 | font-size: 1.4rem; 561 | line-height: 1.5; } 562 | 563 | p, 564 | ol, 565 | ul, 566 | dl, 567 | address { 568 | margin-bottom: 1em; 569 | line-height: 1em; } 570 | 571 | small { 572 | font-size: 0.6rem; 573 | color: #737373; } 574 | 575 | ul, 576 | ol { 577 | margin: 0 0 1em 0; 578 | padding: 0 0 0 24px; } 579 | 580 | li ul, 581 | li ol { 582 | margin: 0; } 583 | 584 | blockquote { 585 | margin: 0 0 1em 0; 586 | padding-left: 24px; 587 | border-left: 2px solid #f1efc9; 588 | font-family: Georgia, Times, "Times New Roman"; 589 | font-style: normal; } 590 | blockquote p { 591 | font-size: 0.8rem; 592 | color: #737373; 593 | font-style: italic; 594 | line-height: 1.5; } 595 | 596 | q { 597 | quotes: none; 598 | font-style: italic; } 599 | 600 | blockquote p::before, 601 | blockquote p::after, 602 | q:before, 603 | q:after { 604 | content: ""; } 605 | 606 | cite { 607 | font-style: normal; } 608 | 609 | dl, 610 | dd { 611 | margin-bottom: 1em; } 612 | 613 | dt { 614 | font-weight: bold; } 615 | 616 | .dl-horizontal dt { 617 | float: left; 618 | clear: left; 619 | width: 20.25%; 620 | text-align: right; } 621 | .dl-horizontal dd { 622 | margin-left: 22.78%; } 623 | 624 | abbr[title] { 625 | border-bottom: 1px dotted #f1efc9; 626 | cursor: help; } 627 | 628 | b, strong { 629 | font-weight: bold; } 630 | 631 | dfn { 632 | font-style: italic; } 633 | 634 | ins { 635 | background-color: white; 636 | color: #494949; 637 | text-decoration: none; } 638 | 639 | mark { 640 | background-color: yellow; 641 | color: #494949; } 642 | 643 | pre, 644 | code, 645 | kbd, 646 | samp { 647 | font-family: "Courier New", monospace; 648 | font-size: 0.8rem; 649 | line-height: 1em; } 650 | 651 | code { 652 | background-color: #f5f2f0; 653 | padding: 0.1em 0.3em; 654 | border-radius: 3px; } 655 | 656 | pre { 657 | white-space: pre; 658 | white-space: pre-wrap; 659 | word-wrap: break-word; } 660 | 661 | sub, 662 | sup { 663 | position: relative; 664 | font-size: 0.6rem; 665 | line-height: 0; 666 | vertical-align: 1em; } 667 | 668 | sup { 669 | top: -.5em; } 670 | 671 | sub { 672 | bottom: -.25em; } 673 | 674 | hr { 675 | clear: both; 676 | display: block; 677 | margin: 1em 0; 678 | padding: 0; 679 | height: 1px; 680 | border: 0; 681 | border-top: 1px solid #f1efc9; } 682 | 683 | .intro { 684 | font-weight: bold; } 685 | 686 | /* 687 | * Creamos clases para cada uno de los tamaños de fuentes. Se pueden ver en Settings. 688 | * Son los nombres de las varables con el prefijo font- 689 | * Por ejemplo: 690 | 691 | .font-x-small { 692 | font-size: .8rem; 693 | } 694 | 695 | 696 | */ 697 | .font-x-small { 698 | font-size: 0.6rem; } 699 | 700 | .font-small { 701 | font-size: 0.8rem; } 702 | 703 | .font-normal { 704 | font-size: 1rem; } 705 | 706 | .font-big { 707 | font-size: 1.5rem; } 708 | 709 | .font-huge { 710 | font-size: 2rem; } 711 | 712 | /*------------------------------------*\ 713 | $TABLAS 714 | \*------------------------------------*/ 715 | table { 716 | width: 100%; 717 | max-width: 100%; 718 | margin-bottom: 1em; 719 | border-collapse: collapse; 720 | border-spacing: 0; 721 | background-color: transparent; } 722 | table th, 723 | table td { 724 | padding: 8px; 725 | vertical-align: top; 726 | border-top: 1px solid #737373; 727 | font-size: 0.8rem; 728 | line-height: 1em; 729 | text-align: left; } 730 | table th { 731 | font-weight: bold; } 732 | table thead th { 733 | vertical-align: bottom; } 734 | table colgroup + thead tr:first-child th, 735 | table colgroup + thead tr:first-child td, 736 | table thead:first-child tr:first-child th, 737 | table thead:first-child tr:first-child td { 738 | border-top: 0; } 739 | table tbody + tbody { 740 | border-top: 2px solid #737373; } 741 | table tbody tr td, 742 | table tbody tr th { 743 | -webkit-transition: background-color 0.25s 0 linear; 744 | -moz-transition: background-color 0.25s 0 linear; 745 | -ms-transition: background-color 0.25s 0 linear; 746 | -o-transition: background-color 0.25s 0 linear; 747 | transition: background-color 0.25s 0 linear; } 748 | table tbody tr:hover td, 749 | table tbody tr:hover th { 750 | background-color: #e6e6e6; } 751 | 752 | .table-condensed th, 753 | .table-condensed td { 754 | padding: 4px 5px; } 755 | 756 | .table-bordered { 757 | border: 1px solid #737373; 758 | border-left: 0; 759 | border-collapse: separate; 760 | *border-collapse: collapsed; } 761 | .table-bordered th, 762 | .table-bordered td { 763 | border-left: 1px solid #737373; } 764 | .table-bordered thead:first-child tr:first-child th, 765 | .table-bordered tbody:first-child tr:first-child th, 766 | .table-bordered tbody:first-child tr:first-child td { 767 | border-top: 0; } 768 | 769 | .table-striped tbody tr:nth-child(odd) td, 770 | .table-striped tbody tr:nth-child(odd) th { 771 | background-color: #e6e6e6; } 772 | 773 | /** 774 | * Layout del sitio 775 | **/ 776 | /*------------------------------------*\ 777 | $SITIO 778 | \*------------------------------------*/ 779 | @-webkit-viewport { 780 | width: device-width; } 781 | @-moz-viewport { 782 | width: device-width; } 783 | @-ms-viewport { 784 | width: device-width; } 785 | @-o-viewport { 786 | width: device-width; } 787 | @viewport { 788 | width: device-width; } 789 | html { 790 | background: #e6e6e6; 791 | font-size: 87.5%; 792 | -webkit-overflow-scrolling: touch; 793 | -webkit-tap-highlight-color: transparent; 794 | -webkit-text-size-adjust: 100%; 795 | -ms-text-size-adjust: 100%; } 796 | 797 | body { 798 | margin: 0; 799 | padding: 0; 800 | width: 100%; 801 | background-color: transparent; 802 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 803 | line-height: 1em; 804 | color: #494949; } 805 | 806 | /** 807 | * A partir de aquí es donde debes escribir los estilos de posicionamiento 808 | * y detalles que forman tu web. Disfruta! 809 | */ 810 | /*------------------------------------*\ 811 | $NAVEGACIÓN 812 | \*------------------------------------*/ 813 | /** 814 | * 815 | * La semántica va como sigue: 816 | 817 | 818 | 819 | 820 | 821 | 830 | 831 | * Y no te olvides de modificar las variables en el archivo de variables ($nav-**) 832 | */ 833 | .nav { 834 | position: absolute; 835 | top: 0; 836 | right: 0; 837 | z-index: 10; 838 | width: 42px; 839 | height: 42px; 840 | color: #bb2299; 841 | overflow: hidden; 842 | cursor: pointer; 843 | /** 844 | * Place a hamburger (don’t hate the player, hate the game...) icon 845 | * over the top of our nav element. 846 | */ } 847 | .nav:after { 848 | content: "☰"; 849 | font-size: 16px; 850 | width: 1em; 851 | line-height: 1; 852 | text-align: center; 853 | position: absolute; 854 | top: 50%; 855 | left: 50%; 856 | margin-top: -8px; 857 | margin-left: -8px; } 858 | @media (min-width: 56.25em) { 859 | .nav { 860 | position: relative; 861 | top: auto; 862 | right: auto; 863 | width: 100%; 864 | height: auto; 865 | cursor: auto; } 866 | .nav:after { 867 | content: ""; 868 | content: none; } } 869 | 870 | .nav__list { 871 | list-style: none; 872 | margin: 0; 873 | padding: 0; 874 | padding-top: 42px; 875 | padding-left: 24px; 876 | padding-right: 24px; 877 | position: absolute; 878 | top: 0; 879 | right: 0; 880 | background-color: white; 881 | box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5); 882 | /* 883 | * Usamos VW porque con % tomaría el tamaño del contenedor, 884 | * que es $nav-width (unos 48px) y no se ve na' e ná 885 | */ 886 | width: 100vw; } 887 | @media (min-width: 56.25em) { 888 | .nav__list { 889 | padding-top: 0; 890 | position: relative; 891 | top: auto; 892 | left: auto; 893 | width: 100%; 894 | height: auto; 895 | box-shadow: none; 896 | margin-bottom: 24px; } } 897 | 898 | .nav__item { 899 | line-height: 2; 900 | border-bottom: 1px solid #f1efc9; 901 | text-transform: capitalize; 902 | text-align: right; } 903 | .nav__item a { 904 | display: block; } 905 | @media (min-width: 56.25em) { 906 | .nav__item { 907 | display: inline-block; 908 | border-bottom: none; 909 | border-right: 1px solid #f1efc9; 910 | text-align: center; 911 | padding: 0 24px; } } 912 | 913 | .checkbox__hack { 914 | display: none; 915 | /* 916 | * Quitamos el overflow:hidden para que se muestre el menú cuando 917 | * el checkbox está :checked 918 | * Eso es todo, un overflow. Con eso mostramos u ocultamos el menú. 919 | * (Eso y el content del after para que sea una X y no la hamburguesa) 920 | */ } 921 | .checkbox__hack:checked ~ .nav { 922 | overflow: visible; } 923 | .checkbox__hack:checked ~ .nav::after { 924 | content: "x"; } 925 | 926 | .checkbox-hack__label { 927 | position: absolute; 928 | top: 0; 929 | left: 0; 930 | z-index: 100; 931 | width: 100%; 932 | height: 42px; 933 | color: #bb2299; 934 | overflow: hidden; 935 | cursor: pointer; 936 | margin: 0; 937 | z-index: 100; } 938 | @media (min-width: 56.25em) { 939 | .checkbox-hack__label { 940 | display: none; } } 941 | 942 | /** 943 | * Abstracciones y objetos 944 | **/ 945 | /*------------------------------------*\ 946 | $BOTONES 947 | \*------------------------------------*/ 948 | /* 949 | * Definimos los botones y sus variantes 950 | */ 951 | /** 952 | * .btn es la clase principal para definir un botón 953 | */ 954 | .btn--disabled, .btn--info, .btn--error, .btn--warning, .btn--success, .btn--primary { 955 | display: inline-block; 956 | line-height: 2em; 957 | color: #494949; 958 | text-align: center; 959 | vertical-align: middle; 960 | font-size: 1rem; 961 | white-space: nowrap; 962 | background-color: transparent; 963 | border-top: 1px solid currentcolor; 964 | border-right: 1px solid currentcolor; 965 | border-bottom: 2px solid currentcolor; 966 | border-left: 1px solid currentcolor; 967 | cursor: pointer; 968 | margin: 0; 969 | padding-top: 0; 970 | padding-bottom: 0; 971 | padding-right: 1em; 972 | padding-left: 1em; 973 | border-radius: 3px; 974 | -webkit-transition: all 0.3s ease-in; 975 | -moz-transition: all 0.3s ease-in; 976 | -ms-transition: all 0.3s ease-in; 977 | -o-transition: all 0.3s ease-in; 978 | transition: all 0.3s ease-in; 979 | /** 980 | * Nadie quiere un botón con texto subrayado cuando 981 | * hacemos hover. 982 | */ } 983 | .btn--disabled:hover, .btn--info:hover, .btn--error:hover, .btn--warning:hover, .btn--success:hover, .btn--primary:hover { 984 | text-decoration: none; 985 | color: #494949; } 986 | .btn--disabled:active, .btn--info:active, .btn--error:active, .btn--warning:active, .btn--success:active, .btn--primary:active, .btn--disabled:focus, .btn--info:focus, .btn--error:focus, .btn--warning:focus, .btn--success:focus, .btn--primary:focus { 987 | outline: none; } 988 | .btn--disabled:visited, .btn--info:visited, .btn--error:visited, .btn--warning:visited, .btn--success:visited, .btn--primary:visited { 989 | color: #494949; } 990 | 991 | /*------------------------------------*\ 992 | $BOTONES-VARIANTES 993 | \*------------------------------------*/ 994 | /** 995 | * Variantes de los botones: color para dar sensaciones. 996 | * 997 | */ 998 | /** 999 | * Inputs con estilo de botones 1000 | */ 1001 | input[type="submit"].btn:hover { 1002 | border-color: currentcolor; } 1003 | 1004 | /** 1005 | * Botón no disponible 1006 | */ 1007 | .btn--disabled { 1008 | -webkit-opacity: 0.5; 1009 | -moz-opacity: 0.5; 1010 | opacity: 0.5; 1011 | cursor: not-allowed; 1012 | background-color: #e6e6e6; } 1013 | 1014 | /** 1015 | * Botón de Info 1016 | */ 1017 | .btn--info { 1018 | color: #42b8dd; } 1019 | .btn--info:hover { 1020 | color: #42b8dd; } 1021 | .btn--info:visited { 1022 | color: #42b8dd; } 1023 | 1024 | /** 1025 | * Botón de Error 1026 | */ 1027 | .btn--error { 1028 | color: #da4f49; } 1029 | .btn--error:hover { 1030 | color: #da4f49; } 1031 | .btn--error:visited { 1032 | color: #da4f49; } 1033 | 1034 | /** 1035 | * Botón de advertencia 1036 | */ 1037 | .btn--warning { 1038 | color: #e78730; } 1039 | .btn--warning:hover { 1040 | color: #e78730; } 1041 | .btn--warning:visited { 1042 | color: #e78730; } 1043 | 1044 | /** 1045 | * Botón de OK 1046 | */ 1047 | .btn--success { 1048 | color: #5bb75b; } 1049 | .btn--success:hover { 1050 | color: #5bb75b; } 1051 | .btn--success:visited { 1052 | color: #5bb75b; } 1053 | 1054 | /** 1055 | * Botón principal 1056 | */ 1057 | .btn--primary { 1058 | color: #bb2299; } 1059 | .btn--primary:hover { 1060 | color: #bb2299; } 1061 | .btn--primary:visited { 1062 | color: #bb2299; } 1063 | 1064 | /*------------------------------------*\ 1065 | $BOTONES-TAMAÑOS 1066 | \*------------------------------------*/ 1067 | /** 1068 | * Variantes de los botones por tamaño. 1069 | * 1070 | */ 1071 | .btn--mini { 1072 | padding-right: 0.5em; 1073 | padding-left: 0.5em; 1074 | line-height: 1.5; 1075 | font-size: 0.6rem; } 1076 | 1077 | .btn--small { 1078 | padding-right: 1.5em; 1079 | padding-left: 1.5em; 1080 | line-height: 2; 1081 | font-size: 0.8rem; } 1082 | 1083 | .btn--large { 1084 | padding-right: 3em; 1085 | padding-left: 3em; 1086 | line-height: 3; 1087 | font-size: 1.5rem; } 1088 | 1089 | /*------------------------------------*\ 1090 | $BOTONES-GRUPOS 1091 | \*------------------------------------*/ 1092 | /** 1093 | * Con esta clase podemos agrupar los botones 1094 | * en grupos horizontales. 1095 | * 1096 | */ 1097 | .btn-group { 1098 | position: relative; } 1099 | .btn-group [class^="btn--"], .btn-group [class*=" btn--"] { 1100 | position: relative; 1101 | border-radius: 0; 1102 | float: left; 1103 | margin-left: -1px; } 1104 | .btn-group [class^="btn--"]:first-child, .btn-group [class*=" btn--"]:first-child { 1105 | margin-left: 0; 1106 | -webkit-border-top-right-radius: 0; 1107 | -webkit-border-bottom-right-radius: 0; 1108 | -webkit-border-bottom-left-radius: 3px; 1109 | -webkit-border-top-left-radius: 3px; 1110 | -moz-border-radius-topright: 0; 1111 | -moz-border-radius-bottomright: 0; 1112 | -moz-border-radius-bottomleft: 3px; 1113 | -moz-border-radius-topleft: 3px; 1114 | border-top-right-radius: 0; 1115 | border-bottom-right-radius: 0; 1116 | border-bottom-left-radius: 3px; 1117 | border-top-left-radius: 3px; 1118 | -webkit-background-clip: padding-box; 1119 | -moz-background-clip: padding; 1120 | background-clip: padding-box; } 1121 | .btn-group [class^="btn--"]:last-child, .btn-group [class*=" btn--"]:last-child { 1122 | -webkit-border-top-right-radius: 3px; 1123 | -webkit-border-bottom-right-radius: 3px; 1124 | -webkit-border-bottom-left-radius: 0; 1125 | -webkit-border-top-left-radius: 0; 1126 | -moz-border-radius-topright: 3px; 1127 | -moz-border-radius-bottomright: 3px; 1128 | -moz-border-radius-bottomleft: 0; 1129 | -moz-border-radius-topleft: 0; 1130 | border-top-right-radius: 3px; 1131 | border-bottom-right-radius: 3px; 1132 | border-bottom-left-radius: 0; 1133 | border-top-left-radius: 0; 1134 | -webkit-background-clip: padding-box; 1135 | -moz-background-clip: padding; 1136 | background-clip: padding-box; } 1137 | 1138 | /*------------------------------------*\ 1139 | $TEXTURAS 1140 | \*------------------------------------*/ 1141 | .alert--success, .alert--warning, .alert--error, .alert--info, .alert--block { 1142 | margin-bottom: 1em; 1143 | padding: 8px 35px 8px 14px; 1144 | background-color: #fce4cf; 1145 | border: 1px solid #f6ae6f; 1146 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 1147 | font-size: 0.8rem; 1148 | color: #904809; 1149 | border-radius: 3px; 1150 | position: relative; } 1151 | .alert--success .alert--heading, .alert--warning .alert--heading, .alert--error .alert--heading, .alert--info .alert--heading, .alert--block .alert--heading { 1152 | color: inherit; } 1153 | .alert--success .close, .alert--warning .close, .alert--error .close, .alert--info .close, .alert--block .close { 1154 | position: absolute; 1155 | top: -2px; 1156 | right: 2px; 1157 | float: right; 1158 | font-size: 0.8rem; 1159 | font-weight: bold; 1160 | line-height: 18px; 1161 | color: inherit; } 1162 | 1163 | .alert--success { 1164 | background-color: #c5e6c5; 1165 | border-color: #a2d6a2; 1166 | color: #347834; } 1167 | 1168 | .alert--warning { 1169 | background-color: #f7d6b9; 1170 | border-color: #f2bc8b; 1171 | color: #9f5512; } 1172 | 1173 | .alert--error { 1174 | background-color: #f4cac8; 1175 | border-color: #eba19e; 1176 | color: #da4f49; } 1177 | 1178 | .alert--info { 1179 | background-color: #6dc8e5; 1180 | border-color: #24a1c8; 1181 | color: #05161b; } 1182 | 1183 | .alert--block { 1184 | padding-top: 14px; 1185 | padding-bottom: 14px; } 1186 | .alert--block .alert--heading { 1187 | margin-bottom: 0.125em; 1188 | font-size: inherit; 1189 | font-weight: bold; } 1190 | .alert--block > p, 1191 | .alert--block > ul { 1192 | margin-bottom: 0; } 1193 | .alert--block p + p { 1194 | margin-top: 5px; } 1195 | 1196 | .badge--primary, .badge--error, .badge--warning, .badge--success, .badge--info { 1197 | padding: 0.1em 0.3em; 1198 | margin-right: 3px; 1199 | font-size: 0.8rem; 1200 | white-space: nowrap; 1201 | border: 1px solid currentcolor; 1202 | border-radius: 3px; 1203 | color: #494949; 1204 | background-color: transparent; 1205 | -webkit-transition: background-color 0.25s 0 linear; 1206 | -moz-transition: background-color 0.25s 0 linear; 1207 | -ms-transition: background-color 0.25s 0 linear; 1208 | -o-transition: background-color 0.25s 0 linear; 1209 | transition: background-color 0.25s 0 linear; } 1210 | .badge--primary:hover, .badge--error:hover, .badge--warning:hover, .badge--success:hover, .badge--info:hover { 1211 | color: #494949; 1212 | text-decoration: none; 1213 | cursor: pointer; } 1214 | 1215 | .badge--error { 1216 | color: #da4f49; } 1217 | 1218 | .badge--warning { 1219 | color: #e78730; } 1220 | 1221 | .badge--success { 1222 | color: #5bb75b; } 1223 | 1224 | .badge--info { 1225 | color: #42b8dd; } 1226 | 1227 | .badge--icon { 1228 | display: inline-block; 1229 | color: #494949; 1230 | border: 1px solid #f1efc9; 1231 | border-radius: 3px; 1232 | padding: 12px; 1233 | background-color: transparent; 1234 | text-align: center; } 1235 | 1236 | ::-moz-selection { 1237 | background-color: white; 1238 | color: #bb2299; 1239 | text-shadow: none; } 1240 | 1241 | ::selection { 1242 | background-color: white; 1243 | color: #bb2299; 1244 | text-shadow: none; } 1245 | 1246 | /*------------------------------------*\ 1247 | $ABSTRACIONES 1248 | \*------------------------------------*/ 1249 | /* 1250 | * 1251 | * Abstracciones usadas a lo largo del layout, os dejo algunas de ejemplo 1252 | * pero borradlas y añadid las que necesitéis 1253 | */ 1254 | .float-right { 1255 | float: right; } 1256 | 1257 | .inline-block { 1258 | display: inline-block; } 1259 | 1260 | .nomargin-bottom { 1261 | margin-bottom: 0; } 1262 | 1263 | .margin-bottom { 1264 | margin-bottom: 1em; } 1265 | 1266 | .topbar { 1267 | background-color: black; 1268 | padding: 6px; 1269 | margin-bottom: 1em; } 1270 | .topbar img { 1271 | width: 30px; 1272 | margin-right: 6px; } 1273 | 1274 | main { 1275 | margin-left: auto; 1276 | margin-right: auto; 1277 | max-width: 600px; 1278 | width: 100%; } 1279 | 1280 | .stcontainer { 1281 | background-color: white; 1282 | padding: 1em 24px; 1283 | border: 1px solid #bfbfbf; 1284 | border-radius: 3px; 1285 | margin-bottom: 1em; } 1286 | 1287 | .sttitle { 1288 | display: block; 1289 | border-bottom: 1px solid #e6e6e6; 1290 | margin-bottom: 1em; 1291 | font-size: 0.6rem; 1292 | line-height: 2; 1293 | color: #737373; } 1294 | 1295 | .stcolor { 1296 | display: inline-block; 1297 | border-radius: 3px; 1298 | width: 100px; 1299 | line-height: 50px; 1300 | text-align: center; 1301 | position: relative; 1302 | margin-right: 24px; 1303 | margin-bottom: 48px; } 1304 | .stcolor:before { 1305 | font-size: 0.6rem; } 1306 | .stcolor:after { 1307 | content: "$color-brand"; 1308 | position: absolute; 1309 | font-size: 0.6rem; 1310 | color: black; 1311 | text-align: center; 1312 | bottom: -40px; 1313 | left: 0; } 1314 | 1315 | .basecolor { 1316 | background-color: #bb2299; 1317 | border: 1px solid #651252; 1318 | color: #44dd66; } 1319 | .basecolor:before { 1320 | content: "#bb2299"; } 1321 | .basecolor:after { 1322 | content: "$color-brand"; } 1323 | 1324 | .basecolor-light { 1325 | background-color: #e676cd; 1326 | border: 1px solid #d126ab; 1327 | color: #198932; } 1328 | .basecolor-light:before { 1329 | content: "#e676cd"; } 1330 | .basecolor-light:after { 1331 | content: "$color-brand-light"; } 1332 | 1333 | .secondary { 1334 | background-color: #dbd879; 1335 | border: 1px solid #bcb732; 1336 | color: #242786; } 1337 | .secondary:before { 1338 | content: "#dbd879"; } 1339 | .secondary:after { 1340 | content: "$secondary"; } 1341 | 1342 | .bordercolor { 1343 | background-color: #f1efc9; 1344 | border: 1px solid #dbd879; 1345 | color: #0e1036; } 1346 | .bordercolor:before { 1347 | content: "#f1efc9"; } 1348 | .bordercolor:after { 1349 | content: "$color-border"; } 1350 | 1351 | .compcolor { 1352 | background-color: #d8f0e3; 1353 | border: 1px solid #8ed4ae; 1354 | color: #270f1c; } 1355 | .compcolor:before { 1356 | content: "#d8f0e3"; } 1357 | .compcolor:after { 1358 | content: "$compcolor"; } 1359 | 1360 | .white { 1361 | background-color: white; 1362 | border: 1px solid #cccccc; 1363 | color: black; } 1364 | .white:before { 1365 | content: "white"; } 1366 | .white:after { 1367 | content: "$color-white"; } 1368 | 1369 | .lightergrey { 1370 | background-color: #e6e6e6; 1371 | border: 1px solid #b3b3b3; 1372 | color: #191919; } 1373 | .lightergrey:before { 1374 | content: "#e6e6e6"; } 1375 | .lightergrey:after { 1376 | content: "$color-lightergrey"; } 1377 | 1378 | .lightgrey { 1379 | background-color: #bfbfbf; 1380 | border: 1px solid #8c8c8c; 1381 | color: #404040; } 1382 | .lightgrey:before { 1383 | content: "#bfbfbf"; } 1384 | .lightgrey:after { 1385 | content: "$color-lightgrey"; } 1386 | 1387 | .grey { 1388 | background-color: #737373; 1389 | border: 1px solid #404040; 1390 | color: #8c8c8c; } 1391 | .grey:before { 1392 | content: "#737373"; } 1393 | .grey:after { 1394 | content: "$color-grey"; } 1395 | 1396 | .darkgrey { 1397 | background-color: #4d4d4d; 1398 | border: 1px solid #1a1a1a; 1399 | color: #b2b2b2; } 1400 | .darkgrey:before { 1401 | content: "#4d4d4d"; } 1402 | .darkgrey:after { 1403 | content: "$color-darkgrey"; } 1404 | 1405 | .darkergrey { 1406 | background-color: #333333; 1407 | border: 1px solid black; 1408 | color: #cccccc; } 1409 | .darkergrey:before { 1410 | content: "#333333"; } 1411 | .darkergrey:after { 1412 | content: "$color-darkergrey"; } 1413 | 1414 | .black { 1415 | background-color: black; 1416 | border: 1px solid black; 1417 | color: white; } 1418 | .black:before { 1419 | content: "black"; } 1420 | .black:after { 1421 | content: "$color-black"; } 1422 | 1423 | .color-alert { 1424 | background-color: #fce4cf; 1425 | border: 1px solid #f6ae6f; 1426 | color: #031b30; } 1427 | .color-alert:before { 1428 | content: "#fce4cf"; } 1429 | .color-alert:after { 1430 | content: "$color-alert"; } 1431 | 1432 | .color-error { 1433 | background-color: #da4f49; 1434 | border: 1px solid #9d2520; 1435 | color: #25b0b6; } 1436 | .color-error:before { 1437 | content: "#da4f49"; } 1438 | .color-error:after { 1439 | content: "$color-error"; } 1440 | 1441 | .color-info { 1442 | background-color: #42b8dd; 1443 | border: 1px solid #1c7e9d; 1444 | color: #bd4722; } 1445 | .color-info:before { 1446 | content: "#42b8dd"; } 1447 | .color-info:after { 1448 | content: "$color-info"; } 1449 | 1450 | .color-success { 1451 | background-color: #5bb75b; 1452 | border: 1px solid #347834; 1453 | color: #a448a4; } 1454 | .color-success:before { 1455 | content: "#5bb75b"; } 1456 | .color-success:after { 1457 | content: "$color-success"; } 1458 | 1459 | .color-warning { 1460 | background-color: #e78730; 1461 | border: 1px solid #9f5512; 1462 | color: #1878cf; } 1463 | .color-warning:before { 1464 | content: "#e78730"; } 1465 | .color-warning:after { 1466 | content: "$color-warning"; } 1467 | 1468 | .sttitlebag:before { 1469 | content: attr(data-header); 1470 | display: inline-block; 1471 | font-size: 0.6rem; 1472 | margin-right: 1em; 1473 | border: 1px solid #cccccc; 1474 | border-radius: 3px; 1475 | line-height: 1.6; 1476 | width: 1.6em; 1477 | text-align: center; 1478 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 1479 | background-color: #e6e6e6; 1480 | color: #737373; 1481 | vertical-align: middle; } 1482 | 1483 | .basefont { 1484 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 1485 | .basefont:after { 1486 | content: " Helvetica Neue, Helvetica, Arial, sans-serif"; } 1487 | 1488 | .altfont { 1489 | font-family: Georgia, Times, "Times New Roman"; } 1490 | .altfont:after { 1491 | content: " Georgia, Times, Times New Roman"; } 1492 | 1493 | .codefont { 1494 | font-family: "Courier New", monospace; } 1495 | .codefont:after { 1496 | content: " Courier New, monospace"; } 1497 | 1498 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css */ 1499 | /** 1500 | * prism.js default theme for JavaScript, CSS and HTML 1501 | * Based on dabblet (http://dabblet.com) 1502 | * @author Lea Verou 1503 | */ 1504 | code[class*="language-"], 1505 | pre[class*="language-"] { 1506 | color: black; 1507 | text-shadow: 0 1px white; 1508 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 1509 | direction: ltr; 1510 | text-align: left; 1511 | white-space: pre; 1512 | word-spacing: normal; 1513 | word-break: normal; 1514 | word-wrap: normal; 1515 | line-height: 1.5; 1516 | -moz-tab-size: 4; 1517 | -o-tab-size: 4; 1518 | tab-size: 4; 1519 | -webkit-hyphens: none; 1520 | -moz-hyphens: none; 1521 | -ms-hyphens: none; 1522 | hyphens: none; } 1523 | 1524 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 1525 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 1526 | text-shadow: none; 1527 | background: #b3d4fc; } 1528 | 1529 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 1530 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 1531 | text-shadow: none; 1532 | background: #b3d4fc; } 1533 | 1534 | @media print { 1535 | code[class*="language-"], 1536 | pre[class*="language-"] { 1537 | text-shadow: none; } } 1538 | /* Code blocks */ 1539 | pre[class*="language-"] { 1540 | padding: 1em; 1541 | margin: 0.5em 0 24px; 1542 | overflow: auto; } 1543 | 1544 | :not(pre) > code[class*="language-"], 1545 | pre[class*="language-"] { 1546 | background: #f5f2f0; } 1547 | 1548 | /* Inline code */ 1549 | :not(pre) > code[class*="language-"] { 1550 | padding: .1em; 1551 | border-radius: .3em; 1552 | white-space: normal; } 1553 | 1554 | .token.comment, 1555 | .token.prolog, 1556 | .token.doctype, 1557 | .token.cdata { 1558 | color: slategray; } 1559 | 1560 | .token.punctuation { 1561 | color: #999; } 1562 | 1563 | .namespace { 1564 | opacity: .7; } 1565 | 1566 | .token.property, 1567 | .token.tag, 1568 | .token.boolean, 1569 | .token.number, 1570 | .token.constant, 1571 | .token.symbol, 1572 | .token.deleted { 1573 | color: #905; } 1574 | 1575 | .token.selector, 1576 | .token.attr-name, 1577 | .token.string, 1578 | .token.char, 1579 | .token.builtin, 1580 | .token.inserted { 1581 | color: #690; } 1582 | 1583 | .token.operator, 1584 | .token.entity, 1585 | .token.url, 1586 | .language-css .token.string, 1587 | .style .token.string { 1588 | color: #a67f59; 1589 | background: rgba(255, 255, 255, 0.5); } 1590 | 1591 | .token.atrule, 1592 | .token.attr-value, 1593 | .token.keyword { 1594 | color: #07a; } 1595 | 1596 | .token.function { 1597 | color: #DD4A68; } 1598 | 1599 | .token.regex, 1600 | .token.important, 1601 | .token.variable { 1602 | color: #e90; } 1603 | 1604 | .token.important, 1605 | .token.bold { 1606 | font-weight: bold; } 1607 | 1608 | .token.italic { 1609 | font-style: italic; } 1610 | 1611 | .token.entity { 1612 | cursor: help; } 1613 | 1614 | /*# sourceMappingURL=styleguide.css.map */ 1615 | -------------------------------------------------------------------------------- /styleguides/scss/patternstyles.scss: -------------------------------------------------------------------------------- 1 | .topbar { 2 | background-color: darken($color-brand, 50); 3 | padding: $gutterwidth / 4; 4 | margin-bottom: $baseline; 5 | img { 6 | width: 30px; 7 | margin-right: $gutterwidth / 4; 8 | } 9 | } 10 | 11 | main { 12 | @include max-width(600px); 13 | } 14 | .stcontainer { 15 | background-color: $color-white; 16 | padding: $baselineheight$gutterwidth; 17 | border: 1px solid $color-lightgrey; 18 | border-radius: $radius; 19 | margin-bottom: $baseline; 20 | } 21 | .sttitle { 22 | display: block; 23 | border-bottom: 1px solid $color-lightergrey; 24 | margin-bottom: $baseline; 25 | font-size: fs(x-small); 26 | line-height: 2; 27 | color: $color-grey; 28 | } 29 | 30 | .stcolor { 31 | display: inline-block; 32 | border-radius: $radius; 33 | width: 100px; 34 | line-height: 50px; 35 | text-align: center; 36 | position: relative; 37 | margin-right: $gutterwidth; 38 | margin-bottom: $gutterwidth * 2; 39 | &:before { 40 | font-size: fs(x-small); 41 | } 42 | &:after { 43 | content: "$color-brand"; 44 | position: absolute; 45 | font-size: fs(x-small); 46 | color: $color-black; 47 | text-align: center; 48 | bottom: -40px; 49 | left: 0; 50 | } 51 | } 52 | // For the moment, I insert colors variables manually, until I find a way to make 53 | // a less painfull process 54 | .basecolor { 55 | background-color: $color-brand; 56 | border: 1px solid darken($color-brand, 20); 57 | color: invert($color-brand); 58 | &:before { 59 | content: "#{$color-brand}"; 60 | } 61 | &:after { 62 | content: "$color-brand"; 63 | } 64 | } 65 | .basecolor-light { 66 | background-color: $color-brand-light; 67 | border: 1px solid darken($color-brand-light, 20); 68 | color: invert($color-brand-light); 69 | &:before { 70 | content: "#{$color-brand-light}"; 71 | } 72 | &:after { 73 | content: "$color-brand-light"; 74 | } 75 | } 76 | 77 | .secondary { 78 | background-color: $secondary; 79 | border: 1px solid darken($secondary, 20); 80 | color: invert($secondary); 81 | &:before { 82 | content: "#{$secondary}"; 83 | } 84 | &:after { 85 | content: "$secondary"; 86 | } 87 | } 88 | 89 | .bordercolor { 90 | background-color: $color-border; 91 | border: 1px solid darken($color-border, 20); 92 | color: invert($color-border); 93 | &:before { 94 | content: "#{$color-border}"; 95 | } 96 | &:after { 97 | content: "$color-border"; 98 | } 99 | } 100 | .compcolor { 101 | background-color: $compcolor; 102 | border: 1px solid darken($compcolor, 20); 103 | color: invert($compcolor); 104 | &:before { 105 | content: "#{$compcolor}"; 106 | } 107 | &:after { 108 | content: "$compcolor"; 109 | } 110 | } 111 | 112 | .white { 113 | background-color: $color-white; 114 | border: 1px solid darken($color-white, 20); 115 | color: invert($color-white); 116 | &:before { 117 | content: "#{$color-white}"; 118 | } 119 | &:after { 120 | content: "$color-white"; 121 | } 122 | } 123 | .lightergrey { 124 | background-color: $color-lightergrey; 125 | border: 1px solid darken($color-lightergrey, 20); 126 | color: invert($color-lightergrey); 127 | &:before { 128 | content: "#{$color-lightergrey}"; 129 | } 130 | &:after { 131 | content: "$color-lightergrey"; 132 | } 133 | } 134 | .lightgrey { 135 | background-color: $color-lightgrey; 136 | border: 1px solid darken($color-lightgrey, 20); 137 | color: invert($color-lightgrey); 138 | &:before { 139 | content: "#{$color-lightgrey}"; 140 | } 141 | &:after { 142 | content: "$color-lightgrey"; 143 | } 144 | } 145 | .grey { 146 | background-color: $color-grey; 147 | border: 1px solid darken($color-grey, 20); 148 | color: invert($color-grey); 149 | &:before { 150 | content: "#{$color-grey}"; 151 | } 152 | &:after { 153 | content: "$color-grey"; 154 | } 155 | } 156 | .darkgrey { 157 | background-color: $color-darkgrey; 158 | border: 1px solid darken($color-darkgrey, 20); 159 | color: invert($color-darkgrey); 160 | &:before { 161 | content: "#{$color-darkgrey}"; 162 | } 163 | &:after { 164 | content: "$color-darkgrey"; 165 | } 166 | } 167 | .darkergrey { 168 | background-color: $color-darkergrey; 169 | border: 1px solid darken($color-darkergrey, 20); 170 | color: invert($color-darkergrey); 171 | &:before { 172 | content: "#{$color-darkergrey}"; 173 | } 174 | &:after { 175 | content: "$color-darkergrey"; 176 | } 177 | } 178 | .black { 179 | background-color: $color-black; 180 | border: 1px solid darken($color-black, 20); 181 | color: invert($color-black); 182 | &:before { 183 | content: "#{$color-black}"; 184 | } 185 | &:after { 186 | content: "$color-black"; 187 | } 188 | } 189 | 190 | .color-alert { 191 | background-color: $color-alert; 192 | border: 1px solid darken($color-alert, 20); 193 | color: invert($color-alert); 194 | &:before { 195 | content: "#{$color-alert}"; 196 | } 197 | &:after { 198 | content: "$color-alert"; 199 | } 200 | } 201 | 202 | .color-error { 203 | background-color: $color-error; 204 | border: 1px solid darken($color-error, 20); 205 | color: invert($color-error); 206 | &:before { 207 | content: "#{$color-error}"; 208 | } 209 | &:after { 210 | content: "$color-error"; 211 | } 212 | } 213 | .color-info { 214 | background-color: $color-info; 215 | border: 1px solid darken($color-info, 20); 216 | color: invert($color-info); 217 | &:before { 218 | content: "#{$color-info}"; 219 | } 220 | &:after { 221 | content: "$color-info"; 222 | } 223 | } 224 | .color-success { 225 | background-color: $color-success; 226 | border: 1px solid darken($color-success, 20); 227 | color: invert($color-success); 228 | &:before { 229 | content: "#{$color-success}"; 230 | } 231 | &:after { 232 | content: "$color-success"; 233 | } 234 | } 235 | .color-warning { 236 | background-color: $color-warning; 237 | border: 1px solid darken($color-warning, 20); 238 | color: invert($color-warning); 239 | &:before { 240 | content: "#{$color-warning}"; 241 | } 242 | &:after { 243 | content: "$color-warning"; 244 | } 245 | } 246 | 247 | 248 | // Typography 249 | .sttitlebag { 250 | &:before { 251 | content: attr(data-header); 252 | display: inline-block; 253 | font-size: fs(x-small); 254 | margin-right: 1em; 255 | border: 1px solid darken($color-lightergrey, 10); 256 | border-radius: $radius; 257 | line-height: 1.6; 258 | width: 1.6em; 259 | text-align: center; 260 | font-family: $basefont; 261 | background-color: $color-lightergrey; 262 | color: $color-grey; 263 | vertical-align: middle; 264 | } 265 | } 266 | 267 | // Fonts 268 | .basefont { 269 | font-family: $basefont; 270 | &:after { 271 | content: " #{$basefont}"; 272 | } 273 | } 274 | .altfont { 275 | font-family: $altfont; 276 | &:after { 277 | content: " #{$altfont}"; 278 | } 279 | } 280 | .codefont { 281 | font-family: $codefont; 282 | &:after { 283 | content: " #{$codefont}"; 284 | } 285 | } --------------------------------------------------------------------------------