diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 |
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Buttons/Buttons.module.scss | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/components/Buttons/Buttons.module.scss')
| -rw-r--r-- | src/components/Buttons/Buttons.module.scss | 289 |
1 files changed, 0 insertions, 289 deletions
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss deleted file mode 100644 index 0ea9289..0000000 --- a/src/components/Buttons/Buttons.module.scss +++ /dev/null @@ -1,289 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.btn { - display: block; - border: none; - font-size: var(--font-size-md); -} - -.left { - margin-right: auto; -} - -.right { - margin-left: auto; -} - -.center { - margin-left: auto; - margin-right: auto; -} - -.primary { - margin: auto; - padding: var(--spacing-2xs) var(--spacing-md); - background: var(--color-primary); - border: fun.convert-px(2) solid var(--color-bg); - border-radius: fun.convert-px(5); - box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary), - 0 0 0 fun.convert-px(3) var(--color-primary-darker), - fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3) - var(--color-primary-dark); - color: var(--color-fg-inverted); - font-weight: 600; - text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow); - transition: all 0.25s ease-in-out 0s; - - &:hover, - &:focus { - background: var(--color-primary-light); - box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light), - 0 0 0 fun.convert-px(3) var(--color-primary-darker), - fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2) - var(--color-primary-dark); - transform: translateX(#{fun.convert-px(-4)}) - translateY(#{fun.convert-px(-4)}); - } - - &:focus { - text-decoration: underline solid var(--color-fg-inverted) fun.convert-px(2); - } - - &:active { - background: var(--color-primary-dark); - box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary), - 0 0 0 fun.convert-px(3) var(--color-primary-darker), - 0 0 0 0 var(--color-primary-dark); - text-decoration: none; - transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)}); - } -} - -.secondary { - padding: var(--spacing-2xs) var(--spacing-md); - background: var(--color-bg); - border: fun.convert-px(3) solid var(--color-primary); - border-radius: fun.convert-px(5); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), - fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark), - fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), - fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-dark); - color: var(--color-primary); - font-weight: 600; - transition: all 0.35s ease-out 0s; - - &:disabled { - color: var(--color-fg-light); - border-color: var(--color-border-dark); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), - fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker), - fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), - fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker); - cursor: wait; - } - - &:not(:disabled) { - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-3)}) - translateY(#{fun.convert-px(-5)}); - border-color: var(--color-primary-light); - box-shadow: fun.convert-px(2) fun.convert-px(3) 0 0 var(--color-bg), - fun.convert-px(4) fun.convert-px(5) 0 0 var(--color-primary), - fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg), - fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary), - fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0 - var(--color-shadow-light), - fun.convert-px(10) fun.convert-px(12) fun.convert-px(5) - fun.convert-px(1) var(--color-shadow-light); - color: var(--color-primary-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(2); - } - - &:active { - text-decoration: none; - transform: translateX(#{fun.convert-px(5)}) - translateY(#{fun.convert-px(6)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } - } -} - -.tertiary { - display: flex; - flex-flow: row wrap; - place-items: center; - gap: var(--spacing-2xs); - width: max-content; - padding: var(--spacing-2xs) var(--spacing-sm); - position: relative; - background: var(--color-bg); - border: fun.convert-px(3) solid var(--color-primary); - border-radius: fun.convert-px(5); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-weight: 600; - text-decoration: underline transparent 0; - transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s; - - &:hover, - &:focus { - border-color: var(--color-primary-light); - color: var(--color-primary-light); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light), - fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) - var(--color-shadow-light); - transform: scale(1.1); - } - - &:focus { - text-decoration: underline var(--color-primary-light) fun.convert-px(3); - } - - &:active { - border-color: var(--color-primary-dark); - color: var(--color-primary-dark); - box-shadow: 0 0 0 0 var(--color-shadow); - text-decoration: underline transparent 0; - transform: scale(0.94); - } -} - -:global { - [data-theme="dark"] { - :local { - .tertiary { - img[src*="png"] { - background: none; - } - } - } - } -} - -.toolbar { - --draw-border-thickness: #{fun.convert-px(4)}; - --icon-size: 100%; - - display: flex; - flex-flow: row nowrap; - place-items: center; - width: var(--btn-size, 100%); - height: var(--btn-size, 100%); - padding: var(--spacing-2xs); - background: none; - border: none; - font-size: var(--font-size-md); - - &:hover, - &:focus { - --draw-border-color1: var(--color-primary-light); - --draw-border-color2: var(--color-primary-lighter); - - @extend %draw-borders; - } - - @include mix.media("screen") { - @include mix.dimensions("md") { - border-radius: 8%; - } - } -} - -.icon { - display: block; - width: 100%; - height: 100%; - position: relative; - transform-style: preserve-3d; - transform: translate3d(0, 0, 0); - transition: all 0.5s ease-in-out 0s; -} - -.front, -.back { - display: flex; - place-content: center; - width: var(--icon-size); - height: var(--icon-size); - position: absolute; - top: 0; - right: 0; - transition: all 0.6s ease-in 0s; - backface-visibility: hidden; -} - -.front { - transform: scale(1); - z-index: 20; -} - -.back { - transform: scale(0.2) rotateY(180deg); - z-index: 10; -} - -.toolbar--activated { - .icon { - transform: rotateY(180deg); - } - - .front { - transform: scale(0.2); - } - - .back { - transform: scale(1) rotateY(180deg); - } -} - -.search { - background: transparent; - margin-left: calc(var(--btn-size) * -1); - z-index: 5; - transition: all 0.3s ease-in-out 0s; - - svg { - transform: scale(0.85); - transition: all 0.3s ease-in-out 0s; - } - - &:hover, - &:focus { - svg { - transform: scale(0.85) rotate(20deg) translateY(#{fun.convert-px(3)}); - } - } - - &:focus { - outline: var(--color-primary-light) solid fun.convert-px(3); - } - - &:active { - outline: none; - - svg { - transform: scale(0.7); - } - } -} - -.spacing { - margin-top: var(--spacing-md); - margin-bottom: var(--spacing-md); -} |
