Skip to content

Commit ebcfefa

Browse files
eksrhaeksrha
authored
Merge pull request #10 from fullstack-devops/bugfix/box-shadow
fix box shadow
2 parents 5c66474 + 7ddaf98 commit ebcfefa

File tree

3 files changed

+292
-80
lines changed

3 files changed

+292
-80
lines changed

‎projects/lib-workspace/src/styles.scss‎

Lines changed: 255 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,277 @@
1+
/**
2+
* Generated theme by Material Theme Generator
3+
* https://materialtheme.arcsine.dev
4+
* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzRjN2MzYyIsIj9lcjwjYzlkOGM1IiwiO2VyPCMzMzVmMjd$LCIlPmBePCM0OTg0OTciLCI~ZXI8I2M4ZGFlMCIsIjtlcjwjMzE2Nzdhfiwid2Fybj5gXjwjZWY5YjAwIiwiP2VyPCNmYWUxYjMiLCI7ZXI8I2U4N2YwMH4sIj9UZXh0PCMwMDAwMDAiLCI~PTwjZmFmYWZhIiwiO1RleHQ8I2ZmZmZmZiIsIjs9PCMyYzJjMmN$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
5+
*/
6+
@use "sass:map";
17
@use "@angular/material" as mat;
28
@use "../../ng-mat-components" as fs-components;
39

