mirror of
https://github.com/papercss/papercss
synced 2024-06-08 08:52:25 +02:00
Add dark mode docs and prepare for release
This commit is contained in:
parent
705a1a2664
commit
18d9cd7522
|
@ -20,7 +20,9 @@ async function build() {
|
||||||
log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
|
log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
|
||||||
|
|
||||||
rimraf.sync('dist', { disableGlob: true });
|
rimraf.sync('dist', { disableGlob: true });
|
||||||
fs.unlinkSync(paperDocsPath);
|
if (fs.existsSync(paperDocsPath)) {
|
||||||
|
fs.unlinkSync(paperDocsPath);
|
||||||
|
}
|
||||||
|
|
||||||
log('Compiling SCSS to CSS, entrypoint:', entrypoint);
|
log('Compiling SCSS to CSS, entrypoint:', entrypoint);
|
||||||
|
|
||||||
|
|
665
dist/paper.css
vendored
665
dist/paper.css
vendored
File diff suppressed because it is too large
Load diff
4
dist/paper.min.css
vendored
4
dist/paper.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -7,6 +7,7 @@ publishDir = "../public"
|
||||||
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
|
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
|
||||||
pygmentsCodefences = true
|
pygmentsCodefences = true
|
||||||
pygmentsStyle = "emacs"
|
pygmentsStyle = "emacs"
|
||||||
|
pygmentsUseClasses=true
|
||||||
|
|
||||||
[params.info]
|
[params.info]
|
||||||
description = "the less formal CSS framework"
|
description = "the less formal CSS framework"
|
||||||
|
|
|
@ -165,11 +165,15 @@ description: PaperCSS Forms
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<legend>Sliders</legend>
|
<legend>Sliders</legend>
|
||||||
<label for="input-range">Note /10 :</label>
|
<div class="form-group">
|
||||||
<input type="range" name="note" id="input-range" min="0" max="10">
|
<label for="input-range">Note /10 :</label>
|
||||||
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
<input type="range" name="note" id="input-range" min="0" max="10">
|
||||||
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
</div>
|
||||||
<output id="output" for="percentage">50%</output>
|
<div class="form-group">
|
||||||
|
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
||||||
|
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
||||||
|
<output id="output" for="percentage">50%</output>
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
#### Code:
|
#### Code:
|
||||||
|
@ -332,10 +336,14 @@ description: PaperCSS Forms
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<legend>Sliders</legend>
|
<legend>Sliders</legend>
|
||||||
<label for="input-range">Note /10 :</label>
|
<div class="form-group">
|
||||||
<input type="range" name="note" id="input-range" min="0" max="10">
|
<label for="input-range">Note /10 :</label>
|
||||||
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
<input type="range" name="note" id="input-range" min="0" max="10">
|
||||||
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
</div>
|
||||||
<output id="output" for="percentage">50%</output>
|
<div class="form-group">
|
||||||
|
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
||||||
|
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
||||||
|
<output id="output" for="percentage">50%</output>
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
```
|
```
|
||||||
|
|
67
docs/content/docs/utilities/dark-mode.md
Normal file
67
docs/content/docs/utilities/dark-mode.md
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
---
|
||||||
|
title: Dark Mode
|
||||||
|
description: PaperCSS Dark Mode
|
||||||
|
---
|
||||||
|
|
||||||
|
As of version `1.8.0`, PaperCSS supports a dark mode of the framework. Just add the `.dark` class to your `html` tag!
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
Here's what some of the components look like:
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="paperInputs1">Input</label>
|
||||||
|
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button>
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="progress margin-bottom">
|
||||||
|
<div class="bar w-25"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Location</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Bob Dylan</td>
|
||||||
|
<td>Musician</td>
|
||||||
|
<td>California, USA</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Eric Clapton</td>
|
||||||
|
<td>Musician</td>
|
||||||
|
<td>Ohio, USA</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Daniel Kahneman</td>
|
||||||
|
<td>Psychologist</td>
|
||||||
|
<td>California, USA</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var html = document.documentElement;
|
||||||
|
html.className += 'dark';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
#### Code
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html class='dark'>
|
||||||
|
Dark mode styles are automatically applied with the dark class!
|
||||||
|
</html>
|
||||||
|
```
|
|
@ -1,3 +1,4 @@
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
<link rel='stylesheet' href='/assets/paper.css'>
|
<link rel='stylesheet' href='/assets/paper.css'>
|
||||||
<link rel='stylesheet' href='/assets/demo.css'>
|
<link rel='stylesheet' href='/assets/demo.css'>
|
||||||
|
<link rel='stylesheet' href='/assets/syntax.css'>
|
||||||
|
|
365
docs/static/assets/syntax.css
vendored
Normal file
365
docs/static/assets/syntax.css
vendored
Normal file
|
@ -0,0 +1,365 @@
|
||||||
|
/* LineTableTD */
|
||||||
|
.chroma .lntd {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LineTable */
|
||||||
|
.chroma .lntable {
|
||||||
|
border: 0;
|
||||||
|
border-spacing: 0;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LineHighlight */
|
||||||
|
.chroma .hl {
|
||||||
|
background-color: #ffc;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LineNumbersTable */
|
||||||
|
.chroma .lnt {color: #7f7f7f;
|
||||||
|
margin-right: 0.4em;
|
||||||
|
padding: 0 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LineNumbers */
|
||||||
|
.chroma .ln {color: #7f7f7f;
|
||||||
|
margin-right: 0.4em;
|
||||||
|
padding: 0 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keyword */
|
||||||
|
.chroma .k {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordConstant */
|
||||||
|
.chroma .kc {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordDeclaration */
|
||||||
|
.chroma .kd {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordNamespace */
|
||||||
|
.chroma .kn {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordPseudo */
|
||||||
|
.chroma .kp {
|
||||||
|
color: #a2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordReserved */
|
||||||
|
.chroma .kr {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KeywordType */
|
||||||
|
.chroma .kt {
|
||||||
|
color: #0b0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameAttribute */
|
||||||
|
.chroma .na {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameBuiltin */
|
||||||
|
.chroma .nb {
|
||||||
|
color: #a2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameClass */
|
||||||
|
.chroma .nc {
|
||||||
|
color: #00f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameConstant */
|
||||||
|
.chroma .no {
|
||||||
|
color: #800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameDecorator */
|
||||||
|
.chroma .nd {
|
||||||
|
color: #a2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameEntity */
|
||||||
|
.chroma .ni {
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameException */
|
||||||
|
.chroma .ne {
|
||||||
|
color: #d2413a;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameFunction */
|
||||||
|
.chroma .nf {
|
||||||
|
color: #00a000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameLabel */
|
||||||
|
.chroma .nl {
|
||||||
|
color: #a0a000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameNamespace */
|
||||||
|
.chroma .nn {
|
||||||
|
color: #00f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameTag */
|
||||||
|
.chroma .nt {
|
||||||
|
color: #008000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NameVariable */
|
||||||
|
.chroma .nv {
|
||||||
|
color: #b8860b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralString */
|
||||||
|
.chroma .s {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringAffix */
|
||||||
|
.chroma .sa {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringBacktick */
|
||||||
|
.chroma .sb {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringChar */
|
||||||
|
.chroma .sc {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringDelimiter */
|
||||||
|
.chroma .dl {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringDoc */
|
||||||
|
.chroma .sd {
|
||||||
|
color: #b44;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringDouble */
|
||||||
|
.chroma .s2 {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringEscape */
|
||||||
|
.chroma .se {
|
||||||
|
color: #b62;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringHeredoc */
|
||||||
|
.chroma .sh {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringInterpol */
|
||||||
|
.chroma .si {
|
||||||
|
color: #b68;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringOther */
|
||||||
|
.chroma .sx {
|
||||||
|
color: #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringRegex */
|
||||||
|
.chroma .sr {
|
||||||
|
color: #b68;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringSingle */
|
||||||
|
.chroma .s1 {
|
||||||
|
color: #b44;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralStringSymbol */
|
||||||
|
.chroma .ss {
|
||||||
|
color: #b8860b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumber */
|
||||||
|
.chroma .m {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberBin */
|
||||||
|
.chroma .mb {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberFloat */
|
||||||
|
.chroma .mf {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberHex */
|
||||||
|
.chroma .mh {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberInteger */
|
||||||
|
.chroma .mi {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberIntegerLong */
|
||||||
|
.chroma .il {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LiteralNumberOct */
|
||||||
|
.chroma .mo {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Operator */
|
||||||
|
.chroma .o {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* OperatorWord */
|
||||||
|
.chroma .ow {
|
||||||
|
color: #a2f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comment */
|
||||||
|
.chroma .c {
|
||||||
|
color: #080;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentHashbang */
|
||||||
|
.chroma .ch {
|
||||||
|
color: #080;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentMultiline */
|
||||||
|
.chroma .cm {
|
||||||
|
color: #080;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentSingle */
|
||||||
|
.chroma .c1 {
|
||||||
|
color: #080;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentSpecial */
|
||||||
|
.chroma .cs {
|
||||||
|
color: #080;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentPreproc */
|
||||||
|
.chroma .cp {
|
||||||
|
color: #080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CommentPreprocFile */
|
||||||
|
.chroma .cpf {
|
||||||
|
color: #080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericDeleted */
|
||||||
|
.chroma .gd {
|
||||||
|
color: #a00000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericEmph */
|
||||||
|
.chroma .ge {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericError */
|
||||||
|
.chroma .gr {
|
||||||
|
color: #f00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericHeading */
|
||||||
|
.chroma .gh {
|
||||||
|
color: #000080;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericInserted */
|
||||||
|
.chroma .gi {
|
||||||
|
color: #00a000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericOutput */
|
||||||
|
.chroma .go {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericPrompt */
|
||||||
|
.chroma .gp {
|
||||||
|
color: #000080;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericStrong */
|
||||||
|
.chroma .gs {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericSubheading */
|
||||||
|
.chroma .gu {
|
||||||
|
color: #800080;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericTraceback */
|
||||||
|
.chroma .gt {
|
||||||
|
color: #04d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GenericUnderline */
|
||||||
|
.chroma .gl {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TextWhitespace */
|
||||||
|
.chroma .w {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
|
@ -17,17 +17,18 @@
|
||||||
.card-header,
|
.card-header,
|
||||||
.card-footer {
|
.card-footer {
|
||||||
@include color('background-color', 'white-dark');
|
@include color('background-color', 'white-dark');
|
||||||
|
@include color('border-color', 'muted-light');
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.75rem 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@include color('border-color', 'muted-light');
|
border-bottom-style: solid;
|
||||||
border-bottom: 2px solid;
|
border-bottom-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
@include color('border-color', 'muted-light');
|
border-top-style: solid;
|
||||||
border-top: 2px solid;
|
border-top-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
|
|
|
@ -331,12 +331,16 @@ select {
|
||||||
input[type='range'] {
|
input[type='range'] {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
/* For Chromium */
|
/* For Chromium */
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
background: $secondary;
|
@include color('background', 'secondary');
|
||||||
border: 1px solid $primary;
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
@ -345,13 +349,16 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-slider-thumb {
|
&::-webkit-slider-thumb {
|
||||||
|
@include color('background', 'white');
|
||||||
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: #fff;
|
|
||||||
border: 1px solid $primary;
|
|
||||||
border-bottom-left-radius: 0.7rem 1rem;
|
border-bottom-left-radius: 0.7rem 1rem;
|
||||||
border-bottom-right-radius: 1rem 0.9rem;
|
border-bottom-right-radius: 1rem 0.9rem;
|
||||||
|
border-style: solid;
|
||||||
border-top-left-radius: 1rem 1rem;
|
border-top-left-radius: 1rem 1rem;
|
||||||
border-top-right-radius: 1rem 0.6rem;
|
border-top-right-radius: 1rem 0.6rem;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
@ -361,8 +368,9 @@ select {
|
||||||
|
|
||||||
/* For Mozilla Firefox */
|
/* For Mozilla Firefox */
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
background: $secondary;
|
@include color('background', 'secondary');
|
||||||
border: 1px solid $primary;
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -371,12 +379,15 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
background: #fff;
|
@include color('background', 'white');
|
||||||
border: 1px solid $primary;
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border-bottom-left-radius: 0.7rem 1rem;
|
border-bottom-left-radius: 0.7rem 1rem;
|
||||||
border-bottom-right-radius: 1rem 0.9rem;
|
border-bottom-right-radius: 1rem 0.9rem;
|
||||||
|
border-style: solid;
|
||||||
border-top-left-radius: 1rem 1rem;
|
border-top-left-radius: 1rem 1rem;
|
||||||
border-top-right-radius: 1rem 0.6rem;
|
border-top-right-radius: 1rem 0.6rem;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
@ -396,19 +407,26 @@ select {
|
||||||
|
|
||||||
&::-ms-fill-lower,
|
&::-ms-fill-lower,
|
||||||
&::-ms-fill-upper {
|
&::-ms-fill-upper {
|
||||||
background: $secondary;
|
@include color('background', 'secondary');
|
||||||
border: 1px solid $primary;
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-thumb {
|
&::-ms-thumb {
|
||||||
background: #fff;
|
@include color('background', 'white');
|
||||||
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border: 1px solid $primary;
|
border: 1px solid $primary;
|
||||||
border-bottom-left-radius: 0.7rem 1rem;
|
border-bottom-left-radius: 0.7rem 1rem;
|
||||||
border-bottom-right-radius: 1rem 0.9rem;
|
border-bottom-right-radius: 1rem 0.9rem;
|
||||||
|
border-style: solid;
|
||||||
border-top-left-radius: 1rem 1rem;
|
border-top-left-radius: 1rem 1rem;
|
||||||
border-top-right-radius: 1rem 0.6rem;
|
border-top-right-radius: 1rem 0.6rem;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
|
|
@ -139,9 +139,10 @@ nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsible label {
|
.collapsible label {
|
||||||
|
@include color('border-color', 'primary');
|
||||||
|
|
||||||
border-bottom-left-radius: 15px 255px;
|
border-bottom-left-radius: 15px 255px;
|
||||||
border-bottom-right-radius: 225px 15px;
|
border-bottom-right-radius: 225px 15px;
|
||||||
border-color: #41403e;
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-top-left-radius: 255px 15px;
|
border-top-left-radius: 255px 15px;
|
||||||
border-top-right-radius: 15px 225px;
|
border-top-right-radius: 15px 225px;
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
code {
|
code {
|
||||||
@include color('color', 'secondary');
|
@include color('color', 'secondary');
|
||||||
@include color('background-color', 'primary-light-70');
|
@include color('background-color', 'primary-shaded-70');
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
@include color('color', 'black');
|
@include color('color', 'primary-inverse');
|
||||||
@include color('background-color', 'primary');
|
@include color('background-color', 'primary');
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
|
@ -15,9 +15,9 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
@include color('color', 'black');
|
@include color('color', 'inverse-primary');
|
||||||
@include color('background-color', 'primary-light-70');
|
@include color('background-color', 'primary-shaded-70');
|
||||||
@include color('border-color', 'primary-light-50');
|
@include color('border-color', 'primary-shaded-50');
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
@ -32,7 +32,7 @@ pre {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@include color('color', 'black');
|
@include color('color', 'inverse-primary');
|
||||||
background: transparent;
|
background: transparent;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
|
@ -29,8 +29,6 @@ $danger-dark: darken($danger, 45%) !default;
|
||||||
$muted-dark: darken($muted, 35%) !default;
|
$muted-dark: darken($muted, 35%) !default;
|
||||||
|
|
||||||
$primary-light-10: lighten($primary, 10%) !default;
|
$primary-light-10: lighten($primary, 10%) !default;
|
||||||
$primary-light-70: lighten($primary, 70%) !default;
|
|
||||||
$primary-light-50: lighten($primary, 50%) !default;
|
|
||||||
$secondary-light-10: lighten($secondary, 10%) !default;
|
$secondary-light-10: lighten($secondary, 10%) !default;
|
||||||
$success-light-10: lighten($success, 10%) !default;
|
$success-light-10: lighten($success, 10%) !default;
|
||||||
$warning-light-10: lighten($warning, 10%) !default;
|
$warning-light-10: lighten($warning, 10%) !default;
|
||||||
|
@ -44,6 +42,8 @@ $warning-dark-10: darken($warning, 10%) !default;
|
||||||
$danger-dark-10: darken($danger, 10%) !default;
|
$danger-dark-10: darken($danger, 10%) !default;
|
||||||
$muted-dark-10: darken($muted, 10%) !default;
|
$muted-dark-10: darken($muted, 10%) !default;
|
||||||
|
|
||||||
|
$primary-shaded-70: lighten($primary, 70%) !default;
|
||||||
|
$primary-shaded-50: lighten($primary, 50%) !default;
|
||||||
|
|
||||||
$white-dark: rgba(#000, 0.03) !default;
|
$white-dark: rgba(#000, 0.03) !default;
|
||||||
$white-dark-light-80: lighten($white-dark, 80%) !default;
|
$white-dark-light-80: lighten($white-dark, 80%) !default;
|
||||||
|
@ -53,16 +53,18 @@ $main-background: rgba(#fff, 1) !default;
|
||||||
$black: rgba(#000, 1) !default;
|
$black: rgba(#000, 1) !default;
|
||||||
$main-background-light: lighten($main-background, 50%) !default;
|
$main-background-light: lighten($main-background, 50%) !default;
|
||||||
|
|
||||||
$primary-text: $primary !default;
|
$primary-text: $primary-dark-10 !default;
|
||||||
$secondary-text: $primary !default;
|
$secondary-text: $secondary-dark-10 !default;
|
||||||
$success-text: $primary !default;
|
$success-text: $success-dark-10 !default;
|
||||||
$warning-text: $primary !default;
|
$warning-text: $warning-dark-10 !default;
|
||||||
$danger-text: $primary !default;
|
$danger-text: $danger-dark-10 !default;
|
||||||
$muted-text: $primary !default;
|
$muted-text: $muted-dark-10 !default;
|
||||||
|
|
||||||
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
||||||
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
||||||
|
|
||||||
|
$primary-inverse: #fff !default;
|
||||||
|
|
||||||
|
|
||||||
// Set dark theme colors
|
// Set dark theme colors
|
||||||
|
|
||||||
|
@ -89,8 +91,6 @@ $dark-danger-dark: darken($dark-danger, 45%) !default;
|
||||||
$dark-muted-dark: darken($dark-muted, 35%) !default;
|
$dark-muted-dark: darken($dark-muted, 35%) !default;
|
||||||
|
|
||||||
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
|
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
|
||||||
$dark-primary-light-70: lighten($dark-primary, 70%) !default;
|
|
||||||
$dark-primary-light-50: lighten($dark-primary, 50%) !default;
|
|
||||||
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
|
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
|
||||||
$dark-success-light-10: lighten($dark-success, 10%) !default;
|
$dark-success-light-10: lighten($dark-success, 10%) !default;
|
||||||
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
|
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
|
||||||
|
@ -104,24 +104,29 @@ $dark-warning-dark-10: darken($dark-warning, 10%) !default;
|
||||||
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
|
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
|
||||||
$dark-muted-dark-10: darken($dark-muted, 10%) !default;
|
$dark-muted-dark-10: darken($dark-muted, 10%) !default;
|
||||||
|
|
||||||
|
$dark-primary-shaded-70: darken($primary, 7%) !default;
|
||||||
|
$dark-primary-shaded-50: darken($primary, 5%) !default;
|
||||||
|
|
||||||
$dark-white-dark: rgba(#fff, 0.03) !default;
|
$dark-white-dark: rgba(#fff, 0.03) !default;
|
||||||
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
|
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
|
||||||
$dark-light-dark: rgba(#fff, 0.7) !default;
|
$dark-light-dark: rgba(#fff, 0.7) !default;
|
||||||
$dark-white: rgba(#fff, 1) !default;
|
$dark-white: rgba(#fff, 1) !default;
|
||||||
$dark-main-background: rgba(#41403e, 1) !default;
|
$dark-main-background: rgba($primary, 1) !default;
|
||||||
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
|
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
|
||||||
$dark-black: rgba(#000, 1) !default;
|
$dark-black: rgba(#000, 1) !default;
|
||||||
|
|
||||||
$dark-primary-text: #41403e !default;
|
$dark-primary-text: $primary !default;
|
||||||
$dark-secondary-text: #41403e !default;
|
$dark-secondary-text: $dark-secondary-dark-10 !default;
|
||||||
$dark-success-text: #41403e !default;
|
$dark-success-text: $dark-success-dark-10 !default;
|
||||||
$dark-warning-text: #41403e !default;
|
$dark-warning-text: $dark-warning-dark-10 !default;
|
||||||
$dark-danger-text: #41403e !default;
|
$dark-danger-text: $dark-danger-dark-10 !default;
|
||||||
$dark-muted-text: #41403e !default;
|
$dark-muted-text: $dark-muted-dark-10 !default;
|
||||||
|
|
||||||
$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
||||||
$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
||||||
|
|
||||||
|
$dark-primary-inverse: $primary !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$theme-map: (
|
$theme-map: (
|
||||||
|
@ -145,8 +150,6 @@ $theme-map: (
|
||||||
danger-dark:$danger-dark,
|
danger-dark:$danger-dark,
|
||||||
muted-dark:$muted-dark,
|
muted-dark:$muted-dark,
|
||||||
primary-light-10:$primary-light-10,
|
primary-light-10:$primary-light-10,
|
||||||
primary-light-50: $primary-light-50,
|
|
||||||
primary-light-70: $primary-light-70,
|
|
||||||
secondary-light-10:$secondary-light-10,
|
secondary-light-10:$secondary-light-10,
|
||||||
success-light-10:$success-light-10,
|
success-light-10:$success-light-10,
|
||||||
warning-light-10:$warning-light-10,
|
warning-light-10:$warning-light-10,
|
||||||
|
@ -158,13 +161,15 @@ $theme-map: (
|
||||||
warning-dark-10:$warning-dark-10,
|
warning-dark-10:$warning-dark-10,
|
||||||
danger-dark-10:$danger-dark-10,
|
danger-dark-10:$danger-dark-10,
|
||||||
muted-dark-10:$muted-dark-10,
|
muted-dark-10:$muted-dark-10,
|
||||||
|
primary-shaded-50: $primary-shaded-50,
|
||||||
|
primary-shaded-70: $primary-shaded-70,
|
||||||
white-dark:$white-dark,
|
white-dark:$white-dark,
|
||||||
white-dark-light-80:$white-dark-light-80,
|
white-dark-light-80:$white-dark-light-80,
|
||||||
light-dark:$light-dark,
|
light-dark:$light-dark,
|
||||||
white:$white,
|
'white':$white,
|
||||||
main-background: $main-background,
|
main-background: $main-background,
|
||||||
main-background-light: $main-background-light,
|
main-background-light: $main-background-light,
|
||||||
black: $black,
|
'black': $black,
|
||||||
primary-text:$primary-text,
|
primary-text:$primary-text,
|
||||||
secondary-text:$secondary-text,
|
secondary-text:$secondary-text,
|
||||||
success-text:$success-text,
|
success-text:$success-text,
|
||||||
|
@ -173,6 +178,7 @@ $theme-map: (
|
||||||
muted-text:$muted-text,
|
muted-text:$muted-text,
|
||||||
shadow-color-regular: $shadow-color-regular,
|
shadow-color-regular: $shadow-color-regular,
|
||||||
shadow-color-hover: $shadow-color-hover,
|
shadow-color-hover: $shadow-color-hover,
|
||||||
|
primary-inverse: $primary-inverse,
|
||||||
),
|
),
|
||||||
dark: (
|
dark: (
|
||||||
primary: $dark-primary,
|
primary: $dark-primary,
|
||||||
|
@ -194,8 +200,6 @@ $theme-map: (
|
||||||
danger-dark:$dark-danger-dark,
|
danger-dark:$dark-danger-dark,
|
||||||
muted-dark:$dark-muted-dark,
|
muted-dark:$dark-muted-dark,
|
||||||
primary-light-10:$dark-primary-light-10,
|
primary-light-10:$dark-primary-light-10,
|
||||||
primary-light-50: $dark-primary-light-50,
|
|
||||||
primary-light-70: $dark-primary-light-70,
|
|
||||||
secondary-light-10:$dark-secondary-light-10,
|
secondary-light-10:$dark-secondary-light-10,
|
||||||
success-light-10:$dark-success-light-10,
|
success-light-10:$dark-success-light-10,
|
||||||
warning-light-10:$dark-warning-light-10,
|
warning-light-10:$dark-warning-light-10,
|
||||||
|
@ -207,13 +211,15 @@ $theme-map: (
|
||||||
warning-dark-10:$dark-warning-dark-10,
|
warning-dark-10:$dark-warning-dark-10,
|
||||||
danger-dark-10:$dark-danger-dark-10,
|
danger-dark-10:$dark-danger-dark-10,
|
||||||
muted-dark-10:$dark-muted-dark-10,
|
muted-dark-10:$dark-muted-dark-10,
|
||||||
|
primary-shaded-50: $dark-primary-shaded-50,
|
||||||
|
primary-shaded-70: $dark-primary-shaded-70,
|
||||||
white-dark:$dark-white-dark,
|
white-dark:$dark-white-dark,
|
||||||
white-dark-light-80:$dark-white-dark-light-80,
|
white-dark-light-80:$dark-white-dark-light-80,
|
||||||
light-dark:$dark-light-dark,
|
light-dark:$dark-light-dark,
|
||||||
white:$dark-white,
|
'white':$dark-white,
|
||||||
main-background: $dark-main-background,
|
main-background: $dark-main-background,
|
||||||
main-background-light: $dark-main-background-light,
|
main-background-light: $dark-main-background-light,
|
||||||
black: $dark-black,
|
'black': $dark-black,
|
||||||
primary-text:$dark-primary-text,
|
primary-text:$dark-primary-text,
|
||||||
secondary-text:$dark-secondary-text,
|
secondary-text:$dark-secondary-text,
|
||||||
success-text:$dark-success-text,
|
success-text:$dark-success-text,
|
||||||
|
@ -222,6 +228,7 @@ $theme-map: (
|
||||||
muted-text:$dark-muted-text,
|
muted-text:$dark-muted-text,
|
||||||
shadow-color-regular: $dark-shadow-color-regular,
|
shadow-color-regular: $dark-shadow-color-regular,
|
||||||
shadow-color-hover: $dark-shadow-color-hover,
|
shadow-color-hover: $dark-shadow-color-hover,
|
||||||
|
primary-inverse: $dark-primary-inverse,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue