fixed style files module names

2025-04-26 13:26:40 +07:00 · 2020-11-06 12:15:07 +07:00 · 2020-11-06 12:15:07 +07:00 · 2daa38ad12
commit 2daa38ad12
parent 52acdb283e
223 changed files with 113 additions and 114 deletions
--- a/src/components/node/CommentContent/styles.module.scss
+++ b/src/components/node/CommentContent/styles.module.scss
@ -0,0 +1,145 @@
+@import 'flexbin/flexbin.scss';
+
+.wrap {
+  position: relative;
+}
+
+.lock,
+.edit {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: $radius;
+  transform: translate(10px, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.25s, transform 0.25s;
+  cursor: pointer;
+  background: $red;
+  z-index: 2;
+
+  & > div {
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  @include tablet {
+    right: 0;
+    border-radius: 0 0 0 $radius;
+    opacity: 1;
+    transform: translate(0, 0);
+    background: transparentize($red, $amount: 0.5);
+  }
+}
+
+.edit {
+  top: 28px;
+  background: blue;
+}
+
+.block {
+  @include outer_shadow();
+  min-height: $comment_height;
+  // box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
+  padding-bottom: 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+  // padding: $gap 0;
+
+  &:first-child {
+    border-top-right-radius: $radius;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: $radius;
+  }
+
+  &:hover {
+    .lock,
+    .edit {
+      opacity: 1;
+      pointer-events: all;
+      touch-action: initial;
+      transform: translate(0, 0);
+    }
+  }
+}
+
+.block_audio {
+  align-items: stretch;
+  justify-content: center;
+  padding-bottom: 0 !important;
+}
+
+.block_image {
+  padding-bottom: 0 !important;
+
+  .date {
+    background: transparentize($color: $content_bg, $amount: 0.2);
+    border-radius: $radius 0 $radius 0;
+    color: transparentize(white, 0.2);
+  }
+}
+
+.block_text {
+  padding: $gap / 2 0;
+}
+
+.date {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: $font_12_regular;
+  color: transparentize($color: white, $amount: 0.8);
+  padding: 0 6px 2px;
+  border-radius: 0 0 $radius 0;
+  z-index: 2;
+  background: $comment_bg;
+  border-radius: 4px;
+  pointer-events: none;
+  touch-action: none;
+}
+
+.images {
+  @include flexbin(240px, 5px);
+
+  img {
+    border-radius: $radius;
+  }
+}
+
+.audios {
+  & > div {
+    height: $comment_height;
+    border-radius: $radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.renderers {
+  width: 100%;
+  margin: 0 !important;
+}