beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated module legacy support

Browse source 
Removed multiple legacy support features, most browsers now support the latest features, so no problems hopefully.
This commit is contained in:
Angelos Chalaris 2017-04-27 23:04:36 +03:00
parent ce381932b2
commit 829b47cce4
14 changed files with 51 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
dist/mini-default.css vendored
View file

@ -118,7 +118,6 @@ hr {
line-height: 1.25em;
margin: 0.5rem;
height: 1px;
background: -webkit-linear-gradient(to right, #bdbdbd, #8c8c8c, #bdbdbd);
background: linear-gradient(to right, #bdbdbd, #8c8c8c, #bdbdbd);
}
@ -191,8 +190,7 @@ a {
color: #0277bd;
text-decoration: underline;
opacity: 1;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: opacity 0.3s;
}
a:visited {
@ -726,8 +724,7 @@ header .logo {
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
-webkit-transition: 0s opacity;
transition: 0s opacity;
transition: opacity 0.3s;
}
header button, header [type="button"],
@ -983,8 +980,7 @@ a[role="button"], label[role="button"], [role="button"] {
padding: 0.5rem 0.75rem;
margin: 0.5rem;
text-decoration: none;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: background 0.3s;
cursor: pointer;
}
@ -1560,8 +1556,7 @@ table.striped tr:nth-of-type(2n) > td {
display: inline-block;
height: 1.5rem;
cursor: pointer;
-webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s;
transition: background 0.3s;
background: #e0e0e0;
border: 1px solid #bdbdbd;
padding: 0.75rem;
@ -1593,8 +1588,7 @@ table.striped tr:nth-of-type(2n) > td {
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
transition: -webkit-transform 0.3s, transform 0.3s;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
@ -1752,8 +1746,7 @@ mark.inline-block {
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;
transition: all 0.3s;
z-index: 1010;
}
@ -1780,6 +1773,8 @@ mark.inline-block {
content: '';
background: transparent;
border: 0.5rem solid transparent;
left: 50%;
left: calc(50% - 0.5rem);
}
.tooltip:not(.bottom):before {
@ -1809,13 +1804,6 @@ mark.inline-block {
margin-top: 1rem;
}
@supports (left: calc(50% - 0.5rem)) or (left: -webkit-calc(50% - 0.5rem)) {
.tooltip:before {
left: -webkit-calc(50% - 0.5rem);
left: calc(50% - 0.5rem);
}
}
/*
Custom contextual background elements and alerts.
*/
@ -1865,10 +1853,11 @@ progress {
-moz-appearance: none;
appearance: none;
height: 1rem;
width: 100%;
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;
border: 0;
border-radius: 2px;
margin: 0.5rem auto;
background: #e0e0e0;
color: #0277bd;
}
@ -1897,14 +1886,6 @@ progress[value="1000"]::-moz-progress-bar {
border-radius: 2px;
}
@supports (width: calc(100% - 2*0.5rem)) or (width: -webkit-calc(100% - 2*0.5rem)) {
progress {
width: -webkit-calc(100% - 2*0.5rem);
width: calc(100% - 2*0.5rem);
margin: 0.5rem 0.5rem;
}
}
@-webkit-keyframes spinner-donut-anim {
0% {
-webkit-transform: rotate(0deg);
@ -1969,7 +1950,8 @@ progress.tertiary::-moz-progress-bar {
progress.nano {
height: 0.125rem;
width: 100%;
width: calc(100% - 0);
margin: 0 0;
margin: 0 auto;
border-radius: 0;
}
@ -2096,8 +2078,7 @@ ul.breadcrumbs li:last-child:after {
background: rgba(224, 224, 224, 0);
vertical-align: top;
cursor: pointer;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: background 0.3s;
}
.close:hover, .close:active, .close:focus {

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

File diff suppressed because one or more lines are too long

2
docs/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
docs/v2/DEVLOG.md
View file

@ -1036,3 +1036,9 @@
- Changed `.tooltip` `top` and `bottom` to `75%` from `100%`, in order to bring it closer to the text.
- After full internal testing, removed the `demo.html` file.
- Developed `mini-dark`, some tweaks might be required, but overall color palette seems good.
- Updated `.tooltip`, effectively breaking support for certain older browsers (some old version of Chrome mostly) and removing the `@supports` query, saving a little bit of space, as most browsers now do in fact support the `calc` directive. Also, added `left: 50%` for older browsers, allowing tooltips to work a little bit better on legacy systems.
- Did pretty much the same for `progress`'s `width` property, cleaning up some space. The `width` will now default to `90%` so hopefully no trouble for older browsers as well.
- Broke support of `hr` for older browsers, as the `-webkit` prefix is now representative of a tiny fraction of users.
- Changed `transition` properties to not use `-webkit` prefix anymore. Also changed them, removing `ease` and `0s` for `transition-timing-function` and `transition-delay` repsectively, allowing the browser defaults to apply (which are the same, so nothing lost there).
- Changed `transition` of `a` and `buttton` elements to `opacity` from `all` for higher specificity.
- Tested aforementioned changes, everything seems to work ok. Size of `default` flavor is now `6.71KB` compared to a `6.89KB` in previous release. Pretty sweet reduction.

13
src/mini/_contextual.scss
View file

@ -114,8 +114,7 @@ mark {
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;
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.
}
@ -140,6 +139,10 @@ mark {
content: '';
background: transparent;
border: $tooltip-tail-size solid transparent;
// Older browsers will almost center the tooltip's tail
left: 50%;
// Newer browsers will center the tail properly
left: calc(50% - #{$tooltip-tail-size});
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
@ -173,10 +176,4 @@ mark {
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});
}
}
}

9
src/mini/_contextual_mixins.scss
View file

@ -142,6 +142,7 @@
@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;
@ -163,12 +164,4 @@
}
}
}
@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});
}
}
}
}

