initial version

This commit is contained in:
Jonas Duri 2019-01-25 15:27:27 +01:00
parent b0e666f762
commit c26b7727aa
8 changed files with 2614 additions and 0 deletions

635
dist/terminal.css vendored Normal file
View File

@ -0,0 +1,635 @@
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: var(--invert-font-color);
--page-width: 70em;
--font-color: #151513;
--invert-font-color: #fff;
--secondary-color: #727680;
--tertiary-color: #727680;
--primary-color: rgb(206, 4, 105);
--success-color: #2ac24b;
--info-color: #ffc501;
--warning-color: #e7601c;
--error-color: #ce0404;
--progress-bar-background: #cacdd5;
--progress-bar-fill: #151513;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-rendering: geometricPrecision;
}
body {
font-size: var(--global-font-size);
color: var(--font-color);
line-height: var(--global-line-height);
margin: 0;
font-family: var(--font-stack);
word-wrap: break-word;
background-color: var(--background-color);
}
h1, h2, h3, h4, h5, h6, .logo {
line-height: 1.3em;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
pre {
display: block;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: var(--global-space);
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre code {
overflow-x: scroll;
padding: 0;
margin: 0;
display: inline-block;
min-width: 100%;
}
a {
display: -ms-flexbox;
display: flex;
cursor: pointer;
color: var(--primary-color);
text-decoration: none;
border-bottom: 1px solid var(--primary-color);
}
a:hover {
background-color: var(--primary-color);
color: var(--invert-font-color);
}
blockquote, code, em, h1, h2, h3, h4, h5, h6, strong, .logo {
font-size: var(--global-font-size);
font-style: normal;
font-family: var(--font-stack);
color: var(--font-color);
}
blockquote, code, em, strong {
line-height: var(--global-line-height);
}
blockquote, code, footer, h1, h2, h3, h4, h5, h6, header, li, ol, p, section, ul, .logo {
float: none;
margin: 0;
padding: 0;
}
blockquote, h1, ol, p, ul, .logo {
margin-top: calc(var(--global-space) * 2);
margin-bottom: calc(var(--global-space) * 2);
}
ul ul {
margin-top: 0;
margin-bottom: 0;
}
ol ol {
margin-top: 0;
margin-bottom: 0;
}
h1, .logo {
position: relative;
display: inline-block;
display: table-cell;
padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
margin: 0;
overflow: hidden;
font-weight: 600;
}
h1:after {
content: "====================================================================================================";
position: absolute;
bottom: var(--global-space);
left: 0;
}
h1 + *, .logo + * {
margin-top: 0;
}
h2, h3, h4, h5, h6 {
position: relative;
margin-bottom: var(--global-line-height);
font-weight: 600;
}
li {
position: relative;
display: block;
padding-left: calc(var(--global-space) * 2);
}
li:after {
position: absolute;
top: 0;
left: 0;
}
ul > li:after {
content: "-";
}
ol {
counter-reset: a;
}
ol > li:after {
content: counter(a) ".";
counter-increment: a;
}
ol li:nth-child(n+10):after {
left: -7px;
}
blockquote {
position: relative;
padding-left: calc(var(--global-space) * 2);
padding-left: 2ch;
overflow: hidden;
}
blockquote:after {
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
white-space: pre;
position: absolute;
top: 0;
left: 0;
line-height: var(--global-line-height);
color: #9ca2ab;
}
pre code:after, pre code:before {
content: "";
}
code {
font-weight: inherit;
}
code:after, code:before {
content: "`";
display: inline;
}
hr {
position: relative;
height: calc(var(--global-space) * 2);
overflow: hidden;
border: 0;
margin: calc(var(--global-space) * 2) 0;
}
hr:after {
content: "--------------------------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
line-height: calc(var(--global-space) * 2);
width: 100%;
word-wrap: break-word;
}
-ones ol > li:after {
content: "1.";
}
p {
margin: 0 0 var(--global-line-height);
color: var(--global-font-color);
}
.container {
max-width: var(--page-width);
}
.container, .container-fluid {
margin: 0 auto;
padding: 0 calc(var(--global-space) * 2);
}
img {
width: 100%;
}
.progress-bar {
height: 8px;
background-color: var(--progress-bar-background);
margin: 12px 0;
}
.progress-bar.progress-bar-show-percent {
margin-top: 38px;
}
.progress-bar-filled {
background-color: var(--progress-bar-fill);
height: 100%;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
position: relative;
width: 0;
}
.progress-bar-filled:before {
content: "";
border: 6px solid transparent;
border-top-color: var(--progress-bar-fill);
position: absolute;
top: -12px;
right: -6px;
}
.progress-bar-filled:after {
color: var(--progress-bar-fill);;
content: attr(data-filled);
display: block;
font-size: 12px;
white-space: nowrap;
position: absolute;
border: 6px solid transparent;
top: -38px;
right: 0;
-ms-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.progress-bar-no-arrow > .progress-bar-filled:before, .progress-bar-no-arrow > .progress-bar-filled:after {
content: "";
display: none;
visibility: hidden;
opacity: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: var(--global-line-height) 0;
color: var(--font-color);
font-size: var(--global-font-size);
}
table tfoot tr th {
font-weight: 500;
}
table caption {
font-size: 1em;
margin: 0 0 1em 0;
}
table td, table th {
vertical-align: top;
border: 1px solid var(--font-color);
line-height: var(--global-line-height);
padding: calc(var(--global-space) / 2);
font-size: 1em;
}
table thead th {
font-size: 1em;
}
table tbody td:first-child {
font-weight: 700;
color: #333;
}
.form {
width: 100%;
}
fieldset {
border: 1px solid var(--font-color);
padding: 1em;
}
label {
font-size: 1em;
color: var(--font-color)
}
input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
border: 1px dashed var(--font-color);
width: 100%;
padding: .5em;
font-size: 1em;
font-family: var(--font-stack);
}
input[type="email"]:active, input[type="text"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active
input[type="email"]:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
}
.form-group {
margin-bottom: var(--global-line-height);
overflow: auto;
}
textarea {
height: auto;
width: 100%;
resize: none;
border: 1px dashed var(--font-color);
width: 100%;
padding: .5em;
font-size: 1em;
font-family: var(--font-stack);
}
textarea:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
textarea:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
}
.btn {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
outline: none;
padding: .65em 2em;
font-size: 1em;
font-family: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
z-index: 1
}
.btn:active {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn.btn-ghost {
border-color: var(--font-color);
color: var(--font-color);
background-color: transparent;
}
.btn.btn-ghost:focus, .btn.btn-ghost:hover {
border-color: var(--tertiary-color);
color: var(--tertiary-color);
z-index: 2;
}
.btn.btn-ghost:hover {
background-color: transparent;
}
.btn-block {
width: 100%;
display: -ms-flexbox;
display: flex;
}
.btn-default {
background-color: var(--font-color);
border-color: var(--invert-font-color);
color: var(--invert-font-color);
}
.btn-default:focus:not(.btn-ghost), .btn-default:hover {
background-color: var(--tertiary-color);
color: var(--invert-font-color);
}
.btn-success {
color: var(--invert-font-color);
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success:focus:not(.btn-ghost), .btn-success:hover {
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success.btn-ghost {
border-color: var(--success-color);
color: var(--success-color);
}
.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
border-color: var(--success-color);
color: var(--success-color);
z-index: 2;
}
.btn-error {
color: var(--invert-font-color);
background-color: var(--error-color);
border: 1px solid var(--error-color);
}
.btn-error:focus:not(.btn-ghost), .btn-error:hover {
background-color: var(--error-color);
border-color: var(--error-color);
}
.btn-error.btn-ghost {
border-color: var(--error-color);
color: var(--error-color);
}
.btn-error.btn-ghost:focus, .btn-error.btn-ghost:hover {
border-color: var(--error-color);
color: var(--error-color);
z-index: 2;
}
.btn-warning {
color: var(--invert-font-color);
background-color: var(--warning-color);
border: 1px solid var(--warning-color);
}
.btn-warning:focus:not(.btn-ghost), .btn-warning:hover {
background-color: var(--warning-color);
border-color: var(--warning-color);
}
.btn-warning.btn-ghost {
border-color: var(--warning-color);
color: var(--warning-color);
}
.btn-warning.btn-ghost:focus, .btn-warning.btn-ghost:hover {
border-color: var(--warning-color);
color: var(--warning-color);
z-index: 2;
}
.btn-info {
color: var(--invert-font-color);
background-color: var(--info-color);
border: 1px solid var(--info-color);
}
.btn-info:focus:not(.btn-ghost), .btn-info:hover {
background-color: var(--info-color);
border-color: var(--info-color);
}
.btn-info.btn-ghost {
border-color: var(--info-color);
color: var(--info-color);
}
.btn-info.btn-ghost:focus, .btn-info.btn-ghost:hover {
border-color: var(--info-color);
color: var(--info-color);
z-index: 2;
}
.btn-primary {
color: var(--invert-font-color);
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-primary:focus:not(.btn-ghost), .btn-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary.btn-ghost {
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-primary.btn-ghost:focus, .btn-primary.btn-ghost:hover {
border-color: var(--primary-color);
color: var(--primary-color);
z-index: 2;
}
.btn-group {
overflow: auto;
}
.btn-group .btn {
float: left;
}
.btn-group .btn-ghost:not(:first-child) {
margin-left: -1px;
}
.card {
border: 1px solid var(--secondary-color);
}
.card > header {
color: var(--invert-font-color);
text-align: center;
background-color: var(--secondary-color);
padding: .5em 0;
}
.card > div:first-of-type {
padding: var(--global-space);
}
.alert {
color: var(--font-color);
padding: 1em;
border: 1px solid var(--font-color);
margin-bottom: var(--global-space);
}
.alert-success {
color: var(--success-color);
border-color:var(--success-color);
}
.alert-error {
color:var(--error-color);
border-color: var(--error-color);
}
.alert-info {
color: var(--info-color);
border-color: var(--info-color);
}
.alert-warning {
color: var(--warning-color);
border-color: var(--warning-color);
}
.alert-black {
color: var(--font-color);
border-color: var(--font-color);
}
@media screen and (max-width: 960px) {
label {
display: block;
width: 100%;
}
pre::-webkit-scrollbar {
height: 3px;
}
}
@media screen and (max-width: 480px) {
form {
width: 100%;
}
}

1
dist/terminal.min.css vendored Normal file

File diff suppressed because one or more lines are too long

481
docs/index.html Normal file
View File

@ -0,0 +1,481 @@
<html>
<head>
<link rel="stylesheet" href="/terminal.min.css" />
</head>
<style>
.components-grid {
display: grid;
grid-column-gap: 1em;
grid-template-columns: auto;
grid-template-rows: auto;
}
.image-grid {
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
grid-template-columns: repeat(
auto-fit,
minmax(calc(var(--page-width) / 12), 1fr)
);
}
@media only screen and (min-width: 70em) {
.components-grid {
grid-template-columns: 3fr 9fr;
}
}
</style>
<body>
<div class="container">
<h1>Terminal.css</h1>
<p>
Modern and minimalistic CSS framework for <em>terminal</em> lovers ❤️
</p>
<section>
<h2>Goal</h2>
<p>
There are so many CSS frameworks out there with great features but
most of them come at the cost of <b>bloated</b> html code.
<b>Terminal.css</b> is here for purists who want minimal overhead and
maximal control.
</p>
</section>
<section>
<h2>Credits</h2>
<p>
This project is heavily inspired by
<a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
>@egoist's</a
>
work -
<a href="https://hackcss.egoist.moe/" rel="noopener noreferer"
>hack.css</a
>
</p>
</section>
<hr />
<div class="components components-grid">
<aside id="menu">
<h2>Components</h2>
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
<li>
<a href="#SpecialElements">Special Elements</a>
<ul>
<li><a href="#Blockquote">Blockquote</a></li>
<li><a href="#CodeBlocks">Code Blocks</a></li>
<li><a href="#Misc">Misc</a></li>
</ul>
</li>
<li><a href="#Forms">Forms</a></li>
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Alerts">Alerts</a></li>
</ul>
</nav>
</aside>
<section>
<h2 id="GridSystem">Grid System</h2>
<p>
Terminal.css doens't come with a build in grid system. It encourages
you to use your own - whether it's Flexbox or CSS Grid.
</p>
<div class="image-grid">
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&1"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&2"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&3"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&4"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&5"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&6"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos"
style="border: none;"
><img
src="https://picsum.photos/200/300?random&7"
width="auto"
height="auto"
alt="random image"
/></a>
</div>
<hr />
<h2 id="Lists">Lists</h2>
<section>
<ul>
<li>This is a list item</li>
<li>So is this - there could be more</li>
<li>
Make sure to style list items to:
<ul>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
</ul>
</li>
<li>A couple more</li>
<li>top level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>
Aliquam tincidunt mauris eu risus.
<ol>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<p><strong>Definition lists</strong> are also included.</p>
<dl>
<dt>Description list title 01</dt>
<dd>Description list description 01</dd>
<dt>Description list title 02</dt>
<dd>Description list description 02</dd>
<dd>Description list description 03</dd>
</dl>
</section>
<hr />
<section>
<h2 id="Typography">Typography</h2>
<h1>Level 1 Heading</h1>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
</p>
<h2>Level 2 Heading</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
</p>
<h3>Level 3 Heading</h3>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
</p>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 5 Heading</h6>
</section>
<hr />
<section>
<h2 id="Tables">Tables</h2>
<table>
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The Kings Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
</section>
<h3 id="SpecialElements">Special Elements</h3>
<p>Terminal.css also supports a range of special elements.</p>
<h4 id="Blockquote">Blockquote</h4>
<blockquote>
<p>
<em>This is a properly formatted blockquote, btw.</em> Measuring
programming progress by lines of code is like measuring aircraft
building progress by weight.
</p>
<footer>
<cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
<h4 id="CodeBlocks">Code Blocks</h4>
<pre>
<code>
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 70em;
--primary-color: rgb(206, 4, 105);
--font-color: #151513;
--tertiary-color: #727680;
--grid-gap: 1em;
}
</code>
</pre>
<h4 id="Misc">Misc</h4>
<p>
I am <a href="?abc123">the a tag</a> example<br />
I am <abbr title="test">the abbr tag</abbr> example<br />
I am <acronym>the acronym tag</acronym> example<br />
I am <b>the b tag</b> example<br />
I am <big>the big tag</big> example<br />
I am <cite>the cite tag</cite> example<br />
I am <code>the code tag</code> example<br />
I am <del>the del tag</del> example<br />
I am <dfn>the dfn tag</dfn> example<br />
I am <em>the em tag</em> example<br />
I am <i>the i tag</i> example<br />
I am <ins>the ins tag</ins> example<br />
I am <kbd>the kbd tag</kbd> example<br />
I am <q>the q tag</q> example<br />
I am <samp>the samp tag</samp> example<br />
I am <small>the small tag</small> example<br />
I am <span>the span tag</span> example<br />
I am <strong>the strong tag</strong> example<br />
I am <sub>the sub tag</sub> example<br />
I am <sup>the sup tag</sup> example<br />
I am <tt>the tt tag</tt> example<br />
I am <var>the var tag</var> example<br />
I am the <span class="small">small class</span> example<br />
I am the <span class="large">large class</span> example<br />
I am the <span class="quiet">quiet class</span> example<br />
</p>
<h4 id="Address">
Address
</h4>
<address>
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
</address>
<br>
<h4 id="Forms">Forms</h4>
<form action="#">
<fieldset>
<legend>Form legend</legend>
<div class="form-group">
<label for="email">Email input:</label>
<input id="email" name="email" type="email" required minlength="5" placeholder="test"/>
</div>
<div class="form-group">
<label for="text">Text input:</label>
<input id="text" name="text" type="text" required minlength="5" placeholder="test"/>
</div>
<div class="form-group">
<label for="itext">Invalid input (min-length 10):</label>
<input id="itext" name="itext" type="text" minlength="10"/>
</div>
<div class="form-group">
<label for="pw">Password input:</label>
<input type="password" id="pw" name="pw" value="password" />
</div>
<div class="form-group">
<label for="radio">Radio input:</label>
<input name="radio" type="radio" id="radio" />
</div>
<div class="form-group">
<label for="check">Checkbox input:</label>
<input for="check" type="checkbox" id="check" />
</div>
<div class="form-group">
<label for="select">Select field:</label>
<select id="select" name="select">
<option> Option 01 </option>
<option> Option 02 </option>
</select>
</div>
<div class="form-group">
<label for="tarea">Textarea:</label>
<textarea id="tarea" cols="30" rows="5" name=="tarea">Textarea text</textarea>
</div>
<div class="form-group">
<label for="submit">Input Button:</label>
<button type="submit" role="button" name="submit" id="submit">Submit</button>
</div>
</fieldset>
</form>
<br>
<h4 id="Progress">Progress Bar</h4>
<p>With only an arrow</p>
<div class="progress-bar">
<div class="progress-bar-filled" style="width: 40%"></div>
</div>
<p>With a percentage showing above the arrow</p>
<div class="progress-bar progress-bar-show-percent">
<div class="progress-bar-filled" style="width: 30%" data-filled="Loading 30%"></div>
</div>
<p>Without arrow</p>
<div class="progress-bar progress-bar-no-arrow">
<div class="progress-bar-filled" style="width: 60%" data-filled="Loading 60%"></div>
</div>
<br>
<h4 id="Buttons">Buttons</h4>
<button class="btn btn-default">Default</button><br /><br />
<button class="btn btn-primary">Primary</button><br /><br />
<button class="btn btn-success">Success</button><br /><br />
<button class="btn btn-info">Info</button><br /><br />
<button class="btn btn-warning">Warning</button><br /><br />
<button class="btn btn-error">Error</button><br /><br />
<button class="btn btn-default btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-primary btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-success btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-info btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-warning btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-error btn-ghost">Ghost Button</button><br /><br />
<button class="btn btn-primary btn-block">Block Level Button</button><br /><br />
<p>Button Group</p>
<div class="btn-group">
<button class="btn btn-default btn-ghost">Left</button>
<button class="btn btn-default btn-ghost">Middle</button>
<button class="btn btn-default btn-ghost">Right</button>
</div>
<br />
<h4 id="Cards">Cards</h4>
<div class="card">
<header>title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
</div>
</div>
<br />
<h4 id="Alerts">Alerts</h4>
<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-error">Error message</div>
<hr>
<p>Version: 0.0.1 <a href="#menu">Top</a></p>
</section>
</div>
</div>
</body>
</html>

1
docs/terminal.min.css vendored Normal file

File diff suppressed because one or more lines are too long

789
package-lock.json generated Normal file
View File

@ -0,0 +1,789 @@
{
"name": "terminal.css",
"version": "0.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@zeit/schemas": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.6.0.tgz",
"integrity": "sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==",
"dev": true
},
"accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
"integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
"dev": true,
"requires": {
"mime-types": "~2.1.18",
"negotiator": "0.6.1"
}
},
"ajv": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
"integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==",
"dev": true,
"requires": {
"fast-deep-equal": "^2.0.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ansi-align": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
"integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
"dev": true,
"requires": {
"string-width": "^2.0.0"
}
},
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"arch": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz",
"integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
"dev": true
},
"arg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/arg/-/arg-2.0.0.tgz",
"integrity": "sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==",
"dev": true
},
"autoprefixer": {
"version": "9.4.6",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
"integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
"dev": true,
"requires": {
"browserslist": "^4.4.1",
"caniuse-lite": "^1.0.30000929",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^7.0.13",
"postcss-value-parser": "^3.3.1"
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
},
"boxen": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
"integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
"dev": true,
"requires": {
"ansi-align": "^2.0.0",
"camelcase": "^4.0.0",
"chalk": "^2.0.1",
"cli-boxes": "^1.0.0",
"string-width": "^2.0.0",
"term-size": "^1.2.0",
"widest-line": "^2.0.0"
}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
"browserslist": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.4.1.tgz",
"integrity": "sha512-pEBxEXg7JwaakBXjATYw/D1YZh4QUSCX/Mnd/wnqSRPPSi1U39iDhDoKGoBUcraKdxDlrYqJxSI5nNvD+dWP2A==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30000929",
"electron-to-chromium": "^1.3.103",
"node-releases": "^1.1.3"
}
},
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
"integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
"dev": true
},
"camelcase": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
"integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
"dev": true
},
"caniuse-lite": {
"version": "1.0.30000932",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000932.tgz",
"integrity": "sha512-4bghJFItvzz8m0T3lLZbacmEY9X1Z2AtIzTr7s7byqZIOumASfr4ynDx7rtm0J85nDmx8vsgR6vnaSoeU8Oh0A==",
"dev": true
},
"chalk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
"integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
"dev": true,
"requires": {
"source-map": "~0.6.0"
}
},
"cli-boxes": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
"integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
"dev": true
},
"clipboardy": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
"integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==",
"dev": true,
"requires": {
"arch": "^2.1.0",
"execa": "^0.8.0"
},
"dependencies": {
"execa": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
"integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
"dev": true,
"requires": {
"cross-spawn": "^5.0.1",
"get-stream": "^3.0.0",
"is-stream": "^1.1.0",
"npm-run-path": "^2.0.0",
"p-finally": "^1.0.0",
"signal-exit": "^3.0.0",
"strip-eof": "^1.0.0"
}
}
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"compressible": {
"version": "2.0.15",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.15.tgz",
"integrity": "sha512-4aE67DL33dSW9gw4CI2H/yTxqHLNcxp0yS6jB+4h+wr3e43+1z7vm0HU9qXOH8j+qjKuL8+UtkOxYQSMq60Ylw==",
"dev": true,
"requires": {
"mime-db": ">= 1.36.0 < 2"
}
},
"compression": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.3.tgz",
"integrity": "sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==",
"dev": true,
"requires": {
"accepts": "~1.3.5",
"bytes": "3.0.0",
"compressible": "~2.0.14",
"debug": "2.6.9",
"on-headers": "~1.0.1",
"safe-buffer": "5.1.2",
"vary": "~1.1.2"
}
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
},
"content-disposition": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
"integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
"dev": true
},
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
"integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
"dev": true,
"requires": {
"lru-cache": "^4.0.1",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
}
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
},
"deep-extend": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.108",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.108.tgz",
"integrity": "sha512-/QI4hMpAh48a1Sea6PALGv+kuVne9A2EWGd8HrWHMdYhIzGtbhVVHh6heL5fAzGaDnZuPyrlWJRl8WPm4RyiQQ==",
"dev": true
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
},
"execa": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
"integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
"dev": true,
"requires": {
"cross-spawn": "^5.0.1",
"get-stream": "^3.0.0",
"is-stream": "^1.1.0",
"npm-run-path": "^2.0.0",
"p-finally": "^1.0.0",
"signal-exit": "^3.0.0",
"strip-eof": "^1.0.0"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
"dev": true
},
"fast-json-stable-stringify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
"dev": true
},
"fast-url-parser": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
"integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
"dev": true,
"requires": {
"punycode": "^1.3.2"
},
"dependencies": {
"punycode": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
"dev": true
}
}
},
"get-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true
},
"isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
"dev": true
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
"dev": true,
"requires": {
"pseudomap": "^1.0.2",
"yallist": "^2.1.2"
}
},
"mime-db": {
"version": "1.37.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
"integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==",
"dev": true
},
"mime-types": {
"version": "2.1.21",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
"integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==",
"dev": true,
"requires": {
"mime-db": "~1.37.0"
}
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
},
"dependencies": {
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
}
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"negotiator": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
"integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
"dev": true
},
"node-releases": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.3.tgz",
"integrity": "sha512-6VrvH7z6jqqNFY200kdB6HdzkgM96Oaj9v3dqGfgp6mF+cHmU4wyQKZ2/WPDRVoR0Jz9KqbamaBN0ZhdUaysUQ==",
"dev": true,
"requires": {
"semver": "^5.3.0"
}
},
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
"integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
"dev": true,
"requires": {
"path-key": "^2.0.0"
}
},
"num2fraction": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
"dev": true
},
"on-headers": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz",
"integrity": "sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=",
"dev": true
},
"p-finally": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
"dev": true
},
"path-is-inside": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
"integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
"dev": true
},
"path-key": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
"dev": true
},
"path-to-regexp": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
"integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
"dev": true
},
"postcss": {
"version": "7.0.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
"integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
},
"dependencies": {
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
"dev": true
},
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"range-parser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
"integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
"dev": true
},
"rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
"dev": true,
"requires": {
"deep-extend": "^0.6.0",
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
}
},
"registry-auth-token": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
"integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
"dev": true,
"requires": {
"rc": "^1.1.6",
"safe-buffer": "^5.0.1"
}
},
"registry-url": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
"integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
"dev": true,
"requires": {
"rc": "^1.0.1"
}
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
},
"semver": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
"integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
"dev": true
},
"serve": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/serve/-/serve-10.1.1.tgz",
"integrity": "sha512-B1ca73zGFRS/bYQkbDw6BVEpRiUKdtnkwtvkMjx598jU5tyieua9lHyqdwUoup4/ek20I74EzncTC0gZuYng4Q==",
"dev": true,
"requires": {
"@zeit/schemas": "2.6.0",
"ajv": "6.5.3",
"arg": "2.0.0",
"boxen": "1.3.0",
"chalk": "2.4.1",
"clipboardy": "1.2.3",
"compression": "1.7.3",
"serve-handler": "5.0.7",
"update-check": "1.5.2"
}
},
"serve-handler": {
"version": "5.0.7",
"resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-5.0.7.tgz",
"integrity": "sha512-PuLoJHAO2jj3p1fYWfXVHsEqNesx1+h+6qj0FIWrCe526ZtpDqeYuKA4knE5pjK9xoOVShoB+qGOP93EY46xEw==",
"dev": true,
"requires": {
"bytes": "3.0.0",
"content-disposition": "0.5.2",
"fast-url-parser": "1.1.3",
"mime-types": "2.1.18",
"minimatch": "3.0.4",
"path-is-inside": "1.0.2",
"path-to-regexp": "2.2.1",
"range-parser": "1.2.0"
},
"dependencies": {
"mime-db": {
"version": "1.33.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
"integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
"dev": true
},
"mime-types": {
"version": "2.1.18",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
"dev": true,
"requires": {
"mime-db": "~1.33.0"
}
}
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
"dev": true,
"requires": {
"shebang-regex": "^1.0.0"
}
},
"shebang-regex": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
"dev": true,
"requires": {
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^4.0.0"
}
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
},
"strip-eof": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
"strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
},
"term-size": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
"integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
"dev": true,
"requires": {
"execa": "^0.7.0"
}
},
"update-check": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.2.tgz",
"integrity": "sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==",
"dev": true,
"requires": {
"registry-auth-token": "3.3.2",
"registry-url": "3.1.0"
}
},
"uri-js": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
"dev": true,
"requires": {
"punycode": "^2.1.0"
}
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
},
"widest-line": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
"integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
"dev": true,
"requires": {
"string-width": "^2.1.1"
}
},
"yallist": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
}
}
}

