Refactor Card component to use variables from CSS
- Removed inline styles for colors and radius - Imported `variables.sass` and used `$textColor` and `$borderRadius` - Adjusted imports and formatting
This commit is contained in:
parent
b021bf0f65
commit
b01928ead3
1 changed files with 3 additions and 5 deletions
|
|
@ -1,23 +1,21 @@
|
|||
@use '/src/assets/css/viewport.sass' as view
|
||||
@use '/src/assets/css/variables.sass' as vars
|
||||
@use 'sass:color'
|
||||
|
||||
$borderColor: rgba(72, 100, 114, 0.463)
|
||||
$borderColorHover: rgba(88, 133, 135, 0.931)
|
||||
$backgroundColor: #1e1e1e
|
||||
$borderRadius: 8px
|
||||
$boxShadow: rgba(72, 100, 114, 0.463) 0px 4px 12px
|
||||
$textColor: #ffffff
|
||||
|
||||
.card
|
||||
height: 10rem
|
||||
// width: clamp(10rem, 25vw, 24rem)
|
||||
width: 24rem
|
||||
border: 2px solid $borderColor
|
||||
padding: 20px
|
||||
margin-bottom: 20px
|
||||
cursor: pointer
|
||||
color: $textColor
|
||||
border-radius: $borderRadius
|
||||
color: vars.$textColor
|
||||
border-radius: vars.$borderRadius
|
||||
transition: border-color 0.3s ease-out
|
||||
|
||||
@media screen and (max-width: view.$tablet)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue