io.github.palexdev.mfxresources.sass.components._checkboxes.scss Maven / Gradle / Ivy

Go to download
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
The newest version!
@use '../abstracts/functions' as *;
@use '../abstracts/maps' as *;
@use '../base/typography' as *;
@use '../themes/theme' as *;

$base-styles: (
  icon-wrapper: (
    bg-radius: 2px,
    bd-radius: 2px,
    bd-width: 2px,
    mfx-size: 18px,
    mfx-animation: CLIP,
    indeterminate: (
      bd-width: 0px,
    ),
    selected: (
      bd-width: 0px,
    ),
  ),
  icon: (
    mfx-size: 12px,
    visibility: hidden,
    visible: (
      visibility: visible,
    ),
  ),
  surface: (
    pref-width: 40px,
    pref-height: 40px,
  ),
  surface-bg: (
    bg-radius: 999px,
  ),
);

// Material
$md-styles: (
  root: (
    fg-color: GetSchemeColor('on-surface'),
  ),
  icon-wrapper: (
    bd-color: GetSchemeColor('on-surface-variant'),
    indeterminate: (
      bg-color: GetSchemeColor('primary'),
    ),
    selected: (
      bg-color: GetSchemeColor('primary'),
    ),
    error: (
      bd-color: GetSchemeColor('error'),
    ),
    composite-error: (
      bg-color: GetSchemeColor('error'),
    ),
    disabled: (
      bd-color: ApplyMDStateLayer('on-surface', disabled-text),
      bg-color: transparent,
    ),
    composite-disabled: (
      bg-color: ApplyMDStateLayer('on-surface', disabled-text),
    ),
  ),
  icon: (
    visible: (
      mfx-color: GetSchemeColor('on-primary'),
    ),
    error: (
      mfx-color: GetSchemeColor('on-error'),
    ),
  ),
  surface-bg: (
    bg-color: GetSchemeColor('primary'),
    error: (
      bg-color: GetSchemeColor('error'),
    )
  ),
  surface-ripple: (
    ripple-color: Ripple('primary'),
    error: (
      ripple-color: Ripple('error'),
    )
  ),
) !default;

@mixin MaterialCheckboxes($overrides: ()) {
  /*!***************************************************************************************************
   * Checkboxes
   ****************************************************************************************************/
  $styles: DeepMerge($base-styles, $md-styles, $overrides);

  .mfx-checkbox {
    @include LabelLarge();
    @include ApplyStyles($styles, root);

    > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper);
    }

    > .mfx-icon-wrapper > .mfx-font-icon {
      @include ApplyStyles($styles, icon);
    }

    > .surface {
      @include ApplyStyles($styles, surface);
    }

    > .surface > .bg {
      @include ApplyStyles($styles, surface-bg);
    }

    > .surface > .mfx-ripple-generator {
      @include ApplyStyles($styles, surface-ripple);
    }

    // Indeterminat & Selectede
    &:indeterminate > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, indeterminate);
    }

    &:selected > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, selected);
    }

    &:selected > .mfx-icon-wrapper > .mfx-font-icon,
    &:indeterminate > .mfx-icon-wrapper > .mfx-font-icon {
      @include ApplyStyles($styles, icon, visible);
    }

    // Error
    &:error > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, error);
    }

    &:error > .surface > .bg {
      @include ApplyStyles($styles, surface-bg, error);
    }

    &:error > .surface > .mfx-ripple-generator {
      @include ApplyStyles($styles, surface-ripple, error);
    }

    &:selected:error > .mfx-icon-wrapper,
    &:indeterminate:error > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, composite-error);
    }

    &:selected:error > .mfx-icon-wrapper > .mfx-font-icon {
      @include ApplyStyles($styles, icon, error);
    }

    // Disabled
    &:disabled > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, disabled);
    }

    &:selected:disabled > .mfx-icon-wrapper,
    &:indeterminate:disabled > .mfx-icon-wrapper {
      @include ApplyStyles($styles, icon-wrapper, composite-disabled);
    }
  }
}