@finqu/cool 1.2.29 → 2.0.2

package/scss/_tooltip.scss

@@ -1,101 +1,130 @@
-// Tooltip
-// ---------------------------------------------------------------------------------------------------------------
-
-.tooltip {
-	position: fixed;
-	z-index: $zindex-tooltip;
-	display: block;
-	margin: $tooltip-margin;
-	font-size: $tooltip-font-size;
-	word-wrap: break-word;
-	opacity: 0;
-	-webkit-font-smoothing: subpixel-antialiased;
-	@include reset-text;
-
-	&.show {
-		opacity: $tooltip-opacity;
-	}
-
-	.arrow {
-		position: absolute;
-		display: block;
-		width: $tooltip-arrow-width;
-		height: $tooltip-arrow-height;
-
-		&::before {
-			position: absolute;
-			content: '';
-			border-color: transparent;
-			border-style: solid;
-		}
-	}
-}
-
-.tooltip-top {
-	padding: $tooltip-arrow-height 0;
-
-	.arrow {
-		bottom: 0;
-
-		&::before {
-			top: 0;
-			border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-			border-top-color: $tooltip-arrow-color;
-		}
-	}
-}
-
-.tooltip-right {
-	padding: 0 $tooltip-arrow-height;
-
-	.arrow {
-		left: 0;
-		width: $tooltip-arrow-height;
-		height: $tooltip-arrow-width;
-
-		&::before {
-			right: 0;
-			border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-			border-right-color: $tooltip-arrow-color;
-		}
-	}
-}
-
-.tooltip-bottom {
-	padding: $tooltip-arrow-height 0;
-
-	.arrow {
-		top: 0;
-
-		&::before {
-			bottom: 0;
-			border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-			border-bottom-color: $tooltip-arrow-color;
-		}
-	}
-}
-
-.tooltip-left {
-	padding: 0 $tooltip-arrow-height;
-
-	.arrow {
-		right: 0;
-		width: $tooltip-arrow-height;
-		height: $tooltip-arrow-width;
-
-		&::before {
-			left: 0;
-			border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-			border-left-color: $tooltip-arrow-color;
-		}
-	}
-}
-
-.tooltip-inner {
-	max-width: $tooltip-max-width;
-	padding: $tooltip-padding-y $tooltip-padding-x;
-	color: $tooltip-color;
-	text-align: center;
-	background-color: $tooltip-bg;
-	border-radius: $tooltip-border-radius;
-}
+@use "variables" as *;
+/* Tooltip ========================================================================== */
+
+@mixin cool-tooltip {
+    .tooltip {
+        position: fixed;
+        z-index: var(--cool-zindex-tooltip);
+        display: block;
+        margin: var(--cool-tooltip-margin);
+        font-size: var(--cool-tooltip-font-size);
+        word-wrap: break-word;
+        opacity: 0;
+        -webkit-font-smoothing: subpixel-antialiased;
+        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;
+
+        &.show {
+            opacity: var(--cool-tooltip-opacity);
+        }
+
+        .arrow {
+            position: absolute;
+            display: block;
+            width: var(--cool-tooltip-arrow-width);
+            height: var(--cool-tooltip-arrow-height);
+
+            &::before {
+                position: absolute;
+                content: "";
+                border-color: transparent;
+                border-style: solid;
+            }
+        }
+    }
+
+    .tooltip-top {
+        padding: var(--cool-tooltip-arrow-height) 0;
+
+        .arrow {
+            bottom: 0;
+
+            &::before {
+                top: 0;
+                border-width: var(--cool-tooltip-arrow-height) calc(var(--cool-tooltip-arrow-width) * 0.5) 0;
+                border-top-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-right {
+        padding: 0 var(--cool-tooltip-arrow-height);
+
+        .arrow {
+            left: 0;
+            width: var(--cool-tooltip-arrow-height);
+            height: var(--cool-tooltip-arrow-width);
+
+            &::before {
+                right: 0;
+                border-width: calc(var(--cool-tooltip-arrow-width) * 0.5) var(--cool-tooltip-arrow-height)
+                    calc(var(--cool-tooltip-arrow-width) * 0.5) 0;
+                border-right-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-bottom {
+        padding: var(--cool-tooltip-arrow-height) 0;
+
+        .arrow {
+            top: 0;
+
+            &::before {
+                bottom: 0;
+                border-width: 0 calc(var(--cool-tooltip-arrow-width) * 0.5) var(--cool-tooltip-arrow-height);
+                border-bottom-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-left {
+        padding: 0 var(--cool-tooltip-arrow-height);
+
+        .arrow {
+            right: 0;
+            width: var(--cool-tooltip-arrow-height);
+            height: var(--cool-tooltip-arrow-width);
+
+            &::before {
+                left: 0;
+                border-width: calc(var(--cool-tooltip-arrow-width) * 0.5) 0 calc(var(--cool-tooltip-arrow-width) * 0.5)
+                    var(--cool-tooltip-arrow-height);
+                border-left-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-inner {
+        max-width: var(--cool-tooltip-max-width);
+        padding: var(--cool-tooltip-padding-y) var(--cool-tooltip-padding-x);
+        color: var(--cool-tooltip-color);
+        text-align: center;
+        background-color: var(--cool-tooltip-bg);
+        border-radius: var(--cool-tooltip-border-radius);
+    }
+
+    [data-toggle="tooltip"]:disabled {
+        pointer-events: auto;
+        cursor: default;
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-tooltip;
+    }
+} @else {
+    @include cool-tooltip;
+}

package/scss/_typography.scss

@@ -0,0 +1,166 @@
+@use "variables" as *;
+/* Typography ========================================================================== */
+
+@mixin cool-typography {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+        margin-top: 0;
+        margin-bottom: var(--cool-headings-margin-bottom);
+        font-family: var(--cool-headings-font-family);
+        font-weight: var(--cool-headings-font-weight);
+        line-height: var(--cool-headings-line-height);
+        color: var(--cool-headings-color);
+    }
+
+    h1,
+    .h1 {
+        font-size: var(--cool-h1-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h1-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h2,
+    .h2 {
+        font-size: var(--cool-h2-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h2-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h3,
+    .h3 {
+        font-size: var(--cool-h3-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h3-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h4,
+    .h4 {
+        font-size: var(--cool-h4-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h4-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h5,
+    .h5 {
+        font-size: var(--cool-h5-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h5-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h6,
+    .h6 {
+        font-size: var(--cool-h6-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h6-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    .lead {
+        font-size: var(--cool-lead-font-size);
+        font-weight: var(--cool-lead-font-weight);
+        @include text-truncate-generate($font-size: var(--cool-lead-font-size));
+    }
+
+    .display-1 {
+        font-size: var(--cool-display1-size);
+        font-weight: var(--cool-display1-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display1-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-2 {
+        font-size: var(--cool-display2-size);
+        font-weight: var(--cool-display2-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display2-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-3 {
+        font-size: var(--cool-display3-size);
+        font-weight: var(--cool-display3-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display3-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-4 {
+        font-size: var(--cool-display4-size);
+        font-weight: var(--cool-display4-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display4-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    hr {
+        margin-top: var(--cool-hr-margin-y);
+        margin-bottom: var(--cool-hr-margin-y);
+        border: 0;
+        border-top: var(--cool-hr-border-width) solid var(--cool-hr-border-color);
+    }
+
+    small,
+    .small {
+        font-size: var(--cool-small-font-size);
+    }
+
+    kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2em;
+        height: 2em;
+        padding: 0 0.5em;
+        background: var(--cool-color-grey-100);
+        border: 1px solid var(--cool-color-grey-400);
+        border-radius: 0.35em;
+        font-family: inherit;
+        color: var(--cool-color-grey-800);
+
+        @media (hover: none), (pointer: coarse) {
+            display: none;
+        }
+    }
+
+    p {
+        color: currentColor;
+    }
+}
+
+@if $cool-use-base-layer {
+    @layer base {
+        @include cool-typography;
+    }
+} @else {
+    @include cool-typography;
+}