amazeui/less/ui.alert.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Alert
//
// Description:     Define style for alert messages
//
// Component:       `.am-alert`
//
// Sub-objects:     `.am-alert-close`
//
// Modifiers:       `.am-alert-success`
//                  `.am-alert-warning`
//                  `.am-alert-danger`
//                  `.am-alert-secondary`
//
// Uses:            Close: `.am-close`
//
// =============================================================================


// Variables
// =============================================================================

@alert-margin-vertical: 1em;
@alert-padding: 0.625em;
@alert-background: @global-primary;
@alert-color: #fff;

@alert-success-background: @global-success;
@alert-success-color: #fff;

@alert-warning-background: @global-warning;
@alert-warning-color: #fff;

@alert-danger-background: @global-danger;
@alert-danger-color: #fff;

@alert-secondary-background: @gray-lighter;
@alert-secondary-color: @gray;


// Alert mixin
// -----------------------------------------------------------------------------

.alert-variant(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;
}


/* ==========================================================================
   Component: Alert Plugin
 ============================================================================ */

.@{ns}alert {
  margin-bottom: @alert-margin-vertical;
  padding: @alert-padding;
  background: @alert-background;
  color: @alert-color;
  border: 1px solid darken(@global-primary, 6%);
  border-radius: @global-radius;

  a {
    color: @white;
  }

  .hook-alert;

  // Keep color for headings if the default heading color is changed
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: inherit;
  }

  .@{ns}close {
    opacity: .4;

    &:hover {
      opacity: .6;
    }
  }
}


/* Add margin if adjacent element */

* + .@{ns}alert {
  margin-top: @alert-margin-vertical;
}


/* Remove margin from the last-child */

.@{ns}alert > :last-child {
  margin-bottom: 0;
}


/* within am-form-group */

.@{ns}form-group .@{ns}alert {
  margin: 5px 0 0;
  padding: 0.25em 0.625em;
  font-size: 1.3rem;
}

/* Close in alert */

.@{ns}alert > .@{ns}close:first-child {
  float: right;
  height: auto;
  margin: -3px -5px auto auto;
}


/* Remove margin from adjacent element */

.@{ns}alert > .@{ns}close:first-child + * {
  margin-top: 0;
}


// Modifiers
// =============================================================================

.@{ns}alert-secondary {
  .alert-variant(@alert-secondary-background, darken(@alert-secondary-background, 6%), @alert-secondary-color);
  .hook-alert-secondary;
}

.@{ns}alert-success {
  .alert-variant(@alert-success-background, darken(@alert-success-background, 6%), @alert-success-color);
  .hook-alert-success;
}

.@{ns}alert-warning {
  .alert-variant(@alert-warning-background, darken(@alert-warning-background, 6%), @alert-warning-color);
  .hook-alert-warning;
}

.@{ns}alert-danger {
  .alert-variant(@alert-danger-background, darken(@alert-danger-background, 6%), @alert-danger-color);
  .hook-alert-danger;
}


// Misc
// =============================================================================
.hook-alert-misc;


// Hooks
// =============================================================================
.hook-alert() {}
.hook-alert-secondary() {}
.hook-alert-success() {}
.hook-alert-warning() {}
.hook-alert-danger() {}
.hook-alert-misc() {}