From 03a00ada5b9bb824dd29d73dfe9287821a62f30e Mon Sep 17 00:00:00 2001 From: Axel Bocciarelli Date: Wed, 10 Mar 2021 09:20:50 +0100 Subject: [PATCH] Split domain slider styles into multiple modules --- .../DomainSlider/DomainSlider.module.css | 175 ------------------ .../DomainSlider/DomainTooltip.module.css | 90 +++++++++ .../controls/DomainSlider/DomainTooltip.tsx | 2 +- .../controls/DomainSlider/Thumb.module.css | 51 +++++ .../toolbar/controls/DomainSlider/Thumb.tsx | 6 +- .../controls/DomainSlider/Track.module.css | 20 ++ .../toolbar/controls/DomainSlider/Track.tsx | 2 +- 7 files changed, 166 insertions(+), 180 deletions(-) create mode 100644 src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css create mode 100644 src/h5web/toolbar/controls/DomainSlider/Thumb.module.css create mode 100644 src/h5web/toolbar/controls/DomainSlider/Track.module.css diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css index d7547f028..efe536221 100644 --- a/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css +++ b/src/h5web/toolbar/controls/DomainSlider/DomainSlider.module.css @@ -8,10 +8,6 @@ --thumb-size-auto: 1.25rem; } -.sliderWrapper { - display: flex; -} - .slider { display: flex; width: 8rem; @@ -24,174 +20,3 @@ opacity: 0.5; pointer-events: none; } - -.track { - position: relative; - flex: 1 1 0%; - align-self: center; - height: 0.5rem; - margin: 0 calc(var(--thumb-size) / 2); /* make track end in middle of thumbs */ - background-color: var(--secondary-dark-15); - box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color); - border-radius: 0.25rem; - overflow: hidden; /* crop data track to root track's border radius */ -} - -.dataTrack { - position: absolute; - top: 0; - bottom: 0; - background-color: var(--secondary-dark); - box-shadow: 0 -2px 3px inset var(--secondary-darker); - border-radius: 2px; -} - -.thumb { - top: 0; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - width: var(--thumb-size); /* fixed size regardless of autoscale */ - cursor: ew-resize; -} - -.thumbBtnLike { - composes: btnLike from '../../Toolbar.module.css'; - position: relative; - padding: 0; - box-shadow: var(--btn-shadow-idle) var(--btn-shadow-dark-color); - border-radius: 50%; -} - -.thumb[data-auto='false'] > .thumbBtnLike { - width: var(--thumb-size); - height: var(--thumb-size); - background-color: var(--secondary); -} - -.thumb[data-auto='true'] > .thumbBtnLike { - width: var(--thumb-size-auto); - height: var(--thumb-size-auto); - background-color: var(--secondary-light); -} - -.thumb[data-auto='false']:hover > .thumbBtnLike { - opacity: 0.8; - box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color); -} - -.thumb[data-auto='true']:hover > .thumbBtnLike { - box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color); -} - -.thumb[data-error] { - color: var(--warn); - font-size: 1.125em; -} - -.thumbBtnLike > svg { - position: absolute; - top: 50%; - left: 50%; - /* Tweak centering of autoscale icons to compensate for inset shadows */ - transform: translate(-52%, -52%); -} - -.autoBtnLike { - composes: btnLike from '../../Toolbar.module.css'; - font-size: 0.875em; - border-radius: 0.875rem; - color: var(--black); -} - -.tooltip { - composes: popup from '../../Toolbar.module.css'; - left: 50%; - min-width: 17em; - transform: translate(-50%, 100%); -} - -.tooltipInner { - composes: popupInner from '../../Toolbar.module.css'; - padding: 1rem 0.75rem; -} - -.tooltipInner > p { - margin-bottom: 0.75rem; -} - -.tooltipInner > p:last-child { - margin-bottom: 0; -} - -.minMax { - display: grid; - grid-template-columns: [label] auto [value] 1fr [actions] 2.5em; - grid-gap: 0.5rem; - margin-bottom: 1rem; - font-weight: bold; - color: var(--near-black); -} - -.minMax > h3, -.minMax > p { - margin-bottom: 0; -} - -.minMax > h3 { - grid-column: label; - text-transform: uppercase; - font-size: inherit; -} - -.value { - grid-column: value; - display: flex; - align-items: center; - text-align: right; -} - -.value::before { - flex: 1 1 0%; - content: ''; - min-width: 1em; - margin-right: 0.5rem; - margin-top: 0.5rem; - border-bottom: 2px dotted currentColor; - color: var(--black); -} - -.value[data-error] { - color: var(--warn); -} - -.dataRange { - white-space: nowrap; -} - -.dataRange > span { - margin-left: 0.5rem; -} - -.autoscale { - display: flex; - align-items: center; -} - -.autoscale > button:first-of-type { - margin-left: 0.5rem; -} - -.error { - font-size: 0.9375em; - font-weight: 600; - color: var(--warn); -} - -.error > svg { - vertical-align: -0.125em; -} -.error > strong { - font-weight: bold; -} diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css new file mode 100644 index 000000000..1671a0f9f --- /dev/null +++ b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css @@ -0,0 +1,90 @@ +.tooltip { + composes: popup from '../../Toolbar.module.css'; + left: 50%; + min-width: 17em; + transform: translate(-50%, 100%); +} + +.tooltipInner { + composes: popupInner from '../../Toolbar.module.css'; + padding: 1rem 0.75rem; +} + +.tooltipInner > p { + margin-bottom: 0.75rem; +} + +.tooltipInner > p:last-child { + margin-bottom: 0; +} + +.minMax { + display: grid; + grid-template-columns: [label] auto [value] 1fr [actions] 2.5em; + grid-gap: 0.5rem; + margin-bottom: 1rem; + font-weight: bold; + color: var(--near-black); +} + +.minMax > h3, +.minMax > p { + margin-bottom: 0; +} + +.minMax > h3 { + grid-column: label; + text-transform: uppercase; + font-size: inherit; +} + +.value { + grid-column: value; + display: flex; + align-items: center; + text-align: right; +} + +.value::before { + flex: 1 1 0%; + content: ''; + min-width: 1em; + margin-right: 0.5rem; + margin-top: 0.5rem; + border-bottom: 2px dotted currentColor; + color: var(--black); +} + +.value[data-error] { + color: var(--warn); +} + +.dataRange { + white-space: nowrap; +} + +.dataRange > span { + margin-left: 0.5rem; +} + +.autoscale { + display: flex; + align-items: center; +} + +.autoscale > button:first-of-type { + margin-left: 0.5rem; +} + +.error { + font-size: 0.9375em; + font-weight: 600; + color: var(--warn); +} + +.error > svg { + vertical-align: -0.125em; +} +.error > strong { + font-weight: bold; +} diff --git a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx index 3dd8ed4d4..39c1f5012 100644 --- a/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx +++ b/src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx @@ -4,7 +4,7 @@ import { formatValue } from '../../../utils'; import type { DomainErrors } from '../../../vis-packs/core/models'; import ToggleBtn from '../ToggleBtn'; import BoundErrorMessage from './BoundErrorMessage'; -import styles from './DomainSlider.module.css'; +import styles from './DomainTooltip.module.css'; interface Props { id: string; diff --git a/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css b/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css new file mode 100644 index 000000000..c06509139 --- /dev/null +++ b/src/h5web/toolbar/controls/DomainSlider/Thumb.module.css @@ -0,0 +1,51 @@ +.thumb { + top: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + width: var(--thumb-size); /* fixed size regardless of autoscale */ + cursor: ew-resize; +} + +.thumbBtnLike { + position: relative; + padding: 0; + border-radius: 50%; + box-shadow: var(--btn-shadow-idle) var(--btn-shadow-dark-color); + transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out; +} + +.thumb[data-auto='false'] > .thumbBtnLike { + width: var(--thumb-size); + height: var(--thumb-size); + background-color: var(--secondary); +} + +.thumb[data-auto='true'] > .thumbBtnLike { + width: var(--thumb-size-auto); + height: var(--thumb-size-auto); + background-color: var(--secondary-light); +} + +.thumb[data-auto='false']:hover > .thumbBtnLike { + opacity: 0.8; + box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color); +} + +.thumb[data-auto='true']:hover > .thumbBtnLike { + box-shadow: var(--btn-shadow-idle-hover) var(--btn-shadow-dark-color); +} + +.thumb[data-error] { + color: var(--warn); + font-size: 1.125em; +} + +.icon { + position: absolute; + top: 50%; + left: 50%; + /* Tweak centering of autoscale icons to compensate for inset shadows */ + transform: translate(-52%, -52%); +} diff --git a/src/h5web/toolbar/controls/DomainSlider/Thumb.tsx b/src/h5web/toolbar/controls/DomainSlider/Thumb.tsx index 70f317af9..6614b8f50 100644 --- a/src/h5web/toolbar/controls/DomainSlider/Thumb.tsx +++ b/src/h5web/toolbar/controls/DomainSlider/Thumb.tsx @@ -1,7 +1,7 @@ import { forwardRef, HTMLProps } from 'react'; import { FiAlertCircle } from 'react-icons/fi'; import type { IconType } from 'react-icons/lib'; -import styles from './DomainSlider.module.css'; +import styles from './Thumb.module.css'; type Props = HTMLProps & { isAuto: boolean; @@ -23,8 +23,8 @@ const Thumb = forwardRef((props, ref) => { data-error={hasError || undefined} >
- {isAuto && } - {hasError && } + {isAuto && } + {hasError && }
); diff --git a/src/h5web/toolbar/controls/DomainSlider/Track.module.css b/src/h5web/toolbar/controls/DomainSlider/Track.module.css new file mode 100644 index 000000000..b7a8bb7f8 --- /dev/null +++ b/src/h5web/toolbar/controls/DomainSlider/Track.module.css @@ -0,0 +1,20 @@ +.track { + position: relative; + flex: 1 1 0%; + align-self: center; + height: 0.5rem; + margin: 0 calc(var(--thumb-size) / 2); /* make track end in middle of thumbs */ + background-color: var(--secondary-dark-15); + box-shadow: var(--btn-shadow-pressed) var(--btn-shadow-color); + border-radius: 0.25rem; + overflow: hidden; /* crop data track to root track's border radius */ +} + +.dataTrack { + position: absolute; + top: 0; + bottom: 0; + background-color: var(--secondary-dark); + box-shadow: 0 -2px 3px inset var(--secondary-darker); + border-radius: 2px; +} diff --git a/src/h5web/toolbar/controls/DomainSlider/Track.tsx b/src/h5web/toolbar/controls/DomainSlider/Track.tsx index b436807b7..4207b0604 100644 --- a/src/h5web/toolbar/controls/DomainSlider/Track.tsx +++ b/src/h5web/toolbar/controls/DomainSlider/Track.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import type { AxisScale, Domain } from '../../../vis-packs/core/models'; -import styles from './DomainSlider.module.css'; +import styles from './Track.module.css'; interface Props { scale: AxisScale;