mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-01 00:17:57 +03:00
work in progress - extensions
This commit is contained in:
Kevin Ross
parent
46aaa6d761
commit
2d77030de3
|
|
@ -20,6 +20,7 @@
|
|||
- title: Selections
|
||||
- title: Collapse inline
|
||||
- title: Drawers
|
||||
- title: Extensions
|
||||
|
||||
- title: About
|
||||
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 "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
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.form-control {
|
||||
background-repeat: $bmd-form-control-bg-repeat-y;
|
||||
background-position: $bmd-form-control-bg-position;
|
||||
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
|
||||
background-size: $bmd-form-control-bg-size;
|
||||
border: 0;
|
||||
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