add mixins
This commit is contained in:
parent
30fd46b213
commit
e23e8b5d4f
|
@ -0,0 +1,47 @@
|
|||
// box shadow for elements
|
||||
@mixin box-shadow($color: rgba(#000, 0.1)) {
|
||||
box-shadow: 1px 3px 4px 0 $color;
|
||||
}
|
||||
|
||||
// margin/padding vertical spacing mixins
|
||||
@mixin margin-t($amount) {
|
||||
margin-top: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin margin-b($amount) {
|
||||
margin-bottom: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin margin-v($top, $bottom: $top) {
|
||||
@include mt($top);
|
||||
@include mb($bottom);
|
||||
}
|
||||
|
||||
@mixin pad-t($amount) {
|
||||
padding-top: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin pad-b($amount) {
|
||||
padding-bottom: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin pad-l($amount) {
|
||||
padding-left: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin pad-r($amount) {
|
||||
padding-right: #{$amount * $line-height}rem;
|
||||
}
|
||||
|
||||
@mixin pad-v($top, $bottom: $top) {
|
||||
@include pt($top);
|
||||
@include pb($bottom);
|
||||
}
|
||||
|
||||
@mixin pad($amount-t, $amount-r: $amount-t, $amount-b: $amount-t, $amount-l: $amount-r) {
|
||||
padding: #{$amount-t * $line-height}rem
|
||||
#{$amount-r * $line-height}rem
|
||||
#{$amount-b * $line-height}rem
|
||||
#{$amount-l * $line-height}rem;
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import "reset";
|
||||
|
||||
@import "typography";
|
||||
@import "base";
|
||||
@import "layout";
|
||||
|
@ -35,3 +38,7 @@
|
|||
.a {
|
||||
@extend a;
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend button;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue