mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 11:00:21 +02:00
Code Issues Releases Wiki Activity

Updated docs for release

Browse Source
This commit is contained in:
Angelos Chalaris
2018-05-28 12:12:46 +03:00
parent ad609410c5
commit 5dc5b0529f
89 changed files with 91 additions and 8174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v3/DEVLOG.md
View File

@@ -375,3 +375,4 @@
- Updated the flavor generation to show the progress.
- Fixed documentation links.
- Updated generator, it now adds and updates the proper folders along with everything else.
- Rebuilt docs.

2
docs/v3/FileSaver.min.js vendored
View File

@@ -1,2 +0,0 @@
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}

BIN
docs/v3/browser-logos/android_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.0 KiB

BIN
docs/v3/browser-logos/chrome_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
docs/v3/browser-logos/edge_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/v3/browser-logos/firefox_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/v3/browser-logos/opera_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
docs/v3/browser-logos/safari_128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.6 KiB

1069
docs/v3/docs.html
View File

File diff suppressed because it is too large Load Diff

1776
docs/v3/flavors.html
View File

File diff suppressed because it is too large Load Diff

2171
docs/v3/flavors/mini-dark.css
View File

File diff suppressed because it is too large Load Diff

1
docs/v3/flavors/mini-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

276
docs/v3/flavors/mini-dark.scss
View File

@@ -1,276 +0,0 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file.
/*
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0
*/
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #fdfdfd; // Text & foreground color
$secondary-fore-color: #f0f0f0; // Secondary text & foreground color
$back-color: #111; // Background color
$secondary-back-color: #222; // Secondary background color
$blockquote-color: #f57c00; // <blockquote> sidebar and quotation color
$pre-color: #1565c0; // <pre> sidebar color
$border-color: #ddd; // Border color
$secondary-border-color: #aaa; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #0277bd; // Color for <a>:link
$a-visited-color: #01579b; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #fdfdfd; // Text color for the cards.
$card-back-color: #111; // Background color for the cards.
$card-border-color: #aaa; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #222; // Background color for forms.
$form-fore-color: #fdfdfd; // Text color for forms.
$form-border-color: #aaa; // Border color for forms.
$input-back-color: #111; // Background color for input elements.
$input-fore-color: #fdfdfd; // Text color for input elements.
$input-border-color: #aaa; // Border color for input elements.
$input-focus-color: #0288d1; // Border color for focused input elements.
$input-invalid-color: #d32f2f; // Border color for invalid input elements.
$button-back-color: #212121; // Background color for buttons.
$button-hover-back-color: #444; // Background color for buttons (hover).
$button-fore-color: #e2e2e2; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2;// Background color for primary button color variant.
$button-primary-hover-back-color: #1565c0;// Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #c62828;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #277529;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #f8f8f8;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #f0f0f0;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #212121;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #111; // Background color for the header element.
$header-hover-back-color: #222; // Background color for the header element (hover).
$header-fore-color: #f0f0f0; // Text color for the header element.
$header-border-color: #aaa; // Border color for the header element.
$nav-back-color: #111; // Background color for the nav element.
$nav-hover-back-color: #222; // Background color for the nav element (hover).
$nav-fore-color: #f0f0f0; // Text color for the nav element.
$nav-border-color: #aaa; // Border color for the nav element.
$nav-link-color: #0277bd; // Color for link in the nav element.
$footer-fore-color: #f0f0f0; // Text color for the footer element.
$footer-back-color: #111; // Background color for footer nav element.
$footer-border-color: #aaa; // Border color for the footer element.
$footer-link-color: #0277bd; // Color for link in the footer element.
$drawer-back-color: #111; // Background color for the drawer component.
$drawer-border-color: #aaa; // Border color for the drawer component.
$drawer-hover-back-color: #222; // Background color for the drawer component's close (hover).
$drawer-close-color: #f0f0f0; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #ddd; // Border color for <table> elements.
$table-border-separator-color: #666; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #212121; // Background color for <th> elements.
$table-th-fore-color: #fdfdfd; // Text color for <th> elements.
$table-td-back-color: #111; // Background color for <td> elements.
$table-td-fore-color: #fdfdfd; // Text color for <td> elements.
$table-td-alt-back-color: #444; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #5c819f; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #424242; // Background color for toast component
$toast-fore-color: #fafafa; // Text color for toast component
$tooltip-back-color: #fafafa; // Background color for tooltip component
$tooltip-fore-color: #212121; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #f0f0f0; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #222; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #111; // Background color for labels in the collapse component
$collapse-label-fore-color: #fafafa; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #222; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #444; // Background color for selected labels in the collapse component
$collapse-border-color: #aaa; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd; // Border color for collapse component's selected labels
$collapse-content-back-color: #212121; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #aaa; // Background color of <progress>.
$progress-fore-color: #555; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd; // Background color for spinner donuts
$spinner-donut-fore-color: #555; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';

2169
docs/v3/flavors/mini-default.css
View File

File diff suppressed because it is too large Load Diff

1
docs/v3/flavors/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

138
docs/v3/flavors/mini-default.scss
View File

@@ -1,138 +0,0 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file.
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.3
*/
@import '../mini/core';
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donutcolor variant.
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
@import '../mini/utility';

2168
docs/v3/flavors/mini-nord.css
View File

File diff suppressed because it is too large Load Diff

1
docs/v3/flavors/mini-nord.min.css vendored
View File

File diff suppressed because one or more lines are too long

277
docs/v3/flavors/mini-nord.scss
View File

