lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

days work on messages, icons, segments 

Former-commit-id: 0a49f91e68346fe29cf10f370a4993ddeadfb75d
Former-commit-id: 8817fff77808733618f76367dd392b725cdd91b4
beta
Jack Lukic 12 years ago
parent
6104ab5783
commit
5cd94a1ad1
13 changed files with 532 additions and 365 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/message.min.css
  2. 2
      build/minified/elements/icons.min.css
  3. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  4. 2
      build/uncompressed/collections/message.css
  5. 181
      build/uncompressed/elements/icons.css
  6. 17
      node/src/documents/collections/message.html
  7. 343
      node/src/documents/elements/icon.html
  8. 2
      node/src/files/components/semantic/collections/message.css
  9. 181
      node/src/files/components/semantic/elements/icons.css
  10. 24
      node/src/files/stylesheets/semantic.css
  11. 8
      node/src/layouts/default.html.eco
  12. 2
      src/collections/message.less
  13. 131
      src/elements/icons.less

2
build/minified/collections/message.min.css
View File

@ -1 +1 @@
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message :first-child{margin-top:0}.ui.message :last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2px}
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message :first-child{margin-top:0}.ui.message :last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}

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

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
5e96d167df16b96a5a743404cb9f9046d13c8074
18baf2216d41d73d40c246a400fabcba27d2cdc0

2
build/uncompressed/collections/message.css
View File

@ -214,5 +214,5 @@
font-size: 1.5em;
}
.ui.massive.message {
font-size: 2px;
font-size: 2em;
}

181
build/uncompressed/elements/icons.css
View File

