@design-factory/design-factory 16.0.2 → 17.0.1

package/styles/scss/components/stepper/_stepper.mixins.scss

@@ -36,7 +36,67 @@
     $valuebghovercolor: shades-css-var($name, 'bg-subtle-hover-color');
     $valueactive: shades-css-var($name, 'text-active-color');
   }
+
   .df-stepper-step-#{$state} {
+    &.btn {
+      &:not(:disabled):not(.disabled) {
+        &:hover,
+        &:hover .df-stepper-label {
+          // override the btn-link feature
+          color: $valuehover;
+          text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
+          background-color: $valuebghovercolor;
+          // Icon with number outline variant
+          .df-stepper-outline-number-#{$state} {
+            @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
+          }
+          // Icon with number plain version
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+          }
+          .df-stepper-icon::before {
+            background-color: $valuehover;
+          }
+        }
+        &:focus:not(:hover),
+        &:focus:not(:hover) .df-stepper-label {
+          text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
+          color: $value;
+        }
+        &.active,
+        &.active .df-stepper-label {
+          text-decoration: var(--#{$prefix}stepper-text-decoration-active);
+          font-weight: $df-font-weight-semi-bold;
+        }
+        &:hover.active,
+        &:hover.active .df-stepper-label {
+          color: $valuehover;
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+          }
+        }
+        &:not(:hover).active,
+        &:not(:hover).active .df-stepper-label {
+          color: $valueactive;
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
+          }
+        }
+        @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          &.btn-link:focus {
+            --#{$prefix}box-shadow-color: #{$value};
+            &:hover {
+              --#{$prefix}box-shadow-color: #{$valuehover};
+            }
+            &:active:not(:hover),
+            &.active:not(:hover) {
+              --#{$prefix}box-shadow-color: #{$valueactive};
+            }
+            box-shadow: $df-btn-focus-box-shadow;
+          }
+        }
+      }
+    }
     // Icon with number outline variant
     .df-stepper-outline-number-#{$state} {
       @include df-stepper-common-number();
@@ -47,7 +107,7 @@
       @include df-stepper-common-number();
       @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
     }
-    
+
     .df-stepper-optional-label {
       // todo correct this
       text-align: var(--#{$prefix}stepper-optional-label-text-align);
@@ -69,57 +129,6 @@
       }
     }
     color: $value; // override btn-link
-    &:not(:disabled):not(.disabled) {
-      &:hover, &:hover .df-stepper-label {
-        // override the btn-link feature
-        color: $valuehover;
-        text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
-        background-color: $valuebghovercolor;
-        // Icon with number outline variant
-        .df-stepper-outline-number-#{$state} {
-          @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
-        }
-        // Icon with number plain version
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-        }
-        .df-stepper-icon::before {
-          background-color: $valuehover;
-        }
-      }
-      &:focus:not(:hover), &:focus:not(:hover) .df-stepper-label {
-        text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
-        color: $value;
-      }
-      &.active, &.active .df-stepper-label {
-        text-decoration: var(--#{$prefix}stepper-text-decoration-active);
-        font-weight: $df-font-weight-semi-bold;
-      }
-      &:hover.active, &:hover.active .df-stepper-label {
-        color: $valuehover;
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-        }
-      }
-      &:not(:hover).active, &:not(:hover).active .df-stepper-label {
-        color: $valueactive;
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
-        }
-      }
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &.btn-link:focus {
-          --#{$prefix}box-shadow-color: #{$value};
-          &:hover {
-            --#{$prefix}box-shadow-color: #{$valuehover};
-          }
-          &:active:not(:hover), &.active:not(:hover) {
-            --#{$prefix}box-shadow-color: #{$valueactive};
-          }
-          box-shadow: $df-btn-focus-box-shadow;
-        }
-      }
-    }
   }
 }
 
@@ -145,9 +154,7 @@
   .df-stepper-step {
     /* stepper icon color*/
     @each $state, $name in $df-stepper-steps-colors {
-      @include df-stepper-icon-variant-size(
-        $state
-      );
+      @include df-stepper-icon-variant-size($state);
     }
   }
 }

package/styles/scss/components/table/_advancedtables.scss

