Add color options

yunyong · Nov 29, 2018 · 328d1cc · 328d1cc
1 parent 70a2d56
commit 328d1cc
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 8 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -115,6 +115,15 @@ <h3>Display at different alignments!</h3>
 			<p><span data-wenk="👉 I'm right!" class="wenk-align--right wenk-length--large">Right wenk!</span></p>
 			<p><span data-wenk="👉 I'm center! 👈" class="wenk-align--center wenk-length--large">center wenk!</span></p>
 		</section>
+		<section class="center-xs">
+			<h3>Display at different colors!</h3>
+			<p><span data-wenk="I'm red!" data-wenk-pos="right" data-wenk-color="red">Red wenk!</span></p>
+			<p><span data-wenk="I'm orange!" data-wenk-pos="right" data-wenk-color="orange">Orange wenk!</span></p>
+			<p><span data-wenk="I'm green!" data-wenk-pos="right" data-wenk-color="green">Green wenk!</span></p>
+			<p><span data-wenk="I'm blue!" data-wenk-pos="right" data-wenk-color="blue">Blue wenk!</span></p>
+			<p><span data-wenk="I'm purple!" data-wenk-pos="right" data-wenk-color="purple">Purple wenk!</span></p>
+			<p><span data-wenk="I'm pink!" data-wenk-pos="right" data-wenk-color="pink">Pink wenk!</span></p>
+		</section>
 		<section>
 			<a class="button" href="https://github.com/tiaanduplessis/wenk/archive/v1.0.6.zip" target="_blank">DOWNLOAD</a>
 			<a class="button--outline" href="https://github.com/tiaanduplessis/wenk" target="_blank">View on GitHub</a>

