Contents

// ========================================================================
//   Component: alerts.less
// ========================================================================

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

$alerts-position:                               60px;
$alerts-z-index:                                9090;
$alerts-width:                                  350px;

// Color overrides
.alert-success, .flash.notice {
  @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color);
}

.alert-info, .flash.info {
  @include alert-variant($alert-flash-info-bg, $alert-flash-info-border, $alert-flash-info-color);
}

.alert-warning, .flash.warning {
  @include alert-variant($alert-flash-warning-bg, $alert-flash-warning-border, $alert-flash-warning-color);
}

.alert-danger, .flash.error {
  @include alert-variant($alert-flash-error-bg, $alert-flash-error-border, $alert-flash-error-color);
}

// Message container for positioning

.alerts {
    position: fixed;
    top: $alerts-position;
    left: $alerts-position;
    z-index: $alerts-z-index;
    width: $alerts-width;
    @extend .alerts-top-right;

    &:hover .alert .close {
        opacity: 1;
        visibility: visible;
    }
}


// Position modifiers


.alerts-top-right,
.alerts-bottom-right  {
    left: auto;
    right: $alerts-position;
}

.alerts-top-center,
.alerts-bottom-center {
    left: 50%;
    margin-left: ($alerts-width / -2);
}

.alerts-bottom-left,
.alerts-bottom-right,
.alerts-bottom-center {
    top: auto;
    bottom: $alerts-position;
}


// Responsiveness


// Phones portrait and smaller */
@media (max-width: $mq-mobile) {

    // Fit in small screen

    .alerts {
        left: 10px;
        right: 10px;
        width: auto;
        margin: 0;
    }

}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
radius-rails-3.1.4	app/assets/stylesheets/radius-theme/app/alerts.scss