tabler v1 fixes

2025-12-21 17:34:25 +04:00 · 2020-11-01 00:32:29 +01:00
parent 4531ba200c
commit 3aa23ffb66
17 changed files with 271 additions and 114 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -36,6 +36,63 @@ exclude:
  - .jekyll-cache
  - redirects.json

+  - all.html
+  - blank.html
+  - buttons.html
+  - calendar.html
+  - cards.html
+  - cards-masonry.html
+  - carousel.html
+  - changelog.html
+  - charts.html
+  - charts-heatmap.html
+  - crypto-currencies.html
+  - docs.html
+  - dropdowns.html
+  - empty.html
+  - error-404.html
+  - error-500.html
+  - error-maintenance.html
+  - favicon.ico
+  - flags.html
+  - forgot-password.html
+  - form-elements.html
+  - gallery.html
+  - icons.html
+  - index.html
+  - invoice.html
+  - layout-combo.html
+  - layout-condensed.html
+  - layout-condensed-dark.html
+  - layout-dark.html
+  - layout-fluid.html
+  - layout-fluid-vertical.html
+  - layout-horizontal.html
+  - layout-navbar-dark.html
+  - layout-navbar-overlap.html
+  - layout-vertical.html
+  - layout-vertical-right.html
+  - license.html
+  - lists.html
+  - maps.html
+  - maps-vector.html
+  - markdown.md
+  - modals.html
+  - music.html
+  - navigation.html
+  - pagination.html
+  - pricing.html
+  - search-results.html
+  - sign-in.html
+  - sign-up.html
+  - snippets.html
+  - social.html
+  - tables.html
+  - tabs.html
+  - typography.html
+  - users.html
+  - wizard.html
+
 markdown: kramdown
 kramdown:
  input: GFM
@@ -50,9 +107,9 @@ toc:
  max_level: 3
  list_class: list-unstyled

