🚧 refactor css

owid · Jan 24, 2024 · d80513a · d80513a
1 parent 99c485e
commit d80513a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 35 deletions.
diff --git a/site/gdocs/components/ChartBook.scss b/site/gdocs/components/ChartBook.scss
@@ -1,79 +1,68 @@
 .chart-book {
     $padding: 24px;
     $icon-width: 24px;
+    $duration: 0.4s; // TODO
 
     margin: 0 (-$padding);
 
     .chart-book__header {
         padding: $padding;
     }
 
-    .indicator-row {
+    .accordion-item {
         background-color: whitesmoke;
     }
 
-    .indicator-row + .indicator-row {
+    .accordion-item + .accordion-item {
         margin-top: 4px;
     }
 
-    .indicator-row__header {
-        padding: $padding;
-        width: 100%;
-    }
-
-    .indicator-row__content {
-        padding: 0 $padding;
-    }
-
-    .spacer {
+    .accordion-item__header {
         width: 100%;
-        height: $padding;
-    }
-
-    .indicator-row__header {
-        position: relative;
-    }
-
-    .indicator-row__header > * {
         text-align: left;
+        padding: $padding;
     }
 
-    // .indicator-row__header > *:nth-last-child(2) {
+    // .accordion-item__header > *:nth-last-child(2) {
     //     margin-right: $icon-width;
     // }
 
-    // .indicator-row__header > *:last-child {
+    // .accordion-item__header > *:last-child {
     //     position: absolute;
     //     width: $icon-width;
     //     top: $padding;
     //     right: $padding;
     //     text-align: right;
     // }
 
-    $duration: 0.4s; // TODO
-
-    .indicator-row__content {
+    .accordion-item__content {
+        padding: 0 $padding;
         overflow: hidden;
         transition: height $duration cubic-bezier(0.76, 0, 0.24, 1);
     }
 
-    .indicator-row__content h3 {
+    h3 {
         margin-top: 0;
     }
 
-    .indicator-row__header__title {
+    .spacer {
+        width: 100%;
+        height: $padding;
+    }
+
+    .key-indicator-header__title {
         @include body-2-semibold;
         color: $blue-90;
     }
 
-    .indicator-row__header__metadata {
+    .key-indicator-header__metadata {
         @include body-3-medium;
         color: #60758c;
         opacity: 0;
         transition: opacity 0.2s; // TODO
     }
 
-    .indicator-row__header__metadata.visible {
+    .key-indicator-header__metadata.visible {
         opacity: 1 !important;
         transition: opacity 0.2s $duration; // TODO
     }

diff --git a/site/gdocs/components/ChartBook.tsx b/site/gdocs/components/ChartBook.tsx
@@ -73,9 +73,9 @@ function AccordionItem({
     const { ref, height } = useHeight()
 
     return (
-        <div className="indicator-row">
+        <div className="accordion-item">
             <button
-                className="indicator-row__header"
+                className="accordion-item__header"
                 onClick={() => {
                     if (isOpen) {
                         close()
@@ -89,7 +89,7 @@ function AccordionItem({
             </button>
             <div
                 ref={ref}
-                className={cx("indicator-row__content")}
+                className="accordion-item__content"
                 style={{
                     height: isOpen ? `${height}px` : "0px",
                 }}
@@ -117,9 +117,10 @@ function KeyIndicatorHeader({
     if (!linkedIndicator) return null
 
     return (
-        <div className="grid grid-cols-12">
+        <div className="key-indicator-header grid grid-cols-12">
             <div
-                className={cx("indicator-row__header__title", {
+                className={cx("key-indicator-header__title", {
+                    // TODO
                     "col-start-1 span-cols-4": true,
                     "col-start-1 span-cols-12": false,
                 })}
@@ -128,7 +129,7 @@ function KeyIndicatorHeader({
             </div>
             <div
                 className={cx(
-                    "indicator-row__header__metadata",
+                    "key-indicator-header__metadata",
                     "col-start-5 span-cols-8",
                     {
                         visible: showMetadata,