Implement Pattern Library alerts in Discussions
TNL-5164
This commit is contained in:
Brian Jacobel
@@ -11,6 +11,11 @@
|
||||
padding: $baseline;
|
||||
max-width: 1180px;
|
||||
|
||||
.post-errors {
|
||||
padding: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
.post-field {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
@@ -183,23 +188,9 @@
|
||||
.forum-new-post-form,
|
||||
.edit-post-form {
|
||||
.post-errors {
|
||||
margin-bottom: $baseline;
|
||||
border-radius: $forum-border-radius;
|
||||
padding: 0;
|
||||
background: $error-color;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
|
||||
color: $white;
|
||||
margin: 0 0 $baseline 0;
|
||||
list-style: none;
|
||||
|
||||
.post-error {
|
||||
padding: ($baseline/2) $baseline 12px 45px;
|
||||
border-bottom: 1px solid $forum-color-error;
|
||||
background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,38 +19,49 @@
|
||||
// #CONFIG
|
||||
// ----------------------------
|
||||
|
||||
// alert colors
|
||||
$alert-information-color: #6fa0ba;
|
||||
$alert-warning-color: #fdbc56;
|
||||
$alert-error-color: #b20610;
|
||||
$alert-success-color: #25b85a;
|
||||
$alert-background-color: #fcfcfc;
|
||||
$alert-icon-color: #fcfcfc;
|
||||
$alert-border-grey: #cdd7db;
|
||||
$alert-shadow-grey: #eef1f2;
|
||||
|
||||
// alert borders
|
||||
$alert-border-radius: 0.3125rem;
|
||||
$alert-border: 0.0625rem solid $alert-border-grey;
|
||||
// Overrides for other things available in the UXPL but not here
|
||||
// This is super gross. Don't do this in other places if you can avoid it.
|
||||
$palette-brand-accent: #2991c3;
|
||||
$palette-brand-back: #cce3f0;
|
||||
$palette-warning-accent: #ffc01f;
|
||||
$palette-warning-back: #fff9eb;
|
||||
$palette-error-accent: #cb0712;
|
||||
$palette-error-back: #feeced;
|
||||
$palette-success-accent: #009b00;
|
||||
$palette-success-back: #ecfaec;
|
||||
$palette-grey-accent: #a0a0a0;
|
||||
$palette-grey-back: #d9d9d9;
|
||||
$spacing-vertical-xx-small: ($baseline / 4);
|
||||
$spacing-vertical-x-small: ($baseline / 2);
|
||||
$spacing-vertical-small: $baseline;
|
||||
$spacing-horizontal-small: ($baseline / 2);
|
||||
$spacing-horizontal-base: $baseline;
|
||||
$font-size-small: 14px;
|
||||
$bp-screen-md: 768px !default;
|
||||
|
||||
// ----------------------------
|
||||
// #UTILITIES
|
||||
// ----------------------------
|
||||
@mixin alert($alert-color) {
|
||||
border-top: rem(2) solid $alert-color;
|
||||
@mixin alert($shim-alert-color, $shim-alert-color-glow) {
|
||||
border: 1px solid $shim-alert-color;
|
||||
box-shadow: inset 0 0 0 4px $shim-alert-color-glow;
|
||||
|
||||
.alert-icon {
|
||||
color: $alert-icon-color;
|
||||
background-color: $alert-color;
|
||||
color: $white;
|
||||
background-color: $shim-alert-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin alert-message($width) {
|
||||
@include float(left);
|
||||
width: $width;
|
||||
padding: 1.25rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include float(left);
|
||||
width: $width;
|
||||
padding: $spacing-vertical-small;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
// keeps the message compact
|
||||
@@ -60,65 +71,104 @@ $alert-border: 0.0625rem solid $alert-border-grey;
|
||||
|
||||
// everything below here gets added specificity pattern-library-shim
|
||||
.pattern-library-shim {
|
||||
|
||||
// ----------------------------
|
||||
// #GENERAL
|
||||
// ----------------------------
|
||||
|
||||
&.alert {
|
||||
background-color: $alert-background-color;
|
||||
border: $alert-border;
|
||||
border-radius: $alert-border-radius;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding: 1.25rem;
|
||||
background-color: $white;
|
||||
border: 1px solid $palette-grey-accent;
|
||||
padding: $spacing-vertical-small $spacing-horizontal-base;
|
||||
box-shadow: inset 0 0 0 4px $palette-grey-back;
|
||||
overflow: auto;
|
||||
box-shadow: 0 rem(2) rem(2) 0 $alert-shadow-grey;
|
||||
|
||||
&.alert-slim {
|
||||
padding: $spacing-vertical-x-small;
|
||||
|
||||
.alert-message {
|
||||
padding: $spacing-vertical-small $spacing-horizontal-base;
|
||||
font-size: $font-size-small;
|
||||
|
||||
.copy {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-tiny {
|
||||
padding: $spacing-vertical-x-small;
|
||||
|
||||
.alert-message {
|
||||
padding: $spacing-vertical-x-small $spacing-horizontal-small;
|
||||
font-size: $font-size-small;
|
||||
|
||||
.copy {
|
||||
margin-bottom: 0;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-icon {
|
||||
@include float(left);
|
||||
display: block;
|
||||
.alert-icon {
|
||||
// hide icons on small screens
|
||||
display: none;
|
||||
|
||||
// create a circle around the icon
|
||||
border-radius: 50%;
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include float(left);
|
||||
display: block;
|
||||
|
||||
// create room around the icon for the circle
|
||||
padding: 0.625rem;
|
||||
// create a circle around the icon
|
||||
border-radius: 50%;
|
||||
|
||||
// create room around the icon for the circle
|
||||
padding: $spacing-vertical-x-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-message-with-action {
|
||||
.alert-message-with-action {
|
||||
// provide room for the action to be displayed next to the alert message
|
||||
@include alert-message(70%);
|
||||
}
|
||||
|
||||
&.alert-message {
|
||||
.alert-message {
|
||||
@include alert-message(90%);
|
||||
}
|
||||
|
||||
&.alert-title {
|
||||
.alert-title {
|
||||
@extend %hd-5;
|
||||
@extend %headings-emphasized;
|
||||
|
||||
// shift the section up to make the alert more compact
|
||||
margin-top: -0.625rem;
|
||||
@media (min-width: $bp-screen-md) {
|
||||
// shift the section up to make the alert more compact
|
||||
margin-top: - $spacing-vertical-x-small;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.alert-copy {
|
||||
.alert-copy {
|
||||
@extend %copy-base;
|
||||
|
||||
// shift the message down to be in line with the icon
|
||||
margin-top: 0.3125rem;
|
||||
@media (min-width: $bp-screen-md) {
|
||||
// shift the message down to be in line with the icon
|
||||
margin-top: $spacing-vertical-xx-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-copy-with-title {
|
||||
.alert-copy-with-title {
|
||||
@extend %copy-base;
|
||||
}
|
||||
|
||||
&.alert-action {
|
||||
@include float(right);
|
||||
width: inherit;
|
||||
.alert-action {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include float(right);
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------
|
||||
@@ -127,46 +177,21 @@ $alert-border: 0.0625rem solid $alert-border-grey;
|
||||
|
||||
// information-based alert
|
||||
&.alert-information {
|
||||
@include alert($alert-information-color);
|
||||
@include alert($palette-brand-accent, $palette-brand-back);
|
||||
}
|
||||
|
||||
// warning-based alert
|
||||
&.alert-warning {
|
||||
@include alert($alert-warning-color);
|
||||
@include alert($palette-warning-accent, $palette-warning-back);
|
||||
}
|
||||
|
||||
// error-based alert
|
||||
&.alert-error {
|
||||
@include alert($alert-error-color);
|
||||
@include alert($palette-error-accent, $palette-error-back);
|
||||
}
|
||||
|
||||
// success-based alert
|
||||
&.alert-success {
|
||||
@include alert($alert-success-color);
|
||||
}
|
||||
|
||||
// added from _icons.scss
|
||||
&.icon {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
font-family: FontAwesome;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
&.icon-bullhorn:before {
|
||||
content: "\f0a1";
|
||||
}
|
||||
|
||||
// handles negative margin on navigation bar
|
||||
&.subsection-header {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 14px;
|
||||
@include alert($palette-success-accent, $palette-success-back);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user