From 5fd4ef9dba970f0fa3ebb09f97f42e1a1a857c9c Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 29 May 2013 19:29:56 -0400 Subject: [PATCH] adds more examples, fixes to input Former-commit-id: 6ce32ae3f312018798135ad52f9af17771c7d192 Former-commit-id: 3784993943013225c2bbfdb6ec267deb8bbf8fac --- build/minified/elements/icons.min.css | 2 +- build/minified/elements/input.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/elements/icons.css | 1 + build/uncompressed/elements/input.css | 9 +++++--- node/src/documents/elements/input.html | 22 +++++++++++++++++-- .../components/semantic/elements/icons.css | 1 + .../components/semantic/elements/input.css | 9 +++++--- src/elements/icons.less | 1 + src/elements/input.less | 9 +++++--- 10 files changed, 44 insertions(+), 14 deletions(-) diff --git a/build/minified/elements/icons.min.css b/build/minified/elements/icons.min.css index 07c0d3847..a6affc5ae 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-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}@font-face{font-family:'Custom Icons';src:url(../fonts/custom-icons.eot);src:url(../fonts/custom-icons.eot?#iefix) format('embedded-opentype'),url(../fonts/custom-icons.woff) format('woff'),url(../fonts/custom-icons.ttf) format('truetype'),url(../fonts/custom-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}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-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-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.cube:before{content:'\e807'}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.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.rocket:before{font-family:"Custom Icons";content:"\f100"}i.icon.brush:before{font-family:"Custom Icons";content:"\f101"}i.icon.price:before{font-family:"Custom Icons";content:"\f102"}i.icon.tools:before{font-family:"Custom Icons";content:"\f103"}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.emphasized.icon{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;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}i.square.icon{padding:.5em;-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;vertical-align:middle}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:3em;margin-right:.5em;vertical-align:middle}i.huge.icon{font-size:6em;margin-right:.75em;vertical-align:middle}i.massive.icon{font-size:12em;margin-right:1em;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-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}@font-face{font-family:'Custom Icons';src:url(../fonts/custom-icons.eot);src:url(../fonts/custom-icons.eot?#iefix) format('embedded-opentype'),url(../fonts/custom-icons.woff) format('woff'),url(../fonts/custom-icons.ttf) format('truetype'),url(../fonts/custom-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}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-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-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.cube:before{content:'\e807'}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.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.rocket:before{font-family:"Custom Icons";content:"\f100"}i.icon.brush:before{font-family:"Custom Icons";content:"\f101"}i.icon.price:before{font-family:"Custom Icons";content:"\f102"}i.icon.tools:before{font-family:"Custom Icons";content:"\f103"}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.search,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.emphasized.icon{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;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}i.square.icon{padding:.5em;-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;vertical-align:middle}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:3em;margin-right:.5em;vertical-align:middle}i.huge.icon{font-size:6em;margin-right:.75em;vertical-align:middle}i.massive.icon{font-size:12em;margin-right:1em;vertical-align:middle} \ No newline at end of file diff --git a/build/minified/elements/input.min.css b/build/minified/elements/input.min.css index 49023f38a..9e5813257 100644 --- a/build/minified/elements/input.min.css +++ b/build/minified/elements/input.min.css @@ -1 +1 @@ -.ui.input{display:inline-block;position:relative}.ui.input input{font-family:"Helvetica Neue",Helvetica,Arial;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.icon.input .icon{position:absolute;top:1px;left:1px;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.47em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-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}.ui.icon.input input{padding-left:4em;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em}.ui.action.input .button{position:absolute;top:0;left:100%;margin:0 0 0 -1px;min-height:3.1em;padding:.92em!important;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset} \ No newline at end of file +.ui.input{display:inline-block;position:relative}.ui.input input{font-family:"Helvetica Neue",Helvetica,Arial;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.icon.input .icon{position:absolute;top:1px;left:1px;margin:0;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.5em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-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}.ui.icon.input input{padding-left:4em;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em}.ui.action.input .button{position:absolute;top:0;left:100%;opacity:.8;margin:0 0 0 -1px;line-height:1.26;padding:.92em 1.3em!important;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{opacity:1;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index ebade2e76..b949d274d 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -0f04e268d6527b0d72587e9eb09c547493ae1194 \ No newline at end of file +a079bea61e4acfb6793945add9c5e58c381f6133 \ No newline at end of file diff --git a/build/uncompressed/elements/icons.css b/build/uncompressed/elements/icons.css index 0c644725c..d984d0af8 100644 --- a/build/uncompressed/elements/icons.css +++ b/build/uncompressed/elements/icons.css @@ -590,6 +590,7 @@ i.icon.left { margin: 0em 0.5em 0em 0em; } /* right side icons */ +i.icon.search, i.icon.up, i.icon.down, i.icon.right { diff --git a/build/uncompressed/elements/input.css b/build/uncompressed/elements/input.css index 4b409abfd..a2ee3ca37 100644 --- a/build/uncompressed/elements/input.css +++ b/build/uncompressed/elements/input.css @@ -109,10 +109,11 @@ position: absolute; top: 1px; left: 1px; + margin: 0em; border-right: 1px solid rgba(0, 0, 0, 0.1); background-color: #E8E8E8; width: 2.5em; - height: 2.47em; + height: 2.5em; padding-top: 0.75em; text-align: center; -webkit-border-radius: 0.2em 0em 0em 0.2em; @@ -156,9 +157,10 @@ position: absolute; top: 0em; left: 100%; + opacity: 0.8; margin: 0em 0em 0em -1px; - min-height: 3.1em; - padding: 0.92em !important; + line-height: 1.26; + padding: 0.92em 1.3em !important; border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -172,6 +174,7 @@ border-bottom-right-radius: 0px; } .ui.action.input input:focus ~ .button { + opacity: 1; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; diff --git a/node/src/documents/elements/input.html b/node/src/documents/elements/input.html index adafaa570..d9ce38b8b 100755 --- a/node/src/documents/elements/input.html +++ b/node/src/documents/elements/input.html @@ -35,6 +35,11 @@ type : 'UI Element'
+

+
+ + +

States

@@ -80,14 +85,27 @@ type : 'UI Element' +

+
+ +
+
New
+
+
+

Action

-

An input can be formatted so a user can trigger an action

+

An input can be formatted to alert the user to an action they may perform

+
+ +
Search
+
+

-
Go
+
Add users
diff --git a/node/src/files/components/semantic/elements/icons.css b/node/src/files/components/semantic/elements/icons.css index 0c644725c..d984d0af8 100644 --- a/node/src/files/components/semantic/elements/icons.css +++ b/node/src/files/components/semantic/elements/icons.css @@ -590,6 +590,7 @@ i.icon.left { margin: 0em 0.5em 0em 0em; } /* right side icons */ +i.icon.search, i.icon.up, i.icon.down, i.icon.right { diff --git a/node/src/files/components/semantic/elements/input.css b/node/src/files/components/semantic/elements/input.css index 4b409abfd..a2ee3ca37 100644 --- a/node/src/files/components/semantic/elements/input.css +++ b/node/src/files/components/semantic/elements/input.css @@ -109,10 +109,11 @@ position: absolute; top: 1px; left: 1px; + margin: 0em; border-right: 1px solid rgba(0, 0, 0, 0.1); background-color: #E8E8E8; width: 2.5em; - height: 2.47em; + height: 2.5em; padding-top: 0.75em; text-align: center; -webkit-border-radius: 0.2em 0em 0em 0.2em; @@ -156,9 +157,10 @@ position: absolute; top: 0em; left: 100%; + opacity: 0.8; margin: 0em 0em 0em -1px; - min-height: 3.1em; - padding: 0.92em !important; + line-height: 1.26; + padding: 0.92em 1.3em !important; border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -172,6 +174,7 @@ border-bottom-right-radius: 0px; } .ui.action.input input:focus ~ .button { + opacity: 1; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; diff --git a/src/elements/icons.less b/src/elements/icons.less index 2f83fbcac..50c8b85f9 100755 --- a/src/elements/icons.less +++ b/src/elements/icons.less @@ -254,6 +254,7 @@ i.icon.left { } /* right side icons */ +i.icon.search, i.icon.up, i.icon.down, i.icon.right { diff --git a/src/elements/input.less b/src/elements/input.less index ba97d461e..15017188f 100755 --- a/src/elements/input.less +++ b/src/elements/input.less @@ -158,11 +158,12 @@ top: 1px; left: 1px; + margin: 0em; border-right: 1px solid rgba(0, 0, 0, 0.1); background-color: #E8E8E8; width: 2.5em; - height: 2.47em; + height: 2.5em; padding-top: 0.75em; text-align: center; @@ -219,11 +220,12 @@ position: absolute; top: 0em; left: 100%; + opacity: 0.8; margin: 0em 0em 0em -1px; - min-height: 3.1em; - padding: 0.92em !important; + line-height: 1.26; + padding: 0.92em 1.3em !important; border-top-left-radius: 0px; border-bottom-left-radius: 0px; @@ -241,6 +243,7 @@ border-bottom-right-radius: 0px; } .ui.action.input input:focus ~ .button { + opacity: 1; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;