@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/components/alert/_alert.scss

@@ -0,0 +1,94 @@
+/* @todo validate a.alert exist */
+a.alert {
+  cursor: pointer;
+  transition: box-shadow $animation-duration;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: $shadow;
+  }
+}
+
+.alert {
+  border-radius: var(--radius);
+  position: relative;
+  display: flex;
+  align-self: flex-start;
+  box-shadow: none;
+  padding: $spacing-4;
+
+  &.is-banner {
+
+    text-align: center;
+    border-radius: 0;
+    border: none !important;
+
+  }
+
+  .text:first-child,
+  .title:first-child {
+    line-height: normal;
+  }
+
+  .title,
+  .text {
+    margin-bottom: 0 !important;
+    padding-bottom: $spacing-1;
+  }
+
+  .text:last-child {
+    padding-bottom: 0 !important;
+  }
+
+  .icon {
+    padding: 0;
+  }
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+
+  strong {
+    color: currentColor;
+  }
+
+  @each $name in $colors-feedback {
+    &.is-#{$name} {
+      background-color: fadeColor($name);
+      border: 1px solid getColor($name);
+
+      .icon {
+        color: getColor($name);
+      }
+    }
+  }
+
+  > .icon {
+    flex: none;
+    align-self: flex-start;
+
+    [class^='tri-'],
+    [class*=' tri-'] {
+      font-size: 20px;
+    }
+  }
+
+  > .body {
+    align-self: center;
+    margin-bottom: 0;
+    flex-grow: 1;
+    padding: 1px $spacing-2; /* Fixes flex behavior on Safari mobile */
+
+    @include mobile {
+      flex: 1;
+    }
+  }
+
+  .text,
+  .paragraph {
+    font-size: $text-14;
+    text-align: left;
+  }
+
+}

package/framework/src/components/alert/_index.scss

@@ -0,0 +1,2 @@
+@import "alert";
+@import "toaster";

package/framework/src/components/alert/_toaster.scss

@@ -0,0 +1,124 @@
+a.toaster {
+    cursor: pointer;
+    transition: box-shadow $animation-duration;
+
+    &:hover,
+    &:active,
+    &:focus {
+        box-shadow: $shadow;
+    }
+}
+
+.toaster {
+  background-color: getColor('info-fade');
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  position: relative;
+    margin-left: 24px;
+    margin-right: 24px;
+
+    .toaster-close {
+        padding-right: 0 !important ;
+        color: getColor('font') !important;
+    }
+
+    .text:first-child,
+    .title:first-child {
+        font-size: $text-16 !important;
+        line-height: normal;
+    }
+
+    .title,
+    .text {
+        margin-bottom: 0 !important ;
+        padding-bottom: $spacing-1;
+    }
+
+    .text:last-child {
+        padding-bottom: 0 !important;
+    }
+
+    .icon {
+        padding: 0;
+    }
+
+    @include mobile {
+        flex-wrap: wrap;
+    }
+
+    strong {
+        color: currentColor;
+    }
+
+    code,
+    pre {
+        background: getColor('background');
+    }
+
+    pre code {
+        background: transparent;
+    }
+
+  @each $name in $colors-feedback {
+    &.is-#{$name} {
+      background-color: fadeColor($name);
+      border: 2px solid getColor($name);
+
+      .icon {
+        color: getColor($name);
+      }
+    }
+  }
+
+    &:not(.has-description) > .icon {
+        align-self: flex-start;
+    }
+
+    &.has-description {
+        @include mobile {
+            justify-content: center;
+            text-align: center;
+
+            .icon {
+                padding: 0;
+                margin-bottom: 30px;
+            }
+
+            .body {
+                flex: 0 1 auto;
+            }
+        }
+    }
+
+    display: flex;
+
+    > .icon {
+        flex: none;
+        align-self: flex-start;
+        margin-top: -5.4px;
+        font-size: 20px;
+    }
+
+    > .body {
+        align-self: center;
+        color: getColor('font');
+        margin-bottom: 0;
+        flex-grow: 1;
+        padding: 1px $spacing-2; /* Fixes flex behavior on Safari mobile */
+
+        @include mobile {
+            flex: 1;
+        }
+    }
+
+    box-shadow: none;
+    padding: $spacing-4;
+
+    .title,
+    .text,
+    .paragraph {
+        font-size: $text-14;
+        text-align: left;
+    }
+
+}

package/framework/src/components/input/_entry.scss

@@ -0,0 +1,135 @@
+.input, .textarea {
+  &:not(:disabled) {
+    &:active,
+    &:focus,
+    &:focus-visible:not(.icon) {
+      padding-left: 15px ;
+    }
+  }
+}
+
+.input,
+.textarea {
+  @include input;
+
+  padding-left: $spacing-4;
+  padding-right: $spacing-4;
+  font-size: $size-medium;
+  max-width: 100%;
+  width: 100%;
+
+  // Colors
+  @each $name in $colors-brand-functionnal {
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+    $brandName: getColorBrandName($name);
+
+    &.is-#{$brandName} {
+      border: 1px solid $color;
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+
+  &.is-fullwidth {
+    display: block;
+    width: 100%;
+  }
+
+  &.is-inline {
+    display: inline;
+  }
+
+  & label {
+    margin-top: 10px;
+  }
+}
+
+.input {
+  &::-ms-clear {
+    display: none;
+  }
+
+  &.is-small {
+    height: 24px;
+  }
+
+  &.is-rounded {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  &.is-static {
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &::-webkit-search-cancel-button{
+    $colorSvg: encodecolor(getColorValue('main'));
+    position:absolute;
+    right: 0px;
+    bottom : 0px;
+    top:0px;
+    padding: 0 24px;
+    opacity: 1;
+    display: block;
+    background-image: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+    background-size : 20px;
+    -webkit-appearance: none;
+    background-repeat: no-repeat;
+    background-color: getColor('background') ;
+    background-position: center;
+  }
+
+  &[type="search"] {
+    padding-right: 45px;
+    &:hover:not(:focus){
+      &::-webkit-search-cancel-button {
+        background-color: getColor('main-fade');
+      }
+    }
+    &:focus{
+      &::-webkit-search-cancel-button {
+        padding: 0 23px;
+      }
+    }
+  }
+
+
+}
+
+.textarea {
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  resize: vertical;
+  padding-top: 15px;
+
+
+  &:not([rows]) {
+    max-height: 600px;
+    min-height: 120px;
+  }
+
+  &[rows] {
+    height: initial;
+  }
+
+  &.has-fixed-size {
+    resize: none;
+  }
+
+  &:focus-visible{
+    padding-top: 14px;
+    padding-bottom: 4px;
+  }
+}