@swisspost/design-system-styles 7.4.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/floating-label.css +1 -1
- package/components/floating-label.scss +15 -1
- package/components/form-select.css +1 -1
- package/components/form-select.scss +0 -50
- package/components/form-validation.css +1 -1
- package/components/form-validation.scss +0 -81
- package/components/forms.css +1 -1
- package/components/forms.scss +3 -10
- package/components/pagination.css +1 -1
- package/components/pagination.scss +1 -0
- package/components/stepper.css +1 -1
- package/components/stepper.scss +1 -1
- package/index.css +3 -3
- package/intranet.css +3 -3
- package/package.json +11 -11
- package/variables/components/_form-select.scss +0 -8
- package/variables/components/_tables.scss +1 -1
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:4.6875rem;min-height:4.6875rem;line-height:1.5}.form-floating>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:.75rem 1rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:2px solid rgba(0,0,0,0);transform-origin:0 0;transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:.75rem 1rem}.form-floating>.form-control::placeholder,.form-floating>.form-control-plaintext::placeholder{color:rgba(0,0,0,0)}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown),.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown){padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:-webkit-autofill,.form-floating>.form-control-plaintext:-webkit-autofill{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-control-plaintext~label,.form-floating>.form-select~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-control-plaintext~label::after,.form-floating>.form-select~label::after{position:absolute;inset:.75rem .5rem;z-index:-1;height:4.6875rem;content:"";background-color:#fff;border-radius:0}.form-floating>.form-control:-webkit-autofill~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control-plaintext~label{border-width:2px 0}.form-floating>:disabled~label,.form-floating>.form-control:disabled~label{color:#6c757d}.form-floating>:disabled~label::after,.form-floating>.form-control:disabled~label::after{background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg,.form-floating>.form-control-plaintext.form-control,.form-floating>.form-control-plaintext.form-select{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg,.form-floating>.form-control,.form-floating>.form-select{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button,.form-floating>.form-control::file-selector-button,.form-floating>.form-select::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg,.form-floating>textarea.form-control,.form-floating>textarea.form-select{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg,.form-floating>.form-control-color.form-control,.form-floating>.form-control-color.form-select{height:3.125rem}.form-floating>label{display:block;top:2px;left:2px;margin:0;padding-inline:1rem;padding-top:1.59375rem;padding-bottom:0;border:0;color:#333;font-size:1rem;width:auto;height:auto;max-width:calc(100% - (4px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:1rem 0;transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms linear}.form-floating>.form-control:focus::placeholder{color:rgba(var(--post-contrast-color-rgb), 0.6)}.form-floating>.form-control:focus::input-placeholder{color:rgba(var(--post-contrast-color-rgb), 0.6)}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label{color:#333;padding-top:.7rem;max-width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px);transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-control:disabled~label{color:var(--post-gray-60)}.form-floating>.form-control[type=file]:focus,.form-floating>.form-control[type=file]:not(:placeholder-shown){padding-top:1.995rem}.form-floating>.form-control[type=week],.form-floating>.form-control[type=month],.form-floating>.form-control[type=date],.form-floating>.form-control[type=time]{background-position:right calc(0.375em + 0.4375rem) bottom .5rem}.form-floating>.form-control.form-control-sm{font-size:.875rem;height:3rem;min-height:3rem;padding-inline:1rem}.form-floating>.form-control.form-control-sm[type=date]::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-floating>.form-control.form-control-sm~label{font-size:.875rem;padding-top:.75rem;padding-inline:calc(1rem - 2px)}.form-floating>.form-control.form-control-sm:focus,.form-floating>.form-control.form-control-sm:not(:placeholder-shown){padding-top:.5rem}.form-floating>.form-control.form-control-sm:focus~label,.form-floating>.form-control.form-control-sm:not(:placeholder-shown)~label{padding-top:.25rem;font-size:.75rem}.form-floating>.form-select{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select~label{color:#333;padding-top:.7rem;max-width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px);transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-select:disabled~label{color:var(--post-gray-60)}.form-floating>.form-select:empty,.form-floating>.form-select.form-select-empty{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select:empty~label,.form-floating>.form-select.form-select-empty~label{padding-top:1.59375rem;max-width:calc(100% - (4px));transform:none}.form-floating>.form-select.form-select-sm{padding-inline:1rem;padding-top:.5rem;font-size:.875rem;height:3rem;min-height:3rem}.form-floating>.form-select.form-select-sm~label{padding-top:.25rem;font-size:.75rem;padding-inline:1rem}.form-floating>.form-select.form-select-sm:empty~label,.form-floating>.form-select.form-select-sm.form-select-empty~label{padding-top:.75rem;font-size:.875rem}.form-floating>.form-select[multiple]{padding-top:2rem;padding-bottom:0;height:auto}.form-floating>.form-select[multiple]~label{padding-top:.5625rem;padding-bottom:0;width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 1.3333333333rem);height:auto;left:6px}.form-floating>.form-select[multiple].form-select-sm{padding-top:1.5rem}.form-floating>.form-select[multiple].form-select-sm~label{left:4px}.form-floating>.form-select[multiple]:not(:disabled)~label{background:#fff}.form-floating>.form-select[multiple]:empty~label{padding-top:.75rem;padding-bottom:.75rem;width:calc(100% - (4px) - 1rem)}.form-floating>textarea.form-control{padding-top:1.625rem !important;padding-bottom:.5rem;padding-right:1.5rem;min-height:3.875rem;height:auto}.form-floating>textarea.form-control~label{padding-bottom:0;width:calc(100% - (4px));max-width:none;height:unset;padding-top:1rem}.form-floating>textarea.form-control:focus,.form-floating>textarea.form-control:not(:placeholder-shown){padding-bottom:.5rem}.form-floating>textarea.form-control:focus~label,.form-floating>textarea.form-control:not(:placeholder-shown)~label{padding-top:.5rem;width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 1.3333333333rem);max-width:none;background:#fff}.form-floating>textarea.form-control.form-control-sm{padding-top:1.625rem !important;padding-right:1.5rem;font-size:.875rem;min-height:3.6875rem;height:auto}.form-floating>textarea.form-control.form-control-sm~label{font-size:.875rem;padding-left:1rem;padding-top:1rem;padding-right:1.5rem}.form-floating>textarea.form-control.form-control-sm:focus,.form-floating>textarea.form-control.form-control-sm:not(:placeholder-shown){padding-bottom:.5rem}.form-floating>textarea.form-control.form-control-sm:focus~label,.form-floating>textarea.form-control.form-control-sm:not(:placeholder-shown)~label{transform:scale(0.8571428571);padding-top:.5rem;width:calc(100%*1.1666666667 - 0.3333333333rem - 4.6666666667px - 1.1666666667rem);max-width:none;background:#fff}.form-floating>textarea.form-control:is(.is-valid,.is-invalid)~label{width:calc(100% - (4px) - 0.5rem - 32px)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid):focus~label,.form-floating>textarea.form-control:is(.is-valid,.is-invalid):not(:placeholder-shown)~label{width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 0.6666666667rem - 2.6666666667rem)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm~label{width:calc(100% - (4px) - 0.5rem - 24px)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:focus,.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:not(:placeholder-shown){padding-right:2.5rem}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:focus~label,.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:not(:placeholder-shown)~label{width:calc(100%*1.1666666667 - 0.5833333333rem - 4.6666666667px - 0.5833333333rem - 28px)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-floating>input::placeholder,.form-floating>textarea::placeholder{opacity:0}.form-floating>input::input-placeholder,.form-floating>textarea::input-placeholder{opacity:0}}
|
|
29
|
+
*/.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:4.6875rem;min-height:4.6875rem;line-height:1.5}.form-floating>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:.75rem 1rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:2px solid rgba(0,0,0,0);transform-origin:0 0;transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:.75rem 1rem}.form-floating>.form-control::placeholder,.form-floating>.form-control-plaintext::placeholder{color:rgba(0,0,0,0)}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown),.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown){padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:-webkit-autofill,.form-floating>.form-control-plaintext:-webkit-autofill{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-control-plaintext~label,.form-floating>.form-select~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-control-plaintext~label::after,.form-floating>.form-select~label::after{position:absolute;inset:.75rem .5rem;z-index:-1;height:4.6875rem;content:"";background-color:#fff;border-radius:0}.form-floating>.form-control:-webkit-autofill~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control-plaintext~label{border-width:2px 0}.form-floating>:disabled~label,.form-floating>.form-control:disabled~label{color:#6c757d}.form-floating>:disabled~label::after,.form-floating>.form-control:disabled~label::after{background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg,.form-floating>.form-control-plaintext.form-control,.form-floating>.form-control-plaintext.form-select{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg,.form-floating>.form-control,.form-floating>.form-select{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button,.form-floating>.form-control::file-selector-button,.form-floating>.form-select::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg,.form-floating>textarea.form-control,.form-floating>textarea.form-select{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg,.form-floating>.form-control-color.form-control,.form-floating>.form-control-color.form-select{height:3.125rem}.form-floating>label{display:block;top:2px;left:2px;margin:0;padding-inline:1rem;padding-top:1.59375rem;padding-bottom:0;border:0;color:#333;font-size:1rem;width:auto;height:auto;max-width:calc(100% - (4px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:1rem 0;transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms linear}.form-floating>.form-control::placeholder{opacity:0}.form-floating>.form-control::input-placeholder{opacity:0}.form-floating>.form-control:focus::placeholder{color:rgba(var(--post-contrast-color-rgb), 0.6);opacity:1;transition:opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-control:focus::input-placeholder{color:rgba(var(--post-contrast-color-rgb), 0.6);opacity:1;transition:opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label{color:#333;padding-top:.7rem;max-width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px);transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-control:disabled~label{color:var(--post-gray-60)}.form-floating>.form-control:hover~label{color:#000}.form-floating>.form-control[type=file]:focus,.form-floating>.form-control[type=file]:not(:placeholder-shown){padding-top:1.995rem}.form-floating>.form-control[type=week],.form-floating>.form-control[type=month],.form-floating>.form-control[type=date],.form-floating>.form-control[type=time]{background-position:right calc(0.375em + 0.4375rem) bottom .5rem}.form-floating>.form-control.form-control-sm{font-size:.875rem;height:3rem;min-height:3rem;padding-inline:1rem}.form-floating>.form-control.form-control-sm[type=date]::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-floating>.form-control.form-control-sm~label{font-size:.875rem;padding-top:.75rem;padding-inline:1rem}.form-floating>.form-control.form-control-sm:focus,.form-floating>.form-control.form-control-sm:not(:placeholder-shown){padding-top:.5rem}.form-floating>.form-control.form-control-sm:focus~label,.form-floating>.form-control.form-control-sm:not(:placeholder-shown)~label{padding-top:.25rem;font-size:.75rem}.form-floating>.form-select{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select~label{color:#333;padding-top:.7rem;max-width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px);transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1),width 0ms 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-floating>.form-select:disabled~label{color:var(--post-gray-60)}.form-floating>.form-select:empty,.form-floating>.form-select.form-select-empty{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select:empty~label,.form-floating>.form-select.form-select-empty~label{padding-top:1.59375rem;max-width:calc(100% - (4px));transform:none}.form-floating>.form-select.form-select-sm{padding-inline:1rem;padding-top:.5rem;font-size:.875rem;height:3rem;min-height:3rem}.form-floating>.form-select.form-select-sm~label{padding-top:.25rem;font-size:.75rem;padding-inline:1rem}.form-floating>.form-select.form-select-sm:empty~label,.form-floating>.form-select.form-select-sm.form-select-empty~label{padding-top:.75rem;font-size:.875rem}.form-floating>.form-select[multiple]{padding-top:2rem;padding-bottom:0;height:auto}.form-floating>.form-select[multiple]~label{padding-top:.5625rem;padding-bottom:0;width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 1.3333333333rem);height:auto;left:6px}.form-floating>.form-select[multiple].form-select-sm{padding-top:1.5rem}.form-floating>.form-select[multiple].form-select-sm~label{left:4px}.form-floating>.form-select[multiple]:not(:disabled)~label{background:#fff}.form-floating>.form-select[multiple]:empty~label{padding-top:.75rem;padding-bottom:.75rem;width:calc(100% - (4px) - 1rem)}.form-floating>textarea.form-control{padding-top:1.625rem !important;padding-bottom:.5rem;padding-right:1.5rem;min-height:3.875rem;height:auto}.form-floating>textarea.form-control~label{padding-bottom:0;width:calc(100% - (4px));max-width:none;height:unset;padding-top:1rem}.form-floating>textarea.form-control:focus,.form-floating>textarea.form-control:not(:placeholder-shown){padding-bottom:.5rem}.form-floating>textarea.form-control:focus~label,.form-floating>textarea.form-control:not(:placeholder-shown)~label{padding-top:.5rem;width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 1.3333333333rem);max-width:none;background:#fff}.form-floating>textarea.form-control.form-control-sm{padding-top:1.625rem !important;padding-right:1.5rem;font-size:.875rem;min-height:3.6875rem;height:auto}.form-floating>textarea.form-control.form-control-sm~label{font-size:.875rem;padding-left:1rem;padding-top:1rem;padding-right:1.5rem}.form-floating>textarea.form-control.form-control-sm:focus,.form-floating>textarea.form-control.form-control-sm:not(:placeholder-shown){padding-bottom:.5rem}.form-floating>textarea.form-control.form-control-sm:focus~label,.form-floating>textarea.form-control.form-control-sm:not(:placeholder-shown)~label{transform:scale(0.8571428571);padding-top:.5rem;width:calc(100%*1.1666666667 - 0.3333333333rem - 4.6666666667px - 1.1666666667rem);max-width:none;background:#fff}.form-floating>textarea.form-control:is(.is-valid,.is-invalid)~label{width:calc(100% - (4px) - 0.5rem - 32px)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid):focus~label,.form-floating>textarea.form-control:is(.is-valid,.is-invalid):not(:placeholder-shown)~label{width:calc(100%*1.3333333333 - 0.6666666667rem - 5.3333333333px - 0.6666666667rem - 2.6666666667rem)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm~label{width:calc(100% - (4px) - 0.5rem - 24px)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:focus,.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:not(:placeholder-shown){padding-right:2.5rem}.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:focus~label,.form-floating>textarea.form-control:is(.is-valid,.is-invalid).form-control-sm:not(:placeholder-shown)~label{width:calc(100%*1.1666666667 - 0.5833333333rem - 4.6666666667px - 0.5833333333rem - 28px)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-floating>input::placeholder,.form-floating>textarea::placeholder{opacity:0}.form-floating>input::input-placeholder,.form-floating>textarea::input-placeholder{opacity:0}}
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
@use './../variables/spacing';
|
|
17
17
|
@use './../variables/components/forms';
|
|
18
18
|
@use './../variables/components/form-validation';
|
|
19
|
+
@use './../variables/animation';
|
|
20
|
+
@use './../variables/color' as c;
|
|
19
21
|
|
|
20
22
|
.form-floating {
|
|
21
23
|
> label {
|
|
@@ -43,9 +45,15 @@
|
|
|
43
45
|
// disable stylelint here, because the classes are coming from bs5
|
|
44
46
|
@extend .form-control-lg; /* stylelint-disable-line */
|
|
45
47
|
|
|
48
|
+
@include forms-mx.placeholder {
|
|
49
|
+
opacity: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
46
52
|
&:focus {
|
|
47
53
|
@include forms-mx.placeholder {
|
|
48
54
|
color: rgba(var(--post-contrast-color-rgb), 0.6);
|
|
55
|
+
opacity: 1;
|
|
56
|
+
transition: opacity animation.$transition-base-timing;
|
|
49
57
|
}
|
|
50
58
|
}
|
|
51
59
|
|
|
@@ -72,6 +80,12 @@
|
|
|
72
80
|
}
|
|
73
81
|
}
|
|
74
82
|
|
|
83
|
+
&:hover {
|
|
84
|
+
~ label {
|
|
85
|
+
color: c.$black;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
75
89
|
&[type='file'] {
|
|
76
90
|
&:focus,
|
|
77
91
|
&:not(:placeholder-shown) {
|
|
@@ -98,7 +112,7 @@
|
|
|
98
112
|
~ label {
|
|
99
113
|
font-size: forms.$form-floating-label-font-size-placeholder-sm;
|
|
100
114
|
padding-top: forms.$form-floating-label-padding-t-sm;
|
|
101
|
-
padding-inline:
|
|
115
|
+
padding-inline: forms.$form-floating-padding-x-sm;
|
|
102
116
|
}
|
|
103
117
|
|
|
104
118
|
&:focus,
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");display:block;width:100%;padding:.875rem 3.375rem .875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right 1.125rem center;background-size:16px 12px;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-select{transition:none}}.form-select:focus{border-color:inherit;outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:1.125rem;background-image:none}.form-select:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:#999}.form-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #000}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;font-size:0.875rem;border-radius:0}.form-select-lg{padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;font-size:1.25rem;border-radius:0}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-select-wrapper{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.form-select-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-select-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-select-wrapper)>.form-select{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}:not(.form-select-wrapper)>.form-select:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E")
|
|
29
|
+
*/.form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");display:block;width:100%;padding:.875rem 3.375rem .875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right 1.125rem center;background-size:16px 12px;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-select{transition:none}}.form-select:focus{border-color:inherit;outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:1.125rem;background-image:none}.form-select:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:#999}.form-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #000}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;font-size:0.875rem;border-radius:0}.form-select-lg{padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;font-size:1.25rem;border-radius:0}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-select-wrapper{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.form-select-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-select-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-select-wrapper)>.form-select{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}:not(.form-select-wrapper)>.form-select:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E")}.form-select:focus{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:not(:disabled):hover,.form-select:not(:disabled):focus{border-color:FieldText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:not(:disabled):hover{border-color:Highlight}}.form-select:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}.form-select:disabled~.form-text{color:var(--post-gray-60)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:disabled{color:GrayText;border-color:GrayText}}.form-select:not([multiple]):disabled{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23999999' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E"),var(--form-select-indicator),var(--bs-form-select-bg-icon, none)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:Field;border-color:FieldText;color:FieldText}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: active)and (prefers-color-scheme: light),(-ms-high-contrast: white-on-black)and (prefers-color-scheme: light){.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E")}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:focus-visible{color:FieldText}}.form-select-rg{padding:.625rem .875rem;font-size:1rem;line-height:1.5;background-size:32px}.form-select-sm{font-size:.875rem;line-height:1.5;min-height:1.75rem;padding-block:.25rem;padding-inline:1rem;background-size:24px}.form-select-lg{font-size:1rem !important;line-height:1.5;min-height:3.125rem;background-size:32px}
|
|
@@ -26,8 +26,6 @@
|
|
|
26
26
|
|
|
27
27
|
.form-select {
|
|
28
28
|
--form-select-indicator: #{form-select.$form-select-indicator};
|
|
29
|
-
--form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
|
|
30
|
-
--form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};
|
|
31
29
|
|
|
32
30
|
&:focus {
|
|
33
31
|
box-shadow: none; // Override bootstrap
|
|
@@ -63,62 +61,14 @@
|
|
|
63
61
|
background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
|
|
64
62
|
var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
|
|
65
63
|
}
|
|
66
|
-
|
|
67
|
-
&.is-valid,
|
|
68
|
-
&.is-invalid {
|
|
69
|
-
background-position:
|
|
70
|
-
right b.$form-select-padding-x * 2.5 center,
|
|
71
|
-
b.$form-select-bg-position;
|
|
72
|
-
|
|
73
|
-
&.form-select-lg {
|
|
74
|
-
background-position:
|
|
75
|
-
right b.$form-select-padding-x * 3 center,
|
|
76
|
-
b.$form-select-bg-position;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&.is-valid {
|
|
81
|
-
background-image: var(--form-select-indicator-success), var(--form-select-indicator),
|
|
82
|
-
var(--bs-form-select-bg-icon, none);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&.is-invalid {
|
|
86
|
-
background-image: var(--form-select-indicator-error), var(--form-select-indicator),
|
|
87
|
-
var(--bs-form-select-bg-icon, none);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
&[multiple] {
|
|
92
|
-
&.is-valid,
|
|
93
|
-
&.is-invalid {
|
|
94
|
-
background-position: right b.$form-select-padding-x * 1.5 center;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&.is-valid {
|
|
98
|
-
background-image: var(--form-select-indicator-success), var(--bs-form-select-bg-icon, none);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&.is-invalid {
|
|
102
|
-
background-image: var(--form-select-indicator-error), var(--bs-form-select-bg-icon, none);
|
|
103
|
-
}
|
|
104
64
|
}
|
|
105
65
|
|
|
106
66
|
@include utilities.high-contrast-mode() {
|
|
107
67
|
--form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
|
|
108
|
-
--form-select-indicator-success: #{b.escape-svg(
|
|
109
|
-
form-select.$form-select-indicator-success-hcm-dark
|
|
110
|
-
)};
|
|
111
|
-
--form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error-hcm-dark)};
|
|
112
68
|
background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
|
|
113
69
|
|
|
114
70
|
@media (prefers-color-scheme: light) {
|
|
115
71
|
--form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
|
|
116
|
-
--form-select-indicator-success: #{b.escape-svg(
|
|
117
|
-
form-select.$form-select-indicator-success-hcm-light
|
|
118
|
-
)};
|
|
119
|
-
--form-select-indicator-error: #{b.escape-svg(
|
|
120
|
-
form-select.$form-select-indicator-error-hcm-light
|
|
121
|
-
)};
|
|
122
72
|
background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
|
|
123
73
|
}
|
|
124
74
|
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";height:1.125rem;width:1.125rem;display:inline-block;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .
|
|
29
|
+
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";height:1.125rem;width:1.125rem;display:inline-block;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):valid,.input-group>.form-control:not(:focus).is-valid,.was-validated .input-group>.form-select:not(:focus):valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.input-group>.form-floating:not(:focus-within).is-valid{z-index:3}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):invalid,.input-group>.form-control:not(:focus).is-invalid,.was-validated .input-group>.form-select:not(:focus):invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.input-group>.form-floating:not(:focus-within).is-invalid{z-index:4}.is-invalid~.invalid-feedback,.is-valid~.valid-feedback,post-card-control~.invalid-feedback{display:inline-flex}.form-control.is-invalid:not(:disabled),.form-select.is-invalid:not(:disabled){border-color:#a51728}.form-control.is-invalid:not(:disabled):focus,.form-select.is-invalid:not(:disabled):focus{border-color:#a51728}.form-control.is-invalid.form-control-sm~.invalid-feedback,.form-select.is-invalid.form-control-sm~.invalid-feedback{padding:.25rem 1rem}.form-control.is-valid:not(:disabled),.form-select.is-valid:not(:disabled){border-color:var(--post-success)}.form-control.is-valid:not(:disabled):focus,.form-select.is-valid:not(:disabled):focus{border-color:var(--post-success)}.form-control.is-valid.form-control-sm~.valid-feedback,.form-select.is-valid.form-control-sm~.valid-feedback{padding:.25rem 1rem}.form-check-input.is-invalid{border-color:#a51728}.form-check-input.is-invalid~.form-check-label{color:#a51728}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid{border-color:inherit}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid~.form-check-label{color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input.is-invalid{border-color:FieldText}}
|
|
@@ -71,30 +71,6 @@
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.form-control {
|
|
75
|
-
@include b.form-validation-state-selector($state) {
|
|
76
|
-
padding-right: b.$input-height-inner;
|
|
77
|
-
background-repeat: no-repeat;
|
|
78
|
-
background-position: right b.$input-height-inner-quarter center;
|
|
79
|
-
background-size: form-validation.$form-feedback-icon-size;
|
|
80
|
-
|
|
81
|
-
&.form-control-sm {
|
|
82
|
-
background-size: forms.$form-bg-size-sm;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&.form-control-lg {
|
|
86
|
-
background-size: forms.$form-bg-size;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
textarea.form-control {
|
|
92
|
-
@include b.form-validation-state-selector($state) {
|
|
93
|
-
padding-right: b.$input-height-inner;
|
|
94
|
-
background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
74
|
.input-group {
|
|
99
75
|
> .form-control:not(:focus),
|
|
100
76
|
> .form-select:not(:focus),
|
|
@@ -145,63 +121,6 @@ post-card-control ~ .invalid-feedback {
|
|
|
145
121
|
padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
|
|
146
122
|
}
|
|
147
123
|
}
|
|
148
|
-
|
|
149
|
-
&.is-invalid,
|
|
150
|
-
&.is-valid {
|
|
151
|
-
padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
|
|
152
|
-
background-repeat: no-repeat;
|
|
153
|
-
background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
|
|
154
|
-
background-position: right b.$input-height-inner-quarter center;
|
|
155
|
-
|
|
156
|
-
&.form-select-sm,
|
|
157
|
-
&.form-control-sm {
|
|
158
|
-
padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
|
|
159
|
-
background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
&.form-select-lg,
|
|
163
|
-
&.form-control-lg {
|
|
164
|
-
padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
|
|
165
|
-
background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
textarea.form-control {
|
|
171
|
-
&.is-invalid,
|
|
172
|
-
&.is-valid {
|
|
173
|
-
background-position: right spacing.$size-micro top spacing.$size-mini;
|
|
174
|
-
|
|
175
|
-
&.form-control-sm {
|
|
176
|
-
background-position: right spacing.$size-micro top spacing.$size-mini;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.form-control:not([type='file']) {
|
|
182
|
-
&.is-invalid {
|
|
183
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
|
|
184
|
-
|
|
185
|
-
@include utilities-mx.high-contrast-mode() {
|
|
186
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
|
|
187
|
-
|
|
188
|
-
@media (prefers-color-scheme: light) {
|
|
189
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
&.is-valid {
|
|
195
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
|
|
196
|
-
|
|
197
|
-
@include utilities-mx.high-contrast-mode() {
|
|
198
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
|
|
199
|
-
|
|
200
|
-
@media (prefers-color-scheme: light) {
|
|
201
|
-
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
124
|
}
|
|
206
125
|
|
|
207
126
|
.form-check-input {
|
package/components/forms.css
CHANGED
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.form-label{margin-bottom:.5rem;color:var(--post-contrast-color)}.col-form-label{padding-top:calc(0.875rem + 2px);padding-bottom:calc(0.875rem + 2px);margin-bottom:0;font-size:inherit;line-height:1.5;color:var(--post-contrast-color)}.col-form-label-lg{padding-top:calc(0.75rem + 2px);padding-bottom:calc(0.75rem + 2px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(0.25rem + 2px);padding-bottom:calc(0.25rem + 2px);font-size:0.875rem}.form-text{margin-top:.25rem;font-size:0.8125rem;color:var(--post-contrast-color)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg{height:3.125rem}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select,.input-group>.form-floating{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:center;white-space:nowrap;background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.6);border:2px solid #333;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:4.5rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(2px*-1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.form-control-rg{padding:.625rem .875rem;font-size:1rem;line-height:1.5}.form-control-sm{font-size:.875rem;line-height:1.5;min-height:1.75rem;padding-block:.25rem;padding-inline:1rem}.form-control-lg{font-size:1rem !important;line-height:1.5;min-height:3.125rem}textarea.form-control-lg{padding-top:1rem;padding-bottom:.5rem;padding-right:1.5rem;min-height:3.25rem}textarea.form-control-sm{padding-top:.5rem;padding-right:1.5rem;padding-bottom:0;min-height:2.5625rem}select.form-control-rg:not([size]):not([multiple]){height:calc(2.75rem + 4px)}.form-control-wrapper{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.form-control-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-control-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-control-wrapper)>.form-control{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}:not(.form-control-wrapper)>.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-control{position:relative}.form-control:focus{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover,.form-control:not(:disabled):focus{border-color:FieldText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover{border-color:Highlight}}.form-control:disabled{color:var(--post-gray-40);border:2px dashed}.form-control:disabled~.form-text{color:var(--post-gray-60)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:disabled{border-color:GrayText !important;background-color:Field !important;color:GrayText}}.form-control[readonly]:not(:disabled){border-color:#000;background-color:#fff}.form-control[type=file]{position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control[type=file]:disabled{color:GrayText;border-color:GrayText}}.form-control[type=file]::file-selector-button{display:block;position:absolute;top:0;bottom:0;right:0;margin-inline:0;height:auto;background-color:inherit;border-right:0 none;border-left:inherit}@supports(background: -webkit-named-image(i)){.form-control[type=file]::file-selector-button{display:initial;position:initial;margin-inline:0;padding-inline:0;width:0;border:0 none}.form-control[type=file]::after{display:flex;align-items:center;content:"Choose File";position:absolute;top:0;bottom:0;right:0;z-index:2;padding-inline:.875rem;background-color:inherit;border-left:inherit;text-align:center}[lang=de] .form-control[type=file]::after{content:"Datei auswählen"}[lang=fr] .form-control[type=file]::after{content:"Choisir un fichier"}[lang=it] .form-control[type=file]::after{content:"Scegli file"}.form-control[type=file][multiple]::after{content:"Choose Files"}[lang=de] .form-control[type=file][multiple]::after{content:"Dateien auswählen"}[lang=fr] .form-control[type=file][multiple]::after{content:"Choisir des fichiers"}}.form-control[type=file].form-control-sm::after{padding-inline:.25rem}.form-control[type=file].form-control-rg{min-height:calc(2.75rem + 4px)}.form-control[type=file].form-control-rg::after{padding-inline:.625rem}.form-control[type=file].form-control-lg::after{padding-inline:.75rem}.form-label:has(+.form-control-sm,+.form-select-sm){font-size:.875rem;margin-bottom:.25rem}.form-label:has(+.form-control[disabled],+.form-select[disabled]){color:var(--post-gray-60)}
|
|
29
|
+
*/.form-label{margin-bottom:.5rem;color:var(--post-contrast-color)}.col-form-label{padding-top:calc(0.875rem + 2px);padding-bottom:calc(0.875rem + 2px);margin-bottom:0;font-size:inherit;line-height:1.5;color:var(--post-contrast-color)}.col-form-label-lg{padding-top:calc(0.75rem + 2px);padding-bottom:calc(0.75rem + 2px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(0.25rem + 2px);padding-bottom:calc(0.25rem + 2px);font-size:0.875rem}.form-text{margin-top:.25rem;font-size:0.8125rem;color:var(--post-contrast-color)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg{height:3.125rem}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select,.input-group>.form-floating{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:center;white-space:nowrap;background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.6);border:2px solid #333;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:4.5rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(2px*-1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.form-control-rg{padding:.625rem .875rem;font-size:1rem;line-height:1.5}.form-control-sm{font-size:.875rem;line-height:1.5;min-height:1.75rem;padding-block:.25rem;padding-inline:1rem}.form-control-lg{font-size:1rem !important;line-height:1.5;min-height:3.125rem}textarea.form-control-lg{padding-top:1rem;padding-bottom:.5rem;padding-right:1.5rem;min-height:3.25rem}textarea.form-control-sm{padding-top:.5rem;padding-right:1.5rem;padding-bottom:0;min-height:2.5625rem}select.form-control-rg:not([size]):not([multiple]){height:calc(2.75rem + 4px)}.form-control-wrapper{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.form-control-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-control-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-control-wrapper)>.form-control{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}:not(.form-control-wrapper)>.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-control{position:relative}.form-control:focus{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover,.form-control:not(:disabled):focus{border-color:FieldText}}.form-control:not(:disabled):hover{border-color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover{border-color:Highlight}}.form-control:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}.form-control:disabled~.form-text{color:var(--post-gray-60)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:disabled{color:GrayText;border-color:GrayText}}.form-control[readonly]:not(:disabled){border-color:#000;background-color:#fff}.form-control[type=file]{position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control[type=file]:disabled{color:GrayText;border-color:GrayText}}.form-control[type=file]::file-selector-button{display:block;position:absolute;top:0;bottom:0;right:0;margin-inline:0;height:auto;background-color:inherit;border-right:0 none;border-left:inherit}@supports(background: -webkit-named-image(i)){.form-control[type=file]::file-selector-button{display:initial;position:initial;margin-inline:0;padding-inline:0;width:0;border:0 none}.form-control[type=file]::after{display:flex;align-items:center;content:"Choose File";position:absolute;top:0;bottom:0;right:0;z-index:2;padding-inline:.875rem;background-color:inherit;border-left:inherit;text-align:center}[lang=de] .form-control[type=file]::after{content:"Datei auswählen"}[lang=fr] .form-control[type=file]::after{content:"Choisir un fichier"}[lang=it] .form-control[type=file]::after{content:"Scegli file"}.form-control[type=file][multiple]::after{content:"Choose Files"}[lang=de] .form-control[type=file][multiple]::after{content:"Dateien auswählen"}[lang=fr] .form-control[type=file][multiple]::after{content:"Choisir des fichiers"}}.form-control[type=file].form-control-sm::after{padding-inline:.25rem}.form-control[type=file].form-control-rg{min-height:calc(2.75rem + 4px)}.form-control[type=file].form-control-rg::after{padding-inline:.625rem}.form-control[type=file].form-control-lg::after{padding-inline:.75rem}.form-label:has(+.form-control-sm,+.form-select-sm){font-size:.875rem;margin-bottom:.25rem}.form-label:has(+.form-control[disabled],+.form-select[disabled]){color:var(--post-gray-60)}
|
package/components/forms.scss
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@use './../variables/components/forms';
|
|
7
7
|
@use './../variables/type';
|
|
8
8
|
@use './../variables/spacing';
|
|
9
|
+
@use './../variables/color';
|
|
9
10
|
|
|
10
11
|
@use './../functions/sizing';
|
|
11
12
|
|
|
@@ -85,25 +86,17 @@ select.form-control-rg:not([size]):not([multiple]) {
|
|
|
85
86
|
}
|
|
86
87
|
|
|
87
88
|
&:hover {
|
|
89
|
+
border-color: color.$black;
|
|
88
90
|
@include utilities.high-contrast-mode {
|
|
89
91
|
border-color: Highlight;
|
|
90
92
|
}
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
95
|
|
|
94
|
-
|
|
95
|
-
color: forms.$input-disabled-border-color;
|
|
96
|
-
border: forms.$input-disabled-border-style;
|
|
97
|
-
|
|
96
|
+
@include utilities.disabled-style {
|
|
98
97
|
~ .form-text {
|
|
99
98
|
color: var(--post-gray-60);
|
|
100
99
|
}
|
|
101
|
-
|
|
102
|
-
@include utilities.high-contrast-mode {
|
|
103
|
-
border-color: GrayText !important;
|
|
104
|
-
background-color: Field !important;
|
|
105
|
-
color: GrayText;
|
|
106
|
-
}
|
|
107
100
|
}
|
|
108
101
|
|
|
109
102
|
&[readonly]:not(:disabled) {
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.pagination{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.5rem;--bs-pagination-font-size:1rem;--bs-pagination-color: hsl(0, 0%, 40%);--bs-pagination-bg: #fff;--bs-pagination-border-width: 2px;--bs-pagination-border-color: hsl(0, 0%, 90%);--bs-pagination-border-radius: var(--bs-border-radius);--bs-pagination-hover-color: #000;--bs-pagination-hover-bg: #faf9f8;--bs-pagination-hover-border-color: hsl(0, 0%, 90%);--bs-pagination-focus-color: var(--bs-link-hover-color);--bs-pagination-focus-bg: var(--bs-secondary-bg);--bs-pagination-focus-box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);--bs-pagination-active-color: #000;--bs-pagination-active-bg: #fc0;--bs-pagination-active-border-color: #fc0;--bs-pagination-disabled-color: hsl(0, 0%, 60%);--bs-pagination-disabled-bg: #faf9f8;--bs-pagination-disabled-border-color: hsl(0, 0%, 90%);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(2px*-1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius: var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius: var(--bs-border-radius-sm)}.pagination .page-item{width:calc(2.25rem + 4px);color:#666}.pagination .page-item.disabled:first-child,.pagination .page-item.disabled:last-child{display:none}.pagination .page-item .page-link{height:100%;color:inherit;text-align:center;text-decoration:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination .page-item .page-link:focus,.pagination .page-item .page-link:focus-within,.pagination .page-item .page-link:focus-visible{border-radius:4px;outline:2px solid highlight}}.pagination .page-item .page-link[aria-label=First]>span,.pagination .page-item .page-link[aria-label=Previous]>span,.pagination .page-item .page-link[aria-label=Next]>span,.pagination .page-item .page-link[aria-label=Last]>span{display:inline-block;width:1.5rem;height:1.5rem}.pagination .page-item .page-link[aria-label=Previous]>span,.pagination .page-item .page-link[aria-label=Next]>span{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.pagination .page-item .page-link[aria-label=First]>span,.pagination .page-item .page-link[aria-label=Last]>span{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.764 15.998 5.57 5.53v1.878l-7.46-7.404 7.46-7.464v1.887zM22 8.569l-7.427 7.433L22 23.376v-1.879l-5.54-5.499L22 10.455z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.764 15.998 5.57 5.53v1.878l-7.46-7.404 7.46-7.464v1.887zM22 8.569l-7.427 7.433L22 23.376v-1.879l-5.54-5.499L22 10.455z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.pagination .page-item .page-link[aria-label=Next]>span,.pagination .page-item .page-link[aria-label=Last]>span{transform:rotate(180deg)}.pagination .page-item .page-link[aria-disabled]{border-top:0;border-bottom:0;background-color:rgba(0,0,0,0)}.pagination .page-item:hover,.pagination .page-item:focus,.pagination .page-item.active{color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination .page-item.active>.page-link{background-color:Highlight}.pagination .page-item:first-child .page-link>span,.pagination .page-item:last-child .page-link>span{background-color:LinkText;color:rgba(0,0,0,0);forced-color-adjust:none}}
|
|
29
|
+
*/.pagination{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.5rem;--bs-pagination-font-size:1rem;--bs-pagination-color: hsl(0, 0%, 40%);--bs-pagination-bg: #fff;--bs-pagination-border-width: 2px;--bs-pagination-border-color: hsl(0, 0%, 90%);--bs-pagination-border-radius: var(--bs-border-radius);--bs-pagination-hover-color: #000;--bs-pagination-hover-bg: #faf9f8;--bs-pagination-hover-border-color: hsl(0, 0%, 90%);--bs-pagination-focus-color: var(--bs-link-hover-color);--bs-pagination-focus-bg: var(--bs-secondary-bg);--bs-pagination-focus-box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);--bs-pagination-active-color: #000;--bs-pagination-active-bg: #fc0;--bs-pagination-active-border-color: #fc0;--bs-pagination-disabled-color: hsl(0, 0%, 60%);--bs-pagination-disabled-bg: #faf9f8;--bs-pagination-disabled-border-color: hsl(0, 0%, 90%);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(2px*-1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius: var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x: 0;--bs-pagination-padding-y: 0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius: var(--bs-border-radius-sm)}.pagination .page-item{width:calc(2.25rem + 4px);color:#666}.pagination .page-item.disabled:first-child,.pagination .page-item.disabled:last-child{display:none}.pagination .page-item .page-link{height:100%;color:inherit;text-align:center;text-decoration:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination .page-item .page-link:focus,.pagination .page-item .page-link:focus-within,.pagination .page-item .page-link:focus-visible{border-radius:4px;outline:2px solid highlight}}.pagination .page-item .page-link[aria-label=First]>span,.pagination .page-item .page-link[aria-label=Previous]>span,.pagination .page-item .page-link[aria-label=Next]>span,.pagination .page-item .page-link[aria-label=Last]>span{display:inline-block;color:rgba(0,0,0,0);width:1.5rem;height:1.5rem}.pagination .page-item .page-link[aria-label=Previous]>span,.pagination .page-item .page-link[aria-label=Next]>span{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M18.9 23.5 11.3 16l7.6-7.6.9.9-6.6 6.7 6.6 6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.pagination .page-item .page-link[aria-label=First]>span,.pagination .page-item .page-link[aria-label=Last]>span{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.764 15.998 5.57 5.53v1.878l-7.46-7.404 7.46-7.464v1.887zM22 8.569l-7.427 7.433L22 23.376v-1.879l-5.54-5.499L22 10.455z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.764 15.998 5.57 5.53v1.878l-7.46-7.404 7.46-7.464v1.887zM22 8.569l-7.427 7.433L22 23.376v-1.879l-5.54-5.499L22 10.455z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.pagination .page-item .page-link[aria-label=Next]>span,.pagination .page-item .page-link[aria-label=Last]>span{transform:rotate(180deg)}.pagination .page-item .page-link[aria-disabled]{border-top:0;border-bottom:0;background-color:rgba(0,0,0,0)}.pagination .page-item:hover,.pagination .page-item:focus,.pagination .page-item.active{color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination .page-item.active>.page-link{background-color:Highlight}.pagination .page-item:first-child .page-link>span,.pagination .page-item:last-child .page-link>span{background-color:LinkText;color:rgba(0,0,0,0);forced-color-adjust:none}}
|
package/components/stepper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0 0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{counter-increment:step-index;content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
|
|
1
|
+
.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{counter-increment:step-index;content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
|
package/components/stepper.scss
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2);
|
|
61
61
|
height: stepper.$stepper-bar-height;
|
|
62
62
|
background-color: stepper.$stepper-bar-color;
|
|
63
|
-
inset-inline: 0
|
|
63
|
+
inset-inline: 0;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&:not(:first-child, :last-child) {
|