@design-factory/styles 21.0.0-next.0

package/scss/components/stepper/_stepper.scss

@@ -0,0 +1,176 @@
+@use 'sass:map';
+@use 'stepper.mixins' as stepper-mixins;
+
+.df-stepper {
+  @include stepper-mixins.stepper-size(1.75rem, 1.5rem, 0.75rem, 0.3125rem);
+
+  .df-stepper-outline-icon.fa-exclamation-triangle::before {
+    font-size: 1.5rem;
+  }
+
+  .df-stepper-step-circle {
+    width: 1.75rem;
+    height: 1.75rem;
+    min-width: 1.75rem;
+    line-height: 1.75rem;
+    border-radius: 50%;
+  }
+
+  // Stepper sizing
+  &.df-stepper-sm {
+    @include stepper-mixins.stepper-size(1.53125rem, 1.3125rem, 0.65625rem, 0.21875rem);
+
+    .df-stepper-step {
+      --df-btn-font-size: var(--df-typo-sizing-small);
+      --df-btn-border-radius: var(--df-borderRadius-main-small);
+    }
+  }
+
+  &.df-stepper-lg {
+    @include stepper-mixins.stepper-size(1.96875rem, 1.6875rem, 0.84375rem, 0.59375rem);
+
+    .df-stepper-step {
+      --df-btn-font-size: var(--df-typo-sizing-large);
+      --df-btn-border-radius: var(--df-borderRadius-main-large);
+    }
+  }
+
+  .df-stepper-step {
+    min-width: 5.625rem; // TODO work with the negative margin even in mobile version
+    // put it depending of the button padding and as the btn-sm size
+    background-color: var(--df-color-inert-neutral-main-background);
+    border: 1px solid transparent; // override to have same border as btn
+    gap: 0;
+
+    --df-box-shadow-color: currentColor;
+    --df-btn-active-border-color: transparent;
+    --df-btn-disabled-bg: transparent;
+    --df-btn-disabled-border-color: transparent;
+  }
+
+  $stepper-states: (
+    'visited': (
+      'text-color': var(--df-color-primary-alt-default-foreground),
+      'border-color': var(--df-color-primary-alt-default-border),
+      'text-hover-color': var(--df-color-primary-alt-hovered-foreground),
+      'border-hover-color': var(--df-color-primary-alt-hovered-border),
+      'text-active-color': var(--df-color-primary-alt-active-foreground),
+      'border-active-color': var(--df-color-primary-alt-active-border),
+      'bg-hover-color': var(--df-color-primary-alt-hovered-background)
+    ),
+    'future': (
+      'text-color': var(--df-color-subtext-foreground),
+      'border-color': var(--df-color-subtext-border),
+      'text-hover-color': var(--df-color-neutral-alt-hovered-foreground),
+      'border-hover-color': var(--df-color-subtext-border),
+      'text-active-color': var(--df-color-neutral-alt-active-foreground),
+      'border-active-color': var(--df-color-primary-alt-active-border),
+      'bg-hover-color': var(--df-color-neutral-alt-hovered-background)
+    ),
+    'completed': (
+      'text-color': var(--df-color-primary-alt-default-foreground),
+      'border-color': var(--df-color-primary-alt-default-border),
+      'text-hover-color': var(--df-color-primary-alt-hovered-foreground),
+      'border-hover-color': var(--df-color-primary-alt-hovered-border),
+      'text-active-color': var(--df-color-primary-alt-active-foreground),
+      'border-active-color': var(--df-color-primary-alt-active-border),
+      'bg-hover-color': var(--df-color-primary-alt-hovered-background)
+    ),
+    'warning': (
+      'text-color': var(--df-color-danger-alt-default-foreground),
+      'border-color': var(--df-color-danger-alt-default-border),
+      'text-hover-color': var(--df-color-danger-alt-hovered-foreground),
+      'border-hover-color': var(--df-color-danger-alt-hovered-border),
+      'text-active-color': var(--df-color-danger-alt-active-foreground),
+      'border-active-color': var(--df-color-danger-alt-active-border),
+      'bg-hover-color': var(--df-color-danger-alt-hovered-background)
+    )
+  );
+
+  /* stepper icon color */
+  @each $state, $value in $stepper-states {
+    .df-stepper-step-#{$state} {
+      $stepper-step-color: map.get($value, 'text-color');
+      $stepper-step-hover-color: map.get($value, 'text-hover-color');
+      $stepper-step-active-color: map.get($value, 'text-active-color');
+      $stepper-step-hover-bg-color: map.get($value, 'bg-hover-color');
+      $stepper-step-border-color: map.get($value, 'border-color');
+      $stepper-step-border-hover-color: map.get($value, 'border-hover-color');
+      $stepper-step-border-active-color: map.get($value, 'border-active-color');
+
+      --df-btn-disabled-color: #{$stepper-step-color};
+
+      &:not(:disabled) {
+        :is(.df-stepper-outline-number, .df-stepper-outline-icon) {
+          border-color: #{$stepper-step-border-color};
+        }
+
+        &:hover:not(:active) {
+          color: #{$stepper-step-hover-color};
+          background-color: #{$stepper-step-hover-bg-color};
+
+          :is(.df-stepper-outline-number, .df-stepper-outline-icon) {
+            border-color: #{$stepper-step-border-hover-color};
+          }
+        }
+
+        &:active {
+          color: #{$stepper-step-active-color};
+          background-color: #{$stepper-step-hover-bg-color};
+
+          :is(.df-stepper-outline-number, .df-stepper-outline-icon) {
+            border-color: #{$stepper-step-border-active-color};
+          }
+        }
+
+        &.active {
+          color: #{$stepper-step-active-color};
+
+          :is(.df-stepper-outline-number, .df-stepper-outline-icon) {
+            border-color: #{$stepper-step-border-active-color};
+          }
+        }
+      }
+
+      color: #{$stepper-step-color};
+    }
+  }
+}
+
+.df-stepper-step-circle {
+  border-radius: 50%;
+}
+
+.df-stepper-label {
+  max-width: 13.75rem;
+}
+
+.df-stepper-horizontal-line {
+  height: 0;
+}
+
+.df-vertical-stepper-panel {
+  margin-inline-start: 1.6796875rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-inline-start: 1px solid var(--df-color-inert-neutral-main-border);
+    inset-inline-start: 0;
+    top: -1rem;
+    bottom: -1rem;
+  }
+}
+
+.df-stepper-outline-number {
+  border: 1px solid currentColor;
+}
+
+.df-stepper-icon {
+  background-color: currentColor;
+}
+
+.df-stepper-icon::before {
+  color: var(--df-color-inert-neutral-main-background);
+  vertical-align: middle;
+}

