mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 22:36:37 +02:00
Code Issues Releases Wiki Activity

Tooltip and nano progress bar updates

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-01 10:56:50 +02:00
parent 4c2cfeadf6
commit e2cdae54f4
5 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/mini-default.css vendored
View File

@@ -1442,12 +1442,12 @@ mark {
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
z-index: 1010; }
.tooltip:before, .tooltip:after {
left: 50%; }
.tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
bottom: 100%;
left: 50%; }
bottom: 100%; }
.tooltip.bottom:before, .tooltip.bottom:after {
top: 100%;
left: 50%; }
top: 100%; }
.tooltip:hover:before, .tooltip:hover:after, .tooltip:active:before, .tooltip:active:after, .tooltip:focus:before, .tooltip:focus:after {
opacity: 1;
clip: auto;
@@ -1456,8 +1456,7 @@ mark {
.tooltip:before {
content: '';
background: transparent;
border: 6px solid transparent;
left: calc(50% - 6px); }
border: 6px solid transparent; }
.tooltip:not(.bottom):before {
border-top-color: #212121; }
.tooltip.bottom:before {
@@ -1477,6 +1476,10 @@ mark {
.tooltip.bottom:after {
margin-top: 12px; }
@supports (left: calc(50% - 6px)) or (left: -webkit-calc(50% - 6px)) {
.tooltip:before {
left: -webkit-calc(50% - 6px);
left: calc(50% - 6px); } }
/*
Custom contextual background elements and alerts.
*/
@@ -1603,11 +1606,6 @@ progress.nano {
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0; }
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
progress.nano {
width: -webkit-calc(100% - 2*0);
width: calc(100% - 2*0);
margin: 0 0; } }
.spinner-donut.secondary {
border: 4px solid #ffebee;
border-left: 4px solid #c62828; }

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

File diff suppressed because one or more lines are too long

3
docs/v2/DEVLOG.md
View File

@@ -806,3 +806,6 @@
- Tweaked the `input` styling to make sure all `button`-type `input`s are properly styled.
- Added `:hover` and `:disabled` selectors to `input` elements, making sure as many states as possible are covered now.
- Cleaned `:focus:invalid:focus` selector, as I could not find any test cases for it. Size is now `6.75KB`.
- Added safeguard for the `progress` element's `.nano` variant's case with `margin` of `0`. Should now behave properly.
- Added `@supports` statement to help `tooltip` component place itself whenever possible. Changed a few of the selectors in `tooltip` to be as specific as needed and work as required.
- Updated `tooltip` mixin to reflect the above changes.

21
src/mini/_contextual.scss
View File

@@ -206,13 +206,14 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
// 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.
}
&:before, &:after {
left: 50%;
}
&: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, &:active, &:focus {
&:before, &:after {
@@ -226,7 +227,6 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
content: '';
background: transparent;
border: $tooltip-tail-size solid transparent;
left: calc(50% - #{$tooltip-tail-size});
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
@@ -260,6 +260,12 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
margin-top: 2 * $tooltip-tail-size;
}
}
@supports (left: calc(50% - #{$tooltip-tail-size})) or (left: -webkit-calc(50% - #{$tooltip-tail-size})){
.#{$tooltip-name}:before {
left: -webkit-calc(50% - #{$tooltip-tail-size});
left: calc(50% - #{$tooltip-tail-size});
}
}
}
// Mixin for alternate tooltip (tooltip color variants).
// Variables:
@@ -299,7 +305,6 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
@if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before {
border-width: $tooltip-alt-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;
@@ -321,4 +326,12 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
}
}
}
@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});
}
}
}
}

2
src/mini/_progress.scss
View File

@@ -150,7 +150,7 @@ progress {
}
}
// Feature query that checks if the left and right margins can be applied properly.
@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto {
@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto and $progress-alt-left-right-margin != 0 {
@supports (width: calc(100% - 2*#{$progress-alt-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin})) {
progress.#{$progress-alt-name} {
width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin});