@ambita/design-system 5.0.7-1241.0 → 5.0.8

package/dist/ambita-logo.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="xMinYMid meet" x="0px" y="0px" viewBox="0 0 694.11 164.663" style="enable-background:new 0 0 694.11 164.663;"> <path fill="currentcolor" class="ambita-logo__svg__path" d="M101.071,48.106h-5.002c-5.439,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.177-10.047-30.702-10.047c-15.85,0-29.602,6.764-39.627,17.485C5.876,76.03,0.058,90.393,0.002,106.385 c0,0.078-0.002,0.156-0.002,0.236c0,15.848,5.827,30.302,15.85,41.022c10.025,10.493,23.778,17.02,39.627,17.02 c11.525,0,21.909-3.648,30.705-9.814c0.04,5.403,4.472,9.814,9.886,9.814h5.002c5.437,0,9.887-4.453,9.887-9.889V57.998 C110.958,52.558,106.507,48.106,101.071,48.106z M86.18,108.901c-0.508,8.609-3.876,16.153-9.021,21.729 c-5.595,5.826-13.522,9.089-21.681,9.089c-8.389,0-16.316-3.263-21.677-9.089c-5.595-6.063-8.859-14.453-8.859-24.009 c0-0.08,0.003-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.856-23.777c5.36-6.293,13.288-9.556,21.677-9.556 c8.159,0,16.086,3.263,21.681,9.556c5.145,5.36,8.513,12.888,9.021,21.68v2.098V108.901z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M281.806,48.106H150.147l0,0c-5.439,0-9.891,4.451-9.891,9.892v96.776 c0,5.436,4.451,9.889,9.891,9.889h4.999c5.439,0,9.89-4.453,9.89-9.889V72.887h38.551v81.888c0,5.436,4.451,9.889,9.89,9.889h4.999 c5.439,0,9.889-4.453,9.889-9.889V72.887h38.551v81.888c0,5.436,4.452,9.889,9.889,9.889h5.001c5.44,0,9.889-4.453,9.889-9.889 V57.998C291.695,52.558,287.247,48.106,281.806,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M684.222,48.106h-5.001c-5.44,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.178-10.047-30.702-10.047c-15.85,0-29.601,6.764-39.626,17.485c-9.976,10.438-15.791,24.801-15.848,40.793 c0,0.078-0.003,0.156-0.003,0.236c0,15.848,5.827,30.302,15.851,41.022c10.025,10.493,23.776,17.02,39.626,17.02 c11.525,0,21.908-3.648,30.702-9.814c0.041,5.403,4.475,9.814,9.889,9.814h5.001c5.438,0,9.889-4.453,9.889-9.889V57.998 C694.11,52.558,689.659,48.106,684.222,48.106z M669.332,108.907c-0.511,8.608-3.878,16.147-9.023,21.723 c-5.595,5.826-13.519,9.089-21.68,9.089c-8.391,0-16.315-3.263-21.679-9.089c-5.594-6.063-8.855-14.453-8.855-24.009 c0-0.08,0-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.852-23.777c5.363-6.293,13.288-9.556,21.679-9.556 c8.16,0,16.085,3.263,21.68,9.556c5.145,5.357,8.512,12.886,9.023,21.672v2.106V108.907z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M470.419,48.106h-5c-5.438,0-9.891,4.451-9.891,9.892v96.776c0,5.436,4.452,9.889,9.891,9.889h5 c5.439,0,9.889-4.453,9.889-9.889V57.998C480.308,52.558,475.857,48.106,470.419,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M433.659,106.385c-0.124-31.832-25.25-58.278-56.643-58.278c-11.422,0-22.608,3.731-31.234,9.792 l-0.008-46.522c0-5.437-4.448-9.889-9.888-9.889h-0.003h-4.998h-0.001c-5.439,0-9.889,4.452-9.889,9.889v143.398 c0,5.436,4.449,9.889,9.889,9.889h0.001h4.998h0.003c5.382,0,9.792-4.359,9.884-9.717c8.785,5.886,19.79,9.717,31.246,9.717 c31.471,0,56.647-26.575,56.647-58.042C433.662,106.541,433.659,106.463,433.659,106.385z M398.928,129.696 c-5.827,6.06-13.52,9.559-21.912,9.559c-8.623,0-16.084-3.499-21.911-9.559c-5.827-5.827-9.323-14.22-9.323-23.075 c0-0.08,0.001-0.158,0.001-0.236c0.059-9.232,3.542-17.532,9.322-23.311c5.827-6.06,13.288-9.559,21.911-9.559 c8.393,0,16.085,3.499,21.912,9.559c5.78,5.778,9.264,14.079,9.323,23.311c0,0.078,0.002,0.156,0.002,0.236 C408.253,115.477,404.758,123.869,398.928,129.696z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M565.793,48.106h-15.241v-36.73c0-5.437-4.45-9.889-9.889-9.889h-5.001 c-5.438,0-9.889,4.452-9.889,9.889v36.73h-15.241c-5.44,0-9.889,4.451-9.889,9.892v4.999c0,5.439,4.449,9.89,9.889,9.89h15.241 v81.888c0,5.436,4.451,9.889,9.889,9.889h5.001c5.438,0,9.889-4.453,9.889-9.889V72.887h15.241c5.44,0,9.889-4.45,9.889-9.89 v-4.999C575.682,52.558,571.233,48.106,565.793,48.106z"></path> <circle fill="currentcolor" class="ambita-logo__svg__path" cx="467.919" cy="13.877" r="13.878"></circle> </svg>

