Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

dist build

Browse Source
This commit is contained in:
chomik
2018-02-26 16:23:45 +01:00
parent 25bf7d70d0
commit a525fa3ef3
37 changed files with 19736 additions and 26628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dist/400.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 400 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 400</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but your request contains bad syntax and cannot be fulfilled&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

24
dist/401.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 401 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 401</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but you are not authorized to access this page&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

24
dist/403.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 403 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 403</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but you do not have permission to access this page&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

24
dist/404.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 404 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 404</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but our service is currently not available&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

24
dist/500.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 500 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 500</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but your request contains bad syntax and cannot be fulfilled&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

24
dist/503.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Page 503 - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,46 +22,30 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-content">
<div class="container text-center">
<div class="display-1 text-muted mb-5"><i class="si si-exclamation"></i> 503</div>
<h1 class="h2 mb-3">Oops.. You just found an error page..</h1>
<p class="h4 text-muted font-weight-normal mb-7">We are sorry but our service is currently not available&hellip;</p>
<a class="btn btn-primary" href="javascript:history.back()">
<i class="fe fe-arrow-left mr-2"></i>Go back
</a>
</div>
</div>
</div>
</body>
</html>

3
dist/assets/js/dashboard.js vendored
View File

@@ -23,7 +23,6 @@ require.config({
'circle-progress': 'assets/js/vendors/circle-progress.min',
}
});
window.tabler = {
colors: {
"blue": "#467fcf",
@@ -40,8 +39,6 @@ window.tabler = {
"cyan": "#17a2b8",
"gray": "#868e96",
"gray-dark": "#343a40"
}
};
require(['core']);

319
dist/blog.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item active">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,51 +178,21 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Blog components
</h1>
</div>
<div class="row row-cards row-deck">
<div class="col-sm-6 col-xl-3">
<div class="card">
<a href="#"><img class="card-img-top" src="./assets/images/photos/david-klaasen-54203-500.jpg" alt="And this isn&#39;t my nose. This is a false one."></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
<div>
@@ -351,28 +206,12 @@
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<a href="#"><img class="card-img-top" src="./assets/images/photos/david-marcu-114194-500.jpg" alt="Well, I didn&#39;t vote for you."></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">Well, I didn't vote for you.</a></h4>
<div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/16.jpg)"></div>
<div>
@@ -386,28 +225,12 @@
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<a href="#"><img class="card-img-top" src="./assets/images/photos/davide-cantelli-139887-500.jpg" alt="How do you know she is a witch?"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">How do you know she is a witch?</a></h4>
<div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/26.jpg)"></div>
<div>
@@ -421,28 +244,12 @@
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<a href="#"><img class="card-img-top" src="./assets/images/photos/dino-reichmuth-84359-500.jpg" alt="Shut up!"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">Shut up!</a></h4>
<div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/7.jpg)"></div>
<div>
@@ -456,28 +263,11 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body d-flex flex-column">
<h4><a href="#">Weaseling out of things is important to learn.</a></h4>
<div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/4.jpg)"></div>
<div>
@@ -491,26 +281,11 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body d-flex flex-column">
<h4><a href="#">You don't like your job, you don't strike.</a></h4>
<div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/35.jpg)"></div>
<div>
@@ -524,26 +299,11 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body d-flex flex-column">
<h4><a href="#">I hope I didn't brain my damage.</a></h4>
<div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/29.jpg)"></div>
<div>
@@ -557,30 +317,12 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
<div>
@@ -594,28 +336,12 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-marcu-114194-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">Well, I didn't vote for you.</a></h4>
<div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/16.jpg)"></div>
<div>
@@ -629,30 +355,12 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column w-50" style="background-image: url(./assets/images/photos/grant-ritchie-338179-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">Weaseling out of things is important to learn.</a></h4>
<div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/4.jpg)"></div>
<div>
@@ -666,28 +374,12 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column w-50" style="background-image: url(./assets/images/photos/ilnur-kalimullin-218996-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">You don't like your job, you don't strike.</a></h4>
<div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/35.jpg)"></div>
<div>
@@ -701,13 +393,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -745,7 +434,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -769,10 +457,5 @@
</div>
</footer>
</div>
</body>
</html>

357
dist/cards.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Cards design - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item active">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,386 +178,210 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">This is a standard card</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
<div class="card-footer">
This is standard card footer
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Built card</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-blue"></div>
<div class="card-header">
<h3 class="card-title">Card blue</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-green"></div>
<div class="card-header">
<h3 class="card-title">Card green</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-orange"></div>
<div class="card-header">
<h3 class="card-title">Card orange</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-red"></div>
<div class="card-header">
<h3 class="card-title">Card red</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-yellow"></div>
<div class="card-header">
<h3 class="card-title">Card yellow</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-teal"></div>
<div class="card-header">
<h3 class="card-title">Card teal</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status bg-purple"></div>
<div class="card-header">
<h3 class="card-title">Card purple</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-status card-status-left bg-blue"></div>
<div class="card-header">
<h3 class="card-title">Card status on left side</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card card-collapsed">
<div class="card-header">
<h3 class="card-title">Initial collapsed card</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">With additional fullscreen button</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Pannel with custom buttons</h3>
<div class="card-options">
<a class="btn btn-secondary btn-sm">Action 1</a>
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with search form</h3>
<div class="card-options">
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
@@ -683,142 +392,86 @@
</span>
</div>
</form>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with alert</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-alert alert alert-success mb-0">
Adding action was successful
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with alert</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-alert alert alert-danger mb-0">
Adding action was failed
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with switch</h3>
<div class="card-options">
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
</label>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -856,7 +509,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -880,10 +532,5 @@
</div>
</footer>
</div>
</body>
</html>

224
dist/charts.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Charts - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item active">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,34 +178,15 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Charts
</h1>
</div>
<div class="row row-cards">
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -374,11 +240,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -430,11 +291,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -485,11 +341,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -540,11 +391,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -598,11 +444,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -654,11 +495,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -710,11 +546,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -765,11 +596,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -820,11 +646,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -878,11 +699,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -937,11 +753,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -998,11 +809,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -1048,11 +854,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -1098,11 +899,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -1153,11 +949,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-header">
@@ -1224,15 +1015,10 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -1270,7 +1056,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -1294,10 +1079,5 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</footer>
</div>
</body>
</html>

