Last active
January 5, 2018 12:40
-
-
Save iamnnort/7d943c46fe648e8bb37860cd7bb5b524 to your computer and use it in GitHub Desktop.
CSS: 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
@mixin close($color, $size: 30px) { | |
position: relative; | |
display: inline-block; | |
width: $size; | |
height: $size; | |
border: 0; | |
background: none; | |
opacity: 0.5; | |
&:after, | |
&:before { | |
background-color: $color; | |
position: absolute; | |
display: block; | |
top: 0; | |
left: $size / 2; | |
content: ' '; | |
height: $size; | |
width: 2px; | |
} | |
&:before { | |
transform: rotate(45deg); | |
} | |
&:after { | |
transform: rotate(-45deg); | |
} | |
&:hover { | |
opacity: 1; | |
} | |
} |
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
@mixin icon($icon-name, $size: 14px, $color: text-white) { | |
font-size: $size; | |
color: $color; | |
content: $icon-name; | |
display: block; | |
font-family: 'icomoon'; | |
font-weight: normal; | |
} |
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
@mixin triangle($dir, $size, $color) { | |
display: block; | |
width: 0; | |
height: 0; | |
content: ''; | |
@if $dir == up { | |
border-left: $size solid transparent; | |
border-right: $size solid transparent; | |
border-bottom: $size solid $color; | |
} @else if $dir == right { | |
border-top: $size solid transparent; | |
border-bottom: $size solid transparent; | |
border-left: $size solid $color; | |
} @else if $dir == down { | |
border-left: $size solid transparent; | |
border-right: $size solid transparent; | |
border-top: $size solid $color; | |
} @else { | |
border-top: $size solid transparent; | |
border-bottom: $size solid transparent; | |
border-right:$size solid $color; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment