-
-
-
-
Current status of work on Semantic UI
+
UI Language
+
+
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
+
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
+
+
+
+
+
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
+
+
+
+
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
+
+ // hmm
+ .ginormous.ui.thingy {
+ font-size: 1.5em;
+ }
+ // better
+ .large.ui.thingy {
+ font-size: 1.5em;
+ }
-
-
-
- HTML
-
-
- Variations should be defined in one word - if its a class then a word exists for it in english
-
-
- Use Border Box
-
- Use gradients for tinting solid colors
-
- Use ems or rems
-
- Use inline block not float
-
- Use after clear fix
-
- Scale content with ems not pixels
-
- Use box shadow instead of borders for adding borders that dont use box model
-
- Use rgba instead of hexcode unless you dont want color layering to be additive
-
-
+
+
+
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
+
+ .attached.ui.thingy {
+ position: relative;
+ }
+ .left.attached.ui.thingy {
+ left: 0px;
+ top: 50%;
+ margin-top: -0.5em;
+ }
+ .right.attached.ui.thingy {
+ right: 0px;
+ top: 50%;
+ margin-top: -0.5em
+ }
+
+
+
+
+
+
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
+
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
+
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
+
+
+ // hey how do you know this is the third heading?
+ // and what about all the other possible sizes?
+ .ui.thingy h3 {
+
+ }
+
+ // yay the developer can choose what type of heading tag to use
+ .ui.thingy .header {
+
+ }
+
+ // wow this guy is going to have to do a lot of typing...
+ .ui.table .cell {
+
+ }
+ // this seems like a reasonable assumption, html is a bit strict about these things
+ .ui.table td {
+
+ }
+
+
+
+
+
+ // wow this guy is going to have to do a lot of typing...
+ .ui.table .cell {
+
+ }
+ // this seems like a reasonable assumption, html is a bit strict about these things
+ .ui.table td {
+
+ }
+
+
+
+
+
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
+
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
+
+ .ui.thingy {
+ background-color: #FFFFFF;
+ color: rgba(0, 0, 0, 0.7);
+ }
+ .ui.inverted.thingy {
+ background-color: #222222;
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+
+
\ No newline at end of file
diff --git a/node/src/files/components/semantic/collections/table.css b/node/src/files/components/semantic/collections/table.css
index 55320a1f3..d7a33e121 100644
--- a/node/src/files/components/semantic/collections/table.css
+++ b/node/src/files/components/semantic/collections/table.css
@@ -55,7 +55,7 @@
}
/* Table Striping */
.ui.table tbody tr:nth-child(2n) {
- background-color: rgba(0, 0, 0, 0.03);
+ background-color: rgba(0, 0, 50, 0.02);
}
/* Icons */
.ui.table > .icon {
@@ -253,8 +253,7 @@
/* Sortable Table */
.ui.sortable.table thead th {
cursor: pointer;
- color: #555555;
- vertical-align: top;
+ white-space: nowrap;
}
.ui.sortable.table thead th.sorted,
.ui.sortable.table thead th.sorted:hover {
@@ -262,22 +261,19 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.05);
}
.ui.sortable.table thead th:after {
display: inline-block;
content: '';
width: 1em;
opacity: 0.8;
- float: right;
- margin: 0.25em 0em 0em 0.25em;
- line-height: 1;
+ margin: 0em 0em 0em 0.5em;
font-family: 'Icons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
- vertical-align: middle;
- vertical-align: calc();
+ vertical-align: text-top;
}
.ui.sortable.table thead th.ascending:after {
content: '\25b4';
@@ -300,6 +296,20 @@
.ui.collapsing.table {
width: auto;
}
+/*--------------
+ Basic
+---------------*/
+.ui.basic.table th {
+ background-color: transparent;
+ padding: 0.5em;
+ font-weight: normal;
+}
+.ui.basic.table tbody tr {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.basic.table td {
+ padding: 0.8em 0.5em;
+}
/*--------------
Padded
---------------*/
diff --git a/node/src/files/components/semantic/elements/header.css b/node/src/files/components/semantic/elements/header.css
index 2ff5c32b8..794eab27e 100644
--- a/node/src/files/components/semantic/elements/header.css
+++ b/node/src/files/components/semantic/elements/header.css
@@ -31,6 +31,10 @@
line-height: 1.2;
color: rgba(0, 0, 0, 0.5);
}
+.ui.header .content {
+ display: inline-block;
+ vertical-align: middle;
+}
.ui.header .icon {
margin-right: 0.5em;
}
diff --git a/node/src/files/components/semantic/elements/icons.css b/node/src/files/components/semantic/elements/icons.css
index 0b9959be9..29d44a649 100644
--- a/node/src/files/components/semantic/elements/icons.css
+++ b/node/src/files/components/semantic/elements/icons.css
@@ -22,16 +22,6 @@
text-decoration: inherit;
text-transform: none;
}
-@font-face {
- font-family: 'Sketchy Icons';
- src: url(../fonts/sketchy-icons.eot);
- src: url(../fonts/sketchy-icons.eot?#iefix) format('embedded-opentype'), url(../fonts/sketchy-icons.woff) format('woff'), url(../fonts/sketchy-icons.ttf) format('truetype'), url(../fonts/sketchy-icons.svg#icons) format('svg');
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-decoration: inherit;
- text-transform: none;
-}
i.icon {
display: inline-block;
opacity: 0.75;
@@ -53,10 +43,6 @@ i.icon {
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
-i.sketchy.icon {
- font-family: 'Sketchy Icons';
- height: 1em;
-}
/* icons available */
i.icon.circle.attention:before {
content: '\2757';
@@ -554,84 +540,6 @@ i.icon.zoom.out:before {
content: '\e751';
}
/* '' */
-/*******************************
- Additional Icons
-*******************************/
-i.sketchy.icon.camera:before {
- content: "\f100";
-}
-i.sketchy.icon.checkmark.circle:before {
- font-family: "Sketchy Icons";
- content: "\f101";
-}
-i.sketchy.icon.checkmark:before {
- font-family: "Sketchy Icons";
- content: "\f102";
-}
-i.sketchy.icon.clock:before {
- font-family: "Sketchy Icons";
- content: "\f103";
-}
-i.sketchy.icon.comment:before {
- font-family: "Sketchy Icons";
- content: "\f104";
-}
-i.sketchy.icon.improve:before {
- font-family: "Sketchy Icons";
- content: "\f105";
-}
-i.sketchy.icon.influence:before {
- font-family: "Sketchy Icons";
- content: "\f106";
-}
-i.sketchy.icon.invent:before {
- font-family: "Sketchy Icons";
- content: "\f107";
-}
-i.sketchy.icon.launch:before {
- font-family: "Sketchy Icons";
- content: "\f108";
-}
-i.sketchy.icon.location:before {
- font-family: "Sketchy Icons";
- content: "\f109";
-}
-i.sketchy.icon.magnify:before {
- font-family: "Sketchy Icons";
- content: "\f10a";
-}
-i.sketchy.icon.pencil:before {
- font-family: "Sketchy Icons";
- content: "\f10b";
-}
-i.sketchy.icon.profile:before {
- font-family: "Sketchy Icons";
- content: "\f10c";
-}
-i.sketchy.icon.question.circle:before {
- font-family: "Sketchy Icons";
- content: "\f10d";
-}
-i.sketchy.icon.question:before {
- font-family: "Sketchy Icons";
- content: "\f10e";
-}
-i.sketchy.icon.share:before {
- font-family: "Sketchy Icons";
- content: "\f10f";
-}
-i.sketchy.icon.shop:before {
- font-family: "Sketchy Icons";
- content: "\f110";
-}
-i.sketchy.icon.x.circle:before {
- font-family: "Sketchy Icons";
- content: "\f111";
-}
-i.sketchy.icon.x:before {
- font-family: "Sketchy Icons";
- content: "\f112";
-}
/*--------------
Spacing Fix
---------------*/
diff --git a/node/src/files/icons/icons-sketchy.eot b/node/src/files/icons/icons-sketchy.eot
new file mode 100755
index 000000000..a00b74319
Binary files /dev/null and b/node/src/files/icons/icons-sketchy.eot differ
diff --git a/node/src/files/icons/icons-sketchy.svg.REMOVED.git-id b/node/src/files/icons/icons-sketchy.svg.REMOVED.git-id
new file mode 100644
index 000000000..bb1839ecd
--- /dev/null
+++ b/node/src/files/icons/icons-sketchy.svg.REMOVED.git-id
@@ -0,0 +1 @@
+52738f24e5c3ed3c253f61c45ae6b7792cbe263c
\ No newline at end of file
diff --git a/node/src/files/icons/icons-sketchy.ttf b/node/src/files/icons/icons-sketchy.ttf
new file mode 100755
index 000000000..e4881475b
Binary files /dev/null and b/node/src/files/icons/icons-sketchy.ttf differ
diff --git a/node/src/files/icons/icons-sketchy.woff b/node/src/files/icons/icons-sketchy.woff
new file mode 100755
index 000000000..bc5ac73d5
Binary files /dev/null and b/node/src/files/icons/icons-sketchy.woff differ
diff --git a/node/src/files/icons/sketchy.icons.css b/node/src/files/icons/sketchy.icons.css
new file mode 100755
index 000000000..43afdbe3c
--- /dev/null
+++ b/node/src/files/icons/sketchy.icons.css
@@ -0,0 +1,134 @@
+
+/*
+ * Font Custom: semantic css
+ */
+
+@font-face {
+ font-family: 'Sketchy Icons';
+ src: url("icons-sketchy.eot");
+ src:
+ url("icons-sketchy.eot?#iefix") format('embedded-opentype'),
+ url("icons-sketchy.woff") format('woff'),
+ url("icons-sketchy.ttf") format('truetype'),
+ url("icons-sketchy.svg#icons") format('svg')
+ ;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-decoration: inherit;
+ text-transform: none;
+}
+
+i.sketchy.icon {
+
+ display: inline-block;
+ opacity: 0.75;
+
+ margin: 0em 0.48em 0em 0em;
+
+ width: 1em;
+ height: 1em;
+
+ font-family: 'Sketchy Icons';
+ font-style: normal;
+ line-height: 1;
+ font-weight: normal;
+ 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.sketchy.icon.add:before { content: "\f13e"; }
+i.sketchy.icon.alert:before { content: "\f146"; }
+i.sketchy.icon.arrow.eight:before { content: "\f140"; }
+i.sketchy.icon.arrow.eleven:before { content: "\f110"; }
+i.sketchy.icon.arrow.fifteen:before { content: "\f132"; }
+i.sketchy.icon.arrow.five:before { content: "\f112"; }
+i.sketchy.icon.arrow.four:before { content: "\f100"; }
+i.sketchy.icon.arrow.fourteen:before { content: "\f12e"; }
+i.sketchy.icon.arrow.nine:before { content: "\f121"; }
+i.sketchy.icon.arrow.one:before { content: "\f10d"; }
+i.sketchy.icon.arrow.seven:before { content: "\f131"; }
+i.sketchy.icon.arrow.six:before { content: "\f12a"; }
+i.sketchy.icon.arrow.sixteen:before { content: "\f13b"; }
+i.sketchy.icon.arrow.ten:before { content: "\f139"; }
+i.sketchy.icon.arrow.thirteen:before { content: "\f13a"; }
+i.sketchy.icon.arrow.three:before { content: "\f119"; }
+i.sketchy.icon.arrow.twelve:before { content: "\f144"; }
+i.sketchy.icon.arrow.two:before { content: "\f12b"; }
+i.sketchy.icon.browser:before { content: "\f134"; }
+i.sketchy.icon.bullet.one:before { content: "\f11b"; }
+i.sketchy.icon.bullet.three:before { content: "\f10c"; }
+i.sketchy.icon.bullet.two:before { content: "\f123"; }
+i.sketchy.icon.camera:before { content: "\f111"; }
+i.sketchy.icon.categories:before { content: "\f126"; }
+i.sketchy.icon.category.electronics:before { content: "\f149"; }
+i.sketchy.icon.category.electronics.alternate:before { content: "\f113"; }
+i.sketchy.icon.category.health:before { content: "\f12d"; }
+i.sketchy.icon.category.home:before { content: "\f118"; }
+i.sketchy.icon.category.home.alternate:before { content: "\f115"; }
+i.sketchy.icon.category.kitchen:before { content: "\f142"; }
+i.sketchy.icon.category.parenting:before { content: "\f125"; }
+i.sketchy.icon.category.pets:before { content: "\f120"; }
+i.sketchy.icon.category.style:before { content: "\f129"; }
+i.sketchy.icon.category.toys:before { content: "\f145"; }
+i.sketchy.icon.category.travel:before { content: "\f11a"; }
+i.sketchy.icon.category.travel.alternate:before { content: "\f108"; }
+i.sketchy.icon.checkmark:before { content: "\f116"; }
+i.sketchy.icon.checkmark.circle:before { content: "\f128"; }
+i.sketchy.icon.clock:before { content: "\f130"; }
+i.sketchy.icon.comment:before { content: "\f102"; }
+i.sketchy.icon.compare:before { content: "\f10a"; }
+i.sketchy.icon.dont:before { content: "\f114"; }
+i.sketchy.icon.eval:before { content: "\f10e"; }
+i.sketchy.icon.expert:before { content: "\f12f"; }
+i.sketchy.icon.home:before { content: "\f105"; }
+i.sketchy.icon.idea:before { content: "\f109"; }
+i.sketchy.icon.improve:before { content: "\f103"; }
+i.sketchy.icon.influence:before { content: "\f11d"; }
+i.sketchy.icon.information:before { content: "\f13c"; }
+i.sketchy.icon.invent:before { content: "\f13f"; }
+i.sketchy.icon.launch:before { content: "\f127"; }
+i.sketchy.icon.location:before { content: "\f136"; }
+i.sketchy.icon.magnify:before { content: "\f141"; }
+i.sketchy.icon.name:before { content: "\f10b"; }
+i.sketchy.icon.pencil:before { content: "\f122"; }
+i.sketchy.icon.phase.design:before { content: "\f101"; }
+i.sketchy.icon.phase.research:before { content: "\f13d"; }
+i.sketchy.icon.phase.tagline:before { content: "\f117"; }
+i.sketchy.icon.photos:before { content: "\f137"; }
+i.sketchy.icon.play:before { content: "\f104"; }
+i.sketchy.icon.price:before { content: "\f107"; }
+i.sketchy.icon.problem:before { content: "\f11e"; }
+i.sketchy.icon.profile:before { content: "\f133"; }
+i.sketchy.icon.question:before { content: "\f106"; }
+i.sketchy.icon.question.circle:before { content: "\f11c"; }
+i.sketchy.icon.rain.cloud:before { content: "\f124"; }
+i.sketchy.icon.share:before { content: "\f12c"; }
+i.sketchy.icon.shop:before { content: "\f147"; }
+i.sketchy.icon.timeline:before { content: "\f138"; }
+i.sketchy.icon.trashcan:before { content: "\f135"; }
+i.sketchy.icon.vote.down:before { content: "\f11f"; }
+i.sketchy.icon.vote.up:before { content: "\f143"; }
+i.sketchy.icon.x:before { content: "\f148"; }
+i.sketchy.icon.x.circle:before { content: "\f10f"; }
+
+
+/*------------------
+ Glyph Sizing
+-------------------*/
+
+i.sketchy.circular.icon,
+i.sketchy.square.icon {
+ padding: 0.35em !important;
+}
diff --git a/node/src/files/stylesheets/menu.css b/node/src/files/stylesheets/menu.css
new file mode 100755
index 000000000..d132b116d
--- /dev/null
+++ b/node/src/files/stylesheets/menu.css
@@ -0,0 +1,120 @@
+.ui.menu {
+ background-image: -webkit-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -moz-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -o-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -ms-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+.ui.tiered.menu {
+ background-image: -webkit-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.02) 100%)
+ ;
+ background-image: -moz-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.02) 100%)
+ ;
+ background-image: -o-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.02) 100%)
+ ;
+ background-image: -ms-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.02) 100%)
+ ;
+ background-image: linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.02) 100%)
+ ;
+}
+.ui.tiered.menu .item.active {
+ -moz-box-shadow: 0px 1px 0px 0px #F9F9F9;
+ -webkit-box-shadow: 0px 1px 0px 0px #F9F9F9;
+ box-shadow: 0px 1px 0px 0px #F9F9F9;
+}
+
+.ui.pointing.menu .active.item:after {
+ background-color: #F1F1F1;
+}
+.ui.vertical.pointing.menu .active.item:after {
+ background-color: #FAFAFA;
+}
+
+
+.ui.vertical.menu,
+.ui.secondary.menu,
+.ui.text.menu {
+ background-image: none;
+}
+
+.ui.vertical.menu .item {
+ background-image: -webkit-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.01) 100%)
+ ;
+ background-image: -moz-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.01) 100%)
+ ;
+ background-image: -o-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.01) 100%)
+ ;
+ background-image: -ms-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.01) 100%)
+ ;
+ background-image: linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.01) 100%)
+ ;
+}
+.ui.inverted.vertical.menu .item {
+ background-image: -webkit-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -moz-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -o-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: -ms-linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+ background-image: linear-gradient(top,
+ transparent 0%,
+ rgba(0, 0, 0, 0.05) 100%)
+ ;
+}
+.ui.vertical.menu .item .menu .item {
+ background-image: none;
+}
+
+.ui.vertical.secondary.menu .item,
+.ui.vertical.secondary.menu .item,
+.ui.vertical.secondary.menu .item {
+ background-image: none;
+}
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index fc97b0143..16ba0ab77 100755
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@@ -75,6 +75,14 @@
diff --git a/src/collections/table.less b/src/collections/table.less
index ee52556db..0ca1c527f 100755
--- a/src/collections/table.less
+++ b/src/collections/table.less
@@ -65,7 +65,7 @@
/* Table Striping */
.ui.table tbody tr:nth-child(2n) {
- background-color: rgba(0, 0, 0, 0.03);
+ background-color: rgba(0, 0, 50, 0.02);
}
/* Icons */
@@ -288,8 +288,7 @@
/* Sortable Table */
.ui.sortable.table thead th {
cursor: pointer;
- color: #555555;
- vertical-align: top;
+ white-space: nowrap;
}
.ui.sortable.table thead th.sorted,
.ui.sortable.table thead th.sorted:hover {
@@ -298,7 +297,7 @@
-ms-user-select: none;
user-select: none;
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.05);
}
.ui.sortable.table thead th:after {
@@ -307,17 +306,14 @@
width: 1em;
opacity: 0.8;
- float: right;
- margin: 0.25em 0em 0em 0.25em;
- line-height: 1;
+ margin: 0em 0em 0em 0.5em;
font-family: 'Icons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
- vertical-align: middle;
- vertical-align: calc();
+ vertical-align: text-top;
}
.ui.sortable.table thead th.ascending:after {
content: '\25b4';
@@ -346,6 +342,22 @@
width: auto;
}
+/*--------------
+ Basic
+---------------*/
+
+.ui.basic.table th {
+ background-color: transparent;
+ padding: 0.5em;
+ font-weight: normal;
+}
+.ui.basic.table tbody tr {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.basic.table td {
+ padding: 0.8em 0.5em;
+}
+
/*--------------
Padded
diff --git a/src/elements/.button b/src/elements/.button
deleted file mode 100755
index 2e313541b..000000000
--- a/src/elements/.button
+++ /dev/null
@@ -1,54 +0,0 @@
-{
- "Name": "Button",
- "src": "",
- "Type": "UI Element",
- "States": {
- "Active": "active",
- "Loading": "loading",
- "Disabled": "disabled"
- },
- "Types": {
- "Singular": {
- "Standard": ".ui.button",
- "Icon": ".ui.icon.button",
- "Labeled Icon": ".ui.labeled.icon.button"
- },
- "Plural": {
- "Standard": ".buttons > .button+.button+.button",
- "Conditional": ".buttons > .button+.or+.button",
- "Vertical": ".vertical.buttons > .button+.button+.button"
- }
- },
- "Variations": {
- "Ordinality": [
- "secondary",
- "tertiary"
- ],
- "Size": [
- "mini",
- "tiny",
- "small",
- "medium",
- "large",
- "huge",
- "massive"
- ],
- "Color": [
- "black",
- "green",
- "red",
- "blue",
- "green",
- "red",
- "teal"
- ],
- "Attached": [
- "attached top",
- "attached bottom",
- "attached left",
- "attached right"
- ],
- "Circular": "circular",
- "Fluid": "fluid"
- }
-}
\ No newline at end of file
diff --git a/src/elements/header.less b/src/elements/header.less
index 4b23e1b47..55aa340a5 100755
--- a/src/elements/header.less
+++ b/src/elements/header.less
@@ -38,6 +38,10 @@
color: rgba(0, 0, 0, 0.5);
}
+.ui.header .content {
+ display: inline-block;
+ vertical-align: middle;
+}
.ui.header .icon {
margin-right: 0.5em;
}
diff --git a/src/elements/icons.less b/src/elements/icons.less
index bade14f34..32a0de576 100755
--- a/src/elements/icons.less
+++ b/src/elements/icons.less
@@ -32,23 +32,6 @@
text-transform: none;
}
-@font-face {
- font-family: 'Sketchy Icons';
- src: url(../fonts/sketchy-icons.eot);
- src:
- url(../fonts/sketchy-icons.eot?#iefix) format('embedded-opentype'),
- url(../fonts/sketchy-icons.woff) format('woff'),
- url(../fonts/sketchy-icons.ttf) format('truetype'),
- url(../fonts/sketchy-icons.svg#icons) format('svg')
- ;
-
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-decoration: inherit;
- text-transform: none;
-}
-
i.icon {
display: inline-block;
opacity: 0.75;
@@ -77,11 +60,6 @@ i.icon {
font-smoothing: antialiased;
}
-i.sketchy.icon {
- font-family: 'Sketchy Icons';
- height: 1em;
-}
-
/* icons available */
i.icon.circle.attention:before { content: '\2757'; } /* '❗' */
i.icon.circle.help:before { content: '\e704'; } /* '' */
@@ -222,31 +200,6 @@ i.icon.id:before { content: '\e722'; } /* '' */
i.icon.zoom.in:before { content: '\e750'; } /* '' */
i.icon.zoom.out:before { content: '\e751'; } /* '' */
-/*******************************
- Additional Icons
-*******************************/
-
-i.sketchy.icon.camera:before { content: "\f100"; }
-i.sketchy.icon.checkmark.circle:before { font-family: "Sketchy Icons"; content: "\f101"; }
-i.sketchy.icon.checkmark:before { font-family: "Sketchy Icons"; content: "\f102"; }
-i.sketchy.icon.clock:before { font-family: "Sketchy Icons"; content: "\f103"; }
-i.sketchy.icon.comment:before { font-family: "Sketchy Icons"; content: "\f104"; }
-i.sketchy.icon.improve:before { font-family: "Sketchy Icons"; content: "\f105"; }
-i.sketchy.icon.influence:before { font-family: "Sketchy Icons"; content: "\f106"; }
-i.sketchy.icon.invent:before { font-family: "Sketchy Icons"; content: "\f107"; }
-i.sketchy.icon.launch:before { font-family: "Sketchy Icons"; content: "\f108"; }
-i.sketchy.icon.location:before { font-family: "Sketchy Icons"; content: "\f109"; }
-i.sketchy.icon.magnify:before { font-family: "Sketchy Icons"; content: "\f10a"; }
-i.sketchy.icon.pencil:before { font-family: "Sketchy Icons"; content: "\f10b"; }
-i.sketchy.icon.profile:before { font-family: "Sketchy Icons"; content: "\f10c"; }
-i.sketchy.icon.question.circle:before { font-family: "Sketchy Icons"; content: "\f10d"; }
-i.sketchy.icon.question:before { font-family: "Sketchy Icons"; content: "\f10e"; }
-i.sketchy.icon.share:before { font-family: "Sketchy Icons"; content: "\f10f"; }
-i.sketchy.icon.shop:before { font-family: "Sketchy Icons"; content: "\f110"; }
-i.sketchy.icon.x.circle:before { font-family: "Sketchy Icons"; content: "\f111"; }
-i.sketchy.icon.x:before { font-family: "Sketchy Icons"; content: "\f112"; }
-
-
/*--------------
Spacing Fix
---------------*/