version 7.6.0

HTMLElements · Jun 5, 2020 · 446b29c · 446b29c
1 parent f9c082d
commit 446b29c
Show file tree

Hide file tree

Showing 533 changed files with 141,405 additions and 6,253 deletions.
diff --git a/bootstrap/alert/index.htm b/bootstrap/alert/index.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Material Bootstrap Alert | https://www.htmlelements.com</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
+	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
+    <script type="text/javascript" src="../../scripts/common.js"></script>
+	<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
+	<link rel="stylesheet" type="text/css" href="styles.css" />
+
+	<script type="text/javascript" src="../source/smart.element.js"></script>
+	<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
+	<script src="index.js"></script>
+
+</head>
+<body class="smart viewport">
+   	<h2 id="buttons">Material Bootstrap alerts</h2><br />
+	<p>CSS for alert messages</p>
+
+	<div class="alert alert-primary" role="alert">
+  A simple primary alert—check it out!
+</div>
+<div class="alert alert-secondary" role="alert">
+  A simple secondary alert—check it out!
+</div>
+<div class="alert alert-success" role="alert">
+  A simple success alert—check it out!
+</div>
+<div class="alert alert-danger" role="alert">
+  A simple danger alert—check it out!
+</div>
+<div class="alert alert-warning" role="alert">
+  A simple warning alert—check it out!
+</div>
+<div class="alert alert-info" role="alert">
+  A simple info alert—check it out!
+</div>
+<div class="alert alert-light" role="alert">
+  A simple light alert—check it out!
+</div>
+<div class="alert alert-dark" role="alert">
+  A simple dark alert—check it out!
+</div>
+<h2>Colored Anchors</h2>
+<div class="alert alert-primary" role="alert">
+  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light" role="alert">
+  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<h3>More Content</h3>
+<div class="alert alert-dark" role="alert">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+</body>
+</html>
diff --git a/bootstrap/alert/index.js b/bootstrap/alert/index.js
diff --git a/bootstrap/alert/styles.css b/bootstrap/alert/styles.css
@@ -0,0 +1,12 @@
+body {
+	padding: 10px;
+}
+
+.group {
+	display: flex;
+	margin: 10px;
+}
+
+bootstrap-button, bootstrap-check, bootstrap-toggle-button, bootstrap-radio {
+	margin-left: 10px;
+}
diff --git a/bootstrap/badges/index.htm b/bootstrap/badges/index.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Material Bootstrap Badge | https://www.htmlelements.com</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
+	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
+    <script type="text/javascript" src="../../scripts/common.js"></script>
+	<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
+	<link rel="stylesheet" type="text/css" href="styles.css" />
+
+	<script type="text/javascript" src="../source/smart.element.js"></script>
+	<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
+	<script src="index.js"></script>
+
+</head>
+<body class="smart material viewport">
+   	<h2 id="buttons">Material Bootstrap Badges</h2><br />
+	<p>CSS for Badges</p>
+
+	<h2>Badge on Button</h2>
+	<div class="group">	
+		<bootstrap-button>
+			Notifications <span class="badge badge-light">4</span>
+		</bootstrap-button>	
+	</div>
+	<h2>Badge on Span</h2>
+	<div class="group">
+		<span class="badge badge-primary">Primary</span>
+		<span class="badge badge-secondary">Secondary</span>
+		<span class="badge badge-success">Success</span>
+		<span class="badge badge-danger">Danger</span>
+		<span class="badge badge-warning">Warning</span>
+		<span class="badge badge-info">Info</span>
+		<span class="badge badge-light">Light</span>
+		<span class="badge badge-dark">Dark</span>	
+	</div>
+	<h2>Pill Badges</h2>
+	<div class="group">
+		<span class="badge badge-pill badge-primary">Primary</span>
+		<span class="badge badge-pill badge-secondary">Secondary</span>
+		<span class="badge badge-pill badge-success">Success</span>
+		<span class="badge badge-pill badge-danger">Danger</span>
+		<span class="badge badge-pill badge-warning">Warning</span>
+		<span class="badge badge-pill badge-info">Info</span>
+		<span class="badge badge-pill badge-light">Light</span>
+		<span class="badge badge-pill badge-dark">Dark</span>
+	</div>
+	<h2>Link Badges</h2>
+	<div class="group">
+		<a href="#" class="badge badge-primary">Primary</a>
+		<a href="#" class="badge badge-secondary">Secondary</a>
+		<a href="#" class="badge badge-success">Success</a>
+		<a href="#" class="badge badge-danger">Danger</a>
+		<a href="#" class="badge badge-warning">Warning</a>
+		<a href="#" class="badge badge-info">Info</a>
+		<a href="#" class="badge badge-light">Light</a>
+		<a href="#" class="badge badge-dark">Dark</a>
+	</div>	
+</body>
+</html>
diff --git a/bootstrap/badges/index.js b/bootstrap/badges/index.js
diff --git a/bootstrap/badges/styles.css b/bootstrap/badges/styles.css
@@ -0,0 +1,13 @@
+body {
+	padding: 10px;
+}
+
+.group {
+	display: flex;
+	margin: 1rem;
+	padding: 1rem;
+}
+
+span, a {
+	margin-left: 0.5rem;
+}
diff --git a/bootstrap/button/index.htm b/bootstrap/button/index.htm
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Material Bootstrap Button | https://www.htmlelements.com</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
+	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
+    <script type="text/javascript" src="../../scripts/common.js"></script>
+	<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
+	<link rel="stylesheet" type="text/css" href="styles.css" />
+
+	<script type="text/javascript" src="../source/smart.element.js"></script>
+	<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
+	<script src="index.js"></script>
+
+</head>
+<body class="smart viewport">
+   	<h2 id="buttons">Material Bootstrap Buttons</h2><br />
+				<p>Use Material Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple
+					sizes, states, and more.</p>
+				</br>
+				<h3>Buttons</h3>
+
+				<p>Material Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a
+					few extras thrown in for more control.</p>
+				<div class="group">
+				<bootstrap-circular></bootstrap-circular>
+					<bootstrap-button style-mode="primary">Primary</bootstrap-button>
+					<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
+					<bootstrap-button style-mode="success">Success</bootstrap-button>
+					<bootstrap-button style-mode="danger">Danger</bootstrap-button>
+					<bootstrap-button style-mode="warning">Warning</bootstrap-button>
+					<bootstrap-button style-mode="info">Info</bootstrap-button>
+					<bootstrap-button style-mode="light">Light</bootstrap-button>
+					<bootstrap-button style-mode="dark">Dark</bootstrap-button>
+					<bootstrap-button style-mode="link">Link</bootstrap-button>
+				</div>
+
+				<p>
+					<b>StyleMode</b> property allows the user to change the style of the elements.
+				</p>
+
+				<h2>Outlined Buttons</h2><br />
+				<p>
+					In need of a button, but not the hefty background colors they bring? Just add the class
+					<b>outlined</b> to remove all background images and colors on any button.
+				</p>
+				<div class="group">
+					<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
+					<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
+					<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
+					<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
+					<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
+					<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
+					<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
+					<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
+					<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
+				</div>
+
+
+				<p>
+					Setting the <b>outlined</b> property the elements turn into outlined buttons with no filling untill
+					hovered.
+				</p>
+
+				<h2>Buttons Sizes</h2><br />
+				<p>
+					Fancy larger or smaller buttons? Just set the <b>sizeMode</b> property to 'sm' or 'lg' for
+					additional sizes.
+				</p>
+				<div class="group">
+					<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
+					<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
+				</div>
+
+				<div class="group">
+					<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
+					<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
+				</div>
+
+				<p>
+					Buttons can be reset back to normal if <b>SizeMode</b> is set to an empty string.
+				</p>
+
+				<h2>Disabled Buttons</h2><br />
+				<div class="group">
+					<bootstrap-button disabled style-mode="primary">Primary</bootstrap-button>
+					<bootstrap-button disabled style-mode="secondary">Secondary</bootstrap-button>
+				</div>
+
+				<p>
+					To disable/enable an element just set the <b>disabled</b> property.
+				</p>
+
+					<h2>Material Bootstrap Checkbox</h2><br />
+				<p>
+					Checkboxes are buttons that can be toggled. The checked state of these buttons can be updated via
+					click or by setting the <b>checked</b> property to true.
+					Checkboxes like the other toggle buttons can be pre-checked.
+				</p>
+				<div class="group">
+					<bootstrap-check-box type="button" checked>Checked</bootstrap-check-box>
+					<bootstrap-check-box type="button">Unchecked</bootstrap-check-box>
+				</div>
+
+				<p>
+					Appling/Removing the <b>checked</b> attribute will toggle the state of the button.
+				</p>
+
+				<h2>Material Bootstrap Toggle Button</h2>
+				<div class="group">
+					<bootstrap-toggle-button type="button" checked> Checked</bootstrap-toggle-button>
+					<bootstrap-toggle-button type="button">Unchecked</bootstrap-toggle-button>
+				</div>
+
+
+				<p>
+					Add the <b>checked</b> attribute to toggle a button’s active state. If you’re pre-toggling a button,
+					you must manually add the <b>checked</b> attribute to the button.
+				</p>
+
+				<h2>Material Bootstrap Radio Button</h2>
+				<div class="group">
+					<bootstrap-radio-button type="button" checked> Active</bootstrap-radio-button>
+					<bootstrap-radio-button type="button">Radio</bootstrap-radio-button>
+					<bootstrap-radio-button type="button">Radio</bootstrap-radio-button>
+				</div>
+
+
+				<p>
+					Radio buttons are group elements that allow only one of them to be checked. Similar to the other
+					toggle elements to set a button into checked state the property <b>checked</b> has to be applied to
+					the element.
+					All elements that have the same <b>group</b> property are considered to be in the same group.
+					<b>group</b> can be set on initialization.
+				</p>
+
+		<h2>Material Design</h2>
+		<div class="smart material">
+				<div class="group">
+					<bootstrap-button class="abcbutton" style-mode="primary">Primary</bootstrap-button>
+					<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
+					<bootstrap-button style-mode="success">Success</bootstrap-button>
+					<bootstrap-button style-mode="danger">Danger</bootstrap-button>
+					<bootstrap-button style-mode="warning">Warning</bootstrap-button>
+					<bootstrap-button style-mode="info">Info</bootstrap-button>
+					<bootstrap-button style-mode="light">Light</bootstrap-button>
+					<bootstrap-button style-mode="dark">Dark</bootstrap-button>
+					<bootstrap-button style-mode="link">Link</bootstrap-button>
+				</div>
+				<h3>Outlined Material Buttons</h3>
+				<div class="group">
+					<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
+					<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
+					<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
+					<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
+					<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
+					<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
+					<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
+					<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
+					<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
+				</div>				
+				<h3>Outlined Material Checkbox Buttons</h3>
+				<div class="group">
+					<bootstrap-check-box type="button" checked>Checked</bootstrap-check-box>
+					<bootstrap-check-box type="button">Unchecked</bootstrap-check-box>
+				</div>
+				<h3>Outlined Material Radio Buttons</h3>
+				<div class="group">
+					<bootstrap-radio-button type="button" checked> Active</bootstrap-radio-button>
+					<bootstrap-radio-button type="button">Radio</bootstrap-radio-button>
+					<bootstrap-radio-button type="button">Radio</bootstrap-radio-button>
+				</div>
+		</div>
+		<h2>Button Group</h2>
+		<div class="smart material group">	
+			<div class="button-group" role="group" aria-label="Basic example">
+				<bootstrap-button class="item" style-mode="primary">Btn 1</bootstrap-button>
+				<bootstrap-button class="item" style-mode="primary">Btn 2</bootstrap-button>
+				<bootstrap-button class="item" style-mode="primary">Btn 3</bootstrap-button>				
+			</div>
+		</div>
+		<h2>Vertical Button Group</h2>	
+		<div class="smart material group">	
+			<div class="button-group-vertical" role="group" aria-label="Basic example">
+				<bootstrap-button class="item" style-mode="success">Btn 1</bootstrap-button>
+				<bootstrap-button class="item" style-mode="success">Btn 2</bootstrap-button>
+				<bootstrap-button class="item" style-mode="success">Btn 3</bootstrap-button>				
+			</div>
+		</div>
+		<h2>Toggle Button Group</h2>
+		<div class="smart material group">	
+			<div class="button-group" role="group" aria-label="Basic example">
+				<bootstrap-toggle-button class="item" style-mode="info">Toggle 1</bootstrap-toggle-button>
+				<bootstrap-toggle-button class="item" style-mode="info">Toggle 2</bootstrap-toggle-button>
+				<bootstrap-toggle-button class="item" style-mode="info">Toggle 3</bootstrap-toggle-button>				
+			</div>
+		</div>	
+</body>
+</html>
diff --git a/bootstrap/button/index.js b/bootstrap/button/index.js
diff --git a/bootstrap/button/styles.css b/bootstrap/button/styles.css
@@ -0,0 +1,17 @@
+body {
+	padding: 10px;
+}
+
+.group {
+	display: flex;
+	margin: 10px;
+	padding: 1rem;
+}
+
+bootstrap-button, bootstrap-check, bootstrap-toggle-button, bootstrap-radio {
+	margin-left: 10px;
+}
+
+.button-group-vertical bootstrap-button {
+	margin-left: 0px;
+}