diff options
author | Roald de Vries <rdevries@thoughtworks.com> | 2016-12-08 16:59:09 +0100 |
---|---|---|
committer | Roald de Vries <rdevries@thoughtworks.com> | 2016-12-08 16:59:09 +0100 |
commit | fafac3b4128a0993b0de1c6e8ca3062bf1ccc14e (patch) | |
tree | 3b9a446e4c82bb8ba94c1cd0adec57c0042dae28 /web-ui/app/scss/_mixins.scss | |
parent | 521bce7eff5cf921156efe74c91a0499ade43619 (diff) |
Revert "[#801] Merge branch 'signup'"
This reverts commit d10f607a4d40587510b0dc31b31fe4750bf4a3a3, reversing
changes made to c28abba2f5b1186c671ebef508d40ffaae6d5bc5.
Diffstat (limited to 'web-ui/app/scss/_mixins.scss')
-rw-r--r-- | web-ui/app/scss/_mixins.scss | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss new file mode 100644 index 00000000..d3aa0220 --- /dev/null +++ b/web-ui/app/scss/_mixins.scss @@ -0,0 +1,71 @@ +// SHARED MIXINS +@mixin btn-transition { + @include transition-property(background-color); + @include transition-duration(300ms); + @include transition-timing-function(ease-out); +} + +@mixin tooltip($top: 8px, $left: 40px) { + background: rgba(0, 0, 0, 0.7); + color: $white; + position: absolute; + z-index: 2; + left: $left; + top: $top; + font-size: 0.8rem; + padding: 2px 10px; + white-space: nowrap; + @include border-radius(2px); +} + +// FORM MIXINS +@mixin check-box { + background-color: $white; + border: 1px solid $light_gray; + padding: 7px; + margin: 3px 0; + cursor: pointer; + display: inline-block; + position: relative; + @include border-radius(2px); + @include appearance(none); + + &:focus { + outline: none; + border-color: $medium_dark_grey; + } + + &:active, &:checked:active { + } + + &:checked { + background-color: $contrast; + border: 1px solid darken($lighter_gray, 10%); + color: $dark_grey; + } + + &:checked:after { + content: '\2714'; + font-size: 1em; + position: absolute; + bottom: -2px; + left: 1px; + color: $navigation_background; + } +} + + +@mixin searching($top, $left, $color, $size){ + &.searching { + &:after { + font-family: FontAwesome; + content: "\f002"; + font-size: $size; + top: $top; + left: $left; + position: absolute; + color: $color; + text-shadow: -1px 0 $contrast, 0 1px $contrast, 1px 0 $contrast, 0 -1px $contrast; + } + } +} |