From b9c5ec08395d6f06e5504f3c3848f190795539cf Mon Sep 17 00:00:00 2001 From: Matthew Rowland Date: Sun, 26 Jan 2025 10:31:51 -0800 Subject: [PATCH] chore: Formatting --- .../Catalog/Dashboard/Dashboard.module.scss | 2 +- .../CarouselClass/CarouselClass.module.scss | 115 ++++++++-------- .../DropdownMenu/DropdownMenu.module.scss | 125 +++++++++--------- 3 files changed, 120 insertions(+), 122 deletions(-) diff --git a/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss b/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss index 332740760..608e65b95 100644 --- a/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss +++ b/apps/frontend/src/app/Catalog/Dashboard/Dashboard.module.scss @@ -54,4 +54,4 @@ color: var(--paragraph-color); margin-top: 8px; } -} \ No newline at end of file +} diff --git a/apps/frontend/src/components/CarouselClass/CarouselClass.module.scss b/apps/frontend/src/components/CarouselClass/CarouselClass.module.scss index be4ac4f14..525425169 100644 --- a/apps/frontend/src/components/CarouselClass/CarouselClass.module.scss +++ b/apps/frontend/src/components/CarouselClass/CarouselClass.module.scss @@ -1,65 +1,64 @@ .root { - border: 1px solid var(--border-color); - border-radius: 8px; - flex-shrink: 0; - background-color: var(--foreground-color); - position: relative; - padding: 16px; + border: 1px solid var(--border-color); + border-radius: 8px; + flex-shrink: 0; + background-color: var(--foreground-color); + position: relative; + padding: 16px; + display: flex; + gap: 16px; + align-items: flex-start; + cursor: pointer; + + &:hover .column .icon { + color: var(--heading-color); + } + + .column { display: flex; - gap: 16px; - align-items: flex-start; - cursor: pointer; - - &:hover .column .icon { + flex-direction: column; + gap: 8px; + flex-shrink: 0; + + .icon { + color: var(--paragraph-color); + transition: all 100ms ease-in-out; + } + } + + .text { + flex-grow: 1; + font-size: 14px; + width: 80%; + + .heading { color: var(--heading-color); + margin-bottom: 8px; + line-height: 1; + font-weight: 660; + font-feature-settings: + "cv05" on, + "cv13" on, + "ss07" on, + "cv12" on, + "cv06" on; } - - .column { - display: flex; - flex-direction: column; - gap: 8px; - flex-shrink: 0; - - .icon { - color: var(--paragraph-color); - transition: all 100ms ease-in-out; - } + + .description { + color: var(--paragraph-color); + line-height: 1.5; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; } - - .text { - flex-grow: 1; - font-size: 14px; - width: 80%; - - .heading { - color: var(--heading-color); - margin-bottom: 8px; - line-height: 1; - font-weight: 660; - font-feature-settings: - "cv05" on, - "cv13" on, - "ss07" on, - "cv12" on, - "cv06" on; - } - - .description { - color: var(--paragraph-color); - line-height: 1.5; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 100%; - } - - .row { - display: flex; - gap: 12px; - margin-top: 12px; - align-items: center; - float: bottom; - } + + .row { + display: flex; + gap: 12px; + margin-top: 12px; + align-items: center; + float: bottom; } } - \ No newline at end of file +} diff --git a/packages/theme/src/components/DropdownMenu/DropdownMenu.module.scss b/packages/theme/src/components/DropdownMenu/DropdownMenu.module.scss index 5d3f05476..29e204398 100644 --- a/packages/theme/src/components/DropdownMenu/DropdownMenu.module.scss +++ b/packages/theme/src/components/DropdownMenu/DropdownMenu.module.scss @@ -1,91 +1,90 @@ - .content { - position: fixed; - left: -75px; - z-index: 989; - min-width: 150px; - background-color: var(--foreground-color); - padding: 5px 0; - box-shadow: - 0px 10px 38px -10px rgba(22, 23, 24, 0.35), - 0px 10px 20px -15px rgba(22, 23, 24, 0.2); - animation-duration: 400ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; + position: fixed; + left: -75px; + z-index: 989; + min-width: 150px; + background-color: var(--foreground-color); + padding: 5px 0; + box-shadow: + 0px 10px 38px -10px rgba(22, 23, 24, 0.35), + 0px 10px 20px -15px rgba(22, 23, 24, 0.2); + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; } .content[data-side="top"] { - animation-name: slideDownAndFade; + animation-name: slideDownAndFade; } .content[data-side="right"] { - animation-name: slideLeftAndFade; + animation-name: slideLeftAndFade; } .content[data-side="bottom"] { - animation-name: slideUpAndFade; + animation-name: slideUpAndFade; } -.content[data-side="left"]{ - animation-name: slideRightAndFade; +.content[data-side="left"] { + animation-name: slideRightAndFade; } .item { - font-size: 14px; - line-height: 1; - color: var(--paragraph-color); - border-radius: 3px; - display: flex; - align-items: center; - height: 30px; - padding: 0 20px; - position: relative; - user-select: none; - outline: none; + font-size: 14px; + line-height: 1; + color: var(--paragraph-color); + border-radius: 3px; + display: flex; + align-items: center; + height: 30px; + padding: 0 20px; + position: relative; + user-select: none; + outline: none; } .item:hover { - background-color: var(--button-active-color); + background-color: var(--button-active-color); } .item[data-highlighted] { - color: var(--heading-color); + color: var(--heading-color); } @keyframes slideUpAndFade { - from { - opacity: 0; - transform: translateY(2px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(2px); + } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes slideRightAndFade { - from { - opacity: 0; - transform: translateX(-2px); - } - to { - opacity: 1; - transform: translateX(0); - } + from { + opacity: 0; + transform: translateX(-2px); + } + to { + opacity: 1; + transform: translateX(0); + } } @keyframes slideDownAndFade { - from { - opacity: 0; - transform: translateY(-2px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(-2px); + } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes slideLeftAndFade { - from { - opacity: 0; - transform: translateX(2px); - } - to { - opacity: 1; - transform: translateX(0); - } + from { + opacity: 0; + transform: translateX(2px); + } + to { + opacity: 1; + transform: translateX(0); + } }