Merge pull request #553 from silx-kit/split-css

Split domain slider styles into multiple modules
silx-kit · Mar 10, 2021 · 25133bc · 25133bc
2 parents a45ef5d + 03a00ad
commit 25133bc
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 190 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<HTMLDivElement> & {
   isAuto: boolean;
@@ -23,8 +23,8 @@ const Thumb = forwardRef<HTMLDivElement, Props>((props, ref) => {
       data-error={hasError || undefined}
     >
       <div className={styles.thumbBtnLike}>
-        {isAuto && <AutoIcon />}
-        {hasError && <FiAlertCircle strokeWidth="3" />}
+        {isAuto && <AutoIcon className={styles.icon} />}
+        {hasError && <FiAlertCircle className={styles.icon} strokeWidth="3" />}
       </div>
     </div>
   );

diff --git a/src/h5web/toolbar/controls/DomainSlider/Track.module.css 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
@@ -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;