mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-15 02:14:00 +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';

26
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 {
@@ -126,3 +126,27 @@ progress.#{$progress-alt-name} {
} }
} }
} }
// 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;
}
}