Tooltip and nano progress bar updates
This commit is contained in:
Angelos Chalaris
parent
4c2cfeadf6
commit
e2cdae54f4
5 changed files with 41 additions and 27 deletions
22
dist/mini-default.css
vendored
22
dist/mini-default.css
vendored
|
|
@ -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.
|
||||
*/
|
||||
|
|
@ -1509,7 +1512,7 @@ mark.inline-block {
|
|||
border: 1px solid #d50000; }
|
||||
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
progress {
|
||||
display: block;
|
||||
|
|
@ -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
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
// Progress elements use the progress element as their base.
|
||||
// Default styling for progress. Use mixins for alternate styles.
|
||||
$progress-max-value: 100 !default; // Arithmetic max value of <progress>
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in certain browsers.
|
||||
vertical-align: baseline; // Correct vertical alignment in certain browsers.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
height: $progress-height;
|
||||
width: 100%;
|
||||
border: $progress-border-style;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
@if $progress-top-bottom-margin != 0 {
|
||||
margin: $progress-top-bottom-margin auto;
|
||||
// Check somewhere below for the feature query that allows left and right margins to display properly on newer browsers.
|
||||
|
|
@ -111,9 +111,9 @@ progress {
|
|||
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
|
||||
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
|
||||
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
|
||||
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
|
||||
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
|
||||
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
|
||||
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
|
||||
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
|
||||
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
|
||||
$progress-alt-box-shadow : $progress-box-shadow) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-height != $progress-height {
|
||||
|
|
@ -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});
|
||||
|
|
@ -191,7 +191,7 @@ progress {
|
|||
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
|
||||
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
|
||||
// Defaults to the value of $spinner-donut-alt-border-thickness.
|
||||
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
|
||||
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
|
||||
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
|
||||
|
|
@ -202,4 +202,4 @@ progress {
|
|||
height: $spinner-donut-alt-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue