@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/components/form-check.scss

@@ -1,297 +0,0 @@
-@forward './../variables/options';
-
-@use '../variables/color';
-@use '../variables/commons';
-@use '../variables/type';
-@use '../variables/spacing';
-@use '../variables/animation';
-@use '../variables/components/form-check';
-@use '../mixins/color' as color-mx;
-@use '../mixins/icons' as icons-mx;
-@use '../mixins/utilities' as utility-mx;
-
-.form-check {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: form-check.$form-check-row-gap;
-  margin-bottom: form-check.$form-check-margin-bottom;
-
-  @include utility-mx.focus-style() {
-    border-radius: commons.$border-radius;
-  }
-
-  &-inline {
-    display: inline-flex;
-  }
-
-  &-inline:not(:last-of-type) {
-    margin-right: form-check.$form-check-inline-margin-right;
-  }
-
-  &-input,
-  &-label {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-    transition: color animation.$transition-base-timing;
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-    }
-
-    &:hover:not([disabled]),
-    &:hover:not([disabled]) ~ &-label {
-      color: var(--post-contrast-color);
-
-      @include utility-mx.high-contrast-mode() {
-        border-color: Highlight;
-      }
-    }
-  }
-
-  &-input {
-    display: inline-flex;
-    flex: 0 auto;
-    appearance: none;
-    background: transparent;
-    height: form-check.$form-check-input-size;
-    width: form-check.$form-check-input-size;
-    border: form-check.$form-check-input-border-width solid currentColor;
-    margin-top: 1px;
-    @include utility-mx.focus-style-none();
-
-    &:not([disabled]),
-    &:not([disabled]) ~ .form-check-label {
-      cursor: pointer;
-    }
-
-    @include utility-mx.high-contrast-mode {
-      border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      flex: 1;
-    }
-
-    &[type='checkbox'] {
-      &:checked::after {
-        @include icons-mx.icon(3035);
-      }
-
-      &:indeterminate::after {
-        @include icons-mx.icon(2039);
-      }
-
-      &:checked,
-      &:indeterminate {
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem !important;
-          color: SelectedItemText !important; // Important is needed for card-control
-        }
-      }
-    }
-
-    &[type='radio'] {
-      border-radius: 50%;
-
-      &:checked::after {
-        border: spacing.$size-micro solid transparent;
-        background-color: currentColor;
-        border-radius: inherit;
-        background-clip: padding-box;
-
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem;
-          border-color: Canvas;
-        }
-      }
-
-      &[disabled] {
-        padding: spacing.$size-line; // Used to mimic border width because it is used in combination with background-clip: padding-box; to size the selected shape
-        background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-light}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-dark}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-hcm}') !important;
-        }
-      }
-    }
-
-    &[disabled] {
-      border: 0;
-      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='checkbox'],
-      &[type='radio'] {
-        @include utility-mx.high-contrast-mode {
-          border-color: GrayText !important;
-        }
-      }
-
-      &[type='checkbox'] {
-        &:checked,
-        &:indeterminate {
-          @include utility-mx.high-contrast-mode {
-            background-color: Field !important;
-            color: GrayText !important;
-          }
-        }
-      }
-
-      &[type='radio'] {
-        &:checked::after {
-          @include utility-mx.high-contrast-mode {
-            background-color: GrayText;
-          }
-        }
-      }
-
-      @include color-mx.on-dark-background {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
-      }
-
-      @include utility-mx.high-contrast-mode {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
-      }
-
-      .form-check-sm &[type='checkbox'] {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-light-sm}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-sm}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-sm}') !important;
-        }
-      }
-    }
-
-    &[disabled],
-    &[disabled] ~ .form-check-label {
-      text-decoration: line-through;
-      color: color.$black-alpha-60;
-
-      @include color-mx.on-dark-background() {
-        color: color.$white-alpha-80;
-      }
-    }
-
-    .form-check-sm & {
-      height: form-check.$form-check-input-size-sm;
-      width: form-check.$form-check-input-size-sm;
-
-      &[type='radio'] {
-        &:checked::after {
-          border-width: spacing.$size-line;
-        }
-      }
-    }
-  }
-
-  &-label {
-    flex: 1;
-
-    :not(.form-switch, .radio-button-card, .checkbox-button-card) > & {
-      padding-inline-start: form-check.$form-check-column-gap;
-    }
-
-    .form-check-sm & {
-      font-size: type.$font-size-12;
-    }
-  }
-}
-
-.form-switch {
-  .form-check-input {
-    height: form-check.$form-switch-height;
-    width: form-check.$form-switch-width;
-    border: 0;
-    border-radius: form-check.$form-switch-width;
-    background-image: form-check.$form-switch-background-image;
-    background-size: 2 * form-check.$form-switch-width;
-    background-position-x: 0;
-    transition:
-      background-color animation.$transition-base-timing,
-      background-position animation.$transition-base-timing;
-
-    &::after {
-      max-width: form-check.$form-switch-height;
-      background-color: form-check.$form-switch-color;
-      border: form-check.$form-check-input-border-width solid form-check.$form-switch-border-color;
-      border-radius: 50%;
-      transition: transform animation.$transition-base-timing;
-    }
-
-    &:checked {
-      background-position-x: form-check.$form-switch-width;
-
-      &::after {
-        @include icons-mx.remove-icon;
-        background-color: form-check.$form-switch-color;
-        border-color: form-check.$form-switch-checked-border-color;
-        transform: translateX(2rem);
-      }
-    }
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-      border: form-check.$form-check-input-border-width solid CanvasText;
-
-      &:checked {
-        background-color: SelectedItem !important;
-      }
-
-      &::after,
-      &:checked::after {
-        max-width: calc(
-          form-check.$form-switch-height - (form-check.$form-check-input-border-width * 2)
-        );
-        border-color: Canvas;
-        background-color: CanvasText;
-      }
-    }
-
-    &[disabled] {
-      background: form-check.$form-switch-disabled-bg;
-
-      &::after {
-        border-color: form-check.$form-switch-disabled-border-color;
-      }
-
-      @include utility-mx.high-contrast-mode {
-        &::after {
-          border-color: Field;
-        }
-
-        &:checked {
-          background-color: GrayText !important;
-        }
-      }
-    }
-  }
-
-  &:hover > .form-check-input:not([disabled]) {
-    background-color: rgba(var(--post-contrast-color-rgb), 0.1);
-
-    @include utility-mx.high-contrast-mode {
-      border-color: Highlight;
-    }
-  }
-
-  .form-check-label {
-    padding-top: form-check.$form-switch-label-padding-top;
-
-    &.order-first {
-      flex: 0 auto;
-      padding-inline-end: form-check.$form-switch-column-gap;
-    }
-
-    &:not(.order-first) {
-      padding-inline-start: form-check.$form-switch-column-gap;
-    }
-  }
-}

