[frontend] Restructure scss files and add scss variables

This commit is contained in:
Cathy Hu 2020-09-04 14:00:44 +02:00
parent 0ecb137bc9
commit b086bf7cdf
9 changed files with 31 additions and 15 deletions

View file

@ -26,8 +26,11 @@
"assets": ["src/favicon.ico", "src/assets"], "assets": ["src/favicon.ico", "src/assets"],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/sass/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": ["src/sass"]
},
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -88,8 +91,11 @@
"assets": ["src/favicon.ico", "src/assets"], "assets": ["src/favicon.ico", "src/assets"],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/sass/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": ["src/sass"]
},
"scripts": [] "scripts": []
} }
}, },

View file

@ -1,3 +1,5 @@
@import "variables";
.content { .content {
margin-top: 64px; margin-top: $toolbar-height;
} }

View file

@ -17,7 +17,6 @@
} }
.textarea { .textarea {
box-sizing: border-box;
resize: none; resize: none;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -27,7 +26,6 @@
} }
.markdown { .markdown {
box-sizing: border-box;
border: thin solid black; border: thin solid black;
background-color: #fafafa; background-color: #fafafa;
padding: 10px; padding: 10px;

View file

@ -1,3 +1,5 @@
@import "variables";
.title { .title {
text-align: left; text-align: left;
padding-top: 10%; padding-top: 10%;
@ -12,8 +14,8 @@
h1 { h1 {
line-height: 3rem; line-height: 3rem;
font-size: 46px; font-size: $h1-font-size;
font-weight: 500; font-weight: $h1-font-weight;
} }
p { p {

View file

@ -6,7 +6,6 @@
padding-top: 10px; padding-top: 10px;
border: 1px solid #949494; border: 1px solid #949494;
border-radius: 24px; border-radius: 24px;
box-sizing: border-box;
z-index: 10; z-index: 10;
} }
@ -27,7 +26,6 @@ h1 {
text-transform: uppercase; text-transform: uppercase;
font-size: 3.4rem; font-size: 3.4rem;
color: white; color: white;
box-sizing: border-box;
font-weight: bold; font-weight: bold;
} }
@ -36,5 +34,4 @@ h1 {
background: url("../../assets/hoods2.jpg"); background: url("../../assets/hoods2.jpg");
background-size: 100%; background-size: 100%;
width: 100%; width: 100%;
box-sizing: border-box;
} }

View file

@ -1,12 +1,14 @@
@import "variables";
.h1 { .h1 {
background-color: #46277a; background-color: $h1-color;
height: 10%; height: 10%;
min-height: 70px; min-height: 70px;
padding-left: 10%; padding-left: 10%;
padding-top: 5%; padding-top: 5%;
color: white; color: white;
font-size: 46px; font-size: $h1-font-size;
font-weight: 500; font-weight: $h1-font-weight;
@media (max-width: 600px) { @media (max-width: 600px) {
padding-top: 10%; padding-top: 10%;
font-size: 30px; font-size: 30px;

View file

@ -1,3 +1,5 @@
@import "variables";
.example-spacer { .example-spacer {
flex: 1 auto; flex: 1 auto;
} }
@ -21,6 +23,6 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
min-height: 64px; min-height: $toolbar-height;
max-height: 64px; max-height: $toolbar-height;
} }

View file

@ -0,0 +1,5 @@
$toolbar-height: 64px;
$h1-color: #46277a;
$h1-font-size: 46px;
$h1-font-weight: 500;

View file

@ -1,5 +1,7 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "./variables";
html, html,
body { body {
height: 100%; height: 100%;