mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 13:27:25 +02:00
Code Issues Releases Wiki Activity

Tooltips and toasts

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-08 13:41:06 +02:00
parent 3a59b8f3f4
commit 011d97b897
4 changed files with 188 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
dist/mini-default.css vendored
View File

@@ -1278,6 +1278,10 @@ footer.sticky {
:root { :root {
--mark-back-color: #0277bd; --mark-back-color: #0277bd;
--mark-fore-color: #fafafa; --mark-fore-color: #fafafa;
--toast-back-color: #424242;
--toast-fore-color: #fafafa;
--tooltip-back-color: #212121;
--tooltip-fore-color: #fafafa;
} }
mark { mark {
@@ -1296,6 +1300,82 @@ mark.inline-block {
padding: calc(var(--universal-padding) / 2) var(--universal-padding); padding: calc(var(--universal-padding) / 2) var(--universal-padding);
} }
.toast {
position: fixed;
bottom: calc(var(--universal-margin) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(--toast-fore-color);
background: var(--toast-back-color);
border-radius: calc(var(--universal-border-radius) * 16);
padding: var(--universal-padding) calc(var(--universal-padding) * 3);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip:before, .tooltip:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
z-index: 1010;
left: 50%;
}
.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
bottom: 75%;
}
.tooltip.bottom:before, .tooltip.bottom:after {
top: 75%;
}
.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
.tooltip:before {
content: '';
background: transparent;
border: var(--universal-margin) solid transparent;
left: calc(50% - var(--universal-margin));
}
.tooltip:not(.bottom):before {
border-top-color: #212121;
}
.tooltip.bottom:before {
border-bottom-color: #212121;
}
.tooltip:after {
content: attr(aria-label);
color: var(--tooltip-fore-color);
background: var(--tooltip-back-color);
border-radius: var(--universal-border-radius);
padding: var(--universal-padding);
white-space: nowrap;
transform: translateX(-50%);
}
.tooltip:not(.bottom):after {
margin-bottom: calc(2 * var(--universal-margin));
}
.tooltip.bottom:after {
margin-top: calc(2 * var(--universal-margin));
}
/* /*
Custom elements for contextual background elements, toasts and tooltips. Custom elements for contextual background elements, toasts and tooltips.
*/ */

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

File diff suppressed because one or more lines are too long

7
docs/v3/DEVLOG.md
View File

@@ -210,3 +210,10 @@
- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version. - Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants. - Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
- Fed **hugging cat**. - Fed **hugging cat**.
## 20171208
- Added `tooltip` and `toast`. Their mixins were rarely ever used as far as I can tell, so they will not make into **Gluon**, at least for now. If the need arises, they can be easily added back in at a later date.
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
- I am removing `-webkit-transform`, it seems unnecessary now.

103
src/mini/_contextual.scss
View File

@@ -3,12 +3,25 @@
*/ */
$mark-back-color: #0277bd !default; // Background color for <mark> $mark-back-color: #0277bd !default; // Background color for <mark>
$mark-fore-color: #fafafa !default; // Text color for <mark> $mark-fore-color: #fafafa !default; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark> $mark-font-size: 0.95em !default; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark> $mark-line-height: 1em !default; // Line height for <mark>
$mark-inline-block-name: 'inline-block'; // Class name for inline-block <mark> $mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
$toast-name: 'toast' !default; // Class name for toast component
$toast-back-color: #424242 !default; // Background color for toast component
$toast-fore-color: #fafafa !default; // Text color for toast component
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
// CSS variable name definitions [exercise caution if modifying these] // CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default; $mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default; $mark-fore-color-var: '--mark-fore-color' !default;
$toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
// == Uncomment below code if this module is used on its own == // == Uncomment below code if this module is used on its own ==
// //
// $base-line-height: 1.5 !default; // Line height for most elements // $base-line-height: 1.5 !default; // Line height for most elements
@@ -36,6 +49,10 @@ $mark-fore-color-var: '--mark-fore-color' !default;
:root { :root {
#{$mark-back-color-var}: $mark-back-color; #{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color; #{$mark-fore-color-var}: $mark-fore-color;
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
} }
// Default styling for mark. Use mixins for alternate styles. // Default styling for mark. Use mixins for alternate styles.
mark { mark {
@@ -57,3 +74,83 @@ mark {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var}); padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
} }
} }
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$toast-fore-color-var});
background: var(#{$toast-back-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
}
// Styling for tooltips.
@if $_include-tooltip {
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// 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.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: var(#{$universal-margin-var}) solid transparent;
// Newer browsers will center the tail properly
left: calc(50% - var(#{$universal-margin-var}));
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
color: var(#{$tooltip-fore-color-var});
background: var(#{$tooltip-back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
white-space: nowrap;
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: calc(2 * var(#{$universal-margin-var}));
}
}
}