Version 11.3.3

Demo completely redone, turn out that wrapping MFXHLoader and MFXVLoader in a ScrollPane is the way to go if there will be lot of buttons in them.
Cleaned up some CSS files.

AbstractMFXDialog/MFXDialog are now visible by default, this is a workaround for using MFXDialog in SceneBuilder.
Added MFXScrollPaneSkin for MFXScrollPane, for many years there is a known bug that makes the content of a ScrollPane blurry, I didn't notice it, for some reason the bug appeared on my laptop.
MFXVLoader forgot to change thread countdown.
MFXHLoader and MFXVLoader, fixed exception for not being on JavaFX Thread.
MFXNotifications are rounded by default now and have borders to distinguish them in case of white background.
Added new SVG resources.

Signed-off-by: PAlex404 <alessandro.parisi406@gmail.com>

README.md

@@ -86,7 +86,7 @@ repositories {
 }
 
 dependencies {
-implementation 'io.github.palexdev:materialfx:11.3.2'
+implementation 'io.github.palexdev:materialfx:11.3.3'
 }
 ```
 ###### Maven
@@ -94,7 +94,7 @@ implementation 'io.github.palexdev:materialfx:11.3.2'
 <dependency>
   <groupId>io.github.palexdev</groupId>
   <artifactId>materialfx</artifactId>
-  <version>11.3.2</version>
+  <version>11.3.3</version>
 </dependency>
 ```
 

build.gradle

@@ -4,7 +4,7 @@ plugins {
 }
 
 group 'io.github.palexdev'
-version '11.3.2'
+version '11.3.3'
 
 repositories {
     mavenCentral()

demo/src/main/java/io/github/palexdev/materialfx/demo/Demo.java

@@ -1,10 +1,11 @@
 package io.github.palexdev.materialfx.demo;
 
 import fr.brouillard.oss.cssfx.CSSFX;
+import io.github.palexdev.materialfx.demo.controllers.DemoController;
 import javafx.application.Application;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
-import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.StackPane;
 import javafx.scene.paint.Color;
 import javafx.stage.Stage;
 import javafx.stage.StageStyle;
@@ -20,7 +21,8 @@ public class Demo extends Application {
         CSSFX.start();
 
         FXMLLoader fxmlLoader = new FXMLLoader(MFXResourcesLoader.load("demo.fxml"));
-        AnchorPane demoPane = fxmlLoader.load();
+        fxmlLoader.setControllerFactory(controller -> new DemoController(primaryStage, getHostServices()));
+        StackPane demoPane = fxmlLoader.load();
 
         demoPane.setOnMousePressed(event -> {
             xOffset = primaryStage.getX() - event.getScreenX();

demo/src/main/java/io/github/palexdev/materialfx/demo/controllers/DemoController.java

@@ -1,69 +1,241 @@
 package io.github.palexdev.materialfx.demo.controllers;
 
 import io.github.palexdev.materialfx.MFXResourcesManager.SVGResources;
-import io.github.palexdev.materialfx.controls.MFXButton;
-import io.github.palexdev.materialfx.controls.MFXHLoader;
-import io.github.palexdev.materialfx.controls.MFXToggleNode;
-import io.github.palexdev.materialfx.controls.MFXVLoader;
+import io.github.palexdev.materialfx.controls.*;
+import io.github.palexdev.materialfx.controls.factories.MFXAnimationFactory;
 import io.github.palexdev.materialfx.demo.MFXResourcesLoader;
+import io.github.palexdev.materialfx.utils.NodeUtils;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.ParallelTransition;
+import javafx.animation.Timeline;
+import javafx.application.HostServices;
 import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.Scene;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
 import javafx.scene.input.MouseEvent;
-import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.SVGPath;
+import javafx.stage.Modality;
 import javafx.stage.Stage;
+import javafx.util.Duration;
+import org.kordamp.ikonli.javafx.FontIcon;
 
+import java.io.IOException;
 import java.net.URL;
 import java.util.ResourceBundle;
 
 public class DemoController implements Initializable {
+    private final Stage primaryStage;
+    private final HostServices hostServices;
+
+    private ParallelTransition openNav;
+    private ParallelTransition closeNav;
+    private boolean isNavShown = false;
+
     @FXML
-    private AnchorPane demoPane;
+    private StackPane demoPane;
 
     @FXML
-    private MFXHLoader hLoader;
+    private StackPane navBar;
 
     @FXML
     private MFXVLoader vLoader;
 
+    private MFXButton opNavButton;
+
     @FXML
     private StackPane contentPane;
 
+    public DemoController(Stage primaryStage, HostServices hostServices) {
+        this.primaryStage = primaryStage;
+        this.hostServices = hostServices;
+    }
+
     @Override
     public void initialize(URL location, ResourceBundle resources) {
-        MFXButton closeButton = new MFXButton("");
+        // Resources
         SVGPath x = SVGResources.X.getSvgPath();
-        x.setScaleX(0.15);
-        x.setScaleY(0.15);
-        x.setFill(Color.WHITE);
-        closeButton.setPrefSize(20, 20);
+        x.setScaleX(0.14);
+        x.setScaleY(0.14);
+        SVGPath minus = SVGResources.MINUS.getSvgPath();
+        minus.setScaleX(0.03);
+        minus.setScaleY(0.05);
+        SVGPath expand = SVGResources.EXPAND.getSvgPath();
+        expand.setScaleX(0.5);
+        expand.setScaleY(0.5);
+        SVGPath info = SVGResources.INFO.getSvgPath();
+        info.setScaleX(0.4);
+        info.setScaleY(0.4);
+        info.setFill(Color.rgb(75, 181, 255));
+        FontIcon angle = new FontIcon("fas-angle-right");
+        angle.setIconSize(20);
+
+        // Buttons
+        MFXButton closeButton = new MFXButton("");
+        closeButton.setId("closeButton");
+        closeButton.setPrefSize(25, 25);
         closeButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        closeButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> primaryStage.close());
+
+        MFXButton minimizeButton = new MFXButton("");
+        minimizeButton.setId("minimizeButton");
+        minimizeButton.setPrefSize(22, 22);
+        minimizeButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        minimizeButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> primaryStage.setIconified(true));
+
+        MFXButton expandButton = new MFXButton("");
+        expandButton.setId("expandButton");
+        expandButton.setPrefSize(22, 22);
+        expandButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        expandButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> primaryStage.setFullScreen(!primaryStage.isFullScreen()));
+
+        MFXButton infoButton = new MFXButton("");
+        infoButton.setId("infoButton");
+        infoButton.setPrefSize(30, 30);
+        infoButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        infoButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> showInfo());
+
+        opNavButton = new MFXButton("");
+        opNavButton.setId("navButton");
+        opNavButton.setPrefSize(25, 25);
+        opNavButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        opNavButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> animate());
+
+
+        // Graphics
         closeButton.setGraphic(x);
-        closeButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> ((Stage) demoPane.getScene().getWindow()).close());
-        closeButton.setStyle("-fx-background-color: transparent");
-        demoPane.getChildren().add(closeButton);
-        AnchorPane.setTopAnchor(closeButton, 8.0);
-        AnchorPane.setRightAnchor(closeButton, 10.0);
+        minimizeButton.setGraphic(minus);
+        expandButton.setGraphic(expand);
+        infoButton.setGraphic(info);
+        opNavButton.setGraphic(angle);
+
+        // Layout and Utils
+        StackPane.setAlignment(closeButton, Pos.TOP_RIGHT);
+        StackPane.setMargin(closeButton, new Insets(8, 8, 0, 0));
+        StackPane.setAlignment(minimizeButton, Pos.TOP_RIGHT);
+        StackPane.setMargin(minimizeButton, new Insets(10, 34, 0, 0));
+        StackPane.setAlignment(expandButton, Pos.TOP_RIGHT);
+        StackPane.setMargin(expandButton, new Insets(10, 60, 0, 0));
+        StackPane.setAlignment(infoButton, Pos.BOTTOM_RIGHT);
+        StackPane.setMargin(infoButton, new Insets(0, 8, 8, 0));
+        StackPane.setAlignment(opNavButton, Pos.CENTER_LEFT);
+        StackPane.setMargin(opNavButton, new Insets(0, 0, 0, 9));
+
+        NodeUtils.makeRegionCircular(closeButton);
+        NodeUtils.makeRegionCircular(minimizeButton);
+        NodeUtils.makeRegionCircular(expandButton);
+        NodeUtils.makeRegionCircular(infoButton);
+        NodeUtils.makeRegionCircular(opNavButton);
+
+        // Add all
+        demoPane.getChildren().addAll(closeButton, minimizeButton, expandButton, infoButton, opNavButton);
 
