@dynamic-framework/ui-react 1.2.1 → 1.3.0

package/src/style/components/_m-monthpicker.scss

@@ -1,90 +0,0 @@
-// stylelint-disable selector-class-pattern
-
-.react-datepicker.m-month-picker {
-  // Month variables
-  --#{$prefix}m-monthpicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-2) 0;
-  --#{$prefix}m-monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
-  --#{$prefix}m-monthpicker-header-color: var(--#{$prefix}white);
-  --#{$prefix}m-monthpicker-header-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}m-monthpicker-month-gap: 0;
-  --#{$prefix}m-monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-monthpicker-month-color: var(--#{$prefix}white);
-  --#{$prefix}m-monthpicker-month-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}m-monthpicker-month-today-color: var(--#{$prefix}white);
-  --#{$prefix}m-monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
-  --#{$prefix}m-monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
-
-  --#{$prefix}m-monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
-
-  --#{$prefix}m-monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}m-monthpicker-month-wrapper-font-size: var(--#{$prefix}-ref-fs-small);
-
-  --#{$prefix}m-monthpicker-single-month-width: 46px;
-  --#{$prefix}m-monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}m-monthpicker-single-month-margin: 0;
-  --#{$prefix}m-monthpicker-single-month-text-transform: capitalize;
-  --#{$prefix}m-monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-4);
-
-  --#{$prefix}m-monthpicker-single-month-after-display: ".";
-  --#{$prefix}m-monthpicker-single-month-after-content: ".";
-
-  --#{$prefix}m-datepicker-triangle-color: var(--#{$prefix}dark);
-
-  font-family: var(--#{$prefix}m-datepicker-font-family);
-  border: var(--#{$prefix}m-datepicker-border);
-  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
-
-  .react-datepicker__header {
-    padding: var(--#{$prefix}m-monthpicker-header-padding);
-    font-weight: var(--#{$prefix}m-monthpicker-font-weight);
-    color: var(--#{$prefix}m-monthpicker-header-color);
-    background-color: var(--#{$prefix}m-monthpicker-header-bg);
-  }
-
-  .react-datepicker__month.react-datepicker__monthPicker,
-  .react-datepicker__header.react-datepicker-year-header {
-    gap: var(--#{$prefix}m-monthpicker-month-gap);
-    padding: var(--#{$prefix}m-monthpicker-month-padding);
-    color: var(--#{$prefix}m-monthpicker-month-color);
-    background-color: var(--#{$prefix}m-monthpicker-month-bg);
-
-  }
-  .react-datepicker__month--selected,
-  .react-datepicker__month-text--in-range,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--keyboard-selected {
-    color: var(--#{$prefix}m-monthpicker-month-today-color);
-    background-color: var(--#{$prefix}m-monthpicker-month-selected-bg);
-    box-shadow: var(--#{$prefix}m-monthpicker-month-selected-box-shadow);
-  }
-  .react-datepicker__month-text:hover {
-    background-color: var(--#{$prefix}m-monthpicker-month-hover-bg);
-  }
-  .react-datepicker__month-wrapper {
-    display: flex;
-    gap: var(--#{$prefix}m-monthpicker-month-wrapper-gap);
-    font-size: var(--#{$prefix}m-monthpicker-month-wrapper-font-size);
-    .react-datepicker__month-text {
-      width: var(--#{$prefix}m-monthpicker-single-month-width);
-      padding: var(--#{$prefix}m-monthpicker-single-month-padding);
-      margin: var(--#{$prefix}m-monthpicker-single-month-margin);
-      text-transform: var(--#{$prefix}m-monthpicker-single-month-text-transform);
-      border-radius: var(--#{$prefix}m-monthpicker-single-month-radius);
-      &::after {
-        display: var(--#{$prefix}m-monthpicker-single-month-after-display);
-        content: var(--#{$prefix}m-monthpicker-single-month-after-content);
-      }
-    }
-  }
-  .react-datepicker__triangle {
-    &::after,
-    &::before {
-      top: 0;
-      border-bottom-color: var(--#{$prefix}m-datepicker-triangle-color);
-    }
-  }
-}
-
-// stylelint-enable selector-class-pattern

package/src/style/components/_m-paginator.scss

@@ -1,98 +0,0 @@
-.m-pagination {
-  // Page link
-  --#{$prefix}m-pagination-page-item-size: 2.125rem;
-  --#{$prefix}m-pagination-page-link-bg: transparent;
-  --#{$prefix}m-pagination-page-border-radius: 50%;
-  // Arrow
-  --#{$prefix}m-pagination-arrow-font-size: var(--#{$prefix}ref-fs-subparagraph);
-  --#{$prefix}m-pagination-arrow-padding-y: var(--#{$prefix}ref-spacer-1);
-  --#{$prefix}m-pagination-arrow-padding-x: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}m-pagination-arrow-border-radius: var(--#{$prefix}border-radius);
-  --#{$prefix}m-pagination-arrow-color: var(--#{$prefix}secondary);
-  // Arrow :focus
-  --#{$prefix}m-pagination-focus-arrow-bg: var(--#{$prefix}secondary-100);
-  // Arrow previous
-  --#{$prefix}m-pagination-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
-  --#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
-  // Arrow next
-  --#{$prefix}m-pagination-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
-  --#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
-  margin: 0;
-
-  .page-item {
-    min-width: var(--#{$prefix}m-pagination-page-item-size);
-    min-height: var(--#{$prefix}m-pagination-page-item-size);
-
-    &:not(.active, :hover) .page-link {
-      background-color: var(--#{$prefix}m-pagination-page-link-bg);
-    }
-  }
-
-  .m-arrow .page-link {
-    min-width: fit-content;
-    padding: var(--#{$prefix}m-pagination-arrow-padding-y) var(--#{$prefix}m-pagination-arrow-padding-x);
-    font-size: var(--#{$prefix}m-pagination-arrow-font-size);
-    border-radius: var(--#{$prefix}m-pagination-arrow-border-radius);
-
-    &:focus {
-      background-color: var(--#{$prefix}m-pagination-focus-arrow-bg);
-    }
-
-    &::after,
-    &::before {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-repeat: no-repeat;
-      background-size: var(--#{$prefix}m-pagination-arrow-font-size);
-    }
-  }
-
-  .m-arrow:is(.m-arrow-prev, .m-arrow-next):not(.disabled) .page-link {
-    color: var(--#{$prefix}m-pagination-arrow-color);
-  }
-
-  // Arrow prev
-  .m-arrow.m-arrow-prev .page-link::before {
-    min-width: var(--#{$prefix}m-pagination-arrow-font-size);
-    min-height: var(--#{$prefix}m-pagination-arrow-font-size);
-    margin-right: var(--#{$prefix}ref-spacer-1);
-    content: "";
-    background-image: var(--#{$prefix}m-pagination-arrow-prev-icon-bg-image);
-    background-position: center left;
-  }
-
-  // Arrow next
-  .m-arrow.m-arrow-next .page-link::after {
-    width: var(--#{$prefix}m-pagination-arrow-font-size);
-    height: var(--#{$prefix}m-pagination-arrow-font-size);
-    margin-left: var(--#{$prefix}ref-spacer-1);
-    content: "";
-    background-image: var(--#{$prefix}m-pagination-arrow-next-icon-bg-image);
-    background-position: center right;
-  }
-
-  // Hide default icon
-  .m-arrow:is(.m-arrow-next, .m-arrow-prev).no-label .page-link > span {
-    display: none;
-  }
-
-  .m-arrow-prev.disabled .page-link::before {
-    background-image: var(--#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image);
-  }
-
-  .m-arrow-next.disabled .page-link::after {
-    background-image: var(--#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image);
-  }
-
-  .page-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border-radius: var(--#{$prefix}m-pagination-page-border-radius);
-  }
-}

package/src/style/components/_m-stepper.scss

@@ -1,156 +0,0 @@
-.m-stepper {
-  /* Icon container */
-  --#{$prefix}m-step-icon-container-color: var(--#{$prefix}secondary);
-  --#{$prefix}m-step-icon-container-background-color: var(--#{$prefix}white);
-  --#{$prefix}m-step-icon-container-size: 34px;
-  --#{$prefix}m-step-icon-container-border-width: 1px;
-  --#{$prefix}m-step-icon-container-border-color: var(--#{$prefix}secondary);
-  --#{$prefix}m-step-icon-container-border-radius: 100%;
-  --#{$prefix}m-step-icon-container-z-index: 3;
-
-  /* Base step */
-  --#{$prefix}m-step-label-height: 3rem;
-  --#{$prefix}m-step-icon-size: 1.125rem;
-  --#{$prefix}m-step-gap: .5rem;
-  --#{$prefix}m-step-z-index: 2;
-
-  /* Checked step */
-  --#{$prefix}m-step-check-text-color: var(--#{$prefix}white);
-  --#{$prefix}m-step-check-background-color: var(--#{$prefix}success);
-  --#{$prefix}m-step-check-border-color: var(--#{$prefix}success);
-
-  /* Current step */
-  --#{$prefix}m-step-current-text-color: var(--#{$prefix}white);
-  --#{$prefix}m-step-current-background-color: var(--#{$prefix}secondary);
-
-  /* Step line */
-  --#{$prefix}m-step-line-stroke: 1px;
-  --#{$prefix}m-step-line-color: var(--#{$prefix}secondary);
-
-  /* Step label */
-  --#{$prefix}m-step-label-padding: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}m-vertical-step-label-padding: var(--#{$prefix}ref-spacer-3);
-
-
-  position: relative;
-  display: flex;
-
-  .m-step {
-    display: flex;
-    flex: 1 1 0;
-    flex-direction: column;
-    gap: var(--#{$prefix}m-step-gap);
-
-    .m-step-value {
-      position: relative;
-      display: flex;
-      justify-content: center;
-    }
-
-    .m-step-icon-container {
-      position: relative;
-      z-index: var(--#{$prefix}m-step-icon-container-z-index);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--#{$prefix}m-step-icon-container-size);
-      height: var(--#{$prefix}m-step-icon-container-size);
-
-      color: var(--#{$prefix}m-step-icon-container-color);
-      background-color: var(--#{$prefix}m-step-icon-container-background-color);
-      border: var(--#{$prefix}m-step-icon-container-border-width) solid var(--#{$prefix}m-step-icon-container-border-color);
-      border-radius: var(--#{$prefix}m-step-icon-container-border-radius);
-    }
-
-    .m-step-check {
-      color: var(--#{$prefix}m-step-check-text-color);
-      background-color: var(--#{$prefix}m-step-check-background-color);
-      border-color: var(--#{$prefix}m-step-check-border-color);
-    }
-
-    .m-step-current {
-      color: var(--#{$prefix}m-step-current-text-color);
-      background-color: var(--#{$prefix}m-step-current-background-color);
-    }
-
-    .m-step-value::after {
-      position: absolute;
-      top: 50%;
-      z-index: var(--#{$prefix}m-step-z-index);
-      width: 100%;
-      height: var(--#{$prefix}m-step-line-stroke);
-      content: "";
-      background-color: var(--#{$prefix}m-step-line-color);
-    }
-
-    &:first-child .m-step-value::after {
-      left: 50%;
-      z-index: var(--#{$prefix}m-step-z-index);
-      width: 50%;
-    }
-
-    &:last-child .m-step-value::after {
-      right: 50%;
-      z-index: var(--#{$prefix}m-step-z-index);
-      width: 50%;
-    }
-
-    .m-step-label {
-      padding-right: var(--#{$prefix}m-step-label-padding);
-      padding-left: var(--#{$prefix}m-step-label-padding);
-      text-align: center;
-    }
-  }
-
-  &.is-vertical {
-    flex-direction: column;
-
-    .m-step {
-      flex-direction: row;
-      align-items: center;
-
-      .m-step-value {
-        align-items: center;
-        height: 100%;
-      }
-
-      .m-step-label {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        min-height: var(--#{$prefix}m-step-label-height);
-        padding: var(--#{$prefix}m-vertical-step-label-padding);
-        text-align: left;
-      }
-
-      .m-step-value::after {
-        position: absolute;
-        top: 0;
-        left: calc(50% - var(--#{$prefix}m-step-line-stroke));
-        z-index: var(--#{$prefix}m-step-z-index);
-        width: 0;
-        height: 100%;
-        content: "";
-        border: var(--#{$prefix}m-step-icon-container-border-width) solid var(--#{$prefix}m-step-icon-container-border-color);
-      }
-
-      &:first-child .m-step-value::after {
-        top: 50%;
-        z-index: var(--#{$prefix}m-step-z-index);
-        width: 0;
-        height: 50%;
-      }
-
-      &:last-child .m-step-value::after {
-        z-index: var(--#{$prefix}m-step-z-index);
-        width: 0;
-        height: 50%;
-      }
-    }
-  }
-
-  .m-step-icon {
-    display: flex;
-    font-size: var(--#{$prefix}m-step-icon-size);
-  }
-}

package/src/style/components/_m-tabs.scss

@@ -1,56 +0,0 @@
-.m-tabs {
-  --#{$prefix}m-tabs-nav-gap: #{$nav-nav-gap};
-  --#{$prefix}m-tabs-nav-padding-x: #{$nav-nav-padding-x};
-  --#{$prefix}m-tabs-nav-padding-y: #{$nav-nav-padding-y};
-  --#{$prefix}m-tabs-link-border-height: #{$nav-link-border-height};
-  --#{$prefix}m-tabs-link-line-height: #{$nav-link-line-height};
-  --#{$prefix}m-tabs-link-border-border-radius: #{$nav-link-border-border-radius};
-  --#{$prefix}m-tabs-link-border-active-color: #{$nav-link-border-active-color};
-  --#{$prefix}m-tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
-  --#{$prefix}m-tabs-link-border-active-bg: #{$nav-link-border-active-bg};
-
-  display: flex;
-  flex-direction: column;
-
-  .nav {
-    gap: var(--#{$prefix}m-tabs-nav-gap);
-    padding: var(--#{$prefix}m-tabs-nav-padding-y) var(--#{$prefix}m-tabs-nav-padding-x);
-  }
-
-  .nav-link {
-    position: relative;
-    line-height: var(--#{$prefix}m-tabs-link-line-height);
-
-    &.active {
-      font-weight: var(--#{$prefix}m-tabs-link-border-active-font-weight);
-      color: var(--#{$prefix}m-tabs-link-border-active-color);
-
-      &::before {
-        background: var(--#{$prefix}m-tabs-link-border-active-bg);
-      }
-    }
-  }
-
-  .nav-link::before {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: var(--#{$prefix}m-tabs-link-border-height);
-    content: " ";
-    border-radius: var(--#{$prefix}m-tabs-link-border-border-radius);
-  }
-
-  &.m-tabs-vertical {
-    flex-direction: row;
-
-    .nav {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .tab-content {
-      flex: 1;
-    }
-  }
-}

package/src/style/components/_m-timepicker.scss

@@ -1,37 +0,0 @@
-.m-datepicker-time {
-  --#{$prefix}m-datepicker-time-m-input: 100%;
-  --#{$prefix}m-datepicker-webkit-time-color: var(--#{$prefix}black);
-  --#{$prefix}m-datepicker-webkit-time-align: left;
-  --#{$prefix}m-datepicker-webkit-edit-text-padding: 2px;
-
-  --#{$prefix}m-datepicker-webkit-edit-ampm-padding: 0 4px;
-  --#{$prefix}m-datepicker-webkit-edit-ampm-color: var(--#{$prefix}secondary-900);
-  --#{$prefix}m-datepicker-webkit-edit-ampm-bg: var(--#{$prefix}secondary-100);
-  --#{$prefix}m-datepicker-webkit-edit-ampm-radius: 4px;
-
-  --#{$prefix}m-datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
-
-  .m-input {
-    width: var(--#{$prefix}m-datepicker-time-m-input);
-  }
-  // stylelint-disable selector-no-qualifying-type
-  input[type="time"] {
-    &::-webkit-datetime-edit {
-      color: var(--#{$prefix}m-datepicker-webkit-time-color);
-      text-align: var(--#{$prefix}m-datepicker-webkit-time-align);
-    }
-    &::-webkit-datetime-edit-text {
-      padding-inline: var(--#{$prefix}m-datepicker-webkit-edit-text-padding);
-    }
-    &::-webkit-datetime-edit-ampm-field {
-      padding: var(--#{$prefix}m-datepicker-webkit-edit-ampm-padding);
-      color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-color);
-      background-color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-bg);
-      border-radius: var(--#{$prefix}m-datepicker-webkit-edit-ampm-radius);
-    }
-    &::-webkit-calendar-picker-indicator {
-      background-image: var(--#{$prefix}m-datepicker-calendar-picker-icon);
-    }
-  }
-
-}