You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
2.3 KiB
156 lines
2.3 KiB
$primary-color-dark: #1976D2; |
|
$primary-color: #2196F3; |
|
$primary-color-light: #BBDEFB; |
|
$primary-color-text: #FFFFFF; |
|
$accent-color: #2196F3; |
|
$primary-text-color: #212121; |
|
$secondary-text-color: #757575; |
|
$divider-color: #BDBDBD; |
|
|
|
@use "@material/theme" with ( |
|
$primary: $primary-color, |
|
$secondary: $accent-color, |
|
$background: $primary-color-light, |
|
); |
|
|
|
@use "material-components-web"; |
|
@use "@material/switch"; |
|
@use "@material/card"; |
|
@use "@material/button"; |
|
@use "@material/tab"; |
|
@import "@material/top-app-bar/mdc-top-app-bar"; |
|
|
|
|
|
|
|
@mixin eightspacing{ |
|
margin: 8px 8px 8px 8px; |
|
} |
|
|
|
@mixin eightpadding { |
|
padding: 8px 8px 8px 8px; |
|
|
|
} |
|
|
|
@mixin fourpadding { |
|
padding: 4px 4px 4px 4px; |
|
|
|
} |
|
|
|
@mixin scroll-bar{ |
|
scrollbar-width: thin; |
|
scrollbar-color: $accent-color $primary-color-light; |
|
|
|
} |
|
|
|
@mixin h-atr{ |
|
font-family: 'Roboto', sans-serif; |
|
font-size: 24px; |
|
display: inline-block; |
|
|
|
} |
|
|
|
.mdc-top-app-bar--fixed{ |
|
width:100vw; |
|
height:10vh; |
|
padding-left:-8px; |
|
margin-left:-8px; |
|
margin-top:-8px; |
|
/*background-color:$primary-color;*/ |
|
@include mdc-top-app-bar-fill-color-accessible($primary-color-dark); |
|
@include mdc-top-app-bar-ink-color($primary-color-text); |
|
} |
|
|
|
|
|
|
|
.mdc-top-app-bar--fixed-adjust{ |
|
width:100vw; |
|
height:10vh; |
|
@include mdc-top-app-bar-fill-color-accessible($primary-color-text); |
|
} |
|
|
|
.mdc-button--raised{ |
|
@include button.filled-accessible($accent-color); |
|
@include button.ink-color($primary-color-text); |
|
} |
|
|
|
|
|
p { |
|
font-family: 'Roboto', sans-serif; |
|
font-size: 20px; |
|
display: inline-block; |
|
} |
|
|
|
a { |
|
font-family: 'Roboto', sans-serif; |
|
font-size: 20px; |
|
display: inline-block; |
|
} |
|
|
|
|
|
h1{ |
|
@include h-atr; |
|
} |
|
|
|
|
|
h1{ |
|
@include h-atr; |
|
} |
|
|
|
h2{ |
|
@include h-atr; |
|
} |
|
|
|
h3{ |
|
@include h-atr; |
|
} |
|
|
|
h4{ |
|
@include h-atr; |
|
} |
|
|
|
h5{ |
|
@include h-atr; |
|
} |
|
|
|
h6{ |
|
@include h-atr; |
|
} |
|
|
|
li{ |
|
font-family: 'Roboto', sans-serif; |
|
font-size: 22px; |
|
display: inline-block; |
|
|
|
} |
|
|
|
.summary-explain-p{ |
|
|
|
font-family: 'Roboto', sans-serif; |
|
font-size: 22px; |
|
display: inline-block; |
|
padding-left: 8px; |
|
} |
|
|
|
|
|
.summary-picto-div{ |
|
display:flex; |
|
align-items:center; |
|
} |
|
|
|
|
|
.mdc-card{ |
|
display:flex; |
|
flex-direction: coloumn; |
|
margin-right:4px; |
|
margin-bottom:4px; |
|
margin-left:4px; |
|
@include eightpadding; |
|
|
|
} |
|
|
|
|
|
.mdc-button{ |
|
@include eightspacing; |
|
@include eightpadding; |
|
@include button.core-styles; |
|
}
|
|
|