-        hLoader.setContentPane(contentPane);
+        // VLoader
         vLoader.setContentPane(contentPane);
+        vLoader.addItem(0, "BUTTONS", new MFXToggleNode("BUTTONS"), MFXResourcesLoader.load("buttons_demo.fxml"));
+        vLoader.addItem(1, "CHECKBOXES", new MFXToggleNode("CHECKBOXES"), MFXResourcesLoader.load("checkboxes_demo.fxml"));
+        vLoader.addItem(2, "TOGGLES", new MFXToggleNode("TOGGLES"), MFXResourcesLoader.load("toggle_buttons_demo.fxml"));
+        vLoader.addItem(3, "DIALOGS", new MFXToggleNode("DIALOGS"), MFXResourcesLoader.load("dialogs_demo.fxml"), controller -> new DialogsController(demoPane));
+        vLoader.addItem(4, "NOTIFICATIONS", new MFXToggleNode("NOTIFICATIONS"), MFXResourcesLoader.load("notifications_demo.fxml"));
+        vLoader.addItem(5, "SCROLLPANE", new MFXToggleNode("SCROLLPANE"), MFXResourcesLoader.load("scrollpane_demo.fxml"));
+        vLoader.setDefault("BUTTONS");
 
-        hLoader.addItem(0, "BUTTONS", new MFXToggleNode("BUTTONS"), MFXResourcesLoader.load("buttons_demo.fxml"));
-        hLoader.addItem(1, "CHECKBOXES", new MFXToggleNode("CHECKBOXES"), MFXResourcesLoader.load("checkboxes_demo.fxml"));
-        hLoader.addItem(2, "TOGGLES", new MFXToggleNode("TOGGLES"), MFXResourcesLoader.load("toggle_buttons_demo.fxml"));
-        hLoader.addItem(3, "DIALOGS", new MFXToggleNode("DIALOGS"), MFXResourcesLoader.load("dialogs_demo.fxml"), controller -> new DialogsController(demoPane));
-        hLoader.addItem(4, "NOTIFICATIONS", new MFXToggleNode("NOTIFICATIONS"), MFXResourcesLoader.load("notifications_demo.fxml"));
-        hLoader.addItem(5, "SCROLLPANE", new MFXToggleNode("SCROLLPANE"), MFXResourcesLoader.load("scrollpane_demo.fxml"));
-        hLoader.setDefault("BUTTONS");
-
-        /*
-        vLoader.addItem(0, new MFXButton("Buttons", 80, 40), MFXResourcesLoader.load("buttons_demo.fxml"));
-        vLoader.addItem(1, new MFXButton("Checkboxes", 80, 40), MFXResourcesLoader.load("checkboxes_demo.fxml"));
-        vLoader.addItem(2, new MFXButton("Toggles", 80, 40), MFXResourcesLoader.load("toggle_buttons_demo.fxml"));
-        vLoader.addItem(3, new MFXButton("Dialogs", 80, 40), MFXResourcesLoader.load("dialogs_demo.fxml"), controller -> new DialogsController(demoPane));
-        */
+        // Others
+        primaryStage.sceneProperty().addListener((observable, oldValue, newValue) -> {
+            if (newValue != null) {
+                Scene scene = primaryStage.getScene();
+                scene.addEventFilter(KeyEvent.KEY_PRESSED, event -> {
+                    if (event.getCode() == KeyCode.F11) {
+                        primaryStage.setFullScreen(!primaryStage.isFullScreen());
+                    }
+                });
+                scene.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
+                    if (isNavShown) {
+                        animate();
+                    }
+                });
+            }
+        });
+        navBar.setVisible(false);
+        initAnimations();
     }