@@ -1,277 +0,0 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file.
/*
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v3.0.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #2e3440; // Text & foreground color
$secondary-fore-color: #3b4252; // Secondary text & foreground color
$back-color: #eceff4; // Background color
$secondary-back-color: #e5e9f0; // Secondary background color
$blockquote-color: #d08770; // <blockquote> sidebar and quotation color
$pre-color: #b48ead; // <pre> sidebar color
$border-color: #d8dee9; // Border color
$secondary-border-color: #e5e9f0; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #88c0d0; // Color for <a>:link
$a-visited-color: #5e81ac; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #2e3440; // Text color for the cards.
$card-back-color: #eceff4; // Background color for the cards.
$card-border-color: #e5e9f0; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ebcb8b; // Background color for card warnging color variant.
$card-warning-fore-color: #2e3440; // Text color for card warnging color variant.
$card-warning-border-color: #d08770; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #bf616a; // Background color for card error color variant.
$card-error-fore-color: #2e3440; // Text color for card error color variant.
$card-error-border-color: #434c5e; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #d8dee9; // Background color for card dark section variant.
$card-section-dark-fore-color: #2e3440; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #e5e9f0; // Background color for forms.
$form-fore-color: #2e3440; // Text color for forms.
$form-border-color: #e5e9f0; // Border color for forms.
$input-back-color: #eceff4; // Background color for input elements.
$input-fore-color: #2e3440; // Text color for input elements.
$input-border-color: #e5e9f0; // Border color for input elements.
$input-focus-color: #88c0d0; // Border color for focused input elements.
$input-invalid-color: #bf616a; // Border color for invalid input elements.
$button-back-color: #e5e9f0; // Background color for buttons.
$button-hover-back-color: #d8dee9; // Background color for buttons (hover).
$button-fore-color: #2e3440; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #5e81ac;// Background color for primary button color variant.
$button-primary-hover-back-color: #5e81ac;// Background color for primary button color variant (hover).
$button-primary-fore-color: #eceff4;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #bf616a;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #bf616a;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #eceff4;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #a3be8c;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #a3be8c;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #434c5e;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #3b4252;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #2e3440;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #eceff4;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #eceff4; // Background color for the header element.
$header-hover-back-color: #e5e9f0; // Background color for the header element (hover).
$header-fore-color: #3b4252; // Text color for the header element.
$header-border-color: #e5e9f0; // Border color for the header element.
$nav-back-color: #eceff4; // Background color for the nav element.
$nav-hover-back-color: #e5e9f0; // Background color for the nav element (hover).
$nav-fore-color: #3b4252; // Text color for the nav element.
$nav-border-color: #e5e9f0; // Border color for the nav element.
$nav-link-color: #88c0d0; // Color for link in the nav element.
$footer-fore-color: #3b4252; // Text color for the footer element.
$footer-back-color: #eceff4; // Background color for footer nav element.
$footer-border-color: #e5e9f0; // Border color for the footer element.
$footer-link-color: #88c0d0; // Color for link in the footer element.
$drawer-back-color: #eceff4; // Background color for the drawer component.
$drawer-border-color: #e5e9f0; // Border color for the drawer component.
$drawer-hover-back-color: #e5e9f0; // Background color for the drawer component's close (hover).
$drawer-close-color: #3b4252; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #d8dee9; // Border color for <table> elements.
$table-border-separator-color: #434c5e; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #e5e9f0; // Background color for <th> elements.
$table-th-fore-color: #2e3440; // Text color for <th> elements.
$table-td-back-color: #eceff4; // Background color for <td> elements.
$table-td-fore-color: #2e3440; // Text color for <td> elements.
$table-td-alt-back-color: #e5e9f0; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #88c0d0; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #5e81ac; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #2e3440; // Background color for toast component
$toast-fore-color: #eceff4; // Text color for toast component
$tooltip-back-color: #2e3440; // Background color for tooltip component
$tooltip-fore-color: #eceff4; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #3b4252; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #e5e9f0; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e5e9f0; // Background color for labels in the collapse component
$collapse-label-fore-color: #2e3440; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #e5e9f0; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #e5e9f0; // Background color for selected labels in the collapse component
$collapse-border-color: #e5e9f0; // Border color for collapse component
$collapse-selected-label-border-color: #88c0d0; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #bf616a; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #a3be8c; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #e5e9f0; // Background color of <progress>.
$progress-fore-color: #434c5e; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #d8dee9; // Background color for spinner donuts
$spinner-donut-fore-color: #434c5e; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #5e81ac; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #bf616a; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #a3be8c; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #5e81ac; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #bf616a; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #a3be8c; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';

BIN
docs/v3/index-splash.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 390 KiB

74
docs/v3/index.html
View File

@@ -1,63 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="./style.min.css">
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<div class="index-splash">
<div class="index-splash-image no-filter"></div>
<div class="index-splash-image"></div>
<h1 class="splash">mini<small>.css</small></h1>
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
<p id="version-info">v3.0.0</p>
<a class="button splash" href="docs">Get started</a>
</div>
<header class="row sticky">
<span class="col-md-1 col-lg-2"></span>
<span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>&nbsp;Docs</span></a>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="flavors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<span class="col-md-1 col-lg-2"></span>
</header>
<div class="row padded">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<img src="./responsive.svg" class="feature-image">
<h2 class="feature-header">Fast and Responsive</h2><br>
<p>Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then <strong>mini.css</strong> is the right tool for you! Its tiny size (under 10KB gzipped), along with its <strong>responsive grid</strong> and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), <strong>mini.css</strong> packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.</p>
</div>
</div>
<div class="row padded alt-back">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<img src="./tailored.svg" class="feature-image">
<h2 class="feature-header">Tailored to Your Needs</h2><br>
<p>Creating a CSS framework that caters to everyone's needs is no easy task, but <strong>mini.css</strong> manages to rise to the occasion by providing extensive and coherent documentation in combination with templates, examples and semantic HTML5 markup. Modern UX patterns and accessibility guidelines are well-documented and can be used out of the box, using one of the unique <strong>flavors</strong> that the framework provides. If you still want more, you can create your own custom flavor or tweak an existing one just by opening its CSS file and changing a few custom properties. It's that simple! </p>
</div>
</div>
<div class="row padded primary-section">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<h2 class="feature-header">Get started now!</h2><br>
<p>Head over to the <a href="docs">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
<p style="text-align:center;"><a href="docs" class="button">Get started</a></p>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
</div>
</div>
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
</body>
</html>
<!DOCTYPE html><html><head>
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
</head></html>

12
docs/v3/index_rel.html
View File

@@ -1,12 +0,0 @@
<!DOCTYPE html><html><head>
<!-- TODO: Rename this to index.html prior to final release of Gluon, move all other doc files to the main docs folder -->
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
</head></html>

15
docs/v3/jszip.min.js vendored
View File

File diff suppressed because one or more lines are too long

354
docs/v3/mini/_contextual.scss
View File

@@ -1,354 +0,0 @@
/*
Definitions for contextual background elements, toasts and tooltips.
*/
$mark-back-color: #0277bd !default; // Background color for <mark>
$mark-fore-color: #fafafa !default; // Text color for <mark>
$mark-font-size: 0.95em !default; // Font size for <mark>
$mark-line-height: 1em !default; // Line height for <mark>
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
$toast-name: 'toast' !default; // Class name for toast component
$toast-back-color: #424242 !default; // Background color for toast component
$toast-fore-color: #fafafa !default; // Text color for toast component
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
$modal-name: 'modal' !default; // Class name for modal dialog component
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
$collapse-name: 'collapse' !default; // Class name for collapse component
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
$collapse-border-color: #ddd !default; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
// CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default;
$toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
$modal-overlay-color-var: '--modal-overlay-color' !default;
$modal-close-color-var: '--modal-close-color' !default;
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
$collapse-border-color-var: '--collapse-border-color' !default;
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-line-height: 1.5 !default; // Line height for most elements
// $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;
// }
// }
//
// ============================================================
// Check the `_contextual_mixins.scss` file to find this module's mixins.
@import '_contextual_mixins';
/* Contextual module CSS variable definitions */
:root {
#{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color;
}
// Default styling for mark. Use mixins for alternate styles.
mark {
background: var(#{$mark-back-color-var});
color: var(#{$mark-fore-color-var});
font-size: $mark-font-size;
line-height: $mark-line-height;
border-radius: var(#{$universal-border-radius-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&.#{$mark-inline-block-name} {
display: inline-block;
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
font-size: 1em;
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
line-height: $base-line-height;
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
}
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$toast-fore-color-var});
background: var(#{$toast-back-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
}
// Styling for tooltips.
@if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: var(#{$universal-margin-var}) solid transparent;
// Newer browsers will center the tail properly
left: calc(50% - var(#{$universal-margin-var}));
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
color: var(#{$tooltip-fore-color-var});
background: var(#{$tooltip-back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
white-space: nowrap;
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: calc(2 * var(#{$universal-margin-var}));
}
}
}
// Styling for modal dialogs.
@if $_include-modal {
:root {
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
}
[type="checkbox"].#{$modal-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
& + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(#{$modal-overlay-color-var});
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: 0;
right: 0;
width: $modal-close-size;
height: $modal-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0;
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
content: '\00D7';
color: var(#{$modal-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $modal-close-size;
line-height: 1;
text-align: center;
}
&:hover, &:focus {
background: var(#{$modal-close-hover-back-color-var});
}
}
}
}
&:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
}
// Styling for collapse.
@if $_include-collapse {
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
.#{$collapse-name} {
width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1;
display: flex;
flex-direction: column;
margin: var(#{$universal-margin-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > [type="radio"], & > [type="checkbox"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
& > label {
flex-grow: 1;
display: inline-block;
height: $collapse-label-height;
cursor: pointer;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ div {
flex-basis: auto;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: max-height 0.3s;
max-height: 1px; // for transition
}
}
> :checked + label {
background: var(#{$collapse-selected-label-back-color-var});
// border: 0.0625rem solid #bdbdbd; // var it
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
& + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 0;
background: var(#{$collapse-content-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: var(#{$universal-padding-var});
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
max-height: $collapse-content-max-height;
}
}
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
border-top: 0;
}
& > label:first-of-type {
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
}
& > label:last-of-type:not(:first-of-type) {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
& > 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;
}
& > :checked:last-of-type + label + div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
}
}

27
docs/v3/mini/_contextual_mixins.scss
View File

@@ -1,27 +0,0 @@
// Contextual module's mixin definitions are here. For the module itself
// check `_contextual.scss`.
// Mark color variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-back-color: Background color for <mark> variant.
// $mark-alt-fore-color: Text color for <mark> variant.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
$mark-alt-fore-color : $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
#{$mark-back-color-var}: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color{
#{$mark-fore-color-var}: $mark-alt-fore-color;
}
}
}
// Mark size variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-padding: The padding of the <mark> variant.
// $mark-alt-border-radius: The border radius of the <mark> variant.
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
mark.#{$mark-alt-name} {
padding: $mark-alt-padding;
border-radius: $mark-alt-border-radius;
}
}

