Skip to content

Commit

Permalink
update Bootstrap to 5.2.0-beta1 (#1131)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codecalm
codecalm committed Jun 6, 2022
1 parent 85e63a5 commit 8f3bcbd
Show file tree
Hide file tree
Showing 39 changed files with 330 additions and 313 deletions.
6 changes: 3 additions & 3 deletions _config.yml
View file
Expand Up @@ -166,12 +166,12 @@ theme-colors:
info:
class: info
title: Info
light:
class: light
title: Light
dark:
class: dark
title: Dark
light:
class: light
title: Light

button-states:
- class:
Expand Down
30 changes: 18 additions & 12 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -104,7 +104,7 @@
"dependencies": {
"@popperjs/core": "^2.11.5",
"@tabler/icons": "^1.68.0",
"bootstrap": "5.1.3"
"bootstrap": "5.2.0-beta1"
},
"peerDependencies": {
"apexcharts": "^3.35.2",
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/parts/buttons-table.html
View file
Expand Up @@ -6,11 +6,11 @@

{% for state in site.button-states %}
{% if show-states or (state.class != 'active' and state.class != 'disabled') %}
<div class="row g-2 align-items-center mb-n3{% unless forloop.first %} mt-3{% endunless %}">
{% unless hide-labels %}<div class="col-12 col-xl-2 mb-3 font-weight-semibold">{{ state.title }}</div>{% endunless %}
<div class="row g-2 align-items-center">
{% unless hide-labels %}<div class="col-12 col-xl-2 font-weight-semibold">{{ state.title }}</div>{% endunless %}
{% for type in variants %}
{% if show-link or type[0] != 'link' %}
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %} mb-3">
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %}{% if type[0] == 'light' %} bg-dark{% endif %} py-3">
{% if include.icon or include.icon-only %}
{% assign icon = type[1].icon %}
{% endif %}
Expand Down
2 changes: 1 addition & 1 deletion src/scss/_bootstrap-components.scss
View file
@@ -1,4 +1,4 @@
// Components
// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
Expand Down
1 change: 1 addition & 0 deletions src/scss/_bootstrap-config.scss
View file
@@ -1,5 +1,6 @@
// Config
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
52 changes: 26 additions & 26 deletions src/scss/_mixins-override.scss
View file
Expand Up @@ -47,29 +47,29 @@
// Override bootstrap core
}

@mixin button-variant(
$background: null,
$border: null,
$color: null,
$hover-background: null,
$hover-border: null,
$hover-color: null,
$active-background: null,
$active-border: null,
$active-color: null,
$disabled-background: null,
$disabled-border: null,
$disabled-color: null
) {
// Override bootstrap core
}

@mixin button-outline-variant(
$color: null,
$color-hover: null,
$active-background: null,
$active-border: null,
$active-color: null
) {
// Override bootstrap core
}
//@mixin button-variant(
// $background: null,
// $border: null,
// $color: null,
// $hover-background: null,
// $hover-border: null,
// $hover-color: null,
// $active-background: null,
// $active-border: null,
// $active-color: null,
// $disabled-background: null,
// $disabled-border: null,
// $disabled-color: null
//) {
// // Override bootstrap core
//}
//
//@mixin button-outline-variant(
// $color: null,
// $color-hover: null,
// $active-background: null,
// $active-border: null,
// $active-color: null
//) {
// // Override bootstrap core
//}
14 changes: 8 additions & 6 deletions src/scss/_variables.scss
View file
@@ -1,4 +1,4 @@
$variable-prefix: "tblr-" !default;
$prefix: "tblr-" !default;

// BASE CONFIG
$enable-social-colors: true !default;
Expand Down Expand Up @@ -191,6 +191,8 @@ $social-colors: (
"tabler": #206bc4
) !default;

$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));

// Dark mode
$dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
Expand Down Expand Up @@ -299,6 +301,7 @@ $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6

//accordion
$accordion-bg: transparent !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-border-color: $border-color-transparent !default;
$accordion-icon-width: 1rem !default;

Expand Down Expand Up @@ -482,7 +485,7 @@ $nav-bordered-margin-x: 1.25rem !default;
$navbar-height: 3.5rem !default;
$navbar-padding-y: .25rem !default;

$navbar-light-color: rgba($body-color, $text-muted-opacity) !default;
$navbar-light-color: $body-color !default;
$navbar-light-brand-color: $body-color !default;
$navbar-light-border-color: $border-color-transparent !default;
$navbar-light-active-color: $body-color !default;
Expand Down Expand Up @@ -547,7 +550,6 @@ $spinner-height: 1.5rem !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
$spinner-border-width: 2px !default;
$spinner-border-width-sm: 1px !default;

