Browse Source

more dropdown examples, tweaks to code

Former-commit-id: 7d972ce278351c10c99ca19d04ffda07a3efa27c
Former-commit-id: 9d0c9a4c021df83dbfa813fbd23cdd02718f2017
beta
Jack Lukic 12 years ago
parent
commit
459c5c70e8
  1. 2
      build/minified/elements/icons.min.css
  2. 2
      build/minified/modules/dropdown.js
  3. 2
      build/minified/modules/dropdown.min.css
  4. 2
      build/minified/modules/dropdown.min.js
  5. 2
      build/packaged/modules/dropdown.js
  6. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  7. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  8. 10
      build/uncompressed/elements/icons.css
  9. 66
      build/uncompressed/modules/dropdown.css
  10. 2
      build/uncompressed/modules/dropdown.js
  11. 8
      node/src/documents/collections/menu.html
  12. 27
      node/src/documents/modules/dropdown.html
  13. 10
      node/src/files/components/semantic/elements/icons.css
  14. 66
      node/src/files/components/semantic/modules/dropdown.css
  15. 2
      node/src/files/components/semantic/modules/dropdown.js
  16. 8
      src/elements/icons.less
  17. 2
      src/modules/dropdown.js
  18. 80
      src/modules/dropdown.less

2
build/minified/elements/icons.min.css

File diff suppressed because one or more lines are too long

2
build/minified/modules/dropdown.js

@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
module.intent.bind();
}
$menu
.show()
.fadeIn(200)
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();

2
build/minified/modules/dropdown.min.css

