diff --git a/site/gdocs/components/ChartBook.scss b/site/gdocs/components/ChartBook.scss index 8e48d78b730..ebef2b924ff 100644 --- a/site/gdocs/components/ChartBook.scss +++ b/site/gdocs/components/ChartBook.scss @@ -1,6 +1,7 @@ .chart-book { $padding: 24px; $icon-width: 24px; + $duration: 0.4s; // TODO margin: 0 (-$padding); @@ -8,41 +9,25 @@ 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; @@ -50,30 +35,34 @@ // 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 index 231eeaa526a..90cd1407b2d 100644 --- a/site/gdocs/components/ChartBook.tsx +++ b/site/gdocs/components/ChartBook.tsx @@ -73,9 +73,9 @@ function AccordionItem({ const { ref, height } = useHeight() return ( -