package/components/form-validation.css

@@ -1 +0,0 @@
-.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:"";flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;align-self:flex-start;height:1.125rem;width:1.125rem;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}}

package/components/form-validation.scss

@@ -1,148 +0,0 @@
-@forward './../variables/options';
-
-@use 'sass:map';
-
-@use './../themes/bootstrap/core' as b;
-@use './../themes/bootstrap/forms/validation' as bfv;
-
-@use './../mixins/color' as color-mx;
-@use './../mixins/utilities' as utilities-mx;
-@use './../mixins/form-validation' as form-validation-mx;
-@use './../variables/color';
-@use './../variables/components/form-validation';
-@use './../variables/components/forms';
-@use './../variables/spacing';
-@use './../variables/type';
-@use './../mixins/icons';
-
-.invalid-feedback,
-.valid-feedback {
-  display: none;
-  align-items: center;
-  width: 100%;
-  margin-block: form-validation.$form-feedback-margin-top 0;
-  padding: form-validation.$form-feedback-padding-y form-validation.$form-feedback-padding-x;
-  font-size: form-validation.$form-feedback-font-size;
-
-  @include utilities-mx.high-contrast-mode() {
-    padding-inline: 0;
-  }
-
-  &::before {
-    content: '';
-    flex-shrink: 0;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    align-self: flex-start;
-    height: form-validation.$form-feedback-font-size * type.$line-height-copy;
-    width: form-validation.$form-feedback-font-size * type.$line-height-copy;
-    margin-right: spacing.$size-mini;
-  }
-}
-
-.invalid-feedback {
-  background: form-validation.$form-feedback-invalid-bg;
-  color: form-validation.$form-feedback-invalid-text;
-
-  &::before {
-    @include icons.icon(2413);
-  }
-}
-
-.valid-feedback {
-  background: form-validation.$form-feedback-valid-bg;
-  color: form-validation.$form-feedback-valid-text;
-
-  &::before {
-    @include icons.icon(2105);
-  }
-}
-
-.valid-feedback.custom-feedback {
-  background: form-validation.$form-feedback-custom-bg;
-  color: form-validation.$form-feedback-custom-text;
-}
-
-@each $state, $data in b.$form-validation-states {
-  $icon: map.get($data, 'icon');
-
-  @include b.form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: inline-flex;
-    }
-  }
-
-  .input-group {
-    > .form-control:not(:focus),
-    > .form-select:not(:focus),
-    > .form-floating:not(:focus-within) {
-      @include b.form-validation-state-selector($state) {
-        @if $state == 'valid' {
-          z-index: 3;
-        } @else if $state == 'invalid' {
-          z-index: 4;
-        }
-      }
-    }
-  }
-}
-
-.is-invalid ~ .invalid-feedback,
-.is-valid ~ .valid-feedback,
-post-card-control ~ .invalid-feedback {
-  display: inline-flex;
-}
-
-.form-control,
-.form-select {
-  &.is-invalid {
-    &:not(:disabled) {
-      border-color: form-validation.$form-feedback-invalid-color;
-
-      &:focus {
-        border-color: form-validation.$form-feedback-invalid-color;
-      }
-    }
-
-    &.form-control-sm ~ .invalid-feedback {
-      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
-    }
-  }
-
-  &.is-valid {
-    &:not(:disabled) {
-      border-color: var(--post-success);
-
-      &:focus {
-        border-color: var(--post-success);
-      }
-    }
-
-    &.form-control-sm ~ .valid-feedback {
-      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
-    }
-  }
-}
-
-.form-check-input {
-  @include form-validation-mx.form-validation-state-selector(invalid) {
-    border-color: form-validation.$form-feedback-invalid-color;
-
-    ~ .form-check-label {
-      color: form-validation.$form-feedback-invalid-color;
-    }
-
-    @include color-mx.on-dark-background {
-      border-color: inherit;
-
-      ~ .form-check-label {
-        color: color.$white;
-      }
-    }
-
-    @include utilities-mx.high-contrast-mode {
-      border-color: FieldText; // For blink-browser as otherwise the invalid color will be converted to Highlight
-    }
-  }
-}