6
src/mini/_core.scss
View file

@ -143,8 +143,7 @@ hr {
margin: $horizontal-rule-margin;
@if $horizontal-rule-fancy-style {
height: 1px;
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
@ -396,8 +395,7 @@ a{
}
@if $apply-link-hover-fade {
opacity: 1;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: opacity 0.3s;
}
&:visited {
color: $link-visited-fore-color;

5
src/mini/_input_control.scss
View file

@ -211,7 +211,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
}
::placeholder {
opacity: 1;
color: $input-placeholder-fore-color;
color: $input-placeholder-fore-color;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
@ -252,8 +252,7 @@ a[role="button"], label[role="button"], [role="button"] {
@if $apply-link-underline { // Override for links if underline is enabled.
text-decoration: none;
}
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: background 0.3s;
cursor: pointer;
&:hover, &:active, &:focus {
background: rgba($button-back-color, $button-hover-back-opacity);

3
src/mini/_navigation.scss
View file

@ -66,8 +66,7 @@ header {
padding: $header-logo-padding;
}
@if $apply-link-hover-fade {
-webkit-transition: 0s opacity;
transition: 0s opacity;
transition: opacity 0.3s ;
}
}
// Link styling.

22
src/mini/_progress.scss
View file

@ -16,15 +16,15 @@ progress {
-moz-appearance: none;
appearance: none;
height: $progress-height;
width: 100%;
// Older browsers will sort not display progress properly, but that's ok
width: 90%;
// Newer browsers will calculate the proper width
width: calc(100% - #{$progress-left-right-margin*2});
margin: $progress-top-bottom-margin $progress-left-right-margin;
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.
}
@if $progress-box-shadow != none {
box-shadow: $progress-box-shadow;
}
@ -60,16 +60,6 @@ progress {
}
}
}
// Feature query that checks if the left and right margins can be applied properly.
@if $progress-left-right-margin != 0 and $progress-left-right-margin != auto {
@supports (width: calc(100% - 2*#{$progress-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-left-right-margin})) {
progress {
width: -webkit-calc(100% - 2*#{$progress-left-right-margin});
width: calc(100% - 2*#{$progress-left-right-margin});
margin: $progress-top-bottom-margin $progress-left-right-margin;
}
}
}
@if $include-spinner-donut { // Turn off to disable spinner donuts.
// Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim {
@ -77,7 +67,7 @@ progress {
100% { -webkit-transform: rotate(360deg);}
}
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg);}
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
}

17
src/mini/_progress_mixins.scss
View file

@ -54,7 +54,12 @@
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
width: 100%;
@if $progress-alt-left-right-margin != $progress-left-right-margin {
width: calc(100% - #{$progress-alt-left-right-margin*2});
}
@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@ -84,16 +89,6 @@
box-shadow: $progress-alt-box-shadow;
}
}
// 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 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});
width: calc(100% - 2*#{$progress-alt-left-right-margin});
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
}
}
}
// Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables:

9
src/mini/_tab.scss
View file

@ -40,8 +40,7 @@ $fore-color: black !default; // [External variable - core] Foreground
display: inline-block;
height: $tab-label-height;
cursor: pointer;
-webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s;
transition: background 0.3s;
@if $tab-label-back-color != $back-color {
background: $tab-label-back-color;
}
@ -94,10 +93,8 @@ $fore-color: black !default; // [External variable - core] Foreground
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
transition: -webkit-transform 0.3s,
transform 0.3s;
// Style for tab labels except the first
@if $tab-border-style != 0 {
& + [type="radio"] + label {

4
src/mini/_table.scss
View file

@ -251,8 +251,8 @@ table {
// New syntax
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0;
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
tr {
// Old syntax

3
src/mini/_utility.scss
View file

@ -117,8 +117,7 @@ $include-center-block: false !default; // Should center block be included?
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: background 0.3s;
&:hover, &:active, &:focus {
background: rgba($close-icon-back-color,1);
}