@siemens/element-theme 47.0.0

package/src/styles/bootstrap/forms/_form-check.scss

@@ -0,0 +1,249 @@
+@use '../../variables/semantic-tokens';
+@use '../../variables/spacers';
+@use '../functions';
+@use '../variables';
+
+// ----------------------------------------------------------------------------
+// this is a drop-in replacement to bootstrap's _form-check.scss
+// there's too many differences between what BS5 does and what the design system expects
+@use 'sass:map';
+
+$form-check-size: map.get(spacers.$spacers, 6);
+$form-radio-size: map.get(spacers.$spacers, 6);
+$form-radio-inner-size: map.get(spacers.$spacers, 3);
+$form-radio-offset: ($form-radio-size - $form-radio-inner-size) * 0.5 - 1px;
+$form-check-padding-x: map.get(spacers.$spacers, 2);
+
+$form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
+
+.form-check {
+  padding-block: map.get(spacers.$spacers, 1);
+
+  :is(.valid-feedback, .invalid-feedback) {
+    margin-inline-start: $form-check-label-start;
+  }
+}
+
+.form-check-inline {
+  display: inline-block;
+  margin-inline-end: variables.$form-check-inline-margin-end;
+}
+
+%form-check-base {
+  position: relative;
+  appearance: none;
+  background-color: semantic-tokens.$element-ui-5;
+  border: 1px solid semantic-tokens.$element-ui-1;
+  flex-shrink: 0;
+  float: inline-start;
+
+  &:is(:hover, .hover) {
+    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    background: semantic-tokens.$element-action-secondary-hover;
+  }
+
+  &:is([disabled], .disabled) {
+    border-color: semantic-tokens.$element-ui-3;
+    background-color: semantic-tokens.$element-ui-5;
+  }
+}
+
+%form-check-checkbox {
+  inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
+  block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
+  border-radius: semantic-tokens.$element-button-radius;
+  inset-inline-start: map.get(spacers.$spacers, 1);
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    inset-inline-start: -1px;
+    inset-block-start: -1px;
+    inline-size: $form-check-size;
+    block-size: $form-check-size;
+    mask-image: functions.escape-svg(variables.$form-check-input-checked-bg-image);
+    opacity: 0;
+  }
+
+  &:is(:checked, .checked) {
+    background-color: semantic-tokens.$element-ui-0;
+    border-color: semantic-tokens.$element-ui-0;
+
+    &:hover {
+      background-color: semantic-tokens.$element-ui-0-hover;
+      border-color: semantic-tokens.$element-ui-0-hover;
+    }
+
+    &::after {
+      background-color: semantic-tokens.$element-text-inverse;
+      opacity: 1;
+    }
+
+    &[disabled] {
+      background-color: semantic-tokens.$element-ui-3;
+      border-color: semantic-tokens.$element-ui-3;
+    }
+  }
+
+  &:indeterminate {
+    border-color: semantic-tokens.$element-ui-0;
+
+    &::after {
+      mask-image: none;
+      background-color: semantic-tokens.$element-ui-0;
+      inline-size: 10px;
+      block-size: 2px;
+      opacity: 1;
+      inset-inline-start: 2px;
+      inset-block-start: 6px;
+    }
+
+    &:hover {
+      border-color: semantic-tokens.$element-ui-0-hover;
+
+      &::after {
+        background-color: semantic-tokens.$element-ui-0-hover;
+      }
+    }
+
+    &:disabled {
+      border-color: semantic-tokens.$element-ui-3;
+
+      &::after {
+        background-color: semantic-tokens.$element-ui-3;
+      }
+    }
+  }
+}
+
+%form-check-radio {
+  inline-size: $form-radio-size;
+  block-size: $form-radio-size;
+  border-radius: 50%;
+  inset-inline-start: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    inset-block-start: $form-radio-offset;
+    inset-inline-start: $form-radio-offset;
+    inline-size: $form-radio-inner-size;
+    block-size: $form-radio-inner-size;
+    border-radius: 50%;
+  }
+
+  &:checked {
+    border-color: semantic-tokens.$element-ui-0;
+
+    &::after {
+      background-color: semantic-tokens.$element-ui-0;
+    }
+
+    &:hover {
+      border-color: semantic-tokens.$element-ui-0-hover;
+
+      &::after {
+        background-color: semantic-tokens.$element-ui-0-hover;
+      }
+    }
+
+    &[disabled] {
+      border-color: semantic-tokens.$element-ui-3;
+
+      &::after {
+        background-color: semantic-tokens.$element-ui-3;
+      }
+    }
+  }
+}
+
+%form-check-label {
+  display: inline-block;
+  position: relative;
+  padding-inline: map.get(spacers.$spacers, 4) $form-check-padding-x;
+  color: semantic-tokens.$element-text-primary;
+}
+
+.form-check-input {
+  @extend %form-check-base;
+
+  ~ .form-check-label {
+    @extend %form-check-label;
+  }
+
+  &[disabled] ~ .form-check-label {
+    color: semantic-tokens.$element-text-disabled;
+  }
+
+  &:is([type='checkbox'], .si-form-checkbox) {
+    @extend %form-check-checkbox;
+  }
+
+  &[type='radio'] {
+    @extend %form-check-radio;
+  }
+}
+
+// button group
+.btn-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+
+  &:is([disabled], :disabled) {
+    + .btn {
+      pointer-events: none;
+      filter: none;
+      color: semantic-tokens.$element-text-disabled;
+    }
+  }
+}
+
+.ngx-datatable {
+  .datatable-checkbox {
+    inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
+    block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
+    inset-block-start: 1px !important; // stylelint-disable-line declaration-no-important
+
+    input[type='checkbox'] {
+      @extend %form-check-base;
+      @extend %form-check-checkbox;
+    }
+  }
+
+  .datatable-body .datatable-checkbox {
+    inset-block-start: 3px !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+formly-field-multicheckbox {
+  input[type='checkbox'] {
+    @extend %form-check-base;
+    @extend %form-check-checkbox;
+
+    ~ label {
+      @extend %form-check-label;
+    }
+
+    &[disabled] ~ label {
+      color: semantic-tokens.$element-text-disabled;
+    }
+  }
+}
+
+formly-field-radio {
+  input[type='radio'] {
+    @extend %form-check-base;
+    @extend %form-check-radio;
+
+    ~ label {
+      @extend %form-check-label;
+    }
+
+    &[disabled] ~ label {
+      color: semantic-tokens.$element-text-disabled;
+    }
+  }
+}

package/src/styles/bootstrap/forms/_form-control.scss

@@ -0,0 +1,151 @@
+@use '../../variables/focus';
+@use '../../variables/semantic-tokens';
+@use '../../variables/spacers';
+@use '../../variables/typography';
+@use '../../variables/utilities';
+@use '../variables';
+
+@use 'sass:map';
+
+:is(.form-control, .form-select) {
+  --border-color: #{semantic-tokens.$element-ui-2};
+  display: block;
+  inline-size: 100%;
+  padding-block: variables.$input-padding-y;
+  padding-inline-start: variables.$input-padding-x;
+  padding-inline-end: calc(
+    var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset, 0px) +
+      #{variables.$input-padding-x}
+  );
+  font-family: variables.$input-font-family;
+  font-size: variables.$input-font-size;
+  font-weight: variables.$input-font-weight;
+  line-height: variables.$input-line-height;
+  color: variables.$input-color;
+  background-color: variables.$input-bg;
+  background-clip: padding-box;
+  border: variables.$input-border-width solid var(--border-color);
+  border-radius: variables.$input-border-radius;
+  appearance: none; // Fix appearance for date inputs in Safari
+  background-image: var(--si-feedback-icon, none);
+  background-repeat: no-repeat;
+  background-size: 1.25rem;
+  background-position: top 5px right calc(6px + var(--si-action-icon-offset, 0px));
+
+  @include utilities.rtl {
+    background-position: top 5px left 6px;
+  }
+
+  &.hide-feedback-icon {
+    background-image: none;
+    padding-inline-end: variables.$input-padding-x;
+  }
+
+  &:autofill {
+    background: semantic-tokens.$element-base-information;
+  }
+
+  &:is(:focus, :hover) {
+    --border-color: #{semantic-tokens.$element-ui-1};
+  }
+
+  &:is(.readonly, [readonly]) {
+    &,
+    :is(:hover, :focus) {
+      --border-color: #{semantic-tokens.$element-ui-4};
+      background-color: variables.$input-bg;
+    }
+  }
+
+  &:is(.disabled, :disabled) {
+    &,
+    &:is(:hover, :focus) {
+      --border-color: #{semantic-tokens.$element-ui-3};
+      color: semantic-tokens.$element-text-disabled;
+    }
+
+    &::placeholder {
+      color: variables.$input-placeholder-disabled-color;
+    }
+  }
+
+  &:is(:disabled, [readonly]) {
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+
+  &:focus {
+    @include focus.make-outline-focus();
+  }
+
+  &::placeholder {
+    color: variables.$input-placeholder-color;
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+}
+
+.form-control:not(textarea):not(select[multiple]) {
+  // force height to fix line-height issue in firefox
+  block-size: calc(#{typography.$si-line-height-body-2}em + #{2 * map.get(spacers.$spacers, 4)});
+}
+
+.addon-second-icon {
+  --input-addon-inset-end: #{map.get(spacers.$spacers, 9)};
+}
+
+textarea.form-control {
+  min-block-size: variables.$input-height;
+  padding-block: variables.$input-padding-y;
+  line-height: 1.5;
+  // prevent scrollbar overlapping rounded borders
+  box-shadow: 0 0 0 1px var(--border-color);
+  border: 3px solid variables.$input-bg !important; // stylelint-disable-line declaration-no-important
+  outline-offset: 2px !important; // stylelint-disable-line declaration-no-important
+}
+
+select.form-control {
+  &.readonly {
+    pointer-events: none;
+  }
+}
+
+select:is(.form-control, .form-select):not([multiple]) {
+  padding-block: variables.$input-padding-y;
+  padding-inline: map.get(spacers.$spacers, 4) map.get(spacers.$spacers, 8);
+  appearance: none;
+  background-image:
+    var(--si-feedback-icon, none),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M352.79 203.21a12.45 12.45 0 011.44 15.86l-1.44 1.72-88 88a12.45 12.45 0 01-15.86 1.44l-1.72-1.44-88-88a12.43 12.43 0 0115.86-19l1.72 1.44L256 282.42l79.21-79.21a12.45 12.45 0 0115.86-1.44z'/></svg>");
+  background-repeat: no-repeat;
+  background-position:
+    right 20px center,
+    right 2px top 50%;
+  background-size: 1.25rem, 1.5rem;
+
+  @include utilities.rtl {
+    background-position: left map.get(spacers.$spacers, 2) top 50%;
+  }
+
+  .app--dark & {
+    background-image:
+      var(--si-feedback-icon, none),
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M352.79 203.21a12.45 12.45 0 011.44 15.86l-1.44 1.72-88 88a12.45 12.45 0 01-15.86 1.44l-1.72-1.44-88-88a12.43 12.43 0 0115.86-19l1.72 1.44L256 282.42l79.21-79.21a12.45 12.45 0 0115.86-1.44z'/></svg>");
+  }
+}
+
+select:is(.form-control, .form-select)[multiple] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  padding: 0;
+
+  option {
+    padding: map.get(spacers.$spacers, 4);
+  }
+
+  option:checked,
+  &:not(:disabled) option:not(:disabled):hover {
+    background: semantic-tokens.$element-base-0;
+    color: semantic-tokens.$element-text-active;
+  }
+}

package/src/styles/bootstrap/forms/_form-file.scss

@@ -0,0 +1,29 @@
+@use '../../variables/semantic-tokens';
+@use '../variables';
+
+.form-control {
+  &[type='file'] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
+    }
+  }
+
+  &::file-selector-button {
+    color: semantic-tokens.$element-action-secondary-text;
+    background: semantic-tokens.$element-action-secondary;
+    border-color: inherit;
+    border-block-width: 0;
+    border-inline-width: 0 1px;
+    margin-block: -(variables.$input-padding-y);
+    margin-inline: -(variables.$input-padding-x) variables.$input-padding-x;
+    block-size: inherit;
+    padding-inline: variables.$btn-padding-x;
+  }
+
+  &:hover::file-selector-button {
+    color: semantic-tokens.$element-action-secondary-text-hover;
+    background: semantic-tokens.$element-action-secondary-hover;
+  }
+}

package/src/styles/bootstrap/forms/_form-label.scss

@@ -0,0 +1,39 @@
+@use '../../variables/spacers';
+@use '../variables';
+
+@use 'sass:map';
+
+.form-label,
+.col-form-label {
+  font-size: variables.$form-label-font-size;
+  font-style: variables.$form-label-font-style;
+  font-weight: variables.$form-label-font-weight;
+  color: variables.$form-label-color;
+}
+
+.form-label {
+  display: inline-block;
+  line-height: 0.875rem;
+  padding-block: map.get(spacers.$spacers, 3) map.get(spacers.$spacers, 2);
+
+  .text-end & {
+    padding-inline-end: variables.$input-padding-x;
+  }
+}
+
+.col-form-label {
+  padding-block: map.get(spacers.$spacers, 4) - 1px 0;
+}
+
+.required:is(.form-label, .col-form-label, .form-check-label)::after {
+  content: '*';
+}
+
+.form-text {
+  display: block;
+  margin-block-start: variables.$form-text-margin-top;
+  font-size: variables.$form-text-font-size;
+  font-style: variables.$form-text-font-style;
+  font-weight: variables.$form-text-font-weight;
+  color: variables.$form-text-color;
+}

package/src/styles/bootstrap/forms/_form-range.scss

@@ -0,0 +1,68 @@
+@use '../../variables/elevation';
+@use '../../variables/focus';
+@use '../../variables/semantic-tokens';
+
+$track-color: semantic-tokens.$element-ui-4 !default;
+$track-height: 4px !default;
+$thumb-size: 24px !default;
+
+@mixin range-track {
+  block-size: $track-height;
+  cursor: pointer;
+  animation-duration: 0.2s;
+  background: $track-color;
+}
+
+@mixin range-thumb {
+  box-shadow: var(--thumb-shadow);
+  border: 1px solid semantic-tokens.$element-action-secondary-border;
+  block-size: $thumb-size;
+  inline-size: $thumb-size;
+  border-radius: 50%;
+  background: semantic-tokens.$element-base-1;
+  cursor: pointer;
+
+  &:hover {
+    border-color: semantic-tokens.$element-action-secondary-border-hover;
+    background: radial-gradient(
+      circle,
+      semantic-tokens.$element-action-secondary-text-hover 0%,
+      semantic-tokens.$element-action-secondary-text-hover 35%,
+      semantic-tokens.$element-action-secondary-hover 36%
+    );
+  }
+}
+
+.form-range {
+  --thumb-shadow: #{elevation.$element-elevation-1};
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+  background: transparent;
+  inline-size: 100%;
+
+  &:focus-visible {
+    --thumb-shadow: #{focus.$si-focus-styling-box-shadow};
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include range-track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include range-thumb;
+    -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+    margin-block-start: -0.5 * $thumb-size;
+  }
+
+  &::-moz-range-track {
+    @include range-track;
+  }
+
+  &::-moz-range-thumb {
+    @include range-thumb;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+}

package/src/styles/bootstrap/forms/_input-group.scss

@@ -0,0 +1,103 @@
+@use '../variables';
+
+@use 'sass:string';
+@use 'sass:map';
+
+//
+// Base styles
+//
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // For form validation feedback
+  align-items: stretch;
+  inline-size: 100%;
+
+  > :is(.form-control, .form-select) {
+    position: relative; // For focus state's z-index
+    flex: 1 1 auto;
+    inline-size: 1%;
+    min-inline-size: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+  }
+
+  // Bring the "active" form control to the top of surrounding elements
+  > :is(.form-control, .form-select):focus {
+    z-index: 3;
+  }
+
+  // Ensure buttons are always above inputs for more visually pleasing borders.
+  // This isn't needed for `.input-group-text` since it shares the same border-color
+  // as our inputs.
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+}
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding-block: variables.$input-group-addon-padding-y;
+  padding-inline: variables.$input-group-addon-padding-x;
+  font-size: variables.$input-font-size; // Match inputs
+  font-weight: variables.$input-group-addon-font-weight;
+  line-height: variables.$input-line-height;
+  color: variables.$input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: variables.$input-group-addon-bg;
+  border: variables.$input-border-width solid variables.$input-group-addon-border-color;
+  border-radius: variables.$input-border-radius;
+}
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+  &:not(.has-validation) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 3) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  &.has-validation {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 4) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  $validation-messages: '';
+  @each $state in map.keys(variables.$form-validation-states) {
+    $validation-messages: $validation-messages +
+      ':not(.' +
+      string.unquote($state) +
+      '-tooltip)' +
+      ':not(.' +
+      string.unquote($state) +
+      '-feedback)';
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+    margin-inline-start: -(variables.$input-border-width);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}