From e8f475ffb43491c59e9c1f4196fa23aa66385d6e Mon Sep 17 00:00:00 2001
From: zvizvi <5633910@gmail.com>
Date: Fri, 6 Nov 2020 03:54:35 +0200
Subject: [PATCH] Light theme mode [.tooltip-light]

---
 dist/css-tooltip.css     | 14 ++++++++++++++
 dist/css-tooltip.min.css |  2 +-
 src/css-tooltip.scss     | 35 ++++++++++++++++++++++++++---------
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/dist/css-tooltip.css b/dist/css-tooltip.css
index 02fb560..c07132c 100644
--- a/dist/css-tooltip.css
+++ b/dist/css-tooltip.css
@@ -79,3 +79,17 @@
   right: 50%;
   transform: translate(24px, -12px);
 }
+
+[data-tooltip].tooltip-light:before {
+  background: #fff;
+  color: #333;
+}
+
+[data-tooltip].tooltip-light:after {
+  border-top-color: #fff;
+}
+
+[data-tooltip].tooltip-light[class*="tooltip-bottom"]:after {
+  border-top-color: transparent;
+  border-bottom-color: #fff;
+}
diff --git a/dist/css-tooltip.min.css b/dist/css-tooltip.min.css
index ff43c9c..3105c65 100644
--- a/dist/css-tooltip.min.css
+++ b/dist/css-tooltip.min.css
@@ -1 +1 @@
-[data-tooltip]{position:relative;display:inline-block}[data-tooltip]:after,[data-tooltip]:before{position:absolute;left:50%;transform:translate(-50%,-12px);z-index:1000;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:opacity .35s ease .25s}[data-tooltip]:before{content:attr(data-tooltip);background:#333;color:#eee;padding:8px 12px;white-space:nowrap;bottom:100%;border-radius:3px;box-shadow:0 5px 15px -5px rgba(0,0,0,.65)}[data-tooltip]:after{content:"";background:transparent;border:8px solid transparent;border-top-color:#333}[data-tooltip]:active:after,[data-tooltip]:active:before,[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}[data-tooltip].tooltip-multiline:before{width:100vw;max-width:240px;white-space:normal}[data-tooltip][class*=tooltip-bottom]:after,[data-tooltip][class*=tooltip-bottom]:before{transform:translate(-50%,12px)}[data-tooltip][class*=tooltip-bottom]:before{bottom:auto;top:100%}[data-tooltip][class*=tooltip-bottom]:after{bottom:0;border:8px solid transparent;border-bottom-color:#333}[data-tooltip].tooltip-bottom-left:before{transform:translate(-24px,12px)}[data-tooltip].tooltip-bottom-right:before{left:auto;right:50%;transform:translate(24px,12px)}[data-tooltip].tooltip-top-left:before{transform:translate(-24px,-12px)}[data-tooltip].tooltip-top-right:before{left:auto;right:50%;transform:translate(24px,-12px)}
\ No newline at end of file
+[data-tooltip]{position:relative;display:inline-block}[data-tooltip]:after,[data-tooltip]:before{position:absolute;left:50%;transform:translate(-50%,-12px);z-index:1000;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:opacity .35s ease .25s}[data-tooltip]:before{content:attr(data-tooltip);background:#333;color:#eee;padding:8px 12px;white-space:nowrap;bottom:100%;border-radius:3px;box-shadow:0 5px 15px -5px rgba(0,0,0,.65)}[data-tooltip]:after{content:"";background:transparent;border:8px solid transparent;border-top-color:#333}[data-tooltip]:active:after,[data-tooltip]:active:before,[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}[data-tooltip].tooltip-multiline:before{width:100vw;max-width:240px;white-space:normal}[data-tooltip][class*=tooltip-bottom]:after,[data-tooltip][class*=tooltip-bottom]:before{transform:translate(-50%,12px)}[data-tooltip][class*=tooltip-bottom]:before{bottom:auto;top:100%}[data-tooltip][class*=tooltip-bottom]:after{bottom:0;border:8px solid transparent;border-bottom-color:#333}[data-tooltip].tooltip-bottom-left:before{transform:translate(-24px,12px)}[data-tooltip].tooltip-bottom-right:before{left:auto;right:50%;transform:translate(24px,12px)}[data-tooltip].tooltip-top-left:before{transform:translate(-24px,-12px)}[data-tooltip].tooltip-top-right:before{left:auto;right:50%;transform:translate(24px,-12px)}[data-tooltip].tooltip-light:before{background:#fff;color:#333}[data-tooltip].tooltip-light:after{border-top-color:#fff}[data-tooltip].tooltip-light[class*=tooltip-bottom]:after{border-top-color:transparent;border-bottom-color:#fff}
\ No newline at end of file
diff --git a/src/css-tooltip.scss b/src/css-tooltip.scss
index b1f8d1e..ebfb64a 100644
--- a/src/css-tooltip.scss
+++ b/src/css-tooltip.scss
@@ -1,13 +1,14 @@
 
-$background-color   : #333;
-$foreground-color   : #eee;
-$arrow-size         : 8px;
-$vertical-shift     : 12px;
-$multiline-width    : 240px;
-$tooltip-padding    : 8px 12px;
-$roundness          : 3px; // 0 || border-radius
-$shadow             : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow
-$load-styles        : true !default; // Extra styles needed?
+$background-color       : #333;
+$foreground-color       : #eee;
+$light-background-color : #fff;
+$arrow-size             : 8px;
+$vertical-shift         : 12px;
+$multiline-width        : 240px;
+$tooltip-padding        : 8px 12px;
+$roundness              : 3px; // 0 || border-radius
+$shadow                 : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow
+$load-styles            : true !default; // Extra styles needed?
 
 [data-tooltip] {
 
@@ -98,6 +99,22 @@ $load-styles        : true !default; // Extra styles needed?
             right: 50%;
             transform: translate( $arrow-size*3, -$vertical-shift);
         }
+
+        // Light theme tooltip
+        &.tooltip-light {
+            &:before {
+                background: $light-background-color;
+                color: $background-color;
+            }
+            &:after {
+                border-top-color: $light-background-color;
+            }
+            &[class*="tooltip-bottom"]:after {
+                border-top-color: transparent;
+                border-bottom-color: $light-background-color;
+            }
+        }
+
         // End extra styles
         // ----------------------------------------------------
     }