223 lines
5 KiB
Sass
223 lines
5 KiB
Sass
@use '/src/styles/variables.sass' as vars
|
|
@use '/src/styles/fonts.sass' as fonts
|
|
@use 'sass:color'
|
|
|
|
$bulmaPrimary: rgb(0, 235, 199)
|
|
$bulmaPrimaryText: rgb(0, 31, 26)
|
|
$bulmaLink: rgb(92, 111, 255)
|
|
$bulmaLinkText: rgb(245, 246, 255)
|
|
$bulmaInfo: rgb(128, 217, 255)
|
|
$bulmaInfoText: rgb(0, 36, 51)
|
|
$bulmaSuccess: rgb(91, 205, 154)
|
|
$bulmaSuccessText: rgb(10, 31, 21)
|
|
$bulmaWarning: rgb(255, 191, 41)
|
|
$bulmaWarningText: rgb(41, 29, 0)
|
|
$bulmaDanger: rgb(255, 128, 153)
|
|
$bulmaDangerText: rgb(26, 0, 5)
|
|
$bulmaLight: rgb(255, 255, 255)
|
|
$bulmaLightText: rgb(46, 51, 61)
|
|
$bulmaDark: rgb(57, 63, 76)
|
|
$bulmaDarkText: rgb(243, 244, 246)
|
|
$bulmaText: rgb(31, 34, 41)
|
|
$bulmaTextText: rgb(235, 236, 240)
|
|
$bulmaGhost: rgba(0,0,0,0)
|
|
$bulmaGhostText: rgb(66, 88, 255)
|
|
|
|
$bootstrapTextLight: rgb(255, 255, 253)
|
|
$bootstrapTextDark: rgb(0, 0, 2)
|
|
$bootstrapTextLink: rgb(139, 185, 254)
|
|
$bootstrapPrimary: rgb(13, 110, 253)
|
|
$bootstrapSecondary: rgb(92, 99, 106)
|
|
$bootstrapSuccess: rgb(21, 115, 71)
|
|
$bootstrapDanger: rgb(187, 45, 59)
|
|
$bootstrapWarning: rgb(255, 202, 44)
|
|
$bootstrapInfo: rgb(49, 210, 242)
|
|
$bootstrapLight: rgb(211, 212, 213)
|
|
$bootstrapDark: rgb(33, 37, 41)
|
|
|
|
.button
|
|
background-color: vars.$primaryColor
|
|
border: none
|
|
color: white
|
|
padding: 0.5rem 1.25rem
|
|
text-align: center
|
|
text-decoration: none
|
|
display: inline-block
|
|
font-size: 1rem
|
|
font-weight: 500
|
|
cursor: pointer
|
|
transition: all 0.2s ease-out
|
|
|
|
&:hover
|
|
background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
|
|
|
|
&:active
|
|
transform: scale(0.95)
|
|
|
|
.bu-primary
|
|
@extend .button
|
|
font-family: fonts.$Inter
|
|
background-color: $bulmaPrimary
|
|
color: $bulmaPrimaryText
|
|
border: none
|
|
font-size: 1rem
|
|
border-radius: 0.375rem
|
|
font-weight: 500
|
|
padding: 0.5rem 1.25rem
|
|
height: 2.5rem
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaPrimary, $lightness: 10%)
|
|
|
|
.bu-link
|
|
@extend .bu-primary
|
|
background-color: $bulmaLink
|
|
color: $bulmaLinkText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaLink, $lightness: 5%)
|
|
|
|
.bu-info
|
|
@extend .bu-primary
|
|
background-color: $bulmaInfo
|
|
color: $bulmaInfoText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaInfo, $lightness: 5%)
|
|
|
|
.bu-success
|
|
@extend .bu-primary
|
|
background-color: $bulmaSuccess
|
|
color: $bulmaSuccessText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaSuccess, $lightness: 5%)
|
|
|
|
.bu-warning
|
|
@extend .bu-primary
|
|
background-color: $bulmaWarning
|
|
color: $bulmaWarningText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaWarning, $lightness: 5%)
|
|
|
|
.bu-danger
|
|
@extend .bu-primary
|
|
background-color: $bulmaDanger
|
|
color: $bulmaDangerText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaDanger, $lightness: 5%)
|
|
|
|
.bu-light
|
|
@extend .bu-primary
|
|
background-color: $bulmaLight
|
|
color: $bulmaLightText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaLight, $lightness: 5%)
|
|
|
|
.bu-dark
|
|
@extend .bu-primary
|
|
background-color: $bulmaDark
|
|
color: $bulmaDarkText
|
|
|
|
&:hover
|
|
background-color: color.adjust($bulmaDark, $lightness: 5%)
|
|
|
|
.bu-text
|
|
@extend .bu-primary
|
|
background-color: rgba(0,0,0,0)
|
|
color: $bulmaTextText
|
|
text-decoration: underline
|
|
|
|
&:hover
|
|
background-color: hsl(221,14%,14%)
|
|
|
|
.bu-ghost
|
|
@extend .bu-primary
|
|
background-color: $bulmaGhost
|
|
color: $bulmaGhostText
|
|
|
|
&:hover
|
|
background-color: transparent
|
|
text-decoration: underline
|
|
|
|
.bo-primary
|
|
@extend .button
|
|
font-family: 'Segoe UI', fonts.$Roboto
|
|
background-color: $bootstrapPrimary
|
|
color: $bootstrapTextLight
|
|
border: none
|
|
font-size: 1rem
|
|
border-radius: 0.375rem
|
|
font-weight: 400
|
|
padding: 0.5rem 1.25rem
|
|
height: 2.5rem
|
|
margin: 0.25rem 0.125rem
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
|
|
|
|
.bo-secondary
|
|
@extend .bo-primary
|
|
background-color: $bootstrapSecondary
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
|
|
|
|
.bo-success
|
|
@extend .bo-primary
|
|
background-color: $bootstrapSuccess
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
|
|
|
|
.bo-danger
|
|
@extend .bo-primary
|
|
background-color: $bootstrapDanger
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapDanger, $blackness: 10%)
|
|
|
|
.bo-warning
|
|
@extend .bo-primary
|
|
background-color: $bootstrapWarning
|
|
color: $bootstrapTextDark
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapWarning, $lightness: 5%)
|
|
|
|
.bo-info
|
|
@extend .bo-primary
|
|
background-color: $bootstrapInfo
|
|
color: $bootstrapTextDark
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapInfo, $lightness: 5%)
|
|
|
|
.bo-light
|
|
@extend .bo-primary
|
|
background-color: $bootstrapLight
|
|
color: $bootstrapTextDark
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapLight, $blackness: 10%)
|
|
|
|
.bo-dark
|
|
@extend .bo-primary
|
|
background-color: $bootstrapDark
|
|
// color: $bootstrapTextDark
|
|
|
|
&:hover
|
|
background-color: color.adjust($bootstrapDark, $lightness: 10%)
|
|
|
|
.bo-link
|
|
@extend .bo-primary
|
|
background-color: transparent
|
|
color: $bootstrapTextLink
|
|
text-decoration: underline
|
|
|
|
&:hover
|
|
color: color.adjust($bootstrapTextLink, $lightness: 5%)
|
|
background-color: transparent
|