@tabler/core 1.0.0-beta → 1.0.0-beta10

package/src/scss/demo/_examples.scss

@@ -1,6 +1,6 @@
 .example {
   padding: 2rem;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
   position: relative;
@@ -79,8 +79,17 @@
 }
 
 @include dark-mode {
+  .example {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .example-content {
+    color: $dark-mode-text;
+  }
+
   .example-code {
-    border: 1px solid $border-color;
+    border-color: $dark-mode-border-color;
     border-top: none;
   }
 }

package/src/scss/demo/_highlight.scss

@@ -11,7 +11,6 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: $code-font-size;
   border-radius: $border-radius;
   @include scrollbar;
 }

package/src/scss/demo.scss

@@ -60,7 +60,7 @@ body.no-transitions * {
 }
 
 
-$demo-icon-size: 7rem;
+$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -82,11 +82,11 @@ $demo-icon-size: 7rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: $demo-icon-size;
+  aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-right: 1px solid var(--#{$variable-prefix}border-color);
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,3 +101,32 @@ $demo-icon-size: 7rem;
   }
 }
 
+
+//
+// Settings
+//
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: $shadow;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--#{$variable-prefix}border-color);
+  box-shadow: $shadow;
+
+  &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
+  &-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
+  &-transparent { background: $light; }
+  &-dark { background: $dark; }
+  &-colored { background-image: linear-gradient(135deg, var(--#{$variable-prefix}primary) 50%, $light 50%); }
+}

package/src/scss/fonts/_webfonts.scss

@@ -1,15 +1,65 @@
-@if $google-font {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google {
+  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-url);
+} @else if $font-local {
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff') format('woff');
+  }
 }
 
-@if $google-font-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google-monospaced {
+  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-monospaced-url);
 }
 
