From 5212f50c1b9df66c4d5203f0df31d5a5c07aa93b Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 26 Dec 2019 12:02:45 -0800 Subject: [PATCH] feat(clay-css): Alert adds `.alert-btn`, `.alert-autofit-row`, `.alert-footer`, and `.alert .btn-group-item` feat(clay-css): Alert adds Sass maps `$alert-btn`, `$alert-btn-group-item`, `$alert-footer`, `$alert-autofit-row`, `$alert-primary-btn`, `$alert-secondary-btn`, `$alert-success-btn`, `$alert-info-btn`, `$alert-warning-btn`, `$alert-danger-btn`, `$alert-light-btn`, `$alert-dark-btn` fixes #2765 --- .../src/scss/atlas/variables/_alerts.scss | 57 +++++++- .../clay-css/src/scss/components/_alerts.scss | 22 +++ .../clay-css/src/scss/variables/_alerts.scss | 136 ++++++++++++++++-- 3 files changed, 206 insertions(+), 9 deletions(-) diff --git a/packages/clay-css/src/scss/atlas/variables/_alerts.scss b/packages/clay-css/src/scss/atlas/variables/_alerts.scss index 91af97b0ab..508a6a709f 100644 --- a/packages/clay-css/src/scss/atlas/variables/_alerts.scss +++ b/packages/clay-css/src/scss/atlas/variables/_alerts.scss @@ -40,6 +40,16 @@ $alert-subtitle: map-deep-merge(( $alert-notifications-box-shadow: 0 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.3) !default; +// Alert Autofit Row + +$alert-autofit-row: () !default; +$alert-autofit-row: map-deep-merge(( + margin-left: -0.25rem, + margin-right: -0.25rem, + autofit-col-padding-left: 0.25rem, + autofit-col-padding-right: 0.25rem, +), $alert-autofit-row); + // Alert Variants $alert-primary-color: $primary !default; @@ -49,6 +59,11 @@ $alert-primary-close-color: $alert-primary-color !default; $alert-primary-close-hover-color: $alert-primary-color !default; $alert-primary-lead-color: $alert-primary-color !default; $alert-primary-link-color: $link-color !default; +$alert-primary-btn: () !default; +$alert-primary-btn: map-deep-merge(( + border-color: $primary-l1, + hover-border-color: $primary, +), $alert-primary-btn); $alert-secondary-color: $secondary !default; $alert-secondary-bg: $secondary-l3 !default; @@ -57,6 +72,11 @@ $alert-secondary-close-color: $alert-secondary-color !default; $alert-secondary-close-hover-color: $alert-secondary-color !default; $alert-secondary-lead-color: $alert-secondary-color !default; $alert-secondary-link-color: $link-color !default; +$alert-secondary-btn: () !default; +$alert-secondary-btn: map-deep-merge(( + border-color: $secondary-l1, + hover-border-color: $secondary, +), $alert-secondary-btn); $alert-success-color: $success !default; $alert-success-bg: $success-l2 !default; @@ -65,6 +85,11 @@ $alert-success-close-color: $alert-success-color !default; $alert-success-close-hover-color: $alert-success-color !default; $alert-success-lead-color: $alert-success-color !default; $alert-success-link-color: $link-color !default; +$alert-success-btn: () !default; +$alert-success-btn: map-deep-merge(( + border-color: $success-l1, + hover-border-color: $success, +), $alert-success-btn); $alert-info-color: $info !default; $alert-info-bg: $info-l2 !default; @@ -73,6 +98,11 @@ $alert-info-close-color: $alert-info-color !default; $alert-info-close-hover-color: $alert-info-color !default; $alert-info-lead-color: $alert-info-color !default; $alert-info-link-color: $link-color !default; +$alert-info-btn: () !default; +$alert-info-btn: map-deep-merge(( + border-color: $info-l1, + hover-border-color: $info, +), $alert-info-btn); $alert-warning-color: $warning !default; $alert-warning-bg: $warning-l2 !default; @@ -81,6 +111,11 @@ $alert-warning-close-color: $alert-warning-color !default; $alert-warning-close-hover-color: $alert-warning-color !default; $alert-warning-lead-color: $alert-warning-color !default; $alert-warning-link-color: $link-color !default; +$alert-warning-btn: () !default; +$alert-warning-btn: map-deep-merge(( + border-color: $warning-l1, + hover-border-color: $warning, +), $alert-warning-btn); $alert-danger-color: $danger !default; $alert-danger-bg: $danger-l2 !default; @@ -89,6 +124,11 @@ $alert-danger-close-color: $alert-danger-color !default; $alert-danger-close-hover-color: $alert-danger-color !default; $alert-danger-lead-color: $alert-danger-color !default; $alert-danger-link-color: $link-color !default; +$alert-danger-btn: () !default; +$alert-danger-btn: map-deep-merge(( + border-color: $danger-l1, + hover-border-color: $danger, +), $alert-danger-btn); $alert-light-color: $dark !default; $alert-light-bg: $light-l2 !default; @@ -97,6 +137,16 @@ $alert-light-close-color: $alert-light-color !default; $alert-light-close-hover-color: $alert-light-color !default; $alert-light-lead-color: $alert-light-color !default; $alert-light-link-color: $link-color !default; +$alert-light-btn: () !default; +$alert-light-btn: map-deep-merge(( + border-color: $dark-l1, + color: $dark, + hover-bg: $dark, + hover-border-color: $dark, + hover-color: $white, + active-bg: darken($dark, 5%), + active-border-color: darken($dark, 5%), +), $alert-light-btn); $alert-dark-color: $light !default; $alert-dark-bg: $dark-l2 !default; @@ -104,4 +154,9 @@ $alert-dark-border-color: $dark-l1 !default; $alert-dark-close-color: $alert-dark-color !default; $alert-dark-close-hover-color: $alert-dark-color !default; $alert-dark-lead-color: $alert-dark-color !default; -$alert-dark-link-color: $alert-dark-color !default; \ No newline at end of file +$alert-dark-link-color: $alert-dark-color !default; +$alert-dark-btn: () !default; +$alert-dark-btn: map-deep-merge(( + border-color: $dark-l1, + hover-border-color: $dark, +), $alert-dark-btn); \ No newline at end of file diff --git a/packages/clay-css/src/scss/components/_alerts.scss b/packages/clay-css/src/scss/components/_alerts.scss index cffbe210a7..cf1c71d363 100644 --- a/packages/clay-css/src/scss/components/_alerts.scss +++ b/packages/clay-css/src/scss/components/_alerts.scss @@ -9,6 +9,14 @@ font-size: $alert-font-size; word-wrap: break-word; + .alert-btn { + @include clay-button-variant($alert-btn); + } + + .btn-group-item { + @include clay-container($alert-btn-group-item); + } + .close { @include clay-close($alert-close); } @@ -28,6 +36,10 @@ } } +.alert-footer { + @include clay-container($alert-footer); +} + .alert-link, .alert-link.btn-unstyled { font-weight: $alert-link-font-weight; @@ -173,6 +185,12 @@ } } +// Alert Autofit Row + +.alert-autofit-row { + @include clay-autofit-row($alert-autofit-row); +} + // Alert Variants @each $color, $value in $alert-palette { @@ -181,6 +199,10 @@ border-color: map-get($value, border-color); color: map-get($value, color); + .alert-btn { + @include clay-button-variant(map-get($value, alert-btn)); + } + .close { color: map-get($value, close-color); diff --git a/packages/clay-css/src/scss/variables/_alerts.scss b/packages/clay-css/src/scss/variables/_alerts.scss index 2281c35316..762fd0741b 100644 --- a/packages/clay-css/src/scss/variables/_alerts.scss +++ b/packages/clay-css/src/scss/variables/_alerts.scss @@ -4,6 +4,23 @@ $alert-border-style: solid !default; +$alert-btn: () !default; +$alert-btn: map-deep-merge(( + border-radius: $btn-border-radius-sm, + font-size: $btn-font-size-sm, + line-height: $btn-line-height-sm, + padding-bottom: $btn-padding-y-sm, + padding-left: $btn-padding-x-sm, + padding-right: $btn-padding-x-sm, + padding-top: $btn-padding-y-sm, +), $alert-btn); + +$alert-btn-group-item: () !default; +$alert-btn-group-item: map-deep-merge(( + margin-bottom: 0.125rem, + margin-top: 0.125rem, +), $alert-btn-group-item); + /// @deprecated as of v2.12.0 use the Sass map `$alert-close` instead $alert-close-font-size: 0.875rem !default; // 14px @@ -83,6 +100,11 @@ $alert-title: () !default; $alert-subtitle: () !default; +$alert-footer: () !default; +$alert-footer: map-deep-merge(( + margin-top: 1.375rem, +), $alert-footer); + // Alert Dismissible $alert-dismissible-padding-bottom: null !default; @@ -125,6 +147,16 @@ $alert-notifications-fixed-top-mobile: null !default; // 68px $alert-notifications-box-shadow: null !default; $alert-notifications-max-width: 22.5rem !default; // 360px +// Alert Autofit Row + +$alert-autofit-row: () !default; +$alert-autofit-row: map-deep-merge(( + margin-left: -0.5rem, + margin-right: -0.5rem, + autofit-col-padding-left: 0.5rem, + autofit-col-padding-right: 0.5rem, +), $alert-autofit-row); + // Alert Variants $alert-primary-bg: null !default; @@ -135,6 +167,16 @@ $alert-primary-close-hover-color: null !default; $alert-primary-lead-color: null !default; $alert-primary-link-color: null !default; $alert-primary-link-hover-color: null !default; +$alert-primary-btn: () !default; +$alert-primary-btn: map-deep-merge(( + bg: $white, + border-color: $primary, + color: $primary, + hover-bg: $primary, + hover-color: color-yiq($primary), + active-bg: darken($primary, 5%), + active-border-color: darken($primary, 5%), +), $alert-primary-btn); $alert-secondary-bg: null !default; $alert-secondary-border-color: null !default; @@ -144,6 +186,16 @@ $alert-secondary-close-hover-color: null !default; $alert-secondary-lead-color: null !default; $alert-secondary-link-color: null !default; $alert-secondary-link-hover-color: null !default; +$alert-secondary-btn: () !default; +$alert-secondary-btn: map-deep-merge(( + bg: $white, + border-color: $secondary, + color: $secondary, + hover-bg: $secondary, + hover-color: color-yiq($secondary), + active-bg: darken($secondary, 5%), + active-border-color: darken($secondary, 5%), +), $alert-secondary-btn); $alert-success-bg: null !default; $alert-success-border-color: null !default; @@ -153,6 +205,16 @@ $alert-success-close-hover-color: null !default; $alert-success-lead-color: null !default; $alert-success-link-color: null !default; $alert-success-link-hover-color: null !default; +$alert-success-btn: () !default; +$alert-success-btn: map-deep-merge(( + bg: $white, + border-color: $success, + color: $success, + hover-bg: $success, + hover-color: color-yiq($success), + active-bg: darken($success, 5%), + active-border-color: darken($success, 5%), +), $alert-success-btn); $alert-info-bg: null !default; $alert-info-border-color: null !default; @@ -162,6 +224,16 @@ $alert-info-close-hover-color: null !default; $alert-info-lead-color: null !default; $alert-info-link-color: null !default; $alert-info-link-hover-color: null !default; +$alert-info-btn: () !default; +$alert-info-btn: map-deep-merge(( + bg: $white, + border-color: $info, + color: $info, + hover-bg: $info, + hover-color: color-yiq($info), + active-bg: darken($info, 5%), + active-border-color: darken($info, 5%), +), $alert-info-btn); $alert-warning-bg: null !default; $alert-warning-border-color: null !default; @@ -171,6 +243,16 @@ $alert-warning-close-hover-color: null !default; $alert-warning-lead-color: null !default; $alert-warning-link-color: null !default; $alert-warning-link-hover-color: null !default; +$alert-warning-btn: () !default; +$alert-warning-btn: map-deep-merge(( + bg: $white, + border-color: $warning, + color: $warning, + hover-bg: $warning, + hover-color: color-yiq($warning), + active-bg: darken($warning, 5%), + active-border-color: darken($warning, 5%), +), $alert-warning-btn); $alert-danger-bg: null !default; $alert-danger-border-color: null !default; @@ -180,6 +262,16 @@ $alert-danger-close-hover-color: null !default; $alert-danger-lead-color: null !default; $alert-danger-link-color: null !default; $alert-danger-link-hover-color: null !default; +$alert-danger-btn: () !default; +$alert-danger-btn: map-deep-merge(( + bg: $white, + border-color: $danger, + color: $danger, + hover-bg: $danger, + hover-color: color-yiq($danger), + active-bg: darken($danger, 5%), + active-border-color: darken($danger, 5%), +), $alert-danger-btn); $alert-light-bg: null !default; $alert-light-border-color: null !default; @@ -189,6 +281,16 @@ $alert-light-close-hover-color: null !default; $alert-light-lead-color: null !default; $alert-light-link-color: null !default; $alert-light-link-hover-color: null !default; +$alert-light-btn: () !default; +$alert-light-btn: map-deep-merge(( + bg: $white, + border-color: $secondary, + color: $secondary, + hover-bg: $secondary, + hover-color: color-yiq($secondary), + active-bg: darken($secondary, 5%), + active-border-color: darken($secondary, 5%), +), $alert-light-btn); $alert-dark-bg: null !default; $alert-dark-border-color: null !default; @@ -198,6 +300,16 @@ $alert-dark-close-hover-color: null !default; $alert-dark-lead-color: null !default; $alert-dark-link-color: null !default; $alert-dark-link-hover-color: null !default; +$alert-dark-btn: () !default; +$alert-dark-btn: map-deep-merge(( + bg: $white, + border-color: $dark, + color: $dark, + hover-bg: $dark, + hover-color: color-yiq($dark), + active-bg: darken($dark, 5%), + active-border-color: darken($dark, 5%), +), $alert-dark-btn); $alert-palette: () !default; $alert-palette: map-deep-merge(( @@ -209,7 +321,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-primary-close-hover-color, lead-color: $alert-primary-lead-color, link-color: $alert-primary-link-color, - link-hover-color: $alert-primary-link-hover-color + link-hover-color: $alert-primary-link-hover-color, + alert-btn: $alert-primary-btn, ), secondary: ( bg: $alert-secondary-bg, @@ -219,7 +332,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-secondary-close-hover-color, lead-color: $alert-secondary-lead-color, link-color: $alert-secondary-link-color, - link-hover-color: $alert-secondary-link-hover-color + link-hover-color: $alert-secondary-link-hover-color, + alert-btn: $alert-secondary-btn, ), success: ( bg: $alert-success-bg, @@ -229,7 +343,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-success-close-hover-color, lead-color: $alert-success-lead-color, link-color: $alert-success-link-color, - link-hover-color: $alert-success-link-hover-color + link-hover-color: $alert-success-link-hover-color, + alert-btn: $alert-success-btn, ), info: ( bg: $alert-info-bg, @@ -239,7 +354,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-info-close-hover-color, lead-color: $alert-info-lead-color, link-color: $alert-info-link-color, - link-hover-color: $alert-info-link-hover-color + link-hover-color: $alert-info-link-hover-color, + alert-btn: $alert-info-btn, ), warning: ( bg: $alert-warning-bg, @@ -249,7 +365,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-warning-close-hover-color, lead-color: $alert-warning-lead-color, link-color: $alert-warning-link-color, - link-hover-color: $alert-warning-link-hover-color + link-hover-color: $alert-warning-link-hover-color, + alert-btn: $alert-warning-btn, ), danger: ( bg: $alert-danger-bg, @@ -259,7 +376,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-danger-close-hover-color, lead-color: $alert-danger-lead-color, link-color: $alert-danger-link-color, - link-hover-color: $alert-danger-link-hover-color + link-hover-color: $alert-danger-link-hover-color, + alert-btn: $alert-danger-btn, ), light: ( bg: $alert-light-bg, @@ -269,7 +387,8 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-light-close-hover-color, lead-color: $alert-light-lead-color, link-color: $alert-light-link-color, - link-hover-color: $alert-light-link-hover-color + link-hover-color: $alert-light-link-hover-color, + alert-btn: $alert-light-btn, ), dark: ( bg: $alert-dark-bg, @@ -279,6 +398,7 @@ $alert-palette: map-deep-merge(( close-hover-color: $alert-dark-close-hover-color, lead-color: $alert-dark-lead-color, link-color: $alert-dark-link-color, - link-hover-color: $alert-dark-link-hover-color + link-hover-color: $alert-dark-link-hover-color, + alert-btn: $alert-dark-btn, ), ), $alert-palette); \ No newline at end of file