Showing preview only (1,318K chars total). Download the full file or copy to clipboard to get everything.
Repository: mdbootstrap/bootstrap-fluent-design
Branch: master
Commit: f915ca91586a
Files: 70
Total size: 1.2 MB
Directory structure:
gitextract_0ycvn1c8/
├── README.md
├── dev/
│ ├── css/
│ │ └── new-prism.css
│ └── js/
│ ├── new-prism.js
│ └── src/
│ └── mdbsnippet.js
├── free/
│ ├── components/
│ │ ├── accordion.html
│ │ ├── alert.html
│ │ ├── badge.html
│ │ ├── breadcrumb.html
│ │ ├── button-group.html
│ │ ├── buttons-2.html
│ │ ├── buttons.html
│ │ ├── card.html
│ │ ├── carousel.html
│ │ ├── close.html
│ │ ├── collapse.html
│ │ ├── dropdown.html
│ │ ├── footer.html
│ │ ├── full-demo.html
│ │ ├── list-group.html
│ │ ├── mega-menu.html
│ │ ├── modal.html
│ │ ├── navbar.html
│ │ ├── navs.html
│ │ ├── pagination.html
│ │ ├── pills.html
│ │ ├── popovers.html
│ │ ├── prism.html
│ │ ├── progress.html
│ │ ├── ripple.html
│ │ ├── scrollspy.html
│ │ ├── spinners.html
│ │ ├── toasts.html
│ │ └── tooltips.html
│ ├── css/
│ │ ├── colors.html
│ │ ├── covers-2.html
│ │ ├── covers.html
│ │ ├── hover-effects.html
│ │ ├── icons.html
│ │ ├── images.html
│ │ ├── shadow.html
│ │ └── typography.html
│ ├── data/
│ │ └── tables.html
│ ├── design-blocks/
│ │ ├── call-to-action.html
│ │ ├── content.html
│ │ ├── counters.html
│ │ ├── customers.html
│ │ ├── download.html
│ │ ├── explore.html
│ │ ├── faq.html
│ │ ├── features.html
│ │ ├── projects.html
│ │ ├── service.html
│ │ ├── teams.html
│ │ └── testimonials.html
│ ├── forms/
│ │ ├── form-check.html
│ │ ├── form-control-2.html
│ │ ├── form-control.html
│ │ ├── form-file.html
│ │ ├── form-input-group.html
│ │ ├── input.html
│ │ ├── layout.html
│ │ ├── overview.html
│ │ ├── range.html
│ │ ├── select.html
│ │ └── validation.html
│ └── template/
│ ├── playground-template.html
│ └── template.html
├── index.html
├── license
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://mdbootstrap.com/freebies/fluent-design/" target="_blank"><img width="80" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb.png" alt="Material-UI logo"></a></p>
</p>
<h2 align="center">Fluent Design for the newest Bootstrap 5</h2>
<p align="center">Components in the newest Bootstrap 5 and Fluent Design. Completely new design using the latest Bootstrap</p>
# Highlights
**Free for personal and commercial use**
Our license is user friendly. Feel free to use Fluent Kit for both private as well as commercial projects.
**Components**
Choose **among 100+ predefined components**. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!.
**Modularity**
Fluent Design for Bootstrap comes with both, compiled, ready to use libraries including all features as well as modules for CSS (SASS files) and JS. That allows you to create your custom library including only elements which you really use in your project.
**10 fresh ready to use templates**
We are going further and giving to you ready to use templates! Use them as you like, as an inspiration, prototype or final product for your customers.
**Cross-browser compatibility**
Chrome, Firefox, IE, Safari, Opera, Microsoft Edge - Fluent Kit loves all browsers, all browsers love Fluent Kit.
**Modularity**
Fluent Design for Bootstrap comes with both, compiled, ready to use libraries including all features as well as modules for CSS (SASS files) and JS. That allows you to create your custom library including only elements which you really use in your project.
**Active community**
Our society grows day by day. Visit **our forum** and check how it is to be a part of our family.
**Flex box**
Fluent Kit fully suppports Flex Box. You can forget about alignment issues.
**jQuery 3.x and 2.x**
Fluent Kit is integrated with newest jQuery. Therefore you can use all the latest features which come along with it.
**SASS files**
Arrenged and well documented .scss files can't wait until you compile them.
**Detailed documentation**
We give you detailed documentation at your disposal. It will help you to implement your ideas easily.
# Live Preview
[Main demo](https://mdbgo.io/marta-szymanska/mdb5-demo-free-fluent/free/components/full-demo.html) - check visual guide of components in the newest Bootstrap 5 and Fluent Design
# Cards
<p>Card is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-cards.png">
</p>
</a>
# Carousel
<p>A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif">
</p>
</a>
# Buttons
<p>Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-buttons.png">
</p>
</a>
# Button Group
<p>Button group wraps a series of buttons together into a single line (navbar) or stack in a vertical column.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-button-group.png">
</p>
</a>
# Progress
<p>Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-progress.png">
</p>
</a>
# Footer
<p>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-footer.png">
</p>
</a>
# Toasts
<p>Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.</p>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-toasts.png">
</p>
</a>
# Acrylic
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-1.png">
</p>
</a>
<a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-2.png">
</p>
</a>
A big **thank you to all our users** who are working with us to improve the software. We wouldn't be where we are without you.
================================================
FILE: dev/css/new-prism.css
================================================
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+json+php+jsx+typescript+scss&plugins=line-numbers+toolbar+previewers+normalize-whitespace+copy-to-clipboard */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
/* stylelint-disable */
code[class*='language-'],
pre[class*='language-'] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
.prism-previewer,
.prism-previewer:before,
.prism-previewer:after {
position: absolute;
pointer-events: none;
}
.prism-previewer,
.prism-previewer:after {
left: 50%;
}
.prism-previewer {
margin-top: -48px;
width: 32px;
height: 32px;
margin-left: -16px;
opacity: 0;
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.prism-previewer.flipped {
margin-top: 0;
margin-bottom: -48px;
}
.prism-previewer:before,
.prism-previewer:after {
content: '';
position: absolute;
pointer-events: none;
}
.prism-previewer:before {
top: -5px;
right: -5px;
left: -5px;
bottom: -5px;
border-radius: 10px;
border: 5px solid #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}
.prism-previewer:after {
top: 100%;
width: 0;
height: 0;
margin: 5px 0 0 -7px;
border: 7px solid transparent;
border-color: rgba(255, 0, 0, 0);
border-top-color: #fff;
}
.prism-previewer.flipped:after {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 5px;
border-top-color: rgba(255, 0, 0, 0);
border-bottom-color: #fff;
}
.prism-previewer.active {
opacity: 1;
}
.prism-previewer-angle:before {
border-radius: 50%;
background: #fff;
}
.prism-previewer-angle:after {
margin-top: 4px;
}
.prism-previewer-angle svg {
width: 32px;
height: 32px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.prism-previewer-angle[data-negative] svg {
-webkit-transform: scaleX(-1) rotate(-90deg);
-moz-transform: scaleX(-1) rotate(-90deg);
-ms-transform: scaleX(-1) rotate(-90deg);
-o-transform: scaleX(-1) rotate(-90deg);
transform: scaleX(-1) rotate(-90deg);
}
.prism-previewer-angle circle {
fill: transparent;
stroke: hsl(200, 10%, 20%);
stroke-opacity: 0.9;
stroke-width: 32;
stroke-dasharray: 0, 500;
}
.prism-previewer-gradient {
background-image: linear-gradient(
45deg,
#bbb 25%,
transparent 25%,
transparent 75%,
#bbb 75%,
#bbb
),
linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
width: 64px;
margin-left: -32px;
}
.prism-previewer-gradient:before {
content: none;
}
.prism-previewer-gradient div {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 10px;
border: 5px solid #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}
.prism-previewer-color {
background-image: linear-gradient(
45deg,
#bbb 25%,
transparent 25%,
transparent 75%,
#bbb 75%,
#bbb
),
linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
}
.prism-previewer-color:before {
background-color: inherit;
background-clip: padding-box;
}
.prism-previewer-easing {
margin-top: -76px;
margin-left: -30px;
width: 60px;
height: 60px;
background: #333;
}
.prism-previewer-easing.flipped {
margin-bottom: -116px;
}
.prism-previewer-easing svg {
width: 60px;
height: 60px;
}
.prism-previewer-easing circle {
fill: hsl(200, 10%, 20%);
stroke: white;
}
.prism-previewer-easing path {
fill: none;
stroke: white;
stroke-linecap: round;
stroke-width: 4;
}
.prism-previewer-easing line {
stroke: white;
stroke-opacity: 0.5;
stroke-width: 2;
}
@-webkit-keyframes prism-previewer-time {
0% {
stroke-dasharray: 0, 500;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 500;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0, 500;
stroke-dashoffset: -100;
}
}
@-o-keyframes prism-previewer-time {
0% {
stroke-dasharray: 0, 500;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 500;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0, 500;
stroke-dashoffset: -100;
}
}
@-moz-keyframes prism-previewer-time {
0% {
stroke-dasharray: 0, 500;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 500;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0, 500;
stroke-dashoffset: -100;
}
}
@keyframes prism-previewer-time {
0% {
stroke-dasharray: 0, 500;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 500;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0, 500;
stroke-dashoffset: -100;
}
}
.prism-previewer-time:before {
border-radius: 50%;
background: #fff;
}
.prism-previewer-time:after {
margin-top: 4px;
}
.prism-previewer-time svg {
width: 32px;
height: 32px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.prism-previewer-time circle {
fill: transparent;
stroke: hsl(200, 10%, 20%);
stroke-opacity: 0.9;
stroke-width: 32;
stroke-dasharray: 0, 500;
stroke-dashoffset: 0;
-webkit-animation: prism-previewer-time linear infinite 3s;
-moz-animation: prism-previewer-time linear infinite 3s;
-o-animation: prism-previewer-time linear infinite 3s;
animation: prism-previewer-time linear infinite 3s;
}
/* custom */
.docs-pills .d-flex.justify-content-between {
border-bottom: 1px solid #e0e0e0 !important;
}
.docs-pills .nav {
border-bottom: 0 !important;
}
.docs-pills .btn.btn-sm[class*='btn-outline-'] {
margin-top: 0.1rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.docs-pills .nav-pills .nav-link {
padding: 10px 20px;
margin: 0 5px;
}
.docs-pills .nav-item .active {
background-color: #616161 !important;
}
.docs-pills .tab-content {
padding: 0;
}
.docs-pills .btn-copy-code,
.docs-tab-content .export-to-snippet {
position: absolute;
top: 9px;
right: 8px;
background-color: #616161 !important;
padding: 6px 15px !important;
}
.docs-pills {
position: relative !important;
}
.docs-pills pre[class*='language-'] {
margin-top: 0;
}
pre.line-numbers {
position: relative;
padding-left: 3.8em !important; /* It's important to overwrite px-3 class which breaks showing numbers */
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
.code-toolbar {
margin: 0;
}
code[class*='language-'],
pre[class*='language-'] {
max-height: 450px;
}
/* stylelint-enable */
================================================
FILE: dev/js/new-prism.js
================================================
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+json+php+typescript+scss&plugins=line-numbers+toolbar+previewers+normalize-whitespace+copy-to-clipboard */
var _self =
typeof window !== 'undefined'
? window // if in browser
: typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope
? self // if in worker
: {}; // if in node js
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
var Prism = (function () {
// Private helper vars
var lang = /\blang(?:uage)?-([\w-]+)\b/i;
var uniqueId = 0;
var _ = (_self.Prism = {
manual: _self.Prism && _self.Prism.manual,
disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
util: {
encode: function (tokens) {
if (tokens instanceof Token) {
return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
} else if (_.util.type(tokens) === 'Array') {
return tokens.map(_.util.encode);
} else {
return tokens
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/\u00a0/g, ' ');
}
},
type: function (o) {
return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
},
objId: function (obj) {
if (!obj['__id']) {
Object.defineProperty(obj, '__id', { value: ++uniqueId });
}
return obj['__id'];
},
// Deep clone a language definition (e.g. to extend it)
clone: function (o, visited) {
var type = _.util.type(o);
visited = visited || {};
switch (type) {
case 'Object':
if (visited[_.util.objId(o)]) {
return visited[_.util.objId(o)];
}
var clone = {};
visited[_.util.objId(o)] = clone;
for (var key in o) {
if (o.hasOwnProperty(key)) {
clone[key] = _.util.clone(o[key], visited);
}
}
return clone;
case 'Array':
if (visited[_.util.objId(o)]) {
return visited[_.util.objId(o)];
}
var clone = [];
visited[_.util.objId(o)] = clone;
o.forEach(function (v, i) {
clone[i] = _.util.clone(v, visited);
});
return clone;
}
return o;
},
},
languages: {
extend: function (id, redef) {
var lang = _.util.clone(_.languages[id]);
for (var key in redef) {
lang[key] = redef[key];
}
return lang;
},
/**
* Insert a token before another token in a language literal
* As this needs to recreate the object (we cannot actually insert before keys in object literals),
* we cannot just provide an object, we need anobject and a key.
* @param inside The key (or language id) of the parent
* @param before The key to insert before. If not provided, the function appends instead.
* @param insert Object with the key/value pairs to insert
* @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted.
*/
insertBefore: function (inside, before, insert, root) {
root = root || _.languages;
var grammar = root[inside];
if (arguments.length == 2) {
insert = arguments[1];
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
grammar[newToken] = insert[newToken];
}
}
return grammar;
}
var ret = {};
for (var token in grammar) {
if (grammar.hasOwnProperty(token)) {
if (token == before) {
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
ret[newToken] = insert[newToken];
}
}
}
ret[token] = grammar[token];
}
}
// Update references in other language definitions
_.languages.DFS(_.languages, function (key, value) {
if (value === root[inside] && key != inside) {
this[key] = ret;
}
});
return (root[inside] = ret);
},
// Traverse a language definition with Depth First Search
DFS: function (o, callback, type, visited) {
visited = visited || {};
for (var i in o) {
if (o.hasOwnProperty(i)) {
callback.call(o, i, o[i], type || i);
if (_.util.type(o[i]) === 'Object' && !visited[_.util.objId(o[i])]) {
visited[_.util.objId(o[i])] = true;
_.languages.DFS(o[i], callback, null, visited);
} else if (_.util.type(o[i]) === 'Array' && !visited[_.util.objId(o[i])]) {
visited[_.util.objId(o[i])] = true;
_.languages.DFS(o[i], callback, i, visited);
}
}
}
},
},
plugins: {},
highlightAll: function (async, callback) {
_.highlightAllUnder(document, async, callback);
},
highlightAllUnder: function (container, async, callback) {
var env = {
callback: callback,
selector:
'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
};
_.hooks.run('before-highlightall', env);
var elements = env.elements || container.querySelectorAll(env.selector);
for (var i = 0, element; (element = elements[i++]); ) {
_.highlightElement(element, async === true, env.callback);
}
},
highlightElement: function (element, async, callback) {
// Find language
var language,
grammar,
parent = element;
while (parent && !lang.test(parent.className)) {
parent = parent.parentNode;
}
if (parent) {
language = (parent.className.match(lang) || [, ''])[1].toLowerCase();
grammar = _.languages[language];
}
// Set language on the element, if not present
element.className =
element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
if (element.parentNode) {
// Set language on the parent, for styling
parent = element.parentNode;
if (/pre/i.test(parent.nodeName)) {
parent.className =
parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
}
}
var code = element.textContent;
var env = {
element: element,
language: language,
grammar: grammar,
code: code,
};
_.hooks.run('before-sanity-check', env);
if (!env.code || !env.grammar) {
if (env.code) {
_.hooks.run('before-highlight', env);
env.element.textContent = env.code;
_.hooks.run('after-highlight', env);
}
_.hooks.run('complete', env);
return;
}
_.hooks.run('before-highlight', env);
if (async && _self.Worker) {
var worker = new Worker(_.filename);
worker.onmessage = function (evt) {
env.highlightedCode = evt.data;
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
callback && callback.call(env.element);
_.hooks.run('after-highlight', env);
_.hooks.run('complete', env);
};
worker.postMessage(
JSON.stringify({
language: env.language,
code: env.code,
immediateClose: true,
})
);
} else {
env.highlightedCode = _.highlight(env.code, env.grammar, env.language);
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
callback && callback.call(element);
_.hooks.run('after-highlight', env);
_.hooks.run('complete', env);
}
},
highlight: function (text, grammar, language) {
var env = {
code: text,
grammar: grammar,
language: language,
};
_.hooks.run('before-tokenize', env);
env.tokens = _.tokenize(env.code, env.grammar);
_.hooks.run('after-tokenize', env);
return Token.stringify(_.util.encode(env.tokens), env.language);
},
matchGrammar: function (text, strarr, grammar, index, startPos, oneshot, target) {
var Token = _.Token;
for (var token in grammar) {
if (!grammar.hasOwnProperty(token) || !grammar[token]) {
continue;
}
if (token == target) {
return;
}
var patterns = grammar[token];
patterns = _.util.type(patterns) === 'Array' ? patterns : [patterns];
for (var j = 0; j < patterns.length; ++j) {
var pattern = patterns[j],
inside = pattern.inside,
lookbehind = !!pattern.lookbehind,
greedy = !!pattern.greedy,
lookbehindLength = 0,
alias = pattern.alias;
if (greedy && !pattern.pattern.global) {
// Without the global flag, lastIndex won't work
var flags = pattern.pattern.toString().match(/[imuy]*$/)[0];
pattern.pattern = RegExp(pattern.pattern.source, flags + 'g');
}
pattern = pattern.pattern || pattern;
// Don’t cache length as it changes during the loop
for (var i = index, pos = startPos; i < strarr.length; pos += strarr[i].length, ++i) {
var str = strarr[i];
if (strarr.length > text.length) {
// Something went terribly wrong, ABORT, ABORT!
return;
}
if (str instanceof Token) {
continue;
}
if (greedy && i != strarr.length - 1) {
pattern.lastIndex = pos;
var match = pattern.exec(text);
if (!match) {
break;
}
var from = match.index + (lookbehind ? match[1].length : 0),
to = match.index + match[0].length,
k = i,
p = pos;
for (
var len = strarr.length;
k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy));
++k
) {
p += strarr[k].length;
// Move the index i to the element in strarr that is closest to from
if (from >= p) {
++i;
pos = p;
}
}
// If strarr[i] is a Token, then the match starts inside another Token, which is invalid
if (strarr[i] instanceof Token) {
continue;
}
// Number of tokens to delete and replace with the new match
delNum = k - i;
str = text.slice(pos, p);
match.index -= pos;
} else {
pattern.lastIndex = 0;
var match = pattern.exec(str),
delNum = 1;
}
if (!match) {
if (oneshot) {
break;
}
continue;
}
if (lookbehind) {
lookbehindLength = match[1] ? match[1].length : 0;
}
var from = match.index + lookbehindLength,
match = match[0].slice(lookbehindLength),
to = from + match.length,
before = str.slice(0, from),
after = str.slice(to);
var args = [i, delNum];
if (before) {
++i;
pos += before.length;
args.push(before);
}
var wrapped = new Token(
token,
inside ? _.tokenize(match, inside) : match,
alias,
match,
greedy
);
args.push(wrapped);
if (after) {
args.push(after);
}
Array.prototype.splice.apply(strarr, args);
if (delNum != 1) _.matchGrammar(text, strarr, grammar, i, pos, true, token);
if (oneshot) break;
}
}
}
},
tokenize: function (text, grammar, language) {
var strarr = [text];
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
_.matchGrammar(text, strarr, grammar, 0, 0, false);
return strarr;
},
hooks: {
all: {},
add: function (name, callback) {
var hooks = _.hooks.all;
hooks[name] = hooks[name] || [];
hooks[name].push(callback);
},
run: function (name, env) {
var callbacks = _.hooks.all[name];
if (!callbacks || !callbacks.length) {
return;
}
for (var i = 0, callback; (callback = callbacks[i++]); ) {
callback(env);
}
},
},
});
var Token = (_.Token = function (type, content, alias, matchedStr, greedy) {
this.type = type;
this.content = content;
this.alias = alias;
// Copy of the full string this token was created from
this.length = (matchedStr || '').length | 0;
this.greedy = !!greedy;
});
Token.stringify = function (o, language, parent) {
if (typeof o == 'string') {
return o;
}
if (_.util.type(o) === 'Array') {
return o
.map(function (element) {
return Token.stringify(element, language, o);
})
.join('');
}
var env = {
type: o.type,
content: Token.stringify(o.content, language, parent),
tag: 'span',
classes: ['token', o.type],
attributes: {},
language: language,
parent: parent,
};
if (o.alias) {
var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
Array.prototype.push.apply(env.classes, aliases);
}
_.hooks.run('wrap', env);
var attributes = Object.keys(env.attributes)
.map(function (name) {
return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
})
.join(' ');
return (
'<' +
env.tag +
' class="' +
env.classes.join(' ') +
'"' +
(attributes ? ' ' + attributes : '') +
'>' +
env.content +
'</' +
env.tag +
'>'
);
};
if (!_self.document) {
if (!_self.addEventListener) {
// in Node.js
return _self.Prism;
}
if (!_.disableWorkerMessageHandler) {
// In worker
_self.addEventListener(
'message',
function (evt) {
var message = JSON.parse(evt.data),
lang = message.language,
code = message.code,
immediateClose = message.immediateClose;
_self.postMessage(_.highlight(code, _.languages[lang], lang));
if (immediateClose) {
_self.close();
}
},
false
);
}
return _self.Prism;
}
//Get current script and highlight
var script =
document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
if (script) {
_.filename = script.src;
if (!_.manual && !script.hasAttribute('data-manual')) {
if (document.readyState !== 'loading') {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(_.highlightAll);
} else {
window.setTimeout(_.highlightAll, 16);
}
} else {
document.addEventListener('DOMContentLoaded', _.highlightAll);
}
}
}
return _self.Prism;
})();
if (typeof module !== 'undefined' && module.exports) {
module.exports = Prism;
}
// hack for components to work correctly in node.js
if (typeof global !== 'undefined') {
global.Prism = Prism;
}
Prism.languages.markup = {
comment: /<!--[\s\S]*?-->/,
prolog: /<\?[\s\S]+?\?>/,
doctype: /<!DOCTYPE[\s\S]+?>/i,
cdata: /<!\[CDATA\[[\s\S]*?]]>/i,
tag: {
pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
greedy: true,
inside: {
tag: {
pattern: /^<\/?[^\s>\/]+/i,
inside: {
punctuation: /^<\/?/,
namespace: /^[^\s>\/:]+:/,
},
},
'attr-value': {
pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
inside: {
punctuation: [
/^=/,
{
pattern: /(^|[^\\])["']/,
lookbehind: true,
},
],
},
},
punctuation: /\/?>/,
'attr-name': {
pattern: /[^\s>\/]+/,
inside: {
namespace: /^[^\s>\/:]+:/,
},
},
},
},
entity: /&#?[\da-z]{1,8};/i,
};
Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
Prism.languages.markup['entity'];
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function (env) {
if (env.type === 'entity') {
env.attributes['title'] = env.content.replace(/&/, '&');
}
});
Prism.languages.xml = Prism.languages.markup;
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Prism.languages.svg = Prism.languages.markup;
Prism.languages.css = {
comment: /\/\*[\s\S]*?\*\//,
atrule: {
pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
inside: {
rule: /@[\w-]+/,
// See rest below
},
},
url: /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
selector: /[^{}\s][^{};]*?(?=\s*\{)/,
string: {
pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true,
},
property: /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
important: /\B!important\b/i,
function: /[-a-z0-9]+(?=\()/i,
punctuation: /[(){};:]/,
};
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
style: {
pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
lookbehind: true,
inside: Prism.languages.css,
alias: 'language-css',
greedy: true,
},
});
Prism.languages.insertBefore(
'inside',
'attr-value',
{
'style-attr': {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
inside: {
'attr-name': {
pattern: /^\s*style/i,
inside: Prism.languages.markup.tag.inside,
},
punctuation: /^\s*=\s*['"]|['"]\s*$/,
'attr-value': {
pattern: /.+/i,
inside: Prism.languages.css,
},
},
alias: 'language-css',
},
},
Prism.languages.markup.tag
);
}
Prism.languages.clike = {
comment: [
{
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: true,
},
{
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true,
greedy: true,
},
],
string: {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true,
},
'class-name': {
pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,
lookbehind: true,
inside: {
punctuation: /[.\\]/,
},
},
keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
boolean: /\b(?:true|false)\b/,
function: /[a-z0-9_]+(?=\()/i,
number: /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
punctuation: /[{}[\];(),.:]/,
};
Prism.languages.javascript = Prism.languages.extend('clike', {
keyword: /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
number: /\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
function: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,
operator: /-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/,
});
Prism.languages.insertBefore('javascript', 'keyword', {
regex: {
pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,
lookbehind: true,
greedy: true,
},
// This must be declared before keyword because we use "function" inside the look-forward
'function-variable': {
pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,
alias: 'function',
},
constant: /\b[A-Z][A-Z\d_]*\b/,
});
Prism.languages.insertBefore('javascript', 'string', {
'template-string': {
pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
greedy: true,
inside: {
interpolation: {
pattern: /\${[^}]+}/,
inside: {
'interpolation-punctuation': {
pattern: /^\${|}$/,
alias: 'punctuation',
},
rest: null, // See below
},
},
string: /[\s\S]+/,
},
},
});
Prism.languages.javascript['template-string'].inside['interpolation'].inside.rest =
Prism.languages.javascript;
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
script: {
pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
lookbehind: true,
inside: Prism.languages.javascript,
alias: 'language-javascript',
greedy: true,
},
});
}
Prism.languages.js = Prism.languages.javascript;
Prism.languages['markup-templating'] = {};
Object.defineProperties(Prism.languages['markup-templating'], {
buildPlaceholders: {
// Tokenize all inline templating expressions matching placeholderPattern
// If the replaceFilter function is provided, it will be called with every match.
// If it returns false, the match will not be replaced.
value: function (env, language, placeholderPattern, replaceFilter) {
if (env.language !== language) {
return;
}
env.tokenStack = [];
env.code = env.code.replace(placeholderPattern, function (match) {
if (typeof replaceFilter === 'function' && !replaceFilter(match)) {
return match;
}
var i = env.tokenStack.length;
// Check for existing strings
while (env.code.indexOf('___' + language.toUpperCase() + i + '___') !== -1) ++i;
// Create a sparse array
env.tokenStack[i] = match;
return '___' + language.toUpperCase() + i + '___';
});
// Switch the grammar to markup
env.grammar = Prism.languages.markup;
},
},
tokenizePlaceholders: {
// Replace placeholders with proper tokens after tokenizing
value: function (env, language) {
if (env.language !== language || !env.tokenStack) {
return;
}
// Switch the grammar back
env.grammar = Prism.languages[language];
var j = 0;
var keys = Object.keys(env.tokenStack);
var walkTokens = function (tokens) {
if (j >= keys.length) {
return;
}
for (var i = 0; i < tokens.length; i++) {
var token = tokens[i];
if (typeof token === 'string' || (token.content && typeof token.content === 'string')) {
var k = keys[j];
var t = env.tokenStack[k];
var s = typeof token === 'string' ? token : token.content;
var index = s.indexOf('___' + language.toUpperCase() + k + '___');
if (index > -1) {
++j;
var before = s.substring(0, index);
var middle = new Prism.Token(
language,
Prism.tokenize(t, env.grammar, language),
'language-' + language,
t
);
var after = s.substring(index + ('___' + language.toUpperCase() + k + '___').length);
var replacement;
if (before || after) {
replacement = [before, middle, after].filter(function (v) {
return !!v;
});
walkTokens(replacement);
} else {
replacement = middle;
}
if (typeof token === 'string') {
Array.prototype.splice.apply(tokens, [i, 1].concat(replacement));
} else {
token.content = replacement;
}
if (j >= keys.length) {
break;
}
}
} else if (token.content && typeof token.content !== 'string') {
walkTokens(token.content);
}
}
};
walkTokens(env.tokens);
},
},
});
Prism.languages.json = {
property: /"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
string: {
pattern: /"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
greedy: true,
},
number: /\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
punctuation: /[{}[\]);,]/,
operator: /:/g,
boolean: /\b(?:true|false)\b/i,
null: /\bnull\b/i,
};
Prism.languages.jsonp = Prism.languages.json;
/**
* Original by Aaron Harun: http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/
* Modified by Miles Johnson: http://milesj.me
*
* Supports the following:
* - Extends clike syntax
* - Support for PHP 5.3+ (namespaces, traits, generators, etc)
* - Smarter constant and function matching
*
* Adds the following new token classes:
* constant, delimiter, variable, function, package
*/
(function (Prism) {
Prism.languages.php = Prism.languages.extend('clike', {
keyword: /\b(?:and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/i,
constant: /\b[A-Z0-9_]{2,}\b/,
comment: {
pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,
lookbehind: true,
},
});
Prism.languages.insertBefore('php', 'string', {
'shell-comment': {
pattern: /(^|[^\\])#.*/,
lookbehind: true,
alias: 'comment',
},
});
Prism.languages.insertBefore('php', 'keyword', {
delimiter: {
pattern: /\?>|<\?(?:php|=)?/i,
alias: 'important',
},
variable: /\$+(?:\w+\b|(?={))/i,
package: {
pattern: /(\\|namespace\s+|use\s+)[\w\\]+/,
lookbehind: true,
inside: {
punctuation: /\\/,
},
},
});
// Must be defined after the function pattern
Prism.languages.insertBefore('php', 'operator', {
property: {
pattern: /(->)[\w]+/,
lookbehind: true,
},
});
Prism.languages.insertBefore('php', 'string', {
'nowdoc-string': {
pattern: /<<<'([^']+)'(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;/,
greedy: true,
alias: 'string',
inside: {
delimiter: {
pattern: /^<<<'[^']+'|[a-z_]\w*;$/i,
alias: 'symbol',
inside: {
punctuation: /^<<<'?|[';]$/,
},
},
},
},
'heredoc-string': {
pattern: /<<<(?:"([^"]+)"(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;|([a-z_]\w*)(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\2;)/i,
greedy: true,
alias: 'string',
inside: {
delimiter: {
pattern: /^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,
alias: 'symbol',
inside: {
punctuation: /^<<<"?|[";]$/,
},
},
interpolation: null, // See below
},
},
'single-quoted-string': {
pattern: /'(?:\\[\s\S]|[^\\'])*'/,
greedy: true,
alias: 'string',
},
'double-quoted-string': {
pattern: /"(?:\\[\s\S]|[^\\"])*"/,
greedy: true,
alias: 'string',
inside: {
interpolation: null, // See below
},
},
});
// The different types of PHP strings "replace" the C-like standard string
delete Prism.languages.php['string'];
var string_interpolation = {
pattern: /{\$(?:{(?:{[^{}]+}|[^{}]+)}|[^{}])+}|(^|[^\\{])\$+(?:\w+(?:\[.+?]|->\w+)*)/,
lookbehind: true,
inside: {
rest: Prism.languages.php,
},
};
Prism.languages.php['heredoc-string'].inside['interpolation'] = string_interpolation;
Prism.languages.php['double-quoted-string'].inside['interpolation'] = string_interpolation;
Prism.hooks.add('before-tokenize', function (env) {
if (!/(?:<\?php|<\?)/gi.test(env.code)) {
return;
}
var phpPattern = /(?:<\?php|<\?)[\s\S]*?(?:\?>|$)/gi;
Prism.languages['markup-templating'].buildPlaceholders(env, 'php', phpPattern);
});
Prism.hooks.add('after-tokenize', function (env) {
Prism.languages['markup-templating'].tokenizePlaceholders(env, 'php');
});
})(Prism);
Prism.languages.typescript = Prism.languages.extend('javascript', {
// From JavaScript Prism keyword list and TypeScript language spec: https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#221-reserved-words
keyword: /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield|module|declare|constructor|namespace|abstract|require|type)\b/,
builtin: /\b(?:string|Function|any|number|boolean|Array|symbol|console)\b/,
});
Prism.languages.ts = Prism.languages.typescript;
Prism.languages.scss = Prism.languages.extend('css', {
comment: {
pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,
lookbehind: true,
},
atrule: {
pattern: /@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,
inside: {
rule: /@[\w-]+/,
// See rest below
},
},
// url, compassified
url: /(?:[-a-z]+-)*url(?=\()/i,
// CSS selector regex is not appropriate for Sass
// since there can be lot more things (var, @ directive, nesting..)
// a selector must start at the end of a property or after a brace (end of other rules or nesting)
// it can contain some characters that aren't used for defining rules or end of selector, & (parent selector), or interpolated variable
// the end of a selector is found when there is no rules in it ( {} or {\s}) or if there is a property (because an interpolated var
// can "pass" as a selector- e.g: proper#{$erty})
// this one was hard to do, so please be careful if you edit this one :)
selector: {
// Initial look-ahead is used to prevent matching of blank selectors
pattern: /(?=\S)[^@;{}()]?(?:[^@;{}()]|&|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,
inside: {
parent: {
pattern: /&/,
alias: 'important',
},
placeholder: /%[-\w]+/,
variable: /\$[-\w]+|#\{\$[-\w]+\}/,
},
},
});
Prism.languages.insertBefore('scss', 'atrule', {
keyword: [
/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,
{
pattern: /( +)(?:from|through)(?= )/,
lookbehind: true,
},
],
});
Prism.languages.scss.property = {
pattern: /(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/i,
inside: {
variable: /\$[-\w]+|#\{\$[-\w]+\}/,
},
};
Prism.languages.insertBefore('scss', 'important', {
// var and interpolated vars
variable: /\$[-\w]+|#\{\$[-\w]+\}/,
});
Prism.languages.insertBefore('scss', 'function', {
placeholder: {
pattern: /%[-\w]+/,
alias: 'selector',
},
statement: {
pattern: /\B!(?:default|optional)\b/i,
alias: 'keyword',
},
boolean: /\b(?:true|false)\b/,
null: /\bnull\b/,
operator: {
pattern: /(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,
lookbehind: true,
},
});
Prism.languages.scss['atrule'].inside.rest = Prism.languages.scss;
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
/**
* Plugin name which is used as a class name for <pre> which is activating the plugin
* @type {String}
*/
var PLUGIN_NAME = 'line-numbers';
/**
* Regular expression used for determining line breaks
* @type {RegExp}
*/
var NEW_LINE_EXP = /\n(?!$)/g;
/**
* Resizes line numbers spans according to height of line of code
* @param {Element} element <pre> element
*/
var _resizeElement = function (element) {
var codeStyles = getStyles(element);
var whiteSpace = codeStyles['white-space'];
if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
var codeElement = element.querySelector('code');
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
var codeLines = codeElement.textContent.split(NEW_LINE_EXP);
if (!lineNumberSizer) {
lineNumberSizer = document.createElement('span');
lineNumberSizer.className = 'line-numbers-sizer';
codeElement.appendChild(lineNumberSizer);
}
lineNumberSizer.style.display = 'block';
codeLines.forEach(function (line, lineNumber) {
lineNumberSizer.textContent = line || '\n';
var lineSize = lineNumberSizer.getBoundingClientRect().height;
lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
});
lineNumberSizer.textContent = '';
lineNumberSizer.style.display = 'none';
}
};
/**
* Returns style declarations for the element
* @param {Element} element
*/
var getStyles = function (element) {
if (!element) {
return null;
}
return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle || null;
};
window.addEventListener('resize', function () {
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);
});
Prism.hooks.add('complete', function (env) {
if (!env.code) {
return;
}
// works only for <code> wrapped inside <pre> (not inline)
var pre = env.element.parentNode;
var clsReg = /\s*\bline-numbers\b\s*/;
if (
!pre ||
!/pre/i.test(pre.nodeName) ||
// Abort only if nor the <pre> nor the <code> have the class
(!clsReg.test(pre.className) && !clsReg.test(env.element.className))
) {
return;
}
if (env.element.querySelector('.line-numbers-rows')) {
// Abort if line numbers already exists
return;
}
if (clsReg.test(env.element.className)) {
// Remove the class 'line-numbers' from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class 'line-numbers' to the <pre>
pre.className += ' line-numbers';
}
var match = env.code.match(NEW_LINE_EXP);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;
var lines = new Array(linesNum + 1);
lines = lines.join('<span></span>');
lineNumbersWrapper = document.createElement('span');
lineNumbersWrapper.setAttribute('aria-hidden', 'true');
lineNumbersWrapper.className = 'line-numbers-rows';
lineNumbersWrapper.innerHTML = lines;
if (pre.hasAttribute('data-start')) {
pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
}
env.element.appendChild(lineNumbersWrapper);
_resizeElement(pre);
Prism.hooks.run('line-numbers', env);
});
Prism.hooks.add('line-numbers', function (env) {
env.plugins = env.plugins || {};
env.plugins.lineNumbers = true;
});
/**
* Global exports
*/
Prism.plugins.lineNumbers = {
/**
* Get node for provided line number
* @param {Element} element pre element
* @param {Number} number line number
* @return {Element|undefined}
*/
getLine: function (element, number) {
if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
return;
}
var lineNumberRows = element.querySelector('.line-numbers-rows');
var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);
if (number < lineNumberStart) {
number = lineNumberStart;
}
if (number > lineNumberEnd) {
number = lineNumberEnd;
}
var lineIndex = number - lineNumberStart;
return lineNumberRows.children[lineIndex];
},
};
})();
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
var callbacks = [];
var map = {};
var noop = function () {};
Prism.plugins.toolbar = {};
/**
* Register a button callback with the toolbar.
*
* @param {string} key
* @param {Object|Function} opts
*/
var registerButton = (Prism.plugins.toolbar.registerButton = function (key, opts) {
var callback;
if (typeof opts === 'function') {
callback = opts;
} else {
callback = function (env) {
var element;
if (typeof opts.onClick === 'function') {
element = document.createElement('button');
element.type = 'button';
element.addEventListener('click', function () {
opts.onClick.call(this, env);
});
} else if (typeof opts.url === 'string') {
element = document.createElement('a');
element.href = opts.url;
} else {
element = document.createElement('span');
}
element.textContent = opts.text;
return element;
};
}
callbacks.push((map[key] = callback));
});
/**
* Post-highlight Prism hook callback.
*
* @param env
*/
var hook = (Prism.plugins.toolbar.hook = function (env) {
// Check if inline or actual code block (credit to line-numbers plugin)
var pre = env.element.parentNode;
if (!pre || !/pre/i.test(pre.nodeName)) {
return;
}
// Autoloader rehighlights, so only do this once.
if (pre.parentNode.classList.contains('code-toolbar')) {
return;
}
// Create wrapper for <pre> to prevent scrolling toolbar with content
var wrapper = document.createElement('div');
wrapper.classList.add('code-toolbar');
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
// Setup the toolbar
var toolbar = document.createElement('div');
toolbar.classList.add('toolbar');
if (document.body.hasAttribute('data-toolbar-order')) {
callbacks = document.body
.getAttribute('data-toolbar-order')
.split(',')
.map(function (key) {
return map[key] || noop;
});
}
callbacks.forEach(function (callback) {
var element = callback(env);
if (!element) {
return;
}
var item = document.createElement('div');
item.classList.add('toolbar-item');
item.appendChild(element);
toolbar.appendChild(item);
});
// Add our toolbar to the currently created wrapper of <pre> tag
wrapper.appendChild(toolbar);
});
registerButton('label', function (env) {
var pre = env.element.parentNode;
if (!pre || !/pre/i.test(pre.nodeName)) {
return;
}
if (!pre.hasAttribute('data-label')) {
return;
}
var element, template;
var text = pre.getAttribute('data-label');
try {
// Any normal text will blow up this selector.
template = document.querySelector('template#' + text);
} catch (e) {}
if (template) {
element = template.content;
} else {
if (pre.hasAttribute('data-url')) {
element = document.createElement('a');
element.href = pre.getAttribute('data-url');
} else {
element = document.createElement('span');
}
element.textContent = text;
}
return element;
});
/**
* Register the toolbar with Prism.
*/
Prism.hooks.add('complete', hook);
})();
(function () {
if ((typeof self !== 'undefined' && !self.Prism) || !self.document || !Function.prototype.bind) {
return;
}
var previewers = {
// gradient must be defined before color and angle
gradient: {
create: (function () {
// Stores already processed gradients so that we don't
// make the conversion every time the previewer is shown
var cache = {};
/**
* Returns a W3C-valid linear gradient
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
* @param {string} func Gradient function name ("linear-gradient")
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
*/
var convertToW3CLinearGradient = function (prefix, func, values) {
// Default value for angle
var angle = '180deg';
if (/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(values[0])) {
angle = values.shift();
if (angle.indexOf('to ') < 0) {
// Angle uses old keywords
// W3C syntax uses "to" + opposite keywords
if (angle.indexOf('top') >= 0) {
if (angle.indexOf('left') >= 0) {
angle = 'to bottom right';
} else if (angle.indexOf('right') >= 0) {
angle = 'to bottom left';
} else {
angle = 'to bottom';
}
} else if (angle.indexOf('bottom') >= 0) {
if (angle.indexOf('left') >= 0) {
angle = 'to top right';
} else if (angle.indexOf('right') >= 0) {
angle = 'to top left';
} else {
angle = 'to top';
}
} else if (angle.indexOf('left') >= 0) {
angle = 'to right';
} else if (angle.indexOf('right') >= 0) {
angle = 'to left';
} else if (prefix) {
// Angle is shifted by 90deg in prefixed gradients
if (angle.indexOf('deg') >= 0) {
angle = 90 - parseFloat(angle) + 'deg';
} else if (angle.indexOf('rad') >= 0) {
angle = Math.PI / 2 - parseFloat(angle) + 'rad';
}
}
}
}
return func + '(' + angle + ',' + values.join(',') + ')';
};
/**
* Returns a W3C-valid radial gradient
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
* @param {string} func Gradient function name ("linear-gradient")
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
*/
var convertToW3CRadialGradient = function (prefix, func, values) {
if (values[0].indexOf('at') < 0) {
// Looks like old syntax
// Default values
var position = 'center';
var shape = 'ellipse';
var size = 'farthest-corner';
if (/\bcenter|top|right|bottom|left\b|^\d+/.test(values[0])) {
// Found a position
// Remove angle value, if any
position = values.shift().replace(/\s*-?\d+(?:rad|deg)\s*/, '');
}
if (/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(values[0])) {
// Found a shape and/or size
var shapeSizeParts = values.shift().split(/\s+/);
if (
shapeSizeParts[0] &&
(shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')
) {
shape = shapeSizeParts.shift();
}
if (shapeSizeParts[0]) {
size = shapeSizeParts.shift();
}
// Old keywords are converted to their synonyms
if (size === 'cover') {
size = 'farthest-corner';
} else if (size === 'contain') {
size = 'clothest-side';
}
}
return (
func + '(' + shape + ' ' + size + ' at ' + position + ',' + values.join(',') + ')'
);
}
return func + '(' + values.join(',') + ')';
};
/**
* Converts a gradient to a W3C-valid one
* Does not support old webkit syntax (-webkit-gradient(linear...) and -webkit-gradient(radial...))
* @param {string} gradient The CSS gradient
*/
var convertToW3CGradient = function (gradient) {
if (cache[gradient]) {
return cache[gradient];
}
var parts = gradient.match(
/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/
);
// "", "-moz-", etc.
var prefix = parts && parts[1];
// "linear-gradient", "radial-gradient", etc.
var func = parts && parts[2];
var values = gradient
.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g, '')
.split(/\s*,\s*/);
if (func.indexOf('linear') >= 0) {
return (cache[gradient] = convertToW3CLinearGradient(prefix, func, values));
} else if (func.indexOf('radial') >= 0) {
return (cache[gradient] = convertToW3CRadialGradient(prefix, func, values));
}
return (cache[gradient] = func + '(' + values.join(',') + ')');
};
return function () {
new Prism.plugins.Previewer(
'gradient',
function (value) {
this.firstChild.style.backgroundImage = '';
this.firstChild.style.backgroundImage = convertToW3CGradient(value);
return !!this.firstChild.style.backgroundImage;
},
'*',
function () {
this._elt.innerHTML = '<div></div>';
}
);
};
})(),
tokens: {
gradient: {
pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,
inside: {
function: /[\w-]+(?=\()/,
punctuation: /[(),]/,
},
},
},
languages: {
css: true,
less: true,
sass: [
{
lang: 'sass',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['variable-line'],
},
{
lang: 'sass',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-line'],
},
],
scss: true,
stylus: [
{
lang: 'stylus',
before: 'func',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,
},
{
lang: 'stylus',
before: 'func',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,
},
],
},
},
angle: {
create: function () {
new Prism.plugins.Previewer(
'angle',
function (value) {
var num = parseFloat(value);
var unit = value.match(/[a-z]+$/i);
var max, percentage;
if (!num || !unit) {
return false;
}
unit = unit[0];
switch (unit) {
case 'deg':
max = 360;
break;
case 'grad':
max = 400;
break;
case 'rad':
max = 2 * Math.PI;
break;
case 'turn':
max = 1;
}
percentage = (100 * num) / max;
percentage %= 100;
this[(num < 0 ? 'set' : 'remove') + 'Attribute']('data-negative', '');
this.querySelector('circle').style.strokeDasharray = Math.abs(percentage) + ',500';
return true;
},
'*',
function () {
this._elt.innerHTML =
'<svg viewBox="0 0 64 64">' + '<circle r="16" cy="32" cx="32"></circle>' + '</svg>';
}
);
},
tokens: {
angle: /(?:\b|\B-|(?=\B\.))\d*\.?\d+(?:deg|g?rad|turn)\b/i,
},
languages: {
css: true,
less: true,
markup: {
lang: 'markup',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],
},
sass: [
{
lang: 'sass',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-line'],
},
{
lang: 'sass',
before: 'operator',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['variable-line'],
},
],
scss: true,
stylus: [
{
lang: 'stylus',
before: 'func',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,
},
{
lang: 'stylus',
before: 'func',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,
},
],
},
},
color: {
create: function () {
new Prism.plugins.Previewer('color', function (value) {
this.style.backgroundColor = '';
this.style.backgroundColor = value;
return !!this.style.backgroundColor;
});
},
tokens: {
color: {
pattern: /\B#(?:[0-9a-f]{3}){1,2}\b|\b(?:rgb|hsl)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:rgb|hsl)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B|\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGray|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGray|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGray|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gray|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGray|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGray|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGray|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,
inside: {
function: /[\w-]+(?=\()/,
punctuation: /[(),]/,
},
},
},
languages: {
css: true,
less: true,
markup: {
lang: 'markup',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],
},
sass: [
{
lang: 'sass',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['variable-line'],
},
{
lang: 'sass',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-line'],
},
],
scss: true,
stylus: [
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,
},
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,
},
],
},
},
easing: {
create: function () {
new Prism.plugins.Previewer(
'easing',
function (value) {
value =
{
linear: '0,0,1,1',
ease: '.25,.1,.25,1',
'ease-in': '.42,0,1,1',
'ease-out': '0,0,.58,1',
'ease-in-out': '.42,0,.58,1',
}[value] || value;
var p = value.match(/-?\d*\.?\d+/g);
if (p.length === 4) {
p = p.map(function (p, i) {
return (i % 2 ? 1 - p : p) * 100;
});
this.querySelector('path').setAttribute(
'd',
'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0'
);
var lines = this.querySelectorAll('line');
lines[0].setAttribute('x2', p[0]);
lines[0].setAttribute('y2', p[1]);
lines[1].setAttribute('x2', p[2]);
lines[1].setAttribute('y2', p[3]);
return true;
}
return false;
},
'*',
function () {
this._elt.innerHTML =
'<svg viewBox="-20 -20 140 140" width="100" height="100">' +
'<defs>' +
'<marker id="prism-previewer-easing-marker" viewBox="0 0 4 4" refX="2" refY="2" markerUnits="strokeWidth">' +
'<circle cx="2" cy="2" r="1.5" />' +
'</marker>' +
'</defs>' +
'<path d="M0,100 C20,50, 40,30, 100,0" />' +
'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(' +
location.href +
'#prism-previewer-easing-marker)" marker-end="url(' +
location.href +
'#prism-previewer-easing-marker)" />' +
'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(' +
location.href +
'#prism-previewer-easing-marker)" marker-end="url(' +
location.href +
'#prism-previewer-easing-marker)" />' +
'</svg>';
}
);
},
tokens: {
easing: {
pattern: /\bcubic-bezier\((?:-?\d*\.?\d+,\s*){3}-?\d*\.?\d+\)\B|\b(?:linear|ease(?:-in)?(?:-out)?)(?=\s|[;}]|$)/i,
inside: {
function: /[\w-]+(?=\()/,
punctuation: /[(),]/,
},
},
},
languages: {
css: true,
less: true,
sass: [
{
lang: 'sass',
inside: 'inside',
before: 'punctuation',
root: Prism.languages.sass && Prism.languages.sass['variable-line'],
},
{
lang: 'sass',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-line'],
},
],
scss: true,
stylus: [
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,
},
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,
},
],
},
},
time: {
create: function () {
new Prism.plugins.Previewer(
'time',
function (value) {
var num = parseFloat(value);
var unit = value.match(/[a-z]+$/i);
if (!num || !unit) {
return false;
}
unit = unit[0];
this.querySelector('circle').style.animationDuration = 2 * num + unit;
return true;
},
'*',
function () {
this._elt.innerHTML =
'<svg viewBox="0 0 64 64">' + '<circle r="16" cy="32" cx="32"></circle>' + '</svg>';
}
);
},
tokens: {
time: /(?:\b|\B-|(?=\B\.))\d*\.?\d+m?s\b/i,
},
languages: {
css: true,
less: true,
markup: {
lang: 'markup',
before: 'punctuation',
inside: 'inside',
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value'],
},
sass: [
{
lang: 'sass',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-line'],
},
{
lang: 'sass',
before: 'operator',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['variable-line'],
},
],
scss: true,
stylus: [
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside,
},
{
lang: 'stylus',
before: 'hexcode',
inside: 'rest',
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside,
},
],
},
},
};
/**
* Returns the absolute X, Y offsets for an element
* @param {HTMLElement} element
* @returns {{top: number, right: number, bottom: number, left: number}}
*/
var getOffset = function (element) {
var left = 0,
top = 0,
el = element;
if (el.parentNode) {
do {
left += el.offsetLeft;
top += el.offsetTop;
} while ((el = el.offsetParent) && el.nodeType < 9);
el = element;
do {
left -= el.scrollLeft;
top -= el.scrollTop;
} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
}
return {
top: top,
right: innerWidth - left - element.offsetWidth,
bottom: innerHeight - top - element.offsetHeight,
left: left,
};
};
var tokenRegexp = /(?:^|\s)token(?=$|\s)/;
var activeRegexp = /(?:^|\s)active(?=$|\s)/g;
var flippedRegexp = /(?:^|\s)flipped(?=$|\s)/g;
/**
* Previewer constructor
* @param {string} type Unique previewer type
* @param {function} updater Function that will be called on mouseover.
* @param {string[]|string=} supportedLanguages Aliases of the languages this previewer must be enabled for. Defaults to "*", all languages.
* @param {function=} initializer Function that will be called on initialization.
* @constructor
*/
var Previewer = function (type, updater, supportedLanguages, initializer) {
this._elt = null;
this._type = type;
this._clsRegexp = RegExp('(?:^|\\s)' + type + '(?=$|\\s)');
this._token = null;
this.updater = updater;
this._mouseout = this.mouseout.bind(this);
this.initializer = initializer;
var self = this;
if (!supportedLanguages) {
supportedLanguages = ['*'];
}
if (Prism.util.type(supportedLanguages) !== 'Array') {
supportedLanguages = [supportedLanguages];
}
supportedLanguages.forEach(function (lang) {
if (typeof lang !== 'string') {
lang = lang.lang;
}
if (!Previewer.byLanguages[lang]) {
Previewer.byLanguages[lang] = [];
}
if (Previewer.byLanguages[lang].indexOf(self) < 0) {
Previewer.byLanguages[lang].push(self);
}
});
Previewer.byType[type] = this;
};
/**
* Creates the HTML element for the previewer.
*/
Previewer.prototype.init = function () {
if (this._elt) {
return;
}
this._elt = document.createElement('div');
this._elt.className = 'prism-previewer prism-previewer-' + this._type;
document.body.appendChild(this._elt);
if (this.initializer) {
this.initializer();
}
};
Previewer.prototype.isDisabled = function (token) {
do {
if (token.hasAttribute && token.hasAttribute('data-previewers')) {
var previewers = token.getAttribute('data-previewers');
return (previewers || '').split(/\s+/).indexOf(this._type) === -1;
}
} while ((token = token.parentNode));
return false;
};
/**
* Checks the class name of each hovered element
* @param token
*/
Previewer.prototype.check = function (token) {
if (tokenRegexp.test(token.className) && this.isDisabled(token)) {
return;
}
do {
if (tokenRegexp.test(token.className) && this._clsRegexp.test(token.className)) {
break;
}
} while ((token = token.parentNode));
if (token && token !== this._token) {
this._token = token;
this.show();
}
};
/**
* Called on mouseout
*/
Previewer.prototype.mouseout = function () {
this._token.removeEventListener('mouseout', this._mouseout, false);
this._token = null;
this.hide();
};
/**
* Shows the previewer positioned properly for the current token.
*/
Previewer.prototype.show = function () {
if (!this._elt) {
this.init();
}
if (!this._token) {
return;
}
if (this.updater.call(this._elt, this._token.textContent)) {
this._token.addEventListener('mouseout', this._mouseout, false);
var offset = getOffset(this._token);
this._elt.className += ' active';
if (offset.top - this._elt.offsetHeight > 0) {
this._elt.className = this._elt.className.replace(flippedRegexp, '');
this._elt.style.top = offset.top + 'px';
this._elt.style.bottom = '';
} else {
this._elt.className += ' flipped';
this._elt.style.bottom = offset.bottom + 'px';
this._elt.style.top = '';
}
this._elt.style.left = offset.left + Math.min(200, this._token.offsetWidth / 2) + 'px';
} else {
this.hide();
}
};
/**
* Hides the previewer.
*/
Previewer.prototype.hide = function () {
this._elt.className = this._elt.className.replace(activeRegexp, '');
};
/**
* Map of all registered previewers by language
* @type {{}}
*/
Previewer.byLanguages = {};
/**
* Map of all registered previewers by type
* @type {{}}
*/
Previewer.byType = {};
/**
* Initializes the mouseover event on the code block.
* @param {HTMLElement} elt The code block (env.element)
* @param {string} lang The language (env.language)
*/
Previewer.initEvents = function (elt, lang) {
var previewers = [];
if (Previewer.byLanguages[lang]) {
previewers = previewers.concat(Previewer.byLanguages[lang]);
}
if (Previewer.byLanguages['*']) {
previewers = previewers.concat(Previewer.byLanguages['*']);
}
elt.addEventListener(
'mouseover',
function (e) {
var target = e.target;
previewers.forEach(function (previewer) {
previewer.check(target);
});
},
false
);
};
Prism.plugins.Previewer = Previewer;
Prism.hooks.add('before-highlight', function (env) {
for (var previewer in previewers) {
var languages = previewers[previewer].languages;
if (env.language && languages[env.language] && !languages[env.language].initialized) {
var lang = languages[env.language];
if (Prism.util.type(lang) !== 'Array') {
lang = [lang];
}
lang.forEach(function (lang) {
var before, inside, root, skip;
if (lang === true) {
before = 'important';
inside = env.language;
lang = env.language;
} else {
before = lang.before || 'important';
inside = lang.inside || lang.lang;
root = lang.root || Prism.languages;
skip = lang.skip;
lang = env.language;
}
if (!skip && Prism.languages[lang]) {
Prism.languages.insertBefore(inside, before, previewers[previewer].tokens, root);
env.grammar = Prism.languages[lang];
languages[env.language] = { initialized: true };
}
});
}
}
});
// Initialize the previewers only when needed
Prism.hooks.add('after-highlight', function (env) {
if (Previewer.byLanguages['*'] || Previewer.byLanguages[env.language]) {
Previewer.initEvents(env.element, env.language);
}
});
for (var previewer in previewers) {
previewers[previewer].create();
}
})();
(function () {
var assign =
Object.assign ||
function (obj1, obj2) {
for (var name in obj2) {
if (obj2.hasOwnProperty(name)) obj1[name] = obj2[name];
}
return obj1;
};
function NormalizeWhitespace(defaults) {
this.defaults = assign({}, defaults);
}
function toCamelCase(value) {
return value.replace(/-(\w)/g, function (match, firstChar) {
return firstChar.toUpperCase();
});
}
function tabLen(str) {
var res = 0;
for (var i = 0; i < str.length; ++i) {
if (str.charCodeAt(i) == '\t'.charCodeAt(0)) res += 3;
}
return str.length + res;
}
NormalizeWhitespace.prototype = {
setDefaults: function (defaults) {
this.defaults = assign(this.defaults, defaults);
},
normalize: function (input, settings) {
settings = assign(this.defaults, settings);
for (var name in settings) {
var methodName = toCamelCase(name);
if (
name !== 'normalize' &&
methodName !== 'setDefaults' &&
settings[name] &&
this[methodName]
) {
input = this[methodName].call(this, input, settings[name]);
}
}
return input;
},
/*
* Normalization methods
*/
leftTrim: function (input) {
return input.replace(/^\s+/, '');
},
rightTrim: function (input) {
return input.replace(/\s+$/, '');
},
tabsToSpaces: function (input, spaces) {
spaces = spaces | 0 || 4;
return input.replace(/\t/g, new Array(++spaces).join(' '));
},
spacesToTabs: function (input, spaces) {
spaces = spaces | 0 || 4;
return input.replace(new RegExp(' {' + spaces + '}', 'g'), '\t');
},
removeTrailing: function (input) {
return input.replace(/\s*?$/gm, '');
},
// Support for deprecated plugin remove-initial-line-feed
removeInitialLineFeed: function (input) {
return input.replace(/^(?:\r?\n|\r)/, '');
},
removeIndent: function (input) {
var indents = input.match(/^[^\S\n\r]*(?=\S)/gm);
if (!indents || !indents[0].length) return input;
indents.sort(function (a, b) {
return a.length - b.length;
});
if (!indents[0].length) return input;
return input.replace(new RegExp('^' + indents[0], 'gm'), '');
},
indent: function (input, tabs) {
return input.replace(/^[^\S\n\r]*(?=\S)/gm, new Array(++tabs).join('\t') + '$&');
},
breakLines: function (input, characters) {
characters = characters === true ? 80 : characters | 0 || 80;
var lines = input.split('\n');
for (var i = 0; i < lines.length; ++i) {
if (tabLen(lines[i]) <= characters) continue;
var line = lines[i].split(/(\s+)/g),
len = 0;
for (var j = 0; j < line.length; ++j) {
var tl = tabLen(line[j]);
len += tl;
if (len > characters) {
line[j] = '\n' + line[j];
len = tl;
}
}
lines[i] = line.join('');
}
return lines.join('\n');
},
};
// Support node modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = NormalizeWhitespace;
}
// Exit if prism is not loaded
if (typeof Prism === 'undefined') {
return;
}
Prism.plugins.NormalizeWhitespace = new NormalizeWhitespace({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
/*'break-lines': 80,
'indent': 2,
'remove-initial-line-feed': false,
'tabs-to-spaces': 4,
'spaces-to-tabs': 4*/
});
Prism.hooks.add('before-sanity-check', function (env) {
var Normalizer = Prism.plugins.NormalizeWhitespace;
// Check settings
if (env.settings && env.settings['whitespace-normalization'] === false) {
return;
}
// Simple mode if there is no env.element
if ((!env.element || !env.element.parentNode) && env.code) {
env.code = Normalizer.normalize(env.code, env.settings);
return;
}
// Normal mode
var pre = env.element.parentNode;
var clsReg = /\bno-whitespace-normalization\b/;
if (
!env.code ||
!pre ||
pre.nodeName.toLowerCase() !== 'pre' ||
clsReg.test(pre.className) ||
clsReg.test(env.element.className)
)
return;
var children = pre.childNodes,
before = '',
after = '',
codeFound = false;
// Move surrounding whitespace from the <pre> tag into the <code> tag
for (var i = 0; i < children.length; ++i) {
var node = children[i];
if (node == env.element) {
codeFound = true;
} else if (node.nodeName === '#text') {
if (codeFound) {
after += node.nodeValue;
} else {
before += node.nodeValue;
}
pre.removeChild(node);
--i;
}
}
if (!env.element.children.length || !Prism.plugins.KeepMarkup) {
env.code = before + env.code + after;
env.code = Normalizer.normalize(env.code, env.settings);
} else {
// Preserve markup for keep-markup plugin
var html = before + env.element.innerHTML + after;
env.element.innerHTML = Normalizer.normalize(html, env.settings);
env.code = env.element.textContent;
}
});
})();
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
if (!Prism.plugins.toolbar) {
console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
return;
}
var ClipboardJS = window.ClipboardJS || undefined;
if (!ClipboardJS && typeof require === 'function') {
ClipboardJS = require('clipboard');
}
var callbacks = [];
if (!ClipboardJS) {
var script = document.createElement('script');
var head = document.querySelector('head');
script.onload = function () {
ClipboardJS = window.ClipboardJS;
if (ClipboardJS) {
while (callbacks.length) {
callbacks.pop()();
}
}
};
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js';
head.appendChild(script);
}
Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
var linkCopy = document.createElement('button');
linkCopy.innerHTML = 'Copy';
linkCopy.classList = 'btn-copy-code btn btn-dark btn-sm';
if (!ClipboardJS) {
callbacks.push(registerClipboard);
} else {
registerClipboard();
}
return linkCopy;
function registerClipboard() {
var clip = new ClipboardJS(linkCopy, {
text: function () {
return env.code;
},
});
clip.on('success', function () {
linkCopy.textContent = 'Copied!';
resetText();
});
clip.on('error', function () {
linkCopy.textContent = 'Press Ctrl+C to copy';
resetText();
});
}
function resetText() {
setTimeout(function () {
linkCopy.innerHTML = 'Copy';
}, 5000);
}
});
})();
================================================
FILE: dev/js/src/mdbsnippet.js
================================================
const Entities = require('html-entities').AllHtmlEntities;
const entities = new Entities();
class MdbSnippet {
constructor(el) {
this.el = el;
this.data = [];
}
init() {
this._getData();
this._encode();
this._replaceContent();
}
_getData() {
const codeElements = Array.from(this.el.getElementsByTagName('code'));
codeElements.forEach((codeElement) => {
this.data.push({
lang: codeElement.dataset.lang,
name: codeElement.dataset.name,
content: codeElement.innerHTML,
});
});
}
_encode() {
this.data.forEach((data, index, arr) => {
arr[index].content = entities.encode(data.content);
});
}
_createContent() {
const docsPills = document.createElement('div');
const toolbar = document.createElement('div');
const ul = document.createElement('ul');
const tabContent = document.createElement('div');
docsPills.setAttribute('class', 'docs-pills border');
toolbar.setAttribute('class', 'd-flex justify-content-between py-2');
toolbar.style.paddingLeft = '.6rem';
ul.setAttribute('class', 'nav nav-pills');
tabContent.setAttribute('class', 'tab-content');
this.data.forEach((data, index) => {
const li = document.createElement('li');
const a = document.createElement('a');
const tabPane = document.createElement('div');
const codeWrapper = document.createElement('code');
const preWrapper = document.createElement('pre');
const id = Math.floor((Math.random() + Math.floor(Math.random() * 9) + 1) * Math.pow(10, 8));
li.setAttribute('class', 'nav-item');
a.setAttribute('role', 'tab');
a.setAttribute('href', `#mdb${id}`);
a.setAttribute('class', 'nav-link');
a.dataset.toggle = 'tab';
a.innerHTML = data.name;
li.appendChild(a);
ul.appendChild(li);
codeWrapper.setAttribute('class', `line-numbers language-${data.lang}`);
codeWrapper.innerHTML = data.content;
preWrapper.appendChild(codeWrapper);
preWrapper.setAttribute('class', 'mb-0');
tabPane.setAttribute('role', 'tabpanel');
tabPane.setAttribute('id', `mdb${id}`);
if (index === 0) {
a.setAttribute('class', 'nav-link active show');
tabPane.setAttribute('class', 'tab-pane fade active show');
} else {
a.setAttribute('class', 'nav-link');
tabPane.setAttribute('class', 'tab-pane');
}
tabPane.appendChild(preWrapper);
tabContent.appendChild(tabPane);
});
toolbar.appendChild(ul);
docsPills.appendChild(toolbar);
docsPills.appendChild(tabContent);
this.el.appendChild(docsPills);
}
_replaceContent() {
this._removeContent();
this._createContent();
}
_removeContent() {
this.el.innerHTML = '';
}
}
const mdbsnippets = Array.from(document.getElementsByTagName('mdbsnippet'));
mdbsnippets.forEach((mdbsnippet) => {
new MdbSnippet(mdbsnippet).init();
});
================================================
FILE: free/components/accordion.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
<h2>Basic</h2>
<br />
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: free/components/alert.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body data-mdb-spy="scroll" data-mdb-target="#scrollspy" data-mdb-offset="0">
<div class="container my-5">
<!-- Navs -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<!-- Overview tab -->
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="pills-overview-tab"
data-mdb-toggle="pill"
href="#pills-overview"
role="tab"
aria-controls="pills-overview"
aria-selected="true"
>Overview</a
>
</li>
<!-- Overview tab -->
</ul>
<!-- Navs -->
<!-- Panels -->
<div class="tab-content mt-4" id="pills-tabContent">
<!-- Overview panel -->
<div
class="tab-pane fade show active"
id="pills-overview"
role="tabpanel"
aria-labelledby="pills-overview-tab"
>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-10 mb-4">
<!--Section: Docs content-->
<section>
<!--Section: Introduction-->
<section id="section-introduction">
<!-- Main title -->
<h2 class="h1 fw-bold">Alerts</h2>
<!-- Seo title -->
<h1 class="h5">Bootstrap 5 Alerts</h1>
<!-- Description -->
<p>
Provide contextual feedback messages for typical user actions with the handful
of available and flexible alert messages.
</p>
</section>
<!--Section: Introduction-->
<hr class="my-5" />
<!--Section: Basic example-->
<section id="section-basic-example">
<!-- Section title -->
<h2 class="mb-4">Basic example</h2>
<!--Section: Demo-->
<section class="border p-4 d-flex justify-content-center mb-4">
<div class="container">
<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>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<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>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Basic example-->
<hr class="my-5" />
<!--Section: Link Color-->
<section id="section-link-color">
<!-- Section title -->
<h2 class="mb-4">Link Color</h2>
<!--Section: Demo-->
<section class="border p-4 d-flex justify-content-center mb-4">
<div class="container">
<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>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<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>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Link Color-->
<hr class="my-5" />
<!--Section: Additional Content-->
<section id="section-additional-content">
<!-- Section title -->
<h2 class="mb-4">Additional Content</h2>
<!--Section: Demo-->
<section class="border p-4 d-flex justify-content-center mb-4">
<div class="container">
<div class="alert alert-success" 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>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<div class="alert alert-success" 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>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Additional Content-->
<hr class="my-5" />
<!--Section: Dismissing-->
<section id="section-dismissing">
<!-- Section title -->
<h2 class="mb-4">Dismissing</h2>
<p>
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
Here’s how:
</p>
<ul>
<li>
Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
</li>
<li>
Add a close button and the <code>.alert-dismissible</code> class, which adds
extra padding to the right of the alert and positions the close button.
</li>
<li>
On the close button, add the <code>data-mdb-dismiss="alert"</code> attribute,
which triggers the JavaScript functionality. Be sure to use the
<code>button</code> element with it for proper behavior across all devices.
</li>
<li>
To animate alerts when dismissing them, be sure to add the
<code>.fade</code> and <code>.show classes</code>.
</li>
</ul>
<p>You can see this in action with a live demo:</p>
<!--Section: Demo-->
<section class="border p-4 d-flex justify-content-center mb-4">
<div class="container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields
below.
<button
type="button"
class="btn-close"
data-mdb-dismiss="alert"
aria-label="Close"
></button>
</div>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those
fields below.
<button
type="button"
class="btn-close"
data-mdb-dismiss="alert"
aria-label="Close"
></button>
</div>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Dismissing-->
</section>
<!--Section: Docs content-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-2 mb-4">
<!-- Table of content -->
<div id="scrollspy" class="sticky-top">
<ul class="nav flex-column nav-pills menu-sidebar">
<!-- Links -->
<li class="nav-item">
<a class="nav-link active" href="#section-introduction">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-basic-example">Basic example</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-link-color">Link Color</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-additional-content">Additional Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-dismissing">Dismissing</a>
</li>
<!-- Links -->
</ul>
</div>
<!-- Table of content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Overview panel -->
</div>
<!-- Panels -->
</div>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>
================================================
FILE: free/components/badge.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container mb-5">
<h2 class="my-5">Example</h2>
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6>Example heading <span class="badge bg-primary">New</span></h6>
<h2 class="my-5">Notifications</h2>
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-danger">4</span>
</button>
<span style="margin-right: 0.5rem;"></span>
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-danger">9</span>
<span class="sr-only">unread messages</span>
</button>
<h2 class="my-5">Background colors</h2>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<h2 class="my-5">Pill badges</h2>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
<h2 class="my-5">Material badges</h2>
<a href="">
<span><i class="fas fa-envelope fa-lg"></i></span>
<span class="badge bg-danger badge-dot"></span>
</a>
<br />
<br />
<a href="" class="">
<span><i class="fas fa-envelope fa-lg"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<br />
<br />
<a href="" class="">
<span><i class="fas fa-envelope fa-lg"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">999+</span>
</a>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: free/components/breadcrumb.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
<h2>Basic</h2>
<br />
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<br />
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#!">Home</a></li>
<li class="breadcrumb-item"><a href="#!">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#!">Data</a></li>
</ol>
</nav>
</div>
</div>
</nav>
<br />
<br />
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ccc;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true"
><i class="fab fa-facebook"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true"
><i class="fab fa-instagram"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true"
><i class="fab fa-twitter"></i
></a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-primary">Button</button>
</li>
<li class="nav-item ms-2">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
class="rounded-circle"
alt="avatar image"
style="width: 30px;"
/>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
class="rounded-circle"
alt="avatar image"
style="width: 30px;"
/>
</a>
</li>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#!">Home</a></li>
<li class="breadcrumb-item"><a href="#!">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#!">Data</a></li>
</ol>
</nav>
</ul>
<button type="button" class="btn btn-outline-primary">Button</button>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
class="rounded-circle ms-2"
alt="avatar image"
style="width: 30px;"
/>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#!">Home</a></li>
<li class="breadcrumb-item"><a href="#!">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#!">Data</a></li>
</ol>
</nav>
</div>
</div>
</nav>
<br />
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: free/components/button-group.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container mb-5" style="margin-top: 25vh">
<!-- Section: Buttons -->
<section>
<div>
<!-- <h2 class="mb-4">Basic example</h2> -->
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br />
<br />
<br />
<button type="button" class="btn btn-link">Link</button>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link btn-sm">Left</button>
<button type="button" class="btn btn-link btn-sm">Middle</button>
<button type="button" class="btn btn-link btn-sm">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link">Left</button>
<button type="button" class="btn btn-link">Middle</button>
<button type="button" class="btn btn-link">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link btn-lg">Left</button>
<button type="button" class="btn btn-link btn-lg">Middle</button>
<button type="button" class="btn btn-link btn-lg">Right</button>
</div>
<br />
<br />
<br />
<!--
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">Left</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">
Left <i class="fas fa-align-left ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Center <i class="fas fa-align-center ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Right <i class="fas fa-align-right ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Justify <i class="fas fa-align-justify ms-1"></i>
</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-border" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light"><i class="fas fa-align-left"></i></button>
<button type="button" class="btn btn-light active">
<i class="fas fa-align-center"></i>
</button>
<button type="button" class="btn btn-light"><i class="fas fa-align-right"></i></button>
<button type="button" class="btn btn-light">
<i class="fas fa-align-justify"></i>
</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light"><i class="fas fa-align-left"></i></button>
<button type="button" class="btn btn-light active">
<i class="fas fa-align-center"></i>
</button>
<button type="button" class="btn btn-light"><i class="fas fa-align-right"></i></button>
<button type="button" class="btn btn-light">
<i class="fas fa-align-justify"></i>
</button>
</div>
<br />
<br />
<br /> -->
<h2 class="mb-4">Button standard</h2>
<div class="row mb-5">
<div class="col-md-6">
<p>Button standard i standard rounded</p>
<button type="button" class="btn btn-primary me-3">Primary</button>
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
</div>
<div class="col-md-6">
<p>
Button z borderem i z borderem rounded (dałam btn-light zeby lepiej było defaultowy
bootstrapowy border widac)
</p>
<button type="button" class="btn btn-light shadow-0 border me-3">Light</button>
<button type="button" class="btn btn-light btn-rounded shadow-0 border">Light</button>
</div>
</div>
<h2 class="mb-4">Button toolbar</h2>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br />
<br />
<br />
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button
id="btnGroupDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop2"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop3"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop4"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary mr-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
</section>
<!-- Section: Buttons -->
<br />
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: free/components/buttons-2.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container mb-5" style="margin-top: 25vh">
<section>
<button type="button" class="btn btn-outline-primary btn-floating btn-lg">
<i class="fab fa-google"></i>
</button>
<a href="#!" type="button" class="btn btn-primary btn-floating btn-lg">
<i class="fab fa-twitter"></i>
</a>
<button type="button" class="btn btn-outline-primary btn-floating">
<i class="fab fa-google"></i>
</button>
<a href="#!" type="button" class="btn btn-primary btn-floating">
<i class="fab fa-twitter"></i>
</a>
<button type="button" class="btn btn-outline-primary btn-floating btn-sm">
<i class="fab fa-google"></i>
</button>
<a href="#!" type="button" class="btn btn-primary btn-floating btn-sm">
<i class="fab fa-twitter"></i>
</a>
<br />
<br />
<button type="button" class="btn btn-outline-primary btn-floating btn-lg">
<i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-primary btn-floating btn-lg">
<i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-floating">
<i class="fas fa-users"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating">
<i class="fas fa-users"></i>
</button>
<button type="button" class="btn btn-outline-success btn-floating btn-sm">
<i class="fas fa-heart"></i>
</button>
<button type="button" class="btn btn-success btn-floating btn-sm">
<i class="fas fa-heart"></i>
</button>
<br />
<br />
<button type="button" class="btn btn-outline-primary btn-floating btn-lg">
<i class="fas fa-square"></i>
</button>
<button type="button" class="btn btn-primary btn-floating btn-lg">
<i class="fas fa-square"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-floating">
<i class="fas fa-square"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating">
<i class="fas fa-square"></i>
</button>
<button type="button" class="btn btn-outline-success btn-floating btn-sm">
<i class="fas fa-square"></i>
</button>
<button type="button" class="btn btn-success btn-floating btn-sm">
<i class="fas fa-square"></i>
</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-floating btn-lg">
<i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating">
<i class="fas fa-users"></i>
</button>
<button type="button" class="btn btn-success btn-floating btn-sm">
<i class="fas fa-heart"></i>
</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm">Button</button>
<br />
<br />
<button type="button" class="btn btn-primary">Button</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-lg">Button</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-light btn-sm">Light</button>
<button type="button" class="btn btn-dark btn-sm">Dark</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
<br />
<br />
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-light btn-lg">Light</button>
<button type="button" class="btn btn-dark btn-lg">Dark</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-sm btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-sm btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-sm btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-sm btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-sm btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-sm btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-sm btn-rounded">Dark</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-lg btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-lg btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-lg btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-lg btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-lg btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-lg btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-lg btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-lg btn-rounded">Dark</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
<br />
<br />
</section>
<!-- Section: Buttons -->
<section>
<div>
<button type="button" class="btn">Base button</button>
<button type="button" class="btn disabled">Base button</button>
<button type="button" class="btn disabled" disabled>Base button</button>
<button type="button" class="btn" disabled>Base button</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">
Block level button
</button>
<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>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>
<br />
<a href="#" class="btn btn-primary btn-sm active" role="button" aria-pressed="true"
>Primary link</a
>
<a href="#" class="btn btn-secondary btn-sm active" role="button" aria-pressed="true"
>Link</a
>
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true"
>Primary link</a
>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"
>Primary link</a
>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true"
>Link</a
>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-sm" disabled>Button</button>
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<br />
<br />
<a
href="#"
class="btn btn-primary btn-sm disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Primary link</a
>
<a
href="#"
class="btn btn-secondary btn-sm disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Link</a
>
<a
href="#"
class="btn btn-primary disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Primary link</a
>
<a
href="#"
class="btn btn-secondary disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Link</a
>
<a
href="#"
class="btn btn-primary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Primary link</a
>
<a
href="#"
class="btn btn-secondary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Link</a
>
<br />
<br />
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
<button type="button" class="btn btn-warning btn-sm">Primary</button>
<button type="button" class="btn btn-outline-warning btn-sm">Primary</button>
<button type="button" class="btn btn-dark btn-sm">Primary</button>
<button type="button" class="btn btn-outline-dark btn-sm">Primary</button>
<div style="height: 10px"></div>
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
<br />
<br />
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-warning">Primary</button>
<button type="button" class="btn btn-outline-warning">Primary</button>
<button type="button" class="btn btn-dark">Primary</button>
<button type="button" class="btn btn-outline-dark">Primary</button>
<div style="height: 10px"></div>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<br />
<br />
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<button type="button" class="btn btn-warning btn-lg">Primary</button>
<button type="button" class="btn btn-outline-warning btn-lg">Primary</button>
<button type="button" class="btn btn-dark btn-lg">Primary</button>
<button type="button" class="btn btn-outline-dark btn-lg">Primary</button>
<div style="height: 10px"></div>
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<br />
<br />
<button type="button" class="btn btn-primary" data-mdb-toggle="button" id="toggleButton">
Button with data-mdb-toggle
</button>
<div class="fixed-action-btn" id="fixed1">
<a class="btn btn-floating btn-primary btn-lg" style="background-color: #f44336">
<i class="fas fa-pencil-alt"></i>
</a>
<ul class="list-unstyled">
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #f44336"
><i class="fas fa-star"></i
></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #fdd835"
><i class="fas fa-user"></i
></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #4caf50"
><i class="fas fa-envelope"></i
></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #2196f3"
><i class="fas fa-shopping-cart"></i
></a>
</li>
</ul>
</div>
</div>
</section>
<!-- Section: Buttons -->
<br />
</div>
</body>
<!-- jQuery for tests -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>
================================================
FILE: free/components/buttons.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Micon -->
<!-- <link rel="stylesheet" href="../../dev/css/micon.min.css" /> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/micon@3.0.168/micon.min.css" />
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<!-- prettier-ignore -->
<div class="container my-5">
<!-- Navs -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<!-- Overview tab -->
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-overview-tab" data-mdb-toggle="pill" href="#pills-overview" role="tab"
aria-controls="pills-overview" aria-selected="true">Overview</a>
</li>
<!-- Overview tab -->
<!-- Api tab -->
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-api-tab" data-mdb-toggle="pill" href="#pills-api" role="tab"
aria-controls="pills-api" aria-selected="false">API</a>
</li>
<!-- Api tab -->
</ul>
<!-- Navs -->
<!-- Panels -->
<div class="tab-content mt-4" id="pills-tabContent">
<!-- Overview panel -->
<div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-10 mb-4">
<!--Section: Docs content-->
<section>
<!--Section: Introduction-->
<section id="section-introduction">
<!-- Main title -->
<h2 class="h1 semibold mb-3">Buttons</h2>
<!-- Seo title -->
<h1 class="h5 regular mb-3">Buttons - Bootstrap 5 & Fluent Design component</h1>
<!-- Description -->
<p class="my-4">
Use MDB custom button styles for actions in forms, dialogs, and more with
support for multiple sizes, states, and more.
</p>
<p class="note note-light">
<strong>Note:</strong> Read the <strong>API</strong> tab to find all available
options and advanced customization
</p>
</section>
<!--Section: Introduction-->
<hr class="my-5" />
<!--Section: Basic example-->
<section id="section-basic-example">
<!-- Section title -->
<h2 class="mb-4">Basic example</h2>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-primary">Button</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-primary">Button</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<h4>Disable text wrapping</h4>
<p>
If you don’t want the button text to wrap, you can add the
<code>.text-nowrap</code> class to the button. In Sass, you can set
<code>$btn-white-space: nowrap</code> to disable text wrapping for each button.
</p>
</section>
<!--Section: Basic example-->
<hr class="my-5" />
<!--Section: Colors-->
<section id="section-colors">
<!--Section title-->
<h2 class="mb-4">Colors</h2>
<!-- Section description -->
<p>
MDB includes several predefined button styles, each serving its own semantic
purpose, with a few extras thrown in for more control.
</p>
<!--Section: Demo-->
<section class="border p-4 text-left mb-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Link
</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Link
</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<p class="note note-info">
<strong>Conveying meaning to assistive technologies:</strong>
<br />
Using color to add meaning only provides a visual indication, which will not be
conveyed to users of assistive technologies – such as screen readers. Ensure
that information denoted by the color is either obvious from the content itself
(e.g. the visible text), or is included through alternative means, such as
additional text hidden with the
<code>.visually-hidden</code> class.
</p>
</section>
<!--/Section: Colors-->
<hr class="my-5" />
<!--Section: Outline-->
<section id="section-outline">
<!--Section title-->
<h2 class="mb-4">Outline</h2>
<!-- Section description -->
<p>
In need of a button, but not the hefty background colors they bring? Replace the
default modifier classes with the <code>.btn-outline-*</code> ones to remove all
background images and colors on any button.
</p>
<p>
In the outline buttons, we recommend adding
<code>data-mdb-ripple-color="dark"</code> to change the color of the
<strong>ripple effect</strong>. The default light color of the ripple (applied
automatically to every button) may not be well visible in the case of light and
outline buttons.
</p>
<p>
To learn more about the ripple effect and all the available options have a look
at
<a href="https://mdbootstrap.com/docs/standard/methods/ripple/">Ripple Docs</a>.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
Dark
</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
Dark
</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<p class="note note-info">
Some of the button styles use a relatively light foreground color, and should
only be used on a dark background in order to have sufficient contrast.
</p>
</section>
<!--/Section: Outline-->
<hr class="my-5" />
<!--Section: Rounded-->
<section id="section-rounded">
<!--Section title-->
<h2 class="mb-4">Rounded</h2>
<!-- Section description -->
<p>Add <code>.btn-rounded</code> class to make the button rounded.</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">
Secondary
</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--/Section: Rounded-->
<hr class="my-5" />
<!--Section: Rounded outline-->
<section id="section-rounded-outline">
<!--Section title-->
<h2 class="mb-4">Rounded outline</h2>
<!-- Section description -->
<p>
You can use <code>.btn-outline-*</code> and <code>.btn-rounded</code> together
to make the button outline and rounded at the same time.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-outline-primary btn-rounded" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success btn-rounded" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger btn-rounded" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning btn-rounded" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info btn-rounded" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light btn-rounded" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark btn-rounded" data-mdb-ripple-color="dark">
Dark
</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-outline-primary btn-rounded" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary btn-rounded" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success btn-rounded" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger btn-rounded" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning btn-rounded" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info btn-rounded" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light btn-rounded" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark btn-rounded" data-mdb-ripple-color="dark">
Dark
</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--/Section: Rounded outline-->
<hr class="my-5" />
<!--Section: Floating-->
<section id="section-floating">
<!--Section title-->
<h2 class="mb-4">Floating</h2>
<!-- Section description -->
<p>Use <code>.btn-floating</code> class to make a circle button.</p>
<p>
<strong>To make it works properly you have to put an icon inside.</strong> The
text will not fit in. You can find hundreds of available icons in our
<a href="/docs/standard/content-styles/icons/">icons docs</a>.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-primary btn-floating">
<i class="mi mi-Download"></i>
</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-primary btn-floating">
<i class="mi mi-Download"></i>
</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<p>
You can apply almost all the same classes and attributes to the floating buttons
as to the regular buttons - colors, ripples, sizes, outline, etc.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<button type="button" class="btn btn-primary btn-lg btn-floating">
<i class="mi mi-facebook-f"></i>
</button>
<button type="button" class="btn btn-outline-success btn-floating" data-mdb-ripple-color="dark">
<i class="mi mi-FavoriteStarFill"></i>
</button>
<button type="button" class="btn btn-danger btn-floating">
<i class="mi mi-Cut"></i>
</button>
<button type="button" class="btn btn-dark btn-floating">
<i class="mi mi-apple"></i>
</button>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" class="btn btn-primary btn-lg btn-floating">
<i class="mi mi-facebook-f"></i>
</button>
<button type="button" class="btn btn-outline-success btn-floating" data-mdb-ripple-color="dark">
<i class="mi mi-FavoriteStarFill"></i>
</button>
<button type="button" class="btn btn-danger btn-floating">
<i class="mi mi-Cut"></i>
</button>
<button type="button" class="btn btn-dark btn-floating">
<i class="mi mi-apple"></i>
</button>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--/Section: Floating-->
<hr class="my-5" />
<!--Section: Fixed buttons-->
<section id="section-fixed-buttons">
<!-- Section title -->
<h2 class="mb-4">Fixed buttons</h2>
<!-- Description -->
<p>
Use <code>.fixed-action-btn</code> class to create a fixed button with a list of
available options that shows on hover or click.
</p>
<p>
See the live example of a fixed button in the bottom right corner of this page.
</p>
<p class="note note-light">
<strong>Note:</strong> There are available <code>show</code>/<code>hide</code>
methods to manually open and close the list. Read the <strong>API</strong> tab
to find more info.
</p>
<!--Section: Demo-->
<div class="fixed-action-btn" id="fixed1">
<a class="btn btn-floating btn-primary btn-lg"
style="background-color: #f44336; border-color: #f44336;">
<i class="mi mi-Edit"></i>
</a>
<ul class="list-unstyled">
<li>
<a class="btn btn-primary btn-floating btn-lg"
style="background-color: #f44336; border-color: #f44336;"><i
class="mi mi-FavoriteStarFill"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg"
style="background-color: #fdd835; border-color: #fdd835;"><i class="mi mi-Contact"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg"
style="background-color: #4caf50; border-color: #4caf50;"><i class="mi mi-Mail"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg"
style="background-color: #2196f3; border-color: #2196f3;"><i class="mi mi-ShoppingCart"></i></a>
</li>
</ul>
</div>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<!-- prettier-ignore -->
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<div class="fixed-action-btn">
<a class="btn btn-floating btn-primary btn-lg" style="background-color: #f44336">
<i class="fas fa-pencil-alt"></i>
</a>
<ul class="list-unstyled">
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #f44336"><i
class="fas fa-star"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #fdd835"><i
class="fas fa-user"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #4caf50"><i
class="fas fa-envelope"></i></a>
</li>
<li>
<a class="btn btn-primary btn-floating btn-lg" style="background-color: #2196f3"><i
class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Basic example-->
<hr class="my-5" />
<!--Section: Social-->
<section id="section-social">
<!--Section title-->
<h2 class="mb-4">Social</h2>
<!-- Section description -->
<p>
Combining our icons and custom colors you can create social buttons. Combining
our icons and custom colors you can create social buttons. See all available
icons in our
<a href="https://mdbootstrap.com/docs/standard/content-styles/icons/">icons search</a>
(check "brands" to filter brand icons).
</p>
<p>
In the example below, we place a Facebook icon
<code><i class="fab fa-facebook-f"></i></code> inside the
button and set a <strong>background-color</strong> to
<code>#3B5998</code> (facebook brand color).
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<a class="btn btn-primary" style="background-color: #3b5998; border-color: #3b5998" href="#!"
role="button"><i class="mi mi-facebook-f"></i></a>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<a class="btn btn-primary" style="background-color: #3b5998; border-color: #3b5998;" href="#!"
role="button"><i class="mi mi-facebook-f"></i></a>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<!--Subsection: Sample brands-->
<section id="subsection-sample-brands">
<!--Subsection title-->
<h4 class="mt-5">Sample brands</h4>
<!--Description-->
<p>A few the most popular brands in form of social buttons.</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<!-- Facebook -->
<a class="btn btn-primary m-1" style="background-color: #3b5998; border-color: #3b5998;" href="#!"
role="button"><i class="mi mi-facebook-f"></i></a>
<!-- Twitter -->
<a class="btn btn-primary m-1" style="background-color: #55acee; border-color: #55acee;" href="#!"
role="button"><i class="mi mi-twitter-square"></i></a>
<!-- Google -->
<a class="btn btn-primary m-1" style="background-color: #dd4b39; border-color: #dd4b39;" href="#!"
role="button"><i class="mi mi-google"></i></a>
<!-- Instagram -->
<a class="btn btn-primary m-1" style="background-color: #ac2bac; border-color: #ac2bac;" href="#!"
role="button"><i class="mi mi-instagram"></i></a>
<!-- Linkedin -->
<a class="btn btn-primary m-1" style="background-color: #0082ca; border-color: #0082ca;" href="#!"
role="button"><i class="mi mi-linkedin-in"></i></a>
<!-- Pinterest -->
<a class="btn btn-primary m-1" style="background-color: #c61118; border-color: #c61118;" href="#!"
role="button"><i class="mi mi-pinterest"></i></a>
<!-- Vkontakte -->
<a class="btn btn-primary m-1" style="background-color: #4c75a3; border-color: #4c75a3;" href="#!"
role="button"><i class="mi mi-vk"></i></a>
<!-- Stack overflow -->
<a class="btn btn-primary m-1" style="background-color: #ffac44; border-color: #ffac44;" href="#!"
role="button"><i class="mi mi-stack-overflow"></i></a>
<!-- Youtube -->
<a class="btn btn-primary m-1" style="background-color: #ed302f; border-color: #ed302f;" href="#!"
role="button"><i class="mi mi-youtube"></i></a>
<!-- Slack -->
<a class="btn btn-primary m-1" style="background-color: #481449; border-color: #481449;" href="#!"
role="button"><i class="mi mi-slack-hash"></i></a>
<!-- Github -->
<a class="btn btn-primary m-1" style="background-color: #333333; border-color: #333333;" href="#!"
role="button"><i class="mi mi-github"></i></a>
<!-- Dribbble -->
<a class="btn btn-primary m-1" style="background-color: #ec4a89; border-color: #ec4a89;" href="#!"
role="button"><i class="mi mi-dribbble"></i></a>
<!-- Reddit -->
<a class="btn btn-primary m-1" style="background-color: #ff4500; border-color: #ff4500;" href="#!"
role="button"><i class="mi mi-reddit-alien"></i></a>
<!-- Whatsapp -->
<a class="btn btn-primary m-1" style="background-color: #25d366; border-color: #25d366;" href="#!"
role="button"><i class="mi mi-whatsapp"></i></a>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<!-- Facebook -->
<a class="btn btn-primary m-1" style="background-color: #3b5998; border-color: #3b5998;"
href="#!" role="button"><i class="mi mi-facebook-f"></i></a>
<!-- Twitter -->
<a class="btn btn-primary m-1" style="background-color: #55acee; border-color: #55acee;"
href="#!" role="button"><i class="mi mi-twitter-square"></i></a>
<!-- Google -->
<a class="btn btn-primary m-1" style="background-color: #dd4b39; border-color: #dd4b39;"
href="#!" role="button"><i class="mi mi-google"></i></a>
<!-- Instagram -->
<a class="btn btn-primary m-1" style="background-color: #ac2bac; border-color: #ac2bac;"
href="#!" role="button"><i class="mi mi-instagram"></i></a>
<!-- Linkedin -->
<a class="btn btn-primary m-1" style="background-color: #0082ca; border-color: #0082ca;"
href="#!" role="button"><i class="mi mi-linkedin-in"></i></a>
<!-- Pinterest -->
<a class="btn btn-primary m-1" style="background-color: #c61118; border-color: #c61118;"
href="#!" role="button"><i class="mi mi-pinterest"></i></a>
<!-- Vkontakte -->
<a class="btn btn-primary m-1" style="background-color: #4c75a3; border-color: #4c75a3;"
href="#!" role="button"><i class="mi mi-vk"></i></a>
<!-- Stack overflow -->
<a class="btn btn-primary m-1" style="background-color: #ffac44; border-color: #ffac44;"
href="#!" role="button"><i class="mi mi-stack-overflow"></i></a>
<!-- Youtube -->
<a class="btn btn-primary m-1" style="background-color: #ed302f; border-color: #ed302f;"
href="#!" role="button"><i class="mi mi-youtube"></i></a>
<!-- Slack -->
<a class="btn btn-primary m-1" style="background-color: #481449; border-color: #481449;"
href="#!" role="button"><i class="mi mi-slack-hash"></i></a>
<!-- Github -->
<a class="btn btn-primary m-1" style="background-color: #333333; border-color: #333333;"
href="#!" role="button"><i class="mi mi-github"></i></a>
<!-- Dribbble -->
<a class="btn btn-primary m-1" style="background-color: #ec4a89; border-color: #ec4a89;"
href="#!" role="button"><i class="mi mi-dribbble"></i></a>
<!-- Reddit -->
<a class="btn btn-primary m-1" style="background-color: #ff4500; border-color: #ff4500;"
href="#!" role="button"><i class="mi mi-reddit-alien"></i></a>
<!-- Whatsapp -->
<a class="btn btn-primary m-1" style="background-color: #25d366; border-color: #25d366;"
href="#!" role="button"><i class="mi mi-whatsapp"></i></a>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Subsection: Sample brands-->
<!--Subsection: Floating-->
<section id="subsection-floating-social">
<!--Subsection title-->
<h4 class="mt-5">Floating social</h4>
<!--Description-->
<p>
By adding <code>.btn-floating</code> class you can create a nice, floating
social button.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<a class="btn btn-primary btn-lg btn-floating"
style="background-color: #ac2bac; border-color: #ac2bac;" href="#!" role="button"><i
class="mi mi-instagram"></i></a>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<a class="btn btn-primary btn-lg btn-floating"
style="background-color: #ac2bac; border-color: #ac2bac;" href="#!" role="button"><i
class="mi mi-instagram"></i></a>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Subsection: Floating-->
<!--Subsection: Text-->
<section id="subsection-text">
<!--Subsection title-->
<h4 class="mt-5">Text</h4>
<!--Description-->
<p>
You don't need to use only an icon. You can add text to the button. Remember
to add some spacing classes (for example <code>.me-2</code>) to provide a
proper space between icon and text.
</p>
<!--Section: Demo-->
<section class="border p-4 text-center mb-4">
<a class="btn btn-primary" style="background-color: #55acee; border-color: #55acee;" href="#!"
role="button"><i class="mi mi-twitter-square me-2"></i>Twitter</a>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section class="mb-4">
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<a class="btn btn-primary" style="background-color: #55acee; border-color: #55acee;" href="#!"
role="button"><i class="mi mi-twitter-square me-2"></i>Twitter</a>
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Subsection: Text-->
<!--Subsection: Only icon-->
<section id=
gitextract_0ycvn1c8/ ├── README.md ├── dev/ │ ├── css/ │ │ └── new-prism.css │ └── js/ │ ├── new-prism.js │ └── src/ │ └── mdbsnippet.js ├── free/ │ ├── components/ │ │ ├── accordion.html │ │ ├── alert.html │ │ ├── badge.html │ │ ├── breadcrumb.html │ │ ├── button-group.html │ │ ├── buttons-2.html │ │ ├── buttons.html │ │ ├── card.html │ │ ├── carousel.html │ │ ├── close.html │ │ ├── collapse.html │ │ ├── dropdown.html │ │ ├── footer.html │ │ ├── full-demo.html │ │ ├── list-group.html │ │ ├── mega-menu.html │ │ ├── modal.html │ │ ├── navbar.html │ │ ├── navs.html │ │ ├── pagination.html │ │ ├── pills.html │ │ ├── popovers.html │ │ ├── prism.html │ │ ├── progress.html │ │ ├── ripple.html │ │ ├── scrollspy.html │ │ ├── spinners.html │ │ ├── toasts.html │ │ └── tooltips.html │ ├── css/ │ │ ├── colors.html │ │ ├── covers-2.html │ │ ├── covers.html │ │ ├── hover-effects.html │ │ ├── icons.html │ │ ├── images.html │ │ ├── shadow.html │ │ └── typography.html │ ├── data/ │ │ └── tables.html │ ├── design-blocks/ │ │ ├── call-to-action.html │ │ ├── content.html │ │ ├── counters.html │ │ ├── customers.html │ │ ├── download.html │ │ ├── explore.html │ │ ├── faq.html │ │ ├── features.html │ │ ├── projects.html │ │ ├── service.html │ │ ├── teams.html │ │ └── testimonials.html │ ├── forms/ │ │ ├── form-check.html │ │ ├── form-control-2.html │ │ ├── form-control.html │ │ ├── form-file.html │ │ ├── form-input-group.html │ │ ├── input.html │ │ ├── layout.html │ │ ├── overview.html │ │ ├── range.html │ │ ├── select.html │ │ └── validation.html │ └── template/ │ ├── playground-template.html │ └── template.html ├── index.html ├── license └── package.json
SYMBOL INDEX (13 symbols across 2 files)
FILE: dev/js/new-prism.js
function NormalizeWhitespace (line 2169) | function NormalizeWhitespace(defaults) {
function toCamelCase (line 2173) | function toCamelCase(value) {
function tabLen (line 2179) | function tabLen(str) {
function registerClipboard (line 2405) | function registerClipboard() {
function resetText (line 2424) | function resetText() {
FILE: dev/js/src/mdbsnippet.js
class MdbSnippet (line 4) | class MdbSnippet {
method constructor (line 5) | constructor(el) {
method init (line 10) | init() {
method _getData (line 16) | _getData() {
method _encode (line 28) | _encode() {
method _createContent (line 34) | _createContent() {
method _replaceContent (line 92) | _replaceContent() {
method _removeContent (line 97) | _removeContent() {
Condensed preview — 70 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,377K chars).
[
{
"path": "README.md",
"chars": 5610,
"preview": "\n<p align=\"center\">\n <a href=\"https://mdbootstrap.com/freebies/fluent-design/\" target=\"_blank\"><img width=\"80\" src=\"ht"
},
{
"path": "dev/css/new-prism.css",
"chars": 10424,
"preview": "/* PrismJS 1.14.0\nhttp://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+"
},
{
"path": "dev/js/new-prism.js",
"chars": 73044,
"preview": "/* PrismJS 1.14.0\nhttp://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+"
},
{
"path": "dev/js/src/mdbsnippet.js",
"chars": 2982,
"preview": "const Entities = require('html-entities').AllHtmlEntities;\nconst entities = new Entities();\n\nclass MdbSnippet {\n constr"
},
{
"path": "free/components/accordion.html",
"chars": 5345,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/alert.html",
"chars": 18648,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/badge.html",
"chars": 3814,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/breadcrumb.html",
"chars": 8619,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/button-group.html",
"chars": 14830,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/buttons-2.html",
"chars": 17130,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/buttons.html",
"chars": 75159,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/card.html",
"chars": 13398,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/carousel.html",
"chars": 18187,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/close.html",
"chars": 1864,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/collapse.html",
"chars": 18530,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/dropdown.html",
"chars": 31052,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/footer.html",
"chars": 27031,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/full-demo.html",
"chars": 97541,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/list-group.html",
"chars": 12633,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/mega-menu.html",
"chars": 5712,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/modal.html",
"chars": 22730,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/navbar.html",
"chars": 16234,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/navs.html",
"chars": 30009,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/pagination.html",
"chars": 8866,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/pills.html",
"chars": 46863,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/popovers.html",
"chars": 4239,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/prism.html",
"chars": 13424,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/progress.html",
"chars": 9203,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/ripple.html",
"chars": 64707,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/scrollspy.html",
"chars": 49384,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/spinners.html",
"chars": 6610,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/toasts.html",
"chars": 16184,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/components/tooltips.html",
"chars": 4161,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/colors.html",
"chars": 9643,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/covers-2.html",
"chars": 2014,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/covers.html",
"chars": 2776,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/hover-effects.html",
"chars": 4716,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/icons.html",
"chars": 18496,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/images.html",
"chars": 2147,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/shadow.html",
"chars": 14044,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/css/typography.html",
"chars": 17743,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/data/tables.html",
"chars": 25496,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/call-to-action.html",
"chars": 3312,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/content.html",
"chars": 2871,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/counters.html",
"chars": 6835,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/customers.html",
"chars": 5411,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/download.html",
"chars": 5679,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/explore.html",
"chars": 7700,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/faq.html",
"chars": 10196,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/features.html",
"chars": 8146,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/projects.html",
"chars": 7534,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/service.html",
"chars": 8503,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/teams.html",
"chars": 8272,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/design-blocks/testimonials.html",
"chars": 7323,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/form-check.html",
"chars": 12338,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/form-control-2.html",
"chars": 5738,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/form-control.html",
"chars": 25811,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/form-file.html",
"chars": 4779,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/form-input-group.html",
"chars": 48420,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/input.html",
"chars": 54970,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/layout.html",
"chars": 62538,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/overview.html",
"chars": 26428,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/range.html",
"chars": 16542,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/select.html",
"chars": 11524,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/forms/validation.html",
"chars": 65588,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/template/playground-template.html",
"chars": 13315,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "free/template/template.html",
"chars": 16201,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "index.html",
"chars": 7024,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "license",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2022 MDBootstrap\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "package.json",
"chars": 207,
"preview": "{\n \"name\": \"bootstrap-fluent\",\n \"version\": \"1.0.0\",\n \"main\": \"js/mdb.min.js\",\n \"repository\": \"https://github.com/mdb"
}
]
About this extraction
This page contains the full source code of the mdbootstrap/bootstrap-fluent-design GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 70 files (1.2 MB), approximately 279.6k tokens, and a symbol index with 13 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.