@trilogy-ds/styles 0.0.1-beta.29 → 0.0.1-beta.31

package/framework/src/elements/_notification.scss

@@ -1,150 +0,0 @@
-.notification {
-  cursor: pointer;
-  transition: box-shadow $animation-duration;
-
-  #{$hoverSelector},
-  &: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: var(--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 {
-      &.is-#{$name} {
-        background-color: getBGColor($name);
-      }
-    }
-
-  }
-}