237
dist/crypto-currencies.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Crypto currencies - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,26 +178,14 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Crypto currencies
</h1>
</div>
<div class="card">
<table class="table card-table">
<tr>
@@ -327,7 +200,6 @@
<th>CMGR/Month</th>
<th>Inflation</th>
</tr>
<tr>
<td>1</td>
<td><img src="./assets/images/crypto-currencies/bitcoin.svg" alt="Bitcoin" class="w-4 h-4"></td>
@@ -340,7 +212,6 @@
<td>8.11% / 57</td>
<td class="text-right">0.36%</td>
</tr>
<tr>
<td>2</td>
<td><img src="./assets/images/crypto-currencies/ethereum.svg" alt="Ethereum" class="w-4 h-4"></td>
@@ -353,7 +224,6 @@
<td>22.62% / 29</td>
<td class="text-right">0.64%</td>
</tr>
<tr>
<td>3</td>
<td><img src="./assets/images/crypto-currencies/ripple.svg" alt="Ripple" class="w-4 h-4"></td>
@@ -366,7 +236,6 @@
<td>10.85% / 53</td>
<td class="text-right">0.06%</td>
</tr>
<tr>
<td>4</td>
<td></td>
@@ -379,7 +248,6 @@
<td>21.30% / 6</td>
<td class="text-right">0.32%</td>
</tr>
<tr>
<td>5</td>
<td><img src="./assets/images/crypto-currencies/cardano.svg" alt="Cardano" class="w-4 h-4"></td>
@@ -392,7 +260,6 @@
<td>205.35% / 3</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>6</td>
<td><img src="./assets/images/crypto-currencies/litecoin.svg" alt="Litecoin" class="w-4 h-4"></td>
@@ -405,7 +272,6 @@
<td>6.87% / 57</td>
<td class="text-right">0.80%</td>
</tr>
<tr>
<td>7</td>
<td><img src="./assets/images/crypto-currencies/eos.svg" alt="EOS" class="w-4 h-4"></td>
@@ -418,7 +284,6 @@
<td>53.25% / 6</td>
<td class="text-right">11.56%</td>
</tr>
<tr>
<td>8</td>
<td><img src="./assets/images/crypto-currencies/nem.svg" alt="NEM" class="w-4 h-4"></td>
@@ -431,7 +296,6 @@
<td>26.99% / 33</td>
<td class="text-right">0.24%</td>
</tr>
<tr>
<td>9</td>
<td></td>
@@ -444,7 +308,6 @@
<td>13.12% / 41</td>
<td class="text-right">0.19%</td>
</tr>
<tr>
<td>10</td>
<td></td>
@@ -457,7 +320,6 @@
<td>62.68% / 15</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>11</td>
<td></td>
@@ -470,7 +332,6 @@
<td>23.27% / 7</td>
<td class="text-right">-0.02%</td>
</tr>
<tr>
<td>12</td>
<td><img src="./assets/images/crypto-currencies/dash.svg" alt="Dash" class="w-4 h-4"></td>
@@ -483,7 +344,6 @@
<td>19.19% / 47</td>
<td class="text-right">0.81%</td>
</tr>
<tr>
<td>13</td>
<td></td>
@@ -496,7 +356,6 @@
<td>11.88% / 44</td>
<td class="text-right">0.78%</td>
</tr>
<tr>
<td>14</td>
<td></td>
@@ -509,7 +368,6 @@
<td>142.69% / 4</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>15</td>
<td></td>
@@ -522,7 +380,6 @@
<td>-25.44% / 3</td>
<td class="text-right">0.34%</td>
</tr>
<tr>
<td>16</td>
<td></td>
@@ -535,7 +392,6 @@
<td>179.33% / 3</td>
<td class="text-right">90.09%</td>
</tr>
<tr>
<td>17</td>
<td></td>
@@ -548,7 +404,6 @@
<td>30.43% / 8</td>
<td class="text-right">0.11%</td>
</tr>
<tr>
<td>18</td>
<td></td>
@@ -561,7 +416,6 @@
<td>22.79% / 18</td>
<td class="text-right">0.74%</td>
</tr>
<tr>
<td>19</td>
<td></td>
@@ -574,7 +428,6 @@
<td>12.05% / 21</td>
<td class="text-right">0.86%</td>
</tr>
<tr>
<td>20</td>
<td></td>
@@ -587,7 +440,6 @@
<td>101.15% / 5</td>
<td class="text-right">-0.06%</td>
</tr>
<tr>
<td>21</td>
<td></td>
@@ -600,7 +452,6 @@
<td>112.15% / 10</td>
<td class="text-right">0.06%</td>
</tr>
<tr>
<td>22</td>
<td></td>
@@ -613,7 +464,6 @@
<td>0.03% / 33</td>
<td class="text-right">33.71%</td>
</tr>
<tr>
<td>23</td>
<td></td>
@@ -626,7 +476,6 @@
<td>50.49% / 6</td>
<td class="text-right">-0.04%</td>
</tr>
<tr>
<td>24</td>
<td></td>
@@ -639,7 +488,6 @@
<td>58.49% / 6</td>
<td class="text-right">-10.29%</td>
</tr>
<tr>
<td>25</td>
<td></td>
@@ -652,7 +500,6 @@
<td>-13.51% / 15</td>
<td class="text-right">7.44%</td>
</tr>
<tr>
<td>26</td>
<td></td>
@@ -665,7 +512,6 @@
<td>27.95% / 39</td>
<td class="text-right">2.06%</td>
</tr>
<tr>
<td>27</td>
<td></td>
@@ -678,7 +524,6 @@
<td>122.80% / 6</td>
<td class="text-right">0.08%</td>
</tr>
<tr>
<td>28</td>
<td></td>
@@ -691,7 +536,6 @@
<td>26.70% / 29</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>29</td>
<td></td>
@@ -704,7 +548,6 @@
<td>49.79% / 17</td>
<td class="text-right">-0.02%</td>
</tr>
<tr>
<td>30</td>
<td></td>
@@ -717,7 +560,6 @@
<td>11.39% / 43</td>
<td class="text-right">0.23%</td>
</tr>
<tr>
<td>31</td>
<td></td>
@@ -730,7 +572,6 @@
<td>10.15% / 21</td>
<td class="text-right">0.68%</td>
</tr>
<tr>
<td>32</td>
<td></td>
@@ -743,7 +584,6 @@
<td>20.75% / 18</td>
<td class="text-right">-0.41%</td>
</tr>
<tr>
<td>33</td>
<td></td>
@@ -756,7 +596,6 @@
<td>24.53% / 7</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>34</td>
<td></td>
@@ -769,7 +608,6 @@
<td>42.77% / 12</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>35</td>
<td></td>
@@ -782,7 +620,6 @@
<td>16.36% / 27</td>
<td class="text-right">0.01%</td>
</tr>
<tr>
<td>36</td>
<td></td>
@@ -795,7 +632,6 @@
<td>8.22% / 42</td>
<td class="text-right">0.06%</td>
</tr>
<tr>
<td>37</td>
<td></td>
@@ -808,7 +644,6 @@
<td>72.59% / 5</td>
<td class="text-right">-0.24%</td>
</tr>
<tr>
<td>38</td>
<td></td>
@@ -821,7 +656,6 @@
<td>10.11% / 19</td>
<td class="text-right">-0.01%</td>
</tr>
<tr>
<td>39</td>
<td></td>
@@ -834,7 +668,6 @@
<td>5.35% / 49</td>
<td class="text-right">0.36%</td>
</tr>
<tr>
<td>40</td>
<td></td>
@@ -847,7 +680,6 @@
<td>276.01% / 2</td>
<td class="text-right">-0.04%</td>
</tr>
<tr>
<td>41</td>
<td></td>
@@ -860,7 +692,6 @@
<td>19.45% / 2</td>
<td class="text-right">18.19%</td>
</tr>
<tr>
<td>42</td>
<td></td>
@@ -873,7 +704,6 @@
<td>92.30% / 5</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>43</td>
<td></td>
@@ -886,7 +716,6 @@
<td>33.82% / 7</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>44</td>
<td></td>
@@ -899,7 +728,6 @@
<td>45.00% / 11</td>
<td class="text-right">-1.09%</td>
</tr>
<tr>
<td>45</td>
<td></td>
@@ -912,7 +740,6 @@
<td>22.47% / 23</td>
<td class="text-right">3.04%</td>
</tr>
<tr>
<td>46</td>
<td></td>
@@ -925,7 +752,6 @@
<td>926.29% / 1</td>
<td class="text-right">0.14%</td>
</tr>
<tr>
<td>47</td>
<td></td>
@@ -938,7 +764,6 @@
<td>43.44% / 5</td>
<td class="text-right">0.05%</td>
</tr>
<tr>
<td>48</td>
<td></td>
@@ -951,7 +776,6 @@
<td>55.67% / 5</td>
<td class="text-right">95.51%</td>
</tr>
<tr>
<td>49</td>
<td></td>
@@ -964,7 +788,6 @@
<td>68.16% / 10</td>
<td class="text-right">-0.07%</td>
</tr>
<tr>
<td>50</td>
<td></td>
@@ -977,7 +800,6 @@
<td>4.35% / 4</td>
<td class="text-right">38.07%</td>
</tr>
<tr>
<td>51</td>
<td></td>
@@ -990,7 +812,6 @@
<td>85.16% / 2</td>
<td class="text-right">-0.17%</td>
</tr>
<tr>
<td>52</td>
<td></td>
@@ -1003,7 +824,6 @@
<td>8.02% / 47</td>
<td class="text-right">1.48%</td>
</tr>
<tr>
<td>53</td>
<td></td>
@@ -1016,7 +836,6 @@
<td>19.38% / 7</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>54</td>
<td></td>
@@ -1029,7 +848,6 @@
<td>47.24% / 23</td>
<td class="text-right">0.42%</td>
</tr>
<tr>
<td>55</td>
<td></td>
@@ -1042,7 +860,6 @@
<td>30.48% / 14</td>
<td class="text-right">0.10%</td>
</tr>
<tr>
<td>56</td>
<td></td>
@@ -1055,7 +872,6 @@
<td>-9.81% / 5</td>
<td class="text-right">0.30%</td>
</tr>
<tr>
<td>57</td>
<td></td>
@@ -1068,7 +884,6 @@
<td>32.04% / 13</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>58</td>
<td></td>
@@ -1081,7 +896,6 @@
<td>18.46% / 4</td>
<td class="text-right">0.08%</td>
</tr>
<tr>
<td>59</td>
<td></td>
@@ -1094,7 +908,6 @@
<td>-77.44% / 1</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>60</td>
<td></td>
@@ -1107,7 +920,6 @@
<td>84.05% / 2</td>
<td class="text-right">0.31%</td>
</tr>
<tr>
<td>61</td>
<td></td>
@@ -1120,7 +932,6 @@
<td>74.36% / 6</td>
<td class="text-right">4.55%</td>
</tr>
<tr>
<td>62</td>
<td></td>
@@ -1133,7 +944,6 @@
<td>117.91% / 3</td>
<td class="text-right">33.41%</td>
</tr>
<tr>
<td>63</td>
<td></td>
@@ -1146,7 +956,6 @@
<td>37.92% / 6</td>
<td class="text-right">3.98%</td>
</tr>
<tr>
<td>64</td>
<td></td>
@@ -1159,7 +968,6 @@
<td>120.78% / 3</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>65</td>
<td></td>
@@ -1172,7 +980,6 @@
<td>88.55% / 6</td>
<td class="text-right">24.97%</td>
</tr>
<tr>
<td>66</td>
<td></td>
@@ -1185,7 +992,6 @@
<td>22.26% / 27</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>67</td>
<td></td>
@@ -1198,7 +1004,6 @@
<td>6.32% / 49</td>
<td class="text-right">-0.20%</td>
</tr>
<tr>
<td>68</td>
<td></td>
@@ -1211,7 +1016,6 @@
<td>49.42% / 4</td>
<td class="text-right">0.11%</td>
</tr>
<tr>
<td>69</td>
<td></td>
@@ -1224,7 +1028,6 @@
<td>108.52% / 3</td>
<td class="text-right">30.32%</td>
</tr>
<tr>
<td>70</td>
<td></td>
@@ -1237,7 +1040,6 @@
<td>129.26% / 5</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>71</td>
<td></td>
@@ -1250,7 +1052,6 @@
<td>10.28% / 46</td>
<td class="text-right">1.17%</td>
</tr>
<tr>
<td>72</td>
<td></td>
@@ -1263,7 +1064,6 @@
<td>12.74% / 8</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>73</td>
<td></td>
@@ -1276,7 +1076,6 @@
<td>337.83% / 2</td>
<td class="text-right">1.12%</td>
</tr>
<tr>
<td>74</td>
<td></td>
@@ -1289,7 +1088,6 @@
<td>11.87% / 7</td>
<td class="text-right">-0.13%</td>
</tr>
<tr>
<td>75</td>
<td></td>
@@ -1302,7 +1100,6 @@
<td>43.85% / 1</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>76</td>
<td></td>
@@ -1315,7 +1112,6 @@
<td>26.63% / 5</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>77</td>
<td></td>
@@ -1328,7 +1124,6 @@
<td>25.48% / 14</td>
<td class="text-right">73.30%</td>
</tr>
<tr>
<td>78</td>
<td></td>
@@ -1341,7 +1136,6 @@
<td>17.66% / 5</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>79</td>
<td></td>
@@ -1354,7 +1148,6 @@
<td>8.94% / 44</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>80</td>
<td></td>
@@ -1367,7 +1160,6 @@
<td>15.10% / 41</td>
<td class="text-right">0.13%</td>
</tr>
<tr>
<td>81</td>
<td></td>
@@ -1380,7 +1172,6 @@
<td>13.19% / 47</td>
<td class="text-right">0.09%</td>
</tr>
<tr>
<td>82</td>
<td></td>
@@ -1393,7 +1184,6 @@
<td>22.15% / 36</td>
<td class="text-right">1.13%</td>
</tr>
<tr>
<td>83</td>
<td></td>
@@ -1406,7 +1196,6 @@
<td>229.99% / 1</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>84</td>
<td></td>
@@ -1419,7 +1208,6 @@
<td>-2.54% / 7</td>
<td class="text-right">48.19%</td>
</tr>
<tr>
<td>85</td>
<td></td>
@@ -1432,7 +1220,6 @@
<td>92.34% / 3</td>
<td class="text-right">0.41%</td>
</tr>
<tr>
<td>86</td>
<td></td>
@@ -1445,7 +1232,6 @@
<td>104.63% / 3</td>
<td class="text-right">0.05%</td>
</tr>
<tr>
<td>87</td>
<td></td>
@@ -1458,7 +1244,6 @@
<td>30.18% / 3</td>
<td class="text-right">0.11%</td>
</tr>
<tr>
<td>88</td>
<td></td>
@@ -1471,7 +1256,6 @@
<td>23.20% / 41</td>
<td class="text-right">0.14%</td>
</tr>
<tr>
<td>89</td>
<td></td>
@@ -1484,7 +1268,6 @@
<td>54.30% / 4</td>
<td class="text-right">-0.36%</td>
</tr>
<tr>
<td>90</td>
<td></td>
@@ -1497,7 +1280,6 @@
<td>153.01% / 4</td>
<td class="text-right">0.66%</td>
</tr>
<tr>
<td>91</td>
<td></td>
@@ -1510,7 +1292,6 @@
<td>6.69% / 7</td>
<td class="text-right">-0.01%</td>
</tr>
<tr>
<td>92</td>
<td></td>
@@ -1523,7 +1304,6 @@
<td>42.92% / 15</td>
<td class="text-right">5.28%</td>
</tr>
<tr>
<td>93</td>
<td></td>
@@ -1536,7 +1316,6 @@
<td>131.18% / 4</td>
<td class="text-right">0.14%</td>
</tr>
<tr>
<td>94</td>
<td></td>
@@ -1549,7 +1328,6 @@
<td>160.93% / 1</td>
<td class="text-right">9.61%</td>
</tr>
<tr>
<td>95</td>
<td></td>
@@ -1562,7 +1340,6 @@
<td>390.11% / 1</td>
<td class="text-right">-</td>
</tr>
<tr>
<td>96</td>
<td></td>
@@ -1575,7 +1352,6 @@
<td>159.68% / 2</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>97</td>
<td></td>
@@ -1588,7 +1364,6 @@
<td>16.18% / 9</td>
<td class="text-right">444.11%</td>
</tr>
<tr>
<td>98</td>
<td></td>
@@ -1601,7 +1376,6 @@
<td>17.68% / 6</td>
<td class="text-right">0.05%</td>
</tr>
<tr>
<td>99</td>
<td></td>
@@ -1614,7 +1388,6 @@
<td>106.90% / 4</td>
<td class="text-right">0.00%</td>
</tr>
<tr>
<td>100</td>
<td></td>
@@ -1627,13 +1400,11 @@
<td>-3.30% / 7</td>
<td class="text-right">-0.19%</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -1671,7 +1442,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -1695,10 +1465,5 @@
</div>
</footer>
</div>
</body>
</html>

4
dist/docs.html vendored
View File

@@ -6,5 +6,7 @@
<meta http-equiv="refresh" content="0; url=./docs/index.html">
<meta name="robots" content="noindex">
<noscript><a href="./docs/index.html">Click here if you are not redirected.</a></noscript>
<script>location = "./docs/index.html"</script>
<script>
location = "./docs/index.html"
</script>
</html>

