Skip to content

Commit a178919

Browse files
AnlantherAnlanther
committed
refactor: cleaned up styles
1 parent 8c5de6c commit a178919

File tree

7 files changed

+36
-37
lines changed

7 files changed

+36
-37
lines changed

‎src/app/components/workspace-selector/workspace-selector.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="discovery">
22
<div class="actions">
3-
<mat-form-field appearance="outline" class="actions form">
3+
<mat-form-field appearance="outline" class="form">
44
<input matInput [formControl]="form" placeholder="Search" />
55
</mat-form-field>
66
<button mat-flat-button class="actions button-accent">Accent Button</button>

‎src/app/components/workspace-selector/workspace-selector.component.scss‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
@use "@angular/material" as mat;
22
@use "../../styles/vars" as vars;
3+
@use "../../styles/mixins" as mixins;
34

45
.button-accent {
56
@include mat.button-overrides(
67
(
7-
filled-container-color: vars.$tertiary,
8+
filled-container-color: vars.$tertiary-color-light,
89
filled-label-text-color: black,
910
filled-container-height: 36px,
1011
)
1112
);
1213
}
1314

1415
.table-tabs {
15-
background-color: vars.$neutral-variant;
16-
@include mat.tabs-overrides(
17-
(
18-
active-indicator-height: 100vh,
19-
active-indicator-color: white,
20-
active-focus-indicator-color: white,
21-
divider-height: 0,
22-
active-hover-indicator-color: white,
23-
)
24-
);
16+
background-color: vars.$neutral-color-light-variant;
17+
@include mixins.single-color-tabs;
2518
}
2619

2720
.discovery {

‎src/app/styles/_mixins.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@use "@angular/material" as mat;
2+
@use "./vars" as vars;
3+
4+
@mixin single-color-tabs {
5+
@include mat.tabs-overrides(
6+
(
7+
divider-height: 0,
8+
active-indicator-height: 100vh,
9+
active-indicator-color: vars.$neutral-color-light,
10+
active-focus-indicator-color: vars.$neutral-color-light,
11+
active-hover-indicator-color: vars.$neutral-color-light,
12+
)
13+
);
14+
}

‎src/app/styles/_theme-colors.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// This file was generated by running 'ng generate @angular/material:theme-color'.
22
// Proceed with caution if making changes to this file.
33

4-
@use 'sass:map';
5-
@use '@angular/material' as mat;
4+
@use "sass:map";
5+
@use "@angular/material" as mat;
66

77
// Note: Color palettes are generated from primary: #007bbf, secondary: #20242b, tertiary: #92c646, neutral: #ffffff, neutral variant: #eeeff0, error: #d23729
88
$_palettes: (
@@ -129,9 +129,9 @@ $_palettes: (
129129
$_rest: (
130130
secondary: map.get($_palettes, secondary),
131131
neutral: map.get($_palettes, neutral),
132-
neutral-variant: map.get($_palettes, neutral-variant),
132+
neutral-variant: map.get($_palettes, neutral-variant),
133133
error: map.get($_palettes, error),
134134
);
135135

136-
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
137-
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
136+
$primary-color-light-palette: map.merge(map.get($_palettes, primary), $_rest);
137+
$tertiary-color-light-palette: map.merge(map.get($_palettes, tertiary), $_rest);

‎src/app/styles/_vars.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
$primary: #007bbf;
2-
$secondary: #20242b;
3-
$tertiary: #92c646;
4-
$neutral: #ffffff;
5-
$neutral-variant: #eeeff0;
6-
$error: #d23729;
1+
$primary-color-light: #007bbf;
2+
$secondary-color-light: #20242b;
3+
$tertiary-color-light: #92c646;
4+
$neutral-color-light: #ffffff;
5+
$neutral-color-light-variant: #eeeff0;
6+
$error-color-light: #d23729;
77

88
$border-radius: 2px;

‎src/app/views/main/main.component.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "@angular/material" as mat;
22
@use "../../styles/vars" as vars;
3+
@use "../../styles/mixins" as mixins;
34

45
.isInactive {
56
background-color: var(--mat-sys-surface-variant);
@@ -8,16 +9,7 @@
89

910
.tabs {
1011
margin: 5px 0;
11-
12-
@include mat.tabs-overrides(
13-
(
14-
divider-height: 0,
15-
active-indicator-height: 100vh,
16-
active-indicator-color: white,
17-
active-focus-indicator-color: white,
18-
active-hover-indicator-color: white,
19-
)
20-
);
12+
@include mixins.single-color-tabs;
2113
}
2214

2315
.gap {

‎src/styles.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ html {
1212
@include mat.theme(
1313
(
1414
color: (
15-
primary: my-theme.$primary-palette,
16-
tertiary: my-theme.$tertiary-palette,
15+
primary: my-theme.$primary-color-light-palette,
16+
tertiary: my-theme.$tertiary-color-light-palette,
1717
),
1818
typography: Roboto,
1919
density: -5,
@@ -30,7 +30,7 @@ html {
3030

3131
@include mat.table-overrides(
3232
(
33-
background-color: white,
33+
background-color: vars.$neutral-color-light,
3434
)
3535
);
3636

@@ -43,7 +43,7 @@ html {
4343
@include mat.form-field-overrides(
4444
(
4545
filled-container-shape: vars.$border-radius,
46-
outlined-outline-color: vars.$neutral-variant,
46+
outlined-outline-color: vars.$neutral-color-light-variant,
4747
)
4848
);
4949
}

0 commit comments

Comments
 (0)