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

remove demo scripts

Browse Source
This commit is contained in:
codecalm
2019-10-07 22:47:11 +02:00
parent 9eaf5c27a2
commit 8821ce4c4c
18 changed files with 62 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/demo.js
-202
View File
@@ -1,202 +0,0 @@
/*
* Tabler Demo (v0.9.0)
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/
'use strict';
class TablerDemo {
constructor() {
this.init();
this.form = document.querySelector('.js-layout-form');
if(this.form) {
this.form.addEventListener('submit', (e) => {
e.preventDefault();
this.onSubmitForm();
});
var inputs = this.form.querySelectorAll('input[type="radio"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', () => {
this.onSubmitForm();
});
}
}
this.initFormControls();
};
init() {
this.config = this.getConfig();
};
getConfig() {
return {
colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light',
headerFixed: (localStorage.getItem('tablerHeaderFixed')) ? localStorage.getItem('tablerHeaderFixed') : 'default',
sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'dark',
sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left',
sidebarFixed: (localStorage.getItem('tablerSidebarFixed')) ? localStorage.getItem('tablerSidebarFixed') : 'fixed',
};
};
setConfig(key, value, availableValues, onSuccess) {
if (availableValues && availableValues.indexOf(value) !== -1) {
key = 'tabler' + key.charAt(0).toUpperCase() + key.slice(1);
localStorage.setItem(key, value);
onSuccess && onSuccess(value);
}
return this.getConfig();
};
onSubmitForm() {
const form = this.form;
this.toggleColorScheme(form.querySelector('[name="color-scheme"]:checked').value);
this.toggleNavPosition(form.querySelector('[name="nav-position"]:checked').value);
this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value);
// this.toggleHeaderFixed(form.querySelector('[name="header-fixed"]:checked').value);
this.toggleSidebarSize(form.querySelector('[name="sidebar-size"]:checked').value);
this.toggleSidebarColor(form.querySelector('[name="sidebar-color"]:checked').value);
this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value);
this.toggleSidebarFixed(form.querySelector('[name="sidebar-fixed"]:checked').value);
};
initFormControls() {
const config = this.getConfig();
this.toggleColorScheme(config.colorScheme);
this.toggleNavPosition(config.navPosition);
this.toggleHeaderColor(config.headerColor);
// this.toggleHeaderFixed(config.headerFixed);
this.toggleSidebarPosition(config.sidebarPosition);
this.toggleSidebarSize(config.sidebarSize);
this.toggleSidebarColor(config.sidebarColor);
this.toggleSidebarFixed(config.sidebarFixed);
};
setFormValue(name, value) {
if(this.form) {
let elements = this.form.querySelectorAll(`[name="${name}"]`);
if (elements) {
elements.forEach((e) => e.checked = false);
this.form.querySelector(`[name="${name}"][value="${value}"]`).checked = true;
}
}
};
/*
Color scheme toggle
*/
toggleColorScheme(color) {
return this.setConfig('colorScheme', color, ['dark', 'light'], () => {
if (color === 'dark') {
document.body.classList.add('theme-dark');
} else {
document.body.classList.remove('theme-dark');
}
this.setFormValue('color-scheme', color);
});
};
toggleNavPosition(position) {
return this.setConfig('navPosition', position, ['top', 'side'], () => {
this.setFormValue('nav-position', position);
});
};
toggleSidebarPosition(position) {
return this.setConfig('sidebarPosition', position, ['left', 'right'], () => {
if (position === 'right') {
document.querySelector('.js-sidebar').classList.add('navbar-right');
} else {
document.querySelector('.js-sidebar').classList.remove('navbar-right');
}
this.setFormValue('sidebar-position', position);
});
};
toggleSidebarSize(size) {
return this.setConfig('sidebarSize', size, ['default', 'folded'], () => {
if (size === 'folded') {
document.querySelector('.js-sidebar').classList.add('navbar-folded');
} else {
document.querySelector('.js-sidebar').classList.remove('navbar-folded');
}
this.setFormValue('sidebar-size', size);
});
};
toggleSidebarColor(color) {
console.log('color', color);
return this.setConfig('sidebarColor', color, ['dark', 'light'], () => {
if (color === 'dark') {
document.querySelector('.js-sidebar').classList.add('navbar-dark');
} else {
document.querySelector('.js-sidebar').classList.remove('navbar-dark');
}
this.setFormValue('sidebar-color', color);
});
};
toggleSidebarFixed(fixed) {
return this.setConfig('sidebarFixed', fixed, ['fixed', 'default'], () => {
if (fixed === 'fixed') {
document.querySelector('.js-sidebar').classList.add('navbar-fixed');
} else {
document.querySelector('.js-sidebar').classList.remove('navbar-fixed');
}
this.setFormValue('sidebar-fixed', fixed);
});
};
toggleHeaderColor(color) {
return this.setConfig('headerColor', color, ['dark', 'light'], () => {
if (color === 'dark') {
document.querySelector('.js-header').classList.add('navbar-dark');
} else {
document.querySelector('.js-header').classList.remove('navbar-dark');
}
this.setFormValue('header-color', color);
});
};
toggleHeaderFixed(fixed) {
return this.setConfig('headerFixed', fixed, ['fixed', 'default'], () => {
if (fixed === 'fixed') {
document.querySelector('.js-header').classList.add('navbar-fixed');
} else {
document.querySelector('.js-header').classList.remove('navbar-fixed');
}
this.setFormValue('header-fixed', fixed);
});
};
}
/*
Init demo
*/
(function () {
const demo = new TablerDemo();
window.DEMO = demo;
})();
pages/_includes/cards/blog-single.html
+6 -6
View File
@@ -7,17 +7,17 @@
<div class="card{% if type == 'aside' %} card-aside{% endif %}"> <div class="card{% if type == 'aside' %} card-aside{% endif %}">
{% if type == 'image' %} {% if type == 'image' %}
<a href="javascript:void(0)"><img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}"></a> <a href="#"><img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}"></a>
{% endif %} {% endif %}
{% if type == 'aside' %} {% if type == 'aside' %}
<a href="javascript:void(0)" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/img/photos//{{ site.data.photos[article.image].file }})"></a> <a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/img/photos//{{ site.data.photos[article.image].file }})"></a>
{% endif %} {% endif %}
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h4><a href="javascript:void(0)">{{ article.title }}</a></h4> <h4><a href="#">{{ article.title }}</a></h4>
<div class="text-muted">{{ article.description | truncate: truncate }}</div> <div class="text-muted">{{ article.description | truncate: truncate }}</div>
@@ -27,9 +27,9 @@
<a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a> <a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a>
<small class="d-block text-muted">3 days ago</small> <small class="d-block text-muted">3 days ago</small>
</div> </div>
<div class="ml-auto {% if liked %}text-red{% else %}text-muted{% endif %}"> <div class="ml-auto">
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3 text-inherit"> <a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
{% include ui/icon.html icon="heart" %} {% include ui/icon.html icon="heart" use-svg=true %}
</a> </a>
</div> </div>
</div> </div>
pages/_includes/layout/js.html
-3
View File
@@ -12,9 +12,6 @@
<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script> <script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
<script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js"></script> <script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js"></script>
<!-- demo scripts -->
<script src="{{ site.base }}/dist/js/demo{% if jekyll.environment == 'production' %}.min{% endif %}.js"></script>
<script> <script>
window.tabler = window.tabler || {}; window.tabler = window.tabler || {};
window.tabler.colors = { {% for color in site.colors %} window.tabler.colors = { {% for color in site.colors %}
pages/_includes/parts/form-fieldset.html
+8 -8
View File
@@ -1,18 +1,18 @@
<fieldset class="form-fieldset"> <fieldset class="form-fieldset">
<div class="mb-2"> <div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label> <label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control"{{ site.base }}/> <input type="text" class="form-control" autocomplete="off" />
</div> </div>
<div class="mb-2"> <div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label> <label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control"{{ site.base }}/> <input type="text" class="form-control" autocomplete="off" />
</div> </div>
<div class="mb-2"> <div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label> <label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control"{{ site.base }}/> <input type="email" class="form-control" autocomplete="off" />
</div> </div>
<div class="mb-2 mb-0"> <div class="">
<label class="form-label">Phone number</label> <label class="form-label">Phone number</label>
<input type="tel" class="form-control"{{ site.base }}/> <input type="tel" class="form-control" autocomplete="off" />
</div> </div>
</fieldset> </fieldset>
pages/_includes/ui/empty.html
+6 -4
View File
@@ -2,7 +2,8 @@
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> <div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<div class="empty-icon"> <div class="empty-icon">
{% if include.illustration %} {% if include.illustration %}
{% include ui/illustration.html image="undraw_quitting_time_dm8t.svg" class="h-12" %} {% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
{% include ui/illustration.html image=illustration-src class="h-12 mb-4" %}
{% elsif include.icon-text %} {% elsif include.icon-text %}
<div class="display-4">{{ include.icon-text }}</div> <div class="display-4">{{ include.icon-text }}</div>
{% else %} {% else %}
@@ -10,11 +11,12 @@
{% endif %} {% endif %}
</div> </div>
<p class="empty-title h4">{{ include.title | default: "No results found" }}</p> <p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle"> <p class="empty-subtitle text-muted">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }} {{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p> </p>
<div class="empty-action"> <div class="empty-action">
<button class="btn btn-primary">{{ include.button-text | default: "Search again" }}</button> {% assign button-text = include.button-text | default: "Search again" %}
{% include ui/button.html text=button-text color="primary" icon=include.button-icon %}
</div> </div>
</div> </div>
pages/_includes/ui/input-mask.html
+1 -1
View File
@@ -1 +1 @@
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} /> <input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" />
pages/_includes/ui/input-selectgroup.html
+1 -1
View File
@@ -7,7 +7,7 @@
<label class="selectgroup-item"> <label class="selectgroup-item">
{% assign s = value | split: "i:" %} {% assign s = value | split: "i:" %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}> <input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span> <span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
</label> </label>
{% endfor %} {% endfor %}
</div> </div>
pages/pages.html → pages/all.html
View File
pages/blank.html
+1 -12
View File
@@ -1,18 +1,7 @@
--- ---
title: Blank page title: Blank page
container-size: sm
blank: true blank: true
done: true done: true
--- ---
<div class="text-center"> {% include ui/empty.html button-text="Add your first client" button-icon="plus" illustration=true illustration-src="undraw_printing_invoices_5r4r.svg" %}
{% include ui/illustration.html image="undraw_printing_invoices_5r4r.svg" class="mb-4 h-48" %}
<p class="text-muted mb-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem blanditiis cupiditate delectus, eaque eligendi est fuga illum impedit in iure maiores, omnis quas quod quos recusandae similique unde vitae?
</p>
<div>
{% include ui/button.html text="Add your first client" icon="plus" color="primary" %}
</div>
</div>
pages/blog.html
+5 -8
View File
@@ -3,33 +3,30 @@ title: Blog
page-title: Blog page-title: Blog
--- ---
<div class="container">
<div class="row row-cards row-deck"> <div class="row row-cards row-deck">
{% for article in site.data.articles limit: 4 %} {% for article in site.data.articles limit: 3 %}
<div class="col-sm-6 col-xl-3"> <div class="col-sm-6 col-xl-4">
{% include cards/blog-single.html article=article id=forloop.index type="image" liked=true %} {% include cards/blog-single.html article=article id=forloop.index type="image" liked=true %}
</div> </div>
{% endfor %} {% endfor %}
{% for article in site.data.articles limit: 3 offset: 4 %} {% for article in site.data.articles limit: 3 offset: 4 %}
<div class="col-lg-4"> <div class="col-sm-6 col-xl-4">
{% include cards/blog-single.html article=article id=forloop.index %} {% include cards/blog-single.html article=article id=forloop.index %}
</div> </div>
{% endfor %} {% endfor %}
{% for article in site.data.articles limit: 2 %} {% for article in site.data.articles limit: 2 %}
<div class="col-lg-6"> <div class="col-sm-6">
{% include cards/blog-single.html article=article type="aside" %} {% include cards/blog-single.html article=article type="aside" %}
</div> </div>
{% endfor %} {% endfor %}
{% for article in site.data.articles limit: 2 offset: 4 %} {% for article in site.data.articles limit: 2 offset: 4 %}
<div class="col-lg-6"> <div class="col-sm-6">
{% include cards/blog-single.html article=article type="aside" aside-class="w-50" truncate=200 %} {% include cards/blog-single.html article=article type="aside" aside-class="w-50" truncate=200 %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
pages/cards-stats.html
-92
View File
@@ -1,92 +0,0 @@
---
title: Cards stats
layout: default
---
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Goals</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">298</div>
<div class="mr-auto text-green">
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-goals"></div>
{% include js/charts.html id="chart-goals" chart-id="goals" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div>Traffic monitor</div>
<div class="row">
<div class="col-6">
<div class="text-label">Inbound</div>
<div class="h3">45GB</div>
<div class="chart-sm" id="chart-traffic-in"></div>
{% include js/charts.html id="chart-traffic-in" chart-id="traffic-in" %}
</div>
<div class="col-6">
<div class="text-label">Outbound</div>
<div class="h3">16GB</div>
<div class="chart-sm" id="chart-traffic-out"></div>
{% include js/charts.html id="chart-traffic-out" chart-id="traffic-out" %}
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div>Traffic monitor</div>
<div class="row">
<div class="col-6 align-self-end">
Desktop<br />
Mobile<br/>
Tablet
</div>
<div class="col-6">
<div class="chart-square" id="chart-devices"></div>
{% include js/charts.html id="chart-devices" chart-id="devices" %}
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>USD/EUR</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">298</div>
<div class="mr-auto text-green">
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-usd-eur" style="height: 10rem"></div>
{% include js/charts.html id="chart-usd-eur" chart-id="usd-eur" %}
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">6</div>
<div class="col-sm-6 col-md-4 col-lg-3">7</div>
<div class="col-sm-6 col-md-4 col-lg-3">8</div>
</div>
pages/form-elements.html
+2 -6
View File
@@ -1,6 +1,6 @@
--- ---
title: Forms title: Form elements
page-title: Forms page-title: Form elements
menu: forms menu: forms
--- ---
@@ -8,8 +8,4 @@ menu: forms
<div class="col-12"> <div class="col-12">
{% include cards/form-elements.html %} {% include cards/form-elements.html %}
</div> </div>
<div class="col-lg-4">
</div>
<div class="col-lg-8">
</div>
</div> </div>
pages/gallery.html
+4 -4
View File
@@ -11,12 +11,12 @@ done: true
{% assign person = site.data.people[forloop.index0] %} {% assign person = site.data.people[forloop.index0] %}
<div class="col-sm-6 col-lg-4"> <div class="col-sm-6 col-lg-4">
<div class="card p-3"> <div class="card p-3">
<a href="javascript:void(0)" class="mb-3"><img src="{{ site.base }}/img/photos/{{photo.file}}" class="rounded"></a> <a href="#" class="mb-4"><img src="{{ site.base }}/img/photos/{{photo.file}}" class="rounded"></a>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
{% include ui/avatar.html person=person class="mr-2" %} {% include ui/avatar.html person=person class="mr-3" %}
<div> <div>
<div>{{ person.full_name }}</div> <h5 class="m-0">{{ person.full_name }}</h5>
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div> <small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<a href="javascript:void(0)" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
pages/grid.html
-76
View File
@@ -1,76 +0,0 @@
---
title: Grid
page-title: Grid
done: true
---
<h5 class="mb-3">Stacked-to-horizontal</h5>
<div class="row">
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
</div>
<div class="row">
<div class="col-md-8"><div class="card p-3">.col-md-8</div></div>
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
</div>
<div class="row">
<div class="col-md-6"><div class="card p-3">.col-md-6</div></div>
<div class="col-md-6"><div class="card p-3">.col-md-6</div></div>
</div>
<h5 class="my-3">Mobile and desktop</h5>
<div class="row">
<div class="col-12 col-md-8"><div class="card p-3">.col-12 .col-md-8</div></div>
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
</div>
<div class="row">
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
</div>
<div class="row">
<div class="col-6"><div class="card p-3">.col-6</div></div>
<div class="col-6"><div class="card p-3">.col-6</div></div>
</div>
<h5 class="my-3">Mobile, tablet, desktops</h5>
<div class="row">
<div class="col-12 col-sm-6 col-md-8"><div class="card p-3">.col-12 .col-sm-6 .col-md-8</div></div>
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
</div>
<div class="row">
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
</div>
<h5 class="my-3">Offsetting columns</h5>
<div class="row">
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
<div class="col-md-4 ml-auto"><div class="card p-3">.col-md-4 .ml-auto</div></div>
</div>
<div class="row">
<div class="col-md-3 ml-auto"><div class="card p-3">.col-md-3 .ml-auto</div></div>
<div class="col-md-3 ml-auto"><div class="card p-3">.col-md-3 .ml-auto</div></div>
</div>
<div class="row">
<div class="col-md-6 ml-auto"><div class="card p-3">.col-md-6 .ml-auto</div></div>
</div>
<h5 class="my-3">Column ordering</h5>
<div class="row">
<div class="col-md-9 order-md-2"><div class="card p-3">.col-md-9 .order-md-2</div></div>
<div class="col-md-3 order-md-1"><div class="card p-3">.col-md-3 .order-md-1</div></div>
</div>
scss/_variables.scss
-4
View File
@@ -323,10 +323,6 @@ $form-check-input-checked-bg-size: .75rem;
$form-range-track-height: .25rem; $form-range-track-height: .25rem;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$white}'/></svg>") !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
scss/ui/_empty.scss
-1
View File
@@ -1,6 +1,5 @@
.empty { .empty {
text-align: center; text-align: center;
color: $text-muted;
padding: 3rem; padding: 3rem;
height: 100%; height: 100%;
scss/ui/_icons.scss
+6 -1
View File
@@ -1,12 +1,17 @@
.icon { .icon {
font-size: 1em; font-size: 1em;
vertical-align: -.1em; width: 1em;
height: 1em;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
.icon-filled {
fill: currentColor;
}
.icon-md { .icon-md {
font-size: px2rem(20px); font-size: px2rem(20px);
} }
scss/ui/_inputs.scss
+3 -2
View File
@@ -6,9 +6,10 @@ textarea {
.form-label { .form-label {
display: block; display: block;
margin-bottom: .375rem; margin-bottom: .5rem;
font-size: $h6-font-size; font-size: $h6-font-size;
font-weight: 600; font-weight: $headings-font-weight;
color: $headings-color
} }
.mb-2 { .mb-2 {