diff --git a/demo/wenk.min.css b/demo/wenk.min.css
diff --git a/dist/wenk.css b/dist/wenk.css
@@ -1,12 +1,13 @@
 /**
  * wenk - Lightweight tooltip for the greater good
- * @version v1.0.6
+ * @version v1.0.8
  * (c) 2018 Tiaan du Plessis @tiaanduplessis |
  * @link https://tiaanduplessis.github.io/wenk/
  * @license MIT
  */
  [data-wenk] {
     position: relative
+
 }
 
 [data-wenk]:after {
@@ -36,14 +37,17 @@
             transform: translate(-50%, 10px);
     white-space: pre;
     width: auto;
+
 }
 
 [data-wenk]:after {
     opacity: 0;
+
 }
 
 [data-wenk]:hover {
     overflow: visible
+
 }
 
 [data-wenk]:hover:after {
@@ -52,6 +56,7 @@
     visibility: visible;
     -webkit-transform: translate(-50%, -10px);
             transform: translate(-50%, -10px);
+
 }
 
 [data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos="bottom"]:after {
@@ -60,11 +65,13 @@
     left: 50%;
     -webkit-transform: translate(-50%, -10px);
             transform: translate(-50%, -10px);
+
 }
 
 [data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos="bottom"]:hover:after {
     -webkit-transform: translate(-50%, 10px);
             transform: translate(-50%, 10px);
+
 }
 
 [data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:after {
@@ -74,11 +81,13 @@
     right: 100%;
     -webkit-transform: translate(10px, -50%);
             transform: translate(10px, -50%);
+
 }
 
 [data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos="left"]:hover:after {
     -webkit-transform: translate(-10px, -50%);
             transform: translate(-10px, -50%);
+
 }
 
 [data-wenk].wenk--right:after, [data-wenk][data-wenk-pos="right"]:after {
@@ -87,39 +96,77 @@
     left: 100%;
     -webkit-transform: translate(-10px, -50%);
             transform: translate(-10px, -50%);
+
 }
 
 [data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos="right"]:hover:after {
     -webkit-transform: translate(10px, -50%);
             transform: translate(10px, -50%);
+
 }
 
 [data-wenk][data-wenk-length="small"]:after, [data-wenk].wenk-length--small:after {
     white-space: normal;
     width: 80px;
+
 }
 
 [data-wenk][data-wenk-length="medium"]:after, [data-wenk].wenk-length--medium:after {
     white-space: normal;
     width: 150px;
+
 }
 
 [data-wenk][data-wenk-length="large"]:after, [data-wenk].wenk-length--large:after {
     white-space: normal;
     width: 260px;
+
 }
 
 [data-wenk][data-wenk-length="fit"]:after, [data-wenk].wenk-length--fit:after {
     white-space: normal;
     width: 100%;
+
 }
 
 [data-wenk][data-wenk-align="right"]:after, [data-wenk].wenk-align--right:after {
     text-align: right;
+
 }
 
 [data-wenk][data-wenk-align="center"]:after, [data-wenk].wenk-align--center:after {
     text-align: center;
+
+}
+
+[data-wenk][data-wenk-color="red"]:after, [data-wenk].wenk-color--red:after {
+    background-color: rgba(219, 40, 40, .8);
+
+}
+
+[data-wenk][data-wenk-color="orange"]:after, [data-wenk].wenk-color--orange:after {
+    background-color: rgba(242, 113, 28, .8);
+
+}
+
+[data-wenk][data-wenk-color="green"]:after, [data-wenk].wenk-color--green:after {
+    background-color: rgba(33, 186, 69, .8);
+
+}
+
+[data-wenk][data-wenk-color="blue"]:after, [data-wenk].wenk-color--blue:after {
+    background-color: rgba(33, 133, 208, .8);
+
+}
+
+[data-wenk][data-wenk-color="purple"]:after, [data-wenk].wenk-color--purple:after {
+    background-color: rgba(163, 51, 200, .8);
+
+}
+
+[data-wenk][data-wenk-color="pink"]:after, [data-wenk].wenk-color--pink:after {
+    background-color: rgba(224, 57, 151, .8);
+
 }
 
 [data-wenk=""]:after {

diff --git a/dist/wenk.cssnext.css b/dist/wenk.cssnext.css
@@ -1,6 +1,6 @@
 /**
  * wenk - Lightweight tooltip for the greater good
- * @version v1.0.6
+ * @version v1.0.8
  * (c) 2018 Tiaan du Plessis @tiaanduplessis |
  * @link https://tiaanduplessis.github.io/wenk/
  * @license MIT
@@ -9,6 +9,12 @@
     --font-size: 13px;
     --font-color: #fff;
     --bg-color: rgba(17, 17, 17, .8);
+    --bg-color-red: rgba(219, 40, 40, .8);
+    --bg-color-orange: rgba(242, 113, 28, .8);
+    --bg-color-green: rgba(33, 186, 69, .8);
+    --bg-color-blue: rgba(33, 133, 208, .8);
+    --bg-color-purple: rgba(163, 51, 200, .8);
+    --bg-color-pink: rgba(224, 57, 151, .8);
     --length-small: 80px;
     --length-medium: 150px;
     --length-large: 260px;
@@ -118,6 +124,26 @@
     &[data-wenk-align="center"]:after, &.wenk-align--center:after {
         text-align: center;
     }
+
+    &[data-wenk-color="red"]:after, &.wenk-color--red:after {
+        background-color: var(--bg-color-red);
+    }
+    &[data-wenk-color="orange"]:after, &.wenk-color--orange:after {
+        background-color: var(--bg-color-orange);
+    }
+    &[data-wenk-color="green"]:after, &.wenk-color--green:after {
+        background-color: var(--bg-color-green);
+    }
+    &[data-wenk-color="blue"]:after, &.wenk-color--blue:after {
+        background-color: var(--bg-color-blue);
+    }
+    &[data-wenk-color="purple"]:after, &.wenk-color--purple:after {
+        background-color: var(--bg-color-purple);
+    }
+    &[data-wenk-color="pink"]:after, &.wenk-color--pink:after {
+        background-color: var(--bg-color-pink);
+    }
+
 }
 
 [data-wenk=""]:after {

diff --git a/dist/wenk.less b/dist/wenk.less
@@ -1,13 +1,19 @@
 /**
  * wenk - Lightweight tooltip for the greater good
- * @version v1.0.6
+ * @version v1.0.8
  * (c) 2018 Tiaan du Plessis @tiaanduplessis |
  * @link https://tiaanduplessis.github.io/wenk/
  * @license MIT
  */
  @wenk-font-size: 13px;
 @wenk-font-color: #fff;
 @wenk-bg-color: rgba(17, 17, 17, .8);
+@wenk-bg-color-red: rgba(219, 40, 40, .8);
+@wenk-bg-color-orange: rgba(242, 113, 28, .8);
+@wenk-bg-color-green: rgba(33, 186, 69, .8);
+@wenk-bg-color-blue: rgba(33, 133, 208, .8);
+@wenk-bg-color-purple: rgba(163, 51, 200, .8);
+@wenk-bg-color-pink: rgba(224, 57, 151, .8);
 @wenk-length-small: 80px;
 @wenk-length-medium: 150px;
 @wenk-length-large: 260px;
@@ -124,6 +130,31 @@
 	&.wenk-align--center:after {
 		text-align: center;
 	}
+	/* ===[Color of tooltip]=== */
+	&[data-wenk-color="red"]:after,
+	&.wenk-color--red:after {
+		background-color: @wenk-bg-color-red;
+	}
+	&[data-wenk-color="orange"]:after,
+	&.wenk-color--orange:after {
+		background-color: @wenk-bg-color-orange;
+	}
+	&[data-wenk-color="green"]:after,
+	&.wenk-color--green:after {
+		background-color: @wenk-bg-color-green;
+	}
+	&[data-wenk-color="blue"]:after,
+	&.wenk-color--blue:after {
+		background-color: @wenk-bg-color-blue;
+	}
+	&[data-wenk-color="purple"]:after,
+	&.wenk-color--purple:after {
+		background-color: @wenk-bg-color-purple;
+	}
+	&[data-wenk-color="pink"]:after,
+	&.wenk-color--pink:after {
+		background-color: @wenk-bg-color-pink;
+	}
 }
 
 [data-wenk=""]:after {

diff --git a/dist/wenk.min.css b/dist/wenk.min.css