@vc-shell/framework 1.1.0 → 1.1.2

package/dist/assets/css/ui-controls-CRtfFczw.css

@@ -0,0 +1,387 @@
+:root {
+  --button-primary-background-color: var(--primary-500);
+  --button-primary-background-color-hover: var(--primary-600);
+  --button-primary-background-color-disabled: var(--primary-300);
+  --button-primary-text-color: var(--additional-50);
+  --button-primary-text-color-disabled: var(--additional-50);
+  --button-primary-border-color: var(--primary-500);
+  --button-primary-border-color-hover: var(--primary-600);
+  --button-primary-border-color-disabled: var(--primary-300);
+  --button-secondary-background-color: var(--additional-50);
+  --button-secondary-background-color-hover: var(--primary-100);
+  --button-secondary-background-color-disabled: var(--additional-50);
+  --button-secondary-text-color: var(--neutrals-700);
+  --button-secondary-text-color-disabled: var(--neutrals-400);
+  --button-secondary-border-color: var(--secondary-300);
+  --button-secondary-border-color-hover: var(--secondary-400);
+  --button-secondary-border-color-disabled: var(--secondary-300);
+  --button-border-radius: 4px;
+  --button-padding-hor: 14px;
+  --button-padding-vert: 10px;
+  --button-padding-hor-small: 12px;
+  --button-padding-vert-small: 8px;
+  --button-padding-vert-extra-small: 5px;
+  --button-padding-hor-extra-small: 12px;
+  --button-height: 36px;
+  --button-height-small: 28px;
+  --button-height-extra-small: 22px;
+}
+.vc-button__icon + .vc-button__title {
+  margin-left: 0.5rem;
+  text-align: left;
+}
+.vc-button.vc-button-primary {
+  box-sizing: border-box;
+  display: flex;
+  display: inline-flex;
+  min-height: var(--button-height);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--button-border-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--button-primary-border-color);
+  background-color: var(--button-primary-background-color);
+  font-weight: 600;
+  color: var(--button-primary-text-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-button.vc-button-primary:hover {
+  border-color: var(--button-primary-border-color-hover);
+  background-color: var(--button-primary-background-color-hover);
+}
+.vc-button.vc-button-primary:focus {
+  border-color: var(--button-primary-border-color-hover);
+  background-color: var(--button-primary-background-color-hover);
+}
+.vc-button.vc-button-primary:disabled {
+  cursor: not-allowed;
+  border-color: var(--button-primary-border-color-disabled);
+  background-color: var(--button-primary-background-color-disabled);
+  color: var(--button-primary-text-color-disabled);
+}
+.vc-button.vc-button-primary.vc-button_text {
+  border-style: none;
+  background-color: transparent;
+  color: var(--button-primary-background-color);
+}
+.vc-button.vc-button-primary.vc-button_text:hover {
+  color: var(--button-primary-background-color-hover);
+}
+.vc-button.vc-button-primary.vc-button_text:focus {
+  color: var(--button-primary-background-color-hover);
+}
+.vc-button.vc-button-primary.vc-button_text:disabled {
+  color: rgb(from var(--button-primary-background-color) r g b/50%);
+}
+.vc-button.vc-button-primary.vc-button_text {
+  min-height: 0px !important;
+  padding: 0px !important;
+}
+.vc-button.vc-button-primary.vc-button_selected {
+  background-color: var(--button-primary-background-color-hover);
+}
+.vc-button.vc-button-primary.vc-button_selected.vc-button_text {
+  background-color: rgb(from var(--button-primary-background-color-hover) r g b/7%);
+  padding: 0.25rem;
+}
+.vc-button.vc-button-primary.vc-button_xs {
+  min-height: var(--button-height-extra-small) !important;
+  padding-top: var(--button-padding-vert-extra-small) !important;
+  padding-bottom: var(--button-padding-vert-extra-small) !important;
+  padding-left: var(--button-padding-hor-extra-small) !important;
+  padding-right: var(--button-padding-hor-extra-small) !important;
+  font-size: 0.625rem !important;
+  line-height: 0.75rem !important;
+}
+.vc-button.vc-button-primary.vc-button_sm {
+  min-height: var(--button-height-small) !important;
+  padding-top: var(--button-padding-vert-small) !important;
+  padding-bottom: var(--button-padding-vert-small) !important;
+  padding-left: var(--button-padding-hor-small) !important;
+  padding-right: var(--button-padding-hor-small) !important;
+  font-size: 0.75rem !important;
+  line-height: 0.875rem !important;
+}
+.vc-button.vc-button-primary.vc-button_base {
+  min-height: var(--button-height);
+  padding-top: var(--button-padding-vert);
+  padding-bottom: var(--button-padding-vert);
+  padding-left: var(--button-padding-hor);
+  padding-right: var(--button-padding-hor);
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+.vc-button.vc-button-primary .vc-button__icon + .vc-button__title {
+  margin-left: 0.5rem;
+}
+.vc-button.vc-button-secondary {
+  box-sizing: border-box;
+  display: flex;
+  display: inline-flex;
+  min-height: var(--button-height);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--button-border-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--button-secondary-border-color);
+  background-color: var(--button-secondary-background-color);
+  font-weight: 600;
+  color: var(--button-secondary-text-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-button.vc-button-secondary:hover {
+  border-color: var(--button-secondary-border-color-hover);
+  background-color: var(--button-secondary-background-color-hover);
+}
+.vc-button.vc-button-secondary:focus {
+  border-color: var(--button-secondary-border-color-hover);
+  background-color: var(--button-secondary-background-color-hover);
+}
+.vc-button.vc-button-secondary:disabled {
+  cursor: not-allowed;
+  border-color: var(--button-secondary-border-color-disabled);
+  background-color: var(--button-secondary-background-color-disabled);
+  color: var(--button-secondary-text-color-disabled);
+}
+.vc-button.vc-button-secondary.vc-button_text {
+  border-style: none;
+  background-color: transparent;
+  color: var(--button-secondary-background-color);
+}
+.vc-button.vc-button-secondary.vc-button_text:hover {
+  color: var(--button-secondary-background-color-hover);
+}
+.vc-button.vc-button-secondary.vc-button_text:focus {
+  color: var(--button-secondary-background-color-hover);
+}
+.vc-button.vc-button-secondary.vc-button_text:disabled {
+  color: rgb(from var(--button-secondary-background-color) r g b/50%);
+}
+.vc-button.vc-button-secondary.vc-button_text {
+  min-height: 0px !important;
+  padding: 0px !important;
+}
+.vc-button.vc-button-secondary.vc-button_selected {
+  background-color: var(--button-secondary-background-color-hover);
+}
+.vc-button.vc-button-secondary.vc-button_selected.vc-button_text {
+  background-color: rgb(from var(--button-secondary-background-color-hover) r g b/7%);
+  padding: 0.25rem;
+}
+.vc-button.vc-button-secondary.vc-button_xs {
+  min-height: var(--button-height-extra-small) !important;
+  padding-top: var(--button-padding-vert-extra-small) !important;
+  padding-bottom: var(--button-padding-vert-extra-small) !important;
+  padding-left: var(--button-padding-hor-extra-small) !important;
+  padding-right: var(--button-padding-hor-extra-small) !important;
+  font-size: 0.625rem !important;
+  line-height: 0.75rem !important;
+}
+.vc-button.vc-button-secondary.vc-button_sm {
+  min-height: var(--button-height-small) !important;
+  padding-top: var(--button-padding-vert-small) !important;
+  padding-bottom: var(--button-padding-vert-small) !important;
+  padding-left: var(--button-padding-hor-small) !important;
+  padding-right: var(--button-padding-hor-small) !important;
+  font-size: 0.75rem !important;
+  line-height: 0.875rem !important;
+}
+.vc-button.vc-button-secondary.vc-button_base {
+  min-height: var(--button-height);
+  padding-top: var(--button-padding-vert);
+  padding-bottom: var(--button-padding-vert);
+  padding-left: var(--button-padding-hor);
+  padding-right: var(--button-padding-hor);
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+.vc-button.vc-button-secondary .vc-button__icon + .vc-button__title {
+  margin-left: 0.5rem;
+}:root {
+  --label-required-color: var(--danger-500);
+  --label-tooltip-color: var(--info-400);
+  --label-lang-color: var(--neutrals-500);
+  --label-error-color: var(--danger-500);
+}
+.vc-label {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.vc-label__text {
+  flex-wrap: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+.vc-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+.vc-label__required {
+  margin-left: 0.25rem;
+  color: var(--label-required-color);
+}
+.vc-label__tooltip {
+  position: relative;
+  margin-left: 0.25rem;
+  margin-right: auto;
+  flex-grow: 0;
+  flex-basis: 0px;
+}
+.vc-label__tooltip-icon {
+  color: var(--label-tooltip-color);
+}
+.vc-label__language {
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  color: var(--label-lang-color);
+}
+.vc-label_error .vc-label__text {
+  color: var(--label-error-color);
+}:root {
+  --link-text-color: var(--primary-500);
+  --link-text-color-hover: var(--primary-400);
+  --link-text-color-active: var(--primary-700);
+  --link-text-color-disabled: var(--neutrals-300);
+}
+.vc-link {
+  display: inline-block;
+  cursor: pointer;
+  color: var(--link-text-color);
+  text-decoration-line: none;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-link:hover {
+  color: var(--link-text-color-hover);
+  text-decoration-line: underline;
+}
+.vc-link--active {
+  color: var(--link-text-color-active);
+  text-decoration-line: none;
+}
+.vc-link--active:hover {
+  color: var(--link-text-color-active);
+  text-decoration-line: none;
+}
+.vc-link--disabled {
+  cursor: not-allowed;
+  color: var(--link-text-color-disabled);
+  text-decoration-line: none;
+}
+.vc-link--disabled:hover {
+  color: var(--link-text-color-disabled);
+  text-decoration-line: none;
+}:root {
+  --switch-width: 36px;
+  --switch-height: 22px;
+  --switch-thumb-size: 16px;
+  --switch-translate: 14px;
+  --switch-main-color: var(--accent-500);
+  --switch-secondary-color: var(--neutrals-300);
+  --switch-icon-background: var(--additional-50);
+  --switch-icon-color: var(--neutrals-400);
+  --switch-transition: all 0.2s ease-in-out;
+}
+.vc-switch__label {
+  margin-bottom: 0.5rem;
+}
+.vc-switch__container {
+  position: relative;
+  display: inline-block;
+  height: var(--switch-height);
+  width: var(--switch-width);
+}
+.vc-switch__hint {
+  margin-top: 0.5rem;
+  width: -moz-max-content;
+  width: max-content;
+}
+.vc-switch__input {
+  height: 0px;
+  width: 0px;
+  cursor: pointer;
+  opacity: 0;
+}
+.vc-switch__input:checked + .vc-switch__slider {
+  background-color: var(--switch-main-color);
+}
+.vc-switch__input:checked + .vc-switch__slider::before {
+  transform: translateX(var(--switch-translate)) translateY(-50%);
+}
+.vc-switch__input:disabled + .vc-switch__slider {
+  cursor: not-allowed;
+  background-color: var(--switch-secondary-color);
+}
+.vc-switch__input:disabled {
+  cursor: not-allowed;
+}
+.vc-switch__slider {
+  position: absolute;
+  inset: 0px;
+  cursor: pointer;
+  border-radius: 9999px;
+  background-color: var(--switch-secondary-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-switch__slider::before {
+  position: absolute;
+  left: 3px;
+  top: 50%;
+  height: var(--switch-thumb-size);
+  width: var(--switch-thumb-size);
+  border-radius: 9999px;
+  background-color: var(--switch-icon-background);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: "";
+  transform: translateX(0) translateY(-50%);
+}.vc-skeleton {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 1rem
+}
+.vc-skeleton__row {
+    height: 1rem;
+    border-radius: 0.25rem;
+    background-color: var(--neutrals-200)
+}
+@keyframes tw-pulse {
+50% {
+        opacity: .5
+}
+}
+.vc-skeleton--animated .vc-skeleton__row {
+    animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+}