-@if $icon-fonts {
-  @each $icon-font in $icon-fonts {
+@if $font-icons {
+  @each $icon-font in $font-icons {
     @import url($icon-font);
   }
 }

package/src/scss/layout/_core.scss

@@ -1,8 +1,16 @@
 // stylelint-disable property-no-vendor-prefix
-html {
+:root {
   font-size: 16px;
-  scroll-behavior: smooth;
   height: 100%;
+
+  --#{$variable-prefix}card-bg: #{$card-bg};
+  --#{$variable-prefix}card-bg-rgb: #{to-rgb($card-bg)};
+
+  --#{$variable-prefix}border-color: #{$border-color};
+  --#{$variable-prefix}border-color-rgb: #{to-rgb($border-color)};
+
+  --#{$variable-prefix}border-color-light: #{$border-color-light};
+  --#{$variable-prefix}border-color-light-rgb: #{to-rgb($border-color-light)};
 }
 
 body {
@@ -14,12 +22,54 @@ body {
   position: relative;
   min-height: 100%;
 
-  .content * {
-    @include scrollbar;
-  }
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   @media print {
     background: transparent;
   }
 }
 
+@include scrollbar;
+
+//
+// Fluid container
+//
+.layout-fluid {
+  .container,
+  [class^="container-"],
+  [class*=" container-"] {
+    max-width: 100%;
+  }
+}
+
+//
+// Boxed container
+//
+.layout-boxed {
+  --#{$variable-prefix}theme-boxed-border-radius: 0;
+  --#{$variable-prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
+
+  @include media-breakpoint-up(md) {
+    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    padding: 1rem;
+    --#{$variable-prefix}theme-boxed-border-radius: #{$border-radius};
+  }
+
+  .page {
+    margin: 0 auto;
+    max-width: var(--#{$variable-prefix}theme-boxed-width);
+    border-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+    color: $body-color;
+
+    @include media-breakpoint-up(md) {
+      border: 1px solid var(--tblr-border-color);
+      background: var(--tblr-body-bg);
+    }
+
+    > .navbar:first-child {
+      border-top-left-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+      border-top-right-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+    }
+  }
+}

package/src/scss/layout/_dark.scss

@@ -0,0 +1,195 @@
+/*!
+ * Tabler (v0.9.0): _dark.scss
+ * Copyright 2018-2021 The Tabler Authors
+ * Copyright 2018-2021 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+// stylelint-disable declaration-no-important
+body:not(.theme-dark) .hide-theme-light {
+  display: none !important;
+}
+
+@include dark-mode {
+  & {
+    --#{$variable-prefix}body-color: #{$dark-mode-text};
+    --#{$variable-prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
+
+    --#{$variable-prefix}body-bg: #{$dark-mode-darken};
+    --#{$variable-prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
+
+    --#{$variable-prefix}card-bg: #{$dark};
+    --#{$variable-prefix}card-bg-rgb: #{to-rgb($dark)};
+
+    --#{$variable-prefix}border-color: #{$dark-mode-border-color};
+    --#{$variable-prefix}border-color-light: #{$dark-mode-border-color-light};
+
+    --#{$variable-prefix}btn-color: #{$dark};
+
+    color: $dark-mode-text;
+    background-color: $dark-mode-darken;
+  }
+
+  .page {
+    color: $dark-mode-text;
+  }
+
+  .hide-theme-dark {
+    display: none !important;
+  }
+
+  .text-body {
+    color: $dark-mode-text!important;
+  }
+
+  .card,
+  .card-footer,
+  .card-stacked::after,
+  .footer:not(.footer-transparent),
+  .modal-content,
+  .modal-header,
+  .dropdown-menu,
+  .toast,
+  .toast-header,
+  .alert:not(.alert-important) {
+    background-color: $dark;
+    color: inherit;
+  }
+
+  .card {
+    border-color: transparent;
+  }
+
+  .card-tabs .nav-tabs .nav-link {
+    background-color: $dark-mode-darken;
+    color: inherit;
+  }
+
+  pre {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .card-tabs .nav-tabs .nav-link.active {
+    background-color: $dark;
+    color: inherit;
+  }
+
+  .btn-white,
+  .form-file-button {
+    //@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
+    background-image: none;
+  }
+
+  .form-check-input:not(:checked),
+  .form-select,
+  .form-file-text,
+  .form-control,
+  .form-selectgroup-label,
+  .form-selectgroup-check,
+  .form-imagecheck-figure:before {
+    background-color: $dark-mode-darken;
+    color: $dark-mode-text;
+    border-color: $dark-mode-border-color;
+  }
+
+  .form-control-plaintext {
+    color: $dark-mode-text;
+  }
+
+  .input-group-flat .input-group-text {
+    background-color: $dark-mode-darken;
+  }
+
+  .input-group-text {
+    border-color: $dark-mode-border-color;
+  }
+
+  .highlight {
+    background-color: $dark-mode-darken;
+  }
+
+  .avatar {
+    --#{$variable-prefix}avatar-bg: #{$dark-mode-lighten};
+  }
+
+  .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px $dark;
+  }
+
+  .markdown,
+  .markdown>*,
+  .accordion-button {
+    color: inherit;
+  }
+
+  .btn-close,
+  .accordion-button:after {
+    filter: $btn-close-white-filter;
+  }
+
+  .apexcharts-text {
+    fill: $dark-mode-text;
+  }
+
+  .apexcharts-gridline {
+    stroke: var(--#{$variable-prefix}border-color);
+  }
+
+  .apexcharts-legend-text {
+    color: inherit !important;
+  }
+
+  .apexcharts-tooltip {
+    background: $dark !important;
+    border: 1px solid $dark-mode-border-color !important;
+    box-shadow: 2px 2px 6px -4px $dark-mode-darken !important;
+
+    .apexcharts-tooltip-title {
+      background: $dark !important;
+      border-bottom: 1px solid $dark-mode-border-color !important;
+    }
+  }
+
+  .navbar-brand-autodark {
+    @include autodark-image;
+  }
+
+  .table thead th,
+  .input-group-text {
+    background: transparent;
+  }
+
+  .list-group-header {
+    background: $dark-mode-darken;
+  }
+
+  .list-group-item {
+    border-color: $border-color-transparent;
+  }
+
+  .list-group-item:not(.disabled):not(:disabled) {
+    color: $dark-mode-text;
+  }
+
+  .list-group-item {
+    &.disabled,
+    &:disabled {
+      color: $gray-600;
+    }
+  }
+
+  .apexcharts-radialbar-area {
+    stroke: $dark-mode-border-color;
+  }
+
+  .form-control.is-invalid,
+  .was-validated .form-control:invalid {
+    border-color: var(--#{$variable-prefix}danger);
+  }
+
+  .form-control.is-valid,
+  .was-validated .form-control:valid {
+    border-color: var(--#{$variable-prefix}success);
+  }
+}

package/src/scss/layout/_footer.scss

@@ -1,15 +1,12 @@
 .footer {
   border-top: 1px solid $footer-border-color;
   background-color: $footer-bg;
-  padding: 2rem 0;
+  padding: $footer-padding-y 0;
   color: $text-muted;
-
-  margin-bottom: (-$content-padding-y);
-  margin-top: $content-padding-y;
+  margin-top: auto;
 }
 
 .footer-transparent {
-  margin-top: 0;
   background-color: transparent;
   border-top: 0;
 }

package/src/scss/layout/_navbar.scss

@@ -58,7 +58,7 @@
 
 @mixin navbar-dark {
   @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
-  @include scrollbar(true);
+  @include scrollbar;
 
   .input-icon-addon {
     color: rgba($dark-mode-text, .64);
@@ -112,6 +112,7 @@
         display: flex;
         width: auto;
         padding-left: add($container-padding-x, 1.75rem);
+        color: inherit;
       }
 
       .dropdown-menu .dropdown-item {
@@ -124,12 +125,12 @@
     }
 
     .dropdown-toggle:after {
-      margin-inline-start: auto;
+      margin-left: auto;
     }
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-left-width: 2px;
+      border-left-width: 3px;
       right: auto;
       top: 0;
       bottom: 0;
@@ -240,8 +241,16 @@ Navbar
 
         &.navbar-vertical {
           ~ .navbar,
-          ~ .content {
-            margin-inline-start: $sidebar-width;
+          ~ .page-wrapper {
+            margin-left: $sidebar-width;
+          }
+        }
+
+        &.navbar-vertical.navbar-right {
+          ~ .navbar,
+          ~ .page-wrapper {
+            margin-left: 0;
+            margin-right: $sidebar-width;
           }
         }
       }
@@ -283,7 +292,7 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
+  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
   position: relative;
 
   &:before,
@@ -296,7 +305,7 @@ Navbar toggler
     background: inherit;
     position: absolute;
     left: 0;
-    transition: inherit;
+    @include transition(inherit);
   }
 
   &:before {
@@ -309,7 +318,7 @@ Navbar toggler
 
   .navbar-toggler[aria-expanded="true"] & {
     transform: rotate(45deg);
-    transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
+    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
     &:before {
       top: 0;
@@ -382,8 +391,9 @@ Navbar vertical
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: flex-start;
-            transition: .3s transform;
+            @include transition(transform $transition-time);
             overflow-x: auto;
+            padding: 0;
 
             &.navbar-right {
               left: auto;
@@ -391,7 +401,7 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
+              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
               justify-content: center;
             }
 

package/src/scss/layout/_page.scss

@@ -5,35 +5,82 @@
   min-height: 100vh;
 }
 
-.content {
-  margin-top: $content-padding-y;
-  margin-bottom: $content-padding-y;
+.page-center {
+  justify-content: center;
+}
+
+.page-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
 
-  >[class^="container"] {
-    flex: 1;
-  }
-
   @media print {
     margin: 0 !important;
   }
 }
 
-.content-full {
-  margin: 0;
+.page-wrapper-full {
+  .page-body:first-child {
+    margin: 0;
+    border-top: 0;
+  }
+}
+
+// Content body
+.page-body {
+  margin-top: $content-padding-y;
+  margin-bottom: $content-padding-y;
+}
+
+.page-body-card {
+  background: $card-bg;
+  border-top: 1px solid $card-border-color;
+  padding: $content-padding-y 0;
+  margin-bottom: 0;
+  flex: 1;
+
+  .page-body ~ & {
+    margin-top: 0;
+  }
 }
 
+.page-cover {
+  background: no-repeat center/cover;
+  min-height: 9rem;
+
+  @include media-breakpoint-up(md) {
+    min-height: 12rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    min-height: 15rem;
+  }
+}
+
+.page-cover-overlay {
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: $overlay-gradient;
+  }
+}
+
+
 .page-header {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   min-height: 2.25rem;
-  margin: 0 0 $content-padding-y;
+  flex-direction: column;
+  justify-content: center;
 
-  >* {
-    flex: 1;
+  .page-wrapper & {
+    margin: $content-padding-y 0 0;
   }
 }
 
@@ -50,7 +97,7 @@
   margin: 0;
   font-size: $h2-font-size;
   line-height: $h2-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: $font-weight-bold;
   color: inherit;
   display: flex;
   align-items: center;
@@ -58,7 +105,7 @@
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    margin-inline-end: .25rem;
+    margin-right: .25rem;
   }
 }
 
@@ -70,4 +117,22 @@
 .page-subtitle {
   margin-top: .25rem;
   color: $text-muted;
+}
+
+//
+// Page tabs
+//
+.page-tabs {
+  margin-top: .5rem;
+  position: relative;
+}
+
+.page-header-tabs {
+  .nav-bordered {
+    border: 0;
+  }
+
+  + .page-body-card {
+    margin-top: 0;
+  }
 }