tanshu/barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Chore: Moved the formatting to the main style sheet because it was used everywhere.

Browse Source 
Also, moved to sass to get theme colors from the material design library
This commit is contained in:
Amritanshu Agrawal
2023-03-18 23:29:10 +05:30
parent d39712a347
commit 4e4cebf5d4
32 changed files with 367 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
bookie/src/styles.sass
View File

@ -1,12 +1,82 @@
/* 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
height: 100%
overscroll-behavior-y: contain
a
color: rgb(0, 0, 238)
text-decoration: underline
color: rgb(0, 0, 238)
text-decoration: underline
$my-primary: mat.define-palette(mat.$indigo-palette, 500)
$my-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400)
/* The "warn" palette is optional and defaults to red if not specified.*/
$my-warn: mat.define-palette(mat.$red-palette)
$my-disabled: mat.define-palette(mat.$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.get-color-from-palette($my-primary, '200-contrast')
background: mat.get-color-from-palette($my-primary, 200)
.square-button.strong-primary
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-primary, '700-contrast')
background: mat.get-color-from-palette($my-primary, 700)
.square-button.accent
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-accent, '200-contrast')
background: mat.get-color-from-palette($my-accent, 200)
.square-button.strong-accent
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-accent, '700-contrast')
background: mat.get-color-from-palette($my-accent, 700)
.square-button.warn
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-warn, '700-contrast')
background: mat.get-color-from-palette($my-warn, 700)
.square-button.strong-warn
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-warn, '700-contrast')
background: mat.get-color-from-palette($my-warn, 700)
.square-button.disabled
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-disabled, '500-contrast')
background: mat.get-color-from-palette($my-disabled, 500)
.square-button.strong-disabled
/* Read the 500 hue from the primary color palete.*/
color: mat.get-color-from-palette($my-disabled, '800-contrast')
background: mat.get-color-from-palette($my-disabled, 800)