Skip to content

Instantly share code, notes, and snippets.

@julianjupiter
Last active March 17, 2019 06:40
Show Gist options
  • Select an option

  • Save julianjupiter/b876c2cabeb96f49f4fbea57040ab69c to your computer and use it in GitHub Desktop.

Select an option

Save julianjupiter/b876c2cabeb96f49f4fbea57040ab69c to your computer and use it in GitHub Desktop.
CSS for JavaFX
* {
  -primary-color: rgba(0, 123, 255, .8);
    -primary-color-darker: rgba(0, 123, 255, 1);
    -primary-shadow-color: rgba(0, 123, 255, .3);
    -secondary-color: rgba(108, 117, 125, .8);
    -secondary-color-darker: rgba(108, 117, 125, 1);
    -secondary-shadow-color: rgba(108, 117, 125, .3);
    -success-color: rgba(40, 167, 69, .8);
    -success-color-darker: rgba(40, 167, 69, 1);
    -success-shadow-color: rgba(40, 167, 69, .3);
    -danger-color: rgba(220, 53, 69, .8);
    -danger-color-darker: rgba(220, 53, 69, 1);
    -danger-shadow-color: rgba(220, 53, 69, .3);
    -warning-color: rgba(255, 193, 7, .8);
    -warning-color-darker: rgba(255, 193, 7, 1);
    -warning-shadow-color: rgba(255, 193, 7, .3);
    -info-color: rgba(23, 162, 184, .8);
    -info-color-darker: rgba(23, 162, 184, 1);
    -info-shadow-color: rgba(23, 162, 184, .3);
    -light-color: rgba(248, 249, 250, .8);
    -light-color-darker: rgba(248, 249, 250, 1);
    -light-shadow-color: rgba(248, 249, 250, .3);
    -dark-color: rgba(52, 58, 64, .8);
    -dark-color-darker: rgba(52, 58, 64, 1);
    -dark-shadow-color: rgba(52, 58, 64, .3);
}
.text-primary {
    -fx-text-fill: -primary-color !important;
}
.text-secondary {
    -fx-text-fill: -secondary-color;
}
.text-success {
    -fx-text-fill: -success-color;
}
.text-danger {
    -fx-text-fill: -danger-color;
}
.text-warning {
    -fx-text-fill: -warning-color;
}
.text-info {
    -fx-text-fill: -info-color;
}
.text-light {
    -fx-text-fill: -light-color;
}
.text-dark {
    -fx-text-fill: -dark-color;
}
.bg-primary {
    -fx-background-color: -primary-color;
}
.bg-secondary {
    -fx-background-color: -secondary-color;
}
.bg-success {
    -fx-background-color: -success-color;
}
.bg-danger {
    -fx-background-color: -danger-color;
}
.bg-warning {
    -fx-background-color: -warning-color;
}
.bg-info {
    -fx-background-color: -info-color;
}
.bg-light {
    -fx-background-color: -light-color;
}
.bg-dark {
    -fx-background-color: -dark-color;
}
.text-field {
-fx-padding: .375em .75em;
-fx-text-fill: #495057;
-fx-background-color: rgb(255,255,255);
-fx-border-width: 1px;
-fx-border-color: -secondary-color;
-fx-border-radius: .25em;
}
.text-field:focused {
-fx-border-color: -primary-color;
-fx-border-width: 1px;
-fx-effect: dropshadow(three-pass-box, -primary-shadow-color, 4, 1, 0, 0);
}
.text-field-success {
-fx-border-color: -success-color;
-fx-border-width: 1px;
}
.text-field-success:focused {
-fx-border-color: -success-color;
-fx-border-width: 1px;
-fx-effect: dropshadow(three-pass-box, -success-shadow-color, 4, 1, 0, 0);
}
.text-field-invalid {
-fx-border-color: -danger-color;
-fx-border-width: 1px;
}
.text-field-invalid:focused {
-fx-border-color: -danger-color;
-fx-border-width: 1px;
-fx-effect: dropshadow(three-pass-box, -danger-shadow-color, 4, 1, 0, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment