This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new e63752f jewel validator: set default position as middle-right.
Improve styles and implement various other positions, but still left some to be
completed. Also add some offset.
e63752f is described below
commit e63752fdc83e7ee0b8dfd64c8f9ac62f56ea2885
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Mar 19 23:38:30 2019 +0100
jewel validator: set default position as middle-right. Improve styles and
implement various other positions, but still left some to be completed. Also
add some offset.
---
.../projects/Jewel/src/main/resources/defaults.css | 30 ++++++++++--
.../royale/jewel/beads/validators/Validator.as | 30 ++++++++++--
.../Jewel/src/main/sass/components/_tooltip.sass | 46 ++++++++++++++++--
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/resources/defaults.css | 27 ++++++++++-
.../JewelTheme/src/main/resources/defaults.css | 27 ++++++++++-
.../src/main/sass/components-primary/_tooltip.sass | 55 ++++++++++++++++++----
29 files changed, 767 insertions(+), 69 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e0ed99d..19daa79 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3765,17 +3765,41 @@ j|TitleBar {
position: absolute;
pointer-events: none;
z-index: 80;
+ border-radius: 0.25em;
}
.jewel.tooltip.error {
margin-top: -31px !important;
}
.jewel.tooltip.error::before {
- top: 100%;
- left: 8px;
- position: absolute;
content: "";
+ position: absolute;
+ height: 0;
+ width: 0;
+}
+.jewel.tooltip.error.left-top::before {
+ top: 100%;
margin-top: 0px;
}
+.jewel.tooltip.error.middle-top::before {
+ bottom: 0;
+ left: 50%;
+ border-bottom: 0;
+}
+.jewel.tooltip.error.left-middle::before {
+ top: 50%;
+ right: 0;
+ border-right: 0;
+}
+.jewel.tooltip.error.right-middle::before {
+ top: 50%;
+ left: 0;
+ border-left: 0;
+}
+.jewel.tooltip.error.middle-bottom::before {
+ top: 0;
+ left: 50%;
+ border-top: 0;
+}
.jewel.topappbar {
display: inline-flex;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
index 4328333..78d08d0 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
@@ -86,8 +86,11 @@ package org.apache.royale.jewel.beads.validators
private var _errorTip:ErrorTipLabel;
private var _host:IPopUpHost;
- private var _xPos:int = LEFT;
- private var _yPos:int = TOP;
+
+ private var _xPos:int = RIGHT;
+ private var _yPos:int = MIDDLE;
+ private var xoffset:int = 14;
+ private var yoffset:int = 0;
protected var hostComponent:UIBase;
@@ -401,6 +404,11 @@ package org.apache.royale.jewel.beads.validators
}
/**
+ * errorTip css class that position the arrow
+ */
+ private var arrowclass:String = "";
+
+ /**
* Determines the position of the errorTip.
*
* @langversion 3.0
@@ -412,29 +420,45 @@ package org.apache.royale.jewel.beads.validators
{
var xFactor:Number = 1;
var yFactor:Number = 1;
+ var ex:Number = 0;
+ var ey:Number = 0;
var hp:Point = PointUtils.localToGlobal(new Point(0,0),
_host);
var pt:Point;
+ // remove a previous arrow position
+ _errorTip.removeClass(arrowclass);
+
+ var arrowclass:String = "";
if (_xPos == LEFT) {
xFactor = Number.POSITIVE_INFINITY;
+ arrowclass = "left-";
}
else if (_xPos == MIDDLE) {
xFactor = 2;
+ arrowclass = "middle-";
+ ex = - _errorTip.width / xFactor;
}
else if (_xPos == RIGHT) {
xFactor = 1;
+ arrowclass = "right-";
}
if (_yPos == TOP) {
yFactor = Number.POSITIVE_INFINITY;
+ arrowclass += "top";
}
else if (_yPos == MIDDLE) {
yFactor = 2;
+ ey = _errorTip.height / yFactor;
+ arrowclass += "middle";
}
else if (_yPos == BOTTOM) {
yFactor = 1;
+ arrowclass += "bottom";
}
- pt = new Point(hostComponent.width/xFactor - hp.x,
hostComponent.height/yFactor - hp.y);
+ _errorTip.addClass(arrowclass);
+
+ pt = new Point(hostComponent.width/xFactor + ex - hp.x
+ xoffset, hostComponent.height/yFactor + ey - hp.y + yoffset);
pt = PointUtils.localToGlobal(pt, hostComponent);
return pt;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
index e2bb40b..dde2ac5 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
@@ -26,13 +26,51 @@
position: absolute
pointer-events: none
z-index: $app-tooltips-zindex
+ border-radius: .25em
&.error
margin-top: -31px !important
&::before
- top: 100%
- left: 8px
- position: absolute
content: ""
- margin-top: 0px
+ position: absolute
+ height: 0
+ width: 0
+
+ &.left-top
+ &::before
+ top: 100%
+ margin-top: 0px
+ &.middle-top
+ &::before
+ bottom: 0
+ left: 50%
+ border-bottom: 0
+ &.right-top
+ &::before
+
+ &.left-middle
+ &::before
+ top: 50%
+ right: 0
+ border-right: 0
+ &.middle-middle
+ &::before
+
+ &.right-middle
+ &::before
+ top: 50%
+ left: 0
+ border-left: 0
+
+ &.left-bottom
+ &::before
+
+ &.middle-bottom
+ &::before
+ top: 0
+ left: 50%
+ border-top: 0
+ &.right-bottom
+ &::before
+
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 2b8646f..7d56bdc 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index f207fee..4c63d3d 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 6a934c1..f752530 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 50d011d..245969a 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 1ba8e80..e643d2b 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 02da5d8..7ba74a2 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 8b8b20b..efffd98 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 9f5d077..b61e960 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 9a1af79..cd83804 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 7d444c0..3819902 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 175dfa6..013f7d0 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 8a325c7..d1c549d 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -1095,10 +1095,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 84888c4..c51d7c1 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 7245633..dd7b3d6 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index aa467bc..eeb8f59 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 583dc1e..0fbabf3 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index fbb4173..ca23ff9 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 606195f..c833144 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 4c82270..2a3a7a8 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 1cbbee9..ad2ff25 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index ab95d06..e323ee7 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 0c080a2..9c45b60 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 9c2b18d..0683625 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 296d339..d2ca3f7 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ce8f02f..3039de3 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1093,10 +1093,33 @@ a:active {
.jewel.tooltip.error {
background: #EC1C24;
}
-.jewel.tooltip.error::before {
- border-top-color: #EC1C24;
+.jewel.tooltip::before {
border: solid 8px transparent;
}
+.jewel.tooltip.left-top::before {
+ left: 8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.middle-top::before {
+ margin-bottom: -8px;
+ margin-left: -8px;
+ border-top-color: #EC1C24;
+}
+.jewel.tooltip.left-middle::before {
+ margin-top: -8px;
+ margin-right: -8px;
+ border-left-color: #EC1C24;
+}
+.jewel.tooltip.right-middle::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-right-color: #EC1C24;
+}
+.jewel.tooltip.middle-bottom::before {
+ margin-top: -8px;
+ margin-left: -8px;
+ border-bottom-color: #EC1C24;
+}
@keyframes slide-up {
0% {
opacity: 0;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
index 8d64ffc..f7c93c1 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
@@ -30,14 +30,51 @@
&.error
background: $error-color
+ &::before
+ border: solid 8px transparent
+
+ //this the arrow position and color
+ &.left-top
+ &::before
+ left: 8px
+ border-top-color: $error-color
+ &.middle-top
+ &::before
+ margin-bottom: -8px
+ margin-left: -8px
+ border-top-color: $error-color
+ &.right-top
+ &::before
+
+ &.left-middle
+ &::before
+ margin-top: -8px
+ margin-right: -8px
+ border-left-color: $error-color
+ &.middle-middle
&::before
- border-top-color: $error-color //this the arrow
- border: solid 8px transparent
+
+ &.right-middle
+ &::before
+ margin-top: -8px
+ margin-left: -8px
+ border-right-color: $error-color
- @keyframes slide-up
- 0%
- opacity: 0
- transform: translateY(20px)
- 100%
- opacity: 1
- transform: translateY(0)
\ No newline at end of file
+ &.left-bottom
+ &::before
+
+ &.middle-bottom
+ &::before
+ margin-top: -8px
+ margin-left: -8px
+ border-bottom-color: $error-color
+ &.right-bottom
+ &::before
+
+ @keyframes slide-up
+ 0%
+ opacity: 0
+ transform: translateY(20px)
+ 100%
+ opacity: 1
+ transform: translateY(0)
\ No newline at end of file
