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

Merge branch 'master' of https://github.com/FezVrasta/bootstrap-material-design

Browse Source 
# Conflicts:
#	rollup.config.js
This commit is contained in:
Vitali Korezki 2020-01-19 22:19:52 -08:00
commit 5057312531
12 changed files with 1157 additions and 1244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,6 +1,6 @@
<h1 align=center>Material Design for Bootstrap</h1> <h1 align=center>Material Design for Bootstrap</h1>
Material Design for Bootstrap is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html) Material Design for Bootstrap is the best way to use [Material Design guidelines by Google](https://material.io/design/introduction/)
in your Bootstrap 4 based application. in your Bootstrap 4 based application.
Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at
the end of your document (just before the `</body>` tag), and everything will be converted to Material Design. the end of your document (just before the `</body>` tag), and everything will be converted to Material Design.
@ -23,7 +23,7 @@ time, please consider becoming a contributor of this project!
If you are interested contact @FezVrasta or just adopt one of our [issues](https://github.com/FezVrasta/bootstrap-material-design/issues). If you are interested contact @FezVrasta or just adopt one of our [issues](https://github.com/FezVrasta/bootstrap-material-design/issues).
If you like this project you may support it by [donating](https://www.paypal.me/fezvrasta), starring this repository or reporting issues. If you like this project you may support it by [donating](https://www.paypal.me/fezvrasta), starring this repository or reporting issues.
All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/eJMMVB) test case where possible. All issues filed should be reduced to a [CodePen](https://codepen.io/rosskevin/pen/eJMMVB) test case where possible.
## Contributing ## Contributing
@ -39,13 +39,13 @@ Please read through our [contributing guidelines](CONTRIBUTING.md). Included are
Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://codeguide.co/), maintained by [Mark Otto](https://github.com/mdo), one of Bootstrap's founders. Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://codeguide.co/), maintained by [Mark Otto](https://github.com/mdo), one of Bootstrap's founders.
Editor preferences are available in the [editor config](https://github.com/FezVrasta/bootstrap-material-design/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>. Editor preferences are available in the [editor config](https://github.com/FezVrasta/bootstrap-material-design/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org>.
## Versioning ## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, this project is maintained under For transparency into our release cycle and in striving to maintain backward compatibility, this project is maintained under
[the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible. [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
See [the Releases section of our GitHub project](https://github.com/fezvrasta/bootstrap-material-design/releases) for changelogs See [the Releases section of our GitHub project](https://github.com/fezvrasta/bootstrap-material-design/releases) for changelogs
of each release version. of each release version.

2
_config.yml
View File

@ -44,7 +44,7 @@ blog: https://blog.getbootstrap.com
expo: https://expo.getbootstrap.com expo: https://expo.getbootstrap.com
mkp: https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385 mkp: https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385
mdp: https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385 mdp: https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385
mdbootstrap: https://mdbootstrap.com/material-design-for-bootstrap/?utm_ref_id=26974 mdbootstrap: https://mdbootstrap.com/products/?utm_ref_id=26974
cdn: cdn:
# See https://www.srihash.org for info on how to generate the hashes # See https://www.srihash.org for info on how to generate the hashes

2
_includes/ads.html
View File

@ -1 +1 @@
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYI553N&placement=fezvrastagithubio" id="_carbonads_js"></script>

6
_includes/docs-navbar.html
View File

@ -15,14 +15,14 @@
<a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li> </li>
<li class="nav-item partner creativetim"> <li class="nav-item partner creativetim">
<a class="nav-link" href="{{ site.mdp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a> <a class="nav-link" href="{{ site.mdp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="sponsored">Material Dashboard</a>
</li> </li>
<li class="nav-item partner creativetim"> <li class="nav-item partner creativetim">
<a class="nav-link" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a> <a class="nav-link" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="sponsored">Material Kit</a>
</li> </li>
<li class="nav-item partner mdbootstrap"> <li class="nav-item partner mdbootstrap">
<a class="nav-link" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');" <a class="nav-link" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
target="_blank" rel="noopener">Material Design for Bootstrap PRO</a> target="_blank" rel="sponsored">Material Design for Bootstrap PRO</a>
</li> </li>
</ul> </ul>
</div> </div>

10
index.html
View File

@ -83,21 +83,21 @@ gem install bootstrap-material-design -v 4.1.1
<p class="partner mdbootstrap"> <p class="partner mdbootstrap">
2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more 2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more
</p> </p>
<a class="partner mdbootstrap" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - mdbootstrap');"> <a class="partner mdbootstrap" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - mdbootstrap');" rel="sponsored">
<img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mdbootstrap-alt.jpg" alt="Bootstrap Themes" width="1024" height="388"> <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mdbootstrap-alt.jpg" alt="Bootstrap Themes" width="1024" height="388">
</a> </a>
<br /><br /> <br /><br />
<a href="{{ site.mdbootstrap }}" class="btn btn-outline-primary partner mdbootstrap" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button - mdbootstrap');">Get Material Design for Bootstrap PRO</a> <a href="{{ site.mdbootstrap }}" class="btn btn-outline-primary partner mdbootstrap" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button - mdbootstrap');" rel="sponsored">Get Material Design for Bootstrap PRO</a>
<h3 class="partner creativetim">Official Pro Kits</h3> <h3 class="partner creativetim">Official Pro Kits</h3>
<p class="partner creativetim"> <p class="partner creativetim">
Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro. Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
</p> </p>
<a class="partner creativetim" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - creativetim');"> <a class="partner creativetim" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - creativetim');" rel="sponsored">
<img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388"> <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
</a> </a>
<br /><br /> <br /><br />
<a href="{{ site.mkp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MKP - creativetim');">Material Kit Pro</a> <a href="{{ site.mkp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MKP - creativetim');" rel="sponsored">Material Kit Pro</a>
<a href="{{ site.mdp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MDP - creativetim');">Material Dashboard Pro</a> <a href="{{ site.mdp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MDP - creativetim');" rel="sponsored">Material Dashboard Pro</a>
</div> </div>
</div> </div>

31
js/autofill.js
View File

@ -10,6 +10,7 @@ const Autofill = ($ => {
const DATA_KEY = `bmd.${NAME}`; const DATA_KEY = `bmd.${NAME}`;
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`; const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`;
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]; const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME];
const LAST_VALUE_DATA_KEY = "bmd.last_value";
const Default = {}; const Default = {};
@ -45,9 +46,21 @@ const Autofill = ($ => {
setInterval(() => { setInterval(() => {
$("input[type!=checkbox]").each((index, element) => { $("input[type!=checkbox]").each((index, element) => {
let $element = $(element); let $element = $(element);
if ($element.val() && $element.val() !== $element.attr("value")) {
let previousValue = $element.data(LAST_VALUE_DATA_KEY);
if (previousValue === undefined) {
previousValue = $element.attr("value");
}
if (previousValue === undefined) {
previousValue = "";
}
let currentValue = $element.val();
if (currentValue !== previousValue) {
$element.trigger("change"); $element.trigger("change");
} }
$element.data(LAST_VALUE_DATA_KEY, currentValue);
}); });
}, 100); }, 100);
} }
@ -61,13 +74,25 @@ const Autofill = ($ => {
let $inputs = $(event.currentTarget) let $inputs = $(event.currentTarget)
.closest("form") .closest("form")
.find("input") .find("input")
.not("[type=file]"); .not("[type=file], [type=date]");
focused = setInterval(() => { focused = setInterval(() => {
$inputs.each((index, element) => { $inputs.each((index, element) => {
let $element = $(element); let $element = $(element);
if ($element.val() !== $element.attr("value")) {
let previousValue = $element.data(LAST_VALUE_DATA_KEY);
if (previousValue === undefined) {
previousValue = $element.attr("value");
}
if (previousValue === undefined) {
previousValue = "";
}
let currentValue = $element.val();
if (currentValue !== previousValue) {
$element.trigger("change"); $element.trigger("change");
} }
$element.data(LAST_VALUE_DATA_KEY, currentValue);
}); });
}, 100); }, 100);
}) })

3
js/drawer.js
View File

@ -89,6 +89,9 @@ const Drawer = ($ => {
return; return;
} }
$(".bmd-layout-drawer").hide();
this.$element.show();
this.$toggles.attr("aria-expanded", true); this.$toggles.attr("aria-expanded", true);
this.$element.attr("aria-expanded", true); this.$element.attr("aria-expanded", true);
this.$element.attr("aria-hidden", false); this.$element.attr("aria-hidden", false);

32
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "bootstrap-material-design", "name": "bootstrap-material-design",
"description": "Material Design for Bootstrap 4", "description": "Material Design for Bootstrap 4",
"version": "4.1.1", "version": "4.1.2",
"keywords": [ "keywords": [
"material", "material",
"design", "design",
@ -45,24 +45,24 @@
}, },
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0-beta.38", "@babel/core": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.38", "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/preset-env": "^7.0.0-beta.38", "@babel/preset-env": "^7.4.4",
"babel-core": "^6.25.0", "babel-core": "^6.26.3",
"babel-minify": "^0.2.0", "babel-minify": "^0.5.0",
"babel-plugin-module-resolver": "3", "babel-plugin-module-resolver": "3",
"babel-plugin-transform-es2015-modules-strip": "^0.1.1", "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
"bootstrap": "^4.0.0", "bootstrap": "^4.3.1",
"cssnano-cli": "^1.0.5", "cssnano-cli": "^1.0.5",
"jquery": ">=3.0.0", "jquery": ">=3.4.0",
"node-sass": "^4.5.3", "node-sass": "^4.12.0",
"node-sass-tilde-importer": "^1.0.0", "node-sass-tilde-importer": "^1.0.2",
"popper.js": "^1.11.0", "popper.js": "^1.15.0",
"prettier": "^1.5.3", "prettier": "^1.17.0",
"rollup": "^0.50.0", "rollup": "^1.11.2",
"rollup-plugin-babel": "^4.0.0-beta.0", "rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^8.2.6", "rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^3.0.2" "rollup-plugin-node-resolve": "^4.2.3"
}, },
"files": [ "files": [
"dist", "dist",

11
rollup.config.js
View File

@ -8,14 +8,15 @@ const babelOptions = JSON.parse(fs.readFileSync('./.babelrc'));
export default { export default {
output: { output: {
format: 'umd', format: 'umd',
}, globals: {
globals: { jquery: 'jQuery',
jquery: 'jQuery', 'popper.js': 'Popper',
'popper.js': 'Popper', },
}, },
external: ['jquery', 'popper.js'], external: ['jquery', 'popper.js'],
plugins: [ plugins: [
babel(Object.assign(babelOptions, { babel(Object.assign(babelOptions, {
exclude: 'node_modules/**', // only transpile our source code
externalHelpersWhitelist: [ externalHelpersWhitelist: [
// Include only required helpers // Include only required helpers
'defineProperties', 'defineProperties',
@ -27,7 +28,7 @@ export default {
], ],
}) ), }) ),
resolve({ resolve({
module: true, mainFields: ['module', 'main'], // Default: ['module', 'main']
}), }),
cjs({ cjs({
include: ['node_modules/bootstrap/**', 'node_modules/jquery/**'], include: ['node_modules/bootstrap/**', 'node_modules/jquery/**'],

129
scss/mixins/_drawer.scss
View File

@ -1,9 +1,11 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
@mixin bmd-drawer-x-out($size) { @mixin bmd-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
> .bmd-layout-drawer { $abbrev in (left: l, right: r) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
>.bmd-layout-drawer {
// position // position
top: 0; top: 0;
#{$side}: 0; #{$side}: 0;
@ -11,19 +13,17 @@
width: $size; width: $size;
height: 100%; height: 100%;
@if $side == left { @if $side==left {
transform: translateX( transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
-$size - 10px }
); // initial position of drawer (closed), way off screen
} @else { @else {
transform: translateX( transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
$size + 10px
); // initial position of drawer (closed), way off screen
} }
} }
> .bmd-layout-header, >.bmd-layout-header,
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
@ -31,9 +31,11 @@
} }
@mixin bmd-drawer-y-out($size) { @mixin bmd-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
> .bmd-layout-drawer { $abbrev in (top: t, bottom: b) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
>.bmd-layout-drawer {
// position // position
#{$side}: 0; #{$side}: 0;
left: 0; left: 0;
@ -41,18 +43,16 @@
width: 100%; width: 100%;
height: $size; height: $size;
@if $side == top { @if $side==top {
transform: translateY( transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
-$size - 10px }
); // initial position of drawer (closed), way off screen
} @else { @else {
transform: translateY( transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
$size + 10px
); // initial position of drawer (closed), way off screen
} }
} }
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
@ -62,26 +62,31 @@
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") { @function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}#{$suffix}"; $name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs {
@if $breakpoint==xs {
$name: "&"; $name: "&";
} }
@return $name; @return $name;
} }
@mixin bmd-drawer-x-in($size) { @mixin bmd-drawer-x-in($size) {
@each $side, $abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
$abbrev in (left: l, right: r) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior) // Push - drawer will push the header and content (default behavior)
> .bmd-layout-header { >.bmd-layout-header {
width: calc(100% - #{$size}); width: calc(100% - #{$size});
margin-#{$side}: $size; margin-#{$side}: $size;
} }
> .bmd-layout-drawer { >.bmd-layout-drawer {
transform: translateX(0); transform: translateX(0);
} }
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
@ -89,22 +94,25 @@
} }
@mixin bmd-drawer-y-in($size) { @mixin bmd-drawer-y-in($size) {
@each $side, $abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
$abbrev in (top: t, bottom: b) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content // 1. Push - drawer will push the header or content
> .bmd-layout-header { >.bmd-layout-header {
@if $side == top { @if $side==top {
// only add margin-top on a header when the drawer is at the top // only add margin-top on a header when the drawer is at the top
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
> .bmd-layout-drawer { >.bmd-layout-drawer {
transform: translateY(0); transform: translateY(0);
} }
> .bmd-layout-content { >.bmd-layout-content {
@if $side == bottom { @if $side==bottom {
// only add margin-bottom on content when the drawer is at the bottom // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: $size; margin-#{$side}: $size;
} }
@ -122,10 +130,13 @@
#{unquote($name)} { #{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint==xs {
// bmd-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-x-in($size); @include bmd-drawer-x-in($size);
} @else { }
@else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@ -145,10 +156,13 @@
#{unquote($name)} { #{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint==xs {
// bmd-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-y-in($size); @include bmd-drawer-y-in($size);
} @else { }
@else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@ -162,10 +176,12 @@
@mixin bmd-drawer-x-overlay() { @mixin bmd-drawer-x-overlay() {
@include bmd-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) { @each $side,
$abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header,
> .bmd-layout-content { >.bmd-layout-header,
>.bmd-layout-content {
width: 100%; width: 100%;
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -176,17 +192,18 @@
@mixin bmd-drawer-y-overlay() { @mixin bmd-drawer-y-overlay() {
@include bmd-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) { @each $side,
$abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header { >.bmd-layout-header {
@if $side == top { @if $side==top {
// only add margin-top on a header when the drawer is at the top // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
> .bmd-layout-content { >.bmd-layout-content {
@if $side == bottom { @if $side==bottom {
// only add margin-bottom on content when the drawer is at the bottom // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -206,7 +223,7 @@
// x - left/right // x - left/right
@if $breakpoint == xs { @if $breakpoint==xs {
// overlay marker class (non-responsive) // overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@ -214,7 +231,9 @@
&.bmd-drawer-overlay { &.bmd-drawer-overlay {
@include bmd-drawer-x-overlay(); @include bmd-drawer-x-overlay();
} }
} @else { }
@else {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
// overlay responsive class // overlay responsive class
@include bmd-drawer-x-overlay(); @include bmd-drawer-x-overlay();
@ -234,7 +253,7 @@
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
//// y - top/bottom //// y - top/bottom
@if $breakpoint == xs { @if $breakpoint==xs {
// overlay marker class (non-responsive) // overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@ -242,7 +261,9 @@
&.bmd-drawer-overlay { &.bmd-drawer-overlay {
@include bmd-drawer-y-overlay(); @include bmd-drawer-y-overlay();
} }
} @else { }
@else {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
// overlay responsive class // overlay responsive class
@include bmd-drawer-y-overlay(); @include bmd-drawer-y-overlay();

79
scss/mixins/_forms.scss
View File

@ -1,4 +1,5 @@
@mixin bmd-disabled() { @mixin bmd-disabled() {
fieldset[disabled][disabled] &, fieldset[disabled][disabled] &,
&.disabled, &.disabled,
&:disabled, &:disabled,
@ -8,6 +9,7 @@
} }
@mixin bmd-selection-color() { @mixin bmd-selection-color() {
.radio label, .radio label,
.radio-inline, .radio-inline,
.checkbox label, .checkbox label,
@ -34,6 +36,7 @@
label:has(input[type=checkbox][disabled]), label:has(input[type=checkbox][disabled]),
// css 4 // css 4
fieldset[disabled] & { fieldset[disabled] & {
&, &,
&:hover, &:hover,
&:focus { &:focus {
@ -57,12 +60,14 @@
&::after { &::after {
border-color: $color; border-color: $color;
} }
&::before { &::before {
background-color: $color; background-color: $color;
} }
} }
@mixin bmd-form-color($label-color, $label-color-focus, $border-color) { @mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
[class^='bmd-label'], [class^='bmd-label'],
[class*=' bmd-label'] { [class*=' bmd-label'] {
color: $label-color; color: $label-color;
@ -71,43 +76,29 @@
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
.form-control { .form-control {
// underline animation color on focus // underline animation color on focus
$underline-background-image: linear-gradient( $underline-background-image: linear-gradient(to top,
to top,
$label-color-focus 2px, $label-color-focus 2px,
fade-out($label-color-focus, 1) 2px fade-out($label-color-focus, 1) 2px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-invalid: linear-gradient(to top,
$underline-background-image-invalid: linear-gradient(
to top,
$bmd-invalid-underline 2px, $bmd-invalid-underline 2px,
fade-out($bmd-invalid-underline, 1) 2px fade-out($bmd-invalid-underline, 1) 2px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-readonly: linear-gradient(to top,
$underline-background-image-readonly: linear-gradient(
to top,
$bmd-readonly-underline 1px, $bmd-readonly-underline 1px,
fade-out($bmd-readonly-underline, 1) 1px fade-out($bmd-readonly-underline, 1) 1px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-disabled: linear-gradient(to right,
$underline-background-image-disabled: linear-gradient( $input-border-color 0%,
to right, $input-border-color 30%,
$input-border-color 0%, transparent 30%,
$input-border-color 30%, transparent 100%);
transparent 30%,
transparent 100%
);
// bg image is always there, we just need to reveal it // bg image is always there, we just need to reveal it
&, &,
@ -131,18 +122,23 @@
// allow underline focus image and validation images to coexist // allow underline focus image and validation images to coexist
&.form-control-success { &.form-control-success {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-success; background-image: $underline-background-image, $form-icon-success;
} }
} }
&.form-control-warning { &.form-control-warning {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-warning; background-image: $underline-background-image, $form-icon-warning;
} }
} }
&.form-control-danger { &.form-control-danger {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-danger; background-image: $underline-background-image, $form-icon-danger;
@ -152,11 +148,11 @@
.is-focused, .is-focused,
// may or may not be a form-group or bmd-form-group // may or may not be a form-group or bmd-form-group
&.is-focused { #{if(&, "&", "*")}.is-focused {
// on focus set borders and labels to the validation color // on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@include form-validation-state("valid", $label-color); @include form-validation-state("valid", $label-color, "none");
[class^='bmd-label'], [class^='bmd-label'],
[class*=' bmd-label'] { [class*=' bmd-label'] {
@ -192,15 +188,12 @@
} }
@mixin bmd-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: ( $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
($font-size * $variant-line-height) + ($variant-padding-y * 2)
);
$static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size); $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
$help-font-size: ($bmd-help-size-ratio * $font-size); $help-font-size: ($bmd-help-size-ratio * $font-size);
$label-static-top: $label-top-margin; $label-static-top: $label-top-margin;
$label-placeholder-top: $label-top-margin + $static-font-size + $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
$variant-padding-y;
//@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
@ -246,8 +239,8 @@
// across browsers // across browsers
input.form-control, input.form-control,
input.form-control::placeholder { input.form-control::placeholder {
padding:0.28125rem 0; padding: 0.28125rem 0;
line-height:1.5; line-height: 1.5;
} }
.radio label, .radio label,
@ -278,9 +271,9 @@
} }
// floating focused/filled will look like static // floating focused/filled will look like static
&.is-focused, #{if(&, "&", "*")}.is-focused,
.is-focused, .is-focused,
&.is-filled, #{if(&, "&", "*")}.is-filled,
.is-filled { .is-filled {
.bmd-label-floating { .bmd-label-floating {
@include bmd-label-static($label-static-top, $static-font-size); @include bmd-label-static($label-static-top, $static-font-size);
@ -291,6 +284,7 @@
.bmd-label-static { .bmd-label-static {
@include bmd-label-static($label-static-top, $static-font-size); @include bmd-label-static($label-static-top, $static-font-size);
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
//input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary //input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
// @include bmd-label-static($label-top, $static-font-size, $static-line-height); // @include bmd-label-static($label-top, $static-font-size, $static-line-height);
@ -303,6 +297,7 @@
// validation icon placement // validation icon placement
.form-control { .form-control {
&.form-control-success, &.form-control-success,
&.form-control-warning, &.form-control-warning,
&.form-control-danger { &.form-control-danger {

2088
yarn.lock
View File

File diff suppressed because it is too large Load Diff