@ -1 +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}
.ui.dropdown{position:relative;display:inline-block;line-height:1;white-space:nowrap}.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:0}.ui.dropdown:last-child .menu{left:auto;right:0}.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.dropdown.visible{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{font-weight:700}.ui.selection.dropdown{cursor:pointer;display:inline-block;background-color:#FFF;padding:.5em 1em;line-height:1.33;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.dropdown.icon{float:right;margin:.2em 0 .2em .5em}.ui.selection.dropdown,.ui.selection.dropdown .menu{-webkit-transition:box-shadow .2s ease-out;-moz-transition:box-shadow .2s ease-out;-o-transition:box-shadow .2s ease-out;-ms-transition:box-shadow .2s ease-out;transition:box-shadow .2s ease-out}.ui.selection.dropdown .menu{-webkit-box-shadow:0 1px 0 1px #EEE;-moz-box-shadow:0 1px 0 1px #EEE;box-shadow:0 1px 0 1px #EEE}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.dropdown:hover .menu{-webkit-box-shadow:0 1px 0 1px #D3D3D3;-moz-box-shadow:0 1px 0 1px #D3D3D3;box-shadow:0 1px 0 1px #D3D3D3}

2
build/minified/modules/dropdown.min.js

@ -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("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);
(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.fadeIn(200),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/packaged/modules/dropdown.js

@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
module.intent.bind();
}
$menu
.show()
.fadeIn(200)
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();

2
build/packaged/semantic.min.css.REMOVED.git-id

@ -1 +1 @@
6f6d8b8a048772153ed5ae4c6bf9eeb6babd2f89
7e389a23fd56822486becc8eb9b458ce25a6ac21

2
build/packaged/semantic.min.js.REMOVED.git-id

@ -1 +1 @@
bddb0bf84b67f6686b021e2666b3263a4af85f41
617c639c97cf389d48dcb0b7907fc39d66d47c2d

10
build/uncompressed/elements/icons.css

@ -536,18 +536,24 @@ i.icon.zoom.out:before {
/*--------------
Spacing Fix
---------------*/
/* dropdown arrows are to the right */
i.dropdown.icon {
margin: 0em 0em 0em 0.5em;
}
/* stars are usually consecutive */
i.icon.star {
width: auto;
margin: 0em;
vertical-align: middle;
}
/* left side icons */
i.icon.left,
i.icon.left,
i.icon.left {
width: auto;
margin: 0em 0.5em 0em 0em;
}
/* right side icons */
i.icon.up,
i.icon.down,
i.icon.right {
@ -562,6 +568,10 @@ i.icon.delete:before {
content: '\e80d';
}
/* '' */
i.icon.dropdown:before {
content: '\25be';
}
/* '▾' */
i.icon.help:before {
content: '\e704';
}

66
build/uncompressed/modules/dropdown.css

@ -18,9 +18,6 @@
line-height: 1;
white-space: nowrap;
}
.ui.dropdown > .icon.down.triangle {
float: right;
}
.ui.dropdown .menu {
position: absolute;
display: none;
@ -42,11 +39,11 @@
}
/* Flyout Direction */
.ui.dropdown .menu {
left: 1px;
left: 0px;
}
.ui.dropdown:last-child .menu {
left: auto;
right: 1px;
right: 0px;
}
.ui.dropdown .menu .item {
cursor: pointer;
@ -68,40 +65,63 @@
.ui.dropdown .menu .item:first-child {
border-top: none;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em !important;
border-bottom-right-radius: 0em !important;
}
.ui.dropdown .menu .item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.ui.dropdown .menu .active.item {
font-weight: bold;
}
/*******************************
Variations
*******************************/
/*--------------
Selection
---------------*/
.ui.selection.dropdown {
cursor: pointer;
display: inline-block;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.5em 1em;
line-height: 1.33;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.selection.dropdown > .icon {
.ui.selection.dropdown > .dropdown.icon {
float: right;
margin: 0.2em 0.2em 0.2em 0.5em;
margin: 0.2em 0em 0.2em 0.5em;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
.ui.selection.dropdown,
.ui.selection.dropdown .menu {
-webkit-transition: box-shadow 0.2s ease-out;
-moz-transition: box-shadow 0.2s ease-out;
-o-transition: box-shadow 0.2s ease-out;
-ms-transition: box-shadow 0.2s ease-out;
transition: box-shadow 0.2s ease-out;
}
.ui.selection.dropdown .menu {
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
box-shadow: 0px 1px 0px 1px #EEEEEE;
}
.ui.selection.dropdown:hover,
.ui.selection.dropdown.hover {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.dropdown .menu .item:hover {
background-color: rgba(0, 0, 0, 0.02);
.ui.dropdown:hover .menu {
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
box-shadow: 0px 1px 0px 1px #D3D3D3;
}
.ui.dropdown .menu .active.item {
font-weight: bold;
}
/*******************************
Variations
*******************************/

2
build/uncompressed/modules/dropdown.js

@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
module.intent.bind();
}
$menu
.show()
.fadeIn(200)
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();

8
node/src/documents/collections/menu.html

@ -42,7 +42,7 @@ type : 'UI Collection'
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="dropdown item">
More <i class="icon down triangle"></i>
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
@ -104,7 +104,7 @@ type : 'UI Collection'
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="dropdown item">
More <i class="icon down triangle"></i>
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
@ -143,7 +143,7 @@ type : 'UI Collection'
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="dropdown item">
More <i class="icon down triangle"></i>
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>
@ -173,7 +173,7 @@ type : 'UI Collection'
<input class="ui input" type="text" placeholder="Search...">
</div>
<div class="dropdown item">
More <i class="icon down triangle"></i>
More <i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="icon edit"></i> Edit Profile</div>
<div class="item"><i class="icon globe"></i> Choose Language</div>

27
node/src/documents/modules/dropdown.html

@ -33,8 +33,8 @@ type : 'UI Module'
<h4 class="ui header">Dropdown</h4>
<p>The markup for a dropdown</p>
<div class="ui dropdown">
<i class="icon down triangle"></i>
Select
<i class="icon dropdown"></i>
<div class="menu">
<div class="item"><i class="edit icon"></i>Edit</div>
<div class="item"><i class="delete icon"></i>Remove</div>
@ -62,7 +62,7 @@ type : 'UI Module'
<div class="ui teal buttons">
<div class="ui button">Save</div>
<div class="ui teal dropdown icon button">
<i class="down triangle icon"></i>
<i class="dropdown 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>
@ -71,6 +71,27 @@ type : 'UI Module'
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Menu Dropdown</h4>
<p>A button can be formatted with a dropdown beside it</p>
<div class="ui compact purple inverted menu">
<a class="active item">
<i class="icon home"></i> Home
</a>
<a class="ui dynamic dropdown item">
<i class="icon mail"></i> Messages <i class="dropdown icon"></i>
<div class="menu">
<div class="item"><i class="mail icon"></i>Inbox</div>
<div class="item"><i class="book icon"></i>Archive</div>
</div>
</a>
<a class="item">
<i class="icon community"></i> Browse
</a>
</div>
</div>
<div class="example">
<h4 class="ui header">Select</h4>
@ -90,7 +111,7 @@ type : 'UI Module'
<div class="field">
<label>Gender</label>
<div class="ui dropdown selection">
<i class="icon down triangle"></i>
<i class="icon dropdown"></i>
Male
<div class="menu">
<div class="item">Male</div>

10
node/src/files/components/semantic/elements/icons.css

@ -536,18 +536,24 @@ i.icon.zoom.out:before {
/*--------------
Spacing Fix
---------------*/
/* dropdown arrows are to the right */
i.dropdown.icon {
margin: 0em 0em 0em 0.5em;
}
/* stars are usually consecutive */
i.icon.star {
width: auto;
margin: 0em;
vertical-align: middle;
}
/* left side icons */
i.icon.left,
i.icon.left,
i.icon.left {
width: auto;
margin: 0em 0.5em 0em 0em;
}
/* right side icons */
i.icon.up,
i.icon.down,
i.icon.right {
@ -562,6 +568,10 @@ i.icon.delete:before {
content: '\e80d';
}
/* '' */
i.icon.dropdown:before {
content: '\25be';
}
/* '▾' */
i.icon.help:before {
content: '\e704';
}

66
node/src/files/components/semantic/modules/dropdown.css

@ -18,9 +18,6 @@
line-height: 1;
white-space: nowrap;
}
.ui.dropdown > .icon.down.triangle {
float: right;
}
.ui.dropdown .menu {
position: absolute;
display: none;
@ -42,11 +39,11 @@
}
/* Flyout Direction */
.ui.dropdown .menu {
left: 1px;
left: 0px;
}
.ui.dropdown:last-child .menu {
left: auto;
right: 1px;
right: 0px;
}
.ui.dropdown .menu .item {
cursor: pointer;
@ -68,40 +65,63 @@
.ui.dropdown .menu .item:first-child {
border-top: none;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em !important;
border-bottom-right-radius: 0em !important;
}
.ui.dropdown .menu .item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.ui.dropdown .menu .active.item {
font-weight: bold;
}
/*******************************
Variations
*******************************/
/*--------------
Selection
---------------*/
.ui.selection.dropdown {
cursor: pointer;
display: inline-block;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.5em 1em;
line-height: 1.33;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.selection.dropdown > .icon {
.ui.selection.dropdown > .dropdown.icon {
float: right;
margin: 0.2em 0.2em 0.2em 0.5em;
margin: 0.2em 0em 0.2em 0.5em;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
.ui.selection.dropdown,
.ui.selection.dropdown .menu {
-webkit-transition: box-shadow 0.2s ease-out;
-moz-transition: box-shadow 0.2s ease-out;
-o-transition: box-shadow 0.2s ease-out;
-ms-transition: box-shadow 0.2s ease-out;
transition: box-shadow 0.2s ease-out;
}
.ui.selection.dropdown .menu {
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
box-shadow: 0px 1px 0px 1px #EEEEEE;
}
.ui.selection.dropdown:hover,
.ui.selection.dropdown.hover {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.dropdown .menu .item:hover {
background-color: rgba(0, 0, 0, 0.02);
.ui.dropdown:hover .menu {
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
box-shadow: 0px 1px 0px 1px #D3D3D3;
}
.ui.dropdown .menu .active.item {
font-weight: bold;
}
/*******************************
Variations
*******************************/

2
node/src/files/components/semantic/modules/dropdown.js

@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
module.intent.bind();
}
$menu
.show()
.fadeIn(200)
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();

8
src/elements/icons.less

@ -197,6 +197,11 @@ i.icon.zoom.out:before { content: '\e751'; } /* '' */
Spacing Fix
---------------*/
/* dropdown arrows are to the right */
i.dropdown.icon {
margin: 0em 0em 0em 0.5em;
}
/* stars are usually consecutive */
i.icon.star {
width: auto;
@ -204,6 +209,7 @@ i.icon.star {
vertical-align: middle;
}
/* left side icons */
i.icon.left,
i.icon.left,
i.icon.left {
@ -211,6 +217,7 @@ i.icon.left {
margin: 0em 0.5em 0em 0em;
}
/* right side icons */
i.icon.up,
i.icon.down,
i.icon.right {
@ -224,6 +231,7 @@ i.icon.right {
/* aliases for convenience */
i.icon.delete:before { content: '\e80d'; } /* '' */
i.icon.dropdown:before { content: '\25be'; } /* '▾' */
i.icon.help:before { content: '\e704'; } /* '' */
i.icon.info:before { content: '\e705'; } /* '' */

2
src/modules/dropdown.js

@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
module.intent.bind();
}
$menu
.show()
.fadeIn(200)
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();

80
src/modules/dropdown.less

@ -22,9 +22,6 @@
line-height: 1;
white-space: nowrap;
}
.ui.dropdown > .icon.down.triangle {
float: right;
}
.ui.dropdown .menu {
position: absolute;
@ -32,7 +29,7 @@
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,
@ -65,11 +62,11 @@
/* Flyout Direction */
.ui.dropdown .menu {
left: 1px;
left: 0px;
}
.ui.dropdown:last-child .menu {
left: auto;
right: 1px;
right: 0px;
}
.ui.dropdown .menu .item {
@ -97,51 +94,76 @@
border-top: none;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em !important;
border-bottom-right-radius: 0em !important;
}
.ui.dropdown .menu .item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.ui.dropdown .menu .active.item {
font-weight: bold;
}
/*******************************
Variations
*******************************/
/*--------------
Selection
---------------*/
.ui.selection.dropdown {
cursor: pointer;
display: inline-block;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.5em 1em;
line-height: 1.33;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.selection.dropdown > .icon {
.ui.selection.dropdown > .dropdown.icon {
float: right;
margin: 0.2em 0.2em 0.2em 0.5em;
margin: 0.2em 0em 0.2em 0.5em;
}
/*******************************
States
*******************************/
.ui.dropdown.visible {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
.ui.selection.dropdown,
.ui.selection.dropdown .menu {
-webkit-transition: box-shadow 0.2s ease-out;
-moz-transition: box-shadow 0.2s ease-out;
-o-transition: box-shadow 0.2s ease-out;
-ms-transition: box-shadow 0.2s ease-out;
transition: box-shadow 0.2s ease-out;
}
.ui.selection.dropdown .menu {
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
box-shadow: 0px 1px 0px 1px #EEEEEE;
}
.ui.selection.dropdown:hover,
.ui.selection.dropdown.hover {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px 1px 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
*******************************/
.ui.dropdown:hover .menu {
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
box-shadow: 0px 1px 0px 1px #D3D3D3;
}
Loading…
Cancel
Save