andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated mini.css

Browse Source 
Some files are not necessarily production-ready, but we won't use them all anyways.
This commit is contained in:
Angelos Chalaris
2018-01-03 17:17:41 +02:00
parent 4597a973f9
commit 1fe72ca878
6 changed files with 1288 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/mini/_contextual.scss
View File

@ -336,16 +336,19 @@ mark {
border-top: 0;
}
& > label:first-of-type {
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
}
& > label:last-of-type {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
& > label:last-of-type:not(:first-of-type) {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
& > :checked:last-of-type + label {
& > label:last-of-type:first-of-type {
border-radius: var(#{$universal-border-radius-var});
}
& > :checked:last-of-type:not(:first-of-type) + label {
border-radius: 0;
+ div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
}
}
& > :checked:last-of-type + label + div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
}
}

113
docs/mini/_progress.scss Normal file
View File

@ -0,0 +1,113 @@
/*
Definitions for progress elements and spinners.
*/
$progress-back-color: #ddd !default; // Background color of <progress>.
$progress-fore-color: #555 !default; // Foreground color of <progress>.
$progress-height: 0.75rem !default; // Height of <progress>.
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
// CSS variable name definitions [exercise caution if modifying these]
$progress-back-color-var: '--progress-back-color' !default;
$progress-fore-color-var: '--progress-fore-color' !default;
$spinner-donut-back-color-var: '--spinner-back-color' !default;
$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_progress_mixins.scss` file to find this module's mixins.
@import '_progress_mixins';
/* Progess module CSS variable definitions */
:root {
#{$progress-back-color-var}: $progress-back-color;
#{$progress-fore-color-var}: $progress-fore-color;
}
// Default styling for progress. Use mixins for alternate styles
progress {
display: block;
vertical-align: baseline; // Correct vertical alignment in some browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: $progress-height;
width: calc(100% - 2 * var(#{$universal-margin-var}));
margin: var(#{$universal-margin-var});
border: 0; // Removes default border
border-radius: calc(2 * var(#{$universal-border-radius-var}));
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: var(#{$progress-back-color-var});
color: var(#{$progress-fore-color-var});
// Foreground color on webkit browsers
&::-webkit-progress-value {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
// Background color on webkit browser
&::-webkit-progress-bar {
background: var(#{$progress-back-color});
}
// Foreground color on Firefox
&::-moz-progress-bar {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&::-moz-progress-bar {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
}
&.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
width: $progress-inline-width;
}
}
// Style for donut spinner
@if $_include-spinner-donut {
:root {
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
}
// Donut spinner animation
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.#{$spinner-donut-name} {
display: inline-block;
margin: var(#{$universal-margin-var});
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
}

32
docs/mini/_progress_mixins.scss Normal file
View File

@ -0,0 +1,32 @@
// Progress module's mixin definitions are here. For the module itself
// check `progress.scss`.
// Progress color variant mixin:
// $progress-alt-name: The name of the class used for the <progress> variant.
// $progress-alt-fore-color: Foregound color for <progress> variant.
// $progress-alt-back-color: Background color for <progress> variant.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
$progress-alt-back-color : $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-fore-color != $progress-fore-color{
#{$progress-fore-color-var}: $progress-alt-fore-color;
}
@if $progress-alt-back-color != $progress-back-color {
#{$progress-back-color-var}: $progress-alt-back-color;
}
}
}
// Spinner donut color variant mixin:
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
}
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
}
}
}

321
docs/mini/_table.scss Normal file
View File

@ -0,0 +1,321 @@
/*
Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax.
/*
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
$table-scrollable-height: 400px !default; // Height for table scrollable view.
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
$table-striped-name: 'striped' !default; // Class name for striped table.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
*/
$table-mobile-breakpoint: 768px !default;
$table-max-height: 400px !default;
$table-caption-font-size: 1.5rem !default;
$table-mobile-card-label: 'data-label' !default;
$table-mobile-label-font-weight: 600 !default;
$table-border-color: #aaa !default;
$table-border-separator-color: #666 !default;
$_include-horizontal-table: true !default;
$table-horizontal-name: 'horizontal' !default;
// CSS variable name definitions [exercise caution if modifying these]
$table-border-color-var: '--table-border-color' !default;
$table-border-separator-color-var: '--table-border-separator-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Table module CSS variable definitions. */
:root {
#{$table-border-color-var}: $table-border-color;
#{$table-border-separator-color-var}: $table-border-separator-color;
}
// Desktop view.
table {
border-collapse: separate;
border-spacing: 0;
margin: 0;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
padding: var(#{$universal-padding-var});
padding-top: 0;
@if not($_include-horizontal-table) {
overflow: auto;
max-height: $table-max-height;
}
caption {
font-size: $table-caption-font-size;
margin: calc(2 * var(#{$universal-margin-var})) 0;
max-width: 100%;
flex: 0 0 100%;
}
thead, tbody {
display: flex;
flex-flow: row wrap;
border: $__1px solid var(#{$table-border-color-var});
@if not($_include-horizontal-table) {
max-width: 100%;
flex: 0 0 100%;
}
}
thead {
z-index: 999; // Fixes the visibility of the element.
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
border-bottom: $__1px solid var(#{$table-border-separator-color-var}); // var This
@if not($_include-horizontal-table) {
position: sticky;
top: 0;
}
}
tbody {
border-top: 0;
margin-top: calc(0 - var(#{$universal-margin-var})); // might be useless
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
}
tr {
display: flex;
padding: 0; // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex-flow: row wrap;
flex: 0 0 100%;
}
}
th, td {
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
}
th {
text-align: left;
background: #e6e6e6; // use vars
color: #111; // vars
}
td {
background: #fafafa; // use variables, this is a test (body)
border-top: $__1px solid var(#{$table-border-color-var});
}
@if not($_include-horizontal-table) {
tbody tr:first-child td {
border-top: 0;
}
}
}
// Styling for horizntal tables
@if $_include-horizontal-table {
table:not(.#{$table-horizontal-name}) {
overflow: auto;
max-height: $table-max-height;
thead, tbody {
max-width: 100%;
flex: 0 0 100%;
}
tr {
flex-flow: row wrap;
flex: 0 0 100%;
}
th, td {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
thead {
position: sticky;
top: 0;
}
tbody tr:first-child td {
border-top: 0;
}
}
table.#{$table-horizontal-name} {
border: 0;
thead, tbody {
border: 0;
flex-flow: row nowrap;
}
tbody {
overflow: auto;
justify-content: space-between;
flex: 1 0 0;
margin-left: calc( 4 * var(#{$universal-margin-var}));
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
}
tr {
flex-direction: column;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: 0;
border-bottom: $__1px solid var(#{$table-border-color-var});
&:not(:first-child){
border-top: 0;
}
}
th {
text-align: right;
border-left: $__1px solid var(#{$table-border-color-var});
border-right: $__1px solid var(#{$table-border-separator-color-var});
}
thead {
tr:first-child {
padding-left: 0;
}
}
th:first-child, td:first-child {
border-top: $__1px solid var(#{$table-border-color-var});
}
tbody tr:last-child td {
border-right: 1px solid #aaa;
&:first-child{
border-top-right-radius: 0.25rem;
}
&:last-child{
border-bottom-right-radius: 0.25rem;
}
}
thead tr:first-child th {
&:first-child{
border-top-left-radius: 0.25rem;
}
&:last-child{
border-bottom-left-radius: 0.25rem;
}
}
}
}
// Mobile
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
@if $_include-horizontal-table {
table, table.#{$table-horizontal-name} {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
th, td {
width: auto;
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
th:first-child, td:first-child {
border-top: 0;
}
tbody tr:last-child td {
border-right: 0;
}
}
}
@else {
table {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
}
}
}

1089
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -12,7 +12,8 @@
"rollup-plugin-babel-minify": "^3.1.2",
"semistandard": "^11.0.0",
"tape": "^4.8.0",
"tap-spec": "^4.1.1"
"tap-spec": "^4.1.1",
"mini.css": "^2.3.7"
},
"name": "30-seconds-of-code",
"description": "A collection of useful JavaScript snippets.",