package/components/forms.css

@@ -1 +0,0 @@
-.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

@@ -1,215 +0,0 @@
-@forward './../variables/options';
-
-@use './../variables/commons';
-@use './../variables/components/forms';
-@use './../variables/type';
-@use './../variables/spacing';
-@use './../variables/color';
-
-@use './../functions/sizing';
-
-@use './../mixins/utilities';
-@use './../mixins/forms' as form-mixins;
-
-@use './../themes/bootstrap/forms/form-text' as bfft;
-@use './../themes/bootstrap/forms/form-control' as bffc;
-@use './../themes/bootstrap/forms/input-group' as bfig;
-
-.form-control-rg {
-  @include form-mixins.form-rg;
-}
-
-.form-control-sm {
-  @include form-mixins.form-sm;
-}
-
-.form-control-lg {
-  @include form-mixins.form-lg;
-}
-
-textarea {
-  &.form-control-lg {
-    padding-top: spacing.$size-regular;
-    padding-bottom: spacing.$size-mini;
-    padding-right: spacing.$size-large;
-    min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) +
-      spacing.$size-regular + spacing.$size-mini + sizing.px-to-rem(forms.$input-border-width * 2);
-  }
-
-  &.form-control-sm {
-    padding-top: spacing.$size-mini;
-    padding-right: spacing.$size-large;
-    padding-bottom: 0;
-    min-height: (forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm) +
-      (spacing.$size-mini * 2) + sizing.px-to-rem(forms.$input-border-width * 2);
-  }
-}
-
-select.form-control-rg:not([size]):not([multiple]) {
-  height: forms.$input-height-rg;
-}
-
-.form-control-wrapper {
-  @include utilities.focus-style() {
-    border-radius: commons.$border-radius;
-  }
-}
-
-:not(.form-control-wrapper) > {
-  .form-control {
-    @include utilities.focus-style() {
-      border-radius: commons.$border-radius;
-    }
-  }
-}
-
-.form-control {
-  position: relative;
-
-  &:focus {
-    box-shadow: none; // Override bootstrap
-
-    @include utilities.high-contrast-mode {
-      border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color
-    }
-  }
-
-  &:not(:disabled) {
-    &:hover,
-    &:focus {
-      @include utilities.high-contrast-mode {
-        border-color: FieldText;
-      }
-    }
-
-    &:hover {
-      border-color: color.$black;
-      @include utilities.high-contrast-mode {
-        border-color: Highlight;
-      }
-    }
-  }
-
-  @include utilities.disabled-style {
-    ~ .form-text {
-      color: var(--post-gray-60);
-    }
-  }
-
-  &[readonly]:not(:disabled) {
-    border-color: forms.$input-color;
-    background-color: forms.$input-bg;
-  }
-
-  &[type='file'] {
-    position: relative;
-
-    &:disabled {
-      @include utilities.high-contrast-mode {
-        color: GrayText; // Needed for the button on blink browser, even if we define it on .form-control:disabled
-        border-color: GrayText;
-      }
-    }
-
-    &::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;
-    }
-
-    // Fix Safari cutoff when change the initial position of the selector button.
-    /* stylelint-disable-next-line */
-    @supports (background: -webkit-named-image(i)) {
-      &::file-selector-button {
-        display: initial;
-        position: initial;
-        margin-inline: 0;
-        padding-inline: 0;
-        width: 0;
-        border: 0 none;
-      }
-
-      &::after {
-        display: flex;
-        align-items: center;
-        content: 'Choose File';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 2;
-        padding-inline: forms.$input-padding-y;
-        background-color: inherit;
-        border-left: inherit;
-        text-align: center;
-
-        [lang='de'] & {
-          content: 'Datei auswählen';
-        }
-
-        [lang='fr'] & {
-          content: 'Choisir un fichier';
-        }
-
-        [lang='it'] & {
-          content: 'Scegli file';
-        }
-      }
-
-      &[multiple] {
-        &::after {
-          content: 'Choose Files';
-
-          [lang='de'] & {
-            content: 'Dateien auswählen';
-          }
-
-          [lang='fr'] & {
-            content: 'Choisir des fichiers';
-          }
-        }
-      }
-    }
-
-    &.form-control-sm {
-      &::after {
-        padding-inline: forms.$input-padding-y-sm;
-      }
-    }
-
-    &.form-control-rg {
-      min-height: calc(
-        (1rem * forms.$input-line-height-rg) + (forms.$input-padding-y-rg * 2) +
-          (forms.$input-border-width * 2)
-      );
-
-      &::after {
-        padding-inline: forms.$input-padding-y-rg;
-      }
-    }
-
-    &.form-control-lg {
-      &::after {
-        padding-inline: forms.$input-padding-y-lg;
-      }
-    }
-  }
-}
-
-.form-label {
-  &:has(+ .form-control-sm, + .form-select-sm) {
-    font-size: forms.$form-label-font-size-sm;
-    margin-bottom: spacing.$size-micro;
-  }
-
-  &:has(+ .form-control[disabled], + .form-select[disabled]) {
-    color: var(--post-gray-60);
-  }
-}