diff --git a/src/components/layout-header.module.scss b/src/components/layout-header.module.scss index bbe0d6a7a..a0a102e04 100644 --- a/src/components/layout-header.module.scss +++ b/src/components/layout-header.module.scss @@ -50,13 +50,13 @@ $without-sidebar: '(max-width: 991px)'; } .searchForm { - @include with-gap; - display: flex; flex: 0 1 100%; position: relative; height: 32px; + @include with-gap; + .fullMode & { max-width: 380px; } @@ -155,14 +155,14 @@ $without-sidebar: '(max-width: 991px)'; } .activeElements { - @include with-gap; - display: flex; flex: 2; justify-content: flex-end; height: 40px; align-items: center; + @include with-gap; + .collapsibleMode & { flex: 0; } @@ -209,13 +209,12 @@ $without-sidebar: '(max-width: 991px)'; height: 32px; opacity: 0.4; transition: opacity 0.3s; + visibility: hidden; &:hover { opacity: 0.8; } - visibility: hidden; - .searchInputContainer:focus-within & { visibility: visible; } diff --git a/styles/helvetica/boxes.scss b/styles/helvetica/boxes.scss index 4628e0c7e..8e1318575 100644 --- a/styles/helvetica/boxes.scss +++ b/styles/helvetica/boxes.scss @@ -27,13 +27,12 @@ font-weight: 700; margin-bottom: rem(7px); margin-left: rem(10px); + padding-bottom: rem(2px); @media (max-width: 991px) { margin-left: 0; } - padding-bottom: rem(2px); - .sidelinks { float: right; font-size: rem(14px); @@ -59,12 +58,11 @@ .box-message { margin: 0 0 rem(5px) rem(10px); + padding: rem(5px) rem(10px); @media (max-width: 991px) { margin-left: 0; } - - padding: rem(5px) rem(10px); } // Sidebar Friend block header @@ -110,25 +108,23 @@ .content { .box-body { padding: 0 0 0 rem(11px); + background-color: #fff; + + @include clearfix; @media (max-width: 991px) { padding: 0; } - - background-color: #fff; - - @include clearfix; } .box-footer { padding: rem(5px) 0 rem(5px) rem(11px); + font-size: rem(11px); + background-color: #fff; @media (max-width: 991px) { padding: rem(15px) 0 0; } - - font-size: rem(11px); - background-color: #fff; } } diff --git a/styles/shared/comment-likes.scss b/styles/shared/comment-likes.scss index 694dc5b31..a48c96ebb 100644 --- a/styles/shared/comment-likes.scss +++ b/styles/shared/comment-likes.scss @@ -60,14 +60,13 @@ flex-basis: auto; margin-right: rem(2px); margin-top: rem(1px); + opacity: 0; + transition: opacity 0.2s; @media (min-width: 769px) { margin-right: rem(6px); } - opacity: 0; - transition: opacity 0.2s; - &.liked, &:focus-within { opacity: 1; @@ -114,6 +113,9 @@ text-align: right; cursor: pointer; margin-right: rem(2px); + font-size: rem(12px); + width: rem(7px); + color: #898989; @media (min-width: 769px) { margin-right: rem(6px); @@ -123,10 +125,6 @@ &:active { text-decoration: underline; } - - font-size: rem(12px); - width: rem(7px); - color: #898989; } &.has-my-like { diff --git a/styles/shared/notifications.scss b/styles/shared/notifications.scss index a86dd57af..675bfd56b 100644 --- a/styles/shared/notifications.scss +++ b/styles/shared/notifications.scss @@ -8,14 +8,13 @@ .filter { margin-left: 10px; + display: flex; + flex-wrap: wrap; @media (max-width: 991px) { margin-left: 0; } - display: flex; - flex-wrap: wrap; - & > * { margin-right: 10px; text-decoration: none; diff --git a/styles/shared/post.scss b/styles/shared/post.scss index c28924949..e0975279d 100644 --- a/styles/shared/post.scss +++ b/styles/shared/post.scss @@ -52,27 +52,25 @@ $post-line-height: rem(20px); .post-body { margin-left: 63px; + color: #666; + font-size: rem(14px); + line-height: rem(19px); @media (max-width: 767px) { margin-left: 0; } - color: #666; - font-size: rem(14px); - line-height: rem(19px); - .post-text { margin-bottom: rem(8px); word-wrap: break-word; + color: #000; + font-size: rem(16px); + line-height: $post-line-height; @media (max-width: 767px) { min-height: rem(31px); } - color: #000; - font-size: rem(16px); - line-height: $post-line-height; - &.modern { max-height: 5 * $post-line-height; overflow-y: hidden; @@ -446,12 +444,12 @@ code.inline-code { } .post-text { + font-size: rem(21px); + line-height: rem(26px); + @media (max-width: 767px) { min-height: 50px; } - - font-size: rem(21px); - line-height: rem(26px); } } } diff --git a/styles/shared/search-feed.scss b/styles/shared/search-feed.scss index aeccb7c2c..5a008b7ab 100644 --- a/styles/shared/search-feed.scss +++ b/styles/shared/search-feed.scss @@ -1,11 +1,11 @@ .search-memo { + background-color: #f2f2f2; + padding: 15px 10px; + @media (min-width: 992px) { margin-left: 10px; } - background-color: #f2f2f2; - padding: 15px 10px; - .search-memo-header { margin-bottom: 15px; font-size: 18px; diff --git a/styles/shared/search-form.scss b/styles/shared/search-form.scss index 0e36ca96a..25971af51 100644 --- a/styles/shared/search-form.scss +++ b/styles/shared/search-form.scss @@ -1,5 +1,8 @@ .search-form { margin-bottom: 15px; + float: right; + width: 100%; + display: flex; @media (max-width: 768px) { margin-top: 15px; @@ -9,10 +12,6 @@ margin: 28px 0 20px; } - float: right; - width: 100%; - display: flex; - .search-input { flex: 1; margin-top: 4px;