//tables
$table-color: inherit !default;
Expand All @@ -558,9 +560,9 @@ $table-th-border-color: $border-color-transparent !default;
$table-th-padding-x: $table-cell-padding-x !default;
$table-th-padding-y: .5rem !default;
$table-th-color: $text-muted !default;
$table-th-bg: var(--#{$variable-prefix}border-color-light) !default;
$table-th-bg: var(--#{$prefix}border-color-light) !default;
$table-striped-order: even !default;
$table-striped-bg: var(--#{$variable-prefix}border-color-light) !default;
$table-striped-bg: var(--#{$prefix}border-color-light) !default;
$table-group-separator-color: $border-color-transparent !default;

$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
Expand Down Expand Up @@ -627,7 +629,7 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
$form-switch-bg-size: auto !default;

$form-range-track-height: .25rem !default;
$form-range-track-bg: var(--#{$variable-prefix}border-color-light) !default;
$form-range-track-bg: var(--#{$prefix}border-color-light) !default;
$form-range-thumb-border: 2px solid $form-range-track-bg !default;
$form-range-thumb-height: 1rem !default;
$form-range-thumb-focus-box-shadow-width: .125rem !default;
Expand Down
8 changes: 4 additions & 4 deletions src/scss/demo.scss
View file
Expand Up @@ -85,8 +85,8 @@ $demo-icon-size: 4rem;
aspect-ratio: 1;
text-align: center;
padding: .5rem;
border-right: 1px solid var(--#{$variable-prefix}border-color);
border-bottom: 1px solid var(--#{$variable-prefix}border-color);
border-right: 1px solid var(--#{$prefix}border-color);
border-bottom: 1px solid var(--#{$prefix}border-color);
color: inherit;
cursor: pointer;

Expand Down Expand Up @@ -121,12 +121,12 @@ $demo-icon-size: 4rem;
height: 3rem;
width: 3rem;
position: relative;
border: 1px solid var(--#{$variable-prefix}border-color);
border: 1px solid var(--#{$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%); }
&-colored { background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%); }
}
34 changes: 21 additions & 13 deletions src/scss/layout/_core.scss
View file
Expand Up @@ -3,14 +3,22 @@
font-size: 16px;
height: 100%;

--#{$variable-prefix}card-bg: #{$card-bg};
--#{$variable-prefix}card-bg-rgb: #{to-rgb($card-bg)};
@each $name, $color in $theme-colors {
--#{$prefix}#{$name}: #{$color};
}

@each $name, $color in $theme-colors {
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
}

--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-bg-rgb: #{to-rgb($card-bg)};

--#{$variable-prefix}border-color: #{$border-color};
--#{$variable-prefix}border-color-rgb: #{to-rgb($border-color)};
--#{$prefix}border-color: #{$border-color};
--#{$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)};
--#{$prefix}border-color-light: #{$border-color-light};
--#{$prefix}border-color-light-rgb: #{to-rgb($border-color-light)};
}

body {
Expand Down Expand Up @@ -47,19 +55,19 @@ body {
// Boxed container
//
.layout-boxed {
--#{$variable-prefix}theme-boxed-border-radius: 0;
--#{$variable-prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
--#{$prefix}theme-boxed-border-radius: 0;
--#{$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};
--#{$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);
max-width: var(--#{$prefix}theme-boxed-width);
border-radius: var(--#{$prefix}theme-boxed-border-radius);
color: $body-color;

@include media-breakpoint-up(md) {
Expand All @@ -68,8 +76,8 @@ body {
}

> .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);
border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
}
}
}
26 changes: 13 additions & 13 deletions src/scss/layout/_dark.scss
View file
Expand Up @@ -12,19 +12,19 @@ body:not(.theme-dark) .hide-theme-light {

@include dark-mode {
& {
--#{$variable-prefix}body-color: #{$dark-mode-text};
--#{$variable-prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
--#{$prefix}body-color: #{$dark-mode-text};
--#{$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)};
--#{$prefix}body-bg: #{$dark-mode-darken};
--#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};

--#{$variable-prefix}card-bg: #{$dark};
--#{$variable-prefix}card-bg-rgb: #{to-rgb($dark)};
--#{$prefix}card-bg: #{$dark};
--#{$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};
--#{$prefix}border-color: #{$dark-mode-border-color};
--#{$prefix}border-color-light: #{$dark-mode-border-color-light};

--#{$variable-prefix}btn-color: #{$dark};
--#{$prefix}btn-color: #{$dark};

color: $dark-mode-text;
background-color: $dark-mode-darken;
Expand Down Expand Up @@ -114,7 +114,7 @@ body:not(.theme-dark) .hide-theme-light {
}

.avatar {
--#{$variable-prefix}avatar-bg: #{$dark-mode-lighten};
--#{$prefix}avatar-bg: #{$dark-mode-lighten};
}

.avatar-list-stacked .avatar {
Expand All @@ -137,7 +137,7 @@ body:not(.theme-dark) .hide-theme-light {
}

.apexcharts-gridline {
stroke: var(--#{$variable-prefix}border-color);
stroke: var(--#{$prefix}border-color);
}

.apexcharts-legend-text {
Expand Down Expand Up @@ -189,11 +189,11 @@ body:not(.theme-dark) .hide-theme-light {

.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: var(--#{$variable-prefix}danger);
border-color: var(--#{$prefix}danger);
}

.form-control.is-valid,
.was-validated .form-control:valid {
border-color: var(--#{$variable-prefix}success);
border-color: var(--#{$prefix}success);
}
}

1 comment on commit 8f3bcbd

@vercel
Copy link

@vercel vercel bot commented on 8f3bcbd Jun 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tabler – ./

tabler-ui.vercel.app
tabler-git-main-tabler-ui.vercel.app
dev.tabler.io
preview.tabler.io
demo.tabler.io
tabler-tabler-ui.vercel.app

Please sign in to comment.