├── icons └── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── img └── bra-responsive-framework-carloshps-github.png ├── .npmignore ├── .gitattributes ├── bower.json ├── modelo-mackup-html5.html ├── .gitignore ├── package.json ├── css ├── listas-inline.min.css ├── tabelas.min.css ├── reset.min.css ├── cores.min.css ├── reset.css ├── tipografia.min.css ├── grid.min.css ├── tabelas.css ├── listas-inline.css ├── cores.css ├── tipografia.css ├── grid.css ├── botoes.min.css └── botoes.css ├── CHANGELOG.md ├── README.md ├── demo-01.html ├── demo-02.html ├── icones.html ├── demo-03.html ├── listas.html ├── elementos-inline.html ├── tipografia.html ├── tabelas.html ├── botoes.html └── cores.html /icons/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/icons/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /icons/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/icons/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /icons/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/icons/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /icons/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/icons/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /icons/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/icons/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /img/bra-responsive-framework-carloshps-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carloshps/BRA-responsive/HEAD/img/bra-responsive-framework-carloshps-github.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Ignorando todos os arquivos 2 | * 3 | 4 | # Permitindo somente os arquivos necessários 5 | !package.json 6 | !README.md 7 | !CHANGELOG.md 8 | !css/ 9 | !icons/ 10 | !img/ 11 | !botoes.html 12 | !cores.html 13 | !demo-01.html 14 | !demo-02.html 15 | !demo-03.html 16 | !icones.html 17 | !modelo-mackup-html5.html 18 | !tipografia.html 19 | !listas.html 20 | !elementos-inline.html 21 | !tabelas.html -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bra-responsive", 3 | "version": "0.8.2", 4 | "description": "Framework front-end para criação de projetos web responsivos e mobile-first", 5 | "main": "css/bra.css", 6 | "authors": [ 7 | "CarlosHPS (http://www.carloshps.com.br)" 8 | ], 9 | "license": "MIT", 10 | "keywords": [ 11 | "bra-responsive", 12 | "framework", 13 | "css", 14 | "grid", 15 | "responsive", 16 | "web", 17 | "carloshps", 18 | "front-end", 19 | "webdesign", 20 | "mobile-first" 21 | ], 22 | "homepage": "http://www.braresponsive.com.br", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests " 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /modelo-mackup-html5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Conteúdo 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Windows image file caches 4 | Thumbs.db 5 | ehthumbs.db 6 | 7 | # Folder config file 8 | Desktop.ini 9 | 10 | # Recycle Bin used on file shares 11 | $RECYCLE.BIN/ 12 | 13 | # Windows Installer files 14 | *.cab 15 | *.msi 16 | *.msm 17 | *.msp 18 | 19 | # Windows shortcuts 20 | *.lnk 21 | 22 | # ========================= 23 | # Operating System Files 24 | # ========================= 25 | 26 | # OSX 27 | # ========================= 28 | 29 | .DS_Store 30 | .AppleDouble 31 | .LSOverride 32 | 33 | # Thumbnails 34 | ._* 35 | 36 | # Files that might appear in the root of a volume 37 | .DocumentRevisions-V100 38 | .fseventsd 39 | .Spotlight-V100 40 | .TemporaryItems 41 | .Trashes 42 | .VolumeIcon.icns 43 | 44 | # Directories potentially created on remote AFP share 45 | .AppleDB 46 | .AppleDesktop 47 | Network Trash Folder 48 | Temporary Items 49 | .apdisk 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bra-responsive", 3 | "version": "0.8.2", 4 | "description": "Framework front-end para criação de projetos web responsivos e mobile-first", 5 | "scripts": { 6 | "publicar": "./node_modules/.bin/np" 7 | }, 8 | "files": [ 9 | "css", 10 | "icons", 11 | "img" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/carloshps/BRA-responsive.git" 16 | }, 17 | "keywords": [ 18 | "bra-responsive", 19 | "framework", 20 | "css", 21 | "grid", 22 | "responsive", 23 | "web", 24 | "carloshps", 25 | "front-end", 26 | "webdesign", 27 | "mobile-first" 28 | ], 29 | "author": "CarlosHPS (http://www.carloshps.com.br)", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/carloshps/BRA-responsive/issues" 33 | }, 34 | "homepage": "http://www.braresponsive.com.br/", 35 | "devDependencies": { 36 | "np": "^2.11.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /css/listas-inline.min.css: -------------------------------------------------------------------------------- 1 | .list-h li,.list-nostyle,.list-nostyle li{padding-left:0}.strong,b,dt,strong{font-weight:700}.dl-inline dt,code{white-space:nowrap}.list-nostyle{list-style:none}.list-h li{display:inline}.list-h li a{padding-left:.825rem}.list-h li:first-child a{padding-left:0}dl{margin:0 0 1.875em .625em}dt{margin-bottom:.25rem}dd{margin:0 0 1rem 1rem}.dl-inline dt{clear:left;float:left;overflow:hidden;text-align:right}.dl-inline dd{margin-left:5rem}code,p>code{margin:0}.dl-inline dd:after,.dl-inline dd:before{content:"";display:table}.dl-inline dd:after{clear:both}.normal{font-size:100%}.em,em{font-style:italic}code,kbd,mark,samp,var{background-color:#F4F1EE;border-radius:.1875em;color:rgba(0,0,0,.9);display:inline-block;font-family:Consolas,"Courier New",monospace;font-size:.875em;line-height:1;padding:.1em .15em}hr{border-top:.1rem solid #BFBFBF}abbr,acronym{border-bottom:5px dotted #000;cursor:help}cite{color:rgba(0,0,0,.5);font-size:.75em;line-height:1em}code{color:#fff;font-size:.875rem;background:#ACA3C7;border:1px solid #9488B7}code:hover{background-color:#9488B7}pre>code{display:block;line-height:1.25em;padding:0 2.5rem;text-shadow:1px 1px 1px rgba(0,0,0,.15);white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}kbd{border:1px solid #E9E9E9;color:#7A7A7A;padding-left:.35em;padding-right:.35em}mark{background:#DDEA80} 2 | -------------------------------------------------------------------------------- /css/tabelas.min.css: -------------------------------------------------------------------------------- 1 | table{border-collapse:collapse;display:table;width:100%}tfoot{border-top:.01rem solid #E9E9E9;font-weight:700}tfoot td,tfoot th{color:rgba(0,0,0,.35)}td,th{padding:1rem 1.15rem;text-align:left}td:first-child,th:first-child{border-left-width:0}td:last-child,th:last-child{border-right-width:0}.table-borderh tbody tr,thead{border-bottom:.01rem solid #E9E9E9}.table-border-full td,.table-border-full th,.table-border-full tr{border:.01rem solid #E9E9E9}table.table-hover>tbody>tr{transition:background-color .35s ease;-webkit-transition:background-color .35s ease;-moz-transition:background-color .35s ease}table.table-hover>tbody>tr:hover,table.table-striped>tbody>tr:nth-child(odd){background-color:#f4f4f4}@media only screen and (max-width:992px){.table-responsive{border-collapse:collapse;border-spacing:0;display:block;position:relative;width:100%}.table-responsive td:empty:before{content:'\00a0'}.table-responsive td,.table-responsive th{margin:0;vertical-align:top}.table-responsive thead{background-color:#f9f9f9;display:block;float:left;border:0;border-right:.0625em solid #d4d4d4}.table-responsive thead tr{display:block;padding:0 .625rem 0 0}.table-responsive thead tr th::before{content:"\00a0"}.table-responsive tbody{display:block;position:relative;overflow-x:auto;white-space:nowrap;width:auto}.table-responsive tfoot{display:none}.table-responsive tbody tr{display:inline-block;vertical-align:top}.table-responsive th{display:block;text-align:right}.table-responsive td{display:block;min-height:1.125em;text-align:left}.table-responsive tr{padding:0 .625em}} 2 | -------------------------------------------------------------------------------- /css/reset.min.css: -------------------------------------------------------------------------------- 1 | button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}audio,canvas,progress,video{display:inline-block}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 21.jan.2017 - versão 0.8.2 2 | ------------------------------ 3 | - Melhoria da semântica das tabelas 4 | - Correção de bugs de formatação 5 | 6 | 18.jan.2017 - versão 0.8.1 7 | ------------------------------ 8 | - Criação da página Tabelas do BRA responsive 9 | - Criação de folhas de estilos para cada funcionalidade do BRA responsive 10 | - Reorganização da folha de estilos 11 | - Correção de bugs de formatação 12 | 13 | 22.dez.2016 - versão 0.7 14 | ------------------------------ 15 | - Criação da página Elementos Inline do BRA responsive 16 | - Reorganização da folha de estilos 17 | - Correção de bugs de formatação 18 | 19 | 18.dez.2016 - versão 0.6 20 | ------------------------------ 21 | - Criação da página de Listas do BRA responsive 22 | - Implementação de controle de versões via npm 23 | - Implementação de instalação via npm 24 | - Criação do package.json para publicação no npm 25 | - Implementação do pcte de ícones com às listas 26 | - Implementação da paleta de cores às listas 27 | - Reorganização da folha de estilos 28 | 29 | 17.dez.2016 - versão 0.5 30 | ------------------------------ 31 | - Criação da página de Botões do BRA responsive 32 | - Implementação do pcte de ícones com os botões 33 | - Reorganização da folha de estilos 34 | 35 | 11.dez.2016 - versão 0.4.1 36 | ------------------------------ 37 | - Implementação do pacote de ícones Fort Awesome 4.7.0 38 | - Criação da página de ícones do BRA responsive 39 | - Atualização da página Como Usar o BRA responsive 40 | - Otimização do Google Fonts 41 | - Correção de erros semânticos e ortográficos 42 | 43 | 23.nov.2016 - versão 0.3.1 44 | ------------------------------ 45 | - Criação da página de cores do BRA responsive 46 | - Implementação da paleta de cores com 72 variações 47 | - Correção de bugs da tipografia do tamanho dos textos 48 | - Correção de bugs no css referentes ao line-height 49 | 50 | 19.nov.2016 - versão 0.2.1 51 | ------------------------------ 52 | - Implantação da seção 'formatação responsiva' ao bra.css 53 | - Atualização da grade responsiva 54 | - Ajustes nos tamanhos, espaçamentos e proporções da tipografia 55 | - Formatação da tipografia geral 56 | - Criação da página de tipografia do BRA responsive 57 | - Correção de bug do Google Fonts 58 | - Correção de bugs de unidades px, em e rem 59 | 60 | 12.nov.2016 - versão 0.1 61 | ------------------------------ 62 | - Lançamento da página oficial braresponsive.com.br 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BRA responsive BETA 0.8.2 2 | ##### Atualizado em 21.01.2017 3 | 4 | ![BRA responsive](https://github.com/carloshps/BRA-responsive/blob/master/img/bra-responsive-framework-carloshps-github.png) 5 | 6 | ### Simples e intuitivo, BRA responsive é um framework front-end para criação de projetos web responsivos e mobile-first. 7 | 8 | ## Instalação 9 | 10 | - via npm: `npm install --save bra-responsive` 11 | - via bower: `bower install --save bra-responsive` 12 | - via site: [Como usar o BRA responsive](http://www.braresponsive.com.br/como-usar-bra-responsive.html) 13 | 14 | ## Sobre o BRA responsive 15 | 16 | O BRA responsive é um framework de grid responsiva, simples, básico e com um UI Kit bonito, desenvolvido em HTML5 e CSS3. O objetivo maior de sua criação é ajudar webdesigners, front-enders e desenvolvedores, a iniciar seus projetos responsivos, com esta ferramenta. Sua utilização também se destina a projetos que não exijam muitos recursos e voltado para 7 breakpoints (pontos de interrupção) associados aos media queries: 17 | 18 | 1. Phone 320px 19 | 2. Mobile 479px 20 | 3. Tablet 480px a 767px 21 | 4. Laptop 768px a 980px 22 | 5. Desktop 981px a 1100px 23 | 6. Desktop HD 1101px a 1300px 24 | 7. Large Monitor 1301px 25 | 26 | ## Principais características 27 | 28 | Nesta versão BETA, a intenção é criar o básico, mas usualmente aplicável. Portanto, as principais características são: 29 | 30 | - Grid com 12 colunas 31 | - 100% responsivo 32 | - Mobile first como conceito 33 | - CSS box model 34 | - Semântico 35 | - Sistema de GRID responsivo 36 | - UI Kit básico 37 | - Customizável 38 | - Reset com Normalize.css 39 | - E muito mais 40 | 41 | ## Suporte a navegadores 42 | 43 | Funciona bem no Chrome 52+, Firefox 47+, Safari 9.1+, Opera 38+, Edge 13+, IE 9+ 44 | 45 | ## Site oficial 46 | [www.braresponsive.com.br](http://www.braresponsive.com.br). 47 | 48 | ## Demos 49 | 50 | Redimensione a janela do seu navegador e/ou visualize os demos abaixo em dispositivos diferentes para visualizar os resultados da grid responsiva. 51 | 52 | [Demo #1](http://braresponsive.com.br/demos/demo-01.html) [Demo #2](http://braresponsive.com.br/demos/demo-02.html) [Demo #3](http://braresponsive.com.br/demos/demo-03.html) 53 | 54 | ## Próximos passos 55 | 56 | - [x] Criação do site oficial 57 | - [x] Criação da página **Tipografia** 58 | - [x] Criação da página **Elementos Inline** 59 | - [x] Criação da página **Listas** 60 | - [x] Criação da página **Botões** 61 | - [x] Criação da página **Cores** 62 | - [x] Criação da página **Tabelas** 63 | - [ ] Criação da página **Formulário** 64 | - [x] Criação da página **Ícones** 65 | 66 | ## Direitos autoriais e licença de uso 67 | 68 | Copyright © 2016-2017 - Liberado sob a [licença MIT](https://opensource.org/licenses/MIT). 69 | 70 | Todos os direitos reservados a [CarlosHPS Webdesigner](http://www.carloshps.com.br). 71 | -------------------------------------------------------------------------------- /demo-01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - DEMO #1 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 |
31 |

logotipo

32 |
33 | 34 | 35 |
36 |

menu

37 |
38 | 39 |
40 |
41 | 42 | 43 |
44 | 45 | 46 |
47 | 48 | 49 |
50 |

coluna #1

51 |
52 | 53 | 54 |
55 |

coluna #2

56 |
57 | 58 | 59 |
60 |

coluna #3

