-
-
Save SaintG12468/4431eb3478d42f2623e0fe3ffe86f2e3 to your computer and use it in GitHub Desktop.
A collection of LESS mixins.
This file contains 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
// | |
// LESS Utility Mixins | |
// ------------------- | |
// Fill the parent element | |
.fill(@spacing: 0) { | |
position: absolute; | |
top: @spacing; bottom: @spacing; | |
left: @spacing; right: @spacing; | |
} | |
// Set all active states at once | |
.active(@rules) { | |
&:hover, | |
&:focus, | |
&:active, | |
&.active { | |
@rules(); | |
} | |
} | |
// Justify for responsive layout | |
// http://www.barrelny.com/blog/text-align-justify-and-rwd/ | |
.justify() { | |
text-align: justify; | |
&:after{ | |
content: ''; | |
display: inline-block; | |
width: 100%; | |
} | |
> * { | |
display: inline-block; | |
vertical-align: top; | |
text-align: left; | |
} | |
} | |
// Aspect ratio | |
// (Apply to container) | |
// http://www.mademyday.de/css-height-equals-width-with-pure-css.html | |
.aspect-ratio(@w, @h) { | |
@ratio: (@h / @w); | |
&:before { | |
content: ""; | |
display: block; | |
padding-top: (100% * @ratio); | |
} | |
> * { | |
.fill; | |
} | |
} | |
// Toggle font smoothing mode in Webkit & FF | |
.font-smoothing() { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.font-smoothing(reset) { | |
-webkit-font-smoothing: subpixel-antialiased; | |
-moz-osx-font-smoothing: auto; | |
} | |
// Disable default form input appearance in Webkit & FF | |
.appearance(@appearance: none) { | |
-webkit-appearance: @appearance; | |
-moz-appearance: @appearance; | |
appearance: @appearance; | |
} | |
// Combo width/height media queries | |
.screen-min(@size, @rules) { | |
@media (min-width: @size), (min-height: @size) { | |
@rules(); | |
} | |
} | |
.screen-max(@size, @rules) { | |
@media (max-width: @size), (max-height: @size) { | |
@rules(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment