Last active
August 29, 2015 14:01
-
-
Save lyzadanger/6cab649a48b6d6913b03 to your computer and use it in GitHub Desktop.
Jacket + Custom MQ-handling Mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$breakpoints: ( | |
'small' : 'screen and ( max-width: 479px )', | |
'large' : 'screen and ( min-width: 480px )' | |
); | |
@mixin opacity($amount) { | |
$perc: $amount * 100; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $perc + ")"; | |
/* IE 5-7 */ | |
filter: alpha(opacity=$perc); | |
/* Netscape */ | |
-moz-opacity: $amount; | |
/* Safari 1.x */ | |
-khtml-opacity: $amount; | |
/* Good browsers */ | |
opacity: $amount; | |
} | |
@mixin respond-to($name, $wrap: mq) { | |
// If we're inside of a context where there are no media queries | |
@include jacket(noqueries) { | |
// If $wrap is set to naked, include this content unwrapped no matter | |
// what else the context is | |
@if $wrap == naked { | |
@content; | |
} @else { | |
// Include this unwrapped if we are also in the $name context | |
@include jacket($name) { | |
@content; | |
} | |
} | |
} | |
@include jacket(queries) { | |
// If we're in a context that does want MQs | |
@if map-has-key($breakpoints, $name) { | |
// Prints a media query based on the value | |
@media #{map-get($breakpoints, $name)} { | |
@content; | |
} | |
} | |
// If the key doesn't exist in the map | |
@else { | |
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " | |
+ "Please make sure it is defined in `$breakpoints` map."; | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* line 1, ../sass/_button-group.scss */ | |
body { | |
margin: 2em; | |
} | |
/* line 5, ../sass/_button-group.scss */ | |
.button { | |
background-color: #007dc6; | |
border-radius: 0.25em; | |
box-sizing: border-box; | |
color: #fff; | |
display: inline-block; | |
line-height: 1; | |
padding: 0.6em 1em; | |
text-decoration: none; | |
transition: opacity 250ms ease-in-out; | |
} | |
/* line 16, ../sass/_button-group.scss */ | |
.button:hover, .button:focus { | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; | |
/* IE 5-7 */ | |
filter: alpha(opacity=75); | |
/* Netscape */ | |
-moz-opacity: 0.75; | |
/* Safari 1.x */ | |
-khtml-opacity: 0.75; | |
/* Good browsers */ | |
opacity: 0.75; | |
} | |
/* line 22, ../sass/_button-group.scss */ | |
.button-group { | |
list-style: none none; | |
margin: 0; | |
padding: 0; | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
} | |
/* line 27, ../sass/_button-group.scss */ | |
.button-group .button { | |
display: block; | |
text-align: center; | |
width: 100%; | |
} | |
/* line 32, ../sass/_button-group.scss */ | |
.button-group .button:hover, .button-group .button:focus { | |
z-index: 2; | |
} | |
/* line 55, ../sass/_button-group.scss */ | |
.button-group li { | |
display: table-cell; | |
} | |
/* line 59, ../sass/_button-group.scss */ | |
.button-group li:not(:first-child) .button { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
} | |
/* line 64, ../sass/_button-group.scss */ | |
.button-group li:not(:last-child) .button { | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'jacket'; | |
@import 'mixins'; | |
$jacket: noqueries, ie; | |
@import 'button-group'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* line 1, ../sass/_button-group.scss */ | |
body { | |
margin: 2em; | |
} | |
/* line 5, ../sass/_button-group.scss */ | |
.button { | |
background-color: #007dc6; | |
border-radius: 0.25em; | |
box-sizing: border-box; | |
color: #fff; | |
display: inline-block; | |
line-height: 1; | |
padding: 0.6em 1em; | |
text-decoration: none; | |
transition: opacity 250ms ease-in-out; | |
} | |
/* line 16, ../sass/_button-group.scss */ | |
.button:hover, .button:focus { | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; | |
/* IE 5-7 */ | |
filter: alpha(opacity=75); | |
/* Netscape */ | |
-moz-opacity: 0.75; | |
/* Safari 1.x */ | |
-khtml-opacity: 0.75; | |
/* Good browsers */ | |
opacity: 0.75; | |
} | |
/* line 22, ../sass/_button-group.scss */ | |
.button-group { | |
list-style: none none; | |
margin: 0; | |
padding: 0; | |
} | |
/* line 27, ../sass/_button-group.scss */ | |
.button-group .button { | |
display: block; | |
text-align: center; | |
width: 100%; | |
} | |
/* line 32, ../sass/_button-group.scss */ | |
.button-group .button:hover, .button-group .button:focus { | |
z-index: 2; | |
} | |
@media screen and (max-width: 479px) { | |
/* line 39, ../sass/_button-group.scss */ | |
.button-group li:not(:first-child) .button { | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
} | |
/* line 44, ../sass/_button-group.scss */ | |
.button-group li:not(:last-child) .button { | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
} | |
} | |
@media screen and (min-width: 480px) { | |
/* line 22, ../sass/_button-group.scss */ | |
.button-group { | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
} | |
/* line 55, ../sass/_button-group.scss */ | |
.button-group li { | |
display: table-cell; | |
} | |
/* line 59, ../sass/_button-group.scss */ | |
.button-group li:not(:first-child) .button { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
} | |
/* line 64, ../sass/_button-group.scss */ | |
.button-group li:not(:last-child) .button { | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'jacket'; | |
@import 'mixins'; | |
$jacket: queries; | |
@import 'button-group'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The
screen.css
andie.css
are the output. The gist reordered my files alphabetically :).