From 459c5c70e839e07e854e8af690e2c138efe2fa07 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 25 May 2013 11:16:36 -0400 Subject: [PATCH] more dropdown examples, tweaks to code Former-commit-id: 7d972ce278351c10c99ca19d04ffda07a3efa27c Former-commit-id: 9d0c9a4c021df83dbfa813fbd23cdd02718f2017 --- build/minified/elements/icons.min.css | 2 +- build/minified/modules/dropdown.js | 2 +- build/minified/modules/dropdown.min.css | 2 +- build/minified/modules/dropdown.min.js | 2 +- build/packaged/modules/dropdown.js | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/elements/icons.css | 10 +++ build/uncompressed/modules/dropdown.css | 66 +++++++++------ build/uncompressed/modules/dropdown.js | 2 +- node/src/documents/collections/menu.html | 8 +- node/src/documents/modules/dropdown.html | 27 ++++++- .../components/semantic/elements/icons.css | 10 +++ .../components/semantic/modules/dropdown.css | 66 +++++++++------ .../components/semantic/modules/dropdown.js | 2 +- src/elements/icons.less | 8 ++ src/modules/dropdown.js | 2 +- src/modules/dropdown.less | 80 ++++++++++++------- 18 files changed, 203 insertions(+), 92 deletions(-) diff --git a/build/minified/elements/icons.min.css b/build/minified/elements/icons.min.css index 175911b17..b72ec9e69 100644 --- a/build/minified/elements/icons.min.css +++ b/build/minified/elements/icons.min.css @@ -1 +1 @@ -@font-face{font-family:Icons;src:url(../fonts/icons.eot);src:url(../fonts/icons.eot?#iefix) format('embedded-opentype'),url(../fonts/icons.woff) format('woff'),url(../fonts/icons.ttf) format('truetype'),url(../fonts/icons.svg#icons) format('svg');font-weight:400;font-style:normal}i.icon{display:inline-block;opacity:.75;margin:0 .25em 0 0;width:1.23em;height:1em;font-family:Icons;font-style:normal;line-height:1;font-weight:400;text-decoration:inherit;text-align:center;speak:none;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased}i.icon.circle.attention:before{content:'\2757'}i.icon.circle.help:before{content:'\e704'}i.icon.circle.info:before{content:'\e705'}i.icon.add:before{content:'\2795'}i.icon.chart:before{content:'📈'}i.icon.chart.bar:before{content:'📊'}i.icon.chart.pie:before{content:'\e7a2'}i.icon.resize.full:before{content:'\e744'}i.icon.resize.horizontal:before{content:'\2b0d'}i.icon.resize.small:before{content:'\e746'}i.icon.resize.vertical:before{content:'\2b0c'}i.icon.down:before{content:'\2193'}i.icon.down.triangle:before{content:'\25be'}i.icon.down.arrow:before{content:'\e75c'}i.icon.left:before{content:'\2190'}i.icon.left.triangle:before{content:'\25c2'}i.icon.left.arrow:before{content:'\e75d'}i.icon.right:before{content:'\2192'}i.icon.right.triangle:before{content:'\25b8'}i.icon.right.arrow:before{content:'\e75e'}i.icon.up:before{content:'\2191'}i.icon.up.triangle:before{content:'\25b4'}i.icon.up.arrow:before{content:'\e75f'}i.icon.folder:before{content:'\e810'}i.icon.open.folder:before{content:'📂'}i.icon.globe:before{content:'𝌍'}i.icon.desk.globe:before{content:'🌐'}i.icon.star:before{content:'\e801'}i.icon.star.empty:before{content:'\e800'}i.icon.star.half:before{content:'\e701'}i.icon.lock:before{content:'🔒'}i.icon.unlock:before{content:'🔓'}i.icon.layout.grid:before{content:'\e80c'}i.icon.layout.block:before{content:'\e708'}i.icon.layout.list:before{content:'\e80b'}i.icon.heart.empty:before{content:'\2661'}i.icon.heart:before{content:'\2665'}i.icon.asterisk:before{content:'\2731'}i.icon.attachment:before{content:'📎'}i.icon.attention:before{content:'\26a0'}i.icon.trophy:before{content:'🏉'}i.icon.barcode:before{content:'\e792'}i.icon.cart:before{content:'\e813'}i.icon.block:before{content:'🚫'}i.icon.book:before{content:'📖'}i.icon.bookmark:before{content:'🔖'}i.icon.calendar:before{content:'📅'}i.icon.cancel:before{content:'\2716'}i.icon.close:before{content:'\e80d'}i.icon.color:before{content:'\e794'}i.icon.chat:before{content:'\e720'}i.icon.check:before{content:'\2611'}i.icon.time:before{content:'🕔'}i.icon.cloud:before{content:'\2601'}i.icon.code:before{content:'\e714'}i.icon.email:before{content:'\40'}i.icon.settings:before{content:'\26ef'}i.icon.setting:before{content:'\2699'}i.icon.comment:before{content:'\e802'}i.icon.clockwise.counter:before{content:'\27f2'}i.icon.clockwise:before{content:'\27f3'}i.icon.direction:before{content:'\27a2'}i.icon.doc:before{content:'📄'}i.icon.docs:before{content:'\e736'}i.icon.dollar:before{content:'💵'}i.icon.paint:before{content:'\e7b5'}i.icon.edit:before{content:'\270d'}i.icon.eject:before{content:'\2ecf'}i.icon.export:before{content:'\e715'}i.icon.hide:before{content:'\e80f'}i.icon.unhide:before{content:'\e70b'}i.icon.facebook:before{content:'\f301'}i.icon.fast-forward:before{content:'\e804'}i.icon.fire:before{content:'🔥'}i.icon.flag:before{content:'\2691'}i.icon.lightning:before{content:'\26a1'}i.icon.lab:before{content:'\68'}i.icon.flight:before{content:'\2708'}i.icon.forward:before{content:'\27a6'}i.icon.gift:before{content:'🎁'}i.icon.github:before{content:'\f308'}i.icon.globe:before{content:'\e817'}i.icon.headphones:before{content:'🎧'}i.icon.question:before{content:'\2753'}i.icon.home:before{content:'\2302'}i.icon.i:before{content:'\2139'}i.icon.idea:before{content:'💡'}i.icon.open:before{content:'🔗'}i.icon.content:before{content:'\e782'}i.icon.location:before{content:'\e724'}i.icon.mail:before{content:'\2709'}i.icon.mic:before{content:'🎤'}i.icon.minus:before{content:'\2d'}i.icon.money:before{content:'💰'}i.icon.off:before{content:'\e78e'}i.icon.pause:before{content:'\e808'}i.icon.photos:before{content:'\e812'}i.icon.photo:before{content:'🌄'}i.icon.pin:before{content:'📌'}i.icon.play:before{content:'\e809'}i.icon.plus:before{content:'\2b'}i.icon.print:before{content:'\e716'}i.icon.rss:before{content:'\e73a'}i.icon.search:before{content:'🔍'}i.icon.shuffle:before{content:'\e803'}i.icon.square:before{content:'\e807'}i.icon.tag:before{content:'\e80a'}i.icon.tags:before{content:'\e70d'}i.icon.terminal:before{content:'\e7ac'}i.icon.thumbs.down:before{content:'👎'}i.icon.thumbs.up:before{content:'👍'}i.icon.to-end:before{content:'\e806'}i.icon.to-start:before{content:'\e805'}i.icon.top.list:before{content:'🏆'}i.icon.trash:before{content:'\e729'}i.icon.twitter:before{content:'\f303'}i.icon.upload:before{content:'\e711'}i.icon.user.add:before{content:'\e700'}i.icon.user:before{content:'👤'}i.icon.community:before{content:'\e814'}i.icon.users:before{content:'👥'}i.icon.id:before{content:'\e722'}i.icon.zoom.in:before{content:'\e750'}i.icon.zoom.out:before{content:'\e751'}i.icon.star{width:auto;margin:0;vertical-align:middle}i.icon.left,i.icon.left,i.icon.left{width:auto;margin:0 .5em 0 0}i.icon.up,i.icon.down,i.icon.right{width:auto;margin:0 0 0 .5em}i.icon.delete:before{content:'\e80d'}i.icon.help:before{content:'\e704'}i.icon.info:before{content:'\e705'}i.icon.error:before{content:'\e80d'}i.icon.dislike:before{content:'\2661'}i.icon.like:before{content:'\2665'}i.icon.eye:before{content:'\e80f'}i.icon.eye.hidden:before{content:'\e70b'}i.icon.date:before{content:'📅'}i.icon.hover{opacity:1}i.icon.active{opacity:1}i.icon.disabled{opacity:.3}i.link.icon{cursor:pointer;opacity:.7;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.link.icon:hover{opacity:1}i.circular.icon{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;padding:.48em .4em .32em!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:1.23em;height:1.23em}i.circular.icon:before{vertical-align:middle}i.circular.inverted.icon{border:0}i.inverted.icon{background-color:#222;color:#FFF;padding:.5em}i.blue.icon{color:#6ECFF5!important}i.black.icon{color:#5C6166!important}i.green.icon{color:#A1CF64!important}i.red.icon{color:#EF4D6D!important}i.purple.icon{color:#564F8A!important}i.teal.icon{color:#00B5AD!important}i.inverted.black.icon{background-color:#5C6166!important;color:#FFF!important}i.inverted.blue.icon{background-color:#6ECFF5!important;color:#FFF!important}i.inverted.green.icon{background-color:#A1CF64!important;color:#FFF!important}i.inverted.red.icon{background-color:#EF4D6D!important;color:#FFF!important}i.inverted.purple.icon{background-color:#564F8A!important;color:#FFF!important}i.inverted.teal.icon{background-color:#00B5AD!important;color:#FFF!important}i.small.icon{font-size:.875em;vertical-align:top}i.icon{font-size:1em;vertical-align:baseline}i.large.icon{font-size:1.5em;margin-right:.5em;vertical-align:middle}i.huge.icon{font-size:2em;margin-right:.75em;vertical-align:middle}i.massive.icon{font-size:4em;margin-right:1em;vertical-align:middle}i.emphasized.icon{opacity:1;padding:.5em;box-shadow:0 0 0 1px rgba(0,0,0,.1);vertical-align:middle} \ No newline at end of file +@font-face{font-family:Icons;src:url(../fonts/icons.eot);src:url(../fonts/icons.eot?#iefix) format('embedded-opentype'),url(../fonts/icons.woff) format('woff'),url(../fonts/icons.ttf) format('truetype'),url(../fonts/icons.svg#icons) format('svg');font-weight:400;font-style:normal}i.icon{display:inline-block;opacity:.75;margin:0 .25em 0 0;width:1.23em;height:1em;font-family:Icons;font-style:normal;line-height:1;font-weight:400;text-decoration:inherit;text-align:center;speak:none;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased}i.icon.circle.attention:before{content:'\2757'}i.icon.circle.help:before{content:'\e704'}i.icon.circle.info:before{content:'\e705'}i.icon.add:before{content:'\2795'}i.icon.chart:before{content:'📈'}i.icon.chart.bar:before{content:'📊'}i.icon.chart.pie:before{content:'\e7a2'}i.icon.resize.full:before{content:'\e744'}i.icon.resize.horizontal:before{content:'\2b0d'}i.icon.resize.small:before{content:'\e746'}i.icon.resize.vertical:before{content:'\2b0c'}i.icon.down:before{content:'\2193'}i.icon.down.triangle:before{content:'\25be'}i.icon.down.arrow:before{content:'\e75c'}i.icon.left:before{content:'\2190'}i.icon.left.triangle:before{content:'\25c2'}i.icon.left.arrow:before{content:'\e75d'}i.icon.right:before{content:'\2192'}i.icon.right.triangle:before{content:'\25b8'}i.icon.right.arrow:before{content:'\e75e'}i.icon.up:before{content:'\2191'}i.icon.up.triangle:before{content:'\25b4'}i.icon.up.arrow:before{content:'\e75f'}i.icon.folder:before{content:'\e810'}i.icon.open.folder:before{content:'📂'}i.icon.globe:before{content:'𝌍'}i.icon.desk.globe:before{content:'🌐'}i.icon.star:before{content:'\e801'}i.icon.star.empty:before{content:'\e800'}i.icon.star.half:before{content:'\e701'}i.icon.lock:before{content:'🔒'}i.icon.unlock:before{content:'🔓'}i.icon.layout.grid:before{content:'\e80c'}i.icon.layout.block:before{content:'\e708'}i.icon.layout.list:before{content:'\e80b'}i.icon.heart.empty:before{content:'\2661'}i.icon.heart:before{content:'\2665'}i.icon.asterisk:before{content:'\2731'}i.icon.attachment:before{content:'📎'}i.icon.attention:before{content:'\26a0'}i.icon.trophy:before{content:'🏉'}i.icon.barcode:before{content:'\e792'}i.icon.cart:before{content:'\e813'}i.icon.block:before{content:'🚫'}i.icon.book:before{content:'📖'}i.icon.bookmark:before{content:'🔖'}i.icon.calendar:before{content:'📅'}i.icon.cancel:before{content:'\2716'}i.icon.close:before{content:'\e80d'}i.icon.color:before{content:'\e794'}i.icon.chat:before{content:'\e720'}i.icon.check:before{content:'\2611'}i.icon.time:before{content:'🕔'}i.icon.cloud:before{content:'\2601'}i.icon.code:before{content:'\e714'}i.icon.email:before{content:'\40'}i.icon.settings:before{content:'\26ef'}i.icon.setting:before{content:'\2699'}i.icon.comment:before{content:'\e802'}i.icon.clockwise.counter:before{content:'\27f2'}i.icon.clockwise:before{content:'\27f3'}i.icon.direction:before{content:'\27a2'}i.icon.doc:before{content:'📄'}i.icon.docs:before{content:'\e736'}i.icon.dollar:before{content:'💵'}i.icon.paint:before{content:'\e7b5'}i.icon.edit:before{content:'\270d'}i.icon.eject:before{content:'\2ecf'}i.icon.export:before{content:'\e715'}i.icon.hide:before{content:'\e80f'}i.icon.unhide:before{content:'\e70b'}i.icon.facebook:before{content:'\f301'}i.icon.fast-forward:before{content:'\e804'}i.icon.fire:before{content:'🔥'}i.icon.flag:before{content:'\2691'}i.icon.lightning:before{content:'\26a1'}i.icon.lab:before{content:'\68'}i.icon.flight:before{content:'\2708'}i.icon.forward:before{content:'\27a6'}i.icon.gift:before{content:'🎁'}i.icon.github:before{content:'\f308'}i.icon.globe:before{content:'\e817'}i.icon.headphones:before{content:'🎧'}i.icon.question:before{content:'\2753'}i.icon.home:before{content:'\2302'}i.icon.i:before{content:'\2139'}i.icon.idea:before{content:'💡'}i.icon.open:before{content:'🔗'}i.icon.content:before{content:'\e782'}i.icon.location:before{content:'\e724'}i.icon.mail:before{content:'\2709'}i.icon.mic:before{content:'🎤'}i.icon.minus:before{content:'\2d'}i.icon.money:before{content:'💰'}i.icon.off:before{content:'\e78e'}i.icon.pause:before{content:'\e808'}i.icon.photos:before{content:'\e812'}i.icon.photo:before{content:'🌄'}i.icon.pin:before{content:'📌'}i.icon.play:before{content:'\e809'}i.icon.plus:before{content:'\2b'}i.icon.print:before{content:'\e716'}i.icon.rss:before{content:'\e73a'}i.icon.search:before{content:'🔍'}i.icon.shuffle:before{content:'\e803'}i.icon.square:before{content:'\e807'}i.icon.tag:before{content:'\e80a'}i.icon.tags:before{content:'\e70d'}i.icon.terminal:before{content:'\e7ac'}i.icon.thumbs.down:before{content:'👎'}i.icon.thumbs.up:before{content:'👍'}i.icon.to-end:before{content:'\e806'}i.icon.to-start:before{content:'\e805'}i.icon.top.list:before{content:'🏆'}i.icon.trash:before{content:'\e729'}i.icon.twitter:before{content:'\f303'}i.icon.upload:before{content:'\e711'}i.icon.user.add:before{content:'\e700'}i.icon.user:before{content:'👤'}i.icon.community:before{content:'\e814'}i.icon.users:before{content:'👥'}i.icon.id:before{content:'\e722'}i.icon.zoom.in:before{content:'\e750'}i.icon.zoom.out:before{content:'\e751'}i.dropdown.icon{margin:0 0 0 .5em}i.icon.star{width:auto;margin:0;vertical-align:middle}i.icon.left,i.icon.left,i.icon.left{width:auto;margin:0 .5em 0 0}i.icon.up,i.icon.down,i.icon.right{width:auto;margin:0 0 0 .5em}i.icon.delete:before{content:'\e80d'}i.icon.dropdown:before{content:'\25be'}i.icon.help:before{content:'\e704'}i.icon.info:before{content:'\e705'}i.icon.error:before{content:'\e80d'}i.icon.dislike:before{content:'\2661'}i.icon.like:before{content:'\2665'}i.icon.eye:before{content:'\e80f'}i.icon.eye.hidden:before{content:'\e70b'}i.icon.date:before{content:'📅'}i.icon.hover{opacity:1}i.icon.active{opacity:1}i.icon.disabled{opacity:.3}i.link.icon{cursor:pointer;opacity:.7;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.link.icon:hover{opacity:1}i.circular.icon{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;padding:.48em .4em .32em!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:1.23em;height:1.23em}i.circular.icon:before{vertical-align:middle}i.circular.inverted.icon{border:0}i.inverted.icon{background-color:#222;color:#FFF;padding:.5em}i.blue.icon{color:#6ECFF5!important}i.black.icon{color:#5C6166!important}i.green.icon{color:#A1CF64!important}i.red.icon{color:#EF4D6D!important}i.purple.icon{color:#564F8A!important}i.teal.icon{color:#00B5AD!important}i.inverted.black.icon{background-color:#5C6166!important;color:#FFF!important}i.inverted.blue.icon{background-color:#6ECFF5!important;color:#FFF!important}i.inverted.green.icon{background-color:#A1CF64!important;color:#FFF!important}i.inverted.red.icon{background-color:#EF4D6D!important;color:#FFF!important}i.inverted.purple.icon{background-color:#564F8A!important;color:#FFF!important}i.inverted.teal.icon{background-color:#00B5AD!important;color:#FFF!important}i.small.icon{font-size:.875em;vertical-align:top}i.icon{font-size:1em;vertical-align:baseline}i.large.icon{font-size:1.5em;margin-right:.5em;vertical-align:middle}i.huge.icon{font-size:2em;margin-right:.75em;vertical-align:middle}i.massive.icon{font-size:4em;margin-right:1em;vertical-align:middle}i.emphasized.icon{opacity:1;padding:.5em;box-shadow:0 0 0 1px rgba(0,0,0,.1);vertical-align:middle} \ No newline at end of file diff --git a/build/minified/modules/dropdown.js b/build/minified/modules/dropdown.js index dc881f19a..f79de24e0 100644 --- a/build/minified/modules/dropdown.js +++ b/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())(); diff --git a/build/minified/modules/dropdown.min.css b/build/minified/modules/dropdown.min.css index 05de8730b..55aae6ade 100644 --- a/build/minified/modules/dropdown.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/minified/modules/dropdown.min.js b/build/minified/modules/dropdown.min.js index 6ee8457c6..9b4259fe7 100644 --- a/build/minified/modules/dropdown.min.js +++ b/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); \ No newline at end of file +(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); \ No newline at end of file diff --git a/build/packaged/modules/dropdown.js b/build/packaged/modules/dropdown.js index dc881f19a..f79de24e0 100644 --- a/build/packaged/modules/dropdown.js +++ b/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())(); diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index f56eb5602..383c0d8ac 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -6f6d8b8a048772153ed5ae4c6bf9eeb6babd2f89 \ No newline at end of file +7e389a23fd56822486becc8eb9b458ce25a6ac21 \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index 434f5782a..49f1c6e7f 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -bddb0bf84b67f6686b021e2666b3263a4af85f41 \ No newline at end of file +617c639c97cf389d48dcb0b7907fc39d66d47c2d \ No newline at end of file diff --git a/build/uncompressed/elements/icons.css b/build/uncompressed/elements/icons.css index 04e2384b9..37d7fed1a 100644 --- a/build/uncompressed/elements/icons.css +++ b/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'; } diff --git a/build/uncompressed/modules/dropdown.css b/build/uncompressed/modules/dropdown.css index 4b0310249..23f0f5df8 100644 --- a/build/uncompressed/modules/dropdown.css +++ b/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 -*******************************/ \ No newline at end of file diff --git a/build/uncompressed/modules/dropdown.js b/build/uncompressed/modules/dropdown.js index dc881f19a..f79de24e0 100644 --- a/build/uncompressed/modules/dropdown.js +++ b/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())(); diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 63afd1046..aa338ff15 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -42,7 +42,7 @@ type : 'UI Collection'
- More + More
Edit Profile
Choose Language
@@ -104,7 +104,7 @@ type : 'UI Collection'
- More + More
Edit Profile
Choose Language
@@ -143,7 +143,7 @@ type : 'UI Collection'
- More + More
Edit Profile
Choose Language
@@ -173,7 +173,7 @@ type : 'UI Collection'
- More + More
Edit Profile
Choose Language
diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html index c4fe13ceb..a1a74f5ef 100644 --- a/node/src/documents/modules/dropdown.html +++ b/node/src/documents/modules/dropdown.html @@ -33,8 +33,8 @@ type : 'UI Module'

Dropdown

The markup for a dropdown

- Select +
Edit
Remove
@@ -62,7 +62,7 @@ type : 'UI Module'
Save
- +
Edit
Remove
@@ -71,6 +71,27 @@ type : 'UI Module'
+ +
+

Menu Dropdown

+

A button can be formatted with a dropdown beside it

+
+ + Home + + + Messages +
+
Inbox
+
Archive
+
+ + + Browse + +
+
+

Select

@@ -90,7 +111,7 @@ type : 'UI Module'
- + Male
Male
diff --git a/node/src/files/components/semantic/elements/icons.css b/node/src/files/components/semantic/elements/icons.css index 04e2384b9..37d7fed1a 100644 --- a/node/src/files/components/semantic/elements/icons.css +++ b/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'; } diff --git a/node/src/files/components/semantic/modules/dropdown.css b/node/src/files/components/semantic/modules/dropdown.css index 4b0310249..23f0f5df8 100644 --- a/node/src/files/components/semantic/modules/dropdown.css +++ b/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 -*******************************/ \ No newline at end of file diff --git a/node/src/files/components/semantic/modules/dropdown.js b/node/src/files/components/semantic/modules/dropdown.js index dc881f19a..f79de24e0 100644 --- a/node/src/files/components/semantic/modules/dropdown.js +++ b/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())(); diff --git a/src/elements/icons.less b/src/elements/icons.less index f5b57d5b0..00ef7b70d 100755 --- a/src/elements/icons.less +++ b/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'; } /* '' */ diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index dc881f19a..f79de24e0 100644 --- a/src/modules/dropdown.js +++ b/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())(); diff --git a/src/modules/dropdown.less b/src/modules/dropdown.less index 541249234..97ec75538 100644 --- a/src/modules/dropdown.less +++ b/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 -*******************************/ \ No newline at end of file +.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; +} \ No newline at end of file