diff --git a/README.adoc b/README.adoc index 3a422d6..85344f7 100644 --- a/README.adoc +++ b/README.adoc @@ -161,6 +161,14 @@ $ ./gradlew :sampler:run *NOTE:* all elements inside the vertical button group must have the same width. +=== Progress Bars + + * progress-bar-primary + * progress-bar-success + * progress-bar-info + * progress-bar-warning + * progress-bar-danger + === Miscellaneous * badge @@ -179,6 +187,11 @@ image::images/splitmenu-buttons.png[] == Changelog +.0.2.3 + + * Added `progress-bar` variants + * Tweaked menu items and menus + .0.2.2 * Add `Automatic-Module-Name` to JAR manifest diff --git a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_javafx.scss b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_javafx.scss index ecc621c..fb7ae57 100644 --- a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_javafx.scss +++ b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_javafx.scss @@ -17,7 +17,7 @@ } .menu-item:focused { - -fx-background-color: #f5f5f5; + -fx-background-color: $progress-bg; } .menu-item:focused > * { diff --git a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_mixins.scss b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_mixins.scss index c15eb99..b8228c7 100644 --- a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_mixins.scss +++ b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_mixins.scss @@ -25,7 +25,7 @@ //@import "mixins/list-group"; //@import "mixins/nav-divider"; //@import "mixins/forms"; -//@import "mixins/progress-bar"; +@import "mixins/progress-bar"; //@import "mixins/table-row"; // Skins diff --git a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_progress-bars.scss b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_progress-bars.scss index 343df63..028ddcd 100644 --- a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_progress-bars.scss +++ b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/_progress-bars.scss @@ -7,69 +7,73 @@ // ------------------------- // 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; } -} +// @-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; - @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); -} +// .progress { +// overflow: hidden; +// height: $line-height-computed; +// margin-bottom: $line-height-computed; +// background-color: $progress-bg; +// border-radius: $progress-border-radius; +// @include 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; - @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - @include transition(width .6s ease); -} +// .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; +// @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); +// @include 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 { - @include gradient-striped; - background-size: 40px 40px; -} +// .progress-striped .progress-bar, +// .progress-bar-striped { +// @include 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 { - @include animation(progress-bar-stripes 2s linear infinite); -} +// .progress.active .progress-bar, +// .progress-bar.active { +// @include animation(progress-bar-stripes 2s linear infinite); +// } // Variations // ------------------------- +.progress-bar-primary { + @include progress-bar-variant($progress-bar-bg); +} + .progress-bar-success { @include progress-bar-variant($progress-bar-success-bg); } diff --git a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/mixins/_progress-bar.scss b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/mixins/_progress-bar.scss index 90a62af..eea384a 100644 --- a/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/mixins/_progress-bar.scss +++ b/subprojects/bootstrapfx-core/src/sass/resources/bootstrap/mixins/_progress-bar.scss @@ -1,10 +1,19 @@ // Progress bars @mixin progress-bar-variant($color) { - background-color: $color; + & > .bar { + -fx-background-insets: 0; + -fx-background-color: $color; + -fx-progress-color: $color; + -fx-text-fill: $progress-bar-color; + -fx-text-alignment: center; + @include box-shadow(0, 0, -1px, 0, rgba(0, 0, 0, .15)); + } - // Deprecated parent class requirement as of v3.2.0 - .progress-striped & { - @include gradient-striped; - } + & > .track { + -fx-pref-height: 10; + -fx-background-radius: $progress-border-radius; + -fx-effect: innershadow(gaussian, $gray-lighter, 4, 0, 0, 1); + -fx-background-color: $progress-bg; + } } diff --git a/subprojects/bootstrapfx-core/src/sass/resources/bootstrapfx.scss b/subprojects/bootstrapfx-core/src/sass/resources/bootstrapfx.scss index 99accfb..361d457 100644 --- a/subprojects/bootstrapfx-core/src/sass/resources/bootstrapfx.scss +++ b/subprojects/bootstrapfx-core/src/sass/resources/bootstrapfx.scss @@ -42,7 +42,7 @@ //@import "bootstrap/jumbotron"; //@import "bootstrap/thumbnails"; @import "bootstrap/alerts"; -//@import "bootstrap/progress-bars"; +@import "bootstrap/progress-bars"; //@import "bootstrap/media"; //@import "bootstrap/list-group"; @import "bootstrap/panels"; diff --git a/subprojects/sampler/src/main/java/org/kordamp/bootstrapfx/Sampler.java b/subprojects/sampler/src/main/java/org/kordamp/bootstrapfx/Sampler.java index 51a3486..967e88f 100644 --- a/subprojects/sampler/src/main/java/org/kordamp/bootstrapfx/Sampler.java +++ b/subprojects/sampler/src/main/java/org/kordamp/bootstrapfx/Sampler.java @@ -48,6 +48,7 @@ public void start(Stage primaryStage) throws Exception { tabPane.getTabs().add(new DemoTab("Alerts", "alerts.fxml")); tabPane.getTabs().add(new DemoTab("Panels", "panels.fxml")); tabPane.getTabs().add(new DemoTab("Headings", "text.fxml")); + tabPane.getTabs().add(new DemoTab("Progress Bars", "progressbars.fxml")); tabPane.getTabs().add(new DemoTab("Text ", "text2.fxml")); tabPane.getTabs().add(new DemoTab("Paragraph ", "paragraph.fxml")); tabPane.getTabs().add(new DemoTab("Button Groups ", "button_groups.fxml")); diff --git a/subprojects/sampler/src/main/resources/org/kordamp/bootstrapfx/progressbars.fxml b/subprojects/sampler/src/main/resources/org/kordamp/bootstrapfx/progressbars.fxml new file mode 100644 index 0000000..b255392 --- /dev/null +++ b/subprojects/sampler/src/main/resources/org/kordamp/bootstrapfx/progressbars.fxml @@ -0,0 +1,53 @@ + + + + + + + + + + + + \ No newline at end of file