mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-14 18:03:59 +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 { progress[value="100"]::-moz-progress-bar {
border-radius: 1px; } 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 { .card {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -977,44 +996,6 @@ progress {
.tabs > [type="radio"] + label + div:last-of-type { .tabs > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-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, button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary { [type="reset"].primary, .button.primary {
background: #1565c0; 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 `button`. Updated `file` `input`s to be accessible.
- Code cleanup in `checkbox`. Optimizations. - Code cleanup in `checkbox`. Optimizations.
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly. - 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> <html>
<head> <head>
<!-- Live demo styled as of 20161109 --> <!-- 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"> <link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title> <title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8"> <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: // Notes:
// [1] - The tabs module is somewhat dependent on the grid system module. // [1] - The tabs module is somewhat dependent on the grid system module.
// Variables for spinners // 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-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner $spinner-donut-border-thickness:4px; // Border thickness for donut spinner
$spinner-donut-back-color: #e3f2fd; // Background color 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 'utility';
@import 'card'; @import 'card';
@import 'tab'; @import 'tab';
@import 'spinner';

144
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. // Progress elements use the progress element as their base.
// Default styling for progress. Use mixins for alternate styles. // Default styling for progress. Use mixins for alternate styles.
progress { progress {
@@ -10,56 +10,56 @@ progress {
width: 100%; width: 100%;
height: $progress-height; height: $progress-height;
border: $progress-border-style; border: $progress-border-style;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; border-radius: $progress-border-radius;
} }
@if $progress-margin != 0 { @if $progress-margin != 0 {
margin: $progress-margin; margin: $progress-margin;
} }
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox). background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+). color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers). &::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color; background: $progress-fore-color;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius; border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius; border-bottom-left-radius: $progress-border-radius;
} }
} }
&::-webkit-progress-bar { // Background of the element (webkit browsers). &::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color; background: $progress-back-color;
} }
&::-moz-progress-bar { // Foreground of the element (Firefox). &::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color; background: $progress-fore-color;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius; border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius; border-bottom-left-radius: $progress-border-radius;
} }
} }
&[value="100"] { &[value="100"] {
&::-webkit-progress-value { &::-webkit-progress-value {
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; border-radius: $progress-border-radius;
} }
} }
&::-moz-progress-bar { &::-moz-progress-bar {
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; border-radius: $progress-border-radius;
} }
} }
} }
} }
// Mixin for inline progress. // Mixin for inline progress.
// Variables: // Variables:
// - $progress-inline-name : The name of the class used for the inline progress. // - $progress-inline-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress. // - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) { @mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} { progress.#{$progress-inline-name} {
display: inline-block; display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it. vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% { @if $progress-inline-width != 100% {
width: $progress-inline-width; width: $progress-inline-width;
} }
} }
} }
// Mixin for alternate progress (progress color variants). // Mixin for alternate progress (progress color variants).
// Variables: // Variables:
@@ -67,23 +67,23 @@ progress.#{$progress-inline-name} {
// - $progress-alt-fore-color : The progress bar color of the alternate progress. // - $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. // - $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) { @mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} { progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color { @if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox). background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers). &::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color; background: $progress-alt-back-color;
} }
} }
@if $progress-alt-fore-color != $progress-fore-color { @if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+). color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers). &::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color; background: $progress-alt-fore-color;
} }
&::-moz-progress-bar { // Foreground of the element (Firefox). &::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color; background: $progress-alt-fore-color;
} }
} }
} }
} }
// Mixin for alternate progress styles. // Mixin for alternate progress styles.
// Variables: // Variables:
@@ -95,34 +95,58 @@ progress.#{$progress-alt-name} {
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height, @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-margin: $progress-margin, $progress-alt-border-style: $progress-border-style,
$progress-alt-border-radius: $progress-border-radius) { $progress-alt-border-radius: $progress-border-radius) {
progress.#{$progress-alt-name} { progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height { @if $progress-alt-height != $progress-height {
height: $progress-alt-height; height: $progress-alt-height;
} }
@if $progress-alt-margin != $progress-margin { @if $progress-alt-margin != $progress-margin {
margin: $progress-alt-margin; margin: $progress-alt-margin;
} }
@if $progress-alt-border-style != $progress-border-style { @if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style; border: $progress-alt-border-style;
} }
@if progress-alt-border-radius != $progress-border-radius { @if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius; border-radius: $progress-alt-border-radius;
&::-webkit-progress-value { &::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius; border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius; border-bottom-left-radius: $progress-alt-border-radius;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius; border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius; border-bottom-left-radius: $progress-alt-border-radius;
} }
&[value="100"] { &[value="100"] {
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: $progress-alt-border-radius; border-radius: $progress-alt-border-radius;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: $progress-alt-border-radius; 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;
} }
} }