mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 16:33:58 +02:00
Code Issues Releases Wiki Activity

Merge branch 'dev220'

Browse Source
This commit is contained in:
Angelos Chalaris
2017-05-12 16:24:21 +03:00
parent 84741346b2 f0622d7d95
commit c2c6d32a2b
51 changed files with 2961 additions and 2380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@@ -1,6 +1,21 @@
# Changelog
## 2.1.5
## v2.2.0
- Replaced old classes for generic shadows with one class (`.shadowed`).
- Removed the `.nano` progress style variant.
- Responsive visibility helpers now properly utilize `!important`.
- Updated the styling of the `.close` icon.
- Removed `.alert` and all its variants. Alerts are now deprecated.
- Added a `.toast` message to contextual module, along with variants.
- Removed `.inverse` card color variant, added `.warning` and `.error` variants to replace the old alerts.
- Swapped the order of the input_control and naviation modules.
- Added a fluid typography mode (currently disabled by default on all flavors).
- Added a `.drawer` component in navigation module, along with variants.
- Updated documentation and customization documentation to reflect latest changes.
- Updated all flavors to utilize the latest features.
## v2.1.5
- Proper re-release of `v2.1.4`.

490
dist/mini-dark.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.4 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@@ -678,120 +678,6 @@ figcaption {
}
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #151c1f;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #151c1f;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #192024;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
nav {
display: block;
background: #37474f;
border: 1px solid #324148;
margin: 0.5rem;
padding: 0.75rem 1rem;
}
nav a, nav a:visited {
display: block;
color: #3e79bd;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 1rem;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #616161;
border-left: 0;
}
nav .sublink-2 {
padding-left: 2rem;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #616161;
border-left: 0;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for forms and input elements.
*/
@@ -1152,6 +1038,193 @@ button.large, [type="button"].large, [type="submit"].large,
padding: 0.75rem 1.125rem;
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #151c1f;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #151c1f;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #192024;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
header.row {
box-sizing: content-box;
}
nav {
display: block;
background: #37474f;
border: 1px solid #324148;
margin: 0.5rem;
padding: 0.75rem 1rem;
}
nav a, nav a:visited {
display: block;
color: #3e79bd;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 1rem;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #616161;
border-left: 0;
}
nav .sublink-2 {
padding-left: 2rem;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #616161;
border-left: 0;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
.drawer-toggle:before {
position: relative;
top: 0.4375rem;
font-family: sans-serif;
font-size: 2.5rem;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #37474f;
border: 1px solid #324148;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 0.75rem;
right: 0.25rem;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
right: 0;
}
/*
Definitions for the responsive table component.
*/
@@ -1450,17 +1523,31 @@ table.striped tr:nth-of-type(2n) > td {
width: auto;
}
.card.inverse {
background: #ebecec;
color: #0c0c0c;
border: 1px solid #424242;
.card.warning {
background: #fff176;
color: #232e33;
border: 1px solid #d1c661;
}
.card.inverse > .section {
border-bottom: 1px solid #424242;
.card.warning > .section {
border-bottom: 1px solid #d1c661;
}
.card.inverse > .section:last-child {
.card.warning > .section:last-child {
border-bottom: 0;
}
.card.error {
background: #b71c1c;
color: #fafafa;
border: 1px solid #a71a1a;
}
.card.error > .section {
border-bottom: 1px solid #a71a1a;
}
.card.error > .section:last-child {
border-bottom: 0;
}
@@ -1617,7 +1704,7 @@ table.striped tr:nth-of-type(2n) > td {
}
}
/*
/*
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
@@ -1632,52 +1719,16 @@ mark.inline-block {
mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
background: #a7ffeb;
color: #212121;
border: 1px solid #d0d0d0;
margin: 0.5rem;
padding: 0.75rem;
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
.toast {
position: fixed;
background: #acacac;
bottom: 1.5rem;
left: 50%;
transform: translate(-50%, -50%);
color: #0c0c0c;
border-radius: 2rem;
padding: 0.75rem 1.5rem;
z-index: 1111;
}
@@ -1771,21 +1822,14 @@ mark.inline-block {
line-height: 1.375em;
padding: 0.375em;
}
.alert.urgent {
.toast.small {
border-radius: 1.5rem;
padding: 0.5rem 1rem;
}
.alert.critical {
background: #b71c1c;
color: #d0d0d0;
}
.alert.urgent {
border: 1px solid #d1c661;
}
.alert.critical {
.toast.large {
border-radius: 3rem;
padding: 1.125rem 2.25rem;
}
@@ -1893,32 +1937,6 @@ progress.tertiary::-moz-progress-bar {
progress.tertiary::-moz-progress-bar {
background: #689f38;
}
progress.nano {
height: 0.125rem;
width: calc(100% - 0);
margin: 0 0;
margin: 0 auto;
border-radius: 0;
}
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0;
}
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0;
}
.spinner-donut.secondary {
border: 0.25rem solid #39444a;
@@ -2014,12 +2032,12 @@ ul.breadcrumbs li:last-child:after {
}
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
font-size: 2rem;
display: inline-block;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(57, 68, 74, 0);
vertical-align: top;
@@ -2030,26 +2048,10 @@ ul.breadcrumbs li:last-child:after {
.close:hover, .close:focus {
background: #39444a;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #fafafa;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
@@ -2099,37 +2101,25 @@ ul.breadcrumbs li:last-child:after {
padding: 0.375rem 0.5rem !important;
}
}
.shadow-none {
box-shadow: none !important;
}
.shadow-small {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.shadow-medium {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.shadow-large {
.shadowed {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
}
@media screen and (max-width: 767px) {
.hidden-sm {
.hidden-sm {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
.hidden-md {
display: none !important;
}
}
@media screen and (min-width: 1280px) {
.hidden-lg {
.hidden-lg {
display: none !important;
}
}

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

File diff suppressed because one or more lines are too long

486
dist/mini-default.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@@ -679,120 +679,6 @@ figcaption {
}
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #12171a;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #12171a;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #20292e;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
nav {
display: block;
background: #eceff1;
border: 1px solid #c9c9c9;
margin: 0.5rem;
padding: 0.75rem 1rem;
}
nav a, nav a:visited {
display: block;
color: #145caf;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 1rem;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #bdbdbd;
border-left: 0;
}
nav .sublink-2 {
padding-left: 2rem;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #bdbdbd;
border-left: 0;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for forms and input elements.
*/
@@ -1151,6 +1037,193 @@ button.large, [type="button"].large, [type="submit"].large,
padding: 0.75rem 1.125rem;
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #12171a;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #12171a;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #20292e;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
header.row {
box-sizing: content-box;
}
nav {
display: block;
background: #eceff1;
border: 1px solid #c9c9c9;
margin: 0.5rem;
padding: 0.75rem 1rem;
}
nav a, nav a:visited {
display: block;
color: #145caf;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 1rem;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #bdbdbd;
border-left: 0;
}
nav .sublink-2 {
padding-left: 2rem;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 0.1875rem;
top: -1px;
content: '';
height: 100%;
border: 1px solid #bdbdbd;
border-left: 0;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
.drawer-toggle:before {
position: relative;
top: 0.4375rem;
font-family: sans-serif;
font-size: 2.5rem;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #eceff1;
border: 1px solid #c9c9c9;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 0.75rem;
right: 0.25rem;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
right: 0;
}
/*
Definitions for the responsive table component.
*/
@@ -1451,17 +1524,30 @@ table.striped tr:nth-of-type(2n) > td {
width: auto;
}
.card.inverse {
background: #212121;
.card.warning {
background: #ffca28;
border: 1px solid #e8b825;
}
.card.warning > .section {
border-bottom: 1px solid #e8b825;
}
.card.warning > .section:last-child {
border-bottom: 0;
}
.card.error {
background: #b71c1c;
color: #fafafa;
border: 1px solid #0c0c0c;
border: 1px solid #a71a1a;
}
.card.inverse > .section {
border-bottom: 1px solid #424242;
.card.error > .section {
border-bottom: 1px solid #a71a1a;
}
.card.inverse > .section:last-child {
.card.error > .section:last-child {
border-bottom: 0;
}
@@ -1619,7 +1705,7 @@ table.striped tr:nth-of-type(2n) > td {
}
}
/*
/*
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
@@ -1634,51 +1720,16 @@ mark.inline-block {
mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
background: #d1e6f3;
border: 1px solid #d0d0d0;
margin: 0.5rem;
padding: 0.75rem;
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
.toast {
position: fixed;
background: #424242;
bottom: 1.5rem;
left: 50%;
transform: translate(-50%, -50%);
color: #fafafa;
border-radius: 2rem;
padding: 0.75rem 1.5rem;
z-index: 1111;
}
@@ -1772,21 +1823,14 @@ mark.inline-block {
line-height: 1.375em;
padding: 0.375em;
}
.alert.urgent {
.toast.small {
border-radius: 1.5rem;
padding: 0.5rem 1rem;
}
.alert.critical {
background: #b71c1c;
color: #fafafa;
}
.alert.urgent {
border: 1px solid #e8b825;
}
.alert.critical {
.toast.large {
border-radius: 3rem;
padding: 1.125rem 2.25rem;
}
@@ -1894,32 +1938,6 @@ progress.tertiary::-moz-progress-bar {
progress.tertiary::-moz-progress-bar {
background: #689f38;
}
progress.nano {
height: 0.125rem;
width: calc(100% - 0);
margin: 0 0;
margin: 0 auto;
border-radius: 0;
}
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0;
}
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0;
}
.spinner-donut.secondary {
border: 0.25rem solid #ffebee;
@@ -2015,12 +2033,12 @@ ul.breadcrumbs li:last-child:after {
}
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
font-size: 2rem;
display: inline-block;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(224, 224, 224, 0);
vertical-align: top;
@@ -2031,26 +2049,10 @@ ul.breadcrumbs li:last-child:after {
.close:hover, .close:focus {
background: #e0e0e0;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #212121;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
@@ -2100,37 +2102,25 @@ ul.breadcrumbs li:last-child:after {
padding: 0.375rem 0.5rem !important;
}
}
.shadow-none {
box-shadow: none !important;
}
.shadow-small {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.shadow-medium {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.shadow-large {
.shadowed {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
}
@media screen and (max-width: 767px) {
.hidden-sm {
.hidden-sm {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
.hidden-md {
display: none !important;
}
}
@media screen and (min-width: 1280px) {
.hidden-lg {
.hidden-lg {
display: none !important;
}
}

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

File diff suppressed because one or more lines are too long

154
dist/mini-lite.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@@ -677,76 +677,6 @@ figcaption {
}
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #12171a;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #12171a;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #20292e;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for forms and input elements.
*/
@@ -1024,6 +954,80 @@ button.large, [type="button"].large, [type="submit"].large,
padding: 0.75rem 1.125rem;
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 2.75rem;
background: #12171a;
color: #f5f5f5;
padding: 0.125rem 0.5rem;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #f5f5f5;
font-size: 1.75rem;
line-height: 1.3125em;
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #12171a;
color: #f5f5f5;
vertical-align: top;
margin: 0.125rem 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #20292e;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
header.row {
box-sizing: content-box;
}
footer {
display: block;
background: #192024;
color: #f5f5f5;
margin: 1rem 0 0;
padding: 1.5rem 0.5rem 0.75rem;
font-size: 0.875rem;
}
footer a, footer a:visited {
color: #0288d1;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for the responsive table component.
*/
@@ -1173,7 +1177,7 @@ table th:first-child, table td:first-child {
}
/*
Definitions for contextual background elements and alerts.
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
background: #0277bd;
@@ -1355,19 +1359,19 @@ progress.tertiary::-moz-progress-bar {
@media screen and (max-width: 767px) {
.hidden-sm {
display: none;
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
display: none;
display: none !important;
}
}
@media screen and (min-width: 1280px) {
.hidden-lg {
display: none;
display: none !important;
}
}

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

File diff suppressed because one or more lines are too long

474
dist/mini-nord.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@@ -683,123 +683,6 @@ figcaption {
}
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 44px;
background: #2E3440;
color: #ECEFF4;
padding: 2px 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #ECEFF4;
font-size: 1.75em;
line-height: 1.2;
margin: 1px 6px 1px 1px;
padding: 3px 0 0;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #2E3440;
color: #ECEFF4;
vertical-align: top;
margin: 2px 0 0;
box-shadow: none;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #37474f;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
nav {
display: block;
border: 1px solid #D8DEE9;
margin: 2px;
padding: 8px 8px 16px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
nav a, nav a:visited {
display: block;
color: #88C0D0;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 12px;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #81A1C1;
border-left: 0;
}
nav .sublink-2 {
padding-left: 24px;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #81A1C1;
border-left: 0;
}
footer {
display: block;
background: #434C5E;
color: #ECEFF4;
margin: 18px 0 0;
padding: 22px 10px 12px;
font-size: 85%;
}
footer a, footer a:visited {
color: #88C0D0;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for forms and input elements.
*/
@@ -1163,6 +1046,196 @@ button.large, [type="button"].large, [type="submit"].large,
margin: 10px 8px;
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 44px;
background: #2E3440;
color: #ECEFF4;
padding: 2px 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #ECEFF4;
font-size: 1.75em;
line-height: 1.2;
margin: 1px 6px 1px 1px;
padding: 3px 0 0;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #2E3440;
color: #ECEFF4;
vertical-align: top;
margin: 2px 0 0;
box-shadow: none;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #37474f;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
header.row {
box-sizing: content-box;
}
nav {
display: block;
border: 1px solid #D8DEE9;
margin: 2px;
padding: 8px 8px 16px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
nav a, nav a:visited {
display: block;
color: #88C0D0;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 12px;
position: relative;
}
nav .sublink-1:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #81A1C1;
border-left: 0;
}
nav .sublink-2 {
padding-left: 24px;
position: relative;
}
nav .sublink-2:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #81A1C1;
border-left: 0;
}
footer {
display: block;
background: #434C5E;
color: #ECEFF4;
margin: 18px 0 0;
padding: 22px 10px 12px;
font-size: 85%;
}
footer a, footer a:visited {
color: #88C0D0;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
.drawer-toggle:before {
position: relative;
top: 7px;
font-family: sans-serif;
font-size: 40px;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #ECEFF4;
border: 1px solid #D8DEE9;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 12px;
right: 4px;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
right: 0;
}
/*
Definitions for the responsive table component.
*/
@@ -1465,17 +1538,30 @@ table.striped tr:nth-of-type(2n) > td {
width: auto;
}
.card.inverse {
background: #2E3440;
.card.warning {
background: #EBCB8B;
border: 1px solid #D08770;
}
.card.warning > .section {
border-bottom: 1px solid #D08770;
}
.card.warning > .section:last-child {
border-bottom: 0;
}
.card.error {
background: #BF616A;
color: #ECEFF4;
border: 1px solid #3B4252;
border: 1px solid #BF616A;
}
.card.inverse > .section {
border-bottom: 1px solid #434C5E;
.card.error > .section {
border-bottom: 1px solid #BF616A;
}
.card.inverse > .section:last-child {
.card.error > .section:last-child {
border-bottom: 0;
}
@@ -1630,7 +1716,7 @@ table.striped tr:nth-of-type(2n) > td {
}
}
/*
/*
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
@@ -1646,51 +1732,16 @@ mark.inline-block {
mark.inline-block {
display: inline-block;
}
@-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
transform-origin: 50% 50%;
}
}
.alert {
display: block;
border: 1px solid #D8DEE9;
margin: 1px 10px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
}
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
.toast {
position: fixed;
background: #424242;
bottom: 24px;
left: 50%;
transform: translate(-50%, -50%);
color: #ECEFF4;
border-radius: 32px;
padding: 12px 24px;
z-index: 1111;
}
@@ -1785,21 +1836,14 @@ mark.inline-block {
line-height: 1.35;
padding: 5px;
}
.alert.urgent {
.toast.small {
border-radius: 24px;
padding: 8px 16px;
}
.alert.critical {
background: #BF616A;
color: #ECEFF4;
}
.alert.urgent {
border: 1px solid #D08770;
}
.alert.critical {
.toast.large {
border-radius: 48px;
padding: 18px 36px;
}
@@ -1908,32 +1952,6 @@ progress.tertiary::-moz-progress-bar {
progress.tertiary::-moz-progress-bar {
background: #A3BE8C;
}
progress.nano {
height: 2px;
width: calc(100% - 0);
margin: 0 0;
margin: 0 auto;
border-radius: 0;
}
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0;
}
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0;
}
.spinner-donut.secondary {
border: 4px solid #D8DEE9;
@@ -2031,12 +2049,12 @@ ul.breadcrumbs li:last-child:after {
}
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
display: inline-block;
width: 32px;
font-family: sans-serif;
font-size: 32px;
font-size: 32px;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(236, 239, 244, 0);
vertical-align: top;
@@ -2047,26 +2065,10 @@ ul.breadcrumbs li:last-child:after {
.close:hover, .close:focus {
background: #eceff4;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #2E3440;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
@@ -2134,19 +2136,19 @@ ul.breadcrumbs li:last-child:after {
}
@media screen and (max-width: 767px) {
.hidden-sm {
.hidden-sm {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
.hidden-md {
display: none !important;
}
}
@media screen and (min-width: 1280px) {
.hidden-lg {
.hidden-lg {
display: none !important;
}
}

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

File diff suppressed because one or more lines are too long

404
dist/mini-sucroa.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*
@@ -685,106 +685,6 @@ figcaption {
}
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 48px;
background: #211423;
color: #fffddc;
padding: 3px 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #fffddc;
font-size: 1.75em;
line-height: 1.5;
margin: 6px 6px 1px 1px;
padding: 6px 0 0;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #211423;
color: #fffddc;
vertical-align: top;
margin: 3px 0 0;
box-shadow: none;
border: 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #493e4b;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
nav {
display: block;
background: #e8deff;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 2px;
padding: 12px 10px 18px 22px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
nav a, nav a:visited {
display: block;
color: #6979c6;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 14px;
position: relative;
}
nav .sublink-2 {
padding-left: 28px;
position: relative;
}
footer {
display: block;
background: #211423;
color: #fffddc;
margin: 22px 0 0;
padding: 24px 10px 14px;
font-size: 90%;
}
footer a, footer a:visited {
color: #7480b3;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
/*
Definitions for forms and input elements.
*/
@@ -1152,6 +1052,180 @@ button.large, [type="button"].large, [type="submit"].large,
margin: 10px 8px;
}
/*
Definitions for navigation elements.
*/
header {
display: block;
height: 48px;
background: #211423;
color: #fffddc;
padding: 3px 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
header .logo {
color: #fffddc;
font-size: 1.75em;
line-height: 1.5;
margin: 6px 6px 1px 1px;
padding: 6px 0 0;
transition: opacity 0.3s;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
background: #211423;
color: #fffddc;
vertical-align: top;
margin: 3px 0 0;
box-shadow: none;
border: 0;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
background: #493e4b;
}
header .logo, header a.button, header a[role="button"] {
text-decoration: none;
}
header.row {
box-sizing: content-box;
}
nav {
display: block;
background: #e8deff;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 2px;
padding: 12px 10px 18px 22px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
nav a, nav a:visited {
display: block;
color: #6979c6;
text-decoration: none;
}
nav .sublink-1 {
padding-left: 14px;
position: relative;
}
nav .sublink-2 {
padding-left: 28px;
position: relative;
}
footer {
display: block;
background: #211423;
color: #fffddc;
margin: 22px 0 0;
padding: 24px 10px 14px;
font-size: 90%;
}
footer a, footer a:visited {
color: #7480b3;
}
header.sticky, footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
}
header.sticky {
top: 0;
}
footer.sticky {
bottom: 0;
}
.drawer-toggle:before {
position: relative;
top: 9px;
font-family: sans-serif;
font-size: 40px;
line-height: 0.125;
content: '\2261';
}
.drawer {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
overflow-y: auto;
background: #e8deff;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 0;
z-index: 1110;
}
.drawer:not(.right) {
left: -320px;
transition: left 0.3s;
}
.drawer.right {
right: -320px;
transition: right 0.3s;
}
.drawer .close {
position: absolute;
top: 12px;
right: 4px;
z-index: 1111;
padding: 0;
}
@media screen and (max-width: 320px) {
.drawer {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: 100%;
z-index: 1100;
}
.drawer:not(.persistent) .close {
display: none;
}
.drawer-toggle:not(.persistent) {
display: none;
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
right: 0;
}
/*
Definitions for the responsive table component.
*/
@@ -1321,17 +1395,30 @@ table.striped tr:nth-of-type(2n) > td {
width: auto;
}
.card.inverse {
background: #211423;
.card.warning {
background: #fe9992;
border: 1px solid #fedb64;
}
.card.warning > .section {
border-bottom: 1px solid #fedb64;
}
.card.warning > .section:last-child {
border-bottom: 0;
}
.card.error {
background: #ac354e;
color: #fffddc;
border: 1px solid #190f1a;
border: 1px solid #86293d;
}
.card.inverse > .section {
border-bottom: 1px solid #493e4b;
.card.error > .section {
border-bottom: 1px solid #86293d;
}
.card.inverse > .section:last-child {
.card.error > .section:last-child {
border-bottom: 0;
}
@@ -1538,7 +1625,7 @@ table.striped tr:nth-of-type(2n) > td {
}
}
/*
/*
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
@@ -1554,14 +1641,16 @@ mark.inline-block {
mark.inline-block {
display: inline-block;
}
.alert {
display: block;
background: #e8deff;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 4px 10px;
padding: 12px 16px;
.toast {
position: fixed;
background: #424242;
bottom: 24px;
left: 50%;
transform: translate(-50%, -50%);
color: #fffddc;
border-radius: 32px;
padding: 12px 24px;
z-index: 1111;
}
@@ -1656,21 +1745,14 @@ mark.inline-block {
line-height: 1.35;
padding: 5px;
}
.alert.urgent {
.toast.small {
border-radius: 24px;
padding: 8px 16px;
}
.alert.critical {
background: #ac354e;
color: #fffddc;
}
.alert.urgent {
border: 1px solid #fe6d64;
}
.alert.critical {
.toast.large {
border-radius: 48px;
padding: 18px 36px;
}
@@ -1779,32 +1861,6 @@ progress.tertiary::-moz-progress-bar {
progress.tertiary::-moz-progress-bar {
background: #2b866d;
}
progress.nano {
height: 2px;
width: calc(100% - 0);
margin: 0 0;
margin: 0 auto;
border-radius: 0;
}
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0;
}
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0;
}
.spinner-donut.secondary {
border: 4px solid #f2cad3;
@@ -1903,12 +1959,12 @@ ul.breadcrumbs li:last-child:after {
}
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
display: inline-block;
width: 32px;
font-family: sans-serif;
font-size: 32px;
font-size: 32px;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(232, 222, 255, 0);
vertical-align: top;
@@ -1919,26 +1975,10 @@ ul.breadcrumbs li:last-child:after {
.close:hover, .close:focus {
background: #e8deff;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #211423;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
.close:before {
content: "\00D7";
display: block;
text-align: center;
}
@@ -2006,19 +2046,19 @@ ul.breadcrumbs li:last-child:after {
}
@media screen and (max-width: 767px) {
.hidden-sm {
.hidden-sm {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
.hidden-md {
display: none !important;
}
}
@media screen and (min-width: 1280px) {
.hidden-lg {
.hidden-lg {
display: none !important;
}
}

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

File diff suppressed because one or more lines are too long

93
docs/card.html
View File

@@ -23,19 +23,23 @@
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" id="co" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -43,23 +47,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -67,8 +71,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
<div class="col-sm-12">
@@ -86,7 +94,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -220,22 +228,17 @@
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
</div><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code>&lt;img&gt;</code> element or a video element of your choice (e.g. using a <code>&lt;iframe&gt;</code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>. Finally, you can turn a whole <code>.card</code> black, by applying the <code>.inverse</code> class to it. This is not really a section trick, but we thought we should include it here anyway.</p>
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code>&lt;img&gt;</code> element or a video element of your choice (e.g. using a <code>&lt;iframe&gt;</code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>.</p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
&lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section dark&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section darker&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card inverse&quot;&gt;
&lt;div class=&quot;section&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
@@ -326,6 +329,54 @@
</div>
</div>
</div>
</div>
<div class="row" id="color-variants">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Card color variants</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"><br>
<div class="row">
<div class="card warning"><div class="section"><h3>Warning Card</h3><p>Warning cards are used to display important information to users.</p></div></div>
<div class="card error"><div class="section"><h3>Error Card</h3><p>Error cards are used to display error messages to users.</p></div></div>
</div>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>Cards can also be used to display important information or error messages to users. You can use the <code>.warning</code> class to display a yellow warning card or, if you need to display an error message to your users, you can use the <code>.error</code> class to display a red error card. </p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;card warning&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Warning&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card error&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Error&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>If you want more color variants for your cards, check out the <a href="customization.html">customization</a> page.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12"><pre>&lt;div class=&quot;card warning errors&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Bad card&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two card color variants, as this might cause some unexpected behavior.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">

124
docs/contextual.html
View File

@@ -25,19 +25,24 @@
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
.toast.demo { position: relative; top: 2rem; left: calc(50% - 6rem); z-index: 1;} .toast.demo.small { top: 4.5rem; left: calc(50% - 6.75rem);} .toast.demo.large { top: 7.5rem; left: calc(50% - 8rem);}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -45,23 +50,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -69,13 +74,17 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
<div class="col-sm-12">
<h1>Contextual</h1>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
@@ -84,11 +93,11 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.alert</code> container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
<p>Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>contextual</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>contextual</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -153,92 +162,41 @@
</div>
</div>
</div>
<div class="row" id="alerts">
<div class="row" id="toasts">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alerts</h2></div>
<div class="section"><h2>Toasts</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div>
<div class="alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<div class="alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<div class="alert critical" style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
</div>
<div style="height: 15rem;">
<span class="toast demo">I'm a toast message!</span><br/>
<span class="toast small demo">I'm a small toast message!</span><br/>
<span class="toast large demo">I'm a large toast message!</span>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <code>&lt;div&gt;</code> element, which will contain one or more elements (for example a <code>&lt;h3&gt;</code> and a <code>&lt;p&gt;</code>) and add the <code>.alert</code> class to it. For more urgent alerts, use the <code>.urgent</code> class and for critical alerts, use the <code>.critical</code> class.</p>
<p>Toasts aim to help bridge the gap between web and native applications on mobile devices, by displaying native-looking toast messages. To create a toast, wrap some text inside a <code>&lt;span&gt;</code> element with the <code>.toast</code> class. Toasts appear at the bottom of the screen on top of everything else. If you want to create smaller or larger toast messasges, you can add the <code>.small</code> or <code>.large</code> classes respectively.</p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;alert&quot;&gt;
&lt;h3&gt;This is an alert&lt;/h3&gt;
&lt;p&gt;Make sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent&quot;&gt;
&lt;h3&gt;This is an urgent alert&lt;/h3&gt;
&lt;p&gt;Make absolutely sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical&quot;&gt;
&lt;h3&gt;This is a critical alert&lt;/h3&gt;
&lt;p&gt;Make certain you read and actually understand this!&lt;/p&gt;
&lt;/div&gt;</pre>
<pre>&lt;span class=&quot;toast&quot;&gt;This is a normal toast message!&lt;/span&gt;
&lt;span class=&quot;toast small&quot;&gt;This is a large toast message!&lt;/span&gt;
&lt;span class=&quot;toast large&quot;&gt;This is a small toast message!&lt;/span&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
<li>If you want to make your alerts more accessible, we suggest you add either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>&quot;</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>&quot;</span></code> attribute, depending on the behavior you are planning to implement for your alerts.</li>
<li>Toast elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization.html">customization</a> page.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;p class=&quot;alert&quot;&gt;Short and to the point&lt;/p&gt;
<span class="fore-tertiary">&lt;!-- or --&gt;</span>
&lt;h2 class=&quot;alert urgent&quot;&gt;Large and to the point&lt;/h2&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;Instead of using a <code>&lt;div&gt;</code> element, you can also apply the <code>.alert</code> class to common textual elements, such as paragraphs or headings.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;button class=&quot;alert&quot;&gt;Not a good alert&lt;/button&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid applying the <code>.alert</code> class to non-textual HTML elements, such as buttons or images. Doing so might result in unexpected behavior.</p>
<div class="col-sm-12">
<pre>&lt;span class=&quot;toast small large&quot;&gt;Not a good toast&lt;/span&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two toast size variants, as this might cause unexpected behavior.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="animated-alerts">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Animated alerts</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div>
<div class="animated alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<div class="animated alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<div class="animated alert critical" style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the <code>.animated</code> class on an existing <code>.alert</code> and it shall periodically scale up a little bit to make users notice it.</p>
<h3>Sample code</h3>
<pre>&lt;div class=&quot;alert animated&quot;&gt;
&lt;h3&gt;Animated alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent animated&quot;&gt;
&lt;h3&gt;Animated urgent alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical animated&quot;&gt;
&lt;h3&gt;Animated critical alert&lt;/h3&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>Animated alerts may not display properly on older browsers, especially legacy versions of Internet Explorer.</li>
<li>It has been reported that some Webkit-based browsers, such as Chrome, display animated alerts in a very blurry fashion. Despite our best attempts at solving these problems, they seem to be quite persistent and we do not yet know how to fix them. Thus, you might want to hold off on using animated alerts if you think this might be an issue or try to control them using Javascript code to make the animation stop after a short amount of time (i.e. removing the <code>.animated</code> class).</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" id="tooltips">
<div class="col-sm-12">

39
docs/core.html
View File

@@ -23,19 +23,23 @@
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -43,23 +47,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -67,8 +71,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
<div class="col-sm-12">
@@ -86,8 +94,9 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>core</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To use the <strong>core</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
</div>
</div>
</div>

33
docs/customization/card.html
View File

@@ -25,30 +25,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -56,9 +62,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -67,8 +73,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
<div class="col-sm-12">

154
docs/customization/contextual.html
View File

@@ -24,30 +24,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -55,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -66,13 +72,14 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
<div class="col-sm-12">
<h1>Contextual</h1>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
@@ -81,7 +88,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.alert</code> container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
<p>Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code>&lt;mark&gt;</code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
@@ -150,12 +157,12 @@
</div>
</div>
<div class="row" id="alerts">
<div class="row" id="toasts">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alerts</h2></div>
<div class="section"><h2>Toasts</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining alerts.</p><br/>
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining toast messages.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
@@ -163,54 +170,40 @@
</thead>
<tbody>
<tr>
<td data-label="Variable">$alert-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for alert components</td><td data-label="Sample value">'alert'</td>
<td data-label="Variable">$toast-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for toast components</td><td data-label="Sample value">'toast'</td>
</tr>
<tr>
<td data-label="Variable">$alert-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for alert components</td><td data-label="Sample value">#eeeeee</td>
<td data-label="Variable">$toast-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for toast components</td><td data-label="Sample value">#424242</td>
</tr>
<tr>
<td data-label="Variable">$alert-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for alert components</td><td data-label="Sample value">$fore-color</td>
<td data-label="Variable">$toast-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for toast components</td><td data-label="Sample value">$fore-color</td>
</tr>
<tr>
<td data-label="Variable">$alert-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for alert components</td><td data-label="Sample value">1px solid #bdbdbd</td>
<td data-label="Variable">$toast-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for toast components</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
<tr>
<td data-label="Variable">$alert-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for alert components</td><td data-label="Sample value">2px</td>
<td data-label="Variable">$toast-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for toast components</td><td data-label="Sample value">8px</td>
</tr>
<tr>
<td data-label="Variable">$alert-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for alert components</td><td data-label="Sample value">12px 16px</td>
<td data-label="Variable">$toast-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for toast components</td><td data-label="Sample value">12px 16px</td>
</tr>
<tr>
<td data-label="Variable">$alert-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Margin for alert components</td><td data-label="Sample value">6px</td>
<td data-label="Variable">$toast-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">Box shadow for toast components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
<tr>
<td data-label="Variable">$alert-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">Box shadow for alert components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
<tr>
<td data-label="Variable">$alert-include-animated</td><td data-label="Type">Logical</td>
<td data-label="Description">Enables animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$alert-animated-class</td><td data-label="Type">String</td>
<td data-label="Description">Class name for animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">'animated'</td>
<td data-label="Variable">$toast-bottom</td><td data-label="Type">Position bottom</td>
<td data-label="Description">Position bottom for toast components</td><td data-label="Sample value">20px</td>
</tr>
</tbody>
</table><br/>
</div>
<div class="section">
<h3>Notes:</h3>
<ol>
<li id="alert-note-one">The value of <code>$alert-animated-class</code> will only be used if <code>$alert-include-animated</code> is set to <code class="fore-tertiary">true</code>.</li>
</ol>
</div>
</div>
</div>
</div>
@@ -365,12 +358,13 @@
</div>
</div>
<div class="row" id="alert-mixins">
<!-- TODO -->
<div class="row" id="toast-mixins">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alert mixins</h2></div>
<div class="section"><h2>Toast mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to alerts (color and style variants).</p><br/>
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (color and style variants).</p><br/>
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
@@ -378,72 +372,68 @@
</thead>
<tbody>
<tr>
<td data-label="Mixin">make-alert-alt-color (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-back-color</span>, <span class="fore-tertiary">$alert-alt-fore-color</span>)</td>
<td data-label="Description">Creates a new alert color variant using the specified values.</td>
<td data-label="Mixin">make-toast-alt-color (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-back-color</span>, <span class="fore-tertiary">$toast-alt-fore-color</span>)</td>
<td data-label="Description">Creates a new toast color variant using the specified values.</td>
</tr>
<tr>
<td data-label="Mixin">make-alert-alt-style (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-border-style</span>, <span class="fore-primary">$alert-alt-border-radius</span>, <span class="fore-tertiary">$alert-alt-padding</span>, <span class="fore-tertiary">$alert-alt-margin</span>, <span class="fore-tertiary">$alert-alt-box-shadow</span>)</td>
<td data-label="Description">Creates a new alert style variant using the specified values.</td>
<td data-label="Mixin">make-toast-alt-style (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-border-style</span>, <span class="fore-primary">$toast-alt-border-radius</span>, <span class="fore-tertiary">$toast-alt-padding</span>, <span class="fore-tertiary">$toast-alt-box-shadow</span>)</td>
<td data-label="Description">Creates a new toast style variant using the specified values.</td>
</tr>
</tbody>
</table><br/>
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-alert-alt-color</caption>
<caption style="font-family: monospace, monospace">make-toast-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the alert color variant</td><td data-label="Sample value">'urgent'</td>
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the toast color variant</td><td data-label="Sample value">'warning'</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the alert color variant</td><td data-label="Sample value">#ffca28</td>
<td data-label="Parameter">$toast-alt-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the toast color variant</td><td data-label="Sample value">#ffca28</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">(Optional) Text color for the alert color variant</td><td data-label="Sample value">#212121</td>
<td data-label="Parameter">$toast-alt-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">(Optional) Text color for the toast color variant</td><td data-label="Sample value">#212121</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-color</span> ('urgent', #ffca28, #212121);</pre>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-color</span> ('warning', #ffca28, #212121);</pre>
<br/>
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-alert-alt-style</caption>
<caption style="font-family: monospace, monospace">make-toast-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the alert style variant</td><td data-label="Sample value">'urgent'</td>
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the toast style variant</td><td data-label="Sample value">'small'</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for the alert style variant</td><td data-label="Sample value">1px solid #ff8f00</td>
<td data-label="Parameter">$toast-alt-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for the toast style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for the alert style variant</td><td data-label="Sample value">2px</td>
<td data-label="Parameter">$toast-alt-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for the toast style variant</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the alert style variant</td><td data-label="Sample value">12px 16px</td>
<td data-label="Parameter">$toast-alt-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">(Optional) Padding for the toast style variant</td><td data-label="Sample value">9px 12px</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Margin for the alert style variant</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Parameter">$alert-alt-box-shadow</td><td data-label="Type">Margin</td>
<td data-label="Description">Box shadow for the alert style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
<td data-label="Parameter">$toast-alt-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">(Optional) Box shadow for the toast style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-style</span> ('urgent', 1px solid #ff8f00, 2px, 12px 16px, 6px, 6px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-style</span> ('small', 1px solid #bdbdbd, 6px, 9px 12px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
<br/>
</div>
</div>
@@ -515,11 +505,11 @@
</tr>
<tr>
<td data-label="Parameter">$tooltip-alt-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
<td data-label="Description">(Optional) Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
</tr>
<tr>
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Margin</td>
<td data-label="Description">Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Box Shadow</td>
<td data-label="Description">(Optional) Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
</tbody>
</table><br/>

67
docs/customization/core.html
View File

@@ -24,29 +24,36 @@
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } }
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -54,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -65,8 +72,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
<div class="col-sm-12">
@@ -130,6 +138,26 @@
<td data-label="Variable">$base-line-height</td><td data-label="Type">Line height</td>
<td data-label="Description">Default line height for all elements</td><td data-label="Sample value">1.5</td>
</tr>
<tr>
<td data-label="Variable">$use-fluid-typography</td><td data-label="Type">Logical</td>
<td data-label="Description">Enables scaling of the font size for the root elements<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$fluid-type-start-breakpoint</td><td data-label="Type">Breakpoint</td>
<td data-label="Description">Breakpoint where fluid typography scaling starts<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
</tr>
<tr>
<td data-label="Variable">$fluid-type-end-breakpoint</td><td data-label="Type">Breakpoint</td>
<td data-label="Description">Breakpoint where fluid typography scaling ends<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
</tr>
<tr>
<td data-label="Variable">$fluid-type-small-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
<td data-label="Description">Smallest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
</tr>
<tr>
<td data-label="Variable">$fluid-type-large-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
<td data-label="Description">Largest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
</tr>
<tr>
<td data-label="Variable">$body-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Margin for the body</td><td data-label="Sample value">4px</td>
@@ -172,15 +200,15 @@
</tr>
<tr>
<td data-label="Variable">$make-heading-smalltext-block</td><td data-label="Type">Logical</td>
<td data-label="Description">Makes <code>&lt;small&gt;</code> elements inside headings display below them<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">true</td>
<td data-label="Description">Makes <code>&lt;small&gt;</code> elements inside headings display below them<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$heading-smalltext-b-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
<td data-label="Description">Font size for <code>&lt;small&gt;</code> elements inside headings<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">75%</td>
<td data-label="Description">Font size for <code>&lt;small&gt;</code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">75%</td>
</tr>
<tr>
<td data-label="Variable">$heading-smalltext-b-top-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Top margin for <code>&lt;small&gt;</code> elements inside headings<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">-4px</td>
<td data-label="Description">Top margin for <code>&lt;small&gt;</code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">-4px</td>
</tr>
<tr>
<td data-label="Variable">$paragraph-margin</td><td data-label="Type">Margin</td>
@@ -220,11 +248,11 @@
</tr>
<tr>
<td data-label="Variable">$link-hover-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for links (on hover)<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">#0288d1</td>
<td data-label="Description">Text color for links (on hover)<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">#0288d1</td>
</tr>
<tr>
<td data-label="Variable">$apply-link-hover-fade</td><td data-label="Type">Logical</td>
<td data-label="Description">Applies fading to links on hover<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">true</td>
<td data-label="Description">Applies fading to links on hover<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$link-font-weight</td><td data-label="Type">Font weight</td>
@@ -241,8 +269,9 @@
<h3>Notes:</h3>
<ol>
<li id="typo-note-one">The value of <code>$base-font-size</code> will only be applied if <code>$apply-defaults-to-all</code> is set to <code class="fore-tertiary">true</code>.</li>
<li id="typo-note-two">The values of <code>$heading-smalltext-b-font-size</code> and <code>$heading-smalltext-b-top-margin</code> will only be applied if <code>$make-heading-smalltext-block</code> is set to <code class="fore-tertiary">true</code>.</li>
<li id="typo-note-three">The value of <code>$link-hover-fore-color</code> will only be applied if <code>$apply-link-hover-fade</code> is set to <code class="fore-secondary">false</code>.</li>
<li id="typo-note-two">The values of <code>$fluid-type-start-breakpoint</code>, <code>$fluid-type-end-breakpoint</code>, <code>$fluid-type-small-type</code> and <code>$fluid-type-large-type</code> will only be applied if <code>$use-fluid-typography</code> is set to <code class="fore-tertiary">true</code>.</li>
<li id="typo-note-three">The values of <code>$heading-smalltext-b-font-size</code> and <code>$heading-smalltext-b-top-margin</code> will only be applied if <code>$make-heading-smalltext-block</code> is set to <code class="fore-tertiary">true</code>.</li>
<li id="typo-note-four">The value of <code>$link-hover-fore-color</code> will only be applied if <code>$apply-link-hover-fade</code> is set to <code class="fore-secondary">false</code>.</li>
</ol>
</div>
</div>

33
docs/customization/grid.html
View File

@@ -26,30 +26,36 @@
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -57,9 +63,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -68,8 +74,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
<div class="col-sm-12">

44
docs/customization/index.html
View File

@@ -23,29 +23,36 @@
@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="/index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -53,9 +60,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -64,24 +71,15 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">
<h1>Customization</h1>
<p><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors.html">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
<p>Use the <span class="hidden-sm">sidebar </span>menu <span class="hidden-md hidden-lg">below </span>to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
</div>
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
<div class="button-group" style="border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; height: 100%;">
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="navigation.html" class="button small">Navigation</a><a href="input_control.html" class="button small">Input Control</a><a href="table.html" class="button small">Table</a>
</div>
</div>
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
<div class="button-group" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0; height: 100%;">
<a href="card.html" class="button small">Card</a><a href="tab.html" class="button small">Tab</a><a href="contextual.html" class="button small">Contextual</a><a href="progress.html" class="button small">Progress</a><a href="utility.html" class="button small">Utility</a>
</div>
<p>Use the menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
</div>
<div class="col-sm-12">
<br/>

33
docs/customization/input_control.html
View File

@@ -25,30 +25,36 @@
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -56,9 +62,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -67,8 +73,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
<div class="col-sm-12">

138
docs/customization/navigation.html
View File

@@ -24,30 +24,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -55,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -66,13 +72,14 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
<div class="col-sm-121">
<h1>Navigation</h1>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
@@ -81,7 +88,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
@@ -265,6 +272,107 @@
</div>
</div>
<div class="row" id="drawer">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Drawer</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains custom classes and definitions for creating and styling a responsive drawer component.</p><br/>
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Variable">$drawer-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the drawer component</td><td data-label="Sample value">'drawer'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the drawer component</td><td data-label="Sample value">#eceff1</td>
</tr>
<tr>
<td data-label="Variable">$drawer-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for the drawer component</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
<tr>
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-width</td><td data-label="Type">Width</td>
<td data-label="Description">Width for the drawer component</td><td data-label="Sample value">320px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the drawer component</td><td data-label="Sample value">4px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">Box shadow for the drawer component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
<tr>
<td data-label="Variable">$drawer-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
<td data-label="Description">Breakpoint for the drawer component on mobile devices</td><td data-label="Sample value">768px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-normal-height</td><td data-label="Type">Height</td>
<td data-label="Description">height of the drawer component on medium-sized and larger screens<sup><a href="#drawer-note-one">1</a></sup></td><td data-label="Sample value">calc(100vh - 48px)</td>
</tr>
<tr>
<td data-label="Variable">$drawer-right-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the right-aligned variant of the drawer component</td><td data-label="Sample value">'right'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-peristent-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the non-responsive variant of the drawer component</td><td data-label="Sample value">'persistent'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the toggle button of the drawer component</td><td data-label="Sample value">'drawer-toggle'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-font-size</td><td data-label="Type">Font size</td>
<td data-label="Description">Font size of the toggle button of the drawer component</td><td data-label="Sample value">2.5em</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-line-height</td><td data-label="Type">Line height</td>
<td data-label="Description">Line height of the toggle button of the drawer component</td><td data-label="Sample value">0.125</td>
</tr>
<tr>
<td data-label="Variable">$drawer-toggle-top</td><td data-label="Type">Position top</td>
<td data-label="Description">Top position of the toggle button of the drawer component</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name of the close button of the drawer component</td><td data-label="Sample value">'close'</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-top</td><td data-label="Type">Position top</td>
<td data-label="Description">Top position of the close button of the drawer component</td><td data-label="Sample value">12px</td>
</tr>
<tr>
<td data-label="Variable">$drawer-close-right</td><td data-label="Type">Position right</td>
<td data-label="Description">Right position of the close button of the drawer component<td data-label="Sample value">4px</td>
</tr>
</tbody>
</table><br/>
</div>
<div class="section">
<h3>Notes:</h3>
<ol>
<li id="drawer-note-one">The values of <code>$drawer-normal-height</code> <em>should be</em> the calculated value of the screen height minus the total height of the <code>&lt;header&gt;</code> element for best results.</li>
</ol>
</div>
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="card fluid">

33
docs/customization/progress.html
View File

@@ -26,30 +26,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -57,9 +63,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -68,8 +74,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
<div class="col-sm-12">

33
docs/customization/tab.html
View File

@@ -24,30 +24,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -55,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -66,8 +72,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
<div class="col-sm-12">

33
docs/customization/table.html
View File

@@ -24,30 +24,36 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -55,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -66,8 +72,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
<div class="col-sm-12-1">

33
docs/customization/utility.html
View File

@@ -24,30 +24,36 @@
.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
<a href="../quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
@@ -55,9 +61,9 @@
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
@@ -66,8 +72,9 @@
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
<div class="col-sm-12">

22
docs/flavors.html
View File

@@ -25,12 +25,18 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
@@ -38,7 +44,7 @@
<h1>Flavors</h1>
<p>One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
<ul style="margin-left:0px; padding-left: 4px">
<li class="card fluid">
@@ -62,7 +68,7 @@
<li class="card fluid">
<h2 class="section double-padded">Lite <a href="http://codepen.io/chalarangelo/pen/bWVrMv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-lite</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-lite.min.css&quot;</span>&gt;</pre>
<p class="section double-padded">Lite is a light flavor that uses a the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars and alerts are not included.</p>
<p class="section double-padded">Lite is a light flavor that uses the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars, drawers and toasts are not included.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Size:</strong> 5 KB</p>
@@ -71,7 +77,7 @@
<li class="card fluid">
<h2 class="section double-padded">Sucroa <a href="http://codepen.io/chalarangelo/pen/YNKYgz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-sucroa</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-sucroa.min.css&quot;</span>&gt;</pre>
<p class="section double-padded">Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's <code>.dark</code> and <code>.darker</code> classes have been replaced by the <code>.light</code> and <code>.lighter</code> classes respectively. Finally, <code>.animated</code> alerts and <code>.horizontal</code> tables are not available.</p>
<p class="section double-padded">Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's <code>.dark</code> and <code>.darker</code> classes have been replaced by the <code>.light</code> and <code>.lighter</code> classes respectively. Finally, the <code>.shadowed</code> class is replaced by varying degrees of generic shadows (<code>.shadow-none</code>, <code>.shadow-small</code>, <code>.shadow-medium</code> and <code>.shadow-large</code>).</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/AngieDaskalakis">Angeliki Daskalakis</a></p>
<p><strong>Size:</strong> 7 KB (loads external fonts)</p>
@@ -80,7 +86,7 @@
<li class="card fluid">
<h2 class="section double-padded">Nord <a href="http://codepen.io/chalarangelo/pen/gWaxZX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-nord</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-nord.min.css&quot;</span>&gt;</pre>
<p class="section double-padded">Nord is a full flavor that uses the <a href="https://github.com/arcticicestudio/nord">Nord color palette</a> (arctic, north-bluish color palette). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. All modules and components that are available in the default flavor are also available in Nord.</p>
<p class="section double-padded">Nord is a full flavor that uses the <a href="https://github.com/arcticicestudio/nord">Nord color palette</a> (arctic, north-bluish color palette). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. All modules and components that are available in the default flavor are also available in Nord. Finally, the <code>.shadowed</code> class is replaced by varying degrees of generic shadows (<code>.shadow-none</code>, <code>.shadow-small</code>, <code>.shadow-medium</code> and <code>.shadow-large</code>).</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/tphecca">tphecca</a></p>
<p><strong>Size:</strong> 7 KB</p>

41
docs/grid.html
View File

@@ -25,19 +25,23 @@
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;" id="co">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -45,23 +49,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -69,8 +73,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
<div class="col-sm-12">
@@ -88,8 +96,9 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>grid</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To use the <strong>grid</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
<figure class="hidden-sm" style="margin: 0;"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1972.embed"></iframe></div><figcaption style="padding: 0.5rem;">mini.css grids tutorial by <a href="https://scrimba.com/casts/cast-1972" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
</div>
</div>
</div>

20
docs/index.html
View File

@@ -57,17 +57,23 @@
<div id="logo-body">
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
<p id="top-vtag-cont"><mark id="top-version-tag">v2.1</mark></p>
<p id="top-vtag-cont"><mark id="top-version-tag">v2.2</mark></p>
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
<small id="codename">Fermion</small>
</div>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container responsive-padding">
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
@@ -111,7 +117,7 @@
<br/>
<p>Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p>Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<hr>
</div>
@@ -134,7 +140,7 @@
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
<figure style="margin: 0;"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
<h3>Why should I use mini.css?</h3>
<p><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<br/>

36
docs/input_control.html
View File

@@ -25,19 +25,23 @@
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -45,23 +49,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -69,8 +73,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
<div class="col-sm-12">
@@ -88,7 +96,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>input_control</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>input_control</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>

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

File diff suppressed because one or more lines are too long

64
docs/modules.html
View File

@@ -18,19 +18,23 @@
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
.box-centered .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .box-left { text-align: left; } li a { text-decoration: none; } h2.section + div.section.box-left { height: 100%; }
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -38,23 +42,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -62,8 +66,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">
@@ -99,18 +107,6 @@
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
<div class="section box-left"><p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks. More specifically, the <strong>navigation</strong> module contains:</p><ul>
<li><a href="navigation.html#navigation-title">Navigation</a>
<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>
<li><a href="navigation.html#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
</ul></div><a href="navigation.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2>
@@ -122,6 +118,18 @@
</ul></div><a href="input_control.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
<div class="section box-left"><p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus. More specifically, the <strong>navigation</strong> module contains:</p><ul>
<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
<li><a href="navigation.html#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>
<li><a href="navigation.html#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
</ul></div><a href="navigation.html" class="button section">See more</a>
</div>
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-lg-6 row">
@@ -141,6 +149,7 @@
<li><a href="card.html#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
<li><a href="card.html#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
<li><a href="card.html#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
<li><a href="card.html#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
</ul></div><a href="card.html" class="button section">See more</a>
</div>
</div>
@@ -158,10 +167,9 @@
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2>
<div class="section box-left"><p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
<div class="section box-left"><p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
<li><a href="contextual.html#alerts" class="sublink-1">Classes for creating alerts</a></li>
<li><a href="contextual.html#animated-alerts" class="sublink-1">Classes for animating alerts</a></li>
<li><a href="contextual.html#toasts" class="sublink-1">Classes for creating toast messages</a></li>
<li><a href="contextual.html#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
</ul></div><a href="contextual.html" class="button section">See more</a>
</div>

106
docs/navigation.html
View File

@@ -27,19 +27,23 @@
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
@media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }}
@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
@media screen and (min-width: 768px) { .drawer#real-drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2" id="real-drawer">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -47,23 +51,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -71,13 +75,17 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
<div class="col-sm-12">
<h1>Navigation</h1>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
@@ -86,11 +94,11 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>navigation</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>navigation</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -207,6 +215,72 @@
</div>
</div>
</div>
</div>
<div class="row" id="drawer">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Drawer</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div style="height: 15rem;"><br>
<style>.drawer.demo { position: absolute; height: 15rem; z-index: 0; top: 6.625rem; height: 12.5rem;} [type="checkbox"]:checked + .drawer.demo { z-index: 1001; margin-left: 0.75rem;}</style>
<header><label for="demo-toggle" class="button drawer-toggle persistent"></label></header> <br>
<input type="checkbox" id="demo-toggle"> <nav class="drawer demo persistent">
<label for="demo-toggle" class="close"></label><a href="#">Home</a> <span>News</span>
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
<span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
<a href="#">About</a> <a href="#">Contact</a><br/></nav>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>The drawer component is used to create responsive and collapsible navigation menus. To create the drawer system, follow the steps presented below:</p>
<ul>
<li>Inside your <code>&lt;header&gt;</code> element, add a <code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class (remember to add the <code>.button</code> class to apply the necessary styles).</li>
<li>Create an <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element. Give it an <code class="fore-secondary">id</code> to be able to link it to the necessary interactive elements.</li>
<li>Immediately after the previous <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code>, create a <code>&lt;div&gt;</code> element with the <code>.drawer</code> class. This is where you will put your menu's contents.</li>
<li>Add an empty <code>&lt;label&gt;</code> element inside your <code>.drawer</code>, adding the <code>.close</code> class to it.</li>
<li>Finally, link the <code>.drawer-toggle</code> and <code>.close</code> elements to the <code class="fore-secondary">id</code> of your <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code>.</li>
</ul>
<p>Drawers are responsive and will expand into normal containers on larger screens. If you want to avoid this, add the <code>.persistent</code> class to both your <code>.drawer-toggle</code> and <code>.drawer</code> elements. You can also change the position of the drawer from the left side of the screen to the right by applying the <code>.right</code> class to your <code>.drawer</code> element.</p>
<h3>Sample code</h3>
<pre>&lt;header&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;button drawer-toggle&quot;&gt;&lt;/label&gt;
&lt;/header&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
&lt;div class=&quot;drawer&quot;&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid.html"><strong>grid</strong></a> module's system and classes to create fully responsive navigation menus.</li>
<li>It's best to use the <code>.drawer</code> component in combination with a <code>&lt;header&gt;</code> element that has the <code>.sticky</code> class (check the last section of this page).</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;nav class=&quot;drawer&quot;&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/nav&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can apply the <code>.drawer</code> class to a <code>&lt;nav&gt;</code> element, effectively making your page's navigation menu collapse on smaller screen sizes.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
<span class="fore-secondary">&lt;!-- Other stuff here --&gt;</span>
&lt;div class=&quot;drawer&quot;&gt;
&lt;h3&gt;Bad drawer&lt;/h3&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;The syntax and structure of the drawer container is very strict. Try to follow it exactly as described in this section.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">

47
docs/progress.html
View File

@@ -23,20 +23,23 @@
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;}
.box-colored {color: #f5f5f5;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -44,23 +47,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -68,8 +71,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
<div class="col-sm-12">
@@ -87,7 +94,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>progress</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>progress</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -139,15 +146,13 @@
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<p>Secondary process is 60% complete!</p> <progress class="secondary" value="600" max="1000"></progress>
<p>Tertiary process is 30% complete!</p> <progress class="tertiary" value="300" max="1000"></progress>
<p>Nano progress bar is 75% filled!</p> <progress class="nano" value="750" max="1000"></progress>
<p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Apart from the default style for the <code>&lt;progress&gt;</code> element, we have also included a couple of variants for it. First off, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code>&lt;progress&gt;</code> element tiny, using the <code>.nano</code> class. Finally, you can create inline progress bars, using the <code>.inline</code> class.</p>
<p>Apart from the default style for the <code>&lt;progress&gt;</code> element, we have also included a couple of variants for it. As with many other elements, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code>&lt;progress&gt;</code> element display inline, using the <code>.inline</code> class.</p>
<h3>Sample code</h3>
<pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
</div>
</div>
@@ -158,15 +163,13 @@
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
<pre>&lt;progress class=&quot;inline secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
<span class="fore-tertiary">&lt;!-- or --&gt;</span>
&lt;progress class=&quot;inline tertiary&quot; value=&quot;650&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix size and color classes for <code>&lt;progress&gt;</code> elements as needed.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
<span class="fore-secondary">&lt;!-- or --&gt;</span>
&lt;progress class=&quot;inline nano&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
<pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid mixing two classes of the same type (i.e. two color classes or two size classes).</p>
</div>
</div>

360
docs/quick_reference.html
View File

@@ -21,35 +21,41 @@
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}}
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<header class="sticky" style="height:36px;">
<a href="#core" class="button">Core</a> <a href="#grid" class="button">Grid</a>
<a href="#navigation" class="button">Navigation</a> <a href="#input_control" class="button">Input Control</a>
<a href="#table" class="button">Table</a> <a href="#card" class="button">Card</a>
<a href="#tab" class="button">Tab</a> <a href="#contextual" class="button">Contextual</a>
<a href="#progress" class="button">Progress</a> <a href="#utility" class="button">Utility</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="index.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
</nav>
<!-- Insert your page content here-->
<main><div class="container">
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Quick Reference</h1>
<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Setup &amp; usage</h2></div>
<div class="section">
@@ -61,7 +67,7 @@
</div><br>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<p>We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
@@ -70,7 +76,7 @@
</div>
</div>
<div class="row" id="core">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="core.html" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
<div class="section row">
@@ -89,7 +95,7 @@
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
<li>The <code>font-size</code> is <code>16px</code> for the root element</li>
<li>The <code>font-size</code> for the root element is <code>16px</code></li>
<li>The <code>line-height</code> is <code>1.5</code></li>
<li>All HTML headings are pre-styled</li>
<li>Styling provided for <code>&lt;small&gt;</code> elements inside headings</li>
@@ -138,7 +144,7 @@
</div>
</div>
<div class="row" id="grid">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="grid.html" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
<div class="section row">
@@ -367,97 +373,8 @@
</div>
</div>
</div>
<div class="row" id="navigation">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header&gt;
&lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt;
&lt;button&gt;Home&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;News&lt;/a&gt;
&lt;span&gt;|&lt;/span&gt;
&lt;button&gt;About&lt;/button&gt;
&lt;button&gt;Contact&lt;/button&gt;
&lt;/header&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
<li>The rest of the elements inside the <code>&lt;header&gt;</code> must be button elements (i.e. <code>&lt;button&gt;</code>, <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;button&quot;</span>&gt;</code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> or <code>.button</code>)</li>
<li>Use <code>&lt;span&gt;</code> elements as separators</li>
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
<li>The logo element should not be a <code>&lt;button&gt;</code> element or of the <code>.button</code> class</li>
<li>Header is not displayed as fixed by default</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;nav&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;span&gt;News&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;New Courses&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Certifications&lt;/a&gt;
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use <code>&lt;nav&gt;</code> element, populate it with links</li>
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;footer&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Simple syntax and structure, add content as normal</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header class=&quot;sticky&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt; &lt;button&gt;Home&lt;/button&gt; &lt;button&gt;About&lt;/button&gt;
&lt;/header&gt;
&lt;footer class=&quot;sticky&quot;&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use <code>.sticky</code> class to create</li>
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="input_control">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2><a href="input_control.html" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
@@ -572,8 +489,126 @@
</div>
</div>
</div>
<div class="row" id="navigation">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header&gt;
&lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt;
&lt;button&gt;Home&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;News&lt;/a&gt;
&lt;span&gt;|&lt;/span&gt;
&lt;button&gt;About&lt;/button&gt;
&lt;button&gt;Contact&lt;/button&gt;
&lt;/header&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
<li>The rest of the elements inside the <code>&lt;header&gt;</code> must be button elements (i.e. <code>&lt;button&gt;</code>, <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;button&quot;</span>&gt;</code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> or <code>.button</code>)</li>
<li>Use <code>&lt;span&gt;</code> elements as separators</li>
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
<li>The logo element should not be a <code>&lt;button&gt;</code> element or of the <code>.button</code> class</li>
<li>Header is not displayed as fixed by default</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;nav&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;span&gt;News&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;New Courses&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Certifications&lt;/a&gt;
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use <code>&lt;nav&gt;</code> element, populate it with links</li>
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Drawer <a href="https://codepen.io/chalarangelo/pen/JNvPrB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;button drawer-toggle&quot;&gt;&lt;/label&gt;
&lt;/header&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
&lt;div class=&quot;drawer&quot;&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Structure as follows:<ol>
<li><code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class in the <code>&lt;header&gt;</code> element, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> used to toggle the drawer component</li>
<li><code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element with a unique <code class="fore-secondary">id</code></li>
<li><code>&lt;div&gt;</code> element with the <code>.drawer</code> class immediately after the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
<li>Empty <code>&lt;label&gt;</code> element with the <code>.close</code> class inside the <code>.drawer</code>, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
</ol></li>
<li>Drawers are left-aligned and expand on non-mobile screen sizes by default</li>
<li>Use <code>.right</code> to create right-aligned drawers or <code>.persistent</code> for non-responsive drawers.</li>
<li>Apply the <code>.drawer</code> class on a navigation bar and combine with grid classes for best results</li>
<li>Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;footer&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Simple syntax and structure, add content as normal</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header class=&quot;sticky&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt; &lt;button&gt;Home&lt;/button&gt; &lt;button&gt;About&lt;/button&gt;
&lt;/header&gt;
&lt;footer class=&quot;sticky&quot;&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use <code>.sticky</code> class to create</li>
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="table">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="table.html" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></div>
<div class="section row">
@@ -723,7 +758,7 @@
</div>
</div>
<div class="row" id="card">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="card.html" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></div>
<div class="section row">
@@ -765,16 +800,12 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/oYmoJz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/gWvJEw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
&lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section dark&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section darker&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card inverse&quot;&gt;
&lt;div class=&quot;section&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
@@ -783,7 +814,6 @@
<li>Create media sections for images or video, using the <code>.media</code> class</li>
<li>Color variants for sections are available using the <code>.dark</code> and <code>.darker</code> classes</li>
<li>Extra padding section variant available using the <code>.double-padded</code> class</li>
<li>Card color variant is available using the <code>.inverse</code> class</li>
<li><code>.media</code> sections might not be fully supported in older browsers</li>
<li><code>.media</code> sections have a preset height of <code>200px</code></li>
</ul>
@@ -822,11 +852,35 @@
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Card color variants <a href="https://codepen.io/chalarangelo/pen/BRYeeW" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;card warning&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Warning&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card error&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Error&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Create yellow warning cards, using the <code>.warning</code> class</li>
<li>Create red error cards, using <code>.error</code> class</li>
<li>Avoid combining two or more card color variants</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="tab">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="tab.html" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></div>
<div class="section row">
@@ -915,7 +969,7 @@
</div>
</div>
<div class="row" id="contextual">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="contextual.html" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></div>
<div class="section row">
@@ -941,50 +995,18 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Alerts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;alert&quot;&gt;
&lt;h3&gt;This is an alert&lt;/h3&gt;
&lt;p&gt;Make sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent&quot;&gt;
&lt;h3&gt;This is an urgent alert&lt;/h3&gt;
&lt;p&gt;Make absolutely sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical&quot;&gt;
&lt;h3&gt;This is a critical alert&lt;/h3&gt;
&lt;p&gt;Make certain you read and actually understand this!&lt;/p&gt;
&lt;/div&gt;</pre>
<h3>Toasts <a href="https://codepen.io/chalarangelo/pen/XREdeq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;span class=&quot;toast&quot;&gt;This is a normal toast message!&lt;/span&gt;
&lt;span class=&quot;toast small&quot;&gt;This is a large toast message!&lt;/span&gt;
&lt;span class=&quot;toast large&quot;&gt;This is a small toast message!&lt;/span&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.alert</code> class to create alerts</li>
<li>Color variants available using the <code>.urgent</code> and <code>.critical</code> classes</li>
<li>Alerts have no pre-defined behavior, use Javascript</li>
<li>The <code>.alert</code> class can be applied to <code>&lt;div&gt;</code> elements and textual elements alike</li>
<li>Avoid applying the <code>.alert</code> class to non-textual elements, such as images</li>
<li>Use either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>&quot;</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>&quot;</span></code> attribute for accessible alerts</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/NbowoL" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;alert animated&quot;&gt;
&lt;h3&gt;Animated alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent animated&quot;&gt;
&lt;h3&gt;Animated urgent alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical animated&quot;&gt;
&lt;h3&gt;Animated critical alert&lt;/h3&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Animated alerts are available using the <code>.animated</code> class</li>
<li>Compatible with modern browsers, but might cause some problems and bluriness in Webkit-based or older browsers</li>
<li>Use the <code>.toast</code> class on <code>&lt;span&gt;</code> elements to create toast messages</li>
<li>Size variants available using the <code>.small</code> and <code>.large</code> classes</li>
<li>Toasts have no pre-defined behavior, use Javascript</li>
<li>Toasts display at the bottom of the screen on top of everything else</li>
</ul>
</div>
</div>
@@ -1007,7 +1029,7 @@
</div>
</div>
<div class="row" id="progress">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="progress.html" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
<div class="section row">
@@ -1028,17 +1050,16 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/MbLLwb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/OmQePm" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
<li>Size variants available using the <code>.nano</code> and <code>.inline</code> classes</li>
<li>Inline variant available using the <code>.inline</code> class</li>
<li>Mix color and size variants, but not multiple of the same type</li>
</ul>
</div>
@@ -1079,7 +1100,7 @@
</div>
</div>
<div class="row" id="utility">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="utility.html" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
<div class="section row">
@@ -1100,21 +1121,18 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/bWLPdo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;span class=&quot;bordered&quot;&gt;Bordered&lt;/span&gt;
&lt;span class=&quot;rounded&quot;&gt;Rounded&lt;/span&gt;
&lt;span class=&quot;circular&quot;&gt;Circular&lt;/span&gt;
&lt;span class=&quot;shadow-none&quot;&gt;No shadow&lt;/span&gt;
&lt;span class=&quot;shadow-small&quot;&gt;Small shadow&lt;/span&gt;
&lt;span class=&quot;shadow-medium&quot;&gt;Medium shadow&lt;/span&gt;
&lt;span class=&quot;shadow-large&quot;&gt;Large shadow&lt;/span&gt;</pre>
&lt;span class=&quot;shadowed&quot;&gt;Casts shadow&lt;/span&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Create generic borders using <code>.bordered</code></li>
<li>Rounded and circular border radii available using <code>.rounded</code> and <code>.circular</code> classes</li>
<li>Generic shadows available using the <code>.shadow-small</code>, <code>.shadow-medium</code>, <code>.shadow-large</code> and <code>.shadow-none</code> classes</li>
<li>Generic shadows available using the <code>.shadowed</code> class</li>
<li>Combine generic borders, border radii and generic shadows with each other but not with themselves</li>
<li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
<li>Generic borders work well with buttons</li>
@@ -1203,7 +1221,7 @@
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
</div>
</div>
</div></main>
</main></div></div></div>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>

38
docs/tab.html
View File

@@ -22,20 +22,24 @@
.col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} @media (max-width: 1279px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box; border: 0; border-bottom: 1px solid #c9c9c9;}}
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -43,23 +47,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -67,8 +71,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
<div class="col-sm-12">
@@ -86,7 +94,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>tab</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>tab</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>

38
docs/table.html
View File

@@ -29,19 +29,23 @@
table#carded td {display: block;border: 0; border-bottom: 1px solid #c9c9c9; text-align: right; }
table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;} @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" id="co" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
@@ -49,23 +53,23 @@
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
@@ -73,8 +77,12 @@
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
<div class="col-sm-12">
@@ -92,7 +100,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>table</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>table</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>

14
docs/templates.html
View File

@@ -25,12 +25,18 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">

96
docs/utility.html
View File

@@ -24,53 +24,60 @@
.col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; }
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored { color: #f5f5f5;}
.box-colored { color: #f5f5f5;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
<div class="col-sm-12">
@@ -88,7 +95,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>utility</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<p>To use the <strong>utility</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@@ -132,19 +139,16 @@
<p>This is a paragraph with a piece of <span class="bordered">bordered text</span>.</p>
<button class="bordered">Bordered button</button><button class="bordered primary">Bordered button</button><br>
<p><img src="https://placehold.it/200x200?text=rounded" class="rounded" alt="image">&nbsp;&nbsp;<img src="https://placehold.it/200x200?text=circular" class="circular" alt="image"></p><br>
<p><span class="shadow-none">No shadow</span>&nbsp;&nbsp;<span class="shadow-small">Small shadow</span>&nbsp;&nbsp;<span class="shadow-medium">Medium shadow</span>&nbsp;&nbsp;<span class="shadow-large">Large shadow</span></p><br>
<p><span class="shadowed">This is an element that casts a shadow.</span></p><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadow-small</code>, <code>.shadow-medium</code> and <code>.shadow-large</code> to add a generic <code><span class="fore-secondary">box-shadow</span></code> to any element, as well as the <code>.shadow-none</code> class to remove it entirely.</p>
<p>Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadowed</code> class to add a generic <code><span class="fore-secondary">box-shadow</span></code> to any element.</p>
<h3>Sample code</h3>
<pre>&lt;span class=&quot;bordered&quot;&gt;Bordered&lt;/span&gt;
&lt;span class=&quot;rounded&quot;&gt;Rounded&lt;/span&gt;
&lt;span class=&quot;circular&quot;&gt;Circular&lt;/span&gt;
&lt;span class=&quot;shadow-none&quot;&gt;No shadow&lt;/span&gt;
&lt;span class=&quot;shadow-small&quot;&gt;Small shadow&lt;/span&gt;
&lt;span class=&quot;shadow-medium&quot;&gt;Medium shadow&lt;/span&gt;
&lt;span class=&quot;shadow-large&quot;&gt;Large shadow&lt;/span&gt;</pre>
&lt;span class=&quot;shadowed&quot;&gt;Casts shadow&lt;/span&gt;</pre>
</div>
</div>
<div class="section">

62
docs/v2/DEVLOG.md
View File

@@ -1106,3 +1106,65 @@
- Embedded the intro that Per Harald Borgen built for the framework in the front page (`index.html`) under the `Quick overview` heading (I think it fits quite nicely).
- Added Per Harald Borgen to the list of contributors to show my gratitude.
- Removed old classes produced using the generic shadow mixin in `utility`, replaced with `.shadowed` to let developers still have some generic shadow class. Updated docs as needed, codepens will be updated right before release.
- Updated the definitions of the responsive visibility helpers to utilize `!important` properly. Size is now `6.34KB` which seems pretty good, based on the fact that some of the existing components that are being removed were unused by most devs to begin with.
- Removed the `.nano` progress bar, as it served no real purpose. **Hugging cat** misses it already, but it had to go, don't judge. Size should be smaller but the tool I use (Refresh-SF) has crashed and I can't really check the gzipped size right now.
## 20170510
- Tonight's the night: Lots of updates and changes will be taking place (hopefully), as the next release needs to be fast-forwarded for a lot of reasons. Let the building begin.
- Updated the `.close` icon with the new styling, making it less complicated, using a Unicode character instead of custom pseudo-elements, size is now `6.24KB`.
- Removed `.inverse` class from card, added `.warning` and `.error` instead (part of the `.alert` migration system).
- Updated `quick_reference` for said changes to `card` module.
- Created new codepens for the `quick_reference` page for changes in the `card` module.
- Forked old codepens that used `.nano` and `.shadow-...` classes, updated links in `quick_reference` for all of them now.
- Updated both `mini-default` and `mini-dark` to use the latest classes built in the `card` module with proper colors.
- Deprecated `.alert` and all that comes with it, updated flavors to reflect this. I will update all docs after commiting, just to be on the safe side. By the way, `mini-default` is now `6.12KB` without the deprecated components and with a few of the additions already built-in. Pretty happy with how it's coming along right now!
- Updated docs just barely to make sure that the new `.toast` component will easily find a suitable home in them.
- Implemented `.toast` quite quickly and without doing too much work on it, seems to work pretty well. Documentation, mixins and customization not yet done.
## 20170511
- Added `.toast` mixins to make them customizable.
- Added `.large` and `.small` size variants for `.toast` elements.
- Added `z-index` to `.toast` elements, so that they display above everything else so far.
- Documented `.toast` changes in their page. Updated the documentation in `quick_reference`. Created related codepen (bit fiddly but should be ok).
- Updated `customization` for the new `.toast` component, fixed some mistakes I found in the `customization/contextual.html` page.
- Updated flavors for `.toast`:
- `mini-default` fully supports it.
- `mini-dark` fully supports it.
- `mini-lite` does not support it (in keeping with tradition of the lite flavor's decisions).
- `mini-nord` still uses `.alert`s instead of `.toast`s, maintainer should address after update, otherwise I will in the next patch or so.
- `mini-sucroa` does not support it (or `.alert` for that matter), might be addressed with author later down the line, for now it's ok to not have either.
- Changed order of `input_control` and `navigation` for all flavors and documentation pages.
- Thoroughly tested fluid typography and updated the `core` module with the required variables and flags. This added a little bit of extra size to the framework, but it seems worthwhile as it scales a bit better on smaller screens, so that there is slightly more real estate for content.
- Updated all flavors for fluid typography (basically only `default` and `dark` actually use it for now).
- Updated `core` module documentation and customization documentation to explain fluid typography.
- Fixed the `header` element bug that didn't allow them to work well with the `.row` class for responsive layouts. They should now display as expected.
- Disabled fluid typography by default, it needs more testing and the `14px` font in smaller screens doesn't sit well with me. The feature is still there for those who want it.
- Implemented `.drawer` component along with everything that it needs. Documentation pending.
- Tested `.drawer` on the `modules.html` page, it seems to work pretty well.
- Documented `.drawer` component, updated descriptions wherever possible, the customization documentation will be added in later.
## 20170512
- `$include-drawer` is now a *hidden* flag.
- Updated `.drawer` to include a `$drawer-box-shadow` just in case.
- Updated customization for the new `.drawer` component.
- Updated `mini-default`, `mini-lite` and `mini-dark` for the new `.drawer` component, the other two flavors will be updated later today.
- Updated `quick_reference` for `.drawer`, added a codepen for the component.
- Updated `index.html` with mobile menu, updated tags to latest version. Fixed the way the screencast displays, so that it fits nicely on smaller screens.
- Updated all module pages to use `.drawer` on mobile.
- Updated `flavors.html` and `templates.html`, both now use the new menu and the tags are updated for the flavor doc.
- Updated `quick_reference.html` with new navigation, new tag, checked everything.
- Updated menus in all `customization` pages.
- Updated `mini-nord` to use the new components.
- Added screencasts to `core` and `grid` modules, so that people get a better starter.
- Added `$drawer-border-radius` for constistency.
- Updated `mini-sucroa` to use the new components.
- Updated all templates to display perfectly after all the change.
- `mini-sucroa` demo didn't need any updates, `mini-lite` required the removal of the `nav` element which was an artifact (whoops!).
- The other two flavors will be updated to include the new elements and get rid of any problematic stuff (will update in a bit).
- Updated flavor descriptions in `flavors.html`.
- Everything is ready for release, let's write the `CHANGELOG` for **v2.2.0**. (A couple of templates and things might be done later today, as well as linking to them from certain components such as the `.drawer` which could benefit from that.)
- Updated `CHANGELOG`, readying up for release. See you and **hugging cat** on the other side!

216
src/flavors/mini-dark.scss
View File

@@ -5,7 +5,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #d0d0d0; // Text and general foreground color
@@ -16,6 +16,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1
@@ -145,54 +146,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #151c1f; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #192024; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #37474f; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #324148; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 0.75rem 1rem; // Padding for <nav>
$nav-margin: 0.5rem; // Margin for <nav>
$nav-box-shadow: none; // Box shadow for <nav>
$nav-link-fore-color: #3e79bd; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #616161; // Subcategory bar color
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #1c2529; // Background color for forms
$form-fore-color: #9e9e9e; // Text color for forms
@@ -291,6 +244,72 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #151c1f; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #192024; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #37474f; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #324148; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 0.75rem 1rem; // Padding for <nav>
$nav-margin: 0.5rem; // Margin for <nav>
$nav-box-shadow: none; // Box shadow for <nav>
$nav-link-fore-color: #3e79bd; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #616161; // Subcategory bar color
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: $nav-back-color; // Background color of the drawer component
$drawer-border-style: $nav-border-style; // Border style of the drawer component
$drawer-border-radius: 0; // Border radius of the drawer component
$drawer-width: 320px; // Width of the drawer component
$drawer-padding: 0; // Padding of the drawer component
$drawer-box-shadow: none; // Box shadow for the drawer component
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables
$table-border-style: 1px solid #1c2529; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
@@ -339,12 +358,18 @@ $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: #ebecec; // Background color for card style 1
$card-style1-fore-color: #0c0c0c; // Text color for card style 1
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
$card-style1-name: 'warning'; // Class name for card style 1
$card-style1-back-color: #fff176; // Background color for card style 1
$card-style1-fore-color: $back-color; // Text color for card style 1
$card-style1-border-style: 1px solid #d1c661; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style:1px solid #424242;// Border style for card style 1 sections
$card-style1-section-border-style:1px solid #d1c661;// Border style for card style 1 sections
$card-style2-name: 'error'; // Class name for card style 2
$card-style2-back-color: #b71c1c; // Background color for card style 2
$card-style2-fore-color: #fafafa; // Text color for card style 2
$card-style2-border-style: 1px solid #a71a1a; // Border style for card style 2
$card-style2-border-radius: 0; // Border radius for card style 2
$card-style2-section-border-style:1px solid #a71a1a;// Border style for card style 2 sections
$card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color: #1d262a; // Background color for card section style 1
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
@@ -398,28 +423,23 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #a7ffeb; // Background color for alerts
$alert-fore-color: #212121; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts
$alert-padding: 0.75rem; // Padding for alerts
$alert-margin: 0.5rem; // Margin for alerts
$alert-box-shadow: none; // Box shadow for alerts
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #fff176; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
$alert-variant2-fore-color: $fore-color; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #d1c661; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #a71a1a; // Border style for alert style 2
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$toast-name: 'toast'; // Class name for toast component
$toast-bottom: 1.5rem; // Bottom position for toasts
$toast-back-color: #acacac; // Background color for toasts
$toast-fore-color: #0c0c0c; // Text color for toasts
$toast-border-style: 0; // Border style for toasts
$toast-border-radius: 2rem; // Border radius for toasts
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
$toast-box-shadow: none; // Box shadow for toasts
$toast-style1-name: 'small'; // Class name for toast style 1
$toast-style1-border-style: 0; // Border style for toast style 1
$toast-style1-border-radius:1.5rem; // Border radius for toast style 1
$toast-style1-padding: 0.5rem 1rem; // Padding for toast style 1
$toast-style2-name: 'large'; // Class name for toast style 2
$toast-style2-border-style: 0; // Border style for toast style 2
$toast-style2-border-radius:3rem; // Border radius for toast style 2
$toast-style2-padding: 1.125rem 2.25rem; // Padding for toast style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #0c0c0c; // Text color for tooltips
@@ -429,9 +449,7 @@ $tooltip-padding: 0.5rem; // Padding for tooltips
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@@ -450,12 +468,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
$progress-variant1-fore-color:#e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color:#689f38; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 0.125rem; // Height for <progress> style 1
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
$spinner-donut-back-color: #39444a; // Background color for donut spinner
@@ -482,7 +494,7 @@ $breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
$close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 2rem; // Size of the close icon
$close-icon-size: 1.5rem; // Size of the close icon
$close-icon-back-color: #39444a; // Background color for the close icon
$close-icon-fore-color: #fafafa; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style
@@ -490,17 +502,9 @@ $border-radial-style1-name: 'rounded'; // Class name for radial border sty
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
@@ -525,7 +529,6 @@ $include-center-block-name: false; // Should center block be included? (
// that module and marked as such below it.
@import '../mini/core';
@import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
@@ -542,6 +545,7 @@ $include-center-block-name: false; // Should center block be included? (
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*
@@ -552,6 +556,8 @@ $include-center-block-name: false; // Should center block be included? (
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
@@ -568,10 +574,10 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
$toast-style1-border-radius, $toast-style1-padding);
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
$toast-style2-border-radius, $toast-style2-padding);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.
@@ -579,9 +585,6 @@ $include-center-block-name: false; // Should center block be included? (
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
$spinner-donut-variant1-fore-color);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
@@ -600,8 +603,5 @@ $include-center-block-name: false; // Should center block be included? (
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
$responsive-padding-medium-value, $responsive-padding-large-value);
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
@include make-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

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

@@ -5,7 +5,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@@ -16,6 +16,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1
@@ -145,54 +146,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #20292e; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #eceff1; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #c9c9c9; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 0.75rem 1rem; // Padding for <nav>
$nav-margin: 0.5rem; // Margin for <nav>
$nav-box-shadow: none; // Box shadow for <nav>
$nav-link-fore-color: #145caf; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
@@ -291,6 +244,72 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #20292e; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #eceff1; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #c9c9c9; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 0.75rem 1rem; // Padding for <nav>
$nav-margin: 0.5rem; // Margin for <nav>
$nav-box-shadow: none; // Box shadow for <nav>
$nav-link-fore-color: #145caf; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: $nav-back-color; // Background color of the drawer component
$drawer-border-style: $nav-border-style; // Border style of the drawer component
$drawer-border-radius: 0; // Border radius of the drawer component
$drawer-width: 320px; // Width of the drawer component
$drawer-padding: 0; // Padding of the drawer component
$drawer-box-shadow: none; // Box shadow for the drawer component
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
@@ -339,12 +358,18 @@ $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color for card style 1
$card-style1-fore-color: #fafafa; // Text color for card style 1
$card-style1-border-style: 1px solid #0c0c0c; // Border style for card style 1
$card-style1-name: 'warning'; // Class name for card style 1
$card-style1-back-color: #ffca28; // Background color for card style 1
$card-style1-fore-color: $fore-color; // Text color for card style 1
$card-style1-border-style: 1px solid #e8b825; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style:1px solid #424242;// Border style for card style 1 sections
$card-style1-section-border-style:1px solid #e8b825;// Border style for card style 1 sections
$card-style2-name: 'error'; // Class name for card style 2
$card-style2-back-color: #b71c1c; // Background color for card style 2
$card-style2-fore-color: #fafafa; // Text color for card style 2
$card-style2-border-style: 1px solid #a71a1a; // Border style for card style 2
$card-style2-border-radius: 0; // Border radius for card style 2
$card-style2-section-border-style:1px solid #a71a1a;// Border style for card style 2 sections
$card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
@@ -398,40 +423,33 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #d1e6f3; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts
$alert-padding: 0.75rem; // Padding for alerts
$alert-margin: 0.5rem; // Margin for alerts
$alert-box-shadow: none; // Box shadow for alerts
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #ffca28; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
$alert-variant2-fore-color: #fafafa; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #e8b825; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #a71a1a; // Border style for alert style 2
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$toast-name: 'toast'; // Class name for toast component
$toast-bottom: 1.5rem; // Bottom position for toasts
$toast-back-color: #424242; // Background color for toasts
$toast-fore-color: #fafafa; // Text color for toasts
$toast-border-style: 0; // Border style for toasts
$toast-border-radius: 2rem; // Border radius for toasts
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
$toast-box-shadow: none; // Box shadow for toasts
$toast-style1-name: 'small'; // Class name for toast style 1
$toast-style1-border-style: 0; // Border style for toast style 1
$toast-style1-border-radius:1.5rem; // Border radius for toast style 1
$toast-style1-padding: 0.5rem 1rem; // Padding for toast style 1
$toast-style2-name: 'large'; // Class name for toast style 2
$toast-style2-border-style: 0; // Border style for toast style 2
$toast-style2-border-radius:3rem; // Border radius for toast style 2
$toast-style2-padding: 1.125rem 2.25rem; // Padding for toast style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fafafa; // Text color for tooltips
$tooltip-border-radius: 2px; // Border radius for tooltips
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
$tooltip-padding: 0.5rem; // Padding for tooltips
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
$tooltip-padding: 0.5rem; // Padding for tooltips
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@@ -450,12 +468,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
$progress-variant1-fore-color:#e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color:#689f38; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 0.125rem; // Height for <progress> style 1
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner
@@ -482,7 +494,7 @@ $breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
$close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 2rem; // Size of the close icon
$close-icon-size: 1.5rem; // Size of the close icon
$close-icon-back-color: #e0e0e0; // Background color for the close icon
$close-icon-fore-color: #212121; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style
@@ -490,17 +502,9 @@ $border-radial-style1-name: 'rounded'; // Class name for radial border sty
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
@@ -525,7 +529,6 @@ $include-center-block-name: false; // Should center block be included? (
// that module and marked as such below it.
@import '../mini/core';
@import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
@@ -542,6 +545,7 @@ $include-center-block-name: false; // Should center block be included? (
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*
@@ -552,6 +556,8 @@ $include-center-block-name: false; // Should center block be included? (
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
@@ -568,10 +574,10 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
$toast-style1-border-radius, $toast-style1-padding);
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
$toast-style2-border-radius, $toast-style2-padding);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.
@@ -579,9 +585,6 @@ $include-center-block-name: false; // Should center block be included? (
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
$spinner-donut-variant1-fore-color);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
@@ -600,8 +603,5 @@ $include-center-block-name: false; // Should center block be included? (
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
$responsive-padding-medium-value, $responsive-padding-large-value);
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
@include make-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

79
src/flavors/mini-lite.scss
View File

@@ -7,7 +7,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@@ -18,6 +18,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1
@@ -136,40 +137,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #20292e; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements will not be stylized. If
// you set it to `true`, please refer to a full flavor to find the required variable definitions.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
@@ -259,6 +226,42 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for navigational elements
$header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-link-hover-color: #20292e; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
$include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - Due to the fact that the values of $include-nav-styles and $include-drawer are set to `false`, <nav> elements
// will not be stylized and the drawer component will not be included. If you set it to `true`, please refer to a full
// flavor to find the required variable definitions.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
@@ -335,10 +338,10 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$include-alerts: false; // [Hidden flag override] Should alerts be included? (`true`/`false``) [1]
$include-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
// Notes:
// [1] - Due to the values of $include-alerts and $include-tooltip being set to `false`,
// [1] - Due to the values of $include-toast and $include-tooltip being set to `false`,
// no styling is provided for these elements. If you want to enable them, please
// refer to a full flavor file for variable definitions.
// Variables for progress elements and spinners
@@ -387,7 +390,6 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
// help on how to enable them.
@import '../mini/core';
@import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
@@ -402,6 +404,7 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*

199
src/flavors/mini-nord.scss
View File

@@ -5,7 +5,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
// Basic rules for body and typography
@@ -17,6 +17,7 @@ $base-font-family: // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2em; // Font size of h1
@@ -150,56 +151,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 44px; // Height for <header>
$header-back-color: #2E3440; // Background color for <header>
$header-fore-color: #ECEFF4; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 2px 8px; // Padding for <header>
$header-box-shadow: // Box shadow for <header>
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.2; // Line height for <header>'s logo
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #37474f; // Hover color for <header>'s links
$header-link-margin: 2px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #ECEFF4; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
$footer-back-color: #434C5E; // Background color for <footer>
$footer-fore-color: #ECEFF4; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #ECEFF4; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
@@ -301,6 +252,74 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for navigational elements
$header-height: 44px; // Height for <header>
$header-back-color: #2E3440; // Background color for <header>
$header-fore-color: #ECEFF4; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 2px 8px; // Padding for <header>
$header-box-shadow: // Box shadow for <header>
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.2; // Line height for <header>'s logo
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #37474f; // Hover color for <header>'s links
$header-link-margin: 2px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #ECEFF4; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: $nav-back-color; // Background color of the drawer component
$drawer-border-style: $nav-border-style; // Border style of the drawer component
$drawer-border-radius: 0; // Border radius of the drawer component
$drawer-width: 320px; // Width of the drawer component
$drawer-padding: 0; // Padding of the drawer component
$drawer-box-shadow: none; // Box shadow for the drawer component
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
$drawer-normal-height: calc(100vh - 48px); // Height of the drawer component when shown as normal menu
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
$drawer-toggle-font-size: 40px; // Font size for the drawer component's toggle icon
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
$drawer-toggle-top: 7px; // Top position for the drawer component's toggle icon
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
$drawer-close-top: 12px; // Top position of the drawer component's close icon
$drawer-close-right: 4px; // Right position of the drawer component's close icon
$footer-back-color: #434C5E; // Background color for <footer>
$footer-fore-color: #ECEFF4; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables
$table-border-style: 1px solid #D8DEE9; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
@@ -351,12 +370,18 @@ $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color for card style 1
$card-style1-fore-color: #ECEFF4; // Text color for card style 1
$card-style1-border-style: 1px solid #3B4252; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style: 1px solid #434C5E; // Border style for card style 1 sections
$card-style1-name: 'warning'; // Class name for card style 1
$card-style1-back-color: #EBCB8B; // Background color for card style 1
$card-style1-fore-color: $fore-color; // Text color for card style 1
$card-style1-border-style: 1px solid #D08770; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style:1px solid #D08770;// Border style for card style 1 sections
$card-style2-name: 'error'; // Class name for card style 2
$card-style2-back-color: #BF616A; // Background color for card style 2
$card-style2-fore-color: #ECEFF4; // Text color for card style 2
$card-style2-border-style: 1px solid #BF616A; // Border style for card style 2
$card-style2-border-radius: 0; // Border radius for card style 2
$card-style2-section-border-style:1px solid #BF616A;// Border style for card style 2 sections
$card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
@@ -412,28 +437,23 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding for <mark> style 2
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #ECEFF4; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #D8DEE9; // Border style for alerts
$alert-border-radius: 0; // Border radius for alerts
$alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 1px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow for alerts
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #EBCB8B; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #BF616A; // Background color for alert variant 2
$alert-variant2-fore-color: #ECEFF4; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #D08770; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #BF616A; // Border style for alert style 2
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
$include-toast: true; // Should the toast component be included? (`true`/`false`)
$toast-name: 'toast'; // Class name for toast component
$toast-bottom: 24px; // Bottom position for toasts
$toast-back-color: #424242; // Background color for toasts
$toast-fore-color: #ECEFF4; // Text color for toasts
$toast-border-style: 0; // Border style for toasts
$toast-border-radius: 32px; // Border radius for toasts
$toast-padding: 12px 24px; // Padding for toasts
$toast-box-shadow: none; // Box shadow for toasts
$toast-style1-name: 'small'; // Class name for toast style 1
$toast-style1-border-style: 0; // Border style for toast style 1
$toast-style1-border-radius:24px; // Border radius for toast style 1
$toast-style1-padding: 8px 16px; // Padding for toast style 1
$toast-style2-name: 'large'; // Class name for toast style 2
$toast-style2-border-style: 0; // Border style for toast style 2
$toast-style2-border-radius:48px; // Border radius for toast style 2
$toast-style2-padding: 18px 36px; // Padding for toast style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
@@ -467,12 +487,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
$progress-variant1-fore-color: #BF616A; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
@@ -543,7 +557,6 @@ $include-center-block-name: false; // Should center block be included? (`
// that module and marked as such below it.
@import '../mini/core';
@import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
@@ -560,6 +573,7 @@ $include-center-block-name: false; // Should center block be included? (`
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*
@@ -570,6 +584,8 @@ $include-center-block-name: false; // Should center block be included? (`
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
@@ -586,10 +602,10 @@ $include-center-block-name: false; // Should center block be included? (`
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
$toast-style1-border-radius, $toast-style1-padding);
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
$toast-style2-border-radius, $toast-style2-padding);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.
@@ -597,9 +613,6 @@ $include-center-block-name: false; // Should center block be included? (`
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
$spinner-donut-variant1-fore-color);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,

196
src/flavors/mini-sucroa.scss
View File

@@ -5,7 +5,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
@@ -18,6 +18,7 @@ $base-font-family: 'Libre Baskerville', serif; // Default font stack for all e
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.7; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2.2em; // Font size of h1
@@ -149,53 +150,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 48px; // Height for <header>
$header-back-color: #211423; // Background color for <header>
$header-fore-color: #fffddc; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 3px 10px; // Padding for <header>
$header-box-shadow: // Box shadow for <header>
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.5; // Line height for <header>'s logo
$header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #493e4b; // Hover color for <header>'s links
$header-link-margin: 3px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #e8deff; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #a9a2ba; // Border style for <nav>
$nav-border-radius: 2px; // Border radius for <nav>
$nav-padding: 12px 10px 18px 22px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$nav-link-fore-color: #6979c6; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left:14px; // Left padding to add to subcategories
$nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$footer-back-color: #211423; // Background color for <footer>
$footer-fore-color: #fffddc; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 90%; // Font size for <footer>
$footer-margin: 22px 0 0; // Margin for <footer>
$footer-padding: 24px 10px 14px; // Padding for <footer>
$footer-link-fore-color: #7480b3; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #e8deff; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
@@ -297,6 +251,71 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for navigational elements
$header-height: 48px; // Height for <header>
$header-back-color: #211423; // Background color for <header>
$header-fore-color: #fffddc; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 3px 10px; // Padding for <header>
$header-box-shadow: // Box shadow for <header>
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.5; // Line height for <header>'s logo
$header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #493e4b; // Hover color for <header>'s links
$header-link-margin: 3px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #e8deff; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #a9a2ba; // Border style for <nav>
$nav-border-radius: 2px; // Border radius for <nav>
$nav-padding: 12px 10px 18px 22px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$nav-link-fore-color: #6979c6; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left:14px; // Left padding to add to subcategories
$nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: $nav-back-color; // Background color of the drawer component
$drawer-border-style: $nav-border-style; // Border style of the drawer component
$drawer-border-radius: 2px; // Border radius of the drawer component
$drawer-width: 320px; // Width of the drawer component
$drawer-padding: 0; // Padding of the drawer component
$drawer-box-shadow: none; // Box shadow for the drawer component
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
$drawer-normal-height: calc(100vh - 54px); // Height of the drawer component when shown as normal menu
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
$drawer-toggle-font-size: 40px; // Font size for the drawer component's toggle icon
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
$drawer-toggle-top: 9px; // Top position for the drawer component's toggle icon
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
$drawer-close-top: 12px; // Top position of the drawer component's close icon
$drawer-close-right: 4px; // Right position of the drawer component's close icon
$footer-back-color: #211423; // Background color for <footer>
$footer-fore-color: #fffddc; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 90%; // Font size for <footer>
$footer-margin: 22px 0 0; // Margin for <footer>
$footer-padding: 24px 10px 14px; // Padding for <footer>
$footer-link-fore-color: #7480b3; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables
$table-border-style: 1px solid #a9a2ba; // Border style for <table> and children
$table-border-radius: 2px; // Border radius for <table> and children
@@ -345,12 +364,18 @@ $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color for card style 1
$card-style1-fore-color: #fffddc; // Text color for card style 1
$card-style1-border-style: 1px solid #190f1a; // Border style for card style 1
$card-style1-name: 'warning'; // Class name for card style 1
$card-style1-back-color: #fe9992; // Background color for card style 1
$card-style1-fore-color: $fore-color; // Text color for card style 1
$card-style1-border-style: 1px solid #fedb64; // Border style for card style 1
$card-style1-border-radius: 2px; // Border radius for card style 1
$card-style1-section-border-style:1px solid #493e4b;// Border style for card style 1 sections
$card-style1-section-border-style:1px solid #fedb64;// Border style for card style 1 sections
$card-style2-name: 'error'; // Class name for card style 2
$card-style2-back-color: #ac354e; // Background color for card style 2
$card-style2-fore-color: #fffddc; // Text color for card style 2
$card-style2-border-style: 1px solid #86293d; // Border style for card style 2
$card-style2-border-radius: 2px; // Border radius for card style 2
$card-style2-section-border-style:1px solid #86293d;// Border style for card style 2 sections
$card-section-style1-name: 'light'; // Class name for card section style 1
$card-section-style1-back-color: #f6e5e6; // Background color for card section style 1
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
@@ -406,29 +431,23 @@ $mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding for <mark> style 2
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #e8deff; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #a9a2ba; // Border style for alerts
$alert-border-radius: 2px; // Border radius for alerts
$alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 4px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow for alerts
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
$alert-include-animated: false; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #fe9992; // Background color for alert variant 1
$alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #ac354e; // Background color for alert variant 2
$alert-variant2-fore-color: #fffddc; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #fe6d64; // Border style for alert style 1
$alert-style1-border-radius:$alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #86293d; // Border style for alert style 2
$alert-style2-border-radius:$alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$toast-name: 'toast'; // Class name for toast component
$toast-bottom: 24px; // Bottom position for toasts
$toast-back-color: #424242; // Background color for toasts
$toast-fore-color: #fffddc; // Text color for toasts
$toast-border-style: 0; // Border style for toasts
$toast-border-radius: 32px; // Border radius for toasts
$toast-padding: 12px 24px; // Padding for toasts
$toast-box-shadow: none; // Box shadow for toasts
$toast-style1-name: 'small'; // Class name for toast style 1
$toast-style1-border-style: 0; // Border style for toast style 1
$toast-style1-border-radius:24px; // Border radius for toast style 1
$toast-style1-padding: 8px 16px; // Padding for toast style 1
$toast-style2-name: 'large'; // Class name for toast style 2
$toast-style2-border-style: 0; // Border style for toast style 2
$toast-style2-border-radius:48px; // Border radius for toast style 2
$toast-style2-padding: 18px 36px; // Padding for toast style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #fffddc; // Text color for tooltips
@@ -439,9 +458,7 @@ $tooltip-box-shadow: // Box shadow for tooltip-box-shadow
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// Variables for progress elements and spinners
@@ -461,12 +478,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
$progress-variant1-fore-color: #d2405f; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color: #2b866d; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness: 4px; // Border thickness for donut spinner
$spinner-donut-back-color: #d6daef; // Background color for donut spinner
@@ -541,7 +552,6 @@ $include-center-block-name: false; // Should center block be included? (
// that module and marked as such below it.
@import '../mini/core';
@import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
@@ -558,6 +568,7 @@ $include-center-block-name: false; // Should center block be included? (
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*
@@ -568,6 +579,8 @@ $include-center-block-name: false; // Should center block be included? (
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
@@ -584,10 +597,10 @@ $include-center-block-name: false; // Should center block be included? (
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
$toast-style1-border-radius, $toast-style1-padding);
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
$toast-style2-border-radius, $toast-style2-padding);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.
@@ -595,9 +608,6 @@ $include-center-block-name: false; // Should center block be included? (
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
$spinner-donut-variant1-fore-color);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,

138
src/mini/_contextual.scss
View File

@@ -1,12 +1,10 @@
/*
Definitions for contextual background elements and alerts.
Definitions for contextual background elements, toasts and tooltips.
*/
// Contextual background elements use the mark element as their base.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
$include-alerts: true !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: true !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
$toast-name: 'toast' !default; // Class name for the toasts.
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
@@ -50,58 +48,30 @@ mark {
display: inline-block; // Can be used to deal with some problems.
}
}
// Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn off if you want to disable the alert component.
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
// Default styling for toasts. Use mixins for alternate styles
@if $include-toast {
.#{$toast-name} {
position: fixed;
background: $toast-back-color;
bottom: $toast-bottom;
left: 50%;
transform: translate(-50%, -50%);
@if $toast-fore-color != $fore-color {
color: $toast-fore-color;
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
@if $toast-border-style != 0 {
border: $toast-border-style;
}
}
}
@if $include-alerts { // Turn off if you want to disable the alert component.
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
@if $toast-border-radius != 0 {
border-radius: $toast-border-radius;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
@if $toast-padding != 0 {
padding: $toast-padding;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
@if $toast-box-shadow != none {
box-shadow: $toast-box-shadow;
}
z-index: 1111;
}
}
// Default styling for tooltips. Use mixins for alternate styles
@@ -190,3 +160,67 @@ mark {
}
}
}
// [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
$include-alerts: false !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
// Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn on if you want to enable the alert component.
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$alert-back-color: #d1e6f3 !default; // Background color for alerts
$alert-fore-color: $fore-color !default; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0 !default; // Border style for alerts
$alert-border-radius: 0 !default; // Border radius for alerts
$alert-padding: 0.75rem !default; // Padding for alerts
$alert-margin: 0.5rem !default; // Margin for alerts
$alert-box-shadow: none !default; // Box shadow for alerts
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
}
}
}

181
src/mini/_contextual_mixins.scss
View File

@@ -48,6 +48,119 @@
}
}
}
// Mixin for alternate toast (toast color variants).
// Variables:
// - $toast-alt-name : The name of the class used for the alternate toast.
// - $toast-alt-back-color : The background color of the alternate toast.
// - $toast-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the toast.
@mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-back-color != $toast-back-color {
background: $toast-alt-back-color;
}
@if $toast-alt-fore-color != $toast-fore-color {
color: $toast-alt-fore-color;
}
}
}
// Mixin for alternate toast styles (toast style variants).
// Variables:
// - $toast-alt-name : The name of the class used for the alternate toast style.
// - $toast-alt-border-style : The border style of the alternate toast style.
// - $toast-alt-border-radius : Border radius of the alternate toast style.
// - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding.
// - $toast-alt-box-shadow : (Optional) Box shadow of the alretnate toast style. Defaults to the toast's box shadow.
@mixin make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius,
$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-border-style != $toast-border-style {
border: $toast-alt-border-style;
}
@if $toast-alt-border-radius != $toast-border-radius {
border-radius: $toast-alt-border-radius;
}
@if $toast-alt-padding != $toast-padding {
padding: $toast-alt-padding;
}
@if $toast-alt-box-shadow != $toast-box-shadow {
box-shadow: $toast-alt-box-shadowbox-shadow;
}
}
}
// Mixin for alternate tooltip (tooltip color variants).
// Variables:
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-back-color != $tooltip-back-color {
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-alt-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-alt-back-color;
}
}
&:after {
@if $tooltip-alt-back-color != $tooltip-back-color {
background: $tooltip-alt-back-color;
}
@if $tooltip-alt-fore-color != $tooltip-fore-color {
color: $tooltip-alt-fore-color;
}
}
}
}
// Mixin for alternate tooltip styles (tooltip style variants).
// Variables:
// - $tooltip-alt-name : The name of the class used for the alternate tooltip style.
// - $tooltip-alt-tail-size : The border style of the alternate tooltip style.
// - $tooltip-alt-border-radius : Border radius of the alternate tooltip style.
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before {
border-width: $tooltip-alt-tail-size;
left: calc(50% - #{$tooltip-alt-tail-size});
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-alt-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-alt-tail-size;
}
}
&:after {
@if $tooltip-alt-border-radius != $tooltip-border-radius {
border-radius: $tooltip-alt-border-radius;
}
@if $tooltip-alt-padding != $tooltip-padding {
padding: $tooltip-alt-padding;
}
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
box-shadow: $tooltip-alt-box-shadow;
}
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert (alert color variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert.
@@ -66,6 +179,7 @@
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert styles (alert style variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert style.
@@ -98,70 +212,3 @@
}
}
}
// Mixin for alternate tooltip (tooltip color variants).
// Variables:
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-back-color != $tooltip-back-color {
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-alt-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-alt-back-color;
}
}
&:after {
@if $tooltip-alt-back-color != $tooltip-back-color {
background: $tooltip-alt-back-color;
}
@if $tooltip-alt-fore-color != $tooltip-fore-color {
color: $tooltip-alt-fore-color;
}
}
}
}
// Mixin for alternate tooltip styles (tooltip style variants).
// Variables:
// - $tooltip-alt-name : The name of the class used for the alternate tooltip style.
// - $tooltip-alt-tail-size : The border style of the alternate tooltip style.
// - $tooltip-alt-border-radius : Border radius of the alternate tooltip style.
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before {
border-width: $tooltip-alt-tail-size;
left: calc(50% - #{$tooltip-alt-tail-size});
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-alt-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-alt-tail-size;
}
}
&:after {
@if $tooltip-alt-border-radius != $tooltip-border-radius {
border-radius: $tooltip-alt-border-radius;
}
@if $tooltip-alt-padding != $tooltip-padding {
padding: $tooltip-alt-padding;
}
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
box-shadow: $tooltip-alt-box-shadow;
}
}
}
}

