Frontend/src/styles.sass

212 lines
3.8 KiB
Sass

@import 'assets/sass/modules/_fonts.sass'
@import "custom-theme"
@import "~material-design-icons/iconfont/material-icons.css"
mat-card
padding: 0 !important
width: max-content
&.x-centered
margin: auto
&.y-centered
margin-top: 50vh
position: relative
transform: translateY(-70%)
mat-card-header
background-color: $color-primary
color: $light-primary-text
padding: 16px 16px 0 16px
border-radius: 4px 4px 0 0
mat-card-content
margin-top: 16px
padding: 0 16px
&.no-action
padding: 0 24px 16px 24px !important
mat-form-field
width: 100%
mat-card-actions
display: flex !important
padding: 0 24px 16px 24px !important
flex-direction: row
justify-content: flex-end
gap: 1rem
button
text-transform: uppercase
letter-spacing: 1.25px
&.named-table mat-card-content
margin: 0
padding: 0
table
border: none
box-shadow: none
th
border-radius: 0 !important
table
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
max-width: 90vw
th
background-color: $color-primary
color: $light-primary-text !important
text-transform: uppercase
&:first-child
border-top-left-radius: 4px
&:last-child
border-top-right-radius: 4px
th, td
padding: 0 1rem !important
tr.detail-row
height: 0
tr.entity-row.can-expand:not(.expanded-row):hover
background-color: map-get($theme-primary, 50)
tr.entity-row.can-expand:not(.expanded-row):active
background-color: map-get($theme-primary, 100)
.entity-row td
border-bottom-width: 0
.entity-detail
overflow: hidden
display: flex
.disabled *
display: none
mat-expansion-panel.table-title
mat-expansion-panel-header
background-color: $color-primary
&:hover, &:focus
background-color: $color-primary !important
&.header-field .mat-form-field-flex
background-color: white
.mat-form-field-outline
opacity: 1
&:first-child
opacity: 0
mat-panel-title
color: $light-primary-text !important
font-weight: bold
text-transform: uppercase
mat-panel-description
color: $light-primary-text
mat-form-field
display: inline
&.mat-expanded mat-expansion-panel-header
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.mat-expansion-panel-body
padding: 0 !important
table
width: 100%
th
border-top-left-radius: 0
border-top-right-radius: 0
cre-mix-table.no-top-margin mat-expansion-panel
margin-top: 0 !important
button
text-transform: uppercase
font-weight: 500
&.mat-accent
color: $light-primary-text !important
mat-form-field
&.w-auto
.mat-form-field-infix
width: auto !important
&.dark
input
caret-color: $light-primary-text !important
mat-label, input
color: $light-primary-text
.mat-form-field-underline, .mat-form-field-ripple
background-color: $light-primary-text !important
mat-slider
width: 100%
div.empty
color: $dark-secondary-text
margin: auto
.action-bar
display: flex
flex-direction: row
justify-content: flex-end
padding: 1.5rem 3rem
button
margin-left: 1rem
&.backward
justify-content: flex-start
button
margin-left: 0
margin-right: 1rem
.alert p
margin-bottom: 0
.light-text
color: rgba(0, 0, 0, 0.54)
.dark-background
position: fixed
width: 100%
height: 100%
top: 0
left: 0
background-color: black
opacity: 0.05
z-index: -1
.darker-background
position: fixed
width: 100%
height: 100%
top: 0
left: 0
background-color: black
opacity: 0.4
z-index: 10
.color-warning
color: #fdd835
.color-green
color: green