Blueprint Interaction

Some classes that are used in common website interactions.

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

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Colors

Mixins

View Source: Sass | SCSS 

=blueprint-interaction
  .error
    +error
  .notice
    +notice
  .success
    +success
  .hide
    display: none
  .highlight
    +highlight
  .added
    +added
  .removed
    +removed

@mixin blueprint-interaction {
  .error {
    @include error; }
  .notice {
    @include notice; }
  .success {
    @include success; }
  .hide {
    display: none; }
  .highlight {
    @include highlight; }
  .added {
    @include added; }
  .removed {
    @include removed; } }
View Source: Sass | SCSS 

=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: Sass | SCSS 

=error
  +feedback-base
  background: $error_bg_color
  color: $error_color
  border-color: $error_border_color
  a
    color: $error_color

@mixin error {
  @include feedback-base;
  background: $error_bg_color;
  color: $error_color;
  border-color: $error_border_color;
  a {
    color: $error_color; } }
View Source: Sass | SCSS 

=notice
  +feedback-base
  background: $notice_bg_color
  color: $notice_color
  border-color: $notice_border_color
  a
    color: $notice_color

@mixin notice {
  @include feedback-base;
  background: $notice_bg_color;
  color: $notice_color;
  border-color: $notice_border_color;
  a {
    color: $notice_color; } }
View Source: Sass | SCSS 

=success
  +feedback-base
  background: $success_bg_color
  color: $success_color
  border-color: $success_border_color
  a
    color: $success_color

@mixin success {
  @include feedback-base;
  background: $success_bg_color;
  color: $success_color;
  border-color: $success_border_color;
  a {
    color: $success_color; } }
View Source: Sass | SCSS 

=highlight
  background: $highlight_color

@mixin highlight {
  background: $highlight_color; }
View Source: Sass | SCSS 

=added
  background: $added_bg_color
  color: $added_color

@mixin added {
  background: $added_bg_color;
  color: $added_color; }
View Source: Sass | SCSS 

=removed
  background: $removed_bg_color
  color: $removed_color

@mixin removed {
  background: $removed_bg_color;
  color: $removed_color; }