draft-components 0.75.3 → 1.0.0-beta

package/scss/components/_calendar.scss

@@ -1,185 +0,0 @@
-@use 'sass:math' as math;
-@use '../abstracts' as dc;
-
-$_calendar-cell-gap: dc.$gap-2x;
-$_calendar-cell-size: dc.px-to-rem(30px);
-$_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
-
-.dc-calendar {
-  font-family: var(--dc-font-base);
-}
-
-.dc-calendar-header {
-  display: flex;
-  align-items: center;
-}
-
-.dc-calendar-header > * + * {
-  margin-left: dc.$gap-1x;
-}
-
-.dc-calendar-header__title {
-  font-size: dc.$font-size-sm;
-  font-weight: dc.$font-weight-normal;
-  flex: auto;
-  text-align: center;
-  color: var(--dc-calendar-text-color);
-}
-
-.dc-calendar-header__title::first-letter {
-  text-transform: uppercase;
-}
-
-.dc-calendar-header__btn {
-  color: var(--dc-calendar-arrow-color);
-}
-
-.dc-calendar__row-group > * + * {
-  margin-top: $_calendar-cell-gap;
-}
-
-.dc-calendar__row-group > *:first-child {
-  justify-content: flex-end;
-}
-
-.dc-calendar-row {
-  display: flex;
-}
-
-.dc-calendar-row_head {
-  margin-bottom: dc.$gap-2x;
-  padding: dc.$gap-2x 0;
-  border-bottom: 1px solid var(--dc-calendar-border-secondary-color);
-}
-
-.dc-calendar-row_head > * {
-  font-size: dc.$font-size-xs;
-  flex: 1 0 $_calendar-cell-size;
-  text-align: center;
-  color: var(--dc-calendar-text-secondary-color);
-}
-
-.dc-calendar-row_head > * + * {
-  margin-left: $_calendar-cell-gap;
-}
-
-.dc-calendar-day {
-  position: relative;
-  flex: 0 0 $_calendar-cell-size;
-  height: $_calendar-cell-size;
-  color: var(--dc-calendar-text-color);
-}
-
-.dc-calendar-day::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: '';
-  border-radius: inherit;
-}
-
-.dc-calendar-day__btn {
-  font-size: dc.$font-size-sm;
-  line-height: 1;
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  width: $_calendar-cell-size;
-  height: $_calendar-cell-size;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  color: inherit;
-  border: 1px solid transparent;
-  border-radius: 50%;
-  background: none;
-  appearance: none;
-}
-
-.dc-calendar-day__btn:hover {
-  z-index: 1;
-  border-color: var(--dc-calendar-border-color);
-}
-
-.dc-calendar-day__btn:focus {
-  z-index: 1;
-  outline: none;
-  @include dc.focus-ring;
-}
-
-//noinspection CssMissingComma
-.dc-calendar-day_range-preview-start:not(.dc-calendar-day_selected)
-  .dc-calendar-day__btn,
-.dc-calendar-day_range-preview-end:not(.dc-calendar-day_selected)
-  .dc-calendar-day__btn {
-  border-color: var(--dc-calendar-border-color);
-}
-
-.dc-calendar-day + .dc-calendar-day {
-  padding-left: $_calendar-cell-gap;
-}
-
-.dc-calendar-day + .dc-calendar-day_range-start,
-.dc-calendar-day + .dc-calendar-day_range-preview-start {
-  margin-left: $_calendar-cell-gap;
-  padding-left: 0;
-}
-
-.dc-calendar-day_in-range::before {
-  background: dc.$blue-100;
-}
-
-.dc-calendar-day_in-range-preview::before {
-  border-top: $_calendar-day-border;
-  border-bottom: $_calendar-day-border;
-}
-
-.dc-calendar-day_in-range-preview:first-child::before,
-.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-start::before {
-  border-left: $_calendar-day-border;
-}
-
-.dc-calendar-day_in-range-preview:last-child::before,
-.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-end::before {
-  border-right: $_calendar-day-border;
-}
-
-.dc-calendar-day_range-start,
-.dc-calendar-day_range-preview-start,
-.dc-calendar-day:first-child {
-  border-top-left-radius: math.div($_calendar-cell-size, 2);
-  border-bottom-left-radius: math.div($_calendar-cell-size, 2);
-}
-
-.dc-calendar-day_range-end,
-.dc-calendar-day_range-preview-end,
-.dc-calendar-day:last-child {
-  border-top-right-radius: math.div($_calendar-cell-size, 2);
-  border-bottom-right-radius: math.div($_calendar-cell-size, 2);
-}
-
-.dc-calendar-day_current {
-  color: var(--dc-calendar-current-day-text-color);
-}
-
-.dc-calendar-day_selected {
-  color: var(--dc-calendar-selected-day-text-color);
-}
-
-.dc-calendar-day_selected .dc-calendar-day__btn {
-  background: var(--dc-calendar-selected-day-bg-color);
-}
-
-.dc-calendar-day_selected .dc-calendar-day__btn:hover {
-  border-color: var(--dc-calendar-selected-day-bg-color);
-}
-
-.dc-calendar-day_disabled {
-  opacity: var(--dc-disabled-state-opacity);
-}
-
-.dc-calendar-day_disabled > .dc-calendar-day__btn {
-  border-color: transparent;
-}