package/dist/css/colors-css-variables.scss

@@ -0,0 +1,65 @@
+@import './colors-scss-variables';
+
+/* Do not use if you need IE11 support */
+:root {
+  /* Purple */
+  --aux-purple: #{$aux-purple};
+  --aux-purple-1: #{$aux-purple-1};
+  --aux-purple-2: #{$aux-purple-2};
+  --aux-purple-3: #{$aux-purple-3};
+  --aux-purple-4: #{$aux-purple-4};
+  --aux-purple-5: #{$aux-purple-5};
+  --aux-purple-6: #{$aux-purple-6};
+  --aux-purple-7: #{$aux-purple-7};
+  --aux-purple-8: #{$aux-purple-8};
+
+  /* Dark Purple */
+  --aux-dark-purple: #{$aux-dark-purple};
+  --aux-dark-purple-1: #{$aux-dark-purple-1};
+  --aux-dark-purple-2: #{$aux-dark-purple-2};
+  --aux-dark-purple-3: #{$aux-dark-purple-3};
+  --aux-dark-purple-4: #{$aux-dark-purple-4};
+  --aux-dark-purple-5: #{$aux-dark-purple-5};
+  --aux-dark-purple-6: #{$aux-dark-purple-6};
+  --aux-dark-purple-7: #{$aux-dark-purple-7};
+  --aux-dark-purple-8: #{$aux-dark-purple-8};
+
+  /* Mint green */
+  --aux-mint: #{$aux-mint};
+  --aux-mint-1: #{$aux-mint-1};
+  --aux-mint-2: #{$aux-mint-2};
+  --aux-mint-3: #{$aux-mint-3};
+  --aux-mint-4: #{$aux-mint-4};
+  --aux-mint-5: #{$aux-mint-5};
+  --aux-mint-6: #{$aux-mint-6};
+  --aux-mint-7: #{$aux-mint-7};
+  --aux-mint-8: #{$aux-mint-8};
+
+  /* Grey */
+  --aux-grey-1: #{$aux-grey-1};
+  --aux-grey-2: #{$aux-grey-2};
+  --aux-grey-3: #{$aux-grey-3};
+  --aux-grey-4: #{$aux-grey-4};
+  --aux-grey-5: #{$aux-grey-5};
+  --aux-grey-6: #{$aux-grey-6};
+
+  /* Supports */
+  --aux-red: #{$aux-red};
+  --aux-red-1: #{$aux-red-1};
+
+  --aux-blue: #{$aux-blue};
+  --aux-blue-2: #{$aux-blue-2};
+
+  --aux-yellow: #{$aux-yellow};
+  --aux-yellow-1: #{$aux-yellow-1};
+  --aux-yellow-2: #{$aux-yellow-2};
+
+  --aux-green: #{$aux-green};
+  --aux-white: #{$aux-white};
+  --aux-black: #{$aux-black};
+  --aux-focus: #{$aux-focus};
+
+  /* Borders */
+  --aux-border-1-grey-1: 1px solid #{$aux-grey-1};
+  --aux-border-2-grey-1: 2px solid #{$aux-grey-1};
+}

package/dist/css/colors-scss-variables.scss

