-
Notifications
You must be signed in to change notification settings - Fork 60
/
status-indicator.scss
84 lines (70 loc) · 2.55 KB
/
status-indicator.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@import "./new-settings";
@import "./mixins";
@import "./icon";
$block: #{$fd-namespace}-status-indicator;
$fd-status-indicator-sizes: (
"sm": ("width": 1.875rem, "height": 1.375rem, "font-size": var(--sapFontSmallSize, 0.75rem), "margin": 0.375rem),
"md": ("width": 2.8125rem, "height": 1.875rem, "font-size": var(--sapFontSize, 0.875rem), "margin": 0.5rem),
"lg": ("width": 5rem, "height": 3.4375rem, "font-size": 1.125rem, "margin": 0.75rem),
"xl": ("width": 9.0625rem, "height": 6.25rem, "font-size": 1.875rem, "margin": 1rem)
);
$color-states: (
"positive": ("color": var(--sapPositiveElementColor)),
"critical": ("color": var(--sapCriticalElementColor)),
"negative": ("color": var(--sapNegativeElementColor)),
);
.#{$block} {
$fd-status-indicator-default-color-stroke: var(--sapNeutralElementColor) !default;
$fd-status-indicator-default-color-stroke-width: 0.25 !default;
$fd-status-indicator-default-color-fill: transparent !default;
$fd-status-indicator-default-color: var(--sapContent_LabelColor) !default;
$fd-status-indicator-default-font-size: var(--sapFontSmallSize, 0.75rem);
$fd-status-indicator-default-margin: 0.375rem !default;
font-family: var(--sapFontFamily);
border-color: var(--sapContent_ForegroundBorderColor);
display: inline-flex;
color: $fd-status-indicator-default-color;
stroke: $fd-status-indicator-default-color-stroke;
stroke-width: $fd-status-indicator-default-color-stroke-width;
fill: $fd-status-indicator-default-color-fill;
flex-direction: column;
align-items: center;
@include fd-focus() {
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
outline-offset: var(--sapContent_FocusWidth);
}
@include fd-reset();
&--horizontal-label {
@include fd-reset();
flex-direction: unset;
}
&--link {
cursor: pointer;
}
&__label {
font-size: $fd-status-indicator-default-font-size;
margin: $fd-status-indicator-default-margin;
// sizes
@each $set-name, $size-set in $fd-status-indicator-sizes {
&--#{$set-name} {
font-size: map-get($size-set, 'font-size');
margin: map-get($size-set, 'margin');
}
}
}
@each $set-name, $color-set in $color-states {
&--#{$set-name} {
fill: map_get($color-set, "color");
color: map_get($color-set, "color");
}
}
// sizes
@each $set-name, $size-set in $fd-status-indicator-sizes {
&--#{$set-name} {
.#{$block}__svg {
width: map-get($size-set, 'width');
height: map-get($size-set, 'height');
}
}
}
}