mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-22 13:21:56 +02:00
Initial tooltip component commit - #41
This commit is contained in:
Angelos Chalaris
parent
b8f8ec9481
commit
962626c0ec
51
dist/mini-default.css
vendored
51
dist/mini-default.css
vendored
@ -1340,8 +1340,8 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
.tabs > [type="radio"] + label + div + [type="radio"] + label {
|
||||
border: 1px solid #9e9e9e;
|
||||
border-top: 0; } }
|
||||
/*
|
||||
Definitions for contextual background elements and alerts.
|
||||
/*
|
||||
Definitions for contextual background elements and alerts.
|
||||
*/
|
||||
mark {
|
||||
background: #0277bd;
|
||||
@ -1391,6 +1391,53 @@ mark {
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite; }
|
||||
|
||||
.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%);
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
z-index: 1010; }
|
||||
.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
.tooltip.bottom:before, .tooltip.bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
.tooltip:hover:before, .tooltip:hover:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%); }
|
||||
.tooltip:before {
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
left: calc(50% - 6px); }
|
||||
.tooltip:not(.bottom):before {
|
||||
border-top-color: #383838; }
|
||||
.tooltip.bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
.tooltip:after {
|
||||
content: attr(aria-label);
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
white-space: nowrap;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
|
||||
.tooltip:not(.bottom):after {
|
||||
margin-bottom: 12px; }
|
||||
.tooltip.bottom:after {
|
||||
margin-top: 12px; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -772,3 +772,7 @@
|
||||
- Updated `breadcrumbs` component in the `utility` module to properly utilize the `ceil()` Sass function, so that no white line errors are shown, effectively fixing the only bug I managed to find with the component's presentation.
|
||||
- Updated `utility` module's `visually-hidden` to properly do its job.
|
||||
- First demo of the `tooltip` component. Works properly. Needs some tweaks to display a top and bottom variant, based on user choice.
|
||||
|
||||
## 20170118
|
||||
|
||||
- `tooltip` added to `contextual` module, minor changes to it, allows both top and `bottom` versions at the same time.
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<style>
|
||||
.tooltip {
|
||||
/*.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -191,10 +191,10 @@
|
||||
white-space: nowrap;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
<div class="col-md-offset-1">
|
||||
<span class="tooltip" aria-label="This is some sample tooltip text">Show a tooltip while hovering</span><br /><br /><br />
|
||||
<mark class="tooltip bottom" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
Definitions for contextual background elements and alerts.
|
||||
/*
|
||||
Definitions for contextual background elements and alerts.
|
||||
*/
|
||||
// Contextual background elements use the mark element as their base.
|
||||
// Default styling for mark. Use mixins for alternate styles.
|
||||
@ -61,7 +61,7 @@ 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-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 {
|
||||
@ -90,19 +90,19 @@ $alert-include-animated: true !default; // Should animated ale
|
||||
$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); }
|
||||
@-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); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
// Default styling for alerts. Use mixins for alternate styles
|
||||
@ -166,7 +166,7 @@ $alert-animated-name: 'animated' !default; // Class name for animated alerts
|
||||
// - $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-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 {
|
||||
@ -185,4 +185,69 @@ $alert-animated-name: 'animated' !default; // Class name for animated alerts
|
||||
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 {
|
||||
.#{$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%);
|
||||
-webkit-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.
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
&:hover:before, &:hover: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: 6px solid transparent;
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: #383838;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
&:after { // This is the actual tooltip's text block
|
||||
content: attr(aria-label);
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
white-space: nowrap;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user