diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-20 19:24:21 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-20 19:27:29 +0200 |
| commit | a08291b1586858fc894a27d56f55f87a88f8dbd3 (patch) | |
| tree | 0aa36c8add0ad0ecc07c0f7f20f5af3e2f7abe46 /src/components/molecules/layout/flipping-logo.module.scss | |
| parent | 362cf45bc520a68a1c1be20e1189ca2307577dde (diff) | |
refactor(storybook): reorganize design system
Add more stories for each components and change some components
categories for better organization.
Diffstat (limited to 'src/components/molecules/layout/flipping-logo.module.scss')
| -rw-r--r-- | src/components/molecules/layout/flipping-logo.module.scss | 59 |
1 files changed, 0 insertions, 59 deletions
diff --git a/src/components/molecules/layout/flipping-logo.module.scss b/src/components/molecules/layout/flipping-logo.module.scss deleted file mode 100644 index 89b9499..0000000 --- a/src/components/molecules/layout/flipping-logo.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.logo { - width: var(--logo-size, fun.convert-px(100)); - height: var(--logo-size, fun.convert-px(100)); - position: relative; - border-radius: 50%; - transform-style: preserve-3d; - transition: all 0.6s linear 0s; - - &__front, - &__back { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - backface-visibility: hidden; - background: var(--color-bg); - border: fun.convert-px(2) solid var(--color-primary-dark); - border-radius: 50%; - transition: all 0.6s linear 0s; - - svg, - img { - // !important is required to override next/image styles... - padding: fun.convert-px(2) !important; - border-radius: 50%; - } - } - - &__front { - box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), - fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-light); - } - - &__back { - transform: rotateY(180deg); - } - - &:hover { - transform: rotateY(180deg); - } - - &:hover & { - &__front { - box-shadow: none; - } - - &__back { - box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), - fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-light); - } - } -} |