package/scss/components/_checkbox.scss

@@ -1,55 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-checkbox {
-  --dc-selection-control-size: var(--dc-checkbox-size);
-}
-
-.dc-checkbox__input {
-  @include dc.visually-hidden;
-}
-
-.dc-checkbox__check {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--dc-checkbox-size);
-  height: var(--dc-checkbox-size);
-  cursor: pointer;
-  border: var(--dc-input-border);
-  border-radius: dc.$border-radius-xs;
-  background: var(--dc-input-bg);
-}
-
-.dc-checkbox__input:checked + .dc-checkbox__check {
-  color: var(--dc-input-accent-secondary-color);
-  border-color: var(--dc-input-accent-color);
-  background: var(--dc-input-accent-color);
-}
-
-.dc-checkbox__input:focus + .dc-checkbox__check {
-  box-shadow: 0 0 0 3px var(--dc-focus-ring-color);
-}
-
-.dc-checkbox__input:disabled + .dc-checkbox__check {
-  cursor: default;
-  border-color: var(--dc-input-disabled-border-color);
-  background: var(--dc-input-disabled-bg);
-}
-
-.dc-checkbox__check-icon {
-  display: none;
-}
-
-.dc-checkbox__input:checked + .dc-checkbox__check > .dc-checkbox__check-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: inline-flex;
-  transform: translate(-50%, -50%);
-}
-
-.dc-checkbox__input:disabled + .dc-checkbox__check > .dc-checkbox__check-icon {
-  color: var(--dc-input-disabled-text-color);
-}

package/scss/components/_date-picker.scss

@@ -1,11 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-date-picker {
-  font-family: var(--dc-font-base);
-  display: inline-block;
-}
-
-.dc-date-picker__footer {
-  font-size: dc.$font-size-sm;
-  margin-top: dc.$gap-2x;
-}

package/scss/components/_date-preset-picker-popover.scss

