summaryrefslogtreecommitdiff
path: root/web-ui/app/scss/_mixins.scss
diff options
context:
space:
mode:
authorRoald de Vries <rdevries@thoughtworks.com>2016-12-08 16:59:09 +0100
committerRoald de Vries <rdevries@thoughtworks.com>2016-12-08 16:59:09 +0100
commitfafac3b4128a0993b0de1c6e8ca3062bf1ccc14e (patch)
tree3b9a446e4c82bb8ba94c1cd0adec57c0042dae28 /web-ui/app/scss/_mixins.scss
parent521bce7eff5cf921156efe74c91a0499ade43619 (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.scss71
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;
+ }
+ }
+}