mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-14 18:03:59 +02:00
Code Issues Releases Wiki Activity

Housekeeping for contextual module

Browse Source 
Split module into two files, added hidden flag, added error messages for improper usage of mixins.
This commit is contained in:
Angelos Chalaris
2017-03-30 16:54:05 +03:00
parent eea0ea9421
commit afe2a54c02
5 changed files with 339 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

@@ -904,3 +904,5 @@
- Cleanup of relevant variables and comments in flavor files. - 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 `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 `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.

104
src/flavors/mini-default.scss
View File

@@ -385,63 +385,61 @@ $tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts // Variables for contextual background elements and alerts
$mark-back-color: #0277bd; // Background color for <mark> $mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark> $mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark> $mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark> $mark-line-height: 1; // Line height for <mark>
$mark-border-style: 0; // Border style for <mark> $mark-border-style: 0; // Border style for <mark>
$mark-border-radius: 2px; // Border radius for <mark> $mark-border-radius: 2px; // Border radius for <mark>
$mark-padding: 2px 4px; // Padding for <mark> $mark-padding: 2px 4px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark> $mark-margin: 0; // Margin for <mark>
$mark-box-shadow: // Box shadow 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); 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-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1 $mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color 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-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #689f38; // Background color 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-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style 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-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 4px 8px; // Padding 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-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style 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-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding 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-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2 $mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts $alert-name: 'alert'; // Class name for alerts
$alert-back-color: #eeeeee; // Background color for alerts $alert-back-color: #eeeeee; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts $alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #bdbdbd; // Border style for alerts $alert-border-style: 1px solid #bdbdbd; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts $alert-border-radius: 0; // Border radius for alerts
$alert-padding: 12px 16px; // Padding for alerts $alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 1px 10px; // Margin for alerts $alert-margin: 1px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow 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); 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? $alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
// (`true`/`false`) [1] $alert-animated-class: 'animated'; // Class name for animated alerts
$alert-animated-class: 'animated'; // Class name for animated alerts $alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-name: 'urgent'; // Class name for alert variant 1 $alert-variant1-back-color: #ffca28; // Background color 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-name: 'critical'; // Class name for alert variant 2 $alert-variant2-back-color: #b71c1c; // Background color 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-variant2-fore-color: #fafafa; // Text color for alert variant 2 $alert-style1-name: 'urgent'; // Class name for alert style 1
$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-style: 1px solid #ff8f00; // Border style for alert style 1 $alert-style1-border-radius: $alert-border-radius; // Border radius 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-name: 'critical'; // Class name for alert style 2 $alert-style2-border-style: 1px solid #d50000; // Border style 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
$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? $tooltip-name: 'tooltip'; // Class name for the tooltip component
// (`true`/`false`) [2] $tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-name: 'tooltip'; // Class name for the tooltip component $tooltip-fore-color: #fafafa; // Text color for tooltips
$tooltip-back-color: $fore-color; // Background color for tooltips $tooltip-border-radius: 2px; // Border radius for tooltips
$tooltip-fore-color: #fafafa; // Text color for tooltips $tooltip-tail-size: 6px; // The size of the tooltip's tail
$tooltip-border-radius: 2px; // Border radius for tooltips $tooltip-padding: 6px; // Padding for tooltips
$tooltip-tail-size: 6px; // The size of the tooltip's tail $tooltip-box-shadow: // Box shadow for tooltip-box-shadow
$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); 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: // Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class // [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. // will be used to determine the class that will be used for animated alerts.

104
src/flavors/mini-sucroa.scss
View File

@@ -380,63 +380,61 @@ $tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts // Variables for contextual background elements and alerts
$mark-back-color: #6979c6; // Background color for <mark> $mark-back-color: #6979c6; // Background color for <mark>
$mark-fore-color: #fffddc; // Text color for <mark> $mark-fore-color: #fffddc; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark> $mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark> $mark-line-height: 1; // Line height for <mark>
$mark-border-style: 0; // Border style for <mark> $mark-border-style: 0; // Border style for <mark>
$mark-border-radius: 2px; // Border radius for <mark> $mark-border-radius: 2px; // Border radius for <mark>
$mark-padding: 3px 5px; // Padding for <mark> $mark-padding: 3px 5px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark> $mark-margin: 0; // Margin for <mark>
$mark-box-shadow: // Box shadow 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); 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-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1 $mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #d2405f; // Background color 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-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #2b866d; // Background color 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-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style 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-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 4px 8px; // Padding 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-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style 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-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding 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-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2 $mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts $alert-name: 'alert'; // Class name for alerts
$alert-back-color: #e8deff; // Background color for alerts $alert-back-color: #e8deff; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts $alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #a9a2ba; // Border style for alerts $alert-border-style: 1px solid #a9a2ba; // Border style for alerts
$alert-border-radius: 2px; // Border radius for alerts $alert-border-radius: 2px; // Border radius for alerts
$alert-padding: 12px 16px; // Padding for alerts $alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 4px 10px; // Margin for alerts $alert-margin: 4px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow 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); 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? $alert-include-animated: false; // Should animated alerts be included? (`true`/`false`) [1]
// (`true`/`false`) [1] $alert-animated-class: 'animated'; // Class name for animated alerts
$alert-animated-class: 'animated'; // Class name for animated alerts $alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-name: 'urgent'; // Class name for alert variant 1 $alert-variant1-back-color: #fe9992; // Background color 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-name: 'critical'; // Class name for alert variant 2 $alert-variant2-back-color: #ac354e; // Background color 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-variant2-fore-color: #fffddc; // Text color for alert variant 2 $alert-style1-name: 'urgent'; // Class name for alert style 1
$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-style: 1px solid #fe6d64; // Border style for alert style 1 $alert-style1-border-radius:$alert-border-radius; // Border radius 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-name: 'critical'; // Class name for alert style 2 $alert-style2-border-style: 1px solid #86293d; // Border style 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
$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? $tooltip-name: 'tooltip'; // Class name for the tooltip component
// (`true`/`false`) [2] $tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-name: 'tooltip'; // Class name for the tooltip component $tooltip-fore-color: #fffddc; // Text color for tooltips
$tooltip-back-color: $fore-color; // Background color for tooltips $tooltip-border-radius: 3px; // Border radius for tooltips
$tooltip-fore-color: #fffddc; // Text color for tooltips $tooltip-tail-size: 8px; // The size of the tooltip's tail
$tooltip-border-radius: 3px; // Border radius for tooltips $tooltip-padding: 10px; // Padding for tooltips
$tooltip-tail-size: 8px; // The size of the tooltip's tail $tooltip-box-shadow: // Box shadow for tooltip-box-shadow
$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); 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: // Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class // [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. // will be used to determine the class that will be used for animated alerts.