@@ -1,78 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-date-preset-picker-popover {
-  max-width: initial;
-  max-height: initial;
-}
-
-.dc-date-preset-picker {
-}
-
-.dc-date-preset-picker__body {
-  display: flex;
-}
-
-.dc-date-preset-picker__body > * + * {
-  margin-left: dc.$gap-6x;
-}
-
-.dc-date-preset-picker_phone-view .dc-date-preset-picker__body {
-  flex-direction: column;
-}
-
-.dc-date-preset-picker_phone-view .dc-date-preset-picker__body > * + * {
-  margin-top: dc.$gap-4x;
-  margin-left: 0;
-}
-
-.dc-date-preset-picker__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: dc.$gap-4x;
-  padding-top: dc.$gap-4x;
-  border-top: 1px solid var(--dc-secondary-border-color);
-}
-
-.dc-date-preset-picker__footer > * + * {
-  margin-left: dc.$gap-4x;
-}
-
-.dc-date-preset-picker__selection {
-  font-size: dc.$font-size-xs;
-  text-align: right;
-}
-
-.dc-date-preset-picker__selection > * {
-  display: block;
-}
-
-.dc-date-preset-picker__selection > small {
-  font-size: dc.$font-size-2xs;
-  color: var(--dc-secondary-text-color);
-}
-
-.dc-date-preset-picker__btns {
-  display: flex;
-  align-items: center;
-}
-
-.dc-date-preset-picker__btns > * + * {
-  margin-left: dc.$gap-2x;
-}
-
-.dc-date-preset-picker_phone-view .dc-date-preset-picker__footer {
-  align-items: stretch;
-  flex-direction: column;
-  padding-top: 0;
-  border-top: none;
-}
-
-.dc-date-preset-picker_phone-view .dc-date-preset-picker__footer > * + * {
-  margin-top: dc.$gap-3x;
-  margin-left: 0;
-}
-
-.dc-date-preset-picker_phone-view .dc-date-preset-picker__btns > * {
-  flex: 1 0 50%;
-}

package/scss/components/_datetime-input.scss

@@ -1,94 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-datetime-input {
-  display: inline-block;
-  border: none;
-}
-
-.dc-datetime-input__body,
-.dc-datetime-input__group {
-  display: inline-flex;
-  align-items: center;
-  width: auto;
-}
-
-.dc-datetime-input__body {
-  width: auto;
-  padding: dc.$gap-1x calc(var(--dc-input-gap) - #{dc.px-to-rem(2px)});
-}
-
-.dc-datetime-input__group {
-  height: 100%;
-}
-
-.dc-datetime-input__group + .dc-datetime-input__group {
-  margin-left: dc.$gap-3x;
-}
-
-.dc-datetime-input__separator {
-  display: inline-block;
-  padding: 0 dc.px-to-rem(2px);
-  opacity: dc.$opacity-50;
-}
-
-.dc-date-component-input {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0;
-}
-
-.dc-date-component-input > * {
-  padding: 0 dc.px-to-rem(2px);
-  font-variant-numeric: tabular-nums;
-}
-
-.dc-date-component-input > [aria-hidden='true'] {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.dc-date-component-input > input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  border: none;
-  border-radius: dc.$border-radius-2xs;
-  background: none;
-  appearance: none;
-  -moz-appearance: textfield;
-}
-
-.dc-date-component-input > input::-webkit-outer-spin-button,
-.dc-date-component-input > input::-webkit-inner-spin-button {
-  margin: 0;
-  appearance: none;
-}
-
-.dc-date-component-input > input::placeholder {
-  opacity: dc.$opacity-40;
-  color: inherit;
-}
-
-.dc-date-component-input > input:focus {
-  color: white;
-  outline: none;
-  background: var(--dc-input-accent-color);
-  caret-color: transparent;
-}
-
-.dc-date-component-input > input::selection,
-.dc-date-component-input > input:focus::selection {
-  background: transparent;
-}
-
-.dc-date-component-input > input:focus::placeholder {
-  opacity: dc.$opacity-80;
-}

package/scss/components/_dialog.scss

@@ -1,114 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-dialog-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  overflow-y: auto;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background-color: var(--dc-dialog-backdrop-color);
-}
-
-.dc-dialog {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 40rem;
-  max-width: 100%;
-  height: auto;
-  margin: dc.$gap-4x;
-  padding-bottom: dc.$gap-4x;
-  transition-property: opacity, transform;
-  vertical-align: middle;
-  border-color: var(--dc-dialog-border-color);
-  background: var(--dc-dialog-bg-color);
-
-  & > *:first-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  & > *:last-child {
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-  }
-}
-
-.dc-dialog-container_with-animation,
-.dc-dialog-container_with-animation .dc-dialog {
-  transition-duration: 200ms;
-  transition-property: opacity, transform;
-}
-
-.dc-dialog-container_with-animation {
-  transition-timing-function: linear;
-  opacity: 0;
-}
-
-.dc-dialog-container_open {
-  opacity: 1;
-}
-
-.dc-dialog-container_with-animation .dc-dialog {
-  transition-timing-function: ease;
-  transform: scale(0.9);
-}
-
-.dc-dialog-container_open .dc-dialog {
-  transform: scale(1);
-}
-
-.dc-dialog__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  color: var(--dc-dialog-header-color);
-}
-
-.dc-dialog__close-btn {
-  flex: none;
-  margin: dc.$gap-1x;
-}
-
-.dc-dialog__description {
-  color: var(--dc-dialog-description-color);
-}
-
-.dc-dialog__header-content,
-.dc-dialog__content,
-.dc-dialog__actions,
-.dc-dialog__footer {
-  padding-right: dc.$gap-4x;
-  padding-left: dc.$gap-4x;
-}
-
-.dc-dialog__header-content {
-  flex: auto;
-  padding-top: dc.$gap-4x;
-  padding-bottom: dc.$gap-4x;
-
-  & > * + * {
-    margin-top: dc.$gap-1x;
-  }
-}
-
-.dc-dialog__content {
-  position: relative;
-}
-
-.dc-dialog__actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding-top: dc.$gap-6x;
-
-  & > * + * {
-    margin-left: dc.$gap-2x;
-  }
-}

