Add progress bars

This commit is contained in:
Jeremy Thomas 2016-03-26 16:46:15 +00:00
parent 2a5e1149fe
commit fdb9800652
3 changed files with 36 additions and 3 deletions

View File

@ -1,10 +1,13 @@
# Bulma Changelog
## 0.0.17 ## 0.0.17
### Added ### Added
* `.pagination` * **pagination**: `.pagination`
* `.control.is-horizontal` for horizontal forms * **horizontal forms**: `.control.is-horizontal`
* `.help` for controls * **help** text for form controls: `.help`
* **progress bars**: `.progress`
### Updated ### Updated

View File

@ -6,6 +6,7 @@
@import "images" @import "images"
@import "messages" @import "messages"
@import "notifications" @import "notifications"
@import "progress"
.delete .delete
+unselectable +unselectable

View File

@ -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