Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
hint.css/src/hint-mixins.scss
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
46 lines (43 sloc)
1.23 KB
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
| // hint-mixins.scss | |
| // | |
| // Place to store common mixins. | |
| // Vendor prefixer mixin. | |
| @mixin vendor($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -moz-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| // Generates border-color rules for all possible positions | |
| @mixin arrow-border-color($color) { | |
| @each $position in top, bottom, left, right { | |
| @if $position == top or $position == bottom { | |
| // Loop further for classes like .top-left, bottom-right etc | |
| @each $xDir in left, right { | |
| #{if(&, "&", "")}.#{$hintPrefix}#{$position}-#{$xDir}:before { | |
| border-#{$position}-color: $color; | |
| } | |
| } | |
| } | |
| #{if(&, "&", "")}.#{$hintPrefix}#{$position}:before { | |
| border-#{$position}-color: $color; | |
| } | |
| } | |
| } | |
| // mixin to set margin on tooltip using translate transform | |
| // $property | |
| @mixin set-margin($property, $transitionDirection, $translateX: 0) { | |
| $value: unquote("#{$property}(#{$hintTransitionDistance * $transitionDirection})"); | |
| &:before { | |
| @include vendor('transform', $value); | |
| } | |
| &:after { | |
| @if $translateX != 0 { | |
| // For vertical tooltips, we need to animate in y-direction | |
| // retaining its x-transform. | |
| @include vendor('transform', translateX($translateX) $value); | |
| } | |
| @else { | |
| @include vendor('transform', $value); | |
| } | |
| } | |
| } |