mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
remove demo scripts
This commit is contained in:
codecalm
-202
@@ -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;
|
||||
})();
|
||||
@@ -7,17 +7,17 @@
|
||||
|
||||
<div class="card{% if type == 'aside' %} card-aside{% endif %}">
|
||||
{% 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 %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
@@ -27,9 +27,9 @@
|
||||
<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>
|
||||
</div>
|
||||
<div class="ml-auto {% if liked %}text-red{% else %}text-muted{% endif %}">
|
||||
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3 text-inherit">
|
||||
{% include ui/icon.html icon="heart" %}
|
||||
<div class="ml-auto">
|
||||
<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" use-svg=true %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,9 +12,6 @@
|
||||
<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>
|
||||
|
||||
<!-- demo scripts -->
|
||||
<script src="{{ site.base }}/dist/js/demo{% if jekyll.environment == 'production' %}.min{% endif %}.js"></script>
|
||||
|
||||
<script>
|
||||
window.tabler = window.tabler || {};
|
||||
window.tabler.colors = { {% for color in site.colors %}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<fieldset class="form-fieldset">
|
||||
<div class="mb-2">
|
||||
<div class="mb-3">
|
||||
<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 class="mb-2">
|
||||
<div class="mb-3">
|
||||
<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 class="mb-2">
|
||||
<div class="mb-3">
|
||||
<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 class="mb-2 mb-0">
|
||||
<div class="">
|
||||
<label class="form-label">Phone number</label>
|
||||
<input type="tel" class="form-control"{{ site.base }}/>
|
||||
<input type="tel" class="form-control" autocomplete="off" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="empty-icon">
|
||||
{% 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 %}
|
||||
<div class="display-4">{{ include.icon-text }}</div>
|
||||
{% else %}
|
||||
@@ -10,11 +11,12 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="empty-title h4">{{ include.title | default: "No results found" }}</p>
|
||||
<p class="empty-subtitle">
|
||||
<p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<label class="selectgroup-item">
|
||||
{% 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 %}>
|
||||
<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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
+1
-12
@@ -1,18 +1,7 @@
|
||||
---
|
||||
title: Blank page
|
||||
container-size: sm
|
||||
blank: true
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="text-center">
|
||||
{% 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>
|
||||
{% include ui/empty.html button-text="Add your first client" button-icon="plus" illustration=true illustration-src="undraw_printing_invoices_5r4r.svg" %}
|
||||
|
||||
+5
-8
@@ -3,33 +3,30 @@ title: Blog
|
||||
page-title: Blog
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row row-cards row-deck">
|
||||
|
||||
{% for article in site.data.articles limit: 4 %}
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% for article in site.data.articles limit: 3 %}
|
||||
<div class="col-sm-6 col-xl-4">
|
||||
{% include cards/blog-single.html article=article id=forloop.index type="image" liked=true %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% 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 %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% 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" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% 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 %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Forms
|
||||
page-title: Forms
|
||||
title: Form elements
|
||||
page-title: Form elements
|
||||
menu: forms
|
||||
---
|
||||
|
||||
@@ -8,8 +8,4 @@ menu: forms
|
||||
<div class="col-12">
|
||||
{% include cards/form-elements.html %}
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+4
-4
@@ -11,12 +11,12 @@ done: true
|
||||
{% assign person = site.data.people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<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">
|
||||
{% include ui/avatar.html person=person class="mr-2" %}
|
||||
{% include ui/avatar.html person=person class="mr-3" %}
|
||||
<div>
|
||||
<div>{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
<h5 class="m-0">{{ person.full_name }}</h5>
|
||||
<small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="javascript:void(0)" class="text-muted">
|
||||
|
||||
@@ -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>
|
||||
@@ -323,10 +323,6 @@ $form-check-input-checked-bg-size: .75rem;
|
||||
|
||||
$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-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;
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: $text-muted;
|
||||
padding: 3rem;
|
||||
height: 100%;
|
||||
|
||||
|
||||
+6
-1
@@ -1,12 +1,17 @@
|
||||
.icon {
|
||||
font-size: 1em;
|
||||
vertical-align: -.1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-filled {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
font-size: px2rem(20px);
|
||||
}
|
||||
|
||||
@@ -6,9 +6,10 @@ textarea {
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: .375rem;
|
||||
margin-bottom: .5rem;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: 600;
|
||||
font-weight: $headings-font-weight;
|
||||
color: $headings-color
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
|
||||
Reference in New Issue
Block a user