@stonecrop/aform 0.2.55 → 0.2.57

package/dist/assets/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";div[data-v-ec9dd0e4]{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-ec9dd0e4]{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}p[data-v-ec9dd0e4],label[data-v-ec9dd0e4]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent}p[data-v-ec9dd0e4]{width:100%;color:red;font-size:85%}label[data-v-ec9dd0e4]{z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}input[data-v-ec9dd0e4]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-ec9dd0e4]{color:var(--sc-input-active-label-color)}.autocomplete{position:relative}.input-wrapper{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}input:focus{border:1px solid var(--sc-input-active-border-color);border-radius:.25rem .25rem 0 0;border-bottom:none}label{display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}.autocomplete-results{position:absolute;width:calc(100% - 1ch + 1.5px);z-index:1;padding:0;margin:0;color:#000;border:1px solid var(--sc-input-active-border-color);border-radius:0 0 .25rem .25rem;border-top:none}.autocomplete-result{list-style:none;text-align:left;padding:4px 6px;cursor:pointer}.autocomplete-result.is-active,.autocomplete-result:hover{background-color:var(--sc-row-color-zebra-light);color:#000}.adatepicker{font-size:var(--sc-table-font-size);display:inline-table;color:var(--sc-cell-text-color);outline:none;border-collapse:collapse}.adatepicker tr{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch}.adatepicker td:focus,.adatepicker td:focus-within{outline:1px dashed black;box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate{outline:1px solid black;background:var(--sc-gray-20);font-weight:bolder}.adatepicker .todaysDate{font-weight:bolder;text-decoration:underline;color:#000}.days-header>td{font-weight:700}.prev-date{color:var(--sc-gray-20)}.collapse-button[data-v-6f1c1b45]{width:2ch;min-width:calc(66px - 4ch);background-color:transparent;font-size:150%;text-align:center;border:none;margin-top:-.5rem}.rotated[data-v-6f1c1b45]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s;transform-origin:center center}.unrotated[data-v-6f1c1b45]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}[data-v-f3a1a760]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: 0px;--sc-atable-row-height: 1.5em;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.aform[data-v-f3a1a760]{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-gray-5);border-left:4px solid var(--sc-gray-5);margin-bottom:1rem;max-width:100%}@media screen and (max-width: 400px){.aform[data-v-f3a1a760]{flex-direction:column}}.aform__form-element[data-v-f3a1a760]{border:1px solid transparent;padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:100px}.aform__input-field[data-v-f3a1a760]{outline:1px solid transparent;border:1px solid var(--sc-input-border-color);font-size:1rem;padding:.5rem .25rem .25rem .5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;position:relative;color:var(--sc-cell-text-color)}.aform__field-label[data-v-f3a1a760]{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;width:auto;box-sizing:border-box;background:#fff;margin:0;border:1px solid var(--sc-input-border-color);grid-row:1;top:0;left:10px;border:none;transform:translateY(-50%)}p.error[data-v-f3a1a760]{display:block;display:inline-block;display:none;padding:0rem 0rem 0rem .5rem;margin:.5rem 0 .25rem 0rem;border:1px solid transparent;width:100%;width:auto;color:var(--sc-brand-danger);font-size:.8rem;position:absolute;right:0;top:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform__input-field[data-v-f3a1a760]:focus{border:1px solid var(--sc-input-active-border-color)}.aform__input-field:focus+.aform__field-label[data-v-f3a1a760]{color:var(--sc-input-active-label-color)}.aform__checkbox[data-v-f3a1a760]{cursor:pointer;width:auto;margin-top:0;display:block}.aform__checkbox[data-v-f3a1a760]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform__checkbox-container[data-v-f3a1a760]{width:100%;display:inline-block;text-align:left}.aform__checkbox-container input[data-v-f3a1a760]{width:auto}.aform__checkbox-container:hover+.aform__field-label[data-v-f3a1a760]{color:var(--sc-input-active-label-color)}.aform-primary-action[data-v-f3a1a760]{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--sc-primary-color);color:var(--sc-primary-text-color);background-color:var(--sc-primary-color);outline:2px solid var(--sc-primary-text-color);transition:outline-offset .2s ease;font-size:var(--sc-font-size);margin:.5ch}.aform-primary-action[data-v-f3a1a760]:hover,.aform-primary-action[data-v-f3a1a760]:active{outline:2px solid var(--sc-primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}tr[data-v-f3a1a760]:focus{background-color:#add8e6;outline:auto}.aform__form-btn[data-v-f3a1a760]{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform__form-btn[data-v-f3a1a760]:disabled{background-color:var(--sc-gray-5)}.aform__file-attach[data-v-f3a1a760]{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width: 400px){.aform__file-attach>.aform__form-btn[data-v-f3a1a760]{width:100%}}.aform__file-attach-feedback[data-v-f3a1a760]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform__file-attach-feedback>li[data-v-f3a1a760]{list-style:none;font-style:italic}.aform__file-attach-feedback>p[data-v-f3a1a760]{margin-top:0}.atable[data-v-f3a1a760]{font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse}.row-index[data-v-f3a1a760]{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.expandable-row[data-v-f3a1a760]{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);border-left:4px solid var(--sc-row-border-color)}.expanded-row[data-v-f3a1a760]{border-bottom:1px solid var(--sc-row-border-color);border-top:1px solid var(--sc-row-border-color)}.expanded-row-content[data-v-f3a1a760]{border-bottom:1px solid var(--sc-row-border-color);border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.atable__cell[data-v-f3a1a760]{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1}.atable__cell span[data-v-f3a1a760]{overflow:hidden;text-overflow:ellipsis}.atable__cell[data-v-f3a1a760]:focus,.atable__cell[data-v-f3a1a760]:focus-within{background-color:var(--sc-focus-cell-background);outline-width:2px;outline-style:solid;outline-offset:-1px;outline-color:var(--sc-focus-cell-outline);box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden;box-sizing:border-box}.table-row[data-v-f3a1a760]{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex;background-color:#fff}.list-index[data-v-f3a1a760]{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:30px;text-overflow:ellipsis;overflow:hidden}.tree-index[data-v-f3a1a760]{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.atable #header-index[data-v-f3a1a760]{width:30px;padding-right:1em;padding-left:0;box-sizing:border-box}.atable-header-row[data-v-f3a1a760]{display:flex}.atable th[data-v-f3a1a760]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}#header-index[data-v-f3a1a760]{box-sizing:content-box}.atable th[data-v-f3a1a760]:focus{outline:none}.amodal[data-v-f3a1a760]{position:fixed;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index[data-v-f3a1a760]{position:sticky;left:0;z-index:1;order:0}.sticky-column[data-v-f3a1a760],th.sticky-column[data-v-f3a1a760],td.sticky-column[data-v-f3a1a760],th.sticky-index[data-v-f3a1a760],td.sticky-index[data-v-f3a1a760]{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge[data-v-f3a1a760],.atable th.sticky-column-edge[data-v-f3a1a760]{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}.login-container[data-v-f3a1a760]{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container[data-v-f3a1a760]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-f3a1a760]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-f3a1a760]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-f3a1a760]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-f3a1a760]{display:grid;gap:.5rem}.login-form-element[data-v-f3a1a760]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-f3a1a760]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-f3a1a760]:focus{border:1px solid black}.btn[data-v-f3a1a760]{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn[data-v-f3a1a760]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-f3a1a760]:disabled{background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));color:light-dark(rgb(84,84,84),rgb(170,170,170))}.disabled[data-v-f3a1a760]{opacity:.5}.loading-icon[data-v-f3a1a760]{animation:spin-f3a1a760 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-f3a1a760{0%{transform:rotate(0)}to{transform:rotate(360deg)}}fieldset[data-v-df65d1bf]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-df65d1bf]{width:100%;height:1.15rem;border:1px solid transparent;padding-bottom:.5rem;font-size:110%;font-weight:600;-webkit-user-select:none;user-select:none}.collapse-button[data-v-df65d1bf]{float:right}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: 0px;--sc-atable-row-height: 1.5em;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.aform{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-gray-5);border-left:4px solid var(--sc-gray-5);margin-bottom:1rem;max-width:100%}@media screen and (max-width: 400px){.aform{flex-direction:column}}.aform__form-element{border:1px solid transparent;padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:100px}.aform__input-field{outline:1px solid transparent;border:1px solid var(--sc-input-border-color);font-size:1rem;padding:.5rem .25rem .25rem .5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;position:relative;color:var(--sc-cell-text-color)}.aform__field-label{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;width:auto;box-sizing:border-box;background:#fff;margin:0;border:1px solid var(--sc-input-border-color);grid-row:1;top:0;left:10px;border:none;transform:translateY(-50%)}p.error{display:block;display:inline-block;display:none;padding:0rem 0rem 0rem .5rem;margin:.5rem 0 .25rem 0rem;border:1px solid transparent;width:100%;width:auto;color:var(--sc-brand-danger);font-size:.8rem;position:absolute;right:0;top:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform__input-field:focus{border:1px solid var(--sc-input-active-border-color)}.aform__input-field:focus+.aform__field-label{color:var(--sc-input-active-label-color)}.aform__checkbox{cursor:pointer;width:auto;margin-top:0;display:block}.aform__checkbox:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform__checkbox-container{width:100%;display:inline-block;text-align:left}.aform__checkbox-container input{width:auto}.aform__checkbox-container:hover+.aform__field-label{color:var(--sc-input-active-label-color)}.aform-primary-action{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--sc-primary-color);color:var(--sc-primary-text-color);background-color:var(--sc-primary-color);outline:2px solid var(--sc-primary-text-color);transition:outline-offset .2s ease;font-size:var(--sc-font-size);margin:.5ch}.aform-primary-action:hover,.aform-primary-action:active{outline:2px solid var(--sc-primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}tr:focus{background-color:#add8e6;outline:auto}.aform__form-btn{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform__form-btn:disabled{background-color:var(--sc-gray-5)}.aform__file-attach{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width: 400px){.aform__file-attach>.aform__form-btn{width:100%}}.aform__file-attach-feedback{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform__file-attach-feedback>li{list-style:none;font-style:italic}.aform__file-attach-feedback>p{margin-top:0}.atable{font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);border-left:4px solid var(--sc-row-border-color)}.expanded-row{border-bottom:1px solid var(--sc-row-border-color);border-top:1px solid var(--sc-row-border-color)}.expanded-row-content{border-bottom:1px solid var(--sc-row-border-color);border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.atable__cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1}.atable__cell span{overflow:hidden;text-overflow:ellipsis}.atable__cell:focus,.atable__cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:2px;outline-style:solid;outline-offset:-1px;outline-color:var(--sc-focus-cell-outline);box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden;box-sizing:border-box}.table-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex;background-color:#fff}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:30px;text-overflow:ellipsis;overflow:hidden}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.atable #header-index{width:30px;padding-right:1em;padding-left:0;box-sizing:border-box}.atable-header-row{display:flex}.atable th{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}#header-index{box-sizing:content-box}.atable th:focus{outline:none}.amodal{position:fixed;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index{position:sticky;left:0;z-index:1;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}.login-container{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container{display:grid;gap:.5rem}.login-form-element{display:grid;margin:.5rem 0;position:relative}.login-field{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field:focus{border:1px solid black}.btn{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn:hover{background-color:var(--sc-btn-hover)}.btn:disabled{background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));color:light-dark(rgb(84,84,84),rgb(170,170,170))}.disabled{opacity:.5}.loading-icon{animation:spin 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.aform_checkbox[data-v-f0ba8b6d]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-f0ba8b6d]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-f0ba8b6d]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-f0ba8b6d]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-f0ba8b6d]{color:var(--sc-input-active-label-color)}div[data-v-ec9dd0e4]{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-ec9dd0e4]{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}p[data-v-ec9dd0e4],label[data-v-ec9dd0e4]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent}p[data-v-ec9dd0e4]{width:100%;color:red;font-size:85%}label[data-v-ec9dd0e4]{z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}input[data-v-ec9dd0e4]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-ec9dd0e4]{color:var(--sc-input-active-label-color)}.autocomplete[data-v-4e77785f]{position:relative}.input-wrapper[data-v-4e77785f]{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-4e77785f]{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}input[data-v-4e77785f]:focus{border:1px solid var(--sc-input-active-border-color);border-radius:.25rem .25rem 0 0;border-bottom:none}label[data-v-4e77785f]{display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}.autocomplete-results[data-v-4e77785f]{position:absolute;width:calc(100% - 1ch + 1.5px);z-index:1;padding:0;margin:0;color:#000;border:1px solid var(--sc-input-active-border-color);border-radius:0 0 .25rem .25rem;border-top:none}.autocomplete-result[data-v-4e77785f]{list-style:none;text-align:left;padding:4px 6px;cursor:pointer}.autocomplete-result.is-active[data-v-4e77785f],.autocomplete-result[data-v-4e77785f]:hover{background-color:var(--sc-row-color-zebra-light);color:#000}.adatepicker[data-v-a73ce0ff]{font-size:var(--sc-table-font-size);display:inline-table;color:var(--sc-cell-text-color);outline:none;border-collapse:collapse}.adatepicker tr[data-v-a73ce0ff]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-a73ce0ff]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch}.adatepicker td[data-v-a73ce0ff]:focus,.adatepicker td[data-v-a73ce0ff]:focus-within{outline:1px dashed black;box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-a73ce0ff]{outline:1px solid black;background:var(--sc-gray-20);font-weight:bolder}.adatepicker .todaysDate[data-v-a73ce0ff]{font-weight:bolder;text-decoration:underline;color:#000}.days-header>td[data-v-a73ce0ff]{font-weight:700}.prev-date[data-v-a73ce0ff]{color:var(--sc-gray-20)}.collapse-button[data-v-6f1c1b45]{width:2ch;min-width:calc(66px - 4ch);background-color:transparent;font-size:150%;text-align:center;border:none;margin-top:-.5rem}.rotated[data-v-6f1c1b45]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s;transform-origin:center center}.unrotated[data-v-6f1c1b45]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}.aform_form-element{padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:20ch;margin-bottom:1rem}.aform_input-field{outline:1px solid var(--sc-input-border-color);outline-offset:-1px;font-size:1rem;padding:.5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;min-height:auto;position:relative;color:var(--sc-cell-text-color);background:var(--sc-input-field-background)}.aform_input-field:focus{outline:1px solid var(--sc-input-active-border-color)}.aform_input-field:focus+.aform_field-label{color:var(--sc-input-active-label-color)}.aform_field-label{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);width:auto;box-sizing:border-box;background:#fff;margin:0;grid-row:1;top:0;left:10px;border:none;line-height:0;transform:translateY(-50%)}.aform_input-field:disabled{background:var(--sc-input-field-disabled-background)}.aform_input-field:disabled+.aform_field-label{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_input-field:disabled~p.aform_error{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_field-label:after{margin:0;padding:0;box-sizing:border-box;content:"";line-height:normal}p.aform_error{display:block;display:inline-block;display:none;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);padding:0 .25rem;margin:0rem;width:auto;color:var(--sc-brand-danger);font-size:.7rem;position:absolute;right:0;top:0;line-height:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform[data-v-d9ce3008]{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);margin-bottom:1rem;max-width:100%}@media screen and (max-width: 400px){.aform[data-v-d9ce3008]{flex-direction:column}}fieldset[data-v-df65d1bf]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-df65d1bf]{width:100%;height:1.15rem;border:1px solid transparent;padding-bottom:.5rem;font-size:110%;font-weight:600;-webkit-user-select:none;user-select:none}.collapse-button[data-v-df65d1bf]{float:right}.aform_file-attach[data-v-0b3a11cc]{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width: 400px){.aform_file-attach>.aform_form-btn[data-v-0b3a11cc]{width:100%}}.aform_file-attach-feedback[data-v-0b3a11cc]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform_file-attach-feedback>li[data-v-0b3a11cc]{list-style:none;font-style:italic}.aform_file-attach-feedback>p[data-v-0b3a11cc]{margin-top:0}.aform_form-btn[data-v-0b3a11cc]{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform_form-btn[data-v-0b3a11cc]:disabled{background-color:var(--sc-gray-5)}.login-container[data-v-6cbd3add]{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container[data-v-6cbd3add]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-6cbd3add]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-6cbd3add]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-6cbd3add]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-6cbd3add]{display:grid;gap:.5rem}.login-form-element[data-v-6cbd3add]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-6cbd3add]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-6cbd3add]:focus{border:1px solid black}.btn[data-v-6cbd3add]{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn[data-v-6cbd3add]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-6cbd3add]:disabled{background-color:var(--sc-input-field-disabled-background)}.disabled[data-v-6cbd3add]{opacity:.5}.loading-icon[data-v-6cbd3add]{animation:spin-6cbd3add 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-6cbd3add{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.55",
+  "version": "0.2.57",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "@vueuse/core": "^11.1.0",
     "vue": "^3.5.6",
