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 576 additions and 2 deletions
...@@ -13,7 +13,7 @@ module.exports = function(grunt) { ...@@ -13,7 +13,7 @@ module.exports = function(grunt) {
13 defaultPath: 'bootflat' 13 defaultPath: 'bootflat'
14 }, 14 },
15 15
16 banner: '/*\n * <%= pkg.name %> <%= pkg.version %>\n' + 16 banner: '/*\n * <%= pkg.name %> <%= pkg.version %>\n' +
17 ' *\n' + 17 ' *\n' +
18 ' * Description: <%= pkg.description %>\n' + 18 ' * Description: <%= pkg.description %>\n' +
19 ' *\n' + 19 ' *\n' +
...@@ -44,6 +44,8 @@ module.exports = function(grunt) { ...@@ -44,6 +44,8 @@ module.exports = function(grunt) {
44 'js/jquery-1.10.1.min.js', 44 'js/jquery-1.10.1.min.js',
45 'js/bootstrap.min.js', 45 'js/bootstrap.min.js',
46 '<%= meta.defaultPath %>/js/icheck.min.js', 46 '<%= meta.defaultPath %>/js/icheck.min.js',
47 '<%= meta.defaultPath %>/js/jquery.fs.stepper.min.js',
48 '<%= meta.defaultPath %>/js/jquery.fs.selecter.min.js',
47 'js/application.js' 49 'js/application.js'
48 ] 50 ]
49 } 51 }
......
...@@ -79,6 +79,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -79,6 +79,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
79 79
80 ## Changelog: 80 ## Changelog:
81 81
82 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
83
82 2014/4/3 version 2.0.1 `support bootstrap 3.1.1` 84 2014/4/3 version 2.0.1 `support bootstrap 3.1.1`
83 85
84 2014/3/6 version 2.0.0 `support bootstrap 3.0.1` 86 2014/3/6 version 2.0.0 `support bootstrap 3.0.1`
......
1 /*
2 * Selecter v3.1.2 - 2014-05-30
3 * A jQuery plugin for replacing default select elements. Part of the Formstone Library.
4 * http://formstone.it/selecter/
5 *
6 * Copyright 2014 Ben Plum; MIT Licensed
7 */
8
9 !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 ...\ No newline at end of file
1 /*
2 * Stepper v3.0.7 - 2014-05-07
3 * A jQuery plugin for cross browser number inputs. Part of the Formstone Library.
4 * http://formstone.it/stepper/
5 *
6 * Copyright 2014 Ben Plum; MIT Licensed
7 */
8
9 !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 ...\ No newline at end of file
...@@ -17,7 +17,10 @@ ...@@ -17,7 +17,10 @@
17 "bootflat/pagination", 17 "bootflat/pagination",
18 "bootflat/pager", 18 "bootflat/pager",
19 "bootflat/form", 19 "bootflat/form",
20 "bootflat/stepper",
21 "bootflat/selecter",
20 "bootflat/checkbox_radio", 22 "bootflat/checkbox_radio",
23 "bootflat/toggle",
21 "bootflat/alert", 24 "bootflat/alert",
22 "bootflat/tab", 25 "bootflat/tab",
23 "bootflat/pill", 26 "bootflat/pill",
......
1 // Variables 1 // Variables
2 //------------------------------------------------------ 2 //------------------------------------------------------
3 $img-src: "../bootflat/img/check_flat/default.png" !default; 3 $img-src: "../bootflat/img/check_flat/default.png" !default;
4 4
5 // Exports 5 // Exports
6 //------------------------------------------------------ 6 //------------------------------------------------------
......
1 // Variables
2 //------------------------------------------------------
3 $selecter-primary: $aqua-dark !default;
4
5 $selecter-border-color: $mediumgray-dark !default;
6 $selecter-background-color: $white !default;
7 $selecter-disabled-color: $mediumgray-dark !default;
8 $selecter-disabled-background-color: $lightgray-dark !default;
9 $selecter-radius-value: 4px !default;
10 $selecter-arrow-width: 20px !default;
11
12 $selecter-group-color: $mediumgray-dark !default;
13 $selecter-group-background-color: $lightgray-light !default;
14
15 $selecter-item-border-color: $lightgray-dark !default;
16 $selecter-item-hover: $lightgray-dark !default;
17 $selecter-item-selected: $aqua-dark !default;
18 $selecter-item-selected-border-color: $aqua-light !default;
19
20
21 // Exports
22 //------------------------------------------------------
23
24 @include exports("selecter") {
25 .selecter {
26 display: block;
27 position: relative;
28 max-width: 100%;
29 z-index: 1;
30 outline: none;
31
32 & .selecter-element {
33 display: none;
34 *left: -999999px;
35 height: 100%;
36 left: 0;
37 position: absolute;
38 @include opacity($opacity: 0, $filter: true);
39 width: 100%;
40 z-index: 0;
41 }
42 & .selecter-element,
43 & .selecter-element:focus {
44 outline: none;
45 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
46 -webkit-tap-highlight-color: transparent;
47 }
48
49 & .selecter-selected {
50 background-color: $selecter-background-color;
51 border: 1px solid $selecter-border-color;
52 @include radius($value: $selecter-radius-value);
53 cursor: pointer;
54 display: block;
55 overflow: hidden;
56 padding: 6px 10px;
57 position: relative;
58 text-overflow: clip;
59 z-index: 2;
60
61 &:after {
62 position: absolute;
63 top: 14px;
64 right: 10px;
65 content: "";
66 width: 0;
67 height: 0;
68 border-top: 4px solid $black;
69 border-left: 4px solid transparent;
70 border-right: 4px solid transparent;
71 }
72 }
73 & .selecter-options {
74 border: 1px solid $selecter-border-color;
75 border-width: 0 1px 1px;
76 @include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
77 @include box-shadow($value: 0 6px 12px rgba(0,0,0,.175));
78 background-color: $selecter-background-color;
79 display: none;
80 left: 0;
81 max-height: 260px;
82 overflow: auto;
83 overflow-x: hidden;
84 position: absolute;
85 top: 100%;
86 width: 100%;
87 *width: auto;
88 z-index: 50;
89 }
90 & .selecter-group {
91 border-bottom: 1px solid $selecter-item-border-color;
92 color: $selecter-group-color;
93 background-color: $selecter-group-background-color;
94 display: block;
95 font-size: 11px;
96 padding: 5px 10px 4px;
97 text-transform: uppercase;
98 }
99 & .selecter-item {
100 background-color: $selecter-background-color;
101 border-bottom: 1px solid $selecter-item-border-color;
102 cursor: pointer;
103 display: block;
104 margin: 0;
105 overflow: hidden;
106 padding: 6px 10px;
107 text-overflow: ellipsis;
108 width: 100%;
109
110 &.selected {
111 color: $white;
112 border-bottom-color: $selecter-item-selected-border-color;
113 background-color: $selecter-item-selected;
114 }
115 &.disabled {
116 color: $selecter-disabled-color;
117 cursor: default;
118 }
119 &:first-child {
120 @include radius($value: 0);
121 }
122 &:last-child {
123 @include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
124 border-bottom: 0;
125 }
126 }
127
128 & .selecter-item:hover {
129 background-color: $selecter-item-hover;
130 }
131 & .selecter-item.selected:hover {
132 background-color: $selecter-item-selected;
133 }
134
135 & .selecter-item.disabled:hover,
136 &:hover .selecter-selected,
137 &.disabled .selecter-item:hover {
138 background-color: $selecter-background-color;
139 }
140
141 /* Open */
142 &.open {
143 outline: 0;
144 z-index: 3;
145
146 & .selecter-selected {
147 border: 1px solid $selecter-primary;
148 @include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
149 z-index: 51;
150 }
151 }
152
153 &.open .selecter-selected,
154 &.focus .selecter-selected {
155 background-color: $selecter-background-color;
156 }
157
158 /* 'Cover' Positioning */
159 &.cover {
160 & .selecter-options {
161 @include radius($value: $selecter-radius-value);
162 border-width: 1px;
163 top: 0;
164
165 & .selecter-item.first {
166 @include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
167 }
168
169 }
170
171 &.open .selecter-selected {
172 @include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
173 z-index: 49;
174 }
175 }
176
177
178 /* 'Bottom' Positioning */
179 &.bottom {
180 & .selecter-options {
181 border-width: 1px 1px 0;
182 bottom: 100%;
183 top: auto;
184 }
185 & .selecter-item:last-child {
186 border: none;
187 }
188 &.open .selecter-selected {
189 @include radius($value: 0 0 $selecter-radius-value $selecter-radius-value);
190 }
191 &.open .selecter-options {
192 @include radius($value: $selecter-radius-value $selecter-radius-value 0 0);
193 }
194 }
195
196 /* 'Bottom' + 'Cover' Positioning */
197 &.bottom.cover {
198 & .selecter-options {
199 bottom: 0;
200 top: auto;
201 }
202 &.open .selecter-selected,
203 &.open .selecter-options {
204 @include radius($value: $selecter-radius-value);
205 }
206 }
207
208
209 /* Multiple Select */
210 &.multiple .selecter-options {
211 @include radius($value: $selecter-radius-value);
212 border-width: 1px;
213 box-shadow: none;
214 display: block;
215 position: static;
216 width: 100%;
217 }
218
219 /* 'Disabled' State */
220 &.disabled {
221 & .selecter-selected {
222 background-color: $selecter-disabled-background-color;
223 border-color: $selecter-disabled-background-color;
224 color: $selecter-disabled-color;
225 cursor: default;
226 }
227 & .selecter-options {
228 background-color: $selecter-disabled-background-color;
229 border-color: $selecter-disabled-background-color;
230 }
231 & .selecter-group,
232 & .selecter-item {
233 background-color: $selecter-disabled-background-color;
234 border-color: $selecter-item-border-color;
235 color: $selecter-disabled-color;
236 cursor: default;
237 }
238 & .selecter-item.selected {
239 background-color: $selecter-primary;
240 @include opacity($opacity: 45, $filter: true);
241 color: $white;
242 }
243 }
244
245
246 /* Scroller Support */
247 & .selecter-options.scroller {
248 overflow: hidden;
249
250 & .scroller-content {
251 max-height: 260px;
252 padding: 0;
253 }
254 }
255
256 }
257 }
1 // Variables
2 //------------------------------------------------------
3 $stepper-primary: $aqua-dark !default;
4 $stepper-primary-hover: $aqua-light !default;
5
6 $stepper-arrow-width: 20px !default;
7
8
9 // Exports
10 //------------------------------------------------------
11
12 @include exports("stepper") {
13
14 /**
15 * stepper
16 * --------------------------------------------------
17 */
18 .stepper {
19 & .stepper-input {
20 overflow: hidden;
21 -moz-appearance: textfield;
22
23 &::-webkit-inner-spin-button,
24 &::-webkit-outer-spin-button {
25 -webkit-appearance: none;
26 margin: 0;
27 }
28 }
29
30 & .stepper-arrow {
31 background-color: $stepper-primary;
32 cursor: pointer;
33 display: block;
34 height: 50%;
35 position: absolute;
36 right: 15px;
37 text-indent: -99999px;
38 width: $stepper-arrow-width;
39
40 &:hover,
41 &:active {
42 background-color: $stepper-primary-hover;
43 }
44 }
45 & .up {
46 @include prefixer($property: border-top-right-radius, $value: 3px, $prefixes: webkit moz spec);
47 border: 1px solid darken($stepper-primary, 7%);
48 top: 0;
49 }
50 & .down {
51 @include prefixer($property: border-bottom-right-radius, $value: 3px, $prefixes: webkit moz spec);
52 bottom: 0;
53 }
54 & .up::before,
55 & .down::before {
56 content: "";
57 position: absolute;
58 width: 0;
59 height: 0;
60 border-left: 4px solid transparent;
61 border-right: 4px solid transparent;
62 }
63 & .up::before {
64 top: 5px;
65 left: 5px;
66 border-bottom: 4px solid $white;
67 }
68 & .down:before {
69 bottom: 5px;
70 left: 6px;
71 border-top: 4px solid $white;
72 }
73 &.disabled .stepper-arrow {
74 background-color: $stepper-primary;
75 @include opacity($opacity: 45, $filter: true);
76 }
77 }
78
79 }
1 // Variables
2 //------------------------------------------------------
3 $toggle-height: 32px !default;
4 $toggle-checkbox-opacity: 0 !default;
5
6 $toggle-transition-value: all .25s ease-in-out !default;
7
8 $toggle-default-background-color: $white !default;
9 $toggle-checked-background-color: $grass-light !default;
10 $toggle-disabled-background-color: $lightgray-dark !default;
11
12 $toggle-handle-width: 50px !default;
13 $toggle-handle-height: 32px !default;
14 $toggle-handle-radius: 19px !default;
15
16 $toggle-control-width: 30px !default;
17 $toggle-control-height: 30px !default;
18 $toggle-control-radius: 30px !default;
19
20 $toggle-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%) !default;
21 $toggle-control-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%), 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
22 $toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
23
24 // Exports
25 //------------------------------------------------------
26
27 @include exports("toggle") {
28
29 /**
30 * toggle
31 * --------------------------------------------------
32 */
33 .toggle {
34 height: $toggle-height;
35
36 & input[type="checkbox"],
37 & input[type="radio"] {
38 width: 0;
39 height: 0;
40 margin: 0;
41 padding: 0;
42 text-indent: -100000px;
43 @include opacity($opacity: $toggle-checkbox-opacity, $filter: true);
44 }
45
46 & .handle {
47 display: block;
48 position: relative;
49 top: -20px;
50 left: 0;
51 width: $toggle-handle-width;
52 height: $toggle-handle-height;
53 background-color: $toggle-default-background-color;
54 @include radius($value: $toggle-handle-radius);
55 @include box-shadow($value:$toggle-shadow);
56
57 &:before,
58 &:after {
59 content: "";
60 position: absolute;
61 top: 1px;
62 left: 1px;
63 display: block;
64 width: $toggle-control-width;
65 height: $toggle-control-height;
66 @include radius($value: $toggle-control-radius);
67 @include transition($toggle-transition-value);
68 background-color: $toggle-default-background-color;
69 @include box-shadow($value:$toggle-control-shadow);
70 }
71
72 }
73 & input[type="checkbox"]:disabled + .handle,
74 & input[type="radio"]:disabled + .handle,
75 & input[type="checkbox"]:disabled + .handle:before,
76 & input[type="radio"]:disabled + .handle:before,
77 & input[type="checkbox"]:disabled + .handle:after,
78 & input[type="radio"]:disabled + .handle:after {
79 @include opacity($opacity: 60, $filter: true);
80 background-color: $toggle-disabled-background-color;
81 }
82
83 & input[type="checkbox"]:checked + .handle:before,
84 & input[type="radio"]:checked + .handle:before {
85 width: $toggle-handle-width;
86 background-color: $toggle-checked-background-color;
87 }
88 & input[type="checkbox"]:checked + .handle:after,
89 & input[type="radio"]:checked + .handle:after {
90 left: 20px;
91 @include box-shadow($value:$toggle-checked-shadow);
92 }
93 }
94 }
...@@ -807,6 +807,101 @@ ...@@ -807,6 +807,101 @@
807 </div> 807 </div>
808 </div> 808 </div>
809 </div> 809 </div>
810 <!-- Stepper
811 ================================================== -->
812 <div class="example">
813 <h2 class="example-title">Stepper <span>(<b>How to use</b>: https://github.com/benplum/Stepper)</span></h2>
814 <div class="row">
815 <div class="col-md-6">
816 <input type="number" class="form-control" />
817 </div>
818 <div class="col-md-6">
819 <input type="number" class="form-control" disabled/>
820 </div>
821 </div>
822 </div>
823 <!-- Selecter
824 ================================================== -->
825 <div class="example">
826 <h2 class="example-title">Selecter <span>(<b>How to use</b>: https://github.com/benplum/Selecter)</span></h2>
827 <div class="row">
828 <div class="col-md-3">
829 <select name="selecter_basic" class="selecter_1">
830 <optgroup label="Group One">
831 <option value="1">One</option>
832 <option value="2">Two</option>
833 <option value="3">Three</option>
834 </optgroup>
835 <optgroup label="Group One">
836 <option value="4">Four</option>
837 <option value="5">Five</option>
838 <option value="6">Six</option>
839 <option value="7">Seven</option>
840 </optgroup>
841 <optgroup label="Group Three">
842 <option value="8">Eight</option>
843 <option value="9">Nine</option>
844 <option value="10">Ten</option>
845 </optgroup>
846 </select>
847 </div>
848 <div class="col-md-3">
849 <select name="selecter_basic" class="selecter_2" data-selecter-options='{"label":"Jump Sites","external":"true"}'>
850 <option value="http://google.com">Google Search</option>
851 <option value="http://boingboing.com">BoingBoing</option>
852 <option value="http://cnn.com">CNN News</option>
853 </select>
854 </div>
855 <div class="col-md-3">
856 <select name="selecter_basic" class="selecter_3" data-selecter-options='{"cover":"true"}'>
857 <option value="1">One</option>
858 <option value="2">Two</option>
859 <option value="3">Three</option>
860 <option value="4">Four</option>
861 <option value="5">Five</option>
862 </select>
863 </div>
864 <div class="col-md-3">
865 <select name="selecter_basic" class="selecter_4" disabled="disabled">
866 <option value="1">One</option>
867 <option value="2">Two</option>
868 <option value="3">Three</option>
869 <option value="4">Four</option>
870 <option value="5">Five</option>
871 </select>
872 </div>
873 </div>
874 <div class="row">
875 <div class="col-md-6">
876 <select name="selecter_multiple" class="selecter_5" multiple="multiple">
877 <option value="1" >One</option>
878 <option value="2" disabled>Two</option>
879 <option value="3" selected>Three</option>
880 <option value="4">Four</option>
881 <option value="5">Five</option>
882 <option value="6">Six</option>
883 <option value="7">Seven</option>
884 <option value="8">Eight</option>
885 <option value="9">Nine</option>
886 <option value="10">Ten</option>
887 </select>
888 </div>
889 <div class="col-md-6">
890 <select name="selecter_multiple" class="selecter_6" multiple="multiple" disabled="disabled">
891 <option value="1" >One</option>
892 <option value="2" disabled>Two</option>
893 <option value="3" selected>Three</option>
894 <option value="4">Four</option>
895 <option value="5">Five</option>
896 <option value="6">Six</option>
897 <option value="7">Seven</option>
898 <option value="8">Eight</option>
899 <option value="9">Nine</option>
900 <option value="10">Ten</option>
901 </select>
902 </div>
903 </div>
904 </div>
810 <!-- Checkboxes and Radios 905 <!-- Checkboxes and Radios
811 ================================================== --> 906 ================================================== -->
812 <div class="example"> 907 <div class="example">
...@@ -874,6 +969,30 @@ ...@@ -874,6 +969,30 @@
874 </div> 969 </div>
875 </div> 970 </div>
876 </div> 971 </div>
972 <!--Toggle
973 ================================================== -->
974 <div class="example">
975 <h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2>
976 <div class="row">
977 <div class="col-md-4">
978 <label class="toggle">
979 <input type="checkbox" >
980 <span class="handle"></span>
981 </label>
982 </div>
983 <div class="col-md-4">
984 <label class="toggle">
985 <input type="checkbox" checked>
986 <span class="handle"></span>
987 </label>
988 </div>
989 <div class="col-md-4">
990 <label class="toggle">
991 <input type="checkbox" disabled>
992 <span class="handle"></span>
993 </label>
994 </div>
995 </div>
877 <!-- Alerts 996 <!-- Alerts
878 ================================================== --> 997 ================================================== -->
879 <div class="example"> 998 <div class="example">
......