From 5113711ce20847bbc3c3ee28fac4998c5a1b14ac Mon Sep 17 00:00:00 2001 From: Alexis Date: Mon, 17 Jun 2024 14:17:44 +0200 Subject: [PATCH] feat(inte): add loading skeleton in sidebar and content --- assets/dist/styles.min.css | 2 +- .../scss/01_settings/_settings.colors.scss | 3 + .../04_components/_components.content.scss | 103 ++++++++++++++++++ .../04_components/_components.layout.scss | 6 +- .../04_components/_components.sidebar.scss | 49 +++++++++ src/Twig/Components/Content.php | 7 ++ src/Twig/Components/Sidebar.php | 7 ++ templates/components/content.html.twig | 19 +++- templates/components/sidebar.html.twig | 7 +- 9 files changed, 199 insertions(+), 4 deletions(-) diff --git a/assets/dist/styles.min.css b/assets/dist/styles.min.css index c75d811..e8fe9a0 100644 --- a/assets/dist/styles.min.css +++ b/assets/dist/styles.min.css @@ -1 +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}.fm-clayout{display:grid;grid-template-columns:24rem 1fr;height:100%}@media(max-width: 767px){.fm-clayout{grid-template-columns:1fr}}.fm-c-sidebar{padding:1.6rem;border-right:1px solid var(--border-grey-50);overflow:auto;display:flex}.fm-c-sidebar ul{list-style:none}.fm-c-sidebar>ul{padding:0}.fm-c-content{overflow:auto;padding:1.6rem;display:flex;flex-direction:column;gap:1.6rem}@media(max-width: 767px){.fm-c-content{padding-top:0;gap:1.2rem}}@media(min-width: 768px){.fm-c-content__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}}@media(max-width: 767px){.fm-c-content__actions{display:grid;grid-template-columns:1fr 4rem;grid-gap:1.6rem}}.fm-c-content__buttons{display:flex;gap:.8rem}.fm-c-content__cards{display:flex;flex-direction:column;gap:.8rem}.fm-c-content__cards--grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:1.6rem}.fm-c-content__cards--grid .fm-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){.fm-c-content__cards--grid .fm-c-file-card{grid-template-rows:3.2rem 8rem auto}}.fm-c-content__cards--grid .fm-c-file-card:has(.fm-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"}.fm-c-content__cards--grid .fm-c-file-card__picture{width:100%;height:100%}.fm-c-content__cards--grid .fm-c-file-card__picture svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.fm-c-content__cards--grid .fm-c-file-card__picture svg{width:3.2rem;height:3.2rem}}.fm-c-content__cards--grid .fm-c-file-card__name{align-self:center}.fm-c-content__cards--grid .fm-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){.fm-c-content__cards--grid .fm-c-folder-card{grid-template-rows:3.2rem 8rem auto}}.fm-c-content__cards--grid .fm-c-folder-card:has(.fm-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"}.fm-c-content__cards--grid .fm-c-folder-card__icon{display:flex;justify-content:center;align-items:center;height:100%}.fm-c-content__cards--grid .fm-c-folder-card__icon svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.fm-c-content__cards--grid .fm-c-folder-card__icon svg{width:3.2rem;height:3.2rem}}.fm-c-content__cards--grid .fm-c-folder-card__name{align-self:center}.fm-c-content__cards--grid .fm-c-file-card__infos{flex-direction:column;gap:0}@media(max-width: 991px){.fm-c-content__cards--grid{grid-template-columns:repeat(2, 1fr)}}.fm-c-content__sticky-button{position:fixed;bottom:1.6rem;right:1.6rem}.fm-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}.fm-c-button:hover{background-color:var(--button-bg-hover)}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-c-search-field{width:27rem;position:relative}@media(max-width: 767px){.fm-c-search-field{width:100%}}.fm-c-search-field>svg{position:absolute;top:50%;transform:translateY(-50%);left:1.6rem}.fm-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)}.fm-c-search-field__input::placeholder{color:var(--search-field-placeholder)}.fm-c-toggle-buttons{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--toggle-button-border)}@media(max-width: 767px){.fm-c-toggle-buttons{border:0;display:flex;align-items:center;justify-content:center;background-color:var(--button-bg)}}.fm-c-toggle-buttons button{padding:1rem}@media(max-width: 767px){.fm-c-toggle-buttons button{padding:0}.fm-c-toggle-buttons button svg path{stroke:var(--toggle-button-mob)}}.fm-c-toggle-buttons__action{transition:background-color var(--transition-in-out)}.fm-c-toggle-buttons__action--active{background-color:var(--toggle-button-active-bg)}@media(max-width: 767px){.fm-c-toggle-buttons__action--active{display:none}}.fm-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}.fm-c-folder-card:hover{background-color:var(--card-hover-bg)}.fm-c-folder-card:has(.fm-c-folder-card__input:checked){background-color:var(--card-active-bg)}.fm-c-folder-card:has(.fm-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"}.fm-c-folder-card:has(.fm-c-folder-card__input:checked) .fm-c-folder-card__active-icon{display:flex}.fm-c-folder-card:has(.fm-c-folder-card__input:checked) .fm-c-folder-card__action{pointer-events:none;opacity:.5}.fm-c-folder-card__input{display:none;opacity:0;position:absolute;inset:0}.fm-c-folder-card__link{opacity:0;position:absolute;inset:0}.fm-c-folder-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.fm-c-folder-card__infos{display:flex;align-items:center;gap:1.6rem}.fm-c-folder-card__icon{padding:1.2rem;background-color:var(--card-icon-bg);border-radius:var(--radius-lg);grid-area:img}.fm-c-folder-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.fm-c-folder-card__number{grid-area:info}.fm-c-folder-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.fm-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}.fm-c-file-card:hover{background-color:var(--card-hover-bg)}.fm-c-file-card:has(.fm-c-file-card__input:checked){background-color:var(--card-active-bg)}.fm-c-file-card:has(.fm-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"}.fm-c-file-card:has(.fm-c-file-card__input:checked) .fm-c-file-card__active-icon{display:flex}.fm-c-file-card:has(.fm-c-file-card__input:checked) .fm-c-file-card__action{pointer-events:none;opacity:.5}.fm-c-file-card__input{display:none;opacity:0;position:absolute;inset:0}.fm-c-file-card__link{opacity:0;position:absolute;inset:0}.fm-c-file-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.fm-c-file-card__infos{display:flex;align-items:center;gap:1.6rem}.fm-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}.fm-c-file-card__picture svg{width:3.2rem;height:3.2rem}.fm-c-file-card__picture img{width:100%;height:100%;object-fit:cover}.fm-c-file-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.fm-c-file-card__infos{grid-area:info;display:flex;flex-wrap:wrap;align-items:start;gap:.8rem}.fm-c-file-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.fm-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){.fm-c-actions-selected{justify-content:space-between}}.fm-c-actions-selected__head{display:flex;align-items:center;overflow:hidden}.fm-c-actions-selected__info{margin:0 2.4rem 0 1rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.fm-c-actions-selected__actions{display:flex;align-items:center;gap:1.6rem}@media(max-width: 767px){.fm-c-actions-selected__actions{gap:2.4rem}}.fm-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}.fm-c-back__action::after{content:"";display:block;position:absolute;inset:0}.fm-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}.fm-c-modal>p{text-align:center;margin-bottom:1.6rem}.fm-c-modal--open{opacity:1;pointer-events:all;transform:scale(1)}.fm-c-modal--md{width:33rem}@media(max-width: 767px){.fm-c-modal--md{width:calc(100% - 3.2rem)}}.fm-c-modal--lg{width:68.6rem}@media(max-width: 767px){.fm-c-modal--lg{width:calc(100% - 3.2rem)}}.fm-c-modal__close{position:absolute;top:1.6rem;right:1.6rem}.fm-c-modal__content{max-height:29rem;overflow:auto}.fm-c-modal__content ul{list-style:none}.fm-c-modal__content>ul{padding:0}.fm-c-modal__content .fm-c-collapse__content,.fm-c-modal__content .fm-c-collapse__head{width:100%}.fm-c-modal__content--with-border{border-radius:var(--radius-md);border:1px solid var(--border-grey-100);padding:1.6rem}.fm-c-modal__actions{display:flex;align-items:center;margin-top:3.2rem;gap:2.4rem;justify-content:end}.fm-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}.fm-c-submenu.is-active{opacity:1;pointer-events:all}.fm-c-submenu.is-active .fm-c-submenu__content{transform:translateY(0)}.fm-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%)}.fm-c-submenu__content ul{list-style:none;padding:0}.fm-c-submenu__item{display:flex;align-items:center;gap:1.6rem;padding:.8rem 1.2rem}.fm-c-submenu__button svg{border:1px solid var(--border-grey-100);border-radius:50%;padding:1rem;width:4rem;height:4rem}.fm-c-collapse[data-visible=true]>.fm-c-collapse__head .fm-c-collapse__arrow{transform:rotate(90deg)}.fm-c-collapse[data-visible=false]>.fm-c-collapse__head .fm-c-collapse__arrow{transform:rotate(0deg) !important}.fm-c-collapse__openable{margin-left:-2.3rem}.fm-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}.fm-c-collapse__head button{transition:color var(--transition-in-out)}.fm-c-collapse__head svg path{transition:stroke var(--transition-in-out)}.fm-c-collapse__head:not(.fm-c-collapse__head--first){margin-bottom:.8rem}.fm-c-collapse__head--first{margin-bottom:1rem}.fm-c-collapse__head--active{background-color:var(--folder-collapse-active-bg)}.fm-c-collapse__head--active button{color:var(--folder-collapse-active)}.fm-c-collapse__head--active svg path{stroke:var(--folder-collapse-active)}.fm-c-collapse__head--disabled .fm-c-collapse__action{color:var(--folder-collapse-disabled)}.fm-c-collapse>.fm-c-collapse__wrapper{position:relative;overflow:hidden;display:none}.fm-c-collapse[data-visible=true]>.fm-c-collapse__wrapper{display:block}.fm-c-collapse__content{display:inline-block}.fm-c-collapse__action{display:flex;align-items:center;gap:.4rem}.fm-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)}.fm-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)}.fm-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%}.fm-c-card-actions__content>button:hover{background-color:var(--card-actions-button-bg-hover)}.fm-c-card-actions__content.is-active{pointer-events:all;opacity:1}.fm-c-field__wrapper{position:relative}.fm-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)}.fm-c-field__input:not(.fm-c-field__input--error):focus{border-color:var(--border-grey-900)}.fm-c-field__input::placeholder{color:var(--field-placeholder)}.fm-c-field__input--error{border-color:var(--field-error-border)}.fm-c-field__icon{position:absolute;top:50%;transform:translateY(-50%);right:1.6rem}.fm-c-custom-select{position:relative}.fm-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)}.fm-c-custom-select__input-wrapper:hover{background-color:var(--select-active-bg)}.fm-c-custom-select__input{position:absolute;height:0;width:0;border:0;padding:0}.fm-c-custom-select__current-wrapper{display:flex;align-items:center;gap:1rem}.fm-c-custom-select__icon{display:flex;align-items:center;justify-content:center;transform:rotate(180deg)}@media(min-width: 768px){.fm-c-custom-select__icon{width:2.4rem;height:2.4rem}}@media(max-width: 767px){.fm-c-custom-select__icon{width:1.6rem;height:1.6rem}}.fm-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}.fm-c-custom-select__list-wrapper.is-active{display:flex}.fm-c-custom-select__list{width:100%;margin:0;padding:0;list-style:none}.fm-c-custom-select__item{padding:.9rem 4.5rem .9rem 1.2rem;transition:background-color var(--transition-in-out);border-radius:var(--radius-sm)}.fm-c-custom-select__item:hover{background-color:var(--select-item-hover)}.fm-c-custom-select__item>button{display:flex;align-items:center;gap:1rem;width:100%}@media(min-width: 768px){.fm-c-custom-select__item>button svg{width:1.8rem;height:1.8rem}}@media(max-width: 767px){.fm-c-custom-select__item>button svg{width:1rem;height:1rem}}.fm-u-color-neutral-black{color:#000000}.fm-u-color-neutral-black-40{color:rgba(0, 0, 0, 0.4)}.fm-u-color-neutral-white{color:#FFFFFF}.fm-u-color-grey-20{color:#F9FAFB}.fm-u-color-grey-50{color:#F7F8FA}.fm-u-color-grey-100{color:#DEE1E8}.fm-u-color-grey-200{color:#F1F2F5}.fm-u-color-grey-300{color:#EDEEF1}.fm-u-color-grey-500{color:#7F889C}.fm-u-color-grey-700{color:#566071}.fm-u-color-grey-900{color:#333945}.fm-u-color-actions-success-50{color:#EBF7EB}.fm-u-color-actions-success-500{color:#34994C}.fm-u-color-actions-success-600{color:#128438}.fm-u-color-actions-success-800{color:#00591D}.fm-u-color-actions-danger-50{color:#FFEDE8}.fm-u-color-actions-danger-600{color:#E60020}.fm-u-color-actions-warning-50{color:#FFF0E2}.fm-u-color-actions-warning-600{color:#BC5400}.fm-u-color-actions-news-50{color:#ECF5FD}.fm-u-color-actions-news-600{color:#007AB6}.fm-u-color-actions-news-100{color:#D9E8FA}.fm-u-fw-700{font-weight:700}.fm-u-fw-600{font-weight:600}.fm-u-fw-400{font-weight:400}.fm-u-fw-500{font-weight:500}.fm-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}.fm-u-hidden{display:none !important}@media(min-width: 320px){.fm-u-hidden\@from-xs{display:none !important}}@media(max-width: 319px){.fm-u-hidden\@until-xs{display:none !important}}@media(min-width: 565px){.fm-u-hidden\@from-sm{display:none !important}}@media(max-width: 564px){.fm-u-hidden\@until-sm{display:none !important}}@media(min-width: 768px){.fm-u-hidden\@from-md{display:none !important}}@media(max-width: 767px){.fm-u-hidden\@until-md{display:none !important}}@media(min-width: 992px){.fm-u-hidden\@from-lg{display:none !important}}@media(max-width: 991px){.fm-u-hidden\@until-lg{display:none !important}}@media(min-width: 1200px){.fm-u-hidden\@from-xl{display:none !important}}@media(max-width: 1199px){.fm-u-hidden\@until-xl{display:none !important}}@media(min-width: 1600px){.fm-u-hidden\@from-xxl{display:none !important}}@media(max-width: 1599px){.fm-u-hidden\@until-xxl{display:none !important}}.fm-u-overflow-hidden{overflow:hidden} \ No newline at end of file +: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);--loading-grey: var(--border-grey-100);--loading-grey-light: var(--border-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}.fm-c-layout{display:grid;grid-template-columns:24rem 1fr;height:100%}@media(max-width: 767px){.fm-c-layout{grid-template-columns:1fr}}.fm-c-layout:has(.fm-c-sidebar__loading){height:auto}.fm-c-sidebar{padding:1.6rem;border-right:1px solid var(--border-grey-50);overflow:auto;display:flex}.fm-c-sidebar ul{list-style:none}.fm-c-sidebar>ul{padding:0}.fm-c-sidebar__loading{padding:1.6rem;display:flex;flex-direction:column;gap:1rem}.fm-c-sidebar__loading .fm-c-sidebar__bar-loader:first-child{width:50%;margin-left:0}@media(max-width: 767px){.fm-c-sidebar__loading .fm-c-sidebar__bar-loader:first-child{width:30%}}@media(max-width: 767px){.fm-c-sidebar__loading .fm-c-sidebar__bar-loader:not(:first-child){display:none}}.fm-c-sidebar__bar-loader{margin-left:1.6rem;height:2.8rem;background:var(--loading-grey);overflow:hidden;border-radius:var(--radius-sm)}.fm-c-sidebar__bar-loader::before{content:"";display:block;height:100%;width:100%;animation:loading 1s infinite;background:linear-gradient(to right, transparent, var(--loading-grey-light), transparent)}@keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.fm-c-content{overflow:auto;padding:1.6rem;display:flex;flex-direction:column;gap:1.6rem}@media(max-width: 767px){.fm-c-content{padding-top:0;gap:1.2rem}}@media(min-width: 768px){.fm-c-content__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}}@media(max-width: 767px){.fm-c-content__actions{display:grid;grid-template-columns:1fr 4rem;grid-gap:1.6rem}}.fm-c-content__buttons{display:flex;gap:.8rem}.fm-c-content__cards{display:flex;flex-direction:column;gap:.8rem}.fm-c-content__cards--grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:1.6rem}.fm-c-content__cards--grid .fm-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){.fm-c-content__cards--grid .fm-c-file-card{grid-template-rows:3.2rem 8rem auto}}.fm-c-content__cards--grid .fm-c-file-card:has(.fm-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"}.fm-c-content__cards--grid .fm-c-file-card__picture{width:100%;height:100%}.fm-c-content__cards--grid .fm-c-file-card__picture svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.fm-c-content__cards--grid .fm-c-file-card__picture svg{width:3.2rem;height:3.2rem}}.fm-c-content__cards--grid .fm-c-file-card__name{align-self:center}.fm-c-content__cards--grid .fm-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){.fm-c-content__cards--grid .fm-c-folder-card{grid-template-rows:3.2rem 8rem auto}}.fm-c-content__cards--grid .fm-c-folder-card:has(.fm-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"}.fm-c-content__cards--grid .fm-c-folder-card__icon{display:flex;justify-content:center;align-items:center;height:100%}.fm-c-content__cards--grid .fm-c-folder-card__icon svg{width:5.2rem;height:5.2rem}@media(max-width: 767px){.fm-c-content__cards--grid .fm-c-folder-card__icon svg{width:3.2rem;height:3.2rem}}.fm-c-content__cards--grid .fm-c-folder-card__name{align-self:center}.fm-c-content__cards--grid .fm-c-file-card__infos{flex-direction:column;gap:0}@media(max-width: 991px){.fm-c-content__cards--grid{grid-template-columns:repeat(2, 1fr)}}.fm-c-content__sticky-button{position:fixed;bottom:1.6rem;right:1.6rem}.fm-c-content__loading{padding:1.6rem;display:flex;flex-direction:column;gap:1.6rem}@media(max-width: 767px){.fm-c-content__loading{padding-top:0;gap:1.2rem}}.fm-c-content__loader{background:var(--loading-grey);overflow:hidden;border-radius:var(--radius-sm)}.fm-c-content__loader::before{content:"";display:block;height:100%;width:100%;animation:loading 1s infinite;background:linear-gradient(to right, transparent, var(--loading-grey-light), transparent)}@keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.fm-c-content__loading-actions{display:flex;justify-content:space-between;gap:1.2rem;height:4.2rem}@media(max-width: 767px){.fm-c-content__loading-actions{height:4rem}}@media(min-width: 768px){.fm-c-content__loading-actions{flex-wrap:wrap}}.fm-c-content__loading-actions>div{display:flex;gap:1rem}@media(max-width: 767px){.fm-c-content__loading-actions>div{display:none}}.fm-c-content__loading-actions .fm-c-content__loader{border-radius:var(--radius-md)}.fm-c-content__search-loader{width:20rem}@media(max-width: 767px){.fm-c-content__search-loader{flex:1}}.fm-c-content__box-loader{width:12rem}.fm-c-content__format-loader{width:7rem}@media(max-width: 767px){.fm-c-content__format-loader{display:none}}.fm-c-content__format-loader-mob{width:4rem}@media(min-width: 768px){.fm-c-content__format-loader-mob{display:none}}.fm-c-content__bars-container{display:flex;flex-direction:column;gap:.8rem}.fm-c-content__bar-loader{width:100%;height:7.2rem}.fm-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}.fm-c-button:hover{background-color:var(--button-bg-hover)}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-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}.fm-c-search-field{width:27rem;position:relative}@media(max-width: 767px){.fm-c-search-field{width:100%}}.fm-c-search-field>svg{position:absolute;top:50%;transform:translateY(-50%);left:1.6rem}.fm-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)}.fm-c-search-field__input::placeholder{color:var(--search-field-placeholder)}.fm-c-toggle-buttons{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--toggle-button-border)}@media(max-width: 767px){.fm-c-toggle-buttons{border:0;display:flex;align-items:center;justify-content:center;background-color:var(--button-bg)}}.fm-c-toggle-buttons button{padding:1rem}@media(max-width: 767px){.fm-c-toggle-buttons button{padding:0}.fm-c-toggle-buttons button svg path{stroke:var(--toggle-button-mob)}}.fm-c-toggle-buttons__action{transition:background-color var(--transition-in-out)}.fm-c-toggle-buttons__action--active{background-color:var(--toggle-button-active-bg)}@media(max-width: 767px){.fm-c-toggle-buttons__action--active{display:none}}.fm-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}.fm-c-folder-card:hover{background-color:var(--card-hover-bg)}.fm-c-folder-card:has(.fm-c-folder-card__input:checked){background-color:var(--card-active-bg)}.fm-c-folder-card:has(.fm-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"}.fm-c-folder-card:has(.fm-c-folder-card__input:checked) .fm-c-folder-card__active-icon{display:flex}.fm-c-folder-card:has(.fm-c-folder-card__input:checked) .fm-c-folder-card__action{pointer-events:none;opacity:.5}.fm-c-folder-card__input{display:none;opacity:0;position:absolute;inset:0}.fm-c-folder-card__link{opacity:0;position:absolute;inset:0}.fm-c-folder-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.fm-c-folder-card__infos{display:flex;align-items:center;gap:1.6rem}.fm-c-folder-card__icon{padding:1.2rem;background-color:var(--card-icon-bg);border-radius:var(--radius-lg);grid-area:img}.fm-c-folder-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.fm-c-folder-card__number{grid-area:info}.fm-c-folder-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.fm-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}.fm-c-file-card:hover{background-color:var(--card-hover-bg)}.fm-c-file-card:has(.fm-c-file-card__input:checked){background-color:var(--card-active-bg)}.fm-c-file-card:has(.fm-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"}.fm-c-file-card:has(.fm-c-file-card__input:checked) .fm-c-file-card__active-icon{display:flex}.fm-c-file-card:has(.fm-c-file-card__input:checked) .fm-c-file-card__action{pointer-events:none;opacity:.5}.fm-c-file-card__input{display:none;opacity:0;position:absolute;inset:0}.fm-c-file-card__link{opacity:0;position:absolute;inset:0}.fm-c-file-card__active-icon{display:none;padding-left:.8rem;grid-area:activeIcon;align-items:center}.fm-c-file-card__infos{display:flex;align-items:center;gap:1.6rem}.fm-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}.fm-c-file-card__picture svg{width:3.2rem;height:3.2rem}.fm-c-file-card__picture img{width:100%;height:100%;object-fit:cover}.fm-c-file-card__name{grid-area:name;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-self:end}.fm-c-file-card__infos{grid-area:info;display:flex;flex-wrap:wrap;align-items:start;gap:.8rem}.fm-c-file-card__action{position:relative;display:flex;align-items:center;justify-content:end;grid-area:action;transition:opacity var(--transition-in-out)}.fm-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){.fm-c-actions-selected{justify-content:space-between}}.fm-c-actions-selected__head{display:flex;align-items:center;overflow:hidden}.fm-c-actions-selected__info{margin:0 2.4rem 0 1rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.fm-c-actions-selected__actions{display:flex;align-items:center;gap:1.6rem}@media(max-width: 767px){.fm-c-actions-selected__actions{gap:2.4rem}}.fm-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}.fm-c-back__action::after{content:"";display:block;position:absolute;inset:0}.fm-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}.fm-c-modal>p{text-align:center;margin-bottom:1.6rem}.fm-c-modal--open{opacity:1;pointer-events:all;transform:scale(1)}.fm-c-modal--md{width:33rem}@media(max-width: 767px){.fm-c-modal--md{width:calc(100% - 3.2rem)}}.fm-c-modal--lg{width:68.6rem}@media(max-width: 767px){.fm-c-modal--lg{width:calc(100% - 3.2rem)}}.fm-c-modal__close{position:absolute;top:1.6rem;right:1.6rem}.fm-c-modal__content{max-height:29rem;overflow:auto}.fm-c-modal__content ul{list-style:none}.fm-c-modal__content>ul{padding:0}.fm-c-modal__content .fm-c-collapse__content,.fm-c-modal__content .fm-c-collapse__head{width:100%}.fm-c-modal__content--with-border{border-radius:var(--radius-md);border:1px solid var(--border-grey-100);padding:1.6rem}.fm-c-modal__actions{display:flex;align-items:center;margin-top:3.2rem;gap:2.4rem;justify-content:end}.fm-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}.fm-c-submenu.is-active{opacity:1;pointer-events:all}.fm-c-submenu.is-active .fm-c-submenu__content{transform:translateY(0)}.fm-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%)}.fm-c-submenu__content ul{list-style:none;padding:0}.fm-c-submenu__item{display:flex;align-items:center;gap:1.6rem;padding:.8rem 1.2rem}.fm-c-submenu__button svg{border:1px solid var(--border-grey-100);border-radius:50%;padding:1rem;width:4rem;height:4rem}.fm-c-collapse[data-visible=true]>.fm-c-collapse__head .fm-c-collapse__arrow{transform:rotate(90deg)}.fm-c-collapse[data-visible=false]>.fm-c-collapse__head .fm-c-collapse__arrow{transform:rotate(0deg) !important}.fm-c-collapse__openable{margin-left:-2.3rem}.fm-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}.fm-c-collapse__head button{transition:color var(--transition-in-out)}.fm-c-collapse__head svg path{transition:stroke var(--transition-in-out)}.fm-c-collapse__head:not(.fm-c-collapse__head--first){margin-bottom:.8rem}.fm-c-collapse__head--first{margin-bottom:1rem}.fm-c-collapse__head--active{background-color:var(--folder-collapse-active-bg)}.fm-c-collapse__head--active button{color:var(--folder-collapse-active)}.fm-c-collapse__head--active svg path{stroke:var(--folder-collapse-active)}.fm-c-collapse__head--disabled .fm-c-collapse__action{color:var(--folder-collapse-disabled)}.fm-c-collapse>.fm-c-collapse__wrapper{position:relative;overflow:hidden;display:none}.fm-c-collapse[data-visible=true]>.fm-c-collapse__wrapper{display:block}.fm-c-collapse__content{display:inline-block}.fm-c-collapse__action{display:flex;align-items:center;gap:.4rem}.fm-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)}.fm-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)}.fm-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%}.fm-c-card-actions__content>button:hover{background-color:var(--card-actions-button-bg-hover)}.fm-c-card-actions__content.is-active{pointer-events:all;opacity:1}.fm-c-field__wrapper{position:relative}.fm-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)}.fm-c-field__input:not(.fm-c-field__input--error):focus{border-color:var(--border-grey-900)}.fm-c-field__input::placeholder{color:var(--field-placeholder)}.fm-c-field__input--error{border-color:var(--field-error-border)}.fm-c-field__icon{position:absolute;top:50%;transform:translateY(-50%);right:1.6rem}.fm-c-custom-select{position:relative}.fm-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)}.fm-c-custom-select__input-wrapper:hover{background-color:var(--select-active-bg)}.fm-c-custom-select__input{position:absolute;height:0;width:0;border:0;padding:0}.fm-c-custom-select__current-wrapper{display:flex;align-items:center;gap:1rem}.fm-c-custom-select__icon{display:flex;align-items:center;justify-content:center;transform:rotate(180deg)}@media(min-width: 768px){.fm-c-custom-select__icon{width:2.4rem;height:2.4rem}}@media(max-width: 767px){.fm-c-custom-select__icon{width:1.6rem;height:1.6rem}}.fm-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}.fm-c-custom-select__list-wrapper.is-active{display:flex}.fm-c-custom-select__list{width:100%;margin:0;padding:0;list-style:none}.fm-c-custom-select__item{padding:.9rem 4.5rem .9rem 1.2rem;transition:background-color var(--transition-in-out);border-radius:var(--radius-sm)}.fm-c-custom-select__item:hover{background-color:var(--select-item-hover)}.fm-c-custom-select__item>button{display:flex;align-items:center;gap:1rem;width:100%}@media(min-width: 768px){.fm-c-custom-select__item>button svg{width:1.8rem;height:1.8rem}}@media(max-width: 767px){.fm-c-custom-select__item>button svg{width:1rem;height:1rem}}.fm-u-color-neutral-black{color:#000000}.fm-u-color-neutral-black-40{color:rgba(0, 0, 0, 0.4)}.fm-u-color-neutral-white{color:#FFFFFF}.fm-u-color-grey-20{color:#F9FAFB}.fm-u-color-grey-50{color:#F7F8FA}.fm-u-color-grey-100{color:#DEE1E8}.fm-u-color-grey-200{color:#F1F2F5}.fm-u-color-grey-300{color:#EDEEF1}.fm-u-color-grey-500{color:#7F889C}.fm-u-color-grey-700{color:#566071}.fm-u-color-grey-900{color:#333945}.fm-u-color-actions-success-50{color:#EBF7EB}.fm-u-color-actions-success-500{color:#34994C}.fm-u-color-actions-success-600{color:#128438}.fm-u-color-actions-success-800{color:#00591D}.fm-u-color-actions-danger-50{color:#FFEDE8}.fm-u-color-actions-danger-600{color:#E60020}.fm-u-color-actions-warning-50{color:#FFF0E2}.fm-u-color-actions-warning-600{color:#BC5400}.fm-u-color-actions-news-50{color:#ECF5FD}.fm-u-color-actions-news-600{color:#007AB6}.fm-u-color-actions-news-100{color:#D9E8FA}.fm-u-fw-700{font-weight:700}.fm-u-fw-600{font-weight:600}.fm-u-fw-400{font-weight:400}.fm-u-fw-500{font-weight:500}.fm-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}.fm-u-hidden{display:none !important}@media(min-width: 320px){.fm-u-hidden\@from-xs{display:none !important}}@media(max-width: 319px){.fm-u-hidden\@until-xs{display:none !important}}@media(min-width: 565px){.fm-u-hidden\@from-sm{display:none !important}}@media(max-width: 564px){.fm-u-hidden\@until-sm{display:none !important}}@media(min-width: 768px){.fm-u-hidden\@from-md{display:none !important}}@media(max-width: 767px){.fm-u-hidden\@until-md{display:none !important}}@media(min-width: 992px){.fm-u-hidden\@from-lg{display:none !important}}@media(max-width: 991px){.fm-u-hidden\@until-lg{display:none !important}}@media(min-width: 1200px){.fm-u-hidden\@from-xl{display:none !important}}@media(max-width: 1199px){.fm-u-hidden\@until-xl{display:none !important}}@media(min-width: 1600px){.fm-u-hidden\@from-xxl{display:none !important}}@media(max-width: 1599px){.fm-u-hidden\@until-xxl{display:none !important}}.fm-u-overflow-hidden{overflow:hidden} \ No newline at end of file diff --git a/assets/src/scss/01_settings/_settings.colors.scss b/assets/src/scss/01_settings/_settings.colors.scss index a22b5f9..0bf455f 100644 --- a/assets/src/scss/01_settings/_settings.colors.scss +++ b/assets/src/scss/01_settings/_settings.colors.scss @@ -89,4 +89,7 @@ $theme-color: ( --select-list-bg: var(--color-neutral-white); --select-active-bg: #E7F3EB; --select-item-hover: var(--color-grey-50); + + --loading-grey: var(--border-grey-100); + --loading-grey-light: var(--border-grey-50); } \ No newline at end of file diff --git a/assets/src/scss/04_components/_components.content.scss b/assets/src/scss/04_components/_components.content.scss index 7f07e13..fcb17b2 100644 --- a/assets/src/scss/04_components/_components.content.scss +++ b/assets/src/scss/04_components/_components.content.scss @@ -149,4 +149,107 @@ position: fixed; bottom: $space-16; right: $space-16; +} + +.fm-c-content__loading { + padding: $space-16; + display: flex; + flex-direction: column; + gap: $space-16; + + @include max-width(md) { + padding-top: 0; + gap: $space-12; + } +} + +.fm-c-content__loader { + background: var(--loading-grey); + overflow: hidden; + border-radius: var(--radius-sm); +} + +.fm-c-content__loader::before{ + content: ""; + display: block; + height: 100%; + width: 100%; + animation: loading 1s infinite; + background: linear-gradient(to right, transparent,var(--loading-grey-light),transparent); +} + +@keyframes loading { + 0%{ + transform: translateX(-100%); + } + 100%{ + transform: translateX(100%); + } +} + +.fm-c-content__loading-actions { + display: flex; + justify-content: space-between; + gap: $space-12; + height: 4.2rem; + + @include max-width(md) { + height: 4rem; + } + + @include min-width(md) { + flex-wrap: wrap; + } + + & > div { + display: flex; + gap: $space-10; + + @include max-width(md) { + display: none; + } + } + + .fm-c-content__loader { + border-radius: var(--radius-md); + } +} + +.fm-c-content__search-loader { + width: 20rem; + + @include max-width(md) { + flex: 1; + } +} + +.fm-c-content__box-loader { + width: 12rem; +} + +.fm-c-content__format-loader { + width: 7rem; + + @include max-width(md) { + display: none; + } +} + +.fm-c-content__format-loader-mob { + width: 4rem; + + @include min-width(md) { + display: none; + } +} + +.fm-c-content__bars-container { + display: flex; + flex-direction: column; + gap: 0.8rem; +} + +.fm-c-content__bar-loader { + width: 100%; + height: 7.2rem; } \ No newline at end of file diff --git a/assets/src/scss/04_components/_components.layout.scss b/assets/src/scss/04_components/_components.layout.scss index 5b08160..6808620 100644 --- a/assets/src/scss/04_components/_components.layout.scss +++ b/assets/src/scss/04_components/_components.layout.scss @@ -1,4 +1,4 @@ -.fm-clayout { +.fm-c-layout { display: grid; grid-template-columns: 24rem 1fr; height: 100%; @@ -6,4 +6,8 @@ @include max-width(md) { grid-template-columns: 1fr; } + + &:has(.fm-c-sidebar__loading) { + height: auto; + } } diff --git a/assets/src/scss/04_components/_components.sidebar.scss b/assets/src/scss/04_components/_components.sidebar.scss index 44bdb5f..6ce064b 100644 --- a/assets/src/scss/04_components/_components.sidebar.scss +++ b/assets/src/scss/04_components/_components.sidebar.scss @@ -12,3 +12,52 @@ padding: 0; } } + + +.fm-c-sidebar__loading { + padding: $space-16; + display: flex; + flex-direction: column; + gap: $space-10; + + .fm-c-sidebar__bar-loader:first-child { + width: 50%; + margin-left: 0; + + @include max-width(md) { + width: 30%; + } + } + + @include max-width(md) { + .fm-c-sidebar__bar-loader:not(:first-child) { + display: none; + } + } +} + +.fm-c-sidebar__bar-loader { + margin-left: $space-16; + height: 2.8rem; + background: var(--loading-grey); + overflow: hidden; + border-radius: var(--radius-sm); +} + +.fm-c-sidebar__bar-loader::before{ + content: ""; + display: block; + height: 100%; + width: 100%; + animation: loading 1s infinite; + background: linear-gradient(to right, transparent,var(--loading-grey-light),transparent); +} + +@keyframes loading { + 0%{ + transform: translateX(-100%); + } + 100%{ + transform: translateX(100%); + } +} \ No newline at end of file diff --git a/src/Twig/Components/Content.php b/src/Twig/Components/Content.php index 90627c9..0db7a3a 100644 --- a/src/Twig/Components/Content.php +++ b/src/Twig/Components/Content.php @@ -19,6 +19,7 @@ use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemToolsTrait; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; use Symfony\UX\LiveComponent\Attribute\LiveProp; +use Symfony\UX\LiveComponent\Attribute\PreReRender; use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; @@ -55,4 +56,10 @@ public function getContent(): array return $nodes; } + + #[PreReRender] + public function preReRender(): void + { + sleep(5); + } } diff --git a/src/Twig/Components/Sidebar.php b/src/Twig/Components/Sidebar.php index 2c3237b..b118742 100644 --- a/src/Twig/Components/Sidebar.php +++ b/src/Twig/Components/Sidebar.php @@ -17,6 +17,7 @@ use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemContextTrait; use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemToolsTrait; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; +use Symfony\UX\LiveComponent\Attribute\PreReRender; use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; @@ -36,4 +37,10 @@ public function getNodes(): array return $nodes; } + + #[PreReRender] + public function preReRender(): void + { + sleep(5); + } } diff --git a/templates/components/content.html.twig b/templates/components/content.html.twig index d0bc9d2..22daeaa 100644 --- a/templates/components/content.html.twig +++ b/templates/components/content.html.twig @@ -186,5 +186,22 @@ {% macro placeholder(props) %} - Loading... Please wait... +
+
+ +
+ + + +
+ + +
+
+ + + + +
+
{% endmacro %} diff --git a/templates/components/sidebar.html.twig b/templates/components/sidebar.html.twig index feff039..0f93664 100644 --- a/templates/components/sidebar.html.twig +++ b/templates/components/sidebar.html.twig @@ -58,5 +58,10 @@ {% endmacro %} {% macro placeholder(props) %} - Loading... Please wait... +
+ + + + +
{% endmacro %}