-    "@stonecrop/themes": "0.2.55",
-    "@stonecrop/utilities": "0.2.55"
+    "@stonecrop/themes": "0.2.57",
+    "@stonecrop/utilities": "0.2.57"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",
@@ -55,11 +55,11 @@
     "vite": "^5.4.5",
     "vitest": "^2.1.1",
     "vue-router": "^4.4.0",
-    "@stonecrop/atable": "0.2.55",
-    "stonecrop-rig": "0.2.22"
+    "stonecrop-rig": "0.2.22",
+    "@stonecrop/atable": "0.2.57"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.55"
+    "@stonecrop/atable": "0.2.57"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AForm.vue

@@ -67,6 +67,113 @@ const childModels = computed({
 })
 </script>
 
+<style>
+/* global styles for aform */
+.aform_form-element {
+	padding: 0;
+	margin: 0;
+	position: relative;
+	box-sizing: border-box;
+	flex-grow: 1;
+	min-width: 20ch;
+	margin-bottom: 1rem;
+}
+.aform_input-field {
+	outline: 1px solid var(--sc-input-border-color);
+	outline-offset: -1px;
+	font-size: 1rem;
+	padding: 0.5rem;
+	margin: 0 0 0 0;
+	border-radius: 0;
+	box-sizing: border-box;
+	width: 100%;
+	min-height: auto;
+	position: relative;
+	color: var(--sc-cell-text-color);
+	background: var(--sc-input-field-background);
+}
+.aform_input-field:focus {
+	outline: 1px solid var(--sc-input-active-border-color);
+}
+
+.aform_input-field:focus + .aform_field-label {
+	color: var(--sc-input-active-label-color);
+}
+
+.aform_field-label {
+	color: var(--sc-input-label-color);
+	display: inline-block;
+	position: absolute;
+	padding: 0 0.25rem;
+	margin: 0rem;
+	z-index: 2;
+	font-size: 0.7rem;
+	font-weight: 300;
+	letter-spacing: 0.05rem;
+	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
+	width: auto;
+	box-sizing: border-box;
+	background: white;
+	margin: 0;
+	grid-row: 1;
+	top: 0;
+	left: 10px;
+	border: none;
+	line-height: 0;
+	transform: translateY(-50%);
+}
+.aform_input-field:disabled {
+	background: var(--sc-input-field-disabled-background);
+}
+.aform_input-field:disabled + .aform_field-label {
+	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
+}
+.aform_input-field:disabled ~ p.aform_error {
+	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
+}
+.aform_field-label::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	content: '';
+	line-height: normal;
+}
+p.aform_error {
+	display: block;
+	display: inline-block;
+	display: none;
+	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
+	padding: 0 0.25rem;
+	margin: 0rem;
+	width: auto;
+	color: var(--sc-brand-danger);
+	font-size: 0.7rem;
+	position: absolute;
+	right: 0;
+	top: 0;
+	line-height: 0;
+	background: white;
+	padding: 0.25rem;
+	transform: translate(-1rem, -50%);
+	margin: 0;
+}
+</style>
+
 <style scoped>
