From d3eb647a95fe0e53c34424fc535c9628c2b4a412 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 29 May 2013 13:53:49 -0400 Subject: [PATCH] refactors icon sizing to allow for more variety Former-commit-id: 237085a2ae3fa468266cd8649cfc195904c4a4ca Former-commit-id: 727fb2156ee1c0314456370f0d5e0b6374515f1c --- build/minified/elements/icons.min.css | 2 +- build/packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/elements/icons.css | 6 +++--- node/src/documents/elements/icon.html | 10 +++++----- node/src/files/components/semantic/elements/icons.css | 6 +++--- src/elements/icons.less | 6 +++--- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/build/minified/elements/icons.min.css b/build/minified/elements/icons.min.css index d972e58d4..8a2c45e6f 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-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.rocket:before{font-family:"Custom Icons";content:"\f100"}i.icon.paint: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.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.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-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-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.rocket:before{font-family:"Custom Icons";content:"\f100"}i.icon.paint: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.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.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}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/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 875c0c89b..4799f6bab 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -8e025b37bfed179ee45b3d4f2aa8d4eff3897aa1 \ No newline at end of file +a8a842f7d7e51288ae9205d371c0a5bb995e4020 \ No newline at end of file diff --git a/build/uncompressed/elements/icons.css b/build/uncompressed/elements/icons.css index 0bf2370d3..88b58a6d7 100644 --- a/build/uncompressed/elements/icons.css +++ b/build/uncompressed/elements/icons.css @@ -757,17 +757,17 @@ i.icon { vertical-align: baseline; } i.large.icon { - font-size: 1.5em; + font-size: 3em; margin-right: 0.5em; vertical-align: middle; } i.huge.icon { - font-size: 2em; + font-size: 6em; margin-right: 0.75em; vertical-align: middle; } i.massive.icon { - font-size: 4em; + font-size: 12em; margin-right: 1em; vertical-align: middle; } diff --git a/node/src/documents/elements/icon.html b/node/src/documents/elements/icon.html index 4eb8e4657..54ce476db 100755 --- a/node/src/documents/elements/icon.html +++ b/node/src/documents/elements/icon.html @@ -237,15 +237,15 @@ type : 'UI Element'

Size

An icon can vary in size

- Users +
- Users +
- Users +
- Users +
- Users +
diff --git a/node/src/files/components/semantic/elements/icons.css b/node/src/files/components/semantic/elements/icons.css index 0bf2370d3..88b58a6d7 100644 --- a/node/src/files/components/semantic/elements/icons.css +++ b/node/src/files/components/semantic/elements/icons.css @@ -757,17 +757,17 @@ i.icon { vertical-align: baseline; } i.large.icon { - font-size: 1.5em; + font-size: 3em; margin-right: 0.5em; vertical-align: middle; } i.huge.icon { - font-size: 2em; + font-size: 6em; margin-right: 0.75em; vertical-align: middle; } i.massive.icon { - font-size: 4em; + font-size: 12em; margin-right: 1em; vertical-align: middle; } diff --git a/src/elements/icons.less b/src/elements/icons.less index 0de1e0d55..215ca1eb0 100755 --- a/src/elements/icons.less +++ b/src/elements/icons.less @@ -419,17 +419,17 @@ i.icon { vertical-align: baseline; } i.large.icon { - font-size: 1.5em; + font-size: 3em; margin-right: 0.5em; vertical-align: middle; } i.huge.icon { - font-size: 2em; + font-size: 6em; margin-right: 0.75em; vertical-align: middle; } i.massive.icon { - font-size: 4em; + font-size: 12em; margin-right: 1em; vertical-align: middle; }