package/scss/components/table/_advancedtables.scss

@@ -0,0 +1,285 @@
+@use 'ag-grid-community/styles' as ag;
+@use '../../new-brand-common.variables' as df;
+
+// 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;
+}
+
+.df-table-icon {
+  @extend .fa-light;
+}
+
+.df-table.ag-theme-alpine {
+  --ag-background-color: var(--df-color-inert-neutral-main-background);
+  --ag-checkbox-border-radius: #{$form-check-input-border-radius};
+  --ag-font-size: var(--df-typo-sizing-default);
+  --ag-alpine-active-color: var(--df-color-primary-alt-active-background);
+  --ag-header-height: 42px;
+  --ag-row-height: 44px;
+  --ag-data-color: var(--df-color-neutral-alt-default-foreground);
+  --ag-font-family: var(--df-typo-font-primaryFamily), sans-serif;
+  --ag-header-background-color: var(--df-color-primary-subtle-background);
+  --ag-header-cell-hover-background-color: var(--df-color-primary-alt-hovered-background);
+  --ag-selected-row-background-color: var(--df-color-primary-alt-active-background);
+  --ag-row-hover-color: var(--df-color-primary-alt-hovered-background);
+  --ag-row-border-color: var(--df-color-inert-neutral-main-border);
+  --ag-input-focus-border-color: var(--df-color-focus-main-border);
+  --ag-checkbox-indeterminate-color: var(--df-color-primary-main-default-background);
+  --ag-odd-row-background-color: var(--ag-background-color);
+  --ag-wrapper-border-radius: 0;
+  --ag-header-foreground-color: var(--df-color-neutral-alt-default-foreground);
+  --ag-icon-font-color: var(--df-color-primary-alt-default-foreground); //using T2 because not a button
+
+  .ag-menu {
+    --ag-control-panel-background-color: var(--df-color-inert-neutral-main-background);
+  }
+
+  .ag-row {
+    font-size: var(--ag-font-size);
+  }
+
+  .ag-popup {
+    --ag-background-color: var(--df-color-inert-neutral-main-background);
+    --ag-foreground-color: var(--df-color-inert-neutral-main-foreground);
+
+    --ag-checkbox-checked-color: var(--df-color-primary-main-default-border);
+  }
+
+  &.df-table-striped-odd {
+    --ag-odd-row-background-color: var(--df-color-primary-subtle-background);
+  }
+
+  &.df-table-striped-even .ag-row-even {
+    background-color: var(--df-color-primary-subtle-background);
+  }
+
+  &.df-table-white-header {
+    --ag-header-background-color: var(--df-color-neutral-alt-default-background);
+
+    .ag-header {
+      --ag-header-cell-hover-background-color: var(--df-color-neutral-alt-hovered-background);
+
+      &:hover {
+        background-color: var(--ag-header-cell-hover-background-color);
+      }
+    }
+  }
+
+  .ag-icon.ag-icon-asc {
+    @extend .df-table-icon;
+    @extend .fa-sort-amount-up;
+  }
+
+  .ag-root-wrapper {
+    border-inline: none;
+    border-top: 0;
+    border-bottom: 1px solid var(--df-color-neutral-main-default-border);
+  }
+
+  .df-table-expand-icon {
+    color: var(--df-color-primary-alt-default-foreground);
+  }
+
+  .ag-row-hover .df-table-expand-icon {
+    color: var(--df-color-primary-alt-hovered-foreground);
+  }
+
+  .ag-row-selected .df-table-expand-icon {
+    color: var(--df-color-primary-alt-active-foreground);
+  }
+
+  .ag-icon.ag-icon-desc {
+    @extend .df-table-icon;
+    @extend .fa-sort-amount-down;
+  }
+
+  .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;
+  }
+
+  .ag-icon.ag-icon-filter {
+    @extend .df-table-icon;
+    @extend .fa-filter;
+  }
+
+  .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: none;
+  }
+
+  .ag-header {
+    border-bottom: 1px solid var(--df-color-neutral-main-default-border);
+  }
+
+  .ag-header-row {
+    font-weight: var(--df-typo-weight-medium);
+
+    .ag-header-cell.ag-header-active {
+      .df-table-icon:before {
+        color: var(--df-color-primary-alt-hovered-foreground);
+      }
+    }
+  }
+
+  .ag-header-cell:not(.ag-cell-inline-editing),
+  .ag-cell:not(.ag-cell-inline-editing) {
+    padding-inline: var(--df-spacing-3);
+  }
+
+  .ag-header-cell.ag-header-cell-sortable,
+  .ag-header-cell.ag-floating-filter {
+    padding-right: 0px;
+  }
+
+  .ag-header-cell-label {
+    justify-content: space-between;
+  }
+
+  .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: var(--df-color-inert-neutral-main-background);
+    }
+
+    .ag-header-cell:hover {
+      background-color: var(--df-color-inert-neutral-main-background);
+    }
+  }
+
+  .df-tables-aggrid-overlay-withfilter {
+    background-color: transparent;
+    padding-top: 2rem;
+  }
+
+  .ag-floating-filter-body {
+    align-items: center;
+  }
+
+  // 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: none;
+  }
+
+  .ag-checkbox-input-wrapper:has(.ag-checkbox-input:focus-visible) {
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  .ag-checkbox-input,
+  .ag-cell {
+    cursor: pointer;
+  }
+
+  // TODO do this change in the PR about form...
+  // Or should we create some CSS variables for this?
+  .ag-checkbox-input-wrapper {
+    cursor: pointer;
+    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,
+    &.ag-checked {
+      background-image: none;
+      background-color: var(--df-color-primary-main-default-background);
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--df-color-primary-main-default-foreground);
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center center;
+      }
+    }
+
+    &.ag-indeterminate::after {
+      // TODO: export properly from a common place the SVGs, this is duplication of checkbox
+      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 14 4'%3e%3crect x='3' y='6.75' width='10' height='2.5' rx='1.25' transform='translate%28-3 -6%29' fill='%23fff' fill-rule='nonzero'/%3e%3c/svg%3e");
+    }
+
+    &.ag-checked::after {
+      // TODO: export properly from a common place the SVGs, this is duplication of checkbox
+      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 14 12'%3e%3cpath d='M3.265 8a.995.995 0 0 1-.717-.306L.297 5.369a1.071 1.071 0 0 1 0-1.48.99.99 0 0 1 1.434 0l1.534 1.584L8.27.307a.99.99 0 0 1 1.433 0 1.07 1.07 0 0 1 0 1.482l-5.72 5.905A.995.995 0 0 1 3.266 8' fill='%23fff' stroke-width='0' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+  }
+
+  .ag-list-item.ag-active-item {
+    --ag-row-hover-color: var(--df-color-primary-alt-hovered-background);
+  }
+
+  .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
+    border: 2px solid var(--ag-input-focus-border-color);
+  }
+}
+
+.df-pagination-secondary-elements {
+  font-size: var(--df-typo-sizing-small);
+}

