treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Better style handling at small sizes

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
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: '&') {
.auto-columns #{$parent} {
@media #{$media} {

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

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