Merge branch '3-switch' into 'dev'

Switch

See merge request !5

ds-ml-css/components/switch.scss

+.switch-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-left: 2px solid transparent;
+  padding: 0 0 4px 16px;
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    max-width: fit-content;
+    padding-top: 6px;
+    gap: 16px;
+  }
+
+  .switch {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 40px;
+    position: relative;
+    padding-left: 6px;
+
+    input[type='checkbox'] {
+      opacity: 0;
+      width: 40px;
+      height: 18px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      margin: 0;
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    .slider {
+      position: relative;
+      width: 40px;
+      height: 18px;
+      background-color: var(--ml-switch-button-color);
+      border: 1px solid var(--ml-switch-color);
+      border-radius: 34px;
+      transition: background-color 0.4s;
+      margin-bottom: 3px;
+      z-index: 1;
+    }
+
+    .slider:before {
+      content: '';
+      position: absolute;
+      height: 12px;
+      width: 12px;
+      left: 3px;
+      top: 3px;
+      background-color: var(--ml-switch-color);
+      border-radius: 50%;
+      transition:
+        transform 0.4s,
+        background-color 0.4s;
+    }
+
+    input:checked + .slider {
+      background-color: var(--ml-switch-color);
+    }
+
+    input:checked + .slider:before {
+      transform: translateX(21px);
+      background-color: var(--ml-switch-button-color);
+    }
+
+    input:focus-visible + .slider {
+      outline: 2px solid var(--ml-focus-color);
+      outline-offset: 2px;
+    }
+
+    .state {
+      font-size: var(--ml-xsmall-font-size);
+      color: var(--ml-secondary);
+      white-space: nowrap;
+      min-width: 53px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .on {
+        display: none;
+      }
+      .off {
+        display: inline;
+      }
+    }
+
+    input:checked ~ .state .on {
+      display: inline;
+    }
+    input:checked ~ .state .off {
+      display: none;
+    }
+  }
+
+  &.right > label {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    min-width: 100%;
+  }
+
+  .description {
+    font-size: var(--ml-small-font-size);
+    color: var(--ml-secondary);
+  }
+
+  .status {
+    font-size: var(--ml-small-font-size);
+  }
+
+  &.info {
+    border-left: 2px solid var(--ml-info);
+    .status {
+      color: var(--ml-info);
+    }
+  }
+  &.success {
+    border-left: 2px solid var(--ml-success);
+    .status {
+      color: var(--ml-success);
+    }
+  }
+  &.error {
+    border-left: 2px solid var(--ml-error);
+    .status {
+      color: var(--ml-error);
+    }
+  }
+  &.warning {
+    border-left: 2px solid var(--ml-warning);
+    .status {
+      color: var(--ml-warning);
+    }
+  }
+  &.disabled {
+    border-left: 2px solid var(--ml-n200);
+    label,
+    .on,
+    .off,
+    .status,
+    .description {
+      color: var(--ml-n200);
+    }
+    .slider {
+      border: 1px solid var(--ml-n200);
+      &:before {
+        background-color: var(--ml-n200);
+      }
+    }
+  }
+}

ds-ml-css/ds-ml-icons.scss

+.success-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  vertical-align: middle;
+  margin-right: 6px;
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: var(--ml-success);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 4px;
+    width: 6px;
+    height: 3px;
+    border-left: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    transform: rotate(-45deg);
+    border-radius: 0 0 2px 2px;
+  }
+}
+
+.error-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  vertical-align: -2px;
+  margin-right: 6px;
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: var(--ml-error);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 3px;
+    width: 2px;
+    height: 8px;
+    background: linear-gradient(to bottom, #fff 0 60%, #fff 60%, transparent 60%, transparent 75%, #fff 75%, #fff 100%);
+    border-radius: 1px;
+  }
+}
+
+.info-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  vertical-align: -2px;
+  margin-right: 6px;
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: var(--ml-info);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 3px;
+    width: 2px;
+    height: 8px;
+    background: linear-gradient(to bottom, #fff 0 20%, #fff 20% 30%, transparent 30% 35%, #fff 35% 100%);
+    border-radius: 1px;
+  }
+}
+
+.warning-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  margin-right: 6px;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 2px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 14px solid var(--ml-warning);
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 8px;
+    width: 2px;
+    height: 6px;
+    background: linear-gradient(to bottom, #fff 0 65%, transparent 65% 80%, #fff 80% 100%);
+    border-radius: 1px;
+  }
+}
+
+.disabled {
+  .success-icon,
+  .info-icon,
+  .error-icon {
+    &::before {
+      background: var(--ml-n200);
+    }
+  }
+  .warning-icon::before {
+    border-bottom-color: var(--ml-n200);
+  }
+}

ds-ml-css/ds-ml-var.scss

@@ -8,6 +8,7 @@
   --ml-xxlarge-px: 20px;
 
   /* FONT SIZE */
+  --ml-xsmall-font-size: 12px;
   --ml-small-font-size: 14px;
   --ml-medium-font-size: 16px;
   --ml-large-font-size: 18px;

ds-ml-css/ds-ml.scss

-@use "ds-color-palet.scss";
-@use "ds-ml-var.scss";
-@use "ds-ml-color-var.scss";
-@use "ds-ml-theme.scss";
+@use 'ds-color-palet.scss';
+@use 'ds-ml-var.scss';
+@use 'ds-ml-color-var.scss';
+@use 'ds-ml-icons.scss';
+@use 'ds-ml-theme.scss';
 
 // components
 @use 'components/accordion.scss';
@@ -10,12 +11,12 @@
 @use 'components/header.scss';
 @use 'components/input.scss';
 @use 'components/radio-button-checkbox.scss';
-@use 'components/progress-bar.scss';
+@use 'components/switch.scss';
 @use 'components/footer.scss';
 
 :root {
   /* define fonts */
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-size: 16px;
 }