@sankhyalabs/ez-design 4.4.0 → 4.6.0

package/dist/default/ez-themed.css

@@ -110,6 +110,7 @@
   --border--small: 1px solid;
   --border--medium: 2px solid;
   --border--large: 3px solid;
+  --border--xlarge: 5px solid;
   --shadow: 0px 0px 16px 0px rgba(0, 38, 111, .12);
   --shadow-focus: 0 0 0 2px;
   --shadow--small: 0 0 16px rgba(0, 38, 111, 0.07);
@@ -431,8 +432,8 @@ body {
   .ez-content--sticky {
     position: sticky;
     top: 0;
-    z-index: var(2);
-    background-color: var(#fafcff); }
+    z-index: 2;
+    background-color: #fafcff; }
 
 .ez-image {
   display: flex;
@@ -865,6 +866,139 @@ body {
   .ez-title--inverted {
     color: #fff; }
 
+[data-tooltip] {
+  cursor: pointer;
+  z-index: 3; }
+
+[data-tooltip]:hover {
+  position: relative; }
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+  line-height: 1;
+  font-size: 14px;
+  pointer-events: none;
+  position: absolute;
+  box-sizing: border-box;
+  display: none;
+  opacity: 0; }
+
+[data-tooltip]:before {
+  content: "";
+  border: 5px solid transparent;
+  z-index: 3; }
+
+[data-tooltip]:after {
+  content: attr(data-tooltip);
+  text-align: center;
+  min-width: 3em;
+  max-width: 21em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 3px 6px;
+  border-radius: 6px;
+  background: #2b3a54;
+  color: #FFFFFF;
+  z-index: 3;
+  font-family: 'Roboto'; }
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+  display: block;
+  opacity: 1; }
+
+[data-tooltip]:not([data-flow])::before,
+[data-tooltip][data-flow="top"]::before {
+  bottom: 100%;
+  border-bottom-width: 0;
+  border-top-color: #2b3a54; }
+
+[data-tooltip]:not([data-flow])::after,
+[data-tooltip][data-flow="top"]::before {
+  bottom: 1.167em;
+  -webkit-transform: translate(-50%, calc(-50% - 0px));
+  transform: translate(-50%, calc(-50% - 0px)); }
+
+[data-tooltip]:not([data-flow])::before, [tooltip]:not([data-flow])::after,
+[data-tooltip][data-flow="top"]::before,
+[data-tooltip][data-flow="top"]::after {
+  left: 50%; }
+
+[data-tooltip][data-flow="top"]::after {
+  -webkit-transform: translate(-50%, calc(-100% - 28px));
+  transform: translate(-50%, calc(-100% - 28px)); }
+
+[data-tooltip][data-flow="bottom"]::before {
+  border-top-width: 0;
+  border-bottom-color: #2b3a54; }
+
+[data-tooltip][data-flow="bottom"]:not([tooltip-position])::before,
+[data-tooltip][data-flow="bottom"][tooltip-position="relative"]::before {
+  top: 100%; }
+
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::before,
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::after {
+  position: fixed; }
+
+[data-tooltip][data-flow="bottom"]:not([tooltip-position])::after,
+[data-tooltip][data-flow="bottom"][tooltip-position="relative"]::after {
+  top: calc(100% + 5px); }
+
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"]::after {
+  -webkit-transform: translate(0, 5px);
+  transform: translate(0, 5px); }
+
+[data-tooltip][data-flow="bottom"]:not([tooltip-position])::before,
+[data-tooltip][data-flow="bottom"][tooltip-position="relative"]::before,
+[data-tooltip][data-flow="bottom"]:not([tooltip-position])::after,
+[data-tooltip][data-flow="bottom"][tooltip-position="relative"]::after {
+  left: 50%;
+  -webkit-transform: translate(-50%, 8px);
+  transform: translate(-50%, 8px); }
+
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"]:not([tooltip-height])::before,
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"][tooltip-height="label"]::before {
+  -webkit-transform: translate(3ch, 18px);
+  transform: translate(3ch, 18px); }
+
+[data-tooltip][data-flow="bottom"][tooltip-position="fixed"][tooltip-height="chip"]::before {
+  -webkit-transform: translate(3ch, 41px);
+  transform: translate(3ch, 41px); }
+
+[data-tooltip][data-flow="left"]::before {
+  top: 50%;
+  border-right-width: 0;
+  border-left-color: #2b3a54;
+  left: calc(0em - 5px);
+  -webkit-transform: translate(-8px, -50%);
+  transform: translate(-8px, -50%); }
+
+[data-tooltip][data-flow="left"]::after {
+  top: 50%;
+  right: calc(100% + 5px);
+  -webkit-transform: translate(-8px, -50%);
+  transform: translate(-8px, -50%); }
+
+[data-tooltip][data-flow="right"]::before {
+  top: 50%;
+  border-right-width: 0;
+  border-left-color: #2b3a54;
+  left: calc(100% + 5px);
+  -webkit-transform: translate(8px, -50%);
+  transform: translate(8px, -50%);
+  transform-origin: 50% 25%;
+  -webkit-transform: rotate(180deg); }
+
+[data-tooltip][data-flow="right"]::after {
+  top: 50%;
+  left: calc(100%  + 5px);
+  -webkit-transform: translate(5px, -50%);
+  transform: translate(5px, -50%); }
+
+[data-tooltip=""]::after, [data-tooltip=""]::before {
+  display: none !important; }
+
 .ez-alert {
   display: flex;
   align-items: flex-start;