| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- .growi {
- %comment-section {
- position: relative;
- padding: 1em;
- // speech balloon
- &:before {
- position: absolute;
- top: 1.5em;
- left: -1em;
- display: block;
- width: 0;
- content: '';
- border: 1em solid transparent;
- border-left-width: 0;
- @include media-breakpoint-down(xs) {
- top: 1em;
- }
- }
- }
- %picture {
- float: left;
- width: 3em;
- height: 3em;
- margin-top: 0.8em;
- @include media-breakpoint-down(xs) {
- width: 2em;
- height: 2em;
- }
- }
- .page-comments {
- h4 {
- margin-bottom: 1em;
- }
- }
- .page-comment-writer {
- @include media-breakpoint-down(xs) {
- height: 3.5em;
- }
- }
- .page-comment {
- position: relative;
- padding-top: 70px;
- margin-top: -70px;
- // ユーザー名
- .page-comment-creator {
- margin-top: -0.5em;
- margin-bottom: 0.5em;
- font-weight: bold;
- }
- // ユーザーアイコン
- .picture {
- @extend %picture;
- }
- // コメントセクション
- .page-comment-main {
- @extend %comment-section;
- @include media-breakpoint-up(sm) {
- margin-left: 4.5em;
- }
- @include media-breakpoint-down(xs) {
- &:before {
- content: none;
- }
- }
- }
- // コメント本文
- .page-comment-body {
- margin-bottom: 0.5em;
- word-wrap: break-word;
- }
- }
- /*
- * reply
- */
- .page-comment-reply {
- margin-top: 1em;
- }
- // remove margin after hidden replies
- .page-comments-hidden-replies + .page-comment-reply {
- margin-top: 0;
- }
- // reply button
- .btn.btn-comment-reply {
- margin-top: 0.5em;
- border: none;
- }
- // display cheatsheet for comment form only
- .comment-form {
- .editor-cheatsheet {
- display: none;
- }
- position: relative;
- margin-top: 1em;
- // user icon
- .picture {
- @extend %picture;
- }
- // seciton
- .comment-form-main {
- @extend %comment-section;
- margin-left: 4.5em;
- @include media-breakpoint-down(xs) {
- margin-left: 3.5em;
- }
- }
- // textarea
- .comment-write {
- margin-bottom: 0.5em;
- }
- .comment-form-comment {
- height: 80px;
- &:focus,
- &:not(:invalid) {
- height: 180px;
- transition: height 0.2s ease-out;
- }
- }
- .comment-form-preview {
- padding-top: 0.5em;
- }
- }
- }
|