222
dist/docs/alerts.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Alerts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/alerts.md" class="text-muted">Edit this page</a>
</div>
@@ -365,53 +213,37 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Alerts</h2>
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<div class="alert alert-primary mt-5 mb-6">
<h4 class="mb-1">Work in progress!</h4>
<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
</div>
<h3 id="default-alerts">Default alerts</h3>
<p>Add color contextual class.</p>
<div class="example">
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a primary alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
@@ -428,12 +260,10 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a danger alert—check it out!
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="alert-with-icon">Alert with icon</h3>
<p>Add <code class="highlighter-rouge">.alert-icon</code> class.</p>
<div class="example">
<div class="alert alert-icon alert-primary" role="alert">
<i class="fe fe-bell mr-2" aria-hidden="true"></i> You have done 5 actions.
@@ -445,7 +275,8 @@
<i class="fe fe-alert-triangle mr-2" aria-hidden="true"></i> The daily report has failed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-icon alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-icon alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-bell mr-2"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/i&gt;</span> You have done 5 actions.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-icon alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
@@ -453,25 +284,23 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-icon alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-alert-triangle mr-2"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/i&gt;</span> The daily report has failed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="alert-dismissible">Alert dismissible</h3>
<p>Add a dismiss button and the <code class="highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="highlighter-rouge">.close</code> button. On the dismiss button, add the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="highlighter-rouge">&lt;button&gt;</code> element with it for proper behavior across all devices.</p>
<div class="example">
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert"></button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">&gt;&lt;/button&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="alert-with-avatar">Alert with avatar</h3>
<div class="example">
<div class="alert alert-avatar alert-primary alert-dismissible">
<span class="avatar" style="background-image: url(../assets/images/faces/male/4.jpg)"></span>
@@ -482,21 +311,20 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-avatar alert-primary alert-dismissible"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-avatar alert-primary alert-dismissible"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/4.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-avatar alert-success alert-dismissible"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/35.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="alert-with-buttons">Alert with buttons</h3>
<div class="example">
<div class="alert alert-success alert-dismissible">
<button data-dismiss="alert" class="close"></button>
<h4>Some Message</h4>
<p>
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim
@@ -508,7 +336,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">class=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/button&gt;</span>
<span class="nt">&lt;h4&gt;</span>Some Message<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;p&gt;</span>
@@ -519,19 +348,16 @@
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-success"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Okay<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>No, thanks<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -569,7 +395,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -593,10 +418,5 @@
</div>
</footer>
</div>
</body>
</html>

269
dist/docs/avatars.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Avatars - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/avatars.md" class="text-muted">Edit this page</a>
</div>
@@ -365,39 +213,26 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Avatars</h2>
<h3 id="simple-avatar">Simple avatar</h3>
<div class="example">
<div class="avatar-list">
<span class="avatar" style="background-image: url(../assets/images/faces/male/21.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/male/25.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/5.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/17.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/male/40.jpg)"></span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/21.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/21.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/25.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/5.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/17.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/40.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/40.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</div>
<h3 id="avatar-size">Avatar size</h3>
<div class="example">
<div class="avatar-list">
<span class="avatar avatar-sm" style="background-image: url(../assets/images/faces/male/9.jpg)"></span>
@@ -408,15 +243,15 @@
<span class="avatar avatar-xxl" style="background-image: url(../assets/images/faces/male/2.jpg)"></span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/9.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/9.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/8.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/4.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/35.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xl"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/29.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xxl"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/2.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xxl"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/2.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</div>
<h3 id="avatar-status">Avatar status</h3>
<div class="example">
<div class="avatar-list">
<span class="avatar" style="background-image: url(../assets/images/faces/male/2.jpg)"></span>
@@ -434,7 +269,8 @@
</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/2.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/2.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/25.jpg)"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar-status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -446,73 +282,45 @@
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/16.jpg)"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar-status bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="avatar-placeholder">Avatar placeholder</h3>
<div class="example">
<div class="avatar-list">
<span class="avatar">RB</span>
<span class="avatar">KH</span>
<span class="avatar">BK</span>
<span class="avatar avatar-placeholder"></span>
<span class="avatar"><i class="fe fe-more-horizontal"></i></span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>RB<span class="nt">&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>RB<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>KH<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>BK<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-placeholder"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-more-horizontal"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-more-horizontal"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span></code></pre>
</div>
<div class="example">
<div class="avatar-list">
<span class="avatar avatar-blue">NG</span>
<span class="avatar avatar-azure">AM</span>
<span class="avatar avatar-indigo">RB</span>
<span class="avatar avatar-purple">PR</span>
<span class="avatar avatar-pink">WH</span>
<span class="avatar avatar-red">MR</span>
<span class="avatar avatar-orange">DB</span>
<span class="avatar avatar-yellow">PP</span>
<span class="avatar avatar-lime">JR</span>
<span class="avatar avatar-green">RB</span>
<span class="avatar avatar-teal">KH</span>
<span class="avatar avatar-cyan">BK</span>
<span class="avatar avatar-gray">CA</span>
<span class="avatar avatar-gray-dark">CW</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-blue"</span><span class="nt">&gt;</span>NG<span class="nt">&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-blue"</span><span class="nt">&gt;</span>NG<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-azure"</span><span class="nt">&gt;</span>AM<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-indigo"</span><span class="nt">&gt;</span>RB<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-purple"</span><span class="nt">&gt;</span>PR<span class="nt">&lt;/span&gt;</span>
@@ -525,68 +333,55 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-teal"</span><span class="nt">&gt;</span>KH<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-cyan"</span><span class="nt">&gt;</span>BK<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-gray"</span><span class="nt">&gt;</span>CA<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-gray-dark"</span><span class="nt">&gt;</span>CW<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-gray-dark"</span><span class="nt">&gt;</span>CW<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="avatars-list">Avatars list</h3>
<div class="example">
<div class="avatar-list">
<span class="avatar" style="background-image: url(../assets/images/faces/male/21.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/male/25.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/5.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/17.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/male/40.jpg)"></span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/21.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/25.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/5.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/17.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/40.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="example">
<div class="avatar-list avatar-list-stacked">
<span class="avatar" style="background-image: url(../assets/images/faces/female/12.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/21.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/29.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/female/2.jpg)"></span>
<span class="avatar" style="background-image: url(../assets/images/faces/male/34.jpg)"></span>
<span class="avatar">+8</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list avatar-list-stacked"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list avatar-list-stacked"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/12.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/21.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/29.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/2.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/male/34.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>+8<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -624,7 +419,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -648,10 +442,5 @@
</div>
</footer>
</div>
</body>
</html>

408
dist/docs/buttons.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Buttons - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/buttons.md" class="text-muted">Edit this page</a>
</div>
@@ -365,22 +213,11 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Buttons</h2>
<p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.</p>
<h3 id="button-tag">Button tag</h3>
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge">&lt;button&gt;</code> element. However, you can also use these classes on <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary" role="button">Link</a>
@@ -390,103 +227,77 @@
<input type="reset" class="btn btn-primary" value="Reset" />
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Reset"</span> <span class="nt">/&gt;</span></code></pre></div>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Reset"</span> <span class="nt">/&gt;</span></code></pre>
</div>
<h3 id="button-variations">Button variations</h3>
<p>Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="disabled-buttons">Disabled buttons</h3>
<p>Make buttons look inactive by adding the disabled boolean attribute to any <code class="highlighter-rouge">.btn</code> element. <code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the disabled attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary disabled"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary disabled"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary disabled"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success disabled"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info disabled"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning disabled"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="color-variations">Color variations</h3>
<p>The classic button, in different colors.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn btn-azure">Azure</a>
<a href="#" class="btn btn-indigo">Indigo</a>
<a href="#" class="btn btn-purple">Purple</a>
<a href="#" class="btn btn-pink">Pink</a>
<a href="#" class="btn btn-red">Red</a>
<a href="#" class="btn btn-orange">Orange</a>
<a href="#" class="btn btn-yellow">Yellow</a>
<a href="#" class="btn btn-lime">Lime</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-teal">Teal</a>
<a href="#" class="btn btn-cyan">Cyan</a>
<a href="#" class="btn btn-gray">Gray</a>
<a href="#" class="btn btn-gray-dark">Dark gray</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-azure"</span><span class="nt">&gt;</span>Azure<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-indigo"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-purple"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/a&gt;</span>
@@ -499,121 +310,101 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-teal"</span><span class="nt">&gt;</span>Teal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-cyan"</span><span class="nt">&gt;</span>Cyan<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-gray"</span><span class="nt">&gt;</span>Gray<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-gray-dark"</span><span class="nt">&gt;</span>Dark gray<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-gray-dark"</span><span class="nt">&gt;</span>Dark gray<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="square-buttons">Square buttons</h3>
<p>Add <code class="highlighter-rouge">.btn-square</code> to button to remove border-radius.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-square btn-primary">Primary</a>
<a href="#" class="btn btn-square btn-secondary">Secondary</a>
<a href="#" class="btn btn-square btn-success">Success</a>
<a href="#" class="btn btn-square btn-info">Info</a>
<a href="#" class="btn btn-square btn-warning">Warning</a>
<a href="#" class="btn btn-square btn-danger">Danger</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="pill-buttons">Pill buttons</h3>
<p>Add <code class="highlighter-rouge">.btn-pill</code> class to any button to make them more rounded.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-pill btn-primary">Primary</a>
<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
<a href="#" class="btn btn-pill btn-success">Success</a>
<a href="#" class="btn btn-pill btn-info">Info</a>
<a href="#" class="btn btn-pill btn-warning">Warning</a>
<a href="#" class="btn btn-pill btn-danger">Danger</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="outline-buttons">Outline buttons</h3>
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="button-size">Button size</h3>
<p>Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span></code></pre></div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre></div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
<div class="example">
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span></code></pre></div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<h3 id="button-with-icon">Button with icon</h3>
<p>Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
@@ -624,45 +415,34 @@
<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-upload mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Upload<span class="nt">&lt;/button&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-upload mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Upload<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>I like<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-check mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>I agree<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-plus mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>More<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-link mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Link<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-message-circle mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Comment<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-message-circle mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Comment<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<h3 id="social-buttons">Social buttons</h3>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button>
<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button>
<button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google</button>
<button type="button" class="btn btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button>
<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button>
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button>
<button type="button" class="btn btn-github"><i class="fa fa-github mr-2"></i>Github</button>
<button type="button" class="btn btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button>
<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button>
<button type="button" class="btn btn-vk"><i class="fa fa-vk mr-2"></i>VKontakte</button>
<button type="button" class="btn btn-rss"><i class="fa fa-rss mr-2"></i>RSS</button>
<button type="button" class="btn btn-flickr"><i class="fa fa-flickr mr-2"></i>Flickr</button>
<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket mr-2"></i>Bitbucket</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Facebook<span class="nt">&lt;/button&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Facebook<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-twitter"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Twitter<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-google"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-google mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Google<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-youtube"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-youtube mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Youtube<span class="nt">&lt;/button&gt;</span>
@@ -674,40 +454,28 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-vk"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vk mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>VKontakte<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-rss"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-rss mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>RSS<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flickr"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-flickr mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Flickr<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Bitbucket<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket mr-2"</span><span class="nt">&gt;&lt;/i&gt;</span>Bitbucket<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<p>You can use only icons.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
<button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
<button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
<button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
<button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
<button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
<button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
<button type="button" class="btn btn-icon btn-vk"><i class="fa fa-vk"></i></button>
<button type="button" class="btn btn-icon btn-rss"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-icon btn-flickr"><i class="fa fa-flickr"></i></button>
<button type="button" class="btn btn-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-facebook"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-twitter"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-google"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-google"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-youtube"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-youtube"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
@@ -719,12 +487,10 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-vk"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-vk"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-rss"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-rss"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-flickr"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-flickr"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-bitbucket"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bitbucket"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre>
</div>
<h3 id="icon-buttons">Icon buttons</h3>
<p>Icon only button. Add <code class="highlighter-rouge">.btn-icon</code> class to remove unnecessary padding from button.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
@@ -736,18 +502,17 @@
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-activity"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-activity"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-github"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-github"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-success"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-bell"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-warning"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-star"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-danger"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-trash"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-purple"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-bar-chart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-git-merge"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-git-merge"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre>
</div>
<h3 id="button-dropdown">Button dropdown</h3>
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;button&gt;</code> elements to better fit your potential needs.</p>
<div class="example">
<div class="btn-list">
<div class="dropdown">
@@ -759,7 +524,6 @@
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="fe fe-calendar mr-2"></i>Show calendar
@@ -769,7 +533,6 @@
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Show calendar
@@ -781,7 +544,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-calendar"</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/button&gt;</span>
@@ -807,14 +571,11 @@
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="loading-button">Loading button</h3>
<p>Add <code class="highlighter-rouge">.btn-loading</code> to use a loading state on a button. The width of the button depends on the length of the text inside.</p>
<p>Since the loading spinner is implemented using the <code class="highlighter-rouge">:after</code> pseudo-element, it is not supported by the <code class="highlighter-rouge">&lt;input type="submit"&gt;</code> element.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-loading">Button text</button>
@@ -824,16 +585,15 @@
<button type="button" class="btn btn-secondary btn-loading btn-block">Button text</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-loading"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-loading"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-loading btn-icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-check"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning btn-loading btn-sm"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-loading btn-lg"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-loading btn-block"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-loading btn-block"</span><span class="nt">&gt;</span>Button text<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
<h3 id="list-of-buttons">List of buttons</h3>
<p>You can now create a list of buttons with the <code class="highlighter-rouge">.btn-list</code> container.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
@@ -841,14 +601,14 @@
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<p>If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-secondary">One</a>
@@ -872,7 +632,8 @@
<a href="#" class="btn btn-secondary">Nineteen</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/a&gt;</span>
@@ -892,42 +653,41 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Seventeen<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Eighteen<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Nineteen<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<p>Use the <code class="highlighter-rouge">.text-center</code> or the <code class="highlighter-rouge">.text-right</code> modifiers to alter the alignment.</p>
<div class="example">
<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-center"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-center"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<div class="example">
<div class="btn-list text-right">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-right"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -965,7 +725,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -989,10 +748,5 @@
</div>
</footer>
</div>
</body>
</html>

