Source on Github

Blueprint Interaction

Some classes that are used in common website interactions.

This file can be imported using: @import "blueprint/interaction"

Imports

  1. Colors

Mixins

view source 

=blueprint-interaction
  .feedback
    +feedback-base
  .error
    +error(feedback)
  .alert
    @extend .error
  .notice
    +notice(feedback)
  .success
    +success(feedback)
  .info
    +info(feedback)
  .hide
    display: none
  .highlight
    +highlight
  .added
    +added
  .removed
    +removed

@mixin blueprint-interaction {
  .feedback {
    @include feedback-base;
  }
  .error {
    @include error(feedback);
  }
  .alert {
    @extend .error;
  }
  .notice {
    @include notice(feedback);
  }
  .success {
    @include success(feedback);
  }
  .info {
    @include info(feedback);
  }
  .hide {
    display: none;
  }
  .highlight {
    @include highlight;
  }
  .added {
    @include added;
  }
  .removed {
    @include removed;
  }
}
view source 

=feedback-base
  padding: 0.8em
  margin-bottom: 1em
  border: 2px solid $feedback-border-color

@mixin feedback-base {
  padding: 0.8em;
  margin-bottom: 1em;
  border: 2px solid $feedback-border-color;
}
view source 

=error($feedback-base-class: false)
  @if $feedback-base-class
    @extend .#{$feedback-base-class}
  @else
    +feedback-base
  background: $error-bg-color
  color: $error-color
  border-color: $error-border-color
  a
    color: $error-color

@mixin error($feedback-base-class: false) {
  @if $feedback-base-class {
    @extend .#{$feedback-base-class};
  }
  @else {
    @include feedback-base;
  }
  background: $error-bg-color;
  color: $error-color;
  border-color: $error-border-color;
  a {
    color: $error-color;
  }
}
view source 

=notice($feedback-base-class: false)
  @if $feedback-base-class
    @extend .#{$feedback-base-class}
  @else
    +feedback-base
  background: $notice-bg-color
  color: $notice-color
  border-color: $notice-border-color
  a
    color: $notice-color

@mixin notice($feedback-base-class: false) {
  @if $feedback-base-class {
    @extend .#{$feedback-base-class};
  }
  @else {
    @include feedback-base;
  }
  background: $notice-bg-color;
  color: $notice-color;
  border-color: $notice-border-color;
  a {
    color: $notice-color;
  }
}
view source 

=success($feedback-base-class: false)
  @if $feedback-base-class
    @extend .#{$feedback-base-class}
  @else
    +feedback-base
  background: $success-bg-color
  color: $success-color
  border-color: $success-border-color
  a
    color: $success-color

@mixin success($feedback-base-class: false) {
  @if $feedback-base-class {
    @extend .#{$feedback-base-class};
  }
  @else {
    @include feedback-base;
  }
  background: $success-bg-color;
  color: $success-color;
  border-color: $success-border-color;
  a {
    color: $success-color;
  }
}
view source 

=info($feedback-base-class: false)
  @if $feedback-base-class
    @extend .#{$feedback-base-class}
  @else
    +feedback-base
  background: $info-bg-color
  color: $info-color
  border-color: $info-border-color
  a
    color: $info-color

@mixin info($feedback-base-class: false) {
  @if $feedback-base-class {
    @extend .#{$feedback-base-class};
  }
  @else {
    @include feedback-base;
  }
  background: $info-bg-color;
  color: $info-color;
  border-color: $info-border-color;
  a {
    color: $info-color;
  }
}
view source 

=highlight
  background: $highlight-color

@mixin highlight {
  background: $highlight-color;
}
view source 

=added
  background: $added-bg-color
  color: $added-color

@mixin added {
  background: $added-bg-color;
  color: $added-color;
}
view source 

=removed
  background: $removed-bg-color
  color: $removed-color

@mixin removed {
  background: $removed-bg-color;
  color: $removed-color;
}