Fix: Beer Sale Report
This commit is contained in:
@ -8,7 +8,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
50
bookie/src/layout.sass
Normal file
50
bookie/src/layout.sass
Normal file
@ -0,0 +1,50 @@
|
||||
.flex-auto
|
||||
flex: 1 1 auto
|
||||
|
||||
.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
|
||||
align-items: center
|
||||
gap: 20px // sets 20px space between all children
|
||||
|
||||
.space-between
|
||||
justify-content: space-between
|
||||
|
||||
.spacer
|
||||
flex: 1 1 auto
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.warn
|
||||
background-color: red
|
||||
63
bookie/src/square-buttons.sass
Normal file
63
bookie/src/square-buttons.sass
Normal file
@ -0,0 +1,63 @@
|
||||
// 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
|
||||
|
||||
.accent
|
||||
$a: map.get(mat.$orange-palette, 70)
|
||||
color: get-on-color($a) !important
|
||||
background: $a !important
|
||||
|
||||
.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
|
||||
@ -1,24 +1,16 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@use 'sass:color'
|
||||
@use 'sass:math'
|
||||
@use 'sass:map'
|
||||
@use '@angular/material' as mat
|
||||
@tailwind base
|
||||
@tailwind components
|
||||
@tailwind utilities
|
||||
|
||||
// Import your square button styles (adjust path if needed)
|
||||
@use 'square-buttons'
|
||||
@use 'layout'
|
||||
|
||||
// @tailwind base
|
||||
// @tailwind components
|
||||
// @tailwind utilities
|
||||
|
||||
|
||||
@include mat.core()
|
||||
|
||||
@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
|
||||
|
||||
|
||||
html
|
||||
@ -31,10 +23,11 @@ html
|
||||
),
|
||||
typography: (
|
||||
plain-family: Roboto,
|
||||
brankd-family: Roboto
|
||||
brand-family: Roboto
|
||||
),
|
||||
density: 0
|
||||
))
|
||||
font-family: "Helvetica Neue", Montserrat, sans-serif
|
||||
|
||||
html,
|
||||
body
|
||||
@ -44,64 +37,6 @@ 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
|
||||
align-items: center
|
||||
gap: 20px // sets 20px space between all children
|
||||
|
||||
.space-between
|
||||
justify-content: space-between
|
||||
|
||||
.spacer
|
||||
flex: 1 1 auto
|
||||
|
||||
|
||||
|
||||
|
||||
.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
|
||||
|
||||
@ -115,37 +50,3 @@ button.mat-primary
|
||||
button.mat-warn
|
||||
background: var(--mat-sys-error) !important
|
||||
color: var(--mat-sys-on-error) !important
|
||||
|
||||
.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
|
||||
|
||||
.accent
|
||||
$a: map.get(mat.$orange-palette, 70)
|
||||
color: get-on-color($a) !important
|
||||
background: $a !important
|
||||
|
||||
.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
|
||||
|
||||
Reference in New Issue
Block a user