Added counter

This commit is contained in:
Patrick Alvin Alcala 2025-08-26 17:59:06 +08:00
parent 78b516a6a4
commit 3029cafec6
3 changed files with 83 additions and 5 deletions

View file

@ -0,0 +1,47 @@
.counter
display: flex
flex-direction: column
align-items: center
gap: 1rem
margin: 2rem
color: white
border: 1px solid rgba(22, 34, 60, 0.5)
padding: 1rem 2rem
border-radius: 16px
background: rgba(134, 152, 217, 0.1)
&__display
font-size: 1.75rem
font-weight: bold
&__buttons
display: flex
justify-content: center
gap: 0.25rem
// &:hover
// background: color.adjust(vars.$primaryColor, $blackness: 20%)
&__decrement
width: 2rem
height: 2.25rem
padding: auto
font-size: 1rem
font-weight: bold
cursor: pointer
text-decoration: none
background-color: rgba(86, 14, 14, 0.915)
border-radius: 8px
color: white
border: 1px solid rgba(255,255,255,0.2)
&:active
transform: scale(0.95)
&__increment
@extend .counter__decrement
background-color: rgb(14, 42, 86, 0.915)
&:active
transform: scale(0.95)