+
+    private void initAnimations() {
+        Timeline fadeIn = MFXAnimationFactory.FADE_IN.build(navBar, 400);
+        Timeline show = new Timeline(
+                new KeyFrame(Duration.millis(300), new KeyValue(navBar.translateXProperty(), 5))
+        );
+        Timeline left = new Timeline(
+                new KeyFrame(Duration.millis(200), new KeyValue(opNavButton.rotateProperty(), -180))
+        );
+
+        Timeline fadeOut = MFXAnimationFactory.FADE_OUT.build(navBar, 50);
+        Timeline close = new Timeline(
+                new KeyFrame(Duration.millis(300), new KeyValue(navBar.translateXProperty(), -200))
+        );
+        Timeline right = new Timeline(
+                new KeyFrame(Duration.millis(200), new KeyValue(opNavButton.rotateProperty(), 0))
+        );
+
+        openNav = new ParallelTransition(fadeIn, show, left);
+        openNav.setOnFinished(event -> isNavShown = true);
+        closeNav = new ParallelTransition(fadeOut, close, right);
+        closeNav.setOnFinished(event -> isNavShown = false);
+    }
+
+    private void animate() {
+        if (!isNavShown) {
+            navBar.setVisible(true);
+            openNav.play();
+        } else {
+            closeNav.play();
+        }
+    }
+
+    private void showInfo() {
+        MFXDialog infoDialog;
+        MFXStageDialog stageDialog;
+        try {
+            FXMLLoader loader = new FXMLLoader(MFXResourcesLoader.load("info_dialog.fxml"));
+            loader.setControllerFactory(controller -> new InfoController(hostServices));
+            infoDialog = loader.load();
+        } catch (IOException e) {
+            e.printStackTrace();
+            return;
+        }
+
+        // Close Button
+        StackPane header = (StackPane) infoDialog.lookup("#headerNode");
+
+        SVGPath x = SVGResources.X.getSvgPath();
+        x.setScaleX(0.14);
+        x.setScaleY(0.14);
+
+        MFXButton closeButton = new MFXButton("");
+        closeButton.setId("closeButton");
+        closeButton.setPrefSize(25, 25);
+        closeButton.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        closeButton.setGraphic(x);
+        StackPane.setAlignment(closeButton, Pos.TOP_RIGHT);
+        StackPane.setMargin(closeButton, new Insets(4, 4, 0, 0));
+        NodeUtils.makeRegionCircular(closeButton);
+        header.getChildren().add(closeButton);
+
+        stageDialog = new MFXStageDialog(infoDialog);
+        stageDialog.setScrimBackground(true);
+        stageDialog.setOwner(primaryStage);
+        stageDialog.setModality(Modality.APPLICATION_MODAL);
+        closeButton.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> stageDialog.close());
+        stageDialog.setCenterInOwner(true);
+        stageDialog.show();
+    }
+
 }

demo/src/main/java/io/github/palexdev/materialfx/demo/controllers/DialogsController.java

@@ -83,6 +83,9 @@ public class DialogsController implements Initializable {
 
     @Override
     public void initialize(URL location, ResourceBundle resources) {
+        dialog.setVisible(false);
+        animateDialog.setVisible(false);
+
         pError.setOnAction(event -> {
             resetDialog();
             MFXDialogFactory.convertToSpecific(DialogType.ERROR, dialog);
@@ -108,8 +111,9 @@ public class DialogsController implements Initializable {
             AbstractMFXDialog genericDialog = MFXDialogFactory.buildGenericDialog("MFXDialog - Generic Dialog", text);
             genericDialog.setCloseHandler(c -> {
                 genericDialog.close();
-                this.pane.getChildren().remove(genericDialog);
+                DialogsController.this.pane.getChildren().remove(genericDialog);
             });
+            genericDialog.setVisible(false);
             this.pane.getChildren().add(genericDialog);
             genericDialog.show();
         });

demo/src/main/java/io/github/palexdev/materialfx/demo/controllers/InfoController.java

@@ -0,0 +1,57 @@
+package io.github.palexdev.materialfx.demo.controllers;
+
+import javafx.application.HostServices;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.Hyperlink;
+import javafx.scene.control.Label;
+
+import java.net.URL;
+import java.util.ResourceBundle;
+
+public class InfoController implements Initializable {
+    private final HostServices hostServices;
+
+    @FXML
+    private Label githubL;
+
+    @FXML
+    private Hyperlink githubH;
+
+    @FXML
+    private Label mavenL;
+
+    @FXML
+    private Hyperlink mavenH;
+
+    @FXML
+    private Label contactL;
+
+    @FXML
+    private Hyperlink contactH;
+
+    @FXML
+    private Label emailL;
+
+    @FXML
+    private Hyperlink emailH;
+
+    @FXML
+    private Label paypalL;
+
+    @FXML
+    private Hyperlink paypalH;
+
+    public InfoController(HostServices hostServices) {
+        this.hostServices = hostServices;
+    }
+
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        githubL.getGraphic().setOnMousePressed(event -> hostServices.showDocument(githubH.getTooltip().getText()));
+        mavenL.getGraphic().setOnMousePressed(event -> hostServices.showDocument(mavenH.getTooltip().getText()));
+        contactL.getGraphic().setOnMousePressed(event -> hostServices.showDocument(contactH.getTooltip().getText()));
+        emailL.getGraphic().setOnMousePressed(event -> hostServices.showDocument(emailH.getTooltip().getText()));
+        paypalL.getGraphic().setOnMousePressed(event -> hostServices.showDocument(paypalH.getTooltip().getText()));
+    }
+}

demo/src/main/resources/io/github/palexdev/materialfx/demo/buttons_demo.css

@@ -1,5 +1,3 @@
-@import url("common.css");
-
 .flat-button {
     -fx-background-color: transparent;
 }

demo/src/main/resources/io/github/palexdev/materialfx/demo/checkboxes_demo.css

@@ -1,5 +1,3 @@
-@import url("common.css");
-
 #custom-ripple .ripple-container .ripple-generator {
     -mfx-ripple-color: rgb(195, 255, 190);
 }

demo/src/main/resources/io/github/palexdev/materialfx/demo/common.css

@@ -215,12 +215,15 @@
 }
 
 .label {
-    -fx-background-color: linear-gradient(to bottom right, #0093E9 0%, #7be4bc 100%);
+    -fx-background-color: linear-gradient(to bottom right, #C01ADD 0%, #6A6AF8 100%);;
     -fx-background-radius: 7;
-    -fx-border-color: lightgray;
+    -fx-border-color: #7F0FFF;
     -fx-border-radius: 5;
     -fx-border-width: 2;
-    -fx-font-family: Comfortaa-SemiBold;
+}
+
+.label .text {
+    -fx-font-family: "Open Sans Bold";
     -fx-font-size: 12.5;
-    -fx-text-fill: white;
+    -fx-fill: white;
 }

demo/src/main/resources/io/github/palexdev/materialfx/demo/demo.css

@@ -1,57 +1,117 @@
 @import "common.css";
 
 #demoPane {
-    -fx-background-color: #2b194f;
+    -fx-background-color: #FAFAFA;
     -fx-background-radius: 10;
     -fx-border-radius: 10;
 }
 
+#closeButton,
+#minimizeButton,
+#expandButton {
+    -fx-background-color: transparent;
+}
+
+#closeButton:hover {
+    -fx-background-color: #ffe6e6;
+}
+
+#minimizeButton:hover {
+    -fx-background-color: #e6ecff;
+}
+
+#expandButton:hover {
+    -fx-background-color: #fffdd6;
+}
+
+#infoButton {
+    -fx-background-color: white, white;
+    -fx-background-radius: 16.4, 15;
+    -fx-background-insets: -1.4, 0;
+    -fx-border-radius: 15;
+    -fx-border-width: 2;
+    -fx-border-color: rgb(75, 181, 255);
+    -fx-padding: 0;
+    -fx-font-size: 0;
+}
+
+#infoButton .ripple-generator {
+    -mfx-ripple-color: #e7ecff;
+}
+
 #contentPane {
