@design-factory/design-factory 15.2.0

package/styles/scss/components/fonts/_icon-font.variables.scss

@@ -0,0 +1,14 @@
+$df-icon-vertical-align: -10% !default;
+$df-icon-light-font-weight: 300 !default;
+$df-icon-solid-font-weight: 900 !default;
+
+%df-icon-style {
+  font-family: 'Design-Factory-icon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: $df-icon-light-font-weight;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: $df-icon-vertical-align;
+}

package/styles/scss/components/fonts/_multi-lang.mixins.scss

@@ -0,0 +1,8 @@
+@import 'multi-lang/chinese.mixins';
+@import 'multi-lang/cyrillic.mixins';
+@import 'multi-lang/cyrillic-extended.mixins';
+@import 'multi-lang/georgian.mixins';
+@import 'multi-lang/hebrew.mixins';
+@import 'multi-lang/arabic.mixins';
+@import 'multi-lang/japanese.mixins';
+@import 'multi-lang/korean.mixins';

package/styles/scss/components/fonts/multi-lang/_arabic.mixins.scss

@@ -0,0 +1,8 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-arabic($parent-selector) {
+  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
+  @include df-fonts-multi-lang-font-faces-noto-sans-arabic();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_chinese.mixins.scss

@@ -0,0 +1,12 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-chinese($parent-selector) {
+  $headings-font-stack: 'Amadeus', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
+    'Source Han Sans CN', '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体',
+    'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
+    'Source Han Sans CN', '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体',
+    'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_cyrillic-extended.mixins.scss

@@ -0,0 +1,11 @@
+@import '../font-faces.mixins';
+
+// Kazakh, Tajik, Kirghiz languages
+@mixin df-fonts-multi-lang-cyrillic-extended($parent-selector) {
+  $headings-font-stack: 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro Full', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans();
+  @include df-fonts-multi-lang-font-faces-source-sans-pro-full();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_cyrillic.mixins.scss

@@ -0,0 +1,10 @@
+@import '../font-faces.mixins';
+
+// Russian, Ukrainian, Belarusian, Bulgarian, Macedonian languages
+@mixin df-fonts-multi-lang-cyrillic($parent-selector) {
+  $headings-font-stack: 'Amadeus Full', sans-serif;
+  $body-font-stack: 'Source Sans Pro Full', sans-serif;
+  @include df-fonts-multi-lang-font-faces-amadeus-full();
+  @include df-fonts-multi-lang-font-faces-source-sans-pro-full();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_georgian.mixins.scss

@@ -0,0 +1,9 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-georgian($parent-selector) {
+  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $body-font-stack: 'Noto Sans', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans-georgian();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_hebrew.mixins.scss

@@ -0,0 +1,9 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-hebrew($parent-selector) {
+  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
+
+  @include df-fonts-multi-lang-font-faces-noto-sans-hebrew();
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/fonts/multi-lang/_japanese.mixins.scss

@@ -0,0 +1,23 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-japanese($parent-selector) {
+  $headings-font-stack: 'Amadeus', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
+    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
+    Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
+    'Droid Sans Japanese', sans-serif;
+  $body-font-stack: 'Source Sans Pro', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
+    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
+    Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
+    'Droid Sans Japanese', sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+
+  #{$parent-selector} {
+    .display-1,
+    .display-2,
+    .display-3,
+    .display-4 {
+      font-weight: 400;
+    }
+  }
+}

package/styles/scss/components/fonts/multi-lang/_korean.mixins.scss

@@ -0,0 +1,10 @@
+@import '../font-faces.mixins';
+
+@mixin df-fonts-multi-lang-korean($parent-selector) {
+  $headings-font-stack: 'Amadeus', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
+    'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  $body-font-stack: 'Source Sans Pro', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
+    'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+
+  @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
+}

package/styles/scss/components/footer/_footer.scss

@@ -0,0 +1,23 @@
+.df-app-footer {
+  margin-top: $df-footer-margin-top; // to put it at the botton of the flex container
+  display: $df-footer-display;
+  flex-direction: $df-footer-direction;
+}
+
+.df-app-footer-line {
+  display: $df-footer-line-display;
+  align-items: $df-footer-line-align;
+  justify-content: $df-footer-line-justify-content;
+  flex-wrap: $df-footer-line-wrap;
+  flex-direction: $df-footer-line-direction;
+  padding-left: $df-footer-line-padding-left;
+  padding-right: $df-footer-line-padding-right;
+}
+
+.df-footer-brand {
+  display: $df-footer-brand-display;
+  align-items: $df-footer-brand-align;
+  &:after {
+    display: $df-footer-brand-after-display;
+  }
+}

package/styles/scss/components/footer/_footer.variables.scss

@@ -0,0 +1,13 @@
+$df-footer-margin-top: auto !default;
+$df-footer-display: flex !default;
+$df-footer-direction: column !default;
+$df-footer-line-display: flex !default;
+$df-footer-line-align: center !default;
+$df-footer-line-justify-content: flex-start !default;
+$df-footer-line-wrap: nowrap !default;
+$df-footer-line-direction: row !default;
+$df-footer-line-padding-left: 1rem !default;
+$df-footer-line-padding-right: 1rem !default;
+$df-footer-brand-display: flex !default;
+$df-footer-brand-align: center !default;
+$df-footer-brand-after-display: none !default;

package/styles/scss/components/form/_form.scss

@@ -0,0 +1,104 @@
+@use 'sass:math';
+
+.form-inline {
+  .form-group {
+    label {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.form-control {
+  &:disabled {
+    color: $df-disabled-input-color;
+    cursor: $df-input-disabled-cursor;
+    &::placeholder {
+      color: $df-disabled-input-color;
+    }
+  }
+  &::placeholder {
+    font-style: italic;
+  }
+
+  &[readonly] {
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+}
+
+// Override warning state color
+.warning-feedback {
+  color: $df-form-feedback-help-warning-color;
+}
+
+.invalid-feedback,
+.valid-feedback,
+.warning-feedback {
+  font-size: $font-size-sm;
+}
+
+.form-row {
+  // add
+  & ~ .invalid-feedback {
+    display: block;
+  }
+}
+
+// forms size small
+.form-sm {
+  .form-control,
+  .ng-select {
+    @extend .form-control-sm;
+  }
+
+  label {
+    :not(.col-form-label) {
+      margin-bottom: $df-label-margin-bottom-sm;
+    }
+    font-size: $font-size-sm;
+  }
+
+  .form-check-input {
+    width: $df-form-check-input-sm-width;
+    height: $df-form-check-input-sm-width;
+    margin-top: ($line-height-sm - $df-form-check-input-sm-width) * 1;
+  }
+
+  .form-switch {
+    .form-check-input {
+      margin-top: 0;
+      width: $df-form-switch-sm-width;
+      height: math.div($df-form-switch-sm-width, 2);
+    }
+  }
+}
+
+// forms size large
+.form-lg {
+  .form-control {
+    @extend .form-control-lg;
+  }
+
+  label {
+    :not(.col-form-label) {
+      margin-bottom: $df-label-margin-bottom-sm;
+    }
+    font-size: $font-size-lg;
+  }
+
+  .form-check-input {
+    width: $df-form-check-input-lg-width;
+    height: $df-form-check-input-lg-width;
+    margin-top: ($line-height-lg - $df-form-check-input-lg-width) * .5;
+  }
+
+  .form-switch {
+    .form-check-input {
+      margin-top: 0;
+      width: $df-form-switch-lg-width;
+      height: math.div($df-form-switch-lg-width, 2);
+    }
+  }
+}

package/styles/scss/components/form/_form.variables.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+
+$df-disabled-input-color: $df-disabled-color !default;
+$df-input-disabled-cursor: $df-disabled-cursor !default;
+$df-label-margin-bottom-sm: 0.375rem !default;
+$df-form-feedback-warning-color: $warning !default;
+$df-form-feedback-help-warning-color: $brown !default;
+$df-form-feedback-warning-icon: '' !default;
+
+// stylelint-disable scss/dollar-variable-default, scss/dollar-variable-pattern
+$form-validation-states: map.merge(
+  (
+    'warning': (
+      'color': $df-form-feedback-warning-color,
+      'icon': $df-form-feedback-warning-icon
+    )
+  ),
+  $form-validation-states
+);
+$df-form-check-input-sm-width: $form-check-input-width * map.get($df-size-ratios, 'sm') !default;
+$df-form-check-input-lg-width: $form-check-input-width * map.get($df-size-ratios, 'lg') !default;
+$df-form-switch-sm-width: $form-switch-width * map.get($df-size-ratios, 'sm') !default;
+$df-form-switch-lg-width: $form-switch-width * map.get($df-size-ratios, 'lg') !default;

package/styles/scss/components/icon/_amadeus-icon.scss

@@ -0,0 +1,39 @@
+@mixin df-svg-color($parent, $color) {
+  #{$parent} {
+    background: df-getSVGasURL($df-amadeuslogo, $color, #fff, #fff) no-repeat center center;
+    background-size: contain;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include df-svg-color('.df-amadeuslogo-#{$color}', $value);
+}
+
+@each $color, $value in $colors {
+  @include df-svg-color('.df-amadeuslogo-#{$color}', $value);
+}
+
+@include df-svg-color('.df-amadeuslogo-black', $black);
+
+.df-logo-dim {
+  height: $df-brand-amadeus-logo-height;
+  width: $df-brand-amadeus-logo-width;
+}
+
+.df-rond-icon-only-focusable {
+  outline: none;
+  &:focus {
+    &::before {
+      box-shadow: $df-focused-box-shadow;
+      border-radius: 50%;
+    }
+  }
+}
+.df-square-icon-only-focusable {
+  outline: none;
+  &:focus {
+    &::before {
+      box-shadow: $df-focused-box-shadow;
+    }
+  }
+}

package/styles/scss/components/icon/_amadeus-icon.variables.scss

@@ -0,0 +1,3 @@
+$df-amadeuslogo: "<svg enable-background='new 0 0 510.2 67.9' version='1.1' viewBox='0 0 510.2 67.9' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path fill='#ffffff' d='m269.7 0c-8.3 0-19.8 1.4-26.9 4v61.9c5.8 1.2 16.8 2 24.4 2 26 0 36.1-10.2 36.1-34.4 0.1-21-12.8-33.5-33.6-33.5m-12.2 12.6c2.4-0.5 7-1.1 11.6-1.1 10.6 0 18.8 5.9 18.8 22 0 15.5-4.1 22.9-20.2 22.9-5.2 0-10.3-0.8-10.3-0.8v-43zm204 52.9s9 2.4 21.7 2.4c12 0 27-4.1 27-20.3 0-10.6-7.8-15.1-20.5-19.7-6.9-2.5-12.7-4.8-12.7-9.5 0-2.3 1.7-6.7 10.5-6.7 8.2 0 16.6 3.8 16.6 3.8l3.7-10.8c-2.6-1.3-10.6-4.7-21.7-4.7-12.1 0-23.8 6.4-23.8 19.3 0 13.3 12.1 17.3 21.5 20.5 6.4 2.2 11.8 4.4 11.8 8.7 0 4.1-2.3 7.7-13.1 7.7-8.9 0-18.3-2-18.3-2l-2.7 11.3zm-31.9-15.2c-3.5 1.7-11 4.5-17.9 4.5-10 0-11.7-4.5-11.7-14.9v-39.3h-2.2c-3.3 0-10.6 0.6-12.4 0.9v40.3c0 17.6 4.3 26 22.2 26 13.7 0 21.7-5.3 22.2-5.3 0.2 0 4.9 2.9 14.3 2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9v49.8zm-231.1-50.3c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.6 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm-174.9-52.7c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.7 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm73.1-13.7c-0.4 0.9-0.8 2.7-1.1 3.8-0.3-1-0.8-2.8-1.1-3.8l-12.8-32.9c-2.2-5.4-5.6-6.1-11.8-6.1-2.2 0-6.6 0.3-6.6 0.3l-6.6 66.6h14.6l3.2-44.7 13.9 33.8c1 2.6 3.1 3.7 7.3 3.7 4.1 0 6.2-1 7.3-3.7l13.7-33.8 3.2 44.7h14.6l-6.6-66.6s-4.4-0.3-6.6-0.3c-6.2 0-9.6 0.7-11.8 6.1l-12.8 32.9zm206.8 25.7s11.2 3.1 25.5 3.1c15.3 0 22.3-1.7 22.3-1.7v-11.3s-7.6 1.5-18.3 1.5c-9.3 0-15.1-1.2-15.1-1.2v-16h28.9v-11.3h-28.9v-15.3s5.7-1 14.1-1c9.5 0 18.1 1.5 18.1 1.5v-11.4s-7.5-1.6-19.8-1.6c-16.3 0-27 2.9-27 2.9v61.8z'/></svg>" !default;
+$df-brand-amadeus-logo-height: 0.8125rem !default;
+$df-brand-amadeus-logo-width: 6.125rem !default;

package/styles/scss/components/inputs/_inputs.mixin.scss

@@ -0,0 +1,51 @@
+@mixin df-input-with-icon-validation-state($state, $color, $position) {
+  $ltr-border-side: if($position == 'append', 'right', 'left');
+  $rtl-border-side: if($position == 'append', 'left', 'right');
+
+  &.is-#{$state} {
+    & ~ .#{$state}-feedback,
+    .#{$state}-tooltip {
+      display: block;
+    }
+
+    .input-group-#{$position} {
+      border-color: $color;
+      @include ltr {
+        border-#{$ltr-border-side}: $input-border-width solid $color;
+      }
+      @include rtl {
+        border-#{$rtl-border-side}: $input-border-width solid $color;
+      }
+    }
+
+    input.df-input-withicon {
+      border-color: $color;
+      @include ltr {
+        border-#{$ltr-border-side}-color: $df-iwi-border-between-color; // override mandatory
+      }
+      @include rtl {
+        border-#{$rtl-border-side}-color: $df-iwi-border-between-color; // override mandatory
+      }
+    }
+
+    &.df-focused {
+      box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
+
+      .input-group-#{$position} {
+        border-color: $color !important;
+      }
+    }
+  }
+}
+
+@mixin df-iwi-root-left($parent) {
+  @at-root #{selector-replace(&, ".input-group", $parent + "> div.input-group:first-of-type")} {
+    @content;
+  }
+}
+
+@mixin df-iwi-root-right($parent) {
+  @at-root #{selector-replace(&, ".input-group", $parent + "> div.input-group:last-of-type")} {
+    @content;
+  }
+}