Add progress bars

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64ece6b9a0389ebf16ef00478f315d2343554066..19a683b39777465a98eed4190559ca18928418cf 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,13 @@
+# Bulma Changelog
+
 ## 0.0.17
 
 ### Added
 
-* `.pagination`
-* `.control.is-horizontal` for horizontal forms
-* `.help` for controls
+* **pagination**: `.pagination`
+* **horizontal forms**: `.control.is-horizontal`
+* **help** text for form controls: `.help`
+* **progress bars**: `.progress`
 
 ### Updated
 

diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass
index 3e7e2bec9632b673e2ebf21462e3964071681c4c..2c3d87117f2f81e41c3b01b260c1df6dbc18f0d4 100644 (file)
--- a/bulma/elements/elements.sass
+++ b/bulma/elements/elements.sass
@@ -6,6 +6,7 @@
 @import "images"
 @import "messages"
 @import "notifications"
+@import "progress"
 
 .delete
   +unselectable

diff --git a/bulma/elements/progress.sass b/bulma/elements/progress.sass
new file mode 100644 (file)
index 0000000..843a744
--- /dev/null
+++ b/bulma/elements/progress.sass
@@ -0,0 +1,29 @@
+.progress
+  -moz-appearance: none
+  -webkit-appearance: none
+  @extend .block
+  border: none
+  border-radius: 290486px
+  display: block
+  height: 12px
+  overflow: hidden
+  padding: 0
+  width: 100%
+  &::-webkit-progress-bar
+    background: $border
+  &::-webkit-progress-value,
+  &::-moz-progress-bar
+    background: $text
+  &.is-small
+    height: 8px
+  &.is-medium
+    height: 16px
+  &.is-large
+    height: 20px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value,
+      &::-moz-progress-bar
+        background: $color
+