cauldron/packages/styles/progressbar.css at develop · dequelabs/cauldron · GitHub

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
:root {
  --progress-bar-background-color: var(--accent-dark);
  --progress-bar-fill-color: var(--accent-info-light);
  --progress-bar-animation-timing: 150ms;
  --progress-bar-padding: 2px;
  --progress-bar-border-radius: calc((var(--space-small) * 0.5) + 2px);
  --progress-bar-fill-height: var(--space-small);
  --progress-bar-fill-border-radius: calc(var(--space-small) * 0.5);
  --progress-bar-fill-min-width: var(--space-small);
}

.ProgressBar {
  background-color: var(--progress-bar-background-color);
  padding: var(--progress-bar-padding);
  border-radius: var(--progress-bar-border-radius);
  margin-bottom: var(--space-smallest);
}

.ProgressBar--fill {
  border-radius: var(--progress-bar-fill-border-radius);
  background-color: var(--progress-bar-fill-color);
  height: var(--progress-bar-fill-height);
  min-width: var(--progress-bar-fill-min-width);
  transition: width linear var(--progress-bar-animation-timing);
}

.ProgressBar--thin {
  --progress-bar-padding: 3px;
  --progress-bar-border-radius: 3px;
  --progress-bar-fill-height: var(--space-half);
  --progress-bar-fill-border-radius: 1px;
  --progress-bar-fill-min-width: 1px;
}