beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Deprecated alert component

Browse source 
The .alert component will no longer be supported. Flavors have been updated to deal with these changes (certain flavors will keep the component for a while, until I can get around to dealing with the problems its deprecation causes). Another commit will follow with the documentation updates for removing the deprecated component.
This commit is contained in:
Angelos Chalaris 2017-05-11 00:33:21 +03:00
parent 5db203b909
commit 7b8ba434b5
16 changed files with 182 additions and 410 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
dist/mini-dark.css vendored
View file

@ -1646,54 +1646,6 @@ mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
background: #a7ffeb;
color: #212121;
border: 1px solid #d0d0d0;
margin: 0.5rem;
padding: 0.75rem;
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
.tooltip {
position: relative;
display: inline-block;
@ -1785,23 +1737,6 @@ mark.inline-block {
padding: 0.375em;
}
.alert.urgent {
background: #fff176;
}
.alert.critical {
background: #b71c1c;
color: #d0d0d0;
}
.alert.urgent {
border: 1px solid #d1c661;
}
.alert.critical {
border: 1px solid #a71a1a;
}
/*
Definitions for progress elements and spinners.
*/

2
dist/mini-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

64
dist/mini-default.css vendored
View file

@ -1647,53 +1647,6 @@ mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
background: #d1e6f3;
border: 1px solid #d0d0d0;
margin: 0.5rem;
padding: 0.75rem;
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
.tooltip {
position: relative;
display: inline-block;
@ -1785,23 +1738,6 @@ mark.inline-block {
padding: 0.375em;
}
.alert.urgent {
background: #ffca28;
}
.alert.critical {
background: #b71c1c;
color: #fafafa;
}
.alert.urgent {
border: 1px solid #e8b825;
}
.alert.critical {
border: 1px solid #a71a1a;
}
/*
Definitions for progress elements and spinners.
*/

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

94
dist/mini-nord.css vendored
View file

@ -1646,53 +1646,6 @@ mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
border: 1px solid #D8DEE9;
margin: 1px 10px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
.tooltip {
position: relative;
display: inline-block;
@ -1763,6 +1716,53 @@ mark.inline-block {
margin-top: 12px;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
border: 1px solid #D8DEE9;
margin: 1px 10px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
/*
Custom contextual background elements and alerts.
*/

2
dist/mini-nord.min.css vendored
View file

File diff suppressed because one or more lines are too long

27
dist/mini-sucroa.css vendored
View file

@ -1554,16 +1554,6 @@ mark.inline-block {
display: inline-block;
}
.alert {
display: block;
background: #e8deff;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 4px 10px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
}
.tooltip {
position: relative;
display: inline-block;
@ -1656,23 +1646,6 @@ mark.inline-block {
padding: 5px;
}
.alert.urgent {
background: #fe9992;
}
.alert.critical {
background: #ac354e;
color: #fffddc;
}
.alert.urgent {
border: 1px solid #fe6d64;
}
.alert.critical {
border: 1px solid #86293d;
}
/*
Definitions for progress elements and spinners.
*/

2
dist/mini-sucroa.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -1119,3 +1119,4 @@
- Created new codepens for the `quick_reference` page for changes in the `card` module.
- Forked old codepens that used `.nano` and `.shadow-...` classes, updated links in `quick_reference` for all of them now.
- Updated both `mini-default` and `mini-dark` to use the latest classes built in the `card` module with proper colors.
- Deprecated `.alert` and all that comes with it, updated flavors to reflect this. I will update all docs after commiting, just to be on the safe side. By the way, `mini-default` is now `6.12KB` without the deprecated components and with a few of the additions already built-in. Pretty happy with how it's coming along right now!

31
src/flavors/mini-dark.scss
View file

@ -404,28 +404,7 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #a7ffeb; // Background color for alerts
$alert-fore-color: #212121; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts
$alert-padding: 0.75rem; // Padding for alerts
$alert-margin: 0.5rem; // Margin for alerts
$alert-box-shadow: none; // Box shadow for alerts
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #fff176; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
$alert-variant2-fore-color: $fore-color; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #d1c661; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #a71a1a; // Border style for alert style 2
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #0c0c0c; // Text color for tooltips
@ -435,9 +414,7 @@ $tooltip-padding: 0.5rem; // Padding for tooltips
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@ -562,10 +539,6 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.

31
src/flavors/mini-default.scss
View file

@ -404,28 +404,7 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #d1e6f3; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts
$alert-padding: 0.75rem; // Padding for alerts
$alert-margin: 0.5rem; // Margin for alerts
$alert-box-shadow: none; // Box shadow for alerts
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #ffca28; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
$alert-variant2-fore-color: #fafafa; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #e8b825; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #a71a1a; // Border style for alert style 2
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fafafa; // Text color for tooltips
@ -435,9 +414,7 @@ $tooltip-padding: 0.5rem; // Padding for tooltips
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@ -562,10 +539,6 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.

6
src/flavors/mini-lite.scss
View file

@ -338,9 +338,9 @@ $mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$include-alerts: false; // [Hidden flag override] Should alerts be included? (`true`/`false``) [1]
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
// Notes:
// [1] - Due to the values of $include-alerts and $include-tooltip being set to `false`,
// no styling is provided for these elements. If you want to enable them, please
// refer to a full flavor file for variable definitions.
// [1] - Due to the value of $include-tooltip being set to `false`, no styling
// is provided for this element. If you want to enable it, please refer to a
// full flavor file for variable definitions.
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>

1
src/flavors/mini-nord.scss
View file

@ -412,6 +412,7 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding for <mark> style 2
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$include-alerts: true; // Should the alert component be included? (`true`/`false`)
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #ECEFF4; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts

32
src/flavors/mini-sucroa.scss
View file

@ -406,29 +406,7 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding for <mark> style 2
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #e8deff; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #a9a2ba; // Border style for alerts
$alert-border-radius: 2px; // Border radius for alerts
$alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 4px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow for alerts
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
$alert-include-animated: false; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #fe9992; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #ac354e; // Background color for alert variant 2
$alert-variant2-fore-color: #fffddc; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #fe6d64; // Border style for alert style 1
$alert-style1-border-radius:$alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #86293d; // Border style for alert style 2
$alert-style2-border-radius:$alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fffddc; // Text color for tooltips
@ -439,9 +417,7 @@ $tooltip-box-shadow: // Box shadow for tooltip-box-shadow
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@ -584,10 +560,6 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.

122
src/mini/_contextual.scss
View file

@ -3,10 +3,6 @@
*/
// Contextual background elements use the mark element as their base.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
$include-alerts: true !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: true !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
@ -50,60 +46,6 @@ mark {
display: inline-block; // Can be used to deal with some problems.
}
}
// Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn off if you want to disable the alert component.
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
}
@if $include-alerts { // Turn off if you want to disable the alert component.
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
}
}
}
// Default styling for tooltips. Use mixins for alternate styles
@if $include-tooltip {
.#{$tooltip-name} {
@ -190,3 +132,67 @@ mark {
}
}
}
// [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
$include-alerts: false !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
// Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn on if you want to enable the alert component.
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$alert-back-color: #d1e6f3 !default; // Background color for alerts
$alert-fore-color: $fore-color !default; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0 !default; // Border style for alerts
$alert-border-radius: 0 !default; // Border radius for alerts
$alert-padding: 0.75rem !default; // Padding for alerts
$alert-margin: 0.5rem !default; // Margin for alerts
$alert-box-shadow: none !default; // Box shadow for alerts
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
}
}
}