33
src/mini/_core.scss
View File

@@ -3,6 +3,11 @@
*/
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography.
$fluid-type-large-type: 18px !default; // Largest root font size for fluid typography.
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
$make-heading-smalltext-block:false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
@@ -10,10 +15,32 @@ $add-pre-element-sidebar: false !default; // Should a fancy sidebar be adde
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
html {
font-size: $base-root-font-size; // Set root's font sizing.
// Base typography rules
@if $use-fluid-typography {
// Calculation of local variables (unitless values needed for the calculation of fluid typography)
$_fluid-type-unitless-size-change: ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
$_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
html {
font-size: #{$fluid-type-small-type};
}
@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
html {
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
}
}
@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
html {
font-size: #{$fluid-type-large-type};
}
}
}
@else {
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
}
@if $apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};

80
src/mini/_grid.scss
View File

@@ -43,86 +43,6 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
// Basic definitions for rows defining column layouts.
// @if $include-parent-layout {
// @if $use-four-step-grid {
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > *{
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// @media screen and (min-width: #{$grid-small-breakpoint}){
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// }
// @media screen and (min-width: #{$grid-medium-breakpoint}){
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// }
// @media screen and (min-width: #{$grid-large-breakpoint}){
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// }
// }
// @else {
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// @media screen and (min-width: #{$grid-medium-breakpoint}){
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// }
// @media screen and (min-width: #{$grid-large-breakpoint}){
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
// box-sizing: border-box;
// // Old syntax
// -webkit-box-flex: 0;
// // New syntax
// -webkit-flex: 0 0 auto;
// flex: 0 0 auto;
// padding: $grid-column-padding;
// }
// }
// }
// }
// Legacy grid system definitions.
@if $use-four-step-grid {
@if $include-parent-layout {

88
src/mini/_navigation.scss
View File

@@ -14,12 +14,22 @@ $nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
$include-drawer: true !default; // [Hidden flag] Should the drawer component be included? (`true`/`false`)
$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-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$drawer-right-name: 'right' !default; // Class name for the right variant of the drawer component.
$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: 'close' !default; // Class name of the close element for the drawer component.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
// The below variable is used to fix the display problem of the <header> element when used as a responsive row
$grid-row-name: 'row' !default; // [External flag - grid] Class name for the grid system rows.
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
$button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
@@ -102,6 +112,10 @@ header {
text-decoration: none;
}
}
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
}
// Navigation sidebar styling.
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
@@ -206,3 +220,77 @@ footer {
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
}
// Responsive drawer component
@if $include-drawer {
.#{$drawer-toggle-name}:before {
position: relative;
top: $drawer-toggle-top;
font-family: sans-serif;
font-size: $drawer-toggle-font-size;
line-height: $drawer-toggle-line-height;
content: '\2261';
}
.#{$drawer-name} {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: $drawer-back-color;
@if $drawer-border-style != 0 {
border: $drawer-border-style;
}
@if $drawer-border-radius != 0 {
border-radius: $drawer-border-radius;
}
margin: 0;
@if $drawer-padding != 0 {
padding: $drawer-padding;
}
@if $drawer-box-shadow != none {
box-shadow: $drawer-box-shadow;
}
z-index: 1110;
&:not(.#{$drawer-right-name}) {
left: -$drawer-width;
transition: left 0.3s;
}
&.#{$drawer-right-name} {
right: -$drawer-width;
transition: right 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: $drawer-close-top;
right: $drawer-close-right;
z-index: 1111;
padding: 0; // Fixes the extra padding added from <label> styling.
}
}
@media screen and (max-width: #{$drawer-width}) {
.#{$drawer-name} {
width: 100%;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
display: none;
}
}
[type="checkbox"]:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
left: 0;
}
[type="checkbox"]:checked + .#{$drawer-name}.#{$drawer-right-name} {
right: 0;
}
}

30
src/mini/_utility.scss
View File

@@ -109,12 +109,12 @@ $style-link-active-state: false !default; // [External flag - core] Should
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
width: $close-icon-size;
font-family: sans-serif;
font-size: $close-icon-size;
text-overflow: clip;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
@@ -129,24 +129,10 @@ $style-link-active-state: false !default; // [External flag - core] Should
background: rgba($close-icon-back-color,1);
}
}
&:before, &:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: $close-icon-fore-color;
}
&:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
&:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
}
}

10
src/mini/_utility_mixins.scss
View File

@@ -122,29 +122,29 @@
@if $hidden-use-four-step-grid {
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
display: none;
display: none !important;
}
}
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none;
display: none !important;
}
}
}
@else {
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none;
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;
display: none !important;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none;
display: none !important;
}
}
}