Browse Source
Adds first working pass of dropdown js
Adds first working pass of dropdown js
Former-commit-id:pull/258/head8b2e705be5Former-commit-id:e66f4f807a
Jack Lukic
12 years ago
34 changed files with 899 additions and 285 deletions
Split View
Diff Options
-
2build/minified/collections/form.min.css
-
2build/minified/collections/menu.min.css
-
2build/minified/collections/message.min.css
-
2build/minified/elements/button.min.css
-
33build/minified/modules/dropdown.js
-
1build/minified/modules/dropdown.min.css
-
2build/minified/modules/dropdown.min.js
-
2build/minified/modules/search.min.js
-
33build/packaged/modules/dropdown.js
-
2build/packaged/semantic.min.css.REMOVED.git-id
-
2build/packaged/semantic.min.js.REMOVED.git-id
-
1build/uncompressed/collections/form.css
-
7build/uncompressed/collections/menu.css
-
41build/uncompressed/collections/message.css
-
4build/uncompressed/elements/button.css
-
107build/uncompressed/modules/dropdown.css
-
33build/uncompressed/modules/dropdown.js
-
24node/src/documents/collections/message.html
-
203node/src/documents/modules/dropdown.html
-
185node/src/files/404.html
-
1node/src/files/components/semantic/collections/form.css
-
7node/src/files/components/semantic/collections/menu.css
-
41node/src/files/components/semantic/collections/message.css
-
4node/src/files/components/semantic/elements/button.css
-
107node/src/files/components/semantic/modules/dropdown.css
-
33node/src/files/components/semantic/modules/dropdown.js
-
34node/src/files/javascript/dropdown.js
-
9node/src/layouts/default.html.eco
-
1src/collections/form.less
-
8src/collections/menu.less
-
67src/collections/message.less
-
4src/elements/button.less
-
33src/modules/dropdown.js
-
147src/modules/dropdown.less
2
build/minified/collections/form.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/collections/menu.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1 +1 @@ |
|||
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message .header+p{margin-top:0}.ui.message p{opacity:.85;margin:1em 0}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.attached.message .header{font-size:1.1em}.ui.attached.message .icon{float:right}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#E4F5FB;background-color:#E9F9FF;color:#4D8796}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#DEFCD5;color:#119000;border-color:#4D965B}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#96904D}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#964D4D}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em} |
|||
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message .header+p{margin-top:0}.ui.message p{opacity:.85;margin:1em 0}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 .325em .325em;-moz-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.attached.message .header{font-size:1.1em}.ui.attached.message .icon{float:right}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#E4F5FB;background-color:#E9F9FF;color:#4D8796}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#DEFCD5;color:#119000;border-color:#4D965B}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#96904D}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#964D4D}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em} |
|||
2
build/minified/elements/button.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||
.ui.dropdown{position:relative;display:inline-block;line-height:1;white-space:nowrap}.ui.dropdown>.icon.down.triangle{float:right}.ui.dropdown .menu{position:absolute;display:none;top:100%;background-color:#FFF;min-width:100%;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset;box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-border-radius:0 0 .325em .325em;-webkit-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out;z-index:11}.ui.dropdown .menu{left:1px}.ui.dropdown:last-child .menu{left:auto;right:1px}.ui.dropdown .menu .item{cursor:pointer;border:0;border-top:1px solid rgba(0,0,0,.05);font-size:.9em;display:block;color:rgba(0,0,0,.75);padding:.85em 1em;font-size:.9rem;text-transform:none;font-weight:400;text-align:left;-webkit-touch-callout:none}.ui.dropdown .menu .item .icon{margin-right:.75em}.ui.dropdown .menu .item:first-child{border-top:0}.ui.selection.dropdown{display:inline-block;background-color:#FFF;border:1px solid rgba(0,0,0,.1);padding:.5em 1em;line-height:1.33;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.icon{float:right;margin:.2em .2em .2em .5em}.ui.dropdown.visible{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{border:1px solid rgba(0,0,0,.2)}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{font-weight:700} |
|||
@ -1 +1 @@ |
|||
(function(e,t,n,o){e.fn.dropdown=function(t){var a,i=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(i.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,p=[].slice.call(arguments,1);return i.each(function(){var t,g=e(this),h=e(this).find(r.selector.menu),v="ontouchstart"in n.documentElement,b=g.selector||"",y=this,x=g.data("module-"+r.namespace),C=r.className,w=r.namespace,T=r.errors;t={initialize:function(){r.context&&""!==b?(t.verbose("Initializing dropdown with delegated events",g),e(y,r.context).on(b,"click"+c,t.toggle).data(l,t)):(t.verbose("Initializing dropdown with bound events",g),g.on(t.get.event()+c,t.toggle),g.data(l,t))},intent:{test:function(n){t.debug("User clicked away from the dropdown"),0==e(n.target).closest(g).size()&&(t.hide(),t.intent.unbind())},bind:function(){t.verbose("Binding click-away intent event to document"),s.one("click"+c,function(){t.can.hide()&&t.hide()})},unbind:function(){t.verbose("Removing click-away intent event to document"),s.off("click"+c,t.test)}},get:{event:function(){return t.verbose("Removing click-away intent event to document"),v?"touchstart":"hover"==r.on?"hover":"click"==r.on?"click":o}},can:{show:function(){return!g.hasClass(C.disabled)}},destroy:function(){t.verbose("Destroying previous dropdown for",g),g.off(w)},show:function(){t.debug("Enabling dropdown"),g.addClass(C.active),h.show(),e.proxy(r.onChange,h.get())(),e.proxy(r.onShow,h.get())()},hide:function(){t.debug("Disabling dropdown"),g.removeClass(C.active),h.hide(),e.proxy(r.onChange,h.get())(),e.proxy(r.onHide,h.get())()},toggle:function(){t.can.show()&&h.not(":visible")?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,a;r.performance&&(n=(new Date).getTime(),a=u||n,o=n-a,u=n,d.push({Element:y,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+b+"("+i.size()+" elements)",0);b&&(t+="Performance ("+b+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,a,i){var s,r;return a=a||p,i=y||i,"string"==typeof n&&x!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(x[a])&&n!=s?(x=x[a],!0):x[a]!==o?(r=x[a],!0):(t.error(T.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},m?(x===o&&t.initialize(),a=t.invoke(f)):(x!==o&&t.destroy(),t.initialize())}),a?a:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,on:"click",onChange:function(){},onShow:function(){},onHide:function(){},errors:{method:"The method you called is not defined."},selector:{menu:".menu"},className:{active:"visible"}}})(jQuery,window,document); |
|||
(function(e,t,n,o){e.fn.dropdown=function(t){var a,i=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(i.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,p=[].slice.call(arguments,1);return i.each(function(){var t,g=e(this),h=e(this).find(r.selector.menu),v="ontouchstart"in n.documentElement,b=g.selector||"",y=this,x=g.data("module-"+r.namespace),C=r.className,w=r.namespace,T=r.errors;t={initialize:function(){r.context&&""!==b?(t.verbose("Initializing dropdown with delegated events",g),e(y,r.context).on(b,"click"+c,t.toggle).data(l,t)):(t.verbose("Initializing dropdown with bound events",g),g.on(t.get.event()+c,t.toggle),g.data(l,t))},intent:{test:function(n){t.debug("Checking if click was inside the dropdown",n.target),0==e(n.target).closest(g).size()&&(t.hide(),t.intent.unbind())},bind:function(){t.verbose("Binding hide intent event to document"),e(n).on("click",t.intent.test)},unbind:function(){t.verbose("Removing hide intent event from document"),s.off("click")}},is:{clickable:function(){return v||"click"==r.on}},get:{event:function(){return v?"touchstart":"hover"==r.on?"hover":"click"==r.on?"click":o}},can:{show:function(){return!g.hasClass(C.disabled)}},destroy:function(){t.verbose("Destroying previous dropdown for",g),g.off(w)},show:function(){t.debug("Enabling dropdown"),g.addClass(C.active),t.is.clickable()&&t.intent.bind(),h.show(),e.proxy(r.onChange,h.get())(),e.proxy(r.onShow,h.get())()},hide:function(){t.debug("Disabling dropdown"),g.removeClass(C.active),t.is.clickable()&&t.intent.unbind(),h.hide(),e.proxy(r.onChange,h.get())(),e.proxy(r.onHide,h.get())()},toggle:function(){t.can.show()&&h.is(":not(:visible)")?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,a;r.performance&&(n=(new Date).getTime(),a=u||n,o=n-a,u=n,d.push({Element:y,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+b+"("+i.size()+" elements)",0);b&&(t+="Performance ("+b+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,a,i){var s,r;return a=a||p,i=y||i,"string"==typeof n&&x!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(x[a])&&n!=s?(x=x[a],!0):x[a]!==o?(r=x[a],!0):(t.error(T.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},m?(x===o&&t.initialize(),a=t.invoke(f)):(x!==o&&t.destroy(),t.initialize())}),a?a:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,on:"click",onChange:function(){},onShow:function(){},onHide:function(){},errors:{method:"The method you called is not defined."},selector:{menu:".menu"},className:{active:"visible"}}})(jQuery,window,document); |
|||
2
build/minified/modules/search.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1 +1 @@ |
|||
7fa5a6ddc395c6ceb7286f6b166d2853cba4049d |
|||
6f6d8b8a048772153ed5ae4c6bf9eeb6babd2f89 |
|||
@ -1 +1 @@ |
|||
531a18adaad9eef55981df256953371a373ff881 |
|||
bddb0bf84b67f6686b021e2666b3263a4af85f41 |
|||
@ -0,0 +1,107 @@ |
|||
/* |
|||
* # Semantic Dropdown |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
.ui.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.dropdown > .icon.down.triangle { |
|||
float: right; |
|||
} |
|||
.ui.dropdown .menu { |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
z-index: 11; |
|||
} |
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 1px; |
|||
} |
|||
.ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 1px; |
|||
} |
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
font-size: 0.9em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
padding: 0.85em 1em; |
|||
font-size: 0.9rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
.ui.selection.dropdown { |
|||
display: inline-block; |
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 0.5em 1em; |
|||
line-height: 1.33; |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
.ui.selection.dropdown > .icon { |
|||
float: right; |
|||
margin: 0.2em 0.2em 0.2em 0.5em; |
|||
} |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
.ui.dropdown.visible { |
|||
border-bottom-left-radius: 0em; |
|||
border-bottom-right-radius: 0em; |
|||
} |
|||
.ui.selection.dropdown:hover, |
|||
.ui.selection.dropdown.hover { |
|||
border: 1px solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
.ui.dropdown .menu .active.item { |
|||
font-weight: bold; |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
@ -0,0 +1,203 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'dropdown' |
|||
|
|||
title : 'Dropdown' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/dropdown.css"> |
|||
<script src="/components/semantic/modules/dropdown.js"></script> |
|||
<script src="/javascript/dropdown.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Dropdown</h1> |
|||
<p>A dropdown is a hidden list of selections that a user can choose to have appear.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">Settings</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="visible example"> |
|||
<h4 class="ui header">Dropdown</h4> |
|||
<p>The markup for a dropdown</p> |
|||
<div class="ui dropdown"> |
|||
<i class="icon down triangle"></i> |
|||
Select |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Button Dropdown</h4> |
|||
<p>A button can be formatted to open a dropdown</p> |
|||
<div class="ui red labeled icon dropdown button"> |
|||
<i class="down settings icon"></i> Settings |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Combo Dropdown</h4> |
|||
<p>A button can be formatted with a dropdown beside it</p> |
|||
<div class="ui teal buttons"> |
|||
<div class="ui button">Save</div> |
|||
<div class="ui teal dropdown icon button"> |
|||
<i class="down triangle icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Select</h4> |
|||
<p>A dropdown can be formatted to allow selection inside a form</p> |
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Gender</label> |
|||
<div class="ui dropdown selection"> |
|||
<i class="icon down triangle"></i> |
|||
Male |
|||
<div class="menu"> |
|||
<div class="item">Male</div> |
|||
<div class="item">Female</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Getting Started</h2> |
|||
<h3 class="ui header">Initializing a dropdown</h3> |
|||
<div class="code"> |
|||
$('.ui.dropdown') |
|||
.dropdown() |
|||
; |
|||
</div> |
|||
|
|||
<h3 class="ui header">Defaults</h3> |
|||
<table class="ui settings celled table"> |
|||
<thead> |
|||
<th colspan="3">Dropdown Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>required</td> |
|||
<td>auto</td> |
|||
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>context</td> |
|||
<td>false</td> |
|||
<td>A selector or jQuery object to use as a delegated event context</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui settings celled table"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is either disabled or enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onEnable</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onDisable</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is disabled.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui settings celled table"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Dropdown</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>dropdown</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,157 +1,62 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>Page Not Found :(</title> |
|||
<style> |
|||
::-moz-selection { |
|||
background: #b3d4fc; |
|||
text-shadow: none; |
|||
} |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>404 | Semantic UI</title> |
|||
|
|||
::selection { |
|||
background: #b3d4fc; |
|||
text-shadow: none; |
|||
} |
|||
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css"> |
|||
|
|||
html { |
|||
padding: 30px 10px; |
|||
font-size: 20px; |
|||
line-height: 1.4; |
|||
color: #737373; |
|||
background: #f0f0f0; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/button.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/divider.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/header.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/icons.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/label.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/progress.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/segment.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/step.css"> |
|||
|
|||
html, |
|||
input { |
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
} |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/form.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/grid.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/menu.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/message.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/table.css"> |
|||
|
|||
body { |
|||
max-width: 500px; |
|||
_width: 500px; |
|||
padding: 30px 20px 50px; |
|||
border: 1px solid #b3b3b3; |
|||
border-radius: 4px; |
|||
margin: 0 auto; |
|||
box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; |
|||
background: #fcfcfc; |
|||
} |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/comment.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/feed.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/items.css"> |
|||
|
|||
h1 { |
|||
margin: 0 10px; |
|||
font-size: 50px; |
|||
text-align: center; |
|||
} |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/checkbox.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/dropdown.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/popup.css"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/shape.css"> |
|||
|
|||
h1 span { |
|||
color: #bbb; |
|||
} |
|||
<link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css"> |
|||
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css"> |
|||
|
|||
h3 { |
|||
margin: 1.5em 0 0.5em; |
|||
} |
|||
<script src="/javascript/library/jquery.js"></script> |
|||
<script src="/javascript/library/easing.js"></script> |
|||
<script src="/javascript/library/ace/ace.js"></script> |
|||
<script src="/javascript/library/sidr.js"></script> |
|||
<script src="/javascript/library/waypoints.js"></script> |
|||
|
|||
p { |
|||
margin: 1em 0; |
|||
} |
|||
<script src="/components/semantic/modules/behavior/state.js"></script> |
|||
<script src="/components/semantic/modules/checkbox.js"></script> |
|||
<script src="/components/semantic/modules/popup.js"></script> |
|||
<script src="/javascript/semantic.js"></script> |
|||
|
|||
ul { |
|||
padding: 0 0 0 40px; |
|||
margin: 1em 0; |
|||
} |
|||
</head> |
|||
|
|||
.container { |
|||
max-width: 380px; |
|||
_width: 380px; |
|||
margin: 0 auto; |
|||
} |
|||
<body id="example" class="<%= @document.css %>"> |
|||
|
|||
<div class="masthead segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header"><i class="icon lab"></i>Page Not Found</h1> |
|||
<h2 class="ui header">We couldnt find the page you're looking for</h2> |
|||
</div> |
|||
</div> |
|||
|
|||
/* google search */ |
|||
|
|||
#goog-fixurl ul { |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
#goog-fixurl form { |
|||
margin: 0; |
|||
} |
|||
</body> |
|||
|
|||
#goog-wm-qt, |
|||
#goog-wm-sb { |
|||
border: 1px solid #bbb; |
|||
font-size: 16px; |
|||
line-height: normal; |
|||
vertical-align: top; |
|||
color: #444; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
#goog-wm-qt { |
|||
width: 220px; |
|||
height: 20px; |
|||
padding: 5px; |
|||
margin: 5px 10px 0 0; |
|||
box-shadow: inset 0 1px 1px #ccc; |
|||
} |
|||
|
|||
#goog-wm-sb { |
|||
display: inline-block; |
|||
height: 32px; |
|||
padding: 0 10px; |
|||
margin: 5px 0 0; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background-color: #f5f5f5; |
|||
background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1); |
|||
background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1); |
|||
background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1); |
|||
background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1); |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
*overflow: visible; |
|||
*display: inline; |
|||
*zoom: 1; |
|||
} |
|||
|
|||
#goog-wm-sb:hover, |
|||
#goog-wm-sb:focus { |
|||
border-color: #aaa; |
|||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
|||
background-color: #f8f8f8; |
|||
} |
|||
|
|||
#goog-wm-qt:hover, |
|||
#goog-wm-qt:focus { |
|||
border-color: #105cb6; |
|||
outline: 0; |
|||
color: #222; |
|||
} |
|||
|
|||
input::-moz-focus-inner { |
|||
padding: 0; |
|||
border: 0; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<h1>Not found <span>:(</span></h1> |
|||
<p>Sorry, but the page you were trying to view does not exist.</p> |
|||
<p>It looks like this was the result of either:</p> |
|||
<ul> |
|||
<li>a mistyped address</li> |
|||
<li>an out-of-date link</li> |
|||
</ul> |
|||
<script> |
|||
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host; |
|||
</script> |
|||
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,107 @@ |
|||
/* |
|||
* # Semantic Dropdown |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
.ui.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.dropdown > .icon.down.triangle { |
|||
float: right; |
|||
} |
|||
.ui.dropdown .menu { |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), 1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
z-index: 11; |
|||
} |
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 1px; |
|||
} |
|||
.ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 1px; |
|||
} |
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
font-size: 0.9em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
padding: 0.85em 1em; |
|||
font-size: 0.9rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
.ui.selection.dropdown { |
|||
display: inline-block; |
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 0.5em 1em; |
|||
line-height: 1.33; |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
.ui.selection.dropdown > .icon { |
|||
float: right; |
|||
margin: 0.2em 0.2em 0.2em 0.5em; |
|||
} |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
.ui.dropdown.visible { |
|||
border-bottom-left-radius: 0em; |
|||
border-bottom-right-radius: 0em; |
|||
} |
|||
.ui.selection.dropdown:hover, |
|||
.ui.selection.dropdown.hover { |
|||
border: 1px solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
.ui.dropdown .menu .active.item { |
|||
font-weight: bold; |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
@ -0,0 +1,34 @@ |
|||
semantic.dropdown = {}; |
|||
|
|||
// ready event
|
|||
semantic.dropdown.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$hover = $('.hover .ui.dropdown'), |
|||
$select = $('.ui.dropdown').not($hover), |
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
// event handlers
|
|||
handler = { |
|||
|
|||
}; |
|||
|
|||
$select |
|||
.dropdown() |
|||
; |
|||
$hover |
|||
.dropdown({ |
|||
on: 'hover' |
|||
}) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.dropdown.ready) |
|||
; |
|||
@ -0,0 +1,147 @@ |
|||
/* |
|||
* # Semantic Dropdown |
|||
* http://github.com/quirkyinc/semantic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
|
|||
.ui.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.dropdown > .icon.down.triangle { |
|||
float: right; |
|||
} |
|||
|
|||
.ui.dropdown .menu { |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 2px 0px 0px rgba(0, 0, 0, 0.1), |
|||
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 2px 0px 0px rgba(0, 0, 0, 0.1), |
|||
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0px 2px 0px 0px rgba(0, 0, 0, 0.1), |
|||
1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, |
|||
-1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset, |
|||
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
z-index: 11; |
|||
} |
|||
|
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 1px; |
|||
} |
|||
.ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 1px; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
font-size: 0.9em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
|
|||
padding: 0.85em 1em; |
|||
font-size: 0.9rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
|
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
|
|||
.ui.selection.dropdown { |
|||
display: inline-block; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 0.5em 1em; |
|||
|
|||
line-height: 1.33; |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
.ui.selection.dropdown > .icon { |
|||
float: right; |
|||
margin: 0.2em 0.2em 0.2em 0.5em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.dropdown.visible { |
|||
border-bottom-left-radius: 0em; |
|||
border-bottom-right-radius: 0em; |
|||
} |
|||
|
|||
|
|||
.ui.selection.dropdown:hover, |
|||
.ui.selection.dropdown.hover { |
|||
border: 1px solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
.ui.dropdown .menu .active.item { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
Write
Preview
Loading…
Cancel
Save