-    -fx-background-color: #F4F5F6;
+    -fx-background-color: #FAFAFA;
     -fx-background-insets: 0 2 2 2;
     -fx-background-radius: 10;
-    -fx-border-color: #005cd4;
-    -fx-border-radius: 10;
-    -fx-border-insets: 0 1 1 1;
-    -fx-border-width: 1.8;
 }
 
-#hLoader {
-    -fx-background-color: #005cd4;
+#navButton {
+    -fx-background-color: white, white;
+    -fx-background-radius: 16.4, 15;
+    -fx-background-insets: -1.4, 0;
+    -fx-border-radius: 15;
+    -fx-border-width: 1.2;
+    -fx-border-color: rgba(127, 15, 255, 0.35);
+    -fx-padding: 0;
+    -fx-font-size: 0;
+}
+
+#navButton .ripple-generator {
+    -mfx-ripple-color: #e2caff;
+}
+
+#navButton .ikonli-font-icon {
+    -fx-icon-color: #6e0ede;
+    -fx-opacity: 0.5;
+}
+
+#navButton .ikonli-font-icon:hover {
+    -fx-icon-color: #6e0ede;
+    -fx-opacity: 1.0;
+}
+
+#navBar {
     -fx-background-radius: 10;
-    -fx-border-color: #565656;
-    -fx-border-width: 0.5;
+    -fx-border-color: #7F0FFF;
+    -fx-border-width: 0.2;
     -fx-border-radius: 10;
 }
 
-#hLoader .mfx-toggle-node {
-    -fx-background-color: #5c1ed9;
+#vLoader .mfx-toggle-node {
+    -fx-background-color: white;
     -fx-background-radius: 6;
     -fx-background-insets: -1;
+    -fx-border-color: #7F0FFF;
     -fx-border-radius: 6;
     -fx-border-insets: -1;
-    -fx-opacity: 0.6;
+    -fx-border-width: 1.2;
     -mfx-shape: rectangle;
-    -mfx-size: 27px;
+    -mfx-size: 35px;
 }
 
-#hLoader .mfx-toggle-node .text {
-    -fx-font-family: 'Open Sans SemiBold';
-    -fx-font-size: 9;
-    -fx-fill: white;
-    -fx-opacity: 0.5;
+#vLoader .mfx-toggle-node .text {
+    -fx-font-family: 'Open Sans Bold';
+    -fx-fill: #7F0FFF;
+    -fx-font-size: 13;
+    -fx-opacity: 0.7;
+}
+
+#vLoader .mfx-toggle-node:hover,
+#vLoader .mfx-toggle-node:hover .text{
+    -fx-opacity: 1.0;
 }
 
-#hLoader .mfx-toggle-node:selected {
-    -fx-background-color: linear-gradient(to right, #4a00e0 15%, #8e2de2 95%);;
+#vLoader .mfx-toggle-node:selected {
+    -fx-background-color: white;
     -fx-opacity: 1;
 }
 
-#hLoader .mfx-toggle-node:selected .text {
+#vLoader .mfx-toggle-node:selected .text {
     -fx-opacity: 1.0;
 }
 
-#hLoader .mfx-toggle-node .ripple-generator {
-    -mfx-ripple-radius: 35px;
-    -mfx-ripple-color: rgba(198, 198, 198, 0.3)
+#vLoader .mfx-toggle-node .ripple-generator {
+    -mfx-ripple-radius: 40px;
+    -mfx-ripple-color: #e2caff;
+    -mfx-animate-background: true;
 }

demo/src/main/resources/io/github/palexdev/materialfx/demo/demo.fxml

@@ -1,14 +1,34 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import io.github.palexdev.materialfx.controls.MFXHLoader?>
+
+<?import io.github.palexdev.materialfx.controls.MFXScrollPane?>
 <?import io.github.palexdev.materialfx.controls.MFXVLoader?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.layout.*?>
