mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-15 02:14:00 +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.

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

@@ -417,8 +417,7 @@ $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
@@ -431,8 +430,7 @@ $alert-style1-border-radius: $alert-border-radius; // Border radius for al
$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? $include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
// (`true`/`false`) [2]
$tooltip-name: 'tooltip'; // Class name for the tooltip component $tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips $tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fafafa; // Text color for tooltips $tooltip-fore-color: #fafafa; // Text color for tooltips

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

@@ -412,8 +412,7 @@ $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
@@ -422,12 +421,11 @@ $alert-variant2-back-color: #ac354e; // Background color for alert va
$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? $include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
// (`true`/`false`) [2]
$tooltip-name: 'tooltip'; // Class name for the tooltip component $tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips $tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fffddc; // Text color for tooltips $tooltip-fore-color: #fffddc; // Text color for tooltips

185
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,58 +45,6 @@ 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 {
@@ -105,8 +62,9 @@ $alert-animated-name: 'animated' !default; // Class name for animated alerts
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
.#{$alert-name} {
display: block; display: block;
@if $alert-back-color != $back-color { @if $alert-back-color != $back-color {
background: $alert-back-color; background: $alert-back-color;
@@ -141,56 +99,9 @@ $alert-animated-name: 'animated' !default; // Class name for animated alerts
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). // Default styling for tooltips. Use mixins for alternate styles
// 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;
@@ -267,71 +178,3 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
} }
} }
} }
// 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});
}
}
}
}