From d0713434d72dd4ba2b3d6a1972af9e9e0b364473 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 15 Aug 2024 00:29:27 +0800 Subject: [PATCH] style: Tooltip style --- .prettierrc.toml | 2 + thaw/src/tooltip/tooltip.css | 100 +++++++++++++++++------------------ 2 files changed, 52 insertions(+), 50 deletions(-) diff --git a/.prettierrc.toml b/.prettierrc.toml index a8b8f32..2cfd61b 100644 --- a/.prettierrc.toml +++ b/.prettierrc.toml @@ -1,3 +1,5 @@ +tabWidth = 4 + [[overrides]] files = "*.md" options = { proseWrap = "never", printWidth = 120 } diff --git a/thaw/src/tooltip/tooltip.css b/thaw/src/tooltip/tooltip.css index db308a4..0136599 100644 --- a/thaw/src/tooltip/tooltip.css +++ b/thaw/src/tooltip/tooltip.css @@ -1,130 +1,130 @@ div.thaw-tooltip-content { - position: relative; - transform-origin: inherit; + position: relative; + transform-origin: inherit; - padding: 4px 11px 6px; - border-radius: var(--borderRadiusMedium); - border: 1px solid var(--colorTransparentStroke); - line-height: var(--lineHeightBase200); - font-size: var(--fontSizeBase200); - font-family: var(--fontFamilyBase); - max-width: 240px; - overflow-wrap: break-word; - box-sizing: border-box; - filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) - drop-shadow(0 4px 8px var(--colorNeutralShadowKey)); + padding: 4px 11px 6px; + border-radius: var(--borderRadiusMedium); + border: 1px solid var(--colorTransparentStroke); + line-height: var(--lineHeightBase200); + font-size: var(--fontSizeBase200); + font-family: var(--fontFamilyBase); + max-width: 240px; + overflow-wrap: break-word; + box-sizing: border-box; + filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) + drop-shadow(0 4px 8px var(--colorNeutralShadowKey)); } div.thaw-tooltip-content--normal { - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } div.thaw-tooltip-content--inverted { - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundStaticInverted); + background-color: var(--colorNeutralBackgroundStatic); + color: var(--colorNeutralForegroundStaticInverted); } .thaw-tooltip-content__angle { - position: absolute; - background-color: inherit; - width: 8px; - height: 8px; + position: absolute; + background-color: inherit; + width: 8px; + height: 8px; } .thaw-tooltip { - display: inline-block; + display: inline-block; } [data-thaw-placement="top-start"] > .thaw-tooltip-content, [data-thaw-placement="top-end"] > .thaw-tooltip-content, [data-thaw-placement="top"] > .thaw-tooltip-content { - margin-bottom: 7px; + margin-bottom: 7px; } [data-thaw-placement="top-start"] .thaw-tooltip-content__angle, [data-thaw-placement="top-end"] .thaw-tooltip-content__angle, [data-thaw-placement="top"] .thaw-tooltip-content__angle { - transform: rotate(45deg) translateX(-7px); - bottom: -10px; - left: 50%; + transform: rotate(45deg) translateX(-7px); + bottom: -10px; + left: 50%; } [data-thaw-placement="bottom-start"] > .thaw-tooltip-content, [data-thaw-placement="bottom-end"] > .thaw-tooltip-content, [data-thaw-placement="bottom"] > .thaw-tooltip-content { - margin-top: 7px; + margin-top: 7px; } [data-thaw-placement="bottom-start"] .thaw-tooltip-content__angle, [data-thaw-placement="bottom-end"] .thaw-tooltip-content__angle, [data-thaw-placement="bottom"] .thaw-tooltip-content__angle { - transform: rotate(45deg) translateY(7px); - top: -10px; - left: 50%; + transform: rotate(45deg) translateY(7px); + top: -10px; + left: 50%; } [data-thaw-placement="left-start"] > .thaw-tooltip-content, [data-thaw-placement="left-end"] > .thaw-tooltip-content, [data-thaw-placement="left"] > .thaw-tooltip-content { - margin-right: 7px; + margin-right: 7px; } [data-thaw-placement="left-start"] .thaw-tooltip-content__angle, [data-thaw-placement="left-end"] .thaw-tooltip-content__angle, [data-thaw-placement="left"] .thaw-tooltip-content__angle { - transform: rotate(45deg) translateX(-7px); - top: 50%; - right: -10px; + transform: rotate(45deg) translateX(-7px); + top: 50%; + right: -10px; } [data-thaw-placement="right-start"] > .thaw-tooltip-content, [data-thaw-placement="right-end"] > .thaw-tooltip-content, [data-thaw-placement="right"] > .thaw-tooltip-content { - margin-left: 7px; + margin-left: 7px; } [data-thaw-placement="right-start"] .thaw-tooltip-content__angle, [data-thaw-placement="right-end"] .thaw-tooltip-content__angle, [data-thaw-placement="right"] .thaw-tooltip-content__angle { - transform: rotate(45deg) translateY(-7px); - top: 50%; - left: -10px; + transform: rotate(45deg) translateY(-7px); + top: 50%; + left: -10px; } [data-thaw-placement="bottom-start"] .thaw-tooltip-content__angle, [data-thaw-placement="top-start"] .thaw-tooltip-content__angle { - left: 16px; + left: 16px; } [data-thaw-placement="bottom-end"] .thaw-tooltip-content__angle, [data-thaw-placement="top-end"] .thaw-tooltip-content__angle { - left: initial; - right: 7px; + left: initial; + right: 7px; } [data-thaw-placement="right-start"] .thaw-tooltip-content__angle, [data-thaw-placement="left-start"] .thaw-tooltip-content__angle { - top: 16px; + top: 16px; } [data-thaw-placement="right-end"] .thaw-tooltip-content__angle, [data-thaw-placement="left-end"] .thaw-tooltip-content__angle { - top: initial; - bottom: 7px; + top: initial; + bottom: 7px; } .thaw-tooltip-content.tooltip-transition-enter-from, .thaw-tooltip-content.tooltip-transition-leave-to { - opacity: 0; - transform: scale(0.85); + opacity: 0; + transform: scale(0.85); } .thaw-tooltip-content.tooltip-transition-enter-to, .thaw-tooltip-content.tooltip-transition-leave-from { - transform: scale(1); - opacity: 1; + transform: scale(1); + opacity: 1; } .thaw-tooltip-content.tooltip-transition-leave-active, .thaw-tooltip-content.tooltip-transition-enter-active { - transition: opacity var(--durationNormal) var(--curveDecelerateMid), - transform var(--durationNormal) var(--curveDecelerateMid); + transition: opacity var(--durationNormal) var(--curveDecelerateMid), + transform var(--durationNormal) var(--curveDecelerateMid); }