@optionfactory/ful
Version:
This is a minimalistic web components library built on top of [`@optionfactory/ftl`](https://github.com/optionfactory/ftl) to accelerate frontend development cycle-time. Strictly adhering to a no-build philosophy, it completely eliminates the downtime as
1 lines • 25.4 kB
Source Map (JSON)
{"version":3,"sources":["errors.css","form.css","input.css","files.css","select.css","radio.css","checkbox.css","spinner.css","table.css","filters.css"],"names":[],"mappings":"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","file":"ful.css","sourcesContent":["ful-errors {\n --ful-errors-color: var(--ful-error-color);\n --ful-errors-bg: var(--ful-error-bg);\n --ful-errors-border-color: var(--ful-error-border-color);\n\n display: block;\n padding: 1rem;\n margin-bottom: 1rem;\n color: var(--ful-errors-color);\n background-color: var(--ful-errors-bg);\n border: 1px solid var(--ful-errors-border-color);\n border-radius: var(--ful-border-radius);\n}\n\nful-field-error {\n --ful-field-error-invalid-color: var(--ful-invalid-color);\n display: none;\n\n :invalid & {\n display: block;\n margin-top: .25rem;\n color: var(--ful-field-error-invalid-color);\n } \n}\n\nful-field-warnings {\n display: none;\n &:not(:empty) {\n display: block;\n }\n}\n\nful-field-warning {\n display: block;\n margin: 0.5rem 0;\n padding: 15px;\n color: var(--ful-warning-color);\n background-color: var(--ful-warning-bg);\n border-color: var(--ful-warning-border-color);\n border-radius: 8px;\n animation: show-and-hide 5s ease forwards;\n animation-composition: initial;\n}\n\n@keyframes show-and-hide {\n 0% {\n opacity: 0;\n display: block;\n }\n\n 3% {\n opacity: 1;\n }\n\n 90% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n display: none;\n }\n}",":root {\n\n --ful-color: var(--bs-body-color, #212529);\n --ful-bg: var(--bs-body-bg, #fff);\n\n --ful-border-width: var(--bs-border-width, 1px);\n --ful-border-radius: var(--bs-border-radius, 0.375rem);\n --ful-border-color: var(--bs-border-color, #dee2e6);\n\n --ful-disabled-bg: var(--bs-secondary-bg, #e9ecef);\n --ful-selected-bg: var(--bs-tertiary-bg, #f8f9fa);\n\n --ful-active-color: white;\n --ful-active-bg: #007376;\n\n --ful-focus-border-color: #86b7fe;\n --ful-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);\n\n --ful-invalid-color: var(--bs-form-invalid-color, #dc3545);\n --ful-invalid-border-color: var(--bs-form-invalid-border-color, #dc3545);\n --ful-invalid-box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);\n\n --ful-error-color: var(--bs-danger-text-emphasis, #58151c);\n --ful-error-bg: var(--bs-danger-bg-subtle, #f8d7da);\n --ful-error-border-color: var(--bs-danger-border-subtle, #f1aeb5);\n\n --ful-warning-color: var(--bs-warning-text-emphasis, #664d03);\n --ful-warning-bg: var(--bs-warning-bg-subtle, #fff3cd);\n --ful-warning-border-color: var(--bs-warning-border-subtle, #ffe69c);\n\n --ful-scrollbar-bg: var(--bs-secondary-bg, #e9ecef);\n --ful-scrollbar-thumb-bg: var(--ful-active-bg);\n --ful-scrollbar-width: 12px;\n --ful-scrollbar-border-width: 1px;\n\n\n --ful-inputs-bg: var(--ful-bg);\n --ful-inputs-border-width: var(--ful-border-width);\n --ful-inputs-border-radius: var(--ful-border-radius);\n --ful-inputs-border-color: var(--ful-border-color);\n\n}\n\n\n[hidden] {\n display: none !important;\n}","ful-input,\n.ful-input,\nful-input-file,\nful-input-local-date,\nful-input-local-time,\nful-input-instant {\n display: block;\n\n\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &[required] > .form-label > label::before {\n content: '* ';\n display: inline;\n font-weight: 700;\n color: var(--ful-color);\n }\n\n\n & textarea:focus,\n & input:focus {\n border-color: var(--ful-focus-border-color);\n box-shadow: var(--ful-focus-box-shadow);\n }\n\n\n &:invalid textarea,\n &:invalid input {\n border-color: var(--ful-invalid-border-color);\n padding-right: calc(1.5em + .75rem);\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-position: right calc(.375em + .1875rem) center;\n background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n }\n\n &:invalid textarea:focus,\n &:invalid input:focus {\n border-color: var(--ful-invalid-border-color);\n box-shadow: var(--ful-invalid-box-shadow);\n }\n\n}\n\nful-item-list {\n --ful-item-list-item-color: var(--ful-active-color);\n --ful-item-list-item-border-radius: var(--ful-border-radius);\n --ful-item-list-item-bg: var(--ful-active-bg);\n\n\n\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 4px;\n\n &:has(> ful-item > *:nth-child(3):last-child) {\n grid-template-columns: 1fr auto auto;\n }\n\n &>ful-item:first-child {\n margin-top: 6px;\n }\n\n &>ful-item:last-child {\n margin-bottom: 6px;\n }\n\n &>ful-item {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n align-items: center;\n text-align: right;\n line-height: 21px;\n\n &>*:first-child {\n text-align: left;\n min-width: 30px;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 5px 0.5rem;\n color: var(--ful-item-list-item-color);\n border-radius: var(--ful-item-list-item-border-radius);\n background-color: var(--ful-item-list-item-bg);\n }\n\n &>*:last-child {\n text-align: left;\n }\n }\n}","ful-input-file {\n\n &>.default-dropzone {\n border: 5px solid blue;\n min-height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n &[noinput] > .input-group {\n display: none;\n }\n\n &:not([dropzone])>.default-dropzone,\n &:not([dropzone])>.dropzone {\n display: none;\n }\n\n &:not([itemlist])>ful-item-list {\n display: none;\n }\n\n &[readonly] {\n &>.default-dropzone,\n &>.dropzone {\n pointer-events: none;\n }\n\n &>.input-group>input {\n pointer-events: none;\n }\n }\n\n\n\n}","ful-select {\n --ful-select-border-width: var(--ful-inputs-border-width);\n --ful-select-border-radius: var(--ful-inputs-border-radius);\n --ful-select-border-color: var(--ful-inputs-border-color);\n --ful-select-bg: var(--ful-inputs-bg);\n\n --ful-select-badge-color: var(--ful-active-color);\n --ful-select-badge-bg: var(--ful-active-bg);\n --ful-select-badge-border-radius: var(--ful-border-radius);\n --ful-select-focus-border-color: var(--ful-focus-border-color);\n --ful-select-focus-box-shadow: var(--ful-focus-box-shadow);\n\n\n display: block;\n cursor: pointer;\n\n badges {\n display: flex;\n flex-wrap: nowrap;\n gap: 3px;\n overflow: hidden;\n\n &:has(badge) {\n min-width: 2em;\n }\n }\n\n &[itemlist] badges {\n display: none;\n }\n\n &:not([itemlist])>ful-item-list {\n display: none;\n }\n\n\n badge {\n padding: 5px 7px;\n margin: 5px 0;\n color: var(--ful-select-badge-color);\n white-space: nowrap;\n border-radius: var(--ful-select-badge-border-radius);\n background-color: var(--ful-select-badge-bg);\n display: flex;\n align-items: center;\n line-height: 1em;\n }\n\n\n .ful-select-input-container {\n position: relative;\n display: block;\n flex: 1 1 auto;\n width: 1%;\n border: var(--ful-select-border-width) solid var(--ful-select-border-color);\n border-radius: var(--ful-select-border-radius);\n\n &:has(input:focus) {\n border-color: var(--ful-select-focus-border-color);\n outline: 0;\n box-shadow: var(--ful-select-focus-box-shadow);\n }\n\n }\n\n .ful-select-input {\n display: flex;\n flex: 1 1 auto;\n padding-left: 5px;\n padding-right: 2.25rem;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");\n background-position: right .75rem center;\n background-repeat: no-repeat;\n background-size: 16px 12px;\n background-color: var(--ful-select-bg);\n overflow: hidden;\n z-index: 5;\n border-radius: var(--ful-select-border-radius);\n\n\n\n }\n\n .ful-select-input-container:not(:first-child) .ful-select-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .ful-select-input-container:not(:last-child) .ful-select-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:invalid .ful-select-input-container {\n border-color: var(--ful-invalid-border-color);\n }\n\n\n &:disabled .ful-select-input {\n background-size: 0;\n background-color: var(--ful-disabled-bg);\n }\n\n\n &[readonly] .ful-select-input {\n background-size: 0;\n }\n\n &[itemlist][readonly], &[itemlist]:disabled {\n &>.input-group {\n display: none;\n }\n &> ful-item-list > ful-item:first-child {\n margin-top: 0;\n }\n &> ful-item-list > ful-item {\n & > *:first-child {\n grid-column: 1 / -1;\n }\n & > *:last-child {\n display: none;\n }\n }\n }\n\n &[required] > .form-label > label::before {\n content: '* ';\n display: inline;\n font-weight: 700;\n color: var(--ful-color);\n }\n\n\n input {\n border: 0;\n margin: 0;\n outline: 0;\n padding: .375rem 0 .375rem 7px;\n line-height: 1.5;\n flex: 1 1 auto;\n min-width: 1em;\n width: 1em;\n background-color: transparent;\n }\n\n\n}\n\nful-dropdown {\n --ful-dropdown-color: var(--ful-color);\n --ful-dropdown-selected-bg: var(--ful-selected-bg);\n --ful-dropdown-active-bg: var(--ful-active-bg);\n --ful-dropdown-border-width: var(--ful-border-width);\n --ful-dropdown-border-radius: var(--ful-border-radius);\n --ful-dropdown-border-color: var(--ful-border-color);\n --ful-dropdown-background-color: var(--ful-bg);\n --ful-dropdown-scrollbar-width: var(--ful-scrollbar-width);\n --ful-dropdown-scrollbar-border-width: var(--ful-scrollbar-border-width);\n --ful-dropdown-scrollbar-bg: var(--ful-scrollbar-bg);\n --ful-dropdown-scrollbar-thumb-bg: var(--ful-scrollbar-thumb-bg);\n\n display: block;\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0;\n top: 100%;\n margin-top: 2px;\n\n background-color: var(--ful-dropdown-background-color);\n background-clip: padding-box;\n border: var(--ful-dropdown-border-width) solid var(--ful-dropdown-border-color);\n border-radius: var(--ful-dropdown-border-radius);\n width: 100%;\n\n menu {\n height: auto;\n max-height: 200px;\n overflow-y: auto;\n padding: 0;\n margin: 0;\n\n &:not(:has(*))::before {\n font-family: bootstrap-icons;\n display: block;\n content: \"\\f8c3\";\n margin: auto;\n width: 1rem; \n } \n\n &::-webkit-scrollbar {\n width: 12px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: var(--ful-dropdown-scrollbar-bg);\n border-radius: var(--ful-dropdown-scrollbar-width);\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: var(--ful-dropdown-scrollbar-width);\n background-color: var(--ful-dropdown-active-bg);\n border: var(--ful-dropdown-scrollbar-border-width) solid var(--ful-dropdown-scrollbar-bg);\n }\n\n }\n\n li {\n padding: .5rem .751rem;\n color: var(--ful-dropdown-color);\n display: block;\n border: 0;\n cursor: pointer;\n }\n\n li:hover,\n li[selected] {\n color: var(--ful-dropdown-color);\n background-color: var(--ful-dropdown-selected-bg);\n }\n\n li:active {\n color: #fff;\n background-color: var(--ful-dropdown-active-bg);\n }\n\n}","ful-radio-group {\n --ful-radio-group-label-border-color: var(--ful-border-color);\n --ful-radio-group-label-bg: inherit;\n --ful-radio-group-label-checked-border-color: var(--ful-active-bg);\n --ful-radio-group-label-checked-bg: #eefbfb;\n --ful-radio-group-label-disabled-border-color: var(--ful-border-color);\n --ful-radio-group-label-disabled-bg: var(--ful-disabled-bg);\n --ful-radio-group-active-bg: var(--ful-active-bg);\n\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &[required] > fieldset > legend::before {\n content: '* ';\n display: inline;\n font-weight: 700;\n color: var(--ful-color);\n }\n\n\n &>fieldset {\n &>legend {\n font-size: 16px;\n margin: 0;\n }\n\n &>section {\n display: grid;\n gap: 10px;\n grid-template-columns: 1fr;\n\n & label {\n display: flex;\n align-items: center;\n border: 1px solid var(--ful-radio-group-label-border-color);\n background-color: var(--ful-radio-group-label-bg);\n border-radius: 4px;\n padding: 8px 10px;\n height: 100%;\n cursor: pointer;\n\n &>div {\n flex: 1\n }\n }\n\n & label:has(input[type=radio]:checked) {\n background-color: var(--ful-radio-group-label-checked-bg);\n border-color: var(--ful-radio-group-label-checked-border-color);\n }\n\n & label:has(input[type=radio]:disabled) {\n background-color: var(--ful-radio-group-label-disabled-bg);\n border-color: var(--ful-radio-group-label-disabled-border-color);\n }\n\n & input[type=radio] {\n margin-left: 8px;\n margin-right: 12px;\n height: 16px;\n width: 16px;\n vertical-align: text-bottom;\n accent-color: var(--ful-radio-group-label-checked-border-color);\n }\n }\n }\n\n &.horizontal>fieldset>section {\n gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n\n &:invalid>fieldset>section label {\n border-color: var(--ful-radio-group-active-bg);\n }\n}\n\nful-radio {\n display: none;\n}","ful-checkbox {\n\n --ful-checkbox-active-bg: var(--ful-active-bg);\n\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &[required]>.form-check>.form-check-label>label::before {\n content: '* ';\n display: inline;\n font-weight: 700;\n color: var(--ful-color);\n }\n\n & input[type=checkbox]:checked {\n background-color: var(--ful-checkbox-active-bg);\n border-color: var(--ful-checkbox-active-bg);\n }\n\n &:invalid input[type=checkbox] {\n border-color: var(--ful-invalid-border-color);\n\n &:checked {\n background-color: var(--ful-invalid-color);\n }\n\n &:focus {\n box-shadow: var(--ful-invalid-box-shadow);\n }\n }\n\n}","ful-spinner {\n --ful-spinner-icon-width: 1rem;\n --ful-spinner-icon-height: 1rem;\n --ful-spinner-icon-border-width: 0.2em;\n --ful-spinner-icon-vertical-align: -0.125em;\n --ful-spinner-icon-animation-speed: 0.75s;\n --ful-spinner-icon-animation-name: spinner-border;\n --ful-spinner-icon-color: currentcolor;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &.centered {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.big {\n --ful-spinner-icon-width: 2rem;\n --ful-spinner-icon-height: 2rem;\n --ful-spinner-icon-border-width: 0.25em;\n }\n\n &.bigger {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n }\n\n &.backdrop {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n\n z-index: 2000;\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n background-color: rgb(167 167 167 / 80%);\n display: flex;\n align-items: center;\n justify-content: center;\n\n &>.ful-spinner-wrapper {\n padding: 2rem;\n background-color: white;\n border-radius: 1rem;\n }\n }\n\n &>.ful-spinner-wrapper {\n display: inline;\n\n &>.ful-spinner-icon {\n display: inline-block;\n width: var(--ful-spinner-icon-width);\n height: var(--ful-spinner-icon-height);\n vertical-align: var(--ful-spinner-icon-vertical-align);\n border-radius: 50%;\n border: var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);\n border-right-color: transparent;\n animation: var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);\n }\n }\n\n}\n\nbody:has(ful-spinner.backdrop:not([hidden])) {\n overflow: hidden;\n}","ful-pagination {\n display: block;\n margin-top: auto;\n &:not(:defined) {\n visibility: hidden;\n }\n\n & i.bi::before {\n line-height: 24px;\n }\n & .reload {\n display: flex;\n align-items: center;\n font-size: 24px;\n }\n}\n\nful-table {\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n & tbody[data-ref=initial],\n & tbody[data-ref=loading],\n & tbody[data-ref=feedback]\n {\n height: 360px;\n padding: 1.5rem;\n & td {\n\n text-align: center;\n vertical-align: middle;\n & p {\n margin-top: 1rem;\n }\n }\n }\n\n & .pagination-index {\n align-self: center;\n }\n\n}\n\n\nful-sorter {\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n cursor: pointer;\n\n &::before {\n display: inline-block;\n vertical-align: text-top;\n font-family: bootstrap-icons;\n font-style: normal;\n font-weight: 400;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n content: \"\\f574\";\n }\n\n &:not([order])::before {\n color: #cccccc;\n }\n\n &[order=asc]::before {\n content: \"\\f574\"\n }\n\n &[order=desc]::before {\n content: \"\\f575\";\n }\n}","ful-filter-text, ful-filter-instant, ful-filter-local-date {\n\n --ful-filter-active-bg: var(--ful-active-bg);\n --ful-filter-active-color: var(--ful-active-color);\n\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &[required] > .form-label > label::before {\n content: '* ';\n display: inline;\n font-weight: 700;\n color: var(--ful-color);\n }\n\n\n .dropdown-item:active {\n color: var(--ful-filter-active-color);\n background-color: var(--ful-filter-active-bg);\n }\n\n}"]}