-@import url('@stonecrop/themes/default.css');
+/* @import url('@stonecrop/themes/default.css'); */
+.aform {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	padding: 1rem;
+	border: 1px solid var(--sc-form-border);
+	border-left: 4px solid var(--sc-form-border);
+	margin-bottom: 1rem;
+	max-width: 100%;
+}
+@media screen and (max-width: 400px) {
+	.aform {
+		flex-direction: column;
+	}
+}
 </style>

package/src/components/form/ACheckbox.vue

@@ -1,16 +1,16 @@
 <template>
-	<div class="aform__form-element">
-		<label class="aform__field-label" :for="uuid">{{ label }}</label>
-		<span class="aform__checkbox-container aform__input-field">
+	<div class="aform_form-element">
+		<label class="aform_field-label" :for="uuid">{{ label }}</label>
+		<span class="aform_checkbox-container aform_input-field">
 			<input
 				v-model="checkbox"
 				type="checkbox"
 				:id="uuid"
-				class="aform__checkbox"
+				class="aform_checkbox"
 				:readonly="readonly"
 				:required="required" />
 		</span>
-		<p class="error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+		<p class="aform_error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>
 
@@ -22,3 +22,31 @@ import { ComponentProps } from '@/types'
 const { label, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
 const checkbox = defineModel<InputHTMLAttributes['checked']>()
 </script>
+
+<style scoped>
+.aform_checkbox {
+	cursor: pointer;
+	width: auto;
+	margin-top: 0;
+	display: block;
+}
+
+.aform_checkbox:checked {
+	accent-color: var(--sc-primary-color);
+	border: 1px solid black;
+}
+
+.aform_checkbox-container {
+	width: 100%;
+	display: inline-block;
+	text-align: left;
+}
+
+.aform_checkbox-container input {
+	width: auto;
+}
+
+.aform_checkbox-container:hover + .aform_field-label {
+	color: var(--sc-input-active-label-color);
+}
+</style>

package/src/components/form/ADatePicker.vue

@@ -155,7 +155,55 @@ useKeyboardNav([
 ])
 </script>
 
-<style>
-@import url('@stonecrop/themes/default.css');
-@import url('@/theme/adate.css');
+<style scoped>
+/* @import url('@stonecrop/themes/default.css'); */
+.adatepicker {
+	font-size: var(--sc-table-font-size);
+	display: inline-table;
+	color: var(--sc-cell-text-color);
+	outline: none;
+	border-collapse: collapse;
+	/* width: calc(100% - 4px); */
+}
+
+.adatepicker tr {
+	height: 1.15rem;
+	height: 1.15rem;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.adatepicker td {
+	border: 2px solid transparent;
+	outline: 2px solid transparent;
+	min-width: 3ch;
+	max-width: 3ch;
+}
+
+.adatepicker td:focus,
+.adatepicker td:focus-within {
+	outline: 1px dashed black;
+	box-shadow: none;
+	overflow: hidden;
+	min-height: 1.15em;
+	max-height: 1.15em;
+	overflow: hidden;
+}
+.adatepicker .selectedDate {
+	outline: 1px solid black;
+	background: var(--sc-gray-20);
+	font-weight: bolder;
+}
+
+.adatepicker .todaysDate {
+	font-weight: bolder;
+	text-decoration: underline;
+	color: black;
+}
+.days-header > td {
+	font-weight: bold;
+}
+.prev-date {
+	color: var(--sc-gray-20);
+}
 </style>

package/src/components/form/ADropdown.vue

@@ -119,7 +119,7 @@ const onEnter = () => {
 // }
 </script>
 
-<style>
+<style scoped>
 /* variables taken from here: https://github.com/frappe/frappe/blob/version-13/frappe/public/scss/common/awesomeplete.scss */
 .autocomplete {
 	position: relative;

package/src/components/form/AFileAttach.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="aform__form-element aform__file-attach aform__grid--full">
+	<div class="aform_form-element aform_file-attach aform__grid--full">
 		<template v-if="files">
-			<div class="aform__file-attach-feedback">
+			<div class="aform_file-attach-feedback">
 				<p>
 					You have selected: <b>{{ fileLengthText }}</b>
 				</p>
@@ -11,10 +11,10 @@
 			</div>
 		</template>
 
-		<button type="button" @click="open()" class="aform__form-btn">
+		<button type="button" @click="open()" class="aform_form-btn">
 			{{ label }}
 		</button>
-		<button type="button" :disabled="!files" @click="reset()" class="aform__form-btn">Reset</button>
+		<button type="button" :disabled="!files" @click="reset()" class="aform_form-btn">Reset</button>
 	</div>
 </template>
 
@@ -31,3 +31,52 @@ const fileLengthText = computed(() => {
 
 onChange(files => files)
 </script>
+
+<style scoped>
+.aform_file-attach {
+	padding: 1rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border: 1px dashed var(--sc-input-border-color);
+	width: 100%;
+}
+
+@media screen and (max-width: 400px) {
+	.aform_file-attach > .aform_form-btn {
+		width: 100%;
+	}
+}
+
+.aform_file-attach-feedback {
+	color: var(--sc-input-label-color);
+	width: 100%;
+	padding: 0.5rem;
+	text-align: center;
+	align-self: center;
+
+	& > li {
+		list-style: none;
+		font-style: italic;
+	}
+	& > p {
+		margin-top: 0;
+	}
+}
+
+.aform_form-btn {
+	padding: 0.5rem 2rem;
+	width: auto;
+	border: 1px solid var(--sc-input-border-color);
+	color: var(--sc-input-label-color);
+	cursor: pointer;
+	background-color: white;
+}
+
+.aform_form-btn:disabled {
+	background-color: var(--sc-gray-5);
+}
+</style>

package/src/components/form/ANumericInput.vue

@@ -1,14 +1,14 @@
 <template>
-	<div class="aform__form-element">
-		<label class="aform__field-label" :for="uuid">{{ label }}</label>
+	<div class="aform_form-element">
 		<input
-			class="aform__input-field"
+			class="aform_input-field"
 			v-model="inputNumber"
 			type="number"
 			:id="uuid"
 			:disabled="readonly"
 			:required="required" />
-		<p class="error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+		<label class="aform_field-label" :for="uuid">{{ label }}</label>
+		<p class="aform_error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>
 

package/src/components/form/ATextInput.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="aform__form-element">
-		<label class="aform__field-label" :for="uuid">{{ label }} </label>
+	<div class="aform_form-element">
 		<input
-			class="aform__input-field"
+			class="aform_input-field"
 			v-model="inputText"
 			:id="uuid"
 			:disabled="readonly"
 			:maxlength="mask ? maskFilled && mask.length : undefined"
 			:required="required"
 			v-mask="mask" />
-		<p class="error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+		<label class="aform_field-label" :for="uuid">{{ label }} </label>
+		<p class="aform_error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>
 

package/src/components/utilities/Login.vue

@@ -9,11 +9,11 @@
 
 				<form @submit="onSubmit">
 					<div class="login-form-container">
-						<div class="login-form-email login-form-element">
-							<label id="login-email" for="email" class="aform__field-label">Email</label>
+						<div class="login-form-email aform_form-element">
+							<label id="login-email" for="email" class="aform_field-label">Email</label>
 							<input
 								id="email"
-								class="aform__input-field"
+								class="aform_input-field"
 								name="email"
 								placeholder="name@example.com"
 								type="email"
@@ -24,11 +24,11 @@
 								:disabled="isLoading" />
 						</div>
 
-						<div class="login-form-password login-form-element">
-							<label id="login-password" for="password" class="aform__field-label">Password</label>
+						<div class="login-form-password aform_form-element">
+							<label id="login-password" for="password" class="aform_field-label">Password</label>
 							<input
 								id="password"
-								class="aform__input-field"
+								class="aform_input-field"
 								name="password"
 								type="password"
 								v-model="password"
@@ -83,6 +83,108 @@ function onSubmit(event: Event) {
 }
 </script>
 
-<style>
-@import url('@/theme/login.css');
+<style scoped>
+/* @import url('@stonecrop/themes/default.css'); */
+.login-container {
+	width: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-family: var(--sc-font-family);
+}
+
+.account-container {
+	width: 100%;
+	margin-left: auto;
+	margin-top: 0.5rem;
+	margin-right: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.account-header {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	margin-top: 0.5rem;
+}
+
+#account-title {
+	font-size: 1.5rem;
+	line-height: 2rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	margin: 0;
+}
+
+#account-subtitle {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	margin: 1rem;
+}
+
+.login-form-container {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.login-form-element {
+	display: grid;
+	margin: 0.5rem 0;
+	position: relative;
+}
+.login-field {
+	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
+	outline: 1px solid transparent;
+	border: 1px solid var(--sc-input-border-color);
+	border-radius: 0.25rem;
+
+	&:focus {
+		border: 1px solid black;
+	}
+}
+
+.btn {
+	background-color: var(--sc-btn-color);
+	color: var(--sc-btn-label-color);
+	border: 1px solid var(--sc-btn-border);
+	margin: 0.5rem 0;
+	padding: 0.25rem;
+	position: relative;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--sc-btn-hover);
+	}
+
+	&:disabled {
+		background-color: var(--sc-input-field-disabled-background);
+	}
+}
+.disabled {
+	opacity: 0.5;
+}
+.loading-icon {
+	animation: spin 1s linear infinite forwards;
+	display: inline-block;
+	margin-right: 0.2rem;
+	line-height: 0;
+	font-size: 1rem;
+	position: relative;
+	top: 0.2rem;
+}
+
+/* ANIMATION */
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
 </style>

package/src/theme/fields.css

@@ -1,13 +1,13 @@
 /* Styles for all types of fields: Text and Number Inputs, Radios, Checkboxes, etc. */
-.form-element {
+/* .form-element {
 	min-width: 40ch;
 	border: 1px solid transparent;
 	padding: 0;
 	margin: 0;
 	margin-right: 0.5rem;
 	margin-bottom: 0.5rem;
-}
-.input-field {
+} */
+/* .input-field {
 	outline: 1px solid transparent;
 	border: 1px solid var(--sc-input-border-color);
 	padding: 0.25rem;
@@ -53,7 +53,7 @@ p.error {
 }
 
 /**  CHECKBOX **/
-.checkbox {
+/* .checkbox {
 	visibility: hidden;
 	display: none;
 }
@@ -81,4 +81,4 @@ p.error {
 
 .checkbox-container:hover + .field-label {
 	color: var(--sc-input-active-label-color);
-}
+} */

package/src/theme/adate.css

@@ -1,49 +0,0 @@
-.adatepicker {
-	font-size: var(--sc-table-font-size);
-	display: inline-table;
-	color: var(--sc-cell-text-color);
-	outline: none;
-	border-collapse: collapse;
-	/* width: calc(100% - 4px); */
-}
-
-.adatepicker tr {
-	height: 1.15rem;
-	height: 1.15rem;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.adatepicker td {
-	border: 2px solid transparent;
-	outline: 2px solid transparent;
-	min-width: 3ch;
-	max-width: 3ch;
-}
-
-.adatepicker td:focus,
-.adatepicker td:focus-within {
-	outline: 1px dashed black;
-	box-shadow: none;
-	overflow: hidden;
-	min-height: 1.15em;
-	max-height: 1.15em;
-	overflow: hidden;
-}
-.adatepicker .selectedDate {
-	outline: 1px solid black;
-	background: var(--sc-gray-20);
-	font-weight: bolder;
-}
-
-.adatepicker .todaysDate {
-	font-weight: bolder;
-	text-decoration: underline;
-	color: black;
-}
-.days-header > td {
-	font-weight: bold;
-}
-.prev-date {
-	color: var(--sc-gray-20);
-}