bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/collection/components/molecules/switch/switch.css

@@ -1,434 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
-.size-1 {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.size-2 {
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.size-3 {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.size-4 {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-.size-5 {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-.size-6 {
-  font-size: 30px;
-  line-height: 38px;
-}
-
-.size-7 {
-  font-size: 38px;
-  line-height: 46px;
-}
-
-.size-8 {
-  font-size: 46px;
-  line-height: 54px;
-}
-
-.size-9 {
-  font-size: 56px;
-  line-height: 64px;
-}
-
-.weight-regular {
-  font-weight: 400;
-}
-
-.weight-semibold {
-  font-weight: 500;
-}
-
-/**
- * Generator
- */
-.input-size-large {
-  height: 40px;
-}
-
-.input-size-medium {
-  height: 32px;
-}
-
-.input-size-small {
-  height: 24px;
-}
-
-.resize-none textarea {
-  resize: none;
-}
-
-.resize-vertical textarea {
-  resize: vertical;
-}
-
-.resize-auto textarea {
-  height: auto;
-  resize: none;
-}
-
-.textarea-size-large {
-  padding: 4px 0 0 4px;
-  min-height: 40px;
-}
-.textarea-size-large .bcm-input-element {
-  min-height: calc((40px - 8px) + 2px);
-}
-.textarea-size-large .input-clear-button {
-  height: calc( 40px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-.textarea-size-medium {
-  padding: 4px 0 0 4px;
-  min-height: 32px;
-}
-.textarea-size-medium .bcm-input-element {
-  min-height: calc((32px - 8px) + 2px);
-}
-.textarea-size-medium .input-clear-button {
-  height: calc( 32px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-.textarea-size-small {
-  padding: 0px 0 0 4px;
-  min-height: 24px;
-}
-.textarea-size-small .bcm-input-element {
-  min-height: calc((24px - 8px) + 2px);
-}
-.textarea-size-small .input-clear-button {
-  height: calc( 24px - 16px );
-  top: 8px;
-  padding: 0;
-  margin-right: 8px;
-}
-
-.bcm-input[no-margin] {
-  margin: 0;
-}
-
-.bcm-textarea[no-margin] {
-  margin: 0;
-}
-
-.bcm-switch[no-margin] {
-  margin: 0;
-}
-
-.bcm-checkbox[no-margin] {
-  margin: 0;
-}
-
-.bcm-radio-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-checkbox-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-range[no-margin] {
-  margin: 0;
-}
-
-.bcm-form[no-margin] {
-  margin: 0;
-}
-
-.bcm-form-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-list[no-margin] {
-  margin: 0;
-}
-
-.bcm-colorpicker[no-margin] {
-  margin: 0;
-}
-
-.bcm-date-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-time-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-datetime-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-select[no-margin] {
-  margin: 0;
-}
-
-.bcm-listbox[no-margin] {
-  margin: 0;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.bcm-switch {
-  display: inline-flex;
-  user-select: none;
-  flex-direction: column;
-  margin-bottom: 8px;
-}
-.bcm-switch__container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 4px;
-}
-.bcm-switch__container--left, .bcm-switch__container--right {
-  align-items: center;
-}
-.bcm-switch__container--left .bcm-label__text, .bcm-switch__container--right .bcm-label__text {
-  margin: 0;
-}
-.bcm-switch__container--left {
-  flex-direction: row;
-}
-.bcm-switch__container--left .bcm-label__text {
-  margin-right: 4px;
-}
-.bcm-switch__container--right {
-  flex-direction: row-reverse;
-}
-.bcm-switch__container--right .bcm-label__text {
-  margin-left: 4px;
-}
-.bcm-switch:focus-visible {
-  outline: none;
-}
-.bcm-switch:focus-visible .bcm-switch__toggle {
-  background-color: var(--bcm-new-ds-color-slate-400);
-}
-.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked {
-  background-color: var(--bcm-new-ds-color-blue-600);
-}
-.bcm-switch:hover {
-  outline: none;
-}
-.bcm-switch:hover .bcm-switch__toggle .handle {
-  background-color: var(--bcm-new-ds-color-slate-100);
-}
-.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle {
-  background-color: var(--bcm-new-ds-color-slate-100);
-}
-.bcm-switch * {
-  box-sizing: border-box;
-}
-.bcm-switch.hidden {
-  display: none;
-}
-.bcm-switch input {
-  display: none;
-}
-.bcm-switch.disabled .bcm-switch__toggle {
-  cursor: not-allowed;
-  opacity: 40%;
-}
-.bcm-switch.readonly .bcm-switch__toggle {
-  cursor: default;
-  opacity: 80%;
-}
-.bcm-switch__label {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-}
-.bcm-switch__label .active-text {
-  color: var(--bcm-new-ds-color-blue-700);
-  margin: 0 0 0 4px;
-}
-.bcm-switch__label .inactive-text {
-  color: var(--bcm-new-ds-color-slate-700);
-  margin: 0 4px 0 0;
-}
-.bcm-switch__toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 16px;
-  background-color: var(--bcm-new-ds-color-slate-300);
-  position: relative;
-  cursor: pointer;
-}
-.bcm-switch__toggle .handle {
-  padding: 1px;
-  position: absolute;
-  background-color: var(--bcm-new-ds-color-slate-50);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 16px;
-  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
-  box-shadow: 0 1px 3px 0 rgba(17, 24, 38, 0.1);
-}
-.bcm-switch__toggle .icon-active {
-  opacity: 0;
-  margin-left: 2px;
-}
-.bcm-switch__toggle .icon-inactive {
-  opacity: 1;
-  margin-right: 2px;
-}
-.bcm-switch__toggle.bcm-switch__size-small {
-  width: 32px;
-  min-width: 32px;
-  height: 16px;
-  padding: 4px;
-}
-.bcm-switch__toggle.bcm-switch__size-small .handle {
-  width: 12px;
-  height: 12px;
-  left: 2px;
-}
-.bcm-switch__toggle.bcm-switch__size-small.switch-checked .handle {
-  left: 18px;
-}
-.bcm-switch__toggle.bcm-switch__size-small:active:not(.disabled):not(.readonly) .handle {
-  width: 16px;
-}
-.bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 12px;
-}
-.bcm-switch__toggle.bcm-switch__size-small .switch-spinner {
-  box-sizing: border-box;
-  display: inline-flex;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  border: 1px solid var(--bcm-new-ds-color-white);
-  border-top-color: var(--bcm-new-ds-color-slate-900);
-  animation: switch-spinner 1.5s linear infinite;
-}
-.bcm-switch__toggle.bcm-switch__size-medium {
-  width: 36px;
-  min-width: 36px;
-  height: 18px;
-  padding: 4px;
-}
-.bcm-switch__toggle.bcm-switch__size-medium .handle {
-  width: 14px;
-  height: 14px;
-  left: 2px;
-}
-.bcm-switch__toggle.bcm-switch__size-medium.switch-checked .handle {
-  left: 20px;
-}
-.bcm-switch__toggle.bcm-switch__size-medium:active:not(.disabled):not(.readonly) .handle {
-  width: 18px;
-}
-.bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 14px;
-}
-.bcm-switch__toggle.bcm-switch__size-medium .switch-spinner {
-  box-sizing: border-box;
-  display: inline-flex;
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  border: 1px solid var(--bcm-new-ds-color-white);
-  border-top-color: var(--bcm-new-ds-color-slate-900);
-  animation: switch-spinner 1.5s linear infinite;
-}
-.bcm-switch__toggle.bcm-switch__size-large {
-  width: 40px;
-  min-width: 40px;
-  height: 20px;
-  padding: 4px;
-}
-.bcm-switch__toggle.bcm-switch__size-large .handle {
-  width: 16px;
-  height: 16px;
-  left: 2px;
-}
-.bcm-switch__toggle.bcm-switch__size-large.switch-checked .handle {
-  left: 22px;
-}
-.bcm-switch__toggle.bcm-switch__size-large:active:not(.disabled):not(.readonly) .handle {
-  width: 20px;
-}
-.bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 16px;
-}
-.bcm-switch__toggle.bcm-switch__size-large .switch-spinner {
-  box-sizing: border-box;
-  display: inline-flex;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  border: 1px solid var(--bcm-new-ds-color-white);
-  border-top-color: var(--bcm-new-ds-color-slate-900);
-  animation: switch-spinner 1.5s linear infinite;
-}
-.bcm-switch__toggle.switch-checked {
-  background-color: var(--bcm-new-ds-color-blue-500);
-}
-.bcm-switch__toggle.switch-checked .icon-active {
-  color: var(--bcm-new-ds-color-slate-100);
-  opacity: 1;
-}
-.bcm-switch__toggle.switch-checked .icon-inactive {
-  opacity: 0;
-}
-.bcm-switch__toggle.switch-checked .switch-spinner {
-  border-top-color: var(--bcm-new-ds-color-blue-600);
-}
-.bcm-switch__size-small .bcm-switch__label,
-.bcm-switch__size-small .bcm-label__text {
-  font-size: 12px;
-}
-.bcm-switch__size-small .bcm-switch__toggle {
-  font-size: 8px;
-}
-.bcm-switch__size-medium .bcm-switch__label,
-.bcm-switch__size-medium .bcm-label__text {
-  font-size: 13px;
-}
-.bcm-switch__size-medium .bcm-switch__toggle {
-  font-size: 9px;
-}
-.bcm-switch__size-large .bcm-switch__label,
-.bcm-switch__size-large .bcm-label__text {
-  font-size: 16px;
-}
-.bcm-switch__size-large .bcm-switch__toggle {
-  font-size: 12px;
-}
-
-@keyframes switch-spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}