@design-factory/styles 21.0.0-next.0

package/scss/components/toast/_toast.scss

@@ -0,0 +1,79 @@
+@use '../button/button.mixins' as btn-mixins;
+
+.toast {
+  width: unset;
+  max-width: var(--df-toast-max-width);
+  position: relative;
+  padding-top: var(--df-toast-padding-y);
+  padding-bottom: var(--df-toast-padding-y);
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+
+  --df-inner-box-shadow-color: var(--df-toast-bg); // To make sure inner box shadow does not use body-bg
+
+  .toast-body {
+    padding: 0 var(--df-toast-padding-x);
+
+    &:has(.df-toast-action) {
+      padding-inline-end: var(--df-spacing-3);
+    }
+
+    &:has(.fa-xmark) {
+      padding-inline-end: var(--df-spacing-2);
+    }
+
+    .fa-xmark:not(:hover):not(:active) {
+      color: var(--df-toast-color);
+    }
+
+    .df-toast-action {
+      gap: var(--df-spacing-1);
+    }
+  }
+
+  &.df-toast-subtle {
+    border-inline-start-width: 0.25rem;
+  }
+
+  span.df-insert-icon {
+    position: absolute;
+    top: 0.843rem;
+    padding-inline-start: var(--df-toast-padding-x);
+  }
+
+  &[dfInsertToastIcon] {
+    .toast-body {
+      padding-inline-start: calc(var(--df-toast-padding-x) + var(--df-toast-font-size) + var(--df-spacing-3));
+    }
+  }
+
+  @each $state in ('success', 'danger', 'info', 'warning', 'tip') {
+    &.toast-#{$state} {
+      --df-toast-color: var(--df-color-#{$state}-main-default-foreground);
+      --df-toast-bg: var(--df-color-#{$state}-main-default-background);
+      --df-toast-border-color: var(--df-color-#{$state}-main-default-background);
+
+      // Override toast subtle
+      &.df-toast-subtle {
+        --df-toast-color: var(--df-color-inert-neutral-main-foreground);
+        --df-toast-bg: var(--df-color-#{$state}-subtle-background);
+
+        span.df-insert-icon {
+          color: var(--df-color-#{$state}-alt-default-foreground);
+        }
+      }
+    }
+  }
+
+  // set bg to toast bg of buttons
+  .df-btn-tertiary {
+    --df-btn-bg: var(--df-toast-bg);
+  }
+
+  &.toast-warning.df-toast-subtle {
+    span.df-insert-icon {
+      color: var(--df-color-icon-warning-foreground);
+    }
+  }
+}

package/scss/components/toast/_toast.variables.scss

@@ -0,0 +1,7 @@
+@use 'sass:color';
+
+$toast-padding-y: 0.5625rem !default;
+$toast-padding-x: var(--df-spacing-5) !default;
+$toast-border-radius: var(--df-borderRadius-main-small) !default;
+$toast-border-width: 0 !default;
+$toast-font-size: var(--df-typo-sizing-small) !default;

package/scss/components/toggle/_toggle.scss

@@ -0,0 +1,140 @@
+@use '../../new-brand-common.variables.scss' as df;
+
+.form-switch {
+  display: flex;
+  align-items: center;
+  padding-inline-start: 0;
+
+  @each $state in ('primary', 'success') {
+    .df-switch-#{$state} {
+      &:checked:not(:disabled) {
+        background-color: var(--df-color-#{$state}-main-default-background);
+        border-color: var(--df-color-#{$state}-main-default-border);
+      }
+
+      &.form-check-input {
+        --df-box-shadow-color: var(--df-color-#{$state}-main-default-border);
+      }
+    }
+  }
+
+  .form-check-input[type='checkbox'] {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--df-color-toggle-background);
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='black'/></svg>");
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      mask-position: left center;
+      @include rtl {
+        mask-position: right center;
+      }
+      @include transition(mask-position 0.15s ease-in-out);
+    }
+
+    &:checked {
+      &::after {
+        mask-position: right center;
+        background-color: var(--df-color-primary-main-default-foreground);
+        @include rtl {
+          mask-position: left center;
+        }
+      }
+    }
+
+    margin-top: 0;
+    margin-inline-start: 0;
+    height: 1.5em;
+    border-width: 0.09375rem;
+
+    @include rtl {
+      background-position: right center;
+      &:checked {
+        background-position: left center;
+      }
+    }
+
+    &:not(:checked):not(:disabled) {
+      border-color: var(--df-color-toggle-border);
+    }
+
+    &:focus-visible:not(:checked):not(:disabled):not(.is-invalid) {
+      --df-box-shadow-color: var(--df-color-toggle-border);
+    }
+
+    &:disabled {
+      border-color: var(--df-color-disabled-main-border);
+
+      &:checked {
+        background-color: var(--df-color-disabled-alt-background);
+
+        &::after {
+          background-color: var(--df-color-disabled-main-background);
+        }
+      }
+
+      &:not(:checked) {
+        background-color: var(--df-color-disabled-main-background);
+
+        &::after {
+          background-color: var(--df-color-disabled-alt-background);
+        }
+      }
+
+      ~ .form-check-label {
+        color: var(--df-color-inert-neutral-main-foreground);
+      }
+    }
+  }
+
+  .form-check-label {
+    padding-inline-start: var(--df-spacing-3);
+    font-weight: var(--df-typo-weight-medium);
+  }
+
+  .df-form-switch-name {
+    font-weight: var(--df-typo-weight-medium);
+    padding-inline-start: 0;
+
+    &.df-form-switch-name-disabled {
+      color: var(--df-color-inert-neutral-main-foreground);
+      cursor: not-allowed;
+    }
+
+    .df-form-switch-container {
+      display: flex;
+      align-items: center;
+      margin-top: var(--df-spacing-3);
+    }
+  }
+}
+
+.form-lg {
+  .form-switch {
+    padding-inline-start: 0;
+
+    .form-check-input {
+      margin-top: 0;
+      margin-inline-start: 0;
+      width: 3.375em;
+      height: 1.6875em;
+    }
+  }
+}
+
+.form-sm {
+  .form-switch {
+    padding-inline-start: 0;
+
+    .form-check-input {
+      margin-top: 0;
+      margin-inline-start: 0;
+      width: 2.625em;
+      height: 1.3125em;
+    }
+  }
+}

package/scss/components/toggle/_toggle.variables.scss

@@ -0,0 +1,10 @@
+$form-switch-width: 3em !default;
+$form-switch-padding-start: 0 !default;
+$form-switch-border-radius: 0.75em !default;
+
+// TODO this should be mapped to the css var token df-color-toggle-background, but impossible until we implement wrapper
+$form-switch-color: $df-theme-neutral-100 !default; // can not be CSS var because use for bg-image
+// TODO this should be mapped to the css var token df-color-neutral-alt-default-background, but impossible until we implement wrapper
+$form-switch-checked-color: $df-theme-neutral-0 !default; // can not be CSS var because use for bg-image
+
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;

package/scss/components/tooltip/_tooltip.scss

@@ -0,0 +1,24 @@
+.tooltip {
+  &.tooltip-inner-sm {
+    .tooltip-inner {
+      border-radius: var(--df-borderRadius-main-small);
+      font-size: var(--df-typo-sizing-small);
+      padding: var(--df-spacing-2) var(--df-spacing-3);
+    }
+  }
+  &.tooltip-inner-lg {
+    .tooltip-inner {
+      border-radius: var(--df-borderRadius-main-large);
+      font-size: var(--df-typo-sizing-large);
+      // TODO vertical padding of tooltip lg is not mapped to a token yet in Figma
+      padding: 0.375rem var(--df-spacing-6);
+    }
+  }
+}
+
+.df-font-sm .tooltip .tooltip-inner {
+  font-size: var(--df-typo-sizing-small);
+}
+.df-font-lg .tooltip .tooltip-inner {
+  font-size: var(--df-typo-sizing-large);
+}

package/scss/components/tooltip/_tooltip.variables.scss

@@ -0,0 +1,7 @@
+$tooltip-bg: var(--df-color-tooltip-background) !default;
+$tooltip-color: var(--df-color-inert-neutral-alt-foreground) !default;
+$tooltip-border-radius: var(--df-borderRadius-main-medium) !default;
+$tooltip-font-size: var(--df-typo-sizing-default) !default;
+$tooltip-padding-x: var(--df-spacing-5) !default;
+$tooltip-padding-y: var(--df-spacing-2) !default;
+$tooltip-opacity: 1 !default;

package/scss/components/tooltip/_tooltip_container.scss

@@ -0,0 +1,116 @@
+// This style is needed when using DF through a CSS namespace
+#{$df-css-namespace-selector}.tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  // scss-docs-end tooltip-css-vars
+
+  z-index: var(--#{$prefix}tooltip-zindex);
+  display: block;
+  padding: var(--#{$prefix}tooltip-arrow-height);
+  margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--#{$prefix}tooltip-font-size));
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show {
+    opacity: var(--#{$prefix}tooltip-opacity);
+  }
+
+  .tooltip-arrow {
+    display: block;
+    width: var(--#{$prefix}tooltip-arrow-width);
+    height: var(--#{$prefix}tooltip-arrow-height);
+
+    &::before {
+      position: absolute;
+      content: '';
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+
+  &.bs-tooltip-top {
+    .tooltip-arrow {
+      bottom: 0;
+
+      &::before {
+        top: -1px;
+        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+        border-top-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-end {
+    .tooltip-arrow {
+      left: 0;
+      width: var(--#{$prefix}tooltip-arrow-height);
+      height: var(--#{$prefix}tooltip-arrow-width);
+
+      &::before {
+        right: -1px;
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height)
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+        border-right-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-bottom {
+    .tooltip-arrow {
+      top: 0;
+
+      &::before {
+        bottom: -1px;
+        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-bottom-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-start {
+    .tooltip-arrow {
+      right: 0;
+      width: var(--#{$prefix}tooltip-arrow-height);
+      height: var(--#{$prefix}tooltip-arrow-width);
+
+      &::before {
+        left: -1px;
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-left-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-auto {
+    &[data-popper-placement^='top'] {
+      @extend .bs-tooltip-top;
+    }
+    &[data-popper-placement^='right'] {
+      @extend .bs-tooltip-end;
+    }
+    &[data-popper-placement^='bottom'] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[data-popper-placement^='left'] {
+      @extend .bs-tooltip-start;
+    }
+  }
+}

package/scss/components/typeahead/_typeahead.scss

@@ -0,0 +1,44 @@
+// stylelint-disable-next-line selector-type-no-unknown
+// Flag angular specific selectors
+ngb-typeahead-window.dropdown-menu {
+  max-width: 40rem;
+  width: max-content;
+  max-height: 240px;
+  overflow: auto;
+
+  .dropdown-item {
+    white-space: normal;
+    cursor: pointer;
+    // Hover of a typeahead item uses active state of the dropdown item
+    &:not(:disabled):not(.disabled).active {
+      color: var(--df-color-neutral-alt-hovered-foreground);
+      background-color: var(--df-color-primary-alt-hovered-background);
+      font-weight: var(--df-typo-weight-regular);
+
+      &:active {
+        color: var(--df-color-neutral-alt-pressed-foreground);
+        background-color: var(--df-color-primary-alt-pressed-background);
+      }
+
+      .ngb-highlight {
+        color: var(--df-color-primary-alt-hovered-foreground);
+      }
+    }
+    .ngb-highlight {
+      color: var(--df-color-primary-alt-default-foreground);
+      font-weight: var(--df-typo-weight-bold);
+    }
+    :is(span[class^='icon-'], span[class^='fa-']) {
+      position: relative;
+      top: 0.1rem;
+    }
+  }
+}
+
+// for small and extra small device only
+@include media-breakpoint-down(sm) {
+  // stylelint-disable-next-line selector-type-no-unknown
+  ngb-typeahead-window.dropdown-menu {
+    max-width: 90vw;
+  }
+}

package/scss/components/waves/waves.scss

@@ -0,0 +1,19 @@
+.df-waves-of-progress {
+  position: relative;
+  background-color: var(--df-waves-bg-color);
+
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--df-waves-line-color);
+    mask-image: var(--df-waves-mask-img);
+    mask-position: center center;
+    mask-repeat: no-repeat;
+    mask-size: cover;
+  }
+
+  > * {
+    position: relative;
+  }
+}

package/scss/namespace.scss

@@ -0,0 +1,160 @@
+@import 'variables';
+@import 'bootstrap/maps';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/mixins-override';
+@import 'components/fonts/fonts-family';
+@import 'components/fonts/multi-lang.mixins';
+@import 'common.mixins';
+
+@import 'bootstrap/scss/root';
+@import 'common.root';
+
+$df-css-namespace-selector: '.design-factory-v2' !default;
+
+#{$df-css-namespace-selector} {
+  @import 'bootstrap/scss/reboot';
+  @import 'bootstrap/scss/type';
+  @import 'bootstrap/scss/images';
+  @import 'bootstrap/scss/containers';
+  @import 'bootstrap/scss/grid';
+  @import 'bootstrap/scss/tables';
+  @import 'bootstrap/scss/forms';
+  @import 'bootstrap/scss/buttons';
+  @import 'bootstrap/scss/transitions';
+  @import 'bootstrap/scss/dropdown';
+  @import 'bootstrap/scss/button-group';
+  @import 'bootstrap/scss/nav';
+  @import 'bootstrap/scss/navbar';
+  @import 'bootstrap/scss/card';
+  @import 'bootstrap/scss/accordion';
+  @import 'bootstrap/scss/breadcrumb';
+  @import 'bootstrap/scss/pagination';
+  @import 'bootstrap/scss/badge';
+  @import 'bootstrap/scss/alert';
+  @import 'bootstrap/scss/progress';
+  @import 'bootstrap/scss/list-group';
+  @import 'bootstrap/scss/close';
+  @import 'bootstrap/scss/modal';
+  @import 'bootstrap/scss/tooltip';
+  @import 'bootstrap/scss/popover';
+  @import 'bootstrap/scss/carousel';
+  @import 'bootstrap/scss/spinners';
+  @import 'bootstrap/scss/utilities';
+  @import 'bootstrap/scss/offcanvas';
+  @import 'bootstrap/scss/placeholders';
+  @import 'bootstrap/scss/toasts';
+
+  // Helpers
+  @import 'bootstrap/helpers';
+
+  // Utilities
+  @import 'bootstrap/utilities-override';
+  @import 'bootstrap/scss/utilities/api';
+
+  /** DESIGN FACTORY IMPORTS **/
+  @import 'common';
+  @import 'components/accordion/accordion';
+  @import 'components/fonts/icon-font';
+  @import 'components/fonts/font-awesome-icons';
+  @import 'components/fonts/font-awesome-icons-brands';
+  @import 'components/fonts/fonts';
+  @import 'components/separator/separator';
+  @import 'components/button/button';
+  @import 'components/media/media';
+  @import 'components/modal/modal';
+  @import 'components/typeahead/typeahead';
+  @import 'components/alert/alert';
+  @import 'components/datepicker/datepicker';
+  @import 'components/form/form';
+  @import 'components/pagination/pagination';
+  @import 'components/badge/badge';
+  @import 'components/icon/amadeus-icon';
+  @import 'components/navbar/navbar';
+  @import 'components/tabs/tabs';
+  @import 'components/checkbox/checkbox';
+  @import 'components/radio/radio';
+  @import 'components/toggle/toggle';
+  @import 'components/inputs/inputs';
+  @import 'components/card/card';
+  @import 'components/list-group/list-group';
+  @import 'components/brand-color/brand-color';
+  @import 'components/link/link';
+  @import 'components/table/table';
+  @import 'components/table/advancedtables';
+  @import 'components/popover/popover';
+  @import 'components/slider/slider';
+  @import 'components/select/select';
+  @import 'components/dropdown/dropdown';
+  @import 'components/collapse/collapse';
+  @import 'components/progressbar/progressbar';
+  @import 'components/spinner/spinner';
+  @import 'components/rating/rating';
+  @import 'components/speechbubble/speechbubble';
+  @import 'components/list/list';
+  @import 'components/skip-links/skip-links';
+  @import 'components/breadcrumbs/breadcrumbs';
+  @import 'components/stepper/stepper';
+  @import 'components/carousel/carousel';
+  @import 'components/sidenav/sidenav';
+  @import 'components/footer/footer';
+  @import 'components/toast/toast';
+
+  @import 'bootstrap/rtl-styles-override';
+
+  // issue with agnosui exports, to be fixed for DF 20
+  /* stylelint-disable-next-line scss/load-partial-extension */
+  @import '@agnos-ui/core-bootstrap/scss/agnosui.scss';
+
+  -webkit-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
+  margin: 0; // 1
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+  color: $body-color;
+  background-color: $body-bg; // 2
+
+  .list-group-item + .list-group-item {
+    // Copy from Bootstrap 4.4.1 due to CSS namespacing and use of + selector
+    border-top-width: 0;
+
+    &.active {
+      margin-top: -$list-group-border-width;
+      border-top-width: $list-group-border-width;
+    }
+  }
+
+  @each $state, $data in $form-validation-states {
+    @if ($state == 'valid' or $state == 'invalid') {
+      .was-validated :#{$state},
+      .is-#{$state} {
+        ~ .#{$state}-feedback,
+        ~ .#{$state}-tooltip {
+          display: block;
+        }
+      }
+    } @else {
+      .is-#{$state} {
+        ~ .#{$state}-feedback,
+        ~ .#{$state}-tooltip {
+          display: block;
+        }
+      }
+    }
+  }
+}
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import 'components/popover/popover_container';
+@import 'components/tooltip/tooltip_container';
+@import 'components/spinner/spinner_container';
+@import 'components/button/button_container';
+@import 'components/pagination/pagination_container';
+@import 'components/brand-color/brand-color_container';
+/* stylelint-enable no-invalid-position-at-import-rule */
+
+// this css is needed when modal are open to have no scroll on the background.
+.df-modal-open {
+  overflow: hidden;
+}