PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor password generator styling for tablet view

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-04 15:50:19 +08:00
parent 0481591d02
commit 9a4749f4ab
1 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/Password-Generator/PasswordGeneratorComponent.sass
View file

@ -43,10 +43,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
flex-direction: column flex-direction: column
.slider--group .slider--group
// grid-area: slider--group
padding: 0 0 0 1rem padding: 0 0 0 1rem
flex-grow: 0 flex-grow: 0
@media screen and (max-width: view.$tablet)
padding: 0 2rem 0 2rem
justify-content: center
align-items: center
.display--group .display--group
padding: 3rem 1rem 1rem 1rem padding: 3rem 1rem 1rem 1rem
@ -104,7 +108,7 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
letter-spacing: 1px letter-spacing: 1px
font-size: 1rem font-size: 1rem
font-weight: 500 font-weight: 500
// font-family: 'Inter' font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily
.button--group .button--group
display: flex display: flex
@ -163,6 +167,14 @@ $toggleOnColor: rgba(53, 155, 80, 0.993)
outline: none outline: none
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%) box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
@media screen and (max-width: view.$tablet)
display: flex
flex-direction: column
align-items: center
justify-content: center
text-align: center
width: 100vw
.alert .alert
border-radius: 6px border-radius: 6px
padding: 1rem 1.25rem padding: 1rem 1.25rem