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 | |
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')
-rw-r--r-- | web-ui/app/scss/mixins/_position-helpers.scss | 9 | ||||
-rw-r--r-- | web-ui/app/scss/mixins/_tags.scss | 110 |
2 files changed, 119 insertions, 0 deletions
diff --git a/web-ui/app/scss/mixins/_position-helpers.scss b/web-ui/app/scss/mixins/_position-helpers.scss new file mode 100644 index 00000000..254bfc6c --- /dev/null +++ b/web-ui/app/scss/mixins/_position-helpers.scss @@ -0,0 +1,9 @@ +@mixin absolute-center-unknown-height-width() { + margin: auto; + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} diff --git a/web-ui/app/scss/mixins/_tags.scss b/web-ui/app/scss/mixins/_tags.scss new file mode 100644 index 00000000..9bb287ea --- /dev/null +++ b/web-ui/app/scss/mixins/_tags.scss @@ -0,0 +1,110 @@ +$tags-font-size: 0.6rem; + +@mixin tags { + & > * { + display: inline; + } + + &-tag { + font-size: $tags-font-size; + font-weight: 700; + background-color: $dark_blue; + color: white; + padding: 2px 4px; + margin: 0 1px; + border-radius: 2px; + } +} + +@mixin tags-editable { + @include tags; + + &-tag:hover { + text-decoration: line-through; + cursor: pointer; + position: relative; + + &:before { + @include tooltip(130%, 25%); + + content: "click to remove"; + text-transform: lowercase; + } + } + + &-label { + vertical-align: bottom; + color: $light_gray; + } + + &-new-button { + font-size: $tags-font-size; + padding: 0; + background: transparent; + border-radius: 2px; + padding: 2px; + + &:hover { + opacity: 1; + background: $lighter_gray; + } + } + + &-name-input { + opacity: 0.6; + transition: background-color 150ms ease-out; + + &:hover { + opacity: 1; + } + + // twitter typeahead classes. those are set via JS, with relatively high specificity, + // hence box-model-related properties are repeated + // https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names + + $suggestion-border: 1px solid darken($contrast, 5%); + $input-field-padding: 1px 5px; + $input-field-margin: 2px; + + & * .tt-input { + border-radius: $input-field-margin; + padding: $input-field-padding; + margin-top: 2px; + font-size: $tags-font-size; + } + + & * .tt-hint { + color: $medium_light_grey; + padding: $input-field-padding; + margin-top: $input-field-margin; + font-size: $tags-font-size; + background: transparent; + } + + & * .tt-dropdown-menu { + min-width: 250px; + padding: 0; + font-size: $tags-font-size; + background-color: $contrast; + border: $suggestion-border; + } + + & * .tt-suggestion { + padding: 5px 10px; + font-size: $tags-font-size; + border-bottom: $suggestion-border; + + &:last-child { + border-bottom: none; + } + + p { + margin: 0; + } + } + + & * .tt-cursor { + background-color: $white; + } + } +} |