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

feat: Enhance layout options in settings and update SCSS imports

Browse Source
This commit is contained in:
codecalm
2025-12-01 12:06:52 +01:00
parent ec9469332e
commit 4842316907
4 changed files with 69 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/scss/_core.scss
View File

@@ -13,6 +13,7 @@
@import 'layout/page';
@import 'layout/footer';
@import 'layout/dark';
@import 'layout/layout';
@import 'ui/accordion';
@import 'ui/alerts';

44
core/scss/layout/_core.scss
View File

@@ -1,5 +1,3 @@
@use 'sass:map';
html {
scrollbar-gutter: stable;
@@ -32,45 +30,3 @@ body {
}
@include scrollbar;
//
// Fluid container
//
.layout-fluid {
.container,
[class^='container-'],
[class*=' container-'] {
max-width: 100%;
}
}
//
// Boxed container
//
.layout-boxed {
--#{$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, 0.1), transparent) fixed;
padding: 1rem;
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
}
.page {
margin: 0 auto;
max-width: var(--#{$prefix}theme-boxed-width);
border-radius: var(--#{$prefix}theme-boxed-border-radius);
color: var(--#{$prefix}body-color);
@include media-breakpoint-up(md) {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}body-bg);
}
> .navbar:first-child {
border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
}
}
}

47
core/scss/layout/_layout.scss Normal file
View File

@@ -0,0 +1,47 @@
@use 'sass:map';
//
// Fluid container
//
.layout-fluid,
[data-bs-theme-layout="fluid"],
[data-layout="fluid"] {
.container,
[class^='container-'],
[class*=' container-'] {
max-width: 100%;
}
}
//
// Boxed container
//
.layout-boxed,
[data-bs-theme-layout="boxed"],
[data-layout="boxed"] {
--#{$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, 0.1), transparent) fixed;
padding: 1rem;
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
}
.page {
margin: 0 auto;
max-width: var(--#{$prefix}theme-boxed-width);
border-radius: var(--#{$prefix}theme-boxed-border-radius);
color: var(--#{$prefix}body-color);
@include media-breakpoint-up(md) {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}body-bg);
}
>.navbar:first-child {
border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
}
}
}

27
shared/includes/settings.html
View File

@@ -43,13 +43,14 @@
<label class="form-label">Font family</label>
<p class="form-hint">Choose the font family that fits your app.</p>
<div>
<div class="form-selectgroup">
{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
<label class="form-check">
<div class="form-selectgroup-item">
<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
<div class="form-check-label">{{ font | capitalize }}</div>
</div>
<label class="form-selectgroup-item">
<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
<span class="form-selectgroup-label">
<span class="form-selectgroup-check"></span>
<span class="display-6" style="font-family: var(--tblr-font-{{ font }})">Aa</span>
</span>
</label>
{% endfor %}
</div>
@@ -88,6 +89,19 @@
{% endfor %}
</div>
</div>
<div class="mb-4">
<label class="form-label">Layout</label>
<p class="form-hint">Choose the layout style for your app.</p>
{% assign layouts = 'fluid,boxed' | split: ',' %} {% for layout in layouts %}
<label class="form-check">
<div class="form-selectgroup-item">
<input type="radio" name="theme-layout" value="{{ layout }}" class="form-check-input"{% if layout == 'fluid' %} checked{% endif %} />
<div class="form-check-label">{{ layout | capitalize }}</div>
</div>
</label>
{% endfor %}
</div>
</div>
<div class="mt-auto space-y">
@@ -121,6 +135,7 @@
"theme-font": "sans-serif",
"theme-primary": "blue",
"theme-radius": "1",
"theme-layout": "fluid",
}
var url = new URL(window.location)