322
dist/docs/cards.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Cards - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/cards.md" class="text-muted">Edit this page</a>
</div>
@@ -365,85 +213,55 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Cards</h2>
<p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
<p>The <code class="highlighter-rouge">.card</code> element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.</p>
<h3 id="default-card">Default card</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="advanced-card">Advanced card</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
<div class="card-options">
<a class="btn btn-secondary btn-sm">Action 1</a>
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
<div class="card-footer">
This is standard card footer
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-options"</span><span class="nt">&gt;</span>
@@ -457,28 +275,17 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
This is standard card footer
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="blog-post-card">Blog post card</h3>
<p>The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the <code class="highlighter-rouge">.card-img-top</code> class. We’ve added the <code class="highlighter-rouge">.d-flex .flex-column</code> classes to the <code class="highlighter-rouge">.card-body</code> to have the author details be on the bottom of the card.</p>
<div class="example example-bg">
<div class="example-column example-column-1">
<div class="card">
<a href="#"><img class="card-img-top" src="../assets/images/photos/david-klaasen-54203-500.jpg" alt="And this isn&#39;t my nose. This is a false one." /></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(../assets/images/faces/female/18.jpg)"></div>
<div>
@@ -493,7 +300,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"./assets/images/photos/david-klaasen-54203-500.jpg"</span> <span class="na">alt=</span><span class="s">"And this isn&amp;#39;t my nose. This is a false one."</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>And this isn't my nose. This is a false one.<span class="nt">&lt;/a&gt;&lt;/h4&gt;</span>
@@ -509,12 +317,10 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="row-deck">Row deck</h3>
<p>If you want to create a couple of posts next to each other, add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>—then they will all have the same height.</p>
<div class="example example-bg">
<div class="example-column example-column-2">
<div class="row row-cards row-deck">
@@ -536,7 +342,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
@@ -552,28 +359,17 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="post-card-with-aside-image">Post card with aside image</h3>
<p>You can also add the image on the left side of the card. All you need do to is: add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element. No worries, tabler will automatically center it and scale to right size:</p>
<div class="example example-bg">
<div class="example-column example-column-2">
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(../assets/images/photos/david-klaasen-54203-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(../assets/images/faces/female/18.jpg)"></div>
<div>
@@ -588,7 +384,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-aside"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-aside"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-aside-column"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>And this isn't my nose. This is a false one.<span class="nt">&lt;/a&gt;&lt;/h4&gt;</span>
@@ -604,57 +401,39 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="color-variations">Color variations</h3>
<div class="example example-bg">
<div class="example-column example-column-2">
<div class="row row-cards row-deck">
<div class="col-md-6">
<div class="card">
<div class="card-status bg-purple"></div>
<div class="card-header">
<h3 class="card-title">Card status</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-status card-status-left bg-blue"></div>
<div class="card-header">
<h3 class="card-title">Card status on left side</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status bg-purple"</span><span class="nt">&gt;&lt;/div&gt;</span>
@@ -677,40 +456,29 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="card-with-switch">Card with switch</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with switch</h3>
<div class="card-options">
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input" checked="" />
<span class="custom-switch-indicator"></span>
</label>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with switch<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-options"</span><span class="nt">&gt;</span>
@@ -723,36 +491,28 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="card-with-loader">Card with loader</h3>
<div class="example example-bg">
<div class="example-column example-column-1">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with loader<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -764,18 +524,16 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -813,7 +571,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -837,10 +594,5 @@
</div>
</footer>
</div>
</body>
</html>

178
dist/docs/charts.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Charts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/charts.md" class="text-muted">Edit this page</a>
</div>
@@ -365,18 +213,9 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Charts</h2>
<h3 id="c3js-charts">c3.js charts</h3>
<div class="example example-bg">
<div class="example-column example-column-2">
<div class="card">
@@ -430,7 +269,8 @@ require(['c3', 'jquery'], function(c3, $) {
</script>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Chart name<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -478,18 +318,16 @@ require(['c3', 'jquery'], function(c3, $) {
<span class="p">});</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nt">&lt;/script&gt;</span></code></pre></div>
<span class="nt">&lt;/script&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -527,7 +365,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -551,10 +388,5 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</footer>
</div>
</body>
</html>

230
dist/docs/form-components.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Form components - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/form-components.md" class="text-muted">Edit this page</a>
</div>
@@ -365,78 +213,58 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Form components</h2>
<h3 id="color-input">Color input</h3>
<div class="example">
<div class="form-group">
<label class="form-label">Color Input</label>
<div class="d-flex">
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="azure" class="colorinput-input" />
<span class="colorinput-color bg-azure"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
<span class="colorinput-color bg-indigo"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="purple" class="colorinput-input" />
<span class="colorinput-color bg-purple"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="pink" class="colorinput-input" />
<span class="colorinput-color bg-pink"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="red" class="colorinput-input" />
<span class="colorinput-color bg-red"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="orange" class="colorinput-input" />
<span class="colorinput-color bg-orange"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="yellow" class="colorinput-input" />
<span class="colorinput-color bg-yellow"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="lime" class="colorinput-input" />
<span class="colorinput-color bg-lime"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="green" class="colorinput-input" />
<span class="colorinput-color bg-green"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="teal" class="colorinput-input" />
<span class="colorinput-color bg-teal"></span>
</label>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
@@ -480,15 +308,13 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="image-input">Image input</h3>
<div class="example">
<div class="form-group">
<label class="form-label">Image Check</label>
<div class="row sm-gutters">
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
@@ -497,7 +323,6 @@
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked="" />
@@ -506,7 +331,6 @@
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
@@ -515,7 +339,6 @@
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="4" class="imagecheck-input" checked="" />
@@ -524,7 +347,6 @@
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
@@ -533,7 +355,6 @@
</figure>
</label>
</div>
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
@@ -542,11 +363,11 @@
</figure>
</label>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row sm-gutters"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
@@ -598,10 +419,9 @@
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="icon-input">Icon input</h3>
<div class="example">
<div class="form-group">
<label class="form-label">Icon input</label>
@@ -619,7 +439,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for..."</span><span class="nt">&gt;</span>
@@ -633,10 +454,9 @@
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="toggle-switches">Toggle switches</h3>
<div class="example">
<div class="form-group">
<div class="form-label">Toggle switches</div>
@@ -651,7 +471,6 @@
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 2</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="3" class="custom-switch-input" />
<span class="custom-switch-indicator"></span>
@@ -660,7 +479,8 @@
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Toggle switches<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-switches-stacked"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-switch"</span><span class="nt">&gt;</span>
@@ -679,10 +499,9 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-description"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="form-fieldset">Form fieldset</h3>
<div class="example">
<fieldset class="form-fieldset">
<div class="form-group">
@@ -703,7 +522,8 @@
</div>
</fieldset>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
@@ -720,18 +540,16 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Phone number<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span></code></pre></div>
<span class="nt">&lt;/fieldset&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -769,7 +587,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -793,10 +610,5 @@
</div>
</footer>
</div>
</body>
</html>

173
dist/docs/grid.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Grid utilities - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/grid.md" class="text-muted">Edit this page</a>
</div>
@@ -365,33 +213,20 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Grid utilities</h2>
<div class="alert alert-primary mt-5 mb-6">
<h4 class="mb-1">Work in progress!</h4>
<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -429,7 +264,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -453,10 +287,5 @@
</div>
</footer>
</div>
</body>
</html>

181
dist/docs/index.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Introduction - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/index.md" class="text-muted">Edit this page</a>
</div>
@@ -365,60 +213,39 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Introduction</h2>
<p>We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you’ll be able to manage and visualize different types of data in the easiest possible way!</p>
<h3 id="setup-environment">Setup environment</h3>
<p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files and Node. Follow these steps:</p>
<ol>
<li><a href="https://nodejs.org/download/">Download and install Node.js</a>, which we use to manage our dependencies.</li>
<li>Navigate to the root <code class="highlighter-rouge">/tabler</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="highlighter-rouge">package.json</code>.</li>
<li>
<p><a href="https://www.ruby-lang.org/en/documentation/installation/">Install Ruby</a>, install <a href="https://bundler.io/">Bundler</a> with <code class="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as Jekyll and plugins.</p>
<p><strong>Windows users:</strong> Read <a href="https://jekyllrb.com/docs/windows/">this guide</a> to get Jekyll up and running without problems.</p>
</li>
</ol>
<p>When completed, you’ll be able to run the various commands provided from the command line.</p>
<h3 id="build-tabler-locally">Build Tabler locally</h3>
<ol>
<li>From the root <code class="highlighter-rouge">/tabler</code> directory, run <code class="highlighter-rouge">npm run serve</code> in the command line.</li>
<li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
<li>Any change in <code class="highlighter-rouge">/src</code> directory will build application and refresh the page.</li>
</ol>
<div class="alert alert-warning">
<strong>Warning!</strong> all changes made in <code>_site/</code> folder would be overwriten on application build.
</div>
<h3 id="bugs-and-feature-requests">Bugs and feature requests</h3>
<p>Have a bug or a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -456,7 +283,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -480,10 +306,5 @@
</div>
</footer>
</div>
</body>
</html>

264
dist/docs/tags.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Tags - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/tags.md" class="text-muted">Edit this page</a>
</div>
@@ -365,20 +213,10 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Tags</h2>
<p>Small tag labels to insert anywhere</p>
<h3 id="default-tag">Default tag</h3>
<div class="example">
<div class="tags">
<span class="tag">First tag</span>
@@ -386,12 +224,12 @@
<span class="tag">Third tag</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Second tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="link-tag">Link tag</h3>
<div class="example">
<div class="tags">
<a href="#" class="tag">First tag</a>
@@ -399,12 +237,12 @@
<a href="#" class="tag">Third tag</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/a&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Second tag<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/a&gt;</span></code></pre></div>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/a&gt;</span></code></pre>
</div>
<h3 id="rounded-tag">Rounded tag</h3>
<div class="example">
<div class="tags">
<span class="tag tag-rounded">First tag</span>
@@ -412,44 +250,32 @@
<span class="tag tag-rounded">Third tag</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-rounded"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-rounded"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-rounded"</span><span class="nt">&gt;</span>Second tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-rounded"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-rounded"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="color-tag">Color tag</h3>
<div class="example">
<div class="tags">
<span class="tag tag-blue">Blue tag</span>
<span class="tag tag-azure">Azure tag</span>
<span class="tag tag-indigo">Indigo tag</span>
<span class="tag tag-purple">Purple tag</span>
<span class="tag tag-pink">Pink tag</span>
<span class="tag tag-red">Red tag</span>
<span class="tag tag-orange">Orange tag</span>
<span class="tag tag-yellow">Yellow tag</span>
<span class="tag tag-lime">Lime tag</span>
<span class="tag tag-green">Green tag</span>
<span class="tag tag-teal">Teal tag</span>
<span class="tag tag-cyan">Cyan tag</span>
<span class="tag tag-gray">Gray tag</span>
<span class="tag tag-gray-dark">Dark gray tag</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-blue"</span><span class="nt">&gt;</span>Blue tag<span class="nt">&lt;/span&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-blue"</span><span class="nt">&gt;</span>Blue tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-azure"</span><span class="nt">&gt;</span>Azure tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-indigo"</span><span class="nt">&gt;</span>Indigo tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-purple"</span><span class="nt">&gt;</span>Purple tag<span class="nt">&lt;/span&gt;</span>
@@ -462,54 +288,47 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-teal"</span><span class="nt">&gt;</span>Teal tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-cyan"</span><span class="nt">&gt;</span>Cyan tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-gray"</span><span class="nt">&gt;</span>Gray tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-gray-dark"</span><span class="nt">&gt;</span>Dark gray tag<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-gray-dark"</span><span class="nt">&gt;</span>Dark gray tag<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="avatar-tag">Avatar tag</h3>
<div class="example">
<div class="tags">
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/female/16.jpg)"></span>
Victoria
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/male/41.jpg)"></span>
Nathan
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/female/1.jpg)"></span>
Alice
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/female/18.jpg)"></span>
Rose
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/male/16.jpg)"></span>
Peter
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/male/26.jpg)"></span>
Wayne
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/female/7.jpg)"></span>
Michelle
</span>
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url(../assets/images/faces/female/17.jpg)"></span>
Debra
</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag-avatar avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/16.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Victoria
<span class="nt">&lt;/span&gt;</span>
@@ -540,12 +359,10 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag-avatar avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./assets/images/faces/female/17.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Debra
<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
<h3 id="list-of-tags">List of tags</h3>
<p>You can create a list of tags with the <code class="highlighter-rouge">.tags</code> container.</p>
<div class="example">
<div class="tags">
<span class="tag">First tag</span>
@@ -553,14 +370,14 @@
<span class="tag">Third tag</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>First tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Second tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Third tag<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<p>If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.</p>
<div class="example">
<div class="tags">
<span class="tag">One</span>
@@ -585,7 +402,8 @@
<span class="tag">Twenty</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/span&gt;</span>
@@ -606,10 +424,9 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Eighteen<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Nineteen<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Twenty<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="tag-remove">Tag remove</h3>
<div class="example">
<div class="tags">
<span class="tag">
@@ -630,7 +447,8 @@
</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
One
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag-addon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-x"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
@@ -647,10 +465,9 @@
Four
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag-addon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-x"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="tag-addons">Tag addons</h3>
<div class="example">
<div class="tags">
<div class="tag">
@@ -671,7 +488,8 @@
</span>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>
npm
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tag-addon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-x"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -686,18 +504,16 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag tag-dark"</span><span class="nt">&gt;</span>
CSS gzip size
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"tag-addon tag-warning"</span><span class="nt">&gt;</span>20.9 kB<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;/span&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -735,7 +551,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -759,10 +574,5 @@
</div>
</footer>
</div>
</body>
</html>