39
package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "terminal.css",
"version": "0.0.1",
"description": "Modern and minimalistic CSS framework for terminal enthusiasts",
"main": "dist/terminal.min.css",
"directories": {
"doc": "docs",
"dist": "dist"
},
"scripts": {
"start": "serve -l 3000 ./docs",
"build": "node ./scripts/build.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Gioni06/terminal.css.git"
},
"keywords": [
"CSS",
"Framework",
"Grid",
"Terminal",
"Style"
],
"author": "Jonas Duri <https://jduri.xyz>",
"license": "MIT",
"bugs": {
"url": "https://github.com/Gioni06/terminal.css/issues"
},
"homepage": "https://github.com/Gioni06/terminal.css#readme",
"devDependencies": {
"autoprefixer": "^9.4.6",
"mkdirp": "^0.5.1",
"postcss": "^7.0.14",
"serve": "^10.1.1",
"clean-css": "^4.2.1"
}
}

39
scripts/build.js Normal file
View File

@ -0,0 +1,39 @@
const path = require('path')
const fs = require('fs')
const mkdirp = require('mkdirp');
const autoprefixer = require('autoprefixer')({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009'
});
const postcss = require('postcss');
const CleanCSS = require('clean-css');
const css = fs.readFileSync(path.resolve(__dirname, '../src/terminal.css'), 'utf8');
mkdirp(path.resolve(__dirname,'../dist/'), function (err) {
if (err) {
throw e
} else {
postcss([ autoprefixer ]).process(css, { from: path.resolve(__dirname, '../src/terminal.css'), to: path.resolve(__dirname, '../dist/terminal.css') }).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
process.exit(1)
});
const options = { };
const output = new CleanCSS(options).minify(result.css);
// copy to docs
fs.writeFileSync(path.resolve(__dirname, '../docs/terminal.min.css'), output.styles , 'utf8')
// copy to dist
fs.writeFileSync(path.resolve(__dirname, '../dist/terminal.min.css'), output.styles , 'utf8')
fs.writeFileSync(path.resolve(__dirname, '../dist/terminal.css'), result.css, 'utf8')
});
}
});

