diff options
author | Thibaut Girka <thib@sitedethib.com> | 2019-06-12 16:03:10 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2019-06-13 22:15:31 +0200 |
commit | b222d1ae268cdc7186326f90af3005b2515925f2 (patch) | |
tree | 17f91ff8bf5adc37d36ba3c979963e874932e4d1 /app/javascript/flavours/glitch/styles/components/index.scss | |
parent | 7fd8797d20a2170c80049b2dabb448cbf003b9f7 (diff) |
Fix and refactor SCSS
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/index.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 268 |
1 files changed, 4 insertions, 264 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 27caf32ac..0f187d9e9 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -597,201 +597,10 @@ margin-left: 5px; display: none; } -} - -@media screen and (min-width: 600px) { - .tabs-bar__link { - span { - display: inline; - } - } -} - -.columns-area--mobile { - flex-direction: column; - width: 100%; - margin: 0 auto; - - .column, - .drawer { - width: 100%; - height: 100%; - padding: 0; - } - - .autosuggest-textarea__textarea { - font-size: 16px; - } - - .search__input { - line-height: 18px; - font-size: 16px; - padding: 15px; - padding-right: 30px; - } - - .search__icon .fa { - top: 15px; - } - - @media screen and (min-width: 360px) { - padding: 10px 0; - } - - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; - - .media-gallery, - .video-player { - margin-top: 15px; - } - } - - .account__header__bar { - padding: 5px 10px; - } - - .navigation-bar, - .compose-form { - padding: 15px; - } - - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } - - .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; - - &__avatar { - left: 15px; - top: 17px; - } - - &__content { - padding-top: 5px; - } - - &__prepend { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__prepend-icon-wrapper { - left: -32px; - } - - .media-gallery, - &__action-bar, - .video-player { - margin-top: 10px; - } - } - - .account { - padding: 15px 10px; - - &__header__bio { - margin: 0 -10px; - } - } - - .notification { - &__message { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__favourite-icon-wrapper { - left: -32px; - } - - .status { - padding-top: 8px; - } - - .account { - padding-top: 8px; - } - - .account__avatar-wrapper { - margin-left: 17px; - margin-right: 15px; - } - } - } -} - -.floating-action-button { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - width: 3.9375rem; - height: 3.9375rem; - bottom: 1.3125rem; - right: 1.3125rem; - background: darken($ui-highlight-color, 3%); - color: $white; - border-radius: 50%; - font-size: 21px; - line-height: 21px; - text-decoration: none; - box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); - - &:hover, - &:focus, - &:active { - background: lighten($ui-highlight-color, 7%); - } -} - -@media screen and (min-width: 360px) { - .tabs-bar { - margin: 10px auto; - margin-bottom: 0; - width: 100%; - } - .react-swipeable-view-container .columns-area--mobile { - height: calc(100% - 20px) !important; - } - - .getting-started__wrapper, - .getting-started__trends, - .search { - margin-bottom: 10px; - } -} - -@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { - .columns-area__panels__pane--compositional { - display: none; - } -} - -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .floating-action-button, - .tabs-bar__link.optional { - display: none; - } - - .search-page .search { - display: none; - } -} - -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { - .columns-area__panels__pane--navigational { - display: none; - } -} - -@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { - .tabs-bar { - display: none; + span.icon { + margin-left: 0; + display: inline; } } @@ -817,76 +626,6 @@ border-color: darken($ui-base-color, 8%); } -.compose-panel { - width: 285px; - margin-top: 10px; - display: flex; - flex-direction: column; - height: calc(100% - 10px); - overflow-y: hidden; - - .search__input { - line-height: 18px; - font-size: 16px; - padding: 15px; - padding-right: 30px; - } - - .search__icon .fa { - top: 15px; - } - - .navigation-bar { - padding-top: 20px; - padding-bottom: 20px; - flex: 0 1 48px; - min-height: 20px; - } - - .flex-spacer { - background: transparent; - } - - .compose-form { - flex: 1; - overflow-y: hidden; - display: flex; - flex-direction: column; - min-height: 310px; - padding-bottom: 71px; - margin-bottom: -71px; - } - - .compose-form__autosuggest-wrapper { - overflow-y: auto; - background-color: $white; - border-radius: 4px 4px 0 0; - flex: 0 1 auto; - } - - .autosuggest-textarea__textarea { - overflow-y: hidden; - } - - .compose-form__upload-thumbnail { - height: 80px; - } -} - -.navigation-panel { - margin-top: 10px; - margin-bottom: 10px; - height: calc(100% - 20px); - overflow-y: auto; - - hr { - border: 0; - background: transparent; - border-top: 1px solid lighten($ui-base-color, 4%); - margin: 10px 0; - } -} - .scrollable { overflow-y: scroll; overflow-x: hidden; @@ -1657,3 +1396,4 @@ noscript { @import 'emoji_picker'; @import 'local_settings'; @import 'error_boundary'; +@import 'single_column'; |