+
+
+
+
+
+
Standard
+
+
+
Icon Set
+
+ 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.
+
+
+
+
+
home
+
asterisk
+
at
+
attach
+
attention circle
+
attention
+
award
+
barcode
+
basket
+
block
+
book
+
bookmark
+
calendar
+
cancel
+
cancel circle
+
cancel
+
rewind
+
bar chart
+
pie chart
+
chart
+
chat
+
check
+
clock
+
cloud
+
+
+
+
+
setting
+
settings
+
comment
+
clockwise
+
direction
+
doc
+
docs
+
dollar
+
down triangle
+
down arrow
+
down arrow
+
easel
+
edit
+
eject
+
export
+
eye
+
hidden eye
+
facebook
+
fast-fw
+
fire
+
flag
+
flash
+
flight
+
folder
+
+
+
+
+
open folder
+
forward
+
gift
+
github
+
globe
+
globe-alt
+
desk globe
+
headphones
+
empty heart
+
heart
+
help circle
+
help
+
home-alt
+
home
+
info circle
+
info
+
lab
+
lamp
+
left triangle
+
left open
+
left
+
link
+
list
+
location
+
open lock
+
lock
+
mail
+
mic
+
minus
+
money
+
off
+
+
+
+
+
pause
+
picture
+
pictures
+
pin
+
play-alt
+
plus circle
+
plus
+
print
+
resize full
+
resize horizontal
+
resize small
+
resize vertical
+
right
+
right triangle
+
right arrow
+
rss
+
search
+
shuffle-alt
+
star
+
empty star
+
half star
+
stop-alt
+
tag-alt
+
tags
+
terminal
+
grid layout
+
block layout
+
list layout
+
thumbs-down
+
thumbs-up
+
tint
+
to-end-alt
+
+
+
+
+
to-start-alt
+
to-start-alt
+
top-list
+
trash
+
twitter-bird
+
up
+
up triangle
+
up arrow
+
upload-cloud
+
user-add
+
user
+
users-alt
+
users
+
vcard
+
zoom-in
+
zoom-out
+
+
+
+
States
+
+
+
Disabled
+
A icon can show that it is disabled
+
+
+
+
Variations
+
+
+
Semantic UI
-
HTML UI is the language of the web.
+
HTML User interfaces are the DNA of the web.
Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.
<%- @content %>
diff --git a/src/collections/grid.less b/src/collections/grid.less
index f0fb84786..e73d4c45c 100755
--- a/src/collections/grid.less
+++ b/src/collections/grid.less
@@ -58,7 +58,7 @@
}
/*-------------------
- Rows
+ Rows
--------------------*/
.ui.grid > .row {
@@ -85,6 +85,18 @@
}
+/*-------------------
+ Grids in Grids
+--------------------*/
+
+.ui.grid .column > .grid {
+ margin-left: -1.333%;
+ margin-right: -1.333%;
+}
+
+
+
+
/*******************************
Variations
*******************************/
@@ -301,10 +313,19 @@
/*----------------------
Equal Height Columns
-----------------------*/
+
.ui.grid .equal.row .column {
display: table-cell;
}
+/*----------------------
+ Fitted
+-----------------------*/
+
+.ui.fitted.grid {
+ margin-left: -1.333%;
+ margin-right: -1.333%;
+}
/*-------------------
Folding
diff --git a/src/elements/header.less b/src/elements/header.less
index e85a03ef9..ea03c6c1e 100755
--- a/src/elements/header.less
+++ b/src/elements/header.less
@@ -41,27 +41,27 @@
h1.ui.header {
min-height: 1rem;
margin: 2rem 0rem 1.5rem;
- line-height: 1.33rem;
+ line-height: 1.33;
font-size: 2rem;
}
h2.ui.header {
margin: 1.5rem 0rem 1rem;
- line-height: 1.33rem;
+ line-height: 1.33;
font-size: 1.5rem;
}
h3.ui.header {
margin: 1.3rem 0rem 1rem;
- line-height: 1.33rem;
+ line-height: 1.33;
font-size: 1.33rem;
}
h4.ui.header {
margin: 0.75rem 0rem 0.3rem;
- line-height: 1.33rem;
+ line-height: 1.33;
font-size: 1.1rem;
}
h5.ui.header {
margin: 0rem 0rem 0.2rem;
- line-height: 1.2rem;
+ line-height: 1.2;
font-size: 1rem;
}
diff --git a/src/elements/icons.less b/src/elements/icons.less
index f47cf4adc..8ffd442ce 100755
--- a/src/elements/icons.less
+++ b/src/elements/icons.less
@@ -1,5 +1,18 @@
+/*
+ * # Semantic Icons - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
+
+
/*******************************
- UI Icon
+ Icon
*******************************/
@font-face {
@@ -16,6 +29,7 @@
}
i.icon {
+ font-family: 'Icons';
display: inline-block;
width: 1em;
@@ -30,170 +44,143 @@ i.icon {
text-align: center;
vertical-align: baseline;
+
+ opacity: 0.75;
+ speak: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
-i.icon:before {
- font-family: 'Icons';
- speak: none;
- opacity: 0.75;
-}
-/* manual corrections */
-i.icon.cloud,
-i.icon.code,
-i.icon.terminal,
-i.icon.twitter-bird,
-i.icon.dollar {
- margin-left: 0em;
- padding-right: 0.2em;
-}
+/* icons available */
-i.icon.left,
-i.icon.left-open,
-i.icon.left-dir {
- width: 1em;
- margin: 0em 0.5em 0em 0em;
-}
-i.icon.up,
-i.icon.up-open,
-i.icon.up-dir,
-i.icon.down,
-i.icon.down-open,
-i.icon.down-dir,
-i.icon.right,
-i.icon.right-open,
-i.icon.right-dir {
- width: 1em;
- margin: 0em 0em 0em 0.1em;
-}
-/* circular icon easier to notice misaligned */
-i.icon.clock {
- margin-top: -0.05em;
-}
+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.chart:before { content: '📈'; } /* '\1f4c8' */
+i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
+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: '📂'; } /* '\1f4c2' */
+
+i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
+i.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */
+
+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: '🔒'; } /* '\1f512' */
+i.icon.lock.open:before { content: '🔓'; } /* '\1f513' */
+
+i.icon.layout.grid:before { content: '\e80c'; } /* '' */
+i.icon.layout.block:before { content: '\e708'; } /* '' */
+i.icon.layout.list:before { content: '\e80b'; } /* '' */
-/* 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'; } /* '' */
-/* icons available */
i.icon.asterisk:before { content: '\2731'; } /* '✱' */
i.icon.at:before { content: '\40'; } /* '@' */
i.icon.attach:before { content: '📎'; } /* '\1f4ce' */
-i.icon.attention-circle:before { content: '\2757'; } /* '❗' */
i.icon.attention:before { content: '\26a0'; } /* '⚠' */
i.icon.award:before { content: '🏉'; } /* '\1f3c9' */
i.icon.barcode:before { content: '\e792'; } /* '' */
i.icon.basket:before { content: '\e73d'; } /* '' */
i.icon.basket:before { content: '\e813'; } /* '' */
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */
-i.icon.book-open:before { content: '📖'; } /* '\1f4d6' */
+i.icon.book:before { content: '📖'; } /* '\1f4d6' */
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
-i.icon.cancel-alt:before { content: '\e80d'; } /* '' */
-i.icon.cancel-circle:before { content: '\2716'; } /* '✖' */
+i.icon.cancel:before { content: '\e80d'; } /* '' */
i.icon.cancel:before { content: '\2715'; } /* '✕' */
-i.icon.ccw:before { content: '\27f2'; } /* '⟲' */
-i.icon.chart-bar:before { content: '📊'; } /* '\1f4ca' */
-i.icon.chart-pie:before { content: '\e7a2'; } /* '' */
-i.icon.chart:before { content: '📈'; } /* '\1f4c8' */
+i.icon.rewind:before { content: '\27f2'; } /* '⟲' */
i.icon.chat:before { content: '\e720'; } /* '' */
i.icon.check:before { content: '\2611'; } /* '☑' */
i.icon.clock:before { content: '🕔'; } /* '\1f554' */
i.icon.cloud:before { content: '\2601'; } /* '☁' */
i.icon.code:before { content: '\e714'; } /* '' */
-i.icon.cog-alt:before { content: '\26ef'; } /* '⛯' */
-i.icon.cog:before { content: '\2699'; } /* '⚙' */
-i.icon.comment-alt:before { content: '\e802'; } /* '' */
-i.icon.comment:before { content: '\e718'; } /* '' */
-i.icon.cw:before { content: '\27f3'; } /* '⟳' */
+i.icon.setting:before { content: '\26ef'; } /* '⛯' */
+i.icon.settings:before { content: '\2699'; } /* '⚙' */
+i.icon.comment:before { content: '\e802'; } /* '' */
+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.down-dir:before { content: '\25be'; } /* '▾' */
-i.icon.down-open:before { content: '\e75c'; } /* '' */
-i.icon.down:before { content: '\2193'; } /* '↓' */
i.icon.easel: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.eye-off:before { content: '\e70b'; } /* '' */
-i.icon.facebook-rect:before { content: '\f301'; } /* '' */
-i.icon.fast-fw:before { content: '\e804'; } /* '' */
+i.icon.hidden.eye: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.flash-alt:before { content: '\e815'; } /* '' */
-i.icon.flask:before { content: '\68'; } /* 'h' */
+i.icon.lab:before { content: '\68'; } /* 'h' */
i.icon.flight:before { content: '\2708'; } /* '✈' */
-i.icon.folder-open:before { content: '📂'; } /* '\1f4c2' */
-i.icon.folder:before { content: '\e810'; } /* '' */
i.icon.forward:before { content: '\27a6'; } /* '➦' */
i.icon.gift:before { content: '🎁'; } /* '\1f381' */
i.icon.github:before { content: '\f308'; } /* '' */
i.icon.globe:before { content: '\e817'; } /* '' */
-i.icon.globe-alt:before { content: '🌐'; } /* '\1f310' */
-i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
i.icon.heart-empty:before { content: '\2661'; } /* '♡' */
i.icon.heart:before { content: '\2665'; } /* '♥' */
-i.icon.help-circle:before { content: '\e704'; } /* '' */
i.icon.question:before { content: '\2753'; } /* '❓' */
i.icon.home-alt:before { content: '\e80e'; } /* '' */
i.icon.home:before { content: '\2302'; } /* '⌂' */
-i.icon.info-circle:before { content: '\e705'; } /* '' */
i.icon.i-letter:before { content: '\2139'; } /* 'ℹ' */
i.icon.lamp:before { content: '💡'; } /* '\1f4a1' */
-i.icon.left-dir:before { content: '\25c2'; } /* '◂' */
-i.icon.left-open:before { content: '\e75d'; } /* '' */
-i.icon.left:before { content: '\2190'; } /* '←' */
i.icon.link:before { content: '🔗'; } /* '\1f517' */
i.icon.list:before { content: '\e782'; } /* '' */
-i.icon.location-alt:before { content: '\e811'; } /* '' */
i.icon.location:before { content: '\e724'; } /* '' */
-i.icon.lock-open:before { content: '🔓'; } /* '\1f513' */
-i.icon.lock:before { content: '🔒'; } /* '\1f512' */
i.icon.mail:before { content: '\2709'; } /* '✉' */
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
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.picture-alt:before { content: '\e812'; } /* '' */
+i.icon.pictures:before { content: '\e812'; } /* '' */
i.icon.picture:before { content: '🌄'; } /* '\1f304' */
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
i.icon.play:before { content: '\e809'; } /* '' */
-i.icon.plus-circle:before { content: '\2795'; } /* '➕' */
i.icon.plus:before { content: '\2b'; } /* '+' */
i.icon.print:before { content: '\e716'; } /* '' */
-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.right-dir:before { content: '\25b8'; } /* '▸' */
-i.icon.right-open:before { content: '\e75e'; } /* '' */
-i.icon.right:before { content: '\2192'; } /* '→' */
i.icon.rss:before { content: '\e73a'; } /* '' */
i.icon.search:before { content: '🔍'; } /* '\1f50d' */
i.icon.shuffle:before { content: '\e803'; } /* '' */
-i.icon.star:before { content: '\e801'; } /* '' */
-i.icon.star-empty:before { content: '\e800'; } /* '' */
-i.icon.star-half:before { content: '\e701'; } /* '' */
i.icon.stop:before { content: '\e807'; } /* '' */
i.icon.tag:before { content: '\e80a'; } /* '' */
i.icon.tags:before { content: '\e70d'; } /* '' */
i.icon.terminal:before { content: '\e7ac'; } /* '' */
-i.icon.th-alt:before { content: '\e80c'; } /* '' */
-i.icon.th-large:before { content: '\e708'; } /* '' */
-i.icon.th-list:before { content: '\e80b'; } /* '' */
i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */
i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
i.icon.tint:before { content: '\e794'; } /* '' */
@@ -204,9 +191,6 @@ i.icon.to-start-alt: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.up-dir:before { content: '\25b4'; } /* '▴' */
-i.icon.up-open:before { content: '\e75f'; } /* '' */
-i.icon.up:before { content: '\2191'; } /* '↑' */
i.icon.upload-cloud:before { content: '\e711'; } /* '' */
i.icon.user-add:before { content: '\e700'; } /* '' */
i.icon.user:before { content: '👤'; } /* '\1f464' */
@@ -215,3 +199,133 @@ 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'; } /* '' */
+
+
+
+/*--------------
+ Spacing Fix
+---------------*/
+
+i.icon.cloud,
+i.icon.code,
+i.icon.terminal,
+i.icon.twitter-bird,
+i.icon.dollar {
+ margin-left: 0em;
+ padding-right: 0.2em;
+}
+
+i.icon.left,
+i.icon.left-open,
+i.icon.left-dir {
+ width: 1em;
+ margin: 0em 0.5em 0em 0em;
+}
+
+i.icon.up,
+i.icon.up-open,
+i.icon.up-dir,
+i.icon.down,
+i.icon.down-open,
+i.icon.down-dir,
+i.icon.right,
+i.icon.right-open,
+i.icon.right-dir {
+ width: 1em;
+ margin: 0em 0em 0em 0.1em;
+}
+
+i.icon.clock {
+ margin-top: -0.05em;
+}
+
+/*--------------
+ Aliases
+---------------*/
+
+/* 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'; } /* '' */
+
+
+
+/*******************************
+ States
+*******************************/
+
+i.icon.disabled {
+ opacity: 0.3;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+i.strong.icon {
+ opacity: 1;
+}
+
+
+/*-------------------
+ Inverted
+--------------------*/
+
+i.inverted.icon {
+ background-color: #222222;
+ color: #FFFFFF;
+}
+
+/*-------------------
+ Colors
+--------------------*/
+
+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;
+}
+
+/*-------------------
+ Inverted Colors
+--------------------*/
+
+i.inverted.black.icon {
+ background-color: #5C6166 !important;
+ color: #FFFFFF !important;
+}
+i.inverted.blue.icon {
+ background-color: #6ECFF5 !important;
+ color: #FFFFFF !important;
+}
+i.inverted.green.icon {
+ background-color: #A1CF64 !important;
+ color: #FFFFFF !important;
+}
+i.inverted.red.icon {
+ background-color: #EF4D6D !important;
+ color: #FFFFFF !important;
+}
+i.inverted.purple.icon {
+ background-color: #564F8A !important;
+ color: #FFFFFF !important;
+}
+i.inverted.teal.icon {
+ background-color: #00B5AD !important;
+ color: #FFFFFF !important;
+}
\ No newline at end of file