180
dist/docs/typography.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Typography - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="../assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="../profile.html" class="nav-item ">Profile</a>
<a href="../login.html" class="nav-item ">Login</a>
<a href="../register.html" class="nav-item ">Register</a>
<a href="../forgot-password.html" class="nav-item ">Forgot password</a>
<a href="../400.html" class="nav-item ">400 error</a>
<a href="../104.html" class="nav-item ">401 error</a>
<a href="../403.html" class="nav-item ">403 error</a>
<a href="../404.html" class="nav-item ">404 error</a>
<a href="../500.html" class="nav-item ">500 error</a>
<a href="../503.html" class="nav-item ">503 error</a>
<a href="../empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,71 +178,34 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6">
<i class="fe fe-github mr-2"></i>Browse source code
</a>
<!-- Getting started -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a>
</div>
<!-- Components -->
<div class="list-group list-group-transparent mb-0">
<a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a>
<a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a>
<a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a>
</div>
<div class="d-none d-lg-block mt-6">
<a href="https://github.com/tabler/tabler/edit/dev/src/_docs/typography.md" class="text-muted">Edit this page</a>
</div>
@@ -365,22 +213,11 @@
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Typography</h2>
<p>A single class to handle WYSIWYG generated content, where only HTML tags are available</p>
<h3 id="basic-elements">Basic elements</h3>
<p>When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use <code class="highlighter-rouge">.text-wrap</code> as container. It can handle almost any HTML tag.</p>
<div class="example">
<div class="text-wrap">
<h1>Hello World</h1>
@@ -473,7 +310,8 @@
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-wrap"</span><span class="nt">&gt;</span>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-wrap"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Hello World<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>Lorem ipsum<span class="nt">&lt;sup&gt;&lt;a&gt;</span>[1]<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<span class="nt">&lt;sub&gt;</span>script<span class="nt">&lt;/sub&gt;</span> works as well!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;h2&gt;</span>Second level<span class="nt">&lt;/h2&gt;</span>
@@ -562,18 +400,16 @@
<span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;h6&gt;</span>Sixth level<span class="nt">&lt;/h6&gt;</span>
<span class="nt">&lt;p&gt;</span>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -611,7 +447,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -635,10 +470,5 @@
</div>
</footer>
</div>
</body>
</html>

129
dist/empty.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Empty page - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,15 +178,9 @@
</div>
</div>
</div>
<div class="page-content">
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -339,7 +218,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -363,10 +241,5 @@
</div>
</footer>
</div>
</body>
</html>

24
dist/forgot-password.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Forgot password - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,27 +22,19 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-single">
<div class="container">
@@ -57,12 +43,9 @@
<div class="text-center mb-6">
<img src="./assets/brand/tabler.svg" class="h-6" alt="">
</div>
<form class="card" action="" method="post">
<div class="card-body p-6">
<div class="card-title">Forgot password</div>
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
<div class="form-group">
<label class="form-label" for="exampleInputEmail1">Email address</label>
@@ -81,10 +64,5 @@
</div>
</div>
</div>
</body>
</html>

301
dist/form-elements.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link active"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,11 +178,7 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-12">
@@ -328,12 +209,9 @@
<label class="form-label">Textarea <span class="form-label-small">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
<div class="form-group">
<label class="form-label">Image Check</label>
<div class="row sm-gutters">
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
@@ -342,7 +220,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked />
@@ -351,7 +228,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
@@ -360,7 +236,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="4" class="imagecheck-input" checked />
@@ -369,7 +244,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
@@ -378,7 +252,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
@@ -387,7 +260,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="7" class="imagecheck-input" checked />
@@ -396,7 +268,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="8" class="imagecheck-input" />
@@ -405,7 +276,6 @@
</figure>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="9" class="imagecheck-input" />
@@ -414,67 +284,53 @@
</figure>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Color Input</label>
<div class="d-flex">
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="azure" class="colorinput-input" />
<span class="colorinput-color bg-azure"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="indigo" class="colorinput-input" checked/>
<span class="colorinput-color bg-indigo"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="purple" class="colorinput-input" />
<span class="colorinput-color bg-purple"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="pink" class="colorinput-input" />
<span class="colorinput-color bg-pink"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="red" class="colorinput-input" />
<span class="colorinput-color bg-red"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="orange" class="colorinput-input" />
<span class="colorinput-color bg-orange"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="yellow" class="colorinput-input" />
<span class="colorinput-color bg-yellow"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="lime" class="colorinput-input" />
<span class="colorinput-color bg-lime"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="green" class="colorinput-input" />
<span class="colorinput-color bg-green"></span>
</label>
<label class="colorinput mr-2">
<input name="color" type="checkbox" value="teal" class="colorinput-input" />
<span class="colorinput-color bg-teal"></span>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Input group</label>
<div class="input-group">
@@ -506,7 +362,6 @@
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
@@ -522,7 +377,6 @@
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label class="form-label">Separated inputs</label>
<div class="row xs-gutters">
@@ -542,7 +396,9 @@
</div>
<span class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top"
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
<p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>
">?</span>
</span>
</div>
</div>
@@ -552,23 +408,18 @@
<label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div>
<div class="form-group">
<label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State..">
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>
<div class="form-group">
<label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>
<div class="form-group">
<label class="form-label">Country</label>
<select class="form-control custom-select">
@@ -597,7 +448,6 @@
<input type="radio" name="value" value="100" class="selectgroup-input">
<span class="selectgroup-button">M</span>
</label>
<label class="selectgroup-item">
<input type="radio" name="value" value="150" class="selectgroup-input">
<span class="selectgroup-button">L</span>
@@ -675,7 +525,6 @@
</label>
</div>
</div>
<div class="form-group">
<div class="form-label">Toggle switches</div>
<div class="custom-switches-stacked">
@@ -689,7 +538,6 @@
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 2</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="3" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
@@ -697,7 +545,6 @@
</label>
</div>
</div>
<div class="form-group">
<div class="form-label">Toggle switch single</div>
<label class="custom-switch">
@@ -706,7 +553,6 @@
<span class="custom-switch-description">I agree with terms and conditions</span>
</label>
</div>
<fieldset class="form-fieldset">
<div class="form-group">
<label class="form-label">Full name<span class="form-required">*</span></label>
@@ -811,7 +657,6 @@
<label class="custom-file-label">Choose file</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Date of birth</label>
<div class="row xs-gutters">
@@ -993,8 +838,6 @@
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Username</label>
<div class="input-group">
@@ -1004,7 +847,6 @@
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label class="form-label">Subdomain</label>
<div class="input-group">
@@ -1014,7 +856,6 @@
</span>
</div>
</div>
<div class="form-group">
<label class="form-label">Your vanity URL</label>
<div class="input-group">
@@ -1024,7 +865,6 @@
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
</div>
<div class="form-group">
<label class="form-label">Price</label>
<div class="input-group">
@@ -1037,7 +877,6 @@
</span>
</div>
</div>
<div class="form-group">
<label class="form-label">Button input</label>
<div class="input-group">
@@ -1056,12 +895,10 @@
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
<div class="form-group">
<label class="form-label">Tags</label>
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
</div>
<div class="form-group">
<label class="form-label">Beast</label>
<select name="beast" id="select-beast" class="form-control custom-select">
@@ -1070,214 +907,111 @@
<option value="3">Nikola Tesla</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Users list</label>
<select name="user" id="select-users" class="form-control custom-select">
<option value="1" data-data='{"image": "assets/images/faces/female/16.jpg"}'>Victoria King</option>
<option value="2" data-data='{"image": "assets/images/faces/male/41.jpg"}'>Nathan Guerrero</option>
<option value="3" data-data='{"image": "assets/images/faces/female/1.jpg"}'>Alice Mason</option>
<option value="4" data-data='{"image": "assets/images/faces/female/18.jpg"}'>Rose Bradley</option>
<option value="5" data-data='{"image": "assets/images/faces/male/16.jpg"}'>Peter Richards</option>
<option value="6" data-data='{"image": "assets/images/faces/male/26.jpg"}'>Wayne Holland</option>
<option value="7" data-data='{"image": "assets/images/faces/female/7.jpg"}'>Michelle Ross</option>
<option value="8" data-data='{"image": "assets/images/faces/female/17.jpg"}'>Debra Beck</option>
<option value="9" data-data='{"image": "assets/images/faces/male/30.jpg"}'>Phillip Peters</option>
<option value="10" data-data='{"image": "assets/images/faces/male/32.jpg"}'>Jack Ruiz</option>
<option value="11" data-data='{"image": "assets/images/faces/male/9.jpg"}'>Ronald Bradley</option>
<option value="12" data-data='{"image": "assets/images/faces/female/8.jpg"}'>Kathleen Harper</option>
<option value="13" data-data='{"image": "assets/images/faces/male/4.jpg"}'>Bobby Knight</option>
<option value="14" data-data='{"image": "assets/images/faces/male/35.jpg"}'>Craig Anderson</option>
<option value="15" data-data='{"image": "assets/images/faces/female/29.jpg"}'>Crystal Wallace</option>
<option value="16" data-data='{"image": "assets/images/faces/male/2.jpg"}'>Vincent Valdez</option>
<option value="17" data-data='{"image": "assets/images/faces/female/1.jpg"}'>Beverly Armstrong</option>
<option value="18" data-data='{"image": "assets/images/faces/male/40.jpg"}'>Russell Gibson</option>
<option value="19" data-data='{"image": "assets/images/faces/male/7.jpg"}'>Tyler Munoz</option>
<option value="20" data-data='{"image": "assets/images/faces/female/11.jpg"}'>Sharon Wells</option>
<option value="21" data-data='{"image": "assets/images/faces/male/21.jpg"}'>Juan Hernandez</option>
<option value="22" data-data='{"image": "assets/images/faces/male/25.jpg"}'>Dylan Walters</option>
<option value="23" data-data='{"image": "assets/images/faces/female/5.jpg"}'>Kathryn Cooper</option>
<option value="24" data-data='{"image": "assets/images/faces/female/17.jpg"}'>Cynthia Curtis</option>
<option value="25" data-data='{"image": "assets/images/faces/male/40.jpg"}'>Michael Obrien</option>
<option value="26" data-data='{"image": "assets/images/faces/male/33.jpg"}'>Billy May</option>
<option value="27" data-data='{"image": "assets/images/faces/male/6.jpg"}'>Larry Jensen</option>
<option value="28" data-data='{"image": "assets/images/faces/male/32.jpg"}'>Terry Barnett</option>
<option value="29" data-data='{"image": "assets/images/faces/female/10.jpg"}'>Ruth Arnold</option>
<option value="30" data-data='{"image": "assets/images/faces/female/18.jpg"}'>Julia Reed</option>
<option value="31" data-data='{"image": "assets/images/faces/female/12.jpg"}'>Amanda Hunt</option>
<option value="32" data-data='{"image": "assets/images/faces/female/21.jpg"}'>Laura Weaver</option>
<option value="33" data-data='{"image": "assets/images/faces/female/29.jpg"}'>Margaret Berry</option>
<option value="34" data-data='{"image": "assets/images/faces/female/2.jpg"}'>Nancy Herrera</option>
<option value="35" data-data='{"image": "assets/images/faces/male/34.jpg"}'>Edward Larson</option>
<option value="36" data-data='{"image": "assets/images/faces/female/11.jpg"}'>Joan Hanson</option>
<option value="37" data-data='{"image": "assets/images/faces/female/30.jpg"}'>Janet Reed</option>
<option value="38" data-data='{"image": "assets/images/faces/male/31.jpg"}'>Johnny Barnett</option>
<option value="39" data-data='{"image": "assets/images/faces/male/42.jpg"}'>Ethan Griffin</option>
<option value="40" data-data='{"image": "assets/images/faces/male/2.jpg"}'>Albert Torres</option>
<option value="41" data-data='{"image": "assets/images/faces/female/25.jpg"}'>Jane Pearson</option>
<option value="42" data-data='{"image": "assets/images/faces/male/9.jpg"}'>Jason Porter</option>
<option value="43" data-data='{"image": "assets/images/faces/female/25.jpg"}'>Teresa Wood</option>
<option value="44" data-data='{"image": "assets/images/faces/female/16.jpg"}'>Mary Butler</option>
<option value="45" data-data='{"image": "assets/images/faces/female/27.jpg"}'>Janice Lane</option>
<option value="46" data-data='{"image": "assets/images/faces/male/26.jpg"}'>Anthony Miller</option>
<option value="47" data-data='{"image": "assets/images/faces/female/9.jpg"}'>Denise Elliott</option>
<option value="48" data-data='{"image": "assets/images/faces/female/16.jpg"}'>Rose Cook</option>
<option value="49" data-data='{"image": "assets/images/faces/male/17.jpg"}'>Terry Tucker</option>
<option value="50" data-data='{"image": "assets/images/faces/female/6.jpg"}'>Grace Knight</option>
<option value="51" data-data='{"image": "assets/images/faces/female/26.jpg"}'>Elizabeth Martin</option>
<option value="52" data-data='{"image": "assets/images/faces/female/17.jpg"}'>Michelle Schultz</option>
<option value="53" data-data='{"image": "assets/images/faces/female/21.jpg"}'>Crystal Austin</option>
<option value="54" data-data='{"image": "assets/images/faces/male/32.jpg"}'>Douglas Ray</option>
<option value="55" data-data='{"image": "assets/images/faces/female/12.jpg"}'>Teresa Reyes</option>
<option value="56" data-data='{"image": "assets/images/faces/female/4.jpg"}'>Emma Wade</option>
<option value="57" data-data='{"image": "assets/images/faces/female/27.jpg"}'>Carol Henderson</option>
<option value="58" data-data='{"image": "assets/images/faces/male/20.jpg"}'>Christopher Harvey</option>
<option value="59" data-data='{"image": "assets/images/faces/female/5.jpg"}'>Deborah Alvarado</option>
<option value="60" data-data='{"image": "assets/images/faces/male/10.jpg"}'>Gregory Hunt</option>
<option value="61" data-data='{"image": "assets/images/faces/male/14.jpg"}'>Jesse Carlson</option>
<option value="62" data-data='{"image": "assets/images/faces/female/22.jpg"}'>Joan Wood</option>
<option value="63" data-data='{"image": "assets/images/faces/male/20.jpg"}'>Carl Alvarado</option>
<option value="64" data-data='{"image": "assets/images/faces/male/40.jpg"}'>Frank George</option>
<option value="65" data-data='{"image": "assets/images/faces/female/17.jpg"}'>Kathleen Greene</option>
<option value="66" data-data='{"image": "assets/images/faces/female/6.jpg"}'>Michelle Gray</option>
<option value="67" data-data='{"image": "assets/images/faces/female/5.jpg"}'>Nancy Hawkins</option>
<option value="68" data-data='{"image": "assets/images/faces/male/1.jpg"}'>Tyler Fisher</option>
<option value="69" data-data='{"image": "assets/images/faces/male/5.jpg"}'>Jordan Cunningham</option>
<option value="70" data-data='{"image": "assets/images/faces/male/27.jpg"}'>Wayne Reynolds</option>
<option value="71" data-data='{"image": "assets/images/faces/male/10.jpg"}'>Johnny Carlson</option>
<option value="72" data-data='{"image": "assets/images/faces/male/31.jpg"}'>Tyler Washington</option>
<option value="73" data-data='{"image": "assets/images/faces/female/18.jpg"}'>Debra Alvarado</option>
<option value="74" data-data='{"image": "assets/images/faces/female/21.jpg"}'>Beverly Brewer</option>
<option value="75" data-data='{"image": "assets/images/faces/male/42.jpg"}'>Sean Gilbert</option>
<option value="76" data-data='{"image": "assets/images/faces/female/32.jpg"}'>Diane McCoy</option>
<option value="77" data-data='{"image": "assets/images/faces/male/35.jpg"}'>Robert Newman</option>
<option value="78" data-data='{"image": "assets/images/faces/female/26.jpg"}'>Olivia Newman</option>
<option value="79" data-data='{"image": "assets/images/faces/female/18.jpg"}'>Lori George</option>
<option value="80" data-data='{"image": "assets/images/faces/female/13.jpg"}'>Madison Jimenez</option>
<option value="81" data-data='{"image": "assets/images/faces/female/4.jpg"}'>Joan Rivera</option>
<option value="82" data-data='{"image": "assets/images/faces/female/27.jpg"}'>Helen Aguilar</option>
<option value="83" data-data='{"image": "assets/images/faces/male/40.jpg"}'>Bryan Johnson</option>
<option value="84" data-data='{"image": "assets/images/faces/female/27.jpg"}'>Joan Beck</option>
<option value="85" data-data='{"image": "assets/images/faces/male/33.jpg"}'>Douglas James</option>
<option value="86" data-data='{"image": "assets/images/faces/male/24.jpg"}'>Ethan Bell</option>
<option value="87" data-data='{"image": "assets/images/faces/female/18.jpg"}'>Frances White</option>
<option value="88" data-data='{"image": "assets/images/faces/female/26.jpg"}'>Amanda Lawrence</option>
<option value="89" data-data='{"image": "assets/images/faces/female/7.jpg"}'>Emma Bailey</option>
<option value="90" data-data='{"image": "assets/images/faces/female/16.jpg"}'>Anna Jordan</option>
<option value="91" data-data='{"image": "assets/images/faces/male/12.jpg"}'>Daniel Keller</option>
<option value="92" data-data='{"image": "assets/images/faces/female/23.jpg"}'>Rachel Vargas</option>
<option value="93" data-data='{"image": "assets/images/faces/female/15.jpg"}'>Virginia Kelly</option>
<option value="94" data-data='{"image": "assets/images/faces/male/32.jpg"}'>Joe Sandoval</option>
<option value="95" data-data='{"image": "assets/images/faces/female/9.jpg"}'>Megan Ray</option>
<option value="96" data-data='{"image": "assets/images/faces/male/28.jpg"}'>Joshua Rios</option>
<option value="97" data-data='{"image": "assets/images/faces/male/9.jpg"}'>Aaron Silva</option>
<option value="98" data-data='{"image": "assets/images/faces/female/10.jpg"}'>Kathy Wallace</option>
<option value="99" data-data='{"image": "assets/images/faces/male/14.jpg"}'>Zachary Griffin</option>
<option value="100" data-data='{"image": "assets/images/faces/male/11.jpg"}'>Richard Allen</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Countries</label>
<select name="country" id="select-countries" class="form-control custom-select">
@@ -1295,11 +1029,8 @@
<a href="javascript:void(0)" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4">
<div class="card">
@@ -1311,44 +1042,36 @@
<label class="form-label">Date</label>
<input type="text" name="field-name" class="form-control" data-mask="00/00/0000" data-mask-clearifnotmatch="true" placeholder="00/00/0000" />
</div>
<div class="form-group">
<label class="form-label">Hour</label>
<input type="text" name="field-name" class="form-control" data-mask="00:00:00" data-mask-clearifnotmatch="true" placeholder="00:00:00" />
</div>
<div class="form-group">
<label class="form-label">Date & Hour</label>
<input type="text" name="field-name" class="form-control" data-mask="00/00/0000 00:00:00" data-mask-clearifnotmatch="true" placeholder="00/00/0000 00:00:00" />
</div>
<div class="form-group">
<label class="form-label">ZIP Code</label>
<input type="text" name="field-name" class="form-control" data-mask="00000-000" data-mask-clearifnotmatch="true" placeholder="00000-000" />
</div>
<div class="form-group">
<label class="form-label">Money</label>
<input type="text" name="field-name" class="form-control" data-mask="000.000.000.000.000,00" data-mask-reverse="true" />
</div>
<div class="form-group">
<label class="form-label">Telephone</label>
<input type="text" name="field-name" class="form-control" data-mask="0000-0000" data-mask-clearifnotmatch="true" placeholder="0000-0000" />
</div>
<div class="form-group">
<label class="form-label">Telephone with Code Area</label>
<input type="text" name="field-name" class="form-control" data-mask="(00) 0000-0000" data-mask-clearifnotmatch="true" />
</div>
<div class="form-group">
<label class="form-label">IP Address</label>
<input type="text" name="field-name" class="form-control" data-mask="099.099.099.099" data-mask-clearifnotmatch="true" placeholder="000.000.000.000" />
</div>
</div>
</div>
<script>
require(['input-mask']);
</script>
@@ -1369,22 +1092,18 @@
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="form-group">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
@@ -1396,7 +1115,6 @@
<form class="card">
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="row">
<div class="col-md-5">
<div class="form-group">
@@ -1495,7 +1213,6 @@ But that's the difference in our opinions.</textarea>
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
</div>
</div>
<div class="form-label">Assertions</div>
<div class="table-responsive">
<table class="table mb-0">
@@ -1641,7 +1358,6 @@ But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -1679,7 +1395,6 @@ But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -1703,11 +1418,6 @@ But that's the difference in our opinions.</textarea>
</div>
</footer>
</div>
<script>
require(['jquery', 'selectize'], function ($, selectize) {
$(document).ready(function () {
@@ -1760,8 +1470,5 @@ But that's the difference in our opinions.</textarea>
});
});
</script>
</body>
</html>

160
dist/gallery.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link active"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,11 +178,7 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
@@ -317,12 +198,8 @@
</div>
</div>
</div>
<div class="row row-cards">
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/grant-ritchie-338179-500.jpg" alt="Photo by Nathan Guerrero" class="rounded">
@@ -340,9 +217,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/ilnur-kalimullin-218996-500.jpg" alt="Photo by Alice Mason" class="rounded">
@@ -360,9 +235,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/jakob-owens-224352-500.jpg" alt="Photo by Rose Bradley" class="rounded">
@@ -380,9 +253,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/jeremy-bishop-330225-500.jpg" alt="Photo by Peter Richards" class="rounded">
@@ -400,9 +271,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/jonatan-pie-226191-500.jpg" alt="Photo by Wayne Holland" class="rounded">
@@ -420,9 +289,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/josh-calabrese-66153-500.jpg" alt="Photo by Michelle Ross" class="rounded">
@@ -440,9 +307,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/joshua-earle-157231-500.jpg" alt="Photo by Debra Beck" class="rounded">
@@ -460,9 +325,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/mahkeo-222765-500.jpg" alt="Photo by Phillip Peters" class="rounded">
@@ -480,9 +343,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/matt-barrett-339981-500.jpg" alt="Photo by Jack Ruiz" class="rounded">
@@ -500,9 +361,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/nathan-anderson-297460-500.jpg" alt="Photo by Ronald Bradley" class="rounded">
@@ -520,9 +379,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/nathan-anderson-316188-500.jpg" alt="Photo by Kathleen Harper" class="rounded">
@@ -540,9 +397,7 @@
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-3">
<a href="javascript:void(0)" class="mb-3">
<img src="assets/images/photos/nathan-dumlao-287713-500.jpg" alt="Photo by Bobby Knight" class="rounded">
@@ -560,15 +415,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -606,7 +456,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -630,10 +479,5 @@
</div>
</footer>
</div>
</body>
</html>

1644
dist/icons.html vendored
View File

File diff suppressed because it is too large Load Diff

286
dist/index.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link active"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,37 +178,21 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Dashboard
</h1>
</div>
<div class="row row-cards row-deck">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
6%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">43</div>
<div class="text-muted mb-4">New Tickets</div>
@@ -335,9 +204,7 @@
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-3%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">17</div>
<div class="text-muted mb-4">Closed Today</div>
@@ -349,9 +216,7 @@
<div class="card-body p-3 text-center">
<div class="text-right text-green">
9%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">7</div>
<div class="text-muted mb-4">New Replies</div>
@@ -363,9 +228,7 @@
<div class="card-body p-3 text-center">
<div class="text-right text-green">
3%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">27.3K</div>
<div class="text-muted mb-4">Followers</div>
@@ -377,9 +240,7 @@
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-2%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">$95</div>
<div class="text-muted mb-4">Daily Earnings</div>
@@ -391,9 +252,7 @@
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-1%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">621</div>
<div class="text-muted mb-4">Products</div>
@@ -433,7 +292,6 @@
</a>
</div>
</div>
<script>
require(['c3', 'jquery'], function(c3, $) {
$(document).ready(function(){
@@ -484,10 +342,8 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-sm-4">
<div class="alert alert-info">Are you in trouble? <a href="./docs/index.html" class="alert-link">Read our documentation</a> with code samples.</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Chart name</h3>
@@ -532,8 +388,6 @@ require(['c3', 'jquery'], function(c3, $) {
});
</script>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card p-3">
<div class="d-flex align-items-center">
@@ -587,30 +441,13 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</div>
<div class="row row-cards row-deck">
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
<div>
@@ -624,28 +461,12 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-marcu-114194-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">Well, I didn't vote for you.</a></h4>
<div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/male/16.jpg)"></div>
<div>
@@ -659,11 +480,8 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</div>
</div>
<div class="row row-cards row-deck">
<div class="col-12">
<div class="card">
<table class="table table-responsive-sm table-hover table-outline table-vcenter card-table">
@@ -679,11 +497,6 @@ require(['c3', 'jquery'], function(c3, $) {
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/26.jpg)">
@@ -717,7 +530,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>11 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.91" data-thickness="3" data-color="blue">
<div class="chart-circle-value">91%</div>
</div>
@@ -735,10 +547,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/17.jpg)">
@@ -772,7 +580,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>11 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.63" data-thickness="3" data-color="blue">
<div class="chart-circle-value">63%</div>
</div>
@@ -790,10 +597,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/21.jpg)">
@@ -827,7 +630,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>7 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.19" data-thickness="3" data-color="blue">
<div class="chart-circle-value">19%</div>
</div>
@@ -845,10 +647,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/male/32.jpg)">
@@ -882,7 +680,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>2 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.08" data-thickness="3" data-color="blue">
<div class="chart-circle-value">8%</div>
</div>
@@ -900,10 +697,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/12.jpg)">
@@ -937,7 +730,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>a minute ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.31" data-thickness="3" data-color="blue">
<div class="chart-circle-value">31%</div>
</div>
@@ -955,10 +747,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/4.jpg)">
@@ -992,7 +780,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>4 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.77" data-thickness="3" data-color="blue">
<div class="chart-circle-value">77%</div>
</div>
@@ -1010,10 +797,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/female/27.jpg)">
@@ -1047,7 +830,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>10 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.92" data-thickness="3" data-color="blue">
<div class="chart-circle-value">92%</div>
</div>
@@ -1065,10 +847,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
<tr>
<td class="text-center">
<div class="avatar d-block" style="background-image: url(assets/images/faces/male/20.jpg)">
@@ -1102,7 +880,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div>12 minutes ago</div>
</td>
<td class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.75" data-thickness="3" data-color="blue">
<div class="chart-circle-value">75%</div>
</div>
@@ -1120,13 +897,10 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="card-header">
@@ -1216,11 +990,8 @@ require(['c3', 'jquery'], function(c3, $) {
<div class="card-header">
<h3 class="card-title">Members</h3>
</div>
<div class="card-body o-auto" style="height: 15rem">
<ul class="list-unstyled list-separated">
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1246,7 +1017,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1272,7 +1042,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1298,7 +1067,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1324,7 +1092,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1350,7 +1117,6 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
<li class="list-separated-item">
<div class="row align-items-center">
<div class="col-auto">
@@ -1376,21 +1142,13 @@ require(['c3', 'jquery'], function(c3, $) {
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-12">
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="card-value pull-right text-blue">+5%</div>
@@ -1401,7 +1159,6 @@ require(['c3', 'jquery'], function(c3, $) {
<div id="chart-bg-users-1" style="height: 100%"></div>
</div>
</div>
<script>
require(['c3', 'jquery'], function (c3, $) {
$(document).ready(function() {
@@ -1464,11 +1221,6 @@ require(['c3', 'jquery'], function (c3, $) {
</script>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="card-value pull-right text-red">-3%</div>
@@ -1479,7 +1231,6 @@ require(['c3', 'jquery'], function (c3, $) {
<div id="chart-bg-users-2" style="height: 100%"></div>
</div>
</div>
<script>
require(['c3', 'jquery'], function (c3, $) {
$(document).ready(function() {
@@ -1542,11 +1293,6 @@ require(['c3', 'jquery'], function (c3, $) {
</script>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="card-value pull-right text-green">-3%</div>
@@ -1557,7 +1303,6 @@ require(['c3', 'jquery'], function (c3, $) {
<div id="chart-bg-users-3" style="height: 100%"></div>
</div>
</div>
<script>
require(['c3', 'jquery'], function (c3, $) {
$(document).ready(function() {
@@ -1620,11 +1365,6 @@ require(['c3', 'jquery'], function (c3, $) {
</script>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="card-value pull-right text-yellow">9%</div>
@@ -1635,7 +1375,6 @@ require(['c3', 'jquery'], function (c3, $) {
<div id="chart-bg-users-4" style="height: 100%"></div>
</div>
</div>
<script>
require(['c3', 'jquery'], function (c3, $) {
$(document).ready(function() {
@@ -1699,13 +1438,11 @@ require(['c3', 'jquery'], function (c3, $) {
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap">
<thead>
@@ -1725,9 +1462,7 @@ require(['c3', 'jquery'], function (c3, $) {
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">001401</span></td>
<td><a href="invoice.html" class="text-inherit">Design Works</a></td>
@@ -1744,7 +1479,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-success"></span> Paid
</td>
<td>$887</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1757,7 +1491,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
<tr>
<td><span class="text-muted">001402</span></td>
<td><a href="invoice.html" class="text-inherit">UX Wireframes</a></td>
@@ -1774,7 +1507,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-warning"></span> Pending
</td>
<td>$1200</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1787,7 +1519,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
<tr>
<td><span class="text-muted">001403</span></td>
<td><a href="invoice.html" class="text-inherit">New Dashboard</a></td>
@@ -1804,7 +1535,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-warning"></span> Pending
</td>
<td>$534</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1817,7 +1547,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
<tr>
<td><span class="text-muted">001404</span></td>
<td><a href="invoice.html" class="text-inherit">Landing Page</a></td>
@@ -1834,7 +1563,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-secondary"></span> Due in 2 Weeks
</td>
<td>$1500</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1847,7 +1575,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
<tr>
<td><span class="text-muted">001405</span></td>
<td><a href="invoice.html" class="text-inherit">Marketing Templates</a></td>
@@ -1864,7 +1591,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-danger"></span> Paid Today
</td>
<td>$648</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1877,7 +1603,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
<tr>
<td><span class="text-muted">001406</span></td>
<td><a href="invoice.html" class="text-inherit">Sales Presentation</a></td>
@@ -1894,7 +1619,6 @@ require(['c3', 'jquery'], function (c3, $) {
<span class="status-icon bg-secondary"></span> Due in 3 Weeks
</td>
<td>$300</td>
<td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
<div class="dropdown">
@@ -1907,7 +1631,6 @@ require(['c3', 'jquery'], function (c3, $) {
</a>
</td>
</tr>
</tbody>
</table>
</div>
@@ -1935,7 +1658,6 @@ require(['c3', 'jquery'], function (c3, $) {
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -1973,7 +1695,6 @@ require(['c3', 'jquery'], function (c3, $) {
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -1997,10 +1718,5 @@ require(['c3', 'jquery'], function (c3, $) {
</div>
</footer>
</div>
</body>
</html>

26
dist/login.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Login - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,27 +22,19 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-single">
<div class="container">
@@ -57,12 +43,9 @@
<div class="text-center mb-6">
<img src="./assets/brand/tabler.svg" class="h-6" alt="">
</div>
<form class="card" action="" method="post">
<div class="card-body p-6">
<div class="card-title">Login to your account</div>
<div class="form-group">
<label class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
@@ -80,13 +63,11 @@
<span class="custom-control-label">Remember me</span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Don't have account yet? <a href="./register.html">Sign up</a>
</div>
@@ -95,10 +76,5 @@
</div>
</div>
</div>
</body>
</html>

141
dist/lookup.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Lookup company - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,26 +178,14 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Lookup company
</h1>
</div>
<div class="row">
<div class="col-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias consequuntur cum dicta doloremque, enim eos illo ipsam labore laboriosam laborum perspiciatis quibusdam repudiandae sed sequi sit temporibus veniam, voluptatum.
@@ -328,7 +201,6 @@
<div class="h3 m-0 font-weight-normal">amazon.com</div>
</div>
</div>
<div class="row">
<div class="col">
<h5 class="mb-1">Name</h5>
@@ -373,14 +245,10 @@
<div class="text-muted-dark">America/Los_Angeles</div>
</div>
</div>
<div class="map-static"
style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key=AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4);"></div>
<hr>
<h5 class="mb-4">Recent News</h5>
<ul class="list-unstyled">
<li class="mb-5">
<a href="#">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a>
@@ -519,7 +387,6 @@
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -557,7 +424,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -581,10 +447,5 @@
</div>
</footer>
</div>
</body>
</html>

140
dist/maps.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Maps - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,15 +178,10 @@
</div>
</div>
</div>
<div class="page-content">
<div class="map-header">
<div class="map-header-layer" id="map-background"></div>
</div>
<script>
require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk', 'jquery'], function (maps, $) {
$(document).ready(function(){
@@ -323,9 +203,7 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
});
});
</script>
<div class="container">
<div class="row row-cards">
<div class="col-lg-4 col-md-6">
<div class="card">
@@ -353,7 +231,6 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</div>
</div>
<div class="card-map card-map-placeholder"></div>
<div class="card-body">
<div class="media mb-5">
<img class="d-flex mr-5 rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image">
@@ -365,7 +242,6 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</address>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="h6">Relationship</div>
@@ -384,7 +260,6 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
<p>+123456789</p>
</div>
</div>
<div class="h6">Description</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos doloribus eum fugiat itaque laboriosam maiores nisi nostrum perspiciatis vero.</p>
</div>
@@ -399,7 +274,6 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</div>
</div>
</div>
<script>
require(['jquery', 'vector-map', 'vector-map-de'], function(){
$(document).ready(function(){
@@ -466,7 +340,6 @@ require(['jquery', 'vector-map', 'vector-map-de'], function(){
</div>
</div>
</div>
<script>
require(['jquery', 'vector-map', 'vector-map-world'], function(){
$(document).ready(function(){
@@ -510,7 +383,6 @@ require(['jquery', 'vector-map', 'vector-map-world'], function(){
});
});
</script>
<div class="row">
<div class="col-6">
<div class="card">
@@ -521,7 +393,6 @@ require(['jquery', 'vector-map', 'vector-map-world'], function(){
</div>
</div>
<div class="card-map" id="map-metro"></div>
<div class="card-body">
<ul class="timeline">
<li class="timeline-item">
@@ -565,7 +436,6 @@ require(['jquery', 'vector-map', 'vector-map-world'], function(){
</ul>
</div>
</div>
<script>
require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk', 'jquery'], function (maps, $) {
$(document).ready(function(){
@@ -625,10 +495,8 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -666,7 +534,6 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -690,10 +557,5 @@ require(['https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzP
</div>
</footer>
</div>
</body>
</html>

142
dist/profile.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Profile - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item active">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,11 +178,7 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-lg-4">
@@ -305,13 +186,10 @@
<div class="card-header" style="background-image: url(assets/images/photos/eberhard-grossgasteiger-311213-500.jpg);"></div>
<div class="card-body text-center">
<img class="card-profile-img" src="assets/images/faces/male/16.jpg">
<h3 class="mb-3">Peter Richards</h3>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<button class="btn btn-outline-primary btn-sm">
<span class="fa fa-twitter"></span> Follow
</button>
@@ -324,7 +202,6 @@
<div class="media-body">
<h4 class="m-0">Juan Hernandez</h4>
<p class="text-muted mb-0">Webdeveloper</p>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="javascript:void(0)" title="Facebook" data-toggle="tooltip"><i class="fa fa-facebook"></i></a>
@@ -339,7 +216,6 @@
<a href="javascript:void(0)" title="@skypename" data-toggle="tooltip"><i class="fa fa-skype"></i></a>
</li>
</ul>
</div>
</div>
</div>
@@ -361,22 +237,18 @@
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="form-group">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
@@ -405,13 +277,11 @@
<small class="float-right text-muted">4 min</small>
<h5>Peter Richards</h5>
</div>
<div>
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</div>
<ul class="media-list">
<li class="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url(assets/images/faces/female/17.jpg)"></div>
@@ -456,12 +326,10 @@
<small class="float-right text-muted">34 min</small>
<h5>Peter Richards</h5>
</div>
<div>
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<ul class="media-list">
<li class="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url(assets/images/faces/male/26.jpg)"></div>
@@ -480,7 +348,6 @@
<form class="card">
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="row">
<div class="col-md-5">
<div class="form-group">
@@ -558,7 +425,6 @@ But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -596,7 +462,6 @@ But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -620,10 +485,5 @@ But that's the difference in our opinions.</textarea>
</div>
</footer>
</div>
</body>
</html>

25
dist/register.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Register - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,27 +22,19 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-single">
<div class="container">
@@ -57,11 +43,9 @@
<div class="text-center mb-6">
<img src="./assets/brand/tabler.svg" class="h-6" alt="">
</div>
<form class="card" action="" method="post">
<div class="card-body p-6">
<div class="card-title">Create new account</div>
<div class="form-group">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Enter name">
@@ -80,13 +64,11 @@
<span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Create new account</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Already have account? <a href="./login.html">Sign in</a>
</div>
@@ -95,10 +77,5 @@
</div>
</div>
</div>
</body>
</html>

409
dist/sample-cards.html vendored
View File

File diff suppressed because it is too large Load Diff

180
dist/store.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>Store components - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item active">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,32 +178,18 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Store components
</h1>
</div>
<div class="row row-cards">
<div class="col-lg-3">
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="card">
<div class="card-body">
<div class="mb-4 text-center">
@@ -340,7 +211,6 @@
</div>
</div>
<div class="col-md-6 col-lg-12">
<div class="card">
<div class="card-body">
<div class="mb-4 text-center">
@@ -366,14 +236,10 @@
<div class="col-lg-9">
<div class="card">
<table class="table card-table table-vcenter">
<tr>
<td><img src="assets/images/products/apple-iphone7-special.jpg" alt="" class="h-8"></td>
<td>
Apple iPhone 7 Plus 256GB Red Special Edition
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">44 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">37 offers</td>
@@ -381,16 +247,11 @@
<strong>$499</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/apple-macbook-pro.jpg" alt="" class="h-8"></td>
<td>
Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
<div class="badge badge-default badge-md">New</div>
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">45 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">46 offers</td>
@@ -398,14 +259,10 @@
<strong>$1499</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/apple-iphone7.jpg" alt="" class="h-8"></td>
<td>
Apple iPhone 7 32GB Jet Black
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">30 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">40 offers</td>
@@ -413,16 +270,11 @@
<strong>$499</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/gopro-hero.jpg" alt="" class="h-8"></td>
<td>
GoPro HERO6 Black
<div class="badge badge-default badge-md">New</div>
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">11 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">20 offers</td>
@@ -430,14 +282,10 @@
<strong>$599</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/msi.jpg" alt="" class="h-8"></td>
<td>
MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">8 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">8 offers</td>
@@ -445,16 +293,11 @@
<strong>$1599</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/xiaomi-mi.jpg" alt="" class="h-8"></td>
<td>
Xiaomi Mi A1 64GB Black
<div class="badge badge-default badge-md">New</div>
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">21 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">12 offers</td>
@@ -462,14 +305,10 @@
<strong>$269</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/huawei-mate.jpg" alt="" class="h-8"></td>
<td>
Huawei Mate 10 Pro Dual SIM Gray
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">41 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">31 offers</td>
@@ -477,16 +316,11 @@
<strong>$999</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/sony-kd.jpg" alt="" class="h-8"></td>
<td>
Sony KD-49XE7005
<div class="badge badge-default badge-md">New</div>
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">46 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">45 offers</td>
@@ -494,14 +328,10 @@
<strong>$799</strong>
</td>
</tr>
<tr>
<td><img src="assets/images/products/samsung-galaxy.jpg" alt="" class="h-8"></td>
<td>
Samsung Galaxy A5 A520F 2017 LTE Black Sky
</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">36 reviews</td>
<td class="text-right text-muted d-none d-md-table-cell text-nowrap">44 offers</td>
@@ -509,7 +339,6 @@
<strong>$399</strong>
</td>
</tr>
</table>
</div>
</div>
@@ -517,7 +346,6 @@
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -555,7 +383,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -579,10 +406,5 @@
</div>
</footer>
</div>
</body>
</html>

153
dist/users-list.html vendored
View File

@@ -1,25 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Generated: 2018-02-26 16:23:17 +0100 -->
<title>tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="./assets/js/require.min.js"></script>
@@ -28,32 +22,21 @@
baseUrl: '.'
});
</script>
<!-- Dashboard Core -->
<link href="./assets/css/dashboard.css" rel="stylesheet" />
<script src="./assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/charts-c3/plugin.js"></script>
<!-- Google Maps Plugin -->
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
<script src="./assets/plugins/maps-google/plugin.js"></script>
<!-- Input Mask Plugin -->
<script src="./assets/plugins/input-mask/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
@@ -133,155 +116,57 @@
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="./cards.html" class="nav-item ">Cards design</a>
<a href="./charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="./maps.html" class="nav-item ">Maps</a>
<a href="./icons.html" class="nav-item ">Icons</a>
<a href="./store.html" class="nav-item ">Store</a>
<a href="./blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
<div class="nav-submenu nav">
<a href="./profile.html" class="nav-item ">Profile</a>
<a href="./login.html" class="nav-item ">Login</a>
<a href="./register.html" class="nav-item ">Register</a>
<a href="./forgot-password.html" class="nav-item ">Forgot password</a>
<a href="./400.html" class="nav-item ">400 error</a>
<a href="./104.html" class="nav-item ">401 error</a>
<a href="./403.html" class="nav-item ">403 error</a>
<a href="./404.html" class="nav-item ">404 error</a>
<a href="./500.html" class="nav-item ">500 error</a>
<a href="./503.html" class="nav-item ">503 error</a>
<a href="./empty.html" class="nav-item ">Empty page</a>
</div>
</li>
<li class="nav-item">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
@@ -293,11 +178,7 @@
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
@@ -311,7 +192,6 @@
</select>
</div>
</div>
<div class="row row-cards">
<div class="col-lg-4">
<form class="card">
@@ -335,7 +215,6 @@
<input type="radio" name="value" value="m" class="selectgroup-input">
<span class="selectgroup-button">M</span>
</label>
<label class="selectgroup-item">
<input type="radio" name="value" value="l" class="selectgroup-input">
<span class="selectgroup-button">L</span>
@@ -353,7 +232,6 @@
</select>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Search</button>
</div>
@@ -369,7 +247,6 @@
<th class="d-none d-sm-table-cell">Date</th>
<th class="d-none d-md-table-cell">Amount</th>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -382,7 +259,6 @@
<td class="d-none d-sm-table-cell">February 10, 1994</td>
<td class="d-none d-md-table-cell">$1809.22</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -395,7 +271,6 @@
<td class="d-none d-sm-table-cell">November 14, 1983</td>
<td class="d-none d-md-table-cell">$1841.80</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -408,7 +283,6 @@
<td class="d-none d-sm-table-cell">February 02, 1988</td>
<td class="d-none d-md-table-cell">$1355.49</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -421,7 +295,6 @@
<td class="d-none d-sm-table-cell">November 12, 1982</td>
<td class="d-none d-md-table-cell">$735.05</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -434,7 +307,6 @@
<td class="d-none d-sm-table-cell">December 07, 1983</td>
<td class="d-none d-md-table-cell">$636.07</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -447,7 +319,6 @@
<td class="d-none d-sm-table-cell">December 17, 1994</td>
<td class="d-none d-md-table-cell">$1043.15</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -460,7 +331,6 @@
<td class="d-none d-sm-table-cell">March 01, 1994</td>
<td class="d-none d-md-table-cell">$1708.05</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -473,7 +343,6 @@
<td class="d-none d-sm-table-cell">February 10, 1983</td>
<td class="d-none d-md-table-cell">$1876.76</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -486,7 +355,6 @@
<td class="d-none d-sm-table-cell">February 06, 1993</td>
<td class="d-none d-md-table-cell">$1550.41</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -499,7 +367,6 @@
<td class="d-none d-sm-table-cell">August 26, 1989</td>
<td class="d-none d-md-table-cell">$861.81</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -512,7 +379,6 @@
<td class="d-none d-sm-table-cell">October 16, 1992</td>
<td class="d-none d-md-table-cell">$618.90</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -525,7 +391,6 @@
<td class="d-none d-sm-table-cell">March 19, 1995</td>
<td class="d-none d-md-table-cell">$866.60</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -538,7 +403,6 @@
<td class="d-none d-sm-table-cell">February 01, 1985</td>
<td class="d-none d-md-table-cell">$1555.93</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -551,7 +415,6 @@
<td class="d-none d-sm-table-cell">July 11, 1983</td>
<td class="d-none d-md-table-cell">$1877.27</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -564,7 +427,6 @@
<td class="d-none d-sm-table-cell">May 28, 1995</td>
<td class="d-none d-md-table-cell">$1704.06</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -577,7 +439,6 @@
<td class="d-none d-sm-table-cell">November 03, 1988</td>
<td class="d-none d-md-table-cell">$1037.04</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -590,7 +451,6 @@
<td class="d-none d-sm-table-cell">March 02, 1994</td>
<td class="d-none d-md-table-cell">$635.01</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -603,7 +463,6 @@
<td class="d-none d-sm-table-cell">December 09, 1984</td>
<td class="d-none d-md-table-cell">$738.23</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -616,7 +475,6 @@
<td class="d-none d-sm-table-cell">April 02, 1993</td>
<td class="d-none d-md-table-cell">$1361.99</td>
</tr>
<tr>
<th>
<label class="custom-control custom-checkbox">
@@ -629,10 +487,8 @@
<td class="d-none d-sm-table-cell">June 30, 1991</td>
<td class="d-none d-md-table-cell">$1843.48</td>
</tr>
</table>
</div>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
@@ -651,7 +507,6 @@
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
@@ -689,7 +544,6 @@
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
@@ -713,10 +567,5 @@
</div>
</footer>
</div>
</body>
</html>

3
package.json
View File

@@ -21,7 +21,8 @@
"jekyll-serve": "jekyll serve --livereload",
"gh-pages": "./gh-pages.sh",
"dist": "gulp build && JEKYLL_ENV=production jekyll build --destination dist && ./gh-pages.sh",
"dist": "gulp build && JEKYLL_ENV=production jekyll build --destination dist",
"publish": "dist && ./gh-pages.sh",
"watch": "gulp build && npm-run-all --parallel gulp-watch jekyll-watch",
"serve": "gulp build && npm-run-all --parallel gulp-watch jekyll-serve"
},