@finqu/cool 1.2.29 → 2.0.2

package/scss/_popover.scss

@@ -1,167 +1,61 @@
-// Popover
-// ---------------------------------------------------------------------------------------------------------------
-
-.popover {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: $zindex-popover;
-	display: block;
-	max-width: $popover-max-width;
-	font-size: $popover-font-size;
-	word-wrap: break-word;
-	background-color: $popover-bg;
-	background-clip: padding-box;
-	border: $popover-border-width solid $popover-border-color;
-	border-radius: $popover-border-radius;
-	box-shadow: $popover-box-shadow;
-
-	@include reset-text;
-
-	.arrow {
-		position: absolute;
-		display: block;
-		width: $popover-arrow-width;
-		height: $popover-arrow-height;
-		margin: 0 $border-radius;
-
-		&::before,
-		&::after {
-			position: absolute;
-			display: block;
-			content: '';
-			border-color: transparent;
-			border-style: solid;
-		}
-	}
-}
-
-.popover-top {
-	margin-bottom: $popover-arrow-height;
-
-	.arrow {
-		bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-	}
-
-	.arrow::before,
-	.arrow::after {
-		border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
-	}
-
-	.arrow::before {
-		bottom: 0;
-		border-top-color: $popover-arrow-outer-color;
-	}
-
-	.arrow::after {
-		bottom: $popover-border-width;
-		border-top-color: $popover-arrow-color;
-	}
-}
-
-.popover-right {
-	margin-left: $popover-arrow-height;
-
-	.arrow {
-		left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		width: $popover-arrow-height;
-		height: $popover-arrow-width;
-		margin: $border-radius 0;
-	}
-
-	.arrow::before,
-	.arrow::after {
-		border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
-	}
-
-	.arrow::before {
-		left: 0;
-		border-right-color: $popover-arrow-outer-color;
-	}
-
-	.arrow::after {
-		left: $popover-border-width;
-		border-right-color: $popover-arrow-color;
-	}
-}
-
-.popover-bottom {
-	margin-top: $popover-arrow-height;
-
-	.arrow {
-		top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-	}
-
-	.arrow::before,
-	.arrow::after {
-		border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
-	}
-
-	.arrow::before {
-		top: 0;
-		border-bottom-color: $popover-arrow-outer-color;
-	}
-
-	.arrow::after {
-		top: $popover-border-width;
-		border-bottom-color: $popover-arrow-color;
-	}
-
-	.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 $popover-header-bg;
-	}
-}
-
-.popover-left {
-	margin-right: $popover-arrow-height;
-
-	.arrow {
-		right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		width: $popover-arrow-height;
-		height: $popover-arrow-width;
-		margin: $border-radius 0;
-	}
-
-	.arrow::before,
-	.arrow::after {
-		border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
-	}
-
-	.arrow::before {
-		right: 0;
-		border-left-color: $popover-arrow-outer-color;
-	}
-
-	.arrow::after {
-		right: $popover-border-width;
-		border-left-color: $popover-arrow-color;
-	}
-}
-
-.popover-header {
-	padding: $popover-header-padding-y $popover-header-padding-x;
-	margin-top: 0;
-	margin-bottom: 0;
-	font-size: $font-size-base;
-	color: $popover-header-color;
-	background-color: $popover-header-bg;
-	//border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
-	border-top-left-radius: calc(#{$border-radius} - #{$popover-border-width});
-	border-top-right-radius: calc(#{$border-radius} - #{$popover-border-width});
-
-	&:empty {
-		display: none;
-	}
-}
-
-.popover-body {
-	padding: $popover-body-padding-y $popover-body-padding-x;
-	color: $popover-body-color;
-}
+@use "variables" as *;
+/* Popover ========================================================================== */
+
+@mixin cool-popover {
+    .popover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: var(--cool-zindex-popover);
+        display: block;
+        max-width: var(--cool-popover-max-width);
+        font-size: var(--cool-popover-font-size);
+        word-wrap: break-word;
+        background-color: var(--cool-popover-bg);
+        background-clip: padding-box;
+        border: var(--cool-popover-border-width) solid var(--cool-popover-border-color);
+        border-radius: var(--cool-popover-border-radius);
+        box-shadow: var(--cool-popover-box-shadow);
+        font-family: var(--cool-font-family-base);
+        font-style: normal;
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        text-align: start;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: normal;
+        line-break: auto;
+    }
+
+    .popover-header {
+        padding: var(--cool-popover-header-padding-y) var(--cool-popover-header-padding-x);
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: var(--cool-font-size-base);
+        color: var(--cool-popover-header-color);
+        background-color: var(--cool-popover-header-bg);
+        border-top-left-radius: calc(var(--cool-border-radius) - var(--cool-popover-border-width));
+        border-top-right-radius: calc(var(--cool-border-radius) - var(--cool-popover-border-width));
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    .popover-body {
+        padding: var(--cool-popover-body-padding-y) var(--cool-popover-body-padding-x);
+        color: var(--cool-popover-body-color);
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-popover;
+    }
+} @else {
+    @include cool-popover;
+}