package/scss/components/table/_table.scss

@@ -0,0 +1,19 @@
+.table {
+  > caption:first-child {
+    & + thead,
+    & + tbody {
+      border-top: 0;
+    }
+  }
+
+  caption {
+    font-size: var(--df-typo-sizing-small);
+  }
+  th {
+    font-size: var(--df-typo-sizing-small);
+  }
+  thead,
+  tfoot {
+    border-bottom: 1px solid var(--df-color-neutral-main-default-border);
+  }
+}

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

@@ -0,0 +1,20 @@
+$table-cell-padding-y: 0.75rem !default;
+$table-cell-padding-x: var(--df-spacing-3) !default;
+$table-cell-padding-y-sm: 0.3rem !default;
+$table-cell-padding-x-sm: 0.3rem !default;
+
+$table-color: var(--df-color-neutral-alt-default-foreground) !default;
+$table-bg: transparent !default;
+
+$table-th-font-weight: var(--df-typo-weight-medium) !default;
+
+$table-group-separator-color: var(--df-color-neutral-main-default-border) !default;
+
+$table-caption-color: var(--df-color-subtext-foreground) !default;
+
+$table-striped-bg: var(--df-color-primary-subtle-background) !default;
+$table-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
+$table-active-bg: var(--df-color-primary-alt-active-background) !default;
+
+$table-border-width: 1px !default;
+$table-border-color: var(--df-color-inert-neutral-main-border) !default;

