io.github.palexdev.mfxresources.themes.material.components.buttons._outlined_button.scss Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of materialfx-all Show documentation

Material Design/Modern components for JavaFX, now packed as a single Jar

There is a newer version: 11.26.0

@use 'sass:color';
@use '../../tokens/theme' as Theme;
@use '../../abstracts/ripple' as Ripple;
@use '../../abstracts/theme_utils' as ThemeUtils;

// Tokens
$bg-color: transparent !default;
$surface-tint: Theme.GetSchemeColor('primary') !default;

$bd-color: Theme.GetSchemeColor('outline') !default;
$bd-color-disabled: rgba($bd-color, Theme.GetStateLayer('disabled-text')) !default; // Should be 'disabled' but it's too transparent
$bd-color-focused: Theme.GetSchemeColor('primary');
$bd-radius: 20px !default;
$bd-width: 1px;

$text-color: Theme.GetSchemeColor('primary') !default;
$icon-color: Theme.GetSchemeColor('primary') !default;
$ripple-color: Ripple.Ripple('primary') !default;

/****************************************************************************************************
 * Outlined Buttons
 ****************************************************************************************************/
.mfx-button.outlined {
  -fx-text-fill: $text-color;
  -fx-background-color: $bg-color;
  -fx-border-color: $bd-color;
  -fx-border-radius: $bd-radius;
  -fx-border-width: $bd-width;
}

.mfx-button.outlined > .surface > .bg {
  -fx-background-color: $surface-tint;
}

.mfx-button.outlined:disabled {
  -fx-border-color: $bd-color-disabled;
}

.mfx-button.outlined:focused {
  -fx-border-color: $bd-color-focused;
}

.mfx-button.outlined > .label > .mfx-font-icon {
  -mfx-color: $icon-color;
}

.mfx-button.outlined > .surface > .mfx-ripple-generator {
  -mfx-ripple-color: $ripple-color;
}