279
src/mini/_contextual.scss
View File

@@ -1,9 +1,18 @@
/* /*
Definitions for contextual background elements and alerts. 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. // 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. // Default styling for mark. Use mixins for alternate styles.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling
mark { mark {
@if $mark-back-color != $back-color { @if $mark-back-color != $back-color {
background: $mark-back-color; background: $mark-back-color;
@@ -36,161 +45,63 @@ mark {
display: inline-block; // Can be used to deal with some problems. 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) // Animation definition for animated alerts (included if wanted)
@if $alert-include-animated { @if $alert-include-animated {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
0% { -webkit-transform: scale(1); } 0% { -webkit-transform: scale(1); }
45% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.005);} 50% { -webkit-transform: scale(1.005);}
55% { -webkit-transform: scale(1); } 55% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); }
} }
@keyframes alert-anim { @keyframes alert-anim {
0% { transform: scale(1); } 0% { transform: scale(1); }
45% { transform: scale(1); } 45% { transform: scale(1); }
50% { transform: scale(1.005);} 50% { transform: scale(1.005);}
55% { transform: scale(1); } 55% { transform: scale(1); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
} }
// Default styling for alerts. Use mixins for alternate styles @if $include-alerts {
.#{$alert-name} { // Default styling for alerts. Use mixins for alternate styles
display: block; .#{$alert-name} {
@if $alert-back-color != $back-color { display: block;
background: $alert-back-color; @if $alert-back-color != $back-color {
} background: $alert-back-color;
@if $alert-fore-color != $fore-color { }
color: $alert-fore-color; @if $alert-fore-color != $fore-color {
} color: $alert-fore-color;
@if $alert-border-style != 0 { }
border: $alert-border-style; @if $alert-border-style != 0 {
} border: $alert-border-style;
@if $alert-border-radius != 0 { }
border-radius: $alert-border-radius; @if $alert-border-radius != 0 {
} border-radius: $alert-border-radius;
@if $alert-margin != 0 { }
margin: $alert-margin; @if $alert-margin != 0 {
} margin: $alert-margin;
@if $alert-padding != 0 { }
padding: $alert-padding; @if $alert-padding != 0 {
} padding: $alert-padding;
@if $alert-box-shadow != none { }
box-shadow: $alert-box-shadow; @if $alert-box-shadow != none {
} box-shadow: $alert-box-shadow;
@if $alert-include-animated { }
&.#{$alert-animated-name} { @if $alert-include-animated {
// Try to make the animated alert not blurry &.#{$alert-animated-name} {
-webkit-backface-visibility: hidden; // Try to make the animated alert not blurry
backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); backface-visibility: hidden;
transform: translateZ(0); -webkit-transform: translateZ(0);
// Apply the animation transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite; // Apply the animation
animation: alert-anim 6s linear infinite; -webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
} }
} }
} }
// Mixin for alternate alert (alert color variants). // Default styling for tooltips. Use mixins for alternate styles
// 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
@if $include-tooltip { @if $include-tooltip {
.#{$tooltip-name} { .#{$tooltip-name} {
position: relative; position: relative;
@@ -200,9 +111,9 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
opacity: 0; opacity: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
-webkit-transition: all 0.3s ease 0s; -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. // 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. 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; opacity: 1;
clip: auto; clip: auto;
-webkit-clip-path: inset(0%); -webkit-clip-path: inset(0%);
clip-path: inset(0%); clip-path: inset(0%);
} }
} }
&:before { // This is the little tooltip triangle &:before { // This is the little tooltip triangle
@@ -251,7 +162,7 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
} }
white-space: nowrap; white-space: nowrap;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
} }
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-tail-size; 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})){ @supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
.#{$tooltip-name}:before { .#{$tooltip-name}:before {
left: -webkit-calc(50% - #{$tooltip-tail-size}); left: -webkit-calc(50% - #{$tooltip-tail-size});
left: 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});
}
} }
} }
} }

174
src/mini/_contextual_mixins.scss Normal file
View 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});
}
}
}
}