diff options
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); -} | 
