styleguide/lib/progress-bars/index.styl at new-header · csseditor/styleguide · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
//
// Progress bars
// --------------------------------------------------

//** Background color of the whole progress component
$progress-bg ?=               #f5f5f5
//** Progress bar text color
$progress-bar-color ?=        #fff
//** Variable for setting rounded corners on progress bar.
$progress-border-radius ?=    $border-radius-base

//** Default progress bar color
$progress-bar-bg ?=           $brand-primary
//** Success progress bar color
$progress-bar-success-bg ?=   $brand-success
//** Warning progress bar color
$progress-bar-warning-bg ?=   $brand-warning
//** Danger progress bar color
$progress-bar-danger-bg ?=    $brand-danger
//** Info progress bar color
$progress-bar-info-bg ?=      $brand-info

// Bar animations
// -------------------------

// WebKit
// @-webkit-keyframes progress-bar-stripes
//   from
//     background-position 40px 0
//   to
//     background-position 0 0

// Spec and IE10+
@keyframes progress-bar-stripes
  from
    background-position 40px 0
  to
    background-position 0 0


// Bar itself
// -------------------------

// Outer container
.progress
  overflow hidden
  height $line-height-computed
  margin-bottom $line-height-computed
  background-color $progress-bg
  border-radius $progress-border-radius
  box-shadow inset 0 1px 2px rgba(0, 0, 0, .1)

// Bar of progress
.progress-bar
  float left
  width 0%
  height 100%
  font-size $font-size-small
  line-height $line-height-computed
  color $progress-bar-color
  text-align center
  background-color $progress-bar-bg
  box-shadow inset 0 -1px 0 rgba(0, 0, 0, .15)
  transition width .6s ease

// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped
  gradient-striped()
  background-size 40px 40px

// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active
  animation progress-bar-stripes 2s linear infinite


// Variations
// -------------------------

.progress-bar-success
  progress-bar-variant($progress-bar-success-bg)

.progress-bar-info
  progress-bar-variant($progress-bar-info-bg)

.progress-bar-warning
  progress-bar-variant($progress-bar-warning-bg)

.progress-bar-danger
  progress-bar-variant($progress-bar-danger-bg)