629
src/terminal.css Normal file
View File

@ -0,0 +1,629 @@
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: var(--invert-font-color);
--page-width: 70em;
--font-color: #151513;
--invert-font-color: #fff;
--secondary-color: #727680;
--tertiary-color: #727680;
--primary-color: rgb(206, 4, 105);
--success-color: #2ac24b;
--info-color: #ffc501;
--warning-color: #e7601c;
--error-color: #ce0404;
--progress-bar-background: #cacdd5;
--progress-bar-fill: #151513;
}
* {
box-sizing: border-box;
text-rendering: geometricPrecision;
}
body {
font-size: var(--global-font-size);
color: var(--font-color);
line-height: var(--global-line-height);
margin: 0;
font-family: var(--font-stack);
word-wrap: break-word;
background-color: var(--background-color);
}
h1, h2, h3, h4, h5, h6, .logo {
line-height: 1.3em;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
pre {
display: block;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: var(--global-space);
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre code {
overflow-x: scroll;
padding: 0;
margin: 0;
display: inline-block;
min-width: 100%;
}
a {
display: flex;
cursor: pointer;
color: var(--primary-color);
text-decoration: none;
border-bottom: 1px solid var(--primary-color);
}
a:hover {
background-color: var(--primary-color);
color: var(--invert-font-color);
}
blockquote, code, em, h1, h2, h3, h4, h5, h6, strong, .logo {
font-size: var(--global-font-size);
font-style: normal;
font-family: var(--font-stack);
color: var(--font-color);
}
blockquote, code, em, strong {
line-height: var(--global-line-height);
}
blockquote, code, footer, h1, h2, h3, h4, h5, h6, header, li, ol, p, section, ul, .logo {
float: none;
margin: 0;
padding: 0;
}
blockquote, h1, ol, p, ul, .logo {
margin-top: calc(var(--global-space) * 2);
margin-bottom: calc(var(--global-space) * 2);
}
ul ul {
margin-top: 0;
margin-bottom: 0;
}
ol ol {
margin-top: 0;
margin-bottom: 0;
}
h1, .logo {
position: relative;
display: inline-block;
display: table-cell;
padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
margin: 0;
overflow: hidden;
font-weight: 600;
}
h1:after {
content: "====================================================================================================";
position: absolute;
bottom: var(--global-space);
left: 0;
}
h1 + *, .logo + * {
margin-top: 0;
}
h2, h3, h4, h5, h6 {
position: relative;
margin-bottom: var(--global-line-height);
font-weight: 600;
}
li {
position: relative;
display: block;
padding-left: calc(var(--global-space) * 2);
}
li:after {
position: absolute;
top: 0;
left: 0;
}
ul > li:after {
content: "-";
}
ol {
counter-reset: a;
}
ol > li:after {
content: counter(a) ".";
counter-increment: a;
}
ol li:nth-child(n+10):after {
left: -7px;
}
blockquote {
position: relative;
padding-left: calc(var(--global-space) * 2);
padding-left: 2ch;
overflow: hidden;
}
blockquote:after {
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
white-space: pre;
position: absolute;
top: 0;
left: 0;
line-height: var(--global-line-height);
color: #9ca2ab;
}
pre code:after, pre code:before {
content: "";
}
code {
font-weight: inherit;
}
code:after, code:before {
content: "`";
display: inline;
}
hr {
position: relative;
height: calc(var(--global-space) * 2);
overflow: hidden;
border: 0;
margin: calc(var(--global-space) * 2) 0;
}
hr:after {
content: "--------------------------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
line-height: calc(var(--global-space) * 2);
width: 100%;
word-wrap: break-word;
}
-ones ol > li:after {
content: "1.";
}
p {
margin: 0 0 var(--global-line-height);
color: var(--global-font-color);
}
.container {
max-width: var(--page-width);
}
.container, .container-fluid {
margin: 0 auto;
padding: 0 calc(var(--global-space) * 2);
}
img {
width: 100%;
}
.progress-bar {
height: 8px;
background-color: var(--progress-bar-background);
margin: 12px 0;
}
.progress-bar.progress-bar-show-percent {
margin-top: 38px;
}
.progress-bar-filled {
background-color: var(--progress-bar-fill);
height: 100%;
transition: width .3s ease;
position: relative;
width: 0;
}
.progress-bar-filled:before {
content: "";
border: 6px solid transparent;
border-top-color: var(--progress-bar-fill);
position: absolute;
top: -12px;
right: -6px;
}
.progress-bar-filled:after {
color: var(--progress-bar-fill);;
content: attr(data-filled);
display: block;
font-size: 12px;
white-space: nowrap;
position: absolute;
border: 6px solid transparent;
top: -38px;
right: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
}
.progress-bar-no-arrow > .progress-bar-filled:before, .progress-bar-no-arrow > .progress-bar-filled:after {
content: "";
display: none;
visibility: hidden;
opacity: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: var(--global-line-height) 0;
color: var(--font-color);
font-size: var(--global-font-size);
}
table tfoot tr th {
font-weight: 500;
}
table caption {
font-size: 1em;
margin: 0 0 1em 0;
}
table td, table th {
vertical-align: top;
border: 1px solid var(--font-color);
line-height: var(--global-line-height);
padding: calc(var(--global-space) / 2);
font-size: 1em;
}
table thead th {
font-size: 1em;
}
table tbody td:first-child {
font-weight: 700;
color: #333;
}
.form {
width: 100%;
}
fieldset {
border: 1px solid var(--font-color);
padding: 1em;
}
label {
font-size: 1em;
color: var(--font-color)
}
input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
border: 1px dashed var(--font-color);
width: 100%;
padding: .5em;
font-size: 1em;
font-family: var(--font-stack);
}
input[type="email"]:active, input[type="text"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active
input[type="email"]:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
}
.form-group {
margin-bottom: var(--global-line-height);
overflow: auto;
}
textarea {
height: auto;
width: 100%;
resize: none;
border: 1px dashed var(--font-color);
width: 100%;
padding: .5em;
font-size: 1em;
font-family: var(--font-stack);
}
textarea:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
textarea:not(:placeholder-shown):invalid {
border-color: var(--primary-color);
}
.btn {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
outline: none;
padding: .65em 2em;
font-size: 1em;
font-family: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
z-index: 1
}
.btn:active {
box-shadow: none;
}
.btn.btn-ghost {
border-color: var(--font-color);
color: var(--font-color);
background-color: transparent;
}
.btn.btn-ghost:focus, .btn.btn-ghost:hover {
border-color: var(--tertiary-color);
color: var(--tertiary-color);
z-index: 2;
}
.btn.btn-ghost:hover {
background-color: transparent;
}
.btn-block {
width: 100%;
display: -ms-flexbox;
display: flex;
}
.btn-default {
background-color: var(--font-color);
border-color: var(--invert-font-color);
color: var(--invert-font-color);
}
.btn-default:focus:not(.btn-ghost), .btn-default:hover {
background-color: var(--tertiary-color);
color: var(--invert-font-color);
}
.btn-success {
color: var(--invert-font-color);
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success:focus:not(.btn-ghost), .btn-success:hover {
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-success.btn-ghost {
border-color: var(--success-color);
color: var(--success-color);
}
.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
border-color: var(--success-color);
color: var(--success-color);
z-index: 2;
}
.btn-error {
color: var(--invert-font-color);
background-color: var(--error-color);
border: 1px solid var(--error-color);
}
.btn-error:focus:not(.btn-ghost), .btn-error:hover {
background-color: var(--error-color);
border-color: var(--error-color);
}
.btn-error.btn-ghost {
border-color: var(--error-color);
color: var(--error-color);
}
.btn-error.btn-ghost:focus, .btn-error.btn-ghost:hover {
border-color: var(--error-color);
color: var(--error-color);
z-index: 2;
}
.btn-warning {
color: var(--invert-font-color);
background-color: var(--warning-color);
border: 1px solid var(--warning-color);
}
.btn-warning:focus:not(.btn-ghost), .btn-warning:hover {
background-color: var(--warning-color);
border-color: var(--warning-color);
}
.btn-warning.btn-ghost {
border-color: var(--warning-color);
color: var(--warning-color);
}
.btn-warning.btn-ghost:focus, .btn-warning.btn-ghost:hover {
border-color: var(--warning-color);
color: var(--warning-color);
z-index: 2;
}
.btn-info {
color: var(--invert-font-color);
background-color: var(--info-color);
border: 1px solid var(--info-color);
}
.btn-info:focus:not(.btn-ghost), .btn-info:hover {
background-color: var(--info-color);
border-color: var(--info-color);
}
.btn-info.btn-ghost {
border-color: var(--info-color);
color: var(--info-color);
}
.btn-info.btn-ghost:focus, .btn-info.btn-ghost:hover {
border-color: var(--info-color);
color: var(--info-color);
z-index: 2;
}
.btn-primary {
color: var(--invert-font-color);
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-primary:focus:not(.btn-ghost), .btn-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary.btn-ghost {
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-primary.btn-ghost:focus, .btn-primary.btn-ghost:hover {
border-color: var(--primary-color);
color: var(--primary-color);
z-index: 2;
}
.btn-group {
overflow: auto;
}
.btn-group .btn {
float: left;
}
.btn-group .btn-ghost:not(:first-child) {
margin-left: -1px;
}
.card {
border: 1px solid var(--secondary-color);
}
.card > header {
color: var(--invert-font-color);
text-align: center;
background-color: var(--secondary-color);
padding: .5em 0;
}
.card > div:first-of-type {
padding: var(--global-space);
}
.alert {
color: var(--font-color);
padding: 1em;
border: 1px solid var(--font-color);
margin-bottom: var(--global-space);
}
.alert-success {
color: var(--success-color);
border-color:var(--success-color);
}
.alert-error {
color:var(--error-color);
border-color: var(--error-color);
}
.alert-info {
color: var(--info-color);
border-color: var(--info-color);
}
.alert-warning {
color: var(--warning-color);
border-color: var(--warning-color);
}
.alert-black {
color: var(--font-color);
border-color: var(--font-color);
}
@media screen and (max-width: 960px) {
label {
display: block;
width: 100%;
}
pre::-webkit-scrollbar {
height: 3px;
}
}
@media screen and (max-width: 480px) {
form {
width: 100%;
}
}