<commit_before>@import "../../themes/ionic.globals.md";

// Material Design FAB Button
// --------------------------------------------------

/// @prop - Box shadow of the FAB button
$fab-md-box-shadow:                               0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;

/// @prop - Box shadow of the activated FAB button
$fab-md-box-shadow-activated:                     0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;

/// @prop - Background color of the button
$fab-md-background-color:                         color($colors-md, primary) !default;

/// @prop - Text color of the button
$fab-md-text-color:                               color-contrast($colors-md, $fab-md-background-color) !default;

/// @prop - Background color of the activated button
$fab-md-background-color-activated:               color-shade($fab-md-background-color) !default;

/// @prop - Background color of the button in a list
$fab-md-list-button-background-color:             $fab-list-button-background-color !default;

/// @prop - Text color of the button in a list
$fab-md-list-button-text-color:                   color-contrast($colors-md, $fab-md-list-button-background-color) !default;

/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated:   color-shade($fab-md-list-button-background-color) !default;


.fab-md {
  color: $fab-md-text-color;
  background-color: $fab-md-background-color;

  box-shadow: $fab-md-box-shadow;

  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
              background-color $button-md-transition-duration $button-md-transition-timing-function,
              color $button-md-transition-duration $button-md-transition-timing-function;
}

.fab-md.activated {
  background-color: $fab-md-background-color-activated;
  box-shadow: $fab-md-box-shadow-activated;
}

.fab-md-in-list {
  color: $fab-md-list-button-text-color;
  background-color: $fab-md-list-button-background-color;
}

.fab-md-in-list.activated {
  background-color: $fab-md-list-button-background-color-activated;
}


// Generate MD FAB colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {

  $bg-color: $color-base;
  $bg-color-activated: color-shade($bg-color);
  $fg-color: $color-contrast;

  .fab-md-#{$color-name} {
    color: $fg-color;
    background-color: $bg-color;
  }

  .fab-md-#{$color-name}.activated {
    background-color: $bg-color-activated;
  }
}
<commit_msg>fix(fab): set ripple color to contrast color of the fab background<commit_after>@import "../../themes/ionic.globals.md";

// Material Design FAB Button
// --------------------------------------------------

/// @prop - Box shadow of the FAB button
$fab-md-box-shadow:                               0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;

/// @prop - Box shadow of the activated FAB button
$fab-md-box-shadow-activated:                     0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;

/// @prop - Background color of the button
$fab-md-background-color:                         color($colors-md, primary) !default;

/// @prop - Text color of the button
$fab-md-text-color:                               color-contrast($colors-md, $fab-md-background-color) !default;

/// @prop - Background color of the activated button
$fab-md-background-color-activated:               color-shade($fab-md-background-color) !default;

/// @prop - Background color of the button in a list
$fab-md-list-button-background-color:             $fab-list-button-background-color !default;

/// @prop - Text color of the button in a list
$fab-md-list-button-text-color:                   color-contrast($colors-md, $fab-md-list-button-background-color) !default;

/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated:   color-shade($fab-md-list-button-background-color) !default;


.fab-md {
  color: $fab-md-text-color;
  background-color: $fab-md-background-color;

  box-shadow: $fab-md-box-shadow;

  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
              background-color $button-md-transition-duration $button-md-transition-timing-function,
              color $button-md-transition-duration $button-md-transition-timing-function;
}

.fab-md.activated {
  background-color: $fab-md-background-color-activated;
  box-shadow: $fab-md-box-shadow-activated;
}

.fab-md-in-list {
  color: $fab-md-list-button-text-color;
  background-color: $fab-md-list-button-background-color;
}

.fab-md-in-list.activated {
  background-color: $fab-md-list-button-background-color-activated;
}


// Generate MD FAB colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {

  $bg-color: $color-base;
  $bg-color-activated: color-shade($bg-color);
  $fg-color: $color-contrast;

  .fab-md-#{$color-name} {
    color: $fg-color;
    background-color: $bg-color;
  }

  .fab-md-#{$color-name}.activated {
    background-color: $bg-color-activated;
  }

  .fab-md-#{$color-name} .button-effect {
    background-color: $fg-color;
  }
}

{'fraction_non_alphanumeric': 0.1888203402505141, 'fraction_numerical': 0.012338754907459339, 'mean_word_length': 2.3775252525252526, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3372976', 'n_tokens_mistral': 1823, 'n_tokens_neox': 1701, 'n_words': 370}