iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(aio): move media queries to mixin

This commit is contained in:
Stefanie Fluin 2017-03-27 11:41:55 -07:00 committed by Igor Minar
parent 3ccbe28d9f
commit 330b1090f4
3 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
aio/src/styles/1-layouts/_search-results.scss
View File

@ -7,7 +7,7 @@ aio-search-results {
display: flex;
flex-direction: row;
overflow: scroll;
padding: 80px 20px 20px;
padding-top: 50px;
color: $offwhite;
width: 100%;
max-height: 40%;
@ -17,6 +17,7 @@ aio-search-results {
left: 0;
right: 0;
background-color: $darkgray;
border: 24px solid $darkgray;
}
.search-area {
@ -40,4 +41,8 @@ aio-search-results {
text-decoration: none;
}
}
@include bp(tiny) {
width: 100%;
}
}

43
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -1,46 +1,3 @@
/************************************
Media queries
To use these, put this snippet in the approriate selector:
@include bp(tiny) {
background-color: purple;
}
Replace "tiny" with "medium" or "big" as necessary.
*************************************/
@mixin bp($point) {
$bp-xsmall: "(min-width: 320px)";
$bp-teeny: "(min-width: 480px)";
$bp-tiny: "(min-width: 600px)";
$bp-small: "(min-width: 650px)";
$bp-medium: "(min-width: 800px)";
$bp-big: "(min-width: 1000px)";
@if $point == big {
@media #{$bp-big} { @content; }
}
@else if $point == medium {
@media #{$bp-medium} { @content; }
}
@else if $point == small {
@media #{$bp-small} { @content; }
}
@else if $point == tiny {
@media #{$bp-tiny} { @content; }
}
@else if $point == teeny {
@media #{$bp-teeny} { @content; }
}
@else if $point == xsmall {
@media #{$bp-xsmall} { @content; }
}
}
/************************************/
/** STEF: HELP WITH LOGO SPACING **/
.nav-link.home {
margin: 0 20px 0 10px;

42
aio/src/styles/_mixins.scss
View File

@ -1,3 +1,45 @@
/************************************
Media queries
To use these, put this snippet in the approriate selector:
@include bp(tiny) {
background-color: purple;
}
Replace "tiny" with "medium" or "big" as necessary.
*************************************/
@mixin bp($point) {
$bp-xsmall: "(min-width: 320px)";
$bp-teeny: "(min-width: 480px)";
$bp-tiny: "(min-width: 600px)";
$bp-small: "(min-width: 650px)";
$bp-medium: "(min-width: 800px)";
$bp-big: "(min-width: 1000px)";
@if $point == big {
@media #{$bp-big} { @content; }
}
@else if $point == medium {
@media #{$bp-medium} { @content; }
}
@else if $point == small {
@media #{$bp-small} { @content; }
}
@else if $point == tiny {
@media #{$bp-tiny} { @content; }
}
@else if $point == teeny {
@media #{$bp-teeny} { @content; }
}
@else if $point == xsmall {
@media #{$bp-xsmall} { @content; }
}
}
@mixin rotate($degrees) {
-moz-transform: rotate($degrees);
-webkit-transform: rotate($degrees);