Sticker Creator

sticker-creator/components/StickerPackPreview.scss

@@ -0,0 +1,126 @@
+@import '../mixins';
+@import '../../stylesheets/variables';
+
+@mixin background() {
+  @include light-theme() {
+    background: $color-white;
+  }
+
+  @include dark-theme() {
+    background: $color-gray-75;
+  }
+}
+
+.container {
+  position: relative;
+  width: 330px;
+  height: 270px;
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.2);
+  @include background();
+}
+
+.title-bar {
+  height: 27px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font: {
+    family: $inter;
+    size: 10.5px;
+    weight: 500;
+  }
+
+  @include background();
+
+  @include light-theme {
+    color: $color-gray-90;
+  }
+
+  @include dark-theme {
+    color: $color-gray-05;
+  }
+}
+
+.scroller {
+  height: calc(100% - 27px);
+  padding-bottom: 57px;
+  overflow: auto;
+}
+
+.grid {
+  display: grid;
+  grid-gap: 6px;
+  padding: 0 16px 0 12px;
+  grid-template-columns: repeat(4, 1fr);
+  overflow: auto;
+  justify-items: center;
+}
+
+.sticker {
+  width: 72px;
+  height: 72px;
+}
+
+.meta {
+  width: 306px;
+  height: 39px;
+  border-radius: 3px;
+  padding: 0 9px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+
+  @include light-theme {
+    background: $color-gray-05;
+  }
+
+  @include dark-theme {
+    background: $color-gray-60;
+  }
+}
+
+.text {
+  font-family: $inter;
+}
+
+.meta-title {
+  composes: text;
+  height: 15px;
+  line-height: 15px;
+  font: {
+    size: 12px;
+    weight: 500;
+  }
+
+  @include light-theme {
+    color: $color-gray-90;
+  }
+
+  @include dark-theme {
+    color: $color-gray-05;
+  }
+}
+
+.meta-author {
+  composes: text;
+  height: 14px;
+  line-height: 14px;
+  font: {
+    size: 10px;
+    weight: normal;
+  }
+
+  @include light-theme {
+    color: $color-gray-60;
+  }
+
+  @include dark-theme {
+    color: $color-gray-25;
+  }
+}