From 6040d5e26f3d43dffdd5426bdae1f4be6f5060c2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 26 Feb 2016 12:58:18 +0100 Subject: [PATCH 1/3] add first tooltips --- src/scss/cdb-components/tooltips.scss | 85 +++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/scss/cdb-components/tooltips.scss diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/tooltips.scss new file mode 100644 index 0000000..e60bf53 --- /dev/null +++ b/src/scss/cdb-components/tooltips.scss @@ -0,0 +1,85 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Tooltips + +``` +
+
+

627K Transactions

+
+
+ +
+
+
+
+ +
+
+

Hello I am a Form error

+
+
+ +
+
+
+
+ +
+
+

627K Transactions

+
+
+ +
+
+
+
+ +
+
+

Hello I am a Form error

+
+
+ + + + +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + + +.CDB-Tooltip { + position: absolute; + padding: 8px; + border-radius: 4px; + background: rgba($cMainBg, 0.8); + color: $cWhite; +} + +.CDB-Tooltip:before { + display: block; + position: absolute; + top: -12px; + left: calc(50% - 6px); + width: 0; + height: 0; + border: 6px solid transparent; + border-bottom: 6px solid rgba($cMainBg, 0.8); + content: ''; +} + +.CDB-Tooltip.is-error { + background: $cError; +} + +.CDB-Tooltip.is-error:before { + border-bottom: 6px solid $cError; +} + + From aa922b2886804ae8bf33ac93c77fe945dd6d23b8 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 29 Feb 2016 18:31:11 +0100 Subject: [PATCH 2/3] add tooltips --- src/fonts/cartoIcon.eot | Bin 19808 -> 19808 bytes src/fonts/cartoIcon.ttf | Bin 19636 -> 19636 bytes src/fonts/cartoIcon.woff | Bin 12424 -> 12424 bytes src/scss/cdb-components/tooltips.scss | 149 ++++++++++++++++++-------- 4 files changed, 106 insertions(+), 43 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 60395bd08a68c4496daaa89d8aa47d87a534b833..0b1791b04110ae5e1b3b26feca9e3113cfa77e32 100644 GIT binary patch delta 55 zcmaDbi}ArM#tAmeYabd-v|q>ksK{^PhpEy=57)-?+k9o8-{va=H{&k`Ah`5PViSzs_~n2%0J?Az*#H0l delta 47 wcmdlolX1&T#tDwhH{Va1=rUE>`MGL5zs*+$ZpL2>Kyc~n^$-}n@yh{k0MGan*Z=?k diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 7fe2d582efed965bf69847de33b3cc5a29321986..7a09d7083d93be0243a131e181ea8999ce53af85 100644 GIT binary patch delta 61 zcmV-D0K)%>VTfUnc?05dPO*H-C@I4&N8|ZzzA|t#{sM|HT>2%k2}Zvu|NosUg7FWK T%fY||5(NN#>JDVTfUnc>~$+lCgZsC@H61w( -
-

627K Transactions

+
+
+

627K Transactions

-
-
-
-
- -
-
-

Hello I am a Form error

+
+
+

627K Transactions

-
-
-
-
- -
-
-

627K Transactions

+
+
+

627K Transactions

-
-
-
-
- -
-
-

Hello I am a Form error

+
+
+

627K Transactions

+
+
+

627K Transactions

+
+
+ +
+
+

627K Transactions

+
+
+ + +
+
+

627K Transactions

+
+
+ +
+
+

627K Transactions

