mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Completed implementation of tooltip component, resolves #41
This commit is contained in:
Angelos Chalaris
parent
962626c0ec
commit
960efa4e19
20
dist/mini-default.css
vendored
20
dist/mini-default.css
vendored
@ -1409,7 +1409,7 @@ mark {
|
||||
.tooltip.bottom:before, .tooltip.bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
.tooltip:hover:before, .tooltip:hover:after {
|
||||
.tooltip:hover:before, .tooltip:hover:after, .tooltip:active:before, .tooltip:active:after, .tooltip:focus:before, .tooltip:focus:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
@ -1418,21 +1418,21 @@ mark {
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
left: calc(50% - 6px); }
|
||||
left: calc(50% - $tooltip-tail-size); }
|
||||
.tooltip:not(.bottom):before {
|
||||
border-top-color: #383838; }
|
||||
border-top-color: #212121; }
|
||||
.tooltip.bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
border-bottom-color: #212121; }
|
||||
.tooltip:after {
|
||||
content: attr(aria-label);
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
background: #212121;
|
||||
border-radius: 2px;
|
||||
color: #fafafa;
|
||||
padding: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
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); }
|
||||
transform: translateX(-50%); }
|
||||
.tooltip:not(.bottom):after {
|
||||
margin-bottom: 12px; }
|
||||
.tooltip.bottom:after {
|
||||
|
||||
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
@ -776,3 +776,6 @@
|
||||
## 20170118
|
||||
|
||||
- `tooltip` added to `contextual` module, minor changes to it, allows both top and `bottom` versions at the same time.
|
||||
- Updated `tooltip` component to use variables.
|
||||
- Added mixins for `tooltip`. Tested them.
|
||||
- Added proper `tooltip` in the `default` flavor. Size now is `6.81`. Implementation of issue #41 is now completed.
|
||||
|
||||
@ -194,7 +194,7 @@
|
||||
}*/
|
||||
</style>
|
||||
<div class="col-md-offset-1">
|
||||
<mark class="tooltip bottom" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
|
||||
<mark class="tooltip test" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -446,9 +446,23 @@ $alert-style1-border-radius: $alert-border-radius; // Border radius for al
|
||||
$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
|
||||
// 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.
|
||||
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
|
||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #eeeeee; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
|
||||
@ -214,40 +214,111 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
&:hover:before, &:hover:after {
|
||||
&:hover, &:active, &: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: 6px solid transparent;
|
||||
left: calc(50% - 6px);
|
||||
border: $tooltip-tail-size solid transparent;
|
||||
left: calc(50% - $tooltip-tail-size);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: #383838;
|
||||
border-top-color: $tooltip-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: #383838;
|
||||
border-bottom-color: $tooltip-back-color;
|
||||
}
|
||||
&:after { // This is the actual tooltip's text block
|
||||
content: attr(aria-label);
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
background: $tooltip-back-color;
|
||||
@if $tooltip-border-radius != 0 {
|
||||
border-radius: $tooltip-border-radius;
|
||||
}
|
||||
@if $tooltip-fore-color != $fore-color {
|
||||
color: $tooltip-fore-color;
|
||||
}
|
||||
@if $tooltip-padding != 0 {
|
||||
padding: $tooltip-padding;
|
||||
}
|
||||
@if $tooltip-box-shadow != none {
|
||||
box-shadow: $tooltip-box-shadow;
|
||||
}
|
||||
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;
|
||||
margin-bottom: 2 * $tooltip-tail-size;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 12px;
|
||||
margin-top: 2 * $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-tail-size;
|
||||
left: calc(50% - $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user