ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better style handling at small sizes

rebase/4.0.0rc2
kibigo! 2017-06-24 20:32:03 -07:00
parent 7427680e75
commit b8a5052d53
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/styles/_mixins.scss
View File

@ -22,6 +22,14 @@
} }
} }
@mixin limited-single-column($media, $parent: '&') {
.auto-columns #{$parent}, .single-column #{$parent} {
@media #{$media} {
@content;
}
}
}
@mixin multi-columns($media, $parent: '&') { @mixin multi-columns($media, $parent: '&') {
.auto-columns #{$parent} { .auto-columns #{$parent} {
@media #{$media} { @media #{$media} {

27
app/javascript/styles/components.scss
View File

@ -1328,11 +1328,12 @@
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
padding: 10px;
} }
@media screen and (min-width: 360px) { @include limited-single-column('screen and (max-width: 360px)', $parent: null) {
.columns-area { .columns-area {
padding: 10px; padding: 0;
} }
} }
@ -1386,14 +1387,13 @@
} }
} }
@media screen and (min-width: 360px) { @include limited-single-column('screen and (max-width: 360px)', $parent: null) {
.tabs-bar { .tabs-bar {
margin: 10px; margin: 0;
margin-bottom: 0;
} }
.search { .search {
margin-bottom: 10px; margin-bottom: 0;
} }
} }
@ -1518,6 +1518,8 @@
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
margin: 10px;
margin-bottom: 0;
} }
.tabs-bar__link { .tabs-bar__link {
@ -1545,7 +1547,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
@media screen and (min-width: 1025px) { @include multi-columns('screen and (min-width: 1025px)') {
background: lighten($ui-base-color, 14%); background: lighten($ui-base-color, 14%);
transition: all 100ms linear; transition: all 100ms linear;
} }
@ -1557,7 +1559,7 @@
} }
} }
@media screen and (min-width: 600px) { @include limited-single-column('screen and (max-width: 600px)', $parent: null) {
.tabs-bar__link { .tabs-bar__link {
span { span {
display: inline; display: inline;
@ -1798,7 +1800,7 @@
outline: 0; outline: 0;
} }
@media screen and (max-width: 600px) { @include limited-single-column('screen and (max-width: 600px)') {
font-size: 16px; font-size: 16px;
} }
} }
@ -1815,7 +1817,7 @@
padding-right: 10px + 22px; padding-right: 10px + 22px;
resize: none; resize: none;
@media screen and (max-width: 600px) { @include limited-single-column('screen and (max-width: 600px)') {
height: 100px !important; // prevent auto-resize textarea height: 100px !important; // prevent auto-resize textarea
resize: vertical; resize: vertical;
} }
@ -1928,7 +1930,7 @@
border-bottom-color: $ui-highlight-color; border-bottom-color: $ui-highlight-color;
} }
@media screen and (max-width: 600px) { @include limited-single-column('screen and (max-width: 600px)') {
font-size: 16px; font-size: 16px;
} }
} }
@ -2889,6 +2891,7 @@ button.icon-button.active i.fa-retweet {
.search { .search {
position: relative; position: relative;
margin-bottom: 10px;
} }
.search__input { .search__input {
@ -2921,7 +2924,7 @@ button.icon-button.active i.fa-retweet {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @include limited-single-column('screen and (max-width: 600px)') {
font-size: 16px; font-size: 16px;
} }
} }