mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-03-11 15:25:46 +03:00
work in progress - extensions
This commit is contained in:
Kevin Ross
parent
46aaa6d761
commit
2d77030de3
|
|
@ -20,6 +20,7 @@
|
||||||
- title: Selections
|
- title: Selections
|
||||||
- title: Collapse inline
|
- title: Collapse inline
|
||||||
- title: Drawers
|
- title: Drawers
|
||||||
|
- title: Extensions
|
||||||
|
|
||||||
- title: About
|
- title: About
|
||||||
pages:
|
pages:
|
||||||
|
|
|
||||||
77
docs/material-design/extensions.md
Normal file
77
docs/material-design/extensions.md
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
---
|
||||||
|
layout: docs
|
||||||
|
title: Extensions
|
||||||
|
group: material-design
|
||||||
|
---
|
||||||
|
|
||||||
|
{% callout warning %}
|
||||||
|
## **Heads up! DON'T even think about using this!**
|
||||||
|
|
||||||
|
Development in progress, no promises this will work...ever...it may even simply be removed.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
|
|
||||||
|
## Select2
|
||||||
|
|
||||||
|
To use Select2, you must first include the appropriate `select2.js`. See the [select2](https://github.com/select2/select2) project for more information
|
||||||
|
|
||||||
|
<!-- include master here for our samples -->
|
||||||
|
<script src="https://cdn.rawgit.com/select2/select2/master/dist/js/select2.full.js"> </script>
|
||||||
|
|
||||||
|
### Single select
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="select-bmd" class="bmd-label-floating">Example BMD select</label>
|
||||||
|
<select class="form-control" id="select-bmd">
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="single-select2" class="bmd-label-floating">Example select2</label>
|
||||||
|
<select class="form-control" id="single-select2">
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
var $eventSelect = $('#single-select2')
|
||||||
|
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
|
||||||
|
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
|
||||||
|
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
|
||||||
|
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
|
||||||
|
|
||||||
|
$eventSelect.on("change", function (e) { log("change"); });
|
||||||
|
|
||||||
|
function log (name, evt) {
|
||||||
|
if (!evt) {
|
||||||
|
var args = "{}";
|
||||||
|
} else {
|
||||||
|
var args = JSON.stringify(evt.params, function (key, value) {
|
||||||
|
if (value && value.nodeName) return "[DOM node]";
|
||||||
|
if (value instanceof $.Event) return "[$.Event]";
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.debug(name + " -> ", args)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$('#single-select2').select2()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
{% endexample %}
|
||||||
|
|
@ -28,4 +28,4 @@
|
||||||
|
|
||||||
@import "ripples";
|
@import "ripples";
|
||||||
|
|
||||||
@import "plugins";
|
@import "extensions";
|
||||||
|
|
|
||||||
3
scss/_extensions.scss
Normal file
3
scss/_extensions.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
// External plugins
|
||||||
|
@import "extensions/snackbarjs";
|
||||||
|
@import "extensions/select2";
|
||||||
|
|
@ -23,8 +23,7 @@ form {
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||||
.form-control {
|
.form-control {
|
||||||
background-repeat: $bmd-form-control-bg-repeat-y;
|
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
|
||||||
background-position: $bmd-form-control-bg-position;
|
|
||||||
background-size: $bmd-form-control-bg-size;
|
background-size: $bmd-form-control-bg-size;
|
||||||
border: 0;
|
border: 0;
|
||||||
transition: background 0s ease-out;
|
transition: background 0s ease-out;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
// External plugins
|
|
||||||
@import "plugins/plugin-snackbarjs";
|
|
||||||
@import "plugins/plugin-nouislider";
|
|
||||||
@import "plugins/plugin-selectize";
|
|
||||||
1
scss/extensions/_select2.scss
Normal file
1
scss/extensions/_select2.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@import "select2/src/scss/core";
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
//
|
|
||||||
//.noUi-target,
|
|
||||||
//.noUi-target * {
|
|
||||||
// -webkit-touch-callout: none;
|
|
||||||
// -ms-touch-action: none;
|
|
||||||
// user-select: none;
|
|
||||||
// box-sizing: border-box;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-base {
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
// position: relative;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-origin {
|
|
||||||
// position: absolute;
|
|
||||||
// right: 0;
|
|
||||||
// top: 0;
|
|
||||||
// left: 0;
|
|
||||||
// bottom: 0;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-handle {
|
|
||||||
// position: relative;
|
|
||||||
// z-index: 1;
|
|
||||||
// box-sizing: border-box;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-stacking .noUi-handle {
|
|
||||||
// z-index: 10;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
////.noUi-stacking + .noUi-origin {
|
|
||||||
//// *z-index: -1;
|
|
||||||
////} WARNING: Property with star prefix found. Checks for the star property hack (targets IE6/7) (star-property-hack) Browsers: All
|
|
||||||
//.noUi-state-tap .noUi-origin {
|
|
||||||
// transition: left 0.3s, top 0.3s;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-state-drag * {
|
|
||||||
// cursor: inherit !important;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-horizontal {
|
|
||||||
// height: 10px;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-handle {
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// width: 12px;
|
|
||||||
// height: 12px;
|
|
||||||
// left: -10px;
|
|
||||||
// top: -5px;
|
|
||||||
// cursor: ew-resize;
|
|
||||||
// border-radius: 100%;
|
|
||||||
// transition: all 0.2s ease-out;
|
|
||||||
// border: 1px solid;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-vertical .noUi-handle {
|
|
||||||
// margin-left: 5px;
|
|
||||||
// cursor: ns-resize;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-horizontal.noUi-extended {
|
|
||||||
// padding: 0 15px;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-horizontal.noUi-extended .noUi-origin {
|
|
||||||
// right: -15px;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-background {
|
|
||||||
// height: 2px;
|
|
||||||
// margin: 20px 0;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-origin {
|
|
||||||
// margin: 0;
|
|
||||||
// border-radius: 0;
|
|
||||||
// height: 2px;
|
|
||||||
// background: #c8c8c8;
|
|
||||||
// &[style^="left: 0"] .noUi-handle {
|
|
||||||
// background-color: #fff;
|
|
||||||
// border: 2px solid #c8c8c8;
|
|
||||||
// &.noUi-active {
|
|
||||||
// border-width: 1px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-target {
|
|
||||||
// border-radius: $border-radius;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-horizontal {
|
|
||||||
// height: 2px;
|
|
||||||
// margin: 15px 0;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-vertical {
|
|
||||||
// height: 100%;
|
|
||||||
// width: 2px;
|
|
||||||
// margin: 0 15px;
|
|
||||||
// display: inline-block;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.noUi-handle.noUi-active {
|
|
||||||
// transform: scale3d(2.5, 2.5, 1);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//[disabled].noUi-slider {
|
|
||||||
// opacity: 0.5;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//[disabled] .noUi-handle {
|
|
||||||
// cursor: not-allowed;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.slider {
|
|
||||||
// background: #c8c8c8;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.slider {
|
|
||||||
// @include variations(unquote(".slider"), unquote(".noUi-connect"), background-color, $brand-primary);
|
|
||||||
// @include variations(unquote(".slider"), unquote(" .noUi-connect"), background-color, $brand-primary);
|
|
||||||
// @include variations(unquote(".slider"), unquote(" .noUi-handle"), background-color, $brand-primary);
|
|
||||||
// @include variations(unquote(".slider"), unquote(" .noUi-handle"), border-color, $brand-primary);
|
|
||||||
//}
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
//// Support for Selectize plugin
|
|
||||||
//// http://brianreavis.github.io/selectize.js/
|
|
||||||
//
|
|
||||||
//.selectize-control.single, .selectize-control.multi {
|
|
||||||
// padding: 0;
|
|
||||||
// .selectize-input, .selectize-input.input-active {
|
|
||||||
//
|
|
||||||
// cursor: text;
|
|
||||||
// background: transparent;
|
|
||||||
// box-shadow: none;
|
|
||||||
// border: 0;
|
|
||||||
// padding: 0;
|
|
||||||
// height: 100%;
|
|
||||||
// font-size: 14px;
|
|
||||||
// line-height: 30px;
|
|
||||||
// .has-items {
|
|
||||||
// padding: 0;
|
|
||||||
// }
|
|
||||||
// &:after {
|
|
||||||
// right: 5px;
|
|
||||||
// position: absolute;
|
|
||||||
// font-size: 7px;
|
|
||||||
// content: "\e894";
|
|
||||||
// font-family: "Material-Design-Icons";
|
|
||||||
// speak: none;
|
|
||||||
// font-style: normal;
|
|
||||||
// font-weight: normal;
|
|
||||||
// font-variant: normal;
|
|
||||||
// text-transform: none;
|
|
||||||
// line-height: 4;
|
|
||||||
// -webkit-font-smoothing: antialiased;
|
|
||||||
// -moz-osx-font-smoothing: grayscale;
|
|
||||||
// }
|
|
||||||
// input {
|
|
||||||
// font-size: 14px;
|
|
||||||
// outline: 0;
|
|
||||||
// border: 0;
|
|
||||||
// background: transparent;
|
|
||||||
// }
|
|
||||||
// &.bmd-label-floating-fix input {
|
|
||||||
// opacity: 0;
|
|
||||||
// }
|
|
||||||
// > div, > .item {
|
|
||||||
// display: inline-block;
|
|
||||||
// margin: 0 8px 3px 0;
|
|
||||||
// padding: 0;
|
|
||||||
// background: transparent;
|
|
||||||
// border: 0;
|
|
||||||
// &:after {
|
|
||||||
// content: ",";
|
|
||||||
// }
|
|
||||||
// &:last-of-type:after {
|
|
||||||
// content: "";
|
|
||||||
// }
|
|
||||||
// &.active {
|
|
||||||
// font-weight: bold;
|
|
||||||
// background: transparent;
|
|
||||||
// border: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .selectize-dropdown {
|
|
||||||
// position: absolute;
|
|
||||||
// z-index: 1000;
|
|
||||||
// border: 0;
|
|
||||||
// width: 100% !important;
|
|
||||||
// left: 0 !important;
|
|
||||||
// height: auto;
|
|
||||||
// background-color: #FFF;
|
|
||||||
// box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
|
|
||||||
// border-radius: $border-radius;
|
|
||||||
// padding: 0;
|
|
||||||
// margin-top: 3px;
|
|
||||||
// .active {
|
|
||||||
// background-color: inherit;
|
|
||||||
// }
|
|
||||||
// .highlight {
|
|
||||||
// background-color: #d5d8ff;
|
|
||||||
// }
|
|
||||||
// .selected, .selected.active {
|
|
||||||
// background-color: #EEEEEE;
|
|
||||||
// }
|
|
||||||
// [data-selectable], .optgroup-header {
|
|
||||||
// padding: 10px 20px;
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .dropdown-active ~ .selectize-dropdown {
|
|
||||||
// display: block;
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
Loading…
Reference in New Issue
Block a user