-<AnchorPane id="demoPane" fx:id="demoPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="445.0" prefWidth="780.0" stylesheets="@demo.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.palexdev.materialfx.demo.controllers.DemoController">
-   <MFXHLoader id="hLoader" fx:id="hLoader" layoutX="45.0" layoutY="16.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="48.0" prefWidth="691.0" AnchorPane.leftAnchor="45.0" AnchorPane.rightAnchor="45.0" AnchorPane.topAnchor="15.0">
-      <padding>
-         <Insets bottom="10.0" />
-      </padding></MFXHLoader>
-   <StackPane id="contentPane" fx:id="contentPane" layoutX="14.0" layoutY="45.0" prefHeight="405.0" prefWidth="760.0" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="50.0" />
-   <MFXVLoader fx:id="vLoader" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="460.0" prefWidth="100.0" />
-</AnchorPane>
+<StackPane id="demoPane" fx:id="demoPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
+           minWidth="-Infinity" prefHeight="432.0" prefWidth="768.0" stylesheets="@demo.css"
+           xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
+           fx:controller="io.github.palexdev.materialfx.demo.controllers.DemoController">
+   <StackPane id="contentPane" fx:id="contentPane" prefHeight="207.0" prefWidth="441.0">
+      <StackPane.margin>
+         <Insets bottom="15.0" left="20.0" right="20.0" top="15.0"/>
+      </StackPane.margin>
+   </StackPane>
+   <StackPane id="navBar" fx:id="navBar" maxWidth="-Infinity"
+              style="-fx-background-radius: 10; -fx-background-color: white;" translateX="-200.0"
+              StackPane.alignment="CENTER_LEFT">
+      <StackPane.margin>
+         <Insets bottom="15.0" left="15.0" top="15.0"/>
+      </StackPane.margin>
+      <MFXScrollPane fitToWidth="true" hbarPolicy="NEVER" prefWidth="150.0">
+         <StackPane.margin>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+         </StackPane.margin>
+         <MFXVLoader fx:id="vLoader" alignment="TOP_CENTER" prefHeight="360.0" prefWidth="150.0" spacing="20.0">
+            <padding>
+               <Insets bottom="10.0" left="5.0" right="5.0" top="10.0"/>
+            </padding>
+         </MFXVLoader>
+      </MFXScrollPane>
+   </StackPane>
+</StackPane>

demo/src/main/resources/io/github/palexdev/materialfx/demo/dialogs_demo.css

@@ -1 +0,0 @@
-@import url("common.css");

demo/src/main/resources/io/github/palexdev/materialfx/demo/dialogs_demo.fxml

@@ -4,7 +4,7 @@
 <?import javafx.geometry.*?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.layout.*?>
-<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@toggle_buttons_demo.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.palexdev.materialfx.demo.controllers.DialogsController">
+<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.palexdev.materialfx.demo.controllers.DialogsController">
    <Label alignment="CENTER" prefHeight="26.0" prefWidth="266.0" text="Pane Dialogs/Alerts" StackPane.alignment="TOP_CENTER">
       <StackPane.margin>
          <Insets top="16.0" />

demo/src/main/resources/io/github/palexdev/materialfx/demo/info_dialog.css

@@ -0,0 +1,50 @@
+.mfx-dialog {
+    -fx-background-color: transparent;
+    -fx-border-color: transparent;
+}
+
+.label .text {
+    -fx-font-family: "Comfortaa Regular";
+}
+
+#materialfxLabel {
+    -fx-background-color: #7F0FFF;
+    -fx-background-radius: 6px;
+}
+
+#materialfxLabel .text {
+    -fx-font-family: "Comfortaa Bold";
+    -fx-font-size: 40px;
+    -fx-fill: white;
+}
+
+#titleLabel .text {
+    -fx-font-family: "Comfortaa Bold";
+    -fx-font-size: 15px;
+}
+
+
+.mfx-button {
+    -fx-background-color: white, white;
+    -fx-background-radius: 16.4, 15;
+    -fx-background-insets: -1.4, 0;
+    -fx-border-radius: 15;
+    -fx-border-width: 1.5;
+    -fx-border-color: rgba(127, 15, 255, 0.35);
+    -fx-padding: 0;
+    -fx-font-size: 0;
+}
+
+.mfx-button .ripple-generator {
+    -mfx-ripple-color: #e2caff;
+}
+
+#contentNode {
+    -fx-background-color: white;
+    -fx-background-radius: 5px;
+    -fx-background-insets: 0px 11px 11px 11px;
+    -fx-border-color: #7F0FFF;
+    -fx-border-radius: 5px;
+    -fx-border-insets: 0px 11px 11px 11px;
+    -fx-border-width: 2px;
+}

demo/src/main/resources/io/github/palexdev/materialfx/demo/info_dialog.fxml

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import io.github.palexdev.materialfx.controls.MFXDialog?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.TextFlow?>
+<MFXDialog maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@info_dialog.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.palexdev.materialfx.demo.controllers.InfoController">
+   <top>
+      <StackPane id="headerNode" prefHeight="80.0" prefWidth="600.0" BorderPane.alignment="CENTER">
+         <Label id="materialfxLabel" alignment="CENTER" maxHeight="1.7976931348623157E308"
+                maxWidth="1.7976931348623157E308" text="MATERIALFX" textAlignment="CENTER">
+            <StackPane.margin>
+               <Insets left="11.0" right="11.0" top="11.0"/>
+            </StackPane.margin>
+         </Label>
+      </StackPane>
+   </top>
+   <center>
+      <StackPane id="contentNode" prefHeight="150.0" prefWidth="200.0" BorderPane.alignment="CENTER">
+         <Label id="titleLabel" alignment="CENTER" prefHeight="30.0" prefWidth="550.0"
+                text="MaterialFX Demo - Features Preview" StackPane.alignment="TOP_CENTER">
+            <StackPane.margin>
+               <Insets top="5.0"/>
+            </StackPane.margin>
+         </Label>
+         <Label alignment="CENTER" prefHeight="30.0" prefWidth="550.0" text="Author:  Parisi Alessandro"
+                StackPane.alignment="TOP_CENTER">
+            <StackPane.margin>
+               <Insets top="30.0"/>
+            </StackPane.margin>
+         </Label>
+         <FlowPane alignment="TOP_CENTER" columnHalignment="CENTER" prefHeight="200.0" prefWidth="200.0"
+                   prefWrapLength="5000.0" vgap="15.0" StackPane.alignment="TOP_CENTER">
+            <StackPane.margin>
+               <Insets top="70.0"/>
+            </StackPane.margin>
+            <Label fx:id="githubL" alignment="CENTER" contentDisplay="RIGHT" prefHeight="30.0" prefWidth="200.0"
+                   text="Project Page:  ">
+               <graphic>
+                  <Hyperlink fx:id="githubH" text="Github">
+                     <tooltip>
+                        <Tooltip text="https://github.com/palexdev/MaterialFX"/>
+                     </tooltip>
+                     <padding>
+                        <Insets top="1.0"/>
+                     </padding>
+                  </Hyperlink>
+               </graphic>
+            </Label>
+            <Label fx:id="mavenL" alignment="CENTER" contentDisplay="RIGHT" prefHeight="30.0" prefWidth="550.0"
+                   text="Project Repository:  ">
+               <graphic>
+                  <Hyperlink fx:id="mavenH" text="Maven Central">
+                     <tooltip>
+                        <Tooltip text="https://search.maven.org/artifact/io.github.palexdev/materialfx"/>
+                     </tooltip>
+                  </Hyperlink>
+               </graphic>
+            </Label>
+            <TextFlow maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" prefHeight="34.0"
+                      prefWidth="250.0">
+               <Label fx:id="contactL" alignment="CENTER" contentDisplay="RIGHT" prefHeight="30.0"
+                      prefWidth="200.0" text="Contacts:  ">
+                  <graphic>
+                     <Hyperlink fx:id="contactH" text="Info on Github">
+                        <tooltip>
+                           <Tooltip text="https://github.com/palexdev/MaterialFX"/>
+                        </tooltip>
+                     </Hyperlink>
+                  </graphic>
+               </Label>
+               <Label fx:id="emailL" alignment="CENTER" contentDisplay="RIGHT" prefHeight="30.0" prefWidth="30.0"
+                      text="or  ">
+                  <graphic>
+                     <Hyperlink fx:id="emailH" text="eMail">
+                        <tooltip>
+                           <Tooltip text="mailto:alessandro.parisi406@gmail.com"/>
+                        </tooltip>
+                     </Hyperlink>
+                  </graphic>
+               </Label>
+            </TextFlow>
+            <Label fx:id="paypalL" alignment="CENTER" contentDisplay="RIGHT" prefHeight="30.0" prefWidth="550.0"
+                   text="Donation:  ">
+               <graphic>
+                  <Hyperlink fx:id="paypalH" text="Paypal">
+                     <tooltip>
+                        <Tooltip text="https://bit.ly/31XB8zD"/>
+                     </tooltip>
+                  </Hyperlink>
+               </graphic>
+            </Label>
+         </FlowPane>
+      </StackPane>
+   </center>
+</MFXDialog>

