@design-factory/design-factory 15.2.0

package/styles/scss/df-styles-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';
+
+$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/scss/helpers';
+
+  // Utilities
+  @import 'bootstrap/utilities-override';
+  @import 'bootstrap/scss/utilities/api';
+
+  @import 'common';
+  @import 'components/accordion/accordion';
+  @import 'components/fonts/icon-font';
+  @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/fieldset/fieldset';
+  @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/tooltip/tooltip';
+  @import 'components/rating/rating';
+  @import 'components/speechbubble/speechbubble';
+  @import 'components/list/list';
+  @import 'components/skip-links/skip-links';
+  @import 'components/breadcrumbs/breadcrumbs';
+  @import 'components/sidenav/sidenav';
+  @import 'components/footer/footer';
+  @import 'components/toast/toast';
+
+  @import 'bootstrap/rtl-styles-override';
+  @import 'components/stepper/stepper';
+  @import 'components/carousel/carousel';
+  -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';
+/* 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;
+}
+
+// Generate breakpoint CSS variable to be used in media service
+:root {
+  @each $breakpoint, $value in $grid-breakpoints {
+    --#{$variable-prefix}breakpoint-#{$breakpoint}: #{$value};
+  }
+}

package/styles/scss/df-styles.scss

@@ -0,0 +1,107 @@
+@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';
+
+/** BOOTSTRAP IMPORTS **/
+// Components
+@import 'bootstrap/scss/root';
+@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/scss/helpers';
+
+// Utilities
+@import 'bootstrap/utilities-override';
+@import 'bootstrap/scss/utilities/api';
+
+/** DESIGN FACTORY IMPORTS **/
+@import 'common';
+
+@import 'components/fonts/icon-font';
+@import 'components/fonts/fonts';
+@import 'components/accordion/accordion';
+@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/fieldset/fieldset';
+@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/tooltip/tooltip';
+@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 'components/scrollspy/scrollspy';
+
+@import 'bootstrap/rtl-styles-override';
+
+// this css is needed when modal are open to have no scroll on the background.
+.df-modal-open {
+  overflow: hidden;
+}

package/styles/scss/utilities/_common.utilities.scss

@@ -0,0 +1,70 @@
+@use 'sass:color'; 
+@use 'sass:map';
+// This function currently change all the colors #ffffff #bbbbbb and #cccccc (that you should put in the svg) by the one given in input
+// I put f for fill value.
+@function df-getSVGasURL($svg, $fig-color, $border-color, $background-color) {
+  //add
+  //TODO add end of line and multiple space replacing...
+  $ret: str-replace($svg, '#bbbbbb', $border-color);
+  $ret: str-replace($ret, '#cccccc', $background-color);
+  $ret: str-replace($ret, '#ffffff', $fig-color);
+  $ret: str-replace($ret, '#', '%23');
+  $ret: str-replace($ret, '<', '%3C');
+  $ret: str-replace($ret, '>', '%3E');
+  @return url('data:image/svg+xml;charset=utf8,' + $ret);
+}
+
+@function df-getBGHoverColor($key: 'primary') {
+  @return map.get($df-colors-transformed, $df-hover-transform + '-' + $df-hover-transform-param + '-' + $key);
+}
+
+@function df-getBGActiveColor($key: 'primary') {
+  @return map.get($df-colors-transformed, $df-active-transform + '-' + $df-active-transform-param + '-' + $key);
+}
+
+// BGsecondary active
+@function df-getBGSecondaryActiveColor($key: 'primary') {
+  @return map.get(
+    $df-colors-transformed,
+    $df-bg-active-transform + '-' + $df-bg-active-transform-param1 + '-' + $df-bg-active-transform-param2 + '-' + $key
+  ); // mix white 15
+}
+
+// BGsecondary hover
+@function df-getBGSecondaryHoverColor($key: 'primary') {
+  @return map.get(
+    $df-colors-transformed,
+    $df-bg-hover-transform + '-' + $df-bg-hover-transform-param1 + '-' + $df-bg-hover-transform-param2 + '-' + $key
+  ); // mix white 10
+}
+
+// Alert BG...
+@function df-getBGColor($key: 'primary') {
+  @return map.get(
+    $df-colors-transformed,
+    $df-bg-transform + '-' + $df-bg-transform-param1 + '-' + $df-bg-transform-param2 + '-' + $key
+  ); // mix white 5
+}
+
+//Default values
+$df-size-ratios: (
+  'sm': 0.875,
+  'md': 1,
+  'lg': 1.125,
+  'xl': 1.25
+) !default;
+
+$df-sizing-ratios: (
+  'sm': 0.7,
+  'lg': 1.9,
+  'xl': 1.9
+) !default;
+
+$df-box-shadow-transparent-amount: 0.8 !default;
+$df-box-shadow-color: #000 !default; // should be the same as $black
+
+$df-box-shadow: 0px 4px 8px 0px
+  color.adjust(
+    $color: $df-box-shadow-color,
+    $alpha: - $df-box-shadow-transparent-amount
+  ) !default;

package/styles/scss/utilities/_form.mixins.scss

@@ -0,0 +1,26 @@
+$df-check-label-adjust-padding-left: 0.125rem !default;
+// mixins for radio and checkbox position
+@mixin df-checkboxradio-pos($df-margin-bottom) {
+  display: inline-block;
+  position: relative;
+  &:not(.col-form-label) {
+    margin-bottom: $df-margin-bottom;
+  }
+  @include ltr {
+    padding-left: calc($form-check-padding-start + $df-check-label-adjust-padding-left); // add
+    margin-left: -$form-check-padding-start; // add
+  }
+
+  @include rtl {
+    padding-right: calc($form-check-padding-start + $df-check-label-adjust-padding-left); // add
+    margin-right: -$form-check-padding-start; // add
+  }
+
+  &::before {
+    // add
+    position: absolute; // idem as custom-control-input from bootstrap to hide the browser input (mandatory)
+    top: 50%; // New trick to use to center the icon with the title (works
+    // with the transform on the element and display: inline-block, position: relative on the parent)
+    transform: translateY(-50%);
+  }
+}