@@ -2,10 +2,10 @@
 
 // TODO check new checkbox look and border radius
 @include ag.grid-styles(
-    (
-      theme: alpine,
-    )
-  );
+  (
+    theme: alpine
+  )
+);
 
 // See issue https://github.com/ag-grid/ag-grid/issues/4095
 .df-table:not(.df-aggrid-filtered) {
@@ -68,6 +68,7 @@
   --ag-checkbox-indeterminate-color: #{shades-css-var('primary', 'bg-color')};
   --#{$prefix}ag-odd-row-hover-background-color: var(--ag-row-hover-color);
   --ag-odd-row-background-color: var(--ag-background-color);
+  --ag-wrapper-border-radius: #{$df-tables-aggrid-wrapper-border-radius};
 
   .ag-row {
     &.ag-row-odd {
@@ -150,12 +151,14 @@
     font-weight: var(--#{$prefix}tables-aggrid-header-font-weight);
   }
 
-  .ag-header-cell:not(.ag-cell-inline-editing), .ag-cell:not(.ag-cell-inline-editing) {
+  .ag-header-cell:not(.ag-cell-inline-editing),
+  .ag-cell:not(.ag-cell-inline-editing) {
     padding-left: var(--#{$prefix}tables-aggrid-cell-padding-left);
     padding-right: var(--#{$prefix}tables-aggrid-cell-padding-left);
   }
 
-  .ag-header-cell.ag-header-cell-sortable, .ag-header-cell.ag-floating-filter {
+  .ag-header-cell.ag-header-cell-sortable,
+  .ag-header-cell.ag-floating-filter {
     padding-right: var(--#{$prefix}tables-aggrid-sortable-header-padding-right);
   }
 
@@ -163,7 +166,8 @@
     justify-content: var(--#{$prefix}tables-aggrid-cell-label-justify-content);
   }
 
-  .ag-header-icon, .ag-sort-indicator-icon {
+  .ag-header-icon,
+  .ag-sort-indicator-icon {
     // todo RTL elements
     margin-right: var(--ag-font-size);
   }
@@ -193,7 +197,8 @@
     box-shadow: $df-tables-aggrid-input-box-shadow;
   }
 
-  .ag-checkbox-input, .ag-cell {
+  .ag-checkbox-input,
+  .ag-cell {
     cursor: $df-cursor-type;
   }
 
@@ -206,7 +211,7 @@
     background-color: $form-check-input-bg;
     &::after {
       @include border-radius($form-check-input-border-radius);
-      content: "";
+      content: '';
       width: $form-check-input-width;
       height: $form-check-input-width;
       vertical-align: top;
@@ -229,7 +234,8 @@
       }
     }
     &.ag-checked {
-      &::after { // copy element from the _form-check.scss
+      &::after {
+        // copy element from the _form-check.scss
         background-color: $form-check-input-checked-bg-color;
         border-color: $form-check-input-checked-border-color;
         @if $enable-gradients {
@@ -245,4 +251,4 @@
 .df-pagination-secondary-elements {
   --#{$prefix}tables-aggrid-pagination-secondary-elements-font-size: #{$df-tables-aggrid-pagination-secondary-elements-font-size};
   font-size: var(--#{$prefix}tables-aggrid-pagination-secondary-elements-font-size);
-}
+}

package/styles/scss/components/table/_table.variables.scss

@@ -17,9 +17,9 @@ $df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-base * map
 $df-tables-aggrid-border-inline: none !default;
 $df-tables-aggrid-border-bottom-last-row: none !default;
 $df-tables-aggrid-striped-row-color: $table-striped-bg !default; // Bootstrap Variable
-$df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default; 
+$df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default;
 $df-tables-aggrid-white-header: #fff !default;
 $df-tables-aggrid-background-color: #fff !default;
 $df-tables-aggrid-alpine-active-color: shades-css-var('primary', 'border-color') !default;
 $df-tables-aggrid-input-box-shadow: $df-focused-box-shadow !default;
-
+$df-tables-aggrid-wrapper-border-radius: 0 !default;

package/styles/scss/df-styles-namespace.scss

@@ -103,6 +103,8 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 
   @import 'bootstrap/rtl-styles-override';
 
+  @import '@agnos-ui/style-bootstrap/scss/agnosui';
+
   -webkit-text-size-adjust: 100%; // 4
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
   margin: 0; // 1
@@ -124,7 +126,7 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   }
 
   @each $state, $data in $form-validation-states {
-    @if ($state == "valid" or $state == "invalid") {
+    @if ($state == 'valid' or $state == 'invalid') {
       .was-validated :#{$state},
       .is-#{$state} {
         ~ .#{$state}-feedback,

package/styles/scss/df-styles.scss

@@ -104,6 +104,7 @@
 
 @import 'bootstrap/rtl-styles-override';
 
+@import '@agnos-ui/style-bootstrap/scss/agnosui';
 // this css is needed when modal are open to have no scroll on the background.
 .df-modal-open {
   overflow: hidden;