Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

dark theme, remove unused functions

Browse Source
This commit is contained in:
codecalm
2019-12-16 00:35:54 +01:00
parent 7d66c8ab95
commit 6d786c27ed
14 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@@ -8,6 +8,8 @@ github_url: https://github.com/tabler/tabler
debug: false
dark-theme: false
plugins:
- jekyll-random
- jekyll-tidy

12
pages/_includes/cards/invoice.html
View File

@@ -46,7 +46,7 @@
<tr>
<td class="text-center">1</td>
<td>
<p class="font-w600 mb-1">Logo Creation</p>
<p class="strong mb-1">Logo Creation</p>
<div class="text-muted">Logo and business cards design</div>
</td>
<td class="text-center">
@@ -58,7 +58,7 @@
<tr>
<td class="text-center">2</td>
<td>
<p class="font-w600 mb-1">Online Store Design &amp; Development</p>
<p class="strong mb-1">Online Store Design &amp; Development</p>
<div class="text-muted">Design/Development for all popular modern browsers</div>
</td>
<td class="text-center">
@@ -70,7 +70,7 @@
<tr>
<td class="text-center">3</td>
<td>
<p class="font-w600 mb-1">App Design</p>
<p class="strong mb-1">App Design</p>
<div class="text-muted">Promotional mobile application</div>
</td>
<td class="text-center">
@@ -80,15 +80,15 @@
<td class="text-right">$3.200,00</td>
</tr>
<tr>
<td colspan="4" class="font-w600 text-right">Subtotal</td>
<td colspan="4" class="strong text-right">Subtotal</td>
<td class="text-right">$25.000,00</td>
</tr>
<tr>
<td colspan="4" class="font-w600 text-right">Vat Rate</td>
<td colspan="4" class="strong text-right">Vat Rate</td>
<td class="text-right">20%</td>
</tr>
<tr>
<td colspan="4" class="font-w600 text-right">Vat Due</td>
<td colspan="4" class="strong text-right">Vat Due</td>
<td class="text-right">$5.000,00</td>
</tr>
<tr>

4
pages/_layouts/base.html
View File

@@ -31,7 +31,9 @@
<style>body { display: none; }</style>
</head>
<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
<body class="antialiased{% if dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{{ content }}

53
scss/_dark.scss
View File

@@ -1,30 +1,37 @@
// stylelint-disable declaration-no-important
@mixin dark-mode {
$dark-body-bg: #222935;
$dark-body-color: #afbdd1;
$dark-border-color: rgba($border-color, .01);
@mixin dark-mode {
&,
.modal-content,
.dropdown-menu {
color: #afbdd1;
background: $dark;
}
.dropdown-menu-arrow::after {
border-bottom-color: $dark;
.dropdown-menu,
.example-bg {
color: $dark-body-color;
background: $dark-body-bg;
}
.card,
.header,
.sidebar,
.sidenav,
.topnav,
.navbar,
.form-control,
.form-select,
.form-switch .form-check-input,
.selectgroup-button {
.topbar {
color: inherit;
background: rgba(0, 0, 0, .1);
background: rgba($white, .02);
border-color: $dark-border-color;
}
.progress,
.form-control-light {
background: $dark-border-color;
}
.example,
.card-footer,
.card-header,
.table th, .markdown table th, .table td, .markdown table td,
.dropdown-menu {
border-color: $dark-border-color;
}
.text-body {
@@ -32,16 +39,22 @@
}
.avatar-list-stacked .avatar {
box-shadow: 0 0 0 2px #2b3648;
box-shadow: 0 0 0 2px #222226;
}
.navbar-brand-logo {
filter: brightness(0) invert(1);
}
.form-fieldset {
border-color: transparent;
}
}
body.theme-dark {
@include dark-mode;
@media not print {
body.theme-dark {
@include dark-mode;
}
}
@media (prefers-color-scheme: dark) {

5
scss/_variables.scss
View File

@@ -217,7 +217,7 @@ $btn-font-weight: $font-weight-bold !default;
$btn-border-radius: 3px !default;
//cards
$card-border-color: $border-color !default;
$card-border-color: $border-color-alpha !default;
$card-border-radius: $border-radius !default;
$card-cap-bg: $min-black !default;
@@ -250,8 +250,7 @@ $loader-size: 2.5rem !default;
//navbar
$navbar-bg: $white !default;
$navbar-height: 3.5rem !default;
$navbar-border-color: $border-color !default;
$navbar-border-color: $border-color !default;
$navbar-border-color: $border-color-alpha !default;
//nav
$nav-link-padding-y: 1rem !default;

2
scss/layout/_page.scss
View File

@@ -18,5 +18,5 @@
font-size: $h2-font-size;
font-weight: 400;
line-height: 1;
color: $body-color;
color: inherit;
}

11
scss/mixins/_functions.scss
View File

@@ -1,7 +1,3 @@
@function px2rem($px) {
@return ($px / 16px) * 1rem;
}
@function alpha-attribute($color, $background) {
$percent: alpha($color) * 100%;
$opaque: opacify($color, 1);
@@ -10,14 +6,9 @@
}
@function theme-color-lighter($color) {
@return alpha-attribute(rgba($color, .2), #fff);
@return rgba($color, .2);
}
@function theme-color-lightest($color) {
@return mix($color, #fff, 10%);
}
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);

4
scss/ui/_forms.scss
View File

@@ -37,7 +37,7 @@ textarea {
.form-fieldset {
padding: 1rem;
margin-bottom: 1rem;
background: $gray-100;
background: $min-black;
border: 1px solid $border-color;
border-radius: $border-radius;
}
@@ -58,7 +58,7 @@ Form help
display: inline-block;
width: 1rem;
height: 1rem;
font-size: px2rem(12px);
font-size: $h5-font-size;
line-height: 1rem;
color: $text-muted;
text-align: center;

2
scss/ui/_highlight.scss
View File

@@ -2,7 +2,7 @@
max-height: 40rem;
margin: 1rem 0 2rem;
overflow: auto;
font-size: px2rem(15px);
font-size: $font-size-base;
background: #fcfcfc;
border: 1px solid $border-color;
border-radius: 3px;

4
scss/ui/_icons.scss
View File

@@ -18,11 +18,11 @@
}
.icon-md {
font-size: px2rem(24px);
font-size: 1.5rem;
}
.icon-lg {
font-size: px2rem(32px);
font-size: 2rem;
}

2
scss/ui/_pagination.scss
View File

@@ -3,7 +3,7 @@
}
.page-link {
min-width: px2rem(26px);
min-width: 1.5rem;
border-radius: $border-radius;
&:hover {

1
scss/ui/_typo.scss
View File

@@ -27,6 +27,7 @@ h6,
}
strong,
.strong,
b {
font-weight: $font-weight-bold;
}

4
scss/ui/forms/_form-imagecheck.scss
View File

@@ -18,7 +18,7 @@ Image check
display: flex;
margin: 0;
user-select: none;
border: 1px solid $border-color;
border: 1px solid $border-color-alpha;
border-radius: 3px;
.imagecheck-input:focus ~ & {
@@ -27,7 +27,7 @@ Image check
}
.imagecheck-input:checked ~ & {
border-color: $border-color;
border-color: $border-color-alpha;
}
&::before {

2
scss/vendor/_sparkline.scss vendored
View File

@@ -22,7 +22,7 @@
display: flex;
align-items: center;
justify-content: center;
font-size: px2rem(11px);
font-size: $h6-font-size;
.icon {
width: 1rem;