64 lines
1.5 KiB
Sass
64 lines
1.5 KiB
Sass
// square-buttons.sass
|
|
|
|
@use 'sass:color'
|
|
@use 'sass:math'
|
|
@use 'sass:map'
|
|
@use '@angular/material' as mat
|
|
|
|
@function get-on-color($background)
|
|
$r: math.div(color.channel($background, "red", $space: rgb), 255)
|
|
$g: math.div(color.channel($background, "green", $space: rgb), 255)
|
|
$b: math.div(color.channel($background, "blue", $space: rgb), 255)
|
|
$l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b
|
|
|
|
@if ($l > 0.5)
|
|
@return #000
|
|
@else
|
|
@return #fff
|
|
|
|
.square-button
|
|
min-width: 150px
|
|
max-width: 150px
|
|
min-height: 150px
|
|
max-height: 150px
|
|
cursor: pointer
|
|
h3
|
|
text-align: center
|
|
padding: 0.5rem
|
|
span
|
|
text-align: center
|
|
|
|
.square-button.primary
|
|
$sbp: map.get(mat.$violet-palette, 70)
|
|
color: get-on-color($sbp) !important
|
|
background: $sbp !important
|
|
|
|
.square-button.strong-primary
|
|
$sbsp: map.get(mat.$violet-palette, 20)
|
|
color: get-on-color($sbsp) !important
|
|
background: $sbsp !important
|
|
|
|
.square-button.accent
|
|
$a: map.get(mat.$orange-palette, 70)
|
|
color: get-on-color($a) !important
|
|
background: $a !important
|
|
|
|
.square-button.strong-accent
|
|
$sa: map.get(mat.$orange-palette, 20)
|
|
color: get-on-color($sa) !important
|
|
background: $sa !important
|
|
|
|
.square-button.warn
|
|
$sbw: map.get(mat.$red-palette, 70)
|
|
color: get-on-color($sbw) !important
|
|
background: $sbw !important
|
|
|
|
.square-button.strong-warn
|
|
$sbsw: map.get(mat.$red-palette, 20)
|
|
color: get-on-color($sbsw) !important
|
|
background: $sbsw !important
|
|
|
|
.square-button.disabled
|
|
color: var(--mat-sys-on-outline) !important
|
|
background: var(--mat-sys-outline) !important
|