|
@@ -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;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// コメント入力フォーム
|
|
// コメント入力フォーム
|