├── .browserslistrc ├── src ├── css │ ├── components │ │ ├── po-tag │ │ │ └── index.css │ │ ├── po-badge │ │ │ ├── index.css │ │ │ ├── po-badge.css │ │ │ └── po-badge.html │ │ ├── po-chart │ │ │ ├── index.css │ │ │ └── po-chart.css │ │ ├── po-clean │ │ │ ├── index.css │ │ │ └── po-clean.css │ │ ├── po-gauge │ │ │ ├── index.css │ │ │ └── po-gauge.css │ │ ├── po-image │ │ │ ├── index.css │ │ │ ├── po-image.html │ │ │ └── po-image.css │ │ ├── po-info │ │ │ ├── index.css │ │ │ └── po-info.css │ │ ├── po-label │ │ │ ├── index.css │ │ │ └── po-label.css │ │ ├── po-link │ │ │ ├── index.css │ │ │ ├── po-link.html │ │ │ └── po-link.css │ │ ├── po-modal │ │ │ └── index.css │ │ ├── po-popup │ │ │ ├── index.css │ │ │ └── po-popup.css │ │ ├── po-slide │ │ │ ├── index.css │ │ │ └── po-slide.css │ │ ├── po-avatar │ │ │ ├── index.css │ │ │ ├── po-avatar.css │ │ │ └── po-avatar.html │ │ ├── po-button │ │ │ └── index.css │ │ ├── po-calendar │ │ │ └── index.css │ │ ├── po-divider │ │ │ ├── index.css │ │ │ ├── po-divider.html │ │ │ └── po-divider.css │ │ ├── po-dropdown │ │ │ ├── index.css │ │ │ ├── po-dropdown.html │ │ │ └── po-dropdown.css │ │ ├── po-dynamic │ │ │ ├── index.css │ │ │ └── po-dynamic.css │ │ ├── po-header │ │ │ └── index.css │ │ ├── po-helper │ │ │ ├── index.css │ │ │ ├── po-helper.html │ │ │ └── po-helper.css │ │ ├── po-overlay │ │ │ ├── index.css │ │ │ └── po-overlay.css │ │ ├── po-popover │ │ │ ├── index.css │ │ │ └── po-popover.css │ │ ├── po-search │ │ │ └── index.css │ │ ├── po-stepper │ │ │ └── index.css │ │ ├── po-toolbar │ │ │ └── index.css │ │ ├── po-tooltip │ │ │ ├── index.css │ │ │ └── po-tooltip.css │ │ ├── po-widget │ │ │ └── index.css │ │ ├── po-container │ │ │ ├── index.css │ │ │ └── po-container.css │ │ ├── po-disclaimer │ │ │ ├── index.css │ │ │ ├── po-disclaimer.html │ │ │ └── po-disclaimer.css │ │ ├── po-field │ │ │ ├── po-lookup │ │ │ │ └── index.css │ │ │ ├── po-rich-text │ │ │ │ ├── po-rich-text.css │ │ │ │ ├── index.css │ │ │ │ ├── po-rich-text-toolbar │ │ │ │ │ └── po-rich-text-toolbar.css │ │ │ │ └── po-rich-text-body │ │ │ │ │ └── po-rich-text-body.css │ │ │ ├── po-field-container │ │ │ │ ├── index.css │ │ │ │ ├── po-field-container-bottom │ │ │ │ │ └── po-field-container-bottom.html │ │ │ │ └── po-field-container.css │ │ │ ├── index.css │ │ │ ├── po-radio-group │ │ │ │ └── po-radio-group.css │ │ │ ├── po-checkbox-group │ │ │ │ └── po-checkbox-group.css │ │ │ ├── po-datepicker │ │ │ │ └── po-datepicker.css │ │ │ ├── po-textarea │ │ │ │ └── po-textarea.css │ │ │ ├── po-field-icon │ │ │ │ ├── po-field-icon.html │ │ │ │ └── po-field-icon.css │ │ │ └── po-datepicker-range │ │ │ │ └── po-datepicker-range.css │ │ ├── po-list-view │ │ │ └── index.css │ │ ├── po-menu-panel │ │ │ ├── index.css │ │ │ └── po-menu-panel.css │ │ ├── po-button-group │ │ │ ├── index.css │ │ │ └── po-button-group.css │ │ ├── po-code-editor │ │ │ ├── index.css │ │ │ └── po-code-editor.css │ │ ├── po-loading-overlay │ │ │ ├── index.css │ │ │ └── po-loading-overlay.css │ │ ├── po-disclaimer-group │ │ │ ├── index.css │ │ │ └── po-disclaimer-group.css │ │ ├── po-tree-view │ │ │ ├── po-tree-view.css │ │ │ ├── index.css │ │ │ ├── po-tree-view-item.css │ │ │ └── po-tree-view-item-header.css │ │ ├── po-accordion │ │ │ ├── po-accordion.css │ │ │ ├── index.css │ │ │ ├── po-accordion-item-body.css │ │ │ ├── po-accordion-manager.css │ │ │ └── po-accordion-item-header.css │ │ ├── po-listbox │ │ │ ├── index.css │ │ │ ├── po-listbox.html │ │ │ └── po-item-list │ │ │ │ └── po-item-list.html │ │ ├── po-upload │ │ │ ├── po-upload-file-restrictions │ │ │ │ ├── index.css │ │ │ │ └── po-upload-file-restrictions.css │ │ │ ├── index.css │ │ │ └── po-upload-drag-drop │ │ │ │ ├── index.css │ │ │ │ ├── po-upload-drag-drop-area-overlay │ │ │ │ └── po-upload-drag-drop-area-overlay.css │ │ │ │ └── po-upload-drag-drop-area │ │ │ │ └── po-upload-drag-drop-area.css │ │ ├── po-grid │ │ │ ├── po-grid.html │ │ │ ├── index.css │ │ │ ├── po-grid-cell-action.css │ │ │ ├── po-grid-head.css │ │ │ ├── po-grid-cell-content.css │ │ │ └── po-grid.css │ │ ├── po-breadcrumb │ │ │ ├── index.css │ │ │ ├── po-breadcrumb-dropdown.css │ │ │ └── po-breadcrumb.css │ │ ├── po-progress │ │ │ ├── index.css │ │ │ └── po-progress.css │ │ ├── po-loading │ │ │ ├── index.css │ │ │ ├── po-loading.html │ │ │ ├── po-loading-icon │ │ │ │ └── po-loading-icon.css │ │ │ └── po-loading.css │ │ ├── po-navbar │ │ │ ├── po-navbar-actions │ │ │ │ ├── po-navbar-actions.css │ │ │ │ ├── index.css │ │ │ │ ├── po-navbar-action-popup │ │ │ │ │ └── po-navbar-action-popup.css │ │ │ │ └── po-navbar-action │ │ │ │ │ └── po-navbar-action.css │ │ │ ├── index.css │ │ │ ├── po-navbar-items │ │ │ │ ├── index.css │ │ │ │ ├── po-navbar-items.css │ │ │ │ ├── po-navbar-item-navigation │ │ │ │ │ └── po-navbar-item-navigation.css │ │ │ │ └── po-navbar-item │ │ │ │ │ └── po-navbar-item.css │ │ │ ├── po-navbar-logo │ │ │ │ └── po-navbar-logo.css │ │ │ └── po-navbar.css │ │ ├── po-menu │ │ │ └── index.css │ │ ├── po-tabs │ │ │ ├── index.css │ │ │ ├── po-tabs.css │ │ │ └── po-tab-dropdown │ │ │ │ └── po-tab-dropdown.css │ │ ├── po-table │ │ │ ├── index.css │ │ │ ├── po-table-column-link │ │ │ │ └── po-table-column-link.css │ │ │ ├── po-table-list-manager.css │ │ │ │ └── po-table-list-manager.css │ │ │ └── po-table-column-manager │ │ │ │ └── po-table-column-manager.css │ │ ├── po-page │ │ │ ├── po-page.css │ │ │ ├── po-page-content │ │ │ │ ├── po-page-content.css │ │ │ │ └── po-page-content.html │ │ │ ├── index.css │ │ │ ├── po-page-header │ │ │ │ ├── po-page-header.html │ │ │ │ └── po-page-header.css │ │ │ ├── po-page-slide │ │ │ │ └── po-page-slide.js │ │ │ ├── po-modal-password-recovery │ │ │ │ └── po-modal-password-recovery.css │ │ │ ├── po-page-edit │ │ │ │ └── po-page-edit.html │ │ │ ├── po-page-detail │ │ │ │ └── po-page-detail.html │ │ │ └── po-page-default │ │ │ │ └── po-page-default.html │ │ └── index.css │ ├── services │ │ ├── index.css │ │ └── po-notification │ │ │ └── index.css │ ├── index-modern.css │ ├── commons │ │ ├── po-icon │ │ │ ├── index.css │ │ │ └── po-icon-base.css │ │ ├── po-spacing │ │ │ └── index.css │ │ ├── po-grid-system │ │ │ ├── index.css │ │ │ ├── po-grid-system.css │ │ │ ├── po-grid-system-sm.css │ │ │ ├── po-grid-system-md.css │ │ │ └── po-grid-system-lg.css │ │ ├── po-media-query │ │ │ ├── po-media-query.css │ │ │ └── po-media-query.html │ │ ├── index.css │ │ ├── po-scrollbar │ │ │ └── po-scrollbar.css │ │ ├── po-arrow-positions │ │ │ ├── po-arrow-positions.css │ │ │ └── po-arrow-positions.html │ │ ├── po-shadow │ │ │ └── po-shadow.css │ │ └── po-reset.css │ ├── index.css │ └── README.md ├── app │ ├── assets │ │ ├── images │ │ │ ├── po.png │ │ │ └── page-login-default.png │ │ └── css │ │ │ └── app.css │ └── index.html ├── assets │ ├── icons │ │ ├── PoIcon │ │ │ ├── PoIcon.eot │ │ │ ├── PoIcon.ttf │ │ │ └── PoIcon.woff │ │ └── animalia-icon │ │ │ ├── Animalia.ttf │ │ │ ├── Animalia.woff │ │ │ ├── Animalia-Fill.ttf │ │ │ └── Animalia-Fill.woff │ ├── fonts │ │ └── Roboto │ │ │ ├── Roboto-Bold.ttf │ │ │ ├── Roboto-Light.ttf │ │ │ └── Roboto-Regular.ttf │ └── images │ │ ├── order-unselected.svg │ │ ├── order-ascending.svg │ │ ├── order-descending.svg │ │ ├── chart-down.svg │ │ ├── chart-up.svg │ │ ├── success.svg │ │ ├── sorting.svg │ │ ├── sort-ascending.svg │ │ ├── sort-descending.svg │ │ └── po_black.svg └── cli │ ├── src │ ├── index.js │ ├── build.js │ └── new.js │ ├── package.json │ ├── bin │ └── cli.js │ └── LICENSE ├── .prettierignore ├── commitlint.config.js ├── .huskyrc ├── .prettierrc ├── .editorconfig ├── .gitignore ├── .github └── workflows │ ├── publish_theme_cli_ci.yml │ ├── publish_style_cd-latest.yml │ ├── publish_style_cd-17.yml │ ├── publish_style_cd-next.yml │ ├── publish_style_cd-20.yml │ ├── publish_style_cd-beta.yml │ └── pr_ci.yml ├── LICENSE ├── CODE_OF_CONDUCT.md ├── package.json ├── README.md └── icon-generator.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 20 versions 2 | -------------------------------------------------------------------------------- /src/css/components/po-tag/index.css: -------------------------------------------------------------------------------- 1 | @import './po-tag.css'; 2 | -------------------------------------------------------------------------------- /src/css/services/index.css: -------------------------------------------------------------------------------- 1 | @import './po-notification'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-badge/index.css: -------------------------------------------------------------------------------- 1 | @import './po-badge.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-chart/index.css: -------------------------------------------------------------------------------- 1 | @import './po-chart.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-clean/index.css: -------------------------------------------------------------------------------- 1 | @import './po-clean.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-gauge/index.css: -------------------------------------------------------------------------------- 1 | @import './po-gauge.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-image/index.css: -------------------------------------------------------------------------------- 1 | @import './po-image.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-info/index.css: -------------------------------------------------------------------------------- 1 | @import './po-info.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-label/index.css: -------------------------------------------------------------------------------- 1 | @import './po-label.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-link/index.css: -------------------------------------------------------------------------------- 1 | @import './po-link.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-modal/index.css: -------------------------------------------------------------------------------- 1 | @import './po-modal.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-popup/index.css: -------------------------------------------------------------------------------- 1 | @import './po-popup.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-slide/index.css: -------------------------------------------------------------------------------- 1 | @import './po-slide.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-avatar/index.css: -------------------------------------------------------------------------------- 1 | @import './po-avatar.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-button/index.css: -------------------------------------------------------------------------------- 1 | @import './po-button.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-calendar/index.css: -------------------------------------------------------------------------------- 1 | @import './po-calendar.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-divider/index.css: -------------------------------------------------------------------------------- 1 | @import './po-divider.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-dropdown/index.css: -------------------------------------------------------------------------------- 1 | @import './po-dropdown.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-dynamic/index.css: -------------------------------------------------------------------------------- 1 | @import './po-dynamic.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-header/index.css: -------------------------------------------------------------------------------- 1 | @import './po-header.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-helper/index.css: -------------------------------------------------------------------------------- 1 | @import './po-helper.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-overlay/index.css: -------------------------------------------------------------------------------- 1 | @import './po-overlay.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-popover/index.css: -------------------------------------------------------------------------------- 1 | @import './po-popover.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-search/index.css: -------------------------------------------------------------------------------- 1 | @import './po-search.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-stepper/index.css: -------------------------------------------------------------------------------- 1 | @import './po-stepper.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-toolbar/index.css: -------------------------------------------------------------------------------- 1 | @import './po-toolbar.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-tooltip/index.css: -------------------------------------------------------------------------------- 1 | @import './po-tooltip.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-widget/index.css: -------------------------------------------------------------------------------- 1 | @import './po-widget.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-container/index.css: -------------------------------------------------------------------------------- 1 | @import './po-container.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-disclaimer/index.css: -------------------------------------------------------------------------------- 1 | @import './po-disclaimer.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-lookup/index.css: -------------------------------------------------------------------------------- 1 | @import './po-lookup.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-list-view/index.css: -------------------------------------------------------------------------------- 1 | @import './po-list-view.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-menu-panel/index.css: -------------------------------------------------------------------------------- 1 | @import './po-menu-panel.css'; 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /.github 3 | /node_modules 4 | .travis.yml 5 | *.md 6 | -------------------------------------------------------------------------------- /src/css/components/po-button-group/index.css: -------------------------------------------------------------------------------- 1 | @import './po-button-group.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-code-editor/index.css: -------------------------------------------------------------------------------- 1 | @import './po-code-editor.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-loading-overlay/index.css: -------------------------------------------------------------------------------- 1 | @import './po-loading-overlay.css'; 2 | -------------------------------------------------------------------------------- /src/css/services/po-notification/index.css: -------------------------------------------------------------------------------- 1 | @import './po-toaster/po-toaster.css'; 2 | -------------------------------------------------------------------------------- /src/css/components/po-disclaimer-group/index.css: -------------------------------------------------------------------------------- 1 | @import './po-disclaimer-group.css'; 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-angular'] 3 | }; 4 | -------------------------------------------------------------------------------- /src/css/components/po-tree-view/po-tree-view.css: -------------------------------------------------------------------------------- 1 | .po-tree-view { 2 | overflow-y: hidden; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/assets/images/po.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/app/assets/images/po.png -------------------------------------------------------------------------------- /src/css/components/po-field/po-rich-text/po-rich-text.css: -------------------------------------------------------------------------------- 1 | .po-rich-text { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/css/components/po-accordion/po-accordion.css: -------------------------------------------------------------------------------- 1 | .po-accordion { 2 | overflow-y: visible !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/icons/PoIcon/PoIcon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/PoIcon/PoIcon.eot -------------------------------------------------------------------------------- /src/assets/icons/PoIcon/PoIcon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/PoIcon/PoIcon.ttf -------------------------------------------------------------------------------- /src/css/components/po-listbox/index.css: -------------------------------------------------------------------------------- 1 | @import './po-listbox.css'; 2 | @import './po-item-list/po-item-list.css'; 3 | -------------------------------------------------------------------------------- /src/css/components/po-upload/po-upload-file-restrictions/index.css: -------------------------------------------------------------------------------- 1 | @import './po-upload-file-restrictions.css'; 2 | -------------------------------------------------------------------------------- /src/assets/icons/PoIcon/PoIcon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/PoIcon/PoIcon.woff -------------------------------------------------------------------------------- /src/css/components/po-code-editor/po-code-editor.css: -------------------------------------------------------------------------------- 1 | po-code-editor { 2 | display: block; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/components/po-grid/po-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /src/css/components/po-helper/po-helper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /src/css/components/po-image/po-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/fonts/Roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /src/css/components/po-breadcrumb/index.css: -------------------------------------------------------------------------------- 1 | @import './po-breadcrumb.css'; 2 | 3 | @import './po-breadcrumb-dropdown.css'; 4 | -------------------------------------------------------------------------------- /src/css/components/po-listbox/po-listbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /src/css/components/po-progress/index.css: -------------------------------------------------------------------------------- 1 | @import './po-progress.css'; 2 | @import './po-progress-bar/po-progress-bar.css'; 3 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/fonts/Roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /src/css/components/po-loading/index.css: -------------------------------------------------------------------------------- 1 | @import './po-loading.css'; 2 | 3 | @import './po-loading-icon/po-loading-icon.css'; 4 | -------------------------------------------------------------------------------- /src/app/assets/images/page-login-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/app/assets/images/page-login-default.png -------------------------------------------------------------------------------- /src/assets/fonts/Roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/fonts/Roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/assets/icons/animalia-icon/Animalia.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/animalia-icon/Animalia.ttf -------------------------------------------------------------------------------- /src/assets/icons/animalia-icon/Animalia.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/animalia-icon/Animalia.woff -------------------------------------------------------------------------------- /src/css/components/po-clean/po-clean.css: -------------------------------------------------------------------------------- 1 | po-clean i.po-field-icon.po-icon-clear-content { 2 | color: var(--color-action-default); 3 | } 4 | -------------------------------------------------------------------------------- /src/css/components/po-gauge/po-gauge.css: -------------------------------------------------------------------------------- 1 | .po-gauge-wrapper { 2 | box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); 3 | padding: 8px; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/components/po-listbox/po-item-list/po-item-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "npm run format:fix", 4 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/icons/animalia-icon/Animalia-Fill.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/animalia-icon/Animalia-Fill.ttf -------------------------------------------------------------------------------- /src/assets/icons/animalia-icon/Animalia-Fill.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/po-ui/po-style/HEAD/src/assets/icons/animalia-icon/Animalia-Fill.woff -------------------------------------------------------------------------------- /src/css/index-modern.css: -------------------------------------------------------------------------------- 1 | @import './themes/po-global-tokens.css'; 2 | 3 | @import './commons'; 4 | @import './components'; 5 | @import './services'; 6 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-actions/po-navbar-actions.css: -------------------------------------------------------------------------------- 1 | .po-navbar-actions { 2 | display: table-cell; 3 | vertical-align: middle; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/components/po-upload/index.css: -------------------------------------------------------------------------------- 1 | @import './po-upload.css'; 2 | 3 | @import './po-upload-drag-drop'; 4 | @import './po-upload-file-restrictions'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-tree-view/index.css: -------------------------------------------------------------------------------- 1 | @import './po-tree-view.css'; 2 | @import './po-tree-view-item.css'; 3 | @import './po-tree-view-item-header.css'; 4 | -------------------------------------------------------------------------------- /src/css/components/po-menu/index.css: -------------------------------------------------------------------------------- 1 | @import './po-menu.css'; 2 | 3 | @import './po-menu-filter/po-menu-filter.css'; 4 | @import './po-menu-item/po-menu-item.css'; 5 | -------------------------------------------------------------------------------- /src/css/commons/po-icon/index.css: -------------------------------------------------------------------------------- 1 | @import './po-icon.css'; 2 | @import './po-icon-base.css'; 3 | @import './animalia-regular.css'; 4 | @import './animalia-fill.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-tabs/index.css: -------------------------------------------------------------------------------- 1 | @import './po-tabs.css'; 2 | @import './po-tab-dropdown/po-tab-dropdown.css'; 3 | 4 | @import './po-tab-button/po-tab-button.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-field-container/index.css: -------------------------------------------------------------------------------- 1 | @import './po-field-container.css'; 2 | 3 | @import './po-field-container-bottom/po-field-container-bottom.css'; 4 | -------------------------------------------------------------------------------- /src/css/components/po-grid/index.css: -------------------------------------------------------------------------------- 1 | @import './po-grid-cell-action.css'; 2 | @import './po-grid-cell-content.css'; 3 | @import './po-grid-head.css'; 4 | @import './po-grid.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/index.css: -------------------------------------------------------------------------------- 1 | @import './po-navbar.css'; 2 | 3 | @import './po-navbar-actions'; 4 | @import './po-navbar-items'; 5 | @import './po-navbar-logo/po-navbar-logo.css'; 6 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | @import './themes/po-global-tokens.css'; 2 | @import './themes/po-theme-${theme}.css'; 3 | 4 | @import './commons'; 5 | @import './components'; 6 | @import './services'; 7 | -------------------------------------------------------------------------------- /src/css/commons/po-spacing/index.css: -------------------------------------------------------------------------------- 1 | @import './po-spacing.css'; 2 | @import './po-spacing-lg.css'; 3 | @import './po-spacing-md.css'; 4 | @import './po-spacing-sm.css'; 5 | @import './po-spacing-xl.css'; 6 | -------------------------------------------------------------------------------- /src/css/components/po-accordion/index.css: -------------------------------------------------------------------------------- 1 | @import './po-accordion-item-body.css'; 2 | @import './po-accordion-item-header.css'; 3 | @import './po-accordion-manager.css'; 4 | @import './po-accordion.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-rich-text/index.css: -------------------------------------------------------------------------------- 1 | @import './po-rich-text.css'; 2 | 3 | @import './po-rich-text-body/po-rich-text-body.css'; 4 | @import './po-rich-text-toolbar/po-rich-text-toolbar.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-upload/po-upload-drag-drop/index.css: -------------------------------------------------------------------------------- 1 | @import './po-upload-drag-drop-area/po-upload-drag-drop-area.css'; 2 | @import './po-upload-drag-drop-area-overlay/po-upload-drag-drop-area-overlay.css'; 3 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-actions/index.css: -------------------------------------------------------------------------------- 1 | @import './po-navbar-actions.css'; 2 | 3 | @import './po-navbar-action/po-navbar-action.css'; 4 | @import './po-navbar-action-popup/po-navbar-action-popup.css'; 5 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-items/index.css: -------------------------------------------------------------------------------- 1 | @import './po-navbar-items.css'; 2 | 3 | @import './po-navbar-item/po-navbar-item.css'; 4 | @import './po-navbar-item-navigation/po-navbar-item-navigation.css'; 5 | -------------------------------------------------------------------------------- /src/assets/images/order-unselected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/css/components/po-table/index.css: -------------------------------------------------------------------------------- 1 | @import './po-table.css'; 2 | @import './po-table-column-link/po-table-column-link.css'; 3 | @import './po-table-column-manager/po-table-column-manager.css'; 4 | @import './po-table-list-manager.css/po-table-list-manager.css'; 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "semi": true, 7 | "bracketSpacing": true, 8 | "quoteProps": "preserve", 9 | "arrowParens": "avoid", 10 | "trailingComma": "none" 11 | } 12 | -------------------------------------------------------------------------------- /src/css/components/po-accordion/po-accordion-item-body.css: -------------------------------------------------------------------------------- 1 | .po-accordion-item-body { 2 | /* necessario para animacao funcionar corretamente no IE/safari */ 3 | overflow-y: hidden; 4 | } 5 | 6 | .po-accordion-item-body-content { 7 | padding: var(--spacing-squish-md); 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/images/order-ascending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/images/order-descending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page.css: -------------------------------------------------------------------------------- 1 | .po-page { 2 | background-color: var(--color-page-background-color-page); 3 | height: 100%; 4 | width: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | gap: var(--po-density-gap-header-content, var(--default-spacing-0, var(--spacing-md))); 8 | } 9 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-items/po-navbar-items.css: -------------------------------------------------------------------------------- 1 | .po-navbar-items { 2 | display: table-cell; 3 | max-width: 1px; 4 | overflow: hidden; 5 | position: relative; 6 | width: 100%; 7 | } 8 | 9 | .po-navbar-items-container { 10 | left: 0; 11 | position: absolute; 12 | } 13 | -------------------------------------------------------------------------------- /src/css/commons/po-grid-system/index.css: -------------------------------------------------------------------------------- 1 | @import './po-grid-system.css'; 2 | @import './po-grid-system-lg.css'; 3 | @import './po-grid-system-md.css'; 4 | @import './po-grid-system-offset.css'; 5 | @import './po-grid-system-sm.css'; 6 | @import './po-grid-system-xl.css'; 7 | @import './po-grid-system-pull.css'; 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | max_line_length = 140 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/cli/src/index.js: -------------------------------------------------------------------------------- 1 | const newCmd = require('./new'); 2 | const buildCommand = require('./build'); 3 | 4 | class Commands { 5 | constructor(newCommand, buildCommand) { 6 | this.new = newCommand; 7 | this.build = buildCommand; 8 | } 9 | } 10 | 11 | module.exports = new Commands(newCmd, buildCommand); 12 | -------------------------------------------------------------------------------- /src/css/components/po-link/po-link.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Teste

4 |
5 | Teste de uso do 6 | 7 | Teste 8 | 9 |
10 |
11 |
12 | -------------------------------------------------------------------------------- /src/css/components/po-image/po-image.css: -------------------------------------------------------------------------------- 1 | .po-image { 2 | display: block; 3 | margin: 0 auto; 4 | max-width: 100%; 5 | position: static !important; 6 | } 7 | 8 | .po-container-image { 9 | position: relative; 10 | } 11 | 12 | .po-container-image .po-container { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | -------------------------------------------------------------------------------- /src/css/components/po-tree-view/po-tree-view-item.css: -------------------------------------------------------------------------------- 1 | .po-tree-view-item { 2 | border-bottom: 1px solid var(--color-tree-view-item-border-bottom-color); 3 | list-style-type: none; 4 | width: 100%; 5 | } 6 | 7 | .po-tree-view-item .po-tree-view-item { 8 | border-bottom: none; 9 | } 10 | 11 | .po-tree-view-item-group { 12 | padding-left: 28px; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/commons/po-media-query/po-media-query.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --media-small-max: 480px; 3 | 4 | --media-medium-min: 481px; 5 | 6 | --media-medium-max: 960px; 7 | 8 | --media-large-min: 961px; 9 | 10 | --media-large-max: 1366px; 11 | 12 | --media-x-large-min: 1367px; 13 | 14 | --media-padding-small: 1599px; 15 | 16 | --media-padding-large: 1600px; 17 | } 18 | -------------------------------------------------------------------------------- /src/css/components/po-table/po-table-column-link/po-table-column-link.css: -------------------------------------------------------------------------------- 1 | .po-table-link { 2 | display: inline; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | } 6 | 7 | .po-table-link-disabled { 8 | pointer-events: none; 9 | } 10 | 11 | .po-table-link-disabled po-link { 12 | --text-color: var(--color-table-color-link-disabled, var(--color-neutral-mid-40)); 13 | } 14 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Mensagem de erro 5 |
6 |
7 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-content/po-page-content.css: -------------------------------------------------------------------------------- 1 | .po-page-content { 2 | max-height: 100%; 3 | overflow-y: auto; 4 | padding: var(--padding-content, var(--po-density-content-padding, var(--spacing-xs) var(--spacing-sm))); 5 | position: relative; 6 | width: 100%; 7 | } 8 | 9 | .po-page-content .po-dropdown { 10 | vertical-align: bottom; 11 | } 12 | 13 | @media print { 14 | .po-page-content { 15 | overflow-y: visible; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/css/components/po-upload/po-upload-file-restrictions/po-upload-file-restrictions.css: -------------------------------------------------------------------------------- 1 | .po-upload-file-restrictions { 2 | font-family: var(--font-family-text-support); 3 | color: var(--text-color-text-support, var(--color-upload-file-restrictions-color-text)); 4 | display: block; 5 | font-size: var(--font-size-xs); 6 | font-weight: var(--font-weight-normal); 7 | line-height: var(--line-height-md); 8 | padding: var(--spacing-sm) 0 var(--spacing-xs) 0; 9 | } 10 | -------------------------------------------------------------------------------- /src/css/commons/index.css: -------------------------------------------------------------------------------- 1 | @import './po-reset.css'; 2 | 3 | @import './po-arrow-positions/po-arrow-positions.css'; 4 | @import './po-color-palette/po-color-palette.css'; 5 | @import './po-color/po-color.css'; 6 | @import './po-common.css'; 7 | @import './po-font/po-font.css'; 8 | @import './po-grid-system'; 9 | @import './po-icon'; 10 | @import './po-media-query/po-media-query.css'; 11 | @import './po-scrollbar/po-scrollbar.css'; 12 | @import './po-shadow/po-shadow.css'; 13 | @import './po-spacing'; 14 | -------------------------------------------------------------------------------- /src/css/components/po-loading-overlay/po-loading-overlay.css: -------------------------------------------------------------------------------- 1 | .po-loading-overlay-content { 2 | background-color: var(--background); 3 | border-radius: 3px; 4 | box-shadow: 0 1px 4px 0 var(--shadow); 5 | display: block; 6 | height: 80%; 7 | left: 50%; 8 | max-height: 104px; 9 | max-width: 200px; 10 | position: relative; 11 | top: 50%; 12 | transform: translate(-50%, -50%); 13 | width: 100%; 14 | } 15 | 16 | .po-loading-overlay-content .po-loading-label { 17 | max-width: 180px; 18 | } 19 | -------------------------------------------------------------------------------- /src/css/components/po-divider/po-divider.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |
11 |

PO Divider

12 |
13 |
14 |
PO Divider – opção com label
15 |
16 | 17 |
18 | 19 |

PO Divider – opção sem label

20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /src/css/components/po-upload/po-upload-drag-drop/po-upload-drag-drop-area-overlay/po-upload-drag-drop-area-overlay.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-upload-drag-drop-overlay-label-text: { 3 | @apply --font-subtitle; 4 | } 5 | } 6 | 7 | .po-upload-drag-drop-area-overlay { 8 | background-color: var(--color-upload-drag-drop-area-overlay-background-color); 9 | position: fixed; 10 | z-index: 1000; 11 | } 12 | 13 | .po-upload-drag-drop-area-overlay .po-upload-drag-drop-area { 14 | border-color: var(--color-upload-drag-drop-area-border-primary) !important; 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/images/chart-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/chart-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/css/components/po-page/index.css: -------------------------------------------------------------------------------- 1 | @import './po-page.css'; 2 | 3 | @import './po-modal-password-recovery/po-modal-password-recovery.css'; 4 | @import './po-page-background/po-page-background.css'; 5 | @import './po-page-blocked-user/po-page-blocked-user.css'; 6 | @import './po-page-change-password/po-page-change-password.css'; 7 | @import './po-page-content/po-page-content.css'; 8 | @import './po-page-header/po-page-header.css'; 9 | @import './po-page-list/po-page-list.css'; 10 | @import './po-page-login/po-page-login.css'; 11 | @import './po-page-slide/po-page-slide.css'; 12 | -------------------------------------------------------------------------------- /src/css/components/po-overlay/po-overlay.css: -------------------------------------------------------------------------------- 1 | .po-overlay { 2 | display: grid; 3 | z-index: 1000; 4 | position: absolute; 5 | width: 100%; 6 | height: 100%; 7 | inset: 0; 8 | place-items: center; 9 | } 10 | 11 | .po-overlay::before { 12 | backdrop-filter: blur(4px); 13 | background-color: var(--color-overlay); 14 | content: ''; 15 | inset: 0; 16 | opacity: var(--opacity-overlay); 17 | position: absolute; 18 | } 19 | 20 | .po-overlay-fixed { 21 | height: 100vh; 22 | width: 100vw; 23 | position: fixed; 24 | } 25 | 26 | .po-overlay-content { 27 | position: relative; 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /app-dist 6 | /.temp 7 | 8 | # dependencies 9 | /node_modules 10 | /src/cli/node_modules 11 | 12 | # IDEs and editors 13 | /.idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | *.sublime-workspace 20 | 21 | # IDE - VSCode 22 | .vscode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | npm-debug.log 31 | package-lock.json 32 | 33 | # System Files 34 | .DS_Store 35 | Thumbs.db 36 | 37 | # VSCode 38 | launch.json -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-header/po-page-header.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |

Título da Página

10 | 11 | 12 |
13 |

Título da Página

14 |
SubTítulo
15 |
16 | 17 | 18 |
19 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /src/css/README.md: -------------------------------------------------------------------------------- 1 | # PO Style Theme 2 | 3 | Tema padrão para aplicações desenvolvidas com [PO UI](http://po-ui.io). 4 | 5 | ### Como usar o tema 6 | 7 | Para utilizá-lo, instale o pacote `@po-ui/style` conforme abaixo: 8 | 9 | ``` 10 | npm i @po-ui/style 11 | ``` 12 | 13 | Em seguida, atualize o arquivo `angular.json` para utilizar o tema. 14 | 15 | ```json 16 | "styles": [ 17 | "node_modules/@po-ui/style/css/po-theme-default.min.css" 18 | ] 19 | ``` 20 | 21 | ### Temas customizados 22 | 23 | Quer criar seu próprio tema? Leia [como criar seu próprio tema customizado do PO UI][create-theme-customization]. 24 | 25 | [create-theme-customization]: https://po-ui.io/guides/create-theme-customization 26 | -------------------------------------------------------------------------------- /src/css/commons/po-scrollbar/po-scrollbar.css: -------------------------------------------------------------------------------- 1 | @supports (-moz-appearance: none) { 2 | * { 3 | scrollbar-color: var(--color-thumb) var(--color-track); 4 | } 5 | } 6 | 7 | ::-webkit-scrollbar { 8 | background-color: var(--color-track); 9 | } 10 | 11 | ::-webkit-scrollbar-corner { 12 | background: var(--color-track); 13 | } 14 | 15 | ::-webkit-scrollbar:vertical { 16 | width: calc(var(--spacing-xs) + 2px); 17 | } 18 | 19 | ::-webkit-scrollbar:horizontal { 20 | height: calc(var(--spacing-xs) + 2px); 21 | } 22 | 23 | ::-webkit-scrollbar-thumb { 24 | background-color: var(--color-thumb); 25 | border-radius: var(--border-radius-lg); 26 | border: var(--border-radius-sm) solid var(--color-track); 27 | } 28 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-actions/po-navbar-action-popup/po-navbar-action-popup.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-navbar-action-popup-font-size-content: var(--font-navbar-action-font-size-content); 3 | } 4 | 5 | .po-navbar-action-popup { 6 | display: none; 7 | } 8 | 9 | .po-navbar-action-popup-content { 10 | color: var(--color-navbar-action-popup-color-content); 11 | font-size: var(--font-navbar-action-popup-font-size-content); 12 | margin: 0 0 0 16px; 13 | padding-top: 4px; 14 | text-align: center; 15 | } 16 | 17 | @media screen and (max-width: 768px) { 18 | /* Utilizado para ocultar todas as actions quando atingir a responsividade */ 19 | .po-navbar-action-popup { 20 | display: table-cell; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/components/po-field/index.css: -------------------------------------------------------------------------------- 1 | @import './po-checkbox/po-checkbox.css'; 2 | @import './po-checkbox-group/po-checkbox-group.css'; 3 | @import './po-combo/po-combo.css'; 4 | @import './po-datepicker/po-datepicker.css'; 5 | @import './po-datepicker-range/po-datepicker-range.css'; 6 | @import './po-field-container'; 7 | @import './po-field-icon/po-field-icon.css'; 8 | @import './po-input/po-input.css'; 9 | @import './po-lookup/po-lookup.css'; 10 | @import './po-multiselect/po-multiselect.css'; 11 | @import './po-radio/po-radio.css'; 12 | @import './po-radio-group/po-radio-group.css'; 13 | @import './po-rich-text'; 14 | @import './po-select/po-select.css'; 15 | @import './po-switch/po-switch.css'; 16 | @import './po-textarea/po-textarea.css'; 17 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-radio-group/po-radio-group.css: -------------------------------------------------------------------------------- 1 | .po-radio-group { 2 | display: flex; 3 | flex-wrap: wrap; 4 | margin: var(--spacing-xs) 0; 5 | row-gap: var(--spacing-md); 6 | width: 100%; 7 | } 8 | 9 | [data-a11y='AA'] .po-radio-group[p-size='small'] { 10 | margin: var(--spacing-xxs) 0; 11 | row-gap: var(--spacing-xs); 12 | } 13 | 14 | .po-radio-group-item { 15 | padding: 0 var(--spacing-md) 0 0; 16 | display: inherit; 17 | } 18 | 19 | [data-a11y='AA'] .po-radio-group[p-size='small'] .po-radio-group-item { 20 | padding: 0 var(--spacing-xs) 0 0; 21 | } 22 | 23 | po-radio-group.ng-invalid.ng-dirty input[type='radio']:not([disabled]) { 24 | border: solid var(--border-width-md) var(--color-feedback-negative-base); 25 | } 26 | -------------------------------------------------------------------------------- /src/cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@po-ui/theme-cli", 3 | "version": "14.0.0", 4 | "description": "po cli theme", 5 | "bin": { 6 | "po-theme": "bin/cli.js" 7 | }, 8 | "author": "PO UI", 9 | "license": "MIT", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/po-ui/po-style" 13 | }, 14 | "dependencies": { 15 | "@po-ui/style": "^14.0.0", 16 | "cssnano": "^4.1.10", 17 | "del": "^5.1.0", 18 | "gulp": "4.0.2", 19 | "gulp-postcss": "^8.0.0", 20 | "gulp-rename": "^1.4.0", 21 | "postcss-custom-properties": "^9.0.2", 22 | "postcss-import": "^12.0.1", 23 | "chalk": "2.4.2", 24 | "commander": "3.0.2", 25 | "cross-spawn": "7.0.1", 26 | "inquirer": "7.0.0", 27 | "shelljs": "0.8.5", 28 | "yargs": "^14.2.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-slide/po-page-slide.js: -------------------------------------------------------------------------------- 1 | function changePageSize(size) { 2 | const element = document.getElementsByClassName('po-page-slide-container')[0]; 3 | 4 | element.classList.remove('po-page-slide-sm'); 5 | element.classList.remove('po-page-slide-md'); 6 | element.classList.remove('po-page-slide-lg'); 7 | element.classList.remove('po-page-slide-xl'); 8 | element.classList.remove('po-page-slide-auto'); 9 | element.classList.add(`po-page-slide-${size}`); 10 | 11 | document.querySelector('.style-page-size').innerHTML = `Size: ${size}`; 12 | } 13 | 14 | function showPageSlide() { 15 | const pageSlide = document.querySelector('.po-page-slide'); 16 | pageSlide.classList.add('show'); 17 | } 18 | 19 | function hidePageSlide() { 20 | const pageSlide = document.querySelector('.po-page-slide'); 21 | pageSlide.classList.remove('show'); 22 | } 23 | -------------------------------------------------------------------------------- /src/css/components/po-grid/po-grid-cell-action.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-grid-cell-action-content-font: { 3 | @apply --font-text; 4 | } 5 | 6 | --color-grid-cell-action-content-text-color: var(--color-neutral-light-10); 7 | --color-grid-cell-action-content-text-color-focusable: var(--color-brand-02-base); 8 | } 9 | 10 | .po-grid-cell-action-content { 11 | @apply --font-grid-cell-action-content-font; 12 | border: 0 1px 1px 0 solid var(--color-grid-cell-action-content-text-color); 13 | height: 44px; 14 | line-height: 1.71; 15 | margin: 0; 16 | max-height: 44px; 17 | max-width: 56px; 18 | min-height: 44px; 19 | min-width: 56px; 20 | padding: 10px 16px; 21 | text-align: center; 22 | width: 56px; 23 | } 24 | 25 | .po-grid-cell-action-content:focus { 26 | border: none; 27 | outline: 1px solid var(--color-grid-cell-action-content-text-color-focusable); 28 | } 29 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-items/po-navbar-item-navigation/po-navbar-item-navigation.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-navbar-item { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --font-navbar-item-navigation-font-size-icon: 24px; 7 | } 8 | 9 | .po-navbar-item-navigation { 10 | display: table-cell; 11 | padding: 0 12px; 12 | vertical-align: middle; 13 | } 14 | 15 | .po-navbar-item-navigation-icon { 16 | color: var(--color-navbar-item-navigation-color-icon); 17 | display: table-cell; 18 | font-size: var(--font-navbar-item-navigation-font-size-icon); 19 | padding: 4px 4px 0 4px; 20 | } 21 | 22 | .po-navbar-item-navigation-icon-disabled { 23 | color: var(--color-navbar-item-navigation-color-icon-disabled); 24 | } 25 | 26 | @media screen and (max-width: 768px) { 27 | /* Utilizado para ocultar atingir a responsividade */ 28 | .po-navbar-item-navigation { 29 | display: none !important; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/components/po-breadcrumb/po-breadcrumb-dropdown.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow-breadcrumb-box-shadow-dropdown: var(--shadow-card); 3 | 4 | --font-breadcrumb-dropdown: { 5 | @apply --font-text; 6 | } 7 | 8 | --font-breadcrumb-icon-more: { 9 | @apply --font-subtitle; 10 | } 11 | } 12 | 13 | .po-breadcrumb-dropdown { 14 | @apply --font-breadcrumb-dropdown; 15 | background-color: var(--color-breadcrumb-background-color-dropdown); 16 | box-shadow: var(--shadow-breadcrumb-box-shadow-dropdown); 17 | position: absolute; 18 | top: 40px; 19 | width: 151px; 20 | z-index: 10; 21 | } 22 | 23 | .po-breadcrumb-dropdown-item { 24 | color: var(--color); 25 | list-style: none; 26 | min-height: 44px; 27 | padding: 10px 16px; 28 | word-wrap: break-word; 29 | } 30 | 31 | .po-breadcrumb-dropdown-item:hover { 32 | background-color: var(--color-breadcrumb-background-color-dropdown-item-hover); 33 | cursor: pointer; 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/images/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sucesso 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-modal-password-recovery/po-modal-password-recovery.css: -------------------------------------------------------------------------------- 1 | .po-modal-password-recovery-text { 2 | color: var(--color-modal-password-recovery-text-color); 3 | } 4 | 5 | .po-modal-password-recovery-link { 6 | color: var(--color-modal-password-recovery-link-color); 7 | } 8 | 9 | .po-modal-password-recovery-link:hover { 10 | color: var(--color-modal-password-recovery-link-color-hover); 11 | text-decoration: underline; 12 | } 13 | 14 | .po-modal-password-recovery-user-image { 15 | display: block; 16 | margin-left: auto; 17 | margin-right: auto; 18 | text-align: center; 19 | } 20 | 21 | @media screen and (min-width: 481px) { 22 | .po-modal-password-recovery-wrapper { 23 | width: 70vw; 24 | } 25 | 26 | .po-modal-password-recovery-content { 27 | max-width: 336px; 28 | margin: 0 auto; 29 | } 30 | } 31 | 32 | @media screen and (min-width: 960px) { 33 | .po-modal-password-recovery-wrapper { 34 | width: 620px; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/images/sorting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/css/components/po-tooltip/po-tooltip.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-tooltip-font-text: { 3 | @apply --font-text; 4 | } 5 | 6 | --shadow-tooltip-shadow-balloon: var(--shadow-tooltip); 7 | } 8 | 9 | .po-tooltip { 10 | background-color: var(--color); 11 | border-radius: var(--border-radius); 12 | box-shadow: var(--shadow-tooltip-shadow-balloon); 13 | max-width: 15rem; 14 | padding: var(--po-density-floating-padding, var(--default-spacing-squish-xs, var(--spacing-squish-md))); 15 | position: fixed; 16 | z-index: 1000; 17 | opacity: 0; 18 | display: block; 19 | } 20 | 21 | .po-tooltip-arrow { 22 | background-color: var(--color); 23 | opacity: 0.9; 24 | } 25 | 26 | .po-tooltip-content { 27 | @apply --font-tooltip-font-text; 28 | color: var(--text-color); 29 | font-style: normal; 30 | font-weight: var(--font-weight-normal); 31 | font-size: var(--font-size-sm); 32 | white-space: normal; 33 | word-wrap: break-word; 34 | text-align: left; 35 | opacity: 0.9; 36 | } 37 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-actions/po-navbar-action/po-navbar-action.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-navbar-action-font-size-content: 24px; 3 | } 4 | 5 | .po-navbar-action { 6 | display: table-cell; 7 | } 8 | 9 | .po-navbar-action-content { 10 | color: var(--color-navbar-action-color-content); 11 | font-size: var(--font-navbar-action-font-size-content); 12 | margin: 0 0 0 16px; 13 | padding-top: 4px; 14 | text-align: center; 15 | vertical-align: middle; 16 | line-height: 1rem; 17 | } 18 | 19 | .po-navbar-action-content:focus-visible { 20 | outline-width: 1px; 21 | outline-color: var(--color-action-focus); 22 | outline-style: auto; 23 | outline-offset: 0; 24 | } 25 | 26 | .po-navbar-action-content > :first-child:not(.po-fonts-icon):not(.po-icon) { 27 | line-height: 2rem; 28 | } 29 | 30 | @media screen and (max-width: 768px) { 31 | /* Utilizado para ocultar todas as actions quando atingir a responsividade */ 32 | .po-navbar-action { 33 | display: none !important; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-edit/po-page-edit.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |

Título da Página

7 |
SubTítulo
8 |
9 | 10 | 11 |
12 | 15 | 18 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-detail/po-page-detail.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |

Título da Página

7 |
SubTítulo
8 |
9 | 10 | 11 |
12 | 15 | 16 | 19 | 20 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /src/css/commons/po-grid-system/po-grid-system.css: -------------------------------------------------------------------------------- 1 | .po-row { 2 | width: 100%; 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | .po-row > * { 7 | min-width: 0; 8 | } 9 | 10 | [class*='po-xl-'], 11 | [class*=' po-xl-'], 12 | [class*='po-visible-xl-'], 13 | [class*=' po-visible-xl-'], 14 | [class*='po-lg'], 15 | [class*=' po-lg-'], 16 | [class*='po-visible-lg-'], 17 | [class*=' po-visible-lg-'], 18 | [class*='po-md-'], 19 | [class*=' po-md-'], 20 | [class*='po-visible-md-'], 21 | [class*=' po-visible-md-'], 22 | [class*='po-sm-'], 23 | [class*=' po-sm-'], 24 | [class*='po-visible-sm-'], 25 | [class*=' po-visible-sm-'] { 26 | float: left; 27 | padding: 0 8px; 28 | } 29 | 30 | .po-visible-xl, 31 | [class*='po-visible-xl-'], 32 | [class*=' po-visible-xl-'], 33 | .po-visible-lg, 34 | [class*='po-visible-lg-'], 35 | [class*=' po-visible-lg-'], 36 | .po-visible-md, 37 | [class*='po-visible-md-'], 38 | [class*=' po-visible-md-'], 39 | .po-visible-sm, 40 | [class*='po-visible-sm-'], 41 | [class*=' po-visible-sm-'] { 42 | display: none; 43 | } 44 | -------------------------------------------------------------------------------- /src/css/components/po-disclaimer-group/po-disclaimer-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-disclaimer-font-title: { 3 | @apply --font-text-bold; 4 | } 5 | } 6 | 7 | .po-disclaimer-group { 8 | background-color: var(--color-disclaimer-group-background-color); 9 | border: solid 1px var(--color-disclaimer-group-border-color); 10 | border-radius: 3px; 11 | padding: var(--po-density-content-padding, var(--default-spacing-xs, var(--spacing-sm))); 12 | padding-bottom: var(--default-spacing-0, var(--spacing-xs)); 13 | width: 100%; 14 | } 15 | 16 | .po-disclaimer-group .po-clickable.po-tag-wrapper, 17 | [data-a11y='AA'] .po-disclaimer-group .po-clickable.po-tag-wrapper { 18 | min-height: 0; 19 | } 20 | 21 | .po-disclaimer-group-title { 22 | font-family: var(--font-family-default-bold), sans-serif; 23 | font-size: var(--font-size-default-normal); 24 | line-height: 24px; 25 | color: var(--color-disclaimer-group-font-title); 26 | padding-bottom: 8px; 27 | } 28 | 29 | .po-disclaimer-group-disclaimer-align { 30 | display: inline-block; 31 | margin: 0 8px 8px 0; 32 | } 33 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-logo/po-navbar-logo.css: -------------------------------------------------------------------------------- 1 | .po-navbar-logo { 2 | display: table-cell; 3 | padding: 0 16px 0 0; 4 | vertical-align: middle; 5 | } 6 | 7 | .po-navbar-logo-image { 8 | max-height: 42px; 9 | vertical-align: middle; 10 | } 11 | 12 | .po-navbar-logo-image:focus-visible { 13 | outline-width: 1px; 14 | outline-color: var(--color-action-focus); 15 | outline-style: auto; 16 | outline-offset: 0; 17 | } 18 | 19 | @media screen and (max-width: 768px) { 20 | .po-navbar-logo { 21 | text-align: center; 22 | width: 100%; 23 | } 24 | } 25 | 26 | @media screen and (max-width: 1200px) { 27 | .po-navbar-logo-menu { 28 | padding-left: 24px; 29 | } 30 | } 31 | 32 | @media screen and (max-width: 1024px) { 33 | .po-navbar-logo-menu { 34 | padding: 0 16px; 35 | } 36 | 37 | .po-navbar-no-logo { 38 | padding-left: 0px; 39 | } 40 | } 41 | 42 | @media screen and (max-width: 1200px) { 43 | .po-navbar-no-logo { 44 | padding-left: 0px; 45 | } 46 | 47 | .po-navbar-no-logo { 48 | padding-left: 0px; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar-items/po-navbar-item/po-navbar-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-navbar-item { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --shadow-navbar-item-box-shadow-selected: 0 -4px 0 0 var(--color-navbar-item-color-shadow-selected) inset; 7 | } 8 | 9 | .po-navbar-item { 10 | @apply --font-navbar-item; 11 | color: var(--color-navbar-item-color); 12 | display: table-cell; 13 | padding: 16px 0; 14 | text-transform: uppercase; 15 | white-space: nowrap; 16 | } 17 | 18 | .po-navbar-item-link, 19 | .po-navbar-item-link:hover { 20 | color: inherit; 21 | margin-left: 1px; 22 | padding: 17px 8px; 23 | text-decoration: none !important; 24 | } 25 | 26 | .po-navbar-item-link { 27 | cursor: default; 28 | } 29 | 30 | .po-navbar-item-link:focus-visible { 31 | outline-width: 1px; 32 | outline-color: var(--color-action-focus); 33 | outline-style: auto; 34 | outline-offset: 0; 35 | } 36 | 37 | .po-navbar-item-selected { 38 | box-shadow: var(--shadow-navbar-item-box-shadow-selected); 39 | color: var(--color-navbar-item-color-selected); 40 | } 41 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-checkbox-group/po-checkbox-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow-checkbox-group-box-shadow-input: var(--shadow-input); 3 | } 4 | 5 | .po-checkbox-group-item { 6 | padding: 0 var(--spacing-md) 0 0; 7 | position: relative; 8 | } 9 | 10 | [data-a11y='AA'] .po-checkbox-group-content[p-size='small'] .po-checkbox-group-item { 11 | padding: 0 var(--spacing-xs) 0 0; 12 | } 13 | 14 | .po-checkbox-group-item .po-checkbox-group-input { 15 | height: 0; 16 | width: 0; 17 | } 18 | 19 | ul.po-list-checkbox-group { 20 | list-style: none; 21 | } 22 | 23 | li.po-checkbox-group-item { 24 | list-style: none; 25 | } 26 | 27 | po-checkbox-group.ng-invalid.ng-dirty .po-checkbox:not([aria-disabled='true']) { 28 | border: solid 2px var(--color-checkbox-group-border-input-invalid); 29 | } 30 | 31 | .po-checkbox-group-content ul { 32 | margin: var(--spacing-xs) 0; 33 | row-gap: var(--spacing-md); 34 | width: 100%; 35 | } 36 | 37 | [data-a11y='AA'] .po-checkbox-group-content[p-size='small'] ul { 38 | margin: var(--spacing-xxs) 0; 39 | row-gap: var(--spacing-xs); 40 | } 41 | -------------------------------------------------------------------------------- /.github/workflows/publish_theme_cli_ci.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/theme-cli 2 | on: 3 | workflow_dispatch: 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | 10 | - uses: actions/checkout@v2 11 | - uses: actions/setup-node@v1 12 | with: 13 | node-version: '14.x' 14 | registry-url: 'https://registry.npmjs.org' 15 | 16 | - run: npm install 17 | - run: npm run build 18 | 19 | - name: Get package.json version 20 | id: package-version 21 | uses: martinbeentjes/npm-get-version-action@master 22 | with: 23 | path: dist/cli 24 | 25 | - name: Run publish with -next 26 | run: npm publish dist/cli --tag next 27 | env: 28 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 29 | 30 | - name: Add "latest" tag 31 | if: (!contains(steps.package-version.outputs.current-version, '-next') && !contains(steps.package-version.outputs.current-version, '-rc')) 32 | run: npm dist-tags add @po-ui/theme-cli@${{ steps.package-version.outputs.current-version}} 33 | env: 34 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | -------------------------------------------------------------------------------- /src/cli/bin/cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | require('shelljs/global'); 3 | 4 | const program = require('commander'); 5 | const command = require('../src'); 6 | const package = require('../package.json'); 7 | 8 | program.version(package.version); 9 | 10 | program.on('--help', () => { 11 | // Print PO UI 12 | console.log(' ____ ___ _ _ ___ _ _ '); 13 | console.log(' | _ \\ / _ \\ | | | | |_ _| | | | | '); 14 | console.log(' | |_) | | | | | | | | | | | | | | | '); 15 | console.log(' | __/ | |_| | | |_| | | | |_| |_| '); 16 | console.log(' |_| \\___/ \\___/ |___| (_) (_) '); 17 | }); 18 | 19 | program 20 | .command('new ') 21 | .alias('n') 22 | .description('Create a new theme for PO UI') 23 | .action(themeName => command.new(themeName)); 24 | 25 | program 26 | .command('build') 27 | .alias('b') 28 | .description('Build package for new theme') 29 | .option('--fonts', 'to copy custom fonts') 30 | .option('--name', 'name of file generated on build') 31 | .action(options => command.build(options)); 32 | 33 | program.parse(process.argv); 34 | -------------------------------------------------------------------------------- /src/assets/images/sort-ascending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/css/components/po-loading/po-loading.html: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | Carregando 25 |
26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 PO UI 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/cli/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 TOTVS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/css/components/po-link/po-link.css: -------------------------------------------------------------------------------- 1 | .po-link { 2 | color: var(--text-color); 3 | font-family: var(--font-family); 4 | font-size: inherit; 5 | font-weight: var(--font-weight); 6 | letter-spacing: var(--letter-spacing-auto); 7 | line-height: inherit; 8 | text-decoration: underline; 9 | } 10 | 11 | .po-link:is(button) { 12 | background: none; 13 | border: none; 14 | padding: 0; 15 | } 16 | 17 | .po-link:hover { 18 | color: var(--text-color-hover); 19 | cursor: pointer; 20 | text-decoration: none; 21 | } 22 | 23 | .po-link:focus { 24 | outline-color: var(--outline-color-focused); 25 | outline-offset: 2px; 26 | outline-style: solid; 27 | outline-width: var(--outline-width); 28 | } 29 | 30 | .po-link:active { 31 | color: var(--text-color-pressed); 32 | cursor: pointer; 33 | outline-color: var(--outline-color-focused); 34 | outline-offset: 2px; 35 | outline-style: solid; 36 | outline-width: var(--outline-width); 37 | text-decoration: none; 38 | } 39 | 40 | .po-link:focus-visible { 41 | outline-width: var(--outline-width-focus-visible); 42 | } 43 | 44 | .po-link:visited { 45 | color: var(--text-color-visited); 46 | } 47 | -------------------------------------------------------------------------------- /src/css/components/po-loading/po-loading-icon/po-loading-icon.css: -------------------------------------------------------------------------------- 1 | .po-loading-icon-neutral { 2 | color: var(--color-loading-icon-color-neutral); 3 | } 4 | 5 | .po-loading-icon { 6 | color: var(--color); 7 | } 8 | 9 | .po-loading-svg-lg svg { 10 | min-height: 5rem; 11 | min-width: 5rem; 12 | } 13 | 14 | .po-loading-icon-container.po-loading-svg-lg { 15 | min-width: 5rem; 16 | min-height: 5rem; 17 | } 18 | 19 | .po-loading-svg-md svg { 20 | min-height: 2rem; 21 | min-width: 2rem; 22 | } 23 | 24 | .po-loading-icon-container.po-loading-svg-md { 25 | min-width: 2rem; 26 | min-height: 2rem; 27 | } 28 | 29 | .po-loading-svg-sm svg, 30 | [data-a11y='AAA'] .po-loading-svg-xs svg { 31 | min-width: 1.5rem; 32 | min-height: 1.5rem; 33 | } 34 | 35 | .po-loading-icon-container.po-loading-svg-sm, 36 | [data-a11y='AAA'] .po-loading-icon-container.po-loading-svg-xs { 37 | min-width: 1.5rem; 38 | min-height: 1.5rem; 39 | } 40 | 41 | .po-loading-svg-xs svg { 42 | min-width: 1rem; 43 | min-height: 1rem; 44 | } 45 | 46 | .po-loading-icon-container.po-loading-svg-xs, 47 | [data-a11y='AAA'] .po-loading-icon-container.po-loading-svg-xs { 48 | min-width: 1rem; 49 | min-height: 1rem; 50 | } 51 | -------------------------------------------------------------------------------- /src/app/assets/css/app.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | .po-cdn-app.main { 7 | height: inherit; 8 | overflow: hidden; 9 | width: inherit; 10 | } 11 | 12 | .po-cdn-app-toolbar { 13 | margin-left: 256px; 14 | position: absolute; 15 | width: calc(100% - 256px) !important; 16 | } 17 | 18 | .po-cdn-app-content { 19 | display: inline-block; 20 | height: calc(100% - 48px); 21 | margin-left: 256px; 22 | overflow-x: hidden; 23 | overflow-y: auto; 24 | padding: 0 8px; 25 | position: absolute; 26 | top: 48px; 27 | width: calc(100% - 256px); 28 | } 29 | 30 | @media screen and (max-width: 1200px) { 31 | .po-cdn-app-toolbar { 32 | margin-left: 40px; 33 | position: fixed; 34 | width: 100% !important; 35 | } 36 | 37 | .po-cdn-app-content { 38 | height: calc(100% - 45px); 39 | margin-left: 0; 40 | position: fixed; 41 | width: 100%; 42 | } 43 | 44 | .po-cdn-app-router { 45 | margin-top: 0; 46 | } 47 | } 48 | 49 | /* Sobrescreve comportamento padrão para se enquadrar no cdn app */ 50 | .po-page-content { 51 | position: relative !important; 52 | } 53 | 54 | .po-cdn-app-menu .po-menu-sub-items-visible { 55 | max-height: 100% !important; 56 | } 57 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-content/po-page-content.html: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 |

Style

14 |

padding: 8px

15 |

height: 100%

16 |

overflow-y: auto

17 |
18 | 19 |
20 |

Content

21 |

22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 23 | magna aliqua. Orci phasellus egestas tellus rutrum tellus. Arcu non odio euismod lacinia at quis risus sed 24 | vulputate. Sed felis eget velit aliquet sagittis id consectetur purus ut. Suspendisse potenti nullam ac tortor 25 | vitae. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Facilisis leo vel fringilla est 26 | ullamcorper. Ut pharetra sit amet aliquam id diam. Eget lorem dolor sed viverra ipsum. Integer vitae justo eget 27 | magna fermentum iaculis eu. Sed sed risus pretium quam. Lacus viverra vitae congue eu consequat ac felis donec 28 | etc. 29 |

30 |
31 |
32 | -------------------------------------------------------------------------------- /src/assets/images/sort-descending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/css/components/po-grid/po-grid-head.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-grid-head-content-font-bold: { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --color-grid-head-content-border-bottom-color: var(--color-primary-light-80); 7 | --color-grid-head-content-border-right-color: var(--color-neutral-light-10); 8 | --color-grid-head-content-color: var(--color-brand-02-base); 9 | } 10 | 11 | .po-grid-head-content { 12 | @apply --font-grid-head-content-font-bold; 13 | border-bottom: 2px solid var(--color-grid-head-content-border-bottom-color); 14 | border-left: none; 15 | border-right: 1px solid var(--color-grid-head-content-border-right-color); 16 | border-top: none; 17 | color: var(--color-grid-head-content-color); 18 | height: 44px; 19 | line-height: 1.71; 20 | margin: 0; 21 | max-height: 44px; 22 | min-height: 44px; 23 | overflow: hidden; 24 | padding: 10px 16px; 25 | text-align: left; 26 | text-overflow: ellipsis; 27 | white-space: nowrap; 28 | } 29 | 30 | .po-grid-head-center { 31 | text-align: center; 32 | } 33 | 34 | .po-grid-head-right { 35 | text-align: right; 36 | } 37 | 38 | .po-grid-head-content:focus { 39 | border: 1px solid var(--color-grid-head-content-color); 40 | outline: none; 41 | } 42 | -------------------------------------------------------------------------------- /src/css/commons/po-icon/po-icon-base.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PoIcon'; 3 | src: url('./../icons/PoIcon/PoIcon.eot?31xwv'); 4 | src: url('./../icons/PoIcon/PoIcon.eot?31xwv#iefix') format('embedded-opentype'), 5 | url('./../icons/PoIcon/PoIcon.ttf?31xwv') format('truetype'), 6 | url('./../icons/PoIcon/PoIcon.woff?31xwv') format('woff'), 7 | url('./../icons/PoIcon/PoIcon.svg?31xwv#PoIcon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | po-icon i { 13 | font-style: normal; 14 | } 15 | 16 | [class^='po-icon'], 17 | [class*=' po-icon'] { 18 | /* use !important to prevent issues with browser extensions that change fonts */ 19 | font-family: 'PoIcon' !important; 20 | speak: none; 21 | font-style: normal; 22 | font-weight: normal; 23 | font-variant: normal; 24 | text-transform: none; 25 | line-height: 1; 26 | /* Better Font Rendering =========== */ 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | } 30 | 31 | .po-icon { 32 | display: inline-block; 33 | font: normal normal normal 14px/1 PoIcon; 34 | font-size: inherit; 35 | text-rendering: auto; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | } 39 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-datepicker/po-datepicker.css: -------------------------------------------------------------------------------- 1 | .po-datepicker { 2 | position: relative; 3 | } 4 | 5 | .po-datepicker-popup-calendar { 6 | height: 288px; 7 | position: fixed; 8 | width: 288px; 9 | z-index: 1000; 10 | } 11 | 12 | .po-datepicker-popup-calendar .po-calendar { 13 | position: absolute; 14 | } 15 | 16 | .po-datepicker-calendar-mobile { 17 | left: calc(50% - (var(--po-calendar-width) / 2)); 18 | position: fixed !important; 19 | top: calc(50% - 145px); 20 | z-index: 11; 21 | } 22 | 23 | .po-datepicker-calendar-overlay { 24 | background-color: var(--color-calendar-background-color-mobile-overlay); 25 | bottom: 0; 26 | left: 0; 27 | position: fixed; 28 | right: 0; 29 | top: 0; 30 | z-index: 11; 31 | } 32 | 33 | .po-datepicker-button i, 34 | [data-a11y='AAA'] .po-datepicker-button-aa i { 35 | font-size: var(--font-size-lg); 36 | } 37 | 38 | .po-datepicker-button-aa i { 39 | font-size: var(--font-size-default); 40 | } 41 | 42 | po-datepicker .po-field-container-title po-helper, 43 | [data-a11y='AA'] po-datepicker .po-field-container-title po-helper { 44 | padding-right: 18px; 45 | } 46 | 47 | [data-a11y='AA'] po-datepicker .po-field-container-title po-helper:has(.po-helper-container[p-size='small']) { 48 | padding-right: 9px; 49 | } 50 | -------------------------------------------------------------------------------- /src/css/components/po-dynamic/po-dynamic.css: -------------------------------------------------------------------------------- 1 | .po-dynamic { 2 | display: grid; 3 | width: 100%; 4 | } 5 | 6 | .po-dynamic-container { 7 | display: grid; 8 | gap: var(--gap, var(--po-density-gap-spacing, var(--default-spacing-xs, var(--spacing-md)))); 9 | width: 100%; 10 | 11 | --font-family-dynamic: var(--font-family); 12 | --font-size-dynamic: var(--font-size); 13 | --font-weight-dynamic: var(--line-weight); 14 | --line-height-dynamic: var(--line-height); 15 | --letter-spacing-dynamic: var(--letter-spacing); 16 | --text-color-dynamic: var(--text-color); 17 | --margin-dynamic: var(--margin); 18 | } 19 | 20 | .po-dynamic-container po-container { 21 | --font-family: var(--font-family-dynamic); 22 | --font-size: var(--font-size-dynamic); 23 | --font-weight: var(--line-weight-dynamic); 24 | --line-height: var(--line-height-dynamic); 25 | --letter-spacing: var(--letter-spacing-dynamic); 26 | --text-color: var(--text-color-dynamic); 27 | --margin: var(--margin-dynamic); 28 | } 29 | 30 | .po-dynamic-container .po-container .po-container-content { 31 | padding: var(--po-density-content-padding, var(--default-spacing-xs, var(--spacing-md))); 32 | } 33 | 34 | [data-a11y='AA'] po-dynamic-view[p-components-size='small'] .po-dynamic-view po-tag .po-tag-container { 35 | gap: var(--spacing-xxs); 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/images/po_black.svg: -------------------------------------------------------------------------------- 1 | 2 | po_black 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/css/components/po-container/po-container.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --border-container-border-no-shadow: solid 1px var(--color-container-color-shadow); 3 | --shadow-container-box-shadow: var(--shadow-container); 4 | } 5 | 6 | .po-container { 7 | display: grid; 8 | width: 100%; 9 | } 10 | 11 | .po-container-title { 12 | font-family: var(--font-family); 13 | font-size: var(--font-size, 1.125rem); 14 | font-weight: var(--line-weight); 15 | line-height: var(--line-height); 16 | letter-spacing: var(--letter-spacing); 17 | color: var(--text-color); 18 | margin: var(--margin); 19 | display: grid; 20 | } 21 | 22 | .po-container-content { 23 | border-radius: var(--border-radius); 24 | border: solid var(--border-width) var(--border-color); 25 | box-shadow: none; 26 | display: block; 27 | height: auto; 28 | overflow-y: auto; 29 | padding: var(--padding, var(--po-density-content-padding, var(--default-spacing-xs, var(--spacing-sm)))); 30 | width: 100%; 31 | } 32 | 33 | [data-default-size='small'][data-a11y='AA'] .po-container-content { 34 | font-size: var(--font-size-sm); 35 | } 36 | 37 | .po-container-content:not(po-widget .po-container-content) { 38 | background-color: var(--background); 39 | } 40 | 41 | .po-container-no-border { 42 | border: none; 43 | } 44 | 45 | .po-container-no-padding { 46 | padding: 0; 47 | } 48 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Código de conduta 2 | 3 | Como contribuidores e mantenedores desse projeto, e no interesse de fomentar uma comunidade aberta e acolhedora, nos comprometemos a respeitar a todos que contribuem de alguma forma, sendo reportando problemas, atualizando a documentação, enviando Pull Requests, interagindo nas issues e quaisquer outras atividades. 4 | 5 | Estamos comprometidos em tornar a participação neste projeto uma experiência livre de assédio para todos, independentemente do nível de experiência, gênero, identidade e expressão de gênero, orientação sexual, deficiência, aparência pessoal, tamanho do corpo, raça, etnia, idade, religião ou nacionalidade. 6 | 7 | A comunicação através de qualquer um dos canais do PO UI (GitHub, Twitter, etc.) deve ser construtiva e nunca recorrer a ataques pessoais, trolling, assédio público ou privado, insultos ou outras condutas não profissionais. 8 | 9 | Se algum membro da comunidade violar esse código de conduta, os mantenedores do projeto PO UI podem tomar medidas, removendo problemas, comentários e PRs ou bloqueando contas, conforme for apropriado. 10 | 11 | Este código de conduta aplica-se tanto nos espaços do projeto como nos espaços públicos quando um indivíduo está representando o projeto ou sua comunidade. 12 | 13 | Se você foi sujeito, testemunhou um comportamento inaceitável ou tem outras preocupações, envie um email para contatopoui@gmail.com. 14 | -------------------------------------------------------------------------------- /src/css/components/po-divider/po-divider.css: -------------------------------------------------------------------------------- 1 | po-divider { 2 | --font-family: var(--font-family-theme); 3 | --font-size: 10px; 4 | --line-height: 16px; 5 | --text-transform: uppercase; 6 | } 7 | 8 | .po-divider-label { 9 | font-family: var(--font-family); 10 | font-size: var(--font-size); 11 | line-height: var(--line-height); 12 | text-transform: var(--text-transform); 13 | color: var(--color-neutral-dark-90); 14 | margin-bottom: 4px; 15 | padding-left: 0.2rem; 16 | } 17 | 18 | .po-divider { 19 | margin-bottom: var(--po-density-gap-spacing, var(--default-spacing-xs, var(--spacing-sm))); 20 | padding: 8px 0; 21 | } 22 | 23 | .po-divider[p-size='small'] svg { 24 | height: var(--border-width-sm); 25 | } 26 | 27 | .po-divider[p-size='medium'] svg { 28 | height: var(--border-width-md); 29 | } 30 | 31 | .po-divider[p-size='large'] svg { 32 | height: var(--border-width-lg); 33 | } 34 | 35 | .po-divider[p-size='small'] line { 36 | stroke-width: var(--border-width-sm); 37 | } 38 | 39 | .po-divider[p-size='medium'] line { 40 | stroke-width: var(--border-width-md); 41 | } 42 | 43 | .po-divider[p-size='large'] line { 44 | stroke-width: var(--border-width-lg); 45 | } 46 | 47 | .po-divider svg { 48 | display: block; 49 | width: 100%; 50 | } 51 | 52 | .po-divider line { 53 | fill: var(--color); 54 | stroke: var(--color); 55 | stroke-linecap: var(--stroke-linecap); 56 | } 57 | -------------------------------------------------------------------------------- /src/css/components/po-tabs/po-tabs.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --margin-tabs-container-xs: calc(-2 * var(--default-spacing-xs)); 3 | --margin-tabs-container-sm: calc(-1 * var(--spacing-sm)); 4 | } 5 | 6 | po-page-default .po-tabs-container { 7 | overflow: initial; 8 | position: relative; 9 | } 10 | 11 | .po-tabs-container { 12 | overflow: hidden; 13 | position: initial; 14 | } 15 | 16 | .po-tabs-header { 17 | display: table; 18 | table-layout: fixed; 19 | width: 100%; 20 | gap: var(--spacing-xs); 21 | background-color: var(--background); 22 | padding-inline: var(--padding-tabs-header); 23 | } 24 | 25 | .po-tabs-button-wrapper { 26 | width: 100%; 27 | display: flex; 28 | align-items: center; 29 | justify-content: flex-start; 30 | gap: 0.5rem; 31 | box-shadow: inset 0 -1px 0 0 var(--color-baseline); 32 | } 33 | 34 | .po-tabs-content { 35 | padding-top: var(--po-density-gap-header-content, var(--spacing-xs)); 36 | } 37 | 38 | .po-page-content .po-tabs-content { 39 | padding-inline: var(--content-padding-tabs); 40 | } 41 | 42 | .po-page-content .po-tabs-header { 43 | padding-inline: 0px; 44 | } 45 | 46 | .po-page-content .po-tabs-container { 47 | margin-left: var(--margin-tabs-container-left, var(--margin-tabs-container-xs, var(--margin-tabs-container-sm))); 48 | margin-right: var(--margin-tabs-container-right, var(--margin-tabs-container-xs, var(--margin-tabs-container-sm))); 49 | } 50 | -------------------------------------------------------------------------------- /src/css/components/po-popover/po-popover.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-popover-font-title: { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --popover-border-radius: 3px; 7 | 8 | --shadow-popover-box-shadow: var(--shadow-popover); 9 | --shadow-popover-box-shadow-arrow: var(--shadow-popover-arrow); 10 | } 11 | 12 | .po-popover { 13 | background-color: var(--color-neutral-light-00); 14 | border-radius: var(--popover-border-radius); 15 | box-shadow: var(--shadow-popover-box-shadow); 16 | max-height: 800px; 17 | max-width: 800px; 18 | min-height: 172px; 19 | min-width: 240px; 20 | position: fixed; 21 | z-index: 1000; 22 | } 23 | 24 | .po-popover-arrow { 25 | background-color: var(--color-popover-background-color-arrow); 26 | box-shadow: var(--shadow-popover-box-shadow-arrow); 27 | } 28 | 29 | .po-popover-content { 30 | padding: var(--po-density-floating-padding, var(--default-spacing-squish-xs, var(--spacing-sm))); 31 | width: 100%; 32 | max-height: 768px; 33 | overflow: auto; 34 | } 35 | 36 | .po-popover-title { 37 | @apply --font-popover-font-title; 38 | color: var(--color-popover-color-text-title); 39 | display: block; 40 | line-height: var(--line-height-md); 41 | margin-bottom: 8px; 42 | } 43 | 44 | [data-default-size='small'][data-a11y='AA'] .po-popover-title, 45 | [data-default-size='small'][data-a11y='AA'] .po-popover-content { 46 | font-size: var(--font-size-sm); 47 | } 48 | -------------------------------------------------------------------------------- /src/css/components/index.css: -------------------------------------------------------------------------------- 1 | @import './../commons'; 2 | 3 | @import './po-accordion'; 4 | @import './po-avatar'; 5 | @import './po-badge'; 6 | @import './po-breadcrumb'; 7 | @import './po-button'; 8 | @import './po-button-group'; 9 | @import './po-calendar'; 10 | @import './po-code-editor'; 11 | @import './po-container'; 12 | @import './po-chart'; 13 | @import './po-disclaimer'; 14 | @import './po-disclaimer-group'; 15 | @import './po-divider'; 16 | @import './po-dropdown'; 17 | @import './po-dynamic'; 18 | @import './po-field'; 19 | @import './po-gauge'; 20 | @import './po-grid'; 21 | @import './po-helper'; 22 | @import './po-info'; 23 | @import './po-listbox'; 24 | @import './po-list-view'; 25 | @import './po-loading'; 26 | @import './po-loading-overlay'; 27 | @import './po-menu'; 28 | @import './po-menu-panel'; 29 | @import './po-modal'; 30 | @import './po-navbar'; 31 | @import './po-overlay'; 32 | @import './po-page'; 33 | @import './po-popover'; 34 | @import './po-popup'; 35 | @import './po-progress'; 36 | @import './po-slide'; 37 | @import './po-stepper'; 38 | @import './po-table'; 39 | @import './po-tabs'; 40 | @import './po-tag'; 41 | @import './po-toolbar'; 42 | @import './po-tooltip'; 43 | @import './po-tree-view'; 44 | @import './po-upload'; 45 | @import './po-widget'; 46 | @import './po-link'; 47 | @import './po-label'; 48 | @import './po-image'; 49 | @import './po-search'; 50 | @import './po-clean'; 51 | @import './po-header'; 52 | -------------------------------------------------------------------------------- /src/css/components/po-progress/po-progress.css: -------------------------------------------------------------------------------- 1 | .po-progress-description { 2 | margin-bottom: var(--spacing-xs); 3 | } 4 | 5 | .po-progress-info { 6 | display: flex; 7 | justify-content: space-between; 8 | flex-wrap: nowrap; 9 | gap: var(--spacing-xs); 10 | } 11 | 12 | .po-progress-info-text { 13 | font-family: var(--font-family); 14 | color: var(--color-progress-color-text, var(--text-color)); 15 | font-weight: var(--font-weight-normal); 16 | font-size: var(--font-size-default); 17 | line-height: var(--line-height-md); 18 | } 19 | 20 | [data-a11y='AA'] po-progress[p-size-actions='small'] .po-progress-description label.po-label, 21 | [data-a11y='AA'] po-progress[p-size-actions='small'] .po-progress-info-text, 22 | [data-a11y='AA'] po-progress[p-size-actions='small'] .po-progress-info-left, 23 | [data-a11y='AA'] po-progress[p-size-actions='small'] .po-progress-info-right { 24 | font-size: var(--font-size-sm); 25 | } 26 | 27 | .po-progress-info-text-error { 28 | color: var(--text-color-error); 29 | font-size: var(--font-size-sm); 30 | } 31 | 32 | .po-progress-info-icon-error { 33 | color: var(--color-icon-error); 34 | } 35 | 36 | .po-progress-info-left, 37 | .po-progress-info-right { 38 | display: flex; 39 | gap: var(--spacing-xs); 40 | font-size: var(--font-size-default); 41 | margin-bottom: auto; 42 | } 43 | 44 | .po-progress-info-left { 45 | align-items: top; 46 | } 47 | 48 | .po-progress-info-right { 49 | align-items: center; 50 | } 51 | -------------------------------------------------------------------------------- /src/css/components/po-grid/po-grid-cell-content.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-grid-cell-content-font: { 3 | @apply --font-text; 4 | } 5 | 6 | --color-grid-cell-content-input-border-color: var(--color-neutral-light-10); 7 | --color-grid-cell-content-border-color-focusable: var(--color-brand-02-base); 8 | 9 | --color-grid-cell-content-color: var(--color-brand-02-base); 10 | --color-grid-cell-content-required-color: var(--color-07); 11 | } 12 | 13 | .po-grid-cell-content, 14 | .po-grid-cell-input { 15 | @apply --font-grid-cell-content-font; 16 | border: 0 1px 1px 0 solid var(--color-grid-cell-content-input-border-color); 17 | height: 44px; 18 | line-height: 1.71; 19 | margin: 0; 20 | overflow: hidden; 21 | padding: 10px 16px; 22 | text-align: left; 23 | text-overflow: ellipsis; 24 | white-space: nowrap; 25 | color: var(--color-neutral-dark-80); 26 | } 27 | 28 | .po-grid-cell-center { 29 | text-align: center; 30 | } 31 | 32 | .po-grid-cell-right { 33 | text-align: right; 34 | } 35 | 36 | .po-grid-cell-content:focus { 37 | border: none; 38 | outline: 1px solid var(--color-grid-cell-content-border-color-focusable); 39 | } 40 | 41 | .po-grid-cell-required { 42 | border: 1px dashed var(--color-grid-cell-content-required-color); 43 | } 44 | 45 | .po-grid-cell-input { 46 | border: 1px solid var(--color-grid-cell-content-color); 47 | box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1); 48 | max-width: 100%; 49 | min-width: 100%; 50 | outline: none; 51 | position: relative; 52 | width: 100%; 53 | } 54 | -------------------------------------------------------------------------------- /src/css/commons/po-grid-system/po-grid-system-sm.css: -------------------------------------------------------------------------------- 1 | @media (max-width: $gridSystemSmMaxWidth), (max-width: var(--gridSystemSmMaxWidth)) { 2 | /* Classes para definição de visibilidade */ 3 | 4 | .po-visible-sm, 5 | [class*='po-visible-sm-'], 6 | [class*=' po-visible-sm-'] { 7 | display: block; 8 | } 9 | 10 | .po-hidden-sm { 11 | display: none; 12 | } 13 | 14 | /* Classes para definição do tamanho default */ 15 | 16 | [class*='po-md-'], 17 | [class*='po-lg-'], 18 | [class*='po-xl-'] { 19 | width: 100%; 20 | } 21 | 22 | /* Classes para definição do tamanho */ 23 | 24 | .po-sm-1, 25 | .po-visible-sm-1 { 26 | width: 8.33333333%; 27 | } 28 | 29 | .po-sm-2, 30 | .po-visible-sm-2 { 31 | width: 16.66665%; 32 | } 33 | 34 | .po-sm-3, 35 | .po-visible-sm-3 { 36 | width: 25%; 37 | } 38 | 39 | .po-sm-4, 40 | .po-visible-sm-4 { 41 | width: 33.33333%; 42 | } 43 | 44 | .po-sm-5, 45 | .po-visible-sm-5 { 46 | width: 41.66666%; 47 | } 48 | 49 | .po-sm-6, 50 | .po-visible-sm-6 { 51 | width: 50%; 52 | } 53 | 54 | .po-sm-7, 55 | .po-visible-sm-7 { 56 | width: 58.33333333%; 57 | } 58 | 59 | .po-sm-8, 60 | .po-visible-sm-8 { 61 | width: 66.66666667%; 62 | } 63 | 64 | .po-sm-9, 65 | .po-visible-sm-9 { 66 | width: 75%; 67 | } 68 | 69 | .po-sm-10, 70 | .po-visible-sm-10 { 71 | width: 83.33333333%; 72 | } 73 | 74 | .po-sm-11, 75 | .po-visible-sm-11 { 76 | width: 91.66666667%; 77 | } 78 | 79 | .po-sm-12, 80 | .po-visible-sm-12 { 81 | width: 100%; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/css/components/po-avatar/po-avatar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow-avatar-box-shadow-avatar: var(--shadow-input); 3 | } 4 | 5 | .po-avatar { 6 | background-repeat: no-repeat; 7 | background-size: cover; 8 | border-radius: 150px; 9 | box-shadow: var(--shadow-avatar-box-shadow-avatar); 10 | display: flex; 11 | margin: 5px; 12 | overflow: hidden; 13 | } 14 | 15 | .po-avatar-image { 16 | height: 100%; 17 | } 18 | 19 | .po-avatar.po-avatar-xs { 20 | height: 24px; 21 | width: 24px; 22 | line-height: 12px; 23 | } 24 | 25 | .po-avatar.po-avatar-sm { 26 | height: 32px; 27 | width: 32px; 28 | line-height: 16px; 29 | } 30 | 31 | .po-avatar.po-avatar-md { 32 | height: 64px; 33 | width: 64px; 34 | line-height: 32px; 35 | } 36 | 37 | .po-avatar.po-avatar-lg { 38 | height: 96px; 39 | width: 96px; 40 | line-height: 48px; 41 | } 42 | 43 | .po-avatar.po-avatar-xl { 44 | height: 144px; 45 | width: 144px; 46 | line-height: 72px; 47 | } 48 | 49 | .po-avatar-default-icon { 50 | color: var(--color-avatar-background-color-avatar); 51 | text-align: center; 52 | width: 100%; 53 | } 54 | 55 | .po-avatar-xs .po-avatar-default-icon { 56 | font-size: 12px; 57 | padding: 6px 0; 58 | } 59 | 60 | .po-avatar-sm .po-avatar-default-icon { 61 | font-size: 16px; 62 | padding: 8px 0; 63 | } 64 | 65 | .po-avatar-md .po-avatar-default-icon { 66 | font-size: 32px; 67 | padding: 16px 0; 68 | } 69 | 70 | .po-avatar-lg .po-avatar-default-icon { 71 | font-size: 48px; 72 | padding: 24px 0; 73 | } 74 | 75 | .po-avatar-xl .po-avatar-default-icon { 76 | font-size: 72px; 77 | padding: 36px 0; 78 | } 79 | -------------------------------------------------------------------------------- /src/css/components/po-grid/po-grid.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-grid-cell-action-border-color: var(--color-primary-light-80); 3 | --color-grid-cell-action-color: var(--color-03); 4 | --color-grid-cell-freeze-color: var(--color-primary-light-80); 5 | 6 | --color-grid-footer-wrapper-border-color: var(--color-neutral-light-10); 7 | 8 | --color-grid-wrapper-border-color: var(--color-neutral-light-10); 9 | } 10 | 11 | .po-grid-wrapper { 12 | border: 1px solid var(--color-grid-wrapper-border-color); 13 | overflow: auto; 14 | } 15 | 16 | .po-grid { 17 | border-bottom: none; 18 | border-right: none; 19 | display: table; 20 | } 21 | 22 | .po-grid .fixed { 23 | display: table; 24 | } 25 | 26 | .po-grid-header-group { 27 | display: table-header-group; 28 | } 29 | 30 | .po-grid-body { 31 | display: table-row-group; 32 | } 33 | 34 | .po-grid-row { 35 | display: table-row; 36 | } 37 | 38 | .po-grid-title, 39 | .po-grid-cell { 40 | border: none; 41 | display: table-cell; 42 | } 43 | 44 | .po-grid-cell-freeze { 45 | border-right: 2px solid var(--color-grid-cell-freeze-color); 46 | } 47 | 48 | .po-grid-cell-action { 49 | border-left: 2px solid var(--color-grid-cell-action-border-color); 50 | color: var(--color-grid-cell-action-color); 51 | } 52 | 53 | .po-grid-freeze, 54 | .po-grid-actions { 55 | width: 100%; 56 | } 57 | 58 | .po-grid-normal { 59 | width: 100%; 60 | } 61 | 62 | .po-grid-cell-normal { 63 | overflow: auto; 64 | } 65 | 66 | .po-grid-footer { 67 | display: table-footer-group; 68 | } 69 | 70 | .po-grid-footer-wrapper { 71 | border: 1px solid var(--color-grid-footer-wrapper-border-color); 72 | border-top: none; 73 | } 74 | -------------------------------------------------------------------------------- /src/css/components/po-avatar/po-avatar.html: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 |
14 |

Avatar clicável

15 |
16 | 17 |
18 | 19 |

Default - md (64x64)

20 |
21 | 22 |
23 | 24 |

Extra Small - xs (24x24)

25 |
26 | 27 |
28 | 29 |

Small - sm (32x32)

30 |
31 | 32 |
33 | 34 |

Medium - md (64x64)

35 |
36 | 37 |
38 | 39 |

Large - lg (96x96)

40 |
41 | 42 |
43 | 44 |

Extra Large - xl (144x144)

45 |
46 | 47 |
48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-textarea/po-textarea.css: -------------------------------------------------------------------------------- 1 | .po-textarea { 2 | font-family: var(--font-family); 3 | font-size: var(--font-size, var(--font-size-default)); 4 | border-color: var(--color); 5 | background: var(--background); 6 | color: var(--text-color); 7 | 8 | font-weight: var(--font-weight-normal); 9 | line-height: var(--line-height-md); 10 | padding: var(--spacing-squish-sm); 11 | border-radius: var(--border-radius-md); 12 | border-width: var(--border-width-sm); 13 | border-style: solid; 14 | width: 100%; 15 | box-sizing: border-box; 16 | resize: both; 17 | } 18 | 19 | [data-a11y='AA'] .po-textarea[p-size='small'] { 20 | font-size: var(--font-size, var(--font-size-sm)); 21 | padding: var(--spacing-squish-xs); 22 | } 23 | 24 | .po-textarea::placeholder { 25 | color: var(--text-color-placeholder); 26 | } 27 | 28 | .po-textarea:hover { 29 | border-color: var(--color-hover); 30 | background: var(--background-hover); 31 | } 32 | 33 | .po-textarea:focus-visible { 34 | border-color: var(--color-focused); 35 | outline-color: var(--outline-color-focused); 36 | 37 | outline-width: var(--outline-width-focus-visible); 38 | outline-style: solid; 39 | outline-offset: 2px; 40 | } 41 | 42 | .po-textarea:read-only { 43 | color: var(--text-color-readonly); 44 | 45 | border-color: var(--color-disabled); 46 | background: var(--background); 47 | cursor: text; 48 | } 49 | 50 | .po-textarea:disabled { 51 | border-color: var(--color-disabled); 52 | background: var(--background-disabled); 53 | 54 | color: var(--input-text); 55 | cursor: not-allowed; 56 | } 57 | 58 | po-textarea.ng-invalid.ng-dirty .po-textarea { 59 | border-color: var(--color-error); 60 | 61 | background: var(--background); 62 | cursor: text; 63 | } 64 | -------------------------------------------------------------------------------- /src/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PO UI - SAMPLE THEME 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 | 22 | 38 |
39 |
40 |
41 |
42 |
43 |

44 |
45 | 46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-default/po-page-default.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |

Título da Página

6 |
SubTítulo
7 |
8 | 9 | 10 |
11 | 14 | 18 |
19 |
20 | 21 |
22 |
23 |

Style

24 |

padding: 8px

25 |

height: 100%

26 |

overflow-y: auto

27 |
28 | 29 |
30 |

Content

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 33 | magna aliqua. Orci phasellus egestas tellus rutrum tellus. Arcu non odio euismod lacinia at quis risus sed 34 | vulputate. Sed felis eget velit aliquet sagittis id consectetur purus ut. Suspendisse potenti nullam ac tortor 35 | vitae. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Facilisis leo vel fringilla est 36 | ullamcorper. Ut pharetra sit amet aliquam id diam. Eget lorem dolor sed viverra ipsum. Integer vitae justo eget 37 | magna fermentum iaculis eu. Sed sed risus pretium quam. Lacus viverra vitae congue eu consequat ac felis donec 38 | etc. 39 |

40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /src/css/commons/po-arrow-positions/po-arrow-positions.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --arrow-position-final: calc(100% - 12px); 3 | --arrow-position-initial: 12px; 4 | --arrow-offset: 4px; 5 | --arrow-size: 8px; 6 | } 7 | 8 | .po-arrow-left, 9 | .po-arrow-left-bottom, 10 | .po-arrow-left-top, 11 | .po-arrow-bottom, 12 | .po-arrow-bottom-left, 13 | .po-arrow-bottom-right, 14 | .po-arrow-right, 15 | .po-arrow-right-bottom, 16 | .po-arrow-right-top, 17 | .po-arrow-top, 18 | .po-arrow-top-left, 19 | .po-arrow-top-right { 20 | height: var(--arrow-size); 21 | position: absolute; 22 | width: var(--arrow-size); 23 | } 24 | 25 | .po-arrow-right, 26 | .po-arrow-right-bottom, 27 | .po-arrow-right-top { 28 | left: calc(100% - var(--arrow-offset)); 29 | transform: translateY(-50%) rotate(135deg); 30 | } 31 | 32 | .po-arrow-left, 33 | .po-arrow-left-bottom, 34 | .po-arrow-left-top { 35 | left: -3px; 36 | transform: translateY(-50%) rotate(-45deg); 37 | } 38 | 39 | .po-arrow-right, 40 | .po-arrow-left { 41 | top: 50%; 42 | } 43 | 44 | .po-arrow-right-bottom, 45 | .po-arrow-left-bottom { 46 | top: var(--arrow-position-final); 47 | } 48 | 49 | .po-arrow-right-top, 50 | .po-arrow-left-top { 51 | top: var(--arrow-position-initial); 52 | } 53 | 54 | .po-arrow-bottom, 55 | .po-arrow-bottom-left, 56 | .po-arrow-bottom-right { 57 | top: calc(100% - var(--arrow-offset)); 58 | transform: rotate(-135deg); 59 | } 60 | 61 | .po-arrow-top, 62 | .po-arrow-top-left, 63 | .po-arrow-top-right { 64 | top: -3px; 65 | transform: rotate(45deg); 66 | } 67 | 68 | .po-arrow-bottom, 69 | .po-arrow-top { 70 | left: calc(50% - var(--arrow-offset)); 71 | } 72 | 73 | .po-arrow-top-left, 74 | .po-arrow-bottom-left { 75 | left: var(--arrow-position-initial); 76 | } 77 | 78 | .po-arrow-top-right, 79 | .po-arrow-bottom-right { 80 | left: calc(var(--arrow-position-final) - var(--arrow-size)); 81 | } 82 | -------------------------------------------------------------------------------- /src/css/commons/po-arrow-positions/po-arrow-positions.html: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 |
23 |

Exemplo das setas para cima

24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |

Exemplo das setas para baixo

33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |

Exemplo das setas para direita

42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |

Exemplo das setas para esquerda

51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | -------------------------------------------------------------------------------- /src/css/components/po-table/po-table-list-manager.css/po-table-list-manager.css: -------------------------------------------------------------------------------- 1 | .po-table-list-manager-title-group-items { 2 | color: var(--color-type); 3 | 4 | font-family: var(--font-family-theme); 5 | font-weight: var(--font-weight-bold); 6 | line-height: var(--line-height-md); 7 | 8 | font-size: var(--font-size-sm); 9 | margin-bottom: 0.5rem; 10 | } 11 | 12 | .po-table-list-manager-section { 13 | gap: var(--spacing-xs); 14 | display: flex; 15 | flex-direction: column; 16 | } 17 | 18 | .po-table-list-manager-section .po-table-list-manager-item-switch po-switch .po-field-container-content { 19 | padding: 0; 20 | } 21 | 22 | .po-table-list-manager-section .po-table-list-manager-item-switch po-switch .po-field-container-bottom:empty { 23 | padding-bottom: 0; 24 | } 25 | 26 | .po-table-list-manager-container-items + .po-table-list-manager-container-items { 27 | margin-top: 10px; 28 | } 29 | 30 | .po-table-list-manager-item { 31 | border-width: 1px; 32 | border-style: solid; 33 | border-color: var(--color-neutral-light-10); 34 | padding: var(--spacing-xs); 35 | border-radius: var(--border-radius-lg); 36 | gap: var(--spacing-xs); 37 | align-items: center; 38 | } 39 | 40 | .po-table-list-manager-item-switch { 41 | display: flex; 42 | align-items: center; 43 | gap: var(--spacing-lg); 44 | } 45 | 46 | .po-table-list-manager-item-text, 47 | [data-a11y='AAA'] .po-table-list-manager-item-text-aa { 48 | color: var(--color-column-text); 49 | 50 | font-family: var(--font-family-theme); 51 | font-weight: var(--font-weight); 52 | line-height: var(--line-height-md); 53 | letter-spacing: var(--letter-spacing-1); 54 | font-size: var(--font-size-default); 55 | } 56 | 57 | .po-table-list-manager-item-text-aa { 58 | font-size: var(--font-size-sm); 59 | } 60 | 61 | .po-table-list-manager-item-buttons { 62 | gap: var(--spacing-xs); 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | } 67 | -------------------------------------------------------------------------------- /src/css/components/po-badge/po-badge.css: -------------------------------------------------------------------------------- 1 | .po-badge-default { 2 | background-color: var(--background-color); 3 | } 4 | 5 | .po-badge { 6 | border-color: transparent; 7 | border-radius: 50%; 8 | color: var(--color); 9 | font-family: var(--font-family); 10 | font-weight: var(--font-weight); 11 | 12 | border-style: solid; 13 | border-width: var(--border-width-sm); 14 | 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | .po-badge-small { 21 | height: 0.5rem; 22 | width: 0.5rem; 23 | } 24 | 25 | .po-badge-medium:not(.po-badge-notification) { 26 | height: 1rem; 27 | width: 1rem; 28 | } 29 | 30 | .po-badge-medium:not(.po-badge-notification) po-icon { 31 | font-size: 10px; 32 | } 33 | 34 | .po-badge-large:not(.po-badge-notification) { 35 | height: 1.5rem; 36 | width: 1.5rem; 37 | } 38 | 39 | .po-badge-large:not(.po-badge-notification) po-icon { 40 | font-size: 14px; 41 | } 42 | 43 | .po-badge-notification { 44 | border-style: solid; 45 | border-width: var(--border-width-sm); 46 | border-radius: var(--border-radius); 47 | 48 | height: 1em; 49 | max-width: 1.25em; 50 | min-width: 1em; 51 | } 52 | 53 | .po-badge-notification span { 54 | font-size: var(--font-size-xs); 55 | } 56 | 57 | .po-badge-border { 58 | border-color: var(--border-color); 59 | } 60 | 61 | .po-badge[p-status='disabled'] { 62 | background-color: var(--background-color); 63 | } 64 | 65 | .po-badge[p-status='positive'] { 66 | background-color: var(--background-color); 67 | } 68 | 69 | .po-badge[p-status='negative'] { 70 | background-color: var(--background-color); 71 | } 72 | 73 | .po-badge[p-status='warning'] { 74 | background-color: var(--background-color); 75 | color: var(--color); 76 | } 77 | 78 | .po-badge po-icon { 79 | display: inline-flex; 80 | } 81 | 82 | .po-badge-medium i.an { 83 | font-size: var(--font-size-xs); 84 | } 85 | 86 | .po-badge-large i.an { 87 | font-size: var(--font-size-default); 88 | } 89 | -------------------------------------------------------------------------------- /src/css/components/po-popup/po-popup.css: -------------------------------------------------------------------------------- 1 | .po-popup { 2 | position: fixed; 3 | z-index: 3; 4 | } 5 | 6 | .po-popup-arrow { 7 | background-color: var(--background); 8 | border-color: var(--border-color); 9 | border-style: solid; 10 | border-width: var(--border-width); 11 | box-shadow: var(--shadow); 12 | z-index: -1; 13 | } 14 | 15 | .po-popup .po-listbox { 16 | background-color: var(--color-popup-background-color-popup, var(--background)); 17 | box-shadow: var(--shadow); 18 | position: relative; 19 | } 20 | 21 | /* item no modo hover */ 22 | .po-popup 23 | .po-item-list:hover:is(.po-item-list__action, .po-item-list__check, .po-item-list__option):not(.po-item-list__disabled, .po-item-list__danger) { 24 | background-color: var(--background-hover); 25 | } 26 | 27 | .po-popup 28 | .po-item-list:hover:is(.po-item-list__check-selected:hover, .po-item-list__option-selected:hover):not(.po-item-list__disabled) { 29 | background-color: var(--background-hover); 30 | } 31 | 32 | /* item no modo desabilitado */ 33 | .po-popup .po-item-list__disabled:is(.po-item-list__action, .po-item-list__check, .po-item-list__option) { 34 | color: var(--color-disabled); 35 | } 36 | 37 | .po-popup .po-item-list:is(.po-item-list__check-selected, .po-item-list__option-selected) { 38 | background-color: var(--background-selected); 39 | } 40 | 41 | /* item do tipo action */ 42 | .po-popup .po-item-list__action { 43 | color: var(--color); 44 | } 45 | 46 | .po-popup .po-item-list__danger:not(.po-item-list__disabled) { 47 | color: var(--color-feedback-negative-dark); 48 | } 49 | 50 | .po-popup .po-item-list__selected:not(.po-item-list__danger) { 51 | background-color: var(--background-selected); 52 | color: var(--color-option); 53 | } 54 | 55 | .po-popup .po-item-list.po-item-list__selected:hover:not(.po-item-list__danger) { 56 | background-color: var(--background-hover); 57 | } 58 | 59 | .po-popup .po-item-list__separator { 60 | border-top: 1px solid var(--color-neutral-light-10); 61 | } 62 | -------------------------------------------------------------------------------- /.github/workflows/publish_style_cd-latest.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/style Latest 2 | 3 | env: 4 | PACKAGE_NAME: po-ui/style 5 | WORKING_DIR: /home/runner/work/po-style/po-style 6 | 7 | on: 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: '18.x' 18 | registry-url: 'https://registry.npmjs.org' 19 | 20 | - run: npm install 21 | - run: npm run build 22 | 23 | # Pega as versões publicadas no NPM e salva no arquivo versions.json 24 | - name: Obter todas as versões publicadas 25 | run: npm show @${{ env.PACKAGE_NAME }} versions --json > versions.json 26 | 27 | # Pega a versão no package.json 28 | - name: Get package.json version 29 | id: package-version 30 | uses: martinbeentjes/npm-get-version-action@main 31 | 32 | # Verifica se a versão a ser publicada já existe no NPM 33 | - name: Verificar se a versão existe 34 | id: version 35 | run: | 36 | VERSION_TO_CHECK=${{ steps.package-version.outputs.current-version }} 37 | if jq -e --arg version "$VERSION_TO_CHECK" '.[] | select(. == $version)' versions.json; then 38 | echo "publish=no" >> "$GITHUB_OUTPUT" 39 | else 40 | echo "publish=yes" >> "$GITHUB_OUTPUT" 41 | fi 42 | 43 | # PUBLISH 44 | - name: Run publish with -latest 45 | if: contains(steps.version.outputs.publish, 'yes') 46 | run: npm publish ${{env.WORKING_DIR}}/dist/style --tag latest 47 | env: 48 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 49 | 50 | - name: Add "Lastest" tag 51 | if: contains(steps.version.outputs.publish, 'no') 52 | run: npm dist-tags add @${{ env.PACKAGE_NAME }}@${{ env.PACKAGE_VERSION }} "latest" 53 | env: 54 | PACKAGE_VERSION: ${{ steps.package-version.outputs.current-version }} 55 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 56 | -------------------------------------------------------------------------------- /src/css/components/po-label/po-label.css: -------------------------------------------------------------------------------- 1 | po-label { 2 | display: flex; 3 | align-items: baseline; 4 | } 5 | 6 | .po-label { 7 | font-family: var(--font-family); 8 | font-size: var(--font-size, var(--font-size-default)); 9 | line-height: var(--line-height); 10 | color: var(--text-color); 11 | font-weight: var(--font-weight-normal); 12 | 13 | text-align: left; 14 | min-width: 0; 15 | overflow: hidden; 16 | text-overflow: ellipsis; 17 | white-space: nowrap; 18 | } 19 | 20 | .po-label.po-label-wrap { 21 | display: block; 22 | max-width: 100%; 23 | white-space: normal; 24 | overflow: visible; 25 | text-overflow: clip; 26 | overflow-wrap: anywhere; 27 | word-break: break-word; 28 | hyphens: auto; 29 | min-width: 0; 30 | } 31 | 32 | .po-label[p-field='true'] { 33 | font-weight: var(--font-weight-field); 34 | 35 | padding-right: var(--spacing-xs); 36 | } 37 | 38 | .po-label:empty { 39 | padding-right: 0; 40 | } 41 | 42 | .po-label-disabled, 43 | .po-label-disabled + .po-label-requirement { 44 | color: var(--text-color-disabled); 45 | } 46 | 47 | .po-label-requirement { 48 | color: var(--text-color-required); 49 | font-size: var(--font-size-required); 50 | line-height: var(--line-height-required); 51 | white-space: nowrap; 52 | word-break: break-word; 53 | } 54 | 55 | .po-label-requirement::after { 56 | content: ')'; 57 | } 58 | 59 | .po-label-requirement::before { 60 | content: '('; 61 | } 62 | 63 | @media (max-width: 768px) { 64 | [data-a11y='AA'] .po-label-requirement.po-label-required { 65 | display: inline; 66 | margin-left: 0; 67 | font-size: 0; 68 | line-height: 0; 69 | } 70 | 71 | [data-a11y='AA'] .po-label-requirement.po-label-required::before { 72 | content: ''; 73 | } 74 | 75 | [data-a11y='AA'] .po-label-requirement.po-label-required::after { 76 | content: '*'; 77 | font-size: var(--font-size-required); 78 | line-height: var(--line-height-required); 79 | color: var(--text-color-required); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/css/components/po-menu-panel/po-menu-panel.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --menu-panel-logo-height: 50px; 3 | --menu-panel-collapsed-logo-height: 64px; 4 | --menu-panel-width: 56px; 5 | --po-menu-panel-logo-spacing: 8px; 6 | } 7 | 8 | .po-menu-panel { 9 | background-color: var(--color-menu-panel-background-color-menu); 10 | bottom: 0%; 11 | display: inline-block; 12 | height: auto; 13 | position: absolute; 14 | vertical-align: top; 15 | top: 0; 16 | } 17 | 18 | .po-menu-panel-container { 19 | display: inline-block; 20 | height: 100px; 21 | max-height: calc(100vh - var(--menu-panel-logo-height)); 22 | min-height: calc(100vh - var(--menu-panel-logo-height)); 23 | width: var(--menu-panel-width); 24 | } 25 | 26 | .po-menu-panel-logo-container { 27 | position: relative; 28 | height: var(--menu-panel-logo-height); 29 | width: var(--menu-panel-width); 30 | } 31 | 32 | .po-menu-panel-inner { 33 | box-sizing: content-box; 34 | height: 100%; 35 | width: 100%; 36 | } 37 | 38 | .po-menu-panel-logo { 39 | position: absolute; 40 | top: 50%; 41 | left: 50%; 42 | max-height: calc(var(--menu-panel-logo-height) - var(--po-menu-panel-logo-spacing)); 43 | max-width: calc(var(--menu-panel-width) - var(--po-menu-panel-logo-spacing)); 44 | margin: 0; 45 | margin-right: -50%; 46 | transform: translate(-50%, -50%); 47 | } 48 | 49 | .po-collapsed-menu .po-menu-panel-logo { 50 | height: var(--menu-panel-collapsed-logo-height); 51 | } 52 | 53 | .po-menu-panel-item { 54 | border-top: 1px solid var(--color-menu-panel-border-top-logo); 55 | color: var(--color-menu-panel-color-menu-item-text); 56 | font-size: 24px; 57 | padding: 8px 16px 4px 16px; 58 | } 59 | 60 | .po-menu-panel-item:hover { 61 | background-color: var(--color-menu-panel-background-color-item-hover); 62 | } 63 | 64 | .po-menu-panel-item-selected, 65 | .po-menu-panel-item-selected:hover { 66 | background-color: var(--color-menu-panel-background-color-item-selected); 67 | color: var(--color-menu-panel-color-menu-item-selected); 68 | } 69 | -------------------------------------------------------------------------------- /.github/workflows/publish_style_cd-17.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/style Angular@17 2 | 3 | env: 4 | PACKAGE_NAME: po-ui/style 5 | WORKING_DIR: /home/runner/work/po-style/po-style 6 | 7 | on: 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | if: github.ref == 'refs/heads/17.x.x' 14 | steps: 15 | - uses: actions/checkout@v4 16 | - uses: actions/setup-node@v3 17 | with: 18 | node-version: '18.x' 19 | registry-url: 'https://registry.npmjs.org' 20 | 21 | - run: npm install 22 | - run: npm run build 23 | 24 | # Pega as versões publicadas no NPM e salva no arquivo versions.json 25 | - name: Obter todas as versões publicadas 26 | run: npm show @${{ env.PACKAGE_NAME }} versions --json > versions.json 27 | 28 | # Pega a versão no package.json 29 | - name: Get package.json version 30 | id: package-version 31 | uses: martinbeentjes/npm-get-version-action@main 32 | 33 | # Verifica se a versão a ser publicada já existe no NPM 34 | - name: Verificar se a versão existe 35 | id: version 36 | run: | 37 | VERSION_TO_CHECK=${{ steps.package-version.outputs.current-version }} 38 | if jq -e --arg version "$VERSION_TO_CHECK" '.[] | select(. == $version)' versions.json; then 39 | echo "publish=no" >> "$GITHUB_OUTPUT" 40 | else 41 | echo "publish=yes" >> "$GITHUB_OUTPUT" 42 | fi 43 | 44 | # PUBLISH 45 | - name: Run publish with v17-lts 46 | if: contains(steps.version.outputs.publish, 'yes') 47 | run: npm publish dist/style --tag "v17-lts" 48 | env: 49 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 50 | 51 | - name: Add "v17-lts" tag 52 | if: contains(steps.version.outputs.publish, 'no') 53 | run: npm dist-tags add @${{ env.PACKAGE_NAME }}@${{ env.PACKAGE_VERSION }} "v17-lts" 54 | env: 55 | PACKAGE_VERSION: ${{ steps.package-version.outputs.current-version }} 56 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 57 | -------------------------------------------------------------------------------- /.github/workflows/publish_style_cd-next.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/style Next 2 | 3 | env: 4 | PACKAGE_NAME: po-ui/style 5 | WORKING_DIR: /home/runner/work/po-style/po-style 6 | 7 | on: 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: '18.x' 18 | registry-url: 'https://registry.npmjs.org' 19 | 20 | - run: npm install 21 | - run: npm run build 22 | 23 | # Pega as versões publicadas no NPM e salva no arquivo versions.json 24 | - name: Obter todas as versões publicadas 25 | run: npm show @${{ env.PACKAGE_NAME }} versions --json > versions.json 26 | 27 | # Pega a versão no package.json 28 | - name: Get package.json version 29 | id: package-version 30 | uses: martinbeentjes/npm-get-version-action@main 31 | 32 | # Verifica se a versão a ser publicada já existe no NPM 33 | - name: Verificar se a versão existe 34 | id: version 35 | run: | 36 | VERSION_TO_CHECK=${{ steps.package-version.outputs.current-version }} 37 | if jq -e --arg version "$VERSION_TO_CHECK" '.[] | select(. == $version)' versions.json; then 38 | echo "publish=no" >> "$GITHUB_OUTPUT" 39 | else 40 | echo "publish=yes" >> "$GITHUB_OUTPUT" 41 | fi 42 | 43 | # PUBLISH 44 | - name: Run publish with -next 45 | if: contains(steps.version.outputs.publish, 'yes') 46 | run: npm publish ${{env.WORKING_DIR}}/dist/style --tag next 47 | env: 48 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 49 | 50 | - name: Add "Next" tag 51 | if: contains(steps.version.outputs.publish, 'no') 52 | run: npm dist-tags add @${{ env.PACKAGE_NAME }}@${{ env.PACKAGE_VERSION }} "next" 53 | working-directory: ${{env.WORKING_DIR}} 54 | env: 55 | PACKAGE_VERSION: ${{ steps.package-version.outputs.current-version }} 56 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 57 | -------------------------------------------------------------------------------- /src/css/components/po-dropdown/po-dropdown.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 |
15 |
Dropdown habilitado
16 | 17 |
18 |
19 | Outras ações 20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 |
Dropdown desabilitado
29 | 30 |
31 |
32 | Outras ações 33 |
34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 |
Dropdown aberto com a lista de ações com todas opções (selecionado, desabilitado, ícone, separador, danger)
42 | 43 |
44 |
45 | Outras ações 46 |
47 |
48 | 49 |
50 |
Imprimir
51 | 52 |
Editar
53 | 54 |
55 | Duplicar 56 |
57 | 58 |
Vincular
59 | 60 |
Solicitar revisão
61 | 62 |
Remover
63 |
64 |
65 |
66 |
67 | -------------------------------------------------------------------------------- /.github/workflows/publish_style_cd-20.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/style Angular@20 2 | 3 | env: 4 | PACKAGE_NAME: po-ui/style 5 | WORKING_DIR: /home/runner/work/po-style/po-style 6 | 7 | on: 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | if: github.ref == 'refs/heads/20.x.x' 14 | steps: 15 | - uses: actions/checkout@v4 16 | - uses: actions/setup-node@v3 17 | with: 18 | node-version: '20.x' 19 | registry-url: 'https://registry.npmjs.org' 20 | 21 | - run: npm install 22 | - run: npm run build 23 | 24 | # Pega as versões publicadas no NPM e salva no arquivo versions.json 25 | - name: Obter todas as versões publicadas 26 | run: npm show @${{ env.PACKAGE_NAME }} versions --json > versions.json 27 | 28 | # Pega a versão no package.json 29 | - name: Get package.json version 30 | id: package-version 31 | uses: martinbeentjes/npm-get-version-action@main 32 | 33 | # Verifica se a versão a ser publicada já existe no NPM 34 | - name: Verificar se a versão existe 35 | id: version 36 | run: | 37 | VERSION_TO_CHECK=${{ steps.package-version.outputs.current-version }} 38 | if jq -e --arg version "$VERSION_TO_CHECK" '.[] | select(. == $version)' versions.json; then 39 | echo "publish=no" >> "$GITHUB_OUTPUT" 40 | else 41 | echo "publish=yes" >> "$GITHUB_OUTPUT" 42 | fi 43 | 44 | # PUBLISH 45 | - name: Run publish with v20-ng 46 | if: contains(steps.version.outputs.publish, 'yes') 47 | run: npm publish ${{env.WORKING_DIR}}/dist/style --tag "v20-ng" 48 | env: 49 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 50 | 51 | - name: Add "v20-ng" tag 52 | if: contains(steps.version.outputs.publish, 'no') 53 | run: npm dist-tags add @${{ env.PACKAGE_NAME }}@${{ env.PACKAGE_VERSION }} "v20-ng" 54 | env: 55 | PACKAGE_VERSION: ${{ steps.package-version.outputs.current-version }} 56 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 57 | -------------------------------------------------------------------------------- /src/css/components/po-info/po-info.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-info-font-label: { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --font-info-font-value: { 7 | @apply --font-text-large; 8 | } 9 | } 10 | 11 | .po-info { 12 | display: table; 13 | text-align: left; 14 | word-wrap: break-word; 15 | 16 | &-label { 17 | font-family: var(--font-family-theme), sans-serif; 18 | font-size: var(--font-size-default); 19 | line-height: var(--line-height-md); 20 | font-weight: var(--font-weight-semibold); 21 | color: var(--color-info-color-text-label); 22 | 23 | &-horizontal { 24 | /* Usado por conta do espaçamento do grid system */ 25 | display: table-cell; 26 | padding: var(--padding); 27 | } 28 | } 29 | 30 | &-value { 31 | @apply --font-info-font-value; 32 | color: var(--color-info-color-text-value); 33 | display: block; 34 | word-break: break-word; 35 | line-height: var(--line-height-md); 36 | 37 | &-horizontal { 38 | display: table-cell; 39 | margin-top: 0; 40 | /* Usado por conta do espaçamento do grid system */ 41 | padding: 0 !important; 42 | } 43 | 44 | &-pre { 45 | white-space: pre-wrap; 46 | } 47 | } 48 | } 49 | 50 | [data-a11y='AA'] .po-info[p-size='small'] .po-info-value, 51 | [data-a11y='AA'] .po-info[p-size='small'] .po-info-label { 52 | font-size: var(--font-size-sm); 53 | } 54 | 55 | .po-info-container-content { 56 | padding: var(--padding, var(--spacing-xs) 0); 57 | width: 100%; 58 | } 59 | 60 | [data-a11y='AA'] .po-info[p-size='small'] .po-info-container-content { 61 | padding: var(--padding, var(--spacing-xxs) 0); 62 | } 63 | 64 | .po-info-link, 65 | .po-info-link:link, 66 | .po-info-link:visited { 67 | color: var(--color-info-color-link); 68 | text-decoration: none; 69 | } 70 | 71 | .po-info-link:hover { 72 | color: var(--color-info-color-link-hover); 73 | cursor: pointer; 74 | text-decoration: underline; 75 | } 76 | 77 | .po-info-link:active { 78 | color: var(--color-info-color-link-pressed); 79 | } 80 | -------------------------------------------------------------------------------- /.github/workflows/publish_style_cd-beta.yml: -------------------------------------------------------------------------------- 1 | name: Run publish @po-ui/style Beta 2 | 3 | env: 4 | PACKAGE_NAME: po-ui/style 5 | WORKING_DIR: /home/runner/work/po-style/po-style 6 | 7 | on: 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | if: github.ref == 'refs/heads/beta' 14 | steps: 15 | - uses: actions/checkout@v4 16 | - uses: actions/setup-node@v3 17 | with: 18 | node-version: '18.x' 19 | registry-url: 'https://registry.npmjs.org' 20 | 21 | - run: npm install 22 | - run: npm run build 23 | 24 | # Pega as versões publicadas no NPM e salva no arquivo versions.json 25 | - name: Obter todas as versões publicadas 26 | run: npm show @${{ env.PACKAGE_NAME }} versions --json > versions.json 27 | 28 | # Pega a versão no package.json 29 | - name: Get package.json version 30 | id: package-version 31 | uses: martinbeentjes/npm-get-version-action@main 32 | 33 | # Verifica se a versão a ser publicada já existe no NPM 34 | - name: Verificar se a versão existe 35 | id: version 36 | run: | 37 | VERSION_TO_CHECK=${{ steps.package-version.outputs.current-version }} 38 | if jq -e --arg version "$VERSION_TO_CHECK" '.[] | select(. == $version)' versions.json; then 39 | echo "publish=no" >> "$GITHUB_OUTPUT" 40 | else 41 | echo "publish=yes" >> "$GITHUB_OUTPUT" 42 | fi 43 | 44 | # PUBLISH 45 | - name: Run publish with -beta 46 | if: contains(steps.version.outputs.publish, 'yes') 47 | run: npm publish ${{env.WORKING_DIR}}/dist/style --tag beta 48 | env: 49 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 50 | 51 | - name: Add "Beta" tag 52 | if: contains(steps.version.outputs.publish, 'no') 53 | run: npm dist-tags add @${{ env.PACKAGE_NAME }}@${{ env.PACKAGE_VERSION }} "beta" 54 | working-directory: ${{env.WORKING_DIR}} 55 | env: 56 | PACKAGE_VERSION: ${{ steps.package-version.outputs.current-version }} 57 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 58 | -------------------------------------------------------------------------------- /src/css/commons/po-shadow/po-shadow.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /** 3 | * Sombras externas 4 | * https://app.zeplin.io/project/57bf4724a09dd68b60e7316f/screen/59692cf47108e9b042301c81 5 | */ 6 | --shadow-modal: 0 4px 16px 0 var(--color-black-alpha-30); 7 | --shadow-button: 0 4px 8px 0 var(--color-black-alpha-15); 8 | --shadow-header: 0 1px 2px 0 var(--color-black-alpha-30); 9 | --shadow-card: 0 1px 4px 0 var(--color-black-alpha-30); 10 | --shadow-container: 0 1px 4px 0 var(--color-black-alpha-30); 11 | --shadow-feedback: 0 -4px 8px 0 var(--color-black-alpha-15); 12 | --shadow-tooltip: 0 4px 8px 0 var(--color-black-alpha-15); 13 | --shadow-popover: 0 0 4px 0 var(--color-black-alpha-30); 14 | --shadow-popover-arrow: -1px -1px 1px 0 var(--color-black-alpha-10); 15 | --shadow-popup: 0 1px 4px 0 var(--color-black-alpha-30); 16 | --shadow-popup-arrow: -1px -1px 1px 0 var(--color-black-alpha-10); 17 | 18 | /** 19 | * Sombras Internas 20 | * https://app.zeplin.io/project/57bf4724a09dd68b60e7316f/screen/59692cf42a5c6cda0bac7aa7 21 | */ 22 | --shadow-avatar: inset 0 1px 8px 0 var(--color-black-alpha-10); 23 | --shadow-input: inset 0 1px 8px 0 var(--color-black-alpha-10); 24 | } 25 | 26 | .po-shadow-avatar { 27 | box-shadow: var(--shadow-avatar); 28 | } 29 | 30 | .po-shadow-modal { 31 | box-shadow: var(--shadow-modal); 32 | } 33 | 34 | .po-shadow-button { 35 | box-shadow: var(--shadow-button); 36 | } 37 | 38 | .po-shadow-header { 39 | box-shadow: var(--shadow-header); 40 | } 41 | 42 | .po-shadow-card { 43 | box-shadow: var(--shadow-card); 44 | color: var(--color-neutral-dark-80); 45 | } 46 | 47 | .po-shadow-container { 48 | box-shadow: var(--shadow-container); 49 | } 50 | 51 | .po-shadow-feedback { 52 | box-shadow: var(--shadow-feedback); 53 | } 54 | 55 | .po-shadow-tooltip { 56 | box-shadow: var(--shadow-tooltip); 57 | } 58 | 59 | .po-shadow-input { 60 | box-shadow: var(--shadow-input); 61 | } 62 | 63 | .po-shadow-popup { 64 | box-shadow: var(--shadow-popup); 65 | } 66 | 67 | .po-shadow-popup-arrow { 68 | box-shadow: var(--shadow-popup-arrow); 69 | } 70 | -------------------------------------------------------------------------------- /src/css/components/po-accordion/po-accordion-manager.css: -------------------------------------------------------------------------------- 1 | .po-accordion-manager-header { 2 | position: relative; 3 | } 4 | 5 | .po-accordion-manager-button { 6 | background-color: var(--background-color); 7 | color: var(--color); 8 | 9 | font-weight: var(--font-weight); 10 | font-size: var(--font-size); 11 | font-family: var(--font-family); 12 | 13 | min-height: 2.75em; 14 | 15 | border: none; 16 | display: flex; 17 | max-width: 100vw; 18 | padding-inline: var(--spacing-sm); 19 | text-align: left; 20 | width: 100%; 21 | justify-content: space-between; 22 | } 23 | 24 | .po-accordion-manager-button:enabled:active { 25 | background-color: var(--background-pressed); 26 | color: var(--color-pressed); 27 | outline: none; 28 | } 29 | 30 | .po-accordion-manager-button:enabled:active .po-accordion-manager-icon { 31 | color: var(--color-pressed); 32 | } 33 | 34 | .po-accordion-manager-button:focus .po-accordion-manager-icon { 35 | color: var(--color-focus); 36 | } 37 | 38 | /* outline para compatibilidade com os demais navegadores */ 39 | .po-accordion-manager-button:focus { 40 | color: var(--color-focus); 41 | 42 | position: relative; 43 | outline-color: var(--outline-color-focused); 44 | outline-width: var(--outline-width); 45 | outline-style: solid; 46 | outline-offset: var(--outline-width); 47 | 48 | z-index: 1; 49 | } 50 | 51 | .po-accordion-manager-button:focus-visible { 52 | outline-width: var(--outline-width-focus-visible); 53 | } 54 | 55 | /* remove a borda interna nativa do botão no firefox */ 56 | .po-accordion-manager-button::-moz-focus-inner { 57 | border: 0; 58 | } 59 | 60 | .po-accordion-manager-button-content { 61 | align-self: center; 62 | display: inline-block; 63 | max-width: 100%; 64 | } 65 | 66 | .po-accordion-manager-icon { 67 | color: var(--color); 68 | 69 | align-self: center; 70 | font-size: 1.5em; 71 | margin-left: var(--spacing-sm); 72 | transition: all 0.3s cubic-bezier(0.07, 0.88, 0.58, 0.92); 73 | } 74 | 75 | .icon-down { 76 | transform: rotate(270deg); 77 | } 78 | 79 | .icon-up { 80 | transform: rotate(90deg); 81 | } 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@po-ui/style", 3 | "version": "19.38.0", 4 | "description": "PO Style", 5 | "author": "PO UI", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/po-ui/po-style" 10 | }, 11 | "scripts": { 12 | "build": "gulp build && gulp build:cli", 13 | "build:app": "gulp build:app", 14 | "build:cli": "gulp build:cli", 15 | "build:icon": "node icon-generator", 16 | "watch": "gulp watch", 17 | "dev": "http-server ./app-dist -o -c-1", 18 | "release": "standard-version --preset angular", 19 | "format:fix": "pretty-quick --staged", 20 | "format:check": "prettier --check --loglevel error \"src/**/*{.ts,.js,.json,.css,.scss,.html}\"", 21 | "format:all": "prettier --write \"src/**/*{.ts,.js,.json,.css,.scss,.html}\"", 22 | "update-animalia-icon": "npm install @animaliads/animalia-icon@latest && node scripts/update-animalia-icon.js", 23 | "pack:style": "cd dist/style && npm pack", 24 | "publish:style:local": "npm publish ./dist/style --registry http://localhost:4873 --ignore-scripts" 25 | }, 26 | "devDependencies": { 27 | "@animaliads/animalia-icon": "1.0.5", 28 | "@commitlint/cli": "^11.0.0", 29 | "@commitlint/config-angular": "^11.0.0", 30 | "autoprefixer": "^9.8.6", 31 | "cssnano": "^4.1.10", 32 | "del": "^6.0.0", 33 | "gulp": "4.0.2", 34 | "gulp-concat": "^2.6.1", 35 | "gulp-copy": "^4.0.1", 36 | "gulp-minify": "^3.1.0", 37 | "gulp-postcss": "^10.0.0", 38 | "gulp-rename": "^2.0.0", 39 | "gulp-tap": "^2.0.0", 40 | "http-server": "^0.12.3", 41 | "husky": "^4.2.5", 42 | "postcss": "^8.4.45", 43 | "postcss-apply": "^0.12.0", 44 | "postcss-custom-properties": "^9.1.1", 45 | "postcss-import": "^12.0.1", 46 | "postcss-nested": "^4.2.3", 47 | "postcss-simple-vars": "^7.0.1", 48 | "prettier": "2.2.0", 49 | "pretty-quick": "^3.1.0", 50 | "standard-version": "^9.0.0", 51 | "xml2js": "0.6.2", 52 | "yargs": "^16.1.1" 53 | }, 54 | "standard-version": { 55 | "skip": { 56 | "commit": true, 57 | "tag": true 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /.github/workflows/pr_ci.yml: -------------------------------------------------------------------------------- 1 | # Nome do workflow, um repositório pode tem um ou mais workflows. 2 | name: CI 3 | 4 | # Define em quais situações esse workflow será executado 5 | on: 6 | push: 7 | branches: [ master, development, '[0-9]+.x.x' ] 8 | pull_request: 9 | branches: [ master, development, '[0-9]+.x.x' ] 10 | 11 | # Os jobs são conjuntos de actions que são executados na mesma máquina virtual. 12 | # É possível ter mais de um job e assim executar ações paralelamente. 13 | jobs: 14 | discord_notification_on_pr: 15 | runs-on: ubuntu-latest 16 | if: github.event_name == 'pull_request' && github.event.pull_request.merged == false 17 | steps: 18 | - name: Notify Discord on PR 19 | env: 20 | DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} 21 | run: | 22 | AUTHOR="${{ github.event.pull_request.user.login }}" 23 | PR_TITLE="${{ github.event.pull_request.title }}" 24 | PR_URL="${{ github.event.pull_request.html_url }}" 25 | curl -X POST -H "Content-Type: application/json" \ 26 | -d "{\"content\": \"🚀 **PR Criada com Sucesso 🚀**\\n- Autor: $AUTHOR\\n- Título: $PR_TITLE\\n- Link: $PR_URL\"}" \ 27 | $DISCORD_WEBHOOK_URL 28 | 29 | commitlint_prettier: 30 | 31 | runs-on: ubuntu-latest 32 | 33 | # As etapas do workflow são definidas nessa tag. 34 | steps: 35 | 36 | # Definição da action 37 | - uses: actions/checkout@v2 38 | # Parâmetros para a ação 39 | with: 40 | fetch-depth: 0 41 | 42 | - uses: wagoid/commitlint-github-action@v2 43 | 44 | - uses: actions/setup-node@v1 45 | with: 46 | node-version: 14.x 47 | 48 | # Executa um comando do projeto na máquina virtual 49 | - run: npm i 50 | - run: npm run format:check 51 | 52 | build: 53 | 54 | runs-on: ubuntu-latest 55 | 56 | steps: 57 | 58 | # Definição da action 59 | - uses: actions/checkout@v2 60 | 61 | - uses: actions/setup-node@v1 62 | with: 63 | node-version: 12.x 64 | 65 | # Executa um comando do projeto na máquina virtual 66 | - run: npm i 67 | - run: npm run build 68 | -------------------------------------------------------------------------------- /src/css/commons/po-reset.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | 15 | body { 16 | font-family: var(--font-family); 17 | color: var(--color-neutral-dark-90); 18 | 19 | font-weight: var(--font-weight-normal); 20 | line-height: var(--line-height-md); 21 | letter-spacing: var(--letter-spacing-auto); 22 | text-align: left; 23 | } 24 | 25 | code { 26 | font-family: var(--font-family-code); 27 | color: var(--color-neutral-dark-80); 28 | background-color: var(--color-neutral-light-05); 29 | 30 | font-weight: var(--font-weight-normal); 31 | font-size: inherit; 32 | line-height: inherit; 33 | letter-spacing: var(--letter-spacing-auto); 34 | border-radius: var(--border-radius-sm); 35 | padding: var(--spacing-squish-2xs); 36 | } 37 | 38 | hr { 39 | border: 0; 40 | border-top: 1px solid var(--color-hr-border-top); 41 | margin-bottom: 1rem; 42 | margin-top: 1rem; 43 | } 44 | 45 | h1, 46 | h2, 47 | h3, 48 | h4, 49 | h5, 50 | h6 { 51 | font-family: var(--font-family-heading); 52 | color: var(--color-neutral-dark-90); 53 | 54 | font-weight: var(--font-weight-bold); 55 | text-align: left; 56 | } 57 | 58 | h1 { 59 | font-size: var(--font-size-xl); 60 | line-height: var(--line-height-sm); 61 | letter-spacing: var(--letter-spacing-neg-1); 62 | } 63 | 64 | h2 { 65 | font-size: var(--font-size-lg); 66 | line-height: var(--line-height-sm); 67 | letter-spacing: var(--letter-spacing-auto); 68 | } 69 | 70 | h3 { 71 | font-size: var(--font-size-md); 72 | line-height: var(--line-height-md); 73 | letter-spacing: var(--letter-spacing-auto); 74 | } 75 | 76 | h4 { 77 | font-size: var(--font-size-default); 78 | line-height: var(--line-height-md); 79 | letter-spacing: var(--letter-spacing-auto); 80 | } 81 | 82 | h5 { 83 | font-size: var(--font-size-sm); 84 | line-height: var(--line-height-md); 85 | letter-spacing: var(--letter-spacing-1); 86 | } 87 | 88 | h6 { 89 | font-size: var(--font-size-xs); 90 | line-height: var(--line-height-md); 91 | letter-spacing: var(--letter-spacing-1); 92 | } 93 | -------------------------------------------------------------------------------- /src/css/components/po-tabs/po-tab-dropdown/po-tab-dropdown.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-tab-dropdown-button-label-font-md: { 3 | @apply --font-text-large; 4 | } 5 | 6 | --font-tab-dropdown-button-label-font-sm: { 7 | @apply --font-text; 8 | } 9 | } 10 | 11 | .po-tab-dropdown .po-popover { 12 | min-height: auto; 13 | min-width: 125px !important; 14 | overflow: hidden; 15 | } 16 | 17 | .po-tab-dropdown .po-popover .po-popover-content { 18 | padding: 0; 19 | } 20 | 21 | .po-tab-dropdown-container, 22 | .po-tab-dropdown-container-sm { 23 | display: block; 24 | overflow-x: hidden; 25 | overflow-y: auto; 26 | } 27 | 28 | .po-tab-dropdown-container { 29 | position: absolute; 30 | overflow: visible; 31 | max-height: 198px; 32 | } 33 | 34 | .po-tab-dropdown-container-sm { 35 | max-height: 144px; 36 | } 37 | 38 | .po-tab-dropdown-button { 39 | box-shadow: none; 40 | display: table; 41 | min-width: 125px; 42 | width: 100%; 43 | } 44 | 45 | .po-tab-dropdown-button:hover { 46 | background-color: var(--color-tab-dropdown-background-color-tab-dropdown-button-hover); 47 | } 48 | 49 | .po-tab-dropdown-button-active { 50 | background-color: var(--color-tab-dropdown-background-color-tab-dropdown-button-active); 51 | color: var(--color-tab-dropdown-color-tab-dropdown-button); 52 | } 53 | 54 | .po-tab-dropdown-button .po-tab-button-active:hover { 55 | background-color: var(--color-tab-dropdown-background-color-tab-dropdown-button-active); 56 | } 57 | 58 | .po-tab-dropdown-button .po-tab-button-disabled:hover { 59 | background-color: var(--color-tab-dropdown-background-color-tab-dropdown-button-disabled); 60 | } 61 | 62 | .po-tab-dropdown-button .po-tab-button-label { 63 | padding: 0 24px 0 16px; 64 | text-align: left; 65 | } 66 | 67 | .po-tab-dropdown-button .po-tab-button-md { 68 | @apply --font-tab-dropdown-button-label-font-md; 69 | } 70 | 71 | .po-tab-dropdown-button .po-tab-button-sm { 72 | @apply --font-tab-dropdown-button-label-font-sm; 73 | } 74 | 75 | .po-tab-dropdown-button .po-tab-button-active { 76 | box-shadow: none !important; 77 | } 78 | 79 | .po-tab-dropdown-container div.po-listbox { 80 | position: relative; 81 | max-width: 300px; 82 | } 83 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-field-icon/po-field-icon.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 |

Input com um ícone (po-clean)

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

Input com dois ícones (po-clean e po-icon-calendar)

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

Input com erro de validação

53 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 | 63 | 64 | Mensagem de erro 65 | 66 |
67 |
68 |
69 | -------------------------------------------------------------------------------- /src/css/components/po-page/po-page-header/po-page-header.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-page-header-title-smaller: { 3 | @apply --font-subtitle; 4 | } 5 | } 6 | 7 | .po-page-header { 8 | display: flex; 9 | flex-direction: column; 10 | gap: var(--gap, var(--po-density-gap-spacing, var(--default-spacing-xs, var(--spacing-md)))); 11 | padding: var(--padding, var(--po-density-header-padding, var(--spacing-xs) var(--spacing-md))); 12 | width: 100%; 13 | } 14 | 15 | .po-page-header-container { 16 | display: flex; 17 | justify-content: space-between; 18 | flex-direction: column; 19 | align-items: flex-start; 20 | flex-wrap: wrap; 21 | } 22 | 23 | .po-page-header-title-container { 24 | display: inline-flex; 25 | flex-direction: column; 26 | gap: var(--spacing-xs); 27 | } 28 | 29 | .po-page-header-title-container .po-page-header-title { 30 | color: var(--color-page-header-color-title, var(--color-neutral-dark-70)); 31 | } 32 | 33 | .po-page-header-title { 34 | font-family: var(--font-family); 35 | font-size: var(--font-size-lg); 36 | font-weight: var(--font-weight-bold); 37 | line-height: var(--line-height-sm); 38 | letter-spacing: var(--letter-spacing-auto); 39 | } 40 | 41 | .po-page-header-subtitle { 42 | font-size: var(--font-size-sm); 43 | font-weight: var(--font-weight-normal); 44 | line-height: var(--line-height-2xs); 45 | color: var(--color-neutral-dark-70); 46 | letter-spacing: var(--letter-spacing-auto); 47 | } 48 | 49 | .po-page-header-actions { 50 | flex-grow: 1; 51 | display: flex; 52 | flex-direction: row; 53 | justify-content: flex-end; 54 | align-items: flex-start; 55 | gap: var(--gap-actions); 56 | } 57 | 58 | @media (min-width: 480px) { 59 | .po-page-header-container { 60 | flex-direction: row; 61 | align-items: center; 62 | } 63 | } 64 | 65 | @media screen and (max-width: 1366px) { 66 | .po-page-header-actions { 67 | gap: var(--gap-actions, var(--spacing-xs)); 68 | } 69 | } 70 | 71 | @media (max-width: 479px) { 72 | .po-page-header-actions { 73 | margin: 0; 74 | } 75 | 76 | .po-page-header-actions .po-button, 77 | .po-page-header-actions .po-dropdown { 78 | margin: 8px 0 0 0; 79 | width: 100%; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/css/components/po-disclaimer/po-disclaimer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Tipos

5 | 6 |
7 | Default 8 |
9 | 10 | 11 | 12 |
13 | Danger 14 |
15 | 16 | 17 | 18 |
19 | Default com ação 20 | 21 |
22 | 23 | 24 | 25 |
26 | Danger com ação 27 | 31 |
32 | 33 | 34 |

35 | 36 |

Com Grid System

37 | 38 | 39 |
40 | 1 41 |
42 | 43 | 44 |
45 | 2 46 |
47 | 48 | 49 |
50 | 3 51 | 52 |
53 | 54 | 55 |
56 | 6 57 | 58 |
59 | 60 |
61 |
62 | -------------------------------------------------------------------------------- /src/css/components/po-helper/po-helper.css: -------------------------------------------------------------------------------- 1 | po-helper, 2 | po-helper .po-helper-container, 3 | [data-default-size='small'][data-a11y='AA'] po-helper .po-helper-container[p-size='medium'] { 4 | display: flex; 5 | --font-size: var(--font-size-lg); 6 | } 7 | 8 | [data-default-size='small'][data-a11y='AA'] po-helper, 9 | [data-default-size='small'][data-a11y='AA'] po-helper .po-helper-container, 10 | [data-a11y='AA'] po-helper .po-helper-container[p-size='small'] { 11 | --font-size: var(--font-size-default); 12 | align-items: center; 13 | } 14 | 15 | .po-helper-container po-icon, 16 | [data-a11y='AA'] .po-helper-container po-icon { 17 | font-size: var(--font-size); 18 | color: var(--color); 19 | } 20 | 21 | [data-default-size='small'][data-a11y='AA'] .po-helper-container po-icon, 22 | [data-a11y='AA'] po-helper .po-helper-container[p-size='small'] po-icon { 23 | font-size: var(--font-size); 24 | color: var(--color); 25 | display: flex; 26 | } 27 | 28 | .po-helper-target { 29 | cursor: pointer; 30 | display: inline-flex; 31 | justify-content: center; 32 | width: var(--font-size); 33 | height: var(--font-size); 34 | border-radius: 50%; 35 | } 36 | 37 | [data-default-size='small'][data-a11y='AA'] .po-helper-container.po-helper-target, 38 | [data-a11y='AA'] po-helper .po-helper-container.po-helper-target[p-size='small'] { 39 | align-items: center; 40 | } 41 | 42 | .po-helper-container:hover { 43 | border-color: var(--border-color-hover); 44 | background-color: var(--background-hover); 45 | } 46 | 47 | .po-helper-container:focus-visible, 48 | .po-helper-container:focus { 49 | background-color: var(--background-pressed); 50 | border-radius: 50%; 51 | outline-color: var(--outline-color-focused); 52 | outline-width: var(--outline-width); 53 | outline-style: solid; 54 | } 55 | 56 | .po-helper-popover .po-popover-content { 57 | max-width: 386px; 58 | white-space: normal; 59 | overflow-wrap: anywhere; 60 | word-break: break-word; 61 | color: var(--color-neutral-dark-90); 62 | } 63 | 64 | .po-helper-popover { 65 | min-height: unset !important; 66 | transform: translateY(-4px); 67 | } 68 | 69 | po-helper:has(.po-helper-disabled) po-icon, 70 | po-helper:has(.po-helper-disabled) { 71 | --color: var(--color-disabled); 72 | cursor: not-allowed; 73 | pointer-events: none; 74 | } 75 | -------------------------------------------------------------------------------- /src/css/commons/po-media-query/po-media-query.html: -------------------------------------------------------------------------------- 1 | 76 | 77 |
78 |
79 |

Redimensione a sua tela para ver as opções de tamanho

80 |
81 |
82 |
83 |
84 | -------------------------------------------------------------------------------- /src/css/components/po-badge/po-badge.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Color-01 - 5 |
6 | 99+ 7 |
8 |
9 | 10 |
11 |

Color-02 -

12 |
13 | 10 14 |
15 |
16 | 17 |
18 |

Color-03 -

19 |
20 | 5 21 |
22 |
23 | 24 |
25 |

Color-04 -

26 |
27 | 85 28 |
29 |
30 | 31 |
32 |

Color-05 -

33 |
34 | 24 35 |
36 |
37 | 38 |
39 |

Color-06 -

40 |
41 | 3 42 |
43 |
44 | 45 |
46 |

Color-07 -

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

Color-08 -

54 |
55 | 22 56 |
57 |
58 | 59 |
60 |

Color-09 -

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

Color-10 -

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

Color-11 -

75 |
76 | 12 77 |
78 |
79 | 80 |
81 |

Color-12 -

82 |
83 | 7 84 |
85 |
86 |
87 |
88 | -------------------------------------------------------------------------------- /src/css/components/po-loading/po-loading.css: -------------------------------------------------------------------------------- 1 | .po-loading { 2 | border-radius: var(--border-radius); 3 | border-width: var(--border-width); 4 | border-color: var(--border-color); 5 | background-color: var(--background); 6 | box-shadow: var(--shadow); 7 | 8 | width: 16.5rem; 9 | min-height: 13.75rem; 10 | border-style: solid; 11 | 12 | align-items: center; 13 | display: flex; 14 | flex-direction: column; 15 | gap: var(--spacing-md); 16 | justify-content: center; 17 | padding: var(--spacing-md); 18 | } 19 | 20 | .po-loading-md { 21 | width: calc(16.5rem / 1.75); 22 | min-height: calc(13.75rem / 2); 23 | 24 | gap: var(--spacing-sm); 25 | padding: var(--spacing-sm); 26 | } 27 | 28 | .po-loading-sm { 29 | width: auto; 30 | min-height: calc(13.75rem / 3); 31 | 32 | gap: var(--spacing-xs); 33 | padding: var(--spacing-xs); 34 | } 35 | 36 | .po-loading-xs { 37 | width: auto; 38 | min-height: fit-content; 39 | 40 | gap: var(--spacing-xs); 41 | padding: var(--spacing-xs); 42 | } 43 | 44 | .po-loading-label { 45 | font-family: var(--font-family); 46 | font-weight: var(--font-weight); 47 | color: var(--text-color); 48 | 49 | font-size: var(--font-size-default); 50 | line-height: var(--line-height-md); 51 | 52 | max-width: 100%; 53 | } 54 | 55 | .po-loading-dot { 56 | display: inline-block; 57 | } 58 | 59 | .po-loading-dot:nth-child(1) { 60 | animation: dot-fade-in-1 1s infinite; 61 | animation-delay: 1000ms; 62 | } 63 | 64 | .po-loading-dot:nth-child(2) { 65 | animation: dot-fade-in-2 1s infinite; 66 | animation-delay: 1000ms; 67 | } 68 | 69 | .po-loading-dot:nth-child(3) { 70 | animation: dot-fade-in-3 1s infinite; 71 | animation-delay: 1000ms; 72 | } 73 | 74 | @keyframes dot-fade-in-1 { 75 | 0% { 76 | opacity: 0; 77 | } 78 | 25% { 79 | opacity: 1; 80 | } 81 | 50% { 82 | opacity: 1; 83 | } 84 | 100% { 85 | opacity: 1; 86 | } 87 | } 88 | 89 | @keyframes dot-fade-in-2 { 90 | 0% { 91 | opacity: 0; 92 | } 93 | 25% { 94 | opacity: 0; 95 | } 96 | 50% { 97 | opacity: 1; 98 | } 99 | 100% { 100 | opacity: 1; 101 | } 102 | } 103 | 104 | @keyframes dot-fade-in-3 { 105 | 0% { 106 | opacity: 0; 107 | } 108 | 25% { 109 | opacity: 0; 110 | } 111 | 50% { 112 | opacity: 0; 113 | } 114 | 100% { 115 | opacity: 1; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/css/commons/po-grid-system/po-grid-system-md.css: -------------------------------------------------------------------------------- 1 | @media (min-width: $gridSystemMdMinWidth) and (max-width: $gridSystemMdMaxWidth), 2 | (min-width: var(--gridSystemMdMinWidth)) and (max-width: var(--gridSystemMdMaxWidth)) { 3 | /* Classes para definição de visibilidade */ 4 | 5 | .po-visible-md, 6 | [class*='po-visible-md-'], 7 | [class*=' po-visible-md-'] { 8 | display: block; 9 | } 10 | 11 | .po-hidden-md { 12 | display: none; 13 | } 14 | 15 | /* Classes para definição do tamanho default */ 16 | 17 | [class*='po-lg-'], 18 | [class*='po-xl-'] { 19 | width: 100%; 20 | } 21 | 22 | .po-sm-1 { 23 | width: 8.33333333%; 24 | } 25 | 26 | .po-sm-2 { 27 | width: 16.66665%; 28 | } 29 | 30 | .po-sm-3 { 31 | width: 25%; 32 | } 33 | 34 | .po-sm-4 { 35 | width: 33.33333%; 36 | } 37 | 38 | .po-sm-5 { 39 | width: 41.66666%; 40 | } 41 | 42 | .po-sm-6 { 43 | width: 50%; 44 | } 45 | 46 | .po-sm-7 { 47 | width: 58.33333333%; 48 | } 49 | 50 | .po-sm-8 { 51 | width: 66.66666667%; 52 | } 53 | 54 | .po-sm-9 { 55 | width: 75%; 56 | } 57 | 58 | .po-sm-10 { 59 | width: 83.33333333%; 60 | } 61 | 62 | .po-sm-11 { 63 | width: 91.66666667%; 64 | } 65 | 66 | .po-sm-12 { 67 | width: 100%; 68 | } 69 | 70 | /* Classes para definição do tamanho */ 71 | 72 | .po-md-1, 73 | .po-visible-md-1 { 74 | width: 8.33333333%; 75 | } 76 | 77 | .po-md-2, 78 | .po-visible-md-2 { 79 | width: 16.66665%; 80 | } 81 | 82 | .po-md-3, 83 | .po-visible-md-3 { 84 | width: 25%; 85 | } 86 | 87 | .po-md-4, 88 | .po-visible-md-4 { 89 | width: 33.33333%; 90 | } 91 | 92 | .po-md-5, 93 | .po-visible-md-5 { 94 | width: 41.66666%; 95 | } 96 | 97 | .po-md-6, 98 | .po-visible-md-6 { 99 | width: 50%; 100 | } 101 | 102 | .po-md-7, 103 | .po-visible-md-7 { 104 | width: 58.33333333%; 105 | } 106 | 107 | .po-md-8, 108 | .po-visible-md-8 { 109 | width: 66.66666667%; 110 | } 111 | 112 | .po-md-9, 113 | .po-visible-md-9 { 114 | width: 75%; 115 | } 116 | 117 | .po-md-10, 118 | .po-visible-md-10 { 119 | width: 83.33333333%; 120 | } 121 | 122 | .po-md-11, 123 | .po-visible-md-11 { 124 | width: 91.66666667%; 125 | } 126 | 127 | .po-md-12, 128 | .po-visible-md-12 { 129 | width: 100%; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/css/components/po-upload/po-upload-drag-drop/po-upload-drag-drop-area/po-upload-drag-drop-area.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-upload-drag-drop-area-select-files-text: { 3 | @apply --font-text-large-bold; 4 | } 5 | 6 | --font-upload-drag-drop-area-label-text: { 7 | @apply --font-subtitle; 8 | } 9 | } 10 | 11 | .po-upload-drag-drop-area { 12 | border-radius: 1px; 13 | border: dashed 2px var(--color-upload-drag-drop-area-border); 14 | display: table; 15 | height: 100%; 16 | width: 100%; 17 | margin-bottom: var(--spacing-xs); 18 | } 19 | 20 | .po-upload-drag-drop-area-container { 21 | display: table-cell; 22 | text-align: center; 23 | vertical-align: middle; 24 | } 25 | 26 | .po-upload-drag-drop-area-icon { 27 | color: var(--color-upload-drag-drop-area-icon); 28 | font-size: 48px; 29 | } 30 | 31 | .po-upload-drag-drop-area-select-files { 32 | @apply --font-upload-drag-drop-area-select-files-text; 33 | background: none; 34 | border: none; 35 | color: var(--color-action-default, var(--color-upload-drag-drop-area-select-files-text)); 36 | -webkit-appearance: none; 37 | } 38 | 39 | [data-a11y='AA'] .po-upload[p-size='small'] .po-upload-drag-drop-area-select-files { 40 | font-size: var(--font-size-sm); 41 | } 42 | 43 | .po-upload-drag-drop-area-label { 44 | @apply --font-upload-drag-drop-area-label-text; 45 | color: var(--color-upload-drag-drop-area-label-text); 46 | margin-bottom: 10px; 47 | } 48 | 49 | [data-a11y='AA'] .po-upload[p-size='small'] .po-upload-drag-drop-area-label { 50 | font-size: var(--font-size-md); 51 | margin-bottom: 0; 52 | } 53 | 54 | .po-upload-drag-drop-area-disabled { 55 | background-color: var(--color-upload-drag-drop-area-background-color-disabled); 56 | color: var(--color-upload-drag-drop-area-border); 57 | } 58 | 59 | .po-upload-drag-drop-area-disabled .po-upload-drag-drop-area-select-files, 60 | .po-upload-drag-drop-area-disabled .po-upload-drag-drop-area-label { 61 | color: var(--color-upload-drag-drop-area-color-disabled); 62 | } 63 | 64 | .po-upload-drag-drop-area-overlay-icon { 65 | color: var(--color-upload-drag-drop-overlay-icon); 66 | font-size: 48px; 67 | } 68 | 69 | .po-upload-drag-drop-area-overlay-label { 70 | @apply --font-upload-drag-drop-overlay-label-text; 71 | color: var(--color-upload-drag-drop-overlay-text); 72 | } 73 | 74 | po-upload.ng-invalid.ng-dirty .po-upload-drag-drop-area { 75 | border: dashed 2px var(--color-upload-drag-drop-area-border-error); 76 | outline: none; 77 | } 78 | -------------------------------------------------------------------------------- /src/css/components/po-button-group/po-button-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow-button-group-box-shadow: var(--shadow-button); 3 | } 4 | 5 | .po-button-group-container { 6 | display: flex; 7 | width: 100%; 8 | } 9 | 10 | .po-button-group-container .po-button-group { 11 | padding: 0; 12 | } 13 | 14 | .po-button-group-container .po-button-group .po-button { 15 | border-radius: 0; 16 | white-space: nowrap; 17 | } 18 | 19 | .po-button-group-container .po-button-group:first-child .po-button { 20 | border-bottom-left-radius: var(--border-radius); 21 | border-top-left-radius: var(--border-radius); 22 | } 23 | 24 | .po-button-group-container .po-button-group:last-child .po-button { 25 | border-bottom-right-radius: var(--border-radius); 26 | border-top-right-radius: var(--border-radius); 27 | } 28 | 29 | .po-button-group-container .po-button-group + .po-button-group { 30 | margin-left: var(--button-group-container-margin); 31 | } 32 | 33 | .po-button-group-container .po-button-group:not(.po-button-group-disabled) { 34 | z-index: 1; 35 | } 36 | 37 | .po-button-group-container .po-button-group.po-button-group-button-selected { 38 | z-index: 2; 39 | } 40 | 41 | .po-button-group-container .po-button-group:not(.po-button-group-disabled):hover { 42 | z-index: 3; 43 | } 44 | 45 | .po-button-group-container .po-button-group:focus-within { 46 | z-index: 4; 47 | } 48 | 49 | .po-button-group-container .po-button-group.po-button-group-button-selected .po-button { 50 | background-color: var(--color-pressed); 51 | border-color: var(--color-pressed); 52 | color: var(--text-color); 53 | } 54 | 55 | .po-button-group-container .po-button-group.po-button-group-button-selected:hover .po-button { 56 | background-color: var(--color-hover); 57 | border-color: var(--color-hover); 58 | color: var(--text-color); 59 | } 60 | 61 | .po-button-group-container .po-button-group.po-button-group-button-selected .po-button:active { 62 | background-color: var(--color-pressed); 63 | border-color: var(--color-pressed); 64 | color: var(--text-color); 65 | outline-color: var(--color-action-focus); 66 | outline-width: var(--outline-width); 67 | outline-style: solid; 68 | outline-offset: 0.125em; 69 | cursor: pointer; 70 | } 71 | 72 | .po-button-group-container .po-button-group.po-button-group-button-selected .po-button:disabled { 73 | background-color: var(--background-color-disabled); 74 | border-color: var(--color-disabled); 75 | color: var(--color-disabled); 76 | cursor: not-allowed; 77 | } 78 | -------------------------------------------------------------------------------- /src/css/components/po-chart/po-chart.css: -------------------------------------------------------------------------------- 1 | .po-chart-header { 2 | align-items: center; 3 | background-color: var(--background-color); 4 | display: flex; 5 | flex-wrap: nowrap; 6 | font-weight: var(--font-weight); 7 | justify-content: flex-end; 8 | padding-inline: var(--spacing-sm); 9 | width: 100%; 10 | min-height: 44px; 11 | } 12 | 13 | .po-chart-header .po-chart-header-title { 14 | color: var(--color); 15 | font-family: var(--font-family); 16 | font-size: var(--font-size-title); 17 | font-weight: var(--font-weight-bold); 18 | margin-right: auto; 19 | padding: 0; 20 | text-align: left; 21 | } 22 | 23 | .description-chart .description-text { 24 | background-color: var(--background-color-grid); 25 | color: var(--color-description-chart); 26 | font-family: var(--font-family-description-chart); 27 | font-size: var(--font-size-description-chart); 28 | font-weight: var(--font-weight-description-chart); 29 | 30 | padding-top: 8px; 31 | padding-inline: var(--spacing-lg); 32 | text-align: center; 33 | } 34 | 35 | .po-chart-header .po-chart-header-title, 36 | .description-chart .description-text { 37 | text-overflow: ellipsis; 38 | overflow: hidden; 39 | white-space: nowrap; 40 | } 41 | 42 | .po-chart-header .po-chart-header-actions .po-button:focus { 43 | position: relative; 44 | z-index: 10; 45 | } 46 | 47 | .po-chart-header .po-chart-header-actions { 48 | padding: 0; 49 | text-align: end; 50 | min-width: 168px; 51 | } 52 | 53 | .po-chart-header .po-chart-header-actions po-button i { 54 | font-size: var(--font-size-icons); 55 | } 56 | 57 | .po-chart { 58 | background-color: var(--background-color-grid); 59 | padding-bottom: 16px; 60 | } 61 | 62 | #chart-container #custom-tooltip { 63 | position: absolute; 64 | } 65 | 66 | #chart-container { 67 | transition: all 0.3s ease-in-out; 68 | display: flex; 69 | flex-direction: column; 70 | } 71 | 72 | #chart-container.expanded { 73 | position: fixed; 74 | background-color: var(--background-color-grid); 75 | top: 0; 76 | left: 0; 77 | width: 100vw; 78 | height: 100vh; 79 | z-index: 999; 80 | } 81 | 82 | #chart-container.expanded .po-chart-header { 83 | width: 100%; 84 | top: 0; 85 | left: 0; 86 | background-color: var(--background-color); 87 | padding-top: var(--spacing-xs); 88 | position: relative; 89 | z-index: 10; 90 | } 91 | 92 | .po-chart-container-gauge { 93 | background: var(--background-color-container-gauge); 94 | box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); 95 | padding: 8px; 96 | } 97 | -------------------------------------------------------------------------------- /src/css/components/po-dropdown/po-dropdown.css: -------------------------------------------------------------------------------- 1 | .po-dropdown, 2 | [data-a11y='AAA'] .po-dropdown-aa { 3 | font-family: var(--font-family); 4 | font-weight: var(--font-weight); 5 | font-size: var(--font-size, var(--font-size-default)); 6 | line-height: var(--line-height); 7 | display: inline-grid; 8 | position: relative; 9 | width: inherit; 10 | border-radius: var(--border-radius); 11 | } 12 | 13 | .po-dropdown-aa { 14 | font-size: var(--font-size, var(--font-size-sm)); 15 | } 16 | 17 | .po-dropdown[disabled='true'] { 18 | cursor: not-allowed; 19 | } 20 | 21 | .po-dropdown-button, 22 | [data-a11y='AAA'] .po-dropdown-button-aa { 23 | background-color: var(--background); 24 | border: solid var(--border-width) var(--color); 25 | border-radius: var(--border-radius); 26 | color: var(--color); 27 | cursor: pointer; 28 | min-height: var(--target-size-aaa); 29 | padding: var(--padding, 0 var(--spacing-sm)); 30 | display: inline-flex; 31 | justify-content: space-between; 32 | align-items: center; 33 | width: 100%; 34 | } 35 | 36 | .po-dropdown-button-aa { 37 | min-height: var(--target-size-aa); 38 | padding: var(--padding, 0 var(--spacing-xs)); 39 | } 40 | 41 | .po-dropdown-button:hover { 42 | border: solid var(--border-width) var(--color-hover); 43 | color: var(--color-hover); 44 | background-color: var(--background-hover); 45 | } 46 | 47 | .po-dropdown:focus:not(.po-dropdown[disabled='true']), 48 | .po-dropdown:enabled:active:not(.po-dropdown[disabled='true']) { 49 | outline-color: var(--outline-color-focused); 50 | outline-width: var(--outline-width); 51 | outline-style: solid; 52 | outline-offset: 2px; 53 | } 54 | 55 | .po-dropdown-button:enabled:active { 56 | background-color: var(--background-pressed); 57 | } 58 | 59 | .po-dropdown-button:active { 60 | background-color: var(--background-pressed); 61 | } 62 | 63 | .po-dropdown-button-disabled { 64 | border-color: var(--color-disabled); 65 | color: var(--color-disabled); 66 | pointer-events: none; 67 | cursor: not-allowed; 68 | } 69 | 70 | .po-dropdown-button-open, 71 | .po-dropdown-button-open:hover { 72 | background-color: var(--background-pressed); 73 | border: solid var(--border-width) var(--color-hover); 74 | color: var(--color-dropdown-button-color-hover, var(--color-hover)); 75 | } 76 | 77 | .po-dropdown-icon, 78 | [data-a11y='AAA'] .po-dropdown-icon-aa { 79 | font-size: var(--font-size-lg); 80 | margin-left: 0.5em; 81 | display: flex; 82 | } 83 | 84 | .po-dropdown-icon-aa { 85 | font-size: var(--font-size-default); 86 | } 87 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-datepicker-range/po-datepicker-range.css: -------------------------------------------------------------------------------- 1 | .po-datepicker-range-end-date { 2 | display: table-cell; 3 | padding-left: 2px; 4 | vertical-align: middle; 5 | } 6 | 7 | .po-datepicker-range-field { 8 | appearance: none !important; 9 | display: table; 10 | } 11 | 12 | .po-datepicker-range-field-disabled { 13 | background-color: var(--color-datepicker-range-background-color-disabled); 14 | border: solid 1px var(--color-datepicker-range-border-text); 15 | color: var(--color-datepicker-range-color-disabled); 16 | pointer-events: none; 17 | } 18 | 19 | .po-date-picker-container-disabled { 20 | cursor: not-allowed !important; 21 | } 22 | 23 | div.po-datepicker-range-field-focused { 24 | border-color: var(--color-datepicker-range-color-focused) !important; 25 | outline-color: var(--color-action-focus); 26 | 27 | outline-width: var(--outline-width); 28 | outline-style: solid; 29 | outline-offset: 2px; 30 | } 31 | 32 | .po-datepicker-range-field:hover { 33 | border-color: var(--color-action-hover) !important; 34 | background-color: var(--color-brand-01-lightest) !important; 35 | } 36 | 37 | .po-datepicker-range-icon { 38 | display: table-cell; 39 | font: inherit; 40 | text-align: center; 41 | vertical-align: middle; 42 | width: 10px; 43 | } 44 | 45 | .po-datepicker-range-input { 46 | background-color: transparent; 47 | border: none; 48 | color: inherit; 49 | font: inherit; 50 | height: 100%; 51 | width: 100%; 52 | } 53 | 54 | /* Desabilita o clean field e o reveal do IE 10+ */ 55 | .po-datepicker-range-input::-ms-clear, 56 | .po-datepicker-range-input::-ms-reveal { 57 | display: none; 58 | } 59 | 60 | .po-datepicker-range-input:focus { 61 | outline: none; 62 | } 63 | 64 | .po-datepicker-range-separator { 65 | display: table-cell; 66 | vertical-align: middle; 67 | width: 8px; 68 | } 69 | 70 | .po-datepicker-range-start-date, 71 | [data-a11y='AAA'] .po-datepicker-range-start-date-aa { 72 | display: table-cell; 73 | vertical-align: middle; 74 | width: 90px; 75 | } 76 | 77 | .po-datepicker-range-start-date-aa { 78 | width: 80px; 79 | } 80 | 81 | .po-calendar-range-picker { 82 | position: fixed; 83 | z-index: 1000; 84 | } 85 | 86 | po-datepicker-range.ng-invalid.ng-dirty .po-field-icon { 87 | color: var(--color-datepicker-range-color-text-error) !important; 88 | } 89 | 90 | po-datepicker-range.ng-invalid.ng-dirty .po-input { 91 | border: 1px solid var(--color-datepicker-range-border-text-error) !important; 92 | color: var(--color-datepicker-range-color-text-error); 93 | outline: none; 94 | } 95 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-rich-text-toolbar-button-icon { 3 | @apply --font-subtitle; 4 | } 5 | 6 | /* Valores herdados do componente po-rich-text-body */ 7 | --border-rich-text-toolbar-border: var(--border-rich-text-body-border); 8 | } 9 | 10 | .po-rich-text-toolbar { 11 | background-color: var(--color-rich-text-toolbar-background-color); 12 | border: var(--border-rich-text-toolbar-border); 13 | border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); 14 | border-top: none; 15 | display: flex; 16 | flex-wrap: wrap; 17 | gap: 1rem 0.75rem; 18 | padding: var(--spacing-sm); 19 | width: 100%; 20 | } 21 | 22 | [data-a11y='AA'] .po-rich-text-toolbar[p-size='small'] { 23 | padding: var(--spacing-xs); 24 | gap: var(--spacing-xs); 25 | } 26 | 27 | /* Necessário para alinhar os grupos dos botões, deverá ser aplicado na tag do componente 'po-button-group' */ 28 | .po-rich-text-toolbar-button-align { 29 | display: inline-block; 30 | } 31 | 32 | /* Necessário para fixar a altura do po-button pois o mesmo tem tratamento para responsividade */ 33 | .po-rich-text-toolbar .po-button-group > .po-button, 34 | .po-rich-text-toolbar-color-picker-button { 35 | height: var(--target-size-aaa); 36 | width: var(--target-size-aaa); 37 | min-height: var(--target-size-aaa); 38 | min-width: var(--target-size-aaa); 39 | padding: 0; 40 | } 41 | 42 | [data-a11y='AA'] .po-rich-text-toolbar[p-size='small'] .po-button-group > .po-button, 43 | [data-a11y='AA'] .po-rich-text-toolbar[p-size='small'] .po-rich-text-toolbar-color-picker-button { 44 | height: var(--target-size-aa); 45 | width: var(--target-size-aa); 46 | min-height: var(--target-size-aa); 47 | min-width: var(--target-size-aa); 48 | } 49 | 50 | /* Seletor necessário para sobrepor o padding 0 */ 51 | .po-rich-text-toolbar .po-button-group > .po-rich-text-toolbar-color-picker-button { 52 | padding: 4px; 53 | vertical-align: middle; 54 | } 55 | 56 | .po-button-default.po-rich-text-toolbar-color-picker-button { 57 | overflow: hidden; 58 | } 59 | 60 | .po-rich-text-toolbar-color-picker-container { 61 | display: flex; 62 | } 63 | 64 | .po-rich-text-toolbar-color-picker-input { 65 | background-color: transparent; 66 | border: none; 67 | height: 100%; 68 | vertical-align: middle; 69 | width: 100%; 70 | } 71 | 72 | .po-rich-text-toolbar-color-picker-input::-webkit-color-swatch-wrapper { 73 | padding: 0; 74 | } 75 | 76 | .po-rich-text-toolbar-color-picker-input::-webkit-color-swatch { 77 | border: none; 78 | } 79 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-field-container/po-field-container.css: -------------------------------------------------------------------------------- 1 | /* Classe que possibilita colocar o botão de clean na mesma linha, */ 2 | .po-field-container-content { 3 | padding: var(--padding, var(--spacing-xs) 0); 4 | position: relative; 5 | width: 100%; 6 | } 7 | 8 | [data-a11y='AA'] .po-field-container-content[p-size='small'] { 9 | padding: var(--padding, var(--spacing-xxs) 0); 10 | } 11 | 12 | .po-field-container-content-datepicker { 13 | display: flex; 14 | gap: var(--spacing-xs); 15 | } 16 | 17 | .po-field-container-title { 18 | display: flex; 19 | width: 100%; 20 | justify-content: space-between; 21 | align-items: center; 22 | } 23 | 24 | .po-field-container-title .po-label { 25 | font-size: var(--font-size, var(--font-size-default)); 26 | } 27 | 28 | [data-a11y='AA'] .po-field-container[p-size='small'] .po-field-container-title .po-label { 29 | font-size: var(--font-size, var(--font-size-sm)); 30 | } 31 | 32 | .po-field-container-input { 33 | position: relative; 34 | width: 100%; 35 | display: flex; 36 | align-items: center; 37 | } 38 | 39 | .po-field-container-title po-label { 40 | flex: 1 auto; 41 | min-width: 0; 42 | } 43 | 44 | .po-field-container-title po-helper { 45 | display: flex; 46 | padding-right: var(--spacing-2xs); 47 | } 48 | 49 | [data-a11y='AA'] .po-field-container-title po-helper { 50 | padding-right: var(--spacing-xs); 51 | } 52 | 53 | .po-field-container-title:has(po-helper) .po-label-requirement { 54 | padding-right: var(--spacing-xs); 55 | } 56 | 57 | .po-field-container-content:has(po-helper) { 58 | display: flex; 59 | align-items: center; 60 | gap: var(--spacing-xs); 61 | padding: var(--padding, var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0); 62 | } 63 | 64 | [data-a11y='AA'] .po-field-container-content:has(po-helper)[p-size='small'] { 65 | padding: var(--padding, var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) 0); 66 | } 67 | 68 | .po-field-container-content:has(po-helper) .po-field-container-input { 69 | flex: 1; 70 | display: flex; 71 | align-items: center; 72 | } 73 | 74 | [data-a11y='AA'] 75 | .po-field-container-content:not(.po-field-container-content-datepicker):has(po-helper 76 | .po-helper-container[p-size='small']) 77 | .po-field-icon-container-right { 78 | right: 42px; 79 | } 80 | 81 | .po-field-container-content:not(.po-field-container-content-datepicker):has(po-helper) .po-field-icon-container-right { 82 | right: 50px; 83 | } 84 | 85 | .po-field-container-content:has(po-helper) .po-input { 86 | flex: 1; 87 | } 88 | 89 | .po-field-container-content:has(po-helper):has(.container-po-checkbox) { 90 | display: block; 91 | padding-right: 0px; 92 | } 93 | -------------------------------------------------------------------------------- /src/css/components/po-navbar/po-navbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow-navbar-box-shadow: var(--shadow-container); 3 | 4 | --navbar-height: 56px; 5 | } 6 | 7 | .po-navbar { 8 | background-color: var(--color-navbar-color); 9 | display: table; 10 | height: var(--navbar-height); 11 | left: 0; 12 | padding: 0 24px; 13 | position: fixed; 14 | top: 0; 15 | width: 100%; 16 | z-index: 3; 17 | } 18 | 19 | .po-navbar-shadow { 20 | box-shadow: var(--shadow-navbar-box-shadow); 21 | } 22 | 23 | @media screen and (max-width: 768px) { 24 | .po-navbar { 25 | padding: 0 16px; 26 | } 27 | } 28 | 29 | @keyframes menuPositionNormal { 30 | 0% { 31 | top: 0px; 32 | } 33 | 1% { 34 | top: 56px; 35 | } 36 | 100% { 37 | top: 56px; 38 | } 39 | } 40 | 41 | po-navbar ~ .po-wrapper .po-menu, 42 | po-navbar .po-menu { 43 | animation: menuPositionNormal 0.2s; 44 | height: calc(100vh - var(--navbar-height)); 45 | top: var(--navbar-height); 46 | } 47 | 48 | po-navbar ~ .po-wrapper .po-menu-mobile, 49 | po-navbar .po-menu-mobile { 50 | background-color: var(--color-navbar-color); 51 | position: fixed; 52 | top: 12px; 53 | z-index: 3; 54 | } 55 | 56 | /* 57 | Tratamento para utilizar o 'po-wrapper' para ajustar o espaçamento superior dos pages e menu. 58 | Irá funcionar colocando o 'po-navbar' precedendo e como irmão do 'po-wrapper' na estrutura padrão da aplicação po. 59 | 60 | 61 | 62 | 63 | 64 | */ 65 | po-navbar ~ .po-wrapper { 66 | padding-top: var(--navbar-height); 67 | } 68 | 69 | po-navbar ~ .po-wrapper .po-page { 70 | height: calc(100vh - var(--navbar-height)); 71 | } 72 | 73 | @media screen and (max-width: 1200px) { 74 | @keyframes menuPositionResponsive { 75 | 0% { 76 | top: 56px; 77 | } 78 | 99% { 79 | top: 56px; 80 | } 81 | 100% { 82 | top: 0; 83 | } 84 | } 85 | 86 | po-navbar ~ .po-wrapper .po-menu, 87 | po-navbar .po-menu { 88 | animation: menuPositionResponsive 0.2s; 89 | height: 100%; 90 | top: 0; 91 | } 92 | } 93 | 94 | @media (min-width: 768px) { 95 | .po-navbar + po-menu { 96 | display: none; 97 | } 98 | 99 | po-navbar + po-page-list .po-page-header, 100 | po-navbar + po-page-detail .po-page-header, 101 | po-navbar + po-page-edit .po-page-header, 102 | po-navbar + po-page-default .po-page-header { 103 | margin-top: 56px; 104 | } 105 | } 106 | 107 | @media print { 108 | .po-navbar ~ po-menu, 109 | .po-navbar { 110 | display: none; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/css/components/po-slide/po-slide.css: -------------------------------------------------------------------------------- 1 | .po-slide-arrow-circle { 2 | background-color: var(--color-slide-background-color-arrow-circle); 3 | border-radius: 15px; 4 | box-shadow: 0 4px 8px 0 var(--color-slide-box-shadow-arrow-circle); 5 | cursor: pointer; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 32px; 10 | margin: 0 17px; 11 | position: relative; 12 | width: 32px; 13 | } 14 | 15 | .po-slide-arrow-circle po-icon { 16 | line-height: 0px; 17 | font-size: 24px; 18 | } 19 | 20 | .po-slide-control-previous, 21 | .po-slide-control-next { 22 | position: absolute; 23 | top: 50%; 24 | transform: translateY(-50%); 25 | } 26 | 27 | .po-slide-control-next { 28 | right: 0; 29 | } 30 | 31 | .po-slide-wrapper { 32 | border-radius: 3px; 33 | box-shadow: 0 1px 4px 0 var(--color-slide-box-shadow-wrapper); 34 | margin-bottom: 32px; 35 | position: relative; 36 | } 37 | 38 | .po-slide-outer { 39 | border-radius: 3px; 40 | height: 100%; 41 | overflow: hidden; 42 | } 43 | 44 | .po-slide-inner { 45 | height: 100%; 46 | list-style: none; 47 | margin: 0; 48 | padding: 0; 49 | width: auto; 50 | white-space: nowrap; 51 | } 52 | 53 | .po-slide-item { 54 | display: inline-block; 55 | height: 100%; 56 | margin-bottom: -6px; 57 | max-width: 100%; 58 | overflow-y: hidden; 59 | vertical-align: top; 60 | width: 100%; 61 | } 62 | 63 | .po-slide-item-link, 64 | .po-slide-item-link:hover { 65 | cursor: pointer; 66 | display: block; 67 | height: 100%; 68 | text-decoration: none !important; 69 | } 70 | 71 | .po-slide-item-no-link { 72 | cursor: default; 73 | display: block; 74 | height: 100%; 75 | } 76 | 77 | .po-slide-item-content { 78 | height: 100%; 79 | margin: 0 auto; 80 | overflow: auto; 81 | white-space: normal; 82 | word-break: break-all; 83 | } 84 | 85 | .po-slide-circles { 86 | bottom: -32px; 87 | left: 0; 88 | position: absolute; 89 | right: 0; 90 | text-align: center; 91 | } 92 | 93 | .po-slide-circle { 94 | background-color: var(--color-slide-background-color-circle); 95 | border-radius: 50%; 96 | cursor: pointer; 97 | display: inline-block; 98 | height: 8px; 99 | margin-right: 4px; 100 | width: 8px; 101 | } 102 | 103 | .po-slide-active-circle { 104 | background-color: var(--color-slide-background-color-active-circle); 105 | cursor: default; 106 | } 107 | 108 | .po-slide-image { 109 | object-fit: cover; 110 | width: 100%; 111 | } 112 | 113 | .po-slide-item-background-image { 114 | background-position: 50%; 115 | background-size: cover; 116 | height: 100%; 117 | } 118 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-field-icon/po-field-icon.css: -------------------------------------------------------------------------------- 1 | .po-field-icon-container-left, 2 | .po-field-icon-container-right { 3 | position: absolute; 4 | } 5 | 6 | .po-field-icon-container-left { 7 | padding-left: 10px; 8 | pointer-events: none; 9 | } 10 | 11 | .po-field-icon-container-right { 12 | right: 10px; 13 | display: flex; 14 | } 15 | 16 | .po-field-icon, 17 | [data-a11y='AAA'] .po-field-icon-aa, 18 | .po-field-icon-disabled, 19 | [data-a11y='AAA'] .po-field-icon-disabled-aa { 20 | font-size: var(--font-size-lg); 21 | display: flex; 22 | text-align: center; 23 | text-decoration: none; 24 | } 25 | 26 | .po-field-icon-aa, 27 | .po-field-icon-disabled-aa { 28 | font-size: var(--font-size-default); 29 | } 30 | 31 | .po-field-icon-large, 32 | .po-field-icon-disabled-large { 33 | font-size: var(--font-size-xl); 34 | } 35 | 36 | .po-field-icon { 37 | cursor: pointer; 38 | } 39 | 40 | .po-field-icon-right { 41 | float: right; 42 | } 43 | 44 | .po-field-icon:not(.po-field-icon-disabled) { 45 | color: var(--color-brand-01-dark); 46 | } 47 | 48 | .po-field-icon-container-left .po-field-icon > .po-icon, 49 | .po-field-icon-container-left .po-field-icon > .po-fonts-icon, 50 | .po-field-icon-container-left .po-field-icon > :first-child:not(.po-fonts-icon):not(.po-icon), 51 | [data-a11y='AAA'] .po-field-icon-container-left .po-field-icon-aa > .po-icon, 52 | [data-a11y='AAA'] .po-field-icon-container-left .po-field-icon-aa > .po-fonts-icon, 53 | [data-a11y='AAA'] .po-field-icon-container-left .po-field-icon-aa > :first-child:not(.po-fonts-icon):not(.po-icon) { 54 | vertical-align: middle; 55 | line-height: var(--target-size-aaa); 56 | } 57 | 58 | .po-field-icon-container-left .po-field-icon-aa > .po-icon, 59 | .po-field-icon-container-left .po-field-icon-aa > .po-fonts-icon, 60 | .po-field-icon-container-left .po-field-icon-aa > :first-child:not(.po-fonts-icon):not(.po-icon) { 61 | line-height: var(--target-size-aa); 62 | } 63 | 64 | .po-field-icon-disabled { 65 | color: var(--color-neutral-light-30); 66 | } 67 | 68 | .po-field-icon-readonly { 69 | cursor: default; 70 | } 71 | 72 | po-combo.ng-invalid.ng-dirty .po-field-icon, 73 | po-datepicker.ng-invalid.ng-dirty .po-field-icon, 74 | po-decimal.ng-invalid.ng-dirty .po-field-icon, 75 | po-email.ng-invalid.ng-dirty .po-field-icon, 76 | po-input.ng-invalid.ng-dirty .po-field-icon, 77 | po-login.ng-invalid.ng-dirty .po-field-icon, 78 | po-lookup.ng-invalid.ng-dirty .po-field-icon, 79 | po-number.ng-invalid.ng-dirty .po-field-icon, 80 | po-password.ng-invalid.ng-dirty .po-field-icon, 81 | po-select.ng-invalid.ng-dirty .po-field-icon, 82 | po-url.ng-invalid.ng-dirty .po-field-icon { 83 | color: var(--color-feedback-negative-base) !important; 84 | } 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introdução 2 | 3 | Repositório de estilo do PO UI. 4 | 5 | Esse repositório é usado para atualizar os estilos que devem ser utilizados como base por todos os projetos 6 | do PO UI. 7 | 8 | # Processo de design 9 | 10 | Antes de desenvolver um novo componente, verifique se o protótipo tem a especificação para os seguintes status: 11 | 12 | - Enable 13 | - Disable 14 | - Static 15 | - Hover 16 | - Focus 17 | - Active 18 | 19 | > Quando um componente não tem um destes estados, ele **não deve ser desenvolvido**. 20 | 21 | # Como iniciar 22 | 23 | 1. Instale as dependências 24 | `npm install` ou `yarn` 25 | 26 | 2. Fica observando alterações no projeto e recria o build do projeto em tempo de desenvolvimento 27 | `npm run watch` ou `yarn watch` 28 | 29 | - Quando você deseja especificar um tema, é necessário adicionar 30 | `-- --theme ` 31 | 32 | **Exemplo**: `npm run watch -- --theme green` 33 | 34 | **Nome do tema**: é o sufixo relacionado ao arquivo `po-theme-.css`, localizado em `src/app/css/themes`; 35 | 36 | 3. Inicia o servidor (http-server) para testar o projeto 37 | `npm run dev` ou `yarn dev` 38 | 39 | - Utilizando o `npm run watch` e o `npm run dev`, a cada alteração, apenas dê o refresh na página para visualizar a mesma; 40 | 41 | 42 | Outros scripts: 43 | * Faz o build do projeto 44 | `npm run build` ou `yarn build` 45 | * Também é possível informar um tema específico adicionando `-- --theme ` 46 | 47 | # Contribuição 48 | 49 | Siga as `convenções de nomenclatura` abaixo: 50 | 51 | O objetivo principal é continuar desenvolvendo os componentes, tornando-os mais simples de usar em qualquer projeto. O desenvolvimento 52 | dos estilos é aberto para todos os desenvolvedores e agradecemos aos desenvolvedores que contribuem com melhorias e correções de erros. 53 | 54 | Leia abaixo para saber como você pode participar na melhoria dos estilos. 55 | 56 | ### Steps 57 | 58 | 1. Crie um template HTML com o nome do componente em `src/css/components` 59 | 2. Crie um link em `index.html` para redirecionar para o preview do componente 60 | 3. Crie uma pasta com o nome do componente em `src/css/components` 61 | 4. Crie um arquivo `css` com o nome do componente 62 | 63 | Em desenvolvimento ... 64 | 65 | ### Exemplo de contribuição 66 | 67 | Em desenvolvimento ... 68 | 69 | # Convenções de nomenclatura 70 | 71 | ### Utilitários 72 | 73 | Em desenvolvimento ... 74 | 75 | ### Componentes 76 | 77 | Em desenvolvimento ... 78 | 79 | ### Assets 80 | 81 | Instalar [SVGO](https://github.com/svg/svgo) para otimizar arquivos SVG. 82 | 83 | `$ [sudo] npm install -g svgo` 84 | 85 | > **Arquivos SVG precisam ser otimizados antes de serem adicionados ao projeto** 86 | -------------------------------------------------------------------------------- /src/css/components/po-table/po-table-column-manager/po-table-column-manager.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-table-column-manager-text: { 3 | @apply --font-text-large; 4 | } 5 | } 6 | 7 | .po-table-column-manager-header { 8 | border-bottom: 1px solid var(--color-table-column-manager-border-color); 9 | display: table; 10 | height: 44px; 11 | width: 100%; 12 | } 13 | 14 | .po-table-column-manager-header-title, 15 | .po-table-column-manager-header-close { 16 | display: table-cell; 17 | vertical-align: middle; 18 | } 19 | 20 | .po-table-column-manager-header-title { 21 | color: var(--color-table-column-manager-header-title); 22 | padding: 0 16px; 23 | } 24 | 25 | .po-table-column-manager-header-title, 26 | .po-table-column-manager-footer { 27 | @apply --font-table-column-manager-text; 28 | } 29 | 30 | .po-table-column-manager-header-close-button { 31 | background-color: transparent; 32 | border: none; 33 | color: var(--color-table-column-manager-close-button-color); 34 | font-size: 16px; 35 | margin: 4px 2px; 36 | padding: 6px; 37 | } 38 | 39 | .po-table-column-manager-header-close-button:focus { 40 | border-radius: 1px; 41 | outline: dashed 2px var(--color-table-column-manager-outline-color-focus); 42 | } 43 | 44 | .po-table-column-manager-body { 45 | overflow-y: auto; 46 | display: grid; 47 | } 48 | 49 | .po-table-column-manager-footer { 50 | border-top: 1px solid var(--color-table-column-manager-border-color); 51 | height: 56px; 52 | position: relative; 53 | } 54 | 55 | .po-table-column-manager-footer-restore { 56 | display: block; 57 | left: 50%; 58 | position: absolute; 59 | top: 50%; 60 | transform: translate(-50%, -50%); 61 | } 62 | 63 | .po-table-column-manager-footer-restore .po-button:focus { 64 | border-radius: 1px; 65 | outline: dashed 2px var(--color-table-column-manager-outline-color-focus); 66 | } 67 | 68 | .po-container-arrows-columns-manager { 69 | display: flex; 70 | flex-direction: column; 71 | padding: 8px 0; 72 | } 73 | 74 | .po-container-icons-arrows-columns-manager { 75 | display: flex; 76 | flex-direction: row; 77 | margin-left: auto; 78 | } 79 | 80 | .po-table-list-manager-item { 81 | display: flex; 82 | align-items: flex-start; 83 | justify-content: space-between; 84 | } 85 | 86 | .po-table-list-manager-container { 87 | list-style-type: none; 88 | } 89 | 90 | .po-table-list-manager-item .po-checkbox-outline { 91 | padding: 6px 0; 92 | margin: 4px 0; 93 | } 94 | 95 | .po-container-icons-arrows-columns-manager .po-button { 96 | margin: 0; 97 | padding: 0; 98 | } 99 | 100 | .po-checkbox-group-column-manager .po-checkbox-group-item { 101 | padding: 0 2rem 2rem 0 !important; 102 | } 103 | -------------------------------------------------------------------------------- /src/css/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-rich-text-bold { 3 | @apply --font-text-large-bold; 4 | } 5 | 6 | --border-rich-text-body-border: 1px solid var(--color-neutral-dark-70); 7 | --shadow-rich-text-body-box-shadow: inset 0 1px 8px 0 var(--color-black-alpha-10); 8 | 9 | --rich-text-body-max-height: 262px; 10 | --rich-text-body-min-width: 160px; 11 | --rich-text-body-min-height: 94px; 12 | } 13 | 14 | .po-rich-text-body { 15 | font-size: var(--font-size-default); 16 | line-height: var(--line-height-md); 17 | background-color: var(--color-rich-text-body-background-color); 18 | border: var(--border-rich-text-body-border); 19 | border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; 20 | box-shadow: var(--shadow-rich-text-body-box-shadow); 21 | max-height: var(--rich-text-body-max-height); 22 | min-height: var(--rich-text-body-min-height); 23 | min-width: var(--rich-text-body-min-width); 24 | overflow-y: auto; 25 | padding: var(--spacing-sm); 26 | width: 100%; 27 | } 28 | 29 | [data-a11y='AA'] .po-rich-text-body[p-size='small'] { 30 | font-size: var(--font-size-sm); 31 | padding: var(--spacing-xs); 32 | } 33 | 34 | po-rich-text-body:only-child .po-rich-text-body { 35 | border-radius: var(--border-radius-md); 36 | } 37 | 38 | .po-rich-text-body b { 39 | @apply --font-rich-text-bold; 40 | } 41 | 42 | .po-rich-text-body .po-rich-text-link { 43 | cursor: text; 44 | } 45 | 46 | .po-rich-text-link { 47 | @apply --font-rich-text-bold; 48 | color: var(--color-rich-text-body-text-link); 49 | text-decoration: underline; 50 | } 51 | 52 | .po-rich-text-link:hover { 53 | color: var(--color-rich-text-body-text-link-hover); 54 | } 55 | 56 | /* tratamento necessário para a customização de cores */ 57 | .po-rich-text-body font .po-rich-text-link { 58 | color: inherit !important; 59 | } 60 | 61 | po-rich-text.ng-invalid.ng-dirty .po-rich-text-body { 62 | border: solid 1px var(--color-rich-text-body-border-error); 63 | color: var(--color-rich-text-body-text-error); 64 | outline: none; 65 | } 66 | 67 | /* Necessário para tratamento do placeholder no componente via css, o acesso no ts deve ser feito a partir da propriedade 68 | 'data-placeholder' devido a não funcionar somente como 'placeholder', ao digitar um valor e apagar o conteúdo da tag fica 69 | com um
, será necessário tratar no keyup a remoção desse
para que funcione corretamente no firefox */ 70 | div[data-placeholder]:not([data-placeholder='']):empty::before { 71 | color: var(--color-rich-text-placeholder-color); 72 | content: attr(data-placeholder); 73 | display: block; 74 | } 75 | 76 | /* necessário devido ao reset aplicar padding: 0 aos elementos ::after e ::before */ 77 | .po-rich-text-body ul { 78 | padding-left: 16px; 79 | } 80 | -------------------------------------------------------------------------------- /src/cli/src/build.js: -------------------------------------------------------------------------------- 1 | const { dest, parallel, series, src } = require('gulp'); 2 | 3 | const argv = require('yargs').argv; 4 | const chalk = require('chalk'); 5 | const cssnano = require('cssnano'); 6 | const del = require('del'); 7 | 8 | const postcss = require('gulp-postcss'); 9 | const rename = require('gulp-rename'); 10 | 11 | const customProperties = require('postcss-custom-properties'); 12 | const importCss = require('postcss-import'); 13 | 14 | async function command() { 15 | console.log('\n ' + chalk.white.bold('Build custom theme ...')); 16 | 17 | const customFonts = argv.fonts; 18 | const customName = argv.name || 'custom'; 19 | 20 | const cleanDirTemp = () => del('./.temp'); 21 | const cleanDirDist = () => del('./dist'); 22 | 23 | const copyAssets = (assetType, custom = false) => 24 | src(`${custom ? './src/assets/' : './node_modules/@po-ui/style/'}${assetType}/**/*.*`).pipe( 25 | dest(`./dist/${assetType}/`) 26 | ); 27 | 28 | const copyPackageJson = () => src('package.json').pipe(dest(`./dist/`)); 29 | 30 | const copyCssToDirTemp = () => src('./src/**/*.css').pipe(dest('./.temp/css/')); 31 | 32 | const buildThemeVariablesCss = () => 33 | src(`./.temp/css/po-theme-custom.css`) 34 | .pipe(postcss([cssnano()])) 35 | .pipe(rename(`po-theme-${customName}-variables.min.css`)) 36 | .on('error', err => { 37 | console.log(err.toString()); 38 | this.emit('end'); 39 | }) 40 | .pipe(dest(`./dist/css/`)); 41 | 42 | const buildThemeCssLegacy = () => 43 | src('./.temp/css/index.css') 44 | .pipe( 45 | postcss([ 46 | importCss(), 47 | customProperties({ 48 | preserve: false, 49 | warnings: true 50 | }), 51 | cssnano() 52 | ]) 53 | ) 54 | .pipe(rename(`css/po-theme-${customName}.min.css`)) 55 | .on('error', err => { 56 | console.log(err.toString()); 57 | this.emit('end'); 58 | }) 59 | .pipe(dest(`./dist/`)); 60 | 61 | const copyAssetsImages = () => copyAssets('images'); 62 | const copyAssetsIcons = () => copyAssets('icons'); 63 | const copyAssetsFonts = () => copyAssets('fonts', customFonts); 64 | 65 | const showFinalMessage = () => { 66 | console.log('\n========================\n'); 67 | console.log(' ' + chalk.white.bold('To publish theme:') + '\n'); 68 | console.log(' ' + chalk.green.bold(`cd dist`)); 69 | console.log(' ' + chalk.green.bold(`npm publish`) + '\n'); 70 | }; 71 | 72 | series( 73 | parallel(cleanDirDist, cleanDirTemp), 74 | parallel(copyAssetsImages, copyAssetsIcons, copyAssetsFonts, copyPackageJson, copyCssToDirTemp), 75 | parallel(buildThemeVariablesCss, buildThemeCssLegacy), 76 | parallel(cleanDirTemp, showFinalMessage) 77 | )(); 78 | } 79 | 80 | module.exports = command; 81 | -------------------------------------------------------------------------------- /icon-generator.js: -------------------------------------------------------------------------------- 1 | /* ICON GENERATOR 2 | * 3 | * Para atualizar as classes dos ícones siga os seguintes passos: 4 | * 1: atualizar os arquivos da pasta "/src/assets/icons/" com os arquivos enviados 5 | * pelo time de UX; 6 | * 2: rodar o comando "npm run build:icon"; 7 | * 3: verificar se os arquivos foram atualizados: 8 | * - /src/css/commons/po-icon/po-icon.css 9 | * - /src/css/commons/po-icon/po-icon.html 10 | * - /docs/guides/icons.md 11 | * 12 | * ATENÇÃO1: Os ícones já existentes não deverão ser alterados pelo script. Caso 13 | * aconteça, valide a alteração dos hexadecimais com o time de UX. 14 | * 15 | * ATENÇÃO2: Os ícones po-icon-ok e po-icon-minus são usados pelos componentes e 16 | * são referenciados pelos seus códigos hexadecimais, caso os mesmo sejam 17 | * alterados devem ser atualizados também. 18 | * Os mesmos são usados pelos componentes: checkbox-group, multiselect, 19 | * radio-group e table. 20 | */ 21 | 22 | const fs = require('fs'); 23 | const parseString = require('xml2js').parseString; 24 | 25 | const xml = fs.readFileSync(__dirname + '/src/assets/icons/PoIcon.svg'); 26 | const xmlCleanedUnicode = xml.toString().replace(/&#x/g, '').replace(/;/g, ''); 27 | 28 | let icons = []; 29 | 30 | parseString(xmlCleanedUnicode, (err, result) => { 31 | const glyphs = result.svg.defs[0].font[0].glyph; 32 | 33 | icons = glyphs 34 | .map(glyph => ({ className: glyph['$']['glyph-name'], content: glyph['$'].unicode })) 35 | .filter(glyph => glyph.className && glyph.content) 36 | .sort((iconA, iconB) => { 37 | if (iconA.className > iconB.className) { 38 | return 1; 39 | } 40 | if (iconA.className < iconB.className) { 41 | return -1; 42 | } 43 | return 0; 44 | }); 45 | }); 46 | 47 | const classIcons = icons.map( 48 | icon => 49 | ` 50 | .po-icon.po-icon-${icon.className}:before { 51 | content: '\\${icon.content}'; 52 | } 53 | ` 54 | ); 55 | 56 | const sampleIcons = icons.map( 57 | icon => ` 58 |
  • 59 | 60 | po-icon po-icon-${icon.className} 61 |
    • 62 | ` 63 | ); 64 | 65 | const sampleIconsHtml = ` 66 | 80 | 81 |
    82 |
    83 |
    84 |
      ${sampleIcons.join('')}
    85 |
    86 |
    87 |
    88 | `; 89 | 90 | fs.writeFileSync(__dirname + '/src/css/commons/po-icon/po-icon.css', classIcons.join('').trim() + '\n'); 91 | fs.writeFileSync(__dirname + '/src/css/commons/po-icon/po-icon.html', sampleIconsHtml); 92 | -------------------------------------------------------------------------------- /src/css/components/po-disclaimer/po-disclaimer.css: -------------------------------------------------------------------------------- 1 | .po-disclaimer { 2 | align-items: center; 3 | border-color: var(--border-color); 4 | border-radius: var(--border-radius); 5 | background-color: var(--color); 6 | border-style: solid; 7 | border-width: var(--border-width-sm); 8 | display: flex; 9 | gap: 0.25em; 10 | justify-content: center; 11 | max-width: 15em; 12 | min-height: 1.5em; 13 | padding-left: var(--spacing-xs); 14 | } 15 | 16 | .po-disclaimer > * { 17 | align-self: stretch; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .po-disclaimer-label, 24 | .po-disclaimer-remove { 25 | font-family: var(--font-family); 26 | font-size: var(--font-size); 27 | font-weight: var(--font-weight-normal); 28 | line-height: var(--line-height); 29 | overflow: hidden; 30 | text-align: left; 31 | } 32 | 33 | .po-disclaimer-label span { 34 | overflow: hidden; 35 | text-overflow: ellipsis; 36 | white-space: nowrap; 37 | } 38 | 39 | .po-disclaimer-remove { 40 | background-color: var(--color); 41 | border-bottom-right-radius: var(--border-radius); 42 | border-left-color: var(--border-color); 43 | border-left-style: solid; 44 | border-left-width: var(--border-width-sm); 45 | border-top-right-radius: var(--border-radius); 46 | color: var(--color-icon); 47 | min-width: 1.5625em; 48 | overflow: hidden; 49 | padding-left: 0.25em; 50 | padding-right: 0.25em; 51 | } 52 | 53 | .po-disclaimer-remove-danger { 54 | background-color: var(--color-feedback-negative-lightest); 55 | color: var(--color-feedback-negative-darker); 56 | border-left-color: var(--color-feedback-negative-darker); 57 | } 58 | 59 | .po-disclaimer-label span { 60 | color: var(--text-color); 61 | } 62 | 63 | .po-disclaimer-remove:active { 64 | outline-color: var(--outline-color-focused); 65 | outline-style: solid; 66 | outline-width: var(--outline-width); 67 | } 68 | 69 | .po-disclaimer-remove:focus-visible { 70 | outline-width: var(--outline-width-focus-visible); 71 | } 72 | 73 | .po-disclaimer-remove:hover { 74 | background-color: var(--color-hover); 75 | } 76 | 77 | .po-disclaimer-remove-all { 78 | padding-right: 0.5em; 79 | } 80 | 81 | .po-disclaimer-danger { 82 | background-color: var(--color-feedback-negative-lightest); 83 | border-color: var(--color-feedback-negative-darker); 84 | } 85 | 86 | .po-disclaimer-danger > .po-disclaimer-label > span { 87 | color: var(--color-feedback-negative-darker); 88 | } 89 | 90 | .po-disclaimer-remove-danger:hover { 91 | background-color: var(--color-feedback-negative-lighter); 92 | } 93 | 94 | .po-disclaimer-danger:active, 95 | .po-disclaimer-danger:focus-visible { 96 | outline-color: var(--outline-color-focused); 97 | outline-style: solid; 98 | outline-width: var(--outline-width); 99 | outline-offset: 2px; 100 | } 101 | 102 | @media print { 103 | .po-disclaimer-label, 104 | .po-disclaimer-remove { 105 | print-color-adjust: exact; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/cli/src/new.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk'); 2 | const del = require('del'); 3 | const fs = require('fs'); 4 | const inquirer = require('inquirer'); 5 | const path = require('path'); 6 | const spawn = require('cross-spawn'); 7 | 8 | const overwritePrompt = projectName => ({ 9 | type: 'confirm', 10 | name: 'overwrite', 11 | message: `There is already a project called "${projectName}", do you want to overwrite it?` 12 | }); 13 | 14 | const getPath = projectName => path.join(process.cwd(), projectName); 15 | 16 | async function command(themeName) { 17 | const destination = getPath(themeName); 18 | 19 | if (fs.existsSync(destination)) { 20 | const { overwrite } = await inquirer.prompt([overwritePrompt(themeName)]); 21 | 22 | if (!overwrite) { 23 | return; 24 | } 25 | 26 | await del(destination, { force: true }); 27 | } 28 | 29 | try { 30 | console.log(chalk.white.bold('Initializing new theme...')); 31 | 32 | fs.mkdirSync(destination + '/src/assets/fonts', { recursive: true }); 33 | 34 | fs.copyFileSync( 35 | __dirname.replace('src', 'node_modules/@po-ui/style/css/po-theme-default-variables.css'), 36 | destination + '/src/po-theme-custom.css' 37 | ); 38 | 39 | const package = { 40 | name: themeName, 41 | version: '1.0.0', 42 | author: '', 43 | description: `Po Custom Theme - ${themeName}`, 44 | repository: {}, 45 | license: 'MIT', 46 | scripts: { 47 | build: 'po-theme build' 48 | }, 49 | devDependencies: { 50 | '@po-ui/style': '^2.0.0-beta.1' 51 | } 52 | }; 53 | 54 | fs.writeFileSync(destination + '/package.json', JSON.stringify(package, {}, 2)); 55 | 56 | fs.writeFileSync( 57 | destination + '/src/index.css', 58 | "@import '../../node_modules/@po-ui/style/css/po-theme-core.min.css';" + 59 | '\r\n\r\n' + 60 | "@import './po-theme-custom.css';" 61 | ); 62 | 63 | cd(destination); 64 | 65 | await _installPackages(); 66 | 67 | console.log('\n========================\n'); 68 | console.log(' ' + chalk.white.bold('To custom theme:') + '\n'); 69 | console.log(' ' + chalk.green.bold(`cd ${themeName}`)); 70 | console.log(' ' + chalk.green.bold(`Customize your theme in 'src/po-theme-custom.css'`)); 71 | console.log(' ' + chalk.green.bold(`Build: 'npm run build'`)); 72 | } catch (e) { 73 | console.error(`Ops! An error occurred in the installation of the project "${themeName}"`); 74 | console.error(e.message); 75 | } 76 | } 77 | 78 | function _installPackages() { 79 | console.log(chalk.white.bold('Installing packages...') + '\n'); 80 | 81 | return new Promise((resolve, reject) => { 82 | let command = 'npm'; 83 | let args = ['install']; 84 | 85 | const child = spawn(command, args, { stdio: 'inherit' }); 86 | child.on('close', code => { 87 | if (code !== 0) { 88 | reject({ command: `${command} ${args.join(' ')}` }); 89 | return; 90 | } 91 | 92 | console.log(chalk.white.bold('Packages installed sucessfully!')); 93 | resolve(); 94 | }); 95 | }); 96 | } 97 | 98 | module.exports = command; 99 | -------------------------------------------------------------------------------- /src/css/components/po-tree-view/po-tree-view-item-header.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-tree-view-item-header-label-font-bold: { 3 | @apply --font-text-bold; 4 | } 5 | 6 | --font-tree-view-item-header-label-font-normal: { 7 | @apply --font-text; 8 | } 9 | } 10 | 11 | .po-tree-view-item-header { 12 | display: table; 13 | padding: var(--spacing-sm); 14 | line-height: var(--line-height-none); 15 | } 16 | 17 | [data-a11y='AA'] po-tree-view[p-components-size='small'] .po-tree-view .po-tree-view-item-header { 18 | padding: var(--spacing-xs); 19 | } 20 | 21 | .po-tree-view-item-header-button { 22 | background-color: transparent; 23 | border: none; 24 | color: var(--color-tree-view-item-header-button-color); 25 | cursor: pointer; 26 | font-size: 20px; 27 | margin-right: 8px; 28 | overflow: hidden; 29 | vertical-align: middle; 30 | line-height: 0px; 31 | } 32 | 33 | .po-tree-view-item-header-button::-moz-focus-inner { 34 | border: 0; 35 | } 36 | 37 | .po-tree-view-item-header-button:focus-visible { 38 | outline-color: var(--color-action-focus); 39 | outline-width: var(--outline-width-focus-visible); 40 | outline-style: solid; 41 | outline-offset: 2px; 42 | } 43 | 44 | .po-tree-view-item-header-button-icon { 45 | display: block; 46 | transform: rotate(0deg); 47 | transition: transform 0.3s cubic-bezier(0.07, 0.88, 0.58, 0.92); 48 | } 49 | 50 | .po-tree-view-item-header-button-icon-transform { 51 | transform: rotate(180deg); 52 | } 53 | 54 | .po-tree-view-item-header-label, 55 | .po-tree-view-item-header-checkbox { 56 | color: var(--color-tree-view-item-header-label-text-color); 57 | display: table-cell; 58 | vertical-align: top; 59 | } 60 | 61 | .po-tree-view-item .po-tree-view-item-header-label, 62 | .po-tree-view-item .po-tree-view-item-header-checkbox { 63 | font-family: var(--font-family-default-bold), sans-serif; 64 | font-size: var(--font-size-default-normal); 65 | line-height: 24px; 66 | vertical-align: middle; 67 | } 68 | 69 | .po-tree-view-item .po-tree-view-item .po-tree-view-item-header-label, 70 | .po-tree-view-item .po-tree-view-item .po-tree-view-item-header-checkbox { 71 | font-family: var(--font-family), sans-serif; 72 | font-size: var(--font-size-default-normal); 73 | vertical-align: middle; 74 | } 75 | 76 | .po-tree-view-item-header-padding { 77 | padding-left: 28px; 78 | } 79 | 80 | .po-tree-view-item-header-checkbox .po-checkbox .po-checkbox-label:before { 81 | padding-left: 2px; 82 | top: 3px; 83 | } 84 | 85 | @media screen and (max-width: 1366px) { 86 | .po-tree-view-item .po-tree-view-item-header-checkbox .po-checkbox { 87 | @apply --font-tree-view-item-header-label-font-bold; 88 | } 89 | 90 | .po-tree-view-item .po-tree-view-item .po-tree-view-item-header-checkbox .po-checkbox { 91 | @apply --font-tree-view-item-header-label-font-normal; 92 | } 93 | 94 | .po-tree-view-item-header-checkbox .po-checkbox .po-checkbox-label:before { 95 | height: 20px; 96 | line-height: 18px; 97 | padding-left: 2px; 98 | top: 3px; 99 | width: 20px; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/css/components/po-breadcrumb/po-breadcrumb.css: -------------------------------------------------------------------------------- 1 | .po-breadcrumb { 2 | font-family: var(--font-family); 3 | font-weight: var(--font-size-sm); 4 | line-height: var(--line-height-xl); 5 | text-decoration: none; 6 | display: flex; 7 | justify-content: space-between; 8 | max-width: 100%; 9 | } 10 | 11 | .po-breadcrumb-items { 12 | display: inline; 13 | list-style: none; 14 | } 15 | 16 | .po-breadcrumb-item, 17 | .po-breadcrumb-item-container { 18 | display: flex; 19 | align-items: center; 20 | gap: 8px; 21 | float: left; 22 | list-style: none; 23 | } 24 | 25 | [data-a11y='AA'] po-breadcrumb[p-size='small'] .po-breadcrumb { 26 | line-height: var(--line-height-md); 27 | } 28 | 29 | .po-breadcrumb-label { 30 | float: left; 31 | padding: 7px 0 7px 8px; 32 | text-align: center; 33 | } 34 | 35 | .po-breadcrumb-item .po-breadcrumb-label { 36 | color: var(--color); 37 | } 38 | 39 | .po-breadcrumb-item .po-breadcrumb-label:hover { 40 | color: var(--color-breadcrumb-color-item-link-hover); 41 | cursor: pointer; 42 | text-decoration: underline; 43 | } 44 | 45 | .po-breadcrumb-favorite { 46 | white-space: nowrap; 47 | color: var(--color-action-default); 48 | font-family: var(--font-family-theme); 49 | font-weight: var(--font-weight); 50 | } 51 | 52 | .po-breadcrumb-favorite:focus { 53 | outline-color: var(--color-brand-01-darkest); 54 | 55 | outline-width: var(--outline-width); 56 | outline-style: solid; 57 | outline-offset: 2px; 58 | } 59 | 60 | .po-breadcrumb-favorite:focus-visible { 61 | outline-width: var(--outline-width-focus-visible); 62 | } 63 | 64 | .po-breadcrumb-favorite-star-active { 65 | color: var(--color-warning); 66 | position: relative; 67 | top: 1px; 68 | } 69 | 70 | .po-breadcrumb-favorite-label { 71 | padding-left: 5px; 72 | } 73 | 74 | [data-a11y='AA'] po-breadcrumb[p-size='small'] .po-breadcrumb .po-breadcrumb-item, 75 | [data-a11y='AA'] po-breadcrumb[p-size='small'] .po-breadcrumb .po-breadcrumb-favorite-label { 76 | font-size: var(--font-size-sm); 77 | } 78 | 79 | .po-breadcrumb-item-activate { 80 | color: var(--color-current-page); 81 | white-space: nowrap; 82 | } 83 | 84 | .po-breadcrumb-item-activate:focus, 85 | .po-breadcrumb-icon-more:focus { 86 | outline-color: var(--color-brand-01-darkest); 87 | 88 | outline-width: var(--outline-width); 89 | outline-style: solid; 90 | outline-offset: 2px; 91 | } 92 | 93 | .po-breadcrumb-item-activate:focus-visible, 94 | .po-breadcrumb-icon-more:focus-visible { 95 | outline-color: var(--color-brand-01-darkest); 96 | 97 | outline-width: var(--outline-width-focus-visible); 98 | outline-style: solid; 99 | outline-offset: 2px; 100 | } 101 | 102 | .po-breadcrumb-items po-link { 103 | white-space: nowrap; 104 | } 105 | 106 | .po-breadcrumb-icon-more i { 107 | color: var(--color-breadcrumb-color-item, var(--color)); 108 | } 109 | 110 | .po-breadcrumb-icon-arrow { 111 | color: var(--color-icon); 112 | } 113 | 114 | .po-breadcrumb-icon-more i.an, 115 | i.po-breadcrumb-icon-arrow.an { 116 | font-size: var(--font-size-sm); 117 | display: flex; 118 | } 119 | -------------------------------------------------------------------------------- /src/css/commons/po-grid-system/po-grid-system-lg.css: -------------------------------------------------------------------------------- 1 | @media (min-width: $gridSystemLgMinWidth) and (max-width: $gridSystemLgMaxWidth), 2 | (min-width: var(--gridSystemLgMinWidth)) and (max-width: var(--gridSystemLgMaxWidth)) { 3 | /* Classes para definição de visibilidade */ 4 | 5 | .po-visible-lg, 6 | [class*='po-visible-lg-'], 7 | [class*=' po-visible-lg-'] { 8 | display: block; 9 | } 10 | 11 | .po-hidden-lg { 12 | display: none; 13 | } 14 | 15 | /* Classes para definição do tamanho default */ 16 | 17 | [class*='po-xl-'] { 18 | width: 100%; 19 | } 20 | 21 | .po-sm-1 { 22 | width: 8.33333333%; 23 | } 24 | 25 | .po-sm-2 { 26 | width: 16.66665%; 27 | } 28 | 29 | .po-sm-3 { 30 | width: 25%; 31 | } 32 | 33 | .po-sm-4 { 34 | width: 33.33333%; 35 | } 36 | 37 | .po-sm-5 { 38 | width: 41.66666%; 39 | } 40 | 41 | .po-sm-6 { 42 | width: 50%; 43 | } 44 | 45 | .po-sm-7 { 46 | width: 58.33333333%; 47 | } 48 | 49 | .po-sm-8 { 50 | width: 66.66666667%; 51 | } 52 | 53 | .po-sm-9 { 54 | width: 75%; 55 | } 56 | 57 | .po-sm-10 { 58 | width: 83.33333333%; 59 | } 60 | 61 | .po-sm-11 { 62 | width: 91.66666667%; 63 | } 64 | 65 | .po-sm-12 { 66 | width: 100%; 67 | } 68 | 69 | .po-md-1 { 70 | width: 8.33333333%; 71 | } 72 | 73 | .po-md-2 { 74 | width: 16.66665%; 75 | } 76 | 77 | .po-md-3 { 78 | width: 25%; 79 | } 80 | 81 | .po-md-4 { 82 | width: 33.33333%; 83 | } 84 | 85 | .po-md-5 { 86 | width: 41.66666%; 87 | } 88 | 89 | .po-md-6 { 90 | width: 50%; 91 | } 92 | 93 | .po-md-7 { 94 | width: 58.33333333%; 95 | } 96 | 97 | .po-md-8 { 98 | width: 66.66666667%; 99 | } 100 | 101 | .po-md-9 { 102 | width: 75%; 103 | } 104 | 105 | .po-md-10 { 106 | width: 83.33333333%; 107 | } 108 | 109 | .po-md-11 { 110 | width: 91.66666667%; 111 | } 112 | 113 | .po-md-12 { 114 | width: 100%; 115 | } 116 | 117 | /* Classes para definição do tamanho */ 118 | 119 | .po-lg-1, 120 | .po-visible-lg-1 { 121 | width: 8.33333333%; 122 | } 123 | 124 | .po-lg-2, 125 | .po-visible-lg-2 { 126 | width: 16.66665%; 127 | } 128 | 129 | .po-lg-3, 130 | .po-visible-lg-3 { 131 | width: 25%; 132 | } 133 | 134 | .po-lg-4, 135 | .po-visible-lg-4 { 136 | width: 33.33333%; 137 | } 138 | 139 | .po-lg-5, 140 | .po-visible-lg-5 { 141 | width: 41.66666%; 142 | } 143 | 144 | .po-lg-6, 145 | .po-visible-lg-6 { 146 | width: 50%; 147 | } 148 | 149 | .po-lg-7, 150 | .po-visible-lg-7 { 151 | width: 58.33333333%; 152 | } 153 | 154 | .po-lg-8, 155 | .po-visible-lg-8 { 156 | width: 66.66666667%; 157 | } 158 | 159 | .po-lg-9, 160 | .po-visible-lg-9 { 161 | width: 75%; 162 | } 163 | 164 | .po-lg-10, 165 | .po-visible-lg-10 { 166 | width: 83.33333333%; 167 | } 168 | 169 | .po-lg-11, 170 | .po-visible-lg-11 { 171 | width: 91.66666667%; 172 | } 173 | 174 | .po-lg-12, 175 | .po-visible-lg-12 { 176 | width: 100%; 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /src/css/components/po-accordion/po-accordion-item-header.css: -------------------------------------------------------------------------------- 1 | .po-accordion-item-header { 2 | border-bottom: 1px solid var(--color-neutral-mid-40); 3 | position: relative; 4 | } 5 | 6 | .po-accordion-item { 7 | list-style: none; 8 | } 9 | 10 | .po-accordion-item:is(:first-child) { 11 | border-top: 1px solid var(--color-neutral-mid-40); 12 | } 13 | 14 | .po-accordion-item-header-button { 15 | color: var(--color); 16 | background-color: var(--background-color); 17 | 18 | width: 100%; 19 | height: 100%; 20 | min-height: 44px; 21 | max-width: 100vw; 22 | text-align: left; 23 | display: flex; 24 | 25 | border: none; 26 | padding: var(--spacing-squish-md); 27 | 28 | font-weight: var(--font-accordion-header-font-button, var(--font-weight)); 29 | font-size: var(--font-size); 30 | font-family: var(--font-family); 31 | } 32 | 33 | .po-accordion-item-header-button:hover { 34 | color: var(--color-hover); 35 | background-color: var(--background-hover); 36 | } 37 | 38 | .po-accordion-item-header-button:hover .po-accordion-item-header-icon { 39 | color: var(--color-hover); 40 | } 41 | 42 | .po-accordion-item-header-button:disabled { 43 | background-color: var(--background-disabled); 44 | color: var(--color-disabled); 45 | cursor: not-allowed !important; 46 | border-color: var(--color-disabled); 47 | } 48 | 49 | .po-accordion-item-header-button:disabled .po-accordion-item-header-icon { 50 | color: var(--color-disabled); 51 | } 52 | 53 | .po-accordion-item-header-button:enabled:active { 54 | background-color: var(--background-pressed); 55 | color: var(--color-pressed); 56 | outline: none; 57 | } 58 | 59 | .po-accordion-item-header-button:enabled:active .po-accordion-item-header-icon { 60 | color: var(--color-pressed); 61 | } 62 | 63 | /* outline para compatibilidade com os demais navegadores */ 64 | .po-accordion-item-header-button:focus { 65 | color: var(--color-focus); 66 | 67 | position: relative; 68 | outline-color: var(--outline-color-focused); 69 | outline-width: var(--outline-width); 70 | outline-style: solid; 71 | outline-offset: 2px; 72 | 73 | z-index: 1; 74 | } 75 | 76 | .po-accordion-item-header-button:focus-visible { 77 | outline-width: var(--outline-width-focus-visible); 78 | } 79 | 80 | .po-accordion-item-header-button:focus .po-accordion-item-header-icon { 81 | color: var(--color-focus); 82 | } 83 | 84 | /* remove a borda interna nativa do botão no firefox */ 85 | .po-accordion-item-header-button::-moz-focus-inner { 86 | border: 0; 87 | } 88 | 89 | .po-accordion-item-header-icon { 90 | color: var(--color); 91 | 92 | align-self: center; 93 | font-size: 1.5rem; 94 | transform: rotate(0deg); 95 | transition: all 0.3s cubic-bezier(0.07, 0.88, 0.58, 0.92); 96 | } 97 | 98 | .po-accordion-item-active .po-accordion-item-header-icon { 99 | transform: rotate(180deg); 100 | } 101 | 102 | .po-accordion-item-header-button-content { 103 | align-self: center; 104 | flex: 1; 105 | overflow: hidden; 106 | } 107 | 108 | .po-accordion-item-header-tag { 109 | margin-top: 0.25rem; 110 | display: block; 111 | } 112 | 113 | .po-text-ellipsis.po-accordion-item-header-title { 114 | display: inline-block; 115 | max-width: 100%; 116 | } 117 | --------------------------------------------------------------------------------