package/scss/components/tabs/_tabs.scss

@@ -0,0 +1,163 @@
+@use '../../new-brand-common.variables' as df;
+
+.nav-link {
+  &:visited {
+    color: var(--df-nav-link-color);
+  }
+
+  &:hover:not(.disabled):not(:disabled) {
+    // required to avoid :visited shenanigans
+    background-color: var(--df-color-primary-alt-hovered-background);
+    // required to avoid :visited shenanigans
+    color: var(--df-nav-link-hover-color);
+  }
+}
+
+.nav-tabs {
+  .nav-link {
+    border: unset;
+    border-bottom: 2px solid transparent;
+    padding-top: var(--df-spacing-3);
+    padding-bottom: var(--df-spacing-3);
+
+    &.active {
+      font-weight: var(--df-typo-weight-bold);
+      border-bottom: 3px solid var(--df-color-primary-alt-active-border);
+
+      &:hover {
+        border-bottom-color: var(--df-color-primary-alt-activeHovered-border);
+      }
+    }
+
+    &:hover:not(.disabled):not(:disabled) {
+      // required to avoid :visited shenanigans
+      background-color: var(--df-color-primary-alt-hovered-background);
+      // required to avoid :visited shenanigans
+      color: var(--df-nav-link-hover-color);
+    }
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+
+    &:focus-visible {
+      --df-box-shadow-color: #{$nav-link-color};
+      outline: none;
+      box-shadow: df.$df-focus-inset-box-shadow;
+      &:not(.active) {
+        color: var(--df-nav-link-color);
+      }
+
+      &:hover {
+        --df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);
+      }
+    }
+  }
+
+  // the :is selector is needed for specificity and supporting basic and alternative variants
+  :is(.nav-link, .nav-item .nav-link):is(.disabled, :disabled) {
+    pointer-events: auto;
+    cursor: not-allowed;
+    // override link hover styles
+    border-bottom-color: transparent;
+  }
+
+  .nav-item + .nav-item {
+    margin-left: 0px;
+  }
+}
+
+.tab-content > .tab-pane {
+  padding: var(--df-spacing-6) var(--df-spacing-5);
+}
+
+.secondary {
+  .nav-tabs {
+    .nav-link {
+      border-top: 2px solid transparent;
+    }
+
+    :is(.nav-link.active, .nav-item.show .nav-link) {
+      border-top: 3px solid var(--df-color-primary-alt-active-border);
+      border-left: 1px solid var(--df-color-inert-neutral-main-border);
+      border-right: 1px solid var(--df-color-inert-neutral-main-border);
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+    }
+  }
+
+  .tab-content {
+    border-style: solid;
+    border-color: var(--df-color-inert-neutral-main-border);
+    border-width: 0px 1px 1px 1px;
+  }
+}
+
+.nav {
+  &.nav-pills[role='tablist'] {
+    // role=tablist is to target only tabset as pill and not scrollspy
+
+    a.nav-link {
+      border-bottom: 0;
+      padding-inline-start: var(--df-spacing-5);
+    }
+
+    .nav-link {
+      &:is(.disabled, [disabled]) {
+        pointer-events: auto; //needed to show the cursor
+        cursor: not-allowed;
+
+        &:focus {
+          outline: none;
+          box-shadow: none;
+        }
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: df.$df-focus-inset-box-shadow;
+      }
+    }
+  }
+}
+
+// We need this selector in case the Tabset is used inside a card to round the corners depending on the alignment
+:is(.card, .card-body, .card-text) {
+  & > .nav.nav-tabs {
+    //not sure if we should deal with breakpoint cases here since we use nav fill and nav-justified for the others alignment
+    $justify-content-start-implicit-selector: ':not(.justify-content-center):not(.justify-content-end)';
+    @each $breakpoint, $value in $grid-breakpoints {
+      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-center)';
+      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-end)';
+    }
+
+    &#{$justify-content-start-implicit-selector},
+    &.justify-content-start {
+      .nav-item:first-of-type .nav-link {
+        //default case, no alignment class on triggering the border-start-start-radius
+        border-start-start-radius: var(--df-card-border-radius);
+      }
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      &.justify-content-#{$breakpoint}-start {
+        .nav-item:first-of-type .nav-link {
+          //default case triggering the border-start-start-radius
+          border-start-start-radius: var(--df-card-border-radius);
+        }
+      }
+      &.justify-content-#{$breakpoint}-end {
+        .nav-item:last-of-type .nav-link {
+          border-start-end-radius: var(--df-card-border-radius);
+        }
+      }
+    }
+
+    &:is(.justify-content-end, .nav-fill, .nav-justified) {
+      .nav-item:last-of-type .nav-link {
+        border-start-end-radius: var(--df-card-border-radius);
+      }
+    }
+  }
+}