demo/src/main/resources/io/github/palexdev/materialfx/demo/notifications_demo.css

@@ -1 +0,0 @@
-@import url("common.css");

demo/src/main/resources/io/github/palexdev/materialfx/demo/notifications_demo.fxml

@@ -1,42 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-
 <?import io.github.palexdev.materialfx.controls.*?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.layout.*?>
-<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
-           prefWidth="600.0" stylesheets="@notifications_demo.css" xmlns="http://javafx.com/javafx/11.0.1"
-           xmlns:fx="http://javafx.com/fxml/1"
-           fx:controller="io.github.palexdev.materialfx.demo.controllers.NotificationsController">
-   <Label alignment="CENTER" prefHeight="26.0" prefWidth="266.0" text="Notifications Positions"
-          StackPane.alignment="TOP_CENTER">
+<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.palexdev.materialfx.demo.controllers.NotificationsController">
+   <Label alignment="CENTER" prefHeight="26.0" prefWidth="266.0" text="Notifications Positions" StackPane.alignment="TOP_CENTER">
       <StackPane.margin>
-         <Insets top="16.0"/>
+         <Insets top="16.0" />
       </StackPane.margin>
    </Label>
-   <HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" prefHeight="50.0" prefWidth="200.0"
-         spacing="35.0" StackPane.alignment="TOP_CENTER">
+   <HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" prefHeight="50.0" prefWidth="200.0" spacing="35.0" StackPane.alignment="TOP_CENTER">
       <StackPane.margin>
-         <Insets top="60.0"/>
+         <Insets top="60.0" />
       </StackPane.margin>
-      <MFXButton buttonType="RAISED" onAction="#showTopLeft" rippleColor="#c8c8c8" rippleRadius="30.0"
-                 text="TOP LEFT"/>
-      <MFXButton buttonType="RAISED" onAction="#showTopCenter" rippleColor="#c8c8c8" rippleRadius="30.0"
-                 text="TOP CENTER"/>
-      <MFXButton buttonType="RAISED" onAction="#showTopRight" rippleColor="#c8c8c8" rippleRadius="30.0"
-                 text="TOP RIGHT"/>
+      <MFXButton buttonType="RAISED" onAction="#showTopLeft" rippleColor="#c8c8c8" rippleRadius="30.0" text="TOP LEFT" />
+      <MFXButton buttonType="RAISED" onAction="#showTopCenter" rippleColor="#c8c8c8" rippleRadius="30.0" text="TOP CENTER" />
+      <MFXButton buttonType="RAISED" onAction="#showTopRight" rippleColor="#c8c8c8" rippleRadius="30.0" text="TOP RIGHT" />
    </HBox>
-   <HBox alignment="CENTER" maxHeight="-Infinity" prefHeight="50.0" prefWidth="200.0" spacing="35.0"
-         StackPane.alignment="TOP_CENTER">
+   <HBox alignment="CENTER" maxHeight="-Infinity" prefHeight="50.0" prefWidth="200.0" spacing="35.0" StackPane.alignment="TOP_CENTER">
       <StackPane.margin>
-         <Insets top="120.0"/>
+         <Insets top="120.0" />
       </StackPane.margin>
-      <MFXButton buttonType="RAISED" onAction="#showBottomLeft" rippleColor="#c8c8c8" rippleRadius="35.0"
-                 text="BOTTOM LEFT"/>
-      <MFXButton buttonType="RAISED" onAction="#showBottomCenter" rippleColor="#c8c8c8" rippleRadius="35.0"
-                 text="BOTTOM CENTER"/>
-      <MFXButton buttonType="RAISED" onAction="#showBottomRight" rippleColor="#c8c8c8" rippleRadius="35.0"
-                 text="BOTTOM RIGHT"/>
+      <MFXButton buttonType="RAISED" onAction="#showBottomLeft" rippleColor="#c8c8c8" rippleRadius="35.0" text="BOTTOM LEFT" />
+      <MFXButton buttonType="RAISED" onAction="#showBottomCenter" rippleColor="#c8c8c8" rippleRadius="35.0" text="BOTTOM CENTER" />
+      <MFXButton buttonType="RAISED" onAction="#showBottomRight" rippleColor="#c8c8c8" rippleRadius="35.0" text="BOTTOM RIGHT" />
    </HBox>
 </StackPane>

