mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
Added support for noUiSlider plugin.
This commit is contained in:
Federico Zivolo
parent
20fb271315
commit
64b8be362b
|
|
@ -1687,3 +1687,304 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.snackbar.toast {
|
||||
border-radius: 200px;
|
||||
}
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.noUi-stacking .noUi-handle {
|
||||
z-index: 10;
|
||||
}
|
||||
.noUi-stacking + .noUi-origin {
|
||||
*z-index: -1;
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left 0.3s, top 0.3s;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended .noUi-origin {
|
||||
right: -15px;
|
||||
}
|
||||
.noUi-background {
|
||||
height: 2px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.noUi-origin {
|
||||
border-radius: 0;
|
||||
height: 2px;
|
||||
background: #c8c8c8;
|
||||
}
|
||||
.noUi-origin[style^="left: 0"] .noUi-handle {
|
||||
background-color: #fff;
|
||||
border: 2px solid #c8c8c8;
|
||||
}
|
||||
.noUi-origin[style^="left: 0"] .noUi-handle:active {
|
||||
border-width: 1px;
|
||||
}
|
||||
.noUi-target {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.noUi-handle {
|
||||
border-radius: 100%;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle:active {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
[disabled].noUi-slider {
|
||||
opacity: 0.5;
|
||||
}
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.slider .noUi-handle,
|
||||
.slider-default .noUi-handle {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.slider-primary .noUi-handle {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.slider-success .noUi-handle {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.slider-info .noUi-handle {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.slider-warning .noUi-handle {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.slider-danger .noUi-handle {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.slider-material-red .noUi-handle {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.slider-material-pink .noUi-handle {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.slider-material-purple .noUi-handle {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.slider-material-deeppurple .noUi-handle {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.slider-material-indigo .noUi-handle {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.slider-material-lightblue .noUi-handle {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.slider-material-cyan .noUi-handle {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.slider-material-teal .noUi-handle {
|
||||
background-color: #009688;
|
||||
}
|
||||
.slider-material-lightgreen .noUi-handle {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.slider-material-lime .noUi-handle {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.slider-material-lightyellow .noUi-handle {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.slider-material-orange .noUi-handle {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.slider-material-deeporange .noUi-handle {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.slider-material-grey .noUi-handle {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.slider-material-bluegrey .noUi-handle {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.slider-material-brown .noUi-handle {
|
||||
background-color: #795548;
|
||||
}
|
||||
.slider-material-lightgrey .noUi-handle {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.slider .noUi-handle,
|
||||
.slider-default .noUi-handle {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
.slider-primary .noUi-handle {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
.slider-success .noUi-handle {
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
.slider-info .noUi-handle {
|
||||
border-color: #03a9f4;
|
||||
}
|
||||
.slider-warning .noUi-handle {
|
||||
border-color: #ff5722;
|
||||
}
|
||||
.slider-danger .noUi-handle {
|
||||
border-color: #f44336;
|
||||
}
|
||||
.slider-material-red .noUi-handle {
|
||||
border-color: #f44336;
|
||||
}
|
||||
.slider-material-pink .noUi-handle {
|
||||
border-color: #e91e63;
|
||||
}
|
||||
.slider-material-purple .noUi-handle {
|
||||
border-color: #9c27b0;
|
||||
}
|
||||
.slider-material-deeppurple .noUi-handle {
|
||||
border-color: #673ab7;
|
||||
}
|
||||
.slider-material-indigo .noUi-handle {
|
||||
border-color: #3f51b5;
|
||||
}
|
||||
.slider-material-lightblue .noUi-handle {
|
||||
border-color: #03a9f4;
|
||||
}
|
||||
.slider-material-cyan .noUi-handle {
|
||||
border-color: #00bcd4;
|
||||
}
|
||||
.slider-material-teal .noUi-handle {
|
||||
border-color: #009688;
|
||||
}
|
||||
.slider-material-lightgreen .noUi-handle {
|
||||
border-color: #8bc34a;
|
||||
}
|
||||
.slider-material-lime .noUi-handle {
|
||||
border-color: #cddc39;
|
||||
}
|
||||
.slider-material-lightyellow .noUi-handle {
|
||||
border-color: #ffeb3b;
|
||||
}
|
||||
.slider-material-orange .noUi-handle {
|
||||
border-color: #ff9800;
|
||||
}
|
||||
.slider-material-deeporange .noUi-handle {
|
||||
border-color: #ff5722;
|
||||
}
|
||||
.slider-material-grey .noUi-handle {
|
||||
border-color: #9e9e9e;
|
||||
}
|
||||
.slider-material-bluegrey .noUi-handle {
|
||||
border-color: #607d8b;
|
||||
}
|
||||
.slider-material-brown .noUi-handle {
|
||||
border-color: #795548;
|
||||
}
|
||||
.slider-material-lightgrey .noUi-handle {
|
||||
border-color: #ececec;
|
||||
}
|
||||
.slider,
|
||||
.slider-default {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.slider-primary {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.slider-success {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.slider-info {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.slider-warning {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.slider-danger {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.slider-material-red {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.slider-material-pink {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.slider-material-purple {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.slider-material-deeppurple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.slider-material-indigo {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.slider-material-lightblue {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.slider-material-cyan {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.slider-material-teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
.slider-material-lightgreen {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.slider-material-lime {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.slider-material-lightyellow {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.slider-material-orange {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.slider-material-deeporange {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.slider-material-grey {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.slider-material-bluegrey {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.slider-material-brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
.slider-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1001,6 +1001,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sliders (noUiSlider)
|
||||
================================================== -->
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="page-header">
|
||||
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
|
||||
</div>
|
||||
<div class="bs-component">
|
||||
<div class="slider"></div>
|
||||
<div class="slider slider-success"></div>
|
||||
<div class="slider slider-material-pink"></div>
|
||||
</div>
|
||||
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Containers
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
|
|
@ -1324,5 +1343,19 @@
|
|||
<script src="../scripts/ripples.js"></script>
|
||||
<script src="../scripts/material.js"></script>
|
||||
<script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script>
|
||||
|
||||
|
||||
<script src="http://refreshless.com/nouislider/source/jquery.nouislider.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$(".slider").noUiSlider({
|
||||
start: 40,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
1728
less/material.css
1728
less/material.css
File diff suppressed because it is too large
Load Diff
|
|
@ -122,3 +122,8 @@ legend {
|
|||
@import "tabs.less";
|
||||
|
||||
@import "popups.less";
|
||||
|
||||
|
||||
// External plugins
|
||||
@import "plugin-snackbarjs.less";
|
||||
@import "plugin-nouislider.less";
|
||||
|
|
|
|||
98
less/plugin-nouislider.less
Normal file
98
less/plugin-nouislider.less
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// main: material.less
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
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;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.noUi-stacking .noUi-handle {
|
||||
z-index: 10;
|
||||
}
|
||||
.noUi-stacking + .noUi-origin {
|
||||
*z-index: -1;
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left 0.3s, top 0.3s;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended .noUi-origin {
|
||||
right: -15px;
|
||||
}
|
||||
.noUi-background {
|
||||
height: 2px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.noUi-origin {
|
||||
border-radius: 0;
|
||||
height: 2px;
|
||||
background: #c8c8c8;
|
||||
&[style^="left: 0"] .noUi-handle {
|
||||
background-color: #fff;
|
||||
border: 2px solid #c8c8c8;
|
||||
&:active {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-target {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.noUi-handle {
|
||||
border-radius: 100%;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle:active {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
[disabled].noUi-slider{
|
||||
opacity: 0.5;
|
||||
}
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slider {
|
||||
.variations(~" .noUi-handle", background-color, @primary);
|
||||
.variations(~" .noUi-handle", border-color, @primary);
|
||||
.variations(~"", background-color, @primary);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user