4-
body {
5-
margin: 0;
6-
}
10+
// Include the common styles for Angular Material. We include this here so that you only
11+
// have to load a single css file for Angular Material in your app.
12+
13+
// fonts
14+
// @import "material-icons/iconfont/material-icons.scss";
15+
// @import "@fontsource/roboto";
16+
17+
$fontConfig: (
18+
display-4: mat.define-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
19+
display-3: mat.define-typography-level(56px, 56px, 400, "Roboto", -0.0089em),
20+
display-2: mat.define-typography-level(45px, 48px, 400, "Roboto", 0em),
21+
display-1: mat.define-typography-level(34px, 40px, 400, "Roboto", 0.0074em),
22+
headline: mat.define-typography-level(24px, 32px, 400, "Roboto", 0em),
23+
title: mat.define-typography-level(20px, 32px, 500, "Roboto", 0.0075em),
24+
subheading-2: mat.define-typography-level(16px, 28px, 400, "Roboto", 0.0094em),
25+
subheading-1: mat.define-typography-level(15px, 24px, 500, "Roboto", 0.0067em),
26+
body-2: mat.define-typography-level(14px, 24px, 500, "Roboto", 0.0179em),
27+
body-1: mat.define-typography-level(14px, 20px, 400, "Roboto", 0.0179em),
28+
button: mat.define-typography-level(14px, 14px, 500, "Roboto", 0.0893em),
29+
caption: mat.define-typography-level(12px, 20px, 400, "Roboto", 0.0333em),
30+
input: mat.define-typography-level(inherit, 1.125, 400, "Roboto", 1.5px),
31+
);
32+
33+
// Foreground Elements
34+
35+
// Light Theme Text
36+
$dark-text: #000000;
37+
$dark-primary-text: rgba($dark-text, 0.87);
38+
$dark-accent-text: rgba($dark-primary-text, 0.54);
39+
$dark-disabled-text: rgba($dark-primary-text, 0.38);
40+
$dark-dividers: rgba($dark-primary-text, 0.12);
41+
$dark-focused: rgba($dark-primary-text, 0.12);
42+
43+
$mat-light-theme-foreground: (
44+
base: black,
45+
divider: $dark-dividers,
46+
dividers: $dark-dividers,
47+
disabled: $dark-disabled-text,
48+
disabled-button: rgba($dark-text, 0.26),
49+
disabled-text: $dark-disabled-text,
50+
elevation: black,
51+
secondary-text: $dark-accent-text,
52+
hint-text: $dark-disabled-text,
53+
accent-text: $dark-accent-text,
54+
icon: $dark-accent-text,
55+
icons: $dark-accent-text,
56+
text: $dark-primary-text,
57+
slider-min: $dark-primary-text,
58+
slider-off: rgba($dark-text, 0.26),
59+
slider-off-active: $dark-disabled-text,
60+
);
61+
62+
// Dark Theme text
63+
$light-text: #ffffff;
64+
$light-primary-text: $light-text;
65+
$light-accent-text: rgba($light-primary-text, 0.7);
66+
$light-disabled-text: rgba($light-primary-text, 0.5);
67+
$light-dividers: rgba($light-primary-text, 0.12);
68+
$light-focused: rgba($light-primary-text, 0.12);
69+
70+
$mat-dark-theme-foreground: (
71+
base: $light-text,
72+
divider: $light-dividers,
73+
dividers: $light-dividers,
74+
disabled: $light-disabled-text,
75+
disabled-button: rgba($light-text, 0.3),
76+
disabled-text: $light-disabled-text,
77+
elevation: black,
78+
hint-text: $light-disabled-text,
79+
secondary-text: $light-accent-text,
80+
accent-text: $light-accent-text,
81+
icon: $light-text,
82+
icons: $light-text,
83+
text: $light-text,
84+
slider-min: $light-text,
85+
slider-off: rgba($light-text, 0.3),
86+
slider-off-active: rgba($light-text, 0.3),
87+
);
88+
89+
// Background config
90+
// Light bg
91+
$light-background: #fafafa;
92+
$light-bg-darker-5: darken($light-background, 5%);
93+
$light-bg-darker-10: darken($light-background, 10%);
94+
$light-bg-darker-20: darken($light-background, 20%);
95+
$light-bg-darker-30: darken($light-background, 30%);
96+
$light-bg-lighter-5: lighten($light-background, 5%);
97+
$dark-bg-tooltip: lighten(#2c2c2c, 20%);
98+
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
99+
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
100+
101+
$mat-light-theme-background: (
102+
background: $light-background,
103+
status-bar: $light-bg-darker-20,
104+
app-bar: $light-bg-darker-5,
105+
hover: $dark-bg-alpha-4,
106+
card: $light-bg-lighter-5,
107+
dialog: $light-bg-lighter-5,
108+
tooltip: $dark-bg-tooltip,
109+
disabled-button: $dark-bg-alpha-12,
110+
raised-button: $light-bg-lighter-5,
111+
focused-button: $dark-focused,
112+
selected-button: $light-bg-darker-20,
113+
selected-disabled-button: $light-bg-darker-30,
114+
disabled-button-toggle: $light-bg-darker-10,
115+
unselected-chip: $light-bg-darker-10,
116+
disabled-list-option: $light-bg-darker-10,
117+
);
118+
119+
// Dark bg
120+
$dark-background: #2c2c2c;
121+
$dark-bg-lighter-5: lighten($dark-background, 5%);
122+
$dark-bg-lighter-10: lighten($dark-background, 10%);
123+
$dark-bg-lighter-20: lighten($dark-background, 20%);
124+
$dark-bg-lighter-30: lighten($dark-background, 30%);
125+
$light-bg-alpha-4: rgba(#fafafa, 0.04);
126+
$light-bg-alpha-12: rgba(#fafafa, 0.12);
127+
128+
// Background palette for dark themes.
129+
$mat-dark-theme-background: (
130+
background: $dark-background,
131+
status-bar: $dark-bg-lighter-20,
132+
app-bar: $dark-bg-lighter-5,
133+
hover: $light-bg-alpha-4,
134+
card: $dark-bg-lighter-5,
135+
dialog: $dark-bg-lighter-5,
136+
tooltip: $dark-bg-lighter-20,
137+
disabled-button: $light-bg-alpha-12,
138+
raised-button: $dark-bg-lighter-5,
139+
focused-button: $light-focused,
140+
selected-button: $dark-bg-lighter-20,
141+
selected-disabled-button: $dark-bg-lighter-30,
142+
disabled-button-toggle: $dark-bg-lighter-10,
143+
unselected-chip: $dark-bg-lighter-20,
144+
disabled-list-option: $dark-bg-lighter-10,
145+
);
146+
147+
// Compute font config
148+
@include mat.core($fontConfig);
149+
150+
// Theme Config
7151

8-
html,
9152
body {
10-
height: 100%;
153+
--primary-color: #4c7c3c;
154+
--primary-lighter-color: #c9d8c5;
155+
--primary-darker-color: #335f27;
156+
--text-primary-color: #{$light-primary-text};
157+
--text-primary-lighter-color: #{$dark-primary-text};
158+
--text-primary-darker-color: #{$light-primary-text};
11159
}
160+
$mat-primary: (
161+
main: #4c7c3c,
162+
lighter: #c9d8c5,
163+
darker: #335f27,
164+
200: #4c7c3c,
165+
// For slide toggle,
166+
contrast:
167+
(
168+
main: $light-primary-text,
169+
lighter: $dark-primary-text,
170+
darker: $light-primary-text,
171+
),
172+
);
173+
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
174+
12175
body {
13-
margin: 0;
14-
font-family: Roboto, "Helvetica Neue", sans-serif;
176+
--accent-color: #498497;
177+
--accent-lighter-color: #c8dae0;
178+
--accent-darker-color: #31677a;
179+
--text-accent-color: #{$light-primary-text};
180+
--text-accent-lighter-color: #{$dark-primary-text};
181+
--text-accent-darker-color: #{$light-primary-text};
15182
}
16-
17-
@include mat.core();
18-
@import "../../ng-mat-components";
19-
20-
// Define a light theme
21-
$light-primary: mat.define-palette(mat.$indigo-palette);
22-
$light-accent: mat.define-palette(mat.$pink-palette);
23-
$light-theme: mat.define-light-theme(
24-
(
25-
color: (
26-
primary: $light-primary,
27-
accent: $light-accent,
183+
$mat-accent: (
184+
main: #498497,
185+
lighter: #c8dae0,
186+
darker: #31677a,
187+
200: #498497,
188+
// For slide toggle,
189+
contrast:
190+
(
191+
main: $light-primary-text,
192+
lighter: $dark-primary-text,
193+
darker: $light-primary-text,
28194
),
29-
)
30195
);
196+
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
31197

32-
// Define a dark theme
33-
$dark-primary: mat.define-palette(mat.$pink-palette);
34-
$dark-accent: mat.define-palette(mat.$blue-gray-palette);
35-
$dark-theme: mat.define-dark-theme(
36-
(
37-
color: (
38-
primary: $dark-primary,
39-
accent: $dark-accent,
198+
body {
199+
--warn-color: #ef9b00;
200+
--warn-lighter-color: #fae1b3;
201+
--warn-darker-color: #e87f00;
202+
--text-warn-color: #{$dark-primary-text};
203+
--text-warn-lighter-color: #{$dark-primary-text};
204+
--text-warn-darker-color: #{$dark-primary-text};
205+
}
206+
$mat-warn: (
207+
main: #ef9b00,
208+
lighter: #fae1b3,
209+
darker: #e87f00,
210+
200: #ef9b00,
211+
// For slide toggle,
212+
contrast:
213+
(
214+
main: $dark-primary-text,
215+
lighter: $dark-primary-text,
216+
darker: $dark-primary-text,
40217
),
41-
)
218+
);
219+
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
220+
$theme: (
221+
primary: $theme-primary,
222+
accent: $theme-accent,
223+
warn: $theme-warn,
224+
is-dark: true,
225+
foreground: $mat-dark-theme-foreground,
226+
background: $mat-dark-theme-background,
227+
);
228+
$altTheme: (
229+
primary: $theme-primary,
230+
accent: $theme-accent,
231+
warn: $theme-warn,
232+
is-dark: false,
233+
foreground: $mat-light-theme-foreground,
234+
background: $mat-light-theme-background,
42235
);
43236

44-
// Apply the dark theme by default
45-
@include mat.all-component-themes($dark-theme);
46-
@include fs-components.all-component-themes($dark-theme);
237+
// Specific component overrides, pieces that are not in line with the general theming
47238

48-
// Apply the light theme only when the `.my-light-theme` CSS class is applied
49-
// to an ancestor element of the components (such as `body`).
50-
.my-light-theme {
51-
@include mat.all-component-colors($light-theme);
52-
@include fs-components.all-component-themes($light-theme);
239+
// Handle buttons appropriately, with respect to line-height
240+
.mat-raised-button,
241+
.mat-stroked-button,
242+
.mat-flat-button {
243+
padding: 0 1.15em;
244+
margin: 0 0.65em;
245+
min-width: 3em;
246+
line-height: 36.4px;
53247
}
54248

55-
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
56-
border-top-width: 0;
249+
.mat-standard-chip {
250+
padding: 0.5em 0.85em;
251+
min-height: 2.5em;
57252
}
58253

59-
.mat-form-field-wrapper {
60-
padding-bottom: 0px;
61-
margin-bottom: 0px;
62-
margin-top: 0px;
254+
.material-icons {
255+
font-size: 24px;
256+
font-family: "Material Icons", "Material Icons";
257+
.mat-badge-content {
258+
font-family: "Roboto";
259+
}
260+
}
261+
262+
$background: map.get($theme, "background");
263+
$foreground: map.get($theme, "foreground");
264+
265+
@media (prefers-color-scheme: dark) {
266+
@include mat.all-component-themes($theme);
267+
@include fs-components.all-component-themes($theme);
268+
$background: map.get($theme, "background");
269+
$foreground: map.get($theme, "foreground");
63270
}
64271

65-
.mat-form-field-label-wrapper {
66-
padding-top: 0px;
272+
@media (prefers-color-scheme: light) {
273+
@include mat.all-component-themes($altTheme);
274+
@include fs-components.all-component-themes($altTheme);
275+
$background: map.get($altTheme, "background");
276+
$foreground: map.get($altTheme, "foreground");
67277
}

0 commit comments

Comments
 (0)