From 9cbbfb2c61f1de06c36051c2836c657f5192c277 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 26 Aug 2013 12:13:22 -0500 Subject: [PATCH] alerts --- dist/framework-with-theme.css | 59 ++++++++++++++++++++ example/alerts.html | 20 ++++++- scss/framework-structure.scss | 1 + scss/framework-theme-default.scss | 1 + scss/framework/structure/_alerts.scss | 38 +++++++++++++ scss/framework/theme/default/_alerts.scss | 51 +++++++++++++++++ scss/framework/theme/default/_variables.scss | 17 ++++++ 7 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 scss/framework/structure/_alerts.scss create mode 100644 scss/framework/theme/default/_alerts.scss diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index a5f85d3765..fe81fa3fbd 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -1,4 +1,27 @@ @charset "UTF-8"; +.alert { + padding: 8px 35px 8px 14px; } + +.alert h4 { + margin: 0; } + +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: 1.42857; } + +.alert-block { + padding-top: 14px; + padding-bottom: 14px; } + +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; } + +.alert-block p + p { + margin-top: 5px; } + html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } @@ -244,6 +267,42 @@ a.list-item { margin-bottom: 0; line-height: 1.3; } +.alert { + margin-bottom: 1.42857; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #fcf8e3; + border: 1px solid #fbeed5; } + +.alert, +.alert h4 { + color: #c09853; } + +.alert-success { + background-color: #dff0d8; + border-color: #d6e9c6; + color: #468847; } + +.alert-success h4 { + color: #468847; } + +.alert-danger, +.alert-error { + background-color: #f2dede; + border-color: #eed3d7; + color: #b94a48; } + +.alert-danger h4, +.alert-error h4 { + color: #b94a48; } + +.alert-info { + background-color: #d9edf7; + border-color: #bce8f1; + color: #3a87ad; } + +.alert-info h4 { + color: #3a87ad; } + .bar { background-color: white; border-style: solid; diff --git a/example/alerts.html b/example/alerts.html index 6ea1d49583..2d82aa4432 100644 --- a/example/alerts.html +++ b/example/alerts.html @@ -17,8 +17,24 @@

Alerts

-
- +
+ +

+ Warning! Best check yo self, you're not looking too good. +

+ +

+ Error! Shit hit the fan. +

+ +

+ Booya! You win. +

+ +

+ Info yo! This is what you need to know. +

+
diff --git a/scss/framework-structure.scss b/scss/framework-structure.scss index fac369d490..42cbac9a34 100755 --- a/scss/framework-structure.scss +++ b/scss/framework-structure.scss @@ -6,6 +6,7 @@ "framework/structure/variables", "framework/structure/mixins", + "framework/structure/alerts", "framework/structure/base", "framework/structure/button", diff --git a/scss/framework-theme-default.scss b/scss/framework-theme-default.scss index 1687a73c25..a325f00f34 100755 --- a/scss/framework-theme-default.scss +++ b/scss/framework-theme-default.scss @@ -4,6 +4,7 @@ // Components @import "framework/theme/default/variables", + "framework/theme/default/alerts", "framework/theme/default/bar", "framework/theme/default/tabs", "framework/theme/default/button", diff --git a/scss/framework/structure/_alerts.scss b/scss/framework/structure/_alerts.scss new file mode 100644 index 0000000000..b84659bee2 --- /dev/null +++ b/scss/framework/structure/_alerts.scss @@ -0,0 +1,38 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 8px 35px 8px 14px; +} +.alert h4 { + margin: 0; +} + +// Adjust close link position +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: $baseLineHeight; +} + + +// Block alerts +// ------------------------- + +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} +.alert-block p + p { + margin-top: 5px; +} diff --git a/scss/framework/theme/default/_alerts.scss b/scss/framework/theme/default/_alerts.scss new file mode 100644 index 0000000000..fa4e46b4c3 --- /dev/null +++ b/scss/framework/theme/default/_alerts.scss @@ -0,0 +1,51 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + margin-bottom: $baseLineHeight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: $warningBackground; + border: 1px solid $warningBorder; +} +.alert, +.alert h4 { + // Specified for the h4 to prevent conflicts of changing $headingsColor + color: $warningText; +} + + +// Alternate styles +// ------------------------- + +.alert-success { + background-color: $successBackground; + border-color: $successBorder; + color: $successText; +} +.alert-success h4 { + color: $successText; +} +.alert-danger, +.alert-error { + background-color: $errorBackground; + border-color: $errorBorder; + color: $errorText; +} +.alert-danger h4, +.alert-error h4 { + color: $errorText; +} +.alert-info { + background-color: $infoBackground; + border-color: $infoBorder; + color: $infoText; +} +.alert-info h4 { + color: $infoText; +} + diff --git a/scss/framework/theme/default/_variables.scss b/scss/framework/theme/default/_variables.scss index 23d21922c0..95fabb052a 100644 --- a/scss/framework/theme/default/_variables.scss +++ b/scss/framework/theme/default/_variables.scss @@ -79,4 +79,21 @@ $barDarkBorderColor: #111; $listDividerBackground: #f5f5f5; $listDividerColor: #222; +// Form states and alerts +// ------------------------- +$warningText: #c09853; +$warningBackground: #fcf8e3; +$warningBorder: darken(adjust-hue($warningBackground, -10), 3%); + +$errorText: #b94a48; +$errorBackground: #f2dede; +$errorBorder: darken(adjust-hue($errorBackground, -10), 3%); + +$successText: #468847; +$successBackground: #dff0d8; +$successBorder: darken(adjust-hue($successBackground, -10), 5%); + +$infoText: #3a87ad; +$infoBackground: #d9edf7; +$infoBorder: darken(adjust-hue($infoBackground, -10), 7%);