Sticker Creator

sticker-creator/components/StickerFrame.scss

@@ -0,0 +1,140 @@
+@import '../mixins';
+@import '../../stylesheets/variables';
+
+$width: 186px;
+$height: 186px;
+$guide-offset: 6px;
+$border-width: 1px;
+
+.container {
+  position: relative;
+  width: $width;
+  height: $height;
+  border: {
+    radius: 4px;
+    width: $border-width;
+    style: solid;
+  }
+  overflow: hidden;
+  user-select: none;
+
+  @include light-theme() {
+    border-color: $color-gray-25;
+    background: $color-white;
+  }
+
+  @include dark-theme() {
+    border-color: $color-gray-60;
+    background: $color-gray-90;
+  }
+}
+
+.dragActive {
+  composes: container;
+
+  @include light-theme() {
+    border-color: $color-signal-blue;
+  }
+
+  @include dark-theme() {
+    border-color: $color-signal-blue;
+  }
+}
+
+.image {
+  width: $width;
+  height: $height;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  composes: image;
+  animation: spin 1s linear infinite;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include light-theme() {
+    color: $color-gray-25;
+  }
+
+  @include dark-theme() {
+    color: $color-gray-60;
+  }
+}
+
+.guide {
+  width: $width - (2 * $guide-offset);
+  height: $height - (2 * $guide-offset);
+  position: absolute;
+  left: $guide-offset - $border-width;
+  top: $guide-offset - $border-width;
+  border: {
+    radius: 0px;
+    width: $border-width;
+    style: dashed;
+  }
+  pointer-events: none;
+
+  @include light-theme() {
+    border-color: $color-gray-25;
+  }
+
+  @include dark-theme() {
+    border-color: $color-gray-60;
+  }
+}
+
+.close-button {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 8px;
+  right: 8px;
+  font-family: $inter;
+  border: none;
+  background: none;
+  padding: 0;
+
+  &-icon {
+    @include light-theme() {
+      color: $color-black;
+    }
+    @include dark-theme() {
+      color: $color-white;
+    }
+  }
+}
+
+.emoji-button {
+  width: 41px;
+  height: 28px;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  border: none;
+  border-radius: 13.5px;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  @include light-theme() {
+    background-color: $color-gray-05;
+    color: $color-gray-90;
+  }
+
+  @include dark-theme() {
+    background-color: $color-gray-75;
+    color: rgba(255, 255, 255, 0.75);
+  }
+}