102
src/mini/_contextual_mixins.scss
View file

@ -48,56 +48,6 @@
}
}
}
// Mixin for alternate alert (alert color variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert.
// - $alert-alt-back-color : The background color of the alternate alert.
// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color;
}
@if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-fore-color;
}
}
}
// Mixin for alternate alert styles (alert style variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert style.
// - $alert-alt-border-style : The border style of the alternate alert style.
// - $alert-alt-border-radius : Border radius of the alternate alert style.
// - $alert-alt-padding : (Optional) Padding of the alternate alert style. Defaults to the alert's padding.
// - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
// - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
@mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
}
@if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius;
}
@if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding;
}
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
@if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-shadow;
}
}
}
// Mixin for alternate tooltip (tooltip color variants).
// Variables:
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
@ -165,3 +115,55 @@
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert (alert color variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert.
// - $alert-alt-back-color : The background color of the alternate alert.
// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color;
}
@if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-fore-color;
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert styles (alert style variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert style.
// - $alert-alt-border-style : The border style of the alternate alert style.
// - $alert-alt-border-radius : Border radius of the alternate alert style.
// - $alert-alt-padding : (Optional) Padding of the alternate alert style. Defaults to the alert's padding.
// - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
// - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
@mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
}
@if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius;
}
@if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding;
}
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
@if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-shadow;
}
}
}