Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 738eff38 编写于 作者: C codecalm
浏览文件
操作

tabler customize

上级 f13ac7db
隐藏空白更改
内联 并排
Showing with 324 addition and 198 deletion
build/rollup.config.js
浏览文件 @ 738eff38
...@@ -40,12 +40,9 @@ module.exports = { ...@@ -40,12 +40,9 @@ module.exports = {
context: "window", context: "window",
input: { input: {
tabler: path.resolve(__dirname, '../js/tabler.js'), 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: { output: {
banner, banner,
// name: 'tabler',
dir: path.resolve(__dirname, `../${dir}/js/`), dir: path.resolve(__dirname, `../${dir}/js/`),
entryFileNames: BUNDLE ? '[name].min.js' : '[name].js', entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
format: 'cjs' format: 'cjs'
......
js/tabler-range-sliders.js 已删除 100644 → 0
浏览文件 @ f13ac7db
/* 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(' | ');
})
}
});
\ No newline at end of file
js/tabler.js
浏览文件 @ 738eff38
...@@ -8,10 +8,10 @@ import {CountUp} from "countup.js"; ...@@ -8,10 +8,10 @@ import {CountUp} from "countup.js";
/** /**
* Dropdown * Dropdown
*/ */
var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]')) // var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]'))
dropdownElementList.map(function (dropdownToggleEl) { // dropdownElementList.map(function (dropdownToggleEl) {
return new Dropdown(dropdownToggleEl, {}) // return new Dropdown(dropdownToggleEl, {})
}); // });
/** /**
* Tooltip * Tooltip
......
pages/_docs/payments.md
浏览文件 @ 738eff38
...@@ -31,8 +31,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment, ...@@ -31,8 +31,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
<tr> <tr>
<td>{{ payment.name }}</td> <td>{{ payment.name }}</td>
<td><code>{{ payment.logo }}</code></td> <td><code>{{ payment.logo }}</code></td>
<td class="w-1p">{% include ui/payment.html payment=payment.logo %}</td> <td class="w-1">{% 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 dark=true %}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
pages/_includes/cards/company-employees.html
浏览文件 @ 738eff38
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
{% for person in site.data.people limit: 5 offset: 20 %} {% for person in site.data.people limit: 5 offset: 20 %}
<tr> <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><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td> <td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td> <td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
......
pages/_includes/cards/development-activity.html
浏览文件 @ 738eff38
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="w-1p"> <td class="w-1">
{% include ui/avatar.html person-id=10 %} {% include ui/avatar.html person-id=10 %}
</td> </td>
<td>{{ site.data.people[10].full_name }}</td> <td>{{ site.data.people[10].full_name }}</td>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<td class="text-nowrap text-muted">May 6, 2019</td> <td class="text-nowrap text-muted">May 6, 2019</td>
</tr> </tr>
<tr> <tr>
<td class="w-1p"> <td class="w-1">
{% include ui/avatar.html person-id=17 %} {% include ui/avatar.html person-id=17 %}
</td> </td>
<td>{{ site.data.people[17].full_name }}</td> <td>{{ site.data.people[17].full_name }}</td>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<td class="text-nowrap text-muted">April 22, 2019</td> <td class="text-nowrap text-muted">April 22, 2019</td>
</tr> </tr>
<tr> <tr>
<td class="w-1p"> <td class="w-1">
{% include ui/avatar.html person-id=16 %} {% include ui/avatar.html person-id=16 %}
</td> </td>
<td>{{ site.data.people[16].full_name }}</td> <td>{{ site.data.people[16].full_name }}</td>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<td class="text-nowrap text-muted">April 15, 2019</td> <td class="text-nowrap text-muted">April 15, 2019</td>
</tr> </tr>
<tr> <tr>
<td class="w-1p"> <td class="w-1">
{% include ui/avatar.html person-id=12 %} {% include ui/avatar.html person-id=12 %}
</td> </td>
<td>{{ site.data.people[12].full_name }}</td> <td>{{ site.data.people[12].full_name }}</td>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<td class="text-nowrap text-muted">April 8, 2019</td> <td class="text-nowrap text-muted">April 8, 2019</td>
</tr> </tr>
<tr> <tr>
<td class="w-1p"> <td class="w-1">
{% include ui/avatar.html person-id=19 %} {% include ui/avatar.html person-id=19 %}
</td> </td>
<td>{{ site.data.people[19].full_name }}</td> <td>{{ site.data.people[19].full_name }}</td>
......
pages/_includes/cards/invoices.html
浏览文件 @ 738eff38
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
<table class="table card-table table-vcenter text-nowrap datatable"> <table class="table card-table table-vcenter text-nowrap datatable">
<thead> <thead>
<tr> <tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th> <th class="w-1"><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">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>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>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% 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
浏览文件 @ 738eff38
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<th>Usage</th> <th>Usage</th>
<th class="text-center">Payment</th> <th class="text-center">Payment</th>
<th>Activity</th> <th>Activity</th>
<th class="w-1p">Satisfaction</th> <th class="w-1">Satisfaction</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
{% assign percentage_color = percentage | number_color %} {% assign percentage_color = percentage | number_color %}
<tr> <tr>
<td class="text-center w-1p"> <td class="text-center w-1">
{% include ui/avatar.html person-id=person.id %} {% include ui/avatar.html person-id=person.id %}
</td> </td>
<td> <td>
......
pages/_includes/forms/form-elements-4.html
浏览文件 @ 738eff38
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Buttons group</label> <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">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button> <button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button> <button type="button" class="btn btn-secondary">10 min</button>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Buttons group with dropdown</label> <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 1</button>
<button type="button" class="btn btn-secondary">Option 2</button> <button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button> <button type="button" class="btn btn-secondary active">Option 3</button>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Toolbar</label> <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: ',' %} {% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %} {% for icon in icons %}
{% include ui/button.html color="secondary" icon=icon icon-only=true %} {% include ui/button.html color="secondary" icon=icon icon-only=true %}
......
pages/_includes/layout/customize.html 已删除 100644 → 0
浏览文件 @ f13ac7db
<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 %}
\ No newline at end of file
pages/_includes/layout/footer.html
浏览文件 @ 738eff38
<div class="mb-n3 mt-3"> <footer class="footer footer-transparent">
<footer class="footer"> <div class="container">
<div class="container"> <div class="row align-items-center flex-row-reverse">
<div class="row align-items-center flex-row-reverse"> <div class="col-auto ml-lg-auto">
<div class="col-auto ml-lg-auto"> <div class="row align-items-center">
<div class="row align-items-center"> <div class="col-auto">
<div class="col-auto"> <ul class="list-inline list-inline-dots mb-0">
<ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li> <li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li> </ul>
</ul> </div>
</div> <div class="col-auto">
<div class="col-auto"> {% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</div>
</div> </div>
</div> </div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center"> </div>
Copyright © {{ site.time | date: '%Y' }} <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>. Copyright © {{ site.time | date: '%Y' }}
All rights reserved. <a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
</div> All rights reserved.
</div> </div>
</div> </div>
</footer> </div>
</div> </footer>
\ No newline at end of file \ No newline at end of file
pages/_includes/layout/homepage.html
浏览文件 @ 738eff38
{% include layout/customize.html %}
<div class="row row-deck row-cards"> <div class="row row-deck row-cards">
<div class="col-sm-6 col-lg-3"> <div class="col-sm-6 col-lg-3">
{% include cards/charts/sales.html %} {% include cards/charts/sales.html %}
......
pages/_includes/layout/js.html
浏览文件 @ 738eff38
...@@ -10,4 +10,3 @@ ...@@ -10,4 +10,3 @@
<!-- Tabler Core --> <!-- 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{% 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
浏览文件 @ 738eff38
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
</li> </li>
{% endfor %} {% endfor %}
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip"> <li class="nav-item d-none-navbar-vertical">
<a href="#" class="nav-link disabled"> <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-icon">{% include ui/icon.html icon="sliders" %}</span>
<span class="nav-link-title">Customize</span> <span class="nav-link-title">Customize</span>
</a> </a>
......
pages/_includes/layout/navbar-primary.html
浏览文件 @ 738eff38
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
<h6 class="navbar-heading mt-4">Tools</h6> <h6 class="navbar-heading mt-4">Tools</h6>
<div class="navbar-side d-none-navbar-vertical-narrow"> <div class="navbar-side">
{% include layout/navbar-search.html %} {% include layout/navbar-search.html class="d-none-navbar-vertical-narrow" %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %} {% 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> </div>
</div> </div>
......
pages/_includes/layout/navbar-search.html
浏览文件 @ 738eff38
<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"> <form action="." method="get">
{% include ui/form/input-icon.html prepend=true %} {% include ui/form/input-icon.html prepend=true %}
</form> </form>
......
pages/_includes/parts/modals/customize.html 0 → 100644
浏览文件 @ 738eff38
{% 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 %}
\ No newline at end of file
pages/_includes/parts/modals/simple.html
浏览文件 @ 738eff38
<div class="modal-header"> {% include ui/modal/header.html %}
<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>
<div class="modal-body"> <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. 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> </div>
......
pages/_includes/ui/modal.html
浏览文件 @ 738eff38
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% capture_global modals %} {% capture_global modals %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true"> <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"> <div class="modal-content">
{% include parts/modals/{{ modal-id }}.html %} {% include parts/modals/{{ modal-id }}.html %}
</div> </div>
......
pages/_includes/ui/modal/header.html 0 → 100644
浏览文件 @ 738eff38
<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>
\ No newline at end of file
pages/_layouts/base.html
浏览文件 @ 738eff38
...@@ -6,7 +6,11 @@ ...@@ -6,7 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/> <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 }}"/> <meta name="theme-color" content="{{ site.data.colors.blue }}"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
...@@ -19,7 +23,6 @@ ...@@ -19,7 +23,6 @@
<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/> <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"/> <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 %} {% if page.description %}
<meta name="description" content="{{ page.description | escape }}"/> <meta name="description" content="{{ page.description | escape }}"/>
...@@ -34,9 +37,10 @@ ...@@ -34,9 +37,10 @@
{{ content }} {{ content }}
{% include layout/modals-capture.html %}
{% include layout/js.html %} {% include layout/js.html %}
{% include layout/js-capture.html %} {% include layout/js-capture.html %}
{% include layout/modals-capture.html %}
{% if site.debug and jekyll.environment == 'development' %} {% if site.debug and jekyll.environment == 'development' %}
{% include layout/debug.html %} {% include layout/debug.html %}
......
pages/_layouts/default.html
浏览文件 @ 738eff38
...@@ -20,3 +20,5 @@ layout: base ...@@ -20,3 +20,5 @@ layout: base
{% include layout/footer.html %} {% include layout/footer.html %}
</div> </div>
</div> </div>
{% include ui/modal.html modal-id="customize" top=true %}
pages/empty.html
浏览文件 @ 738eff38
...@@ -2,5 +2,3 @@ ...@@ -2,5 +2,3 @@
title: Empty page title: Empty page
done: true done: true
--- ---
{% include ui/empty.html illustration=true %}
scss/_dark.scss
浏览文件 @ 738eff38
...@@ -9,7 +9,9 @@ $dark-text: $light; ...@@ -9,7 +9,9 @@ $dark-text: $light;
} }
.card, .card,
.navbar-light { .navbar-light,
.footer,
.modal-content {
background: $dark; background: $dark;
color: inherit; color: inherit;
} }
...@@ -56,7 +58,8 @@ $dark-text: $light; ...@@ -56,7 +58,8 @@ $dark-text: $light;
} }
.markdown, .markdown,
.markdown>* { .markdown>*,
.close {
color: inherit; color: inherit;
} }
......
scss/_utilities.scss
浏览文件 @ 738eff38
...@@ -96,4 +96,15 @@ $utilities: ( ...@@ -96,4 +96,15 @@ $utilities: (
0: 0, 0: 0,
) )
), ),
"width": (
property: width,
class: w,
values: $size-values
),
"height": (
property: height,
class: h,
values: $size-values
),
) !default; ) !default;
scss/_variables.scss
浏览文件 @ 738eff38
...@@ -173,7 +173,7 @@ $size-spacers: ( ...@@ -173,7 +173,7 @@ $size-spacers: (
) !default; ) !default;
$sizes-percentage: ( $size-values: (
1: 1%, 1: 1%,
25: 25%, 25: 25%,
50: 50%, 50: 50%,
...@@ -209,6 +209,8 @@ $embed-responsive-aspect-ratios: ( ...@@ -209,6 +209,8 @@ $embed-responsive-aspect-ratios: (
) )
) !default; ) !default;
$content-padding-y: 1.25rem !default;
//sidenav //sidenav
$sidenav-width: 15.625rem !default; $sidenav-width: 15.625rem !default;
$sidenav-width-narrow: 4rem !default; $sidenav-width-narrow: 4rem !default;
...@@ -267,6 +269,9 @@ $card-border-color: $border-color !default; ...@@ -267,6 +269,9 @@ $card-border-color: $border-color !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-cap-bg: $min-black !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-active-border-color: $primary !default;
$card-status-size: $border-width-wide !default; $card-status-size: $border-width-wide !default;
$card-group-margin: 1.5rem !default; $card-group-margin: 1.5rem !default;
...@@ -319,8 +324,7 @@ $modal-fade-transform: translate(0, -1rem) !default; ...@@ -319,8 +324,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-radius: $border-radius !default; $modal-content-border-radius: $border-radius !default;
$modal-inner-padding: .75rem !default; $modal-inner-padding: 1.5rem !default;
$modal-inner-padding-x: 1.25rem !default;
$modal-footer-border-width: 0 !default; $modal-footer-border-width: 0 !default;
$modal-header-border-width: 0 !default; $modal-header-border-width: 0 !default;
......
scss/demo.scss
浏览文件 @ 738eff38
...@@ -7,4 +7,8 @@ ...@@ -7,4 +7,8 @@
background: #dbe7f6 no-repeat center/100% 100%; background: #dbe7f6 no-repeat center/100% 100%;
border-color: #548ed2; border-color: #548ed2;
min-height: 316px; min-height: 316px;
} }
\ No newline at end of file
body.no-transitions * {
transition: none !important;
}
scss/layout/_footer.scss
浏览文件 @ 738eff38
...@@ -3,4 +3,13 @@ ...@@ -3,4 +3,13 @@
background-color: $footer-bg; background-color: $footer-bg;
padding: 1rem 0; padding: 1rem 0;
color: $text-muted; color: $text-muted;
margin-bottom: (-$content-padding-y);
margin-top: $content-padding-y;
}
.footer-transparent {
margin-top: 0;
background-color: transparent;
border-top: 0;
} }
\ No newline at end of file
scss/layout/_navbar.scss
浏览文件 @ 738eff38
...@@ -4,7 +4,7 @@ Horizontal navbar ...@@ -4,7 +4,7 @@ Horizontal navbar
@mixin navbar-horizontal { @mixin navbar-horizontal {
.d-none-navbar-horizontal, .d-none-navbar-horizontal,
~ * .d-none-navbar-vertical-narrow { ~ * .d-none-navbar-vertical-narrow {
display: none; display: none !important;
} }
.dropdown-menu { .dropdown-menu {
...@@ -22,7 +22,7 @@ Vertical narrow navbar ...@@ -22,7 +22,7 @@ Vertical narrow navbar
.d-none-navbar-vertical-narrow, .d-none-navbar-vertical-narrow,
~ * .d-none-navbar-vertical-narrow { ~ * .d-none-navbar-vertical-narrow {
display: none; display: none !important;
} }
.navbar-nav { .navbar-nav {
...@@ -123,7 +123,7 @@ Vertical navbar ...@@ -123,7 +123,7 @@ Vertical navbar
.d-none-navbar-vertical, .d-none-navbar-vertical,
~ * .d-none-navbar-vertical { ~ * .d-none-navbar-vertical {
display: none; display: none !important;
} }
.navbar-brand { .navbar-brand {
...@@ -204,7 +204,7 @@ Vertical navbar ...@@ -204,7 +204,7 @@ Vertical navbar
&:not(.navbar-vertical-narrow) { &:not(.navbar-vertical-narrow) {
.d-none-navbar-vertical-wide, .d-none-navbar-vertical-wide,
~ * .d-none-navbar-vertical-wide { ~ * .d-none-navbar-vertical-wide {
display: none; display: none !important;
} }
.dropdown-menu { .dropdown-menu {
......
scss/layout/_page.scss
浏览文件 @ 738eff38
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
} }
.content { .content {
padding-top: 1.25rem; padding-top: $content-padding-y;
padding-bottom: 1.25rem; padding-bottom: $content-padding-y;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
scss/ui/_forms.scss
浏览文件 @ 738eff38
...@@ -30,6 +30,10 @@ Form hint ...@@ -30,6 +30,10 @@ Form hint
color: $text-muted; color: $text-muted;
margin: 0 0 .75rem; margin: 0 0 .75rem;
line-height: $line-height-sm; line-height: $line-height-sm;
.form-label + & {
margin-top: -.5rem;
}
} }
/** /**
......
scss/ui/_modals.scss
浏览文件 @ 738eff38
.modal-header, .modal-header,
.modal-body { .modal-body {
padding-left: $modal-inner-padding-x; padding-left: $modal-inner-padding;
padding-right: $modal-inner-padding-x; padding-right: $modal-inner-padding;
} }
.modal-header { .modal-header {
.close { .close {
font-size: 1rem; font-size: 1rem;
padding-right: $modal-inner-padding-x; padding-right: $modal-inner-padding;
margin-right: (- $modal-inner-padding-x); margin-right: (- $modal-inner-padding);
} }
} }
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
} }
.modal-footer { .modal-footer {
padding-left: $modal-inner-padding-x - $modal-footer-margin-between / 2; padding-left: $modal-inner-padding - $modal-footer-margin-between / 2;
padding-right: $modal-inner-padding-x - $modal-footer-margin-between / 2; padding-right: $modal-inner-padding - $modal-footer-margin-between / 2;
} }
.modal-footer { .modal-footer {
......
scss/utils/_sizing.scss
浏览文件 @ 738eff38
// stylelint-disable declaration-no-important // 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) { @each $size-name, $size in map_merge($spacers, $size-spacers) {
.w-#{$size-name} { width: $size !important; } .w-#{$size-name} { width: $size !important; }
.h-#{$size-name} { height: $size !important; } .h-#{$size-name} { height: $size !important; }
} }
\ No newline at end of file
.h-screen { height: 100vh !important; }
.w-screen { width: 100vw !important; }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或