KaiUI/src/lib/components/ProgressBar/ProgressBar.scss at da6a9f22ce062d1fa6d4aaa7ee19e51eb7f6c44c · AdrianMachado/KaiUI · 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
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
@import '../../theme/fonts.scss';
@import '../../theme/theme.scss';
@import '../../theme/layout.scss';

:root {
  --pbar-right-filler-color: var(--color-gs20);
  --pbar-right-buffer-color: var(--color-gs45);

  --pbar-text-focused: var(--color-gs00);
  --pbar-right-filler-focused-color: var(--color-gs45);
}

.kai-pbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  height: var(--progress-bar-height);
  width: 100%;
  outline: none;

  &:focus {
    color: var(--pbar-text-focused);
  }

  &-line {
    @extend .p-pri;
    padding-bottom: 1rem;
    width: 100%;
    overflow: hidden;
  }

  &-bar-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 0.5rem;
  }

  &-left-filler {
    &-focused {
      @include progress-bar-left-filler;
    }
    &-unfocused {
      @include progress-bar-left-filler;
    }
  }

  &-right-filler-download {
    &-focused {
      @include progress-bar-right-filler;
      background-color: var(--pbar-right-filler-focused-color);
    }
    &-unfocused {
      @include progress-bar-right-filler;
      background-color: var(--pbar-right-filler-color);
    }
  }

  &-right-filler-buffer {
    &-focused {
      @include progress-bar-right-filler;
      background-color: var(--pbar-right-filler-color);
      overflow: hidden;
      position: relative;
      &:before {
        @include progress-bar-buffer;
      }
    }
    &-unfocused {
      @include progress-bar-right-filler;
      background-color: var(--pbar-right-filler-color);
      overflow: hidden;
      position: relative;
      &:before {
        @include progress-bar-buffer;
      }
    }
  }
}