@@ -0,0 +1,60 @@
+// Purple
+$aux-purple: #8237dc;
+$aux-purple-1: #e6d7f8;
+$aux-purple-2: #cdaff1;
+$aux-purple-3: #b487ea;
+$aux-purple-4: #9b5fe3;
+$aux-purple-5: #682cb0;
+$aux-purple-6: #4e2184;
+$aux-purple-7: #341658;
+$aux-purple-8: #1a0b2c;
+
+// Dark Purple
+$aux-dark-purple: #360076;
+$aux-dark-purple-1: #d8cde6;
+$aux-dark-purple-2: #b098c6;
+$aux-dark-purple-3: #8666ac;
+$aux-dark-purple-4: #5f3591;
+$aux-dark-purple-5: #2d1c5b;
+$aux-dark-purple-6: #200e47;
+$aux-dark-purple-7: #1a0f2e;
+$aux-dark-purple-8: #110b18;
+
+// Mint
+$aux-mint: #34d9c3;
+$aux-mint-1: #d8efee;
+$aux-mint-2: #b5e1dd;
+$aux-mint-3: #93d4d0;
+$aux-mint-4: #72cac3;
+$aux-mint-5: #26ae9b;
+$aux-mint-6: #218376;
+$aux-mint-7: #14584e;
+$aux-mint-8: #0a2b26;
+
+// Grey
+$aux-grey-1: #e1e1e1;
+$aux-grey-2: #d2d2d2;
+$aux-grey-3: #bebebe;
+$aux-grey-4: #afafaf;
+$aux-grey-5: #555555;
+$aux-grey-6: #333333;
+
+// Supports
+$aux-red: #ac1631;
+$aux-red-1: #ffe5e5;
+
+$aux-blue: #0067a3;
+$aux-blue-2: #c2e0f2;
+
+$aux-yellow: #ecd025;
+$aux-yellow-1: #fff3a8;
+$aux-yellow-2: #f2c94c;
+
+$aux-green: #5cb85c;
+$aux-white: #fff;
+$aux-black: #000;
+$aux-focus: #003eff;
+
+// Borders
+$aux-border-1-grey-1: 1px solid $aux-grey-1;
+$aux-border-2-grey-1: 2px solid $aux-grey-1;

package/dist/css/mixins.scss

@@ -0,0 +1,147 @@
+$aux-focus-indicator-style:
+  0 0 0 3px $aux-white,
+  0 0 0 6px $aux-focus;
+
+@mixin aux-focus-indicator {
+  & {
+    outline: none;
+  }
+
+  /**
+   * Safari does not support :focus-visible.
+   * Merging the rules below will break the
+   * focus functionality.
+   */
+  &:focus {
+    box-shadow: $aux-focus-indicator-style;
+  }
+
+  &:focus-visible {
+    /* This has to be slightly different from the focus rule above. */
+    box-shadow:
+      $aux-focus-indicator-style,
+      0 0 0 0px transparent;
+  }
+
+  .aux-validation-wrapper--haserror &:focus-visible {
+    /* This has to be slightly different from the focus rule above. */
+    box-shadow:
+      0 0 0px 1px $aux-red,
+      $aux-focus-indicator-style,
+      0 0 0 0px transparent;
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+}
+
+@mixin aux-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin aux-sr-only {
+  &:not(:focus):not(:active) {
+    @include aux-visually-hidden;
+  }
+}
+
+@mixin aux-input-error {
+  .aux-validation-wrapper--haserror & {
+    border-color: $aux-red;
+    box-shadow: 0 0 0px 1px $aux-red;
+  }
+}
+
+@mixin aux-input-radio-checkbox-error {
+  .aux-validation-wrapper--haserror input + label::before {
+    border-color: $aux-red;
+    box-shadow: 0 0 0px 1px $aux-red;
+  }
+
+  .aux-validation-wrapper--haserror input:focus-visible + label::before {
+    box-shadow:
+      0 0 0px 1px $aux-red,
+      $aux-focus-indicator-style;
+  }
+
+  .aux-validation-wrapper--haserror .aux-card-layout::before {
+    border-color: $aux-red;
+    box-shadow: 0 0 0px 1px $aux-red;
+  }
+}
+
+@mixin aux-card-layout {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 11px;
+  padding-top: 15px;
+  padding-left: 47px;
+  padding-right: 15px;
+  box-shadow: 0 2px 5px $aux-grey-4;
+  width: fit-content;
+  width: 100%;
+  border-radius: 3px;
+  position: relative;
+  font-family: ff-din-round-web, sans-serif;
+
+  &::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    display: block;
+    border: 1px solid $aux-grey-5;
+    background: $aux-white;
+    position: absolute;
+    left: 15px;
+    cursor: pointer;
+  }
+
+  & + .aux-card-layout {
+    margin-top: 10px;
+  }
+
+  &--selected {
+    background: $aux-mint-1;
+    outline: 1px solid $aux-mint-6;
+  }
+
+  &--disabled {
+    cursor: default;
+
+    &::before {
+      cursor: default;
+      background: $aux-grey-3;
+      border: 1px solid $aux-grey-3;
+    }
+  }
+
+  &:not(.aux-card-layout--disabled):hover {
+    color: $aux-dark-purple;
+    &::before {
+      border-color: $aux-dark-purple;
+    }
+  }
+
+  &:not(.aux-card-layout--selected):not(.aux-card-layout--disabled):hover::before {
+    background-color: $aux-mint-1;
+  }
+
+  &:has(:focus-visible) {
+    box-shadow: $aux-focus-indicator-style;
+  }
+
+  & input {
+    @include aux-visually-hidden;
+  }
+}
+
+@mixin aux-card-layout--box-shadow {
+  box-shadow: 0 2px 5px $aux-grey-4;
+}