ids-enterprise-wc 1.0.0-beta.10 → 1.0.0-beta.11

package/components/ids-checkbox/ids-checkbox.css

@@ -1,371 +0,0 @@
-@charset "UTF-8";
-/**
- * Checkbox Mixins.
- */
-@keyframes check {
-  0% {
-    height: 0;
-    left: 0;
-    top: 8px;
-    width: 0;
-  }
-  50% {
-    height: 0;
-    left: 0;
-    top: 8px;
-    width: 4px;
-  }
-  100% {
-    height: 10px;
-    left: 4px;
-    top: 0;
-    width: 4px;
-  }
-}
-@keyframes checkindeterminate {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 10px;
-  }
-}
-.icon-dirty {
-  position: absolute;
-  color: var(--ids-color-caution-30);
-  top: 1px;
-}
-.icon-dirty[dir=rtl] {
-  transform: rotate(90deg);
-  top: 0;
-}
-
-.ids-color-picker .icon-dirty {
-  margin-inline-start: 35px;
-}
-
-.ids-color-picker.compact .icon-dirty {
-  margin-inline-start: 27px;
-}
-
-.ids-radio-group .icon-dirty {
-  margin-inline-start: -1px;
-  margin-block-start: 9px;
-  top: auto;
-  z-index: 1;
-}
-
-.ids-checkbox .icon-dirty {
-  margin-inline-start: -25px;
-}
-.ids-checkbox .icon-dirty[dir=rtl] {
-  margin-inline-start: -20px;
-  transform: none;
-  top: -1px;
-}
-.ids-checkbox.hitbox .icon-dirty {
-  margin-inline-start: -30px;
-}
-.ids-checkbox.hitbox .icon-dirty[dir=rtl] {
-  margin-inline-start: -26px;
-}
-
-.ids-textarea .icon-dirty {
-  top: 0;
-  margin-inline-start: 1px;
-}
-.ids-textarea .icon-dirty[dir=rtl] {
-  top: 1px;
-}
-
-.validation-message {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: flex;
-  font-family: var(--ids-font-family);
-  margin-top: var(--ids-spacing-md);
-}
-.validation-message.has-custom-icon {
-  color: var(--ids-icon-color);
-}
-.validation-message.disabled {
-  color: var(--ids-input-disabled-text-color);
-}
-.validation-message .ids-icon {
-  margin-inline-end: var(--ids-spacing-md);
-}
-.validation-message.alert {
-  color: var(--ids-color-caution);
-}
-.validation-message.alert.disabled {
-  color: var(--ids-color-caution-30);
-}
-.validation-message.warning {
-  color: var(--ids-color-warning);
-}
-.validation-message.warning.disabled {
-  color: var(--ids-color-warning-30);
-}
-.validation-message.error {
-  color: var(--ids-color-error);
-}
-.validation-message.error.disabled {
-  color: var(--ids-color-error-30);
-}
-.validation-message.info {
-  color: var(--ids-color-info);
-}
-.validation-message.info.disabled {
-  color: var(--ids-color-info-30);
-}
-.validation-message.success {
-  color: var(--ids-color-success);
-}
-.validation-message.success.disabled {
-  color: var(--ids-color-success-30);
-}
-
-:host(.justify-center) .ids-checkbox .checkmark,
-:host(.justify-center) .ids-checkbox:not([color]) input[type=checkbox] ~ .checkmark {
-  top: calc(50% - 8px);
-}
-
-:host([no-margin]) .ids-checkbox {
-  margin: var(--ids-spacing-none);
-}
-
-.ids-checkbox {
-  margin-bottom: var(--ids-spacing-lg);
-}
-.ids-checkbox label {
-  cursor: var(--ids-cursor-pointer);
-  user-select: none;
-  padding-inline-start: 24px;
-  position: relative;
-  display: inline-block;
-}
-.ids-checkbox label.empty::before {
-  content: " ";
-}
-.ids-checkbox label.required .label-checkbox::after {
-  position: absolute;
-  font-family: var(--ids-font-family);
-  margin-inline-start: var(--ids-spacing-sm);
-  margin-inline-end: var(--ids-spacing-sm);
-  font-size: var(--ids-font-size-lg);
-  color: var(--ids-required-background-color);
-  content: "*";
-  right: -13px;
-  top: -2px;
-}
-.ids-checkbox label.no-required-indicator .label-checkbox::after, .ids-checkbox label.empty .label-checkbox::after {
-  content: "";
-}
-.ids-checkbox.disabled label {
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox.disabled label.required .label-checkbox::after {
-  color: var(--ids-required-disabled-background-color);
-}
-.ids-checkbox.hitbox {
-  padding-top: var(--ids-spacing-xl);
-  padding-bottom: var(--ids-spacing-xl);
-}
-.ids-checkbox.hitbox label {
-  padding-inline-start: 42px;
-}
-.ids-checkbox.hitbox label span.checkmark {
-  margin-inline-start: 14px;
-}
-.ids-checkbox.hitbox .validation-message {
-  margin-inline-start: 14px;
-}
-.ids-checkbox.horizontal {
-  margin-inline-end: var(--ids-spacing-xl);
-  display: inline-block;
-}
-.ids-checkbox input[type=checkbox] {
-  position: absolute;
-  cursor: var(--ids-cursor-pointer);
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.ids-checkbox input[type=checkbox] ~ .checkmark {
-  position: absolute;
-  border: var(--ids-checkbox-unchecked-border);
-  border-radius: var(--ids-checkbox-unchecked-border-radius);
-  height: 14px;
-  width: 14px;
-  left: 0;
-  top: 2px;
-}
-.ids-checkbox input[type=checkbox].error ~ .checkmark {
-  border-color: var(--ids-checkbox-unchecked-error-border-color);
-}
-.ids-checkbox input[type=checkbox]:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-checked-background-color);
-  border-color: var(--ids-checkbox-checked-border-color);
-}
-.ids-checkbox input[type=checkbox]:checked ~ .checkmark::after {
-  position: absolute;
-  display: block;
-  border: var(--ids-font-size-xs) solid var(--ids-checkbox-checked-after-border-color);
-  border-width: var(--ids-checkbox-checked-after-border-width);
-  animation: check 0.15s;
-  transform: rotate(45deg);
-  content: "";
-  height: 10px;
-  left: 4px;
-  top: 0;
-  width: 4px;
-}
-.ids-checkbox input[type=checkbox].indeterminate ~ .checkmark {
-  background-color: var(--ids-checkbox-indeterminate-background-color);
-  border-color: var(--ids-checkbox-indeterminate-border-color);
-}
-.ids-checkbox input[type=checkbox].indeterminate ~ .checkmark::after {
-  position: absolute;
-  animation: checkindeterminate 0.15s;
-  display: block;
-  border: 1px solid var(--ids-checkbox-indeterminate-after-border-color);
-  border-width: var(--ids-checkbox-indeterminate-after-border-width);
-  content: "";
-  height: 6px;
-  left: 2px;
-  top: 0;
-  transform: none;
-  width: 10px;
-}
-.ids-checkbox input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-checkbox-focus-border-color);
-  box-shadow: var(--ids-checkbox-focus-box-shadow);
-}
-.ids-checkbox input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox input[type=checkbox]:disabled ~ .label-checkbox {
-  cursor: var(--ids-cursor-default);
-  color: var(--ids-checkbox-disabled-text-color);
-}
-.ids-checkbox input[type=checkbox]:disabled.error ~ .checkmark {
-  border-color: var(--ids-color-error-30);
-}
-.ids-checkbox input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox.no-animation input[type=checkbox]:checked ~ .checkmark::after {
-  animation: none;
-}
-.ids-checkbox[color=emerald] input[type=checkbox] ~ .checkmark {
-  background-color: var(--ids-color-emerald-70);
-  border-color: var(--ids-color-emerald-70);
-}
-.ids-checkbox[color=emerald] input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox[color=emerald] input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox[color=emerald] input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-color-emerald-70);
-}
-.ids-checkbox[color=amethyst] input[type=checkbox] ~ .checkmark {
-  background-color: var(--ids-color-amethyst-70);
-  border-color: var(--ids-color-amethyst-70);
-}
-.ids-checkbox[color=amethyst] input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox[color=amethyst] input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox[color=amethyst] input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-color-amethyst-70);
-}
-.ids-checkbox[color=azure] input[type=checkbox] ~ .checkmark {
-  background-color: var(--ids-color-azure-70);
-  border-color: var(--ids-color-azure-70);
-}
-.ids-checkbox[color=azure] input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox[color=azure] input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox[color=azure] input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-color-azure-70);
-}
-.ids-checkbox[color=amber] input[type=checkbox] ~ .checkmark {
-  background-color: var(--ids-color-amber-70);
-  border-color: var(--ids-color-amber-70);
-}
-.ids-checkbox[color=amber] input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox[color=amber] input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox[color=amber] input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-color-amber-70);
-}
-.ids-checkbox[color=ruby] input[type=checkbox] ~ .checkmark {
-  background-color: var(--ids-color-ruby-70);
-  border-color: var(--ids-color-ruby-70);
-}
-.ids-checkbox[color=ruby] input[type=checkbox]:disabled ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-checkbox[color=ruby] input[type=checkbox]:disabled:checked ~ .checkmark {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-checkbox[color=ruby] input[type=checkbox]:focus ~ .checkmark {
-  border-color: var(--ids-color-ruby-70);
-}
-.ids-checkbox .validation-message {
-  margin-top: var(--ids-spacing-md);
-  margin-inline-start: -1px;
-}
-.ids-checkbox.has-focus input[type=checkbox] ~ .checkmark {
-  border-color: var(--ids-checkbox-has-focus-border-color);
-  box-shadow: var(--ids-checkbox-has-focus-box-shadow);
-}
-
-:host-context(form) {
-  margin-top: var(--ids-spacing-lg);
-  display: flex;
-}
-
-:host([dir=rtl]) input[type=checkbox] ~ .checkmark {
-  left: initial;
-  right: 0;
-}
-:host([dir=rtl]) label.required .label-checkbox::after {
-  right: initial;
-  left: -13px;
-}
-
-:host(.multiselect-checkbox) input[type=checkbox]:not(:checked):not(:disabled) ~ .checkmark {
-  background-color: var(--ids-checkbox-multiselect-checkbox-background-color);
-}
-:host(.multiselect-checkbox) .ids-checkbox label {
-  padding-inline-start: var(--ids-spacing-xxl);
-}

package/components/ids-checkbox-group/ids-checkbox-group.css

@@ -1,5 +0,0 @@
-/* Ids Checkbox Group */
-.ids-checkbox-group ids-text {
-  display: block;
-  margin-block-end: var(--ids-spacing-xl);
-}

package/components/ids-color/ids-color.css

@@ -1,119 +0,0 @@
-/* Ids Color Component */
-:root {
-  overflow: visible;
-  display: inline-flex;
-  height: fit-content;
-  width: fit-content;
-  padding: 1px;
-}
-:host .ids-color {
-  background-color: transparent;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-}
-:host .no-color {
-  border: 1px solid #bbb;
-  border-radius: 2px;
-  position: relative;
-}
-:host .no-color::before {
-  transform: rotate(-45deg);
-  border-top: 2px solid #da1217;
-  content: "";
-  left: 0;
-  right: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
-}
-:host .no-color .color-check {
-  opacity: 0;
-  visibility: hidden;
-}
-
-:host(.outlined:hover),
-:host(.outlined:focus),
-:host(.outlined:focus-visible),
-:host(.outlined:focus-within) {
-  box-shadow: 0 0 3px 2px rgba(0, 114, 237, 0.3019607843);
-  outline: 1px solid var(--ids-focus-border-color);
-}
-
-:host([disabled]) {
-  opacity: 0.5;
-}
-:host([disabled]) .ids-color {
-  cursor: default;
-}
-
-:host([clickable=false]) .ids-color {
-  cursor: default;
-}
-
-:host([size=full]) {
-  width: 100%;
-}
-:host([size=full]) .ids-color {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.ids-color {
-  background-color: var(--ids-color-neutral-100);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  padding: 0;
-}
-.ids-color.xs {
-  height: 18px;
-  min-width: 18px;
-  width: 18px;
-}
-.ids-color.sm {
-  height: 20px;
-  min-width: 20px;
-  width: 20px;
-}
-.ids-color.mm {
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-}
-.ids-color.md {
-  height: 32px;
-  min-width: 32px;
-  width: 32px;
-}
-.ids-color.lg {
-  height: 42px;
-  min-width: 42px;
-  width: 42px;
-}
-.ids-color.full {
-  height: 55px;
-  margin: 8px 0 18px;
-  width: 100%;
-}
-.ids-color ids-text {
-  align-self: end;
-  position: relative;
-  top: 22px;
-}
-
-.color-check {
-  color: var(--ids-color-neutral-00);
-  opacity: 0;
-}
-
-:host(.light) .color-check {
-  color: var(--ids-color-neutral-100);
-}
-
-:host([checked]) .color-check {
-  opacity: 1;
-}