@regcheq/ui-vue-2 1.12.0 → 1.13.0

package/dist/index.css

@@ -945,18 +945,33 @@
 .rq-icon--xl {
   font-size: 48px;
 }
+.rq-skeleton {
+  display: block;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%);
+  background-size: 400% 100%;
+  animation: rq-skeleton-shimmer 1500ms ease-in-out infinite;
+}
+
+@keyframes rq-skeleton-shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
 .rq-tooltip-wrapper {
   position: relative;
   display: inline-block;
 }
-.rq-tooltip-wrapper:hover .rq-tooltip, .rq-tooltip-wrapper:focus-within .rq-tooltip {
+.rq-tooltip-wrapper .rq-tooltip--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
 .rq-tooltip {
-  position: absolute;
-  z-index: 50;
+  z-index: 1000;
   width: max-content;
   min-width: 100px;
   max-width: 300px;
@@ -990,8 +1005,6 @@
   height: 0;
 }
 .rq-tooltip--top {
-  bottom: calc(100% + 8px);
-  left: 50%;
   transform: translateX(-50%);
 }
 .rq-tooltip--top::after {
@@ -1003,8 +1016,6 @@
   border-top: 5px solid #000000;
 }
 .rq-tooltip--bottom {
-  top: calc(100% + 8px);
-  left: 50%;
   transform: translateX(-50%);
 }
 .rq-tooltip--bottom::after {
@@ -1016,8 +1027,6 @@
   border-bottom: 5px solid #000000;
 }
 .rq-tooltip--left {
-  right: calc(100% + 8px);
-  top: 50%;
   transform: translateY(-50%);
 }
 .rq-tooltip--left::after {
@@ -1029,8 +1038,6 @@
   border-left: 5px solid #000000;
 }
 .rq-tooltip--right {
-  left: calc(100% + 8px);
-  top: 50%;
   transform: translateY(-50%);
 }
 .rq-tooltip--right::after {
@@ -1664,6 +1671,12 @@
 .rq-table__tr--empty {
   cursor: default;
 }
+.rq-table__tr--skeleton {
+  cursor: default;
+}
+.rq-table__tr--skeleton:hover, .rq-table__tr--skeleton:active {
+  background: #ffffff;
+}
 .rq-table__th {
   height: 48px;
   padding: 4px 16px;
@@ -1787,8 +1800,7 @@
 .rq-table__td {
   padding: 8px 16px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow: visible;
   background: inherit;
   font-size: 14px;
   color: #18181b;
@@ -1808,6 +1820,11 @@
   width: 40px;
   min-width: 40px;
   text-overflow: clip;
+  cursor: pointer;
+}
+.rq-table__td--expand:focus-visible {
+  outline: 2px solid #5497ea;
+  outline-offset: -2px;
 }
 .rq-table__td--empty {
   padding: 48px 16px;