File: engine/modules/contrib/foundation/source/scss/components/_callout.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group callout
////

/// Default background color.
/// @type Color
$callout-background: $white !default;

/// Default fade value for callout backgrounds.
/// @type Number
$callout-background-fade: 85% !default;

/// Default border style for callouts.
/// @type List
$callout-border: 1px solid rgba($black, 0.25) !default;

/// Default bottom margin for callouts.
/// @type Number
$callout-margin: 0 0 1rem 0 !default;

/// Default inner padding for callouts.
/// @type Number
$callout-padding: 1rem !default;

/// Default font color for callouts.
/// @type Color
$callout-font-color: $body-font-color !default;

/// Default font color for callouts, if the callout has a dark background.
/// @type Color
$callout-font-color-alt: $body-background !default;

/// Default border radius for callouts.
/// @type Color
$callout-radius: $global-radius !default;

/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
/// @type Number | Boolean
$callout-link-tint: 30% !default;

/// Adds basic styles for a callout, including padding and margin.
@mixin callout-base() {
  position: relative;
  margin: $callout-margin;
  padding: $callout-padding;

  border: $callout-border;
  border-radius: $callout-radius;

  // Respect the padding, fool.
  > :first-child {
    margin-top: 0;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

/// Generate quick styles for a callout using a single color as a baseline.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout-style($color: $callout-background) {
  $background: scale-color($color, $lightness: $callout-background-fade);

  background-color: $background;
  color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
}

@mixin callout-size($padding) {
  padding-top: $padding;
  padding-right: $padding;
  padding-bottom: $padding;
  padding-left: $padding;
}


/// Adds styles for a callout.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout($color: $callout-background) {
  @include callout-base;
  @include callout-style($color);
}

@mixin foundation-callout {
  .callout {
    @include callout;

    @each $name, $color in $foundation-palette {
      &.#{$name} {
        @include callout-style($color);
      }
    }

    &.small {
      @include callout-size(0.5rem);
    }

    &.large {
      @include callout-size(3rem);
    }
  }
}