@dynamic-framework/ui-react 1.5.0 → 1.7.0

package/src/style/components/_d-modal.scss

@@ -0,0 +1,55 @@
+.modal {
+  --#{$prefix}modal-body-padding: #{$modal-body-padding};
+  --#{$prefix}modal-footer-padding: #{$modal-footer-padding};
+  --#{$prefix}modal-separator-margin-x: #{$modal-separator-margin-x};
+  --#{$prefix}modal-separator-height: #{$modal-separator-height};
+  --#{$prefix}modal-separator-bg: #{$modal-separator-bg};
+
+  .modal-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .d-modal-close {
+    align-self: flex-end;
+    padding: 0;
+    margin-bottom: $spacer-3;
+    background: transparent;
+    border: 0;
+
+    .d-icon {
+      --#{$prefix}icon-size: #{$spacer-3};
+    }
+  }
+
+  .modal-body {
+    padding: var(--#{$prefix}modal-body-padding);
+  }
+
+  .d-modal-separator {
+    height: var(--#{$prefix}modal-separator-height);
+    margin: 0 var(--#{$prefix}modal-separator-margin-x);
+    background: var(--#{$prefix}modal-separator-bg);
+  }
+
+  .modal-footer {
+    gap: var(--#{$prefix}modal-footer-gap);
+    padding: var(--#{$prefix}modal-footer-padding);
+  }
+
+  .d-modal-action-fill > * {
+    flex: 1;
+  }
+
+  .d-modal-action-start {
+    justify-content: flex-start;
+  }
+
+  .d-modal-action-center {
+    justify-content: center;
+  }
+
+  .d-modal-action-end {
+    justify-content: flex-end;
+  }
+}

package/src/style/components/_d-offcanvas.scss

@@ -0,0 +1,45 @@
+.offcanvas {
+  --#{$prefix}offcanvas-footer-gap: #{$offcanvas-footer-gap};
+
+  .offcanvas-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    &:has(.d-offcanvas-close:only-child) {
+      justify-content: flex-end;
+    }
+  }
+
+  .offcanvas-body {
+    padding: 0 var(--#{$prefix}offcanvas-padding-x);
+  }
+
+  .d-offcanvas-footer {
+    display: flex;
+    gap: var(--#{$prefix}offcanvas-footer-gap);
+    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+  }
+
+  .d-offcanvas-close {
+    padding: 0;
+    background: transparent;
+    border: 0;
+
+    .d-icon {
+      --#{$prefix}icon-size: #{$spacer-3};
+    }
+  }
+
+  .d-offcanvas-action-fill > * {
+    flex: 1;
+  }
+
+  .d-offcanvas-action-start {
+    justify-content: flex-start;
+  }
+
+  .d-offcanvas-action-end {
+    justify-content: flex-end;
+  }
+}

package/src/style/components/_d-popover.scss

@@ -1,9 +1,12 @@
 .d-popover {
+  --#{$prefix}popover-min-width: max-content;
+  --#{$prefix}popover-z-index: 1;
   position: relative;
   width: 100%;
 
   .d-popover-content {
-    width: 100%;
+    z-index: var(--#{$prefix}popover-z-index);
+    min-width: var(--#{$prefix}popover-min-width);
 
     &:focus-visible {
       outline: 0;

package/src/style/components/_d-progress.scss

@@ -0,0 +1,9 @@
+.progress {
+  --#{$prefix}progress-bar-font-weight: #{$progress-font-weight};
+
+  font-weight: var(--#{$prefix}progress-bar-font-weight);
+
+  .progress-bar:not(:empty) {
+    min-width: 4ch;
+  }
+}

package/src/style/components/_d-quick-action-button.scss

@@ -0,0 +1,111 @@
+.d-quick-action-button {
+  --#{$prefix}quick-action-button-gap: #{$quick-action-button-gap};
+  --#{$prefix}quick-action-button-padding: #{$quick-action-button-padding};
+  --#{$prefix}quick-action-button-bg: #{$quick-action-button-bg};
+  --#{$prefix}quick-action-button-border-radius: var(--#{$prefix}quick-action-button-component-border-radius, #{$quick-action-button-border-radius});
+  --#{$prefix}quick-action-button-border: #{$quick-action-button-border};
+  --#{$prefix}quick-action-button-box-shadow: #{$quick-action-button-box-shadow};
+
+  --#{$prefix}quick-action-button-border-top: var(--#{$prefix}quick-action-button-component-border-top, var(--#{$prefix}quick-action-button-border));
+  --#{$prefix}quick-action-button-border-right: var(--#{$prefix}quick-action-button-component-border-right, var(--#{$prefix}quick-action-button-border));
+  --#{$prefix}quick-action-button-border-bottom: var(--#{$prefix}quick-action-button-component-border-bottom, var(--#{$prefix}quick-action-button-border));
+  --#{$prefix}quick-action-button-border-left: var(--#{$prefix}quick-action-button-component-border-left, var(--#{$prefix}quick-action-button-border));
+
+  --#{$prefix}quick-action-button-line1-font-size: #{$quick-action-button-line1-font-size};
+  --#{$prefix}quick-action-button-line1-font-weight: #{$quick-action-button-line1-font-weight};
+  --#{$prefix}quick-action-button-line1-color: #{$quick-action-button-line1-color};
+
+  --#{$prefix}quick-action-button-line2-font-size: #{$quick-action-button-line2-font-size};
+  --#{$prefix}quick-action-button-line2-font-weight: #{$quick-action-button-line2-font-weight};
+  --#{$prefix}quick-action-button-line2-color: #{$quick-action-button-line2-color};
+
+  --#{$prefix}quick-action-button-representative-image-size: #{$quick-action-button-representative-image-size};
+  --#{$prefix}quick-action-button-representative-image-border-radius: #{$quick-action-button-representative-image-border-radius};
+  --#{$prefix}quick-action-button-representative-icon-size: #{$quick-action-button-representative-icon-size};
+
+  --#{$prefix}quick-action-button-action-icon-color: #{$quick-action-button-action-icon-color};
+  --#{$prefix}quick-action-button-action-icon-size: #{$quick-action-button-action-icon-size};
+
+  --#{$prefix}quick-action-button-hover-bg: #{$quick-action-button-hover-bg};
+  --#{$prefix}quick-action-button-hover-border-color: #{$quick-action-button-hover-border-color};
+  --#{$prefix}quick-action-button-hover-action-icon-color: #{$quick-action-button-hover-action-icon-color};
+  --#{$prefix}quick-action-button-hover-box-shadow: #{$quick-action-button-hover-box-shadow};
+
+  --#{$prefix}quick-action-button-active-bg: #{$quick-action-button-active-bg};
+  --#{$prefix}quick-action-button-active-border-color: #{$quick-action-button-active-border-color};
+  --#{$prefix}quick-action-button-active-action-icon-color: #{$quick-action-button-active-action-icon-color};
+  --#{$prefix}quick-action-button-active-box-shadow: #{$quick-action-button-active-box-shadow};
+
+  display: flex;
+  gap: var(--#{$prefix}quick-action-button-gap);
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}quick-action-button-padding);
+  text-align: left;
+  background-color: var(--#{$prefix}quick-action-button-bg);
+  background-position: center;
+  border-top: var(--#{$prefix}quick-action-button-border-top);
+  border-right: var(--#{$prefix}quick-action-button-border-right);
+  border-bottom: var(--#{$prefix}quick-action-button-border-bottom);
+  border-left: var(--#{$prefix}quick-action-button-border-left);
+  border-radius: var(--#{$prefix}quick-action-button-border-radius);
+  box-shadow: var(--#{$prefix}quick-action-button-box-shadow);
+
+  &:hover {
+    background: var(--#{$prefix}quick-action-button-hover-bg);
+    border-color: var(--#{$prefix}quick-action-button-hover-border-color);
+    box-shadow: var(--#{$prefix}quick-action-button-hover-box-shadow);
+  }
+
+  &:active {
+    background: var(--#{$prefix}quick-action-button-active-bg);
+    border-color: var(--#{$prefix}quick-action-button-active-border-color);
+    box-shadow: var(--#{$prefix}quick-action-button-active-box-shadow);
+  }
+
+  .d-quick-action-button-representative-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}quick-action-button-representative-image-size);
+    height: var(--#{$prefix}quick-action-button-representative-image-size);
+    background-color: var(--#{$prefix}quick-action-button-action-icon-color);
+    border-radius: var(--#{$prefix}quick-action-button-representative-image-border-radius);
+  }
+
+  .d-quick-action-button-content {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .d-quick-action-button-text {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .d-quick-action-button-line1 {
+    font-size: var(--#{$prefix}quick-action-button-line1-font-size);
+    font-weight: var(--#{$prefix}quick-action-button-line1-font-weight);
+    color: var(--#{$prefix}quick-action-button-line1-color);
+  }
+
+  .d-quick-action-button-line2 {
+    font-size: var(--#{$prefix}quick-action-button-line2-font-size);
+    font-weight: var(--#{$prefix}quick-action-button-line2-font-weight);
+    color: var(--#{$prefix}quick-action-button-line2-color);
+  }
+
+  .d-quick-action-button-action-icon {
+    color: var(--#{$prefix}quick-action-button-action-icon-color);
+  }
+
+  &:hover .d-quick-action-button-action-icon {
+    color: var(--#{$prefix}quick-action-button-active-action-icon-color);
+  }
+
+  &:active .d-quick-action-button-action-icon {
+    color: var(--#{$prefix}quick-action-button-active-action-icon-color);
+  }
+}

package/src/style/components/_d-quick-action-check.scss

@@ -0,0 +1,74 @@
+.d-quick-action-check {
+  --#{$prefix}quick-action-check-gap: #{$quick-action-check-gap};
+  --#{$prefix}quick-action-check-padding: #{$quick-action-check-padding};
+  --#{$prefix}quick-action-check-bg: #{$quick-action-check-bg};
+  --#{$prefix}quick-action-check-border-radius: #{$quick-action-check-border-radius};
+
+  --#{$prefix}quick-action-check-line1-font-size: #{$quick-action-check-line1-font-size};
+  --#{$prefix}quick-action-check-line1-font-weight: #{$quick-action-check-line1-font-weight};
+  --#{$prefix}quick-action-check-line1-color: #{$quick-action-check-line1-color};
+
+  --#{$prefix}quick-action-check-line2-font-size: #{$quick-action-check-line2-font-size};
+  --#{$prefix}quick-action-check-line2-font-weight: #{$quick-action-check-line2-font-weight};
+  --#{$prefix}quick-action-check-line2-color: #{$quick-action-check-line2-color};
+
+  --#{$prefix}quick-action-check-line3-font-size: #{$quick-action-check-line3-font-size};
+  --#{$prefix}quick-action-check-line3-font-weight: #{$quick-action-check-line3-font-weight};
+  --#{$prefix}quick-action-check-line3-color: #{$quick-action-check-line3-color};
+
+  --#{$prefix}quick-action-check-hover-bg: #{$quick-action-check-hover-bg};
+
+  --#{$prefix}quick-action-check-checked-bg: #{$quick-action-check-checked-bg};
+  --#{$prefix}quick-action-check-checked-color: #{$quick-action-check-checked-color};
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}quick-action-check-gap);
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}quick-action-check-padding);
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--#{$prefix}quick-action-check-bg);
+  border-radius: var(--#{$prefix}quick-action-check-border-radius);
+
+  &:hover {
+    background: var(--#{$prefix}quick-action-check-hover-bg);
+  }
+
+  &:has(input:checked) {
+    background: var(--#{$prefix}quick-action-check-checked-bg);
+
+    .d-quick-action-check-line3 {
+      color: var(--#{$prefix}quick-action-check-checked-color);
+    }
+  }
+
+  .d-quick-action-check-detail {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .d-quick-action-check-line1 {
+    font-size: var(--#{$prefix}quick-action-check-line1-font-size);
+    font-weight: var(--#{$prefix}quick-action-check-line1-font-weight);
+    color: var(--#{$prefix}quick-action-check-line1-color);
+  }
+
+  .d-quick-action-check-line2 {
+    font-size: var(--#{$prefix}quick-action-check-line2-font-size);
+    font-weight: var(--#{$prefix}quick-action-check-line2-font-weight);
+    color: var(--#{$prefix}quick-action-check-line2-color);
+  }
+
+  .d-quick-action-check-line3 {
+    font-size: var(--#{$prefix}quick-action-check-line3-font-size);
+    font-weight: var(--#{$prefix}quick-action-check-line3-font-weight);
+    color: var(--#{$prefix}quick-action-check-line3-color);
+  }
+
+  .form-check-input:focus {
+    outline: 0;
+  }
+}

package/src/style/components/_d-quick-action-select.scss

@@ -0,0 +1,56 @@
+.d-quick-action-select {
+  --#{$prefix}quick-action-select-padding: #{$quick-action-select-padding};
+  --#{$prefix}quick-action-select-bg: #{$quick-action-select-bg};
+  --#{$prefix}quick-action-select-border-radius: #{$quick-action-select-border-radius};
+
+  --#{$prefix}quick-action-select-line1-font-size: #{$quick-action-select-line1-font-size};
+  --#{$prefix}quick-action-select-line1-font-weight: #{$quick-action-select-line1-font-weight};
+  --#{$prefix}quick-action-select-line1-color: #{$quick-action-select-line1-color};
+
+  --#{$prefix}quick-action-select-line2-font-size: #{$quick-action-select-line2-font-size};
+  --#{$prefix}quick-action-select-line2-font-weight: #{$quick-action-select-line2-font-weight};
+  --#{$prefix}quick-action-select-line2-color: #{$quick-action-select-line2-color};
+
+  --#{$prefix}quick-action-select-hover-bg: #{$quick-action-select-hover-bg};
+
+  --#{$prefix}quick-action-select-checked-bg: #{$quick-action-select-checked-bg};
+  --#{$prefix}quick-action-select-checked-color: #{$quick-action-select-checked-color};
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--#{$prefix}quick-action-select-padding);
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--#{$prefix}quick-action-select-bg);
+  border-radius: var(--#{$prefix}quick-action-select-border-radius);
+
+  input {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--#{$prefix}quick-action-select-hover-bg);
+  }
+
+  &:has(input:checked) {
+    background: var(--#{$prefix}quick-action-select-checked-bg);
+
+    .d-quick-action-select-line1,
+    .d-quick-action-select-line2 {
+      color: var(--#{$prefix}quick-action-select-checked-color);
+    }
+  }
+
+  .d-quick-action-select-line1 {
+    font-size: var(--#{$prefix}quick-action-select-line1-font-size);
+    font-weight: var(--#{$prefix}quick-action-select-line1-font-weight);
+    color: var(--#{$prefix}quick-action-select-line1-color);
+  }
+
+  .d-quick-action-select-line2 {
+    font-size: var(--#{$prefix}quick-action-select-line2-font-size);
+    font-weight: var(--#{$prefix}quick-action-select-line2-font-weight);
+    color: var(--#{$prefix}quick-action-select-line2-color);
+  }
+}

package/src/style/components/_d-quick-action-switch.scss

@@ -0,0 +1,71 @@
+.d-quick-action-switch {
+  --#{$prefix}quick-action-switch-gap: #{$quick-action-switch-gap};
+  --#{$prefix}quick-action-switch-padding: #{$quick-action-switch-padding};
+  --#{$prefix}quick-action-switch-bg: #{$quick-action-switch-bg};
+  --#{$prefix}quick-action-switch-border-radius: #{$quick-action-switch-border-radius};
+
+  --#{$prefix}quick-action-switch-content-gap: #{$quick-action-switch-content-gap};
+
+  --#{$prefix}quick-action-switch-label-font-size: #{$quick-action-switch-label-font-size};
+  --#{$prefix}quick-action-switch-label-font-weight: #{$quick-action-switch-label-font-weight};
+  --#{$prefix}quick-action-switch-label-color: #{$quick-action-switch-label-color};
+
+  --#{$prefix}quick-action-switch-hint-font-size: #{$quick-action-switch-hint-font-size};
+  --#{$prefix}quick-action-switch-hint-font-weight: #{$quick-action-switch-hint-font-weight};
+  --#{$prefix}quick-action-switch-hint-color: #{$quick-action-switch-hint-color};
+
+  --#{$prefix}quick-action-switch-hover-bg: #{$quick-action-switch-hover-bg};
+
+  --#{$prefix}quick-action-switch-checked-bg: #{$quick-action-switch-checked-bg};
+  --#{$prefix}quick-action-switch-checked-label-color: #{$quick-action-switch-checked-label-color};
+  --#{$prefix}quick-action-switch-checked-hint-color: #{$quick-action-switch-checked-hint-color};
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}quick-action-switch-gap);
+  width: 100%;
+  padding: var(--#{$prefix}quick-action-switch-padding);
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--#{$prefix}quick-action-switch-bg);
+  border: 0;
+  border-radius: var(--#{$prefix}quick-action-switch-border-radius);
+
+  &:hover {
+    background: var(--#{$prefix}quick-action-switch-hover-bg);
+  }
+
+  &:has(input:checked) {
+    background: var(--#{$prefix}quick-action-switch-checked-bg);
+
+    .d-quick-action-switch-label {
+      color: var(--#{$prefix}quick-action-switch-checked-label-color);
+    }
+
+    .d-quick-action-switch-hint {
+      color: var(--#{$prefix}quick-action-switch-checked-hint-color);
+    }
+  }
+
+  .d-quick-action-switch-content {
+    display: flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}quick-action-switch-content-gap);
+  }
+
+  .d-quick-action-switch-label {
+    font-size: var(--#{$prefix}quick-action-switch-label-font-size);
+    font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
+    color: var(--#{$prefix}quick-action-switch-label-color);
+  }
+
+  .d-quick-action-switch-hint {
+    font-size: var(--#{$prefix}quick-action-switch-hint-font-size);
+    font-weight: var(--#{$prefix}quick-action-switch-hint-font-weight);
+    color: var(--#{$prefix}quick-action-switch-hint-color);
+  }
+
+  .d-input-switch:focus-within.form-switch .form-check-input {
+    outline: 0;
+  }
+}

package/src/style/components/{_d-stepper.scss → _d-stepper-desktop.scss}

@@ -1,4 +1,4 @@
-.d-stepper {
+.d-stepper-desktop {
   /* Icon container */
   --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
   --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);

package/src/style/components/_d-stepper-mobile.scss

@@ -0,0 +1,69 @@
+.d-stepper {
+  /* Container */
+  --#{$prefix}step-container-gap: var(--#{$prefix}ref-spacer-3);
+
+  /* Outter circle */
+  --#{$prefix}step-progress-outter-size: 62px;
+  --#{$prefix}step-progress-outter-z-index: 1;
+  --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}secondary-500);
+  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}gray-300);
+
+  /* Inner circle */
+  --#{$prefix}step-progress-inner-size: 50px;
+  --#{$prefix}step-progress-inner-z-index: 2;
+  --#{$prefix}step-progress-inner-background-color: var(--#{$prefix}white);
+
+  /* Current step */
+  --#{$prefix}step-current-step-z-index: 3;
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
+
+  /* Info circle */
+  --#{$prefix}step-info-max-width: 12rem;
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
+
+
+  display: flex;
+  gap: var(--#{$prefix}step-container-gap);
+  align-items: center;
+  justify-content: center;
+
+  .d-step-bar {
+    position: relative;
+    z-index: var(--#{$prefix}step-progress-outter-z-index);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}step-progress-outter-size);
+    height: var(--#{$prefix}step-progress-outter-size);
+    border-radius: var(--#{$prefix}step-progress-outter-size);
+  }
+  .d-step-bar::after {
+    position: absolute;
+    z-index: var(--#{$prefix}step-progress-inner-z-index);
+    width: var(--#{$prefix}step-progress-inner-size);
+    height: var(--#{$prefix}step-progress-inner-size);
+    content: "";
+    background-color: var(--#{$prefix}step-progress-inner-background-color);
+    border-radius: var(--#{$prefix}step-progress-inner-size);
+  }
+  .d-step-number {
+    z-index: var(--#{$prefix}step-current-step-z-index);
+    font-weight: var(--#{$prefix}step-current-step-font-weight);
+    color: var(--#{$prefix}step-current-step-color);
+  }
+  .d-step-info {
+    display: flex;
+    flex-direction: column;
+    max-width: var(--#{$prefix}step-info-max-width);
+  }
+  .d-step-label {
+    font-size: var(--#{$prefix}step-info-label-font-size);
+  }
+  .d-step-description {
+    font-size: var(--#{$prefix}step-info-description-font-size);
+    color: var(--#{$prefix}step-info-description-color);
+  }
+}

package/src/style/dynamic-root.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+@import "abstracts/+import";
+
+// @import "bootstrap/scss/root";
+@import "base/root";

package/src/style/dynamic-ui.scss

@@ -1 +1,13 @@
-@import "@dynamic-framework/ui/src/style/dynamic-ui";
+@charset "utf-8";
+
+@import "abstracts/+import";
+
+@import "base/+import";
+
+@import "components/+import";
+
+@import "helpers/+import";
+
+@import "bootstrap/scss/utilities/api";
+
+@import "shame";

package/src/style/helpers/_+import.scss

@@ -0,0 +1,13 @@
+@import "bootstrap/scss/helpers/clearfix";
+// @import "bootstrap/scss/helpers/color-bg";
+@import "color-bg";
+@import "bootstrap/scss/helpers/colored-links";
+@import "bootstrap/scss/helpers/focus-ring";
+@import "bootstrap/scss/helpers/icon-link";
+@import "bootstrap/scss/helpers/ratio";
+@import "bootstrap/scss/helpers/position";
+@import "bootstrap/scss/helpers/stacks";
+@import "bootstrap/scss/helpers/visually-hidden";
+@import "bootstrap/scss/helpers/stretched-link";
+@import "bootstrap/scss/helpers/text-truncation";
+@import "bootstrap/scss/helpers/vr";

package/src/style/helpers/_color-bg.scss

@@ -0,0 +1,7 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+  .text-bg-#{$color} {
+    color: color-contrast-var($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+}