@ -20,18 +20,17 @@
font-style: normal;
}
i.icon {
font-family: 'Icons';
display: inline-block;
opacity: 0.75;
margin: 0em 0.25em 0em 0em;
width: 1em;
height: 1em;
margin: 0em 0.25em 0em 0em;
font-family: 'Icons';
font-style: normal;
line-height: 1;
font-weight: normal;
text-decoration: inherit;
text-align: center;
vertical-align: baseline;
opacity: 0.75;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
@ -42,10 +41,6 @@ i.icon.circle.attention:before {
content: '\2757';
}
/* '❗' */
i.icon.circle.cancel:before {
content: '\2716';
}
/* '✖' */
i.icon.circle.help:before {
content: '\e704';
}
@ -54,7 +49,7 @@ i.icon.circle.info:before {
content: '\e705';
}
/* '' */
i.icon.circle.plus:before {
i.icon.add:before {
content: '\2795';
}
/* '➕' */
@ -166,7 +161,7 @@ i.icon.lock:before {
content: '🔒';
}
/* '\1f512' */
i.icon.lock.open:before {
i.icon.unlock:before {
content: '🔓';
}
/* '\1f513' */
@ -182,15 +177,19 @@ 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.at:before {
content: '\40';
}
/* '@' */
i.icon.attach:before {
i.icon.attachment:before {
content: '📎';
}
/* '\1f4ce' */
@ -198,7 +197,7 @@ i.icon.attention:before {
content: '\26a0';
}
/* '⚠' */
i.icon.award:before {
i.icon.trophy:before {
content: '🏉';
}
/* '\1f3c9' */
@ -206,11 +205,7 @@ i.icon.barcode:before {
content: '\e792';
}
/* '' */
i.icon.basket:before {
content: '\e73d';
}
/* '' */
i.icon.basket:before {
i.icon.cart:before {
content: '\e813';
}
/* '' */
@ -231,17 +226,17 @@ i.icon.calendar:before {
}
/* '\1f4c5' */
i.icon.cancel:before {
content: '\2716';
}
/* '✖' */
i.icon.close:before {
content: '\e80d';
}
/* '' */
i.icon.cancel:before {
content: '\2715';
}
/* '✕' */
i.icon.rewind:before {
content: '\27f2';
i.icon.color:before {
content: '\e794';
}
/* '⟲' */
/* '' */
i.icon.chat:before {
content: '\e720';
}
@ -250,7 +245,7 @@ i.icon.check:before {
content: '\2611';
}
/* '☑' */
i.icon.clock:before {
i.icon.time:before {
content: '🕔';
}
/* '\1f554' */
@ -262,6 +257,10 @@ i.icon.code:before {
content: '\e714';
}
/* '' */
i.icon.email:before {
content: '\40';
}
/* '@' */
i.icon.setting:before {
content: '\26ef';
}
@ -274,6 +273,10 @@ i.icon.comment:before {
content: '\e802';
}
/* '' */
i.icon.clockwise.counter:before {
content: '\27f2';
}
/* '⟲' */
i.icon.clockwise:before {
content: '\27f3';
}
@ -294,7 +297,7 @@ i.icon.dollar:before {
content: '💵';
}
/* '\1f4b5' */
i.icon.easel:before {
i.icon.paint:before {
content: '\e7b5';
}
/* '' */
@ -310,11 +313,11 @@ i.icon.export:before {
content: '\e715';
}
/* '' */
i.icon.eye:before {
i.icon.hide:before {
content: '\e80f';
}
/* '' */
i.icon.hidden.eye:before {
i.icon.unhide:before {
content: '\e70b';
}
/* '' */
@ -334,7 +337,7 @@ i.icon.flag:before {
content: '\2691';
}
/* '⚑' */
i.icon.flash:before {
i.icon.lightning:before {
content: '\26a1';
}
/* '⚡' */
@ -366,39 +369,27 @@ i.icon.headphones:before {
content: '🎧';
}
/* '\1f3a7' */
i.icon.heart-empty:before {
content: '\2661';
}
/* '♡' */
i.icon.heart:before {
content: '\2665';
}
/* '♥' */
i.icon.question:before {
content: '\2753';
}
/* '❓' */
i.icon.home-alt:before {
content: '\e80e';
}
/* '' */
i.icon.home:before {
content: '\2302';
}
/* '⌂' */
i.icon.i-letter:before {
i.icon.i:before {
content: '\2139';
}
/* 'ℹ' */
i.icon.lamp:before {
i.icon.idea:before {
content: '💡';
}
/* '\1f4a1' */
i.icon.link:before {
i.icon.link.open:before {
content: '🔗';
}
/* '\1f517' */
i.icon.list:before {
i.icon.content:before {
content: '\e782';
}
/* '' */
@ -430,11 +421,11 @@ i.icon.pause:before {
content: '\e808';
}
/* '' */
i.icon.pictures:before {
i.icon.photos:before {
content: '\e812';
}
/* '' */
i.icon.picture:before {
i.icon.photo:before {
content: '🌄';
}
/* '\1f304' */
@ -466,7 +457,7 @@ i.icon.shuffle:before {
content: '\e803';
}
/* '' */
i.icon.stop:before {
i.icon.square:before {
content: '\e807';
}
/* '' */
@ -482,35 +473,23 @@ i.icon.terminal:before {
content: '\e7ac';
}
/* '' */
i.icon.thumbs-down:before {
i.icon.thumbs.down:before {
content: '👎';
}
/* '\1f44e' */
i.icon.thumbs-up:before {
i.icon.thumbs.up:before {
content: '👍';
}
/* '\1f44d' */
i.icon.tint:before {
content: '\e794';
}
/* '' */
i.icon.to-end:before {
content: '\e762';
}
/* '' */
i.icon.to-end-alt:before {
content: '\e806';
}
/* '' */
i.icon.to-start:before {
content: '\e763';
}
/* '' */
i.icon.to-start-alt:before {
content: '\e805';
}
/* '' */
i.icon.top-list:before {
i.icon.top.list:before {
content: '🏆';
}
/* '\1f3c6' */
@ -518,15 +497,15 @@ i.icon.trash:before {
content: '\e729';
}
/* '' */
i.icon.twitter-bird:before {
i.icon.twitter:before {
content: '\f303';
}
/* '' */
i.icon.upload-cloud:before {
i.icon.upload:before {
content: '\e711';
}
/* '' */
i.icon.user-add:before {
i.icon.user.add:before {
content: '\e700';
}
/* '' */
@ -534,7 +513,7 @@ i.icon.user:before {
content: '👤';
}
/* '\1f464' */
i.icon.users-alt:before {
i.icon.community:before {
content: '\e814';
}
/* '' */
@ -542,15 +521,15 @@ i.icon.users:before {
content: '👥';
}
/* '\1f465' */
i.icon.vcard:before {
i.icon.id:before {
content: '\e722';
}
/* '' */
i.icon.zoom-in:before {
i.icon.zoom.in:before {
content: '\e750';
}
/* '' */
i.icon.zoom-out:before {
i.icon.zoom.out:before {
content: '\e751';
}
/* '' */
@ -583,17 +562,13 @@ i.icon.right-dir {
width: 1em;
margin: 0em 0em 0em 0.1em;
}
i.icon.clock {
i.icon.time {
margin-top: -0.05em;
}
/*--------------
Aliases
---------------*/
/* aliases for convenience */
i.icon.close:before {
content: '\e80d';
}
/* '' */
i.icon.help:before {
content: '\e704';
}
@ -606,6 +581,26 @@ 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: '📅';
}
/* '\1f4c5' */
/*******************************
States
*******************************/
@ -615,8 +610,10 @@ i.icon.disabled {
/*******************************
Variations
*******************************/
i.strong.icon {
i.emphasized.icon {
opacity: 1;
padding: 0.5em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
/*-------------------
Inverted
@ -624,6 +621,7 @@ i.strong.icon {
i.inverted.icon {
background-color: #222222;
color: #FFFFFF;
padding: 0.5em;
}
/*-------------------
Colors
@ -673,3 +671,26 @@ i.inverted.teal.icon {
background-color: #00B5AD !important;
color: #FFFFFF !important;
}
/*-------------------
Sizes
--------------------*/
i.small.icon {
font-size: 0.875em;
vertical-align: top;
}
i.icon {
font-size: 1em;
vertical-align: baseline;
}
i.large.icon {
font-size: 1.5em;
vertical-align: middle;
}
i.huge.icon {
font-size: 2em;
vertical-align: middle;
}
i.massive.icon {
font-size: 4em;
vertical-align: middle;
}

17
node/src/documents/collections/message.html
View File

@ -216,6 +216,23 @@ type : 'UI Collection'
</div>
</div>
<div class="example">
<h4>Sizes</h4>
<p>A text block can have different sizes</p>
<div class="ui small message">
This is a very small message.
</div>
<div class="ui large message">
This is large
</div>
<div class="ui huge message">
This is huge
</div>
<div class="ui massive message">
This is massive
</div>
</div>
</div>
</div>

343
node/src/documents/elements/icon.html
View File

@ -17,175 +17,246 @@ type : 'UI Element'
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="item">States</a>
<a class="item">Variations</a>
<a class="item">Variations</a>
</div>
</div>
<h2>Standard</h2>
<h4>Icon Set</h4>
<div class="ui ignored info message">
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup whenn sitting alongside text.
<h4>Icon Set</h4>
<p>Icon sets contain an arbitrary set of icons that represent concepts a website might reference</p>
<div class="ui ignored warning message">
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
</div>
<div class="icon example">
<h4>Content</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon attachment"></i> Attachment</div>
<div class="column"><i class="icon barcode"></i> Barcode</div>
<div class="column"><i class="icon bookmark"></i> Bookmark</div>
<div class="column"><i class="icon cart"></i> Cart</div>
<div class="column"><i class="icon chart"></i> Chart</div>
<div class="column"><i class="icon bar chart"></i> Bar chart</div>
<div class="column"><i class="icon pie chart"></i> Pie chart</div>
<div class="column"><i class="icon date"></i> Date</div>
<div class="column"><i class="icon doc"></i> Doc</div>
<div class="column"><i class="icon docs"></i> Docs</div>
<div class="column"><i class="icon email"></i> Email</div>
<div class="column"><i class="icon folder"></i> Folder</div>
<div class="column"><i class="icon open folder"></i> Open folder</div>
<div class="column"><i class="icon home"></i> Home</div>
<div class="column"><i class="icon mail"></i> Mail</div>
<div class="column"><i class="icon photo"></i> Photo</div>
<div class="column"><i class="icon photos"></i> Photos</div>
<div class="column"><i class="icon search"></i> Search</div>
<div class="column"><i class="icon setting"></i> Setting</div>
<div class="column"><i class="icon settings"></i> Settings</div>
<div class="column"><i class="icon tag"></i> Tag</div>
<div class="column"><i class="icon tags"></i> Tags</div>
<div class="column"><i class="icon time"></i> Time</div>
<div class="column"><i class="icon top list"></i> Top list</div>
<div class="column"><i class="icon trash"></i> Trash</div>
<div class="column"><i class="icon community"></i> Community</div>
<div class="column"><i class="icon user"></i> User</div>
<div class="column"><i class="icon users"></i> Users</div>
<div class="column"><i class="icon chat"></i> Chat</div>
</div>
</div>
<div class="icon example">
<h4>Special Content</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon trophy"></i> Trophy</div>
<div class="column"><i class="icon cloud"></i> Cloud</div>
<div class="column"><i class="icon flight"></i> Flight</div>
<div class="column"><i class="icon gift"></i> Gift</div>
<div class="column"><i class="icon dollar"></i> Dollar</div>
<div class="column"><i class="icon lab"></i> Lab</div>
<div class="column"><i class="icon rss"></i> RSS</div>
</div>
</div>
<div class="another icon example">
<h4>User Actions</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon home"></i> home</div>
<div class="column"><i class="icon asterisk"></i> asterisk</div>
<div class="column"><i class="icon at"></i> at</div>
<div class="column"><i class="icon attach"></i> attach</div>
<div class="column"><i class="icon attention circle"></i> attention circle</div>
<div class="column"><i class="icon attention"></i> attention</div>
<div class="column"><i class="icon award"></i> award</div>
<div class="column"><i class="icon barcode"></i> barcode</div>
<div class="column"><i class="icon basket"></i> basket</div>
<div class="column"><i class="icon block"></i> block</div>
<div class="column"><i class="icon book"></i> book</div>
<div class="column"><i class="icon bookmark"></i> bookmark</div>
<div class="column"><i class="icon calendar"></i> calendar</div>
<div class="column"><i class="icon cancel"></i> cancel</div>
<div class="column"><i class="icon cancel circle"></i> cancel circle</div>
<div class="column"><i class="icon cancel"></i> cancel</div>
<div class="column"><i class="icon rewind"></i> rewind</div>
<div class="column"><i class="icon bar chart"></i> bar chart</div>
<div class="column"><i class="icon pie chart"></i> pie chart</div>
<div class="column"><i class="icon chart"></i> chart</div>
<div class="column"><i class="icon chat"></i> chat</div>
<div class="column"><i class="icon check"></i> check</div>
<div class="column"><i class="icon clock"></i> clock</div>
<div class="column"><i class="icon cloud"></i> cloud</div>
<div class="column"><i class="icon add user"></i> Add User</div>
<div class="column"><i class="icon block"></i> Block</div>
<div class="column"><i class="icon hide"></i> Hide</div>
<div class="column"><i class="icon unhide"></i> Unhide</div>
<div class="column"><i class="icon lock"></i> Lock</div>
<div class="column"><i class="icon unlock"></i> Unlock</div>
<div class="column"><i class="icon flag"></i> Flag</div>
<div class="column"><i class="icon cancel"></i> Cancel</div>
<div class="column"><i class="icon close"></i> Close</div>
<div class="column"><i class="icon close"></i> Delete</div>
<div class="column"><i class="icon check"></i> Check</div>
<div class="column"><i class="icon edit"></i> Edit</div>
<div class="column"><i class="icon open link"></i> Open Link</div>
<div class="column"><i class="icon export"></i> Export</div>
<div class="column"><i class="icon forward"></i> Forward</div>
<div class="column"><i class="icon upload"></i> Upload</div>
<div class="column"><i class="icon like"></i> Like</div>
<div class="column"><i class="icon dislike"></i> Dislike</div>
<div class="column"><i class="icon pin"></i> Pin</div>
<div class="column"><i class="icon star"></i> Star</div>
<div class="column"><i class="icon empty star"></i> Empty Star</div>
<div class="column"><i class="icon half star"></i> Half Star</div>
<div class="column"><i class="icon print"></i> Print</div>
<div class="column"><i class="icon comment"></i> Comment</div>
</div>
</div>
<div class="another icon example">
<h4>View</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon setting"></i> setting</div>
<div class="column"><i class="icon settings"></i> settings</div>
<div class="column"><i class="icon comment"></i> comment</div>
<div class="column"><i class="icon clockwise"></i> clockwise</div>
<div class="column"><i class="icon direction"></i> direction</div>
<div class="column"><i class="icon doc"></i> doc</div>
<div class="column"><i class="icon docs"></i> docs</div>
<div class="column"><i class="icon dollar"></i> dollar</div>
<div class="column"><i class="icon down triangle"></i> down triangle</div>
<div class="column"><i class="icon down arrow"></i> down arrow</div>
<div class="column"><i class="icon down"></i> down arrow</div>
<div class="column"><i class="icon easel"></i> easel</div>
<div class="column"><i class="icon edit"></i> edit</div>
<div class="column"><i class="icon eject"></i> eject</div>
<div class="column"><i class="icon export"></i> export</div>
<div class="column"><i class="icon eye"></i> eye</div>
<div class="column"><i class="icon hidden eye"></i> hidden eye</div>
<div class="column"><i class="icon facebook"></i> facebook</div>
<div class="column"><i class="icon fast-forward"></i> fast-fw</div>
<div class="column"><i class="icon fire"></i> fire</div>
<div class="column"><i class="icon flag"></i> flag</div>
<div class="column"><i class="icon flash"></i> flash</div>
<div class="column"><i class="icon flight"></i> flight</div>
<div class="column"><i class="icon folder"></i> folder</div>
<div class="column"><i class="icon content"></i> Content</div>
<div class="column"><i class="icon grid layout"></i> Grid Layout</div>
<div class="column"><i class="icon block layout"></i> Block Layout</div>
<div class="column"><i class="icon list layout"></i> List Layout</div>>
<div class="column"><i class="icon resize full"></i> Resize Full</div>
<div class="column"><i class="icon resize horizontal"></i> Resize Horizontal</div>
<div class="column"><i class="icon resize small"></i> Resize Small</div>
<div class="column"><i class="icon resize vertical"></i> Resize Vertical</div>
<div class="column"><i class="icon zoom in"></i> Zoom in</div>
<div class="column"><i class="icon zoom out"></i> Zoom out</div>
</div>
</div>
<div class="another icon example">
<h4>Media Actions</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon open folder"></i> open folder</div>
<div class="column"><i class="icon forward"></i> forward</div>
<div class="column"><i class="icon gift"></i> gift</div>
<div class="column"><i class="icon github"></i> github</div>
<div class="column"><i class="icon globe"></i> globe</div>
<div class="column"><i class="icon globe"></i> globe-alt</div>
<div class="column"><i class="icon desk globe"></i> desk globe</div>
<div class="column"><i class="icon headphones"></i> headphones</div>
<div class="column"><i class="icon empty heart"></i> empty heart</div>
<div class="column"><i class="icon heart"></i> heart</div>
<div class="column"><i class="icon help circle"></i> help circle</div>
<div class="column"><i class="icon help"></i> help</div>
<div class="column"><i class="icon home-alt"></i> home-alt</div>
<div class="column"><i class="icon home"></i> home</div>
<div class="column"><i class="icon info circle"></i> info circle</div>
<div class="column"><i class="icon info"></i> info</div>
<div class="column"><i class="icon lab"></i> lab</div>
<div class="column"><i class="icon lamp"></i> lamp</div>
<div class="column"><i class="icon left triangle"></i> left triangle</div>
<div class="column"><i class="icon left arrow"></i> left open</div>
<div class="column"><i class="icon left"></i> left</div>
<div class="column"><i class="icon link"></i> link</div>
<div class="column"><i class="icon list"></i> list</div>
<div class="column"><i class="icon location"></i> location</div>
<div class="column"><i class="icon open lock"></i> open lock</div>
<div class="column"><i class="icon lock"></i> lock</div>
<div class="column"><i class="icon mail"></i> mail</div>
<div class="column"><i class="icon mic"></i> mic</div>
<div class="column"><i class="icon minus"></i> minus</div>
<div class="column"><i class="icon money"></i> money</div>
<div class="column"><i class="icon off"></i> off</div>
<div class="column"><i class="icon eject"></i> Eject</div>
<div class="column"><i class="icon fast-forward"></i> Fast-forward</div>
<div class="column"><i class="icon pause"></i> Pause</div>
<div class="column"><i class="icon play"></i> Play</div>
<div class="column"><i class="icon to-end"></i> To-start</div>
<div class="column"><i class="icon to-start"></i> To-end</div>
<div class="column"><i class="icon forward"></i> Forward</div>
<div class="column"><i class="icon shuffle"></i> Shuffle</div>
<div class="column"><i class="icon clockwise"></i> Clockwise</div>
<div class="column"><i class="icon counter clockwise"></i> Counter clockwise</div>
</div>
</div>
<div class="another icon example">
<h4>Objects</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon pause"></i> pause</div>
<div class="column"><i class="icon picture"></i> picture</div>
<div class="column"><i class="icon pictures"></i> pictures</div>
<div class="column"><i class="icon pin"></i> pin</div>
<div class="column"><i class="icon play-alt"></i> play-alt</div>
<div class="column"><i class="icon plus circle"></i> plus circle</div>
<div class="column"><i class="icon plus"></i> plus</div>
<div class="column"><i class="icon print"></i> print</div>
<div class="column"><i class="icon resize full"></i> resize full</div>
<div class="column"><i class="icon resize horizontal"></i> resize horizontal</div>
<div class="column"><i class="icon resize small"></i> resize small</div>
<div class="column"><i class="icon resize vertical"></i> resize vertical</div>
<div class="column"><i class="icon right"></i> right</div>
<div class="column"><i class="icon right triangle"></i> right triangle</div>
<div class="column"><i class="icon right arrow"></i> right arrow</div>
<div class="column"><i class="icon rss"></i> rss</div>
<div class="column"><i class="icon search"></i> search</div>
<div class="column"><i class="icon shuffle-alt"></i> shuffle-alt</div>
<div class="column"><i class="icon star"></i> star</div>
<div class="column"><i class="icon empty star"></i> empty star</div>
<div class="column"><i class="icon half star"></i> half star</div>
<div class="column"><i class="icon stop"></i> stop-alt</div>
<div class="column"><i class="icon tag"></i> tag-alt</div>
<div class="column"><i class="icon tags"></i> tags</div>
<div class="column"><i class="icon terminal"></i> terminal</div>
<div class="column"><i class="icon grid layout"></i> grid layout</div>
<div class="column"><i class="icon block layout"></i> block layout</div>
<div class="column"><i class="icon list layout"></i> list layout</div>
<div class="column"><i class="icon thumbs-down"></i> thumbs-down</div>
<div class="column"><i class="icon thumbs-up"></i> thumbs-up</div>
<div class="column"><i class="icon tint"></i> tint</div>
<div class="column"><i class="icon to-end-alt"></i> to-end-alt</div>
<div class="column"><i class="icon book"></i> Book</div>
<div class="column"><i class="icon calendar"></i> Calendar</div>
<div class="column"><i class="icon color"></i> Color</div>
<div class="column"><i class="icon desk globe"></i> Desk globe</div>
<div class="column"><i class="icon fire"></i> Fire</div>
<div class="column"><i class="icon globe"></i> Globe</div>
<div class="column"><i class="icon headphones"></i> Headphones</div>
<div class="column"><i class="icon id"></i> Id</div>
<div class="column"><i class="icon idea"></i> Idea</div>
<div class="column"><i class="icon lightning"></i> Lightning</div>
<div class="column"><i class="icon money"></i> Money</div>
<div class="column"><i class="icon paint"></i> Paint</div>
</div>
</div>
<div class="another icon example">
<h4>Indications</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
<div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
<div class="column"><i class="icon top-list"></i> top-list</div>
<div class="column"><i class="icon trash"></i> trash</div>
<div class="column"><i class="icon twitter-bird"></i> twitter-bird</div>
<div class="column"><i class="icon up"></i> up</div>
<div class="column"><i class="icon up triangle"></i> up triangle</div>
<div class="column"><i class="icon up arrow"></i> up arrow</div>
<div class="column"><i class="icon upload-cloud"></i> upload-cloud</div>
<div class="column"><i class="icon user-add"></i> user-add</div>
<div class="column"><i class="icon user"></i> user</div>
<div class="column"><i class="icon users-alt"></i> users-alt</div>
<div class="column"><i class="icon users"></i> users</div>
<div class="column"><i class="icon vcard"></i> vcard</div>
<div class="column"><i class="icon zoom-in"></i> zoom-in</div>
<div class="column"><i class="icon zoom-out"></i> zoom-out</div>
<div class="column"><i class="icon cancel circle"></i> Cancel circle</div>
<div class="column"><i class="icon asterisk"></i> Asterisk</div>
<div class="column"><i class="icon attention circle"></i> Attention circle</div>
<div class="column"><i class="icon attention"></i> Attention</div>
<div class="column"><i class="icon empty heart"></i> Empty heart</div>
<div class="column"><i class="icon heart"></i> Heart</div>
<div class="column"><i class="icon thumbs down"></i> Thumbs down</div>
<div class="column"><i class="icon thumbs up"></i> Thumbs up</div>
<div class="column"><i class="icon terminal"></i> Terminal</div>
<div class="column"><i class="icon direction"></i> Direction</div>
<div class="column"><i class="icon location"></i> Location</div>
<div class="column"><i class="icon help"></i> Help</div>
<div class="column"><i class="icon info"></i> Info</div>
<div class="column"><i class="icon mic"></i> Mic</div>
<div class="column"><i class="icon off"></i> Off</div>
<div class="column"><i class="icon add"></i> Add</div>
</div>
</div>
<h2>States</h2>
<div class="another icon example">
<h4>Symbols</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon left arrow"></i> Left open</div>
<div class="column"><i class="icon left triangle"></i> Left triangle</div>
<div class="column"><i class="icon left"></i> Left</div>
<div class="column"><i class="icon right"></i> Right</div>
<div class="column"><i class="icon right triangle"></i> Right triangle</div>
<div class="column"><i class="icon right arrow"></i> Right arrow</div>
<div class="column"><i class="icon up"></i> Up</div>
<div class="column"><i class="icon up triangle"></i> Up triangle</div>
<div class="column"><i class="icon up arrow"></i> Up arrow</div>
<div class="column"><i class="icon down arrow"></i> Down arrow</div>
<div class="column"><i class="icon down triangle"></i> Down triangle</div>
<div class="column"><i class="icon down"></i> Down arrow</div>
<div class="column"><i class="icon square"></i> Square</div>
<div class="column"><i class="icon minus"></i> Minus</div>
<div class="column"><i class="icon plus"></i> Plus</div>
</div>
</div>
<div class="another icon example">
<h4>Social</h4>
<div class="ui eight column grid">
<div class="column"><i class="icon facebook"></i> Facebook</div>
<div class="column"><i class="icon twitter"></i> Twitter</div>
<div class="column"><i class="icon github"></i> Github</div>
</div>
</div>
<h2>States</h2>
<div class="example">
<h4>Disabled</h4>
<p>A icon can show that it is disabled</p>
<p>An icon can show that it is disabled</p>
<i class="disabled users icon"></i>
</div>
<h2>Variations</h2>
<div class="example">
<h4>Size</h4>
<p>An icon can vary in size</p>
<i class="small users icon"></i>
<i class="users icon"></i>
<i class="large users icon"></i>
<i class="huge users icon"></i>
<i class="massive users icon"></i>
</div>
<div class="example">
<h4>Emphasized</h4>
<p>An icon can be formatted to show emphasis</p>
<i class="emphasized users icon"></i>
</div>
<div class="example">
<h4>Colors</h4>
<p>An icon can be formatted with different colors</p>
<i class="black users icon"></i>
<i class="blue user icon"></i>
<i class="red community icon"></i>
<i class="green add user icon"></i>
<i class="purple chat icon"></i>
<i class="teal comment icon"></i>
</div>
<div class="example">
<h4>Inverted</h4>
<p>an icon can have its colors inverted for contrast</p>
<i class="inverted black users icon"></i>
<i class="inverted blue user icon"></i>
<i class="inverted red community icon"></i>
<i class="inverted green add user icon"></i>
<i class="inverted purple chat icon"></i>
<i class="inverted teal comment icon"></i>
</div>
</div>

2
node/src/files/components/semantic/collections/message.css
View File

@ -214,5 +214,5 @@
font-size: 1.5em;
}
.ui.massive.message {
font-size: 2px;
font-size: 2em;
}

181
node/src/files/components/semantic/elements/icons.css
View File

@ -20,18 +20,17 @@
font-style: normal;
}
i.icon {
font-family: 'Icons';
display: inline-block;
opacity: 0.75;
margin: 0em 0.25em 0em 0em;
width: 1em;
height: 1em;
margin: 0em 0.25em 0em 0em;
font-family: 'Icons';
font-style: normal;
line-height: 1;
font-weight: normal;
text-decoration: inherit;
text-align: center;
vertical-align: baseline;
opacity: 0.75;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
@ -42,10 +41,6 @@ i.icon.circle.attention:before {
content: '\2757';
}
/* '❗' */
i.icon.circle.cancel:before {
content: '\2716';
}
/* '✖' */
i.icon.circle.help:before {
content: '\e704';
}
@ -54,7 +49,7 @@ i.icon.circle.info:before {
content: '\e705';
}
/* '' */
i.icon.circle.plus:before {
i.icon.add:before {
content: '\2795';
}
/* '➕' */
@ -166,7 +161,7 @@ i.icon.lock:before {
content: '🔒';
}
/* '\1f512' */
i.icon.lock.open:before {
i.icon.unlock:before {
content: '🔓';
}
/* '\1f513' */
@ -182,15 +177,19 @@ 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.at:before {
content: '\40';
}
/* '@' */
i.icon.attach:before {
i.icon.attachment:before {
content: '📎';
}
/* '\1f4ce' */
@ -198,7 +197,7 @@ i.icon.attention:before {
content: '\26a0';
}
/* '⚠' */
i.icon.award:before {
i.icon.trophy:before {
content: '🏉';
}
/* '\1f3c9' */
@ -206,11 +205,7 @@ i.icon.barcode:before {
content: '\e792';
}
/* '' */
i.icon.basket:before {
content: '\e73d';
}
/* '' */
i.icon.basket:before {
i.icon.cart:before {
content: '\e813';
}
/* '' */
@ -231,17 +226,17 @@ i.icon.calendar:before {
}
/* '\1f4c5' */
i.icon.cancel:before {
content: '\2716';
}
/* '✖' */
i.icon.close:before {
content: '\e80d';
}
/* '' */
i.icon.cancel:before {
content: '\2715';
}
/* '✕' */
i.icon.rewind:before {
content: '\27f2';
i.icon.color:before {
content: '\e794';
}
/* '⟲' */
/* '' */
i.icon.chat:before {
content: '\e720';
}
@ -250,7 +245,7 @@ i.icon.check:before {
content: '\2611';
}
/* '☑' */
i.icon.clock:before {
i.icon.time:before {
content: '🕔';
}
/* '\1f554' */
@ -262,6 +257,10 @@ i.icon.code:before {
content: '\e714';
}
/* '' */
i.icon.email:before {
content: '\40';
}
/* '@' */
i.icon.setting:before {
content: '\26ef';
}
@ -274,6 +273,10 @@ i.icon.comment:before {
content: '\e802';
}
/* '' */
i.icon.clockwise.counter:before {
content: '\27f2';
}
/* '⟲' */
i.icon.clockwise:before {
content: '\27f3';
}
@ -294,7 +297,7 @@ i.icon.dollar:before {
content: '💵';
}
/* '\1f4b5' */
i.icon.easel:before {
i.icon.paint:before {
content: '\e7b5';
}
/* '' */
@ -310,11 +313,11 @@ i.icon.export:before {
content: '\e715';
}
/* '' */
i.icon.eye:before {
i.icon.hide:before {
content: '\e80f';
}
/* '' */
i.icon.hidden.eye:before {
i.icon.unhide:before {
content: '\e70b';
}
/* '' */
@ -334,7 +337,7 @@ i.icon.flag:before {
content: '\2691';
}
/* '⚑' */
i.icon.flash:before {
i.icon.lightning:before {
content: '\26a1';
}
/* '⚡' */
@ -366,39 +369,27 @@ i.icon.headphones:before {
content: '🎧';
}
/* '\1f3a7' */
i.icon.heart-empty:before {
content: '\2661';
}
/* '♡' */
i.icon.heart:before {
content: '\2665';
}
/* '♥' */
i.icon.question:before {
content: '\2753';
}
/* '❓' */
i.icon.home-alt:before {
content: '\e80e';
}
/* '' */
i.icon.home:before {
content: '\2302';
}
/* '⌂' */
i.icon.i-letter:before {
i.icon.i:before {
content: '\2139';
}
/* 'ℹ' */
i.icon.lamp:before {
i.icon.idea:before {
content: '💡';
}
/* '\1f4a1' */
i.icon.link:before {
i.icon.link.open:before {
content: '🔗';
}
/* '\1f517' */
i.icon.list:before {
i.icon.content:before {
content: '\e782';
}
/* '' */
@ -430,11 +421,11 @@ i.icon.pause:before {
content: '\e808';
}
/* '' */
i.icon.pictures:before {
i.icon.photos:before {
content: '\e812';
}
/* '' */
i.icon.picture:before {
i.icon.photo:before {
content: '🌄';
}
/* '\1f304' */
@ -466,7 +457,7 @@ i.icon.shuffle:before {
content: '\e803';
}
/* '' */
i.icon.stop:before {
i.icon.square:before {
content: '\e807';
}
/* '' */
@ -482,35 +473,23 @@ i.icon.terminal:before {
content: '\e7ac';
}
/* '' */
i.icon.thumbs-down:before {
i.icon.thumbs.down:before {
content: '👎';
}
/* '\1f44e' */
i.icon.thumbs-up:before {
i.icon.thumbs.up:before {
content: '👍';
}
/* '\1f44d' */
i.icon.tint:before {
content: '\e794';
}
/* '' */
i.icon.to-end:before {
content: '\e762';
}
/* '' */
i.icon.to-end-alt:before {
content: '\e806';
}
/* '' */
i.icon.to-start:before {
content: '\e763';
}
/* '' */
i.icon.to-start-alt:before {
content: '\e805';
}
/* '' */
i.icon.top-list:before {
i.icon.top.list:before {
content: '🏆';
}
/* '\1f3c6' */
@ -518,15 +497,15 @@ i.icon.trash:before {
content: '\e729';
}
/* '' */
i.icon.twitter-bird:before {
i.icon.twitter:before {
content: '\f303';
}
/* '' */
i.icon.upload-cloud:before {
i.icon.upload:before {
content: '\e711';
}
/* '' */
i.icon.user-add:before {
i.icon.user.add:before {
content: '\e700';
}
/* '' */
@ -534,7 +513,7 @@ i.icon.user:before {
content: '👤';
}
/* '\1f464' */
i.icon.users-alt:before {
i.icon.community:before {
content: '\e814';
}
/* '' */
@ -542,15 +521,15 @@ i.icon.users:before {
content: '👥';
}
/* '\1f465' */
i.icon.vcard:before {
i.icon.id:before {
content: '\e722';
}
/* '' */
i.icon.zoom-in:before {
i.icon.zoom.in:before {
content: '\e750';
}
/* '' */
i.icon.zoom-out:before {
i.icon.zoom.out:before {
content: '\e751';
}
/* '' */
@ -583,17 +562,13 @@ i.icon.right-dir {
width: 1em;
margin: 0em 0em 0em 0.1em;
}
i.icon.clock {
i.icon.time {
margin-top: -0.05em;
}
/*--------------
Aliases
---------------*/
/* aliases for convenience */
i.icon.close:before {
content: '\e80d';
}
/* '' */
i.icon.help:before {
content: '\e704';
}
@ -606,6 +581,26 @@ 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: '📅';
}
/* '\1f4c5' */
/*******************************
States
*******************************/
@ -615,8 +610,10 @@ i.icon.disabled {
/*******************************
Variations
*******************************/
i.strong.icon {
i.emphasized.icon {
opacity: 1;
padding: 0.5em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
/*-------------------
Inverted
@ -624,6 +621,7 @@ i.strong.icon {
i.inverted.icon {
background-color: #222222;
color: #FFFFFF;
padding: 0.5em;
}
/*-------------------
Colors
@ -673,3 +671,26 @@ i.inverted.teal.icon {
background-color: #00B5AD !important;
color: #FFFFFF !important;
}
/*-------------------
Sizes
--------------------*/
i.small.icon {
font-size: 0.875em;
vertical-align: top;
}
i.icon {
font-size: 1em;
vertical-align: baseline;
}
i.large.icon {
font-size: 1.5em;
vertical-align: middle;
}
i.huge.icon {
font-size: 2em;
vertical-align: middle;
}
i.massive.icon {
font-size: 4em;
vertical-align: middle;
}

24
node/src/files/stylesheets/semantic.css
View File

@ -433,6 +433,20 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
position: relative;
}
#example .icon.example {
border-top: none;
}
#example .icon.example h3,
#example .icon.example h4 {
margin: 0.5em 0em 2em;
}
#example .icon.example i.code {
top: 30px;
}
#example .icon.example .grid {
text-align: left;
}
#example .icon.example .grid .column {
opacity: 0.8;
margin-bottom: 4%;
@ -489,15 +503,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
color: #009FDA;
}
#example .another.icon.example {
margin-top: -15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 50px;
}
#example .another.icon.example i.code {
top: 15px;
}
#example .another.example {
border-top: none;
}
@ -750,8 +758,8 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
top: 0px;
}
#example .example {
margin: 16px 0px;
padding: 16px 0px;
margin: 1em 0em;
padding: 1em 0em;
border-top: 1px solid rgba(0, 0, 0, 0.05);
clear: both;
position: relative;

8
node/src/layouts/default.html.eco
View File

@ -108,9 +108,9 @@
</div>
<div class="icon previous link<%= if pageNumber is 1 then " disabled" %> item">
<% if pageNumber > 1 and pageCollection[pageNumber - 2]?: %>
<a href="<%= pageCollection[pageNumber - 2].url %>"><i class="icon left-open"></i></a>
<a href="<%= pageCollection[pageNumber - 2].url %>"><i class="left arrow icon"></i></a>
<% else: %>
<i class="icon left-open"></i>
<i class="left arrow icon"></i>
<% end %>
</div>
<div class="section dropdown item">
@ -125,9 +125,9 @@
</div>
<div class="icon next <%= if pageNumber is pageCount then "disabled " %>link item">
<% if pageNumber isnt pageCount and pageCollection[pageNumber]?: %>
<a href="<%= pageCollection[pageNumber].url %>"><i class="icon right-open"></i></a>
<a href="<%= pageCollection[pageNumber].url %>"><i class="right arrow icon"></i></a>
<% else: %>
<i class="icon right-open"></i>
<i class="right arrow icon"></i>
<% end %>
</div>
<div class="right menu">

2
src/collections/message.less
View File

@ -270,5 +270,5 @@
font-size: 1.5em;
}
.ui.massive.message {
font-size: 2px;
font-size: 2em;
}

131
src/elements/icons.less
View File

@ -29,23 +29,21 @@
}
i.icon {
font-family: 'Icons';
display: inline-block;
opacity: 0.75;
margin: 0em 0.25em 0em 0em;
width: 1em;
height: 1em;
margin: 0em 0.25em 0em 0em;
font-family: 'Icons';
font-style: normal;
line-height: 1;
font-weight: normal;
text-decoration: inherit;
text-align: center;
vertical-align: baseline;
opacity: 0.75;
speak: none;
-webkit-font-smoothing: antialiased;
@ -58,10 +56,9 @@ i.icon {
i.icon.circle.attention:before { content: '\2757'; } /* '❗' */
i.icon.circle.cancel:before { content: '\2716'; } /* '✖' */
i.icon.circle.help:before { content: '\e704'; } /* '' */
i.icon.circle.info:before { content: '\e705'; } /* '' */
i.icon.circle.plus:before { content: '\2795'; } /* '➕' */
i.icon.add:before { content: '\2795'; } /* '➕' */
i.icon.chart:before { content: '📈'; } /* '\1f4c8' */
i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
@ -99,52 +96,55 @@ i.icon.star.empty:before { content: '\e800'; } /* '' */
i.icon.star.half:before { content: '\e701'; } /* '' */
i.icon.lock:before { content: '🔒'; } /* '\1f512' */
i.icon.lock.open:before { content: '🔓'; } /* '\1f513' */
i.icon.unlock:before { content: '🔓'; } /* '\1f513' */
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.at:before { content: '\40'; } /* '@' */
i.icon.attach:before { content: '📎'; } /* '\1f4ce' */
i.icon.attachment:before { content: '📎'; } /* '\1f4ce' */
i.icon.attention:before { content: '\26a0'; } /* '⚠' */
i.icon.award:before { content: '🏉'; } /* '\1f3c9' */
i.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */
i.icon.barcode:before { content: '\e792'; } /* '' */
i.icon.basket:before { content: '\e73d'; } /* '' */
i.icon.basket:before { content: '\e813'; } /* '' */
i.icon.cart:before { content: '\e813'; } /* '' */
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */
i.icon.book:before { content: '📖'; } /* '\1f4d6' */
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
i.icon.cancel:before { content: '\e80d'; } /* '' */
i.icon.cancel:before { content: '\2715'; } /* '✕' */
i.icon.rewind:before { content: '\27f2'; } /* '⟲' */
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.clock:before { content: '🕔'; } /* '\1f554' */
i.icon.time:before { content: '🕔'; } /* '\1f554' */
i.icon.cloud:before { content: '\2601'; } /* '☁' */
i.icon.code:before { content: '\e714'; } /* '' */
i.icon.email:before { content: '\40'; } /* '@' */
i.icon.setting:before { content: '\26ef'; } /* '⛯' */
i.icon.settings: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: '📄'; } /* '\1f4c4' */
i.icon.docs:before { content: '\e736'; } /* '' */
i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */
i.icon.easel:before { content: '\e7b5'; } /* '' */
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.eye:before { content: '\e80f'; } /* '' */
i.icon.hidden.eye:before { content: '\e70b'; } /* '' */
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: '🔥'; } /* '\1f525' */
i.icon.flag:before { content: '\2691'; } /* '⚑' */
i.icon.flash:before { content: '\26a1'; } /* '⚡' */
i.icon.lightning:before { content: '\26a1'; } /* '⚡' */
i.icon.lab:before { content: '\68'; } /* 'h' */
i.icon.flight:before { content: '\2708'; } /* '✈' */
i.icon.forward:before { content: '\27a6'; } /* '➦' */
@ -152,15 +152,12 @@ i.icon.gift:before { content: '🎁'; } /* '\1f381' */
i.icon.github:before { content: '\f308'; } /* '' */
i.icon.globe:before { content: '\e817'; } /* '' */
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
i.icon.heart-empty:before { content: '\2661'; } /* '♡' */
i.icon.heart:before { content: '\2665'; } /* '♥' */
i.icon.question:before { content: '\2753'; } /* '❓' */
i.icon.home-alt:before { content: '\e80e'; } /* '' */
i.icon.home:before { content: '\2302'; } /* '⌂' */
i.icon.i-letter:before { content: '\2139'; } /* 'ℹ' */
i.icon.lamp:before { content: '💡'; } /* '\1f4a1' */
i.icon.link:before { content: '🔗'; } /* '\1f517' */
i.icon.list:before { content: '\e782'; } /* '' */
i.icon.i:before { content: '\2139'; } /* 'ℹ' */
i.icon.idea:before { content: '💡'; } /* '\1f4a1' */
i.icon.link.open:before { content: '🔗'; } /* '\1f517' */
i.icon.content:before { content: '\e782'; } /* '' */
i.icon.location:before { content: '\e724'; } /* '' */
i.icon.mail:before { content: '\2709'; } /* '✉' */
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
@ -168,8 +165,8 @@ i.icon.minus:before { content: '\2d'; } /* '-' */
i.icon.money:before { content: '💰'; } /* '\1f4b0' */
i.icon.off:before { content: '\e78e'; } /* '' */
i.icon.pause:before { content: '\e808'; } /* '' */
i.icon.pictures:before { content: '\e812'; } /* '' */
i.icon.picture:before { content: '🌄'; } /* '\1f304' */
i.icon.photos:before { content: '\e812'; } /* '' */
i.icon.photo:before { content: '🌄'; } /* '\1f304' */
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
i.icon.play:before { content: '\e809'; } /* '' */
i.icon.plus:before { content: '\2b'; } /* '+' */
@ -177,28 +174,25 @@ i.icon.print:before { content: '\e716'; } /* '' */
i.icon.rss:before { content: '\e73a'; } /* '' */
i.icon.search:before { content: '🔍'; } /* '\1f50d' */
i.icon.shuffle:before { content: '\e803'; } /* '' */
i.icon.stop:before { content: '\e807'; } /* '' */
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: '👎'; } /* '\1f44e' */
i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
i.icon.tint:before { content: '\e794'; } /* '' */
i.icon.to-end:before { content: '\e762'; } /* '' */
i.icon.to-end-alt:before { content: '\e806'; } /* '' */
i.icon.to-start:before { content: '\e763'; } /* '' */
i.icon.to-start-alt:before { content: '\e805'; } /* '' */
i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */
i.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */
i.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */
i.icon.to-end:before { content: '\e806'; } /* '' */
i.icon.to-start:before { content: '\e805'; } /* '' */
i.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */
i.icon.trash:before { content: '\e729'; } /* '' */
i.icon.twitter-bird:before { content: '\f303'; } /* '' */
i.icon.upload-cloud:before { content: '\e711'; } /* '' */
i.icon.user-add:before { content: '\e700'; } /* '' */
i.icon.twitter:before { content: '\f303'; } /* '' */
i.icon.upload:before { content: '\e711'; } /* '' */
i.icon.user.add:before { content: '\e700'; } /* '' */
i.icon.user:before { content: '👤'; } /* '\1f464' */
i.icon.users-alt:before { content: '\e814'; } /* '' */
i.icon.community:before { content: '\e814'; } /* '' */
i.icon.users:before { content: '👥'; } /* '\1f465' */
i.icon.vcard:before { content: '\e722'; } /* '' */
i.icon.zoom-in:before { content: '\e750'; } /* '' */
i.icon.zoom-out:before { content: '\e751'; } /* '' */
i.icon.id:before { content: '\e722'; } /* '' */
i.icon.zoom.in:before { content: '\e750'; } /* '' */
i.icon.zoom.out:before { content: '\e751'; } /* '' */
@ -235,7 +229,7 @@ i.icon.right-dir {
margin: 0em 0em 0em 0.1em;
}
i.icon.clock {
i.icon.time {
margin-top: -0.05em;
}
@ -244,11 +238,17 @@ i.icon.clock {
---------------*/
/* aliases for convenience */
i.icon.close: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: '📅'; } /* '\1f4c5' */
/*******************************
@ -264,8 +264,10 @@ i.icon.disabled {
Variations
*******************************/
i.strong.icon {
i.emphasized.icon {
opacity: 1;
padding: 0.5em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
@ -276,6 +278,7 @@ i.strong.icon {
i.inverted.icon {
background-color: #222222;
color: #FFFFFF;
padding: 0.5em;
}
/*-------------------
@ -328,4 +331,30 @@ i.inverted.purple.icon {
i.inverted.teal.icon {
background-color: #00B5AD !important;
color: #FFFFFF !important;
}
}
/*-------------------
Sizes
--------------------*/
i.small.icon {
font-size: 0.875em;
vertical-align: top;
}
i.icon {
font-size: 1em;
vertical-align: baseline;
}
i.large.icon {
font-size: 1.5em;
vertical-align: middle;
}
i.huge.icon {
font-size: 2em;
vertical-align: middle;
}
i.massive.icon {
font-size: 4em;
vertical-align: middle;
}

Write Preview
Loading…
Cancel
Save