61 |
62 |
63 |
64 | 65 | 66 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /css/cores.min.css: -------------------------------------------------------------------------------- 1 | .cb1a{background:#C9DD37}.cb1b{background:#D2E35B}.cb1c{background:#DDEA80}.c1a{color:#C9DD37}.c1b{color:#D2E35B}.c1c{color:#DDEA80}.cb2a{background:#98B75E}.cb2b{background:#AAC47B}.cb2c{background:#BDD198}.c2a{color:#98B75E}.c2b{color:#AAC47B}.c2c{color:#BDD198}.cb3a{background:#48CCBC}.cb3b{background:#69D6C8}.cb3c{background:#8ADFD5}.c3a{color:#48CCBC}.c3b{color:#69D6C8}.c3c{color:#8ADFD5}.cb4a{background:#4268A8}.cb4b{background:#577DBD}.cb4c{background:#7695C9}.c4a{color:#4268A8}.c4b{color:#577DBD}.c4c{color:#7695C9}.cb5a{background:#338AE1}.cb5b{background:#589FE7}.cb5c{background:#7DB5EC}.c5a{color:#338AE1}.c5b{color:#589FE7}.c5c{color:#7DB5EC}.cb6a{background:#21BFF3}.cb6b{background:#49CBF5}.cb6c{background:#72D7F8}.c6a{color:#21BFF3}.c6b{color:#49CBF5}.c6c{color:#72D7F8}.cb7a{background:#7C6DA7}.cb7b{background:#9488B7}.cb7c{background:#ACA3C7}.c7a{color:#7C6DA7}.c7b{color:#9488B7}.c7c{color:#ACA3C7}.cb8a{background:#BB59BB}.cb8b{background:#C877C8}.cb8c{background:#D595D5}.c8a{color:#BB59BB}.c8b{color:#C877C8}.c8c{color:#D595D5}.cb9a{background:#CC488A}.cb9b{background:#D6699F}.cb9c{background:#DF8AB5}.c9a{color:#CC488A}.c9b{color:#D6699F}.c9c{color:#DF8AB5}.cb10a{background:#EA2B69}.cb10b{background:#EE5184}.cb10c{background:#F1789F}.c10a{color:#EA2B69}.c10b{color:#EE5184}.c10c{color:#F1789F}.cb11a{background:#CC4848}.cb11b{background:#D66969}.cb11c{background:#DF8A8A}.c11a{color:#CC4848}.c11b{color:#D66969}.c11c{color:#DF8A8A}.cb12a{background:#E44630}.cb12b{background:#E96856}.cb12c{background:#EE8A7B}.c12a{color:#E44630}.c12b{color:#E96856}.c12c{color:#EE8A7B}.cb13a{background:#FF952B}.cb13b{background:#FA5}.cb13c{background:#FFBF80}.c13a{color:#FF952B}.c13b{color:#FA5}.c13c{color:#FFBF80}.cb14a{background:#FC3}.cb14b{background:#FFD555}.cb14c{background:#FFDF80}.c14a{color:#FC3}.c14b{color:#FFD555}.c14c{color:#FFDF80}.cb15a{background:#FFE42B}.cb15b{background:#FFEA55}.cb15c{background:#FFEF80}.c15a{color:#FFE42B}.c15b{color:#FFEA55}.c15c{color:#FFEF80}.cb16a{background:#434852}.cb16b{background:#565C69}.cb16c{background:#697181}.c16a{color:#434852}.c16b{color:#565C69}.c16c{color:#697181}.cb17a{background:#4B4F46}.cb17b{background:#61655A}.cb17c{background:#767B6F}.c17a{color:#4B4F46}.c17b{color:#61655A}.c17c{color:#767B6F}.cb18a{background:#7A7A7A}.cb18b{background:#8F8F8F}.cb18c{background:#A4A4A4}.c18a{color:#7A7A7A}.c18b{color:#8F8F8F}.c18c{color:#A4A4A4}.c19a{color:#BFBFBF}.c19b{color:#D4D4D4}.c19c{color:#E9E9E9}.cb19a{background:#BFBFBF}.cb19b{background:#D4D4D4}.cb19c{background:#E9E9E9}.cb20a{background:#F2F3F7}.cb20b{background:#F6F7FB}.cb20c{background:#FFF}.c20a{color:#F2F3F7}.c20b{color:#F6F7FB}.c20c{color:#FFF}.cb21a{background:#4A3836}.cb21b{background:#604846}.cb21c{background:#725452}.c21a{color:#4A3836}.c21b{color:#604846}.c21c{color:#725452}.cb22a{background:#6D473E}.cb22b{background:#7C5247}.cb22c{background:#8A5A4F}.c22a{color:#6D473E}.c22b{color:#7C5247}.c22c{color:#8A5A4F}.cb23a{background:#997C5E}.cb23b{background:#A5886B}.cb23c{background:#B0977D}.c23a{color:#997C5E}.c23b{color:#A5886B}.c23c{color:#B0977D}.cb24a{background:#E4DDD3}.cb24b{background:#E9E3DC}.cb24c{background:#F4F1EE}.c24a{color:#E4DDD3}.c24b{color:#E9E3DC}.c24c{color:#F4F1EE} 2 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 18.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | 0. Reset normalize.css v5.0.0 26 | MIT License | github.com/necolas/normalize.css 27 | =================================================================*/ 28 | 29 | html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none} 30 | -------------------------------------------------------------------------------- /demo-02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - DEMO #2 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 |
31 |

logotipo

32 |
33 | 34 | 35 |
36 |

menu

37 |
38 | 39 |
40 |
41 | 42 | 43 |
44 | 45 | 46 |
47 | 48 | 49 |
50 |

coluna #1

51 |
52 | 53 | 54 |
55 |

coluna #2

56 |
57 | 58 | 59 |
60 |

coluna #3

61 |
62 |
63 |
64 | 65 | 66 |
67 | 68 | 69 |
70 | 71 | 72 |
73 |

coluna #1

74 |
75 | 76 | 77 |
78 |

coluna #2

79 |
80 |
81 |
82 | 83 | 84 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /icones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BRA responsive - Ícones 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

4. Ícones

19 |

4.1 Ícones Básicos

20 | 21 |
22 |
23 | fa-css3 24 | fa-html5 25 | fa-twitter 26 | fa-windows 27 | fa-github 28 | fa-cutlery 29 |
30 |
31 | 32 | 33 |
34 |
35 |

4.2 Tamanho dos Ícones

36 |
37 | fa-lg 38 | fa-2x 39 | fa-3x 40 | fa-4x 41 | fa-5x 42 |
43 |
44 |
45 | 46 |
47 |
48 |

4.3 Cores dos Ícones

49 |
50 |   51 |   52 |   53 |   54 |   55 |   56 |   57 |   58 |   59 |   60 |
61 |
62 |
63 | 64 |
65 |

4.4 Lista de Ícones

66 |
67 |
68 |
69 |
    70 |
  • fa-check-square
    • 71 |
  • fa-check-square-o
    • 72 |
  • fa-dot-circle-o
    • 73 |
  • fa-plus-square
    • 74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /css/tipografia.min.css: -------------------------------------------------------------------------------- 1 | .h1,h1{font-size:4.25rem;letter-spacing:-.2rem;line-height:4.455rem}.h2,h2{font-size:3.438rem;letter-spacing:-.15rem;line-height:3.555rem}.h3,.h4,h3,h4{letter-spacing:-.1rem}.h3,h3{font-size:2.625rem;line-height:2.815rem}.h4,h4{font-size:2.125rem;line-height:2.255rem}.h5,h5{font-size:1.625rem;letter-spacing:-.08rem;line-height:1.815rem}.h1,.h2,.h3,h1,h2,h3{font-family:"Work Sans",Arial,sans-serif}.h4,.h5,h4,h5{font-family:"Libre Franklin",sans-serif}.h6,h6{font-size:1.313rem;letter-spacing:-.05rem;line-height:1.5rem;font-family:"Droid Serif",serif}h1>.heading,h2>.heading,h3>.heading,h4>.heading,h5>.heading,h6>.heading{font-size:60%;line-height:1em}.subtitle,.title{word-break:break-word}.subtitle:not(:last-child),.title:not(:last-child){margin-bottom:1.25em}.title+.subtitle{margin-top:-1.25em}.subtitle,.subtitle-1,.subtitle-2,.subtitle-3{font-weight:300}.title+.subtitle-1{margin-top:-1.5em}.title+.subtitle-2{margin-top:-1.95em}.title+.subtitle-3{margin-top:-2.35em}blockquote+h2,blockquote+h3,blockquote+h4,blockquote+h5,blockquote+h6,dl+h2,dl+h3,dl+h4,dl+h5,dl+h6,figure+h2,figure+h3,figure+h4,figure+h5,figure+h6,form+h2,form+h3,form+h4,form+h5,form+h6,hr+h2,hr+h3,hr+h4,hr+h5,hr+h6,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,p+h2,p+h3,p+h4,p+h5,p+h6,pre+h2,pre+h3,pre+h4,pre+h5,pre+h6,table+h2,table+h3,table+h4,table+h5,table+h6,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6{margin-top:2rem}.work-600,.work-900{font-family:"Work Sans",Arial,sans-serif}.work-900{font-weight:900}.work-600{font-weight:600}.heading,.libre-300,.libre-400{font-family:"Libre Franklin",Arial,sans-serif}.droid-400,.droid-400i,.heading-2,.heading-3,.manchete{font-family:"Droid Serif",serif}.heading,.libre-300{font-weight:300}.droid-400,.heading-2,.libre-400{font-weight:400}.droid-400i,.heading-3{font-weight:400i;font-style:italic}p{margin-top:1.25em}.manchete{font-size:1.75rem;line-height:1.25;margin-bottom:1.5em}blockquote{background:#F6F7FB;border-left:3px solid #ccd1d9;color:#8F8F8F;font-family:"Droid serif",serif;margin:0 0 1.25em;padding:.625em 1.25em}blockquote .small,blockquote footer,blockquote small{color:#A4A4A4;display:block;font-size:.75rem;line-height:1.45}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\0bb \0a0'}.font-10,.small,small{font-size:.625rem;line-height:.75rem}.font-13{font-size:.8125rem;line-height:.9375rem}.font-16{font-size:1rem;line-height:1.125rem}.font-21{font-size:1.313rem;line-height:1.438rem}.big,.font-26{font-size:1.625rem;line-height:1.75rem}.font-34,.mega{font-size:2.125rem;line-height:2.25rem}.font-55,.jumbo{font-size:3.438rem;line-height:3.563rem}.left{text-align:left}.right{text-align:right}.center{text-align:center}.justify{text-align:justify}.height-auto{height:100%}.nopadding{padding:0}.nomargin{margin:0}.padding5{padding:.313em}.padding5lr{padding:0 .313em}.padding5tb{padding:.313em 0}.padding5l{padding:0 0 0 .313em}.padding5r{padding:0 .313em 0 0}.padding5t{padding:.313em 0 0}.padding5b{padding:0 0 .313em}.padding10{padding:.625em}.padding10lr{padding:0 .625em}.padding10tb{padding:.625em 0}.padding10l{padding:0 0 0 .625em}.padding10r{padding:0 .625em 0 0}.padding10t{padding:.625em 0 0}.padding10b{padding:0 0 .625em}.padding15{padding:.938em}.padding15lr{padding:0 .938em}.padding15tb{padding:.938em 0}.padding15l{padding:0 0 0 .938em}.padding15r{padding:0 .938em 0 0}.padding15t{padding:.938em 0 0}.padding15b{padding:0 0 .938em}.padding20{padding:1.25em}.padding20lr{padding:0 1.25em}.padding20tb{padding:1.25em 0}.padding20l{padding:0 0 0 1.25em}.padding20r{padding:0 1.25em 0 0}.padding20t{padding:1.25em 0 0}.padding20b{padding:0 0 1.25em}.margin5{margin:.313em}.margin5lr{margin:0 .313em}.margin5tb{margin:.313em 0}.margin5l{margin:0 0 0 .313em}.margin5r{margin:0 .313em 0 0}.margin5t{margin:.313em 0 0}.margin5b{margin:0 0 .313em}.margin10{margin:.625em}.margin10lr{margin:0 .625em}.margin10tb{margin:.625em 0}.margin10l{margin:0 0 0 .625em}.margin10r{margin:0 .625em 0 0}.margin10t{margin:.625em 0 0}.margin10b{margin:0 0 .625em}.margin15{margin:.938em}.margin15lr{margin:0 .938em}.margin15tb{margin:.938em 0}.margin15l{margin:0 0 0 .938em}.margin15r{margin:0 .938em 0 0}.margin15t{margin:.938em 0 0}.margin15b{margin:0 0 .938em}.margin20{margin:1.25em}.margin20lr{margin:0 1.25em}.margin20tb{margin:1.25em 0}.margin20l{margin:0 0 0 1.25em}.margin20r{margin:0 1.25em 0 0}.margin20t{margin:1.25em 0 0}.margin20b{margin:0 0 1.25em} 2 | -------------------------------------------------------------------------------- /css/grid.min.css: -------------------------------------------------------------------------------- 1 | html{box-sizing:border-box;font-size:1rem}*,::after,::before{box-sizing:inherit}body{background:#F6F7FB;color:#999;font-family:"Libre Franklin",Helvetica,sans-serif;font-weight:300;line-height:1.375;margin:0;padding:0;text-align:left}article,aside,footer,header,section{padding:.625em .938em}.container{display:block;height:auto;margin:0 auto;max-width:81.25em;max-width:100%;!important 2 | padding:0;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container:after,.container:before,.row:after,.row:before{content:"";display:table}.container:after,.row:after{clear:both}[class*=bra-]{float:left;width:100%}.cont{margin:10px}.cont-nogutter,img+p{margin:0}.cont,.cont-nogutter{background:#fff;border-radius:2px;box-shadow:0 2px 1px rgba(0,0,0,.2);padding:.5em}.bra-1{width:8.33333%}.bra-2{width:16.66667%}.bra-3{width:25%}.bra-4{width:33.33332%}.bra-5{width:41.66665%}.bra-6{width:49.99998%}.bra-7{width:58.33331%}.bra-8{width:66.66664%}.bra-9{width:74.99997%}.bra-10{width:83.33333%}.bra-11{width:91.66663%}.bra-12{width:100%}@media screen and (max-width:320px){.bra-phone-1{width:8.33333%}.bra-phone-2{width:16.66667%}.bra-phone-3{width:25%}.bra-phone-4{width:33.33332%}.bra-phone-5{width:41.66665%}.bra-phone-6{width:49.99998%}.bra-phone-7{width:58.33331%}.bra-phone-8{width:66.66664%}.bra-phone-9{width:74.99997%}.bra-phone-10{width:83.33333%}.bra-phone-11{width:91.66663%}.bra-phone-12{width:100%}}@media screen and (max-width:479px){.bra-smart-1{width:8.33333%}.bra-smart-2{width:16.66667%}.bra-smart-3{width:25%}.bra-smart-4{width:33.33332%}.bra-smart-5{width:41.66665%}.bra-smart-6{width:49.99998%}.bra-smart-7{width:58.33331%}.bra-smart-8{width:66.66664%}.bra-smart-9{width:74.99997%}.bra-smart-10{width:83.33333%}.bra-smart-11{width:91.66663%}.bra-smart-12{width:100%}}@media screen and (min-width:480px){.bra-tablet-1{width:8.33333%}.bra-tablet-2{width:16.66667%}.bra-tablet-3{width:25%}.bra-tablet-4{width:33.33332%}.bra-tablet-5{width:41.66665%}.bra-tablet-6{width:49.99998%}.bra-tablet-7{width:58.33331%}.bra-tablet-8{width:66.66664%}.bra-tablet-9{width:74.99997%}.bra-tablet-10{width:83.33333%}.bra-tablet-11{width:91.66663%}.bra-tablet-12{width:100%}}@media screen and (min-width:768px){.bra-laptop-1{width:8.33333%}.bra-laptop-2{width:16.66667%}.bra-laptop-3{width:25%}.bra-laptop-4{width:33.33332%}.bra-laptop-5{width:41.66665%}.bra-laptop-6{width:49.99998%}.bra-laptop-7{width:58.33331%}.bra-laptop-8{width:66.66664%}.bra-laptop-9{width:74.99997%}.bra-laptop-10{width:83.33333%}.bra-laptop-11{width:91.66663%}.bra-laptop-12{width:100%}}@media screen and (min-width:981px){.bra-desktop-1{width:8.33333%}.bra-desktop-2{width:16.66667%}.bra-desktop-3{width:25%}.bra-desktop-4{width:33.33332%}.bra-desktop-5{width:41.66665%}.bra-desktop-6{width:49.99998%}.bra-desktop-7{width:58.33331%}.bra-desktop-8{width:66.66664%}.bra-desktop-9{width:74.99997%}.bra-desktop-10{width:83.33333%}.bra-desktop-11{width:91.66663%}.bra-desktop-12{width:100%}}@media screen and (min-width:1101px){.bra-hd-1{width:8.33333%}.bra-hd-2{width:16.66667%}.bra-hd-3{width:25%}.bra-hd-4{width:33.33332%}.bra-hd-5{width:41.66665%}.bra-hd-6{width:49.99998%}.bra-hd-7{width:58.33331%}.bra-hd-8{width:66.66664%}.bra-hd-9{width:74.99997%}.bra-hd-10{width:83.33333%}.bra-hd-11{width:91.66663%}.bra-hd-12{width:100%}}@media screen and (min-width:1301px){.bra-monitor-1{width:8.33333%}.bra-monitor-2{width:16.66667%}.bra-monitor-3{width:25%}.bra-monitor-4{width:33.33332%}.bra-monitor-5{width:41.66665%}.bra-monitor-6{width:49.99998%}.bra-monitor-7{width:58.33331%}.bra-monitor-8{width:66.66664%}.bra-monitor-9{width:74.99997%}.bra-monitor-10{width:83.33333%}.bra-monitor-11{width:91.66663%}.bra-monitor-12{width:100%}}img.responsive-img,video.responsive-video{height:auto;max-width:100%}img+p{font-size:.8rem;font-style:italic}@media screen and (max-width:320px){body{line-height:1.25}}@media screen and (max-width:479px){h3,h4,h5,h6{letter-spacing:-.05rem}body{line-height:1.25}h1{font-size:2.625rem;letter-spacing:-.1rem;line-height:2.815rem}h2{font-size:2.125rem;letter-spacing:-.08rem;line-height:2.255rem}h3{font-size:1.625rem;line-height:1.815rem}h4{font-size:1.313rem;line-height:1.5rem}h5,h6{font-size:1.125rem;line-height:1.125rem}}@media screen and (min-width:480px){body{line-height:1.25}}@media screen and (max-width:768px){h2,h3{letter-spacing:-.1rem}h5,h6{letter-spacing:-.05rem}h1{font-size:3.438rem;letter-spacing:-.15rem;line-height:3.555rem}h2{font-size:2.625rem;line-height:2.815rem}h3{font-size:2.125rem;line-height:2.255rem}h4{font-size:1.625rem;letter-spacing:-.08rem;line-height:1.815rem}h5{font-size:1.313rem;line-height:1.5rem}.manchete,h6{font-size:1.125rem}h6{line-height:1.125rem}.manchete{margin-bottom:1.25em;line-height:1.25}} 3 | -------------------------------------------------------------------------------- /demo-03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - DEMO #3 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 34 | 35 | 41 | 42 | 43 | 44 |
45 | 46 | 47 |
48 | 49 | 50 |
51 |

logotipo

52 |
53 | 54 | 55 |
56 |

menu

57 |
58 | 59 |
60 |
61 | 62 | 63 |
64 | 65 | 66 |
67 |

Título da seção

68 |
69 | 70 | 71 |
72 | 73 | 74 |
75 |

coluna #1

76 |
77 | 78 | 79 |
80 |

coluna #2

81 |
82 | 83 | 84 |
85 |

coluna #3

86 |
87 | 88 | 89 |
90 |

coluna #4

91 |
92 |
93 | 94 | 95 |
96 | 97 | 98 |
99 |

coluna #1

100 |
101 | 102 | 103 |
104 |

coluna #2

105 |
106 | 107 | 108 |
109 |

coluna #3

110 |
111 | 112 | 113 |
114 |

coluna #4

115 |
116 |
117 |
118 | 119 | 120 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /css/tabelas.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 21.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | INDEX / SUMÁRIO 26 | =================================================================== 27 | 28 | 0. Reset Normalize.css (minify) 29 | 1. Configuração Geral 30 | 2. Preparação para o grid 31 | 3. Coluna Padrão - Grid Flexível 32 | 4. Grid Responsivo Phone 320px 33 | 5. Grid Responsivo Smartphone 479px 34 | 6. Grid Responsivo Tablet 480px a 767px 35 | 7. Grid Responsivo Laptop 768px a 980px 36 | 8. Grid Responsivo Desktop 981px a 1100px 37 | 9. Grid Responsivo Desktop HD 1101px a 1300px 38 | 10. Grid Responsivo Large Monitor 1301px 39 | 11. Imagem e media responsive 40 | 12. UI Kit Básico 41 | 12.1. Tipografia 42 | 12.2. Cores 43 | 13. Elementos & Componentes 44 | 13.1. Botões, Links & Inputs 45 | 13.2. Listas 46 | 13.3. Elementos Inline 47 | 13.4. Tabelas 48 | 14. Formatação Responsiva 49 | 50 | =================================================================*/ 51 | 52 | /*================================================================= 53 | 13. Elementos & Componentes | Elements & Components 54 | =================================================================*/ 55 | 56 | /* 13.4 - Tabelas | tables 57 | ------------------------------------------------------------- */ 58 | 59 | /* Tabela Padrão | default table */ 60 | table{ border-collapse: collapse; display: table; width: 100%;} 61 | 62 | tfoot {border-top: 0.01rem solid #E9E9E9; font-weight: 700; } 63 | tfoot td, tfoot th { color: rgba(0, 0, 0, 0.35); } 64 | th,td { padding: 1rem 1.15rem; text-align: left;} 65 | 66 | th:first-child, 67 | td:first-child { 68 | border-left-width: 0; 69 | } 70 | th:last-child, 71 | td:last-child { 72 | border-right-width: 0; 73 | } 74 | 75 | /* Tabela com bordas horizontais */ 76 | thead, 77 | .table-borderh tbody tr 78 | {border-bottom: 0.01rem solid #E9E9E9;} 79 | 80 | /* Tabela com todas as bordas */ 81 | .table-border-full tr, 82 | .table-border-full td, 83 | .table-border-full th{border: 0.01rem solid #E9E9E9;} 84 | 85 | /* Tabela Hover */ 86 | table.table-hover > tbody > tr { 87 | transition: background-color .35s ease; 88 | -webkit-transition: background-color 0.35s ease; 89 | -moz-transition: background-color 0.35s ease; 90 | } 91 | 92 | table.table-hover > tbody > tr:hover { 93 | background-color: #f4f4f4; 94 | } 95 | 96 | /* Tabela Zebrada */ 97 | table.table-striped > tbody > tr:nth-child(odd) { 98 | background-color: #f4f4f4; 99 | } 100 | 101 | /* Tabela Responsiva */ 102 | @media only screen and (max-width: 992px){ 103 | .table-responsive { 104 | border-collapse: collapse; 105 | border-spacing: 0; 106 | display: block; 107 | position: relative; 108 | width: 100%; 109 | } 110 | .table-responsive td:empty:before { 111 | content: '\00a0'; /* espaço */ 112 | } 113 | .table-responsive th, 114 | .table-responsive td { 115 | margin: 0; 116 | vertical-align: top; 117 | } 118 | .table-responsive th { 119 | text-align: left; 120 | } 121 | .table-responsive thead { 122 | background-color: #f9f9f9; 123 | display: block; 124 | float: left; 125 | } 126 | .table-responsive thead tr { 127 | display: block; 128 | padding: 0 0.625rem 0 0; 129 | } 130 | .table-responsive thead tr th::before { 131 | content: "\00a0"; 132 | } 133 | .table-responsive tbody { 134 | display: block; 135 | position: relative; 136 | overflow-x: auto; 137 | white-space: nowrap; 138 | width: auto; 139 | } 140 | .table-responsive tfoot { 141 | display: none; 142 | } 143 | .table-responsive tbody tr { 144 | display: inline-block; 145 | vertical-align: top; 146 | } 147 | .table-responsive th { 148 | display: block; 149 | text-align: right; 150 | } 151 | .table-responsive td { 152 | display: block; 153 | min-height: 1.125em; 154 | text-align: left; 155 | } 156 | .table-responsive tr { 157 | padding: 0 0.625em; 158 | } 159 | .table-responsive thead { 160 | border: 0; 161 | border-right: 0.0625em solid #d4d4d4; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BRA responsive - Listas 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

6. Listas

19 | 20 |

6.1 Listas Ordenada e Não Ordenada

21 |
22 |
23 |
24 |

Lista não ordenada

25 |
    26 |
  • item 1
    • 27 |
  • item 2
    • 28 |
  • item 3
    • 29 |
30 |
31 |
32 |
33 |
34 |

Lista ordenada

35 |
    36 |
  1. item 1
    2. 37 |
  2. item 2
    3. 38 |
  3. item 3
    4. 39 |
40 |
41 |
42 |
43 | 44 | 45 |

6.2 Lista sem estilo

46 |
47 |
48 |
49 |

Lista sem estilo

50 |
    51 |
  1. item 1
    2. 52 |
  2. item 2
    3. 53 |
  3. item 3
    4. 54 |
55 |
56 |
57 |
58 |
59 |

Lista como menu vertical

60 |
    61 |
  1. Página inicial
    2. 62 |
  2. Sobre o site
    3. 63 |
  3. Contato
    4. 64 |
65 |
66 |
67 |
68 | 69 | 70 |

6.3 Lista como menu horizontal

71 |
72 |
73 |
74 |

Lista horizontal

75 | 82 |
83 |
84 |
85 | 86 | 87 |

6.4 Lista de definição e inline

88 |
89 |
90 |
91 |

Lista de Definição

92 |
93 |
Termo 1
94 |
Definição do termo 1. Detalhamento do termo 1.
95 |
Termo 2
96 |
Definição do termo 2. Detalhamento do termo 2.
97 |
Termo 3
98 |
Definição do termo 3. Detalhamento do termo 3.
99 |
100 |
101 |
102 |
103 |
104 |

Lista Inline

105 |
106 |
Termo 1
107 |
Definição do termo 1. Detalhamento do termo 1.
108 |
Termo 2
109 |
Definição do termo 2. Detalhamento do termo 2.
110 |
Termo 3
111 |
Definição do termo 3. Detalhamento do termo 3.
112 |
113 |
114 |
115 |
116 | 117 | 118 |

6.5 Lista com Ícones

119 |
120 |
121 |
122 |

Lista de Ícones

123 |
    124 |
  • fa-check-square
    • 125 |
  • fa-check-square-o
    • 126 |
  • fa-dot-circle-o
    • 127 |
  • fa-plus-square
    • 128 |
129 | 136 |
137 |
138 |
139 | 140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /css/listas-inline.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 18.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | INDEX / SUMÁRIO 26 | =================================================================== 27 | 28 | 0. Reset Normalize.css (minify) 29 | 1. Configuração Geral 30 | 2. Preparação para o grid 31 | 3. Coluna Padrão - Grid Flexível 32 | 4. Grid Responsivo Phone 320px 33 | 5. Grid Responsivo Smartphone 479px 34 | 6. Grid Responsivo Tablet 480px a 767px 35 | 7. Grid Responsivo Laptop 768px a 980px 36 | 8. Grid Responsivo Desktop 981px a 1100px 37 | 9. Grid Responsivo Desktop HD 1101px a 1300px 38 | 10. Grid Responsivo Large Monitor 1301px 39 | 11. Imagem e media responsive 40 | 12. UI Kit Básico 41 | 12.1. Tipografia 42 | 12.2. Cores 43 | 13. Elementos & Componentes 44 | 13.1. Botões, Links & Inputs 45 | 13.2. Listas 46 | 13.3. Elementos Inline 47 | 13.4. Tabelas 48 | 14. Formatação Responsiva 49 | 50 | =================================================================*/ 51 | 52 | /*================================================================= 53 | 13. Elementos & Componentes | Elements & Components 54 | =================================================================*/ 55 | 56 | /* 13.2 - Listas | lists 57 | ------------------------------------------------------------- */ 58 | 59 | /* sem estilo */ 60 | .list-nostyle {list-style: none;padding-left: 0} 61 | .list-nostyle li {padding-left: 0;} 62 | 63 | /* lista horizontal */ 64 | .list-h li{display: inline; padding-left: 0} 65 | .list-h li a{padding-left: 0.825rem;} 66 | .list-h li:first-child a{padding-left: 0;} 67 | 68 | /* de definição */ 69 | dl {margin: 0 0 1.875em 0.625em;} 70 | dt {font-weight: bold; margin-bottom: 0.25rem;} 71 | dd {margin: 0 0 1rem 1rem;} 72 | 73 | /* de definição inline */ 74 | .dl-inline dt { 75 | clear: left; 76 | float: left; 77 | overflow: hidden; 78 | text-align: right; 79 | white-space: nowrap; 80 | } 81 | .dl-inline dd {margin-left: 5rem;} 82 | .dl-inline dd:before, 83 | .dl-inline dd:after { 84 | content: ""; 85 | display: table; 86 | } 87 | .dl-inline dd:after { 88 | clear: both; 89 | } 90 | 91 | /* 13.3 - Elementos Inline | inline elements 92 | ------------------------------------------------------------- */ 93 | 94 | /* Ênfase */ 95 | .normal{font-size: 100%;} 96 | strong, .strong{font-weight:700;} 97 | em, .em{font-style: italic;} 98 | 99 | kbd, mark, samp, code, var { 100 | background-color: #F4F1EE; 101 | border-radius: 0.1875em; 102 | color: rgba(0, 0, 0, 0.9); 103 | display: inline-block; 104 | font-family: Consolas, "Courier New", monospace; 105 | font-size: 0.875em; 106 | line-height: 1; 107 | padding: 0.1em 0.15em; 108 | } 109 | /* hr - barra horizontal 110 | ------------------------------------------------------------- */ 111 | hr { border-top: .1rem solid #BFBFBF; } 112 | 113 | /* abbr & acronym 114 | ------------------------------------------------------------- */ 115 | abbr, acronym{ border-bottom: 5px dotted #000; cursor: help;} 116 | 117 | /* bold - negrito 118 | ------------------------------------------------------------- */ 119 | b{font-weight: bold;} 120 | 121 | /* cite - citação 122 | ------------------------------------------------------------- */ 123 | cite { 124 | color: rgba(0, 0, 0, 0.5); 125 | font-size: 0.750em; 126 | line-height: 1em; 127 | } 128 | 129 | /* pre & code 130 | ------------------------------------------------------------- */ 131 | code { 132 | color: #fff; 133 | margin: 0; 134 | font-size: 0.875rem; 135 | white-space: nowrap; 136 | background: #ACA3C7; 137 | border: 1px solid #9488B7; 138 | } 139 | code:hover { 140 | background-color: #9488B7; 141 | } 142 | pre>code { 143 | display: block; 144 | line-height: 1.250em; 145 | padding: 0 2.5rem; 146 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); 147 | white-space: pre-wrap; 148 | white-space: -moz-pre-wrap; 149 | white-space: -pre-wrap; 150 | white-space: -o-pre-wrap; 151 | word-wrap: break-word; 152 | } 153 | p > code{ margin: 0;} 154 | 155 | /* kbd - keyboard input 156 | ------------------------------------------------------------- */ 157 | kbd{border: 1px solid #E9E9E9; 158 | color: #7A7A7A; 159 | padding-left: 0.35em; 160 | padding-right: 0.35em; 161 | } 162 | 163 | /* mark - marcação 164 | ------------------------------------------------------------- */ 165 | mark{ background: #DDEA80;} 166 | -------------------------------------------------------------------------------- /css/cores.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 18.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | INDEX / SUMÁRIO 26 | =================================================================== 27 | 28 | 0. Reset Normalize.css (minify) 29 | 1. Configuração Geral 30 | 2. Preparação para o grid 31 | 3. Coluna Padrão - Grid Flexível 32 | 4. Grid Responsivo Phone 320px 33 | 5. Grid Responsivo Smartphone 479px 34 | 6. Grid Responsivo Tablet 480px a 767px 35 | 7. Grid Responsivo Laptop 768px a 980px 36 | 8. Grid Responsivo Desktop 981px a 1100px 37 | 9. Grid Responsivo Desktop HD 1101px a 1300px 38 | 10. Grid Responsivo Large Monitor 1301px 39 | 11. Imagem e media responsive 40 | 12. UI Kit Básico 41 | 12.1. Tipografia 42 | 12.2. Cores 43 | 13. Elementos & Componentes 44 | 13.1. Botões, Links & Inputs 45 | 13.2. Listas 46 | 13.3. Elementos Inline 47 | 13.4. Tabelas 48 | 14. Formatação Responsiva 49 | 50 | =================================================================*/ 51 | 52 | /*================================================================= 53 | 12. UI Kit Básico 54 | =================================================================*/ 55 | 56 | /* 12.2 - Cores 57 | .................................................................*/ 58 | 59 | /* Verde Limão */ 60 | .cb1a{background: #C9DD37;} .cb1b{background: #D2E35B;} .cb1c{background: #DDEA80;} 61 | .c1a{color: #C9DD37;} .c1b{color: #D2E35B;} .c1c{color: #DDEA80;} 62 | 63 | /* Verde Amazônia */ 64 | .cb2a{background: #98B75E;} .cb2b{background: #AAC47B;} .cb2c{background: #BDD198;} 65 | .c2a{color: #98B75E;} .c2b{color: #AAC47B;} .c2c{color: #BDD198;} 66 | 67 | /* Verde Esmeralda */ 68 | .cb3a{background: #48CCBC;} .cb3b{background: #69D6C8;} .cb3c{background: #8ADFD5;} 69 | .c3a{color: #48CCBC;} .c3b{color: #69D6C8;} .c3c{color: #8ADFD5;} 70 | 71 | /* Azul Jeans */ 72 | .cb4a{background: #4268A8;} .cb4b{background: #577DBD;} .cb4c{background: #7695C9} 73 | .c4a{color: #4268A8;} .c4b{color: #577DBD;} .c4c{color: #7695C9;} 74 | 75 | /* Azul Oceano */ 76 | .cb5a{background: #338AE1;} .cb5b{background: #589FE7;} .cb5c{background: #7DB5EC;} 77 | .c5a{color: #338AE1;} .c5b{color: #589FE7;} .c5c{color: #7DB5EC;} 78 | 79 | /* Azul Piscina */ 80 | .cb6a{background: #21BFF3;} .cb6b{background: #49CBF5;} .cb6c{background: #72D7F8;} 81 | .c6a{color: #21BFF3;} .c6b{color: #49CBF5;} .c6c{color: #72D7F8;} 82 | 83 | /* Roxo Lavanda */ 84 | .cb7a{background: #7C6DA7;} .cb7b{background: #9488B7;} .cb7c{background: #ACA3C7;} 85 | .c7a{color: #7C6DA7;} .c7b{color: #9488B7;} .c7c{color: #ACA3C7;} 86 | 87 | /* Roxo Lilás */ 88 | .cb8a{background: #BB59BB;} .cb8b{background: #C877C8;} .cb8c{background: #D595D5;} 89 | .c8a{color: #BB59BB;} .c8b{color: #C877C8;} .c8c{color: #D595D5;} 90 | 91 | /* Roxo Vinho */ 92 | .cb9a{background: #CC488A;} .cb9b{background: #D6699F;} .cb9c{background: #DF8AB5;} 93 | .c9a{color: #CC488A;} .c9b{color: #D6699F;} .c9c{color: #DF8AB5;} 94 | 95 | /* Rosa Pink */ 96 | .cb10a{background: #EA2B69;} .cb10b{background: #EE5184;} .cb10c{background: #F1789F;} 97 | .c10a{color: #EA2B69;} .c10b{color: #EE5184;} .c10c{color: #F1789F;} 98 | 99 | /* Vermelho Telha */ 100 | .cb11a{background: #CC4848;} .cb11b{background: #D66969;} .cb11c{background: #DF8A8A;} 101 | .c11a{color: #CC4848;} .c11b{color: #D66969;} .c11c{color: #DF8A8A;} 102 | 103 | /* Vermelho Vivo */ 104 | .cb12a{background: #E44630;} .cb12b{background: #E96856;} .cb12c{background: #EE8A7B;} 105 | .c12a{color: #E44630;} .c12b{color: #E96856;} .c12c{color: #EE8A7B;} 106 | 107 | /* Laranja Marte */ 108 | .cb13a{background: #FF952B;} .cb13b{background: #FFAA55;} .cb13c{background: #FFBF80;} 109 | .c13a{color: #FF952B;} .c13b{color: #FFAA55;} .c13c{color: #FFBF80;} 110 | 111 | /* Laranja Solar */ 112 | .cb14a{background: #FFCC33;} .cb14b{background: #FFD555;} .cb14c{background: #FFDF80;} 113 | .c14a{color: #FFCC33;} .c14b{color: #FFD555;} .c14c{color: #FFDF80;} 114 | 115 | /* Amarelo Ouro */ 116 | .cb15a{background: #FFE42B;} .cb15b{background: #FFEA55;} .cb15c{background: #FFEF80;} 117 | .c15a{color: #FFE42B;} .c15b{color: #FFEA55;} .c15c{color: #FFEF80;} 118 | 119 | /* Cinza Azulado */ 120 | .cb16a{background: #434852;} .cb16b{background: #565C69;} .cb16c{background: #697181;} 121 | .c16a{color: #434852;} .c16b{color: #565C69;} .c16c{color: #697181;} 122 | 123 | /* Cinza Esverdeado */ 124 | .cb17a{background: #4B4F46;} .cb17b{background: #61655A;} .cb17c{background: #767B6F;} 125 | .c17a{color: #4B4F46;} .c17b{color: #61655A;} .c17c{color: #767B6F;} 126 | 127 | /* Cinza Concreto */ 128 | .cb18a{background: #7A7A7A;} .cb18b{background: #8F8F8F;} .cb18c{background: #A4A4A4;} 129 | .c18a{color: #7A7A7A;} .c18b{color: #8F8F8F;} .c18c{color: #A4A4A4;} 130 | 131 | /* Cinza Fumaça */ 132 | .c19a{color: #BFBFBF;} .c19b{color: #D4D4D4;} .c19c{color: #E9E9E9;} 133 | .cb19a{background: #BFBFBF;} .cb19b{background: #D4D4D4;} .cb19c{background: #E9E9E9;} 134 | 135 | /* Branco Perolado */ 136 | .cb20a{background: #F2F3F7;} .cb20b{background: #F6F7FB;} .cb20c{background: #FFFFFF;} 137 | .c20a{color: #F2F3F7;} .c20b{color: #F6F7FB;} .c20c{color: #FFFFFF;} 138 | 139 | /* Marrom Café */ 140 | .cb21a{background: #4A3836;} .cb21b{background: #604846;} .cb21c{background: #725452;} 141 | .c21a{color: #4A3836;} .c21b{color: #604846;} .c21c{color: #725452;} 142 | 143 | /* Marrom Chocolate */ 144 | .cb22a{background: #6D473E;} .cb22b{background: #7C5247;} .cb22c{background: #8A5A4F;} 145 | .c22a{color: #6D473E;} .c22b{color: #7C5247;} .c22c{color: #8A5A4F;} 146 | 147 | /* Marrom Caramelo */ 148 | .cb23a{background: #997C5E;} .cb23b{background: #A5886B;} .cb23c{background: #B0977D;} 149 | .c23a{color: #997C5E;} .c23b{color: #A5886B;} .c23c{color: #B0977D;} 150 | 151 | /* Marrom Creme */ 152 | .cb24a{background: #E4DDD3;} .cb24b{background: #E9E3DC;} .cb24c{background: #F4F1EE;} 153 | .c24a{color: #E4DDD3;} .c24b{color: #E9E3DC;} .c24c{color: #F4F1EE;} 154 | -------------------------------------------------------------------------------- /elementos-inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - Elementos Inline 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

7. Elementos Inline

25 | 26 |
27 |
28 |

7.1 Linha horizontal Horizontal line

29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 |

7.2 Texto pré-formatado Preformatted text

39 |
40 | 
texto         pré                         formatado
41 |
42 |
43 |
44 | 45 | 46 |
47 |
48 |

7.3 Abreviação Abbreviation

49 |
50 |

HTML5

51 |
52 |
53 |
54 | 55 | 56 |
57 |
58 |

7.4 Negrito com Ênfase Strong

59 |
60 |

Texto com relevância, ideal para dar ênfase ao conteúdo SEO.

61 |
62 |
63 |
64 | 65 | 66 |
67 |
68 |

7.5 Citação cite

69 |
70 |

Citação de um pequeno texto: Cupcake ipsum dolor. Sit amet marzipan candy chocolate bar gingerbread.

71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 |

7.6 Código code

79 |
80 |

O BRA responsive trabalha com <HTML5> e <CSS3>.

81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 |

7.7 Ênfase emphasis

89 |
90 |

Conteúdo com ênfase no texto.

91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 |

7.8 Entrada do teclado keyboard input

99 |
100 |

Comando de teclado para cópia: Ctrl + C

101 |
102 |
103 |
104 | 105 | 106 |
107 |
108 |

7.9 Marcação no texto marking in text

109 |
110 |

Conteúdo com marcação de texto.

111 |
112 |
113 |
114 | 115 | 116 |
117 |
118 |

7.10 Comandos Commands

119 |
120 |

Comando de linguagem: body{background:transparent;}.

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

7.11 Variáveis variables

129 |
130 | 
131 |         
132 |            $cor-padrao: #bdd198;
133 |            .botao{
134 |                background-color: $cor-padrao;
135 |            }
136 |         
137 |
138 |
139 |
140 |
141 | 142 | 143 |
144 |
145 |

7.12 Subscrito subscript

146 |
147 |

Fórmula da água: H2O

148 |
149 |
150 |
151 | 152 | 153 |
154 |
155 |

7.13 Sobrescrito superscript

156 |
157 |

Área construída: 100 m2

158 |
159 |
160 |
161 | 162 | 163 |
164 |
165 |

7.14 Texto tachado strikethrough text

166 |
167 |

Texto tachado

168 |
169 |
170 |
171 | 172 |
173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /css/tipografia.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 18.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | INDEX / SUMÁRIO 26 | =================================================================== 27 | 28 | 0. Reset Normalize.css (minify) 29 | 1. Configuração Geral 30 | 2. Preparação para o grid 31 | 3. Coluna Padrão - Grid Flexível 32 | 4. Grid Responsivo Phone 320px 33 | 5. Grid Responsivo Smartphone 479px 34 | 6. Grid Responsivo Tablet 480px a 767px 35 | 7. Grid Responsivo Laptop 768px a 980px 36 | 8. Grid Responsivo Desktop 981px a 1100px 37 | 9. Grid Responsivo Desktop HD 1101px a 1300px 38 | 10. Grid Responsivo Large Monitor 1301px 39 | 11. Imagem e media responsive 40 | 12. UI Kit Básico 41 | 12.1. Tipografia 42 | 12.2. Cores 43 | 13. Elementos & Componentes 44 | 13.1. Botões, Links & Inputs 45 | 13.2. Listas 46 | 13.3. Elementos Inline 47 | 13.4. Tabelas 48 | 14. Formatação Responsiva 49 | 50 | =================================================================*/ 51 | 52 | /*================================================================= 53 | 12. UI Kit Básico 54 | =================================================================*/ 55 | 56 | /* 12.1 - Tipografia 57 | .................................................................*/ 58 | 59 | h1, .h1 { font-size: 4.250rem; letter-spacing: -.2rem; line-height: 4.455rem;} /* 68px/71px */ 60 | h2, .h2 { font-size: 3.438rem; letter-spacing: -.15rem; line-height: 3.555rem;} /* 55px/57px */ 61 | h3, .h3 { font-size: 2.625rem; letter-spacing: -.1rem; line-height: 2.815rem;} /* 42px/45px */ 62 | h4, .h4 { font-size: 2.125rem; letter-spacing: -.1rem; line-height: 2.255rem;} /* 34px/36px */ 63 | h5, .h5 { font-size: 1.625rem; letter-spacing: -.08rem; line-height: 1.815rem;} /* 26px/29px */ 64 | h6, .h6 { font-size: 1.313rem; letter-spacing: -.05rem; line-height: 1.5rem;} /* 21px/24px */ 65 | 66 | h1, .h1, h2, .h2, h3, .h3 {font-family: "Work Sans", Arial, sans-serif;} 67 | h4, .h4, h5, .h5 {font-family: "Libre Franklin", sans-serif;} 68 | h6, .h6 {font-family: "Droid Serif", serif;} 69 | 70 | /* subcabeçalho */ 71 | h1 > .heading, h2 > .heading, h3 > .heading, h4 > .heading, h5 > .heading, h6 > .heading{font-size: 60%;line-height: 1em;} 72 | 73 | /* título e subtítulo */ 74 | .title, .subtitle{word-break: break-word;} 75 | .title:not(:last-child), .subtitle:not(:last-child){margin-bottom: 1.25em;} 76 | .title + .subtitle{margin-top: -1.25em;} 77 | .subtitle, .subtitle-1, .subtitle-2, .subtitle-3{font-weight: 300;} 78 | .title + .subtitle-1{margin-top: -1.5em;} 79 | .title + .subtitle-2{margin-top: -1.95em;} 80 | .title + .subtitle-3{margin-top: -2.35em;} 81 | 82 | /* Todos os elementos, p, ul, ol, dl, blockquote, hr, pre, table, form e figure, 83 | receberão um espeçamento na base, todas as vezes que forem seguidos de algum 84 | elemento de cabeçalho, h2, h3, h4, h5 ou h6 */ 85 | p + h2, p + h3, p + h4, p + h5,p + h6, 86 | ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, 87 | ol + h2, ol + h3, ol + h4, ol + h5, ol + h6, 88 | dl + h2, dl + h3, dl + h4, dl + h5, dl + h6, 89 | blockquote + h2, blockquote + h3, blockquote + h4, blockquote + h5, blockquote + h6, hr + h2, hr + h3, hr + h4, hr + h5, hr + h6, 90 | pre + h2, pre + h3, pre + h4, pre + h5, pre + h6, 91 | table + h2, table + h3, table + h4, table + h5, table + h6, 92 | form + h2, form + h3, form + h4, form + h5, form + h6, 93 | figure + h2, figure + h3, figure + h4, figure + h5, figure + h6 { 94 | margin-top: 2rem; } 95 | 96 | /* Font Work Sans 600 e 900 */ 97 | .work-900, .work-600{font-family: "Work Sans", Arial, sans-serif;} 98 | .work-900 {font-weight: 900;} 99 | .work-600 {font-weight: 600;} 100 | 101 | /* Font Libre Franklin 300 e 400*/ 102 | .libre-300, .libre-400, .heading{font-family: "Libre Franklin", Arial, sans-serif;} 103 | .libre-300, .heading {font-weight: 300;} 104 | .libre-400 {font-weight: 400;} 105 | 106 | /* Font Lora 400 400i*/ 107 | .droid-400, .droid-400i, .heading-2, .heading-3{font-family: "Droid Serif", serif;} 108 | .droid-400, .heading-2 {font-weight: 400;} 109 | .droid-400i, .heading-3 {font-weight: 400i; font-style: italic;} 110 | 111 | /* Parágrafo */ 112 | p{margin-top: 1.25em;} 113 | 114 | /* Parágrafo de Destaque */ 115 | .manchete { 116 | font-family: "Droid Serif", serif; 117 | font-size: 1.75rem; 118 | line-height: 1.25; 119 | margin-bottom: 1.5em; 120 | } 121 | 122 | /* Bloco de citação */ 123 | blockquote { 124 | background: #F6F7FB; 125 | border-left: 3px solid #ccd1d9; 126 | color: #8F8F8F; 127 | font-family: "Droid serif", serif; 128 | margin: 0 0 1.25em; 129 | padding: 0.625em 1.25em; 130 | } 131 | blockquote .small, blockquote footer, blockquote small { 132 | color: #A4A4A4; 133 | display: block; 134 | font-size: 0.75rem; 135 | line-height: 1.45; 136 | } 137 | blockquote .small:before, blockquote footer:before, blockquote small:before {content: '\0bb \0a0';} 138 | 139 | /* Tamanhos do texto */ 140 | .font-10, small, .small{font-size: 0.625rem; line-height: 0.75rem;} /* 10px/12px / 0.625rem */ 141 | .font-13{font-size: 0.8125rem; line-height: 0.9375rem; } /* 13px/15px / 0.8125rem */ 142 | .font-16{font-size: 1rem;line-height: 1.125rem; } /* 16px/18px / 1rem */ 143 | .font-21{font-size: 1.313rem; line-height: 1.438rem;} /* 21px/23px / 1.313rem */ 144 | .font-26, .big{font-size: 1.625rem; line-height: 1.75rem;} /* 26px/28px / 1.625rem */ 145 | .font-34, .mega{font-size: 2.125rem;line-height: 2.25rem;} /* 34px/36px / 2.125rem */ 146 | .font-55, .jumbo{font-size: 3.438rem;line-height: 3.563rem;} /* 42px/44px / 3.438rem */ 147 | 148 | /* Alinhamento, posicionamento e preenchimento de conteúdo */ 149 | 150 | .left{text-align: left;} /* alinhado à esquerda */ 151 | .right{text-align: right;} /* alinhado à direita */ 152 | .center{text-align: center;} /* alinhado ao centro */ 153 | .justify{text-align: justify;} /* alinhamento justificado */ 154 | .height-auto{height: 100%;} /* altura 100% */ 155 | .nopadding{padding: 0;} /* sem preenchimento interno */ 156 | .nomargin{margin: 0;} /* sem margens */ 157 | 158 | /* Padding - Preenchimento Interno de 0 a 20 px */ 159 | 160 | .padding5{padding: 0.313em;} /* 5px em todos os lados */ 161 | .padding5lr{padding:0 0.313em;} /* 5px à esquerda e direita */ 162 | .padding5tb{padding:0.313em 0;} /* 5px à base e topo */ 163 | .padding5l{padding:0 0 0 0.313em;} /* 5px só à esquerda */ 164 | .padding5r{padding:0 0.313em 0 0;} /* 5px só à direita */ 165 | .padding5t{padding:0.313em 0 0 0;} /* 5px só no topo */ 166 | .padding5b{padding:0 0 0.313em 0;} /* 5px só na base */ 167 | 168 | .padding10{padding: 0.625em;} /* 10px em todos os lados */ 169 | .padding10lr{padding:0 0.625em;} /* 10px à esquerda e direita */ 170 | .padding10tb{padding:0.625em 0;} /* 10px à base e topo */ 171 | .padding10l{padding:0 0 0 0.625em;} /* 10px só à esquerda */ 172 | .padding10r{padding:0 0.625em 0 0;} /* 10px só à direita */ 173 | .padding10t{padding:0.625em 0 0 0;} /* 10px só no topo */ 174 | .padding10b{padding:0 0 0.625em 0;} /* 10px só na base */ 175 | 176 | .padding15{padding: 0.938em;} /* 15px em todos os lados */ 177 | .padding15lr{padding:0 0.938em;} /* 15px à esquerda e direita */ 178 | .padding15tb{padding:0.938em 0;} /* 15px à base e topo */ 179 | .padding15l{padding:0 0 0 0.938em;} /* 15px só à esquerda */ 180 | .padding15r{padding:0 0.938em 0 0;} /* 15px só à direita */ 181 | .padding15t{padding:0.938em 0 0 0;} /* 15px só no topo */ 182 | .padding15b{padding:0 0 0.938em 0;} /* 15px só na base */ 183 | 184 | .padding20{padding: 1.250em;} /* 20px em todos os lados */ 185 | .padding20lr{padding:0 1.250em;} /* 20px à esquerda e direita */ 186 | .padding20tb{padding:1.250em 0;} /* 20px à base e topo */ 187 | .padding20l{padding:0 0 0 1.250em;} /* 20px só à esquerda */ 188 | .padding20r{padding:0 1.250em 0 0;} /* 20px só à direita */ 189 | .padding20t{padding:1.250em 0 0 0;} /* 20px só no topo */ 190 | .padding20b{padding:0 0 1.250em 0;} /* 20px só na base */ 191 | 192 | /* Margin - Espaçamento Externo de 0 a 20 px */ 193 | 194 | .margin5{margin: 0.313em;} /* 5px em todos os lados */ 195 | .margin5lr{margin:0 0.313em;} /* 5px à esquerda e direita */ 196 | .margin5tb{margin:0.313em 0;} /* 5px à base e topo */ 197 | .margin5l{margin:0 0 0 0.313em;} /* 5px só à esquerda */ 198 | .margin5r{margin:0 0.313em 0 0;} /* 5px só à direita */ 199 | .margin5t{margin:0.313em 0 0 0;} /* 5px só no topo */ 200 | .margin5b{margin:0 0 0.313em 0;} /* 5px só na base */ 201 | 202 | .margin10{margin: 0.625em;} /* 10px em todos os lados */ 203 | .margin10lr{margin:0 0.625em;} /* 10px à esquerda e direita */ 204 | .margin10tb{margin:0.625em 0;} /* 10px à base e topo */ 205 | .margin10l{margin:0 0 0 0.625em;} /* 10px só à esquerda */ 206 | .margin10r{margin:0 0.625em 0 0;} /* 10px só à direita */ 207 | .margin10t{margin:0.625em 0 0 0;} /* 10px só no topo */ 208 | .margin10b{margin:0 0 0.625em 0;} /* 10px só na base */ 209 | 210 | .margin15{margin: 0.938em;} /* 15px em todos os lados */ 211 | .margin15lr{margin:0 0.938em;} /* 15px à esquerda e direita */ 212 | .margin15tb{margin:0.938em 0;} /* 15px à base e topo */ 213 | .margin15l{margin:0 0 0 0.938em;} /* 15px só à esquerda */ 214 | .margin15r{margin:0 0.938em 0 0;} /* 15px só à direita */ 215 | .margin15t{margin:0.938em 0 0 0;} /* 15px só no topo */ 216 | .margin15b{margin:0 0 0.938em 0;} /* 15px só na base */ 217 | 218 | .margin20{margin: 1.250em;} /* 20px em todos os lados */ 219 | .margin20lr{margin:0 1.250em;} /* 20px à esquerda e direita */ 220 | .margin20tb{margin:1.250em 0;} /* 20px à base e topo */ 221 | .margin20l{margin:0 0 0 1.250em;} /* 20px só à esquerda */ 222 | .margin20r{margin:0 1.250em 0 0;} /* 20px só à direita */ 223 | .margin20t{margin:1.250em 0 0 0;} /* 20px só no topo */ 224 | .margin20b{margin:0 0 1.250em 0;} /* 20px só na base */ 225 | -------------------------------------------------------------------------------- /tipografia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - Tipografia 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 32 | 33 | 39 | 40 | 41 |
42 |

2. Tipografia

43 | 44 |
45 |
46 |

2.1 Cabeçalhos e subcabeçalhos

47 |
48 |

Cabeçalho H1 Work Sans 4.250rem (68px)

49 |

Cabeçalho H2 Work Sans 3.438rem (55px)

50 |

Cabeçalho H3 Work Sans 2.625rem (42px)

51 |

Cabeçalho H4 Libre Franklin 2.125rem (34px)

52 |
Cabeçalho H5 Libre Franklin 1.625rem (26px)
53 |
Cabeçalho H6 Droid Serif 1.313rem (21px)
54 |
55 |
56 |
57 | 58 |

2.2 Títulos e Subtítulos

59 |
60 |
61 |

Título h1

62 |

Subtítulo h2

63 |
64 |
65 |

Título h1

66 |

Subtítulo h3

67 |
68 |
69 |

Título h1

70 |

Subtítulo h4

71 |
72 |
73 |
74 |
75 |

Título h2

76 |

Subtítulo h3

77 |
78 |
79 |

Título h3

80 |

Subtítulo h4

81 |
82 |
83 |

Título h4

84 |
Subtítulo h5
85 |
86 |
87 | 88 |
89 |
90 |

2.3 Parágrafo

91 |
92 |

Cupcake ipsum dolor. Sit amet chocolate cake. Toffee sweet roll marshmallow chocolate bar danish dessert liquorice. Jelly-o pie jelly beans marshmallow chocolate bar cookie sweet. Marzipan powder lemon drops cheesecake. Carrot cake donut gummi bears marzipan cupcake powder powder cake danish. Powder cheesecake toffee lollipop jujubes cake. Sweet roll sesame snaps ice cream liquorice cotton candy.

93 |

Cookie biscuit apple pie. Cookie toffee sweet roll powder pie liquorice. Dragée biscuit biscuit gummies bonbon pastry dessert jelly beans. Gingerbread dragée tart marzipan chocolate cake tootsie roll. Tart tart muffin tootsie roll sweet icing soufflé brownie. Tiramisu pie caramels apple pie apple pie. Gummi bears chupa chups marzipan.

94 |
95 |
96 |
97 | 98 |
99 |
100 |

2.4 Parágrafo 'Manchete'

101 |
102 |

Este tipo de parágrafo é utilizado em manchetes jornalísticas e/ou títulos que necessitam de maior destaque.

103 |
104 |
105 |
106 | 107 |
108 |
109 |

2.5 Bloco de Citação

110 |
111 |
112 |

113 | Cupcake ipsum dolor. Sit amet candy caramels ice cream apple pie cheesecake croissant I love. Topping chupa chups fruitcake brownie. I love cookie sweet roll pudding bonbon chupa chups topping sesame snaps chocolate bar. 114 |

115 | 116 | Dr. Cupcake, CEO Cupcaking 117 | 118 |
119 |
120 |
121 |
122 | 123 |
124 |
125 |

2.6 Tamanhos do texto

126 |
127 |

.font-10 Cupcake ipsum dolor sit amet halvah cake ice cream. Marshmallow toffee dessert sugar plum donut lollipop bonbon cake.

128 |

.font-13 Cupcake ipsum dolor sit amet. Cookie powder dessert gingerbread brownie chupa chups chocolate cake.

129 |

.font-16 Cupcake ipsum dolor sit amet chocolate carrot cake. Cookie chocolate cake chupa chups chocolate. Macaroon liquorice soufflé pudding.

130 |

.font-21 Cupcake ipsum dolor sit amet lemon drops fruitcake. Candy canes croissant pie. Halvah chocolate tart.

131 |

.font-26 Cupcake ipsum dolor sit amet ice cream. Apple pie icing liquorice lollipop gingerbread.

132 |

.font-34 Cupcake ipsum dolor sit amet ice cream. Cake croissant cake caramels tiramisu.

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

2.7 Alinhamento do texto

140 |
141 |

.left Cupcake ipsum dolor sit amet caramels toffee. Muffin tart cake donut pudding. Gummies icing chocolate bar cookie. Oat cake tiramisu sweet roll. Chocolate bar candy canes danish lemon drops soufflé halvah marshmallow cake bear claw.

142 |

.center Cupcake ipsum dolor sit amet. Apple pie lemon drops croissant. Macaroon tart gingerbread sweet roll ice cream jelly cake tiramisu sweet roll. Biscuit cookie biscuit sugar plum chocolate bar caramels. Macaroon tart chocolate dragée fruitcake liquorice.

143 |

.right Cupcake ipsum dolor sit. Amet gummies wafer sweet roll fruitcake fruitcake muffin. Jelly pie marshmallow. Candy ice cream cheesecake. Brownie tart chocolate bar. Bonbon ice cream marzipan danish. Powder sweet lemon drops.

144 |

.justify Cupcake ipsum dolor sit amet caramels. Fruitcake candy jelly apple pie liquorice jelly. Chocolate tootsie roll chocolate bar. Marshmallow cake dragée. Pudding ice cream dragée. Cotton candy cupcake bear claw danish sweet roll powder bonbon tootsie roll chupa chups.

145 |
146 |
147 |
148 | 149 |
150 |
151 |

2.8 Google Fonts

152 |
153 |
154 |

Work Sans 900 .work-900

155 |
BRA responsive frameworks css
156 |
157 |
158 |

Work Sans 600 .work-600

159 |
BRA responsive frameworks css
160 |
161 |
162 |

Libre Franklin 400 .libre-400

163 |
BRA responsive frameworks css
164 |
165 |
166 |

Libre Franklin 300 .libre-300

167 |
BRA responsive frameworks css
168 |
169 |
170 |

Droid Sans 400 .droid-400

171 |
BRA responsive frameworks css
172 |
173 |
174 |

Droid Sans 400i .droid-400i

175 |
BRA responsive frameworks css
176 |
177 |
178 |
179 |
180 | 181 |
182 |
183 |

2.9 Preenchimentos e Margens Padding and Margins

184 |
185 |

.padding5
padding: 5px

186 |

.padding10
padding: 10px

187 |

.padding15
padding: 15px

188 |

.padding20
padding: 20px

189 |
190 |
191 |

.margin5
margin: 5px

192 |

.margin10
margin: 10px

193 |

.margin15
margin: 15px

194 |

.margin20
margin: 20px

195 |
196 |
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /css/grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | 13 | /*================================================================= 14 | DADOS GERAIS / VERSÃO 15 | =================================================================== 16 | Projeto: BRA responsive | framework responsive css 17 | URI: http://www.braresponsive.com.br 18 | Versão BETA: 0.8.2 19 | Atualizado em: 18.01.2017 20 | Autor: CarlosHPS Webdesigner 21 | Autor URI: http://www.carloshps.com.br 22 | Github: https://github.com/carloshps/BRA-responsive 23 | =================================================================*/ 24 | 25 | 26 | /*================================================================= 27 | INDEX / SUMÁRIO 28 | =================================================================== 29 | 30 | 0. Reset Normalize.css (minify) 31 | 1. Configuração Geral 32 | 2. Preparação para o grid 33 | 3. Coluna Padrão - Grid Flexível 34 | 4. Grid Responsivo Phone 320px 35 | 5. Grid Responsivo Smartphone 479px 36 | 6. Grid Responsivo Tablet 480px a 767px 37 | 7. Grid Responsivo Laptop 768px a 980px 38 | 8. Grid Responsivo Desktop 981px a 1100px 39 | 9. Grid Responsivo Desktop HD 1101px a 1300px 40 | 10. Grid Responsivo Large Monitor 1301px 41 | 11. Imagem e media responsive 42 | 12. UI Kit Básico 43 | 12.1. Tipografia 44 | 12.2. Cores 45 | 13. Elementos & Componentes 46 | 13.1. Botões, Links & Inputs 47 | 13.2. Listas 48 | 13.3. Elementos Inline 49 | 13.4. Tabelas 50 | 14. Formatação Responsiva 51 | 52 | =================================================================*/ 53 | 54 | /*================================================================= 55 | 1. Configuração Geral 56 | =================================================================*/ 57 | 58 | html { 59 | box-sizing: border-box; 60 | font-size: 1rem; /* 1rem = 16px forma de deixar a tipografia responsiva */ 61 | } 62 | 63 | *, 64 | *::before, 65 | *::after { 66 | box-sizing: inherit; 67 | } 68 | 69 | /* Estilos gerais da página */ 70 | 71 | body { 72 | background: #F6F7FB; 73 | color: #999; 74 | font-family: "Libre Franklin", Helvetica, sans-serif; 75 | font-weight: 300; 76 | line-height: 1.375; 77 | margin: 0; 78 | padding: 0; 79 | text-align: left; 80 | } 81 | 82 | /* Formatação elementos gerais do layout */ 83 | 84 | header, 85 | footer, 86 | section, 87 | article, 88 | aside { 89 | padding: 0.625em 0.938em; 90 | } 91 | 92 | /* Formatação do container, classe que conterá as linhas, colunas e conteúdo */ 93 | 94 | .container { 95 | display: block; 96 | height: auto; 97 | margin: 0 auto; /* centralizando o conteúdo */ 98 | max-width: 81.250em; /* 1320px largura máxima que comporá a grid */ 99 | max-width: 100%; !important/* largura full */ 100 | padding: 0; 101 | position: relative; 102 | *zoom: 1; /* iniciando o zoom com o padrão de 100% */ 103 | -webkit-box-sizing: border-box; 104 | -moz-box-sizing: border-box; 105 | box-sizing: border-box; 106 | } 107 | 108 | /* Clearing */ 109 | 110 | .row:before, 111 | .row:after, 112 | .container:before, 113 | .container:after { 114 | content: ""; 115 | display: table; 116 | } 117 | 118 | .row:after, 119 | .container:after { 120 | clear: both; 121 | } 122 | 123 | /*================================================================= 124 | 2. Preparação para o grid 125 | =================================================================*/ 126 | 127 | /* Prefixo para o grid */ 128 | 129 | [class*='bra-'] { 130 | float: left; 131 | width: 100%; 132 | } 133 | 134 | /* Conteúdo COM espaçamento entre as colunas - gutters */ 135 | 136 | .cont { 137 | margin: 10px; 138 | } 139 | 140 | /* Conteúdo SEM espaçamento entre as colunas - no gutters */ 141 | 142 | .cont-nogutter { 143 | margin: 0px; 144 | } 145 | 146 | /* Formatação dos blocos de conteúdo */ 147 | 148 | .cont, 149 | .cont-nogutter { 150 | background: #fff; 151 | /* retire e/ou edite */ 152 | border-radius: 2px; 153 | /* retire e/ou edite */ 154 | box-shadow: 0 2px 1px rgba(0, 0, 0, .2); 155 | /* retire e/ou edite */ 156 | padding: .5em; 157 | } 158 | 159 | /*================================================================= 160 | 3. Coluna Padrão - Grid Flexível (prefixo: .bra-) 161 | =================================================================*/ 162 | .bra-1{width: 8.33333%;} 163 | .bra-2{width: 16.66667%;} 164 | .bra-3{width: 25%;} 165 | .bra-4{width: 33.33332%;} 166 | .bra-5{width: 41.66665%;} 167 | .bra-6{width: 49.99998%;} 168 | .bra-7{width: 58.33331%;} 169 | .bra-8{width: 66.66664%;} 170 | .bra-9{width: 74.99997%;} 171 | .bra-10{width: 83.33333%;} 172 | .bra-11{width: 91.66663%;} 173 | .bra-12{width: 100%;} 174 | 175 | /*================================================================= 176 | 4. Grid Responsivo Phone 320px (prefixo: .bra-phone-) 177 | =================================================================*/ 178 | @media screen and (max-width: 320px){ 179 | 180 | .bra-phone-1{width: 8.33333%;} 181 | .bra-phone-2{width: 16.66667%;} 182 | .bra-phone-3{width: 25%;} 183 | .bra-phone-4{width: 33.33332%;} 184 | .bra-phone-5{width: 41.66665%;} 185 | .bra-phone-6{width: 49.99998%;} 186 | .bra-phone-7{width: 58.33331%;} 187 | .bra-phone-8{width: 66.66664%;} 188 | .bra-phone-9{width: 74.99997%;} 189 | .bra-phone-10{width: 83.33333%;} 190 | .bra-phone-11{width: 91.66663%;} 191 | .bra-phone-12{width: 100%;} 192 | 193 | } 194 | 195 | /*================================================================= 196 | 5. Grid Responsivo Mobile 479px (prefixo: .bra-smart-) 197 | =================================================================*/ 198 | @media screen and (max-width: 479px){ 199 | 200 | .bra-smart-1{ width: 8.33333%;} 201 | .bra-smart-2{ width: 16.66667%;} 202 | .bra-smart-3{ width: 25%;} 203 | .bra-smart-4{ width: 33.33332%;} 204 | .bra-smart-5{ width: 41.66665%;} 205 | .bra-smart-6{ width: 49.99998%;} 206 | .bra-smart-7{ width: 58.33331%;} 207 | .bra-smart-8{ width: 66.66664%;} 208 | .bra-smart-9{ width: 74.99997%;} 209 | .bra-smart-10{ width: 83.33333%;} 210 | .bra-smart-11{ width: 91.66663%;} 211 | .bra-smart-12{ width: 100%;} 212 | 213 | } 214 | 215 | /*================================================================= 216 | 6. Grid Responsivo Tablet 480px a 767px (prefixo: .bra-tablet-) 217 | =================================================================*/ 218 | @media screen and ( min-width: 480px ) { 219 | 220 | .bra-tablet-1{ width: 8.33333%;} 221 | .bra-tablet-2{ width: 16.66667%;} 222 | .bra-tablet-3{ width: 25%;} 223 | .bra-tablet-4{ width: 33.33332%;} 224 | .bra-tablet-5{ width: 41.66665%;} 225 | .bra-tablet-6{ width: 49.99998%;} 226 | .bra-tablet-7{ width: 58.33331%;} 227 | .bra-tablet-8{ width: 66.66664%;} 228 | .bra-tablet-9{ width: 74.99997%;} 229 | .bra-tablet-10{ width: 83.33333%;} 230 | .bra-tablet-11{ width: 91.66663%;} 231 | .bra-tablet-12{ width: 100%;} 232 | 233 | } 234 | 235 | /*================================================================= 236 | 7. Grid Responsivo Laptop 768px a 980px (prefixo: .bra-laptop-) 237 | =================================================================*/ 238 | 239 | @media screen and ( min-width: 768px ) { 240 | 241 | .bra-laptop-1{ width: 8.33333%;} 242 | .bra-laptop-2{ width: 16.66667%;} 243 | .bra-laptop-3{ width: 25%;} 244 | .bra-laptop-4{ width: 33.33332%;} 245 | .bra-laptop-5{ width: 41.66665%;} 246 | .bra-laptop-6{ width: 49.99998%;} 247 | .bra-laptop-7{ width: 58.33331%;} 248 | .bra-laptop-8{ width: 66.66664%;} 249 | .bra-laptop-9{ width: 74.99997%;} 250 | .bra-laptop-10{ width: 83.33333%;} 251 | .bra-laptop-11{ width: 91.66663%;} 252 | .bra-laptop-12{ width: 100%;} 253 | 254 | } 255 | 256 | /*============================================================================== 257 | 8. Grid Responsivo Desktop 981px a 1100px (prefixo: .bra-desktop-) 258 | ==============================================================================*/ 259 | @media screen and ( min-width: 981px ) { 260 | 261 | .bra-desktop-1{ width: 8.33333%;} 262 | .bra-desktop-2{ width: 16.66667%;} 263 | .bra-desktop-3{ width: 25%;} 264 | .bra-desktop-4{ width: 33.33332%;} 265 | .bra-desktop-5{ width: 41.66665%;} 266 | .bra-desktop-6{ width: 49.99998%;} 267 | .bra-desktop-7{ width: 58.33331%;} 268 | .bra-desktop-8{ width: 66.66664%;} 269 | .bra-desktop-9{ width: 74.99997%;} 270 | .bra-desktop-10{ width: 83.33333%;} 271 | .bra-desktop-11{ width: 91.66663%;} 272 | .bra-desktop-12{ width: 100%;} 273 | 274 | } 275 | 276 | /*============================================================================= 277 | 9. Grid Responsivo Desktop HD 1101px a 1300px (prefixo: .bra-hd-) 278 | =============================================================================*/ 279 | @media screen and ( min-width: 1101px ) { 280 | 281 | .bra-hd-1{ width: 8.33333%;} 282 | .bra-hd-2{ width: 16.66667%;} 283 | .bra-hd-3{ width: 25%;} 284 | .bra-hd-4{ width: 33.33332%;} 285 | .bra-hd-5{ width: 41.66665%;} 286 | .bra-hd-6{ width: 49.99998%;} 287 | .bra-hd-7{ width: 58.33331%;} 288 | .bra-hd-8{ width: 66.66664%;} 289 | .bra-hd-9{ width: 74.99997%;} 290 | .bra-hd-10{ width: 83.33333%;} 291 | .bra-hd-11{ width: 91.66663%;} 292 | .bra-hd-12{ width: 100%;} 293 | 294 | } 295 | 296 | /*================================================================= 297 | 10. Grid Responsivo Large Monitor 1301px (prefixo: .bra-monitor-) 298 | =================================================================*/ 299 | @media screen and ( min-width: 1301px ) { 300 | 301 | .bra-monitor-1{ width: 8.33333%;} 302 | .bra-monitor-2{ width: 16.66667%;} 303 | .bra-monitor-3{ width: 25%;} 304 | .bra-monitor-4{ width: 33.33332%;} 305 | .bra-monitor-5{ width: 41.66665%;} 306 | .bra-monitor-6{ width: 49.99998%;} 307 | .bra-monitor-7{ width: 58.33331%;} 308 | .bra-monitor-8{ width: 66.66664%;} 309 | .bra-monitor-9{ width: 74.99997%;} 310 | .bra-monitor-10{ width: 83.33333%;} 311 | .bra-monitor-11{ width: 91.66663%;} 312 | .bra-monitor-12{ width: 100%;} 313 | 314 | } 315 | 316 | /*================================================================= 317 | 11. Imagem e media responsive 318 | =================================================================*/ 319 | 320 | img.responsive-img, 321 | video.responsive-video { 322 | height: auto; 323 | max-width: 100%; 324 | } 325 | 326 | /* Formatação de legenda para imagem a ser criado após a inserção do img */ 327 | 328 | img + p { 329 | font-size: 0.8rem; 330 | font-style: italic; 331 | margin: 0; 332 | } 333 | 334 | /*================================================================= 335 | 14. Formatação responsiva 336 | =================================================================*/ 337 | 338 | /* Phone 320px 339 | .................................................................*/ 340 | 341 | @media screen and (max-width: 320px) { 342 | body { 343 | line-height: 1.25; 344 | } 345 | } 346 | 347 | /*Mobile 479px 348 | .................................................................*/ 349 | 350 | @media screen and (max-width: 479px) { 351 | body { 352 | line-height: 1.25; 353 | } 354 | h1 { 355 | font-size: 2.625rem; 356 | letter-spacing: -.1rem; 357 | line-height: 2.815rem; 358 | } 359 | h2 { 360 | font-size: 2.125rem; 361 | letter-spacing: -.08rem; 362 | line-height: 2.255rem; 363 | } 364 | h3 { 365 | font-size: 1.625rem; 366 | letter-spacing: -.05rem; 367 | line-height: 1.815rem; 368 | } 369 | h4 { 370 | font-size: 1.313rem; 371 | letter-spacing: -.05rem; 372 | line-height: 1.5rem; 373 | } 374 | h5, 375 | h6 { 376 | font-size: 1.125rem; 377 | letter-spacing: -.05rem; 378 | line-height: 1.125rem; 379 | } 380 | } 381 | 382 | 383 | /* 384 | Tablet 480px a 767px 385 | .................................................................*/ 386 | 387 | @media screen and ( min-width: 480px) { 388 | body { 389 | line-height: 1.25; 390 | } 391 | } 392 | 393 | /* 394 | Laptop 768px a 980px 395 | .................................................................*/ 396 | 397 | @media screen and ( max-width: 768px) { 398 | h1 { 399 | font-size: 3.438rem; 400 | letter-spacing: -.15rem; 401 | line-height: 3.555rem; 402 | } 403 | h2 { 404 | font-size: 2.625rem; 405 | letter-spacing: -.1rem; 406 | line-height: 2.815rem; 407 | } 408 | h3 { 409 | font-size: 2.125rem; 410 | letter-spacing: -.1rem; 411 | line-height: 2.255rem; 412 | } 413 | h4 { 414 | font-size: 1.625rem; 415 | letter-spacing: -.08rem; 416 | line-height: 1.815rem; 417 | } 418 | h5 { 419 | font-size: 1.313rem; 420 | letter-spacing: -.05rem; 421 | line-height: 1.5rem; 422 | } 423 | h6 { 424 | font-size: 1.125rem; 425 | letter-spacing: -.05rem; 426 | line-height: 1.125rem; 427 | } 428 | .manchete { 429 | margin-bottom: 1.25em; 430 | font-size: 1.125rem; 431 | line-height: 1.25; 432 | } 433 | } 434 | 435 | /* 436 | Desktop 981px a 1100px 437 | .................................................................*/ 438 | 439 | @media screen and ( min-width: 981px) {} 440 | 441 | /* 442 | Desktop HD 1101px a 1300px 443 | .................................................................*/ 444 | 445 | @media screen and ( min-width: 1101px) {} 446 | 447 | /* 448 | Large Monitor 1301px 449 | .................................................................*/ 450 | 451 | @media screen and ( min-width: 1301px) {} 452 | -------------------------------------------------------------------------------- /tabelas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | BRA responsive - Tabelas 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

8. Tabelas

25 | 26 |
27 |
28 |

8.1 Tabela padrão

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
  TOTALR$ 284,70
68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |

8.2 Tabela com bordas horizontais

76 |
77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
  TOTALR$ 284,70
115 |
116 |
117 |
118 | 119 | 120 |
121 |
122 |

8.3 Tabela com todas as bordas

123 |
124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
  TOTALR$ 284,70
162 |
163 |
164 |
165 | 166 | 167 |
168 |
169 |

8.4 Tabela hover

170 |
171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
  TOTALR$ 284,70
209 |
210 |
211 |
212 | 213 | 214 |
215 |
216 |

8.5 Tabela zebrada

217 |
218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
  TOTALR$ 284,70
256 |
257 |
258 |
259 | 260 | 261 |
262 |
263 |

8.6 Tabela responsiva

264 |
265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
295 |
296 |
297 |
298 | 299 | 300 |
301 |
302 |

8.7 Tabela colorida

303 |
304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 |
ProdutoQuantidadeValor UnitárioTotal
Camiseta02R$ 29,90R$ 59,80
Bermuda03R$ 45,00R$ 135,00
Sapatênis01R$ 89,90R$ 89,90
334 |
335 |
336 |
337 | 338 |
339 | 340 | 341 | 342 | 343 | 344 | 345 | -------------------------------------------------------------------------------- /css/botoes.min.css: -------------------------------------------------------------------------------- 1 | .link,.linkh,a,a:hover,h1 a:hover{text-decoration:none}.link,a{color:#338AE1}.linkh,a:hover{color:#AAC47B}.linka,a:active{color:#FFEA55}.linkv,a:visited{color:#338AE1}.btn,.btn-full,.btn-large,.btn-medium,.btn-small,input[type=submit],input[type=button],input[type=reset]{background-color:#8F8F8F;border:1px solid #d4d4d4;border-radius:.25em;color:#d4d4d4;cursor:pointer;display:inline-block;font-family:"Libre Franklin",Arial,sans-serif;font-weight:400;line-height:1.125rem;padding:.5em .875em;text-decoration:none;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}.btn~.btn{margin-bottom:.875em}.btn-3d:hover,.btn:hover,input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover{background-color:rgba(143,143,143,.2);color:#8f8f8f}.btn-3d:active,.btn:active,input[type=submit]:active,input[type=button]:active,input[type=reset]:active{background-color:rgba(255,255,255,.65);color:#d4d4d4}.btn-3d:visited,.btn:visited,input[type=submit]:visited,input[type=button]:visited,input[type=reset]:visited{background-color:rgba(143,143,143,.2);color:#d4d4d4}.btn-3d:focus,.btn:focus,input[type=submit]:focus,input[type=button]:focus,input[type=reset]:focus{opacity:.85;border:1px solid #fff;color:#666;outline:0}.btn>i:before{font-weight:400;font-style:normal;margin-right:.625em;vertical-align:baseline}.btn-small{font-size:.75rem;line-height:.875rem;padding:.4em .6em}.btn-medium{font-size:1.125rem;line-height:1.375rem;padding:.688em .813em}.btn-large{font-size:1.375rem;line-height:1.75rem;padding:1em 1.25em}.btn-full{display:block;width:100%}.btn-danger,.btn-default,.btn-info,.btn-link,.btn-primary,.btn-success,.btn-warning{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.btn-danger:active,.btn-default:active,.btn-info:active,.btn-link:active,.btn-primary:active,.btn-success:active,.btn-warning:active{-webkit-box-shadow:inset 0 2px 4px 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 2px 4px 1px rgba(0,0,0,.15);box-shadow:inset 0 2px 4px 1px rgba(0,0,0,.15);outline:0}.btn-default,.btn-default-3d{background-color:#fff;border-color:#7a7a7a;color:#8f8f8f}.btn-default-3d:hover,.btn-default-outline:focus,.btn-default-outline:hover,.btn-default:hover{background-color:#d4d4d4;border-color:#bfbfbf}.btn-default-3d:active,.btn-default-outline:active,.btn-default:active{background-color:#e9e9e9}.btn-primary,.btn-primary-3d{background-color:#7DB5EC;border-color:#589FE7;color:#fff}.btn-primary-3d:hover,.btn-primary-outline:hover,.btn-primary:hover{background-color:#338AE1;border-color:#589FE7;color:#7DB5EC}.btn-primary-3d:active,.btn-primary-outline:active,.btn-primary:active{background-color:#589FE7;border-color:#589FE7;color:#fff}.btn-success,.btn-success-3d{background-color:#DDEA80;border-color:#D2E35B;color:#98B75E}.btn-success-3d:hover,.btn-success-outline:hover,.btn-success:hover{background-color:#C9DD37;border-color:#D2E35B;color:#fff}.btn-success-3d:active,.btn-success-outline:active,.btn-success:active{background-color:#D2E35B;border-color:#D2E35B;color:#fff}.btn-info,.btn-info-3d{background-color:#ACA3C7;border-color:#9488B7;color:#fff}.btn-info-3d:hover,.btn-info-outline:hover,.btn-info:hover{background-color:#7C6DA7;border-color:#9488B7;color:#ACA3C7}.btn-info-3d:active,.btn-info-outline:active,.btn-info:active{background-color:#9488B7;border-color:#9488B7;color:#fff}.btn-warning,.btn-warning-3d{background-color:#FFEF80;border-color:#FFEA55;color:#B0977D}.btn-warning-3d:hover,.btn-warning-outline:hover,.btn-warning:hover{background-color:#FFE42B;border-color:#FFEA55;color:#997C5E}.btn-warning-3d:active,.btn-warning-outline:active,.btn-warning:active{background-color:#FFEA55;border-color:#FFEA55;color:#997C5E}.btn-danger,.btn-danger-3d{background-color:#EE8A7B;border-color:#E96856;color:#fff}.btn-danger-3d:hover,.btn-danger-outline:hover,.btn-danger:hover{background-color:#E44630;border-color:#E96856;color:#fff}.btn-danger-3d:active,.btn-danger-outline:active,.btn-danger:active{background-color:#E96856;border-color:#E96856;color:#fff}.btn-link,.btn-link:active,.btn-link:hover{background-color:transparent;color:#d4d4d4}.btn-link:hover{border-color:#D4D4D4;color:#7A7A7A}.btn-square{border-radius:0}.btn-round{-webkit-border-radius:3em;-moz-border-radius:3em;-ms-border-radius:3em;-o-border-radius:3em;border-radius:3em}.btn-3d,.btn-default-3d{-webkit-box-shadow:0 5px 0 0 #7a7a7a;-moz-box-shadow:0 5px 0 0 #7a7a7a;box-shadow:0 5px 0 0 #7a7a7a}.btn-primary-3d{-webkit-box-shadow:0 5px 0 0 #577DBD;-moz-box-shadow:0 5px 0 0 #577DBD;box-shadow:0 5px 0 0 #577DBD}.btn-success-3d{-webkit-box-shadow:0 5px 0 0 #98B75E;-moz-box-shadow:0 5px 0 0 #98B75E;box-shadow:0 5px 0 0 #98B75E}.btn-info-3d{-webkit-box-shadow:0 5px 0 0 #7C6DA7;-moz-box-shadow:0 5px 0 0 #7C6DA7;box-shadow:0 5px 0 0 #7C6DA7}.btn-warning-3d{-webkit-box-shadow:0 5px 0 0 #FC3;-moz-box-shadow:0 5px 0 0 #FC3;box-shadow:0 5px 0 0 #FC3}.btn-danger-3d{-webkit-box-shadow:0 5px 0 0 #E44630;-moz-box-shadow:0 5px 0 0 #E44630;box-shadow:0 5px 0 0 #E44630}.btn-3d:active,.btn-danger-3d:active,.btn-default-3d:active,.btn-info-3d:active,.btn-primary-3d:active,.btn-success-3d:active,.btn-warning-3d:active{-webkit-transform:translate(0,5px);-moz-transform:translate(0,5px);transform:translate(0,5px);-webkit-box-shadow:0 1px 0 0;-moz-box-shadow:0 1px 0 0;box-shadow:0 1px 0 0;opacity:.9}.btn-verde-limao{background:#D2E35B;color:#fff}.btn-verde-limao:hover{background:#C9DD37}.btn-verde-limao:active{background:#DDEA80}.btn-grad-cb1{background:#C9DD37;background:-webkit-linear-gradient(#C9DD37,#DDEA80);background:-o-linear-gradient(#C9DD37,#DDEA80);background:-moz-linear-gradient(#C9DD37,#DDEA80);background:linear-gradient(#C9DD37,#DDEA80);border:1px solid #C9DD37;color:#fff}.btn-verde-amazonia{background:#AAC47B;color:#fff}.btn-verde-amazonia:hover{background:#98B75E;color:#fff}.btn-verde-amazonia:active{background:#BDD198}.btn-grad-cb2{background:#98B75E;background:-webkit-linear-gradient(#98B75E,#BDD198);background:-o-linear-gradient(#98B75E,#BDD198);background:-moz-linear-gradient(#98B75E,#BDD198);background:linear-gradient(#98B75E,#BDD198);border:1px solid #98B75E;color:#fff}.btn-verde-esmeralda{background:#69D6C8;color:#fff}.btn-verde-esmeralda:hover{background:#48CCBC}.btn-verde-esmeralda:active{background:#8ADFD5}.btn-grad-cb3{background:#48CCBC;background:-webkit-linear-gradient(#48CCBC,#8ADFD5);background:-o-linear-gradient(#48CCBC,#8ADFD5);background:-moz-linear-gradient(#48CCBC,#8ADFD5);background:linear-gradient(#48CCBC,#8ADFD5);border:1px solid #48CCBC;color:#fff}.btn-azul-jeans{background:#577DBD;color:#fff}.btn-azul-jeans:hover{background:#4268A8;color:#fff}.btn-azul-jeans:active{background:#7695C9}.btn-grad-cb4{background:#4268A8;background:-webkit-linear-gradient(#4268A8,#7695C9);background:-o-linear-gradient(#4268A8,#7695C9);background:-moz-linear-gradient(#4268A8,#7695C9);background:linear-gradient(#4268A8,#7695C9);border:1px solid #4268A8;color:#fff}.btn-azul-oceano{background:#589FE7;color:#fff}.btn-azul-oceano:hover{background:#338AE1;color:#fff}.btn-azul-oceano:active{background:#7DB5EC}.btn-grad-cb5{background:#338AE1;background:-webkit-linear-gradient(#338AE1,#7DB5EC);background:-o-linear-gradient(#338AE1,#7DB5EC);background:-moz-linear-gradient(#338AE1,#7DB5EC);background:linear-gradient(#338AE1,#7DB5EC);border:1px solid #338AE1;color:#fff}.btn-azul-piscina{background:#49CBF5;color:#fff}.btn-azul-piscina:hover{background:#21BFF3;color:#fff}.btn-azul-piscina:active{background:#72D7F8}.btn-grad-cb6{background:#21BFF3;background:-webkit-linear-gradient(#21BFF3,#72D7F8);background:-o-linear-gradient(#21BFF3,#72D7F8);background:-moz-linear-gradient(#21BFF3,#72D7F8);background:linear-gradient(#21BFF3,#72D7F8);border:1px solid #21BFF3;color:#fff}.btn-roxo-lavanda{background:#9488B7;color:#fff}.btn-roxo-lavanda:hover{background:#7C6DA7;color:#fff}.btn-roxo-lavanda:active{background:#ACA3C7}.btn-grad-cb7{background:#7C6DA7;background:-webkit-linear-gradient(#7C6DA7,#ACA3C7);background:-o-linear-gradient(#7C6DA7,#ACA3C7);background:-moz-linear-gradient(#7C6DA7,#ACA3C7);background:linear-gradient(#7C6DA7,#ACA3C7);border:1px solid #7C6DA7;color:#fff}.btn-roxo-lilas{background:#C877C8;color:#fff}.btn-roxo-lilas:hover{background:#BB59BB;color:#fff}.btn-roxo-lilas:active{background:#D595D5}.btn-grad-cb8{background:#BB59BB;background:-webkit-linear-gradient(#BB59BB,#D595D5);background:-o-linear-gradient(#BB59BB,#D595D5);background:-moz-linear-gradient(#BB59BB,#D595D5);background:linear-gradient(#BB59BB,#D595D5);border:1px solid #BB59BB;color:#fff}.btn-roxo-vinho{background:#D6699F;color:#fff}.btn-roxo-vinho:hover{background:#CC488A;color:#fff}.btn-roxo-vinho:active{background:#DF8AB5}.btn-grad-cb9{background:#CC488A;background:-webkit-linear-gradient(#CC488A,#DF8AB5);background:-o-linear-gradient(#CC488A,#DF8AB5);background:-moz-linear-gradient(#CC488A,#DF8AB5);background:linear-gradient(#CC488A,#DF8AB5);border:1px solid #CC488A;color:#fff}.btn-rosa-pink{background:#EE5184;color:#fff}.btn-rosa-pink:hover{background:#EA2B69;color:#fff}.btn-rosa-pink:active{background:#F1789F}.btn-grad-cb10{background:#EA2B69;background:-webkit-linear-gradient(#EA2B69,#F1789F);background:-o-linear-gradient(#EA2B69,#F1789F);background:-moz-linear-gradient(#EA2B69,#F1789F);background:linear-gradient(#EA2B69,#F1789F);border:1px solid #EA2B69;color:#fff}.btn-vermelho-telha{background:#D66969;color:#fff}.btn-vermelho-telha:hover{background:#CC4848;color:#fff}.btn-vermelho-telha:active{background:#DF8A8A}.btn-grad-cb11{background:#CC4848;background:-webkit-linear-gradient(#CC4848,#DF8A8A);background:-o-linear-gradient(#CC4848,#DF8A8A);background:-moz-linear-gradient(#CC4848,#DF8A8A);background:linear-gradient(#CC4848,#DF8A8A);border:1px solid #CC4848;color:#fff}.btn-vermelho-vivo{background:#E96856;color:#fff}.btn-vermelho-vivo:hover{background:#E44630;color:#fff}.btn-vermelho-vivo:active{background:#EE8A7B}.btn-grad-cb12{background:#E44630;background:-webkit-linear-gradient(#E44630,#EE8A7B);background:-o-linear-gradient(#E44630,#EE8A7B);background:-moz-linear-gradient(#E44630,#EE8A7B);background:linear-gradient(#E44630,#EE8A7B);border:1px solid #E44630;color:#fff}.btn-laranja-marte{background:#FA5;color:#fff}.btn-laranja-marte:hover{background:#FF952B;color:#fff}.btn-laranja-marte:active{background:#FFBF80}.btn-grad-cb13{background:#FF952B;background:-webkit-linear-gradient(#FF952B,#FFBF80);background:-o-linear-gradient(#FF952B,#FFBF80);background:-moz-linear-gradient(#FF952B,#FFBF80);background:linear-gradient(#FF952B,#FFBF80);border:1px solid #FF952B;color:#fff}.btn-laranja-solar{background:#FFD555;color:#697181}.btn-laranja-solar:hover{background:#FC3;color:#697181}.btn-laranja-solar:active{background:#FFDF80}.btn-grad-cb14{background:#FC3;background:-webkit-linear-gradient(#FC3,#FFDF80);background:-o-linear-gradient(#FC3,#FFDF80);background:-moz-linear-gradient(#FC3,#FFDF80);background:linear-gradient(#FC3,#FFDF80);border:1px solid #FC3;color:#fff}.btn-amarelo-ouro{background:#FFEA55;color:#697181}.btn-amarelo-ouro:hover{background:#FFE42B;color:#697181}.btn-amarelo-ouro:active{background:#FFEF80}.btn-grad-cb15{background:#FFE42B;background:-webkit-linear-gradient(#FFE42B,#FFEF80);background:-o-linear-gradient(#FFE42B,#FFEF80);background:-moz-linear-gradient(#FFE42B,#FFEF80);background:linear-gradient(#FFE42B,#FFEF80);border:1px solid #FFE42B}.btn-cinza-azulado{background:#565C69;color:#fff}.btn-cinza-azulado:hover{background:#434852;color:#fff}.btn-cinza-azulado:active{background:#697181}.btn-grad-cb16{background:#434852;background:-webkit-linear-gradient(#434852,#697181);background:-o-linear-gradient(#434852,#697181);background:-moz-linear-gradient(#434852,#697181);background:linear-gradient(#434852,#697181);border:1px solid #434852;color:#fff}.btn-cinza-esverdeado{background:#61655A;color:#fff}.btn-cinza-esverdeado:hover{background:#4B4F46;color:#fff}.btn-cinza-esverdeado:active{background:#767B6F}.btn-grad-cb17{background:#4B4F46;background:-webkit-linear-gradient(#4B4F46,#767B6F);background:-o-linear-gradient(#4B4F46,#767B6F);background:-moz-linear-gradient(#4B4F46,#767B6F);background:linear-gradient(#4B4F46,#767B6F);border:1px solid #4B4F46;color:#fff}.btn-cinza-concreto{background:#8F8F8F;color:#fff}.btn-cinza-concreto:hover{background:#7A7A7A;color:#fff}.btn-cinza-concreto:active{background:#A4A4A4}.btn-grad-cb18{background:#7A7A7A;background:-webkit-linear-gradient(#7A7A7A,#A4A4A4);background:-o-linear-gradient(#7A7A7A,#A4A4A4);background:-moz-linear-gradient(#7A7A7A,#A4A4A4);background:linear-gradient(#7A7A7A,#A4A4A4);border:1px solid #7A7A7A;color:#fff}.btn-cinza-fumaca{background:#D4D4D4;color:#697181}.btn-cinza-fumaca:hover{background:#BFBFBF;color:#697181}.btn-cinza-fumaca:active{background:#E9E9E9}.btn-grad-cb19{background:#BFBFBF;background:-webkit-linear-gradient(#BFBFBF,#E9E9E9);background:-o-linear-gradient(#BFBFBF,#E9E9E9);background:-moz-linear-gradient(#BFBFBF,#E9E9E9);background:linear-gradient(#BFBFBF,#E9E9E9);border:1px solid #BFBFBF;color:#4B4F46}.btn-branco-perolado{background:#F6F7FB;color:#697181}.btn-branco-perolado:hover{background:#F2F3F7;color:#697181}.btn-branco-perolado:active{background:#FFF}.btn-grad-cb20{background:#F2F3F7;background:-webkit-linear-gradient(#F2F3F7,#FFF);background:-o-linear-gradient(#F2F3F7,#FFF);background:-moz-linear-gradient(#F2F3F7,#FFF);background:linear-gradient(#F2F3F7,#FFF);border:1px solid #F2F3F7}.btn-marrom-cafe{background:#604846;color:#FFF}.btn-marrom-cafe:hover{background:#4A3836;color:#FFF}.btn-marrom-cafe:active{background:#725452}.btn-grad-cb21{background:#4A3836;background:-webkit-linear-gradient(#4A3836,#725452);background:-o-linear-gradient(#4A3836,#725452);background:-moz-linear-gradient(#4A3836,#725452);background:linear-gradient(#4A3836,#725452);border:1px solid #4A3836}.btn-marrom-chocolate{background:#7C5247;color:#FFF}.btn-marrom-chocolate:hover{background:#6D473E;color:#FFF}.btn-marrom-chocolate:active{background:#8A5A4F}.btn-grad-cb22{background:#6D473E;background:-webkit-linear-gradient(#6D473E,#8A5A4F);background:-o-linear-gradient(#6D473E,#8A5A4F);background:-moz-linear-gradient(#6D473E,#8A5A4F);background:linear-gradient(#6D473E,#8A5A4F);border:1px solid #6D473E}.btn-marrom-caramelo{background:#A5886B;color:#FFF}.btn-marrom-caramelo:hover{background:#997C5E;color:#FFF}.btn-marrom-caramelo:active{background:#B0977D}.btn-grad-cb23{background:#997C5E;background:-webkit-linear-gradient(#997C5E,#B0977D);background:-o-linear-gradient(#997C5E,#B0977D);background:-moz-linear-gradient(#997C5E,#B0977D);background:linear-gradient(#997C5E,#B0977D);border:1px solid #997C5E}.btn-marrom-creme{background:#E9E3DC;color:#604846}.btn-marrom-creme:hover{background:#E4DDD3;color:#604846}.btn-marrom-creme:active{background:#F4F1EE}.btn-grad-cb24{background:#E4DDD3;background:-webkit-linear-gradient(#E4DDD3,#F4F1EE);background:-o-linear-gradient(#E4DDD3,#F4F1EE);background:-moz-linear-gradient(#E4DDD3,#F4F1EE);background:linear-gradient(#E4DDD3,#F4F1EE);border:1px solid #E4DDD3;color:#4A3836}.btn-grad-cb10:hover,.btn-grad-cb11:hover,.btn-grad-cb12:hover,.btn-grad-cb13:hover,.btn-grad-cb14:hover,.btn-grad-cb15:hover,.btn-grad-cb16:hover,.btn-grad-cb17:hover,.btn-grad-cb18:hover,.btn-grad-cb19:hover,.btn-grad-cb1:hover,.btn-grad-cb20:hover,.btn-grad-cb21:hover,.btn-grad-cb22:hover,.btn-grad-cb23:hover,.btn-grad-cb24:hover,.btn-grad-cb2:hover,.btn-grad-cb3:hover,.btn-grad-cb4:hover,.btn-grad-cb5:hover,.btn-grad-cb6:hover,.btn-grad-cb7:hover,.btn-grad-cb8:hover,.btn-grad-cb9:hover{color:rgba(0,0,0,.65)!important;opacity:.85}.btn-danger-outline,.btn-default-outline,.btn-info-outline,.btn-primary-outline,.btn-success-outline,.btn-warning-outline{background:0 0;text-shadow:none;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}.btn-default-outline{border:1px solid #7a7a7a;color:#8f8f8f}.btn-primary-outline{border:1px solid #7DB5EC;color:#7DB5EC}.btn-success-outline{border:1px solid #98B75E;color:#98B75E}.btn-info-outline{border:1px solid #9488B7;color:#9488B7}.btn-warning-outline{border:1px solid #FFE42B;color:#FFE42B}.btn-danger-outline{border:1px solid #EE8A7B;color:#EE8A7B} 2 | -------------------------------------------------------------------------------- /botoes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BRA responsive - Botões, Links & Inputs 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

5. Botões, Links & Inputs

19 |

5.1 Padrão

20 | 21 |
22 |
23 | Link Âncora 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |

5.2 Botões e Tamanhos buttons and sizes

35 |
36 | ★ 37 | ★ 38 | ★ 39 | 40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 |

5.3 Tipos de Botões buttons types

48 |
49 | ★ 50 | ★ 51 | ★ 52 | ★ 53 | ★ 54 | ★ 55 | 56 |
57 |
58 |
59 | 60 | 61 |
62 |
63 |

5.4 Estilos de Botões buttons styles

64 |
65 | ★ 66 | ★ 67 | 68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |

5.5 Largura Total full width

76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 |

5.6 Botão 3D 3D button

89 |
90 | ★ 91 | ★ 92 | ★ 93 | ★ 94 | ★ 95 | 96 |
97 |
98 |
99 | 100 | 101 | 102 | 103 |
104 |
105 |

5.7 Cores dos Botões colors buttons

106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | 141 | 142 |
143 |
144 |

5.8 Botão Gradiente gradient button

145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 | 180 | 181 |
182 |
183 |

5.9 Botão Outline outline button

184 |

Botões outline com fundo transparente com o BRA responsive e sua linda paleta de cores.

185 |
186 | ★ 187 | ★ 188 | ★ 189 | ★ 190 | ★ 191 | ★ 192 | 193 |
194 |
195 |
196 | 197 | 198 |
199 |
200 |

5.10 Botões com Ícones buttons with icons

201 |
202 |
203 | Configurações 204 |
205 |
206 | 207 |
208 |
209 | 210 |
211 |
212 | 213 |
214 |
215 | 216 |
217 |
218 | 219 |
220 |
221 |
222 |
223 | 224 | 225 |
226 | 227 | 228 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /cores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BRA responsive - Cores 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

3. Cores

19 |

3.1 Paleta de Cores

20 | 21 |
22 | 23 |
24 |
Verde Limão 25 |
class: cb1a 26 |
cor: #C9DD37
27 |
28 |
29 |
Verde Limão 30 |
class: cb1b 31 |
cor: #D2E35B
32 |
33 |
34 |
Verde Limão 35 |
class: cb1c 36 |
cor: #DDEA80
37 |
38 | 39 |
40 |
Verde Amazônia 41 |
class: cb2a 42 |
cor: #98B75E
43 |
44 |
45 |
Verde Amazônia 46 |
class: cb2b 47 |
cor: #AAC47B
48 |
49 |
50 |
Verde Amazônia 51 |
class: cb2c 52 |
cor: #BDD198
53 |
54 | 55 |
56 |
Verde Esmeralda 57 |
class: cb3a 58 |
cor: #48CCBC
59 |
60 |
61 |
Verde Esmeralda 62 |
class: cb3b 63 |
cor: #69D6C8
64 |
65 |
66 |
Verde Esmeralda 67 |
class: cb3c 68 |
cor: #8ADFD5
69 |
70 | 71 |
72 |
Azul Jeans 73 |
class: cb4a 74 |
cor: #4268A8
75 |
76 |
77 |
Azul Jeans 78 |
class: cb4b 79 |
cor: #577DBD
80 |
81 |
82 |
Azul Jeans 83 |
class: cb4c 84 |
cor: #7695C9
85 |
86 | 87 |
88 |
Azul Oceano 89 |
class: cb5a 90 |
cor: #338AE1
91 |
92 |
93 |
Azul Oceano 94 |
class: cb5b 95 |
cor: #589FE7
96 |
97 |
98 |
Azul Oceano 99 |
class: cb5c 100 |
cor: #7DB5EC
101 |
102 | 103 |
104 |
Azul Piscina 105 |
class: cb6a 106 |
cor: #21BFF3
107 |
108 |
109 |
Azul Piscina 110 |
class: cb6b 111 |
cor: #49CBF5
112 |
113 |
114 |
Azul Piscina 115 |
class: cb6c 116 |
cor: #72D7F8
117 |
118 | 119 |
120 |
Roxo Lavanda 121 |
class: cb7a 122 |
cor: #7C6DA7
123 |
124 |
125 |
Roxo Lavanda 126 |
class: cb7b 127 |
cor: #9488B7
128 |
129 |
130 |
Roxo Lavanda 131 |
class: cb7c 132 |
cor: #ACA3C7
133 |
134 | 135 |
136 |
Roxo Lilás 137 |
class: cb8a 138 |
cor: #BB59BB
139 |
140 |
141 |
Roxo Lilás 142 |
class: cb8b 143 |
cor: #C877C8
144 |
145 |
146 |
Roxo Lilás 147 |
class: cb8c 148 |
cor: #D595D5
149 |
150 | 151 |
152 |
Roxo Vinho 153 |
class: cb9a 154 |
cor: #CC488A
155 |
156 |
157 |
Roxo Vinho 158 |
class: cb9b 159 |
cor: #D6699F
160 |
161 |
162 |
Roxo Vinho 163 |
class: cb9c 164 |
cor: #DF8AB5
165 |
166 | 167 |
168 |
Rosa Pink 169 |
class: cb10a 170 |
cor: #EA2B69
171 |
172 |
173 |
Rosa Pink 174 |
class: cb10b 175 |
cor: #EE5184
176 |
177 |
178 |
Rosa Pink 179 |
class: cb10c 180 |
cor: #F1789F
181 |
182 | 183 |
184 |
Vermelho Telha 185 |
class: cb11a 186 |
cor: #CC4848
187 |
188 |
189 |
Vermelho Telha 190 |
class: cb11b 191 |
cor: #D66969
192 |
193 |
194 |
Vermelho Telha 195 |
class: cb11c 196 |
cor: #DF8A8A
197 |
198 | 199 |
200 |
Vermelho Vivo 201 |
class: cb12a 202 |
cor: #E44630
203 |
204 |
205 |
Vermelho Vivo 206 |
class: cb12b 207 |
cor: #E96856
208 |
209 |
210 |
Vermelho Vivo 211 |
class: cb12c 212 |
cor: #EE8A7B
213 |
214 | 215 |
216 |
Laranja Marte 217 |
class: cb13a 218 |
cor: #FF952B
219 |
220 |
221 |
Laranja Marte 222 |
class: cb13b 223 |
cor: #FFAA55
224 |
225 |
226 |
Laranja Marte 227 |
class: cb13c 228 |
cor: #FFBF80
229 |
230 | 231 |
232 |
Laranja Solar 233 |
class: cb14a 234 |
cor: #FFCC33
235 |
236 |
237 |
Laranja Solar 238 |
class: cb14b 239 |
cor: #FFD555
240 |
241 |
242 |
Laranja Solar 243 |
class: cb14c 244 |
cor: #FFDF80
245 |
246 | 247 |
248 |
Amarelo Ouro 249 |
class: cb15a 250 |
cor: #FFE42B
251 |
252 |
253 |
Amarelo Ouro 254 |
class: cb15b 255 |
cor: #FFEA55
256 |
257 |
258 |
Amarelo Ouro 259 |
class: cb15c 260 |
cor: #FFEF80
261 |
262 | 263 |
264 |
Cinza Azulado 265 |
class: cb16a 266 |
cor: #434852
267 |
268 |
269 |
Cinza Azulado 270 |
class: cb16b 271 |
cor: #565C69
272 |
273 |
274 |
Cinza Azulado 275 |
class: cb16c 276 |
cor: #697181
277 |
278 | 279 |
280 |
Cinza Esverdeado 281 |
class: cb17a 282 |
cor: #4B4F46
283 |
284 |
285 |
Cinza Esverdeado 286 |
class: cb17b 287 |
cor: #61655A
288 |
289 |
290 |
Cinza Esverdeado 291 |
class: cb17c 292 |
cor: #767B6F
293 |
294 | 295 |
296 |
Cinza Concreto 297 |
class: cb18a 298 |
cor: #7A7A7A
299 |
300 |
301 |
Cinza Concreto 302 |
class: cb18b 303 |
cor: #8F8F8F
304 |
305 |
306 |
Cinza Concreto 307 |
class: cb18c 308 |
cor: #A4A4A4
309 |
310 | 311 |
312 |
Cinza Fumaça 313 |
class: cb19a 314 |
cor: #BFBFBF
315 |
316 |
317 |
Cinza Fumaça 318 |
class: cb19b 319 |
cor: #D4D4D4
320 |
321 |
322 |
Cinza Fumaça 323 |
class: cb19c 324 |
cor: #E9E9E9
325 |
326 | 327 |
328 |
Branco Perolado 329 |
class: cb20a 330 |
cor: #F2F3F7
331 |
332 |
333 |
Branco Perolado 334 |
class: cb20b 335 |
cor: #F6F7FB
336 |
337 |
338 |
Branco Perolado 339 |
class: cb20c 340 |
cor: #FFFFFF
341 |
342 | 343 |
344 |
Marrom Café 345 |
class: cb21a 346 |
cor: #4A3836
347 |
348 |
349 |
Marrom Café 350 |
class: cb21b 351 |
cor: #604846
352 |
353 |
354 |
Marrom Café 355 |
class: cb21c 356 |
cor: #725452
357 |
358 | 359 |
360 |
Marrom Chocolate 361 |
class: cb22a 362 |
cor: #6D473E
363 |
364 |
365 |
Marrom Chocolate 366 |
class: cb22b 367 |
cor: #7C5247
368 |
369 |
370 |
Marrom Chocolate 371 |
class: cb22c 372 |
cor: #8A5A4F
373 |
374 | 375 |
376 |
Marrom Caramelo 377 |
class: cb23a 378 |
cor: #997C5E
379 |
380 |
381 |
Marrom Caramelo 382 |
class: cb23b 383 |
cor: #A5886B
384 |
385 |
386 |
Marrom Caramelo 387 |
class: cb23c 388 |
cor: #B0977D
389 |
390 | 391 |
392 |
Marrom Creme 393 |
class: cb24a 394 |
cor: #E4DDD3
395 |
396 |
397 |
Marrom Creme 398 |
class: cb24b 399 |
cor: #E9E3DC
400 |
401 |
402 |
Marrom Creme 403 |
class: cb24c 404 |
cor: #F4F1EE
405 |
406 |
407 | 408 | 409 |
410 |
411 |

3.2 Cores de fundo

412 |
413 |

Cupcake ipsum dolor sit amet carrot cake. Cake I love liquorice tootsie roll ice cream I love. Topping marshmallow cupcake biscuit. Danish bear claw I love gummies macaroon topping. Sugar plum oat cake fruitcake lemon drops carrot cake danish I love bonbon.

414 |

Cupcake ipsum dolor sit amet carrot cake. Cake I love liquorice tootsie roll ice cream I love. Topping marshmallow cupcake biscuit. Danish bear claw I love gummies macaroon topping. Sugar plum oat cake fruitcake lemon drops carrot cake danish I love bonbon.

415 |
416 |
417 |
418 | 419 |
420 |
421 |

3.3 Cores do texto

422 |
423 |

Verde Limão Verde Amazônia Verde Esmeralda Azul Jeans Azul Oceano Azul Piscina Roxo Lavanda Roxo Lilás Roxo Vinho Rosa Pink Vermelho Telha Vermelho Vivo Laranja Marte Laranja Solar Amarelo Ouro Cinza Azulado Cinza Esverdeado Cinza Concreto Cinza Fumaça Cinza Pérola Marrom Café Marrom Chocolate Marrom Caramelo Marrom Creme

424 |
425 |
426 |
427 | 428 |
429 |

3.4 Combinação de Cores

430 |
431 |
432 |
433 | background: cb12c 434 |
texto: c22a 435 |
436 |
437 | background: cb15c 438 |
texto: c13a 439 |
440 |
441 | background: cb19b 442 |
texto: c4a 443 |
444 |
445 |
446 | 447 | 448 | 449 | 450 | 451 | 452 | -------------------------------------------------------------------------------- /css/botoes.css: -------------------------------------------------------------------------------- 1 | /* 2 | * ____ _____ 3 | * | _ \| __ \ /\ _ 4 | * | |_) | |__) | / \ ________ _________ ____ ____ _____(_) _____ 5 | * | _ <| _ / / /\ \ / ___/ _ \/ ___/ __ \/ __ \/ __ \/ ___/ / | / / _ \ 6 | * | |_) | | \ \ / ____ \ / / / __(__ ) /_/ / /_/ / / / (__ ) /| |/ / __/ 7 | * |____/|_| \_\/_/ \_\ /_/ \___/____/ .___/\____/_/ /_/____/_/ |___/\___/ 8 | * /_/ 9 | * 10 | */ 11 | 12 | /*================================================================= 13 | DADOS GERAIS / VERSÃO 14 | =================================================================== 15 | Projeto: BRA responsive | framework responsive css 16 | URI: http://www.braresponsive.com.br 17 | Versão BETA: 0.8.2 18 | Atualizado em: 18.01.2017 19 | Autor: CarlosHPS Webdesigner 20 | Autor URI: http://www.carloshps.com.br 21 | Github: https://github.com/carloshps/BRA-responsive 22 | =================================================================*/ 23 | 24 | /*================================================================= 25 | INDEX / SUMÁRIO 26 | =================================================================== 27 | 28 | 0. Reset Normalize.css (minify) 29 | 1. Configuração Geral 30 | 2. Preparação para o grid 31 | 3. Coluna Padrão - Grid Flexível 32 | 4. Grid Responsivo Phone 320px 33 | 5. Grid Responsivo Smartphone 479px 34 | 6. Grid Responsivo Tablet 480px a 767px 35 | 7. Grid Responsivo Laptop 768px a 980px 36 | 8. Grid Responsivo Desktop 981px a 1100px 37 | 9. Grid Responsivo Desktop HD 1101px a 1300px 38 | 10. Grid Responsivo Large Monitor 1301px 39 | 11. Imagem e media responsive 40 | 12. UI Kit Básico 41 | 12.1. Tipografia 42 | 12.2. Cores 43 | 13. Elementos & Componentes 44 | 13.1. Botões, Links & Inputs 45 | 13.2. Listas 46 | 13.3. Elementos Inline 47 | 13.4. Tabelas 48 | 14. Formatação Responsiva 49 | 50 | =================================================================*/ 51 | 52 | /*================================================================= 53 | 13. Elementos & Componentes | Elements & Components 54 | =================================================================*/ 55 | 56 | /* 13.1 - Botões, Links e Inputs | buttons, links and inputs 57 | ------------------------------------------------------------- */ 58 | a, .link{color: #338AE1; text-decoration: none; } 59 | a:hover, .linkh{color: #AAC47B; text-decoration: none;} 60 | a:active, .linka{color: #FFEA55;} 61 | a:visited, .linkv{color: #338AE1;} 62 | h1 a:hover{text-decoration: none;} 63 | 64 | /*Botão default*/ 65 | .btn, .btn-small, .btn-medium, .btn-large, .btn-full, 66 | input[type="submit"],input[type="button"],input[type="reset"]{ 67 | background-color: #8F8F8F; 68 | border: 1px solid #d4d4d4; 69 | border-radius: 0.250em; 70 | color: #d4d4d4; 71 | cursor: pointer; 72 | display: inline-block; 73 | font-family: "Libre Franklin", Arial, sans-serif; 74 | font-weight: 400; 75 | line-height: 1.125rem; 76 | padding: 0.5em 0.875em; 77 | text-decoration: none; 78 | transition: .3s; 79 | -webkit-transition: .3s; 80 | -moz-transition: .3s; 81 | -o-transition: .3s; 82 | } 83 | /* espaçamento na base quando um botão estiver sob o outro */ 84 | .btn ~ .btn {margin-bottom: 0.875em;} 85 | 86 | .btn:hover, .btn-3d:hover, input[type="submit"]:hover,input[type="button"]:hover,input[type="reset"]:hover 87 | {background-color: rgba(143,143,143,.2);color: #8f8f8f;} 88 | .btn:active, .btn-3d:active, input[type="submit"]:active,input[type="button"]:active,input[type="reset"]:active 89 | {background-color: rgba(255,255,255,.65);color: #d4d4d4;} 90 | .btn:visited, .btn-3d:visited, input[type="submit"]:visited,input[type="button"]:visited,input[type="reset"]:visited 91 | {background-color: rgba(143,143,143,.2);color: #d4d4d4;} 92 | .btn:focus, .btn-3d:focus, input[type="submit"]:focus,input[type="button"]:focus,input[type="reset"]:focus 93 | {opacity: .85; border: 1px solid #fff; color: #666; outline: 0;} 94 | 95 | 96 | /*botão com ícone*/ 97 | .btn > i:before {margin-right: 0.625em;} 98 | .btn > i:before {font-weight: normal; font-style: normal;margin-right: 0.625em;vertical-align: baseline;} 99 | 100 | /* Tamanho dos Botões / buttons size */ 101 | .btn-small { font-size: 0.75rem; line-height: 0.875rem; padding: 0.4em 0.6em;} 102 | .btn-medium{ font-size: 1.125rem; line-height: 1.375rem; padding: 0.688em 0.813em;} 103 | .btn-large { font-size: 1.375rem; line-height: 1.750rem; padding: 1em 1.250em;} 104 | 105 | /* Botão full width */ 106 | .btn-full { display: block; width: 100%;} 107 | 108 | /* Tipos de Botões / buttons types */ 109 | .btn-default, 110 | .btn-primary, 111 | .btn-success, 112 | .btn-info, 113 | .btn-warning, 114 | .btn-danger, 115 | .btn-link{ 116 | color: #fff; 117 | -webkit-transition: all 0.30s ease; 118 | -moz-transition: all 0.30s ease; 119 | transition: all 0.30s ease; 120 | } 121 | .btn-default:active, 122 | .btn-primary:active, 123 | .btn-success:active, 124 | .btn-info:active, 125 | .btn-warning:active, 126 | .btn-danger:active, 127 | .btn-link:active{ 128 | -webkit-box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15); 129 | -moz-box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15); 130 | box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15); 131 | outline: 0; 132 | } 133 | 134 | /* >> Botão Default << */ 135 | .btn-default, .btn-default-3d { background-color: #fff; border-color: #7a7a7a; color: #8f8f8f;} 136 | .btn-default:hover, .btn-default-3d:hover, .btn-default-outline:hover, .btn-default-outline:focus { background-color: #d4d4d4; border-color: #bfbfbf;} 137 | .btn-default:active, .btn-default-3d:active, .btn-default-outline:active { background-color: #e9e9e9;} 138 | 139 | /* >> Botão Primário / button primary << */ 140 | .btn-primary, .btn-primary-3d { background-color: #7DB5EC; border-color: #589FE7; color: #fff;} 141 | .btn-primary:hover, .btn-primary-3d:hover, .btn-primary-outline:hover { background-color: #338AE1; border-color: #589FE7; color: #7DB5EC;} 142 | .btn-primary:active, .btn-primary-3d:active, .btn-primary-outline:active { background-color: #589FE7; border-color: #589FE7; color:#fff;} 143 | 144 | /* >> Botão Sucesso / button success << */ 145 | .btn-success, .btn-success-3d { background-color: #DDEA80; border-color: #D2E35B; color: #98B75E;} 146 | .btn-success:hover, .btn-success-3d:hover, .btn-success-outline:hover { background-color: #C9DD37; border-color: #D2E35B; color: #fff;} 147 | .btn-success:active, .btn-success-3d:active, .btn-success-outline:active { background-color: #D2E35B; border-color: #D2E35B; color: #fff;} 148 | 149 | /* >> Botão Informação / button info << */ 150 | .btn-info, .btn-info-3d { background-color: #ACA3C7; border-color: #9488B7; color: #fff;} 151 | .btn-info:hover, .btn-info-3d:hover, .btn-info-outline:hover { background-color: #7C6DA7; border-color: #9488B7; color: #ACA3C7;} 152 | .btn-info:active, .btn-info-3d:active, .btn-info-outline:active { background-color: #9488B7; border-color: #9488B7; color: #fff;} 153 | 154 | /* >> Botão Atenção / button warning << */ 155 | .btn-warning, .btn-warning-3d { background-color: #FFEF80; border-color: #FFEA55; color: #B0977D;} 156 | .btn-warning:hover, .btn-warning-3d:hover, .btn-warning-outline:hover { background-color: #FFE42B; border-color: #FFEA55; color: #997C5E;} 157 | .btn-warning:active, .btn-warning-3d:active, .btn-warning-outline:active { background-color: #FFEA55; border-color: #FFEA55; color: #997C5E;} 158 | 159 | /* >> Botão Perigo / button danger << */ 160 | .btn-danger, .btn-danger-3d { background-color: #EE8A7B; border-color: #E96856; color:#fff;} 161 | .btn-danger:hover, .btn-danger-3d:hover, .btn-danger-outline:hover { background-color: #E44630; border-color: #E96856; color:#fff;} 162 | .btn-danger:active, .btn-danger-3d:active, .btn-danger-outline:active { background-color: #E96856; border-color: #E96856; color:#fff;} 163 | 164 | /* >> Botão Link / button link << */ 165 | .btn-link, .btn-link:hover, .btn-link:active{ background-color: transparent; color: #d4d4d4;} 166 | .btn-link:hover { border-color: #D4D4D4; color: #7A7A7A;} 167 | 168 | /* Estilos de Botões / buttons styles */ 169 | .btn-square { 170 | border-radius: 0; 171 | } 172 | .btn-round { 173 | -webkit-border-radius: 3em; 174 | -moz-border-radius: 3em; 175 | -ms-border-radius: 3em; 176 | -o-border-radius: 3em; 177 | border-radius: 3em; 178 | } 179 | 180 | /* Botão 3D / 3D button */ 181 | 182 | .btn-default-3d, .btn-3d{ 183 | -webkit-box-shadow: 0px 5px 0px 0px #7a7a7a; 184 | -moz-box-shadow: 0px 5px 0px 0px #7a7a7a; 185 | box-shadow: 0px 5px 0px 0px #7a7a7a; 186 | } 187 | 188 | .btn-primary-3d{ 189 | -webkit-box-shadow: 0px 5px 0px 0px #577DBD; 190 | -moz-box-shadow: 0px 5px 0px 0px #577DBD; 191 | box-shadow: 0px 5px 0px 0px #577DBD; 192 | } 193 | .btn-success-3d{ 194 | -webkit-box-shadow: 0px 5px 0px 0px #98B75E; 195 | -moz-box-shadow: 0px 5px 0px 0px #98B75E; 196 | box-shadow: 0px 5px 0px 0px #98B75E; 197 | } 198 | .btn-info-3d{ 199 | -webkit-box-shadow: 0px 5px 0px 0px #7C6DA7; 200 | -moz-box-shadow: 0px 5px 0px 0px #7C6DA7; 201 | box-shadow: 0px 5px 0px 0px #7C6DA7; 202 | } 203 | .btn-warning-3d{ 204 | -webkit-box-shadow: 0px 5px 0px 0px #FFCC33; 205 | -moz-box-shadow: 0px 5px 0px 0px #FFCC33; 206 | box-shadow: 0px 5px 0px 0px #FFCC33; 207 | } 208 | .btn-danger-3d{ 209 | -webkit-box-shadow: 0px 5px 0px 0px #E44630; 210 | -moz-box-shadow: 0px 5px 0px 0px #E44630; 211 | box-shadow: 0px 5px 0px 0px #E44630; 212 | } 213 | 214 | .btn-3d:active, 215 | .btn-default-3d:active, 216 | .btn-primary-3d:active, 217 | .btn-success-3d:active, 218 | .btn-info-3d:active, 219 | .btn-warning-3d:active, 220 | .btn-danger-3d:active { 221 | -webkit-transform: translate(0px, 5px); 222 | -moz-transform: translate(0px, 5px); 223 | transform: translate(0px, 5px); 224 | -webkit-box-shadow: 0px 1px 0px 0px; 225 | -moz-box-shadow: 0px 1px 0px 0px; 226 | box-shadow: 0px 1px 0px 0px; 227 | opacity: .9; 228 | } 229 | 230 | /* Cores e Gradientes dos Botões / colors and gradients buttons */ 231 | 232 | /* Verde Limão */ 233 | .btn-verde-limao{background: #D2E35B; color: #fff;} 234 | .btn-verde-limao:hover{background: #C9DD37;} 235 | .btn-verde-limao:active{background: #DDEA80;} 236 | .btn-grad-cb1{ 237 | background: #C9DD37; /* For browsers that do not support gradients */ 238 | background: -webkit-linear-gradient(#C9DD37, #DDEA80); /* For Safari 5.1 to 6.0 */ 239 | background: -o-linear-gradient(#C9DD37, #DDEA80); /* For Opera 11.1 to 12.0 */ 240 | background: -moz-linear-gradient(#C9DD37, #DDEA80); /* For Firefox 3.6 to 15 */ 241 | background: linear-gradient(#C9DD37, #DDEA80); /* Standard syntax */ 242 | border: 1px solid #C9DD37; 243 | color: #fff; 244 | } 245 | 246 | /* Verde Amazônia */ 247 | .btn-verde-amazonia{background: #AAC47B; color: #fff;} 248 | .btn-verde-amazonia:hover{background: #98B75E; color:#fff;} 249 | .btn-verde-amazonia:active{background: #BDD198;} 250 | .btn-grad-cb2{ 251 | background: #98B75E; 252 | background: -webkit-linear-gradient(#98B75E, #BDD198); 253 | background: -o-linear-gradient(#98B75E, #BDD198); 254 | background: -moz-linear-gradient(#98B75E, #BDD198); 255 | background: linear-gradient(#98B75E, #BDD198); 256 | border: 1px solid #98B75E; 257 | color: #fff; 258 | } 259 | 260 | /* Verde Esmeralda */ 261 | .btn-verde-esmeralda{background: #69D6C8; color: #fff;} 262 | .btn-verde-esmeralda:hover{background: #48CCBC;} 263 | .btn-verde-esmeralda:active{background: #8ADFD5;} 264 | .btn-grad-cb3{ 265 | background: #48CCBC; 266 | background: -webkit-linear-gradient(#48CCBC, #8ADFD5); 267 | background: -o-linear-gradient(#48CCBC, #8ADFD5); 268 | background: -moz-linear-gradient(#48CCBC, #8ADFD5); 269 | background: linear-gradient(#48CCBC, #8ADFD5); 270 | border: 1px solid #48CCBC; 271 | color: #fff; 272 | } 273 | 274 | /* Azul Jeans */ 275 | .btn-azul-jeans{background: #577DBD; color: #fff;} 276 | .btn-azul-jeans:hover{background: #4268A8; color:#fff;} 277 | .btn-azul-jeans:active{background: #7695C9;} 278 | .btn-grad-cb4{ 279 | background: #4268A8; 280 | background: -webkit-linear-gradient(#4268A8, #7695C9); 281 | background: -o-linear-gradient(#4268A8, #7695C9); 282 | background: -moz-linear-gradient(#4268A8, #7695C9); 283 | background: linear-gradient(#4268A8, #7695C9); 284 | border: 1px solid #4268A8; 285 | color: #fff; 286 | } 287 | 288 | /* Azul Oceano */ 289 | .btn-azul-oceano{background: #589FE7; color: #fff;} 290 | .btn-azul-oceano:hover{background: #338AE1; color:#fff;} 291 | .btn-azul-oceano:active{background: #7DB5EC;} 292 | .btn-grad-cb5{ 293 | background: #338AE1; 294 | background: -webkit-linear-gradient(#338AE1, #7DB5EC); 295 | background: -o-linear-gradient(#338AE1, #7DB5EC); 296 | background: -moz-linear-gradient(#338AE1, #7DB5EC); 297 | background: linear-gradient(#338AE1, #7DB5EC); 298 | border: 1px solid #338AE1; 299 | color: #fff; 300 | } 301 | 302 | /* Azul Piscina */ 303 | .btn-azul-piscina{background: #49CBF5; color: #fff;} 304 | .btn-azul-piscina:hover{background: #21BFF3; color:#fff;} 305 | .btn-azul-piscina:active{background: #72D7F8;} 306 | .btn-grad-cb6{ 307 | background: #21BFF3; 308 | background: -webkit-linear-gradient(#21BFF3, #72D7F8); 309 | background: -o-linear-gradient(#21BFF3, #72D7F8); 310 | background: -moz-linear-gradient(#21BFF3, #72D7F8); 311 | background: linear-gradient(#21BFF3, #72D7F8); 312 | border: 1px solid #21BFF3; 313 | color: #fff; 314 | } 315 | 316 | /* Roxo Lavanda */ 317 | .btn-roxo-lavanda{background: #9488B7; color: #fff;} 318 | .btn-roxo-lavanda:hover{background: #7C6DA7; color:#fff;} 319 | .btn-roxo-lavanda:active{background: #ACA3C7;} 320 | .btn-grad-cb7{ 321 | background: #7C6DA7; 322 | background: -webkit-linear-gradient(#7C6DA7, #ACA3C7); 323 | background: -o-linear-gradient(#7C6DA7, #ACA3C7); 324 | background: -moz-linear-gradient(#7C6DA7, #ACA3C7); 325 | background: linear-gradient(#7C6DA7, #ACA3C7); 326 | border: 1px solid #7C6DA7; 327 | color: #fff; 328 | } 329 | 330 | /* Roxo Lilás */ 331 | .btn-roxo-lilas{background: #C877C8; color: #fff;} 332 | .btn-roxo-lilas:hover{background: #BB59BB; color:#fff;} 333 | .btn-roxo-lilas:active{background: #D595D5;} 334 | .btn-grad-cb8{ 335 | background: #BB59BB; 336 | background: -webkit-linear-gradient(#BB59BB, #D595D5); 337 | background: -o-linear-gradient(#BB59BB, #D595D5); 338 | background: -moz-linear-gradient(#BB59BB, #D595D5); 339 | background: linear-gradient(#BB59BB, #D595D5); 340 | border: 1px solid #BB59BB; 341 | color: #fff; 342 | } 343 | 344 | /* Roxo Vinho */ 345 | .btn-roxo-vinho{background: #D6699F; color: #fff;} 346 | .btn-roxo-vinho:hover{background: #CC488A; color:#fff;} 347 | .btn-roxo-vinho:active{background: #DF8AB5;} 348 | .btn-grad-cb9{ 349 | background: #CC488A; 350 | background: -webkit-linear-gradient(#CC488A, #DF8AB5); 351 | background: -o-linear-gradient(#CC488A, #DF8AB5); 352 | background: -moz-linear-gradient(#CC488A, #DF8AB5); 353 | background: linear-gradient(#CC488A, #DF8AB5); 354 | border: 1px solid #CC488A; 355 | color: #fff; 356 | } 357 | 358 | /* Rosa Pink */ 359 | .btn-rosa-pink{background: #EE5184; color: #fff;} 360 | .btn-rosa-pink:hover{background: #EA2B69; color:#fff;} 361 | .btn-rosa-pink:active{background: #F1789F;} 362 | .btn-grad-cb10{ 363 | background: #EA2B69; 364 | background: -webkit-linear-gradient(#EA2B69, #F1789F); 365 | background: -o-linear-gradient(#EA2B69, #F1789F); 366 | background: -moz-linear-gradient(#EA2B69, #F1789F); 367 | background: linear-gradient(#EA2B69, #F1789F); 368 | border: 1px solid #EA2B69; 369 | color: #fff; 370 | } 371 | 372 | /* Vermelho Telha */ 373 | .btn-vermelho-telha{background: #D66969; color: #fff;} 374 | .btn-vermelho-telha:hover{background: #CC4848; color:#fff;} 375 | .btn-vermelho-telha:active{background: #DF8A8A;} 376 | .btn-grad-cb11{ 377 | background: #CC4848; 378 | background: -webkit-linear-gradient(#CC4848, #DF8A8A); 379 | background: -o-linear-gradient(#CC4848, #DF8A8A); 380 | background: -moz-linear-gradient(#CC4848, #DF8A8A); 381 | background: linear-gradient(#CC4848, #DF8A8A); 382 | border: 1px solid #CC4848; 383 | color: #fff; 384 | } 385 | 386 | /* Vermelho Vivo */ 387 | .btn-vermelho-vivo{background: #E96856; color: #fff;} 388 | .btn-vermelho-vivo:hover{background: #E44630; color:#fff;} 389 | .btn-vermelho-vivo:active{background: #EE8A7B;} 390 | .btn-grad-cb12{ 391 | background: #E44630; 392 | background: -webkit-linear-gradient(#E44630, #EE8A7B); 393 | background: -o-linear-gradient(#E44630, #EE8A7B); 394 | background: -moz-linear-gradient(#E44630, #EE8A7B); 395 | background: linear-gradient(#E44630, #EE8A7B); 396 | border: 1px solid #E44630; 397 | color: #fff; 398 | } 399 | 400 | /* Laranja Marte */ 401 | .btn-laranja-marte{background: #FFAA55; color: #fff;} 402 | .btn-laranja-marte:hover{background: #FF952B; color:#fff;} 403 | .btn-laranja-marte:active{background: #FFBF80;} 404 | .btn-grad-cb13{ 405 | background: #FF952B; 406 | background: -webkit-linear-gradient(#FF952B, #FFBF80); 407 | background: -o-linear-gradient(#FF952B, #FFBF80); 408 | background: -moz-linear-gradient(#FF952B, #FFBF80); 409 | background: linear-gradient(#FF952B, #FFBF80); 410 | border: 1px solid #FF952B; 411 | color: #fff; 412 | } 413 | 414 | /* Laranja Solar */ 415 | .btn-laranja-solar{background: #FFD555; color: #697181;} 416 | .btn-laranja-solar:hover{background: #FFCC33; color:#697181;} 417 | .btn-laranja-solar:active{background: #FFDF80;} 418 | .btn-grad-cb14{ 419 | background: #FFCC33; 420 | background: -webkit-linear-gradient(#FFCC33, #FFDF80); 421 | background: -o-linear-gradient(#FFCC33, #FFDF80); 422 | background: -moz-linear-gradient(#FFCC33, #FFDF80); 423 | background: linear-gradient(#FFCC33, #FFDF80); 424 | border: 1px solid #FFCC33; 425 | color: #fff; 426 | } 427 | 428 | /* Amarelo Ouro */ 429 | .btn-amarelo-ouro{background: #FFEA55; color: #697181;} 430 | .btn-amarelo-ouro:hover{background: #FFE42B; color:#697181;} 431 | .btn-amarelo-ouro:active{background: #FFEF80;} 432 | .btn-grad-cb15{ 433 | background: #FFE42B; 434 | background: -webkit-linear-gradient(#FFE42B, #FFEF80); 435 | background: -o-linear-gradient(#FFE42B, #FFEF80); 436 | background: -moz-linear-gradient(#FFE42B, #FFEF80); 437 | background: linear-gradient(#FFE42B, #FFEF80); 438 | border: 1px solid #FFE42B; 439 | } 440 | 441 | /* Cinza Azulado */ 442 | .btn-cinza-azulado{background: #565C69; color: #fff;} 443 | .btn-cinza-azulado:hover{background: #434852; color:#fff;} 444 | .btn-cinza-azulado:active{background: #697181;} 445 | .btn-grad-cb16{ 446 | background: #434852; 447 | background: -webkit-linear-gradient(#434852, #697181); 448 | background: -o-linear-gradient(#434852, #697181); 449 | background: -moz-linear-gradient(#434852, #697181); 450 | background: linear-gradient(#434852, #697181); 451 | border: 1px solid #434852; 452 | color: #fff; 453 | } 454 | 455 | /* Cinza Esverdeado */ 456 | .btn-cinza-esverdeado{background: #61655A; color: #fff;} 457 | .btn-cinza-esverdeado:hover{background: #4B4F46; color:#fff;} 458 | .btn-cinza-esverdeado:active{background: #767B6F;} 459 | .btn-grad-cb17{ 460 | background: #4B4F46; 461 | background: -webkit-linear-gradient(#4B4F46, #767B6F); 462 | background: -o-linear-gradient(#4B4F46, #767B6F); 463 | background: -moz-linear-gradient(#4B4F46, #767B6F); 464 | background: linear-gradient(#4B4F46, #767B6F); 465 | border: 1px solid #4B4F46; 466 | color: #fff; 467 | } 468 | 469 | /* Cinza Concreto */ 470 | .btn-cinza-concreto{background: #8F8F8F; color: #fff;} 471 | .btn-cinza-concreto:hover{background: #7A7A7A; color:#fff;} 472 | .btn-cinza-concreto:active{background: #A4A4A4;} 473 | .btn-grad-cb18{ 474 | background: #7A7A7A; 475 | background: -webkit-linear-gradient(#7A7A7A, #A4A4A4); 476 | background: -o-linear-gradient(#7A7A7A, #A4A4A4); 477 | background: -moz-linear-gradient(#7A7A7A, #A4A4A4); 478 | background: linear-gradient(#7A7A7A, #A4A4A4); 479 | border: 1px solid #7A7A7A; 480 | color: #fff; 481 | } 482 | 483 | /* Cinza Fumaça */ 484 | .btn-cinza-fumaca{background: #D4D4D4; color: #697181;} 485 | .btn-cinza-fumaca:hover{background: #BFBFBF; color:#697181;} 486 | .btn-cinza-fumaca:active{background: #E9E9E9;} 487 | .btn-grad-cb19{ 488 | background: #BFBFBF; 489 | background: -webkit-linear-gradient(#BFBFBF, #E9E9E9); 490 | background: -o-linear-gradient(#BFBFBF, #E9E9E9); 491 | background: -moz-linear-gradient(#BFBFBF, #E9E9E9); 492 | background: linear-gradient(#BFBFBF, #E9E9E9); 493 | border: 1px solid #BFBFBF; 494 | color: #4B4F46; 495 | } 496 | 497 | /* Branco Perolado */ 498 | .btn-branco-perolado{background: #F6F7FB; color: #697181;} 499 | .btn-branco-perolado:hover{background: #F2F3F7; color:#697181;} 500 | .btn-branco-perolado:active{background: #FFFFFF;} 501 | .btn-grad-cb20{ 502 | background: #F2F3F7; 503 | background: -webkit-linear-gradient(#F2F3F7, #FFF); 504 | background: -o-linear-gradient(#F2F3F7, #FFF); 505 | background: -moz-linear-gradient(#F2F3F7, #FFF); 506 | background: linear-gradient(#F2F3F7, #FFF); 507 | border: 1px solid #F2F3F7; 508 | } 509 | 510 | /* Marrom Café */ 511 | .btn-marrom-cafe{background: #604846; color: #FFF;} 512 | .btn-marrom-cafe:hover{background: #4A3836; color:#FFF;} 513 | .btn-marrom-cafe:active{background: #725452;} 514 | .btn-grad-cb21{ 515 | background: #4A3836; 516 | background: -webkit-linear-gradient(#4A3836, #725452); 517 | background: -o-linear-gradient(#4A3836, #725452); 518 | background: -moz-linear-gradient(#4A3836, #725452); 519 | background: linear-gradient(#4A3836, #725452); 520 | border: 1px solid #4A3836; 521 | } 522 | 523 | /* Marrom Chocolate */ 524 | .btn-marrom-chocolate{background: #7C5247; color: #FFF;} 525 | .btn-marrom-chocolate:hover{background: #6D473E; color:#FFF;} 526 | .btn-marrom-chocolate:active{background: #8A5A4F;} 527 | .btn-grad-cb22{ 528 | background: #6D473E; 529 | background: -webkit-linear-gradient(#6D473E, #8A5A4F); 530 | background: -o-linear-gradient(#6D473E, #8A5A4F); 531 | background: -moz-linear-gradient(#6D473E, #8A5A4F); 532 | background: linear-gradient(#6D473E, #8A5A4F); 533 | border: 1px solid #6D473E; 534 | } 535 | 536 | /* Marrom Caramelo */ 537 | .btn-marrom-caramelo{background: #A5886B; color: #FFF;} 538 | .btn-marrom-caramelo:hover{background: #997C5E; color:#FFF;} 539 | .btn-marrom-caramelo:active{background: #B0977D;} 540 | .btn-grad-cb23{ 541 | background: #997C5E; 542 | background: -webkit-linear-gradient(#997C5E, #B0977D); 543 | background: -o-linear-gradient(#997C5E, #B0977D); 544 | background: -moz-linear-gradient(#997C5E, #B0977D); 545 | background: linear-gradient(#997C5E, #B0977D); 546 | border: 1px solid #997C5E; 547 | } 548 | 549 | /* Marrom Creme */ 550 | .btn-marrom-creme{background: #E9E3DC; color: #604846;} 551 | .btn-marrom-creme:hover{background: #E4DDD3; color:#604846;} 552 | .btn-marrom-creme:active{background: #F4F1EE;} 553 | .btn-grad-cb24{ 554 | background: #E4DDD3; 555 | background: -webkit-linear-gradient(#E4DDD3, #F4F1EE); 556 | background: -o-linear-gradient(#E4DDD3, #F4F1EE); 557 | background: -moz-linear-gradient(#E4DDD3, #F4F1EE); 558 | background: linear-gradient(#E4DDD3, #F4F1EE); 559 | border: 1px solid #E4DDD3; 560 | color:#4A3836; 561 | } 562 | 563 | .btn-grad-cb1:hover, .btn-grad-cb2:hover, .btn-grad-cb3:hover, .btn-grad-cb4:hover, .btn-grad-cb5:hover, .btn-grad-cb6:hover, .btn-grad-cb7:hover, .btn-grad-cb8:hover, .btn-grad-cb9:hover, .btn-grad-cb10:hover, .btn-grad-cb11:hover, .btn-grad-cb12:hover, .btn-grad-cb13:hover, .btn-grad-cb14:hover, .btn-grad-cb15:hover, .btn-grad-cb16:hover, .btn-grad-cb17:hover, .btn-grad-cb18:hover, .btn-grad-cb19:hover, .btn-grad-cb20:hover, .btn-grad-cb21:hover, .btn-grad-cb22:hover, .btn-grad-cb23:hover, .btn-grad-cb24:hover{ 564 | color: rgba(0, 0, 0, 0.65) !important; opacity: 0.85; 565 | } 566 | 567 | /* Botão Outline / outline button */ 568 | 569 | .btn-default-outline, 570 | .btn-primary-outline, 571 | .btn-success-outline, 572 | .btn-info-outline, 573 | .btn-warning-outline, 574 | .btn-danger-outline{ 575 | background: transparent; 576 | text-shadow: none; 577 | transition: all 0.30s ease; 578 | -webkit-transition: all 0.30s ease; 579 | -moz-transition: all 0.30s ease; 580 | -o-transition: all 0.30s ease; 581 | } 582 | 583 | /* Botão default Outline */ 584 | .btn-default-outline { border: 1px solid #7a7a7a; color: #8f8f8f;} 585 | 586 | /* Botão primário Outline */ 587 | .btn-primary-outline{ border: 1px solid #7DB5EC; color: #7DB5EC;} 588 | 589 | /* Botão sucesso Outline */ 590 | .btn-success-outline{ border: 1px solid #98B75E; color: #98B75E;} 591 | 592 | /* Botão informação Outline */ 593 | .btn-info-outline{ border: 1px solid #9488B7; color: #9488B7;} 594 | 595 | /* Botão atenção Outline */ 596 | .btn-warning-outline{ border: 1px solid #FFE42B; color: #FFE42B;} 597 | 598 | /* Botão perigo Outline */ 599 | .btn-danger-outline{ border: 1px solid #EE8A7B; color: #EE8A7B;} 600 | --------------------------------------------------------------------------------