1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @use '../../styles/theming' as *;
|
8 |
|
9 | @mixin nb-user-theme() {
|
10 | nb-user {
|
11 | .user-picture {
|
12 | background-color: nb-theme(user-picture-box-background-color);
|
13 | border: nb-theme(user-picture-box-border-width) solid nb-theme(user-picture-box-border-color);
|
14 | }
|
15 |
|
16 | .initials {
|
17 | color: nb-theme(user-initials-text-color);
|
18 | font-family: nb-theme(user-initials-text-font-family);
|
19 | font-weight: nb-theme(user-initials-text-font-weight);
|
20 | }
|
21 |
|
22 | .user-name {
|
23 | color: nb-theme(user-name-text-color);
|
24 | font-family: nb-theme(user-name-text-font-family);
|
25 | font-weight: nb-theme(user-name-text-font-weight);
|
26 | }
|
27 |
|
28 | .user-title {
|
29 | color: nb-theme(user-title-text-color);
|
30 | font-family: nb-theme(user-title-text-font-family);
|
31 | font-weight: nb-theme(user-title-text-font-weight);
|
32 | }
|
33 | }
|
34 |
|
35 | @each $size in nb-get-sizes() {
|
36 | nb-user.size-#{$size} {
|
37 | .user-picture {
|
38 | height: nb-theme(user-#{$size}-height);
|
39 | width: nb-theme(user-#{$size}-width);
|
40 | }
|
41 | .initials {
|
42 | font-size: nb-theme(user-#{$size}-initials-text-font-size);
|
43 | line-height: nb-theme(user-#{$size}-initials-text-line-height);
|
44 | }
|
45 | .user-name {
|
46 | font-size: nb-theme(user-#{$size}-name-text-font-size);
|
47 | line-height: nb-theme(user-#{$size}-name-text-line-height);
|
48 | }
|
49 | .user-title {
|
50 | font-size: nb-theme(user-#{$size}-title-text-font-size);
|
51 | line-height: nb-theme(user-#{$size}-title-text-line-height);
|
52 | }
|
53 | }
|
54 | }
|
55 |
|
56 | @each $shape in nb-get-shapes() {
|
57 | nb-user.shape-#{$shape} .user-picture {
|
58 | border-radius: nb-theme(user-#{$shape}-border-radius);
|
59 | }
|
60 | }
|
61 | }
|