Skip to content

G
govbr-dsgov
Commit eae2f2ee authored by Luísa Palmeira's avatar Luísa Palmeira
Browse files
Options

Versão 2.0.1 do dsgov

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3350 additions and 0 deletions
CHANGELOG.md 0 → 100644
View file @ eae2f2ee
This diff is collapsed.
README.md 0 → 100644
View file @ eae2f2ee
# Design System do Governo Federal
## Introdução
O Design System do Governo Federal apresenta os padrões de interface que devem ser seguidos por designers e desenvolvedores para garantir a experiência única na interação dos usuários com os sistemas interativos do Governo Federal.
## Rodando o projeto
1. Clone o repositório
```git
git clone https://git.serpro.gov.br/dsgov.br/dsgov.br.git
```
1. Entre na branch develop
```git
git checkout develop
```
1. Entre na pasta do clone e execute o comando:
```node
npm install
```
1. Para executar o projeto execute o comando
```node
npm run start
```
1. O projeto vai estar disponível pelo browser no endereço [http://localhost:9000](http://localhost:9000)
## Contribuindo com o Design System do Governo Federal
As contribuições não se limitam a criação de um novo item no Design System, convido vocês a nos apoiar através de feedbacks, evolução nas documentação, divulgação, ferramentas, reporte de bugs, testes, criação de bibliotecas em tecnologias específicas, solicitação de novas necessidades, etc.
> Antes de abrir uma issue, veja se já não existe uma aberta com a mesma solicitação ou algo relacionado que possa complementar.
Antes de solicitar um novo item, dúvida ou reportar um erro, primeiramente vocês precisarão se autenticar no [https://git.serpro.gov.br/](https://git.serpro.gov.br/), informando o usuário e senha LDAP corporativo.
Após autenticado pode abrir uma issue conforme necessidade:
- [Faça uma pergunta](https://git.serpro.gov.br/dsgov.br/dsgov.br-backlogs/blob/master/.gitlab/issue_templates/QUESTION.md)
- [Relate um Erro](https://git.serpro.gov.br/dsgov.br/dsgov.br-backlogs/blob/master/.gitlab/issue_templates/BUG.md)
- [Solicite um novo Item](https://git.serpro.gov.br/dsgov.br/dsgov.br-backlogs/blob/master/.gitlab/issue_templates/CONTRIBUTING.md)
OBS: Na abertura de uma issue o gitlab trabalha com a sintaxe Markdown, caso tenham alguma dúvida disponibilizamos alguns links para ajudá-los:
- [Editor de markdown Online](https://stackedit.io/app#)
- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
- [Sintaxe básica e formatação](https://help.github.com/pt/github/writing-on-github/basic-writing-and-formatting-syntax)
### Como os componentes serão priorizados
As issues abertas serão analisadas pelo time do DSGOV.BR e priorizada conforme definição abaixo:
- Erro impeditivo
- Quantidade de pessoas precisando de um mesmo item
- Possibilidade de reuso
dist/components/accordion/accordion.css 0 → 100644
View file @ eae2f2ee
.br-accordion {
background: var(--bg-color);
border-top: 1px solid var(--color-secondary-04);
}
.br-accordion .item {
border-bottom: 1px solid var(--color-secondary-04);
display: flex;
flex-direction: column;
}
.br-accordion .item[active] {
border-bottom: 0;
}
.br-accordion .item[active] .header {
font-weight: var(--font-weight-semi-bold);
}
.br-accordion .item[active] + .content {
border-bottom: 1px solid var(--color-secondary-04);
display: block;
}
.br-accordion .header {
--bg-color: transparent;
background: var(--bg-color);
border: 0;
color: var(--interactive);
display: flex;
font-size: var(--font-size-scale-up-01);
justify-content: space-between;
padding: var(--spacing-scale-2x) 0;
text-align: left;
text-decoration: none;
width: 100%;
outline: none;
}
.br-accordion .header .icon {
margin: 0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh);
}
.br-accordion .header .title {
flex: 1;
margin: 0;
}
.br-accordion .header:focus {
outline: none;
}
.br-accordion .header.focus-visible, .br-accordion .header:focus-visible {
outline-color: var(--focus-color);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-accordion .header:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-accordion .header:not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-accordion .content {
color: var(--text-color);
display: none;
font-size: var(--font-size-scale-base);
margin: 0 var(--spacing-scale-base);
padding: var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x);
}
.br-accordion .content *:last-child {
margin-bottom: 0;
}
.br-accordion[negative] {
--text-color: var(--color-secondary-01);
--interactive: var(--color-primary-pastel-01);
--interactive-rgb: var(--rgb-primary-pastel-01);
--visited: var(--color-secondary-04);
--hover: var(--surface-opacity-sm, 0.3);
--pressed: var(--surface-opacity-lg, 0.65);
--focus-color: var(--color-support-10);
--active: var(--color-secondary-01);
--bg-color: var(--color-primary-darken-02);
--text-color: var(--color-secondary-01);
}
/*# sourceMappingURL=accordion.css.map*/
\ No newline at end of file
dist/components/accordion/accordion.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA;EACE;EACA;AADF;AAEE;EACE;EACA;EACA;AAAJ;AACI;EACE;AACN;AAAM;EACE;AAER;AAAM;EACE;EACA;AAER;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAJ;AACI;EACE;AACN;AACI;EACE;EACA;AACN;ACTE;EACE;ADWJ;ACRE;EAEE;EACA;EACA;EACA;ADSJ;ACnCI;EACE;ADqCN;AChCI;EACE;ADkCN;AAXE;EACE;EACA;EACA;EACA;EACA;AAaJ;AAXM;EACE;AAaR;AATE;ECEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDPE;EACA;AAkBJ,C","file":"components/accordion/accordion.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/accordion/accordion.js 0 → 100644
View file @ eae2f2ee
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 106);
/******/ })
/************************************************************************/
/******/ ({
/***/ 106:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(7);
__webpack_require__(35);
__webpack_require__(36);
__webpack_require__(107);
__webpack_require__(108);
__webpack_require__(109);
module.exports = __webpack_require__(110);
/***/ }),
/***/ 107:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-default.html");
/***/ }),
/***/ 108:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-negative.html");
/***/ }),
/***/ 109:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-single-negative.html");
/***/ }),
/***/ 110:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples/accordion-single.html");
/***/ }),
/***/ 35:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 36:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/accordion/examples.html");
/***/ }),
/***/ 7:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
class BRAccordion {
constructor(name, component) {
this.name = name
this.component = component
this._setBehavior()
}
_setBehavior() {
for (const button of this.component.querySelectorAll('button.header')) {
button.addEventListener('click', (event) => {
this._collapse(event)
this._changeIcon(event)
})
}
}
_collapse(event) {
if (this.component.hasAttribute('single')) {
for (const field of this.component.querySelectorAll('.item')) {
if (field === event.currentTarget.parentNode) {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
} else {
field.setAttribute('active', '')
}
} else {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
}
}
}
} else {
for (const field of this.component.querySelectorAll('.item')) {
if (field === event.currentTarget.parentNode) {
if (field.hasAttribute('active')) {
field.removeAttribute('active')
} else {
field.setAttribute('active', '')
}
}
}
}
}
_changeIcon() {
for (const field of this.component.querySelectorAll('.item')) {
if (field.hasAttribute('active')) {
for (const icon of field.querySelectorAll('.icon')) {
icon.children[0].classList.remove('fa-angle-down')
icon.children[0].classList.add('fa-angle-up')
}
} else {
for (const icon of field.querySelectorAll('.icon')) {
icon.children[0].classList.remove('fa-angle-up')
icon.children[0].classList.add('fa-angle-down')
}
}
}
}
}
const accordionList = []
for (const brAccordion of window.document.querySelectorAll('.br-accordion')) {
accordionList.push(
Object.create(new BRAccordion('br-accordion', brAccordion))
)
}
/* harmony default export */ __webpack_exports__["default"] = (BRAccordion);
/***/ })
/******/ });
//# sourceMappingURL=accordion.js.map
\ No newline at end of file
dist/components/accordion/accordion.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/accordion/examples/accordion-default.pug","webpack:///./src/components/accordion/examples/accordion-negative.pug","webpack:///./src/components/accordion/examples/accordion-single-negative.pug","webpack:///./src/components/accordion/examples/accordion-single.pug","webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/components/accordion/examples.pug","webpack:///./src/components/accordion/accordion.js"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,yDAAyD,E;;;;;;;;ACA/F;AAAe,oFAAuB,0DAA0D,E;;;;;;;;ACAhG;AAAe,oFAAuB,iEAAiE,E;;;;;;;;ACAvG;AAAe,oFAAuB,wDAAwD,E;;;;;;;;ACA9F;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,uCAAuC,E;;;;;;;;ACA7E;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,0EAAW","file":"components/accordion/accordion.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 106);\n","export default __webpack_public_path__ + \"components/accordion/examples/accordion-default.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-negative.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-single-negative.html\";","export default __webpack_public_path__ + \"components/accordion/examples/accordion-single.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/accordion/examples.html\";","class BRAccordion {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n for (const button of this.component.querySelectorAll('button.header')) {\n button.addEventListener('click', (event) => {\n this._collapse(event)\n this._changeIcon(event)\n })\n }\n }\n\n _collapse(event) {\n if (this.component.hasAttribute('single')) {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n } else {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n }\n }\n }\n } else {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n }\n }\n }\n }\n\n _changeIcon() {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field.hasAttribute('active')) {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-down')\n icon.children[0].classList.add('fa-angle-up')\n }\n } else {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-up')\n icon.children[0].classList.add('fa-angle-down')\n }\n }\n }\n }\n}\nconst accordionList = []\nfor (const brAccordion of window.document.querySelectorAll('.br-accordion')) {\n accordionList.push(\n Object.create(new BRAccordion('br-accordion', brAccordion))\n )\n}\nexport default BRAccordion\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/accordion/accordion.min.css 0 → 100644
View file @ eae2f2ee
.br-accordion{background:var(--bg-color);border-top:1px solid var(--color-secondary-04)}.br-accordion .item{border-bottom:1px solid var(--color-secondary-04);display:flex;flex-direction:column}.br-accordion .item[active]{border-bottom:0}.br-accordion .item[active] .header{font-weight:var(--font-weight-semi-bold)}.br-accordion .item[active]+.content{border-bottom:1px solid var(--color-secondary-04);display:block}.br-accordion .header{--bg-color:rgba(0,0,0,0);background:var(--bg-color);border:0;color:var(--interactive);display:flex;font-size:var(--font-size-scale-up-01);justify-content:space-between;padding:var(--spacing-scale-2x) 0;text-align:left;text-decoration:none;width:100%;outline:none}.br-accordion .header .icon{margin:0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh)}.br-accordion .header .title{flex:1;margin:0}.br-accordion .header:focus{outline:none}.br-accordion .header.focus-visible,.br-accordion .header:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-accordion .header:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-accordion .header:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-accordion .content{color:var(--text-color);display:none;font-size:var(--font-size-scale-base);margin:0 var(--spacing-scale-base);padding:var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x)}.br-accordion .content :last-child{margin-bottom:0}.br-accordion[negative]{--interactive:var(--color-primary-pastel-01);--interactive-rgb:var(--rgb-primary-pastel-01);--visited:var(--color-secondary-04);--hover:var(--surface-opacity-sm,0.3);--pressed:var(--surface-opacity-lg,0.65);--focus-color:var(--color-support-10);--active:var(--color-secondary-01);--bg-color:var(--color-primary-darken-02);--text-color:var(--color-secondary-01)}
/*# sourceMappingURL=accordion.min.css.map */
\ No newline at end of file
dist/components/accordion/accordion.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/accordion/_accordion.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,cACE,0BAAA,CACA,8CADF,CAEE,oBACE,iDAAA,CACA,YAAA,CACA,qBAAJ,CACI,4BACE,eACN,CAAM,oCACE,wCAER,CAAM,qCACE,iDAAA,CACA,aAER,CAEE,sBACE,wBAAA,CACA,0BAAA,CACA,QAAA,CACA,wBAAA,CACA,YAAA,CACA,sCAAA,CACA,6BAAA,CACA,iCAAA,CACA,eAAA,CACA,oBAAA,CACA,UAAA,CACA,YAAJ,CACI,4BACE,6DACN,CACI,6BACE,MAAA,CACA,QACN,CCTE,4BACE,YDWJ,CCRE,wEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCDSJ,CCnCI,2CACE,qHDqCN,CChCI,4CACE,yHDkCN,CAXE,uBACE,uBAAA,CACA,YAAA,CACA,qCAAA,CACA,kCAAA,CACA,iFAaJ,CAXM,mCACE,eAaR,CATE,wBCGA,4CAAA,CACA,8CAAA,CACA,mCAAA,CACA,qCAAA,CACA,wCAAA,CACA,qCAAA,CACA,kCAAA,CDPE,yCAAA,CACA,sCAkBJ","file":"accordion.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/accordion/accordion.min.js 0 → 100644
View file @ eae2f2ee
!function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=111)}({111:function(e,t,r){r(7),r(35),e.exports=r(36)},35:function(e,t,r){"use strict";r.r(t)},36:function(e,t,r){"use strict";r.r(t),t.default=r.p+"components/accordion/examples.html"},7:function(e,t,r){"use strict";r.r(t);class o{constructor(e,t){this.name=e,this.component=t,this._setBehavior()}_setBehavior(){for(const e of this.component.querySelectorAll("button.header"))e.addEventListener("click",(e=>{this._collapse(e),this._changeIcon(e)}))}_collapse(e){if(this.component.hasAttribute("single"))for(const t of this.component.querySelectorAll(".item"))t===e.currentTarget.parentNode?t.hasAttribute("active")?t.removeAttribute("active"):t.setAttribute("active",""):t.hasAttribute("active")&&t.removeAttribute("active");else for(const t of this.component.querySelectorAll(".item"))t===e.currentTarget.parentNode&&(t.hasAttribute("active")?t.removeAttribute("active"):t.setAttribute("active",""))}_changeIcon(){for(const e of this.component.querySelectorAll(".item"))if(e.hasAttribute("active"))for(const t of e.querySelectorAll(".icon"))t.children[0].classList.remove("fa-angle-down"),t.children[0].classList.add("fa-angle-up");else for(const t of e.querySelectorAll(".icon"))t.children[0].classList.remove("fa-angle-up"),t.children[0].classList.add("fa-angle-down")}}const n=[];for(const e of window.document.querySelectorAll(".br-accordion"))n.push(Object.create(new o("br-accordion",e)));t.default=o}});
//# sourceMappingURL=accordion.min.js.map
\ No newline at end of file
dist/components/accordion/accordion.min.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/accordion/_accordion.scss","webpack:///./src/components/accordion/examples.pug","webpack:///./src/components/accordion/accordion.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","BRAccordion","component","this","_setBehavior","button","querySelectorAll","addEventListener","event","_collapse","_changeIcon","hasAttribute","field","currentTarget","parentNode","removeAttribute","setAttribute","icon","children","classList","remove","add","accordionList","brAccordion","window","document","push"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,K,kFClFrD,Q,gCCAA,OAAe,cAA0B,sC,+BCAzC,aAAMC,EACJ,YAAYzB,EAAM0B,GAChBC,KAAK3B,KAAOA,EACZ2B,KAAKD,UAAYA,EACjBC,KAAKC,eAGP,eACE,IAAK,MAAMC,KAAUF,KAAKD,UAAUI,iBAAiB,iBACnDD,EAAOE,iBAAiB,SAAUC,IAChCL,KAAKM,UAAUD,GACfL,KAAKO,YAAYF,MAKvB,UAAUA,GACR,GAAIL,KAAKD,UAAUS,aAAa,UAC9B,IAAK,MAAMC,KAAST,KAAKD,UAAUI,iBAAiB,SAC9CM,IAAUJ,EAAMK,cAAcC,WAC5BF,EAAMD,aAAa,UACrBC,EAAMG,gBAAgB,UAEtBH,EAAMI,aAAa,SAAU,IAG3BJ,EAAMD,aAAa,WACrBC,EAAMG,gBAAgB,eAK5B,IAAK,MAAMH,KAAST,KAAKD,UAAUI,iBAAiB,SAC9CM,IAAUJ,EAAMK,cAAcC,aAC5BF,EAAMD,aAAa,UACrBC,EAAMG,gBAAgB,UAEtBH,EAAMI,aAAa,SAAU,KAOvC,cACE,IAAK,MAAMJ,KAAST,KAAKD,UAAUI,iBAAiB,SAClD,GAAIM,EAAMD,aAAa,UACrB,IAAK,MAAMM,KAAQL,EAAMN,iBAAiB,SACxCW,EAAKC,SAAS,GAAGC,UAAUC,OAAO,iBAClCH,EAAKC,SAAS,GAAGC,UAAUE,IAAI,oBAGjC,IAAK,MAAMJ,KAAQL,EAAMN,iBAAiB,SACxCW,EAAKC,SAAS,GAAGC,UAAUC,OAAO,eAClCH,EAAKC,SAAS,GAAGC,UAAUE,IAAI,kBAMzC,MAAMC,EAAgB,GACtB,IAAK,MAAMC,KAAeC,OAAOC,SAASnB,iBAAiB,iBACzDgB,EAAcI,KACZ/C,OAAOY,OAAO,IAAIU,EAAY,eAAgBsB,KAGnC","file":"components/accordion/accordion.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 111);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/accordion/examples.html\";","class BRAccordion {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n for (const button of this.component.querySelectorAll('button.header')) {\n button.addEventListener('click', (event) => {\n this._collapse(event)\n this._changeIcon(event)\n })\n }\n }\n\n _collapse(event) {\n if (this.component.hasAttribute('single')) {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n } else {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n }\n }\n }\n } else {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field === event.currentTarget.parentNode) {\n if (field.hasAttribute('active')) {\n field.removeAttribute('active')\n } else {\n field.setAttribute('active', '')\n }\n }\n }\n }\n }\n\n _changeIcon() {\n for (const field of this.component.querySelectorAll('.item')) {\n if (field.hasAttribute('active')) {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-down')\n icon.children[0].classList.add('fa-angle-up')\n }\n } else {\n for (const icon of field.querySelectorAll('.icon')) {\n icon.children[0].classList.remove('fa-angle-up')\n icon.children[0].classList.add('fa-angle-down')\n }\n }\n }\n }\n}\nconst accordionList = []\nfor (const brAccordion of window.document.querySelectorAll('.br-accordion')) {\n accordionList.push(\n Object.create(new BRAccordion('br-accordion', brAccordion))\n )\n}\nexport default BRAccordion\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/accordion/accordion.min.min.css 0 → 100644
View file @ eae2f2ee
.br-accordion{background:var(--bg-color);border-top:1px solid var(--color-secondary-04)}.br-accordion .item{border-bottom:1px solid var(--color-secondary-04);display:flex;flex-direction:column}.br-accordion .item[active]{border-bottom:0}.br-accordion .item[active] .header{font-weight:var(--font-weight-semi-bold)}.br-accordion .item[active]+.content{border-bottom:1px solid var(--color-secondary-04);display:block}.br-accordion .header{--bg-color:rgba(0,0,0,0);background:var(--bg-color);border:0;color:var(--interactive);display:flex;font-size:var(--font-size-scale-up-01);justify-content:space-between;padding:var(--spacing-scale-2x) 0;text-align:left;text-decoration:none;width:100%;outline:none}.br-accordion .header .icon{margin:0 var(--spacing-scale-2x) 0 var(--spacing-scale-baseh)}.br-accordion .header .title{flex:1;margin:0}.br-accordion .header:focus{outline:none}.br-accordion .header.focus-visible,.br-accordion .header:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-accordion .header:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-accordion .header:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-accordion .content{color:var(--text-color);display:none;font-size:var(--font-size-scale-base);margin:0 var(--spacing-scale-base);padding:var(--spacing-scale-base) var(--spacing-scale-8x) var(--spacing-scale-2x)}.br-accordion .content :last-child{margin-bottom:0}.br-accordion[negative]{--interactive:var(--color-primary-pastel-01);--interactive-rgb:var(--rgb-primary-pastel-01);--visited:var(--color-secondary-04);--hover:var(--surface-opacity-sm,0.3);--pressed:var(--surface-opacity-lg,0.65);--focus-color:var(--color-support-10);--active:var(--color-secondary-01);--bg-color:var(--color-primary-darken-02);--text-color:var(--color-secondary-01)}
/*# sourceMappingURL=accordion.min.min.css.map */
\ No newline at end of file
dist/components/accordion/accordion.min.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/accordion/_accordion.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,cACE,0BAAA,CACA,8CADF,CAEE,oBACE,iDAAA,CACA,YAAA,CACA,qBAAJ,CACI,4BACE,eACN,CAAM,oCACE,wCAER,CAAM,qCACE,iDAAA,CACA,aAER,CAEE,sBACE,wBAAA,CACA,0BAAA,CACA,QAAA,CACA,wBAAA,CACA,YAAA,CACA,sCAAA,CACA,6BAAA,CACA,iCAAA,CACA,eAAA,CACA,oBAAA,CACA,UAAA,CACA,YAAJ,CACI,4BACE,6DACN,CACI,6BACE,MAAA,CACA,QACN,CCTE,4BACE,YDWJ,CCRE,wEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCDSJ,CCnCI,2CACE,qHDqCN,CChCI,4CACE,yHDkCN,CAXE,uBACE,uBAAA,CACA,YAAA,CACA,qCAAA,CACA,kCAAA,CACA,iFAaJ,CAXM,mCACE,eAaR,CATE,wBCGA,4CAAA,CACA,8CAAA,CACA,mCAAA,CACA,qCAAA,CACA,wCAAA,CACA,qCAAA,CACA,kCAAA,CDPE,yCAAA,CACA,sCAkBJ","file":"accordion.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}accordion {\n background: v(bg-color);\n border-top: 1px solid v(color-secondary-04);\n .item {\n border-bottom: 1px solid v(color-secondary-04);\n display: flex;\n flex-direction: column;\n &[active] {\n border-bottom: 0;\n .header {\n font-weight: v(font-weight-semi-bold);\n }\n & + .content {\n border-bottom: 1px solid v(color-secondary-04);\n display: block;\n }\n }\n }\n .header {\n --bg-color: transparent;\n background: v(bg-color);\n border: 0;\n color: var(--interactive);\n display: flex;\n font-size: v(font-size-scale-up-01);\n justify-content: space-between;\n padding: v(spacing-scale-2x) 0;\n text-align: left;\n text-decoration: none;\n width: 100%;\n outline: none;\n .icon {\n margin: 0 v(spacing-scale-2x) 0 v(spacing-scale-baseh);\n }\n .title {\n flex: 1;\n margin: 0;\n }\n @include focus;\n @include hover;\n }\n .content {\n color: v(text-color);\n display: none;\n font-size: v(font-size-scale-base);\n margin: 0 v(spacing-scale-base);\n padding: v(spacing-scale-base) v(spacing-scale-8x) v(spacing-scale-2x);\n * {\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &[negative] {\n @include dark-mode;\n --bg-color: var(--color-primary-darken-02);\n --text-color: var(--color-secondary-01);\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/accordion/examples.html 0 → 100644
View file @ eae2f2ee
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Accordion</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<p class="h5">Comportamento padrão</p>
<div class="row">
<div class="col-md-6">
<div class="br-accordion">
<div class="item">
<button class="header" type="button" aria-controls="id1" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">O que é esse serviço?</span></button>
</div>
<div class="content" id="id1" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id2" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Quem pode utilizar esse serviço?</span></button>
</div>
<div class="content" id="id2" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id3" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Etapas para realização desse serviço</span></button>
</div>
<div class="content" id="id3" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id4" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Outras informações sobre esse serviço</span></button>
</div>
<div class="content" id="id4" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="br-accordion" negative="negative">
<div class="item">
<button class="header" type="button" aria-controls="id5" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">O que é esse serviço?</span></button>
</div>
<div class="content" id="id5" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id6" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Quem pode utilizar esse serviço?</span></button>
</div>
<div class="content" id="id6" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id7" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Etapas para realização desse serviço</span></button>
</div>
<div class="content" id="id7" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id8" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Outras informações sobre esse serviço</span></button>
</div>
<div class="content" id="id8" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<p class="h5 mt-5">Único item por vez</p>
<div class="row">
<div class="col-md-6">
<div class="br-accordion" single="single">
<div class="item">
<button class="header" type="button" aria-controls="id9" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Assuntos</span></button>
</div>
<div class="content" id="id9" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id10" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Serviços</span></button>
</div>
<div class="content" id="id10" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id11" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Canais de atendimento</span></button>
</div>
<div class="content" id="id11" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id12" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Galeria de aplicativos</span></button>
</div>
<div class="content" id="id12" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id13" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Centrais de conteúdo</span></button>
</div>
<div class="content" id="id13" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id14" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Navegação</span></button>
</div>
<div class="content" id="id14" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id15" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Planalto</span></button>
</div>
<div class="content" id="id15" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="br-accordion" negative="negative" single="single">
<div class="item">
<button class="header" type="button" aria-controls="id16" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Assuntos</span></button>
</div>
<div class="content" id="id16" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id17" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Serviços</span></button>
</div>
<div class="content" id="id17" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id18" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Canais de atendimento</span></button>
</div>
<div class="content" id="id18" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id19" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Galeria de aplicativos</span></button>
</div>
<div class="content" id="id19" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id20" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Centrais de conteúdo</span></button>
</div>
<div class="content" id="id20" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id21" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Navegação</span></button>
</div>
<div class="content" id="id21" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id22" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Planalto</span></button>
</div>
<div class="content" id="id22" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
</div>
<script src="../../dsgov.js"></script>
</body>
</html>
\ No newline at end of file
dist/components/accordion/examples/accordion-default.html 0 → 100644
View file @ eae2f2ee
<div class="br-accordion">
<div class="item">
<button class="header" type="button" aria-controls="id1" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">O que é esse serviço?</span></button>
</div>
<div class="content" id="id1" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id2" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Quem pode utilizar esse serviço?</span></button>
</div>
<div class="content" id="id2" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id3" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Etapas para realização desse serviço</span></button>
</div>
<div class="content" id="id3" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id4" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Outras informações sobre esse serviço</span></button>
</div>
<div class="content" id="id4" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
\ No newline at end of file
dist/components/accordion/examples/accordion-negative.html 0 → 100644
View file @ eae2f2ee
<div class="br-accordion" negative="negative">
<div class="item">
<button class="header" type="button" aria-controls="id5" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">O que é esse serviço?</span></button>
</div>
<div class="content" id="id5" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id6" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Quem pode utilizar esse serviço?</span></button>
</div>
<div class="content" id="id6" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id7" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Etapas para realização desse serviço</span></button>
</div>
<div class="content" id="id7" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id8" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Outras informações sobre esse serviço</span></button>
</div>
<div class="content" id="id8" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
\ No newline at end of file
dist/components/accordion/examples/accordion-single-negative.html 0 → 100644
View file @ eae2f2ee
<div class="br-accordion" negative="negative" single="single">
<div class="item">
<button class="header" type="button" aria-controls="id16" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Assuntos</span></button>
</div>
<div class="content" id="id16" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id17" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Serviços</span></button>
</div>
<div class="content" id="id17" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id18" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Canais de atendimento</span></button>
</div>
<div class="content" id="id18" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id19" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Galeria de aplicativos</span></button>
</div>
<div class="content" id="id19" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id20" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Centrais de conteúdo</span></button>
</div>
<div class="content" id="id20" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id21" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Navegação</span></button>
</div>
<div class="content" id="id21" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id22" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Planalto</span></button>
</div>
<div class="content" id="id22" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
\ No newline at end of file
dist/components/accordion/examples/accordion-single.html 0 → 100644
View file @ eae2f2ee
<div class="br-accordion" single="single">
<div class="item">
<button class="header" type="button" aria-controls="id9" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Assuntos</span></button>
</div>
<div class="content" id="id9" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id10" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Serviços</span></button>
</div>
<div class="content" id="id10" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id11" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Canais de atendimento</span></button>
</div>
<div class="content" id="id11" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id12" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Galeria de aplicativos</span></button>
</div>
<div class="content" id="id12" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id13" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Centrais de conteúdo</span></button>
</div>
<div class="content" id="id13" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id14" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Navegação</span></button>
</div>
<div class="content" id="id14" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="item">
<button class="header" type="button" aria-controls="id15" aria-expanded="false"><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span><span class="title">Planalto</span></button>
</div>
<div class="content" id="id15" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
\ No newline at end of file
dist/components/avatar/avatar.css 0 → 100644
View file @ eae2f2ee
.br-avatar {
--avatar-background: var(--color-primary-pastel-02);
--avatar-color: var(--color-primary-pastel-01);
--avatar-size: var(--avatar-small);
--avatar-font-weight: var(--font-weight-bold);
--avatar-icon-size: var(--avatar-icon-small);
--avatar-text-size: var(--avatar-text-small);
--avatar-small: 40px;
--avatar-medium: 100px;
--avatar-large: 160px;
--avatar-icon-small: var(--icon-size-2x);
--avatar-icon-medium: var(--icon-size-5x);
--avatar-icon-large: var(--icon-size-8x);
--avatar-text-small: var(--font-size-scale-up-03);
--avatar-text-medium: var(--font-size-scale-up-07);
--avatar-text-large: var(--font-size-scale-up-11);
display: inline-block;
vertical-align: middle;
}
.br-avatar .image {
background-color: var(--avatar-background);
border-radius: 50%;
color: var(--avatar-color);
display: inline-block;
font-size: var(--avatar-text-size);
font-weight: var(--avatar-font-weight);
overflow: hidden;
text-align: center;
height: var(--avatar-size);
width: var(--avatar-size);
}
.br-avatar .image img {
height: var(--avatar-size);
width: var(--avatar-size);
vertical-align: baseline;
}
.br-avatar .image .svg-inline--fa,
.br-avatar .image .fa,
.br-avatar .image .fab,
.br-avatar .image .fad,
.br-avatar .image .fal,
.br-avatar .image .far,
.br-avatar .image .fas {
--icon-size: var(--avatar-icon-size);
margin-top: 0.25em;
}
.br-avatar.is-small, .br-avatar.small, .br-avatar[small] {
--avatar-size: var(--avatar-small);
--avatar-icon-size: var(--avatar-icon-small);
--avatar-text-size: var(--avatar-text-small);
}
.br-avatar.is-medium, .br-avatar.medium, .br-avatar[medium] {
--avatar-size: var(--avatar-medium);
--avatar-icon-size: var(--avatar-icon-medium);
--avatar-text-size: var(--avatar-text-medium);
}
.br-avatar.is-large, .br-avatar.large, .br-avatar[large] {
--avatar-size: var(--avatar-large);
--avatar-icon-size: var(--avatar-icon-large);
--avatar-text-size: var(--avatar-text-large);
}
.br-avatar-action {
background: transparent;
border: 0;
}
.br-avatar-action:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-avatar-action:not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-avatar-action:focus {
outline: none;
}
.br-avatar-action.focus-visible, .br-avatar-action:focus-visible {
outline-color: var(--focus-color);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
/*# sourceMappingURL=avatar.css.map*/
\ No newline at end of file
dist/components/avatar/avatar.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///./src/components/avatar/_avatar.scss","webpack:///./src/partial/scss/mixins/_icons.scss","webpack:///./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AA0EA;EAhEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;AAXF;AAYE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAVJ;AAWI;EACE;EACA;EACA;AATN;AC5BE;;;;;;;EDwCI;EACA;AAHN;AAUI;EAGE;EACA;EACA;AAVN;AAKI;EAGE;EACA;EACA;AALN;AAAI;EAGE;EACA;EACA;AAAN;AAME;EACE;EACA;AAJJ;AEnDI;EACE;AFqDN;AEhDI;EACE;AFkDN;AExCE;EACE;AF0CJ;AEvCE;EAEE;EACA;EACA;EACA;AFwCJ,C","file":"components/avatar/avatar.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin avatar {\n @include avatar-tokens;\n @include avatar-base;\n @include avatar-sizes;\n @include avatar-change;\n}\n\n@mixin avatar-tokens {\n --avatar-background: var(--color-primary-pastel-02);\n --avatar-color: var(--color-primary-pastel-01);\n --avatar-size: var(--avatar-small);\n --avatar-font-weight: var(--font-weight-bold);\n --avatar-icon-size: var(--avatar-icon-small);\n --avatar-text-size: var(--avatar-text-small);\n --avatar-small: 40px;\n --avatar-medium: 100px;\n --avatar-large: 160px;\n --avatar-icon-small: var(--icon-size-2x);\n --avatar-icon-medium: var(--icon-size-5x);\n --avatar-icon-large: var(--icon-size-8x);\n --avatar-text-small: var(--font-size-scale-up-03);\n --avatar-text-medium: var(--font-size-scale-up-07);\n --avatar-text-large: var(--font-size-scale-up-11);\n}\n\n@mixin avatar-base {\n display: inline-block;\n vertical-align: middle;\n .image {\n background-color: var(--avatar-background);\n border-radius: 50%;\n color: var(--avatar-color);\n display: inline-block;\n font-size: var(--avatar-text-size);\n font-weight: var(--avatar-font-weight);\n overflow: hidden;\n text-align: center;\n height: var(--avatar-size);\n width: var(--avatar-size);\n img {\n height: var(--avatar-size);\n width: var(--avatar-size);\n vertical-align: baseline;\n }\n @include icon {\n --icon-size: var(--avatar-icon-size);\n margin-top: 0.25em;\n }\n }\n}\n\n@mixin avatar-sizes {\n @each $size in small, medium, large {\n &.is-#{$size},\n &.#{$size},\n &[#{$size}] {\n --avatar-size: var(--avatar-#{$size});\n --avatar-icon-size: var(--avatar-icon-#{$size});\n --avatar-text-size: var(--avatar-text-#{$size});\n }\n }\n}\n\n@mixin avatar-change {\n &-action {\n background: transparent;\n border: 0;\n @include hover;\n @include focus;\n }\n}\n\n.#{$prefix}avatar {\n @include avatar;\n}\n","@mixin icon-size($value) {\n @include icon {\n --icon-size: #{$value};\n }\n}\n\n@mixin icon {\n .svg-inline--fa,\n .fa,\n .fab,\n .fad,\n .fal,\n .far,\n .fas {\n @content;\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/avatar/avatar.js 0 → 100644
View file @ eae2f2ee
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 112);
/******/ })
/************************************************************************/
/******/ ({
/***/ 112:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(37);
__webpack_require__(38);
__webpack_require__(113);
__webpack_require__(114);
__webpack_require__(115);
__webpack_require__(116);
__webpack_require__(117);
module.exports = __webpack_require__(118);
/***/ }),
/***/ 113:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-card.html");
/***/ }),
/***/ 114:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-change-card.html");
/***/ }),
/***/ 115:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-foto.html");
/***/ }),
/***/ 116:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-icone.html");
/***/ }),
/***/ 117:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-letra.html");
/***/ }),
/***/ 118:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples/avatar-message.html");
/***/ }),
/***/ 37:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 38:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/avatar/examples.html");
/***/ })
/******/ });
//# sourceMappingURL=avatar.js.map
\ No newline at end of file
dist/components/avatar/avatar.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/avatar/examples/avatar-card.pug","webpack:///./src/components/avatar/examples/avatar-change-card.pug","webpack:///./src/components/avatar/examples/avatar-foto.pug","webpack:///./src/components/avatar/examples/avatar-icone.pug","webpack:///./src/components/avatar/examples/avatar-letra.pug","webpack:///./src/components/avatar/examples/avatar-message.pug","webpack:///./src/components/avatar/_avatar.scss","webpack:///./src/components/avatar/examples.pug"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,gDAAgD,E;;;;;;;;ACAtF;AAAe,oFAAuB,uDAAuD,E;;;;;;;;ACA7F;AAAe,oFAAuB,gDAAgD,E;;;;;;;;ACAtF;AAAe,oFAAuB,iDAAiD,E;;;;;;;;ACAvF;AAAe,oFAAuB,iDAAiD,E;;;;;;;;ACAvF;AAAe,oFAAuB,mDAAmD,E;;;;;;;;ACAzF;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,oCAAoC,E","file":"components/avatar/avatar.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 112);\n","export default __webpack_public_path__ + \"components/avatar/examples/avatar-card.html\";","export default __webpack_public_path__ + \"components/avatar/examples/avatar-change-card.html\";","export default __webpack_public_path__ + \"components/avatar/examples/avatar-foto.html\";","export default __webpack_public_path__ + \"components/avatar/examples/avatar-icone.html\";","export default __webpack_public_path__ + \"components/avatar/examples/avatar-letra.html\";","export default __webpack_public_path__ + \"components/avatar/examples/avatar-message.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/avatar/examples.html\";"],"sourceRoot":""}
\ No newline at end of file
dist/components/avatar/avatar.min.css 0 → 100644
View file @ eae2f2ee
.br-avatar{--avatar-background:var(--color-primary-pastel-02);--avatar-color:var(--color-primary-pastel-01);--avatar-size:var(--avatar-small);--avatar-font-weight:var(--font-weight-bold);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);display:inline-block;vertical-align:middle}.br-avatar .image{background-color:var(--avatar-background);border-radius:50%;color:var(--avatar-color);display:inline-block;font-size:var(--avatar-text-size);font-weight:var(--avatar-font-weight);overflow:hidden;text-align:center}.br-avatar .image,.br-avatar .image img{height:var(--avatar-size);width:var(--avatar-size)}.br-avatar .image img{vertical-align:baseline}.br-avatar .image .fa,.br-avatar .image .fab,.br-avatar .image .fad,.br-avatar .image .fal,.br-avatar .image .far,.br-avatar .image .fas,.br-avatar .image .svg-inline--fa{--icon-size:var(--avatar-icon-size);margin-top:.25em}.br-avatar.is-small,.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.is-large,.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--avatar-icon-size:var(--avatar-icon-large);--avatar-text-size:var(--avatar-text-large)}.br-avatar-action{background:rgba(0,0,0,0);border:0}.br-avatar-action:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-avatar-action:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-avatar-action:focus{outline:none}.br-avatar-action.focus-visible,.br-avatar-action:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}
/*# sourceMappingURL=avatar.min.css.map */
\ No newline at end of file
dist/components/avatar/avatar.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/avatar/_avatar.scss","webpack://./src/partial/scss/mixins/_icons.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AA0EA,WAhEE,kDAAA,CACA,6CAAA,CACA,iCAAA,CACA,4CAAA,CACA,2CAAA,CACA,2CAAA,CACA,mBAAA,CACA,qBAAA,CACA,oBAAA,CACA,uCAAA,CACA,wCAAA,CACA,uCAAA,CACA,gDAAA,CACA,iDAAA,CACA,gDAAA,CAIA,oBAAA,CACA,qBAXF,CAYE,kBACE,yCAAA,CACA,iBAAA,CACA,yBAAA,CACA,oBAAA,CACA,iCAAA,CACA,qCAAA,CACA,eAAA,CACA,iBARJ,CAWI,wCAFA,yBAAA,CACA,wBALJ,CAMI,sBAGE,uBATN,CC5BE,2KDwCI,mCAAA,CACA,gBAHN,CAUI,uDAGE,iCAAA,CACA,2CAAA,CACA,2CAVN,CAKI,0DAGE,kCAAA,CACA,4CAAA,CACA,4CALN,CAAI,uDAGE,iCAAA,CACA,2CAAA,CACA,2CAAN,CAME,kBACE,wBAAA,CACA,QAJJ,CEnDI,uCACE,qHFqDN,CEhDI,wCACE,yHFkDN,CExCE,wBACE,YF0CJ,CEvCE,gEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCFwCJ","file":"avatar.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin avatar {\n @include avatar-tokens;\n @include avatar-base;\n @include avatar-sizes;\n @include avatar-change;\n}\n\n@mixin avatar-tokens {\n --avatar-background: var(--color-primary-pastel-02);\n --avatar-color: var(--color-primary-pastel-01);\n --avatar-size: var(--avatar-small);\n --avatar-font-weight: var(--font-weight-bold);\n --avatar-icon-size: var(--avatar-icon-small);\n --avatar-text-size: var(--avatar-text-small);\n --avatar-small: 40px;\n --avatar-medium: 100px;\n --avatar-large: 160px;\n --avatar-icon-small: var(--icon-size-2x);\n --avatar-icon-medium: var(--icon-size-5x);\n --avatar-icon-large: var(--icon-size-8x);\n --avatar-text-small: var(--font-size-scale-up-03);\n --avatar-text-medium: var(--font-size-scale-up-07);\n --avatar-text-large: var(--font-size-scale-up-11);\n}\n\n@mixin avatar-base {\n display: inline-block;\n vertical-align: middle;\n .image {\n background-color: var(--avatar-background);\n border-radius: 50%;\n color: var(--avatar-color);\n display: inline-block;\n font-size: var(--avatar-text-size);\n font-weight: var(--avatar-font-weight);\n overflow: hidden;\n text-align: center;\n height: var(--avatar-size);\n width: var(--avatar-size);\n img {\n height: var(--avatar-size);\n width: var(--avatar-size);\n vertical-align: baseline;\n }\n @include icon {\n --icon-size: var(--avatar-icon-size);\n margin-top: 0.25em;\n }\n }\n}\n\n@mixin avatar-sizes {\n @each $size in small, medium, large {\n &.is-#{$size},\n &.#{$size},\n &[#{$size}] {\n --avatar-size: var(--avatar-#{$size});\n --avatar-icon-size: var(--avatar-icon-#{$size});\n --avatar-text-size: var(--avatar-text-#{$size});\n }\n }\n}\n\n@mixin avatar-change {\n &-action {\n background: transparent;\n border: 0;\n @include hover;\n @include focus;\n }\n}\n\n.#{$prefix}avatar {\n @include avatar;\n}\n","@mixin icon-size($value) {\n @include icon {\n --icon-size: #{$value};\n }\n}\n\n@mixin icon {\n .svg-inline--fa,\n .fa,\n .fab,\n .fad,\n .fal,\n .far,\n .fas {\n @content;\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/avatar/avatar.min.js 0 → 100644
View file @ eae2f2ee
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=119)}({119:function(e,t,r){r(37),e.exports=r(38)},37:function(e,t,r){"use strict";r.r(t)},38:function(e,t,r){"use strict";r.r(t),t.default=r.p+"components/avatar/examples.html"}});
//# sourceMappingURL=avatar.min.js.map
\ No newline at end of file
dist/components/avatar/avatar.min.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/avatar/_avatar.scss","webpack:///./src/components/avatar/examples.pug"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,K,6EClFrD,Q,gCCAA,OAAe,cAA0B","file":"components/avatar/avatar.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 119);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/avatar/examples.html\";"],"sourceRoot":""}
\ No newline at end of file
dist/components/avatar/avatar.min.min.css 0 → 100644
View file @ eae2f2ee
.br-avatar{--avatar-background:var(--color-primary-pastel-02);--avatar-color:var(--color-primary-pastel-01);--avatar-size:var(--avatar-small);--avatar-font-weight:var(--font-weight-bold);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);display:inline-block;vertical-align:middle}.br-avatar .image{background-color:var(--avatar-background);border-radius:50%;color:var(--avatar-color);display:inline-block;font-size:var(--avatar-text-size);font-weight:var(--avatar-font-weight);overflow:hidden;text-align:center}.br-avatar .image,.br-avatar .image img{height:var(--avatar-size);width:var(--avatar-size)}.br-avatar .image img{vertical-align:baseline}.br-avatar .image .fa,.br-avatar .image .fab,.br-avatar .image .fad,.br-avatar .image .fal,.br-avatar .image .far,.br-avatar .image .fas,.br-avatar .image .svg-inline--fa{--icon-size:var(--avatar-icon-size);margin-top:.25em}.br-avatar.is-small,.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.is-large,.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--avatar-icon-size:var(--avatar-icon-large);--avatar-text-size:var(--avatar-text-large)}.br-avatar-action{background:rgba(0,0,0,0);border:0}.br-avatar-action:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-avatar-action:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-avatar-action:focus{outline:none}.br-avatar-action.focus-visible,.br-avatar-action:focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}
/*# sourceMappingURL=avatar.min.min.css.map */
\ No newline at end of file
dist/components/avatar/avatar.min.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/avatar/_avatar.scss","webpack://./src/partial/scss/mixins/_icons.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AA0EA,WAhEE,kDAAA,CACA,6CAAA,CACA,iCAAA,CACA,4CAAA,CACA,2CAAA,CACA,2CAAA,CACA,mBAAA,CACA,qBAAA,CACA,oBAAA,CACA,uCAAA,CACA,wCAAA,CACA,uCAAA,CACA,gDAAA,CACA,iDAAA,CACA,gDAAA,CAIA,oBAAA,CACA,qBAXF,CAYE,kBACE,yCAAA,CACA,iBAAA,CACA,yBAAA,CACA,oBAAA,CACA,iCAAA,CACA,qCAAA,CACA,eAAA,CACA,iBARJ,CAWI,wCAFA,yBAAA,CACA,wBALJ,CAMI,sBAGE,uBATN,CC5BE,2KDwCI,mCAAA,CACA,gBAHN,CAUI,uDAGE,iCAAA,CACA,2CAAA,CACA,2CAVN,CAKI,0DAGE,kCAAA,CACA,4CAAA,CACA,4CALN,CAAI,uDAGE,iCAAA,CACA,2CAAA,CACA,2CAAN,CAME,kBACE,wBAAA,CACA,QAJJ,CEnDI,uCACE,qHFqDN,CEhDI,wCACE,yHFkDN,CExCE,wBACE,YF0CJ,CEvCE,gEAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCFwCJ","file":"avatar.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin avatar {\n @include avatar-tokens;\n @include avatar-base;\n @include avatar-sizes;\n @include avatar-change;\n}\n\n@mixin avatar-tokens {\n --avatar-background: var(--color-primary-pastel-02);\n --avatar-color: var(--color-primary-pastel-01);\n --avatar-size: var(--avatar-small);\n --avatar-font-weight: var(--font-weight-bold);\n --avatar-icon-size: var(--avatar-icon-small);\n --avatar-text-size: var(--avatar-text-small);\n --avatar-small: 40px;\n --avatar-medium: 100px;\n --avatar-large: 160px;\n --avatar-icon-small: var(--icon-size-2x);\n --avatar-icon-medium: var(--icon-size-5x);\n --avatar-icon-large: var(--icon-size-8x);\n --avatar-text-small: var(--font-size-scale-up-03);\n --avatar-text-medium: var(--font-size-scale-up-07);\n --avatar-text-large: var(--font-size-scale-up-11);\n}\n\n@mixin avatar-base {\n display: inline-block;\n vertical-align: middle;\n .image {\n background-color: var(--avatar-background);\n border-radius: 50%;\n color: var(--avatar-color);\n display: inline-block;\n font-size: var(--avatar-text-size);\n font-weight: var(--avatar-font-weight);\n overflow: hidden;\n text-align: center;\n height: var(--avatar-size);\n width: var(--avatar-size);\n img {\n height: var(--avatar-size);\n width: var(--avatar-size);\n vertical-align: baseline;\n }\n @include icon {\n --icon-size: var(--avatar-icon-size);\n margin-top: 0.25em;\n }\n }\n}\n\n@mixin avatar-sizes {\n @each $size in small, medium, large {\n &.is-#{$size},\n &.#{$size},\n &[#{$size}] {\n --avatar-size: var(--avatar-#{$size});\n --avatar-icon-size: var(--avatar-icon-#{$size});\n --avatar-text-size: var(--avatar-text-#{$size});\n }\n }\n}\n\n@mixin avatar-change {\n &-action {\n background: transparent;\n border: 0;\n @include hover;\n @include focus;\n }\n}\n\n.#{$prefix}avatar {\n @include avatar;\n}\n","@mixin icon-size($value) {\n @include icon {\n --icon-size: #{$value};\n }\n}\n\n@mixin icon {\n .svg-inline--fa,\n .fa,\n .fab,\n .fad,\n .fal,\n .far,\n .fas {\n @content;\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/avatar/examples.html 0 → 100644
View file @ eae2f2ee
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Avatar</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-auto ml-1 mt-5">
<p class="h5">Avatar Icônico</p><span class="br-avatar" title="Fulano da Silva"><span class="image"><i class="fas fa-user" aria-hidden="true"></i></span></span>
</div>
<div class="col-auto ml-1 mt-5">
<p class="h5">Avatar Fotográfico</p><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
</div>
<div class="col-auto ml-1 mt-5">
<p class="h5">Avatar Letra</p><span class="br-avatar" title="Zé da Silva"><span class="image bg-support-01 text-secondary-01">z</span></span>
</div>
</div>
<p class="h5 mt-5">Em telas de Chat</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="br-card">
<div class="front">
<div class="content">
<div class="d-flex align-items-center"><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="flex-fill mx-3">
<div class="text-primary-default text-up-01">Maria Amorim</div><span>UX Designer</span>
</div>
<div>
<button class="br-button circle" type="button" aria-label="Ver telefone"><i class="fas fa-phone" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Enviar comentário"><i class="fas fa-comment" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="br-card">
<div class="front">
<div class="content">
<div class="d-flex"><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="flex-fill ml-3">
<div class="br-textarea">
<textarea aria-label="Digite uma informação se o label estiver vazio" placeholder="Digite seu comentário" id="comments"></textarea>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row justify-content-end">
<div class="col col-xs-12 text-right">
<button class="br-button" type="button">Cancelar
</button>
<button class="br-button primary" type="button">Enviar
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="br-card">
<div class="front">
<div class="content">
<div class="text-center">
<button class="br-avatar-action" type="button" data-toggle="avatar" data-target="#avatar-choose" data-visible="data-visible" aria-label="Escolher Avatar"><span class="br-avatar large" title="Fulano da Silva"><span class="image"><i class="fas fa-user" aria-hidden="true"></i></span></span>
</button>
</div>
<p class="h4 text-center">Clique na imagem acima para trocar sua foto no perfil.</p><span class="feedback info" role="alert"><i class="fas fa-info-circle" aria-hidden="true"></i>Os arquivos devem ser nos formatos PNG ou JPG, e ter no máximo 100MB</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../dsgov.js"></script>
</body>
</html>
\ No newline at end of file
dist/components/avatar/examples/avatar-card.html 0 → 100644
View file @ eae2f2ee
<div class="br-card">
<div class="front">
<div class="content">
<div class="d-flex align-items-center"><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="flex-fill mx-3">
<div class="text-primary-default text-up-01">Maria Amorim</div><span>UX Designer</span>
</div>
<div>
<button class="br-button circle" type="button" aria-label="Ver telefone"><i class="fas fa-phone" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Enviar comentário"><i class="fas fa-comment" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
dist/components/avatar/examples/avatar-change-card.html 0 → 100644
View file @ eae2f2ee
<div class="br-card">
<div class="front">
<div class="content">
<div class="text-center">
<button class="br-avatar-action" type="button" data-toggle="avatar" data-target="#avatar-choose" data-visible="data-visible" aria-label="Escolher Avatar"><span class="br-avatar large" title="Fulano da Silva"><span class="image"><i class="fas fa-user" aria-hidden="true"></i></span></span>
</button>
</div>
<p class="h4 text-center">Clique na imagem acima para trocar sua foto no perfil.</p><span class="feedback info" role="alert"><i class="fas fa-info-circle" aria-hidden="true"></i>Os arquivos devem ser nos formatos PNG ou JPG, e ter no máximo 100MB</span>
</div>
</div>
</div>
\ No newline at end of file
dist/components/avatar/examples/avatar-foto.html 0 → 100644
View file @ eae2f2ee
<span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
\ No newline at end of file
dist/components/avatar/examples/avatar-icone.html 0 → 100644
View file @ eae2f2ee
<span class="br-avatar" title="Fulano da Silva"><span class="image"><i class="fas fa-user" aria-hidden="true"></i></span></span>
\ No newline at end of file
dist/components/avatar/examples/avatar-letra.html 0 → 100644
View file @ eae2f2ee
<span class="br-avatar" title="Zé da Silva"><span class="image bg-support-01 text-secondary-01">w</span></span>
\ No newline at end of file
dist/components/avatar/examples/avatar-message.html 0 → 100644
View file @ eae2f2ee
<div class="br-card">
<div class="front">
<div class="content">
<div class="d-flex"><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="flex-fill ml-3">
<div class="br-textarea">
<textarea aria-label="Digite uma informação se o label estiver vazio" placeholder="Digite seu comentário" id="comments"></textarea>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row justify-content-end">
<div class="col col-xs-12 text-right">
<button class="br-button" type="button">Cancelar
</button>
<button class="br-button primary" type="button">Enviar
</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.css 0 → 100644
View file @ eae2f2ee
.br-breadcrumb {
display: inline-grid;
position: relative;
}
.br-breadcrumb .crumb-list {
align-items: center;
border: none;
display: flex;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
list-style: none;
}
.br-breadcrumb .crumb-list .crumb {
align-items: center;
display: flex;
height: var(--spacing-scale-5x);
margin: auto var(--spacing-scale-half);
}
.br-breadcrumb .crumb-list .crumb .icon {
color: var(--color-secondary-04);
font-size: var(--icon-size-sm);
}
.br-breadcrumb .crumb-list .crumb .icon.fas.fa-chevron-right {
margin-right: -4px;
}
.br-breadcrumb .crumb-list .crumb a {
cursor: pointer;
font-size: var(--font-size-scale-down-01);
font-weight: var(--font-weight-medium);
padding: 0;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.br-breadcrumb .crumb-list .crumb a:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-breadcrumb .crumb-list .crumb a:not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-breadcrumb .crumb-list .crumb.home, .br-breadcrumb .crumb-list .crumb.menu-mobil {
--focus-offset: calc(var(--spacing-scale-half) * -1);
align-items: center;
display: flex;
margin-right: 0;
}
.br-breadcrumb .crumb-list .crumb.home .icon, .br-breadcrumb .crumb-list .crumb.menu-mobil .icon {
color: var(--interactive);
position: static;
}
.br-breadcrumb .crumb-list .crumb.home .icon.fas.fa-chevron-right, .br-breadcrumb .crumb-list .crumb.menu-mobil .icon.fas.fa-chevron-right {
color: var(--color-secondary-04);
margin-right: -8px;
}
.br-breadcrumb .crumb-list .crumb[data-active=active] span {
color: var(--color-secondary-08);
cursor: default;
font-size: var(--font-size-scale-down-01);
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.br-breadcrumb .br-card {
position: absolute;
top: var(--spacing-scale-7x);
left: var(--spacing-scale-9x);
width: fit-content;
z-index: 1;
}
.br-breadcrumb .br-card .front .content {
padding: 0;
}
.br-breadcrumb .br-card .front .content .br-list .br-item {
cursor: pointer;
}
.br-breadcrumb .br-card .front .content .br-list .br-item a {
display: inline-block;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
@media (max-width: 574.98px) {
.br-breadcrumb .crumb-list .menu-mobil > .icon {
display: none;
}
.br-breadcrumb .br-card {
left: var(--spacing-scale-base);
}
}
@media (max-width: 991.98px) {
.br-breadcrumb .crumb-list .crumb a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-width: 180px;
}
.br-breadcrumb .crumb-list .crumb.menu-mobil,
.br-breadcrumb .crumb-list .crumb.menu-mobil + .crumb,
.br-breadcrumb .crumb-list .crumb.home + .crumb {
display: flex;
}
}
/*# sourceMappingURL=breadcrumb.css.map*/
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///./src/components/breadcrumb/_breadcrumb.scss","webpack:///./src/partial/scss/mixins/_states.scss","webpack:///./node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAEA;EACE;EACA;AADF;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AADJ;AAGI;EACE;EACA;EACA;EACA;AADN;AAEM;EACE;EACA;AAAR;AACQ;EACE;AACV;AAEM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;ACxBI;EACE;AD0BN;ACrBI;EACE;ADuBN;AAFM;EAEE;EACA;EACA;EACA;AAGR;AAFQ;EACE;EACA;AAIV;AAHU;EACE;EACA;AAKZ;AACQ;EACE;EACA;EACA;EACA;EACA;AACV;AAIE;EACE;EACA;EACA;EACA;EACA;AAFJ;AAIM;EACE;AAFR;AAIU;EACE;AAFZ;AAGY;EACE;EACA;EACA;EACA;EACA;AADd;ACvEI;EACE;ADyEN;ACpEI;EACE;ADsEN;AEjBI;EFuBE;IACE;EAHN;EAME;IACE;EAJJ;AACF;AEzBI;EFiCA;IACE;IACA;IACA;IACA;IACA;EALJ;EAOE;;;IAGE;EALJ;AACF,C","file":"components/breadcrumb/breadcrumb.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}breadcrumb {\n display: inline-grid;\n position: relative;\n // Página inicial\n .crumb-list {\n align-items: center;\n border: none;\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n // Cada item\n .crumb {\n align-items: center;\n display: flex;\n height: v(spacing-scale-5x);\n margin: auto var(--spacing-scale-half);\n .icon {\n color: v(color-secondary-04);\n font-size: v(icon-size-sm);\n &.fas.fa-chevron-right {\n margin-right: -4px;\n }\n }\n a {\n cursor: pointer;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n padding: 0;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 180px;\n @include hover;\n }\n\n &.home,\n &.menu-mobil {\n --focus-offset: calc(var(--spacing-scale-half) * -1);\n align-items: center;\n display: flex;\n margin-right: 0;\n .icon {\n color: var(--interactive);\n position: static;\n &.fas.fa-chevron-right {\n color: var(--color-secondary-04);\n margin-right: -8px;\n }\n }\n }\n // Item ativo\n &[data-active=\"active\"] {\n span {\n color: v(color-secondary-08);\n cursor: default;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n white-space: nowrap;\n }\n }\n }\n }\n .br-card {\n position: absolute;\n top: v(spacing-scale-7x);\n left: v(spacing-scale-9x);\n width: fit-content;\n z-index: 1;\n .front {\n .content {\n padding: 0;\n .br-list {\n .br-item {\n cursor: pointer;\n a {\n display: inline-block;\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @include hover;\n }\n }\n }\n }\n }\n\n @include media-breakpoint-down(xs) {\n .crumb-list .menu-mobil > {\n .icon {\n display: none;\n }\n }\n .br-card {\n left: v(spacing-scale-base);\n }\n }\n\n @include media-breakpoint-down(sm) {\n .crumb-list .crumb a {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n max-width: 180px;\n }\n .crumb-list .crumb.menu-mobil,\n .crumb-list .crumb.menu-mobil + .crumb,\n .crumb-list .crumb.home + .crumb {\n display: flex;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.js 0 → 100644
View file @ eae2f2ee
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 120);
/******/ })
/************************************************************************/
/******/ ({
/***/ 120:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(8);
__webpack_require__(39);
__webpack_require__(40);
module.exports = __webpack_require__(121);
/***/ }),
/***/ 121:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/breadcrumb/examples/breadcrumb-default.html");
/***/ }),
/***/ 39:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 40:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/breadcrumb/examples.html");
/***/ }),
/***/ 8:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
class BRBreadcrumb {
constructor(name, component) {
this.name = name
this.component = component
this._setBehavior()
}
_setBehavior() {
this._setView()
window.addEventListener('resize', () => {
this._setView()
})
window.document.addEventListener('click', (event) => {
if (
!this.component.contains(event.target) &&
this.component.querySelector('.br-card')
) {
this.component.querySelector('.br-card').remove()
}
})
}
_setView() {
this._reset()
for (const crumbList of this.component.querySelectorAll('.crumb-list')) {
const crumbs = crumbList.querySelectorAll('.crumb:not([data-active])')
if (window.innerWidth < 575) {
crumbs.forEach((crumb) => {
crumb.classList.add('d-none')
})
this._insertExpandButton()
} else {
if (
crumbList.scrollWidth > crumbList.offsetWidth ||
crumbs.length > 5
) {
crumbs.forEach((crumb, index) => {
if (index > 0 && index < crumbs.length - 1) {
crumb.classList.add('d-none')
}
})
this._insertExpandButton()
}
}
}
}
_insertExpandButton() {
const crumb = this._createCrumb()
const crumbList = this.component.querySelector('.crumb-list')
const crumbs = crumbList.querySelectorAll('.crumb')
crumbList.insertBefore(crumb, crumbs[1])
}
_reset() {
this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {
if (crumb.classList.contains('menu-mobil')) {
crumb.remove()
} else {
crumb.classList.remove('d-none')
}
})
}
_createCrumb() {
const crumb = document.createElement('li')
crumb.classList.add('crumb', 'menu-mobil')
crumb.setAttribute('data-toggle', 'dropdown')
const button = document.createElement('button')
button.classList.add('br-button', 'circle')
const span = document.createElement('span')
span.classList.add('sr-only')
span.innerHTML = 'Botão Menu'
const folderIcon = document.createElement('i')
folderIcon.classList.add('icon', 'fas', 'fa-folder-plus')
const chevronIcon = document.createElement('i')
chevronIcon.classList.add('icon', 'fas', 'fa-chevron-right')
crumb.appendChild(chevronIcon)
crumb.appendChild(button)
button.appendChild(span)
button.appendChild(folderIcon)
crumb.addEventListener('click', () => {
let card = this.component.querySelector('.br-card')
if (card) {
card.remove()
} else {
card = this._createList()
this.component.appendChild(card)
}
})
return crumb
}
_createList() {
const card = document.createElement('div')
card.classList.add('br-card')
const front = document.createElement('div')
front.classList.add('front')
const content = document.createElement('div')
content.classList.add('content')
const list = document.createElement('div')
list.classList.add('br-list')
card.appendChild(front)
front.appendChild(content)
content.appendChild(list)
this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {
if (crumb.classList.contains('d-none')) {
const item = document.createElement('div')
item.classList.add('br-item', 'py-3')
const row = document.createElement('div')
row.classList.add('row', 'align-items-center')
const col = document.createElement('div')
col.classList.add('col')
if (!crumb.classList.contains('home')) {
col.appendChild(crumb.querySelector('a').cloneNode(true))
row.appendChild(col)
item.appendChild(row)
list.appendChild(item)
}
}
})
return card
}
}
const breadcrumbList = []
for (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {
breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))
}
/* harmony default export */ __webpack_exports__["default"] = (BRBreadcrumb);
/***/ })
/******/ });
//# sourceMappingURL=breadcrumb.js.map
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/breadcrumb/examples/breadcrumb-default.pug","webpack:///./src/components/breadcrumb/_breadcrumb.scss","webpack:///./src/components/breadcrumb/examples.pug","webpack:///./src/components/breadcrumb/breadcrumb.js"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,2DAA2D,E;;;;;;;;ACAjG;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,wCAAwC,E;;;;;;;;ACA9E;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,KAAK;;AAEL;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACe,2EAAY","file":"components/breadcrumb/breadcrumb.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 120);\n","export default __webpack_public_path__ + \"components/breadcrumb/examples/breadcrumb-default.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/breadcrumb/examples.html\";","class BRBreadcrumb {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n this._setView()\n window.addEventListener('resize', () => {\n this._setView()\n })\n window.document.addEventListener('click', (event) => {\n if (\n !this.component.contains(event.target) &&\n this.component.querySelector('.br-card')\n ) {\n this.component.querySelector('.br-card').remove()\n }\n })\n }\n\n _setView() {\n this._reset()\n for (const crumbList of this.component.querySelectorAll('.crumb-list')) {\n const crumbs = crumbList.querySelectorAll('.crumb:not([data-active])')\n if (window.innerWidth < 575) {\n crumbs.forEach((crumb) => {\n crumb.classList.add('d-none')\n })\n this._insertExpandButton()\n } else {\n if (\n crumbList.scrollWidth > crumbList.offsetWidth ||\n crumbs.length > 5\n ) {\n crumbs.forEach((crumb, index) => {\n if (index > 0 && index < crumbs.length - 1) {\n crumb.classList.add('d-none')\n }\n })\n this._insertExpandButton()\n }\n }\n }\n }\n\n _insertExpandButton() {\n const crumb = this._createCrumb()\n const crumbList = this.component.querySelector('.crumb-list')\n const crumbs = crumbList.querySelectorAll('.crumb')\n crumbList.insertBefore(crumb, crumbs[1])\n }\n\n _reset() {\n this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {\n if (crumb.classList.contains('menu-mobil')) {\n crumb.remove()\n } else {\n crumb.classList.remove('d-none')\n }\n })\n }\n\n _createCrumb() {\n const crumb = document.createElement('li')\n crumb.classList.add('crumb', 'menu-mobil')\n crumb.setAttribute('data-toggle', 'dropdown')\n\n const button = document.createElement('button')\n button.classList.add('br-button', 'circle')\n\n const span = document.createElement('span')\n span.classList.add('sr-only')\n span.innerHTML = 'Botão Menu'\n\n const folderIcon = document.createElement('i')\n folderIcon.classList.add('icon', 'fas', 'fa-folder-plus')\n\n const chevronIcon = document.createElement('i')\n chevronIcon.classList.add('icon', 'fas', 'fa-chevron-right')\n\n crumb.appendChild(chevronIcon)\n crumb.appendChild(button)\n button.appendChild(span)\n button.appendChild(folderIcon)\n\n crumb.addEventListener('click', () => {\n let card = this.component.querySelector('.br-card')\n if (card) {\n card.remove()\n } else {\n card = this._createList()\n this.component.appendChild(card)\n }\n })\n\n return crumb\n }\n\n _createList() {\n const card = document.createElement('div')\n card.classList.add('br-card')\n\n const front = document.createElement('div')\n front.classList.add('front')\n\n const content = document.createElement('div')\n content.classList.add('content')\n\n const list = document.createElement('div')\n list.classList.add('br-list')\n\n card.appendChild(front)\n front.appendChild(content)\n content.appendChild(list)\n\n this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {\n if (crumb.classList.contains('d-none')) {\n const item = document.createElement('div')\n item.classList.add('br-item', 'py-3')\n\n const row = document.createElement('div')\n row.classList.add('row', 'align-items-center')\n\n const col = document.createElement('div')\n col.classList.add('col')\n if (!crumb.classList.contains('home')) {\n col.appendChild(crumb.querySelector('a').cloneNode(true))\n row.appendChild(col)\n item.appendChild(row)\n list.appendChild(item)\n }\n }\n })\n\n return card\n }\n}\n\nconst breadcrumbList = []\nfor (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {\n breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))\n}\nexport default BRBreadcrumb\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.css 0 → 100644
View file @ eae2f2ee
.br-breadcrumb{display:inline-grid;position:relative}.br-breadcrumb .crumb-list{align-items:center;border:none;display:flex;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;list-style:none}.br-breadcrumb .crumb-list .crumb{align-items:center;display:flex;height:var(--spacing-scale-5x);margin:auto var(--spacing-scale-half)}.br-breadcrumb .crumb-list .crumb .icon{color:var(--color-secondary-04);font-size:var(--icon-size-sm)}.br-breadcrumb .crumb-list .crumb .icon.fas.fa-chevron-right{margin-right:-4px}.br-breadcrumb .crumb-list .crumb a{cursor:pointer;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-medium);padding:0;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.br-breadcrumb .crumb-list .crumb a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-breadcrumb .crumb-list .crumb a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-breadcrumb .crumb-list .crumb.home,.br-breadcrumb .crumb-list .crumb.menu-mobil{--focus-offset:calc(var(--spacing-scale-half)*-1);align-items:center;display:flex;margin-right:0}.br-breadcrumb .crumb-list .crumb.home .icon,.br-breadcrumb .crumb-list .crumb.menu-mobil .icon{color:var(--interactive);position:static}.br-breadcrumb .crumb-list .crumb.home .icon.fas.fa-chevron-right,.br-breadcrumb .crumb-list .crumb.menu-mobil .icon.fas.fa-chevron-right{color:var(--color-secondary-04);margin-right:-8px}.br-breadcrumb .crumb-list .crumb[data-active=active] span{color:var(--color-secondary-08);cursor:default;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-medium);white-space:nowrap}.br-breadcrumb .br-card{position:absolute;top:var(--spacing-scale-7x);left:var(--spacing-scale-9x);width:fit-content;z-index:1}.br-breadcrumb .br-card .front .content{padding:0}.br-breadcrumb .br-card .front .content .br-list .br-item{cursor:pointer}.br-breadcrumb .br-card .front .content .br-list .br-item a{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}@media (max-width:574.98px){.br-breadcrumb .crumb-list .menu-mobil>.icon{display:none}.br-breadcrumb .br-card{left:var(--spacing-scale-base)}}@media (max-width:991.98px){.br-breadcrumb .crumb-list .crumb a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:180px}.br-breadcrumb .crumb-list .crumb.home+.crumb,.br-breadcrumb .crumb-list .crumb.menu-mobil,.br-breadcrumb .crumb-list .crumb.menu-mobil+.crumb{display:flex}}
/*# sourceMappingURL=breadcrumb.min.css.map */
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/breadcrumb/_breadcrumb.scss","webpack://./src/partial/scss/mixins/_states.scss","webpack://./node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAEA,eACE,mBAAA,CACA,iBADF,CAGE,2BACE,kBAAA,CACA,WAAA,CACA,YAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAAA,CACA,eADJ,CAGI,kCACE,kBAAA,CACA,YAAA,CACA,8BAAA,CACA,qCADN,CAEM,wCACE,+BAAA,CACA,6BAAR,CACQ,6DACE,iBACV,CAEM,oCACE,cAAA,CACA,wCAAA,CACA,qCAAA,CACA,SAAA,CACA,oBAAA,CACA,kBAAA,CACA,eAAA,CACA,sBAAA,CACA,eAAR,CCxBI,yDACE,qHD0BN,CCrBI,0DACE,yHDuBN,CAFM,oFAEE,iDAAA,CACA,kBAAA,CACA,YAAA,CACA,cAGR,CAFQ,gGACE,wBAAA,CACA,eAIV,CAHU,0IACE,+BAAA,CACA,iBAKZ,CACQ,2DACE,+BAAA,CACA,cAAA,CACA,wCAAA,CACA,qCAAA,CACA,kBACV,CAIE,wBACE,iBAAA,CACA,2BAAA,CACA,4BAAA,CACA,iBAAA,CACA,SAFJ,CAIM,wCACE,SAFR,CAIU,0DACE,cAFZ,CAGY,4DACE,oBAAA,CACA,eAAA,CACA,eAAA,CACA,sBAAA,CACA,kBADd,CCvEI,+EACE,qHDyEN,CCpEI,gFACE,yHDsEN,CEjBI,4BFuBE,6CACE,YAHN,CAME,wBACE,8BAJJ,CACF,CEzBI,4BFiCA,oCACE,eAAA,CACA,sBAAA,CACA,kBAAA,CACA,aAAA,CACA,eALJ,CAOE,+IAGE,YALJ,CACF","file":"breadcrumb.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}breadcrumb {\n display: inline-grid;\n position: relative;\n // Página inicial\n .crumb-list {\n align-items: center;\n border: none;\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n // Cada item\n .crumb {\n align-items: center;\n display: flex;\n height: v(spacing-scale-5x);\n margin: auto var(--spacing-scale-half);\n .icon {\n color: v(color-secondary-04);\n font-size: v(icon-size-sm);\n &.fas.fa-chevron-right {\n margin-right: -4px;\n }\n }\n a {\n cursor: pointer;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n padding: 0;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 180px;\n @include hover;\n }\n\n &.home,\n &.menu-mobil {\n --focus-offset: calc(var(--spacing-scale-half) * -1);\n align-items: center;\n display: flex;\n margin-right: 0;\n .icon {\n color: var(--interactive);\n position: static;\n &.fas.fa-chevron-right {\n color: var(--color-secondary-04);\n margin-right: -8px;\n }\n }\n }\n // Item ativo\n &[data-active=\"active\"] {\n span {\n color: v(color-secondary-08);\n cursor: default;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n white-space: nowrap;\n }\n }\n }\n }\n .br-card {\n position: absolute;\n top: v(spacing-scale-7x);\n left: v(spacing-scale-9x);\n width: fit-content;\n z-index: 1;\n .front {\n .content {\n padding: 0;\n .br-list {\n .br-item {\n cursor: pointer;\n a {\n display: inline-block;\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @include hover;\n }\n }\n }\n }\n }\n\n @include media-breakpoint-down(xs) {\n .crumb-list .menu-mobil > {\n .icon {\n display: none;\n }\n }\n .br-card {\n left: v(spacing-scale-base);\n }\n }\n\n @include media-breakpoint-down(sm) {\n .crumb-list .crumb a {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n max-width: 180px;\n }\n .crumb-list .crumb.menu-mobil,\n .crumb-list .crumb.menu-mobil + .crumb,\n .crumb-list .crumb.home + .crumb {\n display: flex;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n"]}
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.js 0 → 100644
View file @ eae2f2ee
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=122)}({122:function(e,t,n){n(8),n(39),e.exports=n(40)},39:function(e,t,n){"use strict";n.r(t)},40:function(e,t,n){"use strict";n.r(t),t.default=n.p+"components/breadcrumb/examples.html"},8:function(e,t,n){"use strict";n.r(t);class r{constructor(e,t){this.name=e,this.component=t,this._setBehavior()}_setBehavior(){this._setView(),window.addEventListener("resize",(()=>{this._setView()})),window.document.addEventListener("click",(e=>{!this.component.contains(e.target)&&this.component.querySelector(".br-card")&&this.component.querySelector(".br-card").remove()}))}_setView(){this._reset();for(const e of this.component.querySelectorAll(".crumb-list")){const t=e.querySelectorAll(".crumb:not([data-active])");window.innerWidth<575?(t.forEach((e=>{e.classList.add("d-none")})),this._insertExpandButton()):(e.scrollWidth>e.offsetWidth||t.length>5)&&(t.forEach(((e,n)=>{n>0&&n<t.length-1&&e.classList.add("d-none")})),this._insertExpandButton())}}_insertExpandButton(){const e=this._createCrumb(),t=this.component.querySelector(".crumb-list"),n=t.querySelectorAll(".crumb");t.insertBefore(e,n[1])}_reset(){this.component.querySelectorAll(".crumb-list .crumb").forEach((e=>{e.classList.contains("menu-mobil")?e.remove():e.classList.remove("d-none")}))}_createCrumb(){const e=document.createElement("li");e.classList.add("crumb","menu-mobil"),e.setAttribute("data-toggle","dropdown");const t=document.createElement("button");t.classList.add("br-button","circle");const n=document.createElement("span");n.classList.add("sr-only"),n.innerHTML="Botão Menu";const r=document.createElement("i");r.classList.add("icon","fas","fa-folder-plus");const o=document.createElement("i");return o.classList.add("icon","fas","fa-chevron-right"),e.appendChild(o),e.appendChild(t),t.appendChild(n),t.appendChild(r),e.addEventListener("click",(()=>{let e=this.component.querySelector(".br-card");e?e.remove():(e=this._createList(),this.component.appendChild(e))})),e}_createList(){const e=document.createElement("div");e.classList.add("br-card");const t=document.createElement("div");t.classList.add("front");const n=document.createElement("div");n.classList.add("content");const r=document.createElement("div");return r.classList.add("br-list"),e.appendChild(t),t.appendChild(n),n.appendChild(r),this.component.querySelectorAll(".crumb-list .crumb").forEach((e=>{if(e.classList.contains("d-none")){const t=document.createElement("div");t.classList.add("br-item","py-3");const n=document.createElement("div");n.classList.add("row","align-items-center");const o=document.createElement("div");o.classList.add("col"),e.classList.contains("home")||(o.appendChild(e.querySelector("a").cloneNode(!0)),n.appendChild(o),t.appendChild(n),r.appendChild(t))}})),e}}const o=[];for(const e of window.document.querySelectorAll(".br-breadcrumb"))o.push(new r("br-breadcrumb",e));t.default=r}});
//# sourceMappingURL=breadcrumb.min.js.map
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/breadcrumb/_breadcrumb.scss","webpack:///./src/components/breadcrumb/examples.pug","webpack:///./src/components/breadcrumb/breadcrumb.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","BRBreadcrumb","component","this","_setBehavior","_setView","window","addEventListener","document","event","contains","target","querySelector","remove","_reset","crumbList","querySelectorAll","crumbs","innerWidth","forEach","crumb","classList","add","_insertExpandButton","scrollWidth","offsetWidth","length","index","_createCrumb","insertBefore","createElement","setAttribute","button","span","innerHTML","folderIcon","chevronIcon","appendChild","card","_createList","front","content","list","item","row","col","cloneNode","breadcrumbList","brBreadcrumb","push"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,K,kFClFrD,Q,gCCAA,OAAe,cAA0B,uC,+BCAzC,aAAMC,EACJ,YAAYzB,EAAM0B,GAChBC,KAAK3B,KAAOA,EACZ2B,KAAKD,UAAYA,EACjBC,KAAKC,eAGP,eACED,KAAKE,WACLC,OAAOC,iBAAiB,UAAU,KAChCJ,KAAKE,cAEPC,OAAOE,SAASD,iBAAiB,SAAUE,KAEtCN,KAAKD,UAAUQ,SAASD,EAAME,SAC/BR,KAAKD,UAAUU,cAAc,aAE7BT,KAAKD,UAAUU,cAAc,YAAYC,YAK/C,WACEV,KAAKW,SACL,IAAK,MAAMC,KAAaZ,KAAKD,UAAUc,iBAAiB,eAAgB,CACtE,MAAMC,EAASF,EAAUC,iBAAiB,6BACtCV,OAAOY,WAAa,KACtBD,EAAOE,SAASC,IACdA,EAAMC,UAAUC,IAAI,aAEtBnB,KAAKoB,wBAGHR,EAAUS,YAAcT,EAAUU,aAClCR,EAAOS,OAAS,KAEhBT,EAAOE,SAAQ,CAACC,EAAOO,KACjBA,EAAQ,GAAKA,EAAQV,EAAOS,OAAS,GACvCN,EAAMC,UAAUC,IAAI,aAGxBnB,KAAKoB,wBAMb,sBACE,MAAMH,EAAQjB,KAAKyB,eACbb,EAAYZ,KAAKD,UAAUU,cAAc,eACzCK,EAASF,EAAUC,iBAAiB,UAC1CD,EAAUc,aAAaT,EAAOH,EAAO,IAGvC,SACEd,KAAKD,UAAUc,iBAAiB,sBAAsBG,SAASC,IACzDA,EAAMC,UAAUX,SAAS,cAC3BU,EAAMP,SAENO,EAAMC,UAAUR,OAAO,aAK7B,eACE,MAAMO,EAAQZ,SAASsB,cAAc,MACrCV,EAAMC,UAAUC,IAAI,QAAS,cAC7BF,EAAMW,aAAa,cAAe,YAElC,MAAMC,EAASxB,SAASsB,cAAc,UACtCE,EAAOX,UAAUC,IAAI,YAAa,UAElC,MAAMW,EAAOzB,SAASsB,cAAc,QACpCG,EAAKZ,UAAUC,IAAI,WACnBW,EAAKC,UAAY,aAEjB,MAAMC,EAAa3B,SAASsB,cAAc,KAC1CK,EAAWd,UAAUC,IAAI,OAAQ,MAAO,kBAExC,MAAMc,EAAc5B,SAASsB,cAAc,KAkB3C,OAjBAM,EAAYf,UAAUC,IAAI,OAAQ,MAAO,oBAEzCF,EAAMiB,YAAYD,GAClBhB,EAAMiB,YAAYL,GAClBA,EAAOK,YAAYJ,GACnBD,EAAOK,YAAYF,GAEnBf,EAAMb,iBAAiB,SAAS,KAC9B,IAAI+B,EAAOnC,KAAKD,UAAUU,cAAc,YACpC0B,EACFA,EAAKzB,UAELyB,EAAOnC,KAAKoC,cACZpC,KAAKD,UAAUmC,YAAYC,OAIxBlB,EAGT,cACE,MAAMkB,EAAO9B,SAASsB,cAAc,OACpCQ,EAAKjB,UAAUC,IAAI,WAEnB,MAAMkB,EAAQhC,SAASsB,cAAc,OACrCU,EAAMnB,UAAUC,IAAI,SAEpB,MAAMmB,EAAUjC,SAASsB,cAAc,OACvCW,EAAQpB,UAAUC,IAAI,WAEtB,MAAMoB,EAAOlC,SAASsB,cAAc,OA0BpC,OAzBAY,EAAKrB,UAAUC,IAAI,WAEnBgB,EAAKD,YAAYG,GACjBA,EAAMH,YAAYI,GAClBA,EAAQJ,YAAYK,GAEpBvC,KAAKD,UAAUc,iBAAiB,sBAAsBG,SAASC,IAC7D,GAAIA,EAAMC,UAAUX,SAAS,UAAW,CACtC,MAAMiC,EAAOnC,SAASsB,cAAc,OACpCa,EAAKtB,UAAUC,IAAI,UAAW,QAE9B,MAAMsB,EAAMpC,SAASsB,cAAc,OACnCc,EAAIvB,UAAUC,IAAI,MAAO,sBAEzB,MAAMuB,EAAMrC,SAASsB,cAAc,OACnCe,EAAIxB,UAAUC,IAAI,OACbF,EAAMC,UAAUX,SAAS,UAC5BmC,EAAIR,YAAYjB,EAAMR,cAAc,KAAKkC,WAAU,IACnDF,EAAIP,YAAYQ,GAChBF,EAAKN,YAAYO,GACjBF,EAAKL,YAAYM,QAKhBL,GAIX,MAAMS,EAAiB,GACvB,IAAK,MAAMC,KAAgB1C,OAAOE,SAASQ,iBAAiB,kBAC1D+B,EAAeE,KAAK,IAAIhD,EAAa,gBAAiB+C,IAEzC","file":"components/breadcrumb/breadcrumb.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 122);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/breadcrumb/examples.html\";","class BRBreadcrumb {\n constructor(name, component) {\n this.name = name\n this.component = component\n this._setBehavior()\n }\n\n _setBehavior() {\n this._setView()\n window.addEventListener('resize', () => {\n this._setView()\n })\n window.document.addEventListener('click', (event) => {\n if (\n !this.component.contains(event.target) &&\n this.component.querySelector('.br-card')\n ) {\n this.component.querySelector('.br-card').remove()\n }\n })\n }\n\n _setView() {\n this._reset()\n for (const crumbList of this.component.querySelectorAll('.crumb-list')) {\n const crumbs = crumbList.querySelectorAll('.crumb:not([data-active])')\n if (window.innerWidth < 575) {\n crumbs.forEach((crumb) => {\n crumb.classList.add('d-none')\n })\n this._insertExpandButton()\n } else {\n if (\n crumbList.scrollWidth > crumbList.offsetWidth ||\n crumbs.length > 5\n ) {\n crumbs.forEach((crumb, index) => {\n if (index > 0 && index < crumbs.length - 1) {\n crumb.classList.add('d-none')\n }\n })\n this._insertExpandButton()\n }\n }\n }\n }\n\n _insertExpandButton() {\n const crumb = this._createCrumb()\n const crumbList = this.component.querySelector('.crumb-list')\n const crumbs = crumbList.querySelectorAll('.crumb')\n crumbList.insertBefore(crumb, crumbs[1])\n }\n\n _reset() {\n this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {\n if (crumb.classList.contains('menu-mobil')) {\n crumb.remove()\n } else {\n crumb.classList.remove('d-none')\n }\n })\n }\n\n _createCrumb() {\n const crumb = document.createElement('li')\n crumb.classList.add('crumb', 'menu-mobil')\n crumb.setAttribute('data-toggle', 'dropdown')\n\n const button = document.createElement('button')\n button.classList.add('br-button', 'circle')\n\n const span = document.createElement('span')\n span.classList.add('sr-only')\n span.innerHTML = 'Botão Menu'\n\n const folderIcon = document.createElement('i')\n folderIcon.classList.add('icon', 'fas', 'fa-folder-plus')\n\n const chevronIcon = document.createElement('i')\n chevronIcon.classList.add('icon', 'fas', 'fa-chevron-right')\n\n crumb.appendChild(chevronIcon)\n crumb.appendChild(button)\n button.appendChild(span)\n button.appendChild(folderIcon)\n\n crumb.addEventListener('click', () => {\n let card = this.component.querySelector('.br-card')\n if (card) {\n card.remove()\n } else {\n card = this._createList()\n this.component.appendChild(card)\n }\n })\n\n return crumb\n }\n\n _createList() {\n const card = document.createElement('div')\n card.classList.add('br-card')\n\n const front = document.createElement('div')\n front.classList.add('front')\n\n const content = document.createElement('div')\n content.classList.add('content')\n\n const list = document.createElement('div')\n list.classList.add('br-list')\n\n card.appendChild(front)\n front.appendChild(content)\n content.appendChild(list)\n\n this.component.querySelectorAll('.crumb-list .crumb').forEach((crumb) => {\n if (crumb.classList.contains('d-none')) {\n const item = document.createElement('div')\n item.classList.add('br-item', 'py-3')\n\n const row = document.createElement('div')\n row.classList.add('row', 'align-items-center')\n\n const col = document.createElement('div')\n col.classList.add('col')\n if (!crumb.classList.contains('home')) {\n col.appendChild(crumb.querySelector('a').cloneNode(true))\n row.appendChild(col)\n item.appendChild(row)\n list.appendChild(item)\n }\n }\n })\n\n return card\n }\n}\n\nconst breadcrumbList = []\nfor (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {\n breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))\n}\nexport default BRBreadcrumb\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.min.css 0 → 100644
View file @ eae2f2ee
.br-breadcrumb{display:inline-grid;position:relative}.br-breadcrumb .crumb-list{align-items:center;border:none;display:flex;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;list-style:none}.br-breadcrumb .crumb-list .crumb{align-items:center;display:flex;height:var(--spacing-scale-5x);margin:auto var(--spacing-scale-half)}.br-breadcrumb .crumb-list .crumb .icon{color:var(--color-secondary-04);font-size:var(--icon-size-sm)}.br-breadcrumb .crumb-list .crumb .icon.fas.fa-chevron-right{margin-right:-4px}.br-breadcrumb .crumb-list .crumb a{cursor:pointer;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-medium);padding:0;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.br-breadcrumb .crumb-list .crumb a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-breadcrumb .crumb-list .crumb a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-breadcrumb .crumb-list .crumb.home,.br-breadcrumb .crumb-list .crumb.menu-mobil{--focus-offset:calc(var(--spacing-scale-half)*-1);align-items:center;display:flex;margin-right:0}.br-breadcrumb .crumb-list .crumb.home .icon,.br-breadcrumb .crumb-list .crumb.menu-mobil .icon{color:var(--interactive);position:static}.br-breadcrumb .crumb-list .crumb.home .icon.fas.fa-chevron-right,.br-breadcrumb .crumb-list .crumb.menu-mobil .icon.fas.fa-chevron-right{color:var(--color-secondary-04);margin-right:-8px}.br-breadcrumb .crumb-list .crumb[data-active=active] span{color:var(--color-secondary-08);cursor:default;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-medium);white-space:nowrap}.br-breadcrumb .br-card{position:absolute;top:var(--spacing-scale-7x);left:var(--spacing-scale-9x);width:fit-content;z-index:1}.br-breadcrumb .br-card .front .content{padding:0}.br-breadcrumb .br-card .front .content .br-list .br-item{cursor:pointer}.br-breadcrumb .br-card .front .content .br-list .br-item a{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-breadcrumb .br-card .front .content .br-list .br-item:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}@media (max-width:574.98px){.br-breadcrumb .crumb-list .menu-mobil>.icon{display:none}.br-breadcrumb .br-card{left:var(--spacing-scale-base)}}@media (max-width:991.98px){.br-breadcrumb .crumb-list .crumb a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:180px}.br-breadcrumb .crumb-list .crumb.home+.crumb,.br-breadcrumb .crumb-list .crumb.menu-mobil,.br-breadcrumb .crumb-list .crumb.menu-mobil+.crumb{display:flex}}
/*# sourceMappingURL=breadcrumb.min.min.css.map */
\ No newline at end of file
dist/components/breadcrumb/breadcrumb.min.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/breadcrumb/_breadcrumb.scss","webpack://./src/partial/scss/mixins/_states.scss","webpack://./node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAEA,eACE,mBAAA,CACA,iBADF,CAGE,2BACE,kBAAA,CACA,WAAA,CACA,YAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAAA,CACA,eADJ,CAGI,kCACE,kBAAA,CACA,YAAA,CACA,8BAAA,CACA,qCADN,CAEM,wCACE,+BAAA,CACA,6BAAR,CACQ,6DACE,iBACV,CAEM,oCACE,cAAA,CACA,wCAAA,CACA,qCAAA,CACA,SAAA,CACA,oBAAA,CACA,kBAAA,CACA,eAAA,CACA,sBAAA,CACA,eAAR,CCxBI,yDACE,qHD0BN,CCrBI,0DACE,yHDuBN,CAFM,oFAEE,iDAAA,CACA,kBAAA,CACA,YAAA,CACA,cAGR,CAFQ,gGACE,wBAAA,CACA,eAIV,CAHU,0IACE,+BAAA,CACA,iBAKZ,CACQ,2DACE,+BAAA,CACA,cAAA,CACA,wCAAA,CACA,qCAAA,CACA,kBACV,CAIE,wBACE,iBAAA,CACA,2BAAA,CACA,4BAAA,CACA,iBAAA,CACA,SAFJ,CAIM,wCACE,SAFR,CAIU,0DACE,cAFZ,CAGY,4DACE,oBAAA,CACA,eAAA,CACA,eAAA,CACA,sBAAA,CACA,kBADd,CCvEI,+EACE,qHDyEN,CCpEI,gFACE,yHDsEN,CEjBI,4BFuBE,6CACE,YAHN,CAME,wBACE,8BAJJ,CACF,CEzBI,4BFiCA,oCACE,eAAA,CACA,sBAAA,CACA,kBAAA,CACA,aAAA,CACA,eALJ,CAOE,+IAGE,YALJ,CACF","file":"breadcrumb.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}breadcrumb {\n display: inline-grid;\n position: relative;\n // Página inicial\n .crumb-list {\n align-items: center;\n border: none;\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n // Cada item\n .crumb {\n align-items: center;\n display: flex;\n height: v(spacing-scale-5x);\n margin: auto var(--spacing-scale-half);\n .icon {\n color: v(color-secondary-04);\n font-size: v(icon-size-sm);\n &.fas.fa-chevron-right {\n margin-right: -4px;\n }\n }\n a {\n cursor: pointer;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n padding: 0;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 180px;\n @include hover;\n }\n\n &.home,\n &.menu-mobil {\n --focus-offset: calc(var(--spacing-scale-half) * -1);\n align-items: center;\n display: flex;\n margin-right: 0;\n .icon {\n color: var(--interactive);\n position: static;\n &.fas.fa-chevron-right {\n color: var(--color-secondary-04);\n margin-right: -8px;\n }\n }\n }\n // Item ativo\n &[data-active=\"active\"] {\n span {\n color: v(color-secondary-08);\n cursor: default;\n font-size: v(font-size-scale-down-01);\n font-weight: v(font-weight-medium);\n white-space: nowrap;\n }\n }\n }\n }\n .br-card {\n position: absolute;\n top: v(spacing-scale-7x);\n left: v(spacing-scale-9x);\n width: fit-content;\n z-index: 1;\n .front {\n .content {\n padding: 0;\n .br-list {\n .br-item {\n cursor: pointer;\n a {\n display: inline-block;\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @include hover;\n }\n }\n }\n }\n }\n\n @include media-breakpoint-down(xs) {\n .crumb-list .menu-mobil > {\n .icon {\n display: none;\n }\n }\n .br-card {\n left: v(spacing-scale-base);\n }\n }\n\n @include media-breakpoint-down(sm) {\n .crumb-list .crumb a {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n max-width: 180px;\n }\n .crumb-list .crumb.menu-mobil,\n .crumb-list .crumb.menu-mobil + .crumb,\n .crumb-list .crumb.home + .crumb {\n display: flex;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n"]}
\ No newline at end of file
dist/components/breadcrumb/examples.html 0 → 100644
View file @ eae2f2ee
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Breadcrumb</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<p class="h5">Breadcrumb Padrão</p>
<div class="br-breadcrumb pt-3" aria-label="Breadcumb">
<ul class="crumb-list">
<li class="crumb home">
<div class="br-button circle"><span class="sr-only">Página inicial</span><i class="icon fas fa-home"></i></div>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 01</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 02</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 03</a>
</li>
<li class="crumb" data-active="active"><i class="icon fas fa-chevron-right"></i><span>Página atual</span>
</li>
</ul>
</div>
<hr/>
<p class="h5">Breadcrumb com truncamento</p>
<div class="br-breadcrumb pt-3" aria-label="Breadcumb">
<ul class="crumb-list">
<li class="crumb home">
<div class="br-button circle"><span class="sr-only">Página inicial</span><i class="icon fas fa-home"></i></div>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 01</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 02</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 03</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral Com Título Grande</a>
<div class="br-tooltip" role="tooltip" info="info" place="top"><span class="text" role="tooltip">Página Ancestral Com Título Grande</span>
</div>
</li>
<li class="crumb" data-active="active"><i class="icon fas fa-chevron-right"></i><span>Página atual</span>
</li>
</ul>
</div>
</div>
<script src="../../dsgov.js"></script>
</body>
</html>
\ No newline at end of file
dist/components/breadcrumb/examples/breadcrumb-default.html 0 → 100644
View file @ eae2f2ee
<div class="br-breadcrumb pt-3" aria-label="Breadcumb">
<ul class="crumb-list">
<li class="crumb home">
<div class="br-button circle"><span class="sr-only">Página inicial</span><i class="icon fas fa-home"></i></div>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 01</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 02</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="javascript:void(0)">Página Ancestral 03</a>
</li>
<li class="crumb" data-active="active"><i class="icon fas fa-chevron-right"></i><span>Página atual</span>
</li>
</ul>
</div>
\ No newline at end of file
dist/components/button/button.css 0 → 100644
View file @ eae2f2ee
.br-button {
--button-background: transparent;
--button-border: transparent;
--button-color: var(--interactive);
--button-radius: 100em;
--button-font-size: var(--font-size-scale-up-01);
--button-font-weight: var(--font-weight-semi-bold);
--button-xsmall: 24px;
--button-small: 32px;
--button-medium: 40px;
--button-large: 48px;
--button-size: var(--button-medium);
--button-padding: 0 var(--spacing-scale-3x);
--button-img: 20px;
--interactive-rgb: var(--rgb-primary-default);
align-items: center;
background-color: var(--button-background);
border: 1px solid var(--button-border);
border-radius: var(--button-radius);
color: var(--button-color);
cursor: pointer;
display: inline-flex;
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
height: var(--button-size);
justify-content: center;
padding: var(--button-padding);
text-align: center;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
.br-button img {
max-height: var(--button-img);
}
.br-button.block {
width: 100%;
}
@media (min-width: 575px) {
.br-button.block-sm {
width: 100%;
}
.br-button.auto-sm {
width: auto;
}
}
@media (min-width: 992px) {
.br-button.block-md {
width: 100%;
}
.br-button.auto-md {
width: auto;
}
}
@media (min-width: 1280px) {
.br-button.block-lg {
width: 100%;
}
.br-button.auto-lg {
width: auto;
}
}
@media (min-width: 1600px) {
.br-button.block-xl {
width: 100%;
}
.br-button.auto-xl {
width: auto;
}
}
.br-button.circle, .br-button[circle], .br-button.is-circle {
border-radius: 50%;
padding: 0;
width: var(--button-size);
}
.br-button.xsmall, .br-button[xsmall], .br-button.is-xsmall {
--button-size: var(--button-xsmall);
}
.br-button.small, .br-button[small], .br-button.is-small {
--button-size: var(--button-small);
}
.br-button.medium, .br-button[medium], .br-button.is-medium {
--button-size: var(--button-medium);
}
.br-button.large, .br-button[large], .br-button.is-large {
--button-size: var(--button-large);
}
.br-button.primary, .br-button[primary], .br-button.is-primary {
--interactive-rgb: var(--rgb-secondary-01);
--button-background: var(--color-primary-default);
--button-color: var(--color-secondary-01);
}
.br-button.primary.inverted, .br-button.primary.is-inverted, .br-button.primary[inverted], .br-button[primary].inverted, .br-button[primary].is-inverted, .br-button[primary][inverted], .br-button.is-primary.inverted, .br-button.is-primary.is-inverted, .br-button.is-primary[inverted] {
--interactive-rgb: var(--rgb-primary-default);
--hover: var(--surface-opacity-xs, 0.16);
--button-background: var(--color-secondary-01);
--button-color: var(--color-primary-default);
}
.br-button.secondary, .br-button[secondary], .br-button.is-secondary {
--button-background: var(--color-secondary-01);
--button-border: var(--color-primary-default);
}
.br-button.secondary.inverted, .br-button.secondary.is-inverted, .br-button.secondary[inverted], .br-button[secondary].inverted, .br-button[secondary].is-inverted, .br-button[secondary][inverted], .br-button.is-secondary.inverted, .br-button.is-secondary.is-inverted, .br-button.is-secondary[inverted] {
--hover: var(--surface-opacity-xs, 0.16);
--button-background: var(--color-primary-default);
--button-border: var(--color-secondary-01);
--button-color: var(--color-secondary-01);
}
.br-button.inverted, .br-button.is-inverted, .br-button[inverted] {
--interactive: var(--color-secondary-01);
--interactive-rgb: var(--rgb-secondary-01);
--hover: var(--surface-opacity-sm, 0.3);
--focus-color: var(--color-support-10);
}
.br-button.danger, .br-button[danger], .br-button.is-danger {
--button-background: var(--color-danger);
--button-color: var(--color-secondary-01);
}
.br-button.success, .br-button[success], .br-button.is-success {
--button-background: var(--color-success);
--button-color: var(--color-secondary-01);
}
.br-button.warning, .br-button[warning], .br-button.is-warning {
--button-background: var(--color-warning);
}
.br-button.info, .br-button[info], .br-button.is-info {
--button-background: var(--color-info);
--button-color: var(--color-secondary-01);
}
.br-button:disabled {
cursor: not-allowed;
}
.br-button:not(:disabled):focus {
outline: none;
}
.br-button:not(:disabled).focus-visible, .br-button:not(:disabled):focus-visible {
outline-color: var(--focus-color);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-button:not(:disabled):not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-button:not(:disabled):not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-button.active, .br-button.is-active, .br-button[active] {
--button-background: var(--active);
--button-color: var(--color-secondary-01);
}
.br-button.active:hover, .br-button.is-active:hover, .br-button[active]:hover {
--interactive-rgb: var(--rgb-secondary-01);
--hover: var(--surface-opacity-sm, 0.3);
}
.br-button.loading::after, .br-button[loading]::after, .br-button.is-loading::after {
border-color: var(--button-color) var(--button-color) transparent;
border-style: solid;
}
.br-button.loading.primary::after, .br-button.loading.danger::after, .br-button.loading.success::after, .br-button.loading.info::after, .br-button[loading].primary::after, .br-button[loading].danger::after, .br-button[loading].success::after, .br-button[loading].info::after, .br-button.is-loading.primary::after, .br-button.is-loading.danger::after, .br-button.is-loading.success::after, .br-button.is-loading.info::after {
border-color: var(--button-color) var(--button-color) transparent;
}
/*# sourceMappingURL=button.css.map*/
\ No newline at end of file
dist/components/button/button.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///./src/components/button/_button.scss","webpack:///./src/partial/scss/mixins/_button.scss","webpack:///./node_modules/bootstrap/scss/mixins/_breakpoints.scss","webpack:///./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA;ECUE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADbF;ACeE;EACE;ADbJ;ACkBE;EACE;ADhBJ;AEuBI;EDHE;IACE;EDjBN;ECmBI;IACE;EDjBN;AACF;AEeI;EDHE;IACE;EDTN;ECWI;IACE;EDTN;AACF;AEOI;EDHE;IACE;EDDN;ECGI;IACE;EDDN;AACF;AEDI;EDHE;IACE;EDON;ECLI;IACE;EDON;AACF;ACDE;EAGE;EACA;EACA;ADCJ;ACKI;EAGE;ADLN;ACEI;EAGE;ADFN;ACDI;EAGE;ADCN;ACJI;EAGE;ADIN;ACEE;EAGE;EACA;EACA;ADFJ;ACII;EAGE;EACA;EACA;EACA;ADJN;ACQE;EAGE;EACA;ADRJ;ACUI;EAGE;EACA;EACA;EACA;ADVN;ACcE;EAGE;EACA;EACA;EACA;ADdJ;ACoBI;EAGE;EAEE;ADrBR;ACgBI;EAGE;EAEE;ADjBR;ACYI;EAGE;ADZN;ACSI;EAGE;EAEE;ADVR;ACiBE;EACE;ADfJ;AGrGE;EACE;AHuGJ;AGpGE;EAEE;EACA;EACA;EACA;AHqGJ;AG/HI;EACE;AHiIN;AG5HI;EACE;AH8HN;ACQE;EAGE;EACA;ADRJ;ACUI;EACE;EACA;ADRN;ACeI;EACE;EACA;ADbN;ACoBM;EACE;ADlBR,C","file":"components/button/button.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}button {\n @include button;\n}\n","@mixin button {\n @include button-tokens;\n @include button-base;\n @include button-block;\n @include button-circle;\n @include button-sizes;\n @include button-emphasis;\n @include button-colors;\n @include button-states;\n}\n\n@mixin button-tokens {\n --button-background: transparent;\n --button-border: transparent;\n --button-color: var(--interactive);\n --button-radius: 100em;\n --button-font-size: var(--font-size-scale-up-01);\n --button-font-weight: var(--font-weight-semi-bold);\n --button-xsmall: 24px;\n --button-small: 32px;\n --button-medium: 40px;\n --button-large: 48px;\n --button-size: var(--button-medium);\n --button-padding: 0 var(--spacing-scale-3x);\n --button-img: 20px;\n}\n\n@mixin button-base {\n --interactive-rgb: var(--rgb-primary-default);\n align-items: center;\n background-color: var(--button-background);\n border: 1px solid var(--button-border);\n border-radius: var(--button-radius);\n color: var(--button-color);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n height: var(--button-size);\n justify-content: center;\n padding: var(--button-padding);\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n width: auto;\n\n img {\n max-height: var(--button-img);\n }\n}\n\n@mixin button-block {\n &.block {\n width: 100%;\n }\n @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n @include media-breakpoint-up(#{$breakpoint}) {\n &.block-#{$breakpoint} {\n width: 100%;\n }\n &.auto-#{$breakpoint} {\n width: auto;\n }\n }\n }\n}\n\n@mixin button-circle {\n &.circle,\n &[circle],\n &.is-circle {\n border-radius: 50%;\n padding: 0;\n width: var(--button-size);\n }\n}\n\n@mixin button-sizes {\n @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n &.#{$size},\n &[#{$size}],\n &.is-#{$size} {\n --button-size: var(--button-#{$size});\n }\n }\n}\n\n@mixin button-emphasis {\n &.primary,\n &[primary],\n &.is-primary {\n --interactive-rgb: var(--rgb-secondary-01);\n --button-background: var(--color-primary-default);\n --button-color: var(--color-secondary-01);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive-rgb: var(--rgb-primary-default);\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-secondary-01);\n --button-color: var(--color-primary-default);\n }\n }\n\n &.secondary,\n &[secondary],\n &.is-secondary {\n --button-background: var(--color-secondary-01);\n --button-border: var(--color-primary-default);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-primary-default);\n --button-border: var(--color-secondary-01);\n --button-color: var(--color-secondary-01);\n }\n }\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive: var(--color-secondary-01);\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n --focus-color: var(--color-support-10);\n }\n}\n\n@mixin button-colors {\n @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n &.#{$color},\n &[#{$color}],\n &.is-#{$color} {\n --button-background: var(--color-#{$color});\n @if $color != \"warning\" {\n --button-color: var(--color-secondary-01);\n }\n }\n }\n}\n\n@mixin button-states {\n &:disabled {\n cursor: not-allowed;\n }\n\n &:not(:disabled) {\n @include focus;\n @include hover;\n }\n\n &.active,\n &.is-active,\n &[active] {\n --button-background: var(--active);\n --button-color: var(--color-secondary-01);\n\n &:hover {\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n }\n }\n\n &.loading,\n &[loading],\n &.is-loading {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n border-style: solid;\n }\n\n &.primary,\n &.danger,\n &.success,\n &.info {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n }\n }\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/button/button.js 0 → 100644
View file @ eae2f2ee
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 123);
/******/ })
/************************************************************************/
/******/ ({
/***/ 123:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(41);
__webpack_require__(42);
__webpack_require__(124);
__webpack_require__(125);
__webpack_require__(126);
__webpack_require__(127);
__webpack_require__(128);
__webpack_require__(129);
__webpack_require__(130);
__webpack_require__(131);
__webpack_require__(132);
__webpack_require__(133);
__webpack_require__(134);
__webpack_require__(135);
__webpack_require__(136);
__webpack_require__(137);
__webpack_require__(138);
__webpack_require__(139);
__webpack_require__(140);
__webpack_require__(141);
__webpack_require__(142);
__webpack_require__(143);
module.exports = __webpack_require__(144);
/***/ }),
/***/ 124:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-primary-circle-inverted.html");
/***/ }),
/***/ 125:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-primary-circle.html");
/***/ }),
/***/ 126:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-primary-inverted.html");
/***/ }),
/***/ 127:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-primary.html");
/***/ }),
/***/ 128:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-active.html");
/***/ }),
/***/ 129:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-block.html");
/***/ }),
/***/ 130:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-circle-inverted.html");
/***/ }),
/***/ 131:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-circle-large.html");
/***/ }),
/***/ 132:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-circle-small.html");
/***/ }),
/***/ 133:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-circle.html");
/***/ }),
/***/ 134:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-disabled.html");
/***/ }),
/***/ 135:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-inverted.html");
/***/ }),
/***/ 136:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-large.html");
/***/ }),
/***/ 137:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-loading.html");
/***/ }),
/***/ 138:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-medium.html");
/***/ }),
/***/ 139:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary-small.html");
/***/ }),
/***/ 140:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-secondary.html");
/***/ }),
/***/ 141:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-tertiary-circle-inverted.html");
/***/ }),
/***/ 142:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-tertiary-circle.html");
/***/ }),
/***/ 143:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-tertiary-inverted.html");
/***/ }),
/***/ 144:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples/button-tertiary.html");
/***/ }),
/***/ 41:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 42:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/button/examples.html");
/***/ })
/******/ });
//# sourceMappingURL=button.js.map
\ No newline at end of file
dist/components/button/button.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/button/examples/button-primary-circle-inverted.pug","webpack:///./src/components/button/examples/button-primary-circle.pug","webpack:///./src/components/button/examples/button-primary-inverted.pug","webpack:///./src/components/button/examples/button-primary.pug","webpack:///./src/components/button/examples/button-secondary-active.pug","webpack:///./src/components/button/examples/button-secondary-block.pug","webpack:///./src/components/button/examples/button-secondary-circle-inverted.pug","webpack:///./src/components/button/examples/button-secondary-circle-large.pug","webpack:///./src/components/button/examples/button-secondary-circle-small.pug","webpack:///./src/components/button/examples/button-secondary-circle.pug","webpack:///./src/components/button/examples/button-secondary-disabled.pug","webpack:///./src/components/button/examples/button-secondary-inverted.pug","webpack:///./src/components/button/examples/button-secondary-large.pug","webpack:///./src/components/button/examples/button-secondary-loading.pug","webpack:///./src/components/button/examples/button-secondary-medium.pug","webpack:///./src/components/button/examples/button-secondary-small.pug","webpack:///./src/components/button/examples/button-secondary.pug","webpack:///./src/components/button/examples/button-tertiary-circle-inverted.pug","webpack:///./src/components/button/examples/button-tertiary-circle.pug","webpack:///./src/components/button/examples/button-tertiary-inverted.pug","webpack:///./src/components/button/examples/button-tertiary.pug","webpack:///./src/components/button/_button.scss","webpack:///./src/components/button/examples.pug"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,mEAAmE,E;;;;;;;;ACAzG;AAAe,oFAAuB,0DAA0D,E;;;;;;;;ACAhG;AAAe,oFAAuB,4DAA4D,E;;;;;;;;ACAlG;AAAe,oFAAuB,mDAAmD,E;;;;;;;;ACAzF;AAAe,oFAAuB,4DAA4D,E;;;;;;;;ACAlG;AAAe,oFAAuB,2DAA2D,E;;;;;;;;ACAjG;AAAe,oFAAuB,qEAAqE,E;;;;;;;;ACA3G;AAAe,oFAAuB,kEAAkE,E;;;;;;;;ACAxG;AAAe,oFAAuB,kEAAkE,E;;;;;;;;ACAxG;AAAe,oFAAuB,4DAA4D,E;;;;;;;;ACAlG;AAAe,oFAAuB,8DAA8D,E;;;;;;;;ACApG;AAAe,oFAAuB,8DAA8D,E;;;;;;;;ACApG;AAAe,oFAAuB,2DAA2D,E;;;;;;;;ACAjG;AAAe,oFAAuB,6DAA6D,E;;;;;;;;ACAnG;AAAe,oFAAuB,4DAA4D,E;;;;;;;;ACAlG;AAAe,oFAAuB,2DAA2D,E;;;;;;;;ACAjG;AAAe,oFAAuB,qDAAqD,E;;;;;;;;ACA3F;AAAe,oFAAuB,oEAAoE,E;;;;;;;;ACA1G;AAAe,oFAAuB,2DAA2D,E;;;;;;;;ACAjG;AAAe,oFAAuB,6DAA6D,E;;;;;;;;ACAnG;AAAe,oFAAuB,oDAAoD,E;;;;;;;;ACA1F;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,oCAAoC,E","file":"components/button/button.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 123);\n","export default __webpack_public_path__ + \"components/button/examples/button-primary-circle-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-primary-circle.html\";","export default __webpack_public_path__ + \"components/button/examples/button-primary-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-primary.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-active.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-block.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-circle-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-circle-large.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-circle-small.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-circle.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-disabled.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-large.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-loading.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-medium.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary-small.html\";","export default __webpack_public_path__ + \"components/button/examples/button-secondary.html\";","export default __webpack_public_path__ + \"components/button/examples/button-tertiary-circle-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-tertiary-circle.html\";","export default __webpack_public_path__ + \"components/button/examples/button-tertiary-inverted.html\";","export default __webpack_public_path__ + \"components/button/examples/button-tertiary.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/button/examples.html\";"],"sourceRoot":""}
\ No newline at end of file
dist/components/button/button.min.css 0 → 100644
View file @ eae2f2ee
.br-button{--button-background:rgba(0,0,0,0);--button-border:rgba(0,0,0,0);--button-color:var(--interactive);--button-radius:100em;--button-font-size:var(--font-size-scale-up-01);--button-font-weight:var(--font-weight-semi-bold);--button-xsmall:24px;--button-small:32px;--button-medium:40px;--button-large:48px;--button-size:var(--button-medium);--button-padding:0 var(--spacing-scale-3x);--button-img:20px;--interactive-rgb:var(--rgb-primary-default);align-items:center;background-color:var(--button-background);border:1px solid var(--button-border);border-radius:var(--button-radius);color:var(--button-color);cursor:pointer;display:inline-flex;font-size:var(--button-font-size);font-weight:var(--button-font-weight);height:var(--button-size);justify-content:center;padding:var(--button-padding);text-align:center;vertical-align:middle;white-space:nowrap;width:auto}.br-button img{max-height:var(--button-img)}.br-button.block{width:100%}@media (min-width:575px){.br-button.block-sm{width:100%}.br-button.auto-sm{width:auto}}@media (min-width:992px){.br-button.block-md{width:100%}.br-button.auto-md{width:auto}}@media (min-width:1280px){.br-button.block-lg{width:100%}.br-button.auto-lg{width:auto}}@media (min-width:1600px){.br-button.block-xl{width:100%}.br-button.auto-xl{width:auto}}.br-button.circle,.br-button.is-circle,.br-button[circle]{border-radius:50%;padding:0;width:var(--button-size)}.br-button.is-xsmall,.br-button.xsmall,.br-button[xsmall]{--button-size:var(--button-xsmall)}.br-button.is-small,.br-button.small,.br-button[small]{--button-size:var(--button-small)}.br-button.is-medium,.br-button.medium,.br-button[medium]{--button-size:var(--button-medium)}.br-button.is-large,.br-button.large,.br-button[large]{--button-size:var(--button-large)}.br-button.is-primary,.br-button.primary,.br-button[primary]{--interactive-rgb:var(--rgb-secondary-01);--button-background:var(--color-primary-default);--button-color:var(--color-secondary-01)}.br-button.is-primary.inverted,.br-button.is-primary.is-inverted,.br-button.is-primary[inverted],.br-button.primary.inverted,.br-button.primary.is-inverted,.br-button.primary[inverted],.br-button[primary].inverted,.br-button[primary].is-inverted,.br-button[primary][inverted]{--interactive-rgb:var(--rgb-primary-default);--hover:var(--surface-opacity-xs,0.16);--button-background:var(--color-secondary-01);--button-color:var(--color-primary-default)}.br-button.is-secondary,.br-button.secondary,.br-button[secondary]{--button-background:var(--color-secondary-01);--button-border:var(--color-primary-default)}.br-button.is-secondary.inverted,.br-button.is-secondary.is-inverted,.br-button.is-secondary[inverted],.br-button.secondary.inverted,.br-button.secondary.is-inverted,.br-button.secondary[inverted],.br-button[secondary].inverted,.br-button[secondary].is-inverted,.br-button[secondary][inverted]{--hover:var(--surface-opacity-xs,0.16);--button-background:var(--color-primary-default);--button-border:var(--color-secondary-01);--button-color:var(--color-secondary-01)}.br-button.inverted,.br-button.is-inverted,.br-button[inverted]{--interactive:var(--color-secondary-01);--interactive-rgb:var(--rgb-secondary-01);--hover:var(--surface-opacity-sm,0.3);--focus-color:var(--color-support-10)}.br-button.danger,.br-button.is-danger,.br-button[danger]{--button-background:var(--color-danger);--button-color:var(--color-secondary-01)}.br-button.is-success,.br-button.success,.br-button[success]{--button-background:var(--color-success);--button-color:var(--color-secondary-01)}.br-button.is-warning,.br-button.warning,.br-button[warning]{--button-background:var(--color-warning)}.br-button.info,.br-button.is-info,.br-button[info]{--button-background:var(--color-info);--button-color:var(--color-secondary-01)}.br-button:disabled{cursor:not-allowed}.br-button:not(:disabled):focus{outline:none}.br-button:not(:disabled).focus-visible,.br-button:not(:disabled):focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-button:not(:disabled):not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-button:not(:disabled):not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-button.active,.br-button.is-active,.br-button[active]{--button-background:var(--active);--button-color:var(--color-secondary-01)}.br-button.active:hover,.br-button.is-active:hover,.br-button[active]:hover{--interactive-rgb:var(--rgb-secondary-01);--hover:var(--surface-opacity-sm,0.3)}.br-button.is-loading:after,.br-button.loading:after,.br-button[loading]:after{border-left-color:var(--button-color);border-bottom-color:rgba(0,0,0,0);border-right-color:var(--button-color);border-top-color:var(--button-color);border-style:solid}.br-button.is-loading.danger:after,.br-button.is-loading.info:after,.br-button.is-loading.primary:after,.br-button.is-loading.success:after,.br-button.loading.danger:after,.br-button.loading.info:after,.br-button.loading.primary:after,.br-button.loading.success:after,.br-button[loading].danger:after,.br-button[loading].info:after,.br-button[loading].primary:after,.br-button[loading].success:after{border-left-color:var(--button-color);border-bottom-color:rgba(0,0,0,0);border-right-color:var(--button-color);border-top-color:var(--button-color)}
/*# sourceMappingURL=button.min.css.map */
\ No newline at end of file
dist/components/button/button.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/button/_button.scss","webpack://./src/partial/scss/mixins/_button.scss","webpack://./node_modules/bootstrap/scss/mixins/_breakpoints.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,WCUE,iCAAA,CACA,6BAAA,CACA,iCAAA,CACA,qBAAA,CACA,+CAAA,CACA,iDAAA,CACA,oBAAA,CACA,mBAAA,CACA,oBAAA,CACA,mBAAA,CACA,kCAAA,CACA,0CAAA,CACA,iBAAA,CAIA,4CAAA,CACA,kBAAA,CACA,yCAAA,CACA,qCAAA,CACA,kCAAA,CACA,yBAAA,CACA,cAAA,CACA,mBAAA,CACA,iCAAA,CACA,qCAAA,CACA,yBAAA,CACA,sBAAA,CACA,6BAAA,CACA,iBAAA,CACA,qBAAA,CACA,kBAAA,CACA,UDbF,CCeE,eACE,4BDbJ,CCkBE,iBACE,UDhBJ,CEuBI,yBDHE,oBACE,UDjBN,CCmBI,mBACE,UDjBN,CACF,CEeI,yBDHE,oBACE,UDTN,CCWI,mBACE,UDTN,CACF,CEOI,0BDHE,oBACE,UDDN,CCGI,mBACE,UDDN,CACF,CEDI,0BDHE,oBACE,UDON,CCLI,mBACE,UDON,CACF,CCDE,0DAGE,iBAAA,CACA,SAAA,CACA,wBDCJ,CCKI,0DAGE,kCDLN,CCEI,uDAGE,iCDFN,CCDI,0DAGE,kCDCN,CCJI,uDAGE,iCDIN,CCEE,6DAGE,yCAAA,CACA,gDAAA,CACA,wCDFJ,CCII,oRAGE,4CAAA,CACA,sCAAA,CACA,6CAAA,CACA,2CDJN,CCQE,mEAGE,6CAAA,CACA,4CDRJ,CCUI,sSAGE,sCAAA,CACA,gDAAA,CACA,yCAAA,CACA,wCDVN,CCcE,gEAGE,uCAAA,CACA,yCAAA,CACA,qCAAA,CACA,qCDdJ,CCoBI,0DAGE,uCAAA,CAEE,wCDrBR,CCgBI,6DAGE,wCAAA,CAEE,wCDjBR,CCYI,6DAGE,wCDZN,CCSI,oDAGE,qCAAA,CAEE,wCDVR,CCiBE,oBACE,kBDfJ,CGrGE,gCACE,YHuGJ,CGpGE,gFAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCHqGJ,CG/HI,+CACE,qHHiIN,CG5HI,gDACE,yHH8HN,CCQE,0DAGE,iCAAA,CACA,wCDRJ,CCUI,4EACE,yCAAA,CACA,qCDRN,CCeI,+EACE,qCAAA,CAAA,iCAAA,CAAA,sCAAA,CAAA,oCAAA,CACA,kBDbN,CCoBM,gZACE,qCAAA,CAAA,iCAAA,CAAA,sCAAA,CAAA,oCDlBR","file":"button.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}button {\n @include button;\n}\n","@mixin button {\n @include button-tokens;\n @include button-base;\n @include button-block;\n @include button-circle;\n @include button-sizes;\n @include button-emphasis;\n @include button-colors;\n @include button-states;\n}\n\n@mixin button-tokens {\n --button-background: transparent;\n --button-border: transparent;\n --button-color: var(--interactive);\n --button-radius: 100em;\n --button-font-size: var(--font-size-scale-up-01);\n --button-font-weight: var(--font-weight-semi-bold);\n --button-xsmall: 24px;\n --button-small: 32px;\n --button-medium: 40px;\n --button-large: 48px;\n --button-size: var(--button-medium);\n --button-padding: 0 var(--spacing-scale-3x);\n --button-img: 20px;\n}\n\n@mixin button-base {\n --interactive-rgb: var(--rgb-primary-default);\n align-items: center;\n background-color: var(--button-background);\n border: 1px solid var(--button-border);\n border-radius: var(--button-radius);\n color: var(--button-color);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n height: var(--button-size);\n justify-content: center;\n padding: var(--button-padding);\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n width: auto;\n\n img {\n max-height: var(--button-img);\n }\n}\n\n@mixin button-block {\n &.block {\n width: 100%;\n }\n @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n @include media-breakpoint-up(#{$breakpoint}) {\n &.block-#{$breakpoint} {\n width: 100%;\n }\n &.auto-#{$breakpoint} {\n width: auto;\n }\n }\n }\n}\n\n@mixin button-circle {\n &.circle,\n &[circle],\n &.is-circle {\n border-radius: 50%;\n padding: 0;\n width: var(--button-size);\n }\n}\n\n@mixin button-sizes {\n @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n &.#{$size},\n &[#{$size}],\n &.is-#{$size} {\n --button-size: var(--button-#{$size});\n }\n }\n}\n\n@mixin button-emphasis {\n &.primary,\n &[primary],\n &.is-primary {\n --interactive-rgb: var(--rgb-secondary-01);\n --button-background: var(--color-primary-default);\n --button-color: var(--color-secondary-01);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive-rgb: var(--rgb-primary-default);\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-secondary-01);\n --button-color: var(--color-primary-default);\n }\n }\n\n &.secondary,\n &[secondary],\n &.is-secondary {\n --button-background: var(--color-secondary-01);\n --button-border: var(--color-primary-default);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-primary-default);\n --button-border: var(--color-secondary-01);\n --button-color: var(--color-secondary-01);\n }\n }\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive: var(--color-secondary-01);\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n --focus-color: var(--color-support-10);\n }\n}\n\n@mixin button-colors {\n @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n &.#{$color},\n &[#{$color}],\n &.is-#{$color} {\n --button-background: var(--color-#{$color});\n @if $color != \"warning\" {\n --button-color: var(--color-secondary-01);\n }\n }\n }\n}\n\n@mixin button-states {\n &:disabled {\n cursor: not-allowed;\n }\n\n &:not(:disabled) {\n @include focus;\n @include hover;\n }\n\n &.active,\n &.is-active,\n &[active] {\n --button-background: var(--active);\n --button-color: var(--color-secondary-01);\n\n &:hover {\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n }\n }\n\n &.loading,\n &[loading],\n &.is-loading {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n border-style: solid;\n }\n\n &.primary,\n &.danger,\n &.success,\n &.info {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n }\n }\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/button/button.min.js 0 → 100644
View file @ eae2f2ee
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=145)}({145:function(e,t,n){n(41),e.exports=n(42)},41:function(e,t,n){"use strict";n.r(t)},42:function(e,t,n){"use strict";n.r(t),t.default=n.p+"components/button/examples.html"}});
//# sourceMappingURL=button.min.js.map
\ No newline at end of file
dist/components/button/button.min.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/button/_button.scss","webpack:///./src/components/button/examples.pug"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,K,6EClFrD,Q,gCCAA,OAAe,cAA0B","file":"components/button/button.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 145);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/button/examples.html\";"],"sourceRoot":""}
\ No newline at end of file
dist/components/button/button.min.min.css 0 → 100644
View file @ eae2f2ee
.br-button{--button-background:rgba(0,0,0,0);--button-border:rgba(0,0,0,0);--button-color:var(--interactive);--button-radius:100em;--button-font-size:var(--font-size-scale-up-01);--button-font-weight:var(--font-weight-semi-bold);--button-xsmall:24px;--button-small:32px;--button-medium:40px;--button-large:48px;--button-size:var(--button-medium);--button-padding:0 var(--spacing-scale-3x);--button-img:20px;--interactive-rgb:var(--rgb-primary-default);align-items:center;background-color:var(--button-background);border:1px solid var(--button-border);border-radius:var(--button-radius);color:var(--button-color);cursor:pointer;display:inline-flex;font-size:var(--button-font-size);font-weight:var(--button-font-weight);height:var(--button-size);justify-content:center;padding:var(--button-padding);text-align:center;vertical-align:middle;white-space:nowrap;width:auto}.br-button img{max-height:var(--button-img)}.br-button.block{width:100%}@media (min-width:575px){.br-button.block-sm{width:100%}.br-button.auto-sm{width:auto}}@media (min-width:992px){.br-button.block-md{width:100%}.br-button.auto-md{width:auto}}@media (min-width:1280px){.br-button.block-lg{width:100%}.br-button.auto-lg{width:auto}}@media (min-width:1600px){.br-button.block-xl{width:100%}.br-button.auto-xl{width:auto}}.br-button.circle,.br-button.is-circle,.br-button[circle]{border-radius:50%;padding:0;width:var(--button-size)}.br-button.is-xsmall,.br-button.xsmall,.br-button[xsmall]{--button-size:var(--button-xsmall)}.br-button.is-small,.br-button.small,.br-button[small]{--button-size:var(--button-small)}.br-button.is-medium,.br-button.medium,.br-button[medium]{--button-size:var(--button-medium)}.br-button.is-large,.br-button.large,.br-button[large]{--button-size:var(--button-large)}.br-button.is-primary,.br-button.primary,.br-button[primary]{--interactive-rgb:var(--rgb-secondary-01);--button-background:var(--color-primary-default);--button-color:var(--color-secondary-01)}.br-button.is-primary.inverted,.br-button.is-primary.is-inverted,.br-button.is-primary[inverted],.br-button.primary.inverted,.br-button.primary.is-inverted,.br-button.primary[inverted],.br-button[primary].inverted,.br-button[primary].is-inverted,.br-button[primary][inverted]{--interactive-rgb:var(--rgb-primary-default);--hover:var(--surface-opacity-xs,0.16);--button-background:var(--color-secondary-01);--button-color:var(--color-primary-default)}.br-button.is-secondary,.br-button.secondary,.br-button[secondary]{--button-background:var(--color-secondary-01);--button-border:var(--color-primary-default)}.br-button.is-secondary.inverted,.br-button.is-secondary.is-inverted,.br-button.is-secondary[inverted],.br-button.secondary.inverted,.br-button.secondary.is-inverted,.br-button.secondary[inverted],.br-button[secondary].inverted,.br-button[secondary].is-inverted,.br-button[secondary][inverted]{--hover:var(--surface-opacity-xs,0.16);--button-background:var(--color-primary-default);--button-border:var(--color-secondary-01);--button-color:var(--color-secondary-01)}.br-button.inverted,.br-button.is-inverted,.br-button[inverted]{--interactive:var(--color-secondary-01);--interactive-rgb:var(--rgb-secondary-01);--hover:var(--surface-opacity-sm,0.3);--focus-color:var(--color-support-10)}.br-button.danger,.br-button.is-danger,.br-button[danger]{--button-background:var(--color-danger);--button-color:var(--color-secondary-01)}.br-button.is-success,.br-button.success,.br-button[success]{--button-background:var(--color-success);--button-color:var(--color-secondary-01)}.br-button.is-warning,.br-button.warning,.br-button[warning]{--button-background:var(--color-warning)}.br-button.info,.br-button.is-info,.br-button[info]{--button-background:var(--color-info);--button-color:var(--color-secondary-01)}.br-button:disabled{cursor:not-allowed}.br-button:not(:disabled):focus{outline:none}.br-button:not(:disabled).focus-visible,.br-button:not(:disabled):focus-visible{outline-color:var(--focus-color);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-button:not(:disabled):not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)))}.br-button:not(:disabled):not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)))}.br-button.active,.br-button.is-active,.br-button[active]{--button-background:var(--active);--button-color:var(--color-secondary-01)}.br-button.active:hover,.br-button.is-active:hover,.br-button[active]:hover{--interactive-rgb:var(--rgb-secondary-01);--hover:var(--surface-opacity-sm,0.3)}.br-button.is-loading:after,.br-button.loading:after,.br-button[loading]:after{border-left-color:var(--button-color);border-bottom-color:rgba(0,0,0,0);border-right-color:var(--button-color);border-top-color:var(--button-color);border-style:solid}.br-button.is-loading.danger:after,.br-button.is-loading.info:after,.br-button.is-loading.primary:after,.br-button.is-loading.success:after,.br-button.loading.danger:after,.br-button.loading.info:after,.br-button.loading.primary:after,.br-button.loading.success:after,.br-button[loading].danger:after,.br-button[loading].info:after,.br-button[loading].primary:after,.br-button[loading].success:after{border-left-color:var(--button-color);border-bottom-color:rgba(0,0,0,0);border-right-color:var(--button-color);border-top-color:var(--button-color)}
/*# sourceMappingURL=button.min.min.css.map */
\ No newline at end of file
dist/components/button/button.min.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/button/_button.scss","webpack://./src/partial/scss/mixins/_button.scss","webpack://./node_modules/bootstrap/scss/mixins/_breakpoints.scss","webpack://./src/partial/scss/mixins/_states.scss"],"names":[],"mappings":"AAEA,WCUE,iCAAA,CACA,6BAAA,CACA,iCAAA,CACA,qBAAA,CACA,+CAAA,CACA,iDAAA,CACA,oBAAA,CACA,mBAAA,CACA,oBAAA,CACA,mBAAA,CACA,kCAAA,CACA,0CAAA,CACA,iBAAA,CAIA,4CAAA,CACA,kBAAA,CACA,yCAAA,CACA,qCAAA,CACA,kCAAA,CACA,yBAAA,CACA,cAAA,CACA,mBAAA,CACA,iCAAA,CACA,qCAAA,CACA,yBAAA,CACA,sBAAA,CACA,6BAAA,CACA,iBAAA,CACA,qBAAA,CACA,kBAAA,CACA,UDbF,CCeE,eACE,4BDbJ,CCkBE,iBACE,UDhBJ,CEuBI,yBDHE,oBACE,UDjBN,CCmBI,mBACE,UDjBN,CACF,CEeI,yBDHE,oBACE,UDTN,CCWI,mBACE,UDTN,CACF,CEOI,0BDHE,oBACE,UDDN,CCGI,mBACE,UDDN,CACF,CEDI,0BDHE,oBACE,UDON,CCLI,mBACE,UDON,CACF,CCDE,0DAGE,iBAAA,CACA,SAAA,CACA,wBDCJ,CCKI,0DAGE,kCDLN,CCEI,uDAGE,iCDFN,CCDI,0DAGE,kCDCN,CCJI,uDAGE,iCDIN,CCEE,6DAGE,yCAAA,CACA,gDAAA,CACA,wCDFJ,CCII,oRAGE,4CAAA,CACA,sCAAA,CACA,6CAAA,CACA,2CDJN,CCQE,mEAGE,6CAAA,CACA,4CDRJ,CCUI,sSAGE,sCAAA,CACA,gDAAA,CACA,yCAAA,CACA,wCDVN,CCcE,gEAGE,uCAAA,CACA,yCAAA,CACA,qCAAA,CACA,qCDdJ,CCoBI,0DAGE,uCAAA,CAEE,wCDrBR,CCgBI,6DAGE,wCAAA,CAEE,wCDjBR,CCYI,6DAGE,wCDZN,CCSI,oDAGE,qCAAA,CAEE,wCDVR,CCiBE,oBACE,kBDfJ,CGrGE,gCACE,YHuGJ,CGpGE,gFAEE,gCAAA,CACA,kCAAA,CACA,gCAAA,CACA,gCHqGJ,CG/HI,+CACE,qHHiIN,CG5HI,gDACE,yHH8HN,CCQE,0DAGE,iCAAA,CACA,wCDRJ,CCUI,4EACE,yCAAA,CACA,qCDRN,CCeI,+EACE,qCAAA,CAAA,iCAAA,CAAA,sCAAA,CAAA,oCAAA,CACA,kBDbN,CCoBM,gZACE,qCAAA,CAAA,iCAAA,CAAA,sCAAA,CAAA,oCDlBR","file":"button.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n.#{$prefix}button {\n @include button;\n}\n","@mixin button {\n @include button-tokens;\n @include button-base;\n @include button-block;\n @include button-circle;\n @include button-sizes;\n @include button-emphasis;\n @include button-colors;\n @include button-states;\n}\n\n@mixin button-tokens {\n --button-background: transparent;\n --button-border: transparent;\n --button-color: var(--interactive);\n --button-radius: 100em;\n --button-font-size: var(--font-size-scale-up-01);\n --button-font-weight: var(--font-weight-semi-bold);\n --button-xsmall: 24px;\n --button-small: 32px;\n --button-medium: 40px;\n --button-large: 48px;\n --button-size: var(--button-medium);\n --button-padding: 0 var(--spacing-scale-3x);\n --button-img: 20px;\n}\n\n@mixin button-base {\n --interactive-rgb: var(--rgb-primary-default);\n align-items: center;\n background-color: var(--button-background);\n border: 1px solid var(--button-border);\n border-radius: var(--button-radius);\n color: var(--button-color);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n height: var(--button-size);\n justify-content: center;\n padding: var(--button-padding);\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n width: auto;\n\n img {\n max-height: var(--button-img);\n }\n}\n\n@mixin button-block {\n &.block {\n width: 100%;\n }\n @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n @include media-breakpoint-up(#{$breakpoint}) {\n &.block-#{$breakpoint} {\n width: 100%;\n }\n &.auto-#{$breakpoint} {\n width: auto;\n }\n }\n }\n}\n\n@mixin button-circle {\n &.circle,\n &[circle],\n &.is-circle {\n border-radius: 50%;\n padding: 0;\n width: var(--button-size);\n }\n}\n\n@mixin button-sizes {\n @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n &.#{$size},\n &[#{$size}],\n &.is-#{$size} {\n --button-size: var(--button-#{$size});\n }\n }\n}\n\n@mixin button-emphasis {\n &.primary,\n &[primary],\n &.is-primary {\n --interactive-rgb: var(--rgb-secondary-01);\n --button-background: var(--color-primary-default);\n --button-color: var(--color-secondary-01);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive-rgb: var(--rgb-primary-default);\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-secondary-01);\n --button-color: var(--color-primary-default);\n }\n }\n\n &.secondary,\n &[secondary],\n &.is-secondary {\n --button-background: var(--color-secondary-01);\n --button-border: var(--color-primary-default);\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --hover: var(--surface-opacity-xs, 0.16);\n --button-background: var(--color-primary-default);\n --button-border: var(--color-secondary-01);\n --button-color: var(--color-secondary-01);\n }\n }\n\n &.inverted,\n &.is-inverted,\n &[inverted] {\n --interactive: var(--color-secondary-01);\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n --focus-color: var(--color-support-10);\n }\n}\n\n@mixin button-colors {\n @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n &.#{$color},\n &[#{$color}],\n &.is-#{$color} {\n --button-background: var(--color-#{$color});\n @if $color != \"warning\" {\n --button-color: var(--color-secondary-01);\n }\n }\n }\n}\n\n@mixin button-states {\n &:disabled {\n cursor: not-allowed;\n }\n\n &:not(:disabled) {\n @include focus;\n @include hover;\n }\n\n &.active,\n &.is-active,\n &[active] {\n --button-background: var(--active);\n --button-color: var(--color-secondary-01);\n\n &:hover {\n --interactive-rgb: var(--rgb-secondary-01);\n --hover: var(--surface-opacity-sm, 0.3);\n }\n }\n\n &.loading,\n &[loading],\n &.is-loading {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n border-style: solid;\n }\n\n &.primary,\n &.danger,\n &.success,\n &.info {\n &::after {\n border-color: var(--button-color) var(--button-color) transparent;\n }\n }\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Hover\n@mixin hover {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n }\n &:active {\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--pressed)),\n rgba(var(--interactive-rgb), var(--pressed))\n );\n }\n }\n}\n\n// Focus\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus-color);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n@mixin focus-shadow {\n border-color: var(--focus-color);\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);\n outline: none;\n}\n\n// Ativo\n@mixin active {\n background: var(--active);\n color: var(--color-secondary-01);\n}\n\n// Dark mode\n@mixin dark-mode {\n --text-color: var(--color-secondary-01);\n --interactive: var(--color-primary-pastel-01);\n --interactive-rgb: var(--rgb-primary-pastel-01);\n --visited: var(--color-secondary-04);\n --hover: var(--surface-opacity-sm, 0.3);\n --pressed: var(--surface-opacity-lg, 0.65);\n --focus-color: var(--color-support-10);\n --active: var(--color-secondary-01);\n}\n"]}
\ No newline at end of file
dist/components/button/examples.html 0 → 100644
View file @ eae2f2ee
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Botão</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<p class="h5 pt-5">Ênfase</p>
<div>
<button class="br-button primary mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city mr-1" aria-hidden="true"></i>Botão
</button>
<button class="br-button mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
</div>
<div class="mt-3">
<button class="br-button primary circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button secondary circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
</div>
<p class="h5 mt-5">Fundo escuro</p>
<div class="p-3 bg-primary-darken-02">
<div>
<button class="br-button primary inverted mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
<button class="br-button secondary inverted mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city mr-1" aria-hidden="true"></i>Botão
</button>
<button class="br-button inverted mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
</div>
<div class="mt-3">
<button class="br-button primary inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button secondary inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="h5 mt-5">Botão bloco</p>
<button class="br-button secondary block" type="button">Botão
</button>
<p class="h5 mt-5">Densidade</p>
<div>
<button class="br-button secondary large mt-3 mt-sm-0 ml-sm-3" type="button">Baixa
</button>
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button">Média
</button>
<button class="br-button secondary small mt-3 mt-sm-0 ml-sm-3" type="button">Alta
</button>
</div>
<div class="mt-3">
<button class="br-button secondary circle large mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button secondary circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
<button class="br-button secondary circle small mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
</div>
<p class="h5 mt-5">Estados</p>
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button" disabled="disabled">Desativado
</button>
<div class="mt-3 mt-sm-0 d-sm-inline-block ml-sm-3">
<button class="br-button secondary active" type="button">Ativado
</button>
</div>
<div class="mt-3 mt-sm-0 d-sm-inline-block ml-sm-3">
<button class="br-button secondary loading" type="button">Carregando
</button>
</div>
</div>
<script src="../../dsgov.js"></script>
</body>
</html>
\ No newline at end of file
dist/components/button/examples/button-primary-circle-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button primary inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-primary-circle.html 0 → 100644
View file @ eae2f2ee
<button class="br-button primary circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-primary-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button primary inverted mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-primary.html 0 → 100644
View file @ eae2f2ee
<button class="br-button primary mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-active.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary active" type="button">Ativado
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-block.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary block" type="button">Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-circle-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-circle-large.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary circle large mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-circle-small.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary circle small mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-circle.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-disabled.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button" disabled="disabled">Desativado
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary inverted mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city mr-1" aria-hidden="true"></i>Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-large.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary large mt-3 mt-sm-0 ml-sm-3" type="button">Baixa
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-loading.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary loading" type="button">Carregando
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-medium.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button">Média
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary-small.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary small mt-3 mt-sm-0 ml-sm-3" type="button">Alta
</button>
\ No newline at end of file
dist/components/button/examples/button-secondary.html 0 → 100644
View file @ eae2f2ee
<button class="br-button secondary mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city mr-1" aria-hidden="true"></i>Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-tertiary-circle-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button inverted circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-tertiary-circle.html 0 → 100644
View file @ eae2f2ee
<button class="br-button circle mt-3 mt-sm-0 ml-sm-3" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-city" aria-hidden="true"></i>
</button>
\ No newline at end of file
dist/components/button/examples/button-tertiary-inverted.html 0 → 100644
View file @ eae2f2ee
<button class="br-button inverted mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
\ No newline at end of file
dist/components/button/examples/button-tertiary.html 0 → 100644
View file @ eae2f2ee
<button class="br-button mt-3 mt-sm-0 ml-sm-3" type="button">Botão
</button>
\ No newline at end of file
dist/components/card/card.css 0 → 100644
View file @ eae2f2ee
.br-card {
--card-background: var(--color-secondary-01);
--card-back-background: var(--color-secondary-07);
--card-margin: var(--spacing-scale-2x);
--card-padding: var(--spacing-scale-2x);
--card-shadow: var(--surface-shadow-sm);
background: var(--card-background);
box-shadow: var(--card-shadow);
color: var(--card-color);
margin-bottom: var(--card-margin);
}
.br-card .card-content,
.br-card .front .content,
.br-card .back .content {
padding: var(--card-padding);
}
.br-card .card-content *:last-child,
.br-card .front .content *:last-child,
.br-card .back .content *:last-child {
margin-bottom: 0;
}
.br-card .front .header,
.br-card .back .header,
.br-card .card-header {
padding: var(--card-padding) var(--card-padding) 0;
}
.br-card .front .footer,
.br-card .back .footer,
.br-card .card-footer {
padding: 0 var(--card-padding) var(--card-padding);
}
.br-card .back {
background: var(--card-back-background);
color: var(--color-secondary-01);
}
.br-card .br-list .br-item {
white-space: normal;
}
.br-card .br-button[aria-expanded=true] {
transform: rotate(180deg);
}
/*# sourceMappingURL=card.css.map*/
\ No newline at end of file
dist/components/card/card.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///./src/components/card/_card.scss"],"names":[],"mappings":"AAgDA;EAvCE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;AAVF;AAWE;;;EAGE;AATJ;AAUI;;;EACE;AANN;AASE;;;EAGE;AAPJ;AASE;;;EAGE;AAPJ;AAYE;EACE;EACA;AAVJ;AA2FI;EAEE;AA1FN;AA8FI;EACE;AA5FN,C","file":"components/card/card.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin card {\n @include card-tokens;\n @include card-base;\n @include card-back;\n}\n\n@mixin card-tokens {\n --card-background: var(--color-secondary-01);\n --card-back-background: var(--color-secondary-07);\n --card-margin: var(--spacing-scale-2x);\n --card-padding: var(--spacing-scale-2x);\n --card-shadow: var(--surface-shadow-sm);\n}\n\n@mixin card-base {\n background: var(--card-background);\n box-shadow: var(--card-shadow);\n color: var(--card-color);\n margin-bottom: var(--card-margin);\n .card-content,\n .front .content,\n .back .content {\n padding: var(--card-padding);\n *:last-child {\n margin-bottom: 0;\n }\n }\n .front .header,\n .back .header,\n .card-header {\n padding: var(--card-padding) var(--card-padding) 0;\n }\n .front .footer,\n .back .footer,\n .card-footer {\n padding: 0 var(--card-padding) var(--card-padding);\n }\n}\n\n@mixin card-back {\n .back {\n background: var(--card-back-background);\n color: var(--color-secondary-01);\n }\n}\n\n.#{$prefix}card {\n @include card;\n // box-shadow: 0 3px 6px rgba(v(rgb-secondary-09), 0.16);\n // margin-bottom: v(spacing-scale-2x);\n // > .front:not([hidden]),\n // > .back:not([hidden]) {\n // background: v(bg-color);\n // color: v(text-color);\n // display: flex;\n // flex-flow: column;\n // > .header,\n // > .content,\n // > .footer {\n // padding: v(spacing-scale-2x);\n // &:empty {\n // padding: 0;\n // }\n // *:last-child {\n // margin-bottom: 0;\n // }\n // }\n // > .content {\n // flex: 1;\n // }\n // > .header + .content,\n // > .content + .footer {\n // padding-top: 0;\n // }\n // }\n // > .back {\n // --bg-color: var(--color-secondary-07);\n // --text-color: var(--color-secondary-01);\n // }\n // &[flipped] {\n // > .front,\n // > .back {\n // overflow: hidden;\n // transition: opacity 600ms ease;\n // }\n // }\n // &[flipped=\"on\"] {\n // > .front {\n // height: 0;\n // opacity: 0;\n // }\n // .br-button.flip {\n // color: v(button-color);\n // &:hover {\n // color: v(color-secondary-01);\n // }\n // }\n // }\n // &[flipped=\"off\"] {\n // > .back {\n // height: 0;\n // opacity: 0;\n // }\n // }\n // &[expanded] {\n // .expanded {\n // overflow: hidden;\n // }\n // }\n // &[expanded=\"on\"] {\n // .expanded {\n // height: 100%;\n // opacity: 1;\n // }\n // }\n // &[expanded=\"off\"] {\n // .expanded {\n // opacity: 0;\n // height: 0;\n // z-index: -1;\n // }\n // }\n .#{$prefix}list {\n .#{$prefix}item {\n // width: auto;\n white-space: normal;\n }\n }\n .#{$prefix}button {\n &[aria-expanded=\"true\"] {\n transform: rotate(180deg);\n }\n }\n}\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/card/card.js 0 → 100644
View file @ eae2f2ee
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 146);
/******/ })
/************************************************************************/
/******/ ({
/***/ 146:
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(9);
__webpack_require__(43);
__webpack_require__(44);
__webpack_require__(147);
__webpack_require__(148);
__webpack_require__(149);
__webpack_require__(150);
module.exports = __webpack_require__(151);
/***/ }),
/***/ 147:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples/card-completo.html");
/***/ }),
/***/ 148:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples/card-desativado.html");
/***/ }),
/***/ 149:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples/card-expansao.html");
/***/ }),
/***/ 150:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples/card-flip.html");
/***/ }),
/***/ 151:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples/card-simples.html");
/***/ }),
/***/ 43:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 44:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "components/card/examples.html");
/***/ }),
/***/ 9:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
class BRCard {
constructor(name, component, id) {
this.name = name
this.component = component
this.component.setAttribute('id', `card${id}`)
this._setBehavior()
new BRCardFlip()
new BRCardCollapse()
}
_setBehavior() {
this._setFlipBehavior()
this._setExpandBehavior()
this._setDragBehavior()
}
_setFlipBehavior() {
for (const flip of this.component.querySelectorAll('button.flip')) {
flip.addEventListener('click', () => {
if (this.component.getAttribute('flipped') === 'off') {
this.component.setAttribute('flipped', 'on')
} else {
this.component.setAttribute('flipped', 'off')
}
})
}
}
_setExpandBehavior() {
for (const expand of this.component.querySelectorAll('button.expand')) {
expand.addEventListener('click', () => {
if (this.component.getAttribute('expanded') === 'off') {
this.component.setAttribute('expanded', 'on')
} else {
this.component.setAttribute('expanded', 'off')
}
})
}
}
_setDragBehavior() {
for (const img of this.component.querySelectorAll('img')) {
img.setAttribute('draggable', 'false')
}
for (const link of this.component.querySelectorAll('a')) {
link.setAttribute('draggable', 'false')
}
this.component.addEventListener('dragstart', (event) => {
event.stopPropagation()
event.dataTransfer.setData(
'text/plain',
this.component.getAttribute('id')
)
event.dropEffect = 'move'
})
}
}
class BRCardFlip {
constructor() {
this._setBehavior()
}
_setBehavior() {
const cardFlippers = document.querySelectorAll('.br-card[data-flip]')
for (const cardFlip of cardFlippers) {
const cardFront = cardFlip.querySelector('.front')
const cardBack = cardFlip.querySelector('.back')
const cardFrontTrigger = cardFlip.querySelector(
'.front [data-toggle="flip"]'
)
const cardBackTrigger = cardFlip.querySelector(
'.back [data-toggle="flip"]'
)
this._cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger)
this._setCardFrontTrigger(
cardFrontTrigger,
cardFront,
cardBack,
cardBackTrigger
)
this._setCardBackTrigger(
cardBackTrigger,
cardFront,
cardBack,
cardFrontTrigger
)
}
}
_setCardFrontTrigger(cardFrontTrigger, cardFront, cardBack, cardBackTrigger) {
cardFrontTrigger.addEventListener('click', () => {
return this._cardFlipShowBack(
cardFront,
cardBack,
cardFrontTrigger,
cardBackTrigger
)
})
}
_setCardBackTrigger(cardBackTrigger, cardFront, cardBack, cardFrontTrigger) {
cardBackTrigger.addEventListener('click', () => {
return this._cardFlipShowFront(
cardFront,
cardBack,
cardFrontTrigger,
cardBackTrigger
)
})
}
_cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {
this._cardFlipShowFront(
cardFront,
cardBack,
cardFrontTrigger,
cardBackTrigger
)
}
_cardFlipShowFront(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {
cardFront.removeAttribute('hidden')
cardFront.setAttribute('aria-hidden', 'false')
cardFrontTrigger.setAttribute('aria-expanded', 'true')
cardBack.setAttribute('aria-hidden', 'true')
cardBack.setAttribute('hidden', '')
cardBackTrigger.setAttribute('aria-expanded', 'false')
}
_cardFlipShowBack(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {
cardFront.setAttribute('hidden', '')
cardFront.setAttribute('aria-hidden', 'true')
cardFrontTrigger.setAttribute('aria-expanded', 'false')
cardBack.removeAttribute('hidden')
cardBack.setAttribute('aria-hidden', 'false')
cardBackTrigger.setAttribute('aria-expanded', 'true')
}
}
class BRCardCollapse {
constructor() {
this._setBehavior()
}
_setBehavior() {
// Padrão de toggle no card
const cardToggler = document.querySelector('[data-toggle="collapse"]')
if (cardToggler !== null) {
const cardTogglerTarget = document.querySelector(
cardToggler.dataset.target
)
this._cardCollapseInit(cardToggler, cardTogglerTarget)
cardToggler.addEventListener('click', () => {
if (cardToggler.getAttribute('aria-expanded') === 'true') {
this._cardHiddenContent(cardToggler, cardTogglerTarget)
} else {
this._cardShowContent(cardToggler, cardTogglerTarget)
}
})
}
}
_cardShowContent(cardToggler, cardTogglerTarget) {
cardToggler.setAttribute('aria-expanded', 'true')
cardTogglerTarget.setAttribute('aria-hidden', 'true')
cardTogglerTarget.removeAttribute('hidden')
}
_cardHiddenContent(cardToggler, cardTogglerTarget) {
cardToggler.setAttribute('aria-expanded', 'false')
cardTogglerTarget.setAttribute('aria-hidden', 'false')
cardTogglerTarget.setAttribute('hidden', '')
}
_cardCollapseInit(cardToggler, cardTogglerTarget) {
if (cardToggler.dataset.visible) {
if (cardToggler.dataset.visible === 'true') {
this._cardShowContent(cardToggler, cardTogglerTarget)
} else {
this._cardHiddenContent(cardToggler, cardTogglerTarget)
}
} else {
this._cardHiddenContent(cardToggler, cardTogglerTarget)
}
}
}
const listCard = []
for (const [index, brCard] of window.document
.querySelectorAll('.br-card')
.entries()) {
listCard.push(new BRCard('br-card', brCard, index))
}
/* harmony default export */ __webpack_exports__["default"] = (BRCard);
/***/ })
/******/ });
//# sourceMappingURL=card.js.map
\ No newline at end of file
dist/components/card/card.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/card/examples/card-completo.pug","webpack:///./src/components/card/examples/card-desativado.pug","webpack:///./src/components/card/examples/card-expansao.pug","webpack:///./src/components/card/examples/card-flip.pug","webpack:///./src/components/card/examples/card-simples.pug","webpack:///./src/components/card/_card.scss","webpack:///./src/components/card/examples.pug","webpack:///./src/components/card/card.js"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;;AClFA;AAAe,oFAAuB,gDAAgD,E;;;;;;;;ACAtF;AAAe,oFAAuB,kDAAkD,E;;;;;;;;ACAxF;AAAe,oFAAuB,gDAAgD,E;;;;;;;;ACAtF;AAAe,oFAAuB,4CAA4C,E;;;;;;;;ACAlF;AAAe,oFAAuB,+CAA+C,E;;;;;;;;ACArF;AAAA;;;;;;;;;ACAA;AAAe,oFAAuB,kCAAkC,E;;;;;;;;ACAxE;AAAA;AACA;AACA;AACA;AACA,6CAA6C,GAAG;AAChD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEe,qEAAM","file":"components/card/card.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 146);\n","export default __webpack_public_path__ + \"components/card/examples/card-completo.html\";","export default __webpack_public_path__ + \"components/card/examples/card-desativado.html\";","export default __webpack_public_path__ + \"components/card/examples/card-expansao.html\";","export default __webpack_public_path__ + \"components/card/examples/card-flip.html\";","export default __webpack_public_path__ + \"components/card/examples/card-simples.html\";","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/card/examples.html\";","class BRCard {\n constructor(name, component, id) {\n this.name = name\n this.component = component\n this.component.setAttribute('id', `card${id}`)\n this._setBehavior()\n new BRCardFlip()\n new BRCardCollapse()\n }\n\n _setBehavior() {\n this._setFlipBehavior()\n this._setExpandBehavior()\n this._setDragBehavior()\n }\n\n _setFlipBehavior() {\n for (const flip of this.component.querySelectorAll('button.flip')) {\n flip.addEventListener('click', () => {\n if (this.component.getAttribute('flipped') === 'off') {\n this.component.setAttribute('flipped', 'on')\n } else {\n this.component.setAttribute('flipped', 'off')\n }\n })\n }\n }\n\n _setExpandBehavior() {\n for (const expand of this.component.querySelectorAll('button.expand')) {\n expand.addEventListener('click', () => {\n if (this.component.getAttribute('expanded') === 'off') {\n this.component.setAttribute('expanded', 'on')\n } else {\n this.component.setAttribute('expanded', 'off')\n }\n })\n }\n }\n\n _setDragBehavior() {\n for (const img of this.component.querySelectorAll('img')) {\n img.setAttribute('draggable', 'false')\n }\n for (const link of this.component.querySelectorAll('a')) {\n link.setAttribute('draggable', 'false')\n }\n this.component.addEventListener('dragstart', (event) => {\n event.stopPropagation()\n event.dataTransfer.setData(\n 'text/plain',\n this.component.getAttribute('id')\n )\n event.dropEffect = 'move'\n })\n }\n}\n\nclass BRCardFlip {\n constructor() {\n this._setBehavior()\n }\n\n _setBehavior() {\n const cardFlippers = document.querySelectorAll('.br-card[data-flip]')\n\n for (const cardFlip of cardFlippers) {\n const cardFront = cardFlip.querySelector('.front')\n const cardBack = cardFlip.querySelector('.back')\n const cardFrontTrigger = cardFlip.querySelector(\n '.front [data-toggle=\"flip\"]'\n )\n const cardBackTrigger = cardFlip.querySelector(\n '.back [data-toggle=\"flip\"]'\n )\n this._cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger)\n this._setCardFrontTrigger(\n cardFrontTrigger,\n cardFront,\n cardBack,\n cardBackTrigger\n )\n this._setCardBackTrigger(\n cardBackTrigger,\n cardFront,\n cardBack,\n cardFrontTrigger\n )\n }\n }\n\n _setCardFrontTrigger(cardFrontTrigger, cardFront, cardBack, cardBackTrigger) {\n cardFrontTrigger.addEventListener('click', () => {\n return this._cardFlipShowBack(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n })\n }\n\n _setCardBackTrigger(cardBackTrigger, cardFront, cardBack, cardFrontTrigger) {\n cardBackTrigger.addEventListener('click', () => {\n return this._cardFlipShowFront(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n })\n }\n\n _cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n this._cardFlipShowFront(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n }\n\n _cardFlipShowFront(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n cardFront.removeAttribute('hidden')\n cardFront.setAttribute('aria-hidden', 'false')\n cardFrontTrigger.setAttribute('aria-expanded', 'true')\n cardBack.setAttribute('aria-hidden', 'true')\n cardBack.setAttribute('hidden', '')\n cardBackTrigger.setAttribute('aria-expanded', 'false')\n }\n\n _cardFlipShowBack(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n cardFront.setAttribute('hidden', '')\n cardFront.setAttribute('aria-hidden', 'true')\n cardFrontTrigger.setAttribute('aria-expanded', 'false')\n cardBack.removeAttribute('hidden')\n cardBack.setAttribute('aria-hidden', 'false')\n cardBackTrigger.setAttribute('aria-expanded', 'true')\n }\n}\n\nclass BRCardCollapse {\n constructor() {\n this._setBehavior()\n }\n\n _setBehavior() {\n // Padrão de toggle no card\n const cardToggler = document.querySelector('[data-toggle=\"collapse\"]')\n if (cardToggler !== null) {\n const cardTogglerTarget = document.querySelector(\n cardToggler.dataset.target\n )\n this._cardCollapseInit(cardToggler, cardTogglerTarget)\n cardToggler.addEventListener('click', () => {\n if (cardToggler.getAttribute('aria-expanded') === 'true') {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n } else {\n this._cardShowContent(cardToggler, cardTogglerTarget)\n }\n })\n }\n }\n\n _cardShowContent(cardToggler, cardTogglerTarget) {\n cardToggler.setAttribute('aria-expanded', 'true')\n cardTogglerTarget.setAttribute('aria-hidden', 'true')\n cardTogglerTarget.removeAttribute('hidden')\n }\n\n _cardHiddenContent(cardToggler, cardTogglerTarget) {\n cardToggler.setAttribute('aria-expanded', 'false')\n cardTogglerTarget.setAttribute('aria-hidden', 'false')\n cardTogglerTarget.setAttribute('hidden', '')\n }\n\n _cardCollapseInit(cardToggler, cardTogglerTarget) {\n if (cardToggler.dataset.visible) {\n if (cardToggler.dataset.visible === 'true') {\n this._cardShowContent(cardToggler, cardTogglerTarget)\n } else {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n }\n } else {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n }\n }\n}\n\nconst listCard = []\nfor (const [index, brCard] of window.document\n .querySelectorAll('.br-card')\n .entries()) {\n listCard.push(new BRCard('br-card', brCard, index))\n}\n\nexport default BRCard\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/card/card.min.css 0 → 100644
View file @ eae2f2ee
.br-card{--card-background:var(--color-secondary-01);--card-back-background:var(--color-secondary-07);--card-margin:var(--spacing-scale-2x);--card-padding:var(--spacing-scale-2x);--card-shadow:var(--surface-shadow-sm);background:var(--card-background);box-shadow:var(--card-shadow);color:var(--card-color);margin-bottom:var(--card-margin)}.br-card .back .content,.br-card .card-content,.br-card .front .content{padding:var(--card-padding)}.br-card .back .content :last-child,.br-card .card-content :last-child,.br-card .front .content :last-child{margin-bottom:0}.br-card .back .header,.br-card .card-header,.br-card .front .header{padding:var(--card-padding) var(--card-padding) 0}.br-card .back .footer,.br-card .card-footer,.br-card .front .footer{padding:0 var(--card-padding) var(--card-padding)}.br-card .back{background:var(--card-back-background);color:var(--color-secondary-01)}.br-card .br-list .br-item{white-space:normal}.br-card .br-button[aria-expanded=true]{transform:rotate(180deg)}
/*# sourceMappingURL=card.min.css.map */
\ No newline at end of file
dist/components/card/card.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/card/_card.scss"],"names":[],"mappings":"AAgDA,SAvCE,2CAAA,CACA,gDAAA,CACA,qCAAA,CACA,sCAAA,CACA,sCAAA,CAIA,iCAAA,CACA,6BAAA,CACA,uBAAA,CACA,gCAVF,CAWE,wEAGE,2BATJ,CAUI,4GACE,eANN,CASE,qEAGE,iDAPJ,CASE,qEAGE,iDAPJ,CAYE,eACE,sCAAA,CACA,+BAVJ,CA2FI,2BAEE,kBA1FN,CA8FI,wCACE,wBA5FN","file":"card.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin card {\n @include card-tokens;\n @include card-base;\n @include card-back;\n}\n\n@mixin card-tokens {\n --card-background: var(--color-secondary-01);\n --card-back-background: var(--color-secondary-07);\n --card-margin: var(--spacing-scale-2x);\n --card-padding: var(--spacing-scale-2x);\n --card-shadow: var(--surface-shadow-sm);\n}\n\n@mixin card-base {\n background: var(--card-background);\n box-shadow: var(--card-shadow);\n color: var(--card-color);\n margin-bottom: var(--card-margin);\n .card-content,\n .front .content,\n .back .content {\n padding: var(--card-padding);\n *:last-child {\n margin-bottom: 0;\n }\n }\n .front .header,\n .back .header,\n .card-header {\n padding: var(--card-padding) var(--card-padding) 0;\n }\n .front .footer,\n .back .footer,\n .card-footer {\n padding: 0 var(--card-padding) var(--card-padding);\n }\n}\n\n@mixin card-back {\n .back {\n background: var(--card-back-background);\n color: var(--color-secondary-01);\n }\n}\n\n.#{$prefix}card {\n @include card;\n // box-shadow: 0 3px 6px rgba(v(rgb-secondary-09), 0.16);\n // margin-bottom: v(spacing-scale-2x);\n // > .front:not([hidden]),\n // > .back:not([hidden]) {\n // background: v(bg-color);\n // color: v(text-color);\n // display: flex;\n // flex-flow: column;\n // > .header,\n // > .content,\n // > .footer {\n // padding: v(spacing-scale-2x);\n // &:empty {\n // padding: 0;\n // }\n // *:last-child {\n // margin-bottom: 0;\n // }\n // }\n // > .content {\n // flex: 1;\n // }\n // > .header + .content,\n // > .content + .footer {\n // padding-top: 0;\n // }\n // }\n // > .back {\n // --bg-color: var(--color-secondary-07);\n // --text-color: var(--color-secondary-01);\n // }\n // &[flipped] {\n // > .front,\n // > .back {\n // overflow: hidden;\n // transition: opacity 600ms ease;\n // }\n // }\n // &[flipped=\"on\"] {\n // > .front {\n // height: 0;\n // opacity: 0;\n // }\n // .br-button.flip {\n // color: v(button-color);\n // &:hover {\n // color: v(color-secondary-01);\n // }\n // }\n // }\n // &[flipped=\"off\"] {\n // > .back {\n // height: 0;\n // opacity: 0;\n // }\n // }\n // &[expanded] {\n // .expanded {\n // overflow: hidden;\n // }\n // }\n // &[expanded=\"on\"] {\n // .expanded {\n // height: 100%;\n // opacity: 1;\n // }\n // }\n // &[expanded=\"off\"] {\n // .expanded {\n // opacity: 0;\n // height: 0;\n // z-index: -1;\n // }\n // }\n .#{$prefix}list {\n .#{$prefix}item {\n // width: auto;\n white-space: normal;\n }\n }\n .#{$prefix}button {\n &[aria-expanded=\"true\"] {\n transform: rotate(180deg);\n }\n }\n}\n"]}
\ No newline at end of file
dist/components/card/card.min.js 0 → 100644
View file @ eae2f2ee
!function(t){var e={};function r(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=e,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(i,n,function(e){return t[e]}.bind(null,n));return i},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=152)}({152:function(t,e,r){r(9),r(43),t.exports=r(44)},43:function(t,e,r){"use strict";r.r(e)},44:function(t,e,r){"use strict";r.r(e),e.default=r.p+"components/card/examples.html"},9:function(t,e,r){"use strict";r.r(e);class i{constructor(t,e,r){this.name=t,this.component=e,this.component.setAttribute("id",`card${r}`),this._setBehavior(),new n,new o}_setBehavior(){this._setFlipBehavior(),this._setExpandBehavior(),this._setDragBehavior()}_setFlipBehavior(){for(const t of this.component.querySelectorAll("button.flip"))t.addEventListener("click",(()=>{"off"===this.component.getAttribute("flipped")?this.component.setAttribute("flipped","on"):this.component.setAttribute("flipped","off")}))}_setExpandBehavior(){for(const t of this.component.querySelectorAll("button.expand"))t.addEventListener("click",(()=>{"off"===this.component.getAttribute("expanded")?this.component.setAttribute("expanded","on"):this.component.setAttribute("expanded","off")}))}_setDragBehavior(){for(const t of this.component.querySelectorAll("img"))t.setAttribute("draggable","false");for(const t of this.component.querySelectorAll("a"))t.setAttribute("draggable","false");this.component.addEventListener("dragstart",(t=>{t.stopPropagation(),t.dataTransfer.setData("text/plain",this.component.getAttribute("id")),t.dropEffect="move"}))}}class n{constructor(){this._setBehavior()}_setBehavior(){const t=document.querySelectorAll(".br-card[data-flip]");for(const e of t){const t=e.querySelector(".front"),r=e.querySelector(".back"),i=e.querySelector('.front [data-toggle="flip"]'),n=e.querySelector('.back [data-toggle="flip"]');this._cardFlipInit(t,r,i,n),this._setCardFrontTrigger(i,t,r,n),this._setCardBackTrigger(n,t,r,i)}}_setCardFrontTrigger(t,e,r,i){t.addEventListener("click",(()=>this._cardFlipShowBack(e,r,t,i)))}_setCardBackTrigger(t,e,r,i){t.addEventListener("click",(()=>this._cardFlipShowFront(e,r,i,t)))}_cardFlipInit(t,e,r,i){this._cardFlipShowFront(t,e,r,i)}_cardFlipShowFront(t,e,r,i){t.removeAttribute("hidden"),t.setAttribute("aria-hidden","false"),r.setAttribute("aria-expanded","true"),e.setAttribute("aria-hidden","true"),e.setAttribute("hidden",""),i.setAttribute("aria-expanded","false")}_cardFlipShowBack(t,e,r,i){t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true"),r.setAttribute("aria-expanded","false"),e.removeAttribute("hidden"),e.setAttribute("aria-hidden","false"),i.setAttribute("aria-expanded","true")}}class o{constructor(){this._setBehavior()}_setBehavior(){const t=document.querySelector('[data-toggle="collapse"]');if(null!==t){const e=document.querySelector(t.dataset.target);this._cardCollapseInit(t,e),t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?this._cardHiddenContent(t,e):this._cardShowContent(t,e)}))}}_cardShowContent(t,e){t.setAttribute("aria-expanded","true"),e.setAttribute("aria-hidden","true"),e.removeAttribute("hidden")}_cardHiddenContent(t,e){t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","false"),e.setAttribute("hidden","")}_cardCollapseInit(t,e){t.dataset.visible&&"true"===t.dataset.visible?this._cardShowContent(t,e):this._cardHiddenContent(t,e)}}const a=[];for(const[t,e]of window.document.querySelectorAll(".br-card").entries())a.push(new i("br-card",e,t));e.default=i}});
//# sourceMappingURL=card.min.js.map
\ No newline at end of file
dist/components/card/card.min.js.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/card/_card.scss","webpack:///./src/components/card/examples.pug","webpack:///./src/components/card/card.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","BRCard","component","id","this","setAttribute","_setBehavior","BRCardFlip","BRCardCollapse","_setFlipBehavior","_setExpandBehavior","_setDragBehavior","flip","querySelectorAll","addEventListener","getAttribute","expand","img","link","event","stopPropagation","dataTransfer","setData","dropEffect","cardFlippers","document","cardFlip","cardFront","querySelector","cardBack","cardFrontTrigger","cardBackTrigger","_cardFlipInit","_setCardFrontTrigger","_setCardBackTrigger","_cardFlipShowBack","_cardFlipShowFront","removeAttribute","cardToggler","cardTogglerTarget","dataset","target","_cardCollapseInit","_cardHiddenContent","_cardShowContent","visible","listCard","index","brCard","window","entries","push"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,K,kFClFrD,Q,gCCAA,OAAe,cAA0B,iC,+BCAzC,aAAMC,EACJ,YAAYzB,EAAM0B,EAAWC,GAC3BC,KAAK5B,KAAOA,EACZ4B,KAAKF,UAAYA,EACjBE,KAAKF,UAAUG,aAAa,KAAM,OAAOF,KACzCC,KAAKE,eACL,IAAIC,EACJ,IAAIC,EAGN,eACEJ,KAAKK,mBACLL,KAAKM,qBACLN,KAAKO,mBAGP,mBACE,IAAK,MAAMC,KAAQR,KAAKF,UAAUW,iBAAiB,eACjDD,EAAKE,iBAAiB,SAAS,KACkB,QAA3CV,KAAKF,UAAUa,aAAa,WAC9BX,KAAKF,UAAUG,aAAa,UAAW,MAEvCD,KAAKF,UAAUG,aAAa,UAAW,UAM/C,qBACE,IAAK,MAAMW,KAAUZ,KAAKF,UAAUW,iBAAiB,iBACnDG,EAAOF,iBAAiB,SAAS,KACiB,QAA5CV,KAAKF,UAAUa,aAAa,YAC9BX,KAAKF,UAAUG,aAAa,WAAY,MAExCD,KAAKF,UAAUG,aAAa,WAAY,UAMhD,mBACE,IAAK,MAAMY,KAAOb,KAAKF,UAAUW,iBAAiB,OAChDI,EAAIZ,aAAa,YAAa,SAEhC,IAAK,MAAMa,KAAQd,KAAKF,UAAUW,iBAAiB,KACjDK,EAAKb,aAAa,YAAa,SAEjCD,KAAKF,UAAUY,iBAAiB,aAAcK,IAC5CA,EAAMC,kBACND,EAAME,aAAaC,QACjB,aACAlB,KAAKF,UAAUa,aAAa,OAE9BI,EAAMI,WAAa,WAKzB,MAAMhB,EACJ,cACEH,KAAKE,eAGP,eACE,MAAMkB,EAAeC,SAASZ,iBAAiB,uBAE/C,IAAK,MAAMa,KAAYF,EAAc,CACnC,MAAMG,EAAYD,EAASE,cAAc,UACnCC,EAAWH,EAASE,cAAc,SAClCE,EAAmBJ,EAASE,cAChC,+BAEIG,EAAkBL,EAASE,cAC/B,8BAEFxB,KAAK4B,cAAcL,EAAWE,EAAUC,EAAkBC,GAC1D3B,KAAK6B,qBACHH,EACAH,EACAE,EACAE,GAEF3B,KAAK8B,oBACHH,EACAJ,EACAE,EACAC,IAKN,qBAAqBA,EAAkBH,EAAWE,EAAUE,GAC1DD,EAAiBhB,iBAAiB,SAAS,IAClCV,KAAK+B,kBACVR,EACAE,EACAC,EACAC,KAKN,oBAAoBA,EAAiBJ,EAAWE,EAAUC,GACxDC,EAAgBjB,iBAAiB,SAAS,IACjCV,KAAKgC,mBACVT,EACAE,EACAC,EACAC,KAKN,cAAcJ,EAAWE,EAAUC,EAAkBC,GACnD3B,KAAKgC,mBACHT,EACAE,EACAC,EACAC,GAIJ,mBAAmBJ,EAAWE,EAAUC,EAAkBC,GACxDJ,EAAUU,gBAAgB,UAC1BV,EAAUtB,aAAa,cAAe,SACtCyB,EAAiBzB,aAAa,gBAAiB,QAC/CwB,EAASxB,aAAa,cAAe,QACrCwB,EAASxB,aAAa,SAAU,IAChC0B,EAAgB1B,aAAa,gBAAiB,SAGhD,kBAAkBsB,EAAWE,EAAUC,EAAkBC,GACvDJ,EAAUtB,aAAa,SAAU,IACjCsB,EAAUtB,aAAa,cAAe,QACtCyB,EAAiBzB,aAAa,gBAAiB,SAC/CwB,EAASQ,gBAAgB,UACzBR,EAASxB,aAAa,cAAe,SACrC0B,EAAgB1B,aAAa,gBAAiB,SAIlD,MAAMG,EACJ,cACEJ,KAAKE,eAGP,eAEE,MAAMgC,EAAcb,SAASG,cAAc,4BAC3C,GAAoB,OAAhBU,EAAsB,CACxB,MAAMC,EAAoBd,SAASG,cACjCU,EAAYE,QAAQC,QAEtBrC,KAAKsC,kBAAkBJ,EAAaC,GACpCD,EAAYxB,iBAAiB,SAAS,KACc,SAA9CwB,EAAYvB,aAAa,iBAC3BX,KAAKuC,mBAAmBL,EAAaC,GAErCnC,KAAKwC,iBAAiBN,EAAaC,OAM3C,iBAAiBD,EAAaC,GAC5BD,EAAYjC,aAAa,gBAAiB,QAC1CkC,EAAkBlC,aAAa,cAAe,QAC9CkC,EAAkBF,gBAAgB,UAGpC,mBAAmBC,EAAaC,GAC9BD,EAAYjC,aAAa,gBAAiB,SAC1CkC,EAAkBlC,aAAa,cAAe,SAC9CkC,EAAkBlC,aAAa,SAAU,IAG3C,kBAAkBiC,EAAaC,GACzBD,EAAYE,QAAQK,SACc,SAAhCP,EAAYE,QAAQK,QACtBzC,KAAKwC,iBAAiBN,EAAaC,GAKrCnC,KAAKuC,mBAAmBL,EAAaC,IAK3C,MAAMO,EAAW,GACjB,IAAK,MAAOC,EAAOC,KAAWC,OAAOxB,SAClCZ,iBAAiB,YACjBqC,UACDJ,EAASK,KAAK,IAAIlD,EAAO,UAAW+C,EAAQD,IAG/B","file":"components/card/card.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 152);\n","// extracted by mini-css-extract-plugin\nexport {};","export default __webpack_public_path__ + \"components/card/examples.html\";","class BRCard {\n constructor(name, component, id) {\n this.name = name\n this.component = component\n this.component.setAttribute('id', `card${id}`)\n this._setBehavior()\n new BRCardFlip()\n new BRCardCollapse()\n }\n\n _setBehavior() {\n this._setFlipBehavior()\n this._setExpandBehavior()\n this._setDragBehavior()\n }\n\n _setFlipBehavior() {\n for (const flip of this.component.querySelectorAll('button.flip')) {\n flip.addEventListener('click', () => {\n if (this.component.getAttribute('flipped') === 'off') {\n this.component.setAttribute('flipped', 'on')\n } else {\n this.component.setAttribute('flipped', 'off')\n }\n })\n }\n }\n\n _setExpandBehavior() {\n for (const expand of this.component.querySelectorAll('button.expand')) {\n expand.addEventListener('click', () => {\n if (this.component.getAttribute('expanded') === 'off') {\n this.component.setAttribute('expanded', 'on')\n } else {\n this.component.setAttribute('expanded', 'off')\n }\n })\n }\n }\n\n _setDragBehavior() {\n for (const img of this.component.querySelectorAll('img')) {\n img.setAttribute('draggable', 'false')\n }\n for (const link of this.component.querySelectorAll('a')) {\n link.setAttribute('draggable', 'false')\n }\n this.component.addEventListener('dragstart', (event) => {\n event.stopPropagation()\n event.dataTransfer.setData(\n 'text/plain',\n this.component.getAttribute('id')\n )\n event.dropEffect = 'move'\n })\n }\n}\n\nclass BRCardFlip {\n constructor() {\n this._setBehavior()\n }\n\n _setBehavior() {\n const cardFlippers = document.querySelectorAll('.br-card[data-flip]')\n\n for (const cardFlip of cardFlippers) {\n const cardFront = cardFlip.querySelector('.front')\n const cardBack = cardFlip.querySelector('.back')\n const cardFrontTrigger = cardFlip.querySelector(\n '.front [data-toggle=\"flip\"]'\n )\n const cardBackTrigger = cardFlip.querySelector(\n '.back [data-toggle=\"flip\"]'\n )\n this._cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger)\n this._setCardFrontTrigger(\n cardFrontTrigger,\n cardFront,\n cardBack,\n cardBackTrigger\n )\n this._setCardBackTrigger(\n cardBackTrigger,\n cardFront,\n cardBack,\n cardFrontTrigger\n )\n }\n }\n\n _setCardFrontTrigger(cardFrontTrigger, cardFront, cardBack, cardBackTrigger) {\n cardFrontTrigger.addEventListener('click', () => {\n return this._cardFlipShowBack(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n })\n }\n\n _setCardBackTrigger(cardBackTrigger, cardFront, cardBack, cardFrontTrigger) {\n cardBackTrigger.addEventListener('click', () => {\n return this._cardFlipShowFront(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n })\n }\n\n _cardFlipInit(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n this._cardFlipShowFront(\n cardFront,\n cardBack,\n cardFrontTrigger,\n cardBackTrigger\n )\n }\n\n _cardFlipShowFront(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n cardFront.removeAttribute('hidden')\n cardFront.setAttribute('aria-hidden', 'false')\n cardFrontTrigger.setAttribute('aria-expanded', 'true')\n cardBack.setAttribute('aria-hidden', 'true')\n cardBack.setAttribute('hidden', '')\n cardBackTrigger.setAttribute('aria-expanded', 'false')\n }\n\n _cardFlipShowBack(cardFront, cardBack, cardFrontTrigger, cardBackTrigger) {\n cardFront.setAttribute('hidden', '')\n cardFront.setAttribute('aria-hidden', 'true')\n cardFrontTrigger.setAttribute('aria-expanded', 'false')\n cardBack.removeAttribute('hidden')\n cardBack.setAttribute('aria-hidden', 'false')\n cardBackTrigger.setAttribute('aria-expanded', 'true')\n }\n}\n\nclass BRCardCollapse {\n constructor() {\n this._setBehavior()\n }\n\n _setBehavior() {\n // Padrão de toggle no card\n const cardToggler = document.querySelector('[data-toggle=\"collapse\"]')\n if (cardToggler !== null) {\n const cardTogglerTarget = document.querySelector(\n cardToggler.dataset.target\n )\n this._cardCollapseInit(cardToggler, cardTogglerTarget)\n cardToggler.addEventListener('click', () => {\n if (cardToggler.getAttribute('aria-expanded') === 'true') {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n } else {\n this._cardShowContent(cardToggler, cardTogglerTarget)\n }\n })\n }\n }\n\n _cardShowContent(cardToggler, cardTogglerTarget) {\n cardToggler.setAttribute('aria-expanded', 'true')\n cardTogglerTarget.setAttribute('aria-hidden', 'true')\n cardTogglerTarget.removeAttribute('hidden')\n }\n\n _cardHiddenContent(cardToggler, cardTogglerTarget) {\n cardToggler.setAttribute('aria-expanded', 'false')\n cardTogglerTarget.setAttribute('aria-hidden', 'false')\n cardTogglerTarget.setAttribute('hidden', '')\n }\n\n _cardCollapseInit(cardToggler, cardTogglerTarget) {\n if (cardToggler.dataset.visible) {\n if (cardToggler.dataset.visible === 'true') {\n this._cardShowContent(cardToggler, cardTogglerTarget)\n } else {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n }\n } else {\n this._cardHiddenContent(cardToggler, cardTogglerTarget)\n }\n }\n}\n\nconst listCard = []\nfor (const [index, brCard] of window.document\n .querySelectorAll('.br-card')\n .entries()) {\n listCard.push(new BRCard('br-card', brCard, index))\n}\n\nexport default BRCard\n"],"sourceRoot":""}
\ No newline at end of file
dist/components/card/card.min.min.css 0 → 100644
View file @ eae2f2ee
.br-card{--card-background:var(--color-secondary-01);--card-back-background:var(--color-secondary-07);--card-margin:var(--spacing-scale-2x);--card-padding:var(--spacing-scale-2x);--card-shadow:var(--surface-shadow-sm);background:var(--card-background);box-shadow:var(--card-shadow);color:var(--card-color);margin-bottom:var(--card-margin)}.br-card .back .content,.br-card .card-content,.br-card .front .content{padding:var(--card-padding)}.br-card .back .content :last-child,.br-card .card-content :last-child,.br-card .front .content :last-child{margin-bottom:0}.br-card .back .header,.br-card .card-header,.br-card .front .header{padding:var(--card-padding) var(--card-padding) 0}.br-card .back .footer,.br-card .card-footer,.br-card .front .footer{padding:0 var(--card-padding) var(--card-padding)}.br-card .back{background:var(--card-back-background);color:var(--color-secondary-01)}.br-card .br-list .br-item{white-space:normal}.br-card .br-button[aria-expanded=true]{transform:rotate(180deg)}
/*# sourceMappingURL=card.min.min.css.map */
\ No newline at end of file
dist/components/card/card.min.min.css.map 0 → 100644
View file @ eae2f2ee
{"version":3,"sources":["webpack://./src/components/card/_card.scss"],"names":[],"mappings":"AAgDA,SAvCE,2CAAA,CACA,gDAAA,CACA,qCAAA,CACA,sCAAA,CACA,sCAAA,CAIA,iCAAA,CACA,6BAAA,CACA,uBAAA,CACA,gCAVF,CAWE,wEAGE,2BATJ,CAUI,4GACE,eANN,CASE,qEAGE,iDAPJ,CASE,qEAGE,iDAPJ,CAYE,eACE,sCAAA,CACA,+BAVJ,CA2FI,2BAEE,kBA1FN,CA8FI,wCACE,wBA5FN","file":"card.min.min.css","sourcesContent":["@import \"../../partial/scss/base\";\n\n@mixin card {\n @include card-tokens;\n @include card-base;\n @include card-back;\n}\n\n@mixin card-tokens {\n --card-background: var(--color-secondary-01);\n --card-back-background: var(--color-secondary-07);\n --card-margin: var(--spacing-scale-2x);\n --card-padding: var(--spacing-scale-2x);\n --card-shadow: var(--surface-shadow-sm);\n}\n\n@mixin card-base {\n background: var(--card-background);\n box-shadow: var(--card-shadow);\n color: var(--card-color);\n margin-bottom: var(--card-margin);\n .card-content,\n .front .content,\n .back .content {\n padding: var(--card-padding);\n *:last-child {\n margin-bottom: 0;\n }\n }\n .front .header,\n .back .header,\n .card-header {\n padding: var(--card-padding) var(--card-padding) 0;\n }\n .front .footer,\n .back .footer,\n .card-footer {\n padding: 0 var(--card-padding) var(--card-padding);\n }\n}\n\n@mixin card-back {\n .back {\n background: var(--card-back-background);\n color: var(--color-secondary-01);\n }\n}\n\n.#{$prefix}card {\n @include card;\n // box-shadow: 0 3px 6px rgba(v(rgb-secondary-09), 0.16);\n // margin-bottom: v(spacing-scale-2x);\n // > .front:not([hidden]),\n // > .back:not([hidden]) {\n // background: v(bg-color);\n // color: v(text-color);\n // display: flex;\n // flex-flow: column;\n // > .header,\n // > .content,\n // > .footer {\n // padding: v(spacing-scale-2x);\n // &:empty {\n // padding: 0;\n // }\n // *:last-child {\n // margin-bottom: 0;\n // }\n // }\n // > .content {\n // flex: 1;\n // }\n // > .header + .content,\n // > .content + .footer {\n // padding-top: 0;\n // }\n // }\n // > .back {\n // --bg-color: var(--color-secondary-07);\n // --text-color: var(--color-secondary-01);\n // }\n // &[flipped] {\n // > .front,\n // > .back {\n // overflow: hidden;\n // transition: opacity 600ms ease;\n // }\n // }\n // &[flipped=\"on\"] {\n // > .front {\n // height: 0;\n // opacity: 0;\n // }\n // .br-button.flip {\n // color: v(button-color);\n // &:hover {\n // color: v(color-secondary-01);\n // }\n // }\n // }\n // &[flipped=\"off\"] {\n // > .back {\n // height: 0;\n // opacity: 0;\n // }\n // }\n // &[expanded] {\n // .expanded {\n // overflow: hidden;\n // }\n // }\n // &[expanded=\"on\"] {\n // .expanded {\n // height: 100%;\n // opacity: 1;\n // }\n // }\n // &[expanded=\"off\"] {\n // .expanded {\n // opacity: 0;\n // height: 0;\n // z-index: -1;\n // }\n // }\n .#{$prefix}list {\n .#{$prefix}item {\n // width: auto;\n white-space: normal;\n }\n }\n .#{$prefix}button {\n &[aria-expanded=\"true\"] {\n transform: rotate(180deg);\n }\n }\n}\n"]}
\ No newline at end of file
dist/components/card/examples.html 0 → 100644
View file @ eae2f2ee
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Card</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../dsgov.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="h5">Card simples</p>
<div class="br-card">
<div class="card-content"><img src="https://picsum.photos/id/0/1080" alt="Imagem de exemplo"/></div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="h5">Card completo</p>
<div class="br-card">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p>
</div>
<div class="card-footer">
<div class="d-flex">
<div>
<button class="br-button" type="button">Button
</button>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="h5">Card com expansão</p>
<div class="br-card">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sit dolor exercitationem asperiores voluptates tenetur consectetur error vero ut expedita, sapiente voluptate nulla esse! Veritatis aliquam consectetur quod harum expedita!</p>
</div>
<div class="card-footer">
<div class="text-right">
<button class="br-button circle" type="button" aria-label="Expandir o card" data-toggle="collapse" data-target="#expanded"><i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
</div>
<div id="expanded">
<div class="br-list mt-3">
<div class="align-items-center br-item">
<div class="row">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div><span class="br-divider"></span>
<div class="align-items-center br-item">
<div class="row">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">
<p class="m-0">Nesciunt, laudantium ea officiis hic tempora velit aperiam nemo accusamus nisi, eligendi ducimus! Incidunt ullam minima ratione amet sequi.</p>
</div>
</div>
</div><span class="br-divider"></span>
<div class="align-items-center br-item">
<div class="row">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">
<p class="m-0">Voluptates, iste recusandae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="h5">Card desativado</p>
<div class="br-card disabled">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum doloris sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p>
</div>
<div class="card-footer">
<div class="d-flex">
<div>
<button class="br-button" type="button">Button
</button>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../dsgov.js"></script>
</body>
</html>
\ No newline at end of file
dist/components/card/examples/card-completo.html 0 → 100644
View file @ eae2f2ee
<div class="br-card">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p>
</div>
<div class="card-footer">
<div class="d-flex">
<div>
<button class="br-button" type="button">Button
</button>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
dist/components/card/examples/card-desativado.html 0 → 100644
View file @ eae2f2ee
<div class="br-card disabled">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum doloris sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p>
</div>
<div class="card-footer">
<div class="d-flex">
<div>
<button class="br-button" type="button">Button
</button>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i>
</button>
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
dist/components/card/examples/card-expansao.html 0 → 100644
View file @ eae2f2ee
<div class="br-card">
<div class="card-header">
<div class="d-flex"><span class="br-avatar mt-1" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<div class="ml-3">
<p class="h5 text-primary-default mb-0">Maria Amorim</p><span>UX Designer</span>
</div>
<div class="ml-auto">
<button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sit dolor exercitationem asperiores voluptates tenetur consectetur error vero ut expedita, sapiente voluptate nulla esse! Veritatis aliquam consectetur quod harum expedita!</p>
</div>
<div class="card-footer">
<div class="text-right">
<button class="br-button circle" type="button" aria-label="Expandir o card" data-toggle="collapse" data-target="#expanded"><i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
</div>
<div id="expanded">
<div class="br-list mt-3">