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

Progress module tweaks

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-25 11:56:27 +02:00
parent 3285776d13
commit 7c12706dbe
5 changed files with 53 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
dist/mini-default.css vendored
View file

@ -1148,11 +1148,11 @@ progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
width: 100%;
border: 0;
border-radius: 1px;
margin: 2px 10px;
margin: 2px auto;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b; }
@ -1171,6 +1171,11 @@ progress {
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px; }
@supports (width: calc(100% - 2*10px)) or (width: -webkit-calc(100% - 2*10px)) {
progress {
width: -webkit-calc(100% - 2*10px);
width: calc(100% - 2*10px);
margin: 2px 10px; } }
@-webkit-keyframes spinner-donut-anim {
0% {
-webkit-transform: rotate(0deg); }
@ -1373,7 +1378,8 @@ progress.tertiary {
progress.nano {
height: 2px;
margin: 0 auto 1px;
width: 100%;
margin: 0 auto;
border-radius: 0; }
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;

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

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -536,3 +536,7 @@
- Made some minor tweaks to the `progress` module and component.
- Opened a question on SO about the `progress` element's `margin-right`: http://stackoverflow.com/questions/40795218/progress-element-does-not-respect-right-margin
- Wrote the basic information for the `progress` module on the doc page.
## 20161125
- Added high-tech feature queries for `progress` elements and variants, `margin` and `width` should now work properly. Tested in Firefox and Chrome.

10
src/flavors/mini-default.scss
View file

@ -387,7 +387,8 @@ $progress-height: 14px; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-margin: 2px 10px; // Margin for <progress>
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
$progress-left-right-margin: 10px; // Left and right margin for <progress>
$progress-box-shadow: // Box shadow for <progress>
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
$progress-inline-name: 'inline'; // Class name for inline <progress>
@ -398,7 +399,10 @@ $progress-variant2-name: 'tertiary'; // Class name for <progress> vari
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
0;
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
auto;
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
@ -486,7 +490,7 @@ $center-block-name: 'center-block'; // Class name for center block
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius);
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin, $progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
$spinner-donut-variant2-fore-color);
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,

41
src/mini/_progress.scss
View file

@ -7,15 +7,16 @@ progress {
vertical-align: baseline; // Correct vertical alignment in certain browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
appearance: none;
height: $progress-height;
width: 100%;
border: $progress-border-style;
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
@if $progress-margin != 0 {
margin: $progress-margin;
@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;
@ -52,6 +53,16 @@ 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;
}
}
}
// Mixin for inline progress.
// Variables:
// - $progress-inline-name : The name of the class used for the inline progress.
@ -93,18 +104,20 @@ progress {
// Variables:
// - $progress-alt-name : The name of the class used for the alternate progress style.
// - $progress-alt-height : The height of the alternate progress style.
// - $progress-alt-margin : (Optional) The margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-top-bottom-margin : (Optional) The top and bottom margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-left-right-margin : (Optional) The left and right margin of the alternate progress style. Defaults to the margin of the 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.
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
$progress-alt-margin: $progress-margin, $progress-alt-border-style: $progress-border-style,
$progress-alt-border-radius: $progress-border-radius) {
$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.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
@if $progress-alt-margin != $progress-margin {
margin: $progress-alt-margin;
width: 100%;
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
@ -129,6 +142,16 @@ 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 {
@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;
}
}
}
}
// Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }