mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-01 19:40:35 +02:00
Core restructure to move imports to the flavor files, mixin usage changed inside flavor files, updated doc pages and live version files
This commit is contained in:
Angelos Chalaris
@@ -1,5 +1,10 @@
|
||||
# Changelog
|
||||
|
||||
## v2.0.1
|
||||
|
||||
- Updated module structure. `_core.scss` no longer contains all `@import` statements, but they are now included in the flavor files.
|
||||
- Updated documentation for customization to reflect said changes.
|
||||
|
||||
## v2.0.0
|
||||
|
||||
- New version, rebuilt from scratch.
|
||||
|
||||
25
README.md
25
README.md
@@ -1,4 +1,4 @@
|
||||
# mini.css v2.0.0
|
||||
# mini.css v2.0.1
|
||||
## A minimal, responsive, style-agnostic CSS toolkit
|
||||
|
||||
|
||||
@@ -28,7 +28,28 @@ If you want to develop your own flavor or tweak an existing one, head over to th
|
||||
|
||||
## Contributing
|
||||
|
||||
If you develop a flavor or module, please submit a pull request.
|
||||
### Flavors
|
||||
|
||||
To develop your own flavor:
|
||||
|
||||
- Fork into your own repository.
|
||||
- Add a flavor file in the `src/flavors` folder by duplicating an existing file and renaming it to whatever you want to name it. **Make sure there are no naming conflicts between your flavor and any of the existing flavors**.
|
||||
- Edit the flavor file as you desire.
|
||||
- Submit a pull request. Please provide a brief description of your flavor and, if possible, a Codepen or some screenshots showcasing some of the styles in it.
|
||||
|
||||
To develop a module:
|
||||
|
||||
- Module contribution guidelines are very strict at the moment. New module will only be created upon request and **should always be in a new repository**, unless they are part of a Roadmap of a later version. Please submit an issue before developing a module or asking for new modules, as the discussion of said implementations is key to deciding the direction **mini.css** will follow in the future.
|
||||
|
||||
To develop some other part of **mini.css**:
|
||||
|
||||
- Create an issue for anything else.
|
||||
- If you make any changes, submit a pull request with as much information as possible about what you changed.
|
||||
|
||||
## Contributors
|
||||
|
||||
- Angelos Chalaris (@chalarangelo)
|
||||
- Rory Primrose (@roryprimrose)
|
||||
|
||||
## License
|
||||
|
||||
|
||||
348
dist/mini-default.css
vendored
348
dist/mini-default.css
vendored
@@ -2,7 +2,7 @@
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.0.0 (Fermion)
|
||||
mini.css version: v2.0.1 (Fermion)
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -817,6 +817,61 @@ input[type="file"] {
|
||||
background: #212121;
|
||||
content: ''; }
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: rgba(2, 119, 189, 0.9);
|
||||
color: #fafafa; }
|
||||
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:active,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary {
|
||||
background: rgba(198, 40, 40, 0.85);
|
||||
color: #fafafa; }
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
|
||||
[type="reset"].secondary:hover,
|
||||
[type="reset"].secondary:active,
|
||||
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
|
||||
background: #c62828; }
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary {
|
||||
background: rgba(85, 139, 47, 0.85);
|
||||
color: #fafafa; }
|
||||
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
|
||||
[type="reset"].tertiary:hover,
|
||||
[type="reset"].tertiary:active,
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
|
||||
background: #558b2f; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa; }
|
||||
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
|
||||
[type="reset"].inverse:hover,
|
||||
[type="reset"].inverse:active,
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small {
|
||||
border-radius: 1px;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large {
|
||||
border-radius: 4px;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
@@ -1038,6 +1093,37 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
@media (min-width: 320px) {
|
||||
.card {
|
||||
max-width: 320px; } }
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px; } }
|
||||
@media (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px; } }
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto; }
|
||||
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
border: 1px solid #424242; }
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #616161; }
|
||||
.card.inverse > .section:last-child {
|
||||
border-bottom: 0; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
@@ -1199,6 +1285,37 @@ mark {
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
mark.secondary {
|
||||
background: #f44336; }
|
||||
|
||||
mark.tertiary {
|
||||
background: #558b2f; }
|
||||
|
||||
mark.tag {
|
||||
border-radius: 200px;
|
||||
padding: 4px 8px; }
|
||||
|
||||
mark.inline-block {
|
||||
font-size: 100%;
|
||||
line-height: 1.35;
|
||||
padding: 5px; }
|
||||
|
||||
.alert.urgent {
|
||||
background: #ffca28; }
|
||||
|
||||
.alert.critical {
|
||||
background: #b71c1c;
|
||||
color: #fafafa; }
|
||||
|
||||
.alert.urgent {
|
||||
border: 1px solid #ff8f00; }
|
||||
|
||||
.alert.critical {
|
||||
border: 1px solid #d50000; }
|
||||
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
@@ -1256,6 +1373,62 @@ progress {
|
||||
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
|
||||
animation: spinner-donut-anim 1.2s linear infinite; }
|
||||
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60%; }
|
||||
|
||||
progress.secondary {
|
||||
color: #e53935; }
|
||||
progress.secondary::-webkit-progress-value {
|
||||
background: #e53935; }
|
||||
progress.secondary::-moz-progress-bar {
|
||||
background: #e53935; }
|
||||
|
||||
progress.tertiary {
|
||||
color: #689f38; }
|
||||
progress.tertiary::-webkit-progress-value {
|
||||
background: #689f38; }
|
||||
progress.tertiary::-moz-progress-bar {
|
||||
background: #689f38; }
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
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; }
|
||||
|
||||
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
|
||||
progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
.spinner-donut.large {
|
||||
border-width: 6px;
|
||||
width: 32px;
|
||||
height: 32px; }
|
||||
|
||||
/*
|
||||
Definitions for utilities and helper classes.
|
||||
*/
|
||||
@@ -1359,179 +1532,6 @@ ul.breadcrumbs {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important; }
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: rgba(2, 119, 189, 0.9);
|
||||
color: #fafafa; }
|
||||
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:active,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary {
|
||||
background: rgba(198, 40, 40, 0.85);
|
||||
color: #fafafa; }
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
|
||||
[type="reset"].secondary:hover,
|
||||
[type="reset"].secondary:active,
|
||||
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
|
||||
background: #c62828; }
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary {
|
||||
background: rgba(85, 139, 47, 0.85);
|
||||
color: #fafafa; }
|
||||
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
|
||||
[type="reset"].tertiary:hover,
|
||||
[type="reset"].tertiary:active,
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
|
||||
background: #558b2f; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa; }
|
||||
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
|
||||
[type="reset"].inverse:hover,
|
||||
[type="reset"].inverse:active,
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small {
|
||||
border-radius: 1px;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large {
|
||||
border-radius: 4px;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px; } }
|
||||
@media (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px; } }
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto; }
|
||||
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
border: 1px solid #424242; }
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #616161; }
|
||||
.card.inverse > .section:last-child {
|
||||
border-bottom: 0; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
mark.secondary {
|
||||
background: #f44336; }
|
||||
|
||||
mark.tertiary {
|
||||
background: #558b2f; }
|
||||
|
||||
mark.tag {
|
||||
border-radius: 200px;
|
||||
padding: 4px 8px; }
|
||||
|
||||
mark.inline-block {
|
||||
font-size: 100%;
|
||||
line-height: 1.35;
|
||||
padding: 5px; }
|
||||
|
||||
.alert.urgent {
|
||||
background: #ffca28; }
|
||||
|
||||
.alert.critical {
|
||||
background: #b71c1c;
|
||||
color: #fafafa; }
|
||||
|
||||
.alert.urgent {
|
||||
border: 1px solid #ff8f00; }
|
||||
|
||||
.alert.critical {
|
||||
border: 1px solid #d50000; }
|
||||
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60%; }
|
||||
|
||||
progress.secondary {
|
||||
color: #e53935; }
|
||||
progress.secondary::-webkit-progress-value {
|
||||
background: #e53935; }
|
||||
progress.secondary::-moz-progress-bar {
|
||||
background: #e53935; }
|
||||
|
||||
progress.tertiary {
|
||||
color: #689f38; }
|
||||
progress.tertiary::-webkit-progress-value {
|
||||
background: #689f38; }
|
||||
progress.tertiary::-moz-progress-bar {
|
||||
background: #689f38; }
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
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; }
|
||||
|
||||
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
|
||||
progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
.spinner-donut.large {
|
||||
border-width: 6px;
|
||||
width: 32px;
|
||||
height: 32px; }
|
||||
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Card</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Contextual</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Core</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Customization</title>
|
||||
<meta charset="utf-8">
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Modules & file structure</h3>
|
||||
<p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement at the very bottom of <code>_core.scss</code> and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the core module.</p>
|
||||
<p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Variables</h3>
|
||||
@@ -107,7 +107,7 @@
|
||||
<div class="col-sm-12">
|
||||
<br>
|
||||
<h2>Building a flavor</h2>
|
||||
<p>Creating your own flavor can be as easy or as complicated as your needs. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
|
||||
<p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Core</h3>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Flavors</title>
|
||||
<meta charset="utf-8">
|
||||
@@ -78,12 +78,12 @@
|
||||
<div class="col-sm">
|
||||
<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 the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css"</span>></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: 10px">
|
||||
<li class="card fluid">
|
||||
<h2 class="section double-padded">Default <small>mini-default</small></h2>
|
||||
<pre class="section double-padded" style="border-left:0; box-shadow: none;"><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"</span>></pre>
|
||||
<pre class="section double-padded" style="border-left:0; box-shadow: none;"><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css"</span>></pre>
|
||||
<p class="section double-padded">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners with blurred shadows to give it a material-like design. All of the colors used in this flavor are based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Grid</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title>
|
||||
<meta charset="utf-8">
|
||||
@@ -109,7 +109,7 @@
|
||||
<div class="col-sm">
|
||||
<h2>Setup & usage</h2>
|
||||
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Input Control</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Modules</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Navigation</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Progress</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Quick Reference</title>
|
||||
<meta charset="utf-8">
|
||||
@@ -108,7 +108,7 @@
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Tab</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Table</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Utility</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -693,3 +693,15 @@
|
||||
- Added OpenGraph info to all pages.
|
||||
- Doc page code cleanup.
|
||||
- Updated everything, releasing **v2.0.0**.
|
||||
|
||||
# v2.0.1 Development Log
|
||||
|
||||
## 20161222
|
||||
|
||||
- Merged the pull request from @roryprimrose.
|
||||
- Changed the `_typography.scss` file to `_core.scss`.
|
||||
- Moved the `@import` statements to the flavor files.
|
||||
- Updated `customization.html` to make sure the notes reflect the new structure of the toolkit.
|
||||
- Demo pages updated to use the latest version of the toolkit (v2.0.1).
|
||||
- Updated `CHANGELOG.md` to reflect new changes.
|
||||
- Moved mixin `@include` statements inside the flavor files.
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.0.0 (Fermion)
|
||||
mini.css version: v2.0.1 (Fermion)
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
@@ -525,9 +525,12 @@ $responsive-padding-large-value:6px 8px; // Padding value for responsiv
|
||||
$float-prefix: 'float'; // Prefix for float classes
|
||||
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
// Enable mini.css
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
// Use mixins for forms and inputs
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@@ -543,7 +546,8 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
$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);
|
||||
// Use mixins for cards
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@@ -557,7 +561,8 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
// Use mixins for contextual background elements and alerts
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@@ -571,7 +576,7 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
@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);
|
||||
// Use mixins for progress elements and spinners
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@@ -587,7 +592,7 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
// Use mixins for utilities and helper classes
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
|
||||
@@ -1,11 +1,409 @@
|
||||
// External file loading. You can comment out modules you do not want to use.
|
||||
@import 'typography';
|
||||
@import 'grid';
|
||||
@import 'navigation';
|
||||
@import 'input_control';
|
||||
@import 'table';
|
||||
@import 'card';
|
||||
@import 'tab';
|
||||
@import 'contextual';
|
||||
@import 'progress';
|
||||
@import 'utility';
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
@if $apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $body-margin;
|
||||
color: $fore-color;
|
||||
background: $back-color;
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
|
||||
article, aside, section, figcaption, figure, main, details, menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE.
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Hide overflow in IE.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Show overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Fix display in older versions of Android.
|
||||
$include-dfn-fix: true !default;
|
||||
@if $include-dfn-fix {
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: $heading-margin;
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: $heading-smalltext-fore-color;
|
||||
$make-heading-smalltext-block: false !default;
|
||||
@if $make-heading-smalltext-block {
|
||||
display: block;
|
||||
@if $heading-smalltext-b-top-margin != 0 {
|
||||
margin-top: $heading-smalltext-b-top-margin;
|
||||
}
|
||||
@if $heading-smalltext-b-font-size != $small-font-size {
|
||||
font-size: $heading-smalltext-b-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph-margin;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: $list-margin;
|
||||
padding-left: $list-left-padding;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: $horizontal-rule-margin;
|
||||
$horizontal-rule-fancy-style: false !default;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: 1px;
|
||||
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
height: 0;
|
||||
border-top: $horizontal-rule-border-style;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
@if $blockquote-back-color != $back-color {
|
||||
background: $blockquote-back-color;
|
||||
}
|
||||
@if $blockquote-fore-color != $fore-color {
|
||||
color: $blockquote-fore-color;
|
||||
}
|
||||
// Overwrite defaults
|
||||
margin: $blockquote-margin;
|
||||
padding: $blockquote-padding;
|
||||
@if $blockquote-sidebar-style != 0 {
|
||||
border-left: $blockquote-sidebar-style;
|
||||
}
|
||||
@if $blockquote-border-style != 0 {
|
||||
border: $blockquote-border-style;
|
||||
}
|
||||
@if $blockquote-border-radius != 0 {
|
||||
border-radius: $blockquote-border-radius;
|
||||
}
|
||||
@if $blockquote-box-shadow != none {
|
||||
box-shadow: $blockquote-box-shadow;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-font-size;
|
||||
@if $blockquote-cite-fore-color != $blockquote-fore-color {
|
||||
color: $blockquote-cite-fore-color;
|
||||
}
|
||||
left: $blockquote-cite-left-position;
|
||||
bottom: $blockquote-cite-bottom-position;
|
||||
content: '\2014 \2009'attr(cite);
|
||||
}
|
||||
}
|
||||
|
||||
$use-default-code-fonts: true !default;
|
||||
@if $use-default-code-fonts {
|
||||
code, kbd, pre, samp{
|
||||
font-family: monospace, monospace; // Applies display fix for all code elements
|
||||
}
|
||||
}
|
||||
@else {
|
||||
code, kbd, pre, samp{
|
||||
font-family: $code-font-family; // Display fix should be applied manually!
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@if $code-element-border-style != 0{
|
||||
border: $code-element-border-style;
|
||||
}
|
||||
@if $code-element-border-radius != 0 {
|
||||
border-radius: $code-element-border-radius;
|
||||
}
|
||||
@if $code-element-back-color != $back-color {
|
||||
background: $code-element-back-color;
|
||||
}
|
||||
@if $code-element-fore-color != $fore-color {
|
||||
color: $code-element-fore-color;
|
||||
}
|
||||
@if $code-element-padding != 0 {
|
||||
padding: $code-element-padding;
|
||||
}
|
||||
@if $code-element-box-shadow != none {
|
||||
box-shadow: $code-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
@if $pre-element-border-style != 0 {
|
||||
border: $pre-element-border-style;
|
||||
}
|
||||
@if $pre-element-border-radius != 0 {
|
||||
border-radius: $pre-element-border-radius;
|
||||
}
|
||||
@if $pre-element-back-color != $back-color {
|
||||
background: $pre-element-back-color;
|
||||
}
|
||||
@if $pre-element-fore-color != $fore-color {
|
||||
color: $pre-element-fore-color;
|
||||
}
|
||||
@if $pre-element-padding != 0 {
|
||||
padding: $pre-element-padding;
|
||||
}
|
||||
@if pre-element-margin != 0 {
|
||||
margin: $pre-element-margin;
|
||||
}
|
||||
$add-pre-element-sidebar: false !default;
|
||||
@if $add-pre-element-sidebar {
|
||||
border-left: $pre-element-sidebar-style;
|
||||
}
|
||||
@if $pre-element-box-shadow != none {
|
||||
box-shadow: $pre-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@if $kbd-element-border-style != 0 {
|
||||
border: $kbd-element-border-style;
|
||||
}
|
||||
@if $kbd-element-border-radius != 0 {
|
||||
border-radius: $kbd-element-border-radius;
|
||||
}
|
||||
@if $kbd-element-back-color != $back-color {
|
||||
background: $kbd-element-back-color;
|
||||
}
|
||||
@if $kbd-element-fore-color != $fore-color {
|
||||
color: $kbd-element-fore-color;
|
||||
}
|
||||
@if $kbd-element-padding != 0 {
|
||||
padding: $kbd-element-padding;
|
||||
}
|
||||
@if $kbd-element-box-shadow != none {
|
||||
box-shadow: $kbd-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
$style-samp-element: false !default;
|
||||
@if $style-samp-element {
|
||||
samp{
|
||||
@if $samp-element-border-style != 0 {
|
||||
border: $samp-element-border-style;
|
||||
}
|
||||
@if $samp-element-border-radius != 0 {
|
||||
border-radius: $samp-element-border-radius;
|
||||
}
|
||||
@if $samp-element-back-color != $back-color {
|
||||
background: $samp-element-back-color;
|
||||
}
|
||||
@if $samp-element-fore-color != $fore-color {
|
||||
color: $samp-element-fore-color;
|
||||
}
|
||||
@if $samp-element-padding != 0 {
|
||||
padding: $samp-element-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
||||
small, sup, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sub-font-size {
|
||||
small, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sup-font-size {
|
||||
small, sup {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $sup-font-size == $sub-font-size {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup, sub {
|
||||
font-size: $sup-font-size;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
$apply-link-underline: true !default;
|
||||
$apply-link-hover-fade: true !default;
|
||||
a{
|
||||
color: $link-fore-color;
|
||||
@if $apply-link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
@if $link-font-weight != 500 {
|
||||
font-weight: $link-font-weight;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3 ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
&:visited {
|
||||
color: $link-visited-fore-color;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
&:hover, &:focus, &:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus, &:active {
|
||||
color: $link-hover-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,409 +0,0 @@
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
@if $apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $body-margin;
|
||||
color: $fore-color;
|
||||
background: $back-color;
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
|
||||
article, aside, section, figcaption, figure, main, details, menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE.
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Hide overflow in IE.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Show overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Fix display in older versions of Android.
|
||||
$include-dfn-fix: true !default;
|
||||
@if $include-dfn-fix {
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: $heading-margin;
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: $heading-smalltext-fore-color;
|
||||
$make-heading-smalltext-block: false !default;
|
||||
@if $make-heading-smalltext-block {
|
||||
display: block;
|
||||
@if $heading-smalltext-b-top-margin != 0 {
|
||||
margin-top: $heading-smalltext-b-top-margin;
|
||||
}
|
||||
@if $heading-smalltext-b-font-size != $small-font-size {
|
||||
font-size: $heading-smalltext-b-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph-margin;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: $list-margin;
|
||||
padding-left: $list-left-padding;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: $horizontal-rule-margin;
|
||||
$horizontal-rule-fancy-style: false !default;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: 1px;
|
||||
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
height: 0;
|
||||
border-top: $horizontal-rule-border-style;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
@if $blockquote-back-color != $back-color {
|
||||
background: $blockquote-back-color;
|
||||
}
|
||||
@if $blockquote-fore-color != $fore-color {
|
||||
color: $blockquote-fore-color;
|
||||
}
|
||||
// Overwrite defaults
|
||||
margin: $blockquote-margin;
|
||||
padding: $blockquote-padding;
|
||||
@if $blockquote-sidebar-style != 0 {
|
||||
border-left: $blockquote-sidebar-style;
|
||||
}
|
||||
@if $blockquote-border-style != 0 {
|
||||
border: $blockquote-border-style;
|
||||
}
|
||||
@if $blockquote-border-radius != 0 {
|
||||
border-radius: $blockquote-border-radius;
|
||||
}
|
||||
@if $blockquote-box-shadow != none {
|
||||
box-shadow: $blockquote-box-shadow;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-font-size;
|
||||
@if $blockquote-cite-fore-color != $blockquote-fore-color {
|
||||
color: $blockquote-cite-fore-color;
|
||||
}
|
||||
left: $blockquote-cite-left-position;
|
||||
bottom: $blockquote-cite-bottom-position;
|
||||
content: '\2014 \2009'attr(cite);
|
||||
}
|
||||
}
|
||||
|
||||
$use-default-code-fonts: true !default;
|
||||
@if $use-default-code-fonts {
|
||||
code, kbd, pre, samp{
|
||||
font-family: monospace, monospace; // Applies display fix for all code elements
|
||||
}
|
||||
}
|
||||
@else {
|
||||
code, kbd, pre, samp{
|
||||
font-family: $code-font-family; // Display fix should be applied manually!
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@if $code-element-border-style != 0{
|
||||
border: $code-element-border-style;
|
||||
}
|
||||
@if $code-element-border-radius != 0 {
|
||||
border-radius: $code-element-border-radius;
|
||||
}
|
||||
@if $code-element-back-color != $back-color {
|
||||
background: $code-element-back-color;
|
||||
}
|
||||
@if $code-element-fore-color != $fore-color {
|
||||
color: $code-element-fore-color;
|
||||
}
|
||||
@if $code-element-padding != 0 {
|
||||
padding: $code-element-padding;
|
||||
}
|
||||
@if $code-element-box-shadow != none {
|
||||
box-shadow: $code-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
@if $pre-element-border-style != 0 {
|
||||
border: $pre-element-border-style;
|
||||
}
|
||||
@if $pre-element-border-radius != 0 {
|
||||
border-radius: $pre-element-border-radius;
|
||||
}
|
||||
@if $pre-element-back-color != $back-color {
|
||||
background: $pre-element-back-color;
|
||||
}
|
||||
@if $pre-element-fore-color != $fore-color {
|
||||
color: $pre-element-fore-color;
|
||||
}
|
||||
@if $pre-element-padding != 0 {
|
||||
padding: $pre-element-padding;
|
||||
}
|
||||
@if pre-element-margin != 0 {
|
||||
margin: $pre-element-margin;
|
||||
}
|
||||
$add-pre-element-sidebar: false !default;
|
||||
@if $add-pre-element-sidebar {
|
||||
border-left: $pre-element-sidebar-style;
|
||||
}
|
||||
@if $pre-element-box-shadow != none {
|
||||
box-shadow: $pre-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@if $kbd-element-border-style != 0 {
|
||||
border: $kbd-element-border-style;
|
||||
}
|
||||
@if $kbd-element-border-radius != 0 {
|
||||
border-radius: $kbd-element-border-radius;
|
||||
}
|
||||
@if $kbd-element-back-color != $back-color {
|
||||
background: $kbd-element-back-color;
|
||||
}
|
||||
@if $kbd-element-fore-color != $fore-color {
|
||||
color: $kbd-element-fore-color;
|
||||
}
|
||||
@if $kbd-element-padding != 0 {
|
||||
padding: $kbd-element-padding;
|
||||
}
|
||||
@if $kbd-element-box-shadow != none {
|
||||
box-shadow: $kbd-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
$style-samp-element: false !default;
|
||||
@if $style-samp-element {
|
||||
samp{
|
||||
@if $samp-element-border-style != 0 {
|
||||
border: $samp-element-border-style;
|
||||
}
|
||||
@if $samp-element-border-radius != 0 {
|
||||
border-radius: $samp-element-border-radius;
|
||||
}
|
||||
@if $samp-element-back-color != $back-color {
|
||||
background: $samp-element-back-color;
|
||||
}
|
||||
@if $samp-element-fore-color != $fore-color {
|
||||
color: $samp-element-fore-color;
|
||||
}
|
||||
@if $samp-element-padding != 0 {
|
||||
padding: $samp-element-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
||||
small, sup, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sub-font-size {
|
||||
small, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sup-font-size {
|
||||
small, sup {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $sup-font-size == $sub-font-size {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup, sub {
|
||||
font-size: $sup-font-size;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
$apply-link-underline: true !default;
|
||||
$apply-link-hover-fade: true !default;
|
||||
a{
|
||||
color: $link-fore-color;
|
||||
@if $apply-link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
@if $link-font-weight != 500 {
|
||||
font-weight: $link-font-weight;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3 ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
&:visited {
|
||||
color: $link-visited-fore-color;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
&:hover, &:focus, &:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus, &:active {
|
||||
color: $link-hover-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user