package/scss/components/_file-input.scss

@@ -1,94 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-file-input {
-  font-family: var(--dc-font-base);
-  font-size: dc.$font-size-sm;
-  width: 100%;
-  color: var(--dc-file-input-text-color);
-}
-
-.dc-file-input__drop-zone {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 100%;
-  padding: dc.$gap-8x dc.$gap-6x;
-  border: 1px dashed var(--dc-file-input-border-color);
-  border-radius: dc.$border-radius-lg;
-}
-
-.dc-file-input__drop-zone_drag-over {
-  border-color: var(--dc-file-input-drag-border-color);
-}
-
-.dc-file-input__content {
-  text-align: center;
-}
-
-.dc-file-input__icon {
-  display: inline-flex;
-  margin-bottom: dc.$gap-5x;
-  color: var(--dc-file-input-icon-color);
-}
-
-.dc-file-input__button {
-  padding: dc.px-to-rem(2px);
-  cursor: pointer;
-  transition: dc.$transition-quick;
-  transition-property: box-shadow, color;
-  color: var(--dc-file-input-label-color);
-  border-radius: dc.$border-radius-xs;
-}
-
-.dc-file-input__help-text {
-  font-size: 90%;
-  margin-top: dc.$gap-2x;
-  text-align: center;
-  color: var(--dc-file-input-help-text-color);
-}
-
-.dc-file-input__loading-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 200ms linear;
-  transition-property: opacity;
-  opacity: 1;
-  border-radius: inherit;
-  background: rgba(white, dc.$opacity-75);
-}
-
-.dc-file-input__loading-overlay[hidden] {
-  pointer-events: none;
-  opacity: 0;
-}
-
-.dc-file-input__native {
-  @include dc.visually-hidden;
-}
-
-.dc-file-input__native:focus + .dc-file-input__drop-zone {
-  .dc-file-input__button {
-    box-shadow: 0 0 0 2px var(--dc-focus-border-color);
-  }
-}
-
-.dc-file-input_disabled {
-  opacity: var(--dc-disabled-state-opacity);
-}
-
-.dc-file-input_disabled * {
-  cursor: default;
-}
-
-.dc-file-input_disabled .dc-file-input__drop-zone_drag-over {
-  border-color: var(--dc-file-input-border-color);
-}

package/scss/components/_form-field.scss

@@ -1,21 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-form-field {
-}
-
-.dc-form-field__label {
-  display: inline-block;
-  margin-bottom: dc.$gap-1x;
-}
-
-.dc-form-field__input {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.dc-form-field__hint,
-.dc-form-field__error {
-  width: 100%;
-  margin-top: dc.$gap-1x;
-}