117 lines
2.9 KiB
Sass
117 lines
2.9 KiB
Sass
/* You can add global styles to this file, and also import other style files */
|
|
@use 'sass:map'
|
|
@use '@angular/material' as mat
|
|
@tailwind base
|
|
@tailwind components
|
|
@tailwind utilities
|
|
|
|
@include mat.core()
|
|
|
|
html,
|
|
body
|
|
height: 100%
|
|
overscroll-behavior-y: contain
|
|
a
|
|
color: rgb(0, 0, 238)
|
|
text-decoration: underline
|
|
|
|
.basis-15
|
|
flex-basis: 15%
|
|
|
|
.basis-1-6
|
|
flex-basis: 16.67%
|
|
|
|
.basis-1-5
|
|
flex-basis: 20%
|
|
|
|
.basis-1-4
|
|
flex-basis: 25%
|
|
|
|
.basis-30
|
|
flex-basis: 30%
|
|
|
|
.basis-1-3
|
|
flex-basis: 33.33%
|
|
|
|
.basis-2-5
|
|
flex-basis: 40%
|
|
|
|
.basis-1-2
|
|
flex-basis: 50%
|
|
|
|
.basis-3-4
|
|
flex-basis: 75%
|
|
|
|
.basis-4-5
|
|
flex-basis: 80%
|
|
|
|
.row-container
|
|
display: flex
|
|
flex-direction: row
|
|
gap: 20px // sets 20px space between all children
|
|
|
|
$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500)
|
|
$my-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400)
|
|
/* The "warn" palette is optional and defaults to red if not specified.*/
|
|
$my-warn: mat.m2-define-palette(mat.$m2-red-palette)
|
|
$my-disabled: mat.m2-define-palette(mat.$m2-grey-palette, 500)
|
|
|
|
.square-button
|
|
min-width: 150px
|
|
max-width: 150px
|
|
min-height: 150px
|
|
max-height: 150px
|
|
cursor: pointer
|
|
// margin: 20px
|
|
h3
|
|
text-align: center
|
|
padding: 0.5rem
|
|
span
|
|
text-align: center
|
|
|
|
.center
|
|
text-align: center
|
|
|
|
.warn
|
|
background-color: red
|
|
|
|
.square-button.primary
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-primary, '200-contrast')
|
|
background: mat.m2-get-color-from-palette($my-primary, 200)
|
|
|
|
.square-button.strong-primary
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-primary, '700-contrast')
|
|
background: mat.m2-get-color-from-palette($my-primary, 700)
|
|
|
|
.square-button.accent
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-accent, '200-contrast')
|
|
background: mat.m2-get-color-from-palette($my-accent, 200)
|
|
|
|
.square-button.strong-accent
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-accent, '700-contrast')
|
|
background: mat.m2-get-color-from-palette($my-accent, 700)
|
|
|
|
.square-button.warn
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
|
|
background: mat.m2-get-color-from-palette($my-warn, 700)
|
|
|
|
.square-button.strong-warn
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
|
|
background: mat.m2-get-color-from-palette($my-warn, 700)
|
|
|
|
.square-button.disabled
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-disabled, '500-contrast')
|
|
background: mat.m2-get-color-from-palette($my-disabled, 500)
|
|
|
|
.square-button.strong-disabled
|
|
/* Read the 500 hue from the primary color palete.*/
|
|
color: mat.m2-get-color-from-palette($my-disabled, '800-contrast')
|
|
background: mat.m2-get-color-from-palette($my-disabled, 800)
|