diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2017-09-04 12:13:58 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-09-04 12:13:58 +0000 |
commit | e7bc0d7c2064ec53805c17cbd150b1e348a865be (patch) | |
tree | 605f952d87202af8be70dcb0bc88d2eb477aab56 /app/assets/stylesheets/framework/feature_highlight.scss | |
parent | 970af9964ea9404942818d8c3394d2903955ed69 (diff) | |
download | gitlab-ce-e7bc0d7c2064ec53805c17cbd150b1e348a865be.tar.gz |
Add feature highlight to Issue Boards in new navigation sidebar
Diffstat (limited to 'app/assets/stylesheets/framework/feature_highlight.scss')
-rw-r--r-- | app/assets/stylesheets/framework/feature_highlight.scss | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss new file mode 100644 index 00000000000..ebae473df50 --- /dev/null +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -0,0 +1,94 @@ +.feature-highlight { + position: relative; + margin-left: $gl-padding; + width: 20px; + height: 20px; + cursor: pointer; + + &::before { + content: ''; + display: block; + position: absolute; + top: 6px; + left: 6px; + width: 8px; + height: 8px; + background-color: $blue-500; + border-radius: 50%; + box-shadow: 0 0 0 rgba($blue-500, 0.4); + animation: pulse-highlight 2s infinite; + } + + &:hover::before, + &.disable-animation::before { + animation: none; + } + + &[disabled]::before { + display: none; + } +} + +.is-showing-fly-out { + .feature-highlight { + display: none; + } +} + +.feature-highlight-popover-content { + display: none; + + hr { + margin: $gl-padding * 0.5 0; + } + + .btn-link { + @include btn-svg; + + svg path { + fill: currentColor; + } + } + + .dismiss-feature-highlight { + padding: 0; + } + + svg:first-child { + width: 100%; + background-color: $indigo-50; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom: 1px solid darken($gray-normal, 8%); + } +} + +.popover .feature-highlight-popover-content { + display: block; +} + +.feature-highlight-popover { + padding: 0; + + .popover-content { + padding: 0; + } +} + +.feature-highlight-popover-sub-content { + padding: 9px 14px; +} + +@include keyframes(pulse-highlight) { + 0% { + box-shadow: 0 0 0 0 rgba($blue-200, 0.4); + } + + 70% { + box-shadow: 0 0 0 10px transparent; + } + + 100% { + box-shadow: 0 0 0 0 transparent; + } +} |