@egovernments/digit-ui-components-css 0.0.2-beta.20 → 0.0.2-beta.21

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.21] - 2024-08-07
+### Changed
+-  Updated css for Tooltip Component
+
 ## [0.0.2-beta.20] - 2024-08-02
 ### Added
 -  Added css for Tag Component

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * @egovernments/digit-ui-components-css - 0.0.2-beta.20
+ * @egovernments/digit-ui-components-css - 0.0.2-beta.21
  *
  * Copyright (c) 2024 Jagankumar <jagan.kumar@egovernments.org>
  * 
@@ -8417,6 +8417,16 @@ video::-webkit-media-controls-panel {
   width: max-content;
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
   min-width: 4.125rem;
   max-width: 14.563rem;
   font-family: Roboto;
@@ -8433,46 +8443,187 @@ video::-webkit-media-controls-panel {
     .tooltip-content {
       font-size: 1rem; } }
 
+.tooltip-content.tooltip-bottom-start {
+  top: 3rem;
+  left: 0; }
+  .tooltip-content.tooltip-bottom-start.with-arrow {
+    border-top-left-radius: 0; }
+
+.tooltip-content.tooltip-bottom {
+  top: 3rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.tooltip-content.tooltip-bottom-end {
+  top: 3rem;
+  right: 0; }
+  .tooltip-content.tooltip-bottom-end.with-arrow {
+    border-top-right-radius: 0; }
+
+.tooltip-content.tooltip-top-start {
+  bottom: 3rem;
+  left: 0; }
+  .tooltip-content.tooltip-top-start.with-arrow {
+    border-bottom-left-radius: 0; }
+
+.tooltip-content.tooltip-top {
+  bottom: 3rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.tooltip-content.tooltip-top-end {
+  bottom: 3rem;
+  right: 0; }
+  .tooltip-content.tooltip-top-end.with-arrow {
+    border-bottom-right-radius: 0; }
+
+.tooltip-content.tooltip-left-start {
+  right: calc(100% + .5rem);
+  top: 0; }
+  .tooltip-content.tooltip-left-start.with-arrow {
+    border-top-right-radius: 0; }
+
 .tooltip-content.tooltip-left {
-  left: -10rem; }
+  right: calc(100% + .5rem);
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-content.tooltip-left-end {
+  right: calc(100% + .5rem);
+  bottom: 0; }
+  .tooltip-content.tooltip-left-end.with-arrow {
+    border-bottom-right-radius: 0; }
+
+.tooltip-content.tooltip-right-start {
+  left: calc(100% + .5rem);
+  top: 0; }
+  .tooltip-content.tooltip-right-start.with-arrow {
+    border-top-left-radius: 0; }
 
 .tooltip-content.tooltip-right {
-  left: 10rem; }
+  left: calc(100% + .5rem);
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
 
-.tooltip-content.tooltip-top {
-  top: -3.75rem; }
+.tooltip-content.tooltip-right-end {
+  left: calc(100% + .5rem);
+  bottom: 0; }
+  .tooltip-content.tooltip-right-end.with-arrow {
+    border-bottom-left-radius: 0; }
 
-.tooltip-content.tooltip-bottom {
-  top: 3.75rem; }
+.tooltip-bottom-start.with-arrow:before {
+  left: .25rem;
+  border-right: .5rem solid transparent; }
+
+.tooltip-bottom-start.with-arrow:before, .tooltip-bottom.with-arrow:before {
+  content: "";
+  position: absolute;
+  top: -.5rem;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-bottom: .5rem solid #505a5f; }
 
-.tooltip-left:before {
-  right: -.625rem; }
+.tooltip-bottom.with-arrow:before {
+  left: 50%;
+  border-left: .25rem solid transparent;
+  border-right: .25rem solid transparent; }
 
-.tooltip-left:before, .tooltip-right:before {
+.tooltip-bottom-end.with-arrow:before {
   content: "";
   position: absolute;
-  top: 0;
-  border: .625rem solid transparent;
-  border-top-color: #505a5f; }
+  top: -.5rem;
+  left: calc(100% - .25rem);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-bottom: .5rem solid #505a5f;
+  border-left: .5rem solid transparent; }
+
+.tooltip-top-start.with-arrow:before {
+  left: .25rem;
+  border-right: .5rem solid transparent; }
+
+.tooltip-top-start.with-arrow:before, .tooltip-top.with-arrow:before {
+  content: "";
+  position: absolute;
+  bottom: -.5rem;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-top: .5rem solid #505a5f; }
 
-.tooltip-right:before {
-  left: -.625rem; }
+.tooltip-top.with-arrow:before {
+  left: 50%;
+  border-left: .25rem solid transparent;
+  border-right: .25rem solid transparent; }
 
-.tooltip-top:before {
+.tooltip-top-end.with-arrow:before {
   content: "";
   position: absolute;
-  bottom: -.625rem;
-  right: 0;
-  border: .625rem solid transparent;
-  border-right-color: #505a5f; }
+  bottom: -.5rem;
+  left: calc(100% - .25rem);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-top: .5rem solid #505a5f;
+  border-left: .5rem solid transparent; }
+
+.tooltip-left-start.with-arrow:before {
+  top: .25rem;
+  right: -.45rem;
+  border-bottom: .5rem solid transparent; }
+
+.tooltip-left-start.with-arrow:before, .tooltip-left.with-arrow:before {
+  content: "";
+  position: absolute;
+  border-left: .5rem solid #505a5f;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
 
-.tooltip-bottom:before {
+.tooltip-left.with-arrow:before {
+  top: 50%;
+  right: -.5rem;
+  border-top: .25rem solid transparent;
+  border-bottom: .25rem solid transparent; }
+
+.tooltip-left-end.with-arrow:before {
   content: "";
   position: absolute;
-  top: -.625rem;
-  left: 0;
-  border: .625rem solid transparent;
-  border-left-color: #505a5f; }
+  top: calc(100% - .25rem);
+  right: -.45rem;
+  border-left: .5rem solid #505a5f;
+  border-top: .5rem solid transparent;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-right-start.with-arrow:before {
+  top: .25rem;
+  left: -.45rem;
+  border-bottom: .5rem solid transparent; }
+
+.tooltip-right-start.with-arrow:before, .tooltip-right.with-arrow:before {
+  content: "";
+  position: absolute;
+  border-right: .5rem solid #505a5f;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-right.with-arrow:before {
+  top: 50%;
+  left: -.5rem;
+  border-top: .25rem solid transparent;
+  border-bottom: .25rem solid transparent; }
+
+.tooltip-right-end.with-arrow:before {
+  content: "";
+  position: absolute;
+  top: calc(100% - .25rem);
+  left: -.45rem;
+  border-right: .5rem solid #505a5f;
+  border-top: .5rem solid transparent;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
 
 .digit-tag-wrapper {
   border-radius: .25rem;