/* ------------------------------------------------------------------------------ * * # Alert component * * Overrides for alerts bootstrap component * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Base // ------------------------- .alert { position: relative; padding-left: (@alert-padding + 5); padding-right: (@alert-padding + 5); // Alert heading .alert-heading { margin-top: 0; margin-bottom: 5px; } // Provide class for links that match alerts .alert-link { color: inherit; } // Close button .close { &, &:hover, &:focus { color: inherit; } } } // Alternate styles // ------------------------- // Primary - custom added .alert-primary { .alert-variant(@alert-primary-bg; @alert-primary-border; @alert-primary-text); &, .close { color: darken(@color-primary-800, 10%); } } // Success .alert-success { &, .close { color: darken(@color-success-800, 10%); } } // Info .alert-info { &, .close { color: darken(@color-info-800, 10%); } } // Warning .alert-warning { &, .close { color: darken(@color-warning-800, 10%); } } // Danger .alert-danger { &, .close { color: darken(@color-danger-800, 10%); } } // Additional styling // ------------------------- // Rounded alert .alert.alert-rounded { border-radius: 100px; padding-left: (@alert-padding + 10); padding-right: (@alert-padding + 10); } // Alert as a component .alert-component { &[class*=alert-styled-] { background-color: #fff; } } // Custom background color .alert[class*=bg-] { a, .alert-link { color: #fff; } } // Styled alerts // ------------------------- .alert { // Icon variations &[class*=alert-styled-], .ui-pnotify[class*=alert-styled-] > & { // Icon base &:after { content: '\e9a2'; font-family: 'icomoon'; color: #fff; width: (((@alert-padding * 2) + @icon-font-size) - 2); left: -(((@alert-padding * 2) + @icon-font-size) - 2); text-align: center; position: absolute; top: 50%; margin-top: -(@icon-font-size / 2); font-size: @icon-font-size; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Danger icon &.alert-danger:after, &[class*=bg-danger]:after { content: '\ed64'; } // Success icon &.alert-success:after, &[class*=bg-success]:after { content: '\ed6e'; } // Warning icon &.alert-warning:after, &[class*=bg-warning]:after { content: '\e9bd'; } // Info icon &.alert-info:after, &[class*=bg-info]:after { content: '\e9b9'; } } // Right icon position &.alert-styled-right, .ui-pnotify.alert-styled-right > & { &:after { left: auto; right: -(((@alert-padding * 2) + @icon-font-size) - 2); } } // With custom icon &.alert-styled-custom, .ui-pnotify.alert-styled-custom > & { &:after { content: "\e81b"; // Change icon code for custom alert } } // Styled alert with left icon &.alert-styled-left { border-left-width: (((@alert-padding * 2) + @icon-font-size) - 2); &[class*=bg-] { border-left-color: fade(#000, 15%)!important; } } // Styled alert with right icon &.alert-styled-right { border-right-width: (((@alert-padding * 2) + @icon-font-size) - 2); &[class*=bg-] { border-right-color: fade(#000, 15%)!important; } } } // Alert arrow // ------------------------- .alert { // Left arrow &[class*=alert-arrow-]:before, .ui-pnotify[class*=alert-arrow-] > &:before { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; border-left: 5px solid; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left-color: inherit; margin-top: -5px; } // Right arrow &.alert-arrow-right:before, .ui-pnotify.alert-arrow-right > &:before { left: auto; right: 0; border-left: 0; border-right: 5px solid; border-right-color: inherit; } } // Specific styling for PNotify notifications // ------------------------- // Inherit colors .ui-pnotify[class*=alpha-] > & { background-color: inherit; border-color: inherit; color: inherit; } // Left position .ui-pnotify.alert-styled-left { > .alert { &:extend(.alert.alert-styled-left); } &[class*=bg-] > .alert { &:extend(.alert.alert-styled-left[class*=bg-]); } } // Right position .ui-pnotify.alert-styled-right { > .alert { &:extend(.alert.alert-styled-right); } &[class*=bg-] > .alert { &:extend(.alert.alert-styled-right[class*=bg-]); } }