io.github.palexdev.mfxresources.themes.material.components.fabs._shared.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 '../../tokens/theme' as Theme;
@use '../../tokens/typography' as Typography;
@use '../../abstracts/theme_utils' as ThemeUtils;

// Shared component-level tokens
$bg-radius: 16px !default;
$bg-radius-small: 12px !default;
$bg-radius-large: 28px !default;

$icon-size: 24px !default;
$icon-size-large: 36px !default;

$padding: 16px !default;
$padding-small: 0px !default;
$elements-gap: 8px;

$elevation: 3 !default;
$elevation-lowered: 1 !default;
$elevation-hover: 4 !default;
$elevation-hover-lowered: 2 !default;

/****************************************************************************************************
 * FABs shared properties
 ****************************************************************************************************/
.mfx-button.fab,
.mfx-button.fab:extended {
  @include Typography.LabelLarge();
  -fx-graphic-text-gap: $elements-gap;
  -fx-background-radius: $bg-radius;
  -fx-padding: $padding;

  > .surface {
    -mfx-elevation: ThemeUtils.ElevationLevel($elevation);
  }

  > .surface > .bg {
    -fx-background-radius: $bg-radius;
  }
}

.mfx-button.fab:hover > .surface,
.mfx-button.fab:extended:hover > .surface {
  -mfx-elevation: ThemeUtils.ElevationLevel($elevation-hover);
}

.mfx-button.fab > .label > .mfx-font-icon,
.mfx-button.fab:extended > .label > .mfx-font-icon {
  -mfx-size: $icon-size;
}

.mfx-button.fab.small {
  -fx-background-radius: $bg-radius-small;
  -fx-padding: $padding-small;
}

.mfx-button.fab.small > .surface > .bg {
  -fx-background-radius: $bg-radius-small;
}

.mfx-button.fab.large {
  -fx-background-radius: $bg-radius-large;
}

.mfx-button.fab.large > .surface > .bg {
  -fx-background-radius: $bg-radius-large;
}

.mfx-button.fab.large > .label > .mfx-font-icon {
  -mfx-size: $icon-size-large;
}

/* FABs don't have the disabled state */
.mfx-button.fab:disabled > .label {
  -fx-opacity: 1.0
}

/****************************************************************************************************
 * Lowered FABs
 ****************************************************************************************************/
.mfx-button.fab.lowered > .surface,
.mfx-button.fab:extended.lowered > .surface {
  -mfx-elevation: ThemeUtils.ElevationLevel($elevation-lowered);
}

.mfx-button.fab.lowered:hover > .surface,
.mfx-button.fab:extended.lowered:hover > .surface {
  -mfx-elevation: ThemeUtils.ElevationLevel($elevation-hover-lowered);
}