Change folders

Author: coderitual

src/components/card/Card.chromatic.stories.tsx renamed to src/components/card-legacy/Card.chromatic.stories.tsx

@@ -0,0 +1,153 @@
+@use 'sass:math';
+$cardBorderColor: $gray-40;
+$cardBorderSize: 1px;
+$cardShadow: $shadowSmall;
+
+$includeHtml: false !default;
+
+@if ($includeHtml) {
+  .sg-card {
+    @include component();
+    display: inline-flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    border-radius: var(--border-radius-xs);
+    border: $cardBorderColor solid $cardBorderSize;
+    overflow: hidden;
+    background-color: $white;
+
+    &--transparent {
+      background-color: transparent;
+    }
+
+    &--full {
+      width: 100%;
+
+      .sg-card__hole {
+        width: 100%;
+      }
+    }
+
+    &--vertical {
+      flex-direction: row;
+
+      .sg-card__hole {
+        align-self: stretch;
+        flex: 1;
+      }
+    }
+
+    &--with-shadow {
+      box-shadow: $cardShadow;
+    }
+
+    &--no-border {
+      border: none;
+    }
+
+    &--centered {
+      .sg-card__hole {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    &--padding-small {
+      .sg-card__hole {
+        padding: gutter(math.div(2, 3));
+      }
+    }
+
+    &--padding-normal {
+      .sg-card__hole {
+        padding: gutter(1);
+      }
+    }
+
+    &--padding-large {
+      .sg-card__hole {
+        padding: gutter(math.div(4, 3));
+      }
+    }
+
+    &--padding-xlarge {
+      .sg-card__hole {
+        padding: gutter(math.div(8, 3));
+      }
+    }
+
+    &__hole {
+      width: 100%;
+
+      &--blue-40 {
+        background-color: $blue-40;
+      }
+
+      &--blue-30 {
+        background-color: $blue-30;
+      }
+
+      &--blue-20 {
+        background-color: $blue-20;
+      }
+
+      &--indigo-40 {
+        background-color: $indigo-40;
+      }
+
+      &--indigo-30 {
+        background-color: $indigo-30;
+      }
+
+      &--indigo-20 {
+        background-color: $indigo-20;
+      }
+
+      &--green-40 {
+        background-color: $green-40;
+      }
+
+      &--green-30 {
+        background-color: $green-30;
+      }
+
+      &--green-20 {
+        background-color: $green-20;
+      }
+
+      &--yellow-40 {
+        background-color: $yellow-40;
+      }
+
+      &--yellow-30 {
+        background-color: $yellow-30;
+      }
+
+      &--yellow-20 {
+        background-color: $yellow-20;
+      }
+
+      &--gray-70 {
+        background-color: $gray-70;
+      }
+
+      &--gray-50 {
+        background-color: $gray-50;
+      }
+
+      &--gray-40 {
+        background-color: $gray-40;
+      }
+
+      &--gray-20 {
+        background-color: $gray-20;
+      }
+
+      &--gray-10 {
+        background-color: $gray-10;
+      }
+    }
+  }
+}