-collections:
-  docs:
-    output: true
+#collections:
+#  docs:
+#    output: true

 defaults:
  - scope:
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -139,6 +139,7 @@ gulp.task('sass', () => {
 		.src(`${srcDir}/scss/*.scss`)
 		.pipe(sass({
 			style: 'expanded',
+			precision: 7,
 			importer: (url, prev, done) => {
 				if (url[0] === '~') {
 					url = path.resolve('node_modules', url.substr(1));
--- a/src/pages/_data/settings.yml
+++ b/src/pages/_data/settings.yml
@@ -0,0 +1,55 @@
+- title: General
+  icon: settings
+  description: View and update your store details
+
+- title: Payments
+  icon: cash
+  description: Enable and manage your store's payment providers
+
+- title: Checkout
+  icon: shopping-cart
+  description: Customize your online checkout process
+
+- title: Shipping and delivery
+  icon: truck-delivery
+  description: Manage how you ship orders to customers
+
+- title: Taxes
+  icon: tax
+  description: Manage how your store charges taxes
+
+- title: Locations
+  icon: map-pin
+  description: Manage the places you stock inventory, fulfill orders, and sell products
+
+- title: Notifications
+  icon: bell
+  description: Manage notifications sent to you and your customers
+
+- title: Gift cards
+  icon: gift
+  description: Enable Apple Wallet passes and set gift card expiry dates
+
+- title: Files
+  icon: file-invoice
+  description: Upload images, videos, and documents
+
+- title: Sales channels
+  icon: chart-line
+  description: Manage the channels you use to sell your products and services
+
+- title: Plan and permissions
+  icon: user
+  description: View plan information and manage what staff can see or do in your store
+
+- title: Store languages
+  icon: language
+  description: Manage the languages your customers can view on your store
+
+- title: Billing
+  icon: wallet
+  description: Manage your billing information and view your invoices
+
+- title: Legal
+  icon: license
+  description: Manage your store's legal pages
--- a/src/pages/_includes/layout/css.html
+++ b/src/pages/_includes/layout/css.html
@@ -12,12 +12,8 @@

 <link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>

-{% if page.libs %}
 {% for plugin in site.tabler-plugins %}
-		{% if page.libs contains plugin %}
 	<link href="{{ site.base }}/dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
-		{% endif %}
 {% endfor %}
-{% endif %}

 <link href="{{ site.base }}/dist/css/demo{% if jekyll.environment == 'production' %}.min{% endif %}.css{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
--- a/src/pages/_includes/layout/page-header-actions.html
+++ b/src/pages/_includes/layout/page-header-actions.html
@@ -28,7 +28,6 @@
 		</span>
 		{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" modal-id="report" %}
 		{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" modal-id="report" %}
-	{% endif %}
-
 		{% include ui/modal.html modal-id="report" size="lg" top=true %}
+	{% endif %}
 </div>
--- a/src/pages/_includes/layout/page-header.html
+++ b/src/pages/_includes/layout/page-header.html
@@ -12,13 +12,11 @@
 			<h2 class="page-title">
 				{{ include.title }}
 			</h2>
-		</div>

 			{% if include.description %}
-		<div class="col-auto">
-			<div class="text-muted text-h5 mt-2">{{ include.description }}</div>
-		</div>
+				<div class="text-muted mt-1">{{ include.description }}</div>
 			{% endif %}
+		</div>

 		{% if include.actions %}
 			{% include layout/page-header-actions.html actions=include.actions %}
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -45,7 +45,7 @@
 </head>

 {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
-<body class="{% if layout-dark %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+<body class="antialiased{% if layout-dark %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

 	{{ content }}

--- a/src/pages/_layouts/card.html
+++ b/src/pages/_layouts/card.html
@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<div class="card">
+	<div class="card-body">
+		{{ content }}
+	</div>
+</div>
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,3 +1,5 @@
+$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+
 //Utilities
 $utilities: (
  "text-align": (
@@ -10,6 +12,15 @@ $utilities: (
      center: center
    )
  ),
+  "float": (
+    property: float,
+    responsive: true,
+    values: (
+      left: inline-start,
+      right: inline-end,
+      none: none
+    )
+  ),
  "object": (
    property: object-fit,
    class: object,
@@ -59,6 +70,7 @@ $utilities: (
    values: (
      light: $font-weight-light,
      normal: $font-weight-normal,
+      medium: $font-weight-medium,
      bold: $font-weight-bold,
    )
  ),
@@ -117,7 +129,6 @@ $utilities: (
    class: h,
    values: $size-values
  ),
-
  //Flow-relative values
  "padding-right": (
    responsive: true,
@@ -131,17 +142,35 @@ $utilities: (
    class: pl,
    values: $spacers
  ),
+  "margin": (
+    responsive: true,
+    property: margin,
+    class: m,
+    values: $margin-spacers
+  ),
  "margin-right": (
    responsive: true,
    property: margin-inline-end,
    class: mr,
-    values: map-merge($spacers, (auto: auto))
+    values: $margin-spacers
  ),
  "margin-left": (
    responsive: true,
    property: margin-inline-start,
    class: ml,
-    values: map-merge($spacers, (auto: auto))
+    values: $margin-spacers
+  ),
+  "margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $margin-spacers
+  ),
+  "margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $margin-spacers
  ),
  "negative-margin-right": (
    responsive: true,
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -13,10 +13,11 @@ $enable-negative-margins: false !default;
 $assets-base: ".." !default;

 // FONTS
-$google-font: Nunito !default;
+$google-font: 'Intelo' !default;
+$google-font-monospaced: null !default;

 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;

 // EXTERNAL FONTS
@@ -27,22 +28,54 @@ $icon-stroke-width: 1.5 !default;

 //Fonts
 $font-size-base: .875rem !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 600 !default;
 $body-letter-spacing: 0 !default;

-$line-height-base: (1.5rem/$font-size-base) !default;
-$line-height-sm: (1.25rem/$font-size-base) !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 600 !default;
+
+$line-height-base: (1.25rem/$font-size-base) !default;
+$line-height-sm: (1rem/$font-size-base) !default;
 $line-height-lg: (2rem/$font-size-base) !default;

+$h1-font-size: (28rem / 16) !default;
+$h1-line-height: (2rem/$h1-font-size) !default;
+
+$h2-font-size: (20rem / 16) !default;
+$h2-line-height: (1.75rem/$h2-font-size) !default;
+
+$h3-font-size: (16rem / 16) !default;
+$h3-line-height: (1.5rem/$h3-font-size) !default;
+
+$h4-font-size: $font-size-base !default;
+$h4-line-height: (1.25rem/$h4-font-size) !default;
+
+$h5-font-size: (12rem / 16) !default;
+$h5-line-height: (1rem/$h5-font-size) !default;
+
+$h6-font-size: (10rem / 16) !default;
+$h6-line-height: (1rem/$h6-font-size) !default;
+
+$small-font-size: percentage($h5-font-size/$font-size-base) !default;
+$code-font-size: $small-font-size !default;
+$code-line-height: 1.25rem !default;
+
+$lead-font-size: $font-size-base !default;
+$lead-font-weight: $font-weight-normal !default;
+
+$blockquote-font-size: $font-size-base !default;
+
 // COLORS
-$theme-color-interval: 10% !default;
 $min-contrast-ratio: 1.5 !default;
+$text-muted-opacity: .68 !default;
+$text-muted-light-opacity: .4 !default;
+
+$border-opacity: .18 !default;
+$border-dark-opacity: .32 !default;

 $light: #f5f7fb !default;
 $dark: #252f3f !default;
-$text: #252f3f !default;

 $light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
@@ -78,12 +111,13 @@ $black: #000000 !default;
 $white: #ffffff !default;

 $body-bg: $light !default;
-$body-color: $text !default;
+$body-color: $dark !default;

-$text-muted-opacity: .64 !default; //Perfect color for AA
-$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
-$border-color: rgba($text-muted, .2) !default;
-$border-color-light: rgba($text-muted, .1) !default;
+$text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default;
+$text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default;
+
+$border-color: mix($text-muted, #fff, percentage($border-opacity)) !default;
+$border-color-dark: mix($text-muted, #fff, percentage($border-dark-opacity)) !default;

 $active-bg: rgba($blue, .06) !default;
 $hover-bg: rgba($text-muted, .06) !default;
@@ -95,6 +129,8 @@ $info: $azure !default;
 $warning: $yellow !default;
 $danger: $red !default;

+$code-color: $primary !default;
+
 $social-colors: (
  "facebook": #3b5998,
  "twitter": #1da1f2,
@@ -136,52 +172,27 @@ $dark-mode-darken: darken($dark, 3%) !default;
 $dark-mode-lighten: lighten($dark, 3%) !default;
 $dark-mode-text: $light;

-$avatar-size: 2rem !default;
+// Borders
+$border-width: 1px !default;
+$border-width-wide: 2px !default;
+$border-radius: 4px !default;
+
+// Avatars
+$avatar-size: 2.5rem !default;
 $avatar-sizes: (
  "sm": 1.25rem,
-  "md": 2.5rem,
+  "md": 3.5rem,
  "lg": 4.5rem,
  "xl": 6rem
 ) !default;
-
+$avatar-border-radius: $border-radius !default;
+$avatar-font-size: $h4-font-size;

 $link-decoration: none !default;

-$border-width: 1px !default;
-$border-width-wide: 2px !default;
-$border-radius: 3px !default;
-
 //Typography
 $headings-font-weight: $font-weight-bold !default;

-$h1-font-size: (28rem / 16) !default;
-$h1-line-height: (2rem/$h1-font-size) !default;
-
-$h2-font-size: (20rem / 16) !default;
-$h2-line-height: (2rem/$h2-font-size) !default;
-
-$h3-font-size: (16rem / 16) !default;
-$h3-line-height: (1.5rem/$h3-font-size) !default;
-
-$h4-font-size: $font-size-base !default;
-$h4-line-height: (1.25rem/$h4-font-size) !default;
-
-$h5-font-size: (12rem / 16) !default;
-$h5-line-height: (1rem/$h5-font-size) !default;
-
-$h6-font-size: (10rem / 16) !default;
-$h6-line-height: (1rem/$h6-font-size) !default;
-
-$small-font-size: $h5-font-size !default;
-$blockquote-font-size: $font-size-base !default;
-
-$code-font-size: $h5-font-size !default;
-$code-line-height: 1.25rem !default;
-$code-color: $primary !default;
-
-$lead-font-size: $font-size-base !default;
-$lead-font-weight: $font-weight-normal !default;
-
 $hr-opacity: .1 !default;
 $hr-margin-y: 2rem !default;

@@ -242,9 +253,6 @@ $content-padding-y: 1.25rem !default;

 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
-$alert-bg-level: -8 !default;
-$alert-border-level: -6 !default;
-$alert-color-level: 8 !default;

 //breadcrumb
 $breadcrumb-variants: (
@@ -258,7 +266,7 @@ $badge-empty-size: .5rem !default;

 //buttons
 $input-color: $body-color !default;
-$input-btn-line-height: (20/14) !default;
+$input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-padding-y: .5rem - .0625rem !default;

@@ -289,10 +297,8 @@ $card-cap-bg: $min-black !default;
 $card-cap-padding-x: 1.25rem !default;
 $card-cap-padding-y: .75rem !default;

-$card-active-border-color: $primary !default;
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
-$card-group-margin-sm: .75rem !default;

 $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
@@ -346,14 +352,14 @@ $modal-backdrop-blur: 2px !default;

 $modal-fade-transform: translate(0, -1rem) !default;

-$modal-content-border-color: $border-color-light !default;
+$modal-content-border-color: $border-color !default;
 $modal-content-bg: $gray-50 !default;
 $modal-content-border-radius: $border-radius !default;

 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
 $modal-header-border-width: 1px !default;
-$modal-header-border-color: $border-color-light !default;
+$modal-header-border-color: $border-color !default;
 $modal-header-bg: $white !default;
 $modal-inner-padding: 1.5rem !default;
 $modal-footer-border-width: 0 !default;
@@ -462,8 +468,8 @@ $list-group-action-color: inherit !default;
 $list-group-bg: inherit !default;

 $input-disabled-bg: $gray-100 !default;
-$input-border-color: $border-color !default;
-$input-placeholder-color: $text-muted !default;
+$input-border-color: $border-color-dark !default;
+$input-placeholder-color: $text-muted-light !default;

 $input-group-addon-bg: $min-black !default;
 $input-group-addon-color: $text-muted !default;
--- a/src/scss/demo/_highlight.scss
+++ b/src/scss/demo/_highlight.scss
@@ -3,7 +3,7 @@ $code-yellow: #ffe484;
 $code-purple: #d9a9ff;
 $code-red: #ff8383;
 $code-blue: #93ddfd;
-$code-white: #ffffff;
+//$code-white: #ffffff;
 $code-gray: #a0aec0;

 pre.highlight,
--- a/src/scss/fonts/_webfonts.scss
+++ b/src/scss/fonts/_webfonts.scss
@@ -1,9 +1,13 @@
@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;
-
  @import url($google-font-url);
 }

+@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;
+  @import url($google-font-monospaced-url);
+}
+
@if $icon-fonts {
  @each $icon-font in $icon-fonts {
    @import url($icon-font);
--- a/src/scss/layout/_page.scss
+++ b/src/scss/layout/_page.scss
@@ -6,8 +6,8 @@
 }

 .content {
-  padding-top: $content-padding-y;
-  padding-bottom: $content-padding-y;
+  margin-top: $content-padding-y;
+  margin-bottom: $content-padding-y;
  flex: 1;
  display: flex;
  flex-direction: column;
@@ -23,9 +23,10 @@

 .page-header {
  display: flex;
+  flex-wrap: wrap;
  align-items: center;
  min-height: 2.25rem;
-  margin: 0 0 $card-spacer-y;
+  margin: 0 0 $content-padding-y;

  >* {
    flex: 1;
@@ -39,6 +40,7 @@
 .page-title {
  margin: 0;
  font-size: $h2-font-size;
-  font-weight: $font-weight-normal;
+  line-height: $h2-line-height;
+  font-weight: $font-weight-medium;
  color: inherit;
 }
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -2,18 +2,18 @@
  position: relative;
  width: $avatar-size;
  height: $avatar-size;
-  font-size: $h5-font-size;
+  font-size: $avatar-font-size;
+  font-weight: $font-weight-bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  font-weight: $font-weight-normal;
  color: $text-muted;
  text-align: center;
  text-transform: uppercase;
  vertical-align: bottom;
  user-select: none;
  background: $gray-200 no-repeat center/cover;
-  border-radius: 50%;
+  border-radius: $avatar-border-radius;

  .icon {
    font-size: 1.25em;
--- a/src/scss/ui/_modals.scss
+++ b/src/scss/ui/_modals.scss
@@ -19,7 +19,7 @@
  }

  & + & {
-    border-top: 1px solid $border-color-light;
+    border-top: 1px solid $border-color;
  }
 }

--- a/src/scss/ui/_stamps.scss
+++ b/src/scss/ui/_stamps.scss
@@ -16,7 +16,7 @@
  border-radius: 3px;

  .icon {
-    font-size: 1.25rem;
-    vertical-align: middle;
+    width: 1.5rem;
+    height: 1.5rem;
  }
 }
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -90,6 +90,7 @@ code {
  background: rgba($code-color, .03);
  border: 1px solid rgba($code-color, .064);
  border-radius: $border-radius;
+  font-weight: $font-weight-normal;
 }