florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Split all scss in separated files.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-07 10:39:32 +02:00
parent 9470132f9b
commit 0969f892f8
10 changed files with 162 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
cerberus/src/components-styles/button.scss Normal file
View File

@@ -0,0 +1,50 @@
@import '../colors.scss';
button {
// background-color: $blue;
background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
color: white;
border: solid 1px $btn-primary-background-bottom;
display: flex;
justify-content: center;
align-items: center;
min-width: 5rem;
border-radius: .3rem;
padding: .15rem 1rem;
font-weight: 600;
margin: .2rem .5rem;
&:active {
border-color: $btn-primary-active-border;
background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
}
&.secondary {
background-image: none;
background-color: $btn-secondary-background;
border-color: $btn-secondary-border;
color: #222;
font-weight: 500;
&:active {
background-color: $btn-secondary-active-background;
border-color: $btn-secondary-active-border;
}
}
&.help {
border-radius: 10em;
padding: 0;
background-image: none;
background-color: #eeeeee;
color: #333;
border-color: #bbb;
min-width: min-content;
width: 1.5rem;
height: 1.5rem;
&:hover {
background-color: #dddddd;
}
}
}

7
cerberus/src/components-styles/card.scss Normal file
View File

@@ -0,0 +1,7 @@
.card {
width: max-content;
padding: .5rem 1rem;
box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
border-radius: .4rem;
margin: 2rem;
}

4
cerberus/src/components-styles/components-styles.scss Normal file
View File

@@ -0,0 +1,4 @@
@import './button.scss';
@import './card.scss';
@import './form/form.scss';
@import './icon.scss';

19
cerberus/src/components-styles/form/form-control.scss Normal file
View File

@@ -0,0 +1,19 @@
.form-control {
display: flex;
flex-direction: column;
margin: 1rem 0;
& > * {
display: flex;
flex: 1 0;
}
& > input, select {
margin-left: 0;
margin-right: 0;
}
app-select {
width: 100%;
}
}

4
cerberus/src/components-styles/form/form.scss Normal file
View File

@@ -0,0 +1,4 @@
@import './form-control.scss';
@import './label.scss';
@import './input.scss';
@import './select.scss';

29
cerberus/src/components-styles/form/input.scss Normal file
View File

@@ -0,0 +1,29 @@
@import '../../colors.scss';
input {
margin: 0 .5rem;
border: none;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
padding: .2rem .5rem;
border-radius: .2rem;
&:focus {
outline: 2px solid $blue;
}
}
.iconed-input {
display: flex;
position: relative;
align-items: center;
input {
padding-left: 2rem;
}
mat-icon {
color: $gray-icon-secondary;
position: absolute;
left: 1rem;
}
}

4
cerberus/src/components-styles/form/label.scss Normal file
View File

@@ -0,0 +1,4 @@
label {
margin-bottom: .2rem;
font-weight: 500;
}

30
cerberus/src/components-styles/form/select.scss Normal file
View File

@@ -0,0 +1,30 @@
$font-size: 14px;
select {
// A reset of styles, including removing the default dropdown arrow
appearance: none;
// Additional resets for further consistency
border: none;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
color: #333;
border-radius: .3rem;
padding: .15rem .5rem;
font-weight: 600;
margin: .2rem .5rem;
font-size: $font-size;
&::-ms-expand {
display: none;
}
&:focus {
outline: 2px solid $blue;
}
}
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
}

8
cerberus/src/components-styles/icon.scss Normal file
View File

@@ -0,0 +1,8 @@
mat-icon.mat-icon {
display: flex;
align-items: center;
width: 18px;
height: 18px;
font-size: 18px;
}

154
cerberus/src/styles.scss
View File

@@ -1,14 +1,20 @@
@import './colors.scss';
@import './components-styles/components-styles.scss';
/* You can add global styles to this file, and also import other style files */
@font-face {
font-family: helvetica;
src: url(assets/fonts/Helvetica.ttf);
src: url(/assets/fonts/Helvetica.ttf);
}
$font-size: 14px;
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: $font-size;
font-family: helvetica;
@@ -22,120 +28,6 @@ body {
}
}
button {
// background-color: $blue;
background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
color: white;
border: solid 1px $btn-primary-background-bottom;
display: flex;
justify-content: center;
align-items: center;
min-width: 5rem;
border-radius: .3rem;
padding: .15rem 1rem;
font-weight: 600;
margin: .2rem .5rem;
&:active {
border-color: $btn-primary-active-border;
background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
}
&.secondary {
background-image: none;
background-color: $btn-secondary-background;
border-color: $btn-secondary-border;
color: #222;
font-weight: 500;
&:active {
background-color: $btn-secondary-active-background;
border-color: $btn-secondary-active-border;
}
}
&.help {
border-radius: 10em;
padding: 0;
background-image: none;
background-color: #eeeeee;
color: #333;
border-color: #bbb;
min-width: min-content;
width: 1.5rem;
height: 1.5rem;
&:hover {
background-color: #dddddd;
}
}
}
div.card {
width: max-content;
padding: .5rem 1rem;
box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
border-radius: .4rem;
margin: 2rem;
}
.form-control {
display: flex;
flex-direction: column;
margin: 1rem 0;
& > * {
display: flex;
flex: 1 0;
}
& > input, select {
margin-left: 0;
margin-right: 0;
}
}
label {
margin-bottom: .2rem;
font-weight: 500;
}
input {
margin: 0 .5rem;
border: none;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
padding: .2rem .5rem;
border-radius: .2rem;
&:focus {
outline: 2px solid $blue;
}
}
select {
// A reset of styles, including removing the default dropdown arrow
appearance: none;
// Additional resets for further consistency
border: none;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
color: #333;
border-radius: .3rem;
padding: .15rem .5rem;
font-weight: 600;
margin: .2rem .5rem;
font-size: $font-size;
&::-ms-expand {
display: none;
}
}
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
}
// Utilitary classes
.max-width {
@@ -159,35 +51,3 @@ div.row {
flex: 1 0;
}
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
mat-icon.mat-icon {
display: flex;
align-items: center;
width: 18px;
height: 18px;
}
.iconed-input {
display: flex;
position: relative;
align-items: center;
input {
padding-left: 2rem;
}
mat-icon {
color: $gray-icon-secondary;
position: absolute;
left: 1rem;
}
}
mat-icon.mat-icon {
font-size: 18px;
}