@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/src/scss/_variables.scss

@@ -7,7 +7,7 @@ $enable-gradients: false !default;
 $enable-shadows: true !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
-$enable-negative-margins: false !default;
+$enable-negative-margins: true !default;
 $enable-rfs: false !default;
 $enable-cssgrid: true !default;
 
@@ -52,22 +52,29 @@ $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
 $font-size-base: 0.875rem !default;
+
+$spacing-wide: .04em !default;
+$spacing-normal: 0 !default;
+$spacing-tight: -.04em !default;
+
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
+$font-weight-black: 700 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
-  light: $font-weight-light,
-  normal: $font-weight-normal,
-  medium: $font-weight-medium,
-  bold: $font-weight-bold,
-  headings: $headings-font-weight,
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'bold': $font-weight-bold,
+  'black': $font-weight-black,
+  'headings': $headings-font-weight,
 ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
@@ -293,6 +300,12 @@ $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-values: (
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+  0: 0,
+);
+
 // Icons
 $icon-color: var(--#{$prefix}gray-400) !default;
 
@@ -331,13 +344,13 @@ $avatar-sizes: (
   "xs": (
     size: 1.25rem,
     font-size: $h6-font-size,
-    icon-size: 1rem,
+    icon-size: .75rem,
     status-size: .375rem
   ),
   "sm": (
     size: 2rem,
     font-size: $h5-font-size,
-    icon-size: 1.25rem,
+    icon-size: 1.5rem,
     status-size: .5rem
   ),
   "md": (
@@ -396,7 +409,7 @@ $grid-gutter-width: 1rem !default;
 $container-variations: (
   slim: 16rem,
   tight: 30rem,
-  narrow: 45rem,
+  narrow: 61.875rem,
 ) !default;
 
 // Spacers
@@ -406,9 +419,14 @@ $spacer-2: 0.5rem !default;
 $spacer-3: 1rem !default;
 $spacer-4: 1.5rem !default;
 $spacer-5: 2rem !default;
-$spacer-6: 3rem !default;
-$spacer-7: 5rem !default;
-$spacer-8: 8rem !default;
+$spacer-6: 2.5rem !default;
+
+$spacer-7: 3rem !default;
+$spacer-8: 4rem !default;
+$spacer-9: 5rem !default;
+$spacer-10: 6rem !default;
+$spacer-11: 7rem !default;
+$spacer-12: 8rem !default;
 
 $spacer: $spacer-3 !default;
 
@@ -420,11 +438,18 @@ $spacers: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
+) !default;
+
+$spacers-extra: (
   7: $spacer-7,
   8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$negative-spacers: null !default;
 
 // Sizes
 $size-spacers: (
@@ -453,6 +478,8 @@ $aspect-ratios: (
   "1x2": calc(2 / 1 * 100%),
   "3x1": calc(1 / 3 * 100%),
   "1x3": calc(3 / 1 * 100%),
+  "4x1": calc(1 / 4 * 100%),
+  "1x4": calc(4 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),
@@ -541,15 +568,20 @@ $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
-$input-btn-padding-y: 0.625rem - 0.0625rem !default;
+$input-btn-padding-y: 0.5rem - 0.0625rem !default;
+$input-btn-icon-size: $icon-size !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
 $input-btn-padding-x-sm: 0.25rem !default;
-$input-btn-padding-y-sm: 0.125rem !default;
+$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
+$input-btn-line-height-sm: 1rem !default;
+$input-btn-icon-size-sm: 1rem !default;
 
 $input-btn-font-size-lg: $h2-font-size !default;
-$input-btn-padding-x-lg: 0.75rem !default;
-$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
+$input-btn-line-height-lg: 2rem !default;
+$input-btn-icon-size-lg: 2rem !default;
 
 $input-btn-focus-width: 0.25rem !default;
 
@@ -563,7 +595,10 @@ $input-focus-color: var(--#{$prefix}body-color) !default;
 $input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Buttons
-$btn-disabled-opacity: 0.4 !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
@@ -720,6 +755,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
+$navbar-light-color: var(--#{$prefix}muted) !default;
 
 $navbar-hover-color: $white !default;
 
@@ -729,6 +765,7 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 

package/src/scss/layout/_animations.scss

@@ -59,4 +59,5 @@
   to {
     opacity: 0;
   }
-}
+}
+

package/src/scss/layout/_navbar.scss

@@ -82,7 +82,6 @@ Navbar
   --#{$prefix}navbar-border-width: #{$navbar-border-width};
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
   --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;

package/src/scss/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+  border-radius: var(--#{$prefix}border-radius-lg);
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+  background: var(--#{$prefix}bg-surface-secondary);
+  overflow: hidden;
+}
+
+.browser-header {
+  padding: .25rem 1rem;
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+  margin-right: 3rem;
+  display: flex;
+}
+
+.browser-dots-colored {
+  .browser-dot {
+    &:nth-child(1) {
+      background: #fb6058;
+    }
+
+    &:nth-child(2) {
+      background: #fcbe3b;
+    }
+
+    &:nth-child(3) {
+      background: #2ccb4c;
+    }
+  }
+}
+
+.browser-dot {
+  margin-right: .5rem;
+  width: .75rem;
+  min-width: .75rem;
+  height: .75rem;
+  background: var(--#{$prefix}border-color);
+  border-radius: 50%;
+  border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: .25rem;
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h5);
+  border-radius: var(--#{$prefix}border-radius);
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+  &:hover {
+    text-decoration: none;
+  }
+}

package/src/scss/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+  --#{$prefix}body-font-size: 1rem;
+  --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+  background: var(--tblr-bg-surface) linear-gradient(to bottom, var(--tblr-bg-surface-secondary) 12%, var(--tblr-bg-surface) 99%) repeat-x top center/100% 100vh;
+}

package/src/scss/marketing/_hero.scss

@@ -0,0 +1,69 @@
+//
+// Hero
+//
+.hero {
+  text-align: center;
+  padding: 6.5rem 0;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: var(--#{$prefix}font-weight-black);
+  letter-spacing: $spacing-tight;
+  line-height: $headings-line-height;
+
+  @include media-breakpoint-down(md) {
+    font-size: 2rem;
+  }
+}
+
+.hero-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: 1.5;
+  margin: 0 auto;
+  max-width: 45rem;
+
+  @include media-breakpoint-down(sm) {
+    font-size: var(--#{$prefix}font-size-h3);
+  }
+}
+
+.hero-description-wide {
+  max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+  @include subheader;
+  margin-bottom: 0.5rem;
+}
+
+.hero-img {
+  margin: 4rem auto;
+  max-width: 65rem;
+  border-radius: $border-radius-lg;
+  position: relative;
+  z-index: 1;
+  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+  //  0 4px 6px -2px rgba($color-text, 0.05);
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    position: relative;
+  }
+}
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}

package/src/scss/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  justify-content: center;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+}
+
+.pricing-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: $white;
+  border: 1px solid $border-color;
+  padding: 2rem;
+  margin: 0 0 1rem;
+  position: relative;
+  box-shadow: $box-shadow-card;
+  text-align: center;
+  border-radius: $border-radius-lg;
+
+  @include media-breakpoint-up(md) {
+    margin: 1rem -1px;
+    max-width: $pricing-card-width;
+
+    &:first-child {
+      border-radius: $border-radius-lg 0 0 $border-radius-lg;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    }
+  }
+
+  &.featured {
+    z-index: 1;
+    border: 2px solid $primary;
+    order: -1;
+
+    @include media-breakpoint-up(md) {
+      order: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+      box-shadow: $box-shadow-card;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.pricing-title {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+}
+
+.pricing-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-50%);
+  vertical-align: bottom;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pricing-btn {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+
+.pricing-price {
+  display: flex;
+  justify-content: center;
+  font-size: 2.5rem;
+  line-height: 1;
+  font-weight: $font-weight-black;
+  margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+  font-size: $h2-font-size;
+  line-height: 1.5;
+  margin-right: 0.25rem;
+  font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+  font-weight: $font-weight-normal;
+  color: $text-secondary;
+  align-self: center;
+  margin-left: 0.5rem;
+}
+
+.pricing-features {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+
+  > li:not(:first-child) {
+    margin-top: 0.25rem;
+  }
+}

package/src/scss/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+  0% {
+    transform: translate(85px, 0%);
+  }
+
+  100% {
+    transform: translate(-90px, 0%);
+  }
+}
+
+@keyframes move-forever2 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+@keyframes move-forever3 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+//
+// Sections
+//
+.section {
+  --section-bg: transparent;
+  background: var(--section-bg);
+  position: relative;
+  padding: 5rem 0;
+}
+
+.section-sm {
+  padding: 4rem 0;
+}
+
+.section-white {
+  --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+  --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+  --section-bg: var(--#{$prefix}primary);
+  color: $white;
+}
+
+.section-dark {
+  --section-bg: var(--#{$prefix}dark);
+  color: $white;
+}
+
+.section-header {
+  text-align: center;
+  max-width: 45rem;
+  margin: 0 auto 5rem;
+
+  @at-root .section-sm & {
+    margin-bottom: 4rem;
+  }
+}
+
+.section-title {
+  font-size: var(--#{$prefix}font-size-h1);
+  font-weight: var(--#{$prefix}font-weight-bold);
+  line-height: 1.2;
+}
+
+.section-title-lg {
+  font-size: 2rem;
+}
+
+.section-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
+  margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+  position: absolute;
+  bottom: 100%;
+  pointer-events: none;
+  height: 5rem;
+  width: 100%;
+
+  path {
+    fill: var(--section-bg);
+  }
+
+  .wave-1 {
+    animation: move-forever1 30s linear infinite;
+    animation-delay: -2s;
+  }
+
+  .wave-2 {
+    animation: move-forever2 24s linear infinite;
+    opacity: .5;
+    animation-delay: -2s;
+  }
+
+  .wave-3 {
+    animation: move-forever3 18s linear infinite;
+    opacity: .3;
+    animation-delay: -2s;
+  }
+}
+
+.section-divider-auto {
+  height: auto;
+}

package/src/scss/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+  --#{$prefix}shape-size: #{$avatar-size};
+  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+  background-color: var(--#{$prefix}primary-lt);
+  color: var(--#{$prefix}primary);
+  border-radius: 35%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--#{$prefix}shape-size);
+  width: var(--#{$prefix}shape-size);
+
+  .icon {
+    width: var(--#{$prefix}shape-icon-size);
+    height: var(--#{$prefix}shape-icon-size);
+  }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+  .shape-#{$avatar-size} {
+    --#{$prefix}shape-size: #{map-get($size, size)};
+    --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+  }
+}
+
+@each $name, $color in $colors {
+  .shape-#{$name} {
+    background: var(--#{$prefix}#{$name}-lt);
+    color: var(--#{$prefix}#{$name});
+  }
+}

package/src/scss/mixins/_mixins.scss

@@ -1,11 +1,11 @@
 @mixin subheader($include-color: true, $include-line-height: true) {
-  font-size: $h6-font-size;
+  font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-bold);
   text-transform: uppercase;
   letter-spacing: .04em;
 
   @if $include-line-height {
-    line-height: $h6-line-height;
+    line-height: $h5-line-height;
   }
 
   @if ($include-color) {

package/src/scss/tabler-marketing.scss

@@ -0,0 +1,13 @@
+@import "config";
+@import "variables";
+@import "utilities-marketing";
+
+@import "marketing/core";
+@import "marketing/hero";
+@import "marketing/browser";
+@import "marketing/sections";
+@import "marketing/filters";
+@import "marketing/pricing";
+@import "marketing/shape";
+
+@import "bootstrap/scss/utilities/api";

package/src/scss/tabler-vendors.scss

@@ -11,3 +11,4 @@
 @import "vendor/tinymce";
 @import "vendor/stars-rating";
 @import "vendor/coloris";
+@import "vendor/typed";

package/src/scss/ui/_buttons.scss

@@ -2,7 +2,7 @@
 // Button
 //
 .btn {
-  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size};
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: #{$btn-border-color};
@@ -84,9 +84,9 @@
     --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
@@ -130,13 +130,13 @@
 // Button sizes
 //
 .btn-sm, .btn-group-sm > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: .75rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
 }
 
 .btn-lg, .btn-group-lg > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: 2rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
 }
 
 //

package/src/scss/ui/_images.scss

@@ -13,3 +13,7 @@
     --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }
+
+.img-bg {
+  background: no-repeat center/cover;
+}