@design-factory/design-factory 20.0.1 → 21.0.0-next.0

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

@@ -1,88 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-
-$df-stepper-border-width: math.div(strip-units($border-width), 16) + rem !default;
-$df-stepper-icon-border-radius: 50% !default;
-$df-stepper-icon-border-style: solid !default;
-$df-stepper-icon-color: $white !default;
-$df-stepper-icon-text-align: center !default;
-$df-stepper-icon-disabled-color: white !default;
-$df-stepper-icon-width: 1.75rem !default;
-$df-stepper-icon-height: $df-stepper-icon-width !default;
-$df-stepper-icon-width-sm: $df-stepper-icon-width * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-icon-height-sm: $df-stepper-icon-height * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-icon-line-height: $df-stepper-icon-height !default;
-$df-stepper-line-border: $border-width solid var(--#{$prefix}stepper-line-default-color) !default;
-$df-stepper-line-completed-border: $border-width solid var(--#{$prefix}stepper-line-completed-color) !default;
-$df-stepper-number-line-height: $df-stepper-icon-height - $df-stepper-border-width !default;
-$df-stepper-outline-icon-only-font-size: 1.5rem !default;
-$df-stepper-outline-icon-only-font-size-sm: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'sm') !default;
-$df-stepper-outline-icon-only-font-size-lg: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-width-lg: $df-stepper-icon-width * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-line-height-sm: $df-stepper-icon-height-sm !default;
-$df-stepper-icon-height-lg: $df-stepper-icon-height * map.get($df-size-ratios, 'lg') !default;
-$df-stepper-icon-line-height-lg: $df-stepper-icon-height-lg !default;
-$df-stepper-icon-padding: 0 !default;
-$df-stepper-outline-bg-color: transparent !default;
-$df-stepper-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-stepper-icon-outline-disabled-color: $df-stepper-disabled-color !default;
-$df-stepper-icon-disabled-bg-color: $df-stepper-disabled-color !default;
-$df-stepper-icon-disabled-border-color: $df-stepper-icon-disabled-bg-color !default;
-$df-stepper-icon-outline-disabled-bg-color: $white !default;
-$df-stepper-icon-outline-disabled-border-color: $df-stepper-disabled-color !default;
-$df-stepper-step-min-width: 5.625rem !default;
-$df-stepper-step-padding-y: $btn-padding-y !default;
-$df-stepper-step-padding-x: 0.75rem !default;
-// TODO put a link in this ot the ratios of the button? Must be the same
-$df-stepper-step-padding-y-sm: $btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
-$df-stepper-step-padding-x-sm: calc($btn-padding-x * map.get($df-size-ratios, 'sm')) !default;
-$df-stepper-step-padding-y-lg: $btn-padding-y * map.get($df-sizing-ratios, 'lg') !default;
-$df-stepper-step-padding-x-lg: calc($btn-padding-x * map.get($df-size-ratios, 'lg')) !default;
-$df-stepper-step-padding-y-xl: $btn-padding-y * map.get($df-sizing-ratios, 'xl') !default;
-$df-stepper-step-padding-x-xl: calc($btn-padding-x * map.get($df-size-ratios, 'xl')) !default;
-$df-stepper-step-height: auto !default;
-$df-stepper-hl-height: 0px !default;
-$df-stepper-hl-margin: 2 * $border-width 0 0 0 !default; //0.5
-$df-stepper-label-max-width: 13.75rem !default;
-$df-stepper-label-font-weight: inherit !default;
-$df-stepper-disabled-opacity: $btn-disabled-opacity !default;
-$df-stepper-font-size: $font-size-base !default;
-$df-stepper-font-size-sm: $font-size-sm !default;
-$df-stepper-font-size-lg: $font-size-lg !default;
-$df-stepper-text-decoration: none !default;
-$df-stepper-text-decoration-hover: $df-stepper-text-decoration !default;
-$df-stepper-text-decoration-focus: $df-stepper-text-decoration !default;
-$df-stepper-text-decoration-active: $df-stepper-text-decoration !default;
-$df-stepper-optional-label-color: $body-color !default;
-$df-stepper-optional-label-font-size: 0.75rem !default;
-$df-stepper-optional-label-font-weight: $font-weight-base !default;
-$df-stepper-optional-label-text-align: start !default;
-$df-stepper-div-step-border: 1px solid transparent !default; // same as btn-link
-//START TEMP VAR TO AVOID LINT ISSUES
-$df-vertical_tmp_1: math.div(strip-units($df-stepper-icon-width), 32) !default;
-$df-vertical_tmp_2: strip-units($df-stepper-step-padding-x) + math.div(strip-units($df-stepper-icon-width), 2) !default;
-//END TEMP VAR TO AVOID LINT ISSUES
-$df-vertical-stepper-panel-margin-start: $df-vertical_tmp_1 + $df-vertical_tmp_2 + rem !default;
-$df-vertical-stepper-panel-padding-start: 1rem !default;
-$df-vertical-stepper-panel-margin-y: 1rem !default;
-$df-vertical-stepper-line-width: 1px !default;
-$df-vertical-stepper-line-style: solid !default;
-$df-vertical-stepper-line-position: 0 !default;
-$df-stepper-icon-display: flex !default;
-$df-stepper-icon-align-items: center !default;
-$df-stepper-icon-justify-content: center !default;
-$df-stepper-steps-colors: (
-  'visited': 'primary',
-  'future': 'gray',
-  'completed': 'green',
-  'warning': 'warning'
-) !default;
-$df-stepper-line-completed-color: shades-css-var(
-  map.get($df-stepper-steps-colors, 'completed'),
-  'inert-color'
-) !default;
-$df-stepper-line-default-color: var(--#{$prefix}gray-200) !default;
-$df-stepper-border-radius: $border-radius !default;
-$df-stepper-border-radius-lg: $border-radius !default;
-$df-stepper-border-radius-sm: $border-radius !default;
-$df-stepper-outline-number-visited-font-weight: $font-weight-base !default;

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

@@ -1,306 +0,0 @@
-@use 'ag-grid-community/styles' as ag;
-@use 'sass:meta';
-
-// TODO check new checkbox look and border radius
-@include ag.grid-styles(
-  (
-    theme: alpine
-  )
-);
-
-// See issue https://github.com/ag-grid/ag-grid/issues/4095
-.df-table:not(.df-aggrid-filtered) {
-  .ag-layout-auto-height .ag-center-cols-clipper,
-  .ag-layout-auto-height .ag-center-cols-container,
-  .ag-layout-print .ag-center-cols-clipper,
-  .ag-layout-print .ag-center-cols-container {
-    min-height: 0 !important;
-  }
-}
-
-.df-table.df-aggrid-filtered {
-  .ag-layout-auto-height .ag-center-cols-clipper,
-  .ag-layout-auto-height .ag-center-cols-container,
-  .ag-layout-print .ag-center-cols-clipper,
-  .ag-layout-print .ag-center-cols-container {
-    min-height: 100px !important;
-  }
-}
-
-.ag-overlay-loading-center {
-  border: none !important;
-  box-shadow: none !important;
-}
-
-// TODO deal with icon font-weight in a global way
-.df-table-icon {
-  font-family: $df-font-awesome-font-family;
-  font-weight: $df-icon-light-font-weight;
-}
-
-.df-table.ag-theme-alpine {
-  --#{$prefix}tables-aggrid-icon-color: #{$df-tables-aggrid-icon-color};
-  --#{$prefix}tables-aggrid-floating-filter-align-items: #{$df-tables-aggrid-floating-filter-align-items};
-  --#{$prefix}tables-aggrid-cell-label-justify-content: #{$df-tables-aggrid-cell-label-justify-content};
-  --#{$prefix}tables-aggrid-header-font-weight: #{$df-tables-aggrid-header-font-weight};
-  --#{$prefix}tables-aggrid-cell-padding-left: #{$df-tables-aggrid-cell-padding-left};
-  --#{$prefix}tables-aggrid-cell-padding-right: #{$df-tables-aggrid-cell-padding-right};
-  --#{$prefix}tables-aggrid-overlay-bg-color: #{$df-tables-aggrid-overlay-bg-color};
-  --#{$prefix}tables-aggrid-overlay-padding-top: #{$df-tables-aggrid-overlay-padding-top};
-  --#{$prefix}tables-aggrid-sortable-header-padding-right: #{$df-tables-aggrid-sortable-header-padding-right};
-  --#{$prefix}tables-aggrid-border-inline: #{$df-tables-aggrid-border-inline};
-  --#{$prefix}tables-aggrid-border-bottom-last-row: #{$df-tables-aggrid-border-bottom-last-row};
-  --#{$prefix}tables-aggrid-striped-row-color: #{$df-tables-aggrid-striped-row-color};
-  --#{$prefix}tables-aggrid-striped-row-color-hover: #{$df-tables-aggrid-striped-row-color-hover};
-  --#{$prefix}tables-aggrid-white-header: #{$df-tables-aggrid-white-header};
-  --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color};
-  --ag-background-color: #{$df-tables-aggrid-background-color};
-  --ag-checkbox-border-radius: #{$df-tables-aggrid-checkbox-border-radius};
-  --ag-font-size: #{$df-tables-aggrid-font-size};
-  --ag-alpine-active-color: #{$df-tables-aggrid-alpine-active-color};
-  --ag-header-height: #{$df-tables-aggrid-header-height};
-  --ag-row-height: #{$df-tables-aggrid-row-height};
-  --ag-data-color: #{$body-color};
-  --ag-font-family: #{$font-family-base};
-  --ag-header-background-color: #{$df-tables-aggrid-header-background-color};
-  --ag-header-cell-hover-background-color: #{$df-tables-aggrid-header-cell-hover-background-color};
-  --ag-selected-row-background-color: #{$df-tables-aggrid-selected-row-background-color};
-  --ag-row-hover-color: #{$df-tables-aggrid-hover-color};
-  --ag-row-border-color: #{$gray-200};
-  --ag-input-focus-border-color: #{$df-tables-aggrid-input-focus-border-color};
-  --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 {
-    // TODO: remove when removing old branding. Needed to override the calc
-    @if (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023) {
-      font-size: var(--ag-font-size);
-    }
-    &.ag-row-odd {
-      --ag-row-hover-color: var(--#{$prefix}ag-odd-row-hover-background-color);
-    }
-  }
-
-  &.df-table-striped-odd {
-    --#{$prefix}ag-odd-row-hover-background-color: #{$df-tables-aggrid-striped-row-color-hover};
-    --ag-odd-row-background-color: #{$df-tables-aggrid-striped-row-color};
-  }
-
-  &.df-table-striped-even {
-    .ag-row-even {
-      --ag-row-hover-color: #{$df-tables-aggrid-striped-row-color-hover};
-      --ag-background-color: #{$df-tables-aggrid-striped-row-color};
-    }
-  }
-
-  &.df-table-white-header {
-    --ag-header-background-color: #{$df-tables-aggrid-white-header};
-
-    .ag-header {
-      --ag-header-cell-hover-background-color: var(--ag-row-hover-color);
-      &:hover {
-        background-color: var(--ag-row-hover-color);
-      }
-    }
-  }
-
-  .ag-icon.ag-icon-asc {
-    @extend .df-table-icon;
-    @extend .fa-sort-amount-up;
-    &:before {
-      color: var(--#{$prefix}tables-aggrid-icon-color);
-    }
-  }
-
-  .ag-root-wrapper {
-    border-inline: var(--#{$prefix}tables-aggrid-border-inline);
-
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      border-top: 0;
-      border-bottom: #{$df-tables-aggrid-divider-border};
-    }
-  }
-
-  .df-table-expand-icon {
-    color: var(--#{$prefix}tables-aggdrid-expand-button-color);
-  }
-
-  .ag-row-hover {
-    --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color-hover};
-  }
-
-  .ag-row-selected {
-    --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color-selected};
-  }
-
-  .ag-icon.ag-icon-desc {
-    @extend .df-table-icon;
-    @extend .fa-sort-amount-down;
-    &:before {
-      color: var(--#{$prefix}tables-aggrid-icon-color);
-    }
-  }
-
-  .ag-icon.ag-icon-menu {
-    @extend .df-table-icon;
-    @extend .fa-filter;
-  }
-
-  .ag-icon.ag-icon-none {
-    @extend .df-table-icon;
-    @extend .fa-sort-up-down;
-    &:before {
-      color: var(--#{$prefix}tables-aggrid-icon-color);
-    }
-  }
-
-  .ag-icon.ag-icon-filter {
-    @extend .df-table-icon;
-    @extend .fa-filter;
-    &:before {
-      color: var(--#{$prefix}tables-aggrid-icon-color);
-    }
-  }
-
-  .ag-input-field-input.ag-text-field-input {
-    @extend .form-control;
-    @extend .form-control-sm;
-    @extend .ms-1;
-    @extend .mt-3;
-    @extend .mb-3;
-    @extend .me-1;
-  }
-
-  .ag-row-last {
-    border-bottom: var(--#{$prefix}tables-aggrid-border-bottom-last-row);
-  }
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    .ag-header {
-      border-bottom: #{$df-tables-aggrid-divider-border};
-    }
-  }
-
-  .ag-header-row {
-    font-weight: var(--#{$prefix}tables-aggrid-header-font-weight);
-
-    .ag-header-cell.ag-header-active {
-      --#{$prefix}tables-aggrid-icon-color: #{$df-tables-aggrid-expand-button-color-hover};
-    }
-  }
-
-  .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 {
-    padding-right: var(--#{$prefix}tables-aggrid-sortable-header-padding-right);
-  }
-
-  .ag-header-cell-label {
-    justify-content: var(--#{$prefix}tables-aggrid-cell-label-justify-content);
-  }
-
-  .ag-header-cell:focus-visible::after {
-    border: 2px solid var(--ag-input-focus-border-color);
-  }
-
-  .ag-header-icon,
-  .ag-sort-indicator-icon {
-    // todo RTL elements
-    margin-right: var(--ag-font-size);
-  }
-
-  .ag-header-row.ag-header-row-floating-filter {
-    .ag-column-hover {
-      background-color: $white;
-    }
-    .ag-header-cell:hover {
-      background-color: $white;
-    }
-  }
-
-  .df-tables-aggrid-overlay-withfilter {
-    background-color: var(--#{$prefix}tables-aggrid-overlay-bg-color);
-    padding-top: var(--#{$prefix}tables-aggrid-overlay-padding-top);
-  }
-
-  .ag-floating-filter-body {
-    align-items: var(--#{$prefix}tables-aggrid-floating-filter-align-items);
-  }
-
-  // custom checkbox to have the same look as the DF one.
-  // TODO change this globaly with a CSS variable global
-  .ag-checkbox-input-wrapper:focus-within,
-  .ag-checkbox-input-wrapper:active {
-    box-shadow: $df-tables-aggrid-input-box-shadow;
-  }
-
-  .ag-checkbox-input,
-  .ag-cell {
-    cursor: $df-cursor-type;
-  }
-
-  // TODO do this change in the PR about form...
-  // Or should we create some CSS variables for this?
-  .ag-checkbox-input-wrapper {
-    cursor: $df-cursor-type;
-    width: $form-check-input-width;
-    height: $form-check-input-width;
-    background-color: $form-check-input-bg;
-    &::after {
-      @include border-radius($form-check-input-border-radius);
-      content: '';
-      width: $form-check-input-width;
-      height: $form-check-input-width;
-      vertical-align: top;
-      background-color: $form-check-input-bg;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: contain;
-      border: $form-check-input-border;
-      appearance: none;
-    }
-    &.ag-indeterminate {
-      &::after {
-        background-color: $form-check-input-indeterminate-bg-color;
-        border-color: $form-check-input-indeterminate-border-color;
-        @if $enable-gradients {
-          background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
-        } @else {
-          background-image: escape-svg($form-check-input-indeterminate-bg-image);
-        }
-      }
-    }
-    &.ag-checked {
-      &::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 {
-          background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
-        } @else {
-          background-image: escape-svg($form-check-input-checked-bg-image);
-        }
-      }
-    }
-  }
-
-  .ag-list-item.ag-active-item {
-    --ag-row-hover-color: #{$df-tables-aggrid-hover-color};
-  }
-
-  .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
-    border: 2px solid var(--ag-input-focus-border-color);
-  }
-}
-
-.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.scss

@@ -1,19 +0,0 @@
-.table {
-  > caption:first-child {
-    & + thead,
-    & + tbody {
-      border-top: 0;
-    }
-  }
-
-  caption {
-    font-size: #{$df-table-caption-font-size};
-  }
-  th {
-    font-size: #{$df-table-th-font-size};
-  }
-  & thead,
-  tfoot {
-    border-bottom: #{$df-tables-aggrid-divider-border};
-  }
-}

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

@@ -1,37 +0,0 @@
-@use 'sass:map';
-
-$df-table-caption-font-size: $font-size-base !default;
-$df-table-th-font-size: $font-size-base !default;
-
-$df-tables-aggrid-checkbox-border-radius: $form-check-input-border-radius !default;
-$df-tables-aggrid-icon-color: $gray-300 !default;
-$df-tables-aggrid-floating-filter-align-items: center !default;
-$df-tables-aggrid-cell-label-justify-content: space-between !default;
-$df-tables-aggrid-header-font-weight: $df-font-weight-semi-bold !default;
-$df-tables-aggrid-font-size: $font-size-base !default;
-$df-tables-aggrid-header-height: 42px !default;
-$df-tables-aggrid-row-height: 44px !default;
-$df-tables-aggrid-cell-padding-left: 1rem !default;
-$df-tables-aggrid-cell-padding-right: 1rem !default;
-$df-tables-aggrid-overlay-bg-color: transparent !default;
-$df-tables-aggrid-overlay-padding-top: 2rem !default;
-$df-tables-aggrid-sortable-header-padding-right: 0px !default;
-$df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-base * map.get($df-size-ratios, 'sm') !default; // 14px normal case
-$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-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;
-$df-tables-aggrid-header-background-color: $gray-50 !default;
-$df-tables-aggrid-header-cell-hover-background-color: $df-hover-bg-color !default;
-$df-tables-aggrid-expand-button-color: $gray-900 !default;
-$df-tables-aggrid-expand-button-color-hover: $gray-900 !default;
-$df-tables-aggrid-expand-button-color-selected: $gray-900 !default;
-$df-tables-aggrid-divider-border: inherit !default; // dummy value for old branding
-$df-tables-aggrid-hover-color: $gray-50 !default;
-$df-tables-aggrid-selected-row-background-color: $df-primary-lighten-60 !default;
-$df-tables-aggrid-input-focus-border-color: rgba(33, 150, 243, 0.4) !default; // default aggrid alpine focus color