Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
01b333d3 by bootflat
Options

update version 2.0.2 

add wigets: Toggle, Selecter, Stepper
1 parent 94abd48e
Expand all
Inline Side-by-side
Showing 13 changed files with 946 additions and 1 deletions
......@@ -44,6 +44,8 @@ module.exports = function(grunt) {
'js/jquery-1.10.1.min.js',
'js/bootstrap.min.js',
'<%= meta.defaultPath %>/js/icheck.min.js',
'<%= meta.defaultPath %>/js/jquery.fs.stepper.min.js',
'<%= meta.defaultPath %>/js/jquery.fs.selecter.min.js',
'js/application.js'
]
}
......
......@@ -79,6 +79,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
## Changelog:
2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
2014/4/3 version 2.0.1 `support bootstrap 3.1.1`
2014/3/6 version 2.0.0 `support bootstrap 3.0.1`
......
......@@ -7,7 +7,7 @@
*
* By @Flathemes <info@flathemes.com>
*
* Last modify time: 2014-04-05
* Last modify time: 2014-06-05
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
......@@ -751,6 +751,309 @@ blockquote {
}
/**
* stepper
* --------------------------------------------------
*/
.stepper .stepper-input {
overflow: hidden;
-moz-appearance: textfield;
}
.stepper .stepper-input::-webkit-inner-spin-button, .stepper .stepper-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stepper .stepper-arrow {
position: absolute;
right: 15px;
display: block;
width: 20px;
height: 50%;
text-indent: -99999px;
cursor: pointer;
background-color: #3bafda;
}
.stepper .stepper-arrow:hover, .stepper .stepper-arrow:active {
background-color: #4fc1e9;
}
.stepper .up {
top: 0;
border: 1px solid #269ecb;
border-top-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
}
.stepper .down {
bottom: 0;
border-bottom-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
.stepper .up::before, .stepper .down::before {
position: absolute;
width: 0;
height: 0;
content: "";
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.stepper .up::before {
top: 5px;
left: 5px;
border-bottom: 4px solid white;
}
.stepper .down:before {
bottom: 5px;
left: 6px;
border-top: 4px solid white;
}
.stepper.disabled .stepper-arrow {
background-color: #3bafda;
filter: alpha(opacity=45);
opacity: .45;
}
.selecter {
position: relative;
z-index: 1;
display: block;
max-width: 100%;
outline: none;
/* Open */
/* 'Cover' Positioning */
/* 'Bottom' Positioning */
/* 'Bottom' + 'Cover' Positioning */
/* Multiple Select */
/* 'Disabled' State */
/* Scroller Support */
}
.selecter .selecter-element {
position: absolute;
left: 0;
z-index: 0;
display: none;
width: 100%;
height: 100%;
filter: alpha(opacity=0);
opacity: 0;
*left: -999999px;
}
.selecter .selecter-element, .selecter .selecter-element:focus {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
.selecter .selecter-selected {
position: relative;
z-index: 2;
display: block;
padding: 6px 10px;
overflow: hidden;
text-overflow: clip;
cursor: pointer;
background-color: white;
border: 1px solid #aab2bd;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.selecter .selecter-selected:after {
position: absolute;
top: 14px;
right: 10px;
width: 0;
height: 0;
content: "";
border-top: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.selecter .selecter-options {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
display: none;
width: 100%;
max-height: 260px;
overflow: auto;
overflow-x: hidden;
background-color: white;
border: 1px solid #aab2bd;
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
*width: auto;
}
.selecter .selecter-group {
display: block;
padding: 5px 10px 4px;
font-size: 11px;
color: #aab2bd;
text-transform: uppercase;
background-color: #f5f7fa;
border-bottom: 1px solid #e6e9ed;
}
.selecter .selecter-item {
display: block;
width: 100%;
padding: 6px 10px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
background-color: white;
border-bottom: 1px solid #e6e9ed;
}
.selecter .selecter-item.selected {
color: white;
background-color: #3bafda;
border-bottom-color: #4fc1e9;
}
.selecter .selecter-item.disabled {
color: #aab2bd;
cursor: default;
}
.selecter .selecter-item:first-child {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.selecter .selecter-item:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
.selecter .selecter-item:hover {
background-color: #e6e9ed;
}
.selecter .selecter-item.selected:hover {
background-color: #3bafda;
}
.selecter .selecter-item.disabled:hover, .selecter:hover .selecter-selected, .selecter.disabled .selecter-item:hover {
background-color: white;
}
.selecter.open {
z-index: 3;
outline: 0;
}
.selecter.open .selecter-selected {
z-index: 51;
border: 1px solid #3bafda;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.selecter.open .selecter-selected, .selecter.focus .selecter-selected {
background-color: white;
}
.selecter.cover .selecter-options {
top: 0;
border-width: 1px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.selecter.cover .selecter-options .selecter-item.first {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.selecter.cover.open .selecter-selected {
z-index: 49;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.selecter.bottom .selecter-options {
top: auto;
bottom: 100%;
border-width: 1px 1px 0;
}
.selecter.bottom .selecter-item:last-child {
border: none;
}
.selecter.bottom.open .selecter-selected {
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
.selecter.bottom.open .selecter-options {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.selecter.bottom.cover .selecter-options {
top: auto;
bottom: 0;
}
.selecter.bottom.cover.open .selecter-selected, .selecter.bottom.cover.open .selecter-options {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.selecter.multiple .selecter-options {
position: static;
display: block;
width: 100%;
border-width: 1px;
border-radius: 4px;
box-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.selecter.disabled .selecter-selected {
color: #aab2bd;
cursor: default;
background-color: #e6e9ed;
border-color: #e6e9ed;
}
.selecter.disabled .selecter-options {
background-color: #e6e9ed;
border-color: #e6e9ed;
}
.selecter.disabled .selecter-group, .selecter.disabled .selecter-item {
color: #aab2bd;
cursor: default;
background-color: #e6e9ed;
border-color: #e6e9ed;
}
.selecter.disabled .selecter-item.selected {
color: white;
background-color: #3bafda;
filter: alpha(opacity=45);
opacity: .45;
}
.selecter .selecter-options.scroller {
overflow: hidden;
}
.selecter .selecter-options.scroller .scroller-content {
max-height: 260px;
padding: 0;
}
/**
* checkbox and radio
* --------------------------------------------------
*/
......@@ -808,6 +1111,74 @@ blockquote {
}
/**
* toggle
* --------------------------------------------------
*/
.toggle {
height: 32px;
}
.toggle input[type="checkbox"], .toggle input[type="radio"] {
width: 0;
height: 0;
padding: 0;
margin: 0;
text-indent: -100000px;
filter: alpha(opacity=0);
opacity: 0;
}
.toggle .handle {
position: relative;
top: -20px;
left: 0;
display: block;
width: 50px;
height: 32px;
background-color: white;
border-radius: 19px;
-webkit-box-shadow: inset 0 0 0 1px #b8bfc8;
-moz-box-shadow: inset 0 0 0 1px #b8bfc8;
box-shadow: inset 0 0 0 1px #b8bfc8;
-webkit-border-radius: 19px;
-moz-border-radius: 19px;
}
.toggle .handle:before, .toggle .handle:after {
position: absolute;
top: 1px;
left: 1px;
display: block;
width: 30px;
height: 30px;
content: "";
background-color: white;
border-radius: 30px;
-webkit-box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
-moz-box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
box-shadow: inset 0 0 0 1px #b8bfc8, 1px 1px 1px #c7ccd3;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.toggle input[type="checkbox"]:disabled + .handle, .toggle input[type="radio"]:disabled + .handle, .toggle input[type="checkbox"]:disabled + .handle:before, .toggle input[type="radio"]:disabled + .handle:before, .toggle input[type="checkbox"]:disabled + .handle:after, .toggle input[type="radio"]:disabled + .handle:after {
background-color: #e6e9ed;
filter: alpha(opacity=60);
opacity: .6;
}
.toggle input[type="checkbox"]:checked + .handle:before, .toggle input[type="radio"]:checked + .handle:before {
width: 50px;
background-color: #a0d468;
}
.toggle input[type="checkbox"]:checked + .handle:after, .toggle input[type="radio"]:checked + .handle:after {
left: 20px;
-webkit-box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
-moz-box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
box-shadow: inset 0 0 0 1px #f5f7fa, 1px 1px 1px #c7ccd3;
}
/**
* alert
* --------------------------------------------------
*/
......
/*
* Selecter v3.1.2 - 2014-05-30
* A jQuery plugin for replacing default select elements. Part of the Formstone Library.
* http://formstone.it/selecter/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
!function(a,b){"use strict";function c(b){b=a.extend({},F,b||{}),null===E&&(E=a("body"));for(var c=a(this),e=0,f=c.length;f>e;e++)d(c.eq(e),b);return c}function d(b,c){if(!b.hasClass("selecter-element")){c=a.extend({},c,b.data("selecter-options")),c.external&&(c.links=!0);var d=b.find("option, optgroup"),g=d.filter("option"),h=g.filter(":selected"),j=h.length>0?g.index(h):1,k="div";c.tabIndex=b[0].tabIndex,b[0].tabIndex=-1,c.multiple=b.prop("multiple"),c.disabled=b.is(":disabled");var q="",s="";s+="<"+k+' class="selecter '+c.customClass,C?s+=" mobile":c.cover&&(s+=" cover"),s+=c.multiple?" multiple":" closed",c.disabled&&(s+=" disabled"),s+='" tabindex="'+c.tabIndex+'">',s+="</"+k+">",c.multiple||(q+='<span class="selecter-selected'+(""!==c.label?" placeholder":"")+'">',q+=a("<span></span>").text(v(""!==h.text()?h.text():c.label,c.trim)).html(),q+="</span>"),q+='<div class="selecter-options">',q+="</div>",b.addClass("selecter-element").wrap(s).after(q);var t=b.parent(".selecter"),u=a.extend({$select:b,$allOptions:d,$options:g,$selecter:t,$selected:t.find(".selecter-selected"),$itemsWrapper:t.find(".selecter-options"),index:-1,guid:z++},c);e(u),u.multiple||r(j,u),void 0!==a.fn.scroller&&u.$itemsWrapper.scroller(),u.$selecter.on("touchstart.selecter",".selecter-selected",u,f).on("click.selecter",".selecter-selected",u,i).on("click.selecter",".selecter-item",u,m).on("close.selecter",u,l).data("selecter",u),u.$select.on("change.selecter",u,n),C||(u.$selecter.on("focus.selecter",u,o).on("blur.selecter",u,p),u.$select.on("focus.selecter",u,function(a){a.data.$selecter.trigger("focus")}))}}function e(b){for(var c="",d=b.links?"a":"span",e=0,f=0,g=b.$allOptions.length;g>f;f++){var h=b.$allOptions.eq(f);if("OPTGROUP"===h[0].tagName)c+='<span class="selecter-group',h.is(":disabled")&&(c+=" disabled"),c+='">'+h.attr("label")+"</span>";else{var i=h.val();h.attr("value")||h.attr("value",i),c+="<"+d+' class="selecter-item',h.is(":selected")&&(c+=" selected"),h.is(":disabled")&&(c+=" disabled"),c+='" ',c+=b.links?'href="'+i+'"':'data-value="'+i+'"',c+=">"+a("<span></span>").text(v(h.text(),b.trim)).html()+"</"+d+">",e++}}b.$itemsWrapper.html(c),b.$items=b.$selecter.find(".selecter-item")}function f(a){a.stopPropagation();var b=a.data,c=a.originalEvent;y(b.timer),b.touchStartX=c.touches[0].clientX,b.touchStartY=c.touches[0].clientY,b.$selecter.on("touchmove.selecter",".selecter-selected",b,g).on("touchend.selecter",".selecter-selected",b,h)}function g(a){var b=a.data,c=a.originalEvent;(Math.abs(c.touches[0].clientX-b.touchStartX)>10||Math.abs(c.touches[0].clientY-b.touchStartY)>10)&&b.$selecter.off("touchmove.selecter touchend.selecter")}function h(a){var b=a.data;b.$selecter.off("touchmove.selecter touchend.selecter click.selecter"),b.timer=x(b.timer,1e3,function(){b.$selecter.on("click.selecter",".selecter-selected",b,i)}),i(a)}function i(c){c.preventDefault(),c.stopPropagation();var d=c.data;if(!d.$select.is(":disabled"))if(a(".selecter").not(d.$selecter).trigger("close.selecter",[d]),C&&!D){var e=d.$select[0];if(b.document.createEvent){var f=b.document.createEvent("MouseEvents");f.initMouseEvent("mousedown",!1,!0,b,0,0,0,0,0,!1,!1,!1,!1,0,null),e.dispatchEvent(f)}else e.fireEvent&&e.fireEvent("onmousedown")}else d.$selecter.hasClass("closed")?j(c):d.$selecter.hasClass("open")&&l(c)}function j(a){a.preventDefault(),a.stopPropagation();var b=a.data;if(!b.$selecter.hasClass("open")){{var c=b.$selecter.offset(),d=E.outerHeight(),e=b.$itemsWrapper.outerHeight(!0);b.index>=0?b.$items.eq(b.index).position():{left:0,top:0}}c.top+e>d&&b.$selecter.addClass("bottom"),b.$itemsWrapper.show(),b.$selecter.removeClass("closed").addClass("open"),E.on("click.selecter-"+b.guid,":not(.selecter-options)",b,k),s(b)}}function k(b){b.preventDefault(),b.stopPropagation(),0===a(b.currentTarget).parents(".selecter").length&&l(b)}function l(a){a.preventDefault(),a.stopPropagation();var b=a.data;b.$selecter.hasClass("open")&&(b.$itemsWrapper.hide(),b.$selecter.removeClass("open bottom").addClass("closed"),E.off(".selecter-"+b.guid))}function m(b){b.preventDefault(),b.stopPropagation();var c=a(this),d=b.data;if(!d.$select.is(":disabled")){if(d.$itemsWrapper.is(":visible")){var e=d.$items.index(c);e!==d.index&&(r(e,d),t(d))}d.multiple||l(b)}}function n(b,c){var d=a(this),e=b.data;if(!c&&!e.multiple){var f=e.$options.index(e.$options.filter("[value='"+w(d.val())+"']"));r(f,e),t(e)}}function o(b){b.preventDefault(),b.stopPropagation();var c=b.data;c.$select.is(":disabled")||c.multiple||(c.$selecter.addClass("focus").on("keydown.selecter-"+c.guid,c,q),a(".selecter").not(c.$selecter).trigger("close.selecter",[c]))}function p(b){b.preventDefault(),b.stopPropagation();var c=b.data;c.$selecter.removeClass("focus").off("keydown.selecter-"+c.guid),a(".selecter").not(c.$selecter).trigger("close.selecter",[c])}function q(b){var c=b.data;if(13===b.keyCode)c.$selecter.hasClass("open")&&(l(b),r(c.index,c)),t(c);else if(!(9===b.keyCode||b.metaKey||b.altKey||b.ctrlKey||b.shiftKey)){b.preventDefault(),b.stopPropagation();var d=c.$items.length-1,e=c.index<0?0:c.index;if(a.inArray(b.keyCode,B?[38,40,37,39]:[38,40])>-1)e+=38===b.keyCode||B&&37===b.keyCode?-1:1,0>e&&(e=0),e>d&&(e=d);else{var f,g,h=String.fromCharCode(b.keyCode).toUpperCase();for(g=c.index+1;d>=g;g++)if(f=c.$options.eq(g).text().charAt(0).toUpperCase(),f===h){e=g;break}if(0>e||e===c.index)for(g=0;d>=g;g++)if(f=c.$options.eq(g).text().charAt(0).toUpperCase(),f===h){e=g;break}}e>=0&&(r(e,c),s(c))}}function r(a,b){var c=b.$items.eq(a),d=c.hasClass("selected"),e=c.hasClass("disabled");if(!e){if(-1===a&&""!==b.label)b.$selected.html(b.label);else if(d)b.multiple&&(b.$options.eq(a).prop("selected",null),c.removeClass("selected"));else{{var f=c.html();c.data("value")}b.multiple?b.$options.eq(a).prop("selected",!0):(b.$selected.html(f).removeClass("placeholder"),b.$items.filter(".selected").removeClass("selected"),b.$select[0].selectedIndex=a),c.addClass("selected")}b.multiple||(b.index=a)}}function s(b){var c=b.index>=0?b.$items.eq(b.index).position():{left:0,top:0};void 0!==a.fn.scroller?b.$itemsWrapper.scroller("scroll",b.$itemsWrapper.find(".scroller-content").scrollTop()+c.top,0).scroller("reset"):b.$itemsWrapper.scrollTop(b.$itemsWrapper.scrollTop()+c.top)}function t(a){a.links?u(a):(a.callback.call(a.$selecter,a.$select.val(),a.index),a.$select.trigger("change",[!0]))}function u(a){var c=a.$select.val();a.external?b.open(c):b.location.href=c}function v(a,b){return 0===b?a:a.length>b?a.substring(0,b)+"...":a}function w(a){return"string"==typeof a?a.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g,"\\$1"):a}function x(a,b,c,d){return y(a,d),d===!0?setInterval(c,b):setTimeout(c,b)}function y(a){null!==a&&(clearInterval(a),a=null)}var z=0,A=b.navigator.userAgent||b.navigator.vendor||b.opera,B=/Firefox/i.test(A),C=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(A),D=B&&C,E=null,F={callback:a.noop,cover:!1,customClass:"",label:"",external:!1,links:!1,trim:0},G={defaults:function(b){return F=a.extend(F,b||{}),a(this)},disable:function(b){return a(this).each(function(c,d){var e=a(d).parent(".selecter").data("selecter");if(e)if("undefined"!=typeof b){var f=e.$items.index(e.$items.filter("[data-value="+b+"]"));e.$items.eq(f).addClass("disabled"),e.$options.eq(f).prop("disabled",!0)}else e.$selecter.hasClass("open")&&e.$selecter.find(".selecter-selected").trigger("click.selecter"),e.$selecter.addClass("disabled"),e.$select.prop("disabled",!0)})},enable:function(b){return a(this).each(function(c,d){var e=a(d).parent(".selecter").data("selecter");if(e)if("undefined"!=typeof b){var f=e.$items.index(e.$items.filter("[data-value="+b+"]"));e.$items.eq(f).removeClass("disabled"),e.$options.eq(f).prop("disabled",!1)}else e.$selecter.removeClass("disabled"),e.$select.prop("disabled",!1)})},destroy:function(){return a(this).each(function(b,c){var d=a(c).parent(".selecter").data("selecter");d&&(d.$selecter.hasClass("open")&&d.$selecter.find(".selecter-selected").trigger("click.selecter"),void 0!==a.fn.scroller&&d.$selecter.find(".selecter-options").scroller("destroy"),d.$select[0].tabIndex=d.tabIndex,d.$selected.remove(),d.$itemsWrapper.remove(),d.$selecter.off(".selecter"),d.$select.off(".selecter").removeClass("selecter-element").show().unwrap())})},refresh:function(){return a(this).each(function(b,c){var d=a(c).parent(".selecter").data("selecter");if(d){var f=d.index;d.$allOptions=d.$select.find("option, optgroup"),d.$options=d.$allOptions.filter("option"),d.index=-1,f=d.$options.index(d.$options.filter(":selected")),e(d),d.multiple||r(f,d)}})}};a.fn.selecter=function(a){return G[a]?G[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?this:c.apply(this,arguments)},a.selecter=function(a){"defaults"===a&&G.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}(jQuery,window);
\ No newline at end of file
/*
* Stepper v3.0.7 - 2014-05-07
* A jQuery plugin for cross browser number inputs. Part of the Formstone Library.
* http://formstone.it/stepper/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
!function(a){"use strict";function b(b){b=a.extend({},l,b||{});for(var d=a(this),e=0,f=d.length;f>e;e++)c(d.eq(e),b);return d}function c(b,c){if(!b.hasClass("stepper-input")){c=a.extend({},c,b.data("stepper-options"));var f=parseFloat(b.attr("min")),g=parseFloat(b.attr("max")),h=parseFloat(b.attr("step"))||1;b.addClass("stepper-input").wrap('<div class="stepper '+c.customClass+'" />').after('<span class="stepper-arrow up">'+c.labels.up+'</span><span class="stepper-arrow down">'+c.labels.down+"</span>");var i=b.parent(".stepper"),k=a.extend({$stepper:i,$input:b,$arrow:i.find(".stepper-arrow"),min:void 0===typeof f||isNaN(f)?!1:f,max:void 0===typeof g||isNaN(g)?!1:g,step:void 0===typeof h||isNaN(h)?1:h,timer:null},c);k.digits=j(k.step),b.is(":disabled")&&i.addClass("disabled"),i.on("keypress",".stepper-input",k,d),i.on("touchstart.stepper mousedown.stepper",".stepper-arrow",k,e).data("stepper",k)}}function d(a){var b=a.data;(38===a.keyCode||40===a.keyCode)&&(a.preventDefault(),g(b,38===a.keyCode?b.step:-b.step))}function e(b){b.preventDefault(),b.stopPropagation(),f(b);var c=b.data;if(!c.$input.is(":disabled")&&!c.$stepper.hasClass("disabled")){var d=a(b.target).hasClass("up")?c.step:-c.step;c.timer=h(c.timer,125,function(){g(c,d,!1)}),g(c,d),a("body").on("touchend.stepper mouseup.stepper",c,f)}}function f(b){b.preventDefault(),b.stopPropagation();var c=b.data;i(c.timer),a("body").off(".stepper")}function g(a,b){var c=parseFloat(a.$input.val()),d=b;void 0===typeof c||isNaN(c)?d=a.min!==!1?a.min:0:a.min!==!1&&c<a.min?d=a.min:d+=c;var e=(d-a.min)%a.step;0!==e&&(d-=e),a.min!==!1&&d<a.min&&(d=a.min),a.max!==!1&&d>a.max&&(d-=a.step),d!==c&&(d=k(d,a.digits),a.$input.val(d).trigger("change"))}function h(a,b,c){return i(a),setInterval(c,b)}function i(a){a&&(clearInterval(a),a=null)}function j(a){var b=String(a);return b.indexOf(".")>-1?b.length-b.indexOf(".")-1:0}function k(a,b){var c=Math.pow(10,b);return Math.round(a*c)/c}var l={customClass:"",labels:{up:"Up",down:"Down"}},m={defaults:function(b){return l=a.extend(l,b||{}),a(this)},destroy:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$stepper.off(".stepper").find(".stepper-arrow").remove(),b.$input.unwrap().removeClass("stepper-input"))})},disable:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$input.attr("disabled","disabled"),b.$stepper.addClass("disabled"))})},enable:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$input.attr("disabled",null),b.$stepper.removeClass("disabled"))})}};a.fn.stepper=function(a){return m[a]?m[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?this:b.apply(this,arguments)},a.stepper=function(a){"defaults"===a&&m.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}(jQuery,this);
\ No newline at end of file
......@@ -17,7 +17,10 @@
"bootflat/pagination",
"bootflat/pager",
"bootflat/form",
"bootflat/stepper",
"bootflat/selecter",
"bootflat/checkbox_radio",
"bootflat/toggle",
"bootflat/alert",
"bootflat/tab",
"bootflat/pill",
......
// Variables
//------------------------------------------------------
$selecter-primary: $aqua-dark !default;
$selecter-border-color: $mediumgray-dark !default;
$selecter-background-color: $white !default;
$selecter-disabled-color: $mediumgray-dark !default;
$selecter-disabled-background-color: $lightgray-dark !default;
$selecter-radius-value: 4px !default;
$selecter-arrow-width: 20px !default;
$selecter-group-color: $mediumgray-dark !default;
$selecter-group-background-color: $lightgray-light !default;
$selecter-item-border-color: $lightgray-dark !default;
$selecter-item-hover: $lightgray-dark !default;
$selecter-item-selected: $aqua-dark !default;
$selecter-item-selected-border-color: $aqua-light !default;
// Exports
//------------------------------------------------------
@include exports("selecter") {
.selecter {
display: block;
position: relative;
max-width: 100%;
z-index: 1;
outline: none;
& .selecter-element {
display: none;
*left: -999999px;
height: 100%;
left: 0;
position: absolute;
@include opacity($opacity: 0, $filter: true);
width: 100%;
z-index: 0;
}
& .selecter-element,
& .selecter-element:focus {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
& .selecter-selected {
background-color: $selecter-background-color;
border: 1px solid $selecter-border-color;
@include radius($value: $selecter-radius-value);
cursor: pointer;
display: block;
overflow: hidden;
padding: 6px 10px;
position: relative;
text-overflow: clip;
z-index: 2;
&:after {
position: absolute;
top: 14px;
right: 10px;
content: "";
width: 0;
height: 0;
border-top: 4px solid $black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
}
& .selecter-options {
border: 1px solid $selecter-border-color;
border-width: 0 1px 1px;
@include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
@include box-shadow($value: 0 6px 12px rgba(0,0,0,.175));
background-color: $selecter-background-color;
display: none;
left: 0;
max-height: 260px;
overflow: auto;
overflow-x: hidden;
position: absolute;
top: 100%;
width: 100%;
*width: auto;
z-index: 50;
}
& .selecter-group {
border-bottom: 1px solid $selecter-item-border-color;
color: $selecter-group-color;
background-color: $selecter-group-background-color;
display: block;
font-size: 11px;
padding: 5px 10px 4px;
text-transform: uppercase;
}
& .selecter-item {
background-color: $selecter-background-color;
border-bottom: 1px solid $selecter-item-border-color;
cursor: pointer;
display: block;
margin: 0;
overflow: hidden;
padding: 6px 10px;
text-overflow: ellipsis;
width: 100%;
&.selected {
color: $white;
border-bottom-color: $selecter-item-selected-border-color;
background-color: $selecter-item-selected;
}
&.disabled {
color: $selecter-disabled-color;
cursor: default;
}
&:first-child {
@include radius($value: 0);
}
&:last-child {
@include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
border-bottom: 0;
}
}
& .selecter-item:hover {
background-color: $selecter-item-hover;
}
& .selecter-item.selected:hover {
background-color: $selecter-item-selected;
}
& .selecter-item.disabled:hover,
&:hover .selecter-selected,
&.disabled .selecter-item:hover {
background-color: $selecter-background-color;
}
/* Open */
&.open {
outline: 0;
z-index: 3;
& .selecter-selected {
border: 1px solid $selecter-primary;
@include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
z-index: 51;
}
}
&.open .selecter-selected,
&.focus .selecter-selected {
background-color: $selecter-background-color;
}
/* 'Cover' Positioning */
&.cover {
& .selecter-options {
@include radius($value: $selecter-radius-value);
border-width: 1px;
top: 0;
& .selecter-item.first {
@include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
}
}
&.open .selecter-selected {
@include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
z-index: 49;
}
}
/* 'Bottom' Positioning */
&.bottom {
& .selecter-options {
border-width: 1px 1px 0;
bottom: 100%;
top: auto;
}
& .selecter-item:last-child {
border: none;
}
&.open .selecter-selected {
@include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
}
&.open .selecter-options {
@include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
}
}
/* 'Bottom' + 'Cover' Positioning */
&.bottom.cover {
& .selecter-options {
bottom: 0;
top: auto;
}
&.open .selecter-selected,
&.open .selecter-options {
@include radius($value: $selecter-radius-value);
}
}
/* Multiple Select */
&.multiple .selecter-options {
@include radius($value: $selecter-radius-value);
border-width: 1px;
box-shadow: none;
display: block;
position: static;
width: 100%;
}
/* 'Disabled' State */
&.disabled {
& .selecter-selected {
background-color: $selecter-disabled-background-color;
border-color: $selecter-disabled-background-color;
color: $selecter-disabled-color;
cursor: default;
}
& .selecter-options {
background-color: $selecter-disabled-background-color;
border-color: $selecter-disabled-background-color;
}
& .selecter-group,
& .selecter-item {
background-color: $selecter-disabled-background-color;
border-color: $selecter-item-border-color;
color: $selecter-disabled-color;
cursor: default;
}
& .selecter-item.selected {
background-color: $selecter-primary;
@include opacity($opacity: 45, $filter: true);
color: $white;
}
}
/* Scroller Support */
& .selecter-options.scroller {
overflow: hidden;
& .scroller-content {
max-height: 260px;
padding: 0;
}
}
}
}
// Variables
//------------------------------------------------------
$stepper-primary: $aqua-dark !default;
$stepper-primary-hover: $aqua-light !default;
$stepper-arrow-width: 20px !default;
// Exports
//------------------------------------------------------
@include exports("stepper") {
/**
* stepper
* --------------------------------------------------
*/
.stepper {
& .stepper-input {
overflow: hidden;
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
& .stepper-arrow {
background-color: $stepper-primary;
cursor: pointer;
display: block;
height: 50%;
position: absolute;
right: 15px;
text-indent: -99999px;
width: $stepper-arrow-width;
&:hover,
&:active {
background-color: $stepper-primary-hover;
}
}
& .up {
@include prefixer($property: border-top-right-radius, $value: 3px, $prefixes: webkit moz spec);
border: 1px solid darken($stepper-primary, 7%);
top: 0;
}
& .down {
@include prefixer($property: border-bottom-right-radius, $value: 3px, $prefixes: webkit moz spec);
bottom: 0;
}
& .up::before,
& .down::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
& .up::before {
top: 5px;
left: 5px;
border-bottom: 4px solid $white;
}
& .down:before {
bottom: 5px;
left: 6px;
border-top: 4px solid $white;
}
&.disabled .stepper-arrow {
background-color: $stepper-primary;
@include opacity($opacity: 45, $filter: true);
}
}
}
// Variables
//------------------------------------------------------
$toggle-height: 32px !default;
$toggle-checkbox-opacity: 0 !default;
$toggle-transition-value: all .25s ease-in-out !default;
$toggle-default-background-color: $white !default;
$toggle-checked-background-color: $grass-light !default;
$toggle-disabled-background-color: $lightgray-dark !default;
$toggle-handle-width: 50px !default;
$toggle-handle-height: 32px !default;
$toggle-handle-radius: 19px !default;
$toggle-control-width: 30px !default;
$toggle-control-height: 30px !default;
$toggle-control-radius: 30px !default;
$toggle-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%) !default;
$toggle-control-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%), 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
$toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
// Exports
//------------------------------------------------------
@include exports("toggle") {
/**
* toggle
* --------------------------------------------------
*/
.toggle {
height: $toggle-height;
& input[type="checkbox"],
& input[type="radio"] {
width: 0;
height: 0;
margin: 0;
padding: 0;
text-indent: -100000px;
@include opacity($opacity: $toggle-checkbox-opacity, $filter: true);
}
& .handle {
display: block;
position: relative;
top: -20px;
left: 0;
width: $toggle-handle-width;
height: $toggle-handle-height;
background-color: $toggle-default-background-color;
@include radius($value: $toggle-handle-radius);
@include box-shadow($value:$toggle-shadow);
&:before,
&:after {
content: "";
position: absolute;
top: 1px;
left: 1px;
display: block;
width: $toggle-control-width;
height: $toggle-control-height;
@include radius($value: $toggle-control-radius);
@include transition($toggle-transition-value);
background-color: $toggle-default-background-color;
@include box-shadow($value:$toggle-control-shadow);
}
}
& input[type="checkbox"]:disabled + .handle,
& input[type="radio"]:disabled + .handle,
& input[type="checkbox"]:disabled + .handle:before,
& input[type="radio"]:disabled + .handle:before,
& input[type="checkbox"]:disabled + .handle:after,
& input[type="radio"]:disabled + .handle:after {
@include opacity($opacity: 60, $filter: true);
background-color: $toggle-disabled-background-color;
}
& input[type="checkbox"]:checked + .handle:before,
& input[type="radio"]:checked + .handle:before {
width: $toggle-handle-width;
background-color: $toggle-checked-background-color;
}
& input[type="checkbox"]:checked + .handle:after,
& input[type="radio"]:checked + .handle:after {
left: 20px;
@include box-shadow($value:$toggle-checked-shadow);
}
}
}
......@@ -807,6 +807,101 @@
</div>
</div>
</div>
<!-- Stepper
================================================== -->
<div class="example">
<h2 class="example-title">Stepper <span>(<b>How to use</b>: https://github.com/benplum/Stepper)</span></h2>
<div class="row">
<div class="col-md-6">
<input type="number" class="form-control" />
</div>
<div class="col-md-6">
<input type="number" class="form-control" disabled/>
</div>
</div>
</div>
<!-- Selecter
================================================== -->
<div class="example">
<h2 class="example-title">Selecter <span>(<b>How to use</b>: https://github.com/benplum/Selecter)</span></h2>
<div class="row">
<div class="col-md-3">
<select name="selecter_basic" class="selecter_1">
<optgroup label="Group One">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Group One">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</optgroup>
<optgroup label="Group Three">
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</optgroup>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_2" data-selecter-options='{"label":"Jump Sites","external":"true"}'>
<option value="http://google.com">Google Search</option>
<option value="http://boingboing.com">BoingBoing</option>
<option value="http://cnn.com">CNN News</option>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_3" data-selecter-options='{"cover":"true"}'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_4" disabled="disabled">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select name="selecter_multiple" class="selecter_5" multiple="multiple">
<option value="1" >One</option>
<option value="2" disabled>Two</option>
<option value="3" selected>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="col-md-6">
<select name="selecter_multiple" class="selecter_6" multiple="multiple" disabled="disabled">
<option value="1" >One</option>
<option value="2" disabled>Two</option>
<option value="3" selected>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
</div>
<!-- Checkboxes and Radios
================================================== -->
<div class="example">
......@@ -874,6 +969,30 @@
</div>
</div>
</div>
<!--Toggle
================================================== -->
<div class="example">
<h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2>
<div class="row">
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" >
<span class="handle"></span>
</label>
</div>
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" checked>
<span class="handle"></span>
</label>
</div>
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" disabled>
<span class="handle"></span>
</label>
</div>
</div>
<!-- Alerts
================================================== -->
<div class="example">
......