tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support overriding media queries for deciding between single-column/multi-column layouts with a class

Browse Source
This commit is contained in:
Surinna Curtis
2017-06-24 13:18:54 -05:00
parent 8b23bf7cbd
commit a70468aa56
6 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1330,7 +1330,7 @@
position: relative;
}
@media screen and (min-width: 360px) {
@include multi-columns('screen and (min-width: 360px)', $parent: null) {
.columns-area {
padding: 10px;
}
@@ -1386,7 +1386,7 @@
}
}
@media screen and (min-width: 360px) {
@include multi-columns('screen and (min-width: 360px)', $parent: null) {
.tabs-bar {
margin: 10px;
margin-bottom: 0;
@@ -1397,7 +1397,7 @@
}
}
@media screen and (max-width: 1024px) {
@include single-column('screen and (max-width: 1024px)', $parent: null) {
.column,
.drawer {
width: 100%;
@@ -1414,7 +1414,7 @@
}
}
@media screen and (min-width: 1025px) {
@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
.columns-area {
padding: 0;
}
@@ -1540,7 +1540,7 @@
}
}
@media screen and (min-width: 600px) {
@include multi-columns('screen and (min-width: 600px)', $parent: null) {
.tabs-bar__link {
span {
display: inline;
@@ -1548,7 +1548,7 @@
}
}
@media screen and (min-width: 1025px) {
@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
.tabs-bar {
display: none;
}
@@ -1737,7 +1737,7 @@
}
&.hidden-on-mobile {
@media screen and (max-width: 1024px) {
@include single-column('screen and (max-width: 1024px)') {
display: none;
}
}
@@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet {
}
&.hidden-on-mobile {
@media screen and (max-width: 1024px) {
@include single-column('screen and (max-width: 1024px)') {
display: none;
}
}
@@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet {
}
}
@media screen and (max-width: 550px) {
@include single-column('screen and (max-width: 550px)', $parent: null) {
.onboarding-modal {
width: 100%;
height: 100%;
@@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet {
margin-right: 15px;
}
@media screen and (max-width: 400px) {
@include single-column('screen and (max-width: 400px)', $parent: null) {
.onboarding-modal__page-one {
flex-direction: column;
}
@@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet {
}
}
@media screen and (max-width: 320px) and (max-height: 600px) {
@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
.onboarding-modal__page p {
font-size: 14px;
line-height: 20px;