304
docs/v3/mini/_core.scss
View File

@@ -1,304 +0,0 @@
/*
Browsers resets and base typography.
*/
@function rempx ($size) { @return 1px/$size;} // Keep this, the generator breaks otherwise
// TODO: Add fluid type and test thoroughly
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$__1px: rempx($base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$base-line-height: 1.5 !default; // Line height for most elements
$base-font-size: 1rem !default; // Font sizing for all elements
$_body-margin: 0 !default; // [Hidden] Margin for body
$fore-color: #111 !default; // Text & foreground color
$secondary-fore-color: #444 !default; // Secondary text & foreground color
$back-color: #f8f8f8 !default; // Background color
$secondary-back-color: #f0f0f0 !default; // Secondary background color
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
$pre-color: #1565c0 !default; // <pre> sidebar color
$border-color: #aaa !default; // Border color
$secondary-border-color: #ddd !default; // Secondary border color
$heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$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
$small-font-size: 0.75em !default; // Font sizing for <small> elements
$heading-font-weight: 500 !default; // Font weight for headings
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
$code-font-size: 0.85em !default; // Font size for <code>, <kbd>
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
$sup-top: -0.5em !default; // <sup> top
$sub-bottom: -0.25em !default; // <sub> bottom
$a-link-color: #0277bd !default; // Color for <a>:link
$a-visited-color: #01579b !default; // Color for <a>:visited
// CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color' !default;
$secondary-fore-color-var: '--secondary-fore-color' !default;
$back-color-var: '--back-color' !default;
$secondary-back-color-var: '--secondary-back-color' !default;
$blockquote-color-var: '--blockquote-color' !default;
$pre-color-var: '--pre-color' !default;
$border-color-var: '--border-color' !default;
$secondary-border-color-var: '--secondary-border-color' !default;
$heading-ratio-var: '--heading-ratio' !default;
$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;
$a-link-color-var: '--a-link-color' !default;
$a-visited-color-var: '--a-visited-color' !default;
/* Core module CSS variable definitions */
:root {
#{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color;
#{$secondary-back-color-var}: $secondary-back-color;
#{$blockquote-color-var}: $blockquote-color;
#{$pre-color-var}: $pre-color;
#{$border-color-var}: $border-color;
#{$secondary-border-color-var}: $secondary-border-color;
#{$heading-ratio-var}: $heading-ratio;
#{$universal-margin-var}: $universal-margin;
#{$universal-padding-var}: $universal-padding;
#{$universal-border-radius-var}: $universal-border-radius;
#{$a-link-color-var} : $a-link-color;
#{$a-visited-color-var} : $a-visited-color;
@if $universal-box-shadow != none {
#{$universal-box-shadow-var}: $universal-box-shadow;
}
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em; // Fix for elements inside headings not displaying properly.
}
@if $_apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $_body-margin;
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
details {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
}
// Show overflow in Edge.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
}
@if $subheading-font-size != $small-font-size {
font-size: $subheading-font-size;
}
}
}
h1 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(#{$heading-ratio-var}));
}
p {
margin: var(#{$universal-margin-var});
}
ol, ul {
margin: var(#{$universal-margin-var});
padding-left: calc(2 * var(#{$universal-margin-var}));
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: var(#{$universal-margin-var});
height: $__1px;
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
}
blockquote { // Doesn't have a back color by default, can be added manually.
display: block;
position: relative;
font-style: italic;
color: var(#{$secondary-fore-color-var});
margin: var(#{$universal-margin-var});
padding: calc(3 * var(#{$universal-padding-var}));
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 6*$__1px solid var(#{$blockquote-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&:before {
position: absolute;
top: calc(0rem - var(#{$universal-padding-var}));
left: 0;
font-family: sans-serif;
font-size: $blockquote-quotation-size;
font-weight: 700;
content: "\201c";
color: var(#{$blockquote-color-var});
}
&[cite]:after{
font-style: normal;
font-size: $blockquote-cite-size;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
}
code, kbd, pre, samp {
font-family: #{$code-font-family}; // Display fix should be applied manually!
font-size: $code-font-size;
}
code { // No border color by default and fore color is the default for text, can be altered manually.
background: var(#{$secondary-back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
kbd { // No border color by default, can be altered manually.
background: var(#{$fore-color-var});
color: var(#{$back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
pre { // Fore color is the default, can be altered manually.
overflow: auto; // Responsiveness
background: var(#{$secondary-back-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 4*$__1px solid var(#{$pre-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Prevent elements from affecting the line height in all browsers.
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub, figcaption {
font-size: $small-element-font-size;
}
sup {
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
figure {
margin: var(#{$universal-margin-var});
}
figcaption {
color: var(#{$secondary-fore-color-var});
}
a {
text-decoration: none;
&:link{
color: var(#{$a-link-color-var});
}
&:visited {
color: var(#{$a-visited-color-var});
}
&:hover, &:focus {
text-decoration: underline;
}
}

131
docs/v3/mini/_icon.scss
View File

@@ -1,131 +0,0 @@
/*
Definitions for icons - powered by Feather (https://feathericons.com/).
*/
$icon-prefix: 'icon' !default; // Class name prefix for icons.
$icon-alert-name: 'alert' !default; // Class name suffix for alert icon.
$icon-bookmark-name: 'bookmark' !default; // Class name suffix for bookmark icon.
$icon-calendar-name: 'calendar' !default; // Class name suffix for calendar icon.
$icon-credit-name: 'credit' !default; // Class name suffix for credit icon.
$icon-edit-name: 'edit' !default; // Class name suffix for edit icon.
$icon-link-name: 'link' !default; // Class name suffix for link icon.
$icon-help-name: 'help' !default; // Class name suffix for help icon.
$icon-home-name: 'home' !default; // Class name suffix for home icon.
$icon-info-name: 'info' !default; // Class name suffix for info icon.
$icon-lock-name: 'lock' !default; // Class name suffix for lock icon.
$icon-mail-name: 'mail' !default; // Class name suffix for mail icon.
$icon-location-name: 'location' !default; // Class name suffix for location icon.
$icon-phone-name: 'phone' !default; // Class name suffix for phone icon.
$icon-rss-name: 'rss' !default; // Class name suffix for rss icon.
$icon-search-name: 'search' !default; // Class name suffix for search icon.
$icon-settings-name: 'settings' !default; // Class name suffix for settings icon.
$icon-share-name: 'share' !default; // Class name suffix for share icon.
$icon-cart-name: 'cart' !default; // Class name suffix for cart icon.
$icon-upload-name: 'upload' !default; // Class name suffix for upload icon.
$icon-user-name: 'user' !default; // Class name suffix for user icon.
$icon-secondary-color-name: 'secondary' !default;// Class name for secondary color icons.
$icon-inverse-color-name: 'inverse' !default; // Class name for inverse color icons.
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $fore-color: #111 !default; // Text & foreground color
// $universal-margin-var: '--universal-margin' !default;
// $fore-color-var: '--fore-color' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$fore-color-var}: $fore-color;
// }
//
// ============================================================
// Base styling for icons.
span[class^='#{$icon-prefix}-'] {
display: inline-block;
height: 1em;
width: 1em;
vertical-align: -0.125em; // fixes alignment issues
background-size: contain;
margin: 0 calc(var(#{$universal-margin-var}) / 4);
&.#{$icon-secondary-color-name}{
-webkit-filter: invert(25%);
filter: invert(25%);
}
&.#{$icon-inverse-color-name}{
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
span{
$stroke-color: str-replace(#{$fore-color}, '#', '%23');
&.#{$icon-prefix}-#{$icon-alert-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-bookmark-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-calendar-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-credit-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-edit-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-link-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-help-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-home-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-info-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-lock-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-mail-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-location-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-phone-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-rss-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-search-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-settings-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-share-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-cart-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-upload-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-user-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
}

317
docs/v3/mini/_input_control.scss
View File

@@ -1,317 +0,0 @@
/*
Definitions for forms and input elements.
*/
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$button-group-name: 'button-group' !default; // Class name for button groups.
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
$form-back-color: #f0f0f0 !default; // Background color for forms.
$form-fore-color: #111 !default; // Text color for forms.
$form-border-color: #ddd !default; // Border color for forms.
$input-back-color: #f8f8f8 !default; // Background color for input elements.
$input-fore-color: #111 !default; // Text color for input elements.
$input-border-color: #ddd !default; // Border color for input elements.
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
$button-back-color: #e2e2e2 !default; // Background color for buttons.
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
$button-fore-color: #212121 !default; // Text color for buttons.
$button-border-color: transparent !default; // Border color for buttons.
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
// CSS variable name definitions [exercise caution if modifying these]
$form-back-color-var: '--form-back-color' !default;
$form-fore-color-var: '--form-fore-color' !default;
$form-border-color-var: '--form-border-color' !default;
$input-back-color-var: '--input-back-color' !default;
$input-fore-color-var: '--input-fore-color' !default;
$input-border-color-var: '--input-border-color' !default;
$input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default;
$button-back-color-var: '--button-back-color' !default;
$button-hover-back-color-var: '--button-hover-back-color' !default;
$button-fore-color-var: '--button-fore-color' !default;
$button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
$button-group-border-color-var: '--button-group-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-font-size: 1rem !default; // Font sizing for all elements
// $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;
// }
// }
//
// ============================================================
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
/* Input_control module CSS variable definitions */
:root {
#{$form-back-color-var}: $form-back-color;
#{$form-fore-color-var}: $form-fore-color;
#{$form-border-color-var}: $form-border-color;
#{$input-back-color-var}: $input-back-color;
#{$input-fore-color-var}: $input-fore-color;
#{$input-border-color-var}: $input-border-color;
#{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color;
#{$button-back-color-var}: $button-back-color;
#{$button-hover-back-color-var}: $button-hover-back-color;
#{$button-fore-color-var}: $button-fore-color;
#{$button-border-color-var}: $button-border-color;
#{$button-hover-border-color-var}: $button-hover-border-color;
#{$button-group-border-color-var}: $button-group-border-color;
}
// Base form styling
form { // Text color is the default, this can be changed manually.
background: var(#{$form-back-color-var});
color: var(#{$form-fore-color-var});
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Fieldset styling
fieldset {
// Apply always to overwrite defaults for all of the below.
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 4);
padding: var(#{$universal-padding-var});
}
// Legend styling.
legend {
// Edge fixes.
box-sizing: border-box;
display: table;
max-width: 100%;
white-space: normal;
// Actual styling.
font-weight: $bold-font-weight;
padding: calc(var(#{$universal-padding-var}) / 2);
}
// Label syling. - Basically just padding, but there might be more in the future.
label {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
// Input group styling.
.#{$input-group-name} {
display: inline-block;
// Fluid input groups
@if $_include-fluid-input-group {
&.#{$input-group-fluid-name} {
display: flex;
align-items: center;
justify-content: center;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
// On mobile
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
align-items: stretch;
flex-direction: column;
}
}
// Vertical input groups
&.#{$input-group-vertical-name} {
display: flex;
align-items: stretch;
flex-direction: column;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
}
}
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling. - Avoid using box-shadow with these.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$input-back-color-var});
color: var(#{$input-fore-color-var});
border: $__1px solid var(#{$input-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
&:hover, &:focus {
border-color: var(#{$input-focus-color-var});
box-shadow: none;
}
&:invalid, &:focus:invalid{
border-color: var(#{$input-invalid-color-var});
box-shadow: none;
}
&[readonly]{
background: var(#{$secondary-back-color-var});
}
}
// Fix for select and option elements overflowing their parent container.
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Styling for checkboxes and radio buttons.
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
vertical-align: text-bottom;
padding: 0; // Remove padding added from previous styles.
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
&:checked:before {
position: absolute;
}
}
[type="checkbox"] {
&:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
top: calc(0rem - var(#{$universal-padding-var}));
left: calc(var(#{$universal-padding-var}) / 4);
}
}
[type="radio"] {
border-radius: 100%;
&:checked:before {
border-radius: 100%;
content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: var(#{$input-fore-color-var});
width: 0.5rem;
height: 0.5rem;
}
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$input-fore-color-var});
}
::-ms-placeholder {
color: var(#{$input-fore-color-var});
opacity: 0.54;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements.
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
// Other fixes.
button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}
// Default styling
button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: var(#{$button-back-color-var});
color: var(#{$button-fore-color-var});
border: $__1px solid var(#{$button-border-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
text-decoration: none;
cursor: pointer;
transition: background 0.3s;
&:hover, &:focus {
background: var(#{$button-hover-back-color-var});
border-color: var(#{$button-hover-border-color-var});
}
}
// Disabled styling for input and button elements.
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
}
// Button group styling.
.#{$button-group-name} {
display: flex;
border: $__1px solid var(#{$button-group-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
& > .#{$button-class-name}, & > [role="button"] {
margin: 0;
max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;
border-radius: 0;
box-shadow: none;
}
& > :not(:first-child) {
border-left: $__1px solid var(#{$button-group-border-color-var});
}
// Responsiveness for button groups
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
flex-direction: column;
& > :not(:first-child) {
border: 0; // Reapply to remove the left border from elements.
border-top: $__1px solid var(#{$button-group-border-color-var});
}
}
}

46
docs/v3/mini/_input_control_mixins.scss
View File

@@ -1,46 +0,0 @@
// Input_control module's mixin definitions are here. For the module itself
// check `_input_control.scss`.
// Button color variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-back-color: Background color for button variant.
// $button-alt-hover-back-color: Background color for button variant (hover).
// $button-alt-fore-color: Text color for button variant.
// $button-alt-border-color: Border color for button variant.
// $button-alt-hover-border-color: Border color for button variant (hover).
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
@if $button-alt-back-color != $button-back-color {
#{$button-back-color-var}: $button-alt-back-color;
}
@if $button-alt-fore-color != $button-fore-color{
#{$button-fore-color-var}: $button-alt-fore-color;
}
@if $button-alt-border-color != $button-border-color{
#{$button-border-color-var}: $button-alt-border-color;
}
&:hover, &:focus {
@if $button-alt-hover-back-color != $button-hover-back-color{
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
}
@if $button-alt-hover-border-color != $button-hover-border-color{
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
}
}
}
}
}
// Button size variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-padding: The padding of the button variant.
// $button-alt-margin The margin of the button variant.
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
padding: $button-alt-padding;
margin: $button-alt-margin;
}
}
}

199
docs/v3/mini/_layout.scss
View File

@@ -1,199 +0,0 @@
/*
Definitions for the grid system, cards and containers.
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$card-name: 'card' !default; // Class name for the cards.
$card-section-name: 'section' !default; // Class name for the cards' sections.
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
$card-normal-width: 320px !default; // Width for normal cards.
$card-section-media-height: 200px !default; // Height for cards' media sections.
$card-fore-color: #111 !default; // Text color for the cards.
$card-back-color: #f8f8f8 !default; // Background color for the cards.
$card-border-color: #ddd !default; // Border color for the cards.
// CSS variable name definitions [exercise caution if modifying these]
$card-fore-color-var: '--card-fore-color' !default;
$card-back-color-var: '--card-back-color' !default;
$card-border-color-var: '--card-border-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;
// }
// }
//
// ============================================================
// Check the `_layout_mixins.scss` file to find this module's mixins.
@import 'layout_mixins';
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
}
// Grid row definition.
.#{$grid-row-name} {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
}
// Inline mixin, used to generate class definitions for each grid step.
@mixin generate-grid-size ($size-prefix){
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
@else {
// Grid column generic definitions.
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix} {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
// Offest definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
@if ($i - 1) == 0 {
margin-left: 0;
}
@else {
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
}
}
}
// Reordering definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
order: initial;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
order: -999;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
order: 999;
}
}
// Definitions for smaller screens.
@include generate-grid-size($grid-small-prefix);
// Definitions for medium screens.
@media screen and (min-width: #{$grid-medium-breakpoint}){
@include generate-grid-size($grid-medium-prefix);
}
// Definitions for large screens.
@media screen and (min-width: #{$grid-large-breakpoint}){
@include generate-grid-size($grid-large-prefix);
}
/* Card component CSS variable definitions */
:root {
#{$card-back-color-var}: $card-back-color;
#{$card-fore-color-var}: $card-fore-color;
#{$card-border-color-var}: $card-border-color;
}
// Card styling
.#{$card-name} {
// New syntax
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
border: $__1px solid var(#{$card-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
overflow: hidden; // Hide overflow from section borders
// Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) {
max-width: $card-normal-width;
}
// Card sections
& > .#{$card-section-name} {
// Reapply background and foreground colors, so that mixins can be applied properly.
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $__1px solid var(#{$card-border-color-var});
padding: var(#{$universal-padding-var});
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}

62
docs/v3/mini/_layout_mixins.scss
View File

@@ -1,62 +0,0 @@
// Layout (card) module's mixin definitions are here. For the module itself
// check `_layout.scss`.
// Mixin for alternate card sizes:
// $card-alt-size-name: The name of the class used for the alternate size card.
// $card-alt-size-width: The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
}
// Mixin for alternate cards (card color variants):
// $card-alt-name: The name of the class used for the alternate card.
// $card-alt-back-color: The background color of the alternate card.
// $card-alt-fore-color: The text color of the alternate card.
// $card-alt-border-color: The border style of the alternate card.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-alt-fore-color;
}
@if $card-alt-border-color != $card-border-color {
#{$card-border-color-var}: $card-alt-border-color;
}
}
}
// Mixin for alternate card sections (card section color variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-back-color: The background color of the alternate card section.
// $card-section-alt-fore-color: The text color of the alternate card section.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
$card-section-alt-fore-color : $card-fore-color) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-section-alt-fore-color;
}
}
}
// Mixin for alternate card sections (card section padding variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-padding: The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}

314
docs/v3/mini/_navigation.scss
View File

@@ -1,314 +0,0 @@
/*
Definitions for navigation elements.
*/
// Different elements are styled based on the same set of rules.
$header-height: 3.1875rem !default; // Height of the header element.
$header-back-color: #f8f8f8 !default; // Background color for the header element.
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
$header-fore-color: #444 !default; // Text color for the header element.
$header-border-color: #ddd !default; // Border color for the header element.
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
$nav-fore-color: #444 !default; // Text color for the nav element.
$nav-border-color: #ddd !default; // Border color for the nav element.
$nav-link-color: #0277bd !default; // Color for link in the nav element.
$footer-fore-color: #444 !default; // Text color for the footer element.
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
$footer-border-color: #ddd !default; // Border color for the footer element.
$footer-link-color: #0277bd !default; // Color for link in the footer element.
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
$drawer-border-color: #ddd !default; // Border color for the drawer component.
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
$header-logo-name: 'logo' !default; // Class name for the header logo element.
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
// CSS variable name definitions [exercise caution if modifying these]
$header-fore-color-var: '--header-fore-color' !default;
$header-back-color-var: '--header-back-color' !default;
$header-hover-back-color-var: '--header-hover-back-color' !default;
$header-border-color-var: '--header-border-color' !default;
$nav-fore-color-var: '--nav-fore-color' !default;
$nav-back-color-var: '--nav-back-color' !default;
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
$nav-border-color-var: '--nav-border-color' !default;
$nav-link-color-var: '--nav-link-color' !default;
$footer-fore-color-var: '--footer-fore-color' !default;
$footer-back-color-var: '--footer-back-color' !default;
$footer-border-color-var: '--footer-border-color' !default;
$footer-link-color-var: '--footer-link-color' !default;
$drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
$drawer-close-color-var: '--drawer-close-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;
// }
// }
//
// ============================================================
/* Navigation module CSS variable definitions */
:root {
#{$header-back-color-var}: $header-back-color;
#{$header-hover-back-color-var}: $header-hover-back-color;
#{$header-fore-color-var}: $header-fore-color;
#{$header-border-color-var}: $header-border-color;
#{$nav-back-color-var}: $nav-back-color;
#{$nav-hover-back-color-var}: $nav-hover-back-color;
#{$nav-fore-color-var}: $nav-fore-color;
#{$nav-border-color-var}: $nav-border-color;
#{$nav-link-color-var}: $nav-link-color;
#{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color;
#{$footer-border-color-var}: $footer-border-color;
#{$footer-link-color-var}: $footer-link-color;
#{$drawer-back-color-var}: $drawer-back-color;
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
#{$drawer-border-color-var}: $drawer-border-color;
#{$drawer-close-color-var}: $drawer-close-color;
}
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
header {
height: $header-height;
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$header-fore-color-var});
@if $_header-only-bottom-border {
border-bottom: $__1px solid var(#{$header-border-color-var});
}
@else {
border: $__1px solid var(#{$header-border-color-var});
}
padding: calc(var(#{$universal-padding-var}) / 4) 0;
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
// Header logo styling.
.#{$header-logo-name} {
color: var(#{$header-fore-color-var});
font-size: $header-logo-font-size;
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
text-decoration: none;
}
// Link styling.
button, [type="button"], .#{$button-class-name}, [role="button"] {
box-sizing: border-box;
position: relative;
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
text-align: center;
color: var(#{$header-fore-color-var});
border: 0;
border-radius: 0;
margin: 0;
@if $_header-links-uppercase {
text-transform: uppercase;
}
&:hover, &:focus {
background: var(#{$header-hover-back-color-var});
}
}
}
// Navigation sidebar styling.
nav {
background: var(#{$nav-back-color-var});
color: var(#{$nav-fore-color-var});
border: $__1px solid var(#{$nav-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
* {
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
a, a:visited {
display: block;
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
border-radius: var(#{$universal-border-radius-var});
transition: background 0.3s;
&:hover, &:focus {
text-decoration: none;
background: var(#{$nav-hover-back-color-var});
}
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
position: relative;
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
&:before {
position: absolute;
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
top: -#{$__1px};
content: '';
height: 100%;
border: $__1px solid var(#{$nav-border-color-var});
border-left: 0;
}
}
}
}
// Footer styling.
footer {
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$footer-fore-color-var});
@if $_footer-only-top-border {
border-top: $__1px solid var(#{$footer-border-color-var});
}
@else {
border: $__1px solid var(#{$footer-border-color-var});
}
// margin: $footer-margin;
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
font-size: $footer-font-size;
a, a:visited {
color: var(#{$footer-link-color-var});
}
}
// Definitions for sticky headers and footers.
header.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
top: 0;
}
footer.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
bottom: 0;
}
// Responsive drawer component.
.#{$drawer-toggle-name} {
&:before { // No color specified, should use the color of its surroundings!
display: inline-block;
position: relative;
vertical-align: bottom;
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
font-family: sans-serif;
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) {
display: none;
}
}
}
[type="checkbox"].#{$drawer-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: var(#{$drawer-back-color-var});
border: $__1px solid var(#{$drawer-border-color-var});
border-radius: 0; // Set to 0 to override the value from `nav`.
margin: 0; // Set to 0 to override the value from `nav`.
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
z-index: 1110;
@if $_drawer-right {
right: -$drawer-width;
transition: right 0.3s;
}
@else {
left: -$drawer-width;
transition: left 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: var(#{$universal-margin-var});
right: var(#{$universal-margin-var});
z-index: 1111;
width: $drawer-close-size;
height: $drawer-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0; // Fixes the offset from label
cursor: pointer;
transition: background 0.3s;
&:before { // Transparent background unless hovered over. Does not block text behind it.
display: block;
content: '\00D7';
color: var(#{$drawer-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $drawer-close-size;
line-height: 1; // Setting to 1 seems to center the 'X' properly.
text-align: center;
}
&:hover, &:focus {
background: var(#{$drawer-hover-back-color-var});
}
}
@media screen and (max-width: #{$drawer-width}) {
width: 100%;
}
}
&:checked + * {
@if $_drawer-right {
right: 0;
}
@else {
left: 0;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) + * {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
}
}

113
docs/v3/mini/_progress.scss
View File

@@ -1,113 +0,0 @@
/*
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/v3/mini/_progress_mixins.scss
View File

@@ -1,32 +0,0 @@
// 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;
}
}
}

371
docs/v3/mini/_table.scss
View File

@@ -1,371 +0,0 @@
/*
Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax - <tfoot> is not supported.
$table-mobile-breakpoint: 768px !default; // Breakpoint for <table> mobile view.
$table-max-height: 400px !default; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem !default; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label' !default; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600 !default; // Font weight for column header labels in mobile view.
$table-border-color: #aaa !default; // Border color for <table> elements.
$table-border-separator-color: #666 !default; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #e6e6e6 !default; // Background color for <th> elements.
$table-th-fore-color: #111 !default; // Text color for <th> elements.
$table-td-back-color: #f8f8f8 !default; // Background color for <td> elements.
$table-td-fore-color: #111 !default; // Text color for <td> elements.
$_include-horizontal-table: true !default; // [Hidden] Flag for horizontal tables (`true`/`false`).
$table-horizontal-name: 'horizontal' !default; // Class name for horizontal <table> elements.
$_include-striped-table: true !default; // [Hidden] Flag for striped tables.
$table-striped-name: 'striped' !default; // Class name for striped <table> elements.
$table-td-alt-back-color: #eee !default; // Alternative background color for <td> elements in striped tables.
$_include-hoverable-table: true !default; // [Hidden] Flag for striped tables.
$table-hoverable-name: 'hoverable' !default; // Class name for hoverable <table> elements.
$table-td-hover-back-color: #90caf9 !default; // Hover background color for <td> elements in hoverable tables.
// 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;
$table-th-back-color-var: '--table-head-back-color' !default;
$table-th-fore-color-var: '--table-head-fore-color' !default;
$table-td-back-color-var: '--table-body-back-color' !default;
$table-td-fore-color-var: '--table-body-fore-color' !default;
$table-td-alt-back-color-var: '--table-body-alt-back-color' !default;
$table-td-hover-back-color-var: '--table-body-hover-back-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;
#{$table-th-back-color-var}: $table-th-back-color;
#{$table-th-fore-color-var}: $table-th-fore-color;
#{$table-td-back-color-var}: $table-td-back-color;
#{$table-td-fore-color-var}: $table-td-fore-color;
#{$table-td-alt-back-color-var}: $table-td-alt-back-color;
}
// Desktop view (scrollable vertical tables).
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});
@if not($_include-horizontal-table) {
position: sticky;
top: 0;
}
}
tbody {
border-top: 0;
margin-top: calc(0 - var(#{$universal-margin-var}));
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: var(#{$table-th-back-color-var});
color: var(#{$table-th-fore-color-var});
}
td {
background: var(#{$table-td-back-color-var});
color: var(#{$table-td-fore-color-var});
border-top: $__1px solid var(#{$table-border-color-var});
}
@if not($_include-horizontal-table) {
tbody tr:first-child td {
border-top: 0;
}
}
}
// Styling for horizontal 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 var(#{$table-border-color-var});
&: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 {
border: 0;
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 {
border: 0;
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;
}
}
}
}
// Striped tables.
@if $_include-striped-table {
:root {
#{$table-td-alt-back-color-var} : $table-td-alt-back-color;
}
table.#{$table-striped-name} {
tr:nth-of-type(2n) > td {
background: var(#{$table-td-alt-back-color-var});
}
}
// Responsiveness for striped tables.
@media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-striped-name} {
tr:nth-of-type(2n) {
background: var(#{$table-td-alt-back-color-var});
}
}
}
}
// Hoverable tables.
@if $_include-striped-table {
:root {
#{$table-td-hover-back-color-var} : $table-td-hover-back-color;
}
table.#{$table-hoverable-name} {
tr {
&:hover, &:focus {
&, & > td {
background: var(#{$table-td-hover-back-color-var});
}
}
}
}
@media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-hoverable-name} {
tr {
&:hover, &:focus {
&, & > td {
background: var(#{$table-td-hover-back-color-var});
}
}
}
}
}
}

169
docs/v3/mini/_utility.scss
View File

@@ -1,169 +0,0 @@
/*
Definitions for utilities and helper classes.
*/
$hidden-name: 'hidden' !default; // Class name for hidden elements.
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
$border-generic-name: 'bordered' !default; // Class name for bordered elements.
$border-generic-color: rgba(0,0,0, 0.3) !default; // Border color for bordered elements.
$border-rounded-name: 'rounded' !default; // Class name for rounded-border elements.
$border-circular-name: 'circular' !default; // Class name for circular-border elements.
$box-shadow-generic-name:'shadowed' !default; // Class name for box-shadow elements.
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0, 0, 0, 0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0, 0, 0, 0.25) !default;
$responsive-margin-name: 'responsive-margin' !default; //Class name for responsive margin elements.
$responsive-margin-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive margin elements.
$responsive-margin-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive margin elements.
$responsive-padding-name: 'responsive-padding' !default; //Class name for responsive padding elements.
$responsive-padding-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive padding elements.
$responsive-padding-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive padding elements.
$hidden-prefix: 'hidden' !default; // Class prefix for responsive hidden elements.
$hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
$hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive hidden elements.
$hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
$hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive hidden elements.
$hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
$visually-hidden-prefix: 'visually-hidden' !default; // Class prefix for responsive visually hidden elements.
$visually-hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
$visually-hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive visually hidden elements.
$visually-hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
$visually-hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive visually hidden elements.
$visually-hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
// CSS variable name definitions [exercise caution if modifying these]
$border-generic-color-var: '--generic-border-color' !default;
$box-shadow-generic-var: '--generic-box-shadow' !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;
// }
// }
//
// ============================================================
/* Utility module CSS variable definitions */
:root {
#{$border-generic-color-var}: $border-generic-color;
#{$box-shadow-generic-var}: $box-shadow-generic;
}
// Hidden elements class. NOTE: Uses !important.
.#{$hidden-name}{
display: none !important;
}
// Visually hidden elements class. NOTE: Uses !important.
.#{$visually-hidden-name} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
// Generic bordered element class. NOTE: Uses !important.
.#{$border-generic-name} {
border: $__1px solid var(#{$border-generic-color-var}) !important;
}
// Generic rounded-border element class. NOTE: Uses !important.
.#{$border-rounded-name} {
border-radius: var(#{$universal-border-radius-var}) !important;
}
// Generic circular-border element class. NOTE: Uses !important.
.#{$border-circular-name} {
border-radius: 50% !important;
}
// Generic box-shadow element class. NOTE: Uses !important.
.#{$box-shadow-generic-name} {
box-shadow: var(#{$box-shadow-generic-var}) !important;
}
// Responsive margin class. NOTE: Uses !important.
.#{$responsive-margin-name} {
margin: calc(var(#{$universal-margin-var}) / 4) !important;
@media screen and (min-width: #{$responsive-margin-medium-breakpoint}) {
margin: calc(var(#{$universal-margin-var}) / 2) !important;
}
@media screen and (min-width: #{$responsive-margin-large-breakpoint}) {
margin: var(#{$universal-margin-var}) !important;
}
}
// Responsive padding class. NOTE: Uses !important.
.#{$responsive-padding-name} {
padding: calc(var(#{$universal-padding-var}) / 4) !important;
@media screen and (min-width: #{$responsive-padding-medium-breakpoint}) {
padding: calc(var(#{$universal-padding-var}) / 2) !important;
}
@media screen and (min-width: #{$responsive-padding-large-breakpoint}) {
padding: var(#{$universal-padding-var}) !important;
}
}
// Responsive hidden element class. NOTE: Uses !important.
@media screen and (max-width: $hidden-medium-breakpoint - 1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: $hidden-large-breakpoint - 1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none !important;
}
}
// Responsive visually hidden element class. NOTE: Uses !important.
@media screen and (max-width: $visually-hidden-medium-breakpoint - 1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: $visually-hidden-large-breakpoint - 1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}

1
docs/v3/responsive.svg
View File

@@ -1 +0,0 @@
<svg width="400" height="250" xmlns="http://www.w3.org/2000/svg"><path fill="#f8f8f8" d="M-1-1h402v252H-1z"/><g stroke="#444"><rect rx="4" height="200" width="320" y="19.3788" x="18.9287" fill="#f8f8f8"/><path stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" fill="none" d="M18.9287 189.093h320.5"/><ellipse ry="7.1428" rx="7" cy="204.5716" cx="179.4287" stroke-opacity="null" fill="none"/><rect rx="4" height="160" width="86" y="70.5718" x="302.2862" stroke-opacity="null" fill="#f8f8f8"/><path stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" fill="none" d="M302 85.286l86.2862-.171m-86 130.285h86"/><ellipse ry="4.8571" rx="4.8571" cy="222.5428" cx="345.2862" stroke-opacity="null" fill="none"/><rect rx="1" height="2" width="20" y="76.5435" x="331.7142" stroke-opacity="null" fill="none"/><ellipse ry="1" rx="1" cy="77.1433" cx="356.8569" stroke-opacity="null" fill="none"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 925 B

202
docs/v3/sass.js
View File

@@ -1,202 +0,0 @@
/*! sass.js - v0.10.9 (3e41106) - built 2018-02-06
providing libsass 3.4.9 (6de5050d)
via emscripten 1.37.33 ()
*/
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.Sass = factory();
}
}(this, function () {/*global document*/
// identify the path sass.js is located at in case we're loaded by a simple
// <script src="path/to/sass.js"></script>
// this path can be used to identify the location of
// * sass.worker.js from sass.js
// * libsass.js.mem from sass.sync.js
// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
// see https://github.com/medialize/sass.js/issues/33
var SASSJS_RELATIVE_PATH = (function() {
'use strict';
// in Node things are rather simple
if (typeof __dirname !== 'undefined') {
return __dirname;
}
// we can only run this test in the browser,
// so make sure we actually have a DOM to work with.
if (typeof document === 'undefined' || !document.getElementsByTagName) {
return null;
}
// http://www.2ality.com/2014/05/current-script.html
var currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
var path = currentScript && currentScript.src;
if (!path) {
return null;
}
// [worker] make sure we're not running in some concatenated thing
if (path.slice(-8) === '/sass.js') {
return path.slice(0, -8);
}
// [sync] make sure we're not running in some concatenated thing
if (path.slice(-13) === '/sass.sync.js') {
return path.slice(0, -13);
}
return null;
})() || '.';
/*global Worker, SASSJS_RELATIVE_PATH*/
'use strict';
var noop = function(){};
var slice = [].slice;
// defined upon first Sass.initialize() call
var globalWorkerUrl;
function Sass(workerUrl) {
if (!workerUrl && !globalWorkerUrl) {
/*jshint laxbreak:true */
throw new Error(
'Sass needs to be initialized with the URL of sass.worker.js - '
+ 'either via Sass.setWorkerUrl(url) or by new Sass(url)'
);
/*jshint laxbreak:false */
}
if (!globalWorkerUrl) {
globalWorkerUrl = workerUrl;
}
// bind all functions
// we're doing this because we used to have a single hard-wired instance that allowed
// [].map(Sass.removeFile) and we need to maintain that for now (at least until 1.0.0)
for (var key in this) {
if (typeof this[key] === 'function') {
this[key] = this[key].bind(this);
}
}
this._callbacks = {};
this._worker = new Worker(workerUrl || globalWorkerUrl);
this._worker.addEventListener('message', this._handleWorkerMessage, false);
}
// allow setting the workerUrl before the first Sass instance is initialized,
// where registering the global workerUrl would've happened automatically
Sass.setWorkerUrl = function(workerUrl) {
globalWorkerUrl = workerUrl;
};
Sass.style = {
nested: 0,
expanded: 1,
compact: 2,
compressed: 3
};
Sass.comments = {
'none': 0,
'default': 1
};
Sass.prototype = {
style: Sass.style,
comments: Sass.comments,
destroy: function() {
this._worker && this._worker.terminate();
this._worker = null;
this._callbacks = {};
this._importer = null;
},
_handleWorkerMessage: function(event) {
if (event.data.command) {
this[event.data.command](event.data.args);
}
this._callbacks[event.data.id] && this._callbacks[event.data.id](event.data.result);
delete this._callbacks[event.data.id];
},
_dispatch: function(options, callback) {
if (!this._worker) {
throw new Error('Sass worker has been terminated');
}
options.id = 'cb' + Date.now() + Math.random();
this._callbacks[options.id] = callback;
this._worker.postMessage(options);
},
_importerInit: function(args) {
// importer API done callback pushing results
// back to the worker
var done = function done(result) {
this._worker.postMessage({
command: '_importerFinish',
args: [result]
});
}.bind(this);
try {
this._importer(args[0], done);
} catch(e) {
done({ error: e.message });
throw e;
}
},
importer: function(importerCallback, callback) {
if (typeof importerCallback !== 'function' && importerCallback !== null) {
throw new Error('importer callback must either be a function or null');
}
// callback is executed in the main EventLoop
this._importer = importerCallback;
// tell worker to activate importer callback
this._worker.postMessage({
command: 'importer',
args: [Boolean(importerCallback)]
});
callback && callback();
},
};
var commands = 'writeFile readFile listFiles removeFile clearFiles lazyFiles preloadFiles options compile compileFile';
commands.split(' ').forEach(function(command) {
Sass.prototype[command] = function() {
var callback = slice.call(arguments, -1)[0];
var args = slice.call(arguments, 0, -1);
if (typeof callback !== 'function') {
args.push(callback);
callback = noop;
}
this._dispatch({
command: command,
args: args
}, callback);
};
});
// automatically set the workerUrl in case we're loaded by a simple
// <script src="path/to/sass.js"></script>
// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
Sass.setWorkerUrl(SASSJS_RELATIVE_PATH + '/sass.worker.js');
return Sass;
}));

839
docs/v3/sass.worker.js
View File

File diff suppressed because one or more lines are too long

1
docs/v3/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/v3/tailored.svg
View File

@@ -1 +0,0 @@
<svg width="400" height="250" xmlns="http://www.w3.org/2000/svg"><path fill="#f3f3f3" d="M-1-1h402v252H-1z"/><ellipse ry="98.9938" rx="98.9938" cy="115.9506" cx="200" stroke-opacity="null" stroke-width="null" stroke="#444" fill="none"/><ellipse ry="36.4977" rx="36.4977" cy="86.4524" cx="201.9999" stroke-opacity="null" stroke-width="null" stroke="#444" fill="none"/><path d="M134.504 189.329c0-26.922 29.863-47.98 65.496-47.98 35.633 0 64.496 21.807 64.496 48.73S235.633 238.81 200 238.81c-17.817 0-34.94-6.202-46.61-15.019-11.67-8.818-18.886-21-18.886-34.462zM95 125h15m195 0h-15M200 10v15m0 180v15" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" stroke="#444" fill="none"/><path d="M133.35 190.8394c.125.125.375.125.875.5l.375.375.125.1248.2498.125" fill="none"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M136.46 220.8338h139.099v21.371H136.46z"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M134.8353 208.961h17.8717v13.9974h-17.8717zm112.979-4.3742h19.9962v18.2466h-19.9963z"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M260.5618 197.713h10.123v9.1234h-10.123zm-130.4756 1.4998h11.123v13.2475h-11.123z"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M131.086 195.4635h6.3738v6.4988h-6.3738zm136.9055-6.5268l2.4598 3.1534-5.3212 4.151-2.4595-3.1532z"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M132.7577 189.3033l3.361 2.7995-4.0794 4.8974-3.361-2.7996z"/><path fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="#f3f3f3" d="M130.336 192.964h5.374v5.999h-5.374zm132.8503 1.2498h4.2492v6.3738h-4.2492z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB