mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-14 01:09:38 +01:00
Housekeeping for contextual module
Split module into two files, added hidden flag, added error messages for improper usage of mixins.
This commit is contained in:
Angelos Chalaris
parent
eea0ea9421
commit
afe2a54c02
@ -904,3 +904,5 @@
|
||||
- Cleanup of relevant variables and comments in flavor files.
|
||||
- Updated `card` module, splitting into main file and mixins, cleanup in flavor files for the module.
|
||||
- Updated `tab` module, adding an extra **hidden flag** `$include-stacked-tabs` for toggling `.stacked` tabs on and off, cleanup of flavor files.
|
||||
- Updated `contextual` module, splitting file and adding **hidden flag** `$include-alerts` for toggling `.alert`s on and off. Added `@error` messages in mixins in case the mixins are called without the corresponding components enabled. Should be a welcome change during compilation.
|
||||
- Flavor cleanup for `contextual` module.
|
||||
|
||||
@ -385,63 +385,61 @@ $tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 2px 4px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$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: #eeeeee; // Background color for alerts
|
||||
$alert-fore-color: $fore-color; // Text color for alerts
|
||||
$alert-border-style: 1px solid #bdbdbd; // Border style for alerts
|
||||
$alert-border-radius: 0; // Border radius for alerts
|
||||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
$alert-box-shadow: // Box shadow for alerts
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$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: #eeeeee; // Background color for alerts
|
||||
$alert-fore-color: $fore-color; // Text color for alerts
|
||||
$alert-border-style: 1px solid #bdbdbd; // Border style for alerts
|
||||
$alert-border-radius: 0; // Border radius for alerts
|
||||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 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: 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 #ff8f00; // 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 #d50000; // 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]
|
||||
$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
|
||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 6px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 6px; // Padding for tooltips
|
||||
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
||||
$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 #ff8f00; // 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 #d50000; // 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]
|
||||
$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
|
||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 6px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 6px; // Padding for tooltips
|
||||
$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
|
||||
$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.
|
||||
|
||||
@ -380,63 +380,61 @@ $tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #6979c6; // Background color for <mark>
|
||||
$mark-fore-color: #fffddc; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 3px 5px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #d2405f; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #2b866d; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$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
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #d2405f; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #2b866d; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$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]
|
||||
$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
|
||||
$tooltip-border-radius: 3px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 8px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 10px; // Padding for tooltips
|
||||
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
||||
$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]
|
||||
$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
|
||||
$tooltip-border-radius: 3px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 8px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 10px; // Padding for tooltips
|
||||
$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
|
||||
$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.
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
/*
|
||||
Definitions for contextual background elements and alerts.
|
||||
*/
|
||||
// Check the `_contextual_mixins.scss` file to find this module's mixins.
|
||||
@import 'contextual_mixins';
|
||||
// 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.
|
||||
// Default styling for mark. Use mixins for alternate styles.
|
||||
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling
|
||||
mark {
|
||||
@if $mark-back-color != $back-color {
|
||||
background: $mark-back-color;
|
||||
@ -36,161 +45,63 @@ mark {
|
||||
display: inline-block; // Can be used to deal with some problems.
|
||||
}
|
||||
}
|
||||
// Mixin for alternate mark (contextual color variants).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark.
|
||||
// - $mark-alt-back-color : The background color of the alternate mark.
|
||||
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
background: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color {
|
||||
color: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternative mark styles (contextual tags).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark style.
|
||||
// - $mark-alt-border-style : The border-style of the alternate mark style.
|
||||
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
|
||||
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
|
||||
// - $mark-alt-font-size : (Optional) The font-size of the alternate mark style. Defaults to the font-size of the mark.
|
||||
// - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
|
||||
// - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
|
||||
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
|
||||
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
|
||||
$mark-alt-box-shadow : $mark-box-shadow ) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-font-size != $mark-font-size {
|
||||
font-size: $mark-alt-font-size;
|
||||
}
|
||||
@if $mark-alt-line-height != $mark-line-height {
|
||||
line-height: $mark-alt-line-height;
|
||||
}
|
||||
@if $mark-alt-border-style != $mark-border-style {
|
||||
border: $mark-alt-border-style;
|
||||
}
|
||||
@if $mark-alt-border-radius != $mark-border-radius {
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
@if $mark-alt-padding != $mark-padding {
|
||||
padding: $mark-alt-padding;
|
||||
}
|
||||
@if $mark-alt-box-shadow != $mark-box-shadow {
|
||||
box-shadow: $mark-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Alert variables
|
||||
$alert-name: 'alert' !default; // Class name for the alerts
|
||||
$alert-include-animated: true !default; // Should animated alerts be included?
|
||||
$alert-animated-name: 'animated' !default; // Class name for animated alerts
|
||||
// Animation definition for animated alerts (included if wanted)
|
||||
@if $alert-include-animated {
|
||||
@-webkit-keyframes alert-anim {
|
||||
0% { -webkit-transform: scale(1); }
|
||||
45% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.005);}
|
||||
55% { -webkit-transform: scale(1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
45% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.005);}
|
||||
55% { -webkit-transform: scale(1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
@if $include-alerts {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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) {
|
||||
.#{$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) {
|
||||
.#{$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tooltip variables
|
||||
$include-tooltip: true !default; // Should tooltips be included?
|
||||
$tooltip-name: 'tooltip' !default; // Class name for the tooltips
|
||||
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
// Default styling for alerts. Use mixins for alternate styles
|
||||
// Default styling for tooltips. Use mixins for alternate styles
|
||||
@if $include-tooltip {
|
||||
.#{$tooltip-name} {
|
||||
position: relative;
|
||||
@ -200,9 +111,9 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
// Remember to keep this index a lower value than the one used for stickies.
|
||||
z-index: 1010; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
@ -220,7 +131,7 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
&:before { // This is the little tooltip triangle
|
||||
@ -251,7 +162,7 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
}
|
||||
white-space: nowrap;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-tail-size;
|
||||
@ -263,75 +174,7 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
|
||||
.#{$tooltip-name}:before {
|
||||
left: -webkit-calc(50% - #{$tooltip-tail-size});
|
||||
left: calc(50% - #{$tooltip-tail-size});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip (tooltip color variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
|
||||
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
|
||||
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
|
||||
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-alt-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-alt-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
background: $tooltip-alt-back-color;
|
||||
}
|
||||
@if $tooltip-alt-fore-color != $tooltip-fore-color {
|
||||
color: $tooltip-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip styles (tooltip style variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip style.
|
||||
// - $tooltip-alt-tail-size : The border style of the alternate tooltip style.
|
||||
// - $tooltip-alt-border-radius : Border radius of the alternate tooltip style.
|
||||
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
|
||||
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
|
||||
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
|
||||
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
&:before {
|
||||
border-width: $tooltip-alt-tail-size;
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@if $tooltip-alt-border-radius != $tooltip-border-radius {
|
||||
border-radius: $tooltip-alt-border-radius;
|
||||
}
|
||||
@if $tooltip-alt-padding != $tooltip-padding {
|
||||
padding: $tooltip-alt-padding;
|
||||
}
|
||||
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
|
||||
box-shadow: $tooltip-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name}:before {
|
||||
left: -webkit-calc(50% - #{$tooltip-alt-tail-size});
|
||||
left: calc(50% - #{$tooltip-alt-tail-size});
|
||||
}
|
||||
left: calc(50% - #{$tooltip-tail-size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
174
src/mini/_contextual_mixins.scss
Normal file
174
src/mini/_contextual_mixins.scss
Normal file
@ -0,0 +1,174 @@
|
||||
// Contextual module's mixin definitions are here. For the module itself
|
||||
// check `_contextual.scss`.
|
||||
// Mixin for alternate mark (contextual color variants).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark.
|
||||
// - $mark-alt-back-color : The background color of the alternate mark.
|
||||
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
background: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color {
|
||||
color: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternative mark styles (contextual tags).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark style.
|
||||
// - $mark-alt-border-style : The border-style of the alternate mark style.
|
||||
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
|
||||
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
|
||||
// - $mark-alt-font-size : (Optional) The font-size of the alternate mark style. Defaults to the font-size of the mark.
|
||||
// - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
|
||||
// - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
|
||||
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
|
||||
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
|
||||
$mark-alt-box-shadow : $mark-box-shadow ) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-font-size != $mark-font-size {
|
||||
font-size: $mark-alt-font-size;
|
||||
}
|
||||
@if $mark-alt-line-height != $mark-line-height {
|
||||
line-height: $mark-alt-line-height;
|
||||
}
|
||||
@if $mark-alt-border-style != $mark-border-style {
|
||||
border: $mark-alt-border-style;
|
||||
}
|
||||
@if $mark-alt-border-radius != $mark-border-radius {
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
@if $mark-alt-padding != $mark-padding {
|
||||
padding: $mark-alt-padding;
|
||||
}
|
||||
@if $mark-alt-box-shadow != $mark-box-shadow {
|
||||
box-shadow: $mark-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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.
|
||||
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
|
||||
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
|
||||
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-alt-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-alt-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
background: $tooltip-alt-back-color;
|
||||
}
|
||||
@if $tooltip-alt-fore-color != $tooltip-fore-color {
|
||||
color: $tooltip-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip styles (tooltip style variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip style.
|
||||
// - $tooltip-alt-tail-size : The border style of the alternate tooltip style.
|
||||
// - $tooltip-alt-border-radius : Border radius of the alternate tooltip style.
|
||||
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
|
||||
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
|
||||
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
|
||||
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
&:before {
|
||||
border-width: $tooltip-alt-tail-size;
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@if $tooltip-alt-border-radius != $tooltip-border-radius {
|
||||
border-radius: $tooltip-alt-border-radius;
|
||||
}
|
||||
@if $tooltip-alt-padding != $tooltip-padding {
|
||||
padding: $tooltip-alt-padding;
|
||||
}
|
||||
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
|
||||
box-shadow: $tooltip-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name}:before {
|
||||
left: -webkit-calc(50% - #{$tooltip-alt-tail-size});
|
||||
left: calc(50% - #{$tooltip-alt-tail-size});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user