+
+
``` */ -@import '../cdb-variables/sizes'; +@import '../cdb-utilities/mixins'; @import '../cdb-variables/colors'; +@import '../cdb-variables/sizes'; .CDB-Tooltip { + display: inline-block; position: absolute; - padding: 8px; - border-radius: 4px; + padding: $baseSize; + border-radius: $halfBaseSize; background: rgba($cMainBg, 0.8); - color: $cWhite; } - -.CDB-Tooltip:before { +.CDB-Tooltip:after { display: block; position: absolute; - top: -12px; - left: calc(50% - 6px); width: 0; height: 0; - border: 6px solid transparent; - border-bottom: 6px solid rgba($cMainBg, 0.8); + border: 4px solid transparent; content: ''; } +.is-black { + &.CDB-Tooltip.CDB-Tooltip--up:after { + border-bottom-color: rgba($cMainBg, 0.8); + } + &.CDB-Tooltip.CDB-Tooltip--down:after { + border-top-color: rgba($cMainBg, 0.8); + } + &.CDB-Tooltip.CDB-Tooltip--left:after { + border-right-color: rgba($cMainBg, 0.8); + } + &.CDB-Tooltip.CDB-Tooltip--right:after { + border-left-color: rgba($cMainBg, 0.8); + } +} + +.is-error { + &.CDB-Tooltip.CDB-Tooltip--up:after { + border-bottom-color: $cError; + } + &.CDB-Tooltip.CDB-Tooltip--down:after { + border-top-color: $cError; + } + &.CDB-Tooltip.CDB-Tooltip--left:after { + border-right-color: $cError; + } + &.CDB-Tooltip.CDB-Tooltip--right:after { + border-left-color: $cError; + } +} + +.CDB-Tooltip.CDB-Tooltip--up:after { + top: -$baseSize; + left: calc(50% - #{$halfBaseSize}); + border-top-width: $halfBaseSize; + border-top-style: solid; +} + +.CDB-Tooltip.CDB-Tooltip--down:after { + bottom: -$baseSize; + left: calc(50% - #{$halfBaseSize}); + border-top-width: $halfBaseSize; + border-top-style: solid; +} + +.CDB-Tooltip.CDB-Tooltip--left:after { + top: calc(50% - #{$halfBaseSize}); + left: -$baseSize; + border-right-width: $halfBaseSize; + border-right-style: solid; +} + +.CDB-Tooltip.CDB-Tooltip--right:after { + top: calc(50% - #{$halfBaseSize}); + right: -$baseSize; + border-right-width: $halfBaseSize; + border-right-style: solid; +} + .CDB-Tooltip.is-error { background: $cError; } -.CDB-Tooltip.is-error:before { - border-bottom: 6px solid $cError; +.CDB-Tooltip-text { + color: $cWhite; } - - From d55ff5823682f34758a06ac7d06fc97a250e6805 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 29 Feb 2016 21:00:03 +0100 Subject: [PATCH 3/3] fix hound --- src/fonts/cartoIcon.eot | Bin 19808 -> 19808 bytes src/fonts/cartoIcon.ttf | Bin 19636 -> 19636 bytes src/fonts/cartoIcon.woff | Bin 12424 -> 12424 bytes src/scss/cdb-components/tooltips.scss | 26 +++++++++++++------------- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 0b1791b04110ae5e1b3b26feca9e3113cfa77e32..051e7c50c57c247ebedb5b704dcbf5762dac9901 100644 GIT binary patch delta 55 zcmaDbi}ArM#tAmeSN9rDv|q>kn8j-1hpEzrd#}dx+k9o+v delta 55 zcmaDbi}ArM#tAmeYabd-v|q>ksK{^PhpEy=57)-?+k9o8-{va=H{&k`Ah`5PViSzs_~n2%0J?Az*#H0l diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 7a09d7083d93be0243a131e181ea8999ce53af85..1e0eba1aab60dca79eb2d5e6b117ebb47399750a 100644 GIT binary patch delta 61 zcmV-D0K)%>VTfUnc?07FI6!`0!F_n|NosUg7FWK T%fY||5(NN?DGu|qZz&lEXQUen delta 61 zcmV-D0K)%>VTfUnc?05dPO*H-C@I4&N8|ZzzA|t#{sM|HT>2%k2}Zvu|NosUg7FWK T%fY||5(NN#>JD