@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

package/framework/src/elements/_notification.scss

@@ -1,151 +0,0 @@
-.notification {
-  cursor: pointer;
-  transition: box-shadow $animation-duration;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: $shadow;
-  }
-
-  .icon,
-  .call-to-action {
-    color: getColor('font');
-  }
-
-  @include apply-shadow-box();
-
-  padding: 2em 2em;
-  background-color: getColor('background');
-  border-radius: $radius;
-  margin-bottom: 20px;
-  position: relative;
-
-  @include mobile {
-    flex-wrap: wrap;
-  }
-
-  pre code {
-    background: transparent;
-  }
-
-  & > .delete {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-  }
-
-  .call-to-action .button {
-    background-color: getColor('main');
-    border-color: getColor('main');
-  }
-
-  @each $name in $colors-brand-funcionnal {
-    $brandName: getColorBrandName($name);
-    $color: getColor($name);
-    $color-invert: invertColor($name);
-
-    &.is-#{$brandName} {
-      .icon, .title {
-        color: $color;
-      }
-      .call-to-action .button {
-        color: $color-invert;
-      }
-    }
-  }
-
-  &.is-banner {
-    @include desktop {
-      padding-left: 150px;
-      padding-right: 150px;
-    }
-
-    box-shadow: none;
-    border-radius: 0;
-    padding: $spacing-4;
-    margin-bottom: 0;
-  }
-
-  &:not(.has-description) > .icon {
-    align-self: center;
-  }
-
-  &.has-description {
-    @include mobile {
-      justify-content: center;
-      text-align: center;
-
-      .icon {
-        padding: 0;
-        margin-bottom: 30px;
-      }
-
-      .body {
-        flex: 0 1 auto;
-      }
-    }
-  }
-
-  &.has-body {
-    display: flex;
-  }
-
-  > .icon {
-    flex: none;
-    align-self: flex-start;
-    padding-right: 27px;
-    font-size: 32px;
-  }
-
-  > .body {
-    align-self: center;
-    color: getColor('font');
-    margin-bottom: 0;
-    flex-grow: 1;
-    padding: 1px; /* Fixes flex behavior on Safari mobile */
-
-    @include mobile {
-      flex: 1;
-    }
-  }
-
-  > .call-to-action {
-    padding-left: 4em;
-    align-self: center;
-    flex: none;
-
-    @include mobile {
-      flex: 0 1 100%;
-      margin-top: 20px;
-      padding-left: 0;
-    }
-  }
-
-  &.is-small {
-    box-shadow: none;
-    padding: 14px;
-
-    > .icon {
-      padding-right: 10px;
-      width: 40px;
-      font-size: 20px;
-    }
-
-    .title,
-    .text,
-    .paragraph {
-      font-size: $text-14 !important;
-      text-align: left;
-    }
-    color: getColor('font');
-
-    @each $name, $pair in $colors-feedback {
-      $bg-color: nth($pair, 1);
-      &.is-#{$name} {
-        background-color: getColor($bg-color);
-      }
-    }
-
-  }
-}

package/framework/src/elements/_options.scss

@@ -1,146 +0,0 @@
-.options {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    @include desktop {
-        flex-wrap: nowrap;
-    }
-
-    .field {
-        margin: 15px 20px 15px 0;
-        min-width: 70px;
-
-        &:last-child {
-          margin: 15px 0 15px 0;
-        }
-
-        input[type=radio] {
-            @include checkradio;
-
-            + label {
-                border: 1px solid currentColor;
-                border-radius: $radius-small;
-                color: getColor('font');
-                font-weight: $weight-medium;
-                padding: 6px 15px;
-
-                &::before {
-                    border-radius: 100%;
-                    border-width: 2px;
-                    border-color: currentColor;
-                    min-width: 12px;
-                    min-height: 12px;
-                }
-            }
-
-            &:checked + label {
-                color: getColor('alternate');
-                border-color: currentColor;
-                border-width: 2px;
-
-                &::before {
-                    content: "";
-                    mask-image: url('./assets/icons/all/check.svg');
-                    background-color: getColor('alternate');
-                    border-width: 0;
-                    width: 20px;
-                    height: 20px;
-                    margin: 0 6px 0 -4px;
-                   mask-size: 20px;
-                }
-            }
-
-            &[disabled] + label {
-                cursor: not-allowed;
-                color: getColor('grey');
-                border-color: currentColor;
-
-                &::before {
-                    border-color: currentColor;
-                }
-            }
-        }
-
-        &.has-icon {
-            input[type=radio] {
-                + label {
-                    padding-right: 45px;
-
-                    .icon {
-                        position: absolute;
-                        right: 15px;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        height: 20px;
-                        width: 20px;
-                    }
-                }
-
-                &:checked + label {
-                    .icon {
-                       color: getColor('alternate');
-                    }
-                }
-
-                &[disabled] + label {
-                    .icon {
-                      color: getColor('grey');
-                    }
-                }
-            }
-        }
-
-        &.is-multiline {
-            min-width: 120px;
-
-            input[type=radio] {
-                + label {
-                    padding-top: 55px;
-                    justify-content: center;
-                    flex-direction: column;
-
-                    &::before {
-                        position: absolute;
-                        top: 15px;
-                        left: 15px;
-                    }
-
-                    &.is-descriptive > span:not(.icon) {
-                        font-size: $text-12;
-                        font-weight: $weight-medium;
-                    }
-
-                    .icon {
-                        position: absolute;
-                        top: 0;
-                        font-size:30px;
-                        width:100%;
-                    }
-                }
-
-                &:checked + label {
-                    color: getColor('alternate');
-
-                    &::before {
-                        margin-top: -5px;
-                    }
-
-                }
-
-                &[disabled] + label {
-                  color: getColor('grey');
-                }
-            }
-        }
-    }
-
-    &.is-inverted {
-        input[type=radio]:checked {
-            + label {
-                border-color: getColor('font');
-                color: getColor('font');
-            }
-        }
-    }
-}

