From a9bd1e36359081c8bf1a039d6a5eb2c00c2d5707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Sapone?= Date: Fri, 14 Jun 2024 11:27:49 +0200 Subject: [PATCH] Minify CSS + Export default controller --- assets/dist/controller.js | 6 +- assets/dist/styles.css | 1367 ------------------------------------ assets/dist/styles.min.css | 1 + assets/package.json | 2 +- assets/src/controller.ts | 2 +- rollup.config.js | 3 +- 6 files changed, 8 insertions(+), 1373 deletions(-) delete mode 100644 assets/dist/styles.css create mode 100644 assets/dist/styles.min.css diff --git a/assets/dist/controller.js b/assets/dist/controller.js index f463766..db39eeb 100644 --- a/assets/dist/controller.js +++ b/assets/dist/controller.js @@ -56,7 +56,7 @@ class Collapse { } } -class FilemanagerController extends Controller { +class default_1 extends Controller { constructor() { super(...arguments); this.toggleMap = new Map(); @@ -137,6 +137,6 @@ class FilemanagerController extends Controller { this.collapseMap.delete(element); } } -FilemanagerController.targets = ['list', 'card', 'dialog', 'modalAction', 'modalOldValue', 'select', 'dropdown', 'submenu', 'collapse']; +default_1.targets = ['list', 'card', 'dialog', 'modalAction', 'modalOldValue', 'select', 'dropdown', 'submenu', 'collapse']; -export { FilemanagerController }; +export { default_1 as default }; diff --git a/assets/dist/styles.css b/assets/dist/styles.css deleted file mode 100644 index edacbfc..0000000 --- a/assets/dist/styles.css +++ /dev/null @@ -1,1367 +0,0 @@ -:root { - --font-primary: sans-serif; -} - -:root { - --color-neutral-black: #000000; - --color-neutral-black-40: rgba(0, 0, 0, 0.4); - --color-neutral-white: #FFFFFF; - --color-grey-20: #F9FAFB; - --color-grey-50: #F7F8FA; - --color-grey-100: #DEE1E8; - --color-grey-200: #F1F2F5; - --color-grey-300: #EDEEF1; - --color-grey-500: #7F889C; - --color-grey-700: #566071; - --color-grey-900: #333945; - --color-actions-success-50: #EBF7EB; - --color-actions-success-500: #34994C; - --color-actions-success-600: #128438; - --color-actions-success-800: #00591D; - --color-actions-danger-50: #FFEDE8; - --color-actions-danger-600: #E60020; - --color-actions-warning-50: #FFF0E2; - --color-actions-warning-600: #BC5400; - --color-actions-news-50: #ECF5FD; - --color-actions-news-600: #007AB6; - --color-actions-news-100: #D9E8FA; - --color-brand-gradient: linear-gradient(180deg, rgba(193, 0, 34, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%); - --color-brand-eko-gradient: linear-gradient(180deg, rgba(240, 125, 0, 0.4) 0%, rgba(240, 125, 0, 0) 100%); - --color-shadow-mid: 0px 3.5px 5.5px rgba(0, 0, 0, 0.04); - --color-shadow-deep: 0px 4px 13px rgba(0, 0, 0, 0.1); - --color-shadow-soft-down: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02); - --color-shadow-soft-up: 0px -4.5px 5.5px rgba(0, 0, 0, 0.02); - --color-shadow-soft-right: 4px 0px 5.5px rgba(0, 0, 0, 0.02); - --selection: var(--color-neutral-white); - --selection-bg: var(--color-grey-900); - --page-bg: var(--color-neutral-white); - --page-text: var(--color-grey-900); - --link: var(--color-neutral-black); - --link-hover: var(--color-neutral-black); - --border-grey-50: var(--color-grey-50); - --border-grey-100: var(--color-grey-100); - --border-grey-900: var(--color-grey-900); - --border-success-800: var(--color-actions-success-800); - --button-bg: var(--color-actions-success-600); - --button-bg-hover: var(--color-actions-success-800); - --button-label: var(--color-neutral-white); - --button-disabled-label: var(--color-grey-500); - --search-field-bg: var(--color-grey-50); - --search-field-placeholder: var(--color-grey-500); - --toggle-button-border: var(--color-actions-success-600); - --toggle-button-active-bg: var(--color-actions-success-50); - --toggle-button-mob: var(--color-neutral-white); - --card-bg: var(--color-grey-50); - --card-hover-bg: var(--color-grey-200); - --card-active-bg: var(--color-grey-300); - --card-icon-bg: var(--color-grey-100); - --actions-selected-bg: var(--color-grey-200); - --modal-overlay-bg: var(--color-neutral-black-40); - --folder-collapse-active-bg: var(--color-actions-news-50); - --folder-collapse-active: var(--color-actions-news-600); - --folder-collapse-disabled: var(--color-grey-500); - --card-actions-content-bg: var(--color-neutral-white); - --card-actions-button: var(--color-grey-700); - --card-actions-button-bg-hover: var(--color-grey-50); - --field-placeholder: var(--color-grey-500); - --field-error-border: var(--color-actions-danger-600); - --select-current: var(--color-actions-success-800); - --select-list-bg: var(--color-neutral-white); - --select-active-bg: #E7F3EB; - --select-item-hover: var(--color-grey-50); -} - -/* =================================================================== - * MIXINS - * =================================================================*/ -/** - * MIN-WIDTH - */ -/** - * MAX-WIDTH - */ -/** - * MIN-WIDTH and MAX-WIDTH - */ -:root { - --radius-sm: 0.4rem; - --radius-md: 0.8rem; - --radius-lg: 1.2rem; - --radius-full: 36rem; - --transition-in-out: 0.3s ease-in-out; -} - -html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -ms-overflow-style: scrollbar; - -webkit-tap-highlight-color: transparent; -} - -article, aside, dialog, figcaption, figure, footer, header, main, nav, section { - display: block; -} - -body { - margin: 0; - text-align: left; -} - -hr { - box-sizing: content-box; - height: 0.1rem; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; - margin-top: 0; - margin-bottom: 0; -} - -p { - margin: 0; -} - -abbr[title], abbr[data-original-title] { - text-decoration: underline; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; -} - -ol ol, ul ul, ol ul, ul ol { - margin-bottom: 0; -} - -b, strong { - font-weight: 600; -} - -a { - color: inherit; - background-color: transparent; - text-decoration: none; - text-underline-offset: 0.3rem; - -webkit-text-decoration-skip: objects; -} - -a:not([href]):not([tabindex]) { - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus { - outline: 0; -} - -img, -video { - vertical-align: middle; - border-style: none; - max-width: 100%; -} - -svg:not(:root) { - display: block; - overflow: hidden; -} - -button { - margin: 0; - padding: 0; -} - -a, button, [role=button], input:not([type=range]), label, select, summary, textarea { - -ms-touch-action: manipulation; - touch-action: manipulation; -} - -table { - border-collapse: collapse; -} - -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; -} - -label, button, input, select { - cursor: pointer; -} - -label { - display: inline-block; -} - -button { - background: none; - border: 0; - border-radius: 0; - text-underline-offset: 0.3rem; -} - -input, button, select, optgroup, textarea { - border-radius: 0; - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, input { - overflow: visible; -} - -button, select { - text-transform: none; -} - -button, html [type=button], [type=reset], [type=submit] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type=radio], input[type=checkbox] { - box-sizing: border-box; - padding: 0; -} - -input[type=date], input[type=time], input[type=datetime-local], input[type=month] { - -webkit-appearance: listbox; -} - -textarea { - overflow: auto; - resize: vertical; -} - -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } -} -html { - scroll-behavior: smooth; - font-size: 62.5%; -} - -body { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1.6rem; - line-height: 2.4rem; - background-color: var(--page-bg); - height: 100vh; - height: 100svh; - overflow-x: hidden; -} - -.c-layout { - display: grid; - grid-template-columns: 24rem 1fr; - height: 100%; -} -@media (max-width: 767px) { - .c-layout { - grid-template-columns: 1fr; - } -} - -.c-sidebar { - padding: 1.6rem; - border-right: 1px solid var(--border-grey-50); - overflow: auto; - display: flex; -} -.c-sidebar ul { - list-style: none; -} -.c-sidebar > ul { - padding: 0; -} - -.c-content { - overflow: auto; - padding: 1.6rem; - display: flex; - flex-direction: column; - gap: 1.6rem; -} -@media (max-width: 767px) { - .c-content { - padding-top: 0; - gap: 1.2rem; - } -} - -@media (min-width: 768px) { - .c-content__actions { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 1.2rem; - } -} -@media (max-width: 767px) { - .c-content__actions { - display: grid; - grid-template-columns: 1fr 4rem; - grid-gap: 1.6rem; - } -} - -.c-content__buttons { - display: flex; - gap: 0.8rem; -} - -.c-content__cards { - display: flex; - flex-direction: column; - gap: 0.8rem; -} -.c-content__cards--grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 1.6rem; -} -.c-content__cards--grid .c-file-card { - padding: 0.8rem; - grid-template-columns: 1fr 2.4rem; - grid-template-rows: 3.2rem 13.5rem auto; - grid-template-areas: "name action" "img img" "info info"; - grid-gap: 0.8rem; -} -@media (max-width: 767px) { - .c-content__cards--grid .c-file-card { - grid-template-rows: 3.2rem 8rem auto; - } -} -.c-content__cards--grid .c-file-card:has(.c-file-card__input:checked) { - grid-template-columns: 2.8rem 1fr 2.4rem; - grid-template-areas: "activeIcon name action" "img img img" "info info info"; -} -.c-content__cards--grid .c-file-card__picture { - width: 100%; - height: 100%; -} -.c-content__cards--grid .c-file-card__picture svg { - width: 5.2rem; - height: 5.2rem; -} -@media (max-width: 767px) { - .c-content__cards--grid .c-file-card__picture svg { - width: 3.2rem; - height: 3.2rem; - } -} -.c-content__cards--grid .c-file-card__name { - align-self: center; -} -.c-content__cards--grid .c-folder-card { - padding: 0.8rem; - grid-template-columns: 1fr 2.4rem; - grid-template-rows: 3.2rem 13.5rem auto; - grid-template-areas: "name action" "img img" "info info"; - grid-gap: 0.8rem; -} -@media (max-width: 767px) { - .c-content__cards--grid .c-folder-card { - grid-template-rows: 3.2rem 8rem auto; - } -} -.c-content__cards--grid .c-folder-card:has(.c-folder-card__input:checked) { - grid-template-columns: 2.8rem 1fr 2.4rem; - grid-template-areas: "activeIcon name action" "img img img" "info info info"; -} -.c-content__cards--grid .c-folder-card__icon { - display: flex; - justify-content: center; - align-items: center; - height: 100%; -} -.c-content__cards--grid .c-folder-card__icon svg { - width: 5.2rem; - height: 5.2rem; -} -@media (max-width: 767px) { - .c-content__cards--grid .c-folder-card__icon svg { - width: 3.2rem; - height: 3.2rem; - } -} -.c-content__cards--grid .c-folder-card__name { - align-self: center; -} -.c-content__cards--grid .c-file-card__infos { - flex-direction: column; - gap: 0; -} -@media (max-width: 991px) { - .c-content__cards--grid { - grid-template-columns: repeat(2, 1fr); - } -} - -.c-content__sticky-button { - position: fixed; - bottom: 1.6rem; - right: 1.6rem; -} - -.c-button { - padding: 0.8rem 1.4rem; - background-color: var(--button-bg); - color: var(--button-label); - border-radius: var(--radius-md); - transition: background-color var(--transition-in-out); - display: flex; - align-items: center; - gap: 1rem; -} -.c-button:hover { - background-color: var(--button-bg-hover); -} -.c-button:disabled { - background-color: transparent; - box-shadow: 0 0 0 1px var(--border-grey-100); - color: var(--button-disabled-label); - pointer-events: none; -} - -.c-text-xl { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 2rem; - line-height: 2.8rem; -} - -.c-text-l { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1.8rem; - line-height: 2.6rem; -} - -.c-text-m { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1.6rem; - line-height: 2.4rem; -} - -.c-text-s { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1.4rem; - line-height: 2.2rem; -} - -.c-text-xs { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1.2rem; - line-height: 2rem; -} - -.c-text-xxs { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - color: var(--page-text); - font-size: 1rem; - line-height: 1.2rem; -} - -.c-search-field { - width: 27rem; - position: relative; -} -@media (max-width: 767px) { - .c-search-field { - width: 100%; - } -} -.c-search-field > svg { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 1.6rem; -} - -.c-search-field__input { - padding: 0.8rem 1.6rem 0.8rem 4.4rem; - width: 100%; - outline: none; - border: 0; - background-color: var(--search-field-bg); - border-radius: var(--radius-md); -} -.c-search-field__input::placeholder { - color: var(--search-field-placeholder); -} - -.c-toggle-buttons { - border-radius: var(--radius-md); - overflow: hidden; - border: 1px solid var(--toggle-button-border); -} -@media (max-width: 767px) { - .c-toggle-buttons { - border: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--button-bg); - } -} -.c-toggle-buttons button { - padding: 1rem; -} -@media (max-width: 767px) { - .c-toggle-buttons button { - padding: 0; - } - .c-toggle-buttons button svg path { - stroke: var(--toggle-button-mob); - } -} - -.c-toggle-buttons__action { - transition: background-color var(--transition-in-out); -} - -.c-toggle-buttons__action--active { - background-color: var(--toggle-button-active-bg); -} -@media (max-width: 767px) { - .c-toggle-buttons__action--active { - display: none; - } -} - -.c-folder-card { - padding: 0.8rem 1.6rem 0.8rem 0.8rem; - background-color: var(--card-bg); - border-radius: var(--radius-sm); - position: relative; - transition: background-color var(--transition-in-out); - display: grid; - grid-template-areas: "img name action" "img info action"; - grid-gap: 0 1.6rem; - grid-template-columns: 5.6rem 1fr 2.4rem; -} -.c-folder-card:hover { - background-color: var(--card-hover-bg); -} -.c-folder-card:has(.c-folder-card__input:checked) { - background-color: var(--card-active-bg); -} -.c-folder-card:has(.c-folder-card__input:checked) { - grid-template-columns: 2.8rem 5.6rem 1fr 2.4rem; - grid-template-areas: "activeIcon img name action" "activeIcon img info action"; -} -.c-folder-card:has(.c-folder-card__input:checked) .c-folder-card__active-icon { - display: flex; -} -.c-folder-card:has(.c-folder-card__input:checked) .c-folder-card__action { - pointer-events: none; - opacity: 0.5; -} - -.c-folder-card__input { - display: none; - opacity: 0; - position: absolute; - inset: 0; -} - -.c-folder-card__link { - opacity: 0; - position: absolute; - inset: 0; -} - -.c-folder-card__active-icon { - display: none; - padding-left: 0.8rem; - grid-area: activeIcon; - align-items: center; -} - -.c-folder-card__infos { - display: flex; - align-items: center; - gap: 1.6rem; -} - -.c-folder-card__icon { - padding: 1.2rem; - background-color: var(--card-icon-bg); - border-radius: var(--radius-lg); - grid-area: img; -} - -.c-folder-card__name { - grid-area: name; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - align-self: end; -} - -.c-folder-card__number { - grid-area: info; -} - -.c-folder-card__action { - position: relative; - display: flex; - align-items: center; - justify-content: end; - grid-area: action; - transition: opacity var(--transition-in-out); -} - -.c-file-card { - padding: 0.8rem 1.6rem 0.8rem 0.8rem; - background-color: var(--card-bg); - border-radius: var(--radius-sm); - position: relative; - transition: background-color var(--transition-in-out); - display: grid; - grid-template-areas: "img name action" "img info action"; - grid-gap: 0 1.6rem; - grid-template-columns: 5.6rem 1fr 2.4rem; -} -.c-file-card:hover { - background-color: var(--card-hover-bg); -} -.c-file-card:has(.c-file-card__input:checked) { - background-color: var(--card-active-bg); -} -.c-file-card:has(.c-file-card__input:checked) { - grid-template-columns: 2.8rem 5.6rem 1fr 2.4rem; - grid-template-areas: "activeIcon img name action" "activeIcon img info action"; -} -.c-file-card:has(.c-file-card__input:checked) .c-file-card__active-icon { - display: flex; -} -.c-file-card:has(.c-file-card__input:checked) .c-file-card__action { - pointer-events: none; - opacity: 0.5; -} - -.c-file-card__input { - display: none; - opacity: 0; - position: absolute; - inset: 0; -} - -.c-file-card__link { - opacity: 0; - position: absolute; - inset: 0; -} - -.c-file-card__active-icon { - display: none; - padding-left: 0.8rem; - grid-area: activeIcon; - align-items: center; -} - -.c-file-card__infos { - display: flex; - align-items: center; - gap: 1.6rem; -} - -.c-file-card__picture { - width: 5.6rem; - height: 5.6rem; - background-color: var(--card-icon-bg); - border-radius: var(--radius-sm); - grid-area: img; - margin: auto 0; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} -.c-file-card__picture svg { - width: 3.2rem; - height: 3.2rem; -} -.c-file-card__picture img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.c-file-card__name { - grid-area: name; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - align-self: end; -} - -.c-file-card__infos { - grid-area: info; - display: flex; - flex-wrap: wrap; - align-items: start; - gap: 0.8rem; -} - -.c-file-card__action { - position: relative; - display: flex; - align-items: center; - justify-content: end; - grid-area: action; - transition: opacity var(--transition-in-out); -} - -.c-actions-selected { - padding: 0.8rem 1.6rem; - background-color: var(--actions-selected-bg); - border-radius: var(--radius-full); - display: flex; - align-items: center; -} -@media (max-width: 767px) { - .c-actions-selected { - justify-content: space-between; - } -} - -.c-actions-selected__head { - display: flex; - align-items: center; - overflow: hidden; -} - -.c-actions-selected__info { - margin: 0 2.4rem 0 1rem; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.c-actions-selected__actions { - display: flex; - align-items: center; - gap: 1.6rem; -} -@media (max-width: 767px) { - .c-actions-selected__actions { - gap: 2.4rem; - } -} - -.c-back { - display: flex; - align-items: center; - gap: 0.8rem; - border-bottom: 1px solid var(--border-grey-50); - margin-right: -1.6rem; - margin-left: -1.6rem; - padding: 1.6rem; - position: relative; -} - -.c-back__action::after { - content: ""; - display: block; - position: absolute; - inset: 0; -} - -.c-modal { - transform: scale(0.95); - border: 0; - padding: 2rem; - border-radius: var(--radius-md); - display: flex; - flex-direction: column; - transition: opacity var(--transition-in-out), transform var(--transition-in-out); - opacity: 0; - pointer-events: none; -} -.c-modal > p { - text-align: center; - margin-bottom: 1.6rem; -} - -.c-modal--open { - opacity: 1; - pointer-events: all; - transform: scale(1); -} - -.c-modal--md { - width: 33rem; -} -@media (max-width: 767px) { - .c-modal--md { - width: calc(100% - 3.2rem); - } -} - -.c-modal--lg { - width: 68.6rem; -} -@media (max-width: 767px) { - .c-modal--lg { - width: calc(100% - 3.2rem); - } -} - -.c-modal__close { - position: absolute; - top: 1.6rem; - right: 1.6rem; -} - -.c-modal__content { - max-height: 29rem; - overflow: auto; -} -.c-modal__content ul { - list-style: none; -} -.c-modal__content > ul { - padding: 0; -} -.c-modal__content .c-collapse__content, -.c-modal__content .c-collapse__head { - width: 100%; -} - -.c-modal__content--with-border { - border-radius: var(--radius-md); - border: 1px solid var(--border-grey-100); - padding: 1.6rem; -} - -.c-modal__actions { - display: flex; - align-items: center; - margin-top: 3.2rem; - gap: 2.4rem; - justify-content: end; -} - -.c-submenu { - background-color: var(--modal-overlay-bg); - position: fixed; - inset: 0; - display: flex; - align-items: end; - transition: opacity var(--transition-in-out); - opacity: 0; - pointer-events: none; -} -.c-submenu.is-active { - opacity: 1; - pointer-events: all; -} -.c-submenu.is-active .c-submenu__content { - transform: translateY(0); -} - -.c-submenu__content { - position: relative; - padding: 2.4rem 1.6rem; - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - background-color: var(--color-neutral-white); - width: 100%; - transition: transform var(--transition-in-out); - transform: translateY(100%); -} -.c-submenu__content ul { - list-style: none; - padding: 0; -} - -.c-submenu__item { - display: flex; - align-items: center; - gap: 1.6rem; - padding: 0.8rem 1.2rem; -} - -.c-submenu__button svg { - border: 1px solid var(--border-grey-100); - border-radius: 50%; - padding: 1rem; - width: 4rem; - height: 4rem; -} - -.c-collapse[data-visible=true] > .c-collapse__head .c-collapse__arrow { - transform: rotate(90deg); -} -.c-collapse[data-visible=false] > .c-collapse__head .c-collapse__arrow { - transform: rotate(0deg) !important; -} - -.c-collapse__openable { - margin-left: -2.3rem; -} - -.c-collapse__head { - display: flex; - align-items: center; - gap: 0.9rem; - padding: 0.4rem 0.8rem; - border-radius: var(--radius-sm); - transition: background-color var(--transition-in-out); - width: fit-content; -} -.c-collapse__head button { - transition: color var(--transition-in-out); -} -.c-collapse__head svg path { - transition: stroke var(--transition-in-out); -} -.c-collapse__head:not(.c-collapse__head--first) { - margin-bottom: 0.8rem; -} - -.c-collapse__head--first { - margin-bottom: 1rem; -} - -.c-collapse__head--active { - background-color: var(--folder-collapse-active-bg); -} -.c-collapse__head--active button { - color: var(--folder-collapse-active); -} -.c-collapse__head--active svg path { - stroke: var(--folder-collapse-active); -} - -.c-collapse__head--disabled .c-collapse__action { - color: var(--folder-collapse-disabled); -} - -.c-collapse > .c-collapse__wrapper { - position: relative; - overflow: hidden; - display: none; -} - -.c-collapse[data-visible=true] > .c-collapse__wrapper { - display: block; -} - -.c-collapse__content { - display: inline-block; -} - -.c-collapse__action { - display: flex; - align-items: center; - gap: 0.4rem; -} - -.c-card-actions { - position: relative; - display: flex; - align-items: center; - align-self: center; - justify-content: end; - height: fit-content; - grid-area: action; - z-index: 1; - transition: opacity var(--transition-in-out); -} - -.c-card-actions__content { - position: absolute; - background-color: var(--card-actions-content-bg); - top: 0; - right: 100%; - opacity: 0; - pointer-events: none; - transition: opacity var(--transition-in-out); - border-radius: var(--radius-md); - padding: 0.8rem 2rem 0.8rem 0.8rem; - box-shadow: var(--color-shadow-deep); -} -.c-card-actions__content > button { - padding: 0.9rem 1.2rem; - color: var(--card-actions-button); - border-radius: var(--radius-sm); - display: flex; - align-items: center; - gap: 1.6rem; - transition: background-color var(--transition-in-out); - width: 100%; -} -.c-card-actions__content > button:hover { - background-color: var(--card-actions-button-bg-hover); -} -.c-card-actions__content.is-active { - pointer-events: all; - opacity: 1; -} - -.c-field__wrapper { - position: relative; -} - -.c-field__input { - width: 100%; - outline: none; - border: 1px solid var(--border-grey-100); - padding: 0.9rem 4rem 0.9rem 1.6rem; - border-radius: var(--radius-md); -} -.c-field__input:not(.c-field__input--error):focus { - border-color: var(--border-grey-900); -} -.c-field__input::placeholder { - color: var(--field-placeholder); -} - -.c-field__input--error { - border-color: var(--field-error-border); -} - -.c-field__icon { - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 1.6rem; -} - -.c-custom-select { - position: relative; -} - -.c-custom-select__input-wrapper { - cursor: pointer; - padding: 0.8rem 1.4rem 0.8rem 1.6rem; - border-radius: var(--radius-md); - border: 1px solid var(--border-success-800); - transition: background-color var(--transition-in-out); -} -.c-custom-select__input-wrapper:hover { - background-color: var(--select-active-bg); -} - -.c-custom-select__input { - position: absolute; - height: 0; - width: 0; - border: 0; - padding: 0; -} - -.c-custom-select__current-wrapper { - display: flex; - align-items: center; - gap: 1rem; -} - -.c-custom-select__icon { - display: flex; - align-items: center; - justify-content: center; - transform: rotate(180deg); -} -@media (min-width: 768px) { - .c-custom-select__icon { - width: 2.4rem; - height: 2.4rem; - } -} -@media (max-width: 767px) { - .c-custom-select__icon { - width: 1.6rem; - height: 1.6rem; - } -} - -.c-custom-select__list-wrapper { - display: none; - background-color: var(--select-list-bg); - border: 1px solid var(--border-grey-100); - flex-direction: column; - border-radius: var(--radius-md); - padding: 0.8rem; - max-height: 22rem; - position: absolute; - top: calc(100% + 0.8rem); - z-index: 5; - box-shadow: var(--color-shadow-deep); - gap: 0.4rem; - width: max-content; - right: 0; -} -.c-custom-select__list-wrapper.is-active { - display: flex; -} - -.c-custom-select__list { - width: 100%; - margin: 0; - padding: 0; - list-style: none; -} - -.c-custom-select__item { - padding: 0.9rem 4.5rem 0.9rem 1.2rem; - transition: background-color var(--transition-in-out); - border-radius: var(--radius-sm); -} -.c-custom-select__item:hover { - background-color: var(--select-item-hover); -} - -.c-custom-select__item > button { - display: flex; - align-items: center; - gap: 1rem; - width: 100%; -} -@media (min-width: 768px) { - .c-custom-select__item > button svg { - width: 1.8rem; - height: 1.8rem; - } -} -@media (max-width: 767px) { - .c-custom-select__item > button svg { - width: 1rem; - height: 1rem; - } -} - -.u-color-neutral-black { - color: #000000; -} - -.u-color-neutral-black-40 { - color: rgba(0, 0, 0, 0.4); -} - -.u-color-neutral-white { - color: #FFFFFF; -} - -.u-color-grey-20 { - color: #F9FAFB; -} - -.u-color-grey-50 { - color: #F7F8FA; -} - -.u-color-grey-100 { - color: #DEE1E8; -} - -.u-color-grey-200 { - color: #F1F2F5; -} - -.u-color-grey-300 { - color: #EDEEF1; -} - -.u-color-grey-500 { - color: #7F889C; -} - -.u-color-grey-700 { - color: #566071; -} - -.u-color-grey-900 { - color: #333945; -} - -.u-color-actions-success-50 { - color: #EBF7EB; -} - -.u-color-actions-success-500 { - color: #34994C; -} - -.u-color-actions-success-600 { - color: #128438; -} - -.u-color-actions-success-800 { - color: #00591D; -} - -.u-color-actions-danger-50 { - color: #FFEDE8; -} - -.u-color-actions-danger-600 { - color: #E60020; -} - -.u-color-actions-warning-50 { - color: #FFF0E2; -} - -.u-color-actions-warning-600 { - color: #BC5400; -} - -.u-color-actions-news-50 { - color: #ECF5FD; -} - -.u-color-actions-news-600 { - color: #007AB6; -} - -.u-color-actions-news-100 { - color: #D9E8FA; -} - -.u-fw-700 { - font-weight: 700; -} - -.u-fw-600 { - font-weight: 600; -} - -.u-fw-400 { - font-weight: 400; -} - -.u-fw-500 { - font-weight: 500; -} - -.u-sr-only { - border: 0; - clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem); - clip-path: inset(50%); - height: 0.1rem; - overflow: hidden; - padding: 0; - position: absolute; - width: 0.1rem; - white-space: nowrap; -} - -.u-hidden { - display: none !important; -} - -@media (min-width: 320px) { - .u-hidden\@from-xs { - display: none !important; - } -} -@media (max-width: 319px) { - .u-hidden\@until-xs { - display: none !important; - } -} -@media (min-width: 565px) { - .u-hidden\@from-sm { - display: none !important; - } -} -@media (max-width: 564px) { - .u-hidden\@until-sm { - display: none !important; - } -} -@media (min-width: 768px) { - .u-hidden\@from-md { - display: none !important; - } -} -@media (max-width: 767px) { - .u-hidden\@until-md { - display: none !important; - } -} -@media (min-width: 992px) { - .u-hidden\@from-lg { - display: none !important; - } -} -@media (max-width: 991px) { - .u-hidden\@until-lg { - display: none !important; - } -} -@media (min-width: 1200px) { - .u-hidden\@from-xl { - display: none !important; - } -} -@media (max-width: 1199px) { - .u-hidden\@until-xl { - display: none !important; - } -} -@media (min-width: 1600px) { - .u-hidden\@from-xxl { - display: none !important; - } -} -@media (max-width: 1599px) { - .u-hidden\@until-xxl { - display: none !important; - } -} -.u-overflow-hidden { - overflow: hidden; -} \ No newline at end of file diff --git a/assets/dist/styles.min.css b/assets/dist/styles.min.css new file mode 100644 index 0000000..5a5b99e --- /dev/null +++ b/assets/dist/styles.min.css @@ -0,0 +1 @@ +:root{--font-primary: sans-serif}:root{--color-neutral-black: #000000;--color-neutral-black-40: rgba(0, 0, 0, 0.4);--color-neutral-white: #FFFFFF;--color-grey-20: #F9FAFB;--color-grey-50: #F7F8FA;--color-grey-100: #DEE1E8;--color-grey-200: #F1F2F5;--color-grey-300: #EDEEF1;--color-grey-500: #7F889C;--color-grey-700: #566071;--color-grey-900: #333945;--color-actions-success-50: #EBF7EB;--color-actions-success-500: #34994C;--color-actions-success-600: #128438;--color-actions-success-800: #00591D;--color-actions-danger-50: #FFEDE8;--color-actions-danger-600: #E60020;--color-actions-warning-50: #FFF0E2;--color-actions-warning-600: #BC5400;--color-actions-news-50: #ECF5FD;--color-actions-news-600: #007AB6;--color-actions-news-100: #D9E8FA;--color-brand-gradient: linear-gradient(180deg, rgba(193, 0, 34, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%);--color-brand-eko-gradient: linear-gradient(180deg, rgba(240, 125, 0, 0.4) 0%, rgba(240, 125, 0, 0) 100%);--color-shadow-mid: 0px 3.5px 5.5px rgba(0, 0, 0, 0.04);--color-shadow-deep: 0px 4px 13px rgba(0, 0, 0, 0.1);--color-shadow-soft-down: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);--color-shadow-soft-up: 0px -4.5px 5.5px rgba(0, 0, 0, 0.02);--color-shadow-soft-right: 4px 0px 5.5px rgba(0, 0, 0, 0.02);--selection: var(--color-neutral-white);--selection-bg: var(--color-grey-900);--page-bg: var(--color-neutral-white);--page-text: var(--color-grey-900);--link: var(--color-neutral-black);--link-hover: var(--color-neutral-black);--border-grey-50: var(--color-grey-50);--border-grey-100: var(--color-grey-100);--border-grey-900: var(--color-grey-900);--border-success-800: var(--color-actions-success-800);--button-bg: var(--color-actions-success-600);--button-bg-hover: var(--color-actions-success-800);--button-label: var(--color-neutral-white);--button-disabled-label: var(--color-grey-500);--search-field-bg: var(--color-grey-50);--search-field-placeholder: var(--color-grey-500);--toggle-button-border: var(--color-actions-success-600);--toggle-button-active-bg: var(--color-actions-success-50);--toggle-button-mob: var(--color-neutral-white);--card-bg: var(--color-grey-50);--card-hover-bg: var(--color-grey-200);--card-active-bg: var(--color-grey-300);--card-icon-bg: var(--color-grey-100);--actions-selected-bg: var(--color-grey-200);--modal-overlay-bg: var(--color-neutral-black-40);--folder-collapse-active-bg: var(--color-actions-news-50);--folder-collapse-active: var(--color-actions-news-600);--folder-collapse-disabled: var(--color-grey-500);--card-actions-content-bg: var(--color-neutral-white);--card-actions-button: var(--color-grey-700);--card-actions-button-bg-hover: var(--color-grey-50);--field-placeholder: var(--color-grey-500);--field-error-border: var(--color-actions-danger-600);--select-current: var(--color-actions-success-800);--select-list-bg: var(--color-neutral-white);--select-active-bg: #E7F3EB;--select-item-hover: var(--color-grey-50)}:root{--radius-sm: 0.4rem;--radius-md: 0.8rem;--radius-lg: 1.2rem;--radius-full: 36rem;--transition-in-out: 0.3s ease-in-out}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,dialog,figcaption,figure,footer,header,main,nav,section{display:block}body{margin:0;text-align:left}hr{box-sizing:content-box;height:.1rem;overflow:visible}h1,h2,h3,h4,h5,h6{font-weight:normal;margin-top:0;margin-bottom:0}p{margin:0}abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}b,strong{font-weight:600}a{color:inherit;background-color:rgba(0,0,0,0);text-decoration:none;text-underline-offset:.3rem;-webkit-text-decoration-skip:objects}a:not([href]):not([tabindex]){text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}img,video{vertical-align:middle;border-style:none;max-width:100%}svg:not(:root){display:block;overflow:hidden}button{margin:0;padding:0}a,button,[role=button],input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}label,button,input,select{cursor:pointer}label{display:inline-block}button{background:none;border:0;border-radius:0;text-underline-offset:.3rem}input,button,select,optgroup,textarea{border-radius:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}*,*::before,*::after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}html{scroll-behavior:smooth;font-size:62.5%}body{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1.6rem;line-height:2.4rem;background-color:var(--page-bg);height:100vh;height:100svh;overflow-x:hidden}.c-layout{display:grid;grid-template-columns:24rem 1fr;height:100%}@media(max-width: 767px){.c-layout{grid-template-columns:1fr}}.c-sidebar{padding:1.6rem;border-right:1px solid var(--border-grey-50);overflow:auto;display:flex}.c-sidebar ul{list-style:none}.c-sidebar>ul{padding:0}.c-content{overflow:auto;padding:1.6rem;display:flex;flex-direction:column;gap:1.6rem}@media(max-width: 767px){.c-content{padding-top:0;gap:1.2rem}}@media(min-width: 768px){.c-content__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}}@media(max-width: 767px){.c-content__actions{display:grid;grid-template-columns:1fr 4rem;grid-gap:1.6rem}}.c-content__buttons{display:flex;gap:.8rem}.c-content__cards{display:flex;flex-direction:column;gap:.8rem}.c-content__cards--grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:1.6rem}.c-content__cards--grid .c-file-card{padding:.8rem;grid-template-columns:1fr 2.4rem;grid-template-rows:3.2rem 13.5rem auto;grid-template-areas:"name action" "img img" "info info";grid-gap:.8rem}@media(max-width: 767px){.c-content__cards--grid .c-file-card{grid-template-rows:3.2rem 8rem auto}}.c-content__cards--grid .c-file-card:has(.c-file-card__input:checked){grid-template-columns:2.8rem 1fr 2.4rem;grid-template-areas:"activeIcon name action" "img img img" "info info info"}.c-content__cards--grid .c-file-card__picture{width:100%;height:100%}.c-content__cards--grid .c-file-card__picture svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.c-content__cards--grid .c-file-card__picture svg{width:3.2rem;height:3.2rem}}.c-content__cards--grid .c-file-card__name{align-self:center}.c-content__cards--grid .c-folder-card{padding:.8rem;grid-template-columns:1fr 2.4rem;grid-template-rows:3.2rem 13.5rem auto;grid-template-areas:"name action" "img img" "info info";grid-gap:.8rem}@media(max-width: 767px){.c-content__cards--grid .c-folder-card{grid-template-rows:3.2rem 8rem auto}}.c-content__cards--grid .c-folder-card:has(.c-folder-card__input:checked){grid-template-columns:2.8rem 1fr 2.4rem;grid-template-areas:"activeIcon name action" "img img img" "info info info"}.c-content__cards--grid .c-folder-card__icon{display:flex;justify-content:center;align-items:center;height:100%}.c-content__cards--grid .c-folder-card__icon svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.c-content__cards--grid .c-folder-card__icon svg{width:3.2rem;height:3.2rem}}.c-content__cards--grid .c-folder-card__name{align-self:center}.c-content__cards--grid .c-file-card__infos{flex-direction:column;gap:0}@media(max-width: 991px){.c-content__cards--grid{grid-template-columns:repeat(2, 1fr)}}.c-content__sticky-button{position:fixed;bottom:1.6rem;right:1.6rem}.c-button{padding:.8rem 1.4rem;background-color:var(--button-bg);color:var(--button-label);border-radius:var(--radius-md);transition:background-color var(--transition-in-out);display:flex;align-items:center;gap:1rem}.c-button:hover{background-color:var(--button-bg-hover)}.c-button:disabled{background-color:rgba(0,0,0,0);box-shadow:0 0 0 1px var(--border-grey-100);color:var(--button-disabled-label);pointer-events:none}.c-text-xl{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:2rem;line-height:2.8rem}.c-text-l{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1.8rem;line-height:2.6rem}.c-text-m{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1.6rem;line-height:2.4rem}.c-text-s{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1.4rem;line-height:2.2rem}.c-text-xs{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1.2rem;line-height:2rem}.c-text-xxs{font-family:var(--font-primary);font-style:normal;font-weight:400;color:var(--page-text);font-size:1rem;line-height:1.2rem}.c-search-field{width:27rem;position:relative}@media(max-width: 767px){.c-search-field{width:100%}}.c-search-field>svg{position:absolute;top:50%;transform:translateY(-50%);left:1.6rem}.c-search-field__input{padding:.8rem 1.6rem .8rem 4.4rem;width:100%;outline:none;border:0;background-color:var(--search-field-bg);border-radius:var(--radius-md)}.c-search-field__input::placeholder{color:var(--search-field-placeholder)}.c-toggle-buttons{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--toggle-button-border)}@media(max-width: 767px){.c-toggle-buttons{border:0;display:flex;align-items:center;justify-content:center;background-color:var(--button-bg)}}.c-toggle-buttons button{padding:1rem}@media(max-width: 767px){.c-toggle-buttons button{padding:0}.c-toggle-buttons button svg path{stroke:var(--toggle-button-mob)}}.c-toggle-buttons__action{transition:background-color var(--transition-in-out)}.c-toggle-buttons__action--active{background-color:var(--toggle-button-active-bg)}@media(max-width: 767px){.c-toggle-buttons__action--active{display:none}}.c-folder-card{padding:.8rem 1.6rem .8rem .8rem;background-color:var(--card-bg);border-radius:var(--radius-sm);position:relative;transition:background-color var(--transition-in-out);display:grid;grid-template-areas:"img name action" "img info action";grid-gap:0 1.6rem;grid-template-columns:5.6rem 1fr 2.4rem}.c-folder-card:hover{background-color:var(--card-hover-bg)}.c-folder-card:has(.c-folder-card__input:checked){background-color:var(--card-active-bg)}.c-folder-card:has(.c-folder-card__input:checked){grid-template-columns:2.8rem 5.6rem 1fr 2.4rem;grid-template-areas:"activeIcon img name action" "activeIcon img info action"}.c-folder-card:has(.c-folder-card__input:checked) .c-folder-card__active-icon{display:flex}.c-folder-card:has(.c-folder-card__input:checked) .c-folder-card__action{pointer-events:none;opacity:.5}.c-folder-card__input{display:none;opacity:0;position:absolute;inset:0}.c-folder-card__link{opacity:0;position:absolute;inset:0}.c-folder-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.c-folder-card__infos{display:flex;align-items:center;gap:1.6rem}.c-folder-card__icon{padding:1.2rem;background-color:var(--card-icon-bg);border-radius:var(--radius-lg);grid-area:img}.c-folder-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.c-folder-card__number{grid-area:info}.c-folder-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.c-file-card{padding:.8rem 1.6rem .8rem .8rem;background-color:var(--card-bg);border-radius:var(--radius-sm);position:relative;transition:background-color var(--transition-in-out);display:grid;grid-template-areas:"img name action" "img info action";grid-gap:0 1.6rem;grid-template-columns:5.6rem 1fr 2.4rem}.c-file-card:hover{background-color:var(--card-hover-bg)}.c-file-card:has(.c-file-card__input:checked){background-color:var(--card-active-bg)}.c-file-card:has(.c-file-card__input:checked){grid-template-columns:2.8rem 5.6rem 1fr 2.4rem;grid-template-areas:"activeIcon img name action" "activeIcon img info action"}.c-file-card:has(.c-file-card__input:checked) .c-file-card__active-icon{display:flex}.c-file-card:has(.c-file-card__input:checked) .c-file-card__action{pointer-events:none;opacity:.5}.c-file-card__input{display:none;opacity:0;position:absolute;inset:0}.c-file-card__link{opacity:0;position:absolute;inset:0}.c-file-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.c-file-card__infos{display:flex;align-items:center;gap:1.6rem}.c-file-card__picture{width:5.6rem;height:5.6rem;background-color:var(--card-icon-bg);border-radius:var(--radius-sm);grid-area:img;margin:auto 0;overflow:hidden;display:flex;align-items:center;justify-content:center}.c-file-card__picture svg{width:3.2rem;height:3.2rem}.c-file-card__picture img{width:100%;height:100%;object-fit:cover}.c-file-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.c-file-card__infos{grid-area:info;display:flex;flex-wrap:wrap;align-items:start;gap:.8rem}.c-file-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.c-actions-selected{padding:.8rem 1.6rem;background-color:var(--actions-selected-bg);border-radius:var(--radius-full);display:flex;align-items:center}@media(max-width: 767px){.c-actions-selected{justify-content:space-between}}.c-actions-selected__head{display:flex;align-items:center;overflow:hidden}.c-actions-selected__info{margin:0 2.4rem 0 1rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.c-actions-selected__actions{display:flex;align-items:center;gap:1.6rem}@media(max-width: 767px){.c-actions-selected__actions{gap:2.4rem}}.c-back{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--border-grey-50);margin-right:-1.6rem;margin-left:-1.6rem;padding:1.6rem;position:relative}.c-back__action::after{content:"";display:block;position:absolute;inset:0}.c-modal{transform:scale(0.95);border:0;padding:2rem;border-radius:var(--radius-md);display:flex;flex-direction:column;transition:opacity var(--transition-in-out),transform var(--transition-in-out);opacity:0;pointer-events:none}.c-modal>p{text-align:center;margin-bottom:1.6rem}.c-modal--open{opacity:1;pointer-events:all;transform:scale(1)}.c-modal--md{width:33rem}@media(max-width: 767px){.c-modal--md{width:calc(100% - 3.2rem)}}.c-modal--lg{width:68.6rem}@media(max-width: 767px){.c-modal--lg{width:calc(100% - 3.2rem)}}.c-modal__close{position:absolute;top:1.6rem;right:1.6rem}.c-modal__content{max-height:29rem;overflow:auto}.c-modal__content ul{list-style:none}.c-modal__content>ul{padding:0}.c-modal__content .c-collapse__content,.c-modal__content .c-collapse__head{width:100%}.c-modal__content--with-border{border-radius:var(--radius-md);border:1px solid var(--border-grey-100);padding:1.6rem}.c-modal__actions{display:flex;align-items:center;margin-top:3.2rem;gap:2.4rem;justify-content:end}.c-submenu{background-color:var(--modal-overlay-bg);position:fixed;inset:0;display:flex;align-items:end;transition:opacity var(--transition-in-out);opacity:0;pointer-events:none}.c-submenu.is-active{opacity:1;pointer-events:all}.c-submenu.is-active .c-submenu__content{transform:translateY(0)}.c-submenu__content{position:relative;padding:2.4rem 1.6rem;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background-color:var(--color-neutral-white);width:100%;transition:transform var(--transition-in-out);transform:translateY(100%)}.c-submenu__content ul{list-style:none;padding:0}.c-submenu__item{display:flex;align-items:center;gap:1.6rem;padding:.8rem 1.2rem}.c-submenu__button svg{border:1px solid var(--border-grey-100);border-radius:50%;padding:1rem;width:4rem;height:4rem}.c-collapse[data-visible=true]>.c-collapse__head .c-collapse__arrow{transform:rotate(90deg)}.c-collapse[data-visible=false]>.c-collapse__head .c-collapse__arrow{transform:rotate(0deg) !important}.c-collapse__openable{margin-left:-2.3rem}.c-collapse__head{display:flex;align-items:center;gap:.9rem;padding:.4rem .8rem;border-radius:var(--radius-sm);transition:background-color var(--transition-in-out);width:fit-content}.c-collapse__head button{transition:color var(--transition-in-out)}.c-collapse__head svg path{transition:stroke var(--transition-in-out)}.c-collapse__head:not(.c-collapse__head--first){margin-bottom:.8rem}.c-collapse__head--first{margin-bottom:1rem}.c-collapse__head--active{background-color:var(--folder-collapse-active-bg)}.c-collapse__head--active button{color:var(--folder-collapse-active)}.c-collapse__head--active svg path{stroke:var(--folder-collapse-active)}.c-collapse__head--disabled .c-collapse__action{color:var(--folder-collapse-disabled)}.c-collapse>.c-collapse__wrapper{position:relative;overflow:hidden;display:none}.c-collapse[data-visible=true]>.c-collapse__wrapper{display:block}.c-collapse__content{display:inline-block}.c-collapse__action{display:flex;align-items:center;gap:.4rem}.c-card-actions{position:relative;display:flex;align-items:center;align-self:center;justify-content:end;height:fit-content;grid-area:action;z-index:1;transition:opacity var(--transition-in-out)}.c-card-actions__content{position:absolute;background-color:var(--card-actions-content-bg);top:0;right:100%;opacity:0;pointer-events:none;transition:opacity var(--transition-in-out);border-radius:var(--radius-md);padding:.8rem 2rem .8rem .8rem;box-shadow:var(--color-shadow-deep)}.c-card-actions__content>button{padding:.9rem 1.2rem;color:var(--card-actions-button);border-radius:var(--radius-sm);display:flex;align-items:center;gap:1.6rem;transition:background-color var(--transition-in-out);width:100%}.c-card-actions__content>button:hover{background-color:var(--card-actions-button-bg-hover)}.c-card-actions__content.is-active{pointer-events:all;opacity:1}.c-field__wrapper{position:relative}.c-field__input{width:100%;outline:none;border:1px solid var(--border-grey-100);padding:.9rem 4rem .9rem 1.6rem;border-radius:var(--radius-md)}.c-field__input:not(.c-field__input--error):focus{border-color:var(--border-grey-900)}.c-field__input::placeholder{color:var(--field-placeholder)}.c-field__input--error{border-color:var(--field-error-border)}.c-field__icon{position:absolute;top:50%;transform:translateY(-50%);right:1.6rem}.c-custom-select{position:relative}.c-custom-select__input-wrapper{cursor:pointer;padding:.8rem 1.4rem .8rem 1.6rem;border-radius:var(--radius-md);border:1px solid var(--border-success-800);transition:background-color var(--transition-in-out)}.c-custom-select__input-wrapper:hover{background-color:var(--select-active-bg)}.c-custom-select__input{position:absolute;height:0;width:0;border:0;padding:0}.c-custom-select__current-wrapper{display:flex;align-items:center;gap:1rem}.c-custom-select__icon{display:flex;align-items:center;justify-content:center;transform:rotate(180deg)}@media(min-width: 768px){.c-custom-select__icon{width:2.4rem;height:2.4rem}}@media(max-width: 767px){.c-custom-select__icon{width:1.6rem;height:1.6rem}}.c-custom-select__list-wrapper{display:none;background-color:var(--select-list-bg);border:1px solid var(--border-grey-100);flex-direction:column;border-radius:var(--radius-md);padding:.8rem;max-height:22rem;position:absolute;top:calc(100% + .8rem);z-index:5;box-shadow:var(--color-shadow-deep);gap:.4rem;width:max-content;right:0}.c-custom-select__list-wrapper.is-active{display:flex}.c-custom-select__list{width:100%;margin:0;padding:0;list-style:none}.c-custom-select__item{padding:.9rem 4.5rem .9rem 1.2rem;transition:background-color var(--transition-in-out);border-radius:var(--radius-sm)}.c-custom-select__item:hover{background-color:var(--select-item-hover)}.c-custom-select__item>button{display:flex;align-items:center;gap:1rem;width:100%}@media(min-width: 768px){.c-custom-select__item>button svg{width:1.8rem;height:1.8rem}}@media(max-width: 767px){.c-custom-select__item>button svg{width:1rem;height:1rem}}.u-color-neutral-black{color:#000000}.u-color-neutral-black-40{color:rgba(0, 0, 0, 0.4)}.u-color-neutral-white{color:#FFFFFF}.u-color-grey-20{color:#F9FAFB}.u-color-grey-50{color:#F7F8FA}.u-color-grey-100{color:#DEE1E8}.u-color-grey-200{color:#F1F2F5}.u-color-grey-300{color:#EDEEF1}.u-color-grey-500{color:#7F889C}.u-color-grey-700{color:#566071}.u-color-grey-900{color:#333945}.u-color-actions-success-50{color:#EBF7EB}.u-color-actions-success-500{color:#34994C}.u-color-actions-success-600{color:#128438}.u-color-actions-success-800{color:#00591D}.u-color-actions-danger-50{color:#FFEDE8}.u-color-actions-danger-600{color:#E60020}.u-color-actions-warning-50{color:#FFF0E2}.u-color-actions-warning-600{color:#BC5400}.u-color-actions-news-50{color:#ECF5FD}.u-color-actions-news-600{color:#007AB6}.u-color-actions-news-100{color:#D9E8FA}.u-fw-700{font-weight:700}.u-fw-600{font-weight:600}.u-fw-400{font-weight:400}.u-fw-500{font-weight:500}.u-sr-only{border:0;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem);clip-path:inset(50%);height:.1rem;overflow:hidden;padding:0;position:absolute;width:.1rem;white-space:nowrap}.u-hidden{display:none !important}@media(min-width: 320px){.u-hidden\@from-xs{display:none !important}}@media(max-width: 319px){.u-hidden\@until-xs{display:none !important}}@media(min-width: 565px){.u-hidden\@from-sm{display:none !important}}@media(max-width: 564px){.u-hidden\@until-sm{display:none !important}}@media(min-width: 768px){.u-hidden\@from-md{display:none !important}}@media(max-width: 767px){.u-hidden\@until-md{display:none !important}}@media(min-width: 992px){.u-hidden\@from-lg{display:none !important}}@media(max-width: 991px){.u-hidden\@until-lg{display:none !important}}@media(min-width: 1200px){.u-hidden\@from-xl{display:none !important}}@media(max-width: 1199px){.u-hidden\@until-xl{display:none !important}}@media(min-width: 1600px){.u-hidden\@from-xxl{display:none !important}}@media(max-width: 1599px){.u-hidden\@until-xxl{display:none !important}}.u-overflow-hidden{overflow:hidden} \ No newline at end of file diff --git a/assets/package.json b/assets/package.json index bb67737..936de0e 100644 --- a/assets/package.json +++ b/assets/package.json @@ -14,7 +14,7 @@ "fetch": "eager", "enabled": true, "autoimport": { - "@mezcalito/ux-filemanager/dist/style.min.css": true + "@mezcalito/ux-filemanager/dist/style.css": true } } }, diff --git a/assets/src/controller.ts b/assets/src/controller.ts index ca32eb0..d76b79d 100644 --- a/assets/src/controller.ts +++ b/assets/src/controller.ts @@ -4,7 +4,7 @@ import {ActionEvent, Controller} from "@hotwired/stimulus"; import {Toggle} from "./scripts/toggle"; import {Collapse} from "./scripts/collapse"; -export class FilemanagerController extends Controller { +export default class extends Controller { static targets = [ 'list', 'card', 'dialog', 'modalAction', 'modalOldValue', 'select', 'dropdown', 'submenu', 'collapse' ]; declare listTarget: HTMLElement; diff --git a/rollup.config.js b/rollup.config.js index eb05ccb..caac0ac 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,8 +17,9 @@ module.exports = { typescript(), commonjs(), scss({ - fileName: 'styles.css', + fileName: 'styles.min.css', watch: ['assets/src/scss', 'assets/src/scss/styles.scss'], + outputStyle: 'compressed', }), ], watch: {