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

Progress and spinner merge, cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-10 10:40:18 +02:00
parent 4e38200448
commit 6b5b28946d
7 changed files with 139 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
dist/mini-default.css vendored
View File

@@ -803,6 +803,25 @@ progress {
progress[value="100"]::-moz-progress-bar {
border-radius: 1px; }
@-webkit-keyframes spinner-donut-anim {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes spinner-donut-anim {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.spinner-donut {
display: inline-block;
border: 4px solid #e3f2fd;
border-left: 4px solid #1565c0;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spinner-donut-anim 1.2s linear infinite; }
.card {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -977,44 +996,6 @@ progress {
.tabs > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } }
@-webkit-keyframes spinner-dot-anim {
to {
-webkit-transform: translateY(-6em); } }
@keyframes spinner-dot-anim {
to {
transform: translateY(-6em); } }
@-webkit-keyframes spinner-donut-anim {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes spinner-donut-anim {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.spinner-dot {
display: inline-block;
overflow: hidden;
font-size: 1em;
height: 1.5em;
vertical-align: bottom; }
.spinner-dot:after {
display: inline-table;
white-space: pre;
content: "\A.\A..\A...";
-webkit-animation: spinner-dot-anim 1.2s steps(4) infinite;
animation: spinner-dot-anim 1.2s steps(4) infinite; }
.spinner-donut {
display: inline-block;
border: 4px solid #e3f2fd;
border-left: 4px solid #1565c0;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spinner-donut-anim 1.2s linear infinite; }
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;

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

File diff suppressed because one or more lines are too long

2
docs/v2/DEVLOG.md
View File

@@ -387,3 +387,5 @@
- Code cleanup in `button`. Updated `file` `input`s to be accessible.
- Code cleanup in `checkbox`. Optimizations.
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
- Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component.

2
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161109 -->
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/aa78a8f3c592252861c254ebb08cc81482e85135/dist/mini-default.min.css"> -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/aa78a8f3c592252861c254ebb08cc81482e85135/dist/mini-default.min.css">
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">

2
src/flavors/mini-default.scss
View File

@@ -370,8 +370,6 @@ $tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Notes:
// [1] - The tabs module is somewhat dependent on the grid system module.
// Variables for spinners
$spinner-dot-name: 'spinner-dot'; // Class name for dot spinner
$spinner-dot-font-size: 1em; // Font size for dot spinner
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner

1
src/mini/_core.scss
View File

@@ -357,4 +357,3 @@ a{
@import 'utility';
@import 'card';
@import 'tab';
@import 'spinner';

204
src/mini/_progress.scss
View File

@@ -1,4 +1,4 @@
// Definitions for progress elements.
// 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 {
@@ -6,60 +6,60 @@ progress {
vertical-align: baseline; // Correct vertical alignment in certain browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
width: 100%;
height: $progress-height;
border: $progress-border-style;
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
@if $progress-margin != 0 {
margin: $progress-margin;
}
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&[value="100"] {
&::-webkit-progress-value {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
&::-moz-progress-bar {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
}
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
@if $progress-margin != 0 {
margin: $progress-margin;
}
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&[value="100"] {
&::-webkit-progress-value {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
&::-moz-progress-bar {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
}
}
// Mixin for inline progress.
// Variables:
// - $progress-inline-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
}
// Mixin for alternate progress (progress color variants).
// Variables:
@@ -67,23 +67,23 @@ progress.#{$progress-inline-name} {
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
}
// Mixin for alternate progress styles.
// Variables:
@@ -95,34 +95,58 @@ progress.#{$progress-alt-name} {
@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.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
@if $progress-alt-margin != $progress-margin {
margin: $progress-alt-margin;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="100"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-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;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="100"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-border-radius;
}
}
}
}
}
// Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }
@keyframes spinner-donut-anim { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
// Style for donut spinner
.#{$spinner-donut-name} {
display: inline-block;
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
// Mixin for alternate donut spinner styles (spinner donut color variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}