├── .gitignore ├── images ├── abstrato.png ├── basalstyle-logo.png ├── grid-15-30-95-1140.png └── basalstyle-logo.svg ├── sass ├── style.sass ├── _functions.scss ├── _tables.scss ├── _buttons.scss ├── _images.scss ├── _typography_extended.scss ├── _variables.scss ├── _header.scss ├── _typography.scss ├── _forms.scss ├── _nav.scss └── _grid.scss ├── .vscode └── settings.json ├── .save.cson ├── style-custom.css ├── README.md ├── style.min.css.map ├── style.min.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/abstrato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viniciusbraga/basalstyle/HEAD/images/abstrato.png -------------------------------------------------------------------------------- /images/basalstyle-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viniciusbraga/basalstyle/HEAD/images/basalstyle-logo.png -------------------------------------------------------------------------------- /images/grid-15-30-95-1140.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viniciusbraga/basalstyle/HEAD/images/grid-15-30-95-1140.png -------------------------------------------------------------------------------- /sass/style.sass: -------------------------------------------------------------------------------- 1 | @charset "UTF-8" 2 | 3 | @import "functions" 4 | @import "variables" 5 | @import "typography" 6 | @import "typography_extended" 7 | @import "tables" 8 | @import "grid" 9 | @import "header" 10 | @import "nav" 11 | @import "images" 12 | @import "forms" 13 | @import "buttons" 14 | 15 | // Fim 16 | -------------------------------------------------------------------------------- /sass/_functions.scss: -------------------------------------------------------------------------------- 1 | 2 | // Remove unidade de uma variável 3 | // Baseado na função existente no Foundation 4 | // https://github.com/zurb/foundation/blob/4d54d0c0851faa02b500c0707241424d27a9b26e/scss/foundation/_functions.scss 5 | @use 'sass:math'; 6 | 7 | @function strip-unit($num) { 8 | @return math.div($num, ($num * 0 + 1)); 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "filewatcher.commands": [ 3 | { 4 | "match": "/sass/\\.*", 5 | "isAsync": true, 6 | "cmd": "sass ${fileDirname}/style.sass:${fileDirname}/../style.min.css --style compressed --charset --stop-on-error;", 7 | "event": "onFolderChange" 8 | } 9 | ] 10 | } -------------------------------------------------------------------------------- /.save.cson: -------------------------------------------------------------------------------- 1 | # Documento de compilação automática do plugin Save-AutoRun do Atom. 2 | 3 | # SASS Ruby 4 | # "**/sass/*.scss": "sass ${dir}/style.sass:${dir}/../style.min.css --sourcemap=auto --style compact --precision 3 --stop-on-error --no-cache;" 5 | 6 | # SASS Dart 7 | "**/sass/*.scss": "sass ${dir}/style.sass:${dir}/../style.min.css --style compressed --charset --stop-on-error;" 8 | # "**/sass/*.scss": "sass ${dir}/style.sass:${dir}/../style.min.css --style expanded --charset --stop-on-error;" 9 | -------------------------------------------------------------------------------- /style-custom.css: -------------------------------------------------------------------------------- 1 | 2 | /* Customização para a página de apresentação */ 3 | 4 | body { 5 | font-family: 'Open Sans', sans-serif; 6 | } 7 | 8 | .site-logo h1 a { 9 | background: transparent url(images/basalstyle-logo.png) no-repeat left bottom; 10 | } 11 | 12 | .site-logo h1 a { 13 | background-image: url(images/basalstyle-logo.png); 14 | background-image: url(images/basalstyle-logo.svg), none; 15 | } 16 | 17 | section header h2 { 18 | color: #CDCDCD; 19 | font-size: 20px; 20 | padding: 15px 0 0 0; 21 | min-height: 60px; 22 | text-transform: uppercase; 23 | } 24 | 25 | .footer-frame { 26 | background: #F5F5F5; 27 | } 28 | 29 | .footer .site-logo h1 a { 30 | -webkit-filter: grayscale(100%); 31 | -moz-filter: grayscale(100%); 32 | -ms-filter: grayscale(100%); 33 | -o-filter: grayscale(100%); 34 | filter: grayscale(100%); 35 | opacity: 0.6; 36 | } 37 | 38 | 39 | /* Fim Customização */ 40 | -------------------------------------------------------------------------------- /sass/_tables.scss: -------------------------------------------------------------------------------- 1 | 2 | table { 3 | margin: 0 0 $basal-leading 0; 4 | } 5 | 6 | table th { 7 | font-size: 1.6em; 8 | text-transform: none; 9 | line-height: $basal-leading; 10 | padding: 0.5em 0 0 $basal-padding; 11 | background-color: $basal-color-text-background; 12 | } 13 | 14 | table td { 15 | min-height: $basal-leading; 16 | padding-left: $basal-padding; 17 | border-bottom: 1px solid $basal-color-ruler; 18 | } 19 | 20 | .table-wrapper { 21 | margin: 0 auto $basal-leading; 22 | } 23 | 24 | 25 | /* 26 | * Quebra de layout para Mobile/Celulares 27 | * 28 | */ 29 | 30 | @media all and (max-width: $basal-media-mobile) { 31 | 32 | .table-wrapper { 33 | display: block; 34 | width: 94%; 35 | overflow: auto; 36 | } 37 | 38 | .table-wrapper table { 39 | white-space: nowrap; 40 | } 41 | 42 | .table-wrapper th, 43 | .table-wrapper td { 44 | font-size: 1.6em; 45 | line-height: 1.88em; 46 | } 47 | 48 | } -------------------------------------------------------------------------------- /sass/_buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Botões de Interface */ 3 | 4 | .btn-basic, 5 | .btn-basic:visited, 6 | input[type="submit"] { 7 | color: $basal-button-text-color; 8 | font-size: 14px; 9 | font-weight: bold; 10 | line-height: 42px; 11 | min-height: 42px; 12 | vertical-align: middle; 13 | text-transform: uppercase; 14 | text-decoration: none; 15 | margin: 0.5em 1em 0.5em 0; 16 | padding: 0 1.6em; 17 | display: inline-block; 18 | border: $basal-button-border; 19 | border-radius: $basal-button-border-radius; 20 | position: relative; 21 | background-color: $basal-button-background; 22 | transition: background-color ease 0.5s; 23 | 24 | } 25 | 26 | .btn-basic:hover, 27 | .btn-basic:focus, 28 | input[type="submit"]:hover { 29 | color: $basal-button-text-color-hover; 30 | background-color: $basal-button-background-hover; 31 | outline: 0; 32 | cursor: pointer; 33 | } 34 | 35 | .btn-icon-left { padding-left: 1.2em; } 36 | .btn-icon-left .fa { padding-right: 0.5em; } 37 | 38 | .btn-icon-right { padding-right: 1.5em; } 39 | .btn-icon-right .fa { padding-left: 0.5em; } 40 | 41 | .btn-row { 42 | margin: 0; 43 | padding: 0; 44 | min-height: $basal-leading * 2; 45 | } 46 | 47 | /* Botões coloridos */ 48 | 49 | @mixin buttons($selector, $txt-color, $bg-color) { 50 | 51 | #{$selector} { 52 | 53 | color: $txt-color; 54 | background-color: $bg-color; 55 | 56 | &:visited { 57 | @extend #{$selector}; 58 | } 59 | 60 | &:hover { 61 | color: $txt-color; 62 | background-color: darken($bg-color, 15%); 63 | } 64 | } 65 | 66 | } 67 | 68 | @include buttons( ".btn-green", 69 | $basal-button-color-text-color, 70 | $green-base); 71 | 72 | @include buttons( ".btn-blue", 73 | $basal-button-color-text-color, 74 | $blue-base); 75 | 76 | @include buttons( ".btn-orange", 77 | $basal-button-color-text-color, 78 | $orange-base); 79 | 80 | @include buttons( ".btn-red", 81 | $basal-button-color-text-color, 82 | $red-base); 83 | 84 | 85 | /* 86 | * Quebra de layout para Tablet 87 | * 88 | */ 89 | 90 | @media all and (max-width: $basal-media-tablet) { 91 | 92 | .btn-row { 93 | padding: 0 $basal-padding; 94 | } 95 | 96 | 97 | } 98 | // Fim da Quebra de layout para Tablet 99 | 100 | // FIM Botões de Interface 101 | -------------------------------------------------------------------------------- /sass/_images.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Imagens 4 | * 5 | */ 6 | 7 | // Exemplo de aplicação: 8 | //
9 | // 10 | //
11 | //
12 | // 13 | //
14 | 15 | .img { 16 | position: relative; 17 | } 18 | 19 | .img img { 20 | width: 100%; 21 | height: auto; 22 | } 23 | 24 | .img:after { 25 | content: ""; 26 | top: 0; 27 | left: 0; 28 | bottom: 0; 29 | right: 0; 30 | position: absolute; 31 | z-index: -1; 32 | } 33 | 34 | .img figcaption, 35 | .img-legend { 36 | font-size: 1em; 37 | line-height: 1em; 38 | text-align: right; 39 | padding: 1.10em 1.5em 0; 40 | width: auto; 41 | min-height: $basal-leading; 42 | background-color: #ffffff; 43 | opacity: 0.3; 44 | position: absolute; 45 | bottom: 0; 46 | right: 0; 47 | transition: opacity 1s; 48 | } 49 | 50 | .img:hover figcaption, 51 | .img:hover .img-legend{ 52 | opacity: 1; 53 | } 54 | 55 | .img figcaption a, 56 | .img-legend a { text-decoration: none; } 57 | 58 | .img .img-normal { 59 | width: auto; 60 | height: auto; 61 | margin: 0 auto; 62 | display: block; 63 | } 64 | 65 | 66 | // img-align-text 67 | // 68 | // A caixa da entidade HTML (DIV ou FIGURE), que envolve a imagem, 69 | // recebe uma propriedade extra no padding-top, 70 | // empurando a imagem para o alinhamento visual com o texto das colunas ao lado. 71 | // 72 | // Exemplo de aplicação: 73 | //
74 | // 75 | //
76 | 77 | 78 | .img-align-text { padding-top: 1.4em; } 79 | 80 | 81 | /* 82 | * Quebra de layout no limite da largura máxima de colunas 83 | * 84 | */ 85 | 86 | @media all and (max-width: $basal-media-inbound) { 87 | 88 | .img { padding: calc($basal-leading / 2) 0; } 89 | 90 | .img figcaption, 91 | .img-legend { position: relative; } 92 | 93 | .img-align-text { 94 | margin-top: 0; 95 | margin-bottom: 0; 96 | } 97 | 98 | .img .img-normal { 99 | width: 100%; 100 | height: auto; 101 | } 102 | 103 | 104 | } /* FIM da quebra de layout */ 105 | 106 | 107 | /* 108 | * Quebra de layout para Tablet 109 | * 110 | */ 111 | 112 | @media all and (max-width: $basal-media-tablet) { 113 | 114 | .img { padding: calc($basal-leading / 2) $basal-padding; } 115 | 116 | } /* Fim da Quebra de layout para Tablet */ 117 | 118 | /* FIM Imagens */ 119 | -------------------------------------------------------------------------------- /sass/_typography_extended.scss: -------------------------------------------------------------------------------- 1 | 2 | // Columns Rulers, tricks and treats 3 | 4 | .ruler-left { border-left: 1px solid $basal-color-ruler; } 5 | .ruler-top { border-top: 1px solid $basal-color-ruler; } 6 | .ruler-right { border-right: 1px solid $basal-color-ruler; } 7 | .ruler-bottom { border-bottom: 1px solid $basal-color-ruler; } 8 | 9 | .float-left { float: left; } 10 | .float-right { float: right; } 11 | 12 | .text-align-left { text-align: left; } 13 | .text-align-right { text-align: right; } 14 | .text-align-center { text-align: center; } 15 | 16 | 17 | // Break Block - Força a quebra em bloco/ brbk 18 | // Permite a quebrar de textos de uma manchete ou chamada em blocos determinados. 19 | // Ex.:

Tipografia Moderna e Futurismo/ Ação e Perspectiva

20 | 21 | .brbk { display: block; font-weight: inherit; } 22 | 23 | 24 | // Break No - Evita quebra de palavras de um bloco inline/ brno 25 | // Ajuda na quebrar de um conjunto de palavras em títulos em destaque 26 | // Ex.:

Tipografia Moderna e Futurismo/ Ação e Perspectiva

27 | 28 | .brno { white-space: nowrap; font-weight: inherit; } 29 | 30 | 31 | /* Anexo com complementos de tipografia e layout */ 32 | 33 | .text-small h1, 34 | .text-small h2, 35 | .text-small h3, 36 | .text-small h4, 37 | .text-small h5, 38 | .text-small h6 { 39 | line-height: 2.25em; 40 | padding: 1em 0 0; 41 | min-height: $basal-leading * 1; 42 | } 43 | 44 | .text-small h1 { font-size: 2.4em; } 45 | 46 | .text-small h2 { font-size: 2.1em; } 47 | 48 | .text-small h3 { font-size: 1.9em; } 49 | 50 | .text-small h4 { font-size: 1.6em; } 51 | 52 | .text-small h1 + h2, 53 | .text-small h2 + h3, 54 | .text-small h3 + h4 { 55 | padding: 0 0 0; 56 | } 57 | 58 | .text-small p, 59 | .text-small li, 60 | .text-small dt, 61 | .text-small dd { 62 | font-size: 1.4em; 63 | line-height: 1.7em; 64 | } 65 | 66 | .text-small p { 67 | padding: 0 0 1em; 68 | } 69 | 70 | .text-small h6 + p { 71 | font-size: 1.2em; 72 | line-height: 1.8em; 73 | } 74 | 75 | 76 | .text-small .text-tiny p, 77 | .text-small .text-tiny li, 78 | .text-small .text-tiny dt, 79 | .text-small .text-tiny dd { 80 | font-size: 1.2em; 81 | line-height: 1.7em; 82 | } 83 | 84 | .text-small .text-tiny h1 { 85 | font-size: 1.6em; 86 | } 87 | 88 | .text-small .text-tiny h2 { 89 | font-size: 1.4em; 90 | } 91 | 92 | .text-small .text-tiny h3 { 93 | font-size: 1.3em; 94 | } 95 | 96 | .text-small .text-tiny h4 { 97 | font-size: 1.3em; 98 | } 99 | 100 | .text-small .text-tiny h1, 101 | .text-small .text-tiny h2, 102 | .text-small .text-tiny h3, 103 | .text-small .text-tiny h4 { 104 | line-height: 1.35em; 105 | } 106 | 107 | 108 | /* 109 | * Quebra de layout no limite da largura máxima de colunas 110 | * 111 | */ 112 | 113 | @media all and (max-width: $basal-media-inbound) { 114 | 115 | %_basal-tiny-col-inbound { 116 | width: 100%; 117 | float: none; 118 | } 119 | 120 | @each $i in $basal-col-flex { 121 | 122 | .text-tiny .col-#{$i} { 123 | @extend %_basal-tiny-col-inbound; 124 | } 125 | } 126 | 127 | .text-tiny .gutter, 128 | .text-tiny .gutter-left, 129 | .text-tiny .gutter-right { padding: 0; } 130 | 131 | 132 | } 133 | // FIM do primeiro ajuste de layout 134 | 135 | 136 | /* 137 | * Quebra de layout para Tablet 138 | * 139 | */ 140 | 141 | @media all and (max-width: $basal-media-tablet) { 142 | 143 | 144 | } 145 | // Fim da Quebra de layout para Tablet 146 | 147 | /* 148 | * Quebra de layout para Mobile/Celulares 149 | * 150 | */ 151 | 152 | @media all and (max-width: $basal-media-mobile) { 153 | 154 | .brno { white-space: normal; } 155 | 156 | } 157 | // Fim da Quebra de layout para Mobile/Celulares 158 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Variáveis do grid 3 | 4 | $basal-grid-x: 20px; 5 | $basal-grid-y: 30px; 6 | 7 | $basal-col-fixed: 110px; 8 | $basal-col-number: 12; 9 | $basal-col-percent: calc(round( calc(100% / $basal-col-number ) * 1000) / 1000); 10 | $basal-col-flex: (20, 25, 30, 33, 40, 50, 60, 66, 70, 75); 11 | 12 | $basal-padding: $basal-grid-x; 13 | $basal-leading: $basal-grid-y; 14 | $basal-gutter: $basal-padding; 15 | $basal-max-width: $basal-col-fixed * $basal-col-number; 16 | 17 | $basal-media-inbound: $basal-max-width + floor( calc($basal-col-fixed / 2) ) ; 18 | $basal-media-tablet: 900px; 19 | $basal-media-mobile: 480px; 20 | $basal-media-tiny: 360px; 21 | 22 | 23 | 24 | // GridForMe (https://github.com/henriquebastos/gridforme) 25 | // Os parâmetros para construção da imagem de grid: 26 | // /i/{colunas}/{largura da coluna}/{leading}/{gutter}/?bg=cor&v=cor&h=cor 27 | 28 | 29 | $basal-image-param: "#{$basal-col-number}/#{strip-unit($basal-col-fixed)}/#{strip-unit($basal-leading)}/#{strip-unit($basal-gutter)}/"; 30 | $basal-image-grid: "https://gridfor.me/i/#{$basal-image-param}"; 31 | 32 | 33 | // Cores 34 | 35 | $grey-lighter: #F5F5F5; 36 | $grey-light: #CDCDCD; 37 | $grey-base: #A5A5A5; 38 | $grey-darker: #8C8C8C; 39 | $grey-darkest: #333333; 40 | 41 | $blue-base: #3498DB; 42 | $blue-light: #93C6E8; 43 | $blue-darker: #2980B9; 44 | 45 | $green-base: #1abc9c; 46 | $green-light: lighten($green-base, 15%); 47 | $green-darker: #16a085; 48 | 49 | $orange-base: #FF9900; 50 | $orange-light: lighten($orange-base, 15%); 51 | $orange-darker: #F08000; 52 | 53 | $red-base: #E74C3C; 54 | $red-light: #FF9B96; 55 | $red-darker: #CC3300; 56 | 57 | 58 | // Variáveis de cor 59 | 60 | $basal-color-link: $blue-base; 61 | $basal-color-link-hover: $blue-darker; 62 | $basal-color-link-active: invert( $basal-color-link ); 63 | $basal-color-link-visited: darken( $basal-color-link, 10% ); 64 | 65 | $basal-color-text: #111100; 66 | $basal-color-text-highlight: #DDE6E6; 67 | $basal-color-text-code: #e4e7e7; 68 | $basal-color-text-background: #e4e7e7; 69 | 70 | $basal-color-ruler: #c5cdcd; 71 | $basal-color-background: #ffffff; 72 | 73 | 74 | // Botões - Variáveis de cor 75 | 76 | $basal-button-text-color: #2E3333; 77 | $basal-button-text-color-hover: #FFFFFF; 78 | 79 | $basal-button-border: 0; 80 | 81 | $basal-button-border-radius: 3px; 82 | 83 | $basal-button-background: #C5CDCD; 84 | $basal-button-background-hover: darken($basal-button-background, 10%); 85 | 86 | $basal-button-color-text-color: #FFFFFF; 87 | 88 | 89 | // Formulário - Especificação visual de cores, espessura de borda e fundo. 90 | 91 | // Formulário de campo de texto e similares 92 | 93 | $basal-form-legend-color: #191919; 94 | $basal-form-text-color: #191919; 95 | 96 | $basal-form-border: 1px solid #B5B5B5; 97 | $basal-form-border-hover: 1px solid #999999; 98 | $basal-form-border-focus: 1px solid #5C5C5C; 99 | 100 | $basal-form-border-radius: 3px; 101 | 102 | $basal-form-shadow: inset 1px 1px 3px #CCCCCC; 103 | 104 | $basal-form-background: #F5F5F5; 105 | $basal-form-background-hover: #ffffff; 106 | $basal-form-background-focus: lighten(#2980B9, 50%); 107 | 108 | 109 | // Formulário de dropdown 110 | 111 | $basal-form-dropdown-text-color: #191919; 112 | 113 | $basal-form-dropdown-border: $basal-form-border; 114 | $basal-form-dropdown-border-hover: $basal-form-border-hover; 115 | $basal-form-dropdown-border-focus: $basal-form-border-focus; 116 | 117 | $basal-form-dropdown-radius: $basal-form-border-radius; 118 | 119 | $basal-form-dropdown-shadow: 1px 1px 3px #CCCCCC; 120 | 121 | $basal-form-dropdown-background: $basal-form-background; 122 | $basal-form-dropdown-background-hover: $basal-form-background; 123 | $basal-form-dropdown-background-focus: $basal-form-background; 124 | 125 | 126 | // Formulário com Erro 127 | 128 | $basal-form-error-color: #e74c3c; 129 | $basal-form-error-border: 1px solid $basal-form-error-color; 130 | $basal-form-error-background: rgba($basal-form-error-color, 0.1); 131 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BasalStyle 2 | 3 | Folha de estilo para prototipação rápida de wireframes, sites e formulários. 4 | 5 | ## Sobre o Grid 6 | 7 | O Grid default tem entrelinha de 30px (baseline) e 12 colunas de 100px. As colunas totalizam uma largura máxima de 1200px (`desktop-12`). 8 | 9 | ``` 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | ``` 18 | A classe `container` centraliza o bloco, por isso é comum usá-la junto com uma classe de tamanho de coluna, para definir a largura máxima. Existe um exemplo completo no documento`index.html`. Caso queira fazer um site com largura máxima de 10 colunas (1000px de largura máxima), segue um exemplo: 19 | 20 | ``` 21 |
22 |
23 |
24 |
25 |
26 |
27 | ``` 28 | 29 | O funcionamento de linha e colunas segue o princípio de um bloco (div, header, section, article,...) com a classe "row" envolvendo `DIV` de colunas. 30 | 31 | Deve existir dentro da `row` um somatório de classes de colunas similar a largura máxima aplicada no container (mais detalhes em **Espaço entre colunas**). 32 | 33 | ### Layout "responsivo" 34 | 35 | Não é necessário aplicar as classes "tablet" e "mobile" para o grid ficar "responsivo". Quando o site está sendo apresentado na tela com largura inferior a 900px, todas as classes de `desktop-#` se modificam e ajustam-se em uma única coluna. 36 | 37 | As classes de organização do layout para mobile funcionam entre a largura de 900px até 480px (`tablet-[1,2,3]`) e de 480px até 320px (`mobile-2`). 38 | 39 | Um exemplo com quebras no layout: 40 | 41 | ``` 42 |
43 |
44 |
45 |
46 |
47 | ``` 48 | Qual é o resultado: 49 | 50 | 1. **Em telas acima de 900px de largura (`desktop-#`)** 51 | O layout fica definido em 3 colunas flexíveis com largura máxima total de 1200px. 52 | 2. **Abaixo de 900px até 480px (`tablet-#`)** 53 | As primeiras duas colunas dividirão a tela em 50% de largura cada. A última coluna ficará abaixo delas e ocupará toda a largura (100%). 54 | 2. **Abaixo de 480px até 320px (`mobile-#`)** 55 | O layout será semelhante ao da tablet. 56 | 57 | O emprego das classes `tablet-#` e `mobile-#` deve ser avaliado com critério, para não incorrer em erros de usabilidade, no caso de conteúdos que não ficam bem apresentados em telas pequenas. 58 | 59 | ### Espaço entre colunas de texto (Gutter) 60 | 61 | Para afastar o conteúdo de texto e imagem do limite da coluna, existem as classes: 62 | * `.gutter` (aplica um espaço em ambos os lados), 63 | * `.gutter-left` (aplica um espaço apenas na esqueda) e 64 | * `.gutter-right` (aplica um espaço apenas na direita) 65 | 66 | ``` 67 |
68 |
69 |
70 |
71 |
72 | ``` 73 | 74 | ### Espaço entre colunas 75 | 76 | As classes `col-left-[1-11]` e `col-right-[1-11]` aplicam um espaço real entre colunas. E por isso, deve fazer parte do somatório de colunas no bloco que forma a linha. Estas classes só atuam em telas acima de 800px. 77 | 78 | ``` 79 |
80 |
81 |
82 |
83 | ``` 84 | 85 | ### SASS e Opções da compilação 86 | 87 | Como uso o editor Atom, tenho o plugin [Save Autorun](https://atom.io/packages/save-autorun) para a compilação automática. O arquivo **.save.cson** é o arquivo de configuração requerido pelo plugin e nele possui diferentes configurações de compilação de SASS Ruby e DART. Atualmente a preferência é pelo SASS DART no modo 'compressed'. 88 | 89 | 90 | ### Bugs, Sugestões e Funcionalidades 91 | 92 | Relate sua questão ou pedido de funcionalidades no [GitHub Issues](https://github.com/viniciusbraga/basalstyle/issues). 93 | 94 | 95 | ## License 96 | 97 | The MIT License (MIT) 98 | 99 | Copyright (c) 2014 Vinicius Braga 100 | 101 | Permission is hereby granted, free of charge, to any person obtaining a copy 102 | of this software and associated documentation files (the "Software"), to deal 103 | in the Software without restriction, including without limitation the rights 104 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 105 | copies of the Software, and to permit persons to whom the Software is 106 | furnished to do so, subject to the following conditions: 107 | 108 | The above copyright notice and this permission notice shall be included in 109 | all copies or substantial portions of the Software. 110 | 111 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 112 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 113 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 114 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 115 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 116 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 117 | THE SOFTWARE. 118 | -------------------------------------------------------------------------------- /sass/_header.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Cabeçalho do Site e Navegação */ 3 | 4 | .header { position: relative; } 5 | 6 | .header a { text-decoration: none; } 7 | 8 | .site-logo { 9 | vertical-align: middle; 10 | margin: 30px 0 0; 11 | padding: 0; 12 | } 13 | 14 | .site-logo h1, 15 | .site-logo h1 a { 16 | color: #000; 17 | font-size: 30px; 18 | line-height: 3em; 19 | margin: 0; 20 | padding: 0; 21 | display: block; 22 | height: 30px; 23 | width: 190px; 24 | min-height: 1em; 25 | overflow: hidden; 26 | } 27 | 28 | .site-logo .site-description { 29 | font-size: 1.2em; 30 | line-height: 1.5em; 31 | max-height: 20px; 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | 37 | 38 | /* Fomulário de Busca no Header do Site */ 39 | 40 | .header-search { 41 | vertical-align: middle; 42 | display: block; 43 | margin: 6px 0 0 $basal-padding; 44 | padding: 0 0 0 $basal-padding; 45 | width: 190px; 46 | position: relative; 47 | } 48 | 49 | .header-search form { 50 | margin: 0; 51 | padding: 0; 52 | } 53 | 54 | .header-search label { display: none;} 55 | 56 | .header-search input[type="text"] { 57 | color: #333; 58 | font-size: 16px; 59 | line-height: 27px; 60 | font-family: inherit; 61 | min-height: 27px; 62 | padding: 1px 6px; 63 | margin: 0 auto; 64 | width: 100%; 65 | border: 1px solid #C5CDCD; 66 | display: block; 67 | } 68 | .header-search button[type="submit"] { 69 | color: #333; 70 | font-size: 14px; 71 | line-height: 30px; 72 | padding: 0; 73 | width: 30px; 74 | height: 30px; 75 | border: 0; 76 | box-shadow: none; 77 | overflow: hidden; 78 | display: block; 79 | background: none; 80 | position: absolute; 81 | top: 0; 82 | right: 0; 83 | z-index: 10 84 | } 85 | 86 | /* Header inline */ 87 | 88 | .header-inline .site-logo { 89 | display: block; 90 | position: absolute; 91 | left: 0; 92 | } 93 | 94 | .header-inline .nav-inline { 95 | margin: 2.2em 0; 96 | position: absolute; 97 | right: 0; 98 | } 99 | 100 | .header-inline .nav-inline li { 101 | margin: 0 0 0 1.4em; 102 | } 103 | 104 | .header-inline .nav-inline li a { 105 | color: $grey-darker; 106 | } 107 | 108 | .nav-inline li a:hover { 109 | color: #000; 110 | } 111 | 112 | .header-inline .nav-inline .current > a, 113 | .header-inline .nav-inline .current-menu-item > a, 114 | .header-inline .nav-inline .current_page_item > a, 115 | .header-inline .nav-inline .current-post-ancestor > a, 116 | .header-inline .nav-inline .current-menu-ancestor > a, 117 | .header-inline .nav-inline .current-menu-parent > a, 118 | .header-inline .nav-inline .current-custom-parent > a { 119 | color: #000; 120 | font-weight: 700; 121 | } 122 | 123 | .header-inline .submenu ul li, 124 | .header-inline .menu-item-has-children ul li { 125 | margin: 0; 126 | padding: 0; 127 | } 128 | 129 | 130 | /* 131 | * Quebra de layout no limite da largura máxima de colunas 132 | * 133 | */ 134 | 135 | @media all and (max-width: $basal-media-inbound) { 136 | 137 | .header-inline .header-search { 138 | position: relative; 139 | right: 0; 140 | top: 0; 141 | display: block; 142 | padding-bottom: 20px; 143 | } 144 | 145 | 146 | } /* FIM da quebra de layout */ 147 | 148 | 149 | /* 150 | * Quebra de layout para Tablet 151 | * 152 | */ 153 | 154 | @media all and (max-width: $basal-media-tablet) { 155 | 156 | /* Cabeçalho do Site e Navegação */ 157 | 158 | .header { 159 | position: relative; 160 | } 161 | 162 | .site-logo { 163 | width: 100%; 164 | padding: 0 $basal-padding; 165 | } 166 | 167 | .site-logo .site-description { 168 | width: 90%; 169 | padding-top: 0; 170 | padding-bottom: 10px; 171 | } 172 | 173 | 174 | /* Fomulário de Busca */ 175 | 176 | .header-search { 177 | vertical-align: middle; 178 | display: block; 179 | margin: 0 10px; 180 | padding: 20px 0; 181 | } 182 | 183 | .header-search form { 184 | margin: 0 auto; 185 | position: relative; 186 | } 187 | 188 | .header-search button[type="submit"] { 189 | color: #333; 190 | font-size: 18px; 191 | line-height: 27px; 192 | padding: 0; 193 | width: 40px; 194 | height: 30px; 195 | border: 0; 196 | box-shadow: none; 197 | overflow: hidden; 198 | display: block; 199 | background: none; 200 | position: absolute; 201 | top: 0; 202 | right: 0; 203 | z-index: 10; 204 | } 205 | 206 | /* Header inline */ 207 | 208 | .header-inline .nav-inline { 209 | height: 40px; 210 | width: 40px; 211 | display: inline-block; 212 | overflow: hidden; 213 | background: #fff; 214 | position: absolute; 215 | right: $basal-padding; 216 | z-index: 9999; 217 | } 218 | 219 | .header-inline .nav-inline:hover { 220 | position: absolute; 221 | height: auto; 222 | width: auto; 223 | box-shadow: 0 5px 10px #CCC; 224 | } 225 | 226 | .header-inline .nav-inline > ul { 227 | border: none; 228 | } 229 | 230 | .header-inline .nav-inline li { 231 | margin: 0; 232 | padding-left: 0; 233 | border: none; 234 | } 235 | 236 | .header-inline .nav-inline li a { 237 | padding: 0 2em 0 1em; 238 | } 239 | 240 | .header-inline .submenu ul li, 241 | .header-inline .menu-item-has-children ul li { 242 | margin: 0; 243 | padding: 0 0 0 1em; 244 | } 245 | 246 | .header-inline .nav-inline:hover .nav-mobile { 247 | color: $grey-darkest; 248 | } 249 | 250 | 251 | } /* Fim da Quebra de layout para Tablet */ 252 | 253 | /* FIM Cabeçalho do Site e Navegação */ 254 | -------------------------------------------------------------------------------- /sass/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Etiquetas HTML 4 | * obs: Não é necessário aplicar o CSS RESET com este código na página. 5 | * 6 | */ 7 | 8 | html { 9 | font-size: 62.5%; 10 | background-color: $basal-color-background; 11 | } 12 | 13 | body { 14 | color: $basal-color-text; 15 | font-size: 1em; 16 | line-height: calc( strip-unit( calc($basal-leading / 2) ) / 10 ) * 1em; 17 | font-family: sans-serif; 18 | margin: 0; 19 | padding: 0; 20 | } 21 | 22 | /* Titulagem */ 23 | 24 | h1 { 25 | font-size: 4.0em; 26 | line-height: $basal-leading * 2; 27 | min-height: $basal-leading * 3; 28 | padding: 14px 0 16px; 29 | } 30 | 31 | h2 { 32 | font-size: 3.2em; 33 | line-height: 42px; 34 | min-height: $basal-leading * 3; 35 | padding: 26px 0 10px; 36 | } 37 | 38 | h3 { 39 | font-size: 2.8em; 40 | line-height: 38px; 41 | min-height: $basal-leading * 3; 42 | padding: 30px 0 14px; 43 | } 44 | 45 | h4 { 46 | font-size: 2.3em; 47 | line-height: $basal-leading; 48 | min-height: $basal-leading * 2; 49 | padding: 35px 0 25px; 50 | } 51 | 52 | h5 { 53 | font-size: 1.7em; 54 | line-height: $basal-leading; 55 | min-height: $basal-leading * 2; 56 | padding: 7px 0 23px; 57 | } 58 | 59 | h6 { 60 | font-size: 1.3em; 61 | line-height: 20px; 62 | min-height: $basal-leading * 2; 63 | padding: 14px 0 3px; 64 | } 65 | 66 | h1, h2, h3 { 67 | letter-spacing: -0.030em; 68 | word-spacing: -0.05em; 69 | } 70 | 71 | h1, h2, h3, h4, h5, h6 { 72 | -ms-word-wrap: break-word; 73 | word-wrap: break-word; 74 | } 75 | 76 | h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,blockquote { 77 | margin: 0; 78 | } 79 | 80 | p, li, dt, dd, th, td, caption { 81 | font-size: 1.8em; 82 | line-height: $basal-leading; 83 | } 84 | 85 | li li, li p, li h1, li h2, li h3, li h4 { 86 | font-size: 1em; 87 | } 88 | 89 | p { padding: 7px 0 23px; } 90 | 91 | ul, ol { padding: 0.7em 0 2.3em 3.9em; } 92 | 93 | dl { padding: 0.7em 0 2.3em 2.4em; } 94 | 95 | dt { font-weight: 700; margin: 0; padding: 0; } 96 | 97 | dd { margin: 0; padding: 0; } 98 | 99 | table { 100 | border-collapse: collapse; 101 | width: 100%; 102 | margin: 0 0 0 1em; 103 | } 104 | 105 | th, caption { 106 | text-align: left; 107 | font-weight: bold; 108 | } 109 | 110 | blockquote { 111 | margin: 0 0 $basal-leading $basal-padding; 112 | padding: 0 9em 0 1.5em; 113 | border-left: 8px solid $basal-color-ruler; 114 | } 115 | 116 | em { font-style: italic; } 117 | 118 | small { font-size: 0.75em; line-height: 1em; } 119 | 120 | strong, b { font-weight: 700; } 121 | 122 | pre { 123 | font-size: 1.9em; 124 | line-height: $basal-leading; 125 | text-align: left; 126 | white-space: pre-wrap; 127 | // overflow-x: auto; 128 | overflow-y: hidden; 129 | width: 100%; 130 | min-height: $basal-leading * 2; 131 | padding: calc($basal-leading / 2) $basal-padding; 132 | margin: 0 0 $basal-leading 0; 133 | display: flex; 134 | align-items: center; 135 | border-radius: 6px; 136 | background-color: $basal-color-text-code; 137 | transition: width 0.8s; 138 | } 139 | 140 | code, tt { 141 | color: #C06; 142 | font-size: 1.1em; 143 | line-height: 1em; 144 | padding: 0.2em 0.4em 0.25em; 145 | border-radius: 6px; 146 | background-color: $basal-color-text-code; 147 | } 148 | 149 | pre code { 150 | font-size: 1.05em; 151 | line-height: $basal-leading; 152 | margin: 0; 153 | padding: 0 1em 0 0; 154 | display: inline-block; 155 | } 156 | 157 | hr { 158 | border-left: 0; 159 | border-right: 0; 160 | border-top: solid 1px lighten( $basal-color-ruler, 50% ); 161 | border-bottom: solid 1px $basal-color-ruler; 162 | } 163 | 164 | img { 165 | margin: 0 auto; 166 | vertical-align: middle; 167 | border-width: 0; 168 | } 169 | 170 | form { 171 | padding: 0; 172 | margin: 0; 173 | } 174 | 175 | fieldset { 176 | border: solid 1px $basal-color-ruler; 177 | } 178 | 179 | textarea { 180 | font-family: inherit; 181 | font-size: 1.5em; 182 | margin: 0 1.2em; 183 | padding: 0.75em 0.5em 0.5em 0.75em; 184 | width: 93%; 185 | border: 1px solid $basal-color-ruler; 186 | } 187 | 188 | a { color: $basal-color-link; } 189 | a:hover { color: $basal-color-link-hover; } 190 | a:active { color: $basal-color-link-active; } 191 | a:visited { color: $basal-color-link-visited; } 192 | 193 | header, menu, nav, article, section, aside, details, figcaption, figure, footer { 194 | display: block; 195 | margin: 0; 196 | padding: 0; 197 | } 198 | 199 | /* WebKit/Blink Browsers */ 200 | ::selection { 201 | background: $basal-color-text-highlight; 202 | } 203 | /* Gecko Browsers */ 204 | ::-moz-selection { 205 | background: $basal-color-text-highlight; 206 | } 207 | 208 | /* Aplica o modelo de caixa semelhante ao do IE */ 209 | 210 | * { 211 | -moz-box-sizing: border-box; 212 | -webkit-box-sizing: border-box; 213 | box-sizing: border-box; 214 | } 215 | 216 | 217 | /* 218 | * Quebra de layout no limite da largura máxima de colunas 219 | * 220 | */ 221 | 222 | @media all and (max-width: $basal-media-inbound) { 223 | 224 | figcaption { 225 | position: relative; 226 | } 227 | 228 | 229 | } 230 | // FIM do primeiro ajuste de layout 231 | 232 | 233 | /* 234 | * Quebra de layout para Tablet 235 | * 236 | */ 237 | 238 | @media all and (max-width: $basal-media-tablet) { 239 | 240 | blockquote { 241 | margin: 1em $basal-padding; 242 | padding: 0 0 0 0.25em; 243 | } 244 | 245 | h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote { 246 | margin: 0 $basal-padding; 247 | } 248 | 249 | figcaption { 250 | position: relative; 251 | } 252 | 253 | pre { 254 | width: 96%; 255 | margin: 0 auto $basal-leading; 256 | } 257 | 258 | } 259 | // Fim da Quebra de layout para Tablet 260 | 261 | /* 262 | * Quebra de layout para Mobile/Celulares 263 | * 264 | */ 265 | 266 | @media all and (max-width: $basal-media-mobile) { 267 | 268 | h1, h2, h3, h4, h5, h6 { 269 | line-height: 1.4em; 270 | min-height: 1em; 271 | padding: 2em 0 0.25em; 272 | } 273 | 274 | h1 { font-size: 2.8em; } 275 | 276 | h2 { font-size: 2.6em; } 277 | 278 | h3 { font-size: 2.3em; } 279 | 280 | h4, h5, h6 { font-size: 2.0em; } 281 | 282 | p, li, dt, dd, th, td, caption { 283 | font-size: 1.7em; 284 | line-height: 1.7em; 285 | } 286 | 287 | } 288 | // Fim da Quebra de layout para Mobile/Celulares 289 | -------------------------------------------------------------------------------- /sass/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Formulários */ 3 | 4 | .form-row { 5 | @extend .row; 6 | margin: 0; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | 11 | @for $i from 1 through 40 { 12 | 13 | .form-row.min-h-#{$i} { 14 | @extend .min-h-#{$i}; 15 | } 16 | } 17 | 18 | .form-row p { 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | .form-row a { 24 | text-decoration: none; 25 | } 26 | 27 | .form-row label, 28 | .form-row legend { 29 | color: $basal-form-legend-color; 30 | font-size: 14px; 31 | font-weight: 700; 32 | line-height: $basal-leading; 33 | letter-spacing: 0.06em; 34 | text-transform: none; 35 | padding: 0; 36 | margin: 0; 37 | } 38 | 39 | .form-row input + label { 40 | font-weight: 400; 41 | } 42 | 43 | .label-block label, 44 | .form-row legend { 45 | display: block; 46 | } 47 | 48 | .input-text input { 49 | color: $basal-form-text-color; 50 | font-size: 2.0em; 51 | font-family: inherit; 52 | line-height: 1.4em; 53 | letter-spacing: 0.06em; 54 | vertical-align: middle; 55 | white-space: pre; 56 | margin: 0 0 16px 0; 57 | padding: 0.35em 0.6em; 58 | width: 100%; 59 | min-height: 1em; 60 | display: block; 61 | border: $basal-form-border; 62 | border-radius: $basal-form-border-radius; 63 | box-shadow: $basal-form-shadow; 64 | background-color: $basal-form-background; 65 | outline: none; 66 | transition: background-color 1s ease 0s,border 1s ease 0s; 67 | } 68 | .input-text input:hover { 69 | border: $basal-form-border-hover; 70 | background-color: $basal-form-background-hover; 71 | transition: background-color 1s ease 0s,border 1s ease 0s; 72 | } 73 | .input-text input:focus { 74 | border: $basal-form-border-focus; 75 | background-color: $basal-form-background-focus; 76 | } 77 | 78 | .input-text input + label { 79 | font-weight: 400; 80 | margin-top: -16px; 81 | margin-bottom: 16px; 82 | } 83 | 84 | .input-text-66 input { 85 | width: 66%; 86 | } 87 | 88 | .input-text-33 input { 89 | width: 33%; 90 | } 91 | 92 | .form-row textarea { 93 | color: $basal-form-text-color; 94 | font-family: inherit; 95 | font-size: 1.6em; 96 | margin: 0; 97 | padding: 0.75em 0.5em 0.5em 0.75em; 98 | width: 100%; 99 | min-height: $basal-leading * 4; 100 | border: $basal-form-border; 101 | border-radius: $basal-form-border-radius; 102 | box-shadow: $basal-form-shadow; 103 | background-color: $basal-form-background; 104 | transition: background-color 1s ease 0s,border 1s ease 0s; 105 | } 106 | 107 | .form-row textarea:focus { 108 | border: $basal-form-border-focus; 109 | background-color: $basal-form-background-focus; 110 | } 111 | 112 | .input-radio fieldset, 113 | .input-text fieldset { 114 | padding: 0; 115 | border: none; 116 | } 117 | 118 | .input-radio ul, 119 | .input-radio dl { 120 | margin: 0; 121 | padding: 0; 122 | list-style: none; 123 | } 124 | .input-radio li, 125 | .input-radio dt, 126 | .input-radio dd { 127 | font-size: 1.4em; 128 | line-height: $basal-leading; 129 | margin: 0; 130 | padding: 0; 131 | list-style: none; 132 | } 133 | 134 | .input-radio label { 135 | font-size: 1em; 136 | font-weight: 300; 137 | } 138 | 139 | .input-radio input { 140 | vertical-align: -14%; 141 | display: inline-block; 142 | margin: 0 floor( calc($basal-gutter / 2)) 0 0; 143 | } 144 | 145 | .select-dropdown select { 146 | color: $basal-form-dropdown-text-color; 147 | font-family: inherit; 148 | font-size: 1.6em; 149 | line-height: 2em; 150 | margin: 0 0 16px 0; 151 | padding: 9px 0.3em 8px; 152 | width: 100%; 153 | border: $basal-form-dropdown-border; 154 | border-radius: $basal-form-dropdown-radius; 155 | box-shadow: $basal-form-dropdown-shadow; 156 | background-color: $basal-form-dropdown-background; 157 | transition: background-color 0.2s ease 0s, box-shadow 0.2s ease 0s; 158 | outline: none; 159 | } 160 | .select-dropdown select:hover { 161 | border: $basal-form-dropdown-border-hover; 162 | background-color: $basal-form-dropdown-background-hover; 163 | outline: none; 164 | } 165 | .select-dropdown select:focus { 166 | border: $basal-form-dropdown-border-focus; 167 | background-color: $basal-form-dropdown-background-focus; 168 | outline: none; 169 | } 170 | 171 | .label-inline label { 172 | font-size: 1.2em; 173 | font-weight: 400; 174 | line-height: 1.666em; 175 | padding: 0; 176 | margin: 0; 177 | float: left; 178 | } 179 | 180 | 181 | /* Erros nos formulários */ 182 | 183 | .errorlist { 184 | color: $basal-form-error-color; 185 | } 186 | 187 | .errorlist p, 188 | .errorlist li, 189 | .errorlist dt, 190 | .errorlist dd { 191 | font-size: 1.4em; 192 | line-height: $basal-leading; 193 | padding-top: 0; 194 | padding-bottom: 0; 195 | margin-bottom: 0; 196 | } 197 | 198 | .errorlist li + li, 199 | .errorlist dd + dd { 200 | line-height: 20px; 201 | padding-bottom: 10px; 202 | margin: 0; 203 | } 204 | 205 | .form-row .errorlist { 206 | margin: 0; 207 | padding: 0 0 0 30px; 208 | list-style: none; 209 | display: block; 210 | position: relative; 211 | } 212 | 213 | .form-row .errorlist:before { 214 | content: "\f071"; // fa-exclamation-circle f06a 215 | font-family: 'FontAwesome'; 216 | font-size: 20px; 217 | line-height: 26px; 218 | font-style: normal; 219 | font-weight: normal; 220 | padding: 0 0 0 0; 221 | margin: 0 0 0 -30px; 222 | display: block; 223 | width: 30px; 224 | height: 30px; 225 | position: absolute; 226 | } 227 | 228 | .form-row .errorlist + input, 229 | .form-row .errorlist + input:hover, 230 | .form-row .errorlist + input:focus, 231 | .form-row .errorlist + input + input, 232 | .form-row .errorlist + textarea, 233 | .form-row .errorlist + ul, 234 | .form-row .errorlist + dl, 235 | .error-input input { 236 | border: $basal-form-error-border; 237 | background-color: $basal-form-error-background; 238 | } 239 | 240 | .form-row .errorlist + ul, 241 | .form-row .errorlist + dl { 242 | padding-left: floor( calc($basal-gutter / 3)); 243 | border: 0; 244 | } 245 | 246 | .error-input label, 247 | .error-input legend { 248 | color: $basal-form-error-color; 249 | } 250 | 251 | 252 | /* 253 | * Quebra de layout para Tablet 254 | * 255 | */ 256 | 257 | @media all and (max-width: $basal-media-tablet) { 258 | 259 | .form-row { 260 | padding-left: $basal-padding; 261 | padding-right: $basal-padding; 262 | } 263 | 264 | 265 | .input-text-66 input, 266 | .input-text-33 input { 267 | width: 100%; 268 | } 269 | 270 | 271 | } 272 | // Fim da Quebra de layout para Tablet 273 | 274 | // FIM de Formulários 275 | -------------------------------------------------------------------------------- /style.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["sass/_typography.scss","sass/_variables.scss","sass/_typography_extended.scss","sass/_tables.scss","sass/_grid.scss","sass/_header.scss","sass/_nav.scss","sass/_images.scss","sass/_forms.scss","sass/_buttons.scss"],"names":[],"mappings":"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ACI,sBAUZ,kCAEI,uIACI,WACA,WACA,eAkBJ,qJASA,+BACA,+BACA,+BAEA,qJAQJ,kCAEI,KACI,iBACA,cAGJ,4BAEA,0BAEA,8GACI,WACA,WAcJ,UACI,UACA,WAGJ,2FAEA,6GAEA,qFAEA,uGAqBA,uYACI,YACA,eACA,gBAUJ,mCAEgB,WAQpB,kCAEI,UACI,WACA,YAQR,eACI,gBACA,QAEJ,wDAEI,YACA,cAEJ,2BACI,WAeJ,OACI,cACA,kBAGJ,aACI,WACA,kFACA,WACA,MACA,OACA,SACA,QACA,kBACA,UACA,wBACA,6BAGJ,UACI,WACA,eACA,iBACA,yBACA,mBACA,gBACA,eACA,MACA,QACA,aACA,UACA,sBACA,0BAGJ,yBAEI,wBCvYJ,0BAEA,+BAEA,WACI,sBACA,gBACA,UAGJ,8BAEI,WACA,eACA,gBACA,SACA,UACA,cACA,YACA,YACA,eACA,gBAGJ,6BACE,gBACA,kBACA,gBACA,SACA,UAOF,eACE,sBACA,cACA,oBACA,mBACA,YACA,kBAGF,oBACE,SACA,UAGF,kCAEA,gCACE,WACA,eACA,iBACA,oBACA,gBACA,gBACA,cACA,WACA,yBACA,cAEF,mCACE,WACA,eACA,iBACA,UACA,WACA,YACA,SACA,gBACA,gBACA,cACA,gBACA,kBACA,MACA,QACA,WAKF,0BACI,cACA,kBACA,OAGJ,2BACI,eACA,kBACA,QAGJ,8BACI,mBAGJ,gCACI,MJnEa,QIsEjB,uBACI,WAGJ,oVAOI,WACA,gBAGJ,2EAEM,SACA,UASN,mCAEI,8BACM,kBACA,QACA,MACA,cACA,qBAYV,kCAII,QACE,kBAGF,WACE,WACA,eAGF,6BACE,UACA,cACA,oBAMF,eACE,sBACA,cACA,cACA,eAGF,oBACI,cACA,kBAGJ,mCACE,WACA,eACA,iBACA,UACA,WACA,YACA,SACA,gBACA,gBACA,cACA,gBACA,kBACA,MACA,QACA,WAKF,2BACI,YACA,WACA,qBACA,gBACA,gBACA,kBACA,MJnNiB,KIoNjB,aAGJ,iCACI,kBACA,YACA,WACA,2BAGJ,8BACI,YAGJ,8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","file":"style.min.css"} -------------------------------------------------------------------------------- /sass/_nav.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Menu de navegação inline */ 3 | 4 | .nav-inline { 5 | vertical-align: middle; 6 | margin: 0 0; 7 | padding: 0 0; 8 | display: inline-block; 9 | } 10 | 11 | .nav-inline ul { 12 | margin: 0; 13 | padding: 0; 14 | *zoom: 1; 15 | } 16 | 17 | .nav-inline ul:before, 18 | .nav-inline ul:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | .nav-inline ul:after { 24 | clear: both; 25 | } 26 | 27 | .nav-inline li { 28 | font-size: 1em; 29 | margin: 0 1.4em 0 0; 30 | padding: 0 0; 31 | float: left; 32 | list-style: none; 33 | position: relative; 34 | } 35 | 36 | .nav-inline li a { 37 | font-size: 1.4em; 38 | line-height: 50px; 39 | font-weight: 700; 40 | text-decoration: none; 41 | text-transform: uppercase; 42 | margin: 0 ; 43 | padding: 0 ; 44 | display: block; 45 | transition: color 0.3s; 46 | } 47 | 48 | .nav-inline li a:hover { 49 | color: #000; 50 | border-top-color: $grey-darkest; 51 | } 52 | 53 | .nav-inline .current > a, 54 | .nav-inline .current-menu-item > a, 55 | .nav-inline .current_page_item > a, 56 | .nav-inline .current-post-ancestor > a, 57 | .nav-inline .current-menu-ancestor > a, 58 | .nav-inline .current-menu-parent > a, 59 | .nav-inline .current-custom-parent > a { 60 | color: #000; 61 | font-weight: 700; 62 | } 63 | 64 | .nav-mobile, .nav-close { display: none; } 65 | 66 | 67 | // Submenu de links do Menu nav-inline 68 | // 69 | // Esta "media query" aplica as propriedades a partir da largura 70 | // especificada para uma quebra de tablet até ao infinito (sentido de dentro para fora). 71 | // Quando a janela for menor que a quebra de uma tablet, 72 | // as propriedades cessam de existir. 73 | 74 | @media all and (min-width: $basal-media-tablet) { 75 | 76 | .submenu, 77 | .menu-item-has-children { 78 | position: relative; 79 | overflow: hidden; 80 | } 81 | 82 | .submenu:hover, 83 | .menu-item-has-children:hover { 84 | color: #000; 85 | overflow: visible; 86 | } 87 | 88 | .submenu ul, 89 | .menu-item-has-children ul { 90 | margin: -5px 0 0; 91 | padding: 10px 0 0 ; 92 | opacity: 0; 93 | border: none; 94 | background-color: #FFF; 95 | box-shadow: 0 0 10px rgba(0,0,0,0.25); 96 | position: absolute; 97 | z-index: 9995; 98 | border-radius: 8px; 99 | } 100 | 101 | .submenu ul:after, 102 | .menu-item-has-children ul:after { 103 | content: ""; 104 | width: 30px; 105 | height: 30px; 106 | display: block; 107 | border: none; 108 | background-color: #FFFFFF; 109 | box-shadow: 0 0 10px rgba(0,0,0,0.25); 110 | position: absolute; 111 | top: -12px; 112 | left: 30px; 113 | z-index: -9994; 114 | -webkit-transform-origin: 0 0; 115 | -webkit-transform: rotate(45deg); 116 | transform-origin: 0 0; 117 | transform: rotate(45deg); 118 | border-radius: 3px; 119 | } 120 | 121 | .submenu ul:before, 122 | .menu-item-has-children ul:before { 123 | content: ""; 124 | position: absolute; 125 | top:0; 126 | left:0; 127 | display: block; 128 | width: 100%; 129 | height: 30px; 130 | background: #FFF; 131 | border-radius: 8px; 132 | } 133 | 134 | .submenu:hover > a, 135 | .menu-item-has-children:hover > a { 136 | color: #000; 137 | } 138 | 139 | .submenu:hover > ul, 140 | .menu-item-has-children:hover > ul { 141 | margin: 0 0 0; 142 | opacity: 1; 143 | -webkit-transition: opacity 0.6s, margin 1s; 144 | transition: opacity 0.6s, margin 1s; 145 | } 146 | 147 | .submenu ul li, 148 | .menu-item-has-children ul li { 149 | font-size: 1em; 150 | min-width: 200px; 151 | min-height: 44px; 152 | margin: 0; 153 | padding: 0; 154 | float: none; 155 | } 156 | 157 | .submenu ul li a, 158 | .menu-item-has-children ul li a { 159 | margin: 0 0; 160 | padding: 0 1em; 161 | display: block; 162 | text-align: left; 163 | white-space: nowrap; 164 | } 165 | 166 | .submenu ul li a:hover, 167 | .menu-item-has-children ul li a:hover { 168 | color: #FFF; 169 | background: #3498DB; 170 | } 171 | 172 | .submenu ul li:last-child a:hover, 173 | .menu-item-has-children ul li:last-child a:hover { 174 | border-radius: 0 0 8px 8px; 175 | } 176 | 177 | .submenu .current > a, 178 | .submenu .current-menu-item > a, 179 | .submenu .current_page_item > a, 180 | .submenu .current-post-ancestor > a, 181 | .submenu .current-menu-ancestor > a, 182 | .submenu .current-menu-parent > a, 183 | .submenu .current-custom-parent > a { 184 | color: #000; 185 | font-weight: 700; 186 | } 187 | 188 | .menu-item-has-children .current > a, 189 | .menu-item-has-children .current-menu-item > a, 190 | .menu-item-has-children .current_page_item > a, 191 | .menu-item-has-children .current-post-ancestor > a, 192 | .menu-item-has-children .current-menu-ancestor > a, 193 | .menu-item-has-children .current-menu-parent > a, 194 | .menu-item-has-children .current-custom-parent > a { 195 | color: #000; 196 | font-weight: 700; 197 | } 198 | 199 | // Submenu do Submenu... 200 | 201 | .submenu .submenu ul, 202 | .menu-item-has-children .menu-item-has-children ul { 203 | margin: 0; 204 | } 205 | 206 | .submenu .submenu:hover ul, 207 | .menu-item-has-children .menu-item-has-children:hover ul { 208 | margin: 0 0 0 20%; 209 | } 210 | 211 | .submenu .submenu .submenu:hover ul, 212 | .menu-item-has-children .menu-item-has-children .menu-item-has-children:hover ul { 213 | margin: 0 0 0 15%; 214 | } 215 | 216 | .submenu .submenu:hover > a, 217 | .menu-item-has-children .menu-item-has-children:hover > a { 218 | color: #FFF; 219 | background: #3498DB; 220 | } 221 | 222 | 223 | } /* Fim da quebra de layout */ 224 | 225 | 226 | /* 227 | * Quebra de layout para Tablet 228 | * 229 | */ 230 | 231 | @media all and (max-width: $basal-media-tablet) { 232 | 233 | .nav-inline { 234 | display: block; 235 | } 236 | 237 | .nav-mobile { 238 | color: $grey-base; 239 | margin: 0 0 0 auto; 240 | padding: 5px 8px; 241 | width: 40px; 242 | display: block; 243 | } 244 | 245 | .nav-mobile i { 246 | font-size: 28px; 247 | line-height: 30px; 248 | } 249 | 250 | .nav-mobile:hover { 251 | color: $grey-darkest; 252 | } 253 | 254 | .nav-inline > ul { 255 | background: #fff; 256 | border-top: 1px solid $grey-light; 257 | border-bottom: 1px solid $grey-light; 258 | } 259 | 260 | .nav-inline li { 261 | margin: 0; 262 | padding-left: 15px; 263 | float: none; 264 | border-top: 1px solid $grey-light; 265 | border-bottom: 1px solid $grey-light; 266 | } 267 | 268 | .nav-inline li a { 269 | border: none; 270 | } 271 | 272 | .nav-inline .submenu, 273 | .nav-inline .menu-item-has-children { 274 | padding-left: 0; 275 | } 276 | 277 | .nav-inline .submenu > a, 278 | .nav-inline .menu-item-has-children > a { 279 | padding-left: 15px; 280 | } 281 | 282 | .submenu li, 283 | .menu-item-has-children li { 284 | border-top: 1px solid $grey-light; 285 | border-bottom: none; 286 | } 287 | 288 | .submenu li a, 289 | .menu-item-has-children li a { 290 | padding-left: 1em; 291 | } 292 | 293 | .submenu .fa-chevron-down, 294 | .menu-item-has-children .fa-chevron-down { 295 | display: none; 296 | } 297 | 298 | .nav-inline .current > a, 299 | .nav-inline .current-menu-item > a, 300 | .nav-inline .current_page_item > a, 301 | .nav-inline .current-post-ancestor > a, 302 | .nav-inline .current-menu-ancestor > a, 303 | .nav-inline .current-menu-parent > a, 304 | .nav-inline .current-custom-parent > a { 305 | border: none; 306 | } 307 | 308 | 309 | } /* Fim da Quebra de layout para Tablet */ 310 | 311 | 312 | /* FIM Menu nav-inline */ 313 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Estruturas de Colunas fixas */ 3 | 4 | %_basal-desktop { 5 | float: left; 6 | width: 100%; 7 | } 8 | 9 | @for $i from 1 through $basal-col-number { 10 | 11 | .desktop-#{$i} { 12 | max-width: $basal-col-fixed * $i; 13 | @extend %_basal-desktop; 14 | } 15 | } 16 | 17 | 18 | /* Colunas usando porcentagem */ 19 | 20 | %_basal-col { 21 | float: left; 22 | } 23 | 24 | @each $i in $basal-col-flex { 25 | 26 | .col-#{$i} { 27 | width: $i * 1%; 28 | @extend %_basal-col; 29 | } 30 | } 31 | 32 | 33 | .col { overflow: hidden; } 34 | 35 | 36 | /* Anula o float e centraliza o
da coluna. */ 37 | 38 | .container { margin: 0 auto; float: none; } 39 | 40 | 41 | /* Esconde o elemento HTML em diferente modos de apresentação */ 42 | 43 | .hide, 44 | .hide-desktop { display: none; } 45 | .screen-reader-only { position: absolute; visibility: hidden; } 46 | 47 | 48 | /* 49 | * Aplica o espaço de entrelinha no Padding ou na Margin da caixa. 50 | * Deve ser aplicado em caixas (
,
,
,) 51 | * 52 | */ 53 | 54 | @for $i from 1 through 5 { 55 | 56 | .padding-top-#{$i} { 57 | padding-top: $basal-leading * $i; 58 | } 59 | } 60 | 61 | @for $i from 1 through 5 { 62 | 63 | .padding-bottom-#{$i} { 64 | padding-bottom: $basal-leading * $i; 65 | } 66 | } 67 | 68 | @for $i from 1 through 5 { 69 | 70 | .margin-top-#{$i} { 71 | margin-top: $basal-leading * $i; 72 | } 73 | } 74 | 75 | @for $i from 1 through 5 { 76 | 77 | .margin-bottom-#{$i} { 78 | margin-bottom: $basal-leading * $i; 79 | } 80 | } 81 | 82 | 83 | /* 84 | * Aplica um espaço de coluna a 85 | * esquerda (col-left-[n]) ou a direita (col-right-[n]) 86 | * 87 | */ 88 | 89 | @for $i from 1 through $basal-col-number - 1 { 90 | 91 | .col-left-#{$i} { 92 | margin-left: $basal-col-fixed * $i; 93 | } 94 | } 95 | 96 | @for $i from 1 through $basal-col-number - 1 { 97 | 98 | .col-right-#{$i} { 99 | margin-right: $basal-col-fixed * $i; 100 | } 101 | } 102 | 103 | /* 104 | * Aplica o gutter entre as colunas 105 | * usando o padding interno da caixa da coluna. 106 | * 107 | */ 108 | 109 | .gutter { 110 | padding-left: $basal-gutter; 111 | padding-right: $basal-gutter; 112 | } 113 | 114 | .gutter-left { padding-left: $basal-gutter; } 115 | 116 | .gutter-right { padding-right: $basal-gutter; } 117 | 118 | 119 | /* 120 | * Altura mínima do elemento HTML. 121 | * 122 | * Uso: Tem momentos que você precisa de uma altura mínima no elemento HTML. 123 | * Esta classe especifica a altura mínima com valor múltiplo da entrelinha, 124 | * sem limitar o conteúdo, caso cresça em tamanho e quantidade de elementos. 125 | * Ex: Um uso comum:
126 | * 127 | */ 128 | 129 | @for $i from 1 through 40 { 130 | 131 | .min-h-#{$i} { 132 | min-height: $basal-leading * $i; 133 | } 134 | } 135 | 136 | /* 137 | * Altura máxima do bloco HTML. 138 | * 139 | * Uso: Aplíca-se para conter a altura da imagem dentro do grid. 140 | * Esta classe especifica a altura máxima do bloco HTML com valor múltiplo da entrelinha. 141 | * Ela restringe a visualização do conteúdo, como se fosse uma máscara com altura máxima. 142 | * Ex: Um uso comum:
143 | * 144 | */ 145 | 146 | %_basal-max-h { 147 | min-height: 1em; 148 | overflow: hidden; 149 | } 150 | 151 | @for $i from 1 through 40 { 152 | 153 | .max-h-#{$i} { 154 | height: $basal-leading * $i; 155 | @extend %_basal-max-h; 156 | } 157 | } 158 | 159 | 160 | /* Quebra de layout no limite da largura máxima de colunas */ 161 | 162 | @media all and (max-width: $basal-media-inbound) { 163 | 164 | @for $i from 1 through $basal-col-number { 165 | 166 | .desktop-#{$i} { 167 | @if $i < $basal-col-number { 168 | width: $basal-col-percent * $i; 169 | } @else { 170 | width: 96%; 171 | } 172 | } 173 | } 174 | 175 | @for $i from 1 through $basal-col-number - 1 { 176 | 177 | .col-left-#{$i} { 178 | margin-left: $basal-col-percent * $i; 179 | } 180 | } 181 | 182 | @for $i from 1 through $basal-col-number - 1 { 183 | 184 | .col-right-#{$i} { 185 | margin-right: $basal-col-percent * $i; 186 | } 187 | } 188 | 189 | } 190 | // Fim do primeiro ajuste de layout 191 | 192 | 193 | /* Quebra de layout para Tablet */ 194 | 195 | @media all and (max-width: $basal-media-tablet) { 196 | 197 | %_basal-desktop-tablet { 198 | width: 100%; 199 | float: none; 200 | max-width: none; 201 | } 202 | 203 | @for $i from 1 through $basal-col-number { 204 | 205 | .desktop-#{$i} { 206 | @extend %_basal-desktop-tablet; 207 | } 208 | } 209 | 210 | @for $i from 1 through $basal-col-number - 1 { 211 | 212 | .col-left-#{$i} { 213 | @extend %_basal-col-left-mobile; 214 | } 215 | } 216 | 217 | 218 | %_basal-col-right-mobile { margin-right: 0; } 219 | 220 | @for $i from 1 through $basal-col-number - 1 { 221 | 222 | .col-left-#{$i} { 223 | @extend %_basal-col-right-mobile; 224 | } 225 | } 226 | 227 | .tablet-1 { width: 25%; float: left; } 228 | .tablet-2 { width: 50%; float: left; } 229 | .tablet-3 { width: 75%; float: left; } 230 | 231 | %_basal-col-left-mobile { margin-left: 0; } 232 | 233 | } 234 | // Fim do segundo ajuste de layout 235 | 236 | 237 | /* Quebra de layout para Mobile */ 238 | 239 | @media all and (max-width: $basal-media-mobile) { 240 | 241 | .col { 242 | overflow: visible; 243 | display: block; 244 | } 245 | 246 | .hide-desktop { display: block; } 247 | 248 | .hide-mobile { display: none; } 249 | 250 | %_basal-col-mobile { 251 | width: 100%; 252 | float: none; 253 | } 254 | 255 | .tablet-1, 256 | .tablet-2, 257 | .tablet-3 { @extend %_basal-col-mobile; } 258 | 259 | @each $i in $basal-col-flex { 260 | 261 | .col-#{$i} { 262 | @extend %_basal-col-mobile; 263 | } 264 | } 265 | 266 | .mobile-2 { 267 | width: 50%; 268 | float: left; 269 | } 270 | 271 | %_basal-padding-top-mobile { padding-top: 1em; } 272 | 273 | %_basal-padding-bottom-mobile { padding-bottom: 1em; } 274 | 275 | %_basal-margin-top-mobile { margin-top: 1em; } 276 | 277 | %_basal-margin-bottom-mobile { margin-bottom: 1em; } 278 | 279 | @for $i from 1 through 5 { 280 | 281 | .padding-top-#{$i} { 282 | @extend %_basal-padding-top-mobile; 283 | } 284 | 285 | .padding-bottom-#{$i} { 286 | @extend %_basal-padding-bottom-mobile; 287 | } 288 | 289 | .margin-top-#{$i} { 290 | @extend %_basal-margin-top-mobile; 291 | } 292 | 293 | .margin-bottom-#{$i} { 294 | @extend %_basal-margin-bottom-mobile; 295 | } 296 | } 297 | 298 | %_basal-max-h-mobile { 299 | height: auto; 300 | min-height: 1em; 301 | overflow: hidden; 302 | } 303 | 304 | @for $i from 1 through 40 { 305 | 306 | .max-h-#{$i} { 307 | @extend %_basal-max-h-mobile; 308 | } 309 | } 310 | 311 | .gutter, 312 | .gutter-left, 313 | .gutter-right { padding: 0; } 314 | 315 | } 316 | // Fim do segundo ajuste de layout 317 | 318 | 319 | /* Quebra de layout para Mobile */ 320 | 321 | @media all and (max-width: $basal-media-tiny) { 322 | 323 | .mobile-2 { 324 | width: 100%; 325 | float: none; 326 | } 327 | 328 | } 329 | 330 | 331 | /* Nicolas Gallagher's micro clearfix */ 332 | 333 | .row { 334 | line-height: 1em; // Adicionado para remover interferência de espaçamneto 335 | *zoom: 1; 336 | } 337 | .row:before, 338 | .row:after { 339 | content: " "; 340 | display: table; 341 | } 342 | .row:after { 343 | clear: both; 344 | } 345 | 346 | 347 | 348 | // Grid de DEBUG de alinhamento 349 | // 350 | // Uso: Basta aplicar na página/template o