mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 09:36:55 +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>
{% 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>
<hr>
</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;
margin-top: 1rem;
//margin-bottom: 1rem;

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

@ -1,5 +1,5 @@
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) {
$container.removeClass(value)
@ -7,7 +7,7 @@ function clearDrawerClasses($container) {
}
function setDrawerPosition(position) {
var $container = $('.mdb-layout-container')
var $container = $('.bmd-layout-container')
clearDrawerClasses($container)
$container.addClass(position)
@ -18,26 +18,26 @@ $(document).ready(function() {
$.each(buttons, function (index, position) {
$('#' + position).click(function() {
setDrawerPosition('mdb-' + position)
setDrawerPosition('bmd-' + position)
})
})
// add a toggle for drawer visibility that shows anytime
$('#drawer-visibility').click(function () {
var $container = $('.mdb-layout-container')
var $container = $('.bmd-layout-container')
// once clicked, just do away with responsive marker
//$container.removeClass('mdb-drawer-in-md')
//$container.removeClass('bmd-drawer-in-md')
var $btn = $(this)
var $icon = $btn.find('.material-icons')
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')
$btn.attr('title', 'Drawer allow responsive opening')
}
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')
$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);
}
.mdb-layout-header {
.bmd-layout-header {
background-color: $grey-100;
color: $grey-600;
@ -33,12 +33,12 @@ a, a:hover {
}
}
.mdb-layout-content {
.bmd-layout-content {
padding-top: .5rem;
background-color: $grey-100;
}
.mdb-layout-drawer {
.bmd-layout-drawer {
background-color: $blue-grey-800;
color: $blue-grey-50;

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

@ -8,8 +8,8 @@ js: example.js
<!-- Custom styles for this template -->
<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">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay-md-down bmd-drawer-in-lg-up">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
<span class="sr-only">Toggle drawer</span>
@ -22,35 +22,35 @@ js: example.js
</ul>
<ul class="nav navbar-nav pull-xs-right">
<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>
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</li>
<li class="nav-item">
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search">
<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<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>
</button>
<span id="collapse-search" class="collapse">
@ -60,7 +60,7 @@ js: example.js
</li>
<li class="nav-item">
<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>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu">
@ -74,13 +74,13 @@ js: example.js
</div>
</header>
<div id="my-drawer" class="mdb-layout-drawer">
<div id="my-drawer" class="bmd-layout-drawer">
<header>
<img src="images/user.jpg" class="avatar">
<div class="account">
<span>hello@example.com</span>
<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>
</button>
<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
</a>
<li class="mdb-layout-spacer"></li>
<li class="bmd-layout-spacer"></li>
<a class="list-group-item">
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
</a>
@ -128,7 +128,7 @@ js: example.js
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<div class="alert alert-info" role="alert">
This is an implementation of

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

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

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

@ -74,25 +74,25 @@ group: material-design
## Floating Action
{% 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>
</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>
</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>
</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>
</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>
</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>
</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>
</button>
{% endexample %}
@ -100,22 +100,22 @@ group: material-design
### Disabled
{% example html %}
<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>
</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>
</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>
</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>
</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>
</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>
</button>
</fieldset>
@ -123,22 +123,22 @@ group: material-design
### 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 %}
<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>
</button>
</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>
</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>
</button>
<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>
</button>
</span>
@ -148,25 +148,25 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
## Icon
{% 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>
</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>
</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>
</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>
</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>
</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>
</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>
</button>
{% endexample %}
@ -174,22 +174,22 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
### Disabled
{% example html %}
<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>
</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>
</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>
</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>
</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>
</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>
</button>
</fieldset>
@ -197,17 +197,17 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
### 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 %}
<button type="button" class="btn mdb-btn-icon">
<button type="button" class="btn bmd-btn-icon">
<i class="material-icons">more_vert</i>
</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>
</button>
<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>
</button>
</span>

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

@ -24,10 +24,10 @@ Below is a list of relevant classes options:
<tbody>
<tr>
<td>
<code>.mdb-collapse-inline</code>
<code>.bmd-collapse-inline</code>
</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>
</tr>
<tr>
@ -51,8 +51,8 @@ Below is a list of relevant classes options:
Click the search icon below (on the right).
{% example html %}
<div class="mdb-form-group mdb-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">
<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
<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>
</button>
<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
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
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 %}
<div class="mdb-layout-container">
<header class="mdb-layout-header"> </header>
<div class="mdb-layout-drawer"> </div>
<main class="mdb-layout-content"> </main>
<div class="bmd-layout-container">
<header class="bmd-layout-header"> </header>
<div class="bmd-layout-drawer"> </div>
<main class="bmd-layout-content"> </main>
</div>
{% 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.
{% example html id=drawer-s1 %}
<div class="mdb-layout-container mdb-drawer-f-l">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-l">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
<span class="sr-only">Toggle drawer</span>
@ -65,7 +65,7 @@ The default behavior is for content to be pushed.
</ul>
</div>
</header>
<div id="dw-s1" class="mdb-layout-drawer bg-faded">
<div id="dw-s1" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</header>
@ -75,7 +75,7 @@ The default behavior is for content to be pushed.
<a class="list-group-item">Link 3</a>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<p>Main content</p>
</div>
@ -84,11 +84,11 @@ The default behavior is for content to be pushed.
{% endexample %}
### 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 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<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>
</div>
</header>
<div id="dw-s2" class="mdb-layout-drawer bg-faded">
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</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>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<p>Main content</p>
</div>
@ -119,7 +119,7 @@ Optional behavior will overlay the drawer and provide a backdrop. This can be m
## 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>
<thead>
<tr>
@ -130,7 +130,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<tbody>
<tr>
<td>
<code>.mdb-drawer-f-t</code>
<code>.bmd-drawer-f-t</code>
</td>
<td>
{% markdown %}Fixed top{% endmarkdown %}
@ -138,7 +138,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr>
<tr>
<td>
<code>.mdb-drawer-f-r</code>
<code>.bmd-drawer-f-r</code>
</td>
<td>
{% markdown %}Fixed right{% endmarkdown %}
@ -146,7 +146,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr>
<tr>
<td>
<code>.mdb-drawer-f-b</code>
<code>.bmd-drawer-f-b</code>
</td>
<td>
{% markdown %}Fixed bottom{% endmarkdown %}
@ -154,7 +154,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</tr>
<tr>
<td>
<code>.mdb-drawer-f-l</code>
<code>.bmd-drawer-f-l</code>
</td>
<td>
{% markdown %}Fixed left{% endmarkdown %}
@ -167,8 +167,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed left
{% example html id=drawer-p1 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1">
<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>
</div>
</header>
<div id="dw-p1" class="mdb-layout-drawer bg-faded">
<div id="dw-p1" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</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>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<!-- main content -->
</div>
@ -200,8 +200,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed right
{% example html id=drawer-p2 %}
<div class="mdb-layout-container mdb-drawer-f-r mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-r bmd-drawer-overlay">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2">
<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>
</div>
</header>
<div id="dw-p2" class="mdb-layout-drawer bg-faded">
<div id="dw-p2" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</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>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<!-- main content -->
</div>
@ -233,8 +233,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed top
{% example html id=drawer-p3 %}
<div class="mdb-layout-container mdb-drawer-f-t mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-t bmd-drawer-overlay">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3">
<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>
</div>
</header>
<div id="dw-p3" class="mdb-layout-drawer bg-faded">
<div id="dw-p3" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</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>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<!-- main content -->
</div>
@ -266,8 +266,8 @@ The following positioning marker classes should be placed on the `mdb-layout-con
### Fixed bottom
{% example html id=drawer-p4 %}
<div class="mdb-layout-container mdb-drawer-f-b mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="bmd-layout-container bmd-drawer-f-b bmd-drawer-overlay">
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4">
<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>
</div>
</header>
<div id="dw-p4" class="mdb-layout-drawer bg-faded">
<div id="dw-p4" class="bmd-layout-drawer bg-faded">
<header>
<a class="navbar-brand">Title</a>
</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>
</ul>
</div>
<main class="mdb-layout-content">
<main class="bmd-layout-content">
<div class="container">
<!-- main content -->
</div>
@ -308,14 +308,14 @@ Globally, you may alter the size of _x_ vs _y_ drawers with the following variab
### 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 %}
.kitchen-sink-drawer {
$custom-size: 500px;
@include mdb-drawer-x-out($custom-size);
&:not(.mdb-drawer-out) {
@include bmd-drawer-x-out($custom-size);
&:not(.bmd-drawer-out) {
@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
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 %}
.kitchen-sink-drawer-static {
$custom-size: 500px;
@include mdb-drawer-x-out($custom-size); // closed by default
@include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in
@include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
@include bmd-drawer-x-out($custom-size); // closed by default
@include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
@include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
}
{% 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
{: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 %}
<form>
<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">
<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 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">
</fieldset>
<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">
<option>1</option>
<option>2</option>
@ -34,7 +34,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
</select>
</fieldset>
<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">
<option>1</option>
<option>2</option>
@ -44,11 +44,11 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
</select>
</fieldset>
<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>
</fieldset>
<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">
<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>
@ -95,13 +95,13 @@ Below is a complete list of options supported by Material Design for Bootstrap a
<tbody>
<tr>
<td>
<code>.mdb-form-group</code>
<code>.bmd-form-group</code>
</td>
<td>
Any group of form controls (e.g. combination of label/input).
</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
add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the
same `.form-group`.{% endmarkdown %}
@ -109,10 +109,10 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr>
<tr>
<td>
<code>.mdb-form-group-sm</code>
<code>.bmd-form-group-sm</code>
</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>
{% markdown %}{% endmarkdown %}
@ -120,10 +120,10 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr>
<tr>
<td>
<code>.mdb-form-group-lg</code>
<code>.bmd-form-group-lg</code>
</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>
{% markdown %}{% endmarkdown %}
@ -131,13 +131,13 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr>
<tr>
<td>
<code>.mdb-help</code>
<code>.bmd-help</code>
</td>
<td>
Any help text
</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>
</tr>
</tbody>
@ -146,22 +146,22 @@ Below is a complete list of options supported by Material Design for Bootstrap a
## 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 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 `.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 `.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
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
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
you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior.
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 `.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 `.bmd-form-group`, so in rare or complex cases
you may need to wrap your markup in an `.bmd-form-group` to get appropriate focus/hover behavior.
{% example html %}
<form>
<fieldset class="form-group"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput" class="mdb-label-floating">Example label</label>
<fieldset class="form-group"> <!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput" class="bmd-label-floating">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput">
</fieldset>
<fieldset class="form-group mdb-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2" class="mdb-label-floating">Another label</label>
<fieldset class="form-group bmd-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2" class="bmd-label-floating">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2">
</fieldset>
</form>
@ -182,11 +182,11 @@ Because of this, you may need to manually address the width and alignment of ind
{% example html %}
<form class="form-inline">
<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">
</div>
<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">
</div>
<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>
<tr>
<td>
<code>.mdb-label-static</code>
<code>.bmd-label-static</code>
</td>
<td>
{% 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>
<td>
<code>.mdb-label-placeholder</code>
<code>.bmd-label-placeholder</code>
</td>
<td>
{% markdown %}
@ -39,7 +39,7 @@ Renders a `<label>` as a placeholder
</tr>
<tr>
<td>
<code>.mdb-label-floating</code>
<code>.bmd-label-floating</code>
</td>
<td>
{% markdown %}
@ -47,7 +47,7 @@ Animated combination of placeholder and label:
- _focused_: label animates from placeholder to static label
- _unfocused & empty_: placeholder
- _unfocused & filled_: renders the same as `.mdb-label-static`
- _unfocused & filled_: renders the same as `.bmd-label-static`
{% endmarkdown %}
</td>
</tr>
@ -64,19 +64,19 @@ Animated combination of placeholder and label:
{% example html %}
<form>
<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">
<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 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">
<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 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">
<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>
</form>
{% 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
{% 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>
<a href="#" class="list-group-item">Link item</a>
<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 %}
<ul class="list-group">
<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-text">Some text</p>
</div>
</a>
<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-text">Some text</p>
</div>
</a>
<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-text">Some text</p>
</div>
@ -117,21 +117,21 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
### Dense
{% example html %}
<ul class="list-group mdb-list-group-sm">
<ul class="list-group bmd-list-group-sm">
<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-text">Some text</p>
</div>
</a>
<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-text">Some text</p>
</div>
</a>
<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-text">Some text</p>
</div>
@ -145,7 +145,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<ul class="list-group">
<a class="list-group-item">
<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-text">Icon left</p>
</div>
@ -153,7 +153,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<a class="list-group-item">
<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-text">Icon left</p>
</div>
@ -161,7 +161,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
<a class="list-group-item">
<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-text">Icons left and right</p>
</div>
@ -169,7 +169,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</a>
<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-text">Icon right</p>
</div>
@ -177,7 +177,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</a>
<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-text">Label pill to the right</p>
</div>
@ -193,13 +193,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %}
<ul class="list-group">
<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-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>
</a>
<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-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>
@ -231,7 +231,7 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</tr>
<tr>
<td>
<code>.mdb-list-group-col</code>
<code>.bmd-list-group-col</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
@ -242,13 +242,13 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
</tr>
<tr>
<td>
<code>.mdb-list-group-sm</code>
<code>.bmd-list-group-sm</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</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>
</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 %}
<!-- icon with buttons -->
<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>
</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">
<button class="dropdown-item" type="button">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 -->
<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>
</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">
<a class="dropdown-item" href="#">Regular 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 -->
<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>
</button>
An <code>.mdb-btn-fab-sm</code>
An <code>.bmd-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="ex3">
<button class="dropdown-item" type="button">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 -->
<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>
</button>
An <code>.mdb-btn-fab</code>
An <code>.bmd-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="ex4">
<button class="dropdown-item" type="button">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
{% example html %}
<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>
</button>
<div class="dropdown-menu" aria-labelledby="ll1">
@ -99,7 +99,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower right side
{% example html %}
<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>
</button>
<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
{% example html %}
<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>
</button>
<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
{% example html %}
<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>
</button>
<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 %}
<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>
</button>
<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 %}
<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>
</button>
<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 %}
<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">
<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>
@ -30,29 +30,29 @@ group: material-design
<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>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</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>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</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>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
<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>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
</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>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
</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>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
</div>
@ -81,11 +81,11 @@ group: material-design
<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>
</div>
<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">
</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.
- Global font-size increased from `14px` to `16px`.
- 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
- Adopted Bootstrap project organization and Build structure
- 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)
- Refactored with much less code now that we are customizing Bootstrap
- 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
- 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
- Bootstrap removed `.form-group-sm` and `.form-group-lg`. `.mdb-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
- 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 `bmd-switch` for more consistent naming with the spec
- TODO - File Input
### [Labels](../material-design/labels)
- 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)
- Bootstrap renamed `.btn-default` to `.btn-secondary`.
- 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
- 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
- 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

4
js/src/base.js
View File

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

36
js/src/baseInput.js
View File

@ -5,11 +5,11 @@ const BaseInput = (($) => {
const ClassName = {
FORM_GROUP: 'form-group',
MDB_FORM_GROUP: 'mdb-form-group',
MDB_LABEL: 'mdb-label',
MDB_LABEL_STATIC: 'mdb-label-static',
MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder',
MDB_LABEL_FLOATING: 'mdb-label-floating',
MDB_FORM_GROUP: 'bmd-form-group',
MDB_LABEL: 'bmd-label',
MDB_LABEL_STATIC: 'bmd-label-static',
MDB_LABEL_PLACEHOLDER: 'bmd-label-placeholder',
MDB_LABEL_FLOATING: 'bmd-label-floating',
HAS_DANGER: 'has-danger',
IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused'
@ -34,7 +34,7 @@ const BaseInput = (($) => {
label: {
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 string selector used like $mdbFormGroup.find(selector)
//
@ -52,8 +52,8 @@ const BaseInput = (($) => {
}
const FormControlSizeMarkers = {
'form-control-lg': 'mdb-form-group-lg',
'form-control-sm': 'mdb-form-group-sm'
'form-control-lg': 'bmd-form-group-lg',
'form-control-sm': 'bmd-form-group-sm'
}
/**
@ -81,19 +81,19 @@ const BaseInput = (($) => {
// Enforce required classes for a consistent rendering
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
this.$formGroup = this.findFormGroup(this.config.formGroup.required)
// Will add mdb-form-group to form-group or create an mdb-form-group
// Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid
// 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 .bmd-form-group to avoid
// rendering changes once added.
this.$mdbFormGroup = this.resolveMdbFormGroup()
// Resolve and mark the mdbLabel if necessary as defined by the config
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.addFocusListener()
@ -169,7 +169,7 @@ const BaseInput = (($) => {
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() {
let mfg = this.findMdbFormGroup(false)
if (mfg === undefined || mfg.length === 0) {
@ -182,7 +182,7 @@ const BaseInput = (($) => {
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
// 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)
}
@ -198,7 +198,7 @@ const BaseInput = (($) => {
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() {
let label = this.$mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD)
@ -217,7 +217,7 @@ const BaseInput = (($) => {
return label
}
// Find mdb-label variant based on the config selectors
// Find bmd-label variant based on the config selectors
findMdbLabel(raiseError = true) {
let label = null
@ -240,7 +240,7 @@ const BaseInput = (($) => {
return label
}
// Find mdb-form-group
// Find bmd-form-group
findFormGroup(raiseError = true) {
let fg = this.$element.closest(Selector.FORM_GROUP)
if (fg.length === 0 && raiseError) {
@ -249,7 +249,7 @@ const BaseInput = (($) => {
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
resolveMdbFormGroupSizing() {
if (!this.config.convertInputSizeVariations) {

16
js/src/baseLayout.js
View File

@ -4,9 +4,9 @@ import Util from './util'
const BaseLayout = (($) => {
const ClassName = {
CANVAS: 'mdb-layout-canvas',
CONTAINER: 'mdb-layout-container',
BACKDROP: `mdb-layout-backdrop`
CANVAS: 'bmd-layout-canvas',
CONTAINER: 'bmd-layout-container',
BACKDROP: `bmd-layout-backdrop`
}
const Selector = {
@ -52,7 +52,7 @@ const BaseLayout = (($) => {
// ------------------------------------------------------------------------
// protected
// Will wrap container in mdb-layout-canvas if necessary
// Will wrap container in bmd-layout-canvas if necessary
resolveCanvas() {
let bd = this.findCanvas(false)
if (bd === undefined || bd.length === 0) {
@ -66,7 +66,7 @@ const BaseLayout = (($) => {
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) {
let canvas = context.closest(Selector.CANVAS)
if (canvas.length === 0 && raiseError) {
@ -75,7 +75,7 @@ const BaseLayout = (($) => {
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() {
let bd = this.findBackdrop(false)
if (bd === undefined || bd.length === 0) {
@ -89,7 +89,7 @@ const BaseLayout = (($) => {
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) {
let backdrop = context.find(`> ${Selector.BACKDROP}`)
if (backdrop.length === 0 && raiseError) {
@ -98,7 +98,7 @@ const BaseLayout = (($) => {
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) {
let container = context.closest(Selector.CONTAINER)
if (container.length === 0 && raiseError) {

2
js/src/baseSelection.js
View File

@ -12,7 +12,7 @@ const BaseSelection = (($) => {
label: {
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 string selector used like $mdbFormGroup.find(selector)
//

6
js/src/bootstrapMaterialDesign.js vendored
View File

@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => {
global: {
validate: false,
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: {
@ -45,10 +45,10 @@ const BootstrapMaterialDesign = (($) => {
selector: 'label.checkbox-inline > input[type=checkbox]'
},
collapseInline: {
selector: '.mdb-collapse-inline [data-toggle="collapse"]'
selector: '.bmd-collapse-inline [data-toggle="collapse"]'
},
drawer: {
selector: '.mdb-layout-drawer'
selector: '.bmd-layout-drawer'
},
file: {
selector: 'input[type=file]'

2
js/src/checkboxInline.js
View File

@ -14,7 +14,7 @@ const CheckboxInline = (($) => {
const Default = {
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
}
}

2
js/src/collapseInline.js
View File

@ -34,7 +34,7 @@ const CollapseInline = (($) => {
class CollapseInline extends Base {
// $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) {
super($element, $.extend(true, {}, Default, config))
this.$mdbFormGroup = this.findMdbFormGroup(true)

12
js/src/drawer.js
View File

@ -20,10 +20,10 @@ const Drawer = (($) => {
const ClassName = {
IN: 'in',
DRAWER_IN: `mdb-drawer-in`,
DRAWER_OUT: `mdb-drawer-out`,
DRAWER: 'mdb-layout-drawer',
CONTAINER: 'mdb-layout-container'
DRAWER_IN: `bmd-drawer-in`,
DRAWER_OUT: `bmd-drawer-out`,
DRAWER: 'bmd-layout-drawer',
CONTAINER: 'bmd-layout-container'
}
const Default = {
@ -38,7 +38,7 @@ const Drawer = (($) => {
class Drawer extends BaseLayout {
// $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) {
super($element, $.extend(true, {}, Default, config))
@ -97,7 +97,7 @@ const Drawer = (($) => {
}
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)
}

2
js/src/radio.js
View File

@ -18,7 +18,7 @@ const Radio = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
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 = {
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
}
}

2
js/src/switch.js
View File

@ -13,7 +13,7 @@ const Switch = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
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
// flat removes bg, add color variations to text
@include mdb-flat-button-color();
@include bmd-flat-button-color();
// fab and raised
// - colored, add their text and bg
// - hover color contrasted
// - shared shadow state on hover/active/focus
&.mdb-btn-fab,
&.bmd-btn-fab,
&.btn-raised,
.btn-group-raised & {
@include mdb-raised-button-color();
@include bmd-raised-button-color();
// enlarged shadow on hover, focus
@include hover-focus() {
@ -60,19 +60,19 @@
// reverse any of the above for links
&.btn-link {
box-shadow: none;
@include mdb-hover-focus-active() {
@include bmd-hover-focus-active() {
box-shadow: none;
}
}
@include mdb-disabled() {
@include bmd-disabled() {
box-shadow: none;
}
}
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.mdb-btn-fab,
&.mdb-btn-icon {
&.bmd-btn-fab,
&.bmd-btn-icon {
padding: 0;
overflow: hidden;
font-size: $mdb-btn-fab-font-size;
@ -93,7 +93,7 @@
}
}
&.mdb-btn-fab {
&.bmd-btn-fab {
// see above for color variations
width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
@ -106,7 +106,7 @@
border-radius: 50%;
}
&.mdb-btn-fab-sm,
&.bmd-btn-fab-sm,
.btn-group-sm & {
width: $mdb-btn-fab-size-sm;
min-width: $mdb-btn-fab-size-sm;
@ -121,14 +121,14 @@
}
// Icon buttons
&.mdb-btn-icon {
&.bmd-btn-icon {
width: $mdb-btn-icon-size;
min-width: $mdb-btn-icon-size;
height: $mdb-btn-icon-size;
margin: 0;
color: inherit;
&.mdb-btn-icon-sm,
&.bmd-btn-icon-sm,
.btn-group-sm & {
width: $mdb-btn-icon-size-sm;
min-width: $mdb-btn-icon-size-sm;
@ -169,7 +169,7 @@
.btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include mdb-disabled() {
@include bmd-disabled() {
color: $mdb-btn-disabled;
.bg-inverse & {
color: $mdb-inverse-btn-disabled;
@ -197,7 +197,7 @@
// }
//
// > .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?
padding: .5rem;
}
&.mdb-card-raised {
&.bmd-card-raised {
// Card raised elevation: 8dp
@include box-shadow($mdb-shadow-8dp);
}
@include media-breakpoint-up(lg) {
// 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;
}
}

58
scss/_drawer.scss
View File

@ -1,7 +1,7 @@
// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
// Drawer.
.mdb-layout-drawer {
.bmd-layout-drawer {
position: absolute;
z-index: 5; // over a header and content
box-sizing: border-box;
@ -58,65 +58,65 @@
// Sizing and positioning below here
// 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
@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
// as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px).
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
// 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
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-in`
// without a size (for triggered openings). Since the xs size is 0, instead of using `mdb-drawer-in-xs`
// (which is mostly meaningless), we create `mdb-drawer-in` meaning always open.
// 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 `bmd-drawer-in`
// 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 `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
// 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
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
// Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay.
// 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 `bmd-drawer-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)
: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) {
@include mdb-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
@include mdb-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
@include bmd-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
@include bmd-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
@include mdb-drawer-x-overlay-down($breakpoint);
@include mdb-drawer-y-overlay-down($breakpoint);
@include bmd-drawer-x-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 {
// $custom-size: 500px;
// @include mdb-drawer-x-out($custom-size);
// &:not(.mdb-drawer-out) {
// @include bmd-drawer-x-out($custom-size);
// &:not(.bmd-drawer-out) {
// @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 {
// $custom-size: 500px;
// @include mdb-drawer-x-out($custom-size); // closed by default
// @include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
// @include bmd-drawer-x-out($custom-size); // closed by default
// @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
// @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 {
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%;
}
&.dropdown-menu-top-right {
top: auto;
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;
transform-origin: 100% 100%;
}
@ -93,8 +93,8 @@
.dropdown-toggle {
&.mdb-btn-icon,
&.mdb-btn-fab {
&.bmd-btn-icon,
&.bmd-btn-fab {
// remove the dropdown icon
&::after {
display: none;
@ -108,7 +108,7 @@
}
}
&.mdb-btn-fab-sm {
&.bmd-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
@ -117,7 +117,7 @@
}
}
&.mdb-btn-icon {
&.bmd-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;

56
scss/_forms.scss
View File

@ -1,12 +1,12 @@
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;
// reverse the above for navbars (no help expected in a navbar form)
.navbar & {
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;
padding-top: 0;
}
@ -30,14 +30,14 @@ form {
transition: background 0s ease-out;
// 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;
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.
&:focus,
.mdb-form-group.is-focused & {
.bmd-form-group.is-focused & {
background-size: $mdb-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
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.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
//
.mdb-help {
.bmd-help {
position: absolute;
display: none;
font-size: 80%;
font-weight: normal;
@extend .text-muted;
.mdb-form-group.is-focused & {
.bmd-form-group.is-focused & {
display: block;
}
}
@ -63,31 +63,31 @@ form {
// -----
// State coloring: default, success, info, warning, danger
//
@include mdb-selection-color();
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
@include bmd-selection-color();
@include bmd-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
.has-success {
@include mdb-form-color($brand-success, $brand-success, $brand-success);
@include bmd-form-color($brand-success, $brand-success, $brand-success);
}
.has-info {
@include mdb-form-color($brand-info, $brand-info, $brand-info);
@include bmd-form-color($brand-info, $brand-info, $brand-info);
}
.has-warning {
@include mdb-form-color($brand-warning, $brand-warning, $brand-warning);
@include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
}
.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
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.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.
.mdb-form-group {
// 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.
.bmd-form-group {
position: relative;
// -----
@ -95,28 +95,28 @@ form {
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
[class^='mdb-label'],
[class*=' mdb-label'] {
[class^='bmd-label'],
[class*=' bmd-label'] {
position: absolute;
pointer-events: none;
transition: 0.3s ease all;
// hint to browser for optimization
&.mdb-label-floating {
&.bmd-label-floating {
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
}
}
// hide label-placeholders when the field is filled
&.is-filled .mdb-label-placeholder {
&.is-filled .bmd-label-placeholder {
display: none;
}
// Optional class to make the text field inline collapsible/expandable (collapsed by default)
// 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
&.mdb-collapse-inline {
&.bmd-collapse-inline {
padding: 0; // get rid of any padding as this is a width transition
// Expandable Holder.
@ -141,22 +141,22 @@ form {
}
}
// default floating size/location with an mdb-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");
// default floating size/location with an bmd-form-group
@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
&.mdb-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");
&.bmd-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
&.mdb-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");
&.bmd-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
@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 {
&,
@ -168,7 +168,7 @@ select {
}
// 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;
// position: absolute;
// top: 0;

4
scss/_input-group.scss
View File

@ -13,11 +13,11 @@
// default margin - no form-group required
@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);
}
&.mdb-form-group-lg {
&.bmd-form-group-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.
// It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a
// mdb-layout-content that scrolls.
// It allows for flex based positioning such as sticky header and footer inside an bmd-layout, with a
// bmd-layout-content that scrolls.
// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935
// First element
.mdb-layout-canvas { // added by js?
.bmd-layout-canvas { // added by js?
position: absolute;
width: 100%;
height: 100%;
}
// Primary layout container, belongs inside a mdb-layout-canvas.
.mdb-layout-container {
// Primary layout container, belongs inside a bmd-layout-canvas.
.bmd-layout-container {
position: relative;
display: flex;
flex-direction: column; // allows for sticky header and footer
@ -23,8 +23,8 @@
-webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
}
// Header layout (fixed top), belongs in a mdb-layout-container
.mdb-layout-header {
// Header layout (fixed top), belongs in a bmd-layout-container
.bmd-layout-header {
z-index: 3;
display: flex;
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();
}
// Content layout, belongs in a mdb-layout-container
.mdb-layout-content {
// Content layout, belongs in a bmd-layout-container
.bmd-layout-content {
position: relative;
z-index: 1; // under a header
display: inline-block;
@ -51,12 +51,12 @@
}
// Pushes flex-based content to the other end (x or y)
.mdb-layout-spacer {
.bmd-layout-spacer {
flex-grow: 1;
}
// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
.mdb-layout-backdrop {
.bmd-layout-backdrop {
position: absolute;
top: 0;
left: 0;
@ -76,5 +76,5 @@
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;
// dense size variation
&.mdb-list-group-sm {
&.bmd-list-group-sm {
padding: .25rem 0;
.list-group-item {
@ -28,7 +28,7 @@
}
}
.mdb-list-group-col {
.bmd-list-group-col {
display: flex;
flex-direction: column;
min-width: 0;

6
scss/_nav.scss
View File

@ -35,14 +35,14 @@
}
// 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 {
@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 {
@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;
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
.mdb-radio-inner-circle {
.bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
.bmd-radio-inner-circle {
position: absolute;
top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height
left: 0;
@ -13,12 +13,12 @@ label.radio-inline {
height: $mdb-radio-size;
transition-duration: 0.2s;
&.mdb-radio-outer-circle {
&.bmd-radio-outer-circle {
border: $mdb-radio-border solid $mdb-radio-color-off;
border-radius: 50%;
transition: border-color ease .28s;
}
&.mdb-radio-inner-circle {
&.bmd-radio-inner-circle {
display: inline-block;
background-color: $mdb-radio-color-on;
border-radius: 50%;
@ -51,9 +51,9 @@ label.radio-inline {
opacity: 0;
&: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);
&::after {
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;
}
&[disabled],
fieldset[disabled] & {
@include mdb-radio-color($mdb-radio-color-disabled);
@include bmd-radio-color($mdb-radio-color-disabled);
.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;
padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
.mdb-switch-track {
.bmd-switch-track {
position: absolute;
top: calc-top($line-height-base, $font-size-base, $mdb-switch-height);
left: 0;
@ -55,7 +55,7 @@
opacity: 0;
&:checked {
+ .mdb-switch-track {
+ .bmd-switch-track {
background-position: -100%;
&::after {
left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
@ -66,11 +66,11 @@
&:disabled {
// No jelly effect on disabled switchs
+ .mdb-switch-track:active::after {
+ .bmd-switch-track:active::after {
transform: translateY(-50%);
}
+ .mdb-switch-track {
+ .bmd-switch-track {
cursor: default;
background: $mdb-switch-disabled-bg;
&::after {

2
scss/_variables.scss
View File

@ -61,7 +61,7 @@ $icon-color: rgba($black, 0.5) !default;
// --------------------
// 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-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
@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;
background-color: $background;
border-color: $border;
@ -34,7 +34,7 @@
}
// 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;
background-color: $background;
@ -58,7 +58,7 @@
}
}
@mixin mdb-flat-button-variant($color) {
@mixin bmd-flat-button-variant($color) {
$background: $mdb-btn-bg;
$border: $mdb-btn-border;
@ -69,7 +69,7 @@
$active-background: $mdb-btn-active-bg;
$active-border: $mdb-btn-active-bg;
@include mdb-button-variant($color,
@include bmd-button-variant($color,
$background,
$focus-background,
$active-background,
@ -85,7 +85,7 @@
$active-background: $mdb-inverse-btn-active-bg;
$active-border: $mdb-inverse-btn-active-bg;
@include mdb-button-variant($color,
@include bmd-button-variant($color,
$background,
$focus-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
&.btn-primary {
@include mdb-flat-button-variant($btn-primary-bg);
@include bmd-flat-button-variant($btn-primary-bg);
}
&.btn-secondary {
@include mdb-flat-button-variant($btn-secondary-color);
@include bmd-flat-button-variant($btn-secondary-color);
}
&.btn-info {
@include mdb-flat-button-variant($btn-info-bg);
@include bmd-flat-button-variant($btn-info-bg);
}
&.btn-success {
@include mdb-flat-button-variant($btn-success-bg);
@include bmd-flat-button-variant($btn-success-bg);
}
&.btn-warning {
@include mdb-flat-button-variant($btn-warning-bg);
@include bmd-flat-button-variant($btn-warning-bg);
}
&.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?
$focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%));
@ -136,7 +136,7 @@
//$active-background: darken($background, 17%);
$active-border: darken($border, 25%);
@include mdb-button-variant($color,
@include bmd-button-variant($color,
$background,
$focus-background,
$active-background,
@ -145,25 +145,25 @@
$active-border);
}
@mixin mdb-raised-button-color() {
@mixin bmd-raised-button-color() {
&.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 {
@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 {
@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 {
@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 {
@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 {
@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
@mixin mdb-drawer-x-out($size) {
@mixin bmd-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer {
&.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-drawer {
// position
top: 0;
#{$side}: 0;
@ -18,18 +18,18 @@
}
}
> .mdb-layout-header,
> .mdb-layout-content {
> .bmd-layout-header,
> .bmd-layout-content {
margin-#{$side}: 0;
}
}
}
}
@mixin mdb-drawer-y-out($size) {
@mixin bmd-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer {
&.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-drawer {
// position
#{$side}: 0;
left: 0;
@ -44,14 +44,14 @@
}
}
> .mdb-layout-content {
> .bmd-layout-content {
margin-#{$side}: 0;
}
}
}
}
@function mdb-drawer-breakpoint-name($breakpoint, $suffix: "") {
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs {
@ -60,42 +60,42 @@
@return $name;
}
@mixin mdb-drawer-x-in($size) {
@mixin bmd-drawer-x-in($size) {
@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)
> .mdb-layout-header {
> .bmd-layout-header {
width: calc(100% - #{$size});
margin-#{$side}: $size;
}
> .mdb-layout-drawer {
> .bmd-layout-drawer {
transform: translateX(0);
}
> .mdb-layout-content {
> .bmd-layout-content {
margin-#{$side}: $size;
}
}
}
}
@mixin mdb-drawer-y-in($size) {
@mixin bmd-drawer-y-in($size) {
@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
> .mdb-layout-header {
> .bmd-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: $size;
}
}
> .mdb-layout-drawer {
> .bmd-layout-drawer {
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
margin-#{$side}: $size;
}
@ -105,22 +105,22 @@
}
// 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
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
&.bmd-drawer-in {
#{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-x-in($size);
// bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-x-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-f-(left and right) styles
@include mdb-drawer-x-in($size);
// bmd-drawer-f-(left and right) styles
@include bmd-drawer-x-in($size);
}
}
}
@ -128,35 +128,35 @@
}
// 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
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
&.bmd-drawer-in {
#{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-y-in($size);
// bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-y-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-f-(left and right) styles
@include mdb-drawer-y-in($size);
// bmd-drawer-f-(left and right) styles
@include bmd-drawer-y-in($size);
}
}
}
}
}
@mixin mdb-drawer-x-overlay() {
@include mdb-layout-backdrop-in();
@mixin bmd-drawer-x-overlay() {
@include bmd-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header,
> .mdb-layout-content {
&.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header,
> .bmd-layout-content {
width: 100%;
margin-#{$side}: 0;
}
@ -164,18 +164,18 @@
}
}
@mixin mdb-drawer-y-overlay() {
@include mdb-layout-backdrop-in();
@mixin bmd-drawer-y-overlay() {
@include bmd-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header {
&.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
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
margin-#{$side}: 0;
}
@ -185,25 +185,25 @@
}
// 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
$name: mdb-drawer-breakpoint-name($breakpoint, "-down");
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
&.bmd-drawer-overlay {
#{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
// x - left/right
@if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-x-overlay();
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.bmd-drawer-overlay {
@include bmd-drawer-x-overlay();
}
} @else {
@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
@mixin mdb-drawer-y-overlay-down($breakpoint) {
@mixin bmd-drawer-y-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-down");
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
&.bmd-drawer-overlay {
#{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
//// y - top/bottom
@if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
// responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay {
@include mdb-drawer-y-overlay();
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.bmd-drawer-overlay {
@include bmd-drawer-y-overlay();
}
} @else {
@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] &,
&.disabled,
&:disabled,
@ -7,7 +7,7 @@
}
}
@mixin mdb-selection-color() {
@mixin bmd-selection-color() {
.radio label,
.radio-inline,
.checkbox label,
@ -47,26 +47,26 @@
//fieldset[disabled] & input[type=checkbox],
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
//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;
//}
}
@mixin mdb-radio-color($color) {
@mixin bmd-radio-color($color) {
~ .mdb-radio-inner-circle {
~ .bmd-radio-inner-circle {
background-color: $color;
}
~ .mdb-radio-outer-circle {
~ .bmd-radio-outer-circle {
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*=' mdb-label'] {
[class^='bmd-label'],
[class*=' bmd-label'] {
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 {
// on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color);
[class^='mdb-label'],
[class*=' mdb-label'] {
[class^='bmd-label'],
[class*=' bmd-label'] {
color: $label-color-focus;
}
.mdb-label-placeholder {
.bmd-label-placeholder {
color: $label-color; // keep the placeholder color
}
@ -129,24 +129,24 @@
border-color: $border-color;
}
.mdb-help {
.bmd-help {
color: $mdb-label-color-inner-focus;
}
}
}
// 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;
left: 0;
// must repeat because the previous (more generic) selectors
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));
$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);
$label-static-top: $label-top-margin;
@ -161,7 +161,7 @@
//Padding below text divider: 8dp
@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).
padding-top: ($label-top-margin + $static-font-size);
// 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
}
// 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 {
font-size: $font-size;
}
@ -211,8 +211,8 @@
}
// floating/placeholder default (no focus)
.mdb-label-floating,
.mdb-label-placeholder {
.bmd-label-floating,
.bmd-label-placeholder {
//@debug "top: #{$label-as-placeholder-top}";
top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
}
@ -222,21 +222,21 @@
.is-focused,
&.is-filled,
.is-filled {
.mdb-label-floating {
@include mdb-label-static($label-static-top, $static-font-size);
.bmd-label-floating {
@include bmd-label-static($label-static-top, $static-font-size);
}
}
// static
.mdb-label-static {
@include mdb-label-static($label-static-top, $static-font-size);
.bmd-label-static {
@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
//input:-webkit-autofill ~ .mdb-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);
//input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
// @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
font-size: $help-font-size;
}
@ -251,14 +251,14 @@
&,
&:focus,
.mdb-form-group.is-focused & {
.bmd-form-group.is-focused & {
padding-right: ($input-padding-x * 3);
background-repeat: $mdb-form-control-bg-repeat-y, no-repeat;
background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25);
}
&:focus,
.mdb-form-group.is-focused & {
.bmd-form-group.is-focused & {
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
&.active {
@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
@mixin mdb-layout-backdrop-in() {
@mixin bmd-layout-backdrop-in() {
> .mdb-layout-backdrop {
> .bmd-layout-backdrop {
.in {
visibility: visible;
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 {
color: $color;

2
scss/mixins/_variations.scss
View File

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

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

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