package/framework/src/elements/_paragraph.scss

@@ -1,101 +0,0 @@
-$text-levels: (
-    ($text-16, $text-20, $text-16),
-    ($text-14, $text-18, $text-16),
-    ($text-12, $text-15, $text-16),
-    ($text-10, $text-12, $text-16)
-);
-$text-levels-mobile: (
-    ($text-16, $text-20, $text-8),
-    ($text-14, $text-18, $text-8),
-    ($text-12, $text-15, $text-8),
-    ($text-10, $text-12, $text-8)
-);
-
-
-.paragraph {
-    &.text {
-        @each $text-level in $text-levels {
-            $i: index($text-levels, $text-level);
-            $font-size: nth($text-level, 1);
-            $line-height: nth($text-level, 2);
-            $margin-bottom: nth($text-level, 3);
-
-            &.is-level-#{$i} {
-                font-size: $font-size;
-                line-height: $line-height;
-                font-family: $family-primary;
-                margin-bottom: $margin-bottom;
-            }
-
-            &.is-inverted {
-                color: getColor('background');
-            }
-        }
-
-        @include mobile {
-            @each $text-level-mobile in $text-levels-mobile {
-                $i: index($text-levels-mobile, $text-level-mobile);
-                $margin-bottom: nth($text-level-mobile, 3);
-
-                &.is-level-#{$i} {
-                    margin-bottom: $margin-bottom;
-                }
-            }
-        }
-
-        &.is-wrapped {
-            word-break: break-word;
-        }
-
-        &.bold {
-            font-weight: $weight-bold;
-        }
-    }
-}
-
-
-.paragraph,
-.text {
-    & a.link:not([disabled]),
-    a {
-        padding: $spacing-1;
-        margin: -4px;
-        text-decoration: underline;
-        font-size: unset;
-        font-weight: $weight-medium;
-
-        &::after {
-            content: none;
-        }
-
-        &.is-static::after {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.paragraph:not(:last-child) {
-    margin-bottom: 10px;
-}
-
-.span {
-    font-style: inherit;
-    font-weight: inherit;
-}
-
-.strong {
-    color: inherit;
-    font-weight: $weight-bold;
-}
-
-.sup {
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-    top: -0.4em;
-    font-size: 0.7em;
-}
-
-.small {
-    font-size: 0.875em;
-}

package/framework/src/elements/_radio.scss

@@ -1,67 +0,0 @@
-@include checkbox-and-radio('radio');
-
-.radios {
-  width: 100%;
-  column-gap: 16px;
-  display: flex;
-  flex-wrap: wrap;
-
-  &.is-vertical {
-    row-gap: 16px;
-  }
-
-  @include mobile {
-    &:not(.is-mobile){
-      display: block;
-    }
-  }
-
-  &.is-centered,
-  &.has-text-centered,
-  .has-text-centered & {
-    justify-content: center;
-  }
-}
-
-.radio,
-.radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            content: '';
-            width: 12px;
-            height: 12px;
-        }
-    }
-
-    label.radio-label {
-        &:before,
-        &:after {
-            border-radius: 50%;
-        }
-    }
-}
-
-.radio {
-    input:checked ~ label.radio-label {
-        &:after {
-            left: 3px;
-        }
-    }
-}
-
-.radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            top: 18px;
-            right: 18px;
-        }
-    }
-
-    input:checked:disabled ~ label.radio-label {
-        &:after {
-            background-color: getColor('grey');
-            top: 19px;
-            right: 19px;
-        }
-    }
-}