Yuki Takei 9 лет назад
Родитель
Сommit
a13fe19877
1 измененных файлов с 31 добавлено и 49 удалено
  1. 31 49
      resource/css/_comment_crowi-plus.scss

+ 31 - 49
resource/css/_comment_crowi-plus.scss

@@ -1,5 +1,32 @@
 .crowi-plus.main-container  {
 .crowi-plus.main-container  {
 
 
+  %comment-section {
+    background: #f5f5f5;
+      padding: 1em;
+      position: relative;
+      margin-left: 4.5em;
+      margin-bottom: 1em;
+      border-radius: 3px;
+      &:before {
+        border: 1em solid transparent;
+        border-right-color:#f5f5f5;
+        border-left-width: 0;
+        left: -1em;
+        content: "";
+        display: block;
+        top: 1.5em;
+        position: absolute;
+        width: 0;
+      }
+  }
+
+  %picture-rounded {
+    position: absolute;
+    top: 1em;
+    width: 3em;
+    height: 3em;
+  }
+
   .page-comments-row {
   .page-comments-row {
     border-top: 5px solid #f0f0f0;
     border-top: 5px solid #f0f0f0;
     margin: 30px 16px;
     margin: 30px 16px;
@@ -16,31 +43,12 @@
 
 
     // ユーザーアイコン
     // ユーザーアイコン
     .picture.picture-rounded {
     .picture.picture-rounded {
-      position: absolute;
-      top: 1em;
-      width: 3em;
-      height: 3em;
+      @extend %picture-rounded;
     }
     }
 
 
     // コメントセクション
     // コメントセクション
     .page-comment-main {
     .page-comment-main {
-      background: #f5f5f5;
-      padding: 1em;
-      position: relative;
-      margin-left: 4.5em;
-      margin-bottom: 1em;
-      border-radius: 3px;
-      &:before {
-        border: 1em solid transparent;
-        border-right-color:#f5f5f5;
-        border-left-width: 0;
-        left: -1em;
-        content: "";
-        display: block;
-        top: 1.5em;
-        position: absolute;
-        width: 0;
-      }
+      @extend %comment-section;
     }
     }
 
 
     // コメント本文
     // コメント本文
@@ -59,38 +67,12 @@
     margin-top: 2em;
     margin-top: 2em;
     // ユーザーアイコン
     // ユーザーアイコン
     .picture.picture-rounded {
     .picture.picture-rounded {
-      position: absolute;
-      top: 1em;
-      width: 3em;
-      height: 3em;
+      @extend %picture-rounded;
     }
     }
 
 
     // コメントフォームセクション
     // コメントフォームセクション
     .comment-form-main {
     .comment-form-main {
-      margin-left: 4.5em;
-      margin-bottom: 1em;
-      background: #f5f5f5;
-      padding: 1em;
-      position: relative;
-      border-radius: 3px;
-      &:before {
-        border: 2em solid transparent;
-        border-right-color:#f5f5f5;
-        border-left-width: 0;
-        left: -1em;
-        content: "";
-        display: block;
-        top: 0.5em;
-        position: absolute;
-        width: 0;
-      }
-    }
-
-    // コメントの吹き出しアイコン
-    .comment-ico {
-      font-size: 1.2em;
-      margin-right: 0.3em;
-      opacity: 0.6;
+      @extend %comment-section;
     }
     }
 
 
     // コメント入力フォーム
     // コメント入力フォーム