mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 17:47:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Solves #886 v4 class and variable prefix renaming from mdb- to bmd-

Browse Source
This commit is contained in:
Kevin Ross 2016-03-21 09:56:51 -05:00
parent 1b4eb1c82c
commit 2bda49b00e
47 changed files with 485 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/nav-docs.html
View File

@ -55,7 +55,7 @@
</div> </div>
{% if group.title == "Migration" %} {% if group.title == "Migration" %}
<div class="bd-toc-item mdb-toc-item-reference"> <div class="bd-toc-item bmd-toc-item-reference">
<div>Bootstrap Reference Documentation</div> <div>Bootstrap Reference Documentation</div>
<hr> <hr>
</div> </div>

2
docs/assets/scss/mdb/_sidebar.scss
View File

@ -1,5 +1,5 @@
.mdb-toc-item-reference { .bmd-toc-item-reference {
padding: .25rem .75rem; padding: .25rem .75rem;
margin-top: 1rem; margin-top: 1rem;
//margin-bottom: 1rem; //margin-bottom: 1rem;

14
docs/examples/dashboard/example.js
View File

@ -1,5 +1,5 @@
function clearDrawerClasses($container) { function clearDrawerClasses($container) {
var classes = ["mdb-drawer-f-l", "mdb-drawer-f-r", "mdb-drawer-f-t", "mdb-drawer-f-b"]; var classes = ["bmd-drawer-f-l", "bmd-drawer-f-r", "bmd-drawer-f-t", "bmd-drawer-f-b"];
$.each(classes, function (index, value) { $.each(classes, function (index, value) {
$container.removeClass(value) $container.removeClass(value)
@ -7,7 +7,7 @@ function clearDrawerClasses($container) {
} }
function setDrawerPosition(position) { function setDrawerPosition(position) {
var $container = $('.mdb-layout-container') var $container = $('.bmd-layout-container')
clearDrawerClasses($container) clearDrawerClasses($container)
$container.addClass(position) $container.addClass(position)
@ -18,26 +18,26 @@ $(document).ready(function() {
$.each(buttons, function (index, position) { $.each(buttons, function (index, position) {
$('#' + position).click(function() { $('#' + position).click(function() {
setDrawerPosition('mdb-' + position) setDrawerPosition('bmd-' + position)
}) })
}) })
// add a toggle for drawer visibility that shows anytime // add a toggle for drawer visibility that shows anytime
$('#drawer-visibility').click(function () { $('#drawer-visibility').click(function () {
var $container = $('.mdb-layout-container') var $container = $('.bmd-layout-container')
// once clicked, just do away with responsive marker // once clicked, just do away with responsive marker
//$container.removeClass('mdb-drawer-in-md') //$container.removeClass('bmd-drawer-in-md')
var $btn = $(this) var $btn = $(this)
var $icon = $btn.find('.material-icons') var $icon = $btn.find('.material-icons')
if ($icon.text() == 'visibility') { if ($icon.text() == 'visibility') {
$container.addClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it close $container.addClass('bmd-drawer-out') // demo only, regardless of the responsive class, we want to force it close
$icon.text('visibility_off') $icon.text('visibility_off')
$btn.attr('title', 'Drawer allow responsive opening') $btn.attr('title', 'Drawer allow responsive opening')
} }
else { else {
$container.removeClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it open $container.removeClass('bmd-drawer-out') // demo only, regardless of the responsive class, we want to force it open
$icon.text('visibility') $icon.text('visibility')
$btn.attr('title', 'Drawer force closed') $btn.attr('title', 'Drawer force closed')
} }

6
docs/examples/dashboard/example.scss
View File

@ -19,7 +19,7 @@ a, a:hover {
color: rgba(255, 255, 255, 0.56); color: rgba(255, 255, 255, 0.56);
} }
.mdb-layout-header { .bmd-layout-header {
background-color: $grey-100; background-color: $grey-100;
color: $grey-600; color: $grey-600;
@ -33,12 +33,12 @@ a, a:hover {
} }
} }
.mdb-layout-content { .bmd-layout-content {
padding-top: .5rem; padding-top: .5rem;
background-color: $grey-100; background-color: $grey-100;
} }
.mdb-layout-drawer { .bmd-layout-drawer {
background-color: $blue-grey-800; background-color: $blue-grey-800;
color: $blue-grey-50; color: $blue-grey-50;

28
docs/examples/dashboard/index.html
View File

@ -8,8 +8,8 @@ js: example.js
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="example.css" rel="stylesheet"> <link href="example.css" rel="stylesheet">
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up"> <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay-md-down bmd-drawer-in-lg-up">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer"> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -22,35 +22,35 @@ js: example.js
</ul> </ul>
<ul class="nav navbar-nav pull-xs-right"> <ul class="nav navbar-nav pull-xs-right">
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer force close" id="drawer-visibility"> <button class="btn bmd-btn-icon" title="Drawer force close" id="drawer-visibility">
<i class="material-icons">visibility</i> <i class="material-icons">visibility</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-f-l"> <button class="btn bmd-btn-icon" title="Drawer left" id="drawer-f-l">
<i class="material-icons">border_left</i> <i class="material-icons">border_left</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-f-r"> <button class="btn bmd-btn-icon" title="Drawer right" id="drawer-f-r">
<i class="material-icons">border_right</i> <i class="material-icons">border_right</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-f-t"> <button class="btn bmd-btn-icon" title="Drawer top" id="drawer-f-t">
<i class="material-icons">border_top</i> <i class="material-icons">border_top</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-f-b"> <button class="btn bmd-btn-icon" title="Drawer bottom" id="drawer-f-b">
<i class="material-icons">border_bottom</i> <i class="material-icons">border_bottom</i>
</button> </button>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<div class="mdb-form-group mdb-collapse-inline pull-xs-right"> <div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search"> <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search">
<i class="material-icons">search</i> <i class="material-icons">search</i>
</button> </button>
<span id="collapse-search" class="collapse"> <span id="collapse-search" class="collapse">
@ -60,7 +60,7 @@ js: example.js
</li> </li>
<li class="nav-item"> <li class="nav-item">
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu" data-toggle="dropdown" aria-haspopup="true" > <button class="btn bmd-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu" data-toggle="dropdown" aria-haspopup="true" >
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu">
@ -74,13 +74,13 @@ js: example.js
</div> </div>
</header> </header>
<div id="my-drawer" class="mdb-layout-drawer"> <div id="my-drawer" class="bmd-layout-drawer">
<header> <header>
<img src="images/user.jpg" class="avatar"> <img src="images/user.jpg" class="avatar">
<div class="account"> <div class="account">
<span>hello@example.com</span> <span>hello@example.com</span>
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="nav-account-menu" data-toggle="dropdown" aria-haspopup="true"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="nav-account-menu" data-toggle="dropdown" aria-haspopup="true">
<i class="material-icons">arrow_drop_down</i> <i class="material-icons">arrow_drop_down</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-account-menu"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-account-menu">
@ -120,7 +120,7 @@ js: example.js
<i class="material-icons" role="presentation">people</i>Social <i class="material-icons" role="presentation">people</i>Social
</a> </a>
<li class="mdb-layout-spacer"></li> <li class="bmd-layout-spacer"></li>
<a class="list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span> <i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
</a> </a>
@ -128,7 +128,7 @@ js: example.js
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
This is an implementation of This is an implementation of

16
docs/examples/drawer/index.html
View File

@ -4,8 +4,8 @@ title: Drawer Template
group: material-design group: material-design
--- ---
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up"> <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay-md-down bmd-drawer-in-lg-up">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#dw-1"> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#dw-1">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -16,8 +16,8 @@ group: material-design
</ul> </ul>
<ul class="nav navbar-nav pull-xs-right"> <ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"> <li class="nav-item">
<div class="mdb-form-group mdb-collapse-inline pull-xs-right"> <div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search-1" aria-controls="collapse-search-1"> <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search-1" aria-controls="collapse-search-1">
<i class="material-icons">search</i> <i class="material-icons">search</i>
</button> </button>
<span id="collapse-search-1" class="collapse"> <span id="collapse-search-1" class="collapse">
@ -27,7 +27,7 @@ group: material-design
</li> </li>
<li class="nav-item"> <li class="nav-item">
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu-1" data-toggle="dropdown" aria-haspopup="true"> <button class="btn bmd-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu-1" data-toggle="dropdown" aria-haspopup="true">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu-1"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu-1">
@ -41,7 +41,7 @@ group: material-design
</div> </div>
</header> </header>
<div id="dw-1" class="mdb-layout-drawer bg-faded"> <div id="dw-1" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -56,14 +56,14 @@ group: material-design
<i class="material-icons" role="presentation">delete</i>Trash <i class="material-icons" role="presentation">delete</i>Trash
</a> </a>
<li class="mdb-layout-spacer"></li> <li class="bmd-layout-spacer"></li>
<a class="list-group-item"> <a class="list-group-item">
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span> <i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
</a> </a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<!-- main content --> <!-- main content -->
<h2>Responsive drawer template</h2> <h2>Responsive drawer template</h2>

6
docs/examples/signin/index.html
View File

@ -13,13 +13,13 @@ js: example.js
<form class="form-signin m-x-auto"> <form class="form-signin m-x-auto">
<h2>Please sign in</h2> <h2>Please sign in</h2>
<div class="form-group"> <div class="form-group">
<label for="inputEmail" class="mdb-label-floating">Email address</label> <label for="inputEmail" class="bmd-label-floating">Email address</label>
<input type="email" id="inputEmail" class="form-control" required autofocus> <input type="email" id="inputEmail" class="form-control" required autofocus>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="inputPassword" class="mdb-label-floating">Password</label> <label for="inputPassword" class="bmd-label-floating">Password</label>
<input type="password" id="inputPassword" class="form-control" required> <input type="password" id="inputPassword" class="form-control" required>
<span class="mdb-help">Use a combination of letters, symbols, and numbers</span> <span class="bmd-help">Use a combination of letters, symbols, and numbers</span>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>

70
docs/material-design/buttons.md
View File

@ -74,25 +74,25 @@ group: material-design
## Floating Action ## Floating Action
{% example html %} {% example html %}
<button type="button" class="btn btn-primary mdb-btn-fab"> <button type="button" class="btn btn-primary bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-secondary mdb-btn-fab"> <button type="button" class="btn btn-secondary bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-success mdb-btn-fab"> <button type="button" class="btn btn-success bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-info mdb-btn-fab"> <button type="button" class="btn btn-info bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-warning mdb-btn-fab"> <button type="button" class="btn btn-warning bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-fab"> <button type="button" class="btn btn-danger bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-fab active"> <button type="button" class="btn btn-danger bmd-btn-fab active">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
{% endexample %} {% endexample %}
@ -100,22 +100,22 @@ group: material-design
### Disabled ### Disabled
{% example html %} {% example html %}
<fieldset disabled> <fieldset disabled>
<button type="button" class="btn btn-primary mdb-btn-fab"> <button type="button" class="btn btn-primary bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-secondary mdb-btn-fab"> <button type="button" class="btn btn-secondary bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-success mdb-btn-fab"> <button type="button" class="btn btn-success bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-info mdb-btn-fab"> <button type="button" class="btn btn-info bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-warning mdb-btn-fab"> <button type="button" class="btn btn-warning bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-fab"> <button type="button" class="btn btn-danger bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
</fieldset> </fieldset>
@ -123,22 +123,22 @@ group: material-design
### Sizes ### Sizes
Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing element of a `mdb-btn-fab` renders a small variation. Using `bmd-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing element of a `bmd-btn-fab` renders a small variation.
{% example html %} {% example html %}
<span class="btn-group-lg"> <span class="btn-group-lg">
<button type="button" class="btn btn-danger mdb-btn-fab"> <button type="button" class="btn btn-danger bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
</span> </span>
<button type="button" class="btn btn-danger mdb-btn-fab"> <button type="button" class="btn btn-danger bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-fab mdb-btn-fab-sm"> <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
<span class="btn-group-sm"> <span class="btn-group-sm">
<button type="button" class="btn btn-danger mdb-btn-fab"> <button type="button" class="btn btn-danger bmd-btn-fab">
<i class="material-icons">grade</i> <i class="material-icons">grade</i>
</button> </button>
</span> </span>
@ -148,25 +148,25 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
## Icon ## Icon
{% example html %} {% example html %}
<button type="button" class="btn btn-primary mdb-btn-icon"> <button type="button" class="btn btn-primary bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-secondary mdb-btn-icon"> <button type="button" class="btn btn-secondary bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-success mdb-btn-icon"> <button type="button" class="btn btn-success bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-info mdb-btn-icon"> <button type="button" class="btn btn-info bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-warning mdb-btn-icon"> <button type="button" class="btn btn-warning bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-icon"> <button type="button" class="btn btn-danger bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-icon active"> <button type="button" class="btn btn-danger bmd-btn-icon active">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
{% endexample %} {% endexample %}
@ -174,22 +174,22 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
### Disabled ### Disabled
{% example html %} {% example html %}
<fieldset disabled> <fieldset disabled>
<button type="button" class="btn btn-primary mdb-btn-icon"> <button type="button" class="btn btn-primary bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-secondary mdb-btn-icon"> <button type="button" class="btn btn-secondary bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-success mdb-btn-icon"> <button type="button" class="btn btn-success bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-info mdb-btn-icon"> <button type="button" class="btn btn-info bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-warning mdb-btn-icon"> <button type="button" class="btn btn-warning bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn btn-danger mdb-btn-icon"> <button type="button" class="btn btn-danger bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
</fieldset> </fieldset>
@ -197,17 +197,17 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
### Sizes ### Sizes
Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing element of a `mdb-btn-icon` renders a small variation. Using `bmd-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing element of a `bmd-btn-icon` renders a small variation.
{% example html %} {% example html %}
<button type="button" class="btn mdb-btn-icon"> <button type="button" class="btn bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<button type="button" class="btn mdb-btn-icon mdb-btn-icon-sm"> <button type="button" class="btn bmd-btn-icon bmd-btn-icon-sm">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<span class="btn-group-sm"> <span class="btn-group-sm">
<button type="button" class="btn mdb-btn-icon"> <button type="button" class="btn bmd-btn-icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
</span> </span>

8
docs/material-design/collapse-inline.md
View File

@ -24,10 +24,10 @@ Below is a list of relevant classes options:
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code>.mdb-collapse-inline</code> <code>.bmd-collapse-inline</code>
</td> </td>
<td> <td>
{% markdown %}Marker class. It is usually included on the `.mdb-form-group` if the collapse scenario has any inputs.{% endmarkdown %} {% markdown %}Marker class. It is usually included on the `.bmd-form-group` if the collapse scenario has any inputs.{% endmarkdown %}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -51,8 +51,8 @@ Below is a list of relevant classes options:
Click the search icon below (on the right). Click the search icon below (on the right).
{% example html %} {% example html %}
<div class="mdb-form-group mdb-collapse-inline pull-xs-right"> <div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search"> <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="material-icons">search</i> <i class="material-icons">search</i>
</button> </button>
<span id="collapse-search" class="collapse"> <span id="collapse-search" class="collapse">

86
docs/material-design/drawers.md
View File

@ -22,17 +22,17 @@ The following examples provide a good starting point:
### Behavior ### Behavior
The default behavior for any drawer is to be _out_ of the frame of view. It can be set _in_ the frame of view either by using using one of the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`. The default behavior for any drawer is to be _out_ of the frame of view. It can be set _in_ the frame of view either by using using one of the gridpoint responsive classes such as `bmd-drawer-in-lg-up`, or by using `bmd-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `bmd-drawer-out`.
### Markup ### Markup
In order to use the drawer component you must use MDB's flex based layout structure. If this layout structure is not a direct child of `<body>`, be sure that the containing element has set `position: relative` as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header. In order to use the drawer component you must use MDB's flex based layout structure. If this layout structure is not a direct child of `<body>`, be sure that the containing element has set `position: relative` as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header.
{% highlight html %} {% highlight html %}
<div class="mdb-layout-container"> <div class="bmd-layout-container">
<header class="mdb-layout-header"> </header> <header class="bmd-layout-header"> </header>
<div class="mdb-layout-drawer"> </div> <div class="bmd-layout-drawer"> </div>
<main class="mdb-layout-content"> </main> <main class="bmd-layout-content"> </main>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -53,8 +53,8 @@ A manual drawer toggle can be integrated with data attributes. For responsive d
The default behavior is for content to be pushed. The default behavior is for content to be pushed.
{% example html id=drawer-s1 %} {% example html id=drawer-s1 %}
<div class="mdb-layout-container mdb-drawer-f-l"> <div class="bmd-layout-container bmd-drawer-f-l">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -65,7 +65,7 @@ The default behavior is for content to be pushed.
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-s1" class="mdb-layout-drawer bg-faded"> <div id="dw-s1" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -75,7 +75,7 @@ The default behavior is for content to be pushed.
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<p>Main content</p> <p>Main content</p>
</div> </div>
@ -84,11 +84,11 @@ The default behavior is for content to be pushed.
{% endexample %} {% endexample %}
### Overlay ### Overlay
Optional behavior will overlay the drawer and provide a backdrop. This can be marked with `mdb-drawer-overlay` to always overlay, or you can use a responsive class such as `mdb-drawer-overlay-md-down`. Optional behavior will overlay the drawer and provide a backdrop. This can be marked with `bmd-drawer-overlay` to always overlay, or you can use a responsive class such as `bmd-drawer-overlay-md-down`.
{% example html id=drawer-s2 %} {% example html id=drawer-s2 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay"> <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -99,7 +99,7 @@ Optional behavior will overlay the drawer and provide a backdrop. This can be m
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-s2" class="mdb-layout-drawer bg-faded"> <div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -109,7 +109,7 @@ Optional behavior will overlay the drawer and provide a backdrop. This can be m
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<p>Main content</p> <p>Main content</p>
</div> </div>
@ -119,7 +119,7 @@ Optional behavior will overlay the drawer and provide a backdrop. This can be m
## Positions ## Positions
The following positioning marker classes should be placed on the `mdb-layout-container` element: The following positioning marker classes should be placed on the `bmd-layout-container` element:
<table> <table>
<thead> <thead>
<tr> <tr>
@ -130,7 +130,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code>.mdb-drawer-f-t</code> <code>.bmd-drawer-f-t</code>
</td> </td>
<td> <td>
{% markdown %}Fixed top{% endmarkdown %} {% markdown %}Fixed top{% endmarkdown %}
@ -138,7 +138,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-drawer-f-r</code> <code>.bmd-drawer-f-r</code>
</td> </td>
<td> <td>
{% markdown %}Fixed right{% endmarkdown %} {% markdown %}Fixed right{% endmarkdown %}
@ -146,7 +146,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-drawer-f-b</code> <code>.bmd-drawer-f-b</code>
</td> </td>
<td> <td>
{% markdown %}Fixed bottom{% endmarkdown %} {% markdown %}Fixed bottom{% endmarkdown %}
@ -154,7 +154,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-drawer-f-l</code> <code>.bmd-drawer-f-l</code>
</td> </td>
<td> <td>
{% markdown %}Fixed left{% endmarkdown %} {% markdown %}Fixed left{% endmarkdown %}
@ -167,8 +167,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed left ### Fixed left
{% example html id=drawer-p1 %} {% example html id=drawer-p1 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay"> <div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -179,7 +179,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p1" class="mdb-layout-drawer bg-faded"> <div id="dw-p1" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -189,7 +189,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<!-- main content --> <!-- main content -->
</div> </div>
@ -200,8 +200,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed right ### Fixed right
{% example html id=drawer-p2 %} {% example html id=drawer-p2 %}
<div class="mdb-layout-container mdb-drawer-f-r mdb-drawer-overlay"> <div class="bmd-layout-container bmd-drawer-f-r bmd-drawer-overlay">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -212,7 +212,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p2" class="mdb-layout-drawer bg-faded"> <div id="dw-p2" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -222,7 +222,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<!-- main content --> <!-- main content -->
</div> </div>
@ -233,8 +233,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed top ### Fixed top
{% example html id=drawer-p3 %} {% example html id=drawer-p3 %}
<div class="mdb-layout-container mdb-drawer-f-t mdb-drawer-overlay"> <div class="bmd-layout-container bmd-drawer-f-t bmd-drawer-overlay">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -245,7 +245,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p3" class="mdb-layout-drawer bg-faded"> <div id="dw-p3" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -255,7 +255,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<!-- main content --> <!-- main content -->
</div> </div>
@ -266,8 +266,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed bottom ### Fixed bottom
{% example html id=drawer-p4 %} {% example html id=drawer-p4 %}
<div class="mdb-layout-container mdb-drawer-f-b mdb-drawer-overlay"> <div class="bmd-layout-container bmd-drawer-f-b bmd-drawer-overlay">
<header class="mdb-layout-header"> <header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded"> <div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4"> <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4">
<span class="sr-only">Toggle drawer</span> <span class="sr-only">Toggle drawer</span>
@ -278,7 +278,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p4" class="mdb-layout-drawer bg-faded"> <div id="dw-p4" class="bmd-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -288,7 +288,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<a class="list-group-item">Link 3</a> <a class="list-group-item">Link 3</a>
</ul> </ul>
</div> </div>
<main class="mdb-layout-content"> <main class="bmd-layout-content">
<div class="container"> <div class="container">
<!-- main content --> <!-- main content -->
</div> </div>
@ -308,14 +308,14 @@ Globally, you may alter the size of _x_ vs _y_ drawers with the following variab
### Custom responsive drawer ### Custom responsive drawer
The following will create _x_ drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as `mdb-drawer-in-lg-up`: The following will create _x_ drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as `bmd-drawer-in-lg-up`:
{% highlight scss %} {% highlight scss %}
.kitchen-sink-drawer { .kitchen-sink-drawer {
$custom-size: 500px; $custom-size: 500px;
@include mdb-drawer-x-out($custom-size); @include bmd-drawer-x-out($custom-size);
&:not(.mdb-drawer-out) { &:not(.bmd-drawer-out) {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-drawer-x-in-up($custom-size, $breakpoint); @include bmd-drawer-x-in-up($custom-size, $breakpoint);
} }
} }
} }
@ -323,14 +323,14 @@ The following will create _x_ drawers (left/right) at the size of 500px that wil
### Custom static drawer ### Custom static drawer
The following generates a custom drawer at the size of 500px that is _out_ by default and can be triggered _in_ with `mdb-drawer-in`. The following generates a custom drawer at the size of 500px that is _out_ by default and can be triggered _in_ with `bmd-drawer-in`.
{% highlight scss %} {% highlight scss %}
.kitchen-sink-drawer-static { .kitchen-sink-drawer-static {
$custom-size: 500px; $custom-size: 500px;
@include mdb-drawer-x-out($custom-size); // closed by default @include bmd-drawer-x-out($custom-size); // closed by default
@include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
@include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
} }
{% endhighlight %} {% endhighlight %}

56
docs/material-design/forms.md
View File

@ -11,20 +11,20 @@ Bootstrap provides several form control styles, layout options, and custom compo
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
Form controls flavored by Material Design for Bootstrap customizations such as `mdb-label-floating`. Form controls flavored by Material Design for Bootstrap customizations such as `bmd-label-floating`.
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Email address</label> <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputPassword1" class="mdb-label-floating">Password</label> <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"> <input type="password" class="form-control" id="exampleInputPassword1">
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleSelect1" class="mdb-label-floating">Example select</label> <label for="exampleSelect1" class="bmd-label-floating">Example select</label>
<select class="form-control" id="exampleSelect1"> <select class="form-control" id="exampleSelect1">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -34,7 +34,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleSelect2" class="mdb-label-floating">Example multiple select</label> <label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2"> <select multiple class="form-control" id="exampleSelect2">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -44,11 +44,11 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleTextarea" class="mdb-label-floating">Example textarea</label> <label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputFile" class="mdb-label-floating">File input</label> <label for="exampleInputFile" class="bmd-label-floating">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile"> <input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset> </fieldset>
@ -95,13 +95,13 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code>.mdb-form-group</code> <code>.bmd-form-group</code>
</td> </td>
<td> <td>
Any group of form controls (e.g. combination of label/input). Any group of form controls (e.g. combination of label/input).
</td> </td>
<td> <td>
{% markdown %}This is automatically added by javascript, but if your code is templated, adding `.mdb-form-group` {% markdown %}This is automatically added by javascript, but if your code is templated, adding `.bmd-form-group`
to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not
add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the
same `.form-group`.{% endmarkdown %} same `.form-group`.{% endmarkdown %}
@ -109,10 +109,10 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-form-group-sm</code> <code>.bmd-form-group-sm</code>
</td> </td>
<td> <td>
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the smaller variation.{% endmarkdown %} {% markdown %}Added to the `.bmd-form-group`, this will render the combination label/input/help in the smaller variation.{% endmarkdown %}
</td> </td>
<td> <td>
{% markdown %}{% endmarkdown %} {% markdown %}{% endmarkdown %}
@ -120,10 +120,10 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-form-group-lg</code> <code>.bmd-form-group-lg</code>
</td> </td>
<td> <td>
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the larger variation.{% endmarkdown %} {% markdown %}Added to the `.bmd-form-group`, this will render the combination label/input/help in the larger variation.{% endmarkdown %}
</td> </td>
<td> <td>
{% markdown %}{% endmarkdown %} {% markdown %}{% endmarkdown %}
@ -131,13 +131,13 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-help</code> <code>.bmd-help</code>
</td> </td>
<td> <td>
Any help text Any help text
</td> </td>
<td> <td>
{% markdown %}Mark any help text next to an input with `.mdb-help` to gain behaviors such as showing upon focus.{% endmarkdown %} {% markdown %}Mark any help text next to an input with `.bmd-help` to gain behaviors such as showing upon focus.{% endmarkdown %}
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -146,22 +146,22 @@ Below is a complete list of options supported by Material Design for Bootstrap a
## Form groups ## Form groups
The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing, The `.bmd-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing,
the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`. the only purpose of the `.bmd-form-group` is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the `.bmd-form-group`.
The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard The `.bmd-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining markup. If your code is templated, you may want to add `.bmd-form-group` to the markup directly to prevent any rendering churn from the javascript determining
and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare or complex cases and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.bmd-form-group`, so in rare or complex cases
you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior. you may need to wrap your markup in an `.bmd-form-group` to get appropriate focus/hover behavior.
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) --> <fieldset class="form-group"> <!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput" class="mdb-label-floating">Example label</label> <label for="formGroupExampleInput" class="bmd-label-floating">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput"> <input type="text" class="form-control" id="formGroupExampleInput">
</fieldset> </fieldset>
<fieldset class="form-group mdb-form-group"> <!-- manually specified --> <fieldset class="form-group bmd-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2" class="mdb-label-floating">Another label</label> <label for="formGroupExampleInput2" class="bmd-label-floating">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2"> <input type="text" class="form-control" id="formGroupExampleInput2">
</fieldset> </fieldset>
</form> </form>
@ -182,11 +182,11 @@ Because of this, you may need to manually address the width and alignment of ind
{% example html %} {% example html %}
<form class="form-inline"> <form class="form-inline">
<div class="form-group"> <div class="form-group">
<label for="exampleInputName2" class="mdb-label-floating">Name</label> <label for="exampleInputName2" class="bmd-label-floating">Name</label>
<input type="text" class="form-control" id="exampleInputName2"> <input type="text" class="form-control" id="exampleInputName2">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail2" class="mdb-label-floating">Email</label> <label for="exampleInputEmail2" class="bmd-label-floating">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2"> <input type="email" class="form-control" id="exampleInputEmail2">
</div> </div>
<button type="submit" class="btn btn-primary">Send invitation</button> <button type="submit" class="btn btn-primary">Send invitation</button>

20
docs/material-design/labels.md
View File

@ -16,7 +16,7 @@ Below is a complete list of `<label>` class options supported by Material Design
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code>.mdb-label-static</code> <code>.bmd-label-static</code>
</td> </td>
<td> <td>
{% markdown %}Statically positioned above the input{% endmarkdown %} {% markdown %}Statically positioned above the input{% endmarkdown %}
@ -24,7 +24,7 @@ Below is a complete list of `<label>` class options supported by Material Design
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-label-placeholder</code> <code>.bmd-label-placeholder</code>
</td> </td>
<td> <td>
{% markdown %} {% markdown %}
@ -39,7 +39,7 @@ Renders a `<label>` as a placeholder
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-label-floating</code> <code>.bmd-label-floating</code>
</td> </td>
<td> <td>
{% markdown %} {% markdown %}
@ -47,7 +47,7 @@ Animated combination of placeholder and label:
- _focused_: label animates from placeholder to static label - _focused_: label animates from placeholder to static label
- _unfocused & empty_: placeholder - _unfocused & empty_: placeholder
- _unfocused & filled_: renders the same as `.mdb-label-static` - _unfocused & filled_: renders the same as `.bmd-label-static`
{% endmarkdown %} {% endmarkdown %}
</td> </td>
</tr> </tr>
@ -64,19 +64,19 @@ Animated combination of placeholder and label:
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-static">label-static</label> <label for="exampleInputEmail1" class="bmd-label-static">label-static</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="placeholder text"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="placeholder text">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">label-floating</label> <label for="exampleInputEmail1" class="bmd-label-floating">label-floating</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-placeholder">label-placeholder</label> <label for="exampleInputEmail1" class="bmd-label-placeholder">label-placeholder</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
</form> </form>
{% endexample %} {% endexample %}

36
docs/material-design/list-groups.md
View File

@ -30,7 +30,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
### Dense ### Dense
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group bmd-list-group-sm">
<li class="list-group-item">Text</li> <li class="list-group-item">Text</li>
<a href="#" class="list-group-item">Link item</a> <a href="#" class="list-group-item">Link item</a>
<button type="button" class="list-group-item">Button item</button> <button type="button" class="list-group-item">Button item</button>
@ -94,19 +94,19 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
@ -117,21 +117,21 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
### Dense ### Dense
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group bmd-list-group-sm">
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
@ -145,7 +145,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<ul class="list-group"> <ul class="list-group">
<a class="list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon left</p> <p class="list-group-item-text">Icon left</p>
</div> </div>
@ -153,7 +153,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<a class="list-group-item"> <a class="list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon left</p> <p class="list-group-item-text">Icon left</p>
</div> </div>
@ -161,7 +161,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<a class="list-group-item"> <a class="list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icons left and right</p> <p class="list-group-item-text">Icons left and right</p>
</div> </div>
@ -169,7 +169,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon right</p> <p class="list-group-item-text">Icon right</p>
</div> </div>
@ -177,7 +177,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</a> </a>
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Label pill to the right</p> <p class="list-group-item-text">Label pill to the right</p>
</div> </div>
@ -193,13 +193,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<a class="list-group-item"> <a class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">Linked list group item heading</p> <p class="list-group-item-heading">Linked list group item heading</p>
<p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
</div> </div>
</a> </a>
<li class="list-group-item"> <li class="list-group-item">
<div class="mdb-list-group-col"> <div class="bmd-list-group-col">
<p class="list-group-item-heading">Text list group item heading</p> <p class="list-group-item-heading">Text list group item heading</p>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
</div> </div>
@ -231,7 +231,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-list-group-col</code> <code>.bmd-list-group-col</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
@ -242,13 +242,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.mdb-list-group-sm</code> <code>.bmd-list-group-sm</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
</td> </td>
<td> <td>
{% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %} {% markdown %}Use on `.bmd-list-group` for the dense list display{% endmarkdown %}
</td> </td>
</tr> </tr>

28
docs/material-design/menus.md
View File

@ -16,10 +16,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<!-- icon with buttons --> <!-- icon with buttons -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-icon</code> with menu buttons An <code>.bmd-btn-icon</code> with menu buttons
<div class="dropdown-menu" aria-labelledby="ex1"> <div class="dropdown-menu" aria-labelledby="ex1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item disabled" type="button">Another action</button> <button class="dropdown-item disabled" type="button">Another action</button>
@ -29,10 +29,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- icon with links --> <!-- icon with links -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-icon</code> with menu links An <code>.bmd-btn-icon</code> with menu links
<div class="dropdown-menu" aria-labelledby="ex2"> <div class="dropdown-menu" aria-labelledby="ex2">
<a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
@ -42,10 +42,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab-sm --> <!-- fab-sm -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab mdb-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab-sm</code> An <code>.bmd-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="ex3"> <div class="dropdown-menu" aria-labelledby="ex3">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
@ -54,10 +54,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab --> <!-- fab -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab</code> An <code>.bmd-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="ex4"> <div class="dropdown-menu" aria-labelledby="ex4">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
@ -83,7 +83,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower left side ### Lower left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu" aria-labelledby="ll1"> <div class="dropdown-menu" aria-labelledby="ll1">
@ -99,7 +99,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower right side ### Lower right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1">
@ -115,7 +115,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top left side ### Top left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1"> <div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1">
@ -131,7 +131,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top right side ### Top right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1"> <div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1">
@ -152,7 +152,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1">
@ -167,7 +167,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2">

20
docs/material-design/test.md
View File

@ -8,9 +8,9 @@ group: material-design
{% example html id=drawer-1 %} {% example html id=drawer-1 %}
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Email address</label> <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</div> </div>
@ -30,29 +30,29 @@ group: material-design
<h2>sm</h2> <h2>sm</h2>
<div class="mdb-form-group-sm form-group has-success"> <div class="bmd-form-group-sm form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label> <label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1"> <input type="text" class="form-control form-control-success" id="inputSuccess1">
</div> </div>
<div class="mdb-form-group-sm form-group has-warning"> <div class="bmd-form-group-sm form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label> <label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1"> <input type="text" class="form-control form-control-warning" id="inputWarning1">
</div> </div>
<div class="mdb-form-group-sm form-group has-danger"> <div class="bmd-form-group-sm form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label> <label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1"> <input type="text" class="form-control form-control-danger" id="inputDanger1">
</div> </div>
<h2>lg</h2> <h2>lg</h2>
<div class="mdb-form-group-lg form-group has-success"> <div class="bmd-form-group-lg form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label> <label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1"> <input type="text" class="form-control form-control-success" id="inputSuccess1">
</div> </div>
<div class="mdb-form-group-lg form-group has-warning"> <div class="bmd-form-group-lg form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label> <label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1"> <input type="text" class="form-control form-control-warning" id="inputWarning1">
</div> </div>
<div class="mdb-form-group-lg form-group has-danger"> <div class="bmd-form-group-lg form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label> <label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1"> <input type="text" class="form-control form-control-danger" id="inputDanger1">
</div> </div>
@ -81,11 +81,11 @@ group: material-design
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail4" class="mdb-label-floating">Email address disabled</label> <label for="exampleInputEmail4" class="bmd-label-floating">Email address disabled</label>
<input type="email" class="form-control" id="exampleInputEmail4" disabled> <input type="email" class="form-control" id="exampleInputEmail4" disabled>
</div> </div>
<fieldset class="form-group" disabled> <fieldset class="form-group" disabled>
<label for="exampleInputEmail5" class="mdb-label-floating">Email address fieldset disabled</label> <label for="exampleInputEmail5" class="bmd-label-floating">Email address fieldset disabled</label>
<input type="email" class="form-control" id="exampleInputEmail5"> <input type="email" class="form-control" id="exampleInputEmail5">
</fieldset> </fieldset>

18
docs/migration.md
View File

@ -31,7 +31,7 @@ Here are the big ticket items you'll want to be aware of when moving from MDB v3
- Switched from `px` to `rem` as our primary CSS unit. - Switched from `px` to `rem` as our primary CSS unit.
- Global font-size increased from `14px` to `16px`. - Global font-size increased from `14px` to `16px`.
- Switched Javascript to ES6 classes - Switched Javascript to ES6 classes
- Globally switched MDB variables and classes to the prefix `mdb-` to avoid confusion with Bootstrap variables. - Globally switched MDB variables and classes to the prefix `bmd-` to avoid confusion with Bootstrap variables.
- Added strong scss-lint and eslint rules from Bootstrap - Added strong scss-lint and eslint rules from Bootstrap
- Adopted Bootstrap project organization and Build structure - Adopted Bootstrap project organization and Build structure
- Reference documentation is now synced from Bootstrap, rendered with MDB to show default rendering examples - Reference documentation is now synced from Bootstrap, rendered with MDB to show default rendering examples
@ -63,26 +63,26 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
### [Forms](../material-design/forms) ### [Forms](../material-design/forms)
- Refactored with much less code now that we are customizing Bootstrap - Refactored with much less code now that we are customizing Bootstrap
- Simpler selectors - Simpler selectors
- Introduced `.mdb-form-group` to provide demarcation for label/input combinations, disconnecting it explicitly from `.form-group` so that they can be used independently. - Introduced `.bmd-form-group` to provide demarcation for label/input combinations, disconnecting it explicitly from `.form-group` so that they can be used independently.
- Spec review for sizing - Spec review for sizing
- Bootstrap removed `.help-block`, MDB added `.mdb-help` class to mark added behaviors. - Bootstrap removed `.help-block`, MDB added `.bmd-help` class to mark added behaviors.
- Inverted marker class to use `.is-filled` instead of `.is-empty` for simpler css matches - Inverted marker class to use `.is-filled` instead of `.is-empty` for simpler css matches
- Bootstrap removed `.form-group-sm` and `.form-group-lg`. `.mdb-form-group-*` variants added to address sizing combinations of label/input/help - Bootstrap removed `.form-group-sm` and `.form-group-lg`. `.bmd-form-group-*` variants added to address sizing combinations of label/input/help
- V3 MDB `toggle` is now `mdb-switch` for more consistent naming with the spec - V3 MDB `toggle` is now `bmd-switch` for more consistent naming with the spec
- TODO - File Input - TODO - File Input
### [Labels](../material-design/labels) ### [Labels](../material-design/labels)
- Labels are now (once again) set as a class on the `label` element. - Labels are now (once again) set as a class on the `label` element.
- Use of `mdb-` prefixes. - Use of `bmd-` prefixes.
### [Buttons](../material-design/buttons) ### [Buttons](../material-design/buttons)
- Bootstrap renamed `.btn-default` to `.btn-secondary`. - Bootstrap renamed `.btn-default` to `.btn-secondary`.
- Utilized Bootstrap mixins for plain/hover/focus/active - Utilized Bootstrap mixins for plain/hover/focus/active
- Introduced mixin `mdb-hover-focus-active` to address `.active` in addition to Bootstraps `hover-focus-active` - Introduced mixin `bmd-hover-focus-active` to address `.active` in addition to Bootstraps `hover-focus-active`
- Refactored shadow behaviors, now more consistent - Refactored shadow behaviors, now more consistent
- Changed `btn-fab` to `mdb-btn-fab` to denote MDB only component - Changed `btn-fab` to `bmd-btn-fab` to denote MDB only component
- `btn-fab-mini` is now `btn-fab-sm` for consistency with Bootstrap size naming - `btn-fab-mini` is now `btn-fab-sm` for consistency with Bootstrap size naming
- Introduced shadow behaviors to `mdb-btn-fab`. Spec is silent on this. - Introduced shadow behaviors to `bmd-btn-fab`. Spec is silent on this.
### Navs ### Navs

4
js/src/base.js
View File

@ -3,7 +3,7 @@ import Util from './util'
const Base = (($) => { const Base = (($) => {
const ClassName = { const ClassName = {
MDB_FORM_GROUP: 'mdb-form-group', MDB_FORM_GROUP: 'bmd-form-group',
IS_FILLED: 'is-filled', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused'
} }
@ -64,7 +64,7 @@ const Base = (($) => {
this.$mdbFormGroup.addClass(ClassName.IS_FILLED) this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
} }
// Find mdb-form-group // Find bmd-form-group
findMdbFormGroup(raiseError = true) { findMdbFormGroup(raiseError = true) {
let mfg = this.$element.closest(Selector.MDB_FORM_GROUP) let mfg = this.$element.closest(Selector.MDB_FORM_GROUP)
if (mfg.length === 0 && raiseError) { if (mfg.length === 0 && raiseError) {

36
js/src/baseInput.js
View File

@ -5,11 +5,11 @@ const BaseInput = (($) => {
const ClassName = { const ClassName = {
FORM_GROUP: 'form-group', FORM_GROUP: 'form-group',
MDB_FORM_GROUP: 'mdb-form-group', MDB_FORM_GROUP: 'bmd-form-group',
MDB_LABEL: 'mdb-label', MDB_LABEL: 'bmd-label',
MDB_LABEL_STATIC: 'mdb-label-static', MDB_LABEL_STATIC: 'bmd-label-static',
MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder', MDB_LABEL_PLACEHOLDER: 'bmd-label-placeholder',
MDB_LABEL_FLOATING: 'mdb-label-floating', MDB_LABEL_FLOATING: 'bmd-label-floating',
HAS_DANGER: 'has-danger', HAS_DANGER: 'has-danger',
IS_FILLED: 'is-filled', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused'
@ -34,7 +34,7 @@ const BaseInput = (($) => {
label: { label: {
required: false, required: false,
// Prioritized find order for resolving the label to be used as an mdb-label if not specified in the markup // Prioritized find order for resolving the label to be used as an bmd-label if not specified in the markup
// - a function(thisComponent); or // - a function(thisComponent); or
// - a string selector used like $mdbFormGroup.find(selector) // - a string selector used like $mdbFormGroup.find(selector)
// //
@ -52,8 +52,8 @@ const BaseInput = (($) => {
} }
const FormControlSizeMarkers = { const FormControlSizeMarkers = {
'form-control-lg': 'mdb-form-group-lg', 'form-control-lg': 'bmd-form-group-lg',
'form-control-sm': 'mdb-form-group-sm' 'form-control-sm': 'bmd-form-group-sm'
} }
/** /**
@ -81,19 +81,19 @@ const BaseInput = (($) => {
// Enforce required classes for a consistent rendering // Enforce required classes for a consistent rendering
this._rejectWithoutRequiredClasses() this._rejectWithoutRequiredClasses()
// Resolve the form-group first, it will be used for mdb-form-group if possible // Resolve the form-group first, it will be used for bmd-form-group if possible
// note: different components have different rules // note: different components have different rules
this.$formGroup = this.findFormGroup(this.config.formGroup.required) this.$formGroup = this.findFormGroup(this.config.formGroup.required)
// Will add mdb-form-group to form-group or create an mdb-form-group // Will add bmd-form-group to form-group or create an bmd-form-group
// Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid // Performance Note: for those forms that are really performance driven, create the markup with the .bmd-form-group to avoid
// rendering changes once added. // rendering changes once added.
this.$mdbFormGroup = this.resolveMdbFormGroup() this.$mdbFormGroup = this.resolveMdbFormGroup()
// Resolve and mark the mdbLabel if necessary as defined by the config // Resolve and mark the mdbLabel if necessary as defined by the config
this.$mdbLabel = this.resolveMdbLabel() this.$mdbLabel = this.resolveMdbLabel()
// Signal to the mdb-form-group that a form-control-* variation is being used // Signal to the bmd-form-group that a form-control-* variation is being used
this.resolveMdbFormGroupSizing() this.resolveMdbFormGroupSizing()
this.addFocusListener() this.addFocusListener()
@ -169,7 +169,7 @@ const BaseInput = (($) => {
return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '') return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '')
} }
// Will add mdb-form-group to form-group or create a mdb-form-group if necessary // Will add bmd-form-group to form-group or create a bmd-form-group if necessary
resolveMdbFormGroup() { resolveMdbFormGroup() {
let mfg = this.findMdbFormGroup(false) let mfg = this.findMdbFormGroup(false)
if (mfg === undefined || mfg.length === 0) { if (mfg === undefined || mfg.length === 0) {
@ -182,7 +182,7 @@ const BaseInput = (($) => {
this.$formGroup.addClass(ClassName.MDB_FORM_GROUP) this.$formGroup.addClass(ClassName.MDB_FORM_GROUP)
// OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable // OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable
// A form-group does exist, so add an mdb-form-group wrapping it's internal contents // A form-group does exist, so add an bmd-form-group wrapping it's internal contents
//fg.wrapInner(this.config.mdbFormGroup.template) //fg.wrapInner(this.config.mdbFormGroup.template)
} }
@ -198,7 +198,7 @@ const BaseInput = (($) => {
return this.$element return this.$element
} }
// Will add mdb-label to mdb-form-group if not already specified // Will add bmd-label to bmd-form-group if not already specified
resolveMdbLabel() { resolveMdbLabel() {
let label = this.$mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD) let label = this.$mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD)
@ -217,7 +217,7 @@ const BaseInput = (($) => {
return label return label
} }
// Find mdb-label variant based on the config selectors // Find bmd-label variant based on the config selectors
findMdbLabel(raiseError = true) { findMdbLabel(raiseError = true) {
let label = null let label = null
@ -240,7 +240,7 @@ const BaseInput = (($) => {
return label return label
} }
// Find mdb-form-group // Find bmd-form-group
findFormGroup(raiseError = true) { findFormGroup(raiseError = true) {
let fg = this.$element.closest(Selector.FORM_GROUP) let fg = this.$element.closest(Selector.FORM_GROUP)
if (fg.length === 0 && raiseError) { if (fg.length === 0 && raiseError) {
@ -249,7 +249,7 @@ const BaseInput = (($) => {
return fg return fg
} }
// Due to the interconnected nature of labels/inputs/help-blocks, signal the mdb-form-group-* size variation based on // Due to the interconnected nature of labels/inputs/help-blocks, signal the bmd-form-group-* size variation based on
// a found form-control-* size // a found form-control-* size
resolveMdbFormGroupSizing() { resolveMdbFormGroupSizing() {
if (!this.config.convertInputSizeVariations) { if (!this.config.convertInputSizeVariations) {

16
js/src/baseLayout.js
View File

@ -4,9 +4,9 @@ import Util from './util'
const BaseLayout = (($) => { const BaseLayout = (($) => {
const ClassName = { const ClassName = {
CANVAS: 'mdb-layout-canvas', CANVAS: 'bmd-layout-canvas',
CONTAINER: 'mdb-layout-container', CONTAINER: 'bmd-layout-container',
BACKDROP: `mdb-layout-backdrop` BACKDROP: `bmd-layout-backdrop`
} }
const Selector = { const Selector = {
@ -52,7 +52,7 @@ const BaseLayout = (($) => {
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// protected // protected
// Will wrap container in mdb-layout-canvas if necessary // Will wrap container in bmd-layout-canvas if necessary
resolveCanvas() { resolveCanvas() {
let bd = this.findCanvas(false) let bd = this.findCanvas(false)
if (bd === undefined || bd.length === 0) { if (bd === undefined || bd.length === 0) {
@ -66,7 +66,7 @@ const BaseLayout = (($) => {
return bd return bd
} }
// Find closest mdb-layout-container based on the given context // Find closest bmd-layout-container based on the given context
findCanvas(raiseError = true, context = this.$container) { findCanvas(raiseError = true, context = this.$container) {
let canvas = context.closest(Selector.CANVAS) let canvas = context.closest(Selector.CANVAS)
if (canvas.length === 0 && raiseError) { if (canvas.length === 0 && raiseError) {
@ -75,7 +75,7 @@ const BaseLayout = (($) => {
return canvas return canvas
} }
// Will add mdb-layout-backdrop to mdb-layout-container if necessary // Will add bmd-layout-backdrop to bmd-layout-container if necessary
resolveBackdrop() { resolveBackdrop() {
let bd = this.findBackdrop(false) let bd = this.findBackdrop(false)
if (bd === undefined || bd.length === 0) { if (bd === undefined || bd.length === 0) {
@ -89,7 +89,7 @@ const BaseLayout = (($) => {
return bd return bd
} }
// Find closest mdb-layout-container based on the given context // Find closest bmd-layout-container based on the given context
findBackdrop(raiseError = true, context = this.$container) { findBackdrop(raiseError = true, context = this.$container) {
let backdrop = context.find(`> ${Selector.BACKDROP}`) let backdrop = context.find(`> ${Selector.BACKDROP}`)
if (backdrop.length === 0 && raiseError) { if (backdrop.length === 0 && raiseError) {
@ -98,7 +98,7 @@ const BaseLayout = (($) => {
return backdrop return backdrop
} }
// Find closest mdb-layout-container based on the given context // Find closest bmd-layout-container based on the given context
findContainer(raiseError = true, context = this.$element) { findContainer(raiseError = true, context = this.$element) {
let container = context.closest(Selector.CONTAINER) let container = context.closest(Selector.CONTAINER)
if (container.length === 0 && raiseError) { if (container.length === 0 && raiseError) {

2
js/src/baseSelection.js
View File

@ -12,7 +12,7 @@ const BaseSelection = (($) => {
label: { label: {
required: false required: false
// Prioritized find order for resolving the label to be used as an mdb-label if not specified in the markup // Prioritized find order for resolving the label to be used as an bmd-label if not specified in the markup
// - a function(thisComponent); or // - a function(thisComponent); or
// - a string selector used like $mdbFormGroup.find(selector) // - a string selector used like $mdbFormGroup.find(selector)
// //

6
js/src/bootstrapMaterialDesign.js vendored
View File

@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => {
global: { global: {
validate: false, validate: false,
label: { label: {
className: 'mdb-label-static' // default style of label to be used if not specified in the html markup className: 'bmd-label-static' // default style of label to be used if not specified in the html markup
} }
}, },
autofill: { autofill: {
@ -45,10 +45,10 @@ const BootstrapMaterialDesign = (($) => {
selector: 'label.checkbox-inline > input[type=checkbox]' selector: 'label.checkbox-inline > input[type=checkbox]'
}, },
collapseInline: { collapseInline: {
selector: '.mdb-collapse-inline [data-toggle="collapse"]' selector: '.bmd-collapse-inline [data-toggle="collapse"]'
}, },
drawer: { drawer: {
selector: '.mdb-layout-drawer' selector: '.bmd-layout-drawer'
}, },
file: { file: {
selector: 'input[type=file]' selector: 'input[type=file]'

2
js/src/checkboxInline.js
View File

@ -14,7 +14,7 @@ const CheckboxInline = (($) => {
const Default = { const Default = {
mdbFormGroup: { mdbFormGroup: {
create: false, // no mdb-form-group creation if form-group not present. It messes with the layout. create: false, // no bmd-form-group creation if form-group not present. It messes with the layout.
required: false required: false
} }
} }

2
js/src/collapseInline.js
View File

@ -34,7 +34,7 @@ const CollapseInline = (($) => {
class CollapseInline extends Base { class CollapseInline extends Base {
// $element is expected to be the trigger // $element is expected to be the trigger
// i.e. <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#search-field" aria-expanded="false" aria-controls="search-field"> // i.e. <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#search-field" aria-expanded="false" aria-controls="search-field">
constructor($element, config) { constructor($element, config) {
super($element, $.extend(true, {}, Default, config)) super($element, $.extend(true, {}, Default, config))
this.$mdbFormGroup = this.findMdbFormGroup(true) this.$mdbFormGroup = this.findMdbFormGroup(true)

12
js/src/drawer.js
View File

@ -20,10 +20,10 @@ const Drawer = (($) => {
const ClassName = { const ClassName = {
IN: 'in', IN: 'in',
DRAWER_IN: `mdb-drawer-in`, DRAWER_IN: `bmd-drawer-in`,
DRAWER_OUT: `mdb-drawer-out`, DRAWER_OUT: `bmd-drawer-out`,
DRAWER: 'mdb-layout-drawer', DRAWER: 'bmd-layout-drawer',
CONTAINER: 'mdb-layout-container' CONTAINER: 'bmd-layout-container'
} }
const Default = { const Default = {
@ -38,7 +38,7 @@ const Drawer = (($) => {
class Drawer extends BaseLayout { class Drawer extends BaseLayout {
// $element is expected to be the trigger // $element is expected to be the trigger
// i.e. <button class="btn mdb-btn-icon" for="search" data-toggle="drawer" data-target="#my-side-nav-drawer" aria-expanded="false" aria-controls="my-side-nav-drawer"> // i.e. <button class="btn bmd-btn-icon" for="search" data-toggle="drawer" data-target="#my-side-nav-drawer" aria-expanded="false" aria-controls="my-side-nav-drawer">
constructor($element, config) { constructor($element, config) {
super($element, $.extend(true, {}, Default, config)) super($element, $.extend(true, {}, Default, config))
@ -97,7 +97,7 @@ const Drawer = (($) => {
} }
this.$container.addClass(ClassName.DRAWER_IN) this.$container.addClass(ClassName.DRAWER_IN)
// backdrop is responsively styled based on mdb-drawer-overlay, therefore style is none of our concern, simply add the marker class and let the scss determine if it should be displayed or not. // backdrop is responsively styled based on bmd-drawer-overlay, therefore style is none of our concern, simply add the marker class and let the scss determine if it should be displayed or not.
this.$backdrop.addClass(ClassName.IN) this.$backdrop.addClass(ClassName.IN)
} }

2
js/src/radio.js
View File

@ -18,7 +18,7 @@ const Radio = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME] const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = { const Default = {
template: `<span class='mdb-radio-outer-circle'></span><span class='mdb-radio-inner-circle'></span>` template: `<span class='bmd-radio-outer-circle'></span><span class='bmd-radio-inner-circle'></span>`
} }
/** /**

2
js/src/radioInline.js
View File

@ -14,7 +14,7 @@ const RadioInline = (($) => {
const Default = { const Default = {
mdbFormGroup: { mdbFormGroup: {
create: false, // no mdb-form-group creation if form-group not present. It messes with the layout. create: false, // no bmd-form-group creation if form-group not present. It messes with the layout.
required: false required: false
} }
} }

2
js/src/switch.js
View File

@ -13,7 +13,7 @@ const Switch = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME] const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = { const Default = {
template: `<span class='mdb-switch-track'></span>` template: `<span class='bmd-switch-track'></span>`
} }
/** /**

26
scss/_buttons.scss
View File

@ -21,16 +21,16 @@
// Colors // Colors
// flat removes bg, add color variations to text // flat removes bg, add color variations to text
@include mdb-flat-button-color(); @include bmd-flat-button-color();
// fab and raised // fab and raised
// - colored, add their text and bg // - colored, add their text and bg
// - hover color contrasted // - hover color contrasted
// - shared shadow state on hover/active/focus // - shared shadow state on hover/active/focus
&.mdb-btn-fab, &.bmd-btn-fab,
&.btn-raised, &.btn-raised,
.btn-group-raised & { .btn-group-raised & {
@include mdb-raised-button-color(); @include bmd-raised-button-color();
// enlarged shadow on hover, focus // enlarged shadow on hover, focus
@include hover-focus() { @include hover-focus() {
@ -60,19 +60,19 @@
// reverse any of the above for links // reverse any of the above for links
&.btn-link { &.btn-link {
box-shadow: none; box-shadow: none;
@include mdb-hover-focus-active() { @include bmd-hover-focus-active() {
box-shadow: none; box-shadow: none;
} }
} }
@include mdb-disabled() { @include bmd-disabled() {
box-shadow: none; box-shadow: none;
} }
} }
// https://www.google.com/design/spec/components/buttons-floating-action-button.html // https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.mdb-btn-fab, &.bmd-btn-fab,
&.mdb-btn-icon { &.bmd-btn-icon {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
font-size: $mdb-btn-fab-font-size; font-size: $mdb-btn-fab-font-size;
@ -93,7 +93,7 @@
} }
} }
&.mdb-btn-fab { &.bmd-btn-fab {
// see above for color variations // see above for color variations
width: $mdb-btn-fab-size; width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size; min-width: $mdb-btn-fab-size;
@ -106,7 +106,7 @@
border-radius: 50%; border-radius: 50%;
} }
&.mdb-btn-fab-sm, &.bmd-btn-fab-sm,
.btn-group-sm & { .btn-group-sm & {
width: $mdb-btn-fab-size-sm; width: $mdb-btn-fab-size-sm;
min-width: $mdb-btn-fab-size-sm; min-width: $mdb-btn-fab-size-sm;
@ -121,14 +121,14 @@
} }
// Icon buttons // Icon buttons
&.mdb-btn-icon { &.bmd-btn-icon {
width: $mdb-btn-icon-size; width: $mdb-btn-icon-size;
min-width: $mdb-btn-icon-size; min-width: $mdb-btn-icon-size;
height: $mdb-btn-icon-size; height: $mdb-btn-icon-size;
margin: 0; margin: 0;
color: inherit; color: inherit;
&.mdb-btn-icon-sm, &.bmd-btn-icon-sm,
.btn-group-sm & { .btn-group-sm & {
width: $mdb-btn-icon-size-sm; width: $mdb-btn-icon-size-sm;
min-width: $mdb-btn-icon-size-sm; min-width: $mdb-btn-icon-size-sm;
@ -169,7 +169,7 @@
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include mdb-disabled() { @include bmd-disabled() {
color: $mdb-btn-disabled; color: $mdb-btn-disabled;
.bg-inverse & { .bg-inverse & {
color: $mdb-inverse-btn-disabled; color: $mdb-inverse-btn-disabled;
@ -197,7 +197,7 @@
// } // }
// //
// > .dropdown-toggle.btn { // > .dropdown-toggle.btn {
// @include mdb-raised-button-color-bg(); // @include bmd-raised-button-color-bg();
// } // }
//} //}

6
scss/_cards.scss
View File

@ -37,19 +37,19 @@
} }
} }
.mdb-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary .bmd-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary
.card-footer { // assume footer is the set of actions? .card-footer { // assume footer is the set of actions?
padding: .5rem; padding: .5rem;
} }
&.mdb-card-raised { &.bmd-card-raised {
// Card raised elevation: 8dp // Card raised elevation: 8dp
@include box-shadow($mdb-shadow-8dp); @include box-shadow($mdb-shadow-8dp);
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
// On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
&.mdb-card-flat { &.bmd-card-flat {
box-shadow: none; box-shadow: none;
} }
} }

58
scss/_drawer.scss
View File

@ -1,7 +1,7 @@
// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822 // Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
// Drawer. // Drawer.
.mdb-layout-drawer { .bmd-layout-drawer {
position: absolute; position: absolute;
z-index: 5; // over a header and content z-index: 5; // over a header and content
box-sizing: border-box; box-sizing: border-box;
@ -58,65 +58,65 @@
// Sizing and positioning below here // Sizing and positioning below here
// for left or right drawers, setup widths, heights and positions // for left or right drawers, setup widths, heights and positions
@include mdb-drawer-x-out($mdb-drawer-x-size); @include bmd-drawer-x-out($mdb-drawer-x-size);
// for top or bottom drawers, setup widths, heights and positions // for top or bottom drawers, setup widths, heights and positions
@include mdb-drawer-y-out($mdb-drawer-y-size); @include bmd-drawer-y-out($mdb-drawer-y-size);
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), as well // Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
// as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px). // as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
// //
// //
// mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-in` // We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in`
// without a size (for triggered openings). Since the xs size is 0, instead of using `mdb-drawer-in-xs` // without a size (for triggered openings). Since the xs size is 0, instead of using `bmd-drawer-in-xs`
// (which is mostly meaningless), we create `mdb-drawer-in` meaning always open. // (which is mostly meaningless), we create `bmd-drawer-in` meaning always open.
// //
// NOTE: mdb-drawer-in-* uses media-breakpoint-up() // NOTE: bmd-drawer-in-* uses media-breakpoint-up()
// //
// mdb-drawer-out // bmd-drawer-out
// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some // A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
// strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins. // strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins.
// //
// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`. // We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`.
// Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay. // Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay.
// //
// NOTE: mdb-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios. // NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
// //
// //
// Drawer open positioning, and style options (push is default, overlay is optional) // Drawer open positioning, and style options (push is default, overlay is optional)
:not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed :not(.bmd-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-drawer-x-in-up($mdb-drawer-x-size, $breakpoint); @include bmd-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
@include mdb-drawer-y-in-up($mdb-drawer-y-size, $breakpoint); @include bmd-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
@include mdb-drawer-x-overlay-down($breakpoint); @include bmd-drawer-x-overlay-down($breakpoint);
@include mdb-drawer-y-overlay-down($breakpoint); @include bmd-drawer-y-overlay-down($breakpoint);
} }
} }
////---- ////----
//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger //// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger
//.kitchen-sink-drawer { //.kitchen-sink-drawer {
// $custom-size: 500px; // $custom-size: 500px;
// @include mdb-drawer-x-out($custom-size); // @include bmd-drawer-x-out($custom-size);
// &:not(.mdb-drawer-out) { // &:not(.bmd-drawer-out) {
// @each $breakpoint in map-keys($grid-breakpoints) { // @each $breakpoint in map-keys($grid-breakpoints) {
// @include mdb-drawer-x-in-up($custom-size, $breakpoint); // @include bmd-drawer-x-in-up($custom-size, $breakpoint);
// } // }
// } // }
//} //}
// //
//// ////
////---- ////----
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger //// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger
//.kitchen-sink-drawer-static { //.kitchen-sink-drawer-static {
// $custom-size: 500px; // $custom-size: 500px;
// @include mdb-drawer-x-out($custom-size); // closed by default // @include bmd-drawer-x-out($custom-size); // closed by default
// @include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in // @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary // @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
//} //}

12
scss/_dropdown.scss
View File

@ -44,14 +44,14 @@
&.dropdown-menu-top-left { &.dropdown-menu-top-left {
top: auto; top: auto;
bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
transform-origin: 0 100%; transform-origin: 0 100%;
} }
&.dropdown-menu-top-right { &.dropdown-menu-top-right {
top: auto; top: auto;
right: 0; right: 0;
bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
left: auto; left: auto;
transform-origin: 100% 100%; transform-origin: 100% 100%;
} }
@ -93,8 +93,8 @@
.dropdown-toggle { .dropdown-toggle {
&.mdb-btn-icon, &.bmd-btn-icon,
&.mdb-btn-fab { &.bmd-btn-fab {
// remove the dropdown icon // remove the dropdown icon
&::after { &::after {
display: none; display: none;
@ -108,7 +108,7 @@
} }
} }
&.mdb-btn-fab-sm { &.bmd-btn-fab-sm {
~ .dropdown-menu { ~ .dropdown-menu {
&.dropdown-menu-top-left, &.dropdown-menu-top-left,
&.dropdown-menu-top-right { &.dropdown-menu-top-right {
@ -117,7 +117,7 @@
} }
} }
&.mdb-btn-icon { &.bmd-btn-icon {
~ .dropdown-menu { ~ .dropdown-menu {
// collapse some spacing // collapse some spacing
margin: 0; margin: 0;

56
scss/_forms.scss
View File

@ -1,12 +1,12 @@
form { form {
// ensure enough room at the bottom of any form to display a one-line mdb-help // ensure enough room at the bottom of any form to display a one-line bmd-help
margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height-base; margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height-base;
// reverse the above for navbars (no help expected in a navbar form) // reverse the above for navbars (no help expected in a navbar form)
.navbar & { .navbar & {
margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
.mdb-form-group { .bmd-form-group {
display: inline-block; display: inline-block;
padding-top: 0; padding-top: 0;
} }
@ -30,14 +30,14 @@ form {
transition: background 0s ease-out; transition: background 0s ease-out;
// on disabled, kill the bg animation image and fall back to a simple dotted bottom border // on disabled, kill the bg animation image and fall back to a simple dotted bottom border
@include mdb-disabled() { @include bmd-disabled() {
background-image: none; background-image: none;
border-bottom: $input-btn-border-width dotted $input-border-color; border-bottom: $input-btn-border-width dotted $input-border-color;
} }
// The border bottom should be static in all states, the decorator will be animated over this. // The border bottom should be static in all states, the decorator will be animated over this.
&:focus, &:focus,
.mdb-form-group.is-focused & { .bmd-form-group.is-focused & {
background-size: $mdb-form-control-bg-size-active; background-size: $mdb-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color; //border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -48,14 +48,14 @@ form {
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. // position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? // FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
// //
.mdb-help { .bmd-help {
position: absolute; position: absolute;
display: none; display: none;
font-size: 80%; font-size: 80%;
font-weight: normal; font-weight: normal;
@extend .text-muted; @extend .text-muted;
.mdb-form-group.is-focused & { .bmd-form-group.is-focused & {
display: block; display: block;
} }
} }
@ -63,31 +63,31 @@ form {
// ----- // -----
// State coloring: default, success, info, warning, danger // State coloring: default, success, info, warning, danger
// //
@include mdb-selection-color(); @include bmd-selection-color();
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color); @include bmd-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
.has-success { .has-success {
@include mdb-form-color($brand-success, $brand-success, $brand-success); @include bmd-form-color($brand-success, $brand-success, $brand-success);
} }
.has-info { .has-info {
@include mdb-form-color($brand-info, $brand-info, $brand-info); @include bmd-form-color($brand-info, $brand-info, $brand-info);
} }
.has-warning { .has-warning {
@include mdb-form-color($brand-warning, $brand-warning, $brand-warning); @include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
} }
.has-danger { .has-danger {
@include mdb-form-color($brand-danger, $brand-danger, $brand-danger); @include bmd-form-color($brand-danger, $brand-danger, $brand-danger);
} }
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations //.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, mdb-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose. // Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.mdb-form-group { .bmd-form-group {
position: relative; position: relative;
// ----- // -----
@ -95,28 +95,28 @@ form {
// //
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
[class^='mdb-label'], [class^='bmd-label'],
[class*=' mdb-label'] { [class*=' bmd-label'] {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
transition: 0.3s ease all; transition: 0.3s ease all;
// hint to browser for optimization // hint to browser for optimization
&.mdb-label-floating { &.bmd-label-floating {
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
} }
} }
// hide label-placeholders when the field is filled // hide label-placeholders when the field is filled
&.is-filled .mdb-label-placeholder { &.is-filled .bmd-label-placeholder {
display: none; display: none;
} }
// Optional class to make the text field inline collapsible/expandable (collapsed by default) // Optional class to make the text field inline collapsible/expandable (collapsed by default)
// This uses the BS collapse js to make the width expand. // This uses the BS collapse js to make the width expand.
// `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an mdb-collapse-inline // `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
// FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
&.mdb-collapse-inline { &.bmd-collapse-inline {
padding: 0; // get rid of any padding as this is a width transition padding: 0; // get rid of any padding as this is a width transition
// Expandable Holder. // Expandable Holder.
@ -141,22 +141,22 @@ form {
} }
} }
// default floating size/location with an mdb-form-group // default floating size/location with an bmd-form-group
@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "mdb-form-group default"); @include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "bmd-form-group default");
// sm floating size/location // sm floating size/location
&.mdb-form-group-sm { &.bmd-form-group-sm {
@include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "mdb-form-group sm"); @include bmd-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "bmd-form-group sm");
} }
// lg floating size/location // lg floating size/location
&.mdb-form-group-lg { &.bmd-form-group-lg {
@include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "mdb-form-group lg"); @include bmd-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "bmd-form-group lg");
} }
} }
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height); @include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height);
select { select {
&, &,
@ -168,7 +168,7 @@ select {
} }
// Input files - hide actual input - requires specific markup in the sample. // Input files - hide actual input - requires specific markup in the sample.
//.mdb-form-group input[type=file] { //.bmd-form-group input[type=file] {
// opacity: 0; // opacity: 0;
// position: absolute; // position: absolute;
// top: 0; // top: 0;

4
scss/_input-group.scss
View File

@ -13,11 +13,11 @@
// default margin - no form-group required // default margin - no form-group required
@include input-group-button-variation(input-padding-y); @include input-group-button-variation(input-padding-y);
&.mdb-form-group-sm { &.bmd-form-group-sm {
@include input-group-button-variation($input-padding-y-sm); @include input-group-button-variation($input-padding-y-sm);
} }
&.mdb-form-group-lg { &.bmd-form-group-lg {
@include input-group-button-variation($input-padding-y-lg); @include input-group-button-variation($input-padding-y-lg);
} }

24
scss/_layout.scss
View File

@ -1,18 +1,18 @@
// This is a set of flex-based layout containers necessary for components such as the drawer. // This is a set of flex-based layout containers necessary for components such as the drawer.
// It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a // It allows for flex based positioning such as sticky header and footer inside an bmd-layout, with a
// mdb-layout-content that scrolls. // bmd-layout-content that scrolls.
// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935 // mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935
// First element // First element
.mdb-layout-canvas { // added by js? .bmd-layout-canvas { // added by js?
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
// Primary layout container, belongs inside a mdb-layout-canvas. // Primary layout container, belongs inside a bmd-layout-canvas.
.mdb-layout-container { .bmd-layout-container {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; // allows for sticky header and footer flex-direction: column; // allows for sticky header and footer
@ -23,8 +23,8 @@
-webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
} }
// Header layout (fixed top), belongs in a mdb-layout-container // Header layout (fixed top), belongs in a bmd-layout-container
.mdb-layout-header { .bmd-layout-header {
z-index: 3; z-index: 3;
display: flex; display: flex;
flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child
@ -37,8 +37,8 @@
@include material-animation-default(); @include material-animation-default();
} }
// Content layout, belongs in a mdb-layout-container // Content layout, belongs in a bmd-layout-container
.mdb-layout-content { .bmd-layout-content {
position: relative; position: relative;
z-index: 1; // under a header z-index: 1; // under a header
display: inline-block; display: inline-block;
@ -51,12 +51,12 @@
} }
// Pushes flex-based content to the other end (x or y) // Pushes flex-based content to the other end (x or y)
.mdb-layout-spacer { .bmd-layout-spacer {
flex-grow: 1; flex-grow: 1;
} }
// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode // Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
.mdb-layout-backdrop { .bmd-layout-backdrop {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -76,5 +76,5 @@
pointer-events: none; pointer-events: none;
} }
// NOTE: the &.in style is responsive, generated by @mixin mdb-layout-backdrop-in() where needed. // NOTE: the &.in style is responsive, generated by @mixin bmd-layout-backdrop-in() where needed.
} }

4
scss/_list-group.scss
View File

@ -19,7 +19,7 @@
padding: .5rem 0; padding: .5rem 0;
// dense size variation // dense size variation
&.mdb-list-group-sm { &.bmd-list-group-sm {
padding: .25rem 0; padding: .25rem 0;
.list-group-item { .list-group-item {
@ -28,7 +28,7 @@
} }
} }
.mdb-list-group-col { .bmd-list-group-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;

6
scss/_nav.scss
View File

@ -35,14 +35,14 @@
} }
// colors // colors
@include mdb-tabs-color($mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color, $mdb-nav-tabs-disabled-link-color, $mdb-nav-tabs-disabled-link-color-hover); @include bmd-tabs-color($mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color, $mdb-nav-tabs-disabled-link-color, $mdb-nav-tabs-disabled-link-color-hover);
&.bg-primary { &.bg-primary {
@include mdb-tabs-color($mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color, $mdb-nav-tabs-primary-disabled-link-color, $mdb-nav-tabs-primary-disabled-link-color-hover); @include bmd-tabs-color($mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color, $mdb-nav-tabs-primary-disabled-link-color, $mdb-nav-tabs-primary-disabled-link-color-hover);
} }
&.bg-inverse { &.bg-inverse {
@include mdb-tabs-color($mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color, $mdb-nav-tabs-inverse-disabled-link-color, $mdb-nav-tabs-inverse-disabled-link-color-hover); @include bmd-tabs-color($mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color, $mdb-nav-tabs-inverse-disabled-link-color, $mdb-nav-tabs-inverse-disabled-link-color-hover);
} }
} }

18
scss/_radios.scss
View File

@ -3,8 +3,8 @@ label.radio-inline {
position: relative; position: relative;
padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
.mdb-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693 .bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
.mdb-radio-inner-circle { .bmd-radio-inner-circle {
position: absolute; position: absolute;
top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height
left: 0; left: 0;
@ -13,12 +13,12 @@ label.radio-inline {
height: $mdb-radio-size; height: $mdb-radio-size;
transition-duration: 0.2s; transition-duration: 0.2s;
&.mdb-radio-outer-circle { &.bmd-radio-outer-circle {
border: $mdb-radio-border solid $mdb-radio-color-off; border: $mdb-radio-border solid $mdb-radio-color-off;
border-radius: 50%; border-radius: 50%;
transition: border-color ease .28s; transition: border-color ease .28s;
} }
&.mdb-radio-inner-circle { &.bmd-radio-inner-circle {
display: inline-block; display: inline-block;
background-color: $mdb-radio-color-on; background-color: $mdb-radio-color-on;
border-radius: 50%; border-radius: 50%;
@ -51,9 +51,9 @@ label.radio-inline {
opacity: 0; opacity: 0;
&:checked { &:checked {
@include mdb-radio-color($mdb-radio-color-on); @include bmd-radio-color($mdb-radio-color-on);
~ .mdb-radio-inner-circle { ~ .bmd-radio-inner-circle {
transform: scale3d(0.55, 0.55, 1); transform: scale3d(0.55, 0.55, 1);
&::after { &::after {
animation: rippleOn; animation: rippleOn;
@ -66,16 +66,16 @@ label.radio-inline {
} }
} }
&:not(:checked) ~ .mdb-radio-inner-circle::after { &:not(:checked) ~ .bmd-radio-inner-circle::after {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
@include mdb-radio-color($mdb-radio-color-disabled); @include bmd-radio-color($mdb-radio-color-disabled);
.bg-inverse & { .bg-inverse & {
@include mdb-radio-color($mdb-radio-color-disabled-inverse); @include bmd-radio-color($mdb-radio-color-disabled-inverse);
} }
} }
} }

8
scss/_switches.scss
View File

@ -4,7 +4,7 @@
position: relative; position: relative;
padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
.mdb-switch-track { .bmd-switch-track {
position: absolute; position: absolute;
top: calc-top($line-height-base, $font-size-base, $mdb-switch-height); top: calc-top($line-height-base, $font-size-base, $mdb-switch-height);
left: 0; left: 0;
@ -55,7 +55,7 @@
opacity: 0; opacity: 0;
&:checked { &:checked {
+ .mdb-switch-track { + .bmd-switch-track {
background-position: -100%; background-position: -100%;
&::after { &::after {
left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size); left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
@ -66,11 +66,11 @@
&:disabled { &:disabled {
// No jelly effect on disabled switchs // No jelly effect on disabled switchs
+ .mdb-switch-track:active::after { + .bmd-switch-track:active::after {
transform: translateY(-50%); transform: translateY(-50%);
} }
+ .mdb-switch-track { + .bmd-switch-track {
cursor: default; cursor: default;
background: $mdb-switch-disabled-bg; background: $mdb-switch-disabled-bg;
&::after { &::after {

2
scss/_variables.scss
View File

@ -61,7 +61,7 @@ $icon-color: rgba($black, 0.5) !default;
// -------------------- // --------------------
// inputs // inputs
$mdb-mdb-label-static-size-ratio: 75 / 100 !default; $mdb-bmd-label-static-size-ratio: 75 / 100 !default;
$mdb-help-size-ratio: 75 / 100 !default; $mdb-help-size-ratio: 75 / 100 !default;
//$mdb-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon. //$mdb-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon.

44
scss/mixins/_buttons.scss
View File

@ -1,5 +1,5 @@
// from bs mixins/buttons button-variant // from bs mixins/buttons button-variant
@mixin mdb-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) { @mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
color: $color; color: $color;
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
@ -34,7 +34,7 @@
} }
// when it is an icon, kill the active bg on open dropdown, but stabilize on hover // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
.open > &.dropdown-toggle.mdb-btn-icon { .open > &.dropdown-toggle.bmd-btn-icon {
color: inherit; color: inherit;
background-color: $background; background-color: $background;
@ -58,7 +58,7 @@
} }
} }
@mixin mdb-flat-button-variant($color) { @mixin bmd-flat-button-variant($color) {
$background: $mdb-btn-bg; $background: $mdb-btn-bg;
$border: $mdb-btn-border; $border: $mdb-btn-border;
@ -69,7 +69,7 @@
$active-background: $mdb-btn-active-bg; $active-background: $mdb-btn-active-bg;
$active-border: $mdb-btn-active-bg; $active-border: $mdb-btn-active-bg;
@include mdb-button-variant($color, @include bmd-button-variant($color,
$background, $background,
$focus-background, $focus-background,
$active-background, $active-background,
@ -85,7 +85,7 @@
$active-background: $mdb-inverse-btn-active-bg; $active-background: $mdb-inverse-btn-active-bg;
$active-border: $mdb-inverse-btn-active-bg; $active-border: $mdb-inverse-btn-active-bg;
@include mdb-button-variant($color, @include bmd-button-variant($color,
$background, $background,
$focus-background, $focus-background,
$active-background, $active-background,
@ -100,32 +100,32 @@
} }
} }
@mixin mdb-flat-button-color() { @mixin bmd-flat-button-color() {
@include mdb-flat-button-variant($mdb-btn-color); @include bmd-flat-button-variant($mdb-btn-color);
// flat bg with text color variations // flat bg with text color variations
&.btn-primary { &.btn-primary {
@include mdb-flat-button-variant($btn-primary-bg); @include bmd-flat-button-variant($btn-primary-bg);
} }
&.btn-secondary { &.btn-secondary {
@include mdb-flat-button-variant($btn-secondary-color); @include bmd-flat-button-variant($btn-secondary-color);
} }
&.btn-info { &.btn-info {
@include mdb-flat-button-variant($btn-info-bg); @include bmd-flat-button-variant($btn-info-bg);
} }
&.btn-success { &.btn-success {
@include mdb-flat-button-variant($btn-success-bg); @include bmd-flat-button-variant($btn-success-bg);
} }
&.btn-warning { &.btn-warning {
@include mdb-flat-button-variant($btn-warning-bg); @include bmd-flat-button-variant($btn-warning-bg);
} }
&.btn-danger { &.btn-danger {
@include mdb-flat-button-variant($btn-danger-bg); @include bmd-flat-button-variant($btn-danger-bg);
} }
} }
@mixin mdb-raised-button-variant($color, $background, $border) { @mixin bmd-raised-button-variant($color, $background, $border) {
// FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only? // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
$focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%)); $focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%));
@ -136,7 +136,7 @@
//$active-background: darken($background, 17%); //$active-background: darken($background, 17%);
$active-border: darken($border, 25%); $active-border: darken($border, 25%);
@include mdb-button-variant($color, @include bmd-button-variant($color,
$background, $background,
$focus-background, $focus-background,
$active-background, $active-background,
@ -145,25 +145,25 @@
$active-border); $active-border);
} }
@mixin mdb-raised-button-color() { @mixin bmd-raised-button-color() {
&.btn-primary { &.btn-primary {
@include mdb-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
} }
&.btn-secondary { &.btn-secondary {
@include mdb-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
} }
&.btn-info { &.btn-info {
@include mdb-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border); @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
} }
&.btn-success { &.btn-success {
@include mdb-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border); @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
} }
&.btn-warning { &.btn-warning {
@include mdb-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
} }
&.btn-danger { &.btn-danger {
@include mdb-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
} }
} }

128
scss/mixins/_drawer.scss
View File

@ -1,9 +1,9 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
@mixin mdb-drawer-x-out($size) { @mixin bmd-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .mdb-layout-drawer { > .bmd-layout-drawer {
// position // position
top: 0; top: 0;
#{$side}: 0; #{$side}: 0;
@ -18,18 +18,18 @@
} }
} }
> .mdb-layout-header, > .bmd-layout-header,
> .mdb-layout-content { > .bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
} }
} }
@mixin mdb-drawer-y-out($size) { @mixin bmd-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .mdb-layout-drawer { > .bmd-layout-drawer {
// position // position
#{$side}: 0; #{$side}: 0;
left: 0; left: 0;
@ -44,14 +44,14 @@
} }
} }
> .mdb-layout-content { > .bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
} }
} }
@function mdb-drawer-breakpoint-name($breakpoint, $suffix: "") { @function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}#{$suffix}"; $name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs { @if $breakpoint == xs {
@ -60,42 +60,42 @@
@return $name; @return $name;
} }
@mixin mdb-drawer-x-in($size) { @mixin bmd-drawer-x-in($size) {
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior) // Push - drawer will push the header and content (default behavior)
> .mdb-layout-header { > .bmd-layout-header {
width: calc(100% - #{$size}); width: calc(100% - #{$size});
margin-#{$side}: $size; margin-#{$side}: $size;
} }
> .mdb-layout-drawer { > .bmd-layout-drawer {
transform: translateX(0); transform: translateX(0);
} }
> .mdb-layout-content { > .bmd-layout-content {
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
} }
} }
@mixin mdb-drawer-y-in($size) { @mixin bmd-drawer-y-in($size) {
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content // 1. Push - drawer will push the header or content
> .mdb-layout-header { > .bmd-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top @if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
> .mdb-layout-drawer { > .bmd-layout-drawer {
transform: translateY(0); transform: translateY(0);
} }
> .mdb-layout-content { > .bmd-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: $size; margin-#{$side}: $size;
} }
@ -105,22 +105,22 @@
} }
// breakpoint based open to a particular size // breakpoint based open to a particular size
@mixin mdb-drawer-x-in-up($size, $breakpoint) { @mixin bmd-drawer-x-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-up"); $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-in { &.bmd-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include mdb-drawer-x-in($size); @include bmd-drawer-x-in($size);
} @else { } @else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// mdb-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@include mdb-drawer-x-in($size); @include bmd-drawer-x-in($size);
} }
} }
} }
@ -128,35 +128,35 @@
} }
// breakpoint based open to a particular size // breakpoint based open to a particular size
@mixin mdb-drawer-y-in-up($size, $breakpoint) { @mixin bmd-drawer-y-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-up"); $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-in { &.bmd-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include mdb-drawer-y-in($size); @include bmd-drawer-y-in($size);
} @else { } @else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// mdb-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@include mdb-drawer-y-in($size); @include bmd-drawer-y-in($size);
} }
} }
} }
} }
} }
@mixin mdb-drawer-x-overlay() { @mixin bmd-drawer-x-overlay() {
@include mdb-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .mdb-layout-header, > .bmd-layout-header,
> .mdb-layout-content { > .bmd-layout-content {
width: 100%; width: 100%;
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -164,18 +164,18 @@
} }
} }
@mixin mdb-drawer-y-overlay() { @mixin bmd-drawer-y-overlay() {
@include mdb-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .mdb-layout-header { > .bmd-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top @if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
> .mdb-layout-content { > .bmd-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -185,25 +185,25 @@
} }
// Overlay - left/right responsive overlay classes and marker class // Overlay - left/right responsive overlay classes and marker class
@mixin mdb-drawer-x-overlay-down($breakpoint) { @mixin bmd-drawer-x-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-down"); $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
&.mdb-drawer-overlay { &.bmd-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
// x - left/right // x - left/right
@if $breakpoint == xs { // overlay marker class (non-responsive) @if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-in-* media queries above win (and overlay is ignored) // responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay { &.bmd-drawer-overlay {
@include mdb-drawer-x-overlay(); @include bmd-drawer-x-overlay();
} }
} @else { } @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class @include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-x-overlay(); @include bmd-drawer-x-overlay();
} }
} }
} }
@ -211,24 +211,24 @@
} }
// Overlay - top/bottom responsive overlay classes and marker class // Overlay - top/bottom responsive overlay classes and marker class
@mixin mdb-drawer-y-overlay-down($breakpoint) { @mixin bmd-drawer-y-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-down"); $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
&.mdb-drawer-overlay { &.bmd-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
//// y - top/bottom //// y - top/bottom
@if $breakpoint == xs { // overlay marker class (non-responsive) @if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-in-* media queries above win (and overlay is ignored) // responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay { &.bmd-drawer-overlay {
@include mdb-drawer-y-overlay(); @include bmd-drawer-y-overlay();
} }
} @else { } @else {
@include media-breakpoint-down($breakpoint) { // overlay responsive class @include media-breakpoint-down($breakpoint) { // overlay responsive class
@include mdb-drawer-y-overlay(); @include bmd-drawer-y-overlay();
} }
} }
} }

60
scss/mixins/_forms.scss
View File

@ -1,4 +1,4 @@
@mixin mdb-disabled() { @mixin bmd-disabled() {
fieldset[disabled][disabled] &, fieldset[disabled][disabled] &,
&.disabled, &.disabled,
&:disabled, &:disabled,
@ -7,7 +7,7 @@
} }
} }
@mixin mdb-selection-color() { @mixin bmd-selection-color() {
.radio label, .radio label,
.radio-inline, .radio-inline,
.checkbox label, .checkbox label,
@ -47,26 +47,26 @@
//fieldset[disabled] & input[type=checkbox], //fieldset[disabled] & input[type=checkbox],
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before, //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check, //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
//input[type=checkbox][disabled] + .mdb-radio-outer-circle { //input[type=checkbox][disabled] + .bmd-radio-outer-circle {
// opacity: 0.5; // opacity: 0.5;
//} //}
} }
@mixin mdb-radio-color($color) { @mixin bmd-radio-color($color) {
~ .mdb-radio-inner-circle { ~ .bmd-radio-inner-circle {
background-color: $color; background-color: $color;
} }
~ .mdb-radio-outer-circle { ~ .bmd-radio-outer-circle {
border-color: $color; border-color: $color;
} }
} }
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { @mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
[class^='mdb-label'], [class^='bmd-label'],
[class*=' mdb-label'] { [class*=' bmd-label'] {
color: $label-color; color: $label-color;
} }
@ -103,19 +103,19 @@
} }
} }
.is-focused, // may or may not be a form-group or mdb-form-group .is-focused, // may or may not be a form-group or bmd-form-group
&.is-focused { &.is-focused {
// on focus set borders and labels to the validation color // on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color); @include form-control-validation($label-color);
[class^='mdb-label'], [class^='bmd-label'],
[class*=' mdb-label'] { [class*=' bmd-label'] {
color: $label-color-focus; color: $label-color-focus;
} }
.mdb-label-placeholder { .bmd-label-placeholder {
color: $label-color; // keep the placeholder color color: $label-color; // keep the placeholder color
} }
@ -129,24 +129,24 @@
border-color: $border-color; border-color: $border-color;
} }
.mdb-help { .bmd-help {
color: $mdb-label-color-inner-focus; color: $mdb-label-color-inner-focus;
} }
} }
} }
// must be broken out for reuse - webkit selector breaks firefox // must be broken out for reuse - webkit selector breaks firefox
@mixin mdb-label-static($label-top, $static-font-size) { @mixin bmd-label-static($label-top, $static-font-size) {
top: $label-top; top: $label-top;
left: 0; left: 0;
// must repeat because the previous (more generic) selectors // must repeat because the previous (more generic) selectors
font-size: $static-font-size; font-size: $static-font-size;
} }
@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { @mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
$variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2)); $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $static-font-size: ($mdb-bmd-label-static-size-ratio * $font-size);
$help-font-size: ($mdb-help-size-ratio * $font-size); $help-font-size: ($mdb-help-size-ratio * $font-size);
$label-static-top: $label-top-margin; $label-static-top: $label-top-margin;
@ -161,7 +161,7 @@
//Padding below text divider: 8dp //Padding below text divider: 8dp
@if $form-group-context { @if $form-group-context {
// Create a space at the top of the mdb-form-group for the label. // Create a space at the top of the bmd-form-group for the label.
// The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding).
padding-top: ($label-top-margin + $static-font-size); padding-top: ($label-top-margin + $static-font-size);
// note: bottom-margin of this is determined by $spacer. @see _spacer.scss // note: bottom-margin of this is determined by $spacer. @see _spacer.scss
@ -198,7 +198,7 @@
line-height: $line-height-base; // keep the same line height for radios and checkboxes line-height: $line-height-base; // keep the same line height for radios and checkboxes
} }
// Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg // Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg
input::placeholder { input::placeholder {
font-size: $font-size; font-size: $font-size;
} }
@ -211,8 +211,8 @@
} }
// floating/placeholder default (no focus) // floating/placeholder default (no focus)
.mdb-label-floating, .bmd-label-floating,
.mdb-label-placeholder { .bmd-label-placeholder {
//@debug "top: #{$label-as-placeholder-top}"; //@debug "top: #{$label-as-placeholder-top}";
top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
} }
@ -222,21 +222,21 @@
.is-focused, .is-focused,
&.is-filled, &.is-filled,
.is-filled { .is-filled {
.mdb-label-floating { .bmd-label-floating {
@include mdb-label-static($label-static-top, $static-font-size); @include bmd-label-static($label-static-top, $static-font-size);
} }
} }
// static // static
.mdb-label-static { .bmd-label-static {
@include mdb-label-static($label-static-top, $static-font-size); @include bmd-label-static($label-static-top, $static-font-size);
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
//input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary //input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
// @include mdb-label-static($label-top, $static-font-size, $static-line-height); // @include bmd-label-static($label-top, $static-font-size, $static-line-height);
//} //}
.mdb-help { .bmd-help {
margin-top: 0; // allow the input margin to set-off the top of the help-block margin-top: 0; // allow the input margin to set-off the top of the help-block
font-size: $help-font-size; font-size: $help-font-size;
} }
@ -251,14 +251,14 @@
&, &,
&:focus, &:focus,
.mdb-form-group.is-focused & { .bmd-form-group.is-focused & {
padding-right: ($input-padding-x * 3); padding-right: ($input-padding-x * 3);
background-repeat: $mdb-form-control-bg-repeat-y, no-repeat; background-repeat: $mdb-form-control-bg-repeat-y, no-repeat;
background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25); background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25);
} }
&:focus, &:focus,
.mdb-form-group.is-focused & { .bmd-form-group.is-focused & {
background-size: $mdb-form-control-bg-size-active, $icon-bg-size; background-size: $mdb-form-control-bg-size-active, $icon-bg-size;
} }
} }

2
scss/mixins/_hover.scss
View File

@ -1,4 +1,4 @@
@mixin mdb-hover-focus-active { @mixin bmd-hover-focus-active {
// add the .active to the whole mix of hover-focus-active // add the .active to the whole mix of hover-focus-active
&.active { &.active {
@content @content

4
scss/mixins/_layout.scss
View File

@ -1,7 +1,7 @@
// Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode // Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode
@mixin mdb-layout-backdrop-in() { @mixin bmd-layout-backdrop-in() {
> .mdb-layout-backdrop { > .bmd-layout-backdrop {
.in { .in {
visibility: visible; visibility: visible;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);

2
scss/mixins/_navs.scss
View File

@ -1,4 +1,4 @@
@mixin mdb-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) { @mixin bmd-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) {
.nav-link { .nav-link {
color: $color; color: $color;

2
scss/mixins/_variations.scss
View File

@ -23,7 +23,7 @@
// color: $variation-color-text; // color: $variation-color-text;
// // deeply defined to override welljumbo class without !impotant need // // deeply defined to override welljumbo class without !impotant need
// input.form-control { // input.form-control {
// @include mdb-input-placeholder { // @include bmd-input-placeholder {
// color: $variation-color-text; // color: $variation-color-text;
// } // }
// } // }

2
scss/plugins/_plugin-selectize.scss
View File

@ -37,7 +37,7 @@
// border: 0; // border: 0;
// background: transparent; // background: transparent;
// } // }
// &.mdb-label-floating-fix input { // &.bmd-label-floating-fix input {
// opacity: 0; // opacity: 0;
// } // }
// > div, > .item { // > div, > .item {