julien/headup_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mise à jour de feuilles de style

Browse Source
This commit is contained in:
Julien Gautier
2023-09-18 22:55:08 +02:00
parent efb0485bd9
commit d0039dc275
4 changed files with 234 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/charts.scss → src/styles/_charts.scss
+134 -20
View File
@@ -7,28 +7,12 @@
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1; line-height: 1;
} }
$chart-color-a: #20b6fc;
$chart-color-b: #f15050;
$chart-color-c: #02bfab;
$chart-color-d: #f90;
$chart-color-e: #65dae0;
$chart-color-f: #8a65e0;
$chart-color-g: #00897b;
$chart-color-h: #b51156;
$chart-color-i: #5dcc89;
$chart-color-j: #ffe205;
$chart-color-k: #bf65e0;
$chart-color-l: #4cae4c;
$chart-color-m: #337ab7;
$chart-color-n: #ed5094;
$chart-color-o: #fd18f3;
$chart-color-p: #d61f1f;
$chart-color-q: #99abb4;
$chart-color-r: #ffffff;
.ct-grid { .ct-grid {
stroke: rgba(255, 255, 255, 0.2); stroke: rgba(255, 255, 255, 0.2);
} }
.linechart { .linechart {
max-height: 400px;
margin-top:20px; margin-top:20px;
.ct-series-a .ct-line, .ct-series-a .ct-line,
.ct-series-a .ct-point { .ct-series-a .ct-point {
@@ -102,9 +86,42 @@ $chart-color-r: #ffffff;
.ct-series-r .ct-point { .ct-series-r .ct-point {
stroke:$chart-color-r; stroke:$chart-color-r;
} }
.ct-series-s .ct-line,
.ct-series-s .ct-point {
stroke:$chart-color-s;
}
.ct-series-t .ct-line,
.ct-series-t .ct-point {
stroke:$chart-color-t;
}
.ct-series-u .ct-line,
.ct-series-u .ct-point {
stroke:$chart-color-u;
}
.ct-series-v .ct-line,
.ct-series-v .ct-point {
stroke:$chart-color-v;
}
.ct-series-w .ct-line,
.ct-series-w .ct-point {
stroke:$chart-color-w;
}
.ct-series-x .ct-line,
.ct-series-x .ct-point {
stroke:$chart-color-x;
}
.ct-series-y .ct-line,
.ct-series-y .ct-point {
stroke:$chart-color-y;
}
.ct-series-z .ct-line,
.ct-series-z .ct-point {
stroke:$chart-color-z;
}
} }
.barchrt { .barchart {
max-height: 300px;
&.bar-xs .ct-bar { &.bar-xs .ct-bar {
stroke-width: 5px; stroke-width: 5px;
} }
@@ -162,9 +179,34 @@ $chart-color-r: #ffffff;
.ct-series-r .ct-bar { .ct-series-r .ct-bar {
stroke:$chart-color-r; stroke:$chart-color-r;
} }
.ct-series-s .ct-bar {
stroke:$chart-color-s;
}
.ct-series-t .ct-bar {
stroke:$chart-color-t;
}
.ct-series-u .ct-bar {
stroke:$chart-color-u;
}
.ct-series-v .ct-bar {
stroke:$chart-color-v;
}
.ct-series-w .ct-bar {
stroke:$chart-color-w;
}
.ct-series-x .ct-bar {
stroke:$chart-color-x;
}
.ct-series-y .ct-bar {
stroke:$chart-color-y;
}
.ct-series-z .ct-bar {
stroke:$chart-color-z;
}
} }
.piechart { .piechart {
max-height: 400px;
.ct-label { .ct-label {
fill: rgba(255, 255, 255, 0.8); fill: rgba(255, 255, 255, 0.8);
color:rgba(255, 255, 255, 0.8); color:rgba(255, 255, 255, 0.8);
@@ -223,6 +265,30 @@ $chart-color-r: #ffffff;
.ct-series-r .ct-slice-donut { .ct-series-r .ct-slice-donut {
stroke:$chart-color-r; stroke:$chart-color-r;
} }
.ct-series-s .ct-slice-donut {
stroke:$chart-color-s;
}
.ct-series-t .ct-slice-donut {
stroke:$chart-color-t;
}
.ct-series-u .ct-slice-donut {
stroke:$chart-color-u;
}
.ct-series-v .ct-slice-donut {
stroke:$chart-color-v;
}
.ct-series-w .ct-slice-donut {
stroke:$chart-color-w;
}
.ct-series-x .ct-slice-donut {
stroke:$chart-color-x;
}
.ct-series-y .ct-slice-donut {
stroke:$chart-color-y;
}
.ct-series-z .ct-slice-donut {
stroke:$chart-color-z;
}
.ct-series-a .ct-slice-donut-solid { .ct-series-a .ct-slice-donut-solid {
fill:$chart-color-a; fill:$chart-color-a;
@@ -278,6 +344,30 @@ $chart-color-r: #ffffff;
.ct-series-r .ct-slice-donut-solid { .ct-series-r .ct-slice-donut-solid {
fill:$chart-color-r; fill:$chart-color-r;
} }
.ct-series-s .ct-slice-donut-solid {
fill:$chart-color-s;
}
.ct-series-t .ct-slice-donut-solid {
fill:$chart-color-t;
}
.ct-series-u .ct-slice-donut-solid {
fill:$chart-color-u;
}
.ct-series-v .ct-slice-donut-solid {
fill:$chart-color-v;
}
.ct-series-w .ct-slice-donut-solid {
fill:$chart-color-w;
}
.ct-series-x .ct-slice-donut-solid {
fill:$chart-color-x;
}
.ct-series-y .ct-slice-donut-solid {
fill:$chart-color-y;
}
.ct-series-z .ct-slice-donut-solid {
fill:$chart-color-z;
}
} }
html body { html body {
@@ -333,6 +423,30 @@ html body {
color: $chart-color-q; color: $chart-color-q;
} }
.ct-color-r { .ct-color-r {
color: $chart-color-r color: $chart-color-r;
}
.ct-color-s {
color: $chart-color-s;
}
.ct-color-t {
color: $chart-color-t;
}
.ct-color-u {
color: $chart-color-u;
}
.ct-color-v {
color: $chart-color-v;
}
.ct-color-w {
color: $chart-color-w;
}
.ct-color-x {
color: $chart-color-x;
}
.ct-color-y {
color: $chart-color-y;
}
.ct-color-z {
color: $chart-color-z;
} }
} }
src/styles/app.scss
+54
View File
@@ -4,6 +4,7 @@ Author: UnEspace
Email: rampeur@gmail.com Email: rampeur@gmail.com
File: scss File: scss
*/ */
@use 'sass:color';
html { html {
height: 100%; height: 100%;
@@ -52,6 +53,18 @@ a.link {
color: $primary; color: $primary;
} }
} }
a.warn {
color: $warn;
}
a.warn:hover {
color: color.adjust($warn, $alpha: -0.3);
}
a.accent {
color: $accent;
}
a.accent:hover {
color: color.adjust($accent, $alpha: -0.3);
}
.no-shrink { .no-shrink {
flex-shrink: 0; flex-shrink: 0;
@@ -105,6 +118,47 @@ huapp-full-layout .mdc-text-field--filled .mdc-floating-label {
padding-bottom: 8px; padding-bottom: 8px;
} }
} }
.mat-mdc-icon-button {
.mat-icon {
line-height: 0.87;
}
}
/****************
* Definitions *
****************/
dl.dl-horizontal {
margin-bottom: 0;
font-size: 14px;
margin-top: 0;
margin-bottom: 20px;
dt {
float: left;
width: 120px;
overflow: hidden;
clear: left;
color: $light;
font-weight: normal;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
dt,
dd {
line-height: 1.42857143;
min-height: 1.42857143em;
}
dd {
margin-left: 140px;
/* color: $extra-light; */
}
.dl-large dt {
width: 200px;
}
.dl-large dd {
margin-left: 220px;
}
}
/**************** /****************
* Text Colors * * Text Colors *
src/styles/tables.scss
+34 -6
View File
@@ -84,8 +84,9 @@ caption {
padding-top: 1rem; padding-top: 1rem;
} }
tr.mat-mdc-header-row.primary { tr.mat-mdc-header-row.primary,
background-color: rgba(167, 212, 196, 0.1); .table.table-dark>thead>tr.primary {
background-color: rgba(167, 212, 196, 0.1); // #a5d492;
} }
.table.table-dark>tbody>tr.primary.active>td, .table.table-dark>tbody>tr.primary.active>td,
.table.table-dark>tbody>tr.primary.active>th, .table.table-dark>tbody>tr.primary.active>th,
@@ -99,18 +100,19 @@ tr.mat-mdc-header-row.primary {
.table.table-dark>thead>tr.primary.active>th, .table.table-dark>thead>tr.primary.active>th,
.table.table-dark>thead>tr.primary>td.active, .table.table-dark>thead>tr.primary>td.active,
.table.table-dark>thead>tr.primary>th.active { .table.table-dark>thead>tr.primary>th.active {
background-color: rgba(165, 212, 146, 0.2); //#a5d492; background-color: rgba(165, 212, 146, 0.2);
} }
.table-dark.table-hover>tbody>tr.primary.active:hover>td, .table-dark.table-hover>tbody>tr.primary.active:hover>td,
.table-dark.table-hover>tbody>tr.primary.active:hover>th, .table-dark.table-hover>tbody>tr.primary.active:hover>th,
.table-dark.table-hover>tbody>tr.primary:hover>.active, .table-dark.table-hover>tbody>tr.primary:hover>.active,
.table-dark.table-hover>tbody>tr.primary>td.active:hover, .table-dark.table-hover>tbody>tr.primary>td.active:hover,
.table-dark.table-hover>tbody>tr.primary>th.active:hover { .table-dark.table-hover>tbody>tr.primary>th.active:hover {
background-color: rgba(165, 212, 146, 0.3); //#93c081; background-color: rgba(165, 212, 146, 0.3);
} }
tr.mat-mdc-header-row.warn { tr.mat-mdc-header-row.warn,
background-color: rgba(151, 136, 199, 0.1); .table.table-dark>thead>tr.warn {
background-color: rgba(151, 136, 199, 0.1); // #9788c7
} }
.table.table-dark>tbody>tr.warn.active>td, .table.table-dark>tbody>tr.warn.active>td,
.table.table-dark>tbody>tr.warn.active>th, .table.table-dark>tbody>tr.warn.active>th,
@@ -134,6 +136,32 @@ tr.mat-mdc-header-row.warn {
background-color: rgba(151, 136, 199, 0.3); background-color: rgba(151, 136, 199, 0.3);
} }
tr.mat-mdc-header-row.accent,
.table.table-dark>thead>tr.accent {
background-color: rgba(205, 186, 152, 0.1); // #cdba98
}
.table.table-dark>tbody>tr.accent.active>td,
.table.table-dark>tbody>tr.accent.active>th,
.table.table-dark>tbody>tr.accent>td.active,
.table.table-dark>tbody>tr.accent>th.active,
.table.table-dark>tfoot>tr.accent.active>td,
.table.table-dark>tfoot>tr.accent.active>th,
.table.table-dark>tfoot>tr.accent>td.active,
.table.table-dark>tfoot>tr.accent>th.active,
.table.table-dark>thead>tr.accent.active>td,
.table.table-dark>thead>tr.accent.active>th,
.table.table-dark>thead>tr.accent>td.active,
.table.table-dark>thead>tr.accent>th.active {
background-color: rgba(205, 186, 152, 0.2);
}
.table-dark.table-hover>tbody>tr.accent.active:hover>td,
.table-dark.table-hover>tbody>tr.accent.active:hover>th,
.table-dark.table-hover>tbody>tr.accent:hover>.active,
.table-dark.table-hover>tbody>tr.accent>td.active:hover,
.table-dark.table-hover>tbody>tr.accent>th.active:hover {
background-color: rgba(205, 186, 152, 0.3);
}
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>td,
.table>caption+thead>tr:first-child>th, .table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>td,
src/styles/variable.scss
+11 -2
View File
@@ -113,6 +113,7 @@ $md-custom-warn: (
/* Theme Colors */ /* Theme Colors */
$primary: mat.get-color-from-palette($md-custom-primary, 700); // #a7d4c4; // #a1c7a1; $primary: mat.get-color-from-palette($md-custom-primary, 700); // #a7d4c4; // #a1c7a1;
$accent: mat.get-color-from-palette($md-custom-accent, 700); // #d9caae; // #d9caae; $accent: mat.get-color-from-palette($md-custom-accent, 700); // #d9caae; // #d9caae;
$warn: mat.get-color-from-palette($md-custom-warn, 600); // #9788c7; // #9788c7;
$secondary: mat.get-color-from-palette($md-custom-warn, 600); // #9788c7; // #9788c7; $secondary: mat.get-color-from-palette($md-custom-warn, 600); // #9788c7; // #9788c7;
$headingtext: mat.get-color-from-palette($md-custom-primary, 500); // #b7ddd0; // #b1d2b1; $headingtext: mat.get-color-from-palette($md-custom-primary, 500); // #b7ddd0; // #b1d2b1;
$bodytext: mat.get-color-from-palette($md-custom-primary, 100); // #e9f5f1; // #e8f2e8; $bodytext: mat.get-color-from-palette($md-custom-primary, 100); // #e9f5f1; // #e8f2e8;
@@ -137,7 +138,7 @@ $empty: #717171;
$muted: #aaaaaa; $muted: #aaaaaa;
$extra-muted: #c4c4c4; $extra-muted: #c4c4c4;
$dark: #263238; $dark: #263238;
$light: #ebf3f5; $light: #ebf5ef;
$extra-light: #f2f4f8; $extra-light: #f2f4f8;
@@ -208,4 +209,12 @@ $chart-color-n: #337ab7;
$chart-color-o: #fd18f3; $chart-color-o: #fd18f3;
$chart-color-p: #d61f1f; $chart-color-p: #d61f1f;
$chart-color-q: #99abb4; $chart-color-q: #99abb4;
$chart-color-r: #ffffff; $chart-color-r: #cdba98;
$chart-color-s: #65e0b8;
$chart-color-t: #02bfab;
$chart-color-u: #65dae0;
$chart-color-v: #a1c7a1;
$chart-color-w: #d9caae;
$chart-color-x: #9788c7;
$chart-color-y: #d4ce70;
$chart-color-z: #ffffff;