Permalink
Fetching contributors…
Cannot retrieve contributors at this time
103 lines (88 sloc) 2.77 KB
/// Global namespace for banner component
/// @access public
/// @group banner
/// @type string
$DBbanner-namespace: "c-banner" !default;
/// Global neutral background color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-background-neutral: color(gray, x-light) !default;
/// Global success background color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-background-success: color(green, x-light) !default;
/// Global warning background color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-background-warning: color(yellow, x-light) !default;
/// Global error background color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-background-error: color(red, x-light) !default;
/// Global neutral text color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-text-neutral: color(gray) !default;
/// Global success text color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-text-success: color(green, x-dark) !default;
/// Global warning text color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-text-warning: color(yellow, x-dark) !default;
/// Global error text color for badge component
/// @access public
/// @group badge
/// @type color
$DBbanner-text-error: color(red, x-dark) !default;
// Banner component is used to display messages to the user, typically pinned to the top of the page.
// @example html - This is a neutral banner
// <div class="c-banner">
// Message text
// </div>
// @example html - This is a warning banner
// <div class="c-banner c-banner--warning">
// Message text
// </div>
// @example html - This is a free-floating banner
// <div class="c-banner c-banner--unpinned">
// Message text
// </div>
// @access public
// @group badge
.#{$DBbanner-namespace} {
padding: 12px;
color: $DBbanner-text-neutral;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: color(gray, x-dark, 0.1);
background-color: $DBbanner-background-neutral;
&#{&}--success {
color: $DBbanner-text-success;
background-color: $DBbanner-background-success;
}
&#{&}--warning {
color: $DBbanner-text-warning;
background-color: $DBbanner-background-warning;
}
&#{&}--error {
color: $DBbanner-text-error;
background-color: $DBbanner-background-error;
}
// The default style for banners assumes that the banner is pinned to the top
// edge of the page. The unpinned modifier treats the banner as a fixed or
// relatively-positioned element.
&#{&}--unpinned {
border-width: 1px;
border-style: solid;
border-radius: 3px;
}
}