Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-27 13:34:37 +04:00
Code Issues Projects Releases Wiki Activity

tabler customize

Browse Source
This commit is contained in:
codecalm
2020-02-09 16:49:37 +01:00
parent f13ac7db49
commit 738eff385d
34 changed files with 324 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/rollup.config.js
-3
View File
@@ -40,12 +40,9 @@ module.exports = {
context: "window",
input: {
tabler: path.resolve(__dirname, '../js/tabler.js'),
// 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
'tabler-range-sliders': path.resolve(__dirname, '../js/tabler-range-sliders.js')
},
output: {
banner,
// name: 'tabler',
dir: path.resolve(__dirname, `../${dir}/js/`),
entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
format: 'cjs'
js/tabler-range-sliders.js
-12
View File
@@ -1,12 +0,0 @@
/* Demo only */
$(document).ready(function() {
/* Sliders value */
let slidersText = document.querySelectorAll('[demo-slider]');
for(let i = 0;i<slidersText.length;i++){
window[slidersText[i].getAttribute("demo-slider")].on('update',function(values){
slidersText[i].innerHTML = values.join(' | ');
})
}
});
js/tabler.js
+4 -4
View File
@@ -8,10 +8,10 @@ import {CountUp} from "countup.js";
/**
* Dropdown
*/
var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]'))
dropdownElementList.map(function (dropdownToggleEl) {
return new Dropdown(dropdownToggleEl, {})
});
// var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]'))
// dropdownElementList.map(function (dropdownToggleEl) {
// return new Dropdown(dropdownToggleEl, {})
// });
/**
* Tooltip
package.json
+2 -2
View File
@@ -112,10 +112,10 @@
"@fullcalendar/timegrid": "4.3.0",
"apexcharts": "3.15.5",
"autosize": "4.0.2",
"bootstrap": "twbs/bootstrap#96ac606",
"bootstrap": "twbs/bootstrap#a880a58",
"countup.js": "2.0.4",
"daterangepicker": "3.0.5",
"flatpickr": "^4.6.3",
"flatpickr": "4.6.3",
"fullcalendar": "3.10.1",
"imask": "6.0.1",
"jquery": "3.4.1",
pages/_docs/payments.md
+2 -2
View File
@@ -31,8 +31,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
<tr>
<td>{{ payment.name }}</td>
<td><code>{{ payment.logo }}</code></td>
<td class="w-1p">{% include ui/payment.html payment=payment.logo %}</td>
<td class="w-1p">{% include ui/payment.html payment=payment.logo dark=true %}</td>
<td class="w-1">{% include ui/payment.html payment=payment.logo %}</td>
<td class="w-1">{% include ui/payment.html payment=payment.logo dark=true %}</td>
</tr>
{% endfor %}
</table>
pages/_includes/cards/company-employees.html
+1 -1
View File
@@ -12,7 +12,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1p">{% include ui/avatar.html src=person.photo %}</td>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
pages/_includes/cards/development-activity.html
+5 -5
View File
@@ -12,7 +12,7 @@
</thead>
<tbody>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=10 %}
</td>
<td>{{ site.data.people[10].full_name }}</td>
@@ -20,7 +20,7 @@
<td class="text-nowrap text-muted">May 6, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=17 %}
</td>
<td>{{ site.data.people[17].full_name }}</td>
@@ -28,7 +28,7 @@
<td class="text-nowrap text-muted">April 22, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=16 %}
</td>
<td>{{ site.data.people[16].full_name }}</td>
@@ -36,7 +36,7 @@
<td class="text-nowrap text-muted">April 15, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=12 %}
</td>
<td>{{ site.data.people[12].full_name }}</td>
@@ -44,7 +44,7 @@
<td class="text-nowrap text-muted">April 8, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=19 %}
</td>
<td>{{ site.data.people[19].full_name }}</td>
pages/_includes/cards/invoices.html
+2 -2
View File
@@ -26,8 +26,8 @@
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
pages/_includes/cards/table-users.html
+2 -2
View File
@@ -7,7 +7,7 @@
<th>Usage</th>
<th class="text-center">Payment</th>
<th>Activity</th>
<th class="w-1p">Satisfaction</th>
<th class="w-1">Satisfaction</th>
</tr>
</thead>
<tbody>
@@ -19,7 +19,7 @@
{% assign percentage_color = percentage | number_color %}
<tr>
<td class="text-center w-1p">
<td class="text-center w-1">
{% include ui/avatar.html person-id=person.id %}
</td>
<td>
pages/_includes/forms/form-elements-4.html
+3 -3
View File
@@ -6,7 +6,7 @@
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button>
@@ -16,7 +16,7 @@
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">Option 1</button>
<button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button>
@@ -41,7 +41,7 @@
<div class="mb-3">
<label class="form-label">Toolbar</label>
<div class="btn-group w-100p">
<div class="btn-group w-100">
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %}
{% include ui/button.html color="secondary" icon=icon icon-only=true %}
pages/_includes/layout/customize.html
-79
View File
@@ -1,79 +0,0 @@
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
</div>
</div>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
(function () {
var navbarPrimary = document.getElementById('navbar-primary'),
navbarSecondary = document.getElementById('navbar-secondary');
var events = {
'primary-vertical': function () {
navbarPrimary.classList.toggle('navbar-vertical');
},
'primary-right': function () {
navbarPrimary.classList.toggle('navbar-right');
},
'primary-vertical-narrow': function () {
navbarPrimary.classList.toggle('navbar-vertical-narrow');
},
'dark-mode': function () {
document.body.classList.toggle('theme-dark');
},
'primary-color': function () {
var classList = navbarPrimary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-color': function () {
var classList = navbarSecondary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-visible': function () {
navbarSecondary.classList.toggle('d-none');
},
};
for (var name in events) {
var event = events[name];
(function(event){
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
event.call();
e.preventDefault();
return false;
});
})(event);
}
})();
</script>
{% endcapture_global %}
pages/_includes/layout/footer.html
+1 -3
View File
@@ -1,5 +1,4 @@
<div class="mb-n3 mt-3">
<footer class="footer">
<footer class="footer footer-transparent">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
@@ -23,4 +22,3 @@
</div>
</div>
</footer>
</div>
pages/_includes/layout/homepage.html
-2
View File
@@ -1,5 +1,3 @@
{% include layout/customize.html %}
<div class="row row-deck row-cards">
<div class="col-sm-6 col-lg-3">
{% include cards/charts/sales.html %}
pages/_includes/layout/js.html
-1
View File
@@ -10,4 +10,3 @@
<!-- Tabler Core -->
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler-range-sliders{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
pages/_includes/layout/navbar-menu.html
+2 -2
View File
@@ -32,8 +32,8 @@
</li>
{% endfor %}
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
<a href="#" class="nav-link disabled">
<li class="nav-item d-none-navbar-vertical">
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
<span class="nav-link-title">Customize</span>
</a>
pages/_includes/layout/navbar-primary.html
+4 -3
View File
@@ -9,9 +9,10 @@
<h6 class="navbar-heading mt-4">Tools</h6>
<div class="navbar-side d-none-navbar-vertical-narrow">
{% include layout/navbar-search.html %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
<div class="navbar-side">
{% include layout/navbar-search.html class="d-none-navbar-vertical-narrow" %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-narrow" %}
{% include ui/button.html icon="sliders" icon-only=true color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-wide" %}
</div>
</div>
</div>
pages/_includes/layout/navbar-search.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="d-none d-xl-block ml-auto">
<div class="d-none d-xl-block ml-auto{% if include.class %} {{ include.class }}{% endif %}">
<form action="." method="get">
{% include ui/form/input-icon.html prepend=true %}
</form>
pages/_includes/parts/modals/customize.html
+205
View File
@@ -0,0 +1,205 @@
{% include ui/modal/header.html title="Customize Tabler" %}
<div class="modal-body pt-0">
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
<div class="mb-3">
<label class="form-label">Color scheme</label>
<div class="form-hint">Light or dark presentation.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
<button class="btn btn-secondary" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
</div>
</div>
<div class="mb-4 text-muted">
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
</div>
<div class="mb-3">
<label class="form-label">Navigation position</label>
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Sidebar size</label>
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Sidebar position</label>
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
</div>
</div>
<div>
<label class="form-label">Navigation color</label>
<div class="form-hint">Light or dark version of the sidebar </div>
<div class="btn-group w-100">
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
(function() {
var navbarPrimary = document.getElementById('navbar-primary'),
navbarSecondary = document.getElementById('navbar-secondary');
var defaults = {
theme: 'light',
'navbar-position': 'horizontal',
'navbar-size': 'wide',
'navbar-side': 'left',
'navbar-color': 'light',
};
var eventsClean = {
'theme': function () {
document.body.classList.remove('theme-dark');
},
'navbar-position': function () {
navbarPrimary.classList.remove('navbar-vertical');
navbarSecondary.classList.remove('d-none');
},
'navbar-size': function () {
navbarPrimary.classList.remove('navbar-vertical-narrow');
},
'navbar-side': function () {
navbarPrimary.classList.remove('navbar-right');
},
'navbar-color': function () {
navbarPrimary.classList.remove('navbar-dark');
navbarPrimary.classList.add('navbar-light');
},
};
var events = {
'theme:light': function () {
},
'theme:dark': function () {
document.body.classList.add('theme-dark');
},
'navbar-position:vertical': function () {
navbarPrimary.classList.add('navbar-vertical');
navbarSecondary.classList.add('d-none');
},
'navbar-position:horizontal': function () {
},
'navbar-position:both': function () {
navbarPrimary.classList.add('navbar-vertical');
},
'navbar-size:wide': function () {
},
'navbar-size:narrow': function () {
navbarPrimary.classList.add('navbar-vertical-narrow');
},
'navbar-side:left': function () {
},
'navbar-side:right': function () {
navbarPrimary.classList.add('navbar-right');
},
'navbar-color:light': function () {
},
'navbar-color:dark': function () {
navbarPrimary.classList.add('navbar-dark');
navbarPrimary.classList.remove('navbar-light');
},
};
var updateThemeConfig = function (name) {
var key, value;
if (name) {
[key, value] = name.split(':');
setConfig(key, value);
}
applyConfig();
};
var disableTransitions = function () {
document.body.classList.add('no-transitions');
setTimeout(function () {
document.body.classList.remove('no-transitions');
}, 300);
};
var getConfig = function () {
var config = {};
for (var key in defaults) {
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
}
return config;
};
var setConfig = function (key, value) {
localStorage.setItem('tabler-' + key, value);
};
var applyConfig = function () {
disableTransitions();
var config = getConfig();
console.log('config', config);
for (var key in config) {
var value = config[key];
eventsClean[key] && eventsClean[key].call();
events[key + ':' + value] && events[key + ':' + value].call();
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
activeTrigger.classList.remove('active')
});
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
}
};
applyConfig();
for (var name in events) {
var event = events[name];
(function (event, name) {
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
updateThemeConfig(name);
event.call();
e.preventDefault();
return false;
});
})(event, name);
}
})();
</script>
{% endcapture_global %}
pages/_includes/parts/modals/simple.html
+1 -6
View File
@@ -1,9 +1,4 @@
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
{% include ui/modal/header.html %}
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
</div>
pages/_includes/ui/modal.html
+1 -1
View File
@@ -2,7 +2,7 @@
{% capture_global modals %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-dialog{% unless include.top %} modal-dialog-centered{% endunless %}" role="document">
<div class="modal-content">
{% include parts/modals/{{ modal-id }}.html %}
</div>
pages/_includes/ui/modal/header.html
+6
View File
@@ -0,0 +1,6 @@
<div class="modal-header">
<h5 class="modal-title">{{ include.title | default: 'Modal title' }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
pages/_layouts/base.html
+6 -2
View File
@@ -6,6 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
<meta name="theme-color" content="{{ site.data.colors.blue }}"/>
@@ -19,7 +23,6 @@
<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
{% if page.description %}
<meta name="description" content="{{ page.description | escape }}"/>
@@ -34,9 +37,10 @@
{{ content }}
{% include layout/modals-capture.html %}
{% include layout/js.html %}
{% include layout/js-capture.html %}
{% include layout/modals-capture.html %}
{% if site.debug and jekyll.environment == 'development' %}
{% include layout/debug.html %}
pages/_layouts/default.html
+2
View File
@@ -20,3 +20,5 @@ layout: base
{% include layout/footer.html %}
</div>
</div>
{% include ui/modal.html modal-id="customize" top=true %}
pages/empty.html
-2
View File
@@ -2,5 +2,3 @@
title: Empty page
done: true
---
{% include ui/empty.html illustration=true %}
scss/_dark.scss
+5 -2
View File
@@ -9,7 +9,9 @@ $dark-text: $light;
}
.card,
.navbar-light {
.navbar-light,
.footer,
.modal-content {
background: $dark;
color: inherit;
}
@@ -56,7 +58,8 @@ $dark-text: $light;
}
.markdown,
.markdown>* {
.markdown>*,
.close {
color: inherit;
}
scss/_utilities.scss
+11
View File
@@ -96,4 +96,15 @@ $utilities: (
0: 0,
)
),
"width": (
property: width,
class: w,
values: $size-values
),
"height": (
property: height,
class: h,
values: $size-values
),
) !default;
scss/_variables.scss
+7 -3
View File
@@ -173,7 +173,7 @@ $size-spacers: (
) !default;
$sizes-percentage: (
$size-values: (
1: 1%,
25: 25%,
50: 50%,
@@ -209,6 +209,8 @@ $embed-responsive-aspect-ratios: (
)
) !default;
$content-padding-y: 1.25rem !default;
//sidenav
$sidenav-width: 15.625rem !default;
$sidenav-width-narrow: 4rem !default;
@@ -267,6 +269,9 @@ $card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$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;
@@ -319,8 +324,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-radius: $border-radius !default;
$modal-inner-padding: .75rem !default;
$modal-inner-padding-x: 1.25rem !default;
$modal-inner-padding: 1.5rem !default;
$modal-footer-border-width: 0 !default;
$modal-header-border-width: 0 !default;
scss/demo.scss
+4
View File
@@ -8,3 +8,7 @@
border-color: #548ed2;
min-height: 316px;
}
body.no-transitions * {
transition: none !important;
}
scss/layout/_footer.scss
+9
View File
@@ -3,4 +3,13 @@
background-color: $footer-bg;
padding: 1rem 0;
color: $text-muted;
margin-bottom: (-$content-padding-y);
margin-top: $content-padding-y;
}
.footer-transparent {
margin-top: 0;
background-color: transparent;
border-top: 0;
}
scss/layout/_navbar.scss
+4 -4
View File
@@ -4,7 +4,7 @@ Horizontal navbar
@mixin navbar-horizontal {
.d-none-navbar-horizontal,
~ * .d-none-navbar-vertical-narrow {
display: none;
display: none !important;
}
.dropdown-menu {
@@ -22,7 +22,7 @@ Vertical narrow navbar
.d-none-navbar-vertical-narrow,
~ * .d-none-navbar-vertical-narrow {
display: none;
display: none !important;
}
.navbar-nav {
@@ -123,7 +123,7 @@ Vertical navbar
.d-none-navbar-vertical,
~ * .d-none-navbar-vertical {
display: none;
display: none !important;
}
.navbar-brand {
@@ -204,7 +204,7 @@ Vertical navbar
&:not(.navbar-vertical-narrow) {
.d-none-navbar-vertical-wide,
~ * .d-none-navbar-vertical-wide {
display: none;
display: none !important;
}
.dropdown-menu {
scss/layout/_page.scss
+2 -2
View File
@@ -6,8 +6,8 @@
}
.content {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
padding-top: $content-padding-y;
padding-bottom: $content-padding-y;
flex: 1;
display: flex;
flex-direction: column;
scss/ui/_forms.scss
+4
View File
@@ -30,6 +30,10 @@ Form hint
color: $text-muted;
margin: 0 0 .75rem;
line-height: $line-height-sm;
.form-label + & {
margin-top: -.5rem;
}
}
/**
scss/ui/_modals.scss
+6 -6
View File
@@ -1,14 +1,14 @@
.modal-header,
.modal-body {
padding-left: $modal-inner-padding-x;
padding-right: $modal-inner-padding-x;
padding-left: $modal-inner-padding;
padding-right: $modal-inner-padding;
}
.modal-header {
.close {
font-size: 1rem;
padding-right: $modal-inner-padding-x;
margin-right: (- $modal-inner-padding-x);
padding-right: $modal-inner-padding;
margin-right: (- $modal-inner-padding);
}
}
@@ -20,8 +20,8 @@
}
.modal-footer {
padding-left: $modal-inner-padding-x - $modal-footer-margin-between / 2;
padding-right: $modal-inner-padding-x - $modal-footer-margin-between / 2;
padding-left: $modal-inner-padding - $modal-footer-margin-between / 2;
padding-right: $modal-inner-padding - $modal-footer-margin-between / 2;
}
.modal-footer {
scss/utils/_sizing.scss
-21
View File
@@ -1,27 +1,6 @@
// stylelint-disable declaration-no-important
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
@each $size-name, $size in $sizes-percentage {
.w-#{$size-name}p { width: $size !important; }
.h-#{$size-name}p { height: $size !important; }
}
@each $size-name, $size in map_merge($spacers, $size-spacers) {
.w-#{$size-name} { width: $size !important; }
.h-#{$size-name} { height: $size !important; }
}
.h-screen { height: 100vh !important; }
.w-screen { width: 100vw !important; }