reset commits

src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass

@@ -0,0 +1,203 @@
+@use '/src/assets/css/variables.sass' as vars
+@use '/src/assets/css/viewport.sass' as view
+@use 'sass:color'
+
+$toggleOffColor: rgba(126, 206, 241, 0.286)
+$toggleOnColor: rgba(53, 155, 80, 0.993)
+
+.section
+  display: flex
+  flex-direction: row
+  align-items: flex-start
+  padding: 2rem
+  border: 1px solid rgba(255, 255, 255, 0.3)
+  border-radius: 16px
+  color: #ffffff
+  font-family: 'Inter', sans-serif
+  gap: 2rem
+
+  @media screen and (max-width: view.$tablet)
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    padding: 2rem
+    border: 1px solid rgba(255, 255, 255, 0.3)
+    border-radius: 16px
+    color: #ffffff
+    font-family: 'Inter', sans-serif
+
+.toggle--group
+  display: flex
+  flex-direction: column
+  justify-content: flex-start
+  align-items: flex-start
+  padding: 0 2rem 0 0
+  margin: 0
+
+.right--side
+  display: flex
+  flex-direction: column
+
+.slider--group
+  // grid-area: slider--group
+  padding: 0 0 0 1rem
+  flex-grow: 0
+
+.display--group
+  padding: 3rem 1rem 1rem 1rem
+
+.toggle
+  color: white
+  padding: 0.25rem 0
+  display: flex
+  flex-direction: row
+  gap: 0.5rem
+  align-items: center
+  height: auto
+
+  &__text
+    font-size: 1rem
+
+  &__switch
+    visibility: hidden
+    width: 0
+    height: 0
+
+    &:checked + label
+      background-color: $toggleOnColor
+      transition: background-color 0.5s ease-in-out
+
+    &:checked + label:after
+      left: calc(100% - 6px)
+      transform: translateX(-70%)
+
+.password-display
+  display: flex
+  flex-direction: column
+  justify-content: flex-start
+  align-items: flex-start
+  color: #ffffff
+  // margin-top: 20px
+  // border: 1px solid #ffffff
+  // padding: 1rem
+  // border-radius: 5px
+  // width: 30rem
+
+  &__label
+    font-weight: bold
+    margin: 1rem 0 -0.5rem 0
+
+  &__content
+    border: 1px solid color.adjust(vars.$background, $lightness: 20%)
+    background-color: color.adjust(vars.$background, $lightness: 5%)
+    color: color.adjust(vars.$background, $lightness: 80%)
+    width: 23rem
+    height: auto
+    padding: 1rem
+    border-radius: 5px
+    text-align: left
+    word-wrap: break-word
+    letter-spacing: 1px
+    font-size: 1rem
+    font-weight: 500
+    // font-family: 'Inter'
+
+.button--group
+  display: flex
+  flex-direction: row
+  justify-content: flex-start
+  gap: 1rem
+  // margin-top: 20px
+  // border: 1px solid #ffffff
+  // padding: 1rem
+  // border-radius: 5px
+  width: 30rem
+  margin: 1rem 0 0 0
+
+.slider
+  display: flex
+  flex-direction: column
+  align-items: center
+  user-select: none
+  touch-action: none
+  margin: 1rem 0 0 0
+  gap: 0.5rem
+  width: 41rem
+  cursor: pointer
+
+  &__label
+    display: flex
+    flex-direction: row
+    gap: 0.5rem
+    width: 100%
+
+  &__track
+    background-color: hsl(240 6% 90%)
+    position: relative
+    border-radius: 9999px
+    height: 8px
+    width: 100%
+
+  &__range
+    position: absolute
+    background-color: $toggleOnColor
+    border-radius: 9999px
+    height: 100%
+
+  &__thumb
+    display: block
+    width: 16px
+    height: 16px
+    background-color: $toggleOnColor
+    border-radius: 9999px
+    top: -4px
+
+    &:hover
+      box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
+
+    &:focus
+      outline: none
+      box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
+
+.alert
+  border-radius: 6px
+  padding: 1rem 1.25rem
+  background-color: rgba(12, 31, 39, 0.991)
+  border: 1px solid color.adjust($toggleOffColor, $lightness: 2%)
+  color: rgba(126, 206, 241, 0.748)
+  font-size: 1.25rem
+
+.alert--container
+  position: fixed
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  z-index: 1000
+
+.checkbox
+  display: inline-flex
+  align-items: center
+
+  &__control
+    height: 20px
+    width: 20px
+    border-radius: 6px
+    background-color: #e5e8ec
+    cursor: pointer
+
+  &__input:focus-visible + &__control
+    // outline: 2px solid hsl(200 98% 39%)
+    outline-offset: 2px
+
+  &__control[data-checked]
+    border-color: color.adjust($toggleOnColor, $blackness: 20%)
+    background-color: $toggleOnColor
+    color: white
+
+  &__label
+    display: none
+    margin-left: 6px
+    color: hsl(240 6% 10%)
+    font-size: 14px
+    user-select: none