From 7601e15ab8bdada7030363ad5556fdb1ec4440bd Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Tue, 7 Jul 2015 15:00:07 +0200 Subject: [PATCH] refactor tooltips --- app/styles/app/layouts/settings.sass | 34 ++-------- app/styles/app/modules/switch.sass | 2 +- app/styles/app/modules/tooltips.sass | 93 +++++++++++++++----------- app/templates/components/env-var.hbs | 14 ++-- app/templates/components/jobs-list.hbs | 6 +- app/templates/components/ssh-key.hbs | 24 +++---- app/templates/jobs.hbs | 6 +- 7 files changed, 85 insertions(+), 94 deletions(-) diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index eaddbc9a..1f405acc 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -122,45 +122,21 @@ $input-main-height: 30px display: inline-block width: grid-calc(2, 24) float: right + text-align: center + + a + padding: 1em .icon-delete @extend %icon @extend .icon-delete - display: block width: 1.1em height: 1.3em - margin: .2em auto 0 &:hover .icon-delete @extend .icon-delete-hover - .tooltip - display: block -.tooltip - display: none - position: absolute - right: 0 - left: 0 - top: -2.7em - width: auto - margin: auto - padding: .2em .8em .3em - z-index: 5 - background-color: #818383 - border-radius: 4px - color: $white - white-space: nowrap - &:before - content: "" - position: absolute - bottom: -0.3em - left: 39% - width: 1em - height: 1em - transform: rotate(45deg) - z-index: -1 - background-color: #818383 .settings-sshkey display: block @@ -227,8 +203,6 @@ $input-main-height: 30px &:hover .icon-delete @extend .icon-delete-hover - .tooltip - display: block .form--envvar diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass index 07079dfe..22b6d73a 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -11,7 +11,7 @@ width: $switch-width height: $switch-height margin-right: 1em - padding: 3px 3px 3px 4px + padding: 2px 3px 3px 4px vertical-align: middle overflow: visible background-color: #E2E1E2 diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index db463507..f0a784a5 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -1,42 +1,59 @@ +%tooltip + &:hover + .tooltip-bubble + transform: translateY(0) + opacity: 1 -$tooltip-grey: #6A6C6D + .tooltip-bubble + position: absolute + top: -3.2em + width: auto + height: 1.9em + margin: auto + padding: .2em .8em .3em + z-index: 5 + background-color: #818383 + border-radius: 4px + color: $white + text-align: center + white-space: nowrap + + transition: all 100ms ease + transform: translateY(20%) + opacity: 0 + + &:before + content: "" + position: absolute + bottom: -0.3em + width: 1em + height: 1em + transform: rotate(45deg) + z-index: -1 + background-color: #818383 .tooltip + @extend %tooltip + .tooltip-bubble + right: 0 + left: 0 + &:before + left: 42% + +.tooltip--right + @extend %tooltip + .tooltip-bubble + right: -0.5em + &:before + left: 72% + +.tooltip--jobs + @extend %tooltip + display: inline-block position: relative - display: none - -.tooltip-inner - position: absolute - bottom: 0 - right: 0 - background: $tooltip-grey - color: $white - font-size: $font-size-small - line-height: 18px - text-align: center - padding: 8px 5px - @extend %border-radius-4px - - &:after - content: '' - position: absolute - top: 98% - right: 3em - width: 0 - height: 0 - border-top: 13px solid $tooltip-grey - border-right: 13px solid transparent - border-left: 13px solid transparent - - @media #{$small-only} - bottom: -2.5em - - @media #{$medium-up} - width: 18rem - -.tooltip-inner - height: 4.1em - top: -8em - left: 4em - &:after - left: 3.7em \ No newline at end of file + .tooltip-bubble + top: -4.5em + left: -2em + height: 3.7em + &:before + left: 15% diff --git a/app/templates/components/env-var.hbs b/app/templates/components/env-var.hbs index 4f8745fc..ef2d900e 100644 --- a/app/templates/components/env-var.hbs +++ b/app/templates/components/env-var.hbs @@ -4,10 +4,10 @@
- - -

- Delete -

- -
\ No newline at end of file +
+ + + +
Delete
+
+ diff --git a/app/templates/components/jobs-list.hbs b/app/templates/components/jobs-list.hbs index 13055aa8..5751f165 100644 --- a/app/templates/components/jobs-list.hbs +++ b/app/templates/components/jobs-list.hbs @@ -5,9 +5,9 @@

Build Jobs

{{else}}

Allowed Failures - -
-

These are jobs you can allow to fail without failing your entire build

+
+ +

These are jobs you can allow to fail
without failing your entire build

{{/if}} diff --git a/app/templates/components/ssh-key.hbs b/app/templates/components/ssh-key.hbs index cb3e6214..987ac2f4 100644 --- a/app/templates/components/ssh-key.hbs +++ b/app/templates/components/ssh-key.hbs @@ -8,12 +8,12 @@ e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a
- - -

- Delete -

- +
+ + + +
Delete
+
{{else}}
@@ -25,11 +25,11 @@ e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a
- - -

- Default keys cannot be deleted -

- +
+ + + +
Default keys cannot be deleted
+
{{/if}} diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs index 166d3252..32cd45db 100644 --- a/app/templates/jobs.hbs +++ b/app/templates/jobs.hbs @@ -5,9 +5,9 @@

Build Jobs

{{else}}

Allowed Failures - -
-

These are jobs are allowed to fail, without failing your entire build.

+
+ +

These are jobs are allowed to fail, without failing your entire build.

{{/if}}