feat: add cpopover style

Author: mrholek

scss/vendors/tippyjs/index.scss

@@ -102,15 +102,149 @@
 // Popover
 
 .#{$namespace-prefix}-box[data-theme~='cpopover'] {
-  // background:white;
-  // color: inherit;
-  // border: 1px solid rgba(0, 0, 21, 0.2);
+  z-index: $zindex-popover;
+  display: block;
+  max-width: $popover-max-width;
+  @include reset-text();
+  @include font-size($popover-font-size);
+  word-wrap: break-word;
+  background-clip: padding-box;
+  border: $popover-border-width solid;
+  @include border-radius($popover-border-radius);
+  @include box-shadow($popover-box-shadow);
+  @include themes($popover-theme-map) {
+    background-color: themes-get-value("popover-bg");
+    border-color: themes-get-value("popover-border-color");
+  }
 
   > .#{$namespace-prefix}-content {
+    max-width: auto;
     padding: 0;
+    color: initial;
+    text-align: initial;
+    background-color: initial;
+    border-radius: initial;
+  }
+
+  > .#{$namespace-prefix}-arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+    margin: 0 $popover-border-radius;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+
+  &[data-placement^='top'] > .#{$namespace-prefix}-arrow {
+    bottom: subtract(-$popover-arrow-height, $popover-border-width);
+
+    &::before {
+      bottom: 0;
+      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      @include themes($popover-theme-map) {
+        border-top-color: themes-get-value("popover-arrow-outer-color");
+      }
+    }
+
+    &::after {
+      bottom: $popover-border-width;
+      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      @include themes($popover-theme-map) {
+        border-top-color: themes-get-value("popover-arrow-color");
+      }
+    }
+  }
+
+  &[data-placement^='right'] > .#{$namespace-prefix}-arrow {
+    left: subtract(-$popover-arrow-height, $popover-border-width);
+    width: $popover-arrow-height;
+    height: add($popover-arrow-width, (2 * $popover-border-radius));
+    padding: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+    margin: 0;
+
+    &::before {
+      left: 0;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      @include themes($popover-theme-map) {
+        border-right-color: themes-get-value("popover-arrow-outer-color");
+      }
+    }
+
+    &::after {
+      left: $popover-border-width;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      @include themes($popover-theme-map) {
+        border-right-color: themes-get-value("popover-arrow-color");
+      }
+    }
+  }
+
+  &[data-placement^='bottom'] > .#{$namespace-prefix}-arrow {
+    top: subtract(-$popover-arrow-height, $popover-border-width);
+
+    &::before {
+      top: 0;
+      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      @include themes($popover-theme-map) {
+        border-bottom-color: themes-get-value("popover-arrow-outer-color");
+      }
+    }
+
+    &::after {
+      top: $popover-border-width;
+      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      @include themes($popover-theme-map) {
+        border-bottom-color: themes-get-value("popover-arrow-color");
+      }
+    }
   }
 
-  > .#{$namespace-prefix}-arrow::before {
-    color: white;
+  &[data-placement^='bottom'] {
+    > .#{$namespace-prefix}-arrow {
+      right: subtract(-$popover-arrow-height, $popover-border-width);
+      width: $popover-arrow-height;
+      height: add($popover-arrow-width, (2 * $popover-border-radius));
+      padding: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+      margin: 0;
+
+      &::before {
+        right: 0;
+        border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+        @include themes($popover-theme-map) {
+          border-left-color: themes-get-value("popover-arrow-outer-color");
+        }
+      }
+
+      &::after {
+        right: $popover-border-width;
+        border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+        @include themes($popover-theme-map) {
+          border-left-color: themes-get-value("popover-arrow-color");
+        }
+      }
+    }
+
+     // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: $popover-arrow-width;
+      margin-left: -$popover-arrow-width / 2;
+      content: "";
+      border-bottom: $popover-border-width solid;
+      @include themes($popover-theme-map) {
+        border-bottom-color: themes-get-value("popover-header-bg");
+      }
+    }
   }
 }