package/scss/components/tabs/_tabs.variables.scss

@@ -0,0 +1,19 @@
+$nav-link-hover-color: var(--df-color-neutral-alt-hovered-foreground) !default;
+$nav-link-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$nav-link-padding-y: var(--df-spacing-3) !default;
+$nav-link-padding-x: var(--df-spacing-5) !default;
+$nav-link-color: var(--df-color-neutral-alt-default-foreground) !default;
+
+$nav-tabs-border-radius: 0 !default;
+$nav-tabs-border-color: var(--df-color-inert-neutral-main-border) !default;
+$nav-tabs-link-active-bg: var(--df-color-neutral-alt-default-background) !default;
+$nav-tabs-link-active-color: var(--df-color-neutral-alt-active-foreground) !default;
+$nav-tabs-link-hover-border-color: transparent !default;
+
+$nav-pills-link-active-color: var(--df-color-neutral-alt-active-foreground) !default;
+$nav-pills-link-active-bg: var(--df-color-primary-alt-active-background) !default;
+$nav-pills-border-radius: var(--df-borderRadius-main-medium) !default;
+
+// TODO put those two lines back in navbar.variables when cleaning up navbar styles
+$nav-link-height: calc($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) * 0.5) !default;

package/scss/components/timepicker/_timepicker.scss

@@ -0,0 +1,9 @@
+ngb-timepicker {
+  .ngb-tp-spacer {
+    width: var(--df-spacing-5);
+  }
+  .btn-link {
+    @extend .btn-outline-primary, .df-btn-icononly, .df-btn-tertiary;
+    background-color: transparent;
+  }
+}