demo/src/main/resources/io/github/palexdev/materialfx/demo/scrollpane_demo.css

@@ -1,12 +1,13 @@
-@import url("common.css");
-
 .label {
     -fx-background-color: white;
     -fx-background-radius: 0;
     -fx-border-color: transparent;
     -fx-border-radius: 0;
     -fx-border-width: 0;
-    -fx-font-family: System;
+}
+
+.label .text {
+    -fx-font-family: "Open Sans";
     -fx-font-size: 12;
-    -fx-text-fill: black;
+    -fx-fill: black;
 }

demo/src/main/resources/io/github/palexdev/materialfx/demo/toggle_buttons_demo.css

@@ -1,5 +1,3 @@
-@import url("common.css");
-
 #customRippleRadius .container .ripple-generator {
     -mfx-ripple-radius: 15;
 }

materialfx/gradle.properties

@@ -1,6 +1,6 @@
 GROUP=io.github.palexdev
 POM_ARTIFACT_ID=materialfx
-VERSION_NAME=11.3.2
+VERSION_NAME=11.3.3
 
 POM_NAME=materialfx
 POM_DESCRIPTION=Material Desgin components for JavaFX

materialfx/src/main/java/io/github/palexdev/materialfx/MFXResourcesManager.java

@@ -37,6 +37,8 @@ public class MFXResourcesManager {
      */
     public enum SVGResources {
         CROSS("M 51.2 1.6 C 23.8 1.6 1.6 23.8 1.6 51.2 s 22.2 49.6 49.6 49.6 s 49.6 -22.2 49.6 -49.6 S 78.6 1.6 51.2 1.6 z m 0 92.8 c -23.74 0 -43.2 -19.22 -43.2 -43.2 c 0 -23.74 19.22 -43.2 43.2 -43.2 c 23.74 0 43.2 19.22 43.2 43.2 c 0 23.74 -19.22 43.2 -43.2 43.2 z m 18.96 -57.06 L 56.3 51.2 l 13.86 13.86 c 0.94 0.94 0.94 2.46 0 3.4 l -1.7 1.7 c -0.94 0.94 -2.46 0.94 -3.4 0 L 51.2 56.3 l -13.86 13.86 c -0.94 0.94 -2.46 0.94 -3.4 0 l -1.7 -1.7 c -0.94 -0.94 -0.94 -2.46 0 -3.4 l 13.86 -13.86 l -13.86 -13.86 c -0.94 -0.94 -0.94 -2.46 0 -3.4 l 1.7 -1.7 c 0.94 -0.94 2.46 -0.94 3.4 0 l 13.86 13.86 l 13.86 -13.86 c 0.94 -0.94 2.46 -0.94 3.4 0 l 1.7 1.7 c 0.92 0.94 0.92 2.46 0 3.4 z"),
+        MINUS("M368 224H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h352c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"),
+        EXPAND("M24 9h-2v-7h-7v-2h9v9zm-9 15v-2h7v-7h2v9h-9zm-15-9h2v7h7v2h-9v-9zm9-15v2h-7v7h-2v-9h9z"),
         EXCLAMATION("M 51.2 8 c 23.7242 0 43.2 19.215 43.2 43.2 c 0 23.8582 -19.322 43.2 -43.2 43.2 c -23.8488 0 -43.2 -19.3124 -43.2 -43.2 c 0 -23.8406 19.3204 -43.2 43.2 -43.2 m 0 -6.4 C 23.8086 1.6 1.6 23.8166 1.6 51.2 c 0 27.3994 22.2086 49.6 49.6 49.6 s 49.6 -22.2006 49.6 -49.6 C 100.8 23.8166 78.5914 1.6 51.2 1.6 z m -2.298 24 h 4.5958 c 1.3646 0 2.4548 1.1364 2.398 2.5 l -1.4 33.6 c -0.0536 1.2856 -1.1112 2.3 -2.398 2.3 h -1.7958 c -1.2866 0 -2.3444 -1.0146 -2.398 -2.3 l -1.4 -33.6 c -0.0566 -1.3636 1.0334 -2.5 2.398 -2.5 z M 51.2 68 c -3.0928 0 -5.6 2.5072 -5.6 5.6 s 2.5072 5.6 5.6 5.6 s 5.6 -2.5072 5.6 -5.6 s -2.5072 -5.6 -5.6 -5.6 z"),
         EXCLAMATION_TRIANGLE("M 54.04 32 h 7.1 c 0.68 0 1.22 0.56 1.2 1.24 l -1.5 39.2 c -0.02 0.64 -0.56 1.16 -1.2 1.16 h -4.1 c -0.64 0 -1.18 -0.5 -1.2 -1.16 l -1.5 -39.2 c -0.02 -0.68 0.52 -1.24 1.2 -1.24 z M 57.6 77.6 c -3.1 0 -5.6 2.5 -5.6 5.6 s 2.5 5.6 5.6 5.6 s 5.6 -2.5 5.6 -5.6 s -2.5 -5.6 -5.6 -5.6 z m 56.3 10.4 L 65.92 4.8 c -3.68 -6.4 -12.94 -6.4 -16.64 0 L 1.3 88 c -3.68 6.38 0.92 14.4 8.32 14.4 H 105.6 c 7.36 0 12 -8 8.3 -14.4 z M 105.6 96 H 9.6 c -2.46 0 -4 -2.66 -2.78 -4.8 l 48 -83.2 c 1.22 -2.12 4.32 -2.14 5.54 0 l 48 83.2 c 1.24 2.12 -0.3 4.8 -2.76 4.8 z"),
         INFO("M 51.2 8 c 23.7242 0 43.2 19.215 43.2 43.2 c 0 23.8582 -19.322 43.2 -43.2 43.2 c -23.8488 0 -43.2 -19.3124 -43.2 -43.2 c 0 -23.8406 19.3204 -43.2 43.2 -43.2 m 0 -6.4 C 23.8086 1.6 1.6 23.8166 1.6 51.2 c 0 27.3994 22.2086 49.6 49.6 49.6 s 49.6 -22.2006 49.6 -49.6 C 100.8 23.8166 78.5914 1.6 51.2 1.6 z m -7.2 68.8 h 2.4 V 46.4 h -2.4 c -1.3254 0 -2.4 -1.0746 -2.4 -2.4 v -1.6 c 0 -1.3254 1.0746 -2.4 2.4 -2.4 h 9.6 c 1.3254 0 2.4 1.0746 2.4 2.4 v 28 h 2.4 c 1.3254 0 2.4 1.0746 2.4 2.4 v 1.6 c 0 1.3254 -1.0746 2.4 -2.4 2.4 h -14.4 c -1.3254 0 -2.4 -1.0746 -2.4 -2.4 v -1.6 c 0 -1.3254 1.0746 -2.4 2.4 -2.4 z m 7.2 -48 c -3.5346 0 -6.4 2.8654 -6.4 6.4 s 2.8654 6.4 6.4 6.4 s 6.4 -2.8654 6.4 -6.4 s -2.8654 -6.4 -6.4 -6.4 z"),

materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXDialog.java

@@ -15,6 +15,9 @@ import javafx.util.Duration;
  * <p>
  * It's a concrete implementation of {@code AbstractMFXDialog} and redefines the style class to "mfx-dialog"
  * for usage in CSS.
+ * <p>
+ * <b>Notice: the dialog is visible so during initialization, before showing it you should
+ * use {@code setVisible(false)}</b>
  */
 public class MFXDialog extends AbstractMFXDialog {
     //================================================================================
@@ -26,6 +29,11 @@ public class MFXDialog extends AbstractMFXDialog {
     //================================================================================
     // Constructors
     //================================================================================
+
+    /**
+     * <b>Notice: the dialog is visible so during initialization, before showing it you should
+     * use {@code setVisible(false)}</b>
+     */
     public MFXDialog() {
         initialize();
     }

materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXHLoader.java

@@ -232,7 +232,7 @@ public class MFXHLoader extends HBox {
                 if (item.getRoot() == null) {
                     this.runAndReset();
                 } else {
-                    item.getButton().setSelected(true);
+                    Platform.runLater(() -> item.getButton().setSelected(true));
                 }
                 return null;
             }

materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXScrollPane.java

@@ -1,6 +1,7 @@
 package io.github.palexdev.materialfx.controls;
 
 import io.github.palexdev.materialfx.MFXResourcesLoader;
+import io.github.palexdev.materialfx.skins.MFXScrollPaneSkin;
 import io.github.palexdev.materialfx.utils.ColorUtils;
 import javafx.animation.Animation;
 import javafx.animation.KeyFrame;
@@ -12,6 +13,7 @@ import javafx.event.EventHandler;
 import javafx.geometry.Bounds;
 import javafx.scene.Node;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.Skin;
 import javafx.scene.input.MouseEvent;
 import javafx.scene.input.ScrollEvent;
 import javafx.scene.paint.Color;
@@ -216,6 +218,12 @@ public class MFXScrollPane extends ScrollPane {
     //================================================================================
     // Override Methods
     //================================================================================
+
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new MFXScrollPaneSkin(this);
+    }
+
     @Override
     public String getUserAgentStylesheet() {
         return STYLESHEET;

materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXVLoader.java

@@ -81,7 +81,7 @@ public class MFXVLoader extends VBox {
         this.executor = new ThreadPoolExecutor(
                 2,
                 4,
-                20,
+                10,
                 TimeUnit.SECONDS,
                 new LinkedBlockingDeque<>(),
                 runnable -> {
@@ -232,7 +232,7 @@ public class MFXVLoader extends VBox {
                 if (item.getRoot() == null) {
                     this.runAndReset();
                 } else {
-                    item.getButton().setSelected(true);
+                    Platform.runLater(() -> item.getButton().setSelected(true));
                 }
                 return null;
             }

materialfx/src/main/java/io/github/palexdev/materialfx/controls/base/AbstractMFXDialog.java

@@ -17,6 +17,9 @@ import javafx.scene.layout.Region;
  * Base class for a material dialog.
  * <p>
  * Extends {@code BorderPane}.
+ * <p>
+ * <b>Notice: the dialog is visible so during initialization, before showing it you should
+ * use {@code setVisible(false)}</b>
  */
 public abstract class AbstractMFXDialog extends BorderPane {
     //================================================================================
@@ -141,13 +144,17 @@ public abstract class AbstractMFXDialog extends BorderPane {
     //================================================================================
     // Constructors
     //================================================================================
+
+    /**
+     * <b>Notice: the dialog is visible so during initialization, before showing it you should
+     * use {@code setVisible(false)}</b>
+     */
     public AbstractMFXDialog() {
         setPrefSize(400, 300);
         setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
 
         this.closeButton = new MFXButton("");
         this.closeButton.addEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
-        setVisible(false);
     }
 
     //================================================================================

materialfx/src/main/java/io/github/palexdev/materialfx/skins/MFXScrollPaneSkin.java

@@ -0,0 +1,21 @@
+package io.github.palexdev.materialfx.skins;
+
+import io.github.palexdev.materialfx.controls.MFXScrollPane;
+import javafx.scene.control.skin.ScrollPaneSkin;
+import javafx.scene.layout.StackPane;
+
+/**
+ * Skin used for {@link MFXScrollPane}, this class' purpose is to
+ * fix a bug of ScrollPanes' viewport which makes the content blurry.
+ * <p>
+ * Luckily achieved without reflection :D
+ */
+public class MFXScrollPaneSkin extends ScrollPaneSkin {
+
+    public MFXScrollPaneSkin(MFXScrollPane scrollPane) {
+        super(scrollPane);
+        StackPane viewPort = (StackPane) scrollPane.lookup(".viewport");
+        viewPort.setCache(false);
+    }
+
+}

materialfx/src/main/resources/io/github/palexdev/materialfx/css/mfx-notification.css

@@ -1,5 +1,9 @@
 .mfx-notification {
     -fx-background-color: white;
+    -fx-background-radius: 5;
+    -fx-border-color: #D2D2D2;
+    -fx-border-width: 0.8;
+    -fx-border-radius: 5;
 }
 
 .mfx-notification .title-label {