- {headings.map(heading => (
+ {headings.map((heading) => (
@@ -66,7 +66,7 @@ const TOC = ({ toc, releases }) => (
Edge (latest)
- {releases.map(release => (
+ {releases.map((release) => (
e.node)}
- releases={releases.edges.map(r => r.node)}
+ toc={toc.edges.map((e) => e.node)}
+ releases={releases.edges.map((r) => r.node)}
/>
diff --git a/ui/dist/components/button.css b/ui/dist/components/button.css
index 82a7535cac5..ade6a18a66f 100644
--- a/ui/dist/components/button.css
+++ b/ui/dist/components/button.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Button
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Button
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -23,7 +23,7 @@
background: #E0E1E2 none;
color: rgba(0, 0, 0, 0.6);
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
- margin: 0em 0.25em 0em 0em;
+ margin: 0 0.25em 0 0;
padding: 0.6875em 1.5em 0.6875em;
text-transform: none;
text-shadow: none;
@@ -33,8 +33,8 @@
text-align: center;
text-decoration: none;
border-radius: 0.25rem;
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -43,7 +43,7 @@
transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
- will-change: '';
+ will-change: auto;
-webkit-tap-highlight-color: transparent;
}
@@ -60,8 +60,8 @@
.ui.button:hover {
background-color: #CACBCD;
background-image: none;
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
color: rgba(0, 0, 0, 0.8);
}
.ui.button:hover .icon {
@@ -75,9 +75,9 @@
.ui.button:focus {
background-color: #CACBCD;
color: rgba(0, 0, 0, 0.8);
- background-image: '' !important;
- -webkit-box-shadow: '' !important;
- box-shadow: '' !important;
+ background-image: none;
+ -webkit-box-shadow: '';
+ box-shadow: '';
}
.ui.button:focus .icon {
opacity: 0.85;
@@ -92,8 +92,8 @@
background-color: #BABBBC;
background-image: '';
color: rgba(0, 0, 0, 0.9);
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset, none;
- box-shadow: 0px 0px 0px 1px transparent inset, none;
+ -webkit-box-shadow: 0 0 0 1px transparent inset, none;
+ box-shadow: 0 0 0 1px transparent inset, none;
}
/*--------------
@@ -103,8 +103,8 @@
.ui.active.button {
background-color: #C0C1C2;
background-image: none;
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset;
- box-shadow: 0px 0px 0px 1px transparent inset;
+ -webkit-box-shadow: 0 0 0 1px transparent inset;
+ box-shadow: 0 0 0 1px transparent inset;
color: rgba(0, 0, 0, 0.95);
}
.ui.active.button:hover {
@@ -127,7 +127,7 @@
position: relative;
cursor: default;
text-shadow: none !important;
- color: transparent !important;
+ color: transparent;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0s linear, opacity 0.1s ease;
@@ -138,7 +138,7 @@
content: '';
top: 50%;
left: 50%;
- margin: -0.65625em 0em 0em -0.65625em;
+ margin: -0.65625em 0 0 -0.65625em;
width: 1.3125em;
height: 1.3125em;
border-radius: 500rem;
@@ -149,66 +149,43 @@
content: '';
top: 50%;
left: 50%;
- margin: -0.65625em 0em 0em -0.65625em;
+ margin: -0.65625em 0 0 -0.65625em;
width: 1.3125em;
height: 1.3125em;
- -webkit-animation: button-spin 0.6s linear;
- animation: button-spin 0.6s linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
border-radius: 500rem;
- border-color: #FFFFFF transparent transparent;
- border-style: solid;
- border-width: 0.2em;
- -webkit-box-shadow: 0px 0px 0px 1px transparent;
- box-shadow: 0px 0px 0px 1px transparent;
+ -webkit-animation: loader 0.6s infinite linear;
+ animation: loader 0.6s infinite linear;
+ border: 0.2em solid currentColor;
+ color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 1px transparent;
+ box-shadow: 0 0 0 1px transparent;
}
.ui.labeled.icon.loading.button .icon {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
-@-webkit-keyframes button-spin {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes button-spin {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
.ui.basic.loading.button:not(.inverted):before {
border-color: rgba(0, 0, 0, 0.1);
}
.ui.basic.loading.button:not(.inverted):after {
- border-top-color: #767676;
+ border-color: #767676;
}
/*-------------------
- Disabled
---------------------*/
+ Disabled
+ --------------------*/
-.ui.buttons .disabled.button,
+.ui.buttons .disabled.button:not(.basic),
.ui.disabled.button,
.ui.button:disabled,
.ui.disabled.button:hover,
.ui.disabled.active.button {
cursor: default;
opacity: 0.45 !important;
- background-image: none !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ background-image: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
pointer-events: none !important;
}
@@ -224,13 +201,13 @@
/*-------------------
- Animated
---------------------*/
+ Animated
+ --------------------*/
.ui.animated.button {
position: relative;
overflow: hidden;
- padding-right: 0em !important;
+ padding-right: 0 !important;
vertical-align: middle;
z-index: 1;
}
@@ -254,7 +231,7 @@
}
.ui.animated.button .visible.content {
left: auto;
- right: 0%;
+ right: 0;
}
.ui.animated.button .hidden.content {
top: 50%;
@@ -270,7 +247,7 @@
.ui.animated.button:focus .hidden.content,
.ui.animated.button:hover .hidden.content {
left: auto;
- right: 0%;
+ right: 0;
}
/* Vertical */
@@ -288,7 +265,7 @@
}
.ui.vertical.animated.button .hidden.content {
top: -50%;
- left: 0%;
+ left: 0;
right: auto;
}
.ui.vertical.animated.button:focus .visible.content,
@@ -320,7 +297,7 @@
}
.ui.fade.animated.button .hidden.content {
opacity: 0;
- left: 0%;
+ left: 0;
right: auto;
-webkit-transform: scale(1.5);
transform: scale(1.5);
@@ -335,7 +312,7 @@
}
.ui.fade.animated.button:focus .hidden.content,
.ui.fade.animated.button:hover .hidden.content {
- left: 0%;
+ left: 0;
right: auto;
opacity: 1;
-webkit-transform: scale(1);
@@ -343,12 +320,12 @@
}
/*-------------------
- Inverted
---------------------*/
+ Inverted
+ --------------------*/
.ui.inverted.button {
- -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
- box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
+ -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
+ box-shadow: 0 0 0 2px #FFFFFF inset;
background: transparent none;
color: #FFFFFF;
text-shadow: none !important;
@@ -356,16 +333,16 @@
/* Group */
.ui.inverted.buttons .button {
- margin: 0px 0px 0px -2px;
+ margin: 0 0 0 -2px;
}
.ui.inverted.buttons .button:first-child {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.inverted.vertical.buttons .button {
- margin: 0px 0px -2px 0px;
+ margin: 0 0 -2px 0;
}
.ui.inverted.vertical.buttons .button:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
/* States */
@@ -373,8 +350,8 @@
/* Hover */
.ui.inverted.button:hover {
background: #FFFFFF;
- -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
- box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
+ -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
+ box-shadow: 0 0 0 2px #FFFFFF inset;
color: rgba(0, 0, 0, 0.8);
}
@@ -382,22 +359,22 @@
.ui.inverted.button:focus,
.ui.inverted.button.active {
background: #FFFFFF;
- -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
- box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
+ -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
+ box-shadow: 0 0 0 2px #FFFFFF inset;
color: rgba(0, 0, 0, 0.8);
}
/* Active Focus */
.ui.inverted.button.active:focus {
background: #DCDDDE;
- -webkit-box-shadow: 0px 0px 0px 2px #DCDDDE inset !important;
- box-shadow: 0px 0px 0px 2px #DCDDDE inset !important;
+ -webkit-box-shadow: 0 0 0 2px #DCDDDE inset;
+ box-shadow: 0 0 0 2px #DCDDDE inset;
color: rgba(0, 0, 0, 0.8);
}
/*-------------------
- Labeled Button
---------------------*/
+ Labeled Button
+ --------------------*/
.ui.labeled.button:not(.icon) {
display: -webkit-inline-box;
@@ -407,14 +384,14 @@
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
- background: none !important;
- padding: 0px !important;
- border: none !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ background: none;
+ padding: 0 !important;
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
.ui.labeled.button > .button {
- margin: 0px;
+ margin: 0;
}
.ui.labeled.button > .label {
display: -webkit-box;
@@ -423,9 +400,9 @@
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
- margin: 0px 0px 0px -1px !important;
- padding: '';
+ margin: 0 0 0 -1px !important;
font-size: 1em;
+ padding: '';
border-color: rgba(34, 36, 38, 0.15);
}
@@ -437,27 +414,27 @@
/* Right */
.ui.labeled.button:not([class*="left labeled"]) > .button {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
.ui.labeled.button:not([class*="left labeled"]) > .label {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
/* Left Side */
.ui[class*="left labeled"].button > .button {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
.ui[class*="left labeled"].button > .label {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
/*-------------------
- Social
---------------------*/
+ Social
+ --------------------*/
/* Facebook */
@@ -466,8 +443,8 @@
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.facebook.button:hover {
background-color: #304d8a;
@@ -482,20 +459,20 @@
/* Twitter */
.ui.twitter.button {
- background-color: #55ACEE;
+ background-color: #1DA1F2;
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.twitter.button:hover {
- background-color: #35a2f4;
+ background-color: #0298f3;
color: #FFFFFF;
text-shadow: none;
}
.ui.twitter.button:active {
- background-color: #2795e9;
+ background-color: #0c85d0;
color: #FFFFFF;
text-shadow: none;
}
@@ -506,8 +483,8 @@
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.google.plus.button:hover {
background-color: #e0321c;
@@ -522,17 +499,17 @@
/* Linked In */
.ui.linkedin.button {
- background-color: #1F88BE;
+ background-color: #0077B5;
color: #FFFFFF;
text-shadow: none;
}
.ui.linkedin.button:hover {
- background-color: #147baf;
+ background-color: #00669c;
color: #FFFFFF;
text-shadow: none;
}
.ui.linkedin.button:active {
- background-color: #186992;
+ background-color: #005582;
color: #FFFFFF;
text-shadow: none;
}
@@ -543,8 +520,8 @@
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.youtube.button:hover {
background-color: #e60000;
@@ -563,8 +540,8 @@
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.instagram.button:hover {
background-color: #3d698e;
@@ -583,8 +560,8 @@
color: #FFFFFF;
text-shadow: none;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.pinterest.button:hover {
background-color: #ac0013;
@@ -599,18 +576,52 @@
/* VK */
.ui.vk.button {
- background-color: #4D7198;
+ background-color: #45668E;
color: #FFFFFF;
background-image: none;
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.vk.button:hover {
- background-color: #41648a;
+ background-color: #395980;
color: #FFFFFF;
}
.ui.vk.button:active {
- background-color: #3c5876;
+ background-color: #344d6c;
+ color: #FFFFFF;
+}
+
+/* WhatsApp */
+.ui.whatsapp.button {
+ background-color: #25D366;
+ color: #FFFFFF;
+ background-image: none;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+.ui.whatsapp.button:hover {
+ background-color: #19c55a;
+ color: #FFFFFF;
+}
+.ui.whatsapp.button:active {
+ background-color: #1da851;
+ color: #FFFFFF;
+}
+
+/* Telegram */
+.ui.telegram.button {
+ background-color: #0088CC;
+ color: #FFFFFF;
+ background-image: none;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+.ui.telegram.button:hover {
+ background-color: #0077b3;
+ color: #FFFFFF;
+}
+.ui.telegram.button:active {
+ background-color: #006699;
color: #FFFFFF;
}
@@ -619,19 +630,20 @@
---------------*/
.ui.button > .icon:not(.button) {
- height: 0.875em;
+ height: auto;
opacity: 0.8;
- margin: 0em 0.375em 0em -0.1875em;
+ margin: 0 0.375em 0 -0.1875em;
-webkit-transition: opacity 0.1s ease;
transition: opacity 0.1s ease;
vertical-align: '';
color: '';
}
-.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
- margin: 0em 0.375em 0em -0.1875em;
+.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
+ margin: 0 0.375em 0 -0.1875em;
}
.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
- margin: 0em -0.1875em 0em 0.375em;
+ margin: 0 -0.1875em 0 0.375em;
}
@@ -641,25 +653,25 @@
/*-------------------
- Floated
---------------------*/
+ Floated
+ --------------------*/
.ui[class*="left floated"].buttons,
.ui[class*="left floated"].button {
float: left;
- margin-left: 0em;
+ margin-left: 0;
margin-right: 0.25em;
}
.ui[class*="right floated"].buttons,
.ui[class*="right floated"].button {
float: right;
- margin-right: 0em;
+ margin-right: 0;
margin-left: 0.25em;
}
/*-------------------
- Compact
---------------------*/
+ Compact
+ --------------------*/
.ui.compact.buttons .button,
.ui.compact.button {
@@ -673,49 +685,67 @@
.ui.compact.labeled.icon.button {
padding: 0.515625em 3.5em 0.515625em;
}
+.ui.compact.labeled.icon.buttons .button > .icon,
+.ui.compact.labeled.icon.button > .icon {
+ padding: 0.515625em 0 0.515625em 0;
+}
/*-------------------
Sizes
--------------------*/
+.ui.buttons .button,
+.ui.buttons .or,
+.ui.button {
+ font-size: 1rem;
+}
+.ui.mini.buttons .dropdown,
+.ui.mini.buttons .dropdown .menu > .item,
.ui.mini.buttons .button,
.ui.mini.buttons .or,
-.ui.mini.button {
+.ui.ui.ui.ui.mini.button {
font-size: 0.8125rem;
}
+.ui.tiny.buttons .dropdown,
+.ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button,
.ui.tiny.buttons .or,
-.ui.tiny.button {
+.ui.ui.ui.ui.tiny.button {
font-size: 0.875rem;
}
+.ui.small.buttons .dropdown,
+.ui.small.buttons .dropdown .menu > .item,
.ui.small.buttons .button,
.ui.small.buttons .or,
-.ui.small.button {
+.ui.ui.ui.ui.small.button {
font-size: 0.9375rem;
}
-.ui.buttons .button,
-.ui.buttons .or,
-.ui.button {
- font-size: 1rem;
-}
+.ui.large.buttons .dropdown,
+.ui.large.buttons .dropdown .menu > .item,
.ui.large.buttons .button,
.ui.large.buttons .or,
-.ui.large.button {
+.ui.ui.ui.ui.large.button {
font-size: 1.125rem;
}
+.ui.big.buttons .dropdown,
+.ui.big.buttons .dropdown .menu > .item,
.ui.big.buttons .button,
.ui.big.buttons .or,
-.ui.big.button {
+.ui.ui.ui.ui.big.button {
font-size: 1.3125rem;
}
+.ui.huge.buttons .dropdown,
+.ui.huge.buttons .dropdown .menu > .item,
.ui.huge.buttons .button,
.ui.huge.buttons .or,
-.ui.huge.button {
+.ui.ui.ui.ui.huge.button {
font-size: 1.4375rem;
}
+.ui.massive.buttons .dropdown,
+.ui.massive.buttons .dropdown .menu > .item,
.ui.massive.buttons .button,
.ui.massive.buttons .or,
-.ui.massive.button {
+.ui.ui.ui.ui.massive.button {
font-size: 1.6875rem;
}
@@ -730,24 +760,24 @@
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
opacity: 0.9;
- margin: 0em !important;
+ margin: 0 !important;
vertical-align: top;
}
/*-------------------
- Basic
---------------------*/
+ Basic
+ --------------------*/
.ui.basic.buttons .button,
.ui.basic.button {
- background: transparent none !important;
- color: rgba(0, 0, 0, 0.6) !important;
+ background: transparent none;
+ color: rgba(0, 0, 0, 0.6);
font-weight: normal;
border-radius: 0.25rem;
text-transform: none;
text-shadow: none !important;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
}
.ui.basic.buttons {
-webkit-box-shadow: none;
@@ -756,35 +786,35 @@
border-radius: 0.25rem;
}
.ui.basic.buttons .button {
- border-radius: 0em;
+ border-radius: 0;
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
- background: #FFFFFF !important;
- color: rgba(0, 0, 0, 0.8) !important;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
+ background: #FFFFFF;
+ color: rgba(0, 0, 0, 0.8);
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.basic.buttons .button:focus,
.ui.basic.button:focus {
- background: #FFFFFF !important;
- color: rgba(0, 0, 0, 0.8) !important;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
+ background: #FFFFFF;
+ color: rgba(0, 0, 0, 0.8);
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.basic.buttons .button:active,
.ui.basic.button:active {
- background: #F8F8F8 !important;
- color: rgba(0, 0, 0, 0.9) !important;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;
+ background: #F8F8F8;
+ color: rgba(0, 0, 0, 0.9);
+ -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.basic.buttons .active.button,
.ui.basic.active.button {
- background: rgba(0, 0, 0, 0.05) !important;
- -webkit-box-shadow: '' !important;
- box-shadow: '' !important;
- color: rgba(0, 0, 0, 0.95) !important;
+ background: rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: '';
+ box-shadow: '';
+ color: rgba(0, 0, 0, 0.95);
}
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
@@ -793,58 +823,58 @@
/* Vertical */
.ui.basic.buttons .button:hover {
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset;
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset;
}
.ui.basic.buttons .button:active {
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
+ -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset;
}
.ui.basic.buttons .active.button {
- -webkit-box-shadow: '' !important;
- box-shadow: '' !important;
+ -webkit-box-shadow: '';
+ box-shadow: '';
}
/* Standard Basic Inverted */
.ui.basic.inverted.buttons .button,
.ui.basic.inverted.button {
- background-color: transparent !important;
- color: #F9FAFB !important;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
+ background-color: transparent;
+ color: #F9FAFB;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
}
.ui.basic.inverted.buttons .button:hover,
.ui.basic.inverted.button:hover {
- color: #FFFFFF !important;
- -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
- box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+ color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 2px #ffffff inset;
+ box-shadow: 0 0 0 2px #ffffff inset;
}
.ui.basic.inverted.buttons .button:focus,
.ui.basic.inverted.button:focus {
- color: #FFFFFF !important;
- -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
- box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+ color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 2px #ffffff inset;
+ box-shadow: 0 0 0 2px #ffffff inset;
}
.ui.basic.inverted.buttons .button:active,
.ui.basic.inverted.button:active {
- background-color: rgba(255, 255, 255, 0.08) !important;
- color: #FFFFFF !important;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
+ background-color: rgba(255, 255, 255, 0.08);
+ color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
}
.ui.basic.inverted.buttons .active.button,
.ui.basic.inverted.active.button {
background-color: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
text-shadow: none;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
}
.ui.basic.inverted.buttons .active.button:hover,
.ui.basic.inverted.active.button:hover {
background-color: rgba(255, 255, 255, 0.15);
- -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
- box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+ -webkit-box-shadow: 0 0 0 2px #ffffff inset;
+ box-shadow: 0 0 0 2px #ffffff inset;
}
/* Basic Group */
@@ -855,18 +885,53 @@
}
.ui.basic.vertical.buttons .button {
border-left: none;
-}
-.ui.basic.vertical.buttons .button {
- border-left-width: 0px;
+ border-left-width: 0;
border-top: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.basic.vertical.buttons .button:first-child {
- border-top-width: 0px;
+ border-top-width: 0;
+}
+
+/*-------------------
+ Tertiary
+ --------------------*/
+
+
+/* Overline Mixin */
+.ui.tertiary.button {
+ -webkit-transition: color 0.1s ease !important;
+ transition: color 0.1s ease !important;
+ border-radius: 0;
+ margin: 0.1875em 0.25em 0.1875em 0 !important;
+ padding: 0.5em !important;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: rgba(0, 0, 0, 0.6);
+ background: none;
+}
+.ui.tertiary.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #666666;
+ box-shadow: inset 0 -0.2em 0 #666666;
+ color: #333333;
+ background: none;
+}
+.ui.tertiary.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #666666;
+ box-shadow: inset 0 -0.2em 0 #666666;
+ color: #333333;
+ background: none;
+}
+.ui.tertiary.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #999999;
+ box-shadow: inset 0 -0.2em 0 #999999;
+ border-radius: 0.25rem 0.25rem 0 0;
+ color: #666666;
+ background: none;
}
/*--------------
- Labeled Icon
----------------*/
+ Labeled Icon
+ ---------------*/
.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
@@ -879,25 +944,23 @@
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
position: absolute;
+ top: 0;
+ left: 0;
height: 100%;
line-height: 1;
- border-radius: 0px;
+ border-radius: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
text-align: center;
- margin: 0em;
+ -webkit-animation: none;
+ animation: none;
+ padding: 0.6875em 0 0.6875em 0;
+ margin: 0;
width: 2.375em;
background-color: rgba(0, 0, 0, 0.05);
color: '';
- -webkit-box-shadow: -1px 0px 0px 0px transparent inset;
- box-shadow: -1px 0px 0px 0px transparent inset;
-}
-
-/* Left Labeled */
-.ui.labeled.icon.buttons > .button > .icon,
-.ui.labeled.icon.button > .icon {
- top: 0em;
- left: 0em;
+ -webkit-box-shadow: -1px 0 0 0 transparent inset;
+ box-shadow: -1px 0 0 0 transparent inset;
}
/* Right Labeled */
@@ -907,27 +970,25 @@
}
.ui[class*="right labeled"].icon.button > .icon {
left: auto;
- right: 0em;
- border-radius: 0px;
+ right: 0;
+ border-radius: 0;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
- -webkit-box-shadow: 1px 0px 0px 0px transparent inset;
- box-shadow: 1px 0px 0px 0px transparent inset;
+ -webkit-box-shadow: 1px 0 0 0 transparent inset;
+ box-shadow: 1px 0 0 0 transparent inset;
}
.ui.labeled.icon.buttons > .button > .icon:before,
.ui.labeled.icon.button > .icon:before,
.ui.labeled.icon.buttons > .button > .icon:after,
.ui.labeled.icon.button > .icon:after {
display: block;
- position: absolute;
+ position: relative;
width: 100%;
- top: 50%;
+ top: 0;
text-align: center;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
}
.ui.labeled.icon.buttons .button > .icon {
- border-radius: 0em;
+ border-radius: 0;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
border-top-left-radius: 0.25rem;
@@ -938,45 +999,44 @@
border-bottom-right-radius: 0.25rem;
}
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
- border-radius: 0em;
+ border-radius: 0;
border-top-left-radius: 0.25rem;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
- border-radius: 0em;
+ border-radius: 0;
border-bottom-left-radius: 0.25rem;
}
-/* Fluid Labeled */
-.ui.fluid[class*="left labeled"].icon.button,
-.ui.fluid[class*="right labeled"].icon.button {
- padding-left: 1.5em !important;
- padding-right: 1.5em !important;
+/* Loading Icon in Labeled Button */
+.ui.labeled.icon.button > .loading.icon:before {
+ -webkit-animation: loader 2s linear infinite;
+ animation: loader 2s linear infinite;
}
/*--------------
- Toggle
----------------*/
+ Toggle
+ ---------------*/
/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .active.button,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
- background-color: #21BA45 !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ background-color: #21BA45;
+ -webkit-box-shadow: none;
+ box-shadow: none;
text-shadow: none;
- color: #FFFFFF !important;
+ color: #FFFFFF;
}
.ui.button.toggle.active:hover {
- background-color: #16ab39 !important;
+ background-color: #16ab39;
text-shadow: none;
- color: #FFFFFF !important;
+ color: #FFFFFF;
}
/*--------------
- Circular
----------------*/
+ Circular
+ ---------------*/
.ui.circular.button {
border-radius: 10em;
@@ -987,8 +1047,8 @@
}
/*-------------------
- Or Buttons
---------------------*/
+ Or Buttons
+ --------------------*/
.ui.buttons .or {
position: relative;
@@ -1013,8 +1073,8 @@
color: rgba(0, 0, 0, 0.4);
font-style: normal;
font-weight: bold;
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset;
- box-shadow: 0px 0px 0px 1px transparent inset;
+ -webkit-box-shadow: 0 0 0 1px transparent inset;
+ box-shadow: 0 0 0 1px transparent inset;
}
.ui.buttons .or[data-text]:before {
content: attr(data-text);
@@ -1022,33 +1082,33 @@
/* Fluid Or */
.ui.fluid.buttons .or {
- width: 0em !important;
+ width: 0 !important;
}
.ui.fluid.buttons .or:after {
display: none;
}
/*-------------------
- Attached
---------------------*/
+ Attached
+ --------------------*/
/* Singular */
.ui.attached.button {
position: relative;
display: block;
- margin: 0em;
- border-radius: 0em;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;
+ margin: 0;
+ border-radius: 0;
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15);
}
/* Top / Bottom */
.ui.attached.top.button {
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.attached.bottom.button {
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
/* Left / Right */
@@ -1057,13 +1117,13 @@
border-left: none;
text-align: right;
padding-right: 0.75em;
- border-radius: 0.25rem 0em 0em 0.25rem;
+ border-radius: 0.25rem 0 0 0.25rem;
}
.ui.right.attached.button {
display: inline-block;
text-align: left;
padding-left: 0.75em;
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
}
/* Plural */
@@ -1072,42 +1132,42 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- border-radius: 0em;
+ border-radius: 0;
width: auto !important;
- z-index: 2;
+ z-index: auto;
margin-left: -1px;
margin-right: -1px;
}
.ui.attached.buttons .button {
- margin: 0em;
+ margin: 0;
}
.ui.attached.buttons .button:first-child {
- border-radius: 0em;
+ border-radius: 0;
}
.ui.attached.buttons .button:last-child {
- border-radius: 0em;
+ border-radius: 0;
}
/* Top / Bottom */
.ui[class*="top attached"].buttons {
margin-bottom: -1px;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui[class*="top attached"].buttons .button:first-child {
- border-radius: 0.25rem 0em 0em 0em;
+ border-radius: 0.25rem 0 0 0;
}
.ui[class*="top attached"].buttons .button:last-child {
- border-radius: 0em 0.25rem 0em 0em;
+ border-radius: 0 0.25rem 0 0;
}
.ui[class*="bottom attached"].buttons {
margin-top: -1px;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
.ui[class*="bottom attached"].buttons .button:first-child {
- border-radius: 0em 0em 0em 0.25rem;
+ border-radius: 0 0 0 0.25rem;
}
.ui[class*="bottom attached"].buttons .button:last-child {
- border-radius: 0em 0em 0.25rem 0em;
+ border-radius: 0 0 0.25rem 0;
}
/* Left / Right */
@@ -1115,38 +1175,38 @@
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
- margin-right: 0em;
+ margin-right: 0;
margin-left: -1px;
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
}
.ui[class*="left attached"].buttons .button:first-child {
margin-left: -1px;
- border-radius: 0em 0.25rem 0em 0em;
+ border-radius: 0 0.25rem 0 0;
}
.ui[class*="left attached"].buttons .button:last-child {
margin-left: -1px;
- border-radius: 0em 0em 0.25rem 0em;
+ border-radius: 0 0 0.25rem 0;
}
.ui[class*="right attached"].buttons {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
- margin-left: 0em;
+ margin-left: 0;
margin-right: -1px;
- border-radius: 0.25rem 0em 0em 0.25rem;
+ border-radius: 0.25rem 0 0 0.25rem;
}
.ui[class*="right attached"].buttons .button:first-child {
margin-left: -1px;
- border-radius: 0.25rem 0em 0em 0em;
+ border-radius: 0.25rem 0 0 0;
}
.ui[class*="right attached"].buttons .button:last-child {
margin-left: -1px;
- border-radius: 0em 0em 0em 0.25rem;
+ border-radius: 0 0 0 0.25rem;
}
/*-------------------
- Fluid
---------------------*/
+ Fluid
+ --------------------*/
.ui.fluid.buttons,
.ui.fluid.button {
@@ -1195,7 +1255,7 @@
width: 100%;
}
.ui.eight.buttons > .button {
- width: 12.500%;
+ width: 12.5%;
}
.ui.nine.buttons {
width: 100%;
@@ -1229,6 +1289,9 @@
display: -ms-flexbox;
display: flex;
width: auto;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
.ui.two.vertical.buttons > .button {
height: 50%;
@@ -1249,7 +1312,7 @@
height: 14.285%;
}
.ui.eight.vertical.buttons > .button {
- height: 12.500%;
+ height: 12.5%;
}
.ui.nine.vertical.buttons > .button {
height: 11.11%;
@@ -1268,774 +1331,561 @@
Colors
--------------------*/
-
-/*--- Black ---*/
-
-.ui.black.buttons .button,
-.ui.black.button {
- background-color: #1B1C1D;
+.ui.primary.buttons .button,
+.ui.primary.button {
+ background-color: #2185D0;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.black.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.primary.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
- background-color: #27292a;
+.ui.primary.buttons .button:hover,
+.ui.primary.button:hover {
+ background-color: #1678c2;
color: #FFFFFF;
text-shadow: none;
}
-.ui.black.buttons .button:focus,
-.ui.black.button:focus {
- background-color: #2f3032;
+.ui.primary.buttons .button:focus,
+.ui.primary.button:focus {
+ background-color: #0d71bb;
color: #FFFFFF;
text-shadow: none;
}
-.ui.black.buttons .button:active,
-.ui.black.button:active {
- background-color: #343637;
+.ui.primary.buttons .button:active,
+.ui.primary.button:active {
+ background-color: #1a69a4;
color: #FFFFFF;
text-shadow: none;
}
-.ui.black.buttons .active.button,
-.ui.black.buttons .active.button:active,
-.ui.black.active.button,
-.ui.black.button .active.button:active {
- background-color: #0f0f10;
+.ui.primary.buttons .active.button,
+.ui.primary.buttons .active.button:active,
+.ui.primary.active.button,
+.ui.primary.button .active.button:active {
+ background-color: #1279c6;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.black.buttons .button,
-.ui.basic.black.button {
- -webkit-box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
- box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
- color: #1B1C1D !important;
+.ui.basic.primary.buttons .button,
+.ui.basic.primary.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset;
+ box-shadow: 0 0 0 1px #2185D0 inset;
+ color: #2185D0;
}
-.ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important;
- box-shadow: 0px 0px 0px 1px #27292a inset !important;
- color: #27292a !important;
+.ui.basic.primary.buttons .button:hover,
+.ui.basic.primary.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #1678c2 inset;
+ box-shadow: 0 0 0 1px #1678c2 inset;
+ color: #1678c2;
}
-.ui.basic.black.buttons .button:focus,
-.ui.basic.black.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #2f3032 inset !important;
- box-shadow: 0px 0px 0px 1px #2f3032 inset !important;
- color: #27292a !important;
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #0d71bb inset;
+ box-shadow: 0 0 0 1px #0d71bb inset;
+ color: #1678c2;
}
-.ui.basic.black.buttons .active.button,
-.ui.basic.black.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
- box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
- color: #343637 !important;
+.ui.basic.primary.buttons .active.button,
+.ui.basic.primary.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #1279c6 inset;
+ box-shadow: 0 0 0 1px #1279c6 inset;
+ color: #1a69a4;
}
-.ui.basic.black.buttons .button:active,
-.ui.basic.black.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #343637 inset !important;
- box-shadow: 0px 0px 0px 1px #343637 inset !important;
- color: #343637 !important;
+.ui.basic.primary.buttons .button:active,
+.ui.basic.primary.button:active {
+ -webkit-box-shadow: 0 0 0 1px #1a69a4 inset;
+ box-shadow: 0 0 0 1px #1a69a4 inset;
+ color: #1a69a4;
}
-.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.black.buttons .button,
-.ui.inverted.black.button {
+.ui.inverted.primary.buttons .button,
+.ui.inverted.primary.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
- box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
- color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 2px #54C8FF inset;
+ box-shadow: 0 0 0 2px #54C8FF inset;
+ color: #54C8FF;
}
-.ui.inverted.black.buttons .button:hover,
-.ui.inverted.black.button:hover,
-.ui.inverted.black.buttons .button:focus,
-.ui.inverted.black.button:focus,
-.ui.inverted.black.buttons .button.active,
-.ui.inverted.black.button.active,
-.ui.inverted.black.buttons .button:active,
-.ui.inverted.black.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover,
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button.active,
+.ui.inverted.primary.button.active,
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
color: #FFFFFF;
}
-.ui.inverted.black.buttons .button:hover,
-.ui.inverted.black.button:hover {
- background-color: #000000;
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover {
+ background-color: #21b8ff;
}
-.ui.inverted.black.buttons .button:focus,
-.ui.inverted.black.button:focus {
- background-color: #000000;
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus {
+ background-color: #2bbbff;
}
-.ui.inverted.black.buttons .active.button,
-.ui.inverted.black.active.button {
- background-color: #000000;
+.ui.inverted.primary.buttons .active.button,
+.ui.inverted.primary.active.button {
+ background-color: #3ac0ff;
}
-.ui.inverted.black.buttons .button:active,
-.ui.inverted.black.button:active {
- background-color: #000000;
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+ background-color: #21b8ff;
}
/* Inverted Basic */
-.ui.inverted.black.basic.buttons .button,
-.ui.inverted.black.buttons .basic.button,
-.ui.inverted.black.basic.button {
+.ui.inverted.primary.basic.buttons .button,
+.ui.inverted.primary.buttons .basic.button,
+.ui.inverted.primary.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.black.basic.buttons .button:hover,
-.ui.inverted.black.buttons .basic.button:hover,
-.ui.inverted.black.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
- box-shadow: 0px 0px 0px 2px #000000 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.primary.basic.buttons .button:hover,
+.ui.inverted.primary.buttons .basic.button:hover,
+.ui.inverted.primary.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
+ box-shadow: 0 0 0 2px #21b8ff inset;
+ color: #54C8FF;
}
-.ui.inverted.black.basic.buttons .button:focus,
-.ui.inverted.black.basic.buttons .button:focus,
-.ui.inverted.black.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
- box-shadow: 0px 0px 0px 2px #000000 inset !important;
- color: #545454 !important;
+.ui.inverted.primary.basic.buttons .button:focus,
+.ui.inverted.primary.basic.buttons .button:focus,
+.ui.inverted.primary.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #2bbbff inset;
+ box-shadow: 0 0 0 2px #2bbbff inset;
+ color: #54C8FF;
}
-.ui.inverted.black.basic.buttons .active.button,
-.ui.inverted.black.buttons .basic.active.button,
-.ui.inverted.black.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
- box-shadow: 0px 0px 0px 2px #000000 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.primary.basic.buttons .active.button,
+.ui.inverted.primary.buttons .basic.active.button,
+.ui.inverted.primary.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #3ac0ff inset;
+ box-shadow: 0 0 0 2px #3ac0ff inset;
+ color: #54C8FF;
}
-.ui.inverted.black.basic.buttons .button:active,
-.ui.inverted.black.buttons .basic.button:active,
-.ui.inverted.black.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
- box-shadow: 0px 0px 0px 2px #000000 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.primary.basic.buttons .button:active,
+.ui.inverted.primary.buttons .basic.button:active,
+.ui.inverted.primary.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
+ box-shadow: 0 0 0 2px #21b8ff inset;
+ color: #54C8FF;
}
-/*--- Grey ---*/
-
-.ui.grey.buttons .button,
-.ui.grey.button {
- background-color: #767676;
+/* Tertiary */
+.ui.tertiary.primary.buttons .button,
+.ui.tertiary.primary.buttons .tertiary.button,
+.ui.tertiary.primary.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #2185D0;
+}
+.ui.tertiary.primary.buttons .button:hover,
+.ui.tertiary.primary.buttons button:hover,
+.ui.tertiary.primary.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #2b75ac;
+ box-shadow: inset 0 -0.2em 0 #2b75ac;
+ color: #2b75ac;
+}
+.ui.tertiary.primary.buttons .button:focus,
+.ui.tertiary.primary.buttons .tertiary.button:focus,
+.ui.tertiary.primary.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #216ea7;
+ box-shadow: inset 0 -0.2em 0 #216ea7;
+ color: #216ea7;
+}
+.ui.tertiary.primary.buttons .active.button,
+.ui.tertiary.primary.buttons .tertiary.active.button,
+.ui.tertiary.primary.active.button,
+.ui.tertiary.primary.buttons .button:active,
+.ui.tertiary.primary.buttons .tertiary.button:active,
+.ui.tertiary.primary.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #007bd8;
+ box-shadow: inset 0 -0.2em 0 #007bd8;
+ color: #1279c6;
+}
+.ui.secondary.buttons .button,
+.ui.secondary.button {
+ background-color: #1B1C1D;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.grey.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.secondary.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.grey.buttons .button:hover,
-.ui.grey.button:hover {
- background-color: #838383;
+.ui.secondary.buttons .button:hover,
+.ui.secondary.button:hover {
+ background-color: #27292a;
color: #FFFFFF;
text-shadow: none;
}
-.ui.grey.buttons .button:focus,
-.ui.grey.button:focus {
- background-color: #8a8a8a;
+.ui.secondary.buttons .button:focus,
+.ui.secondary.button:focus {
+ background-color: #2e3032;
color: #FFFFFF;
text-shadow: none;
}
-.ui.grey.buttons .button:active,
-.ui.grey.button:active {
- background-color: #909090;
+.ui.secondary.buttons .button:active,
+.ui.secondary.button:active {
+ background-color: #343637;
color: #FFFFFF;
text-shadow: none;
}
-.ui.grey.buttons .active.button,
-.ui.grey.buttons .active.button:active,
-.ui.grey.active.button,
-.ui.grey.button .active.button:active {
- background-color: #696969;
+.ui.secondary.buttons .active.button,
+.ui.secondary.buttons .active.button:active,
+.ui.secondary.active.button,
+.ui.secondary.button .active.button:active {
+ background-color: #27292a;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.grey.buttons .button,
-.ui.basic.grey.button {
- -webkit-box-shadow: 0px 0px 0px 1px #767676 inset !important;
- box-shadow: 0px 0px 0px 1px #767676 inset !important;
- color: #767676 !important;
+.ui.basic.secondary.buttons .button,
+.ui.basic.secondary.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #1B1C1D inset;
+ box-shadow: 0 0 0 1px #1B1C1D inset;
+ color: #1B1C1D;
}
-.ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #838383 inset !important;
- box-shadow: 0px 0px 0px 1px #838383 inset !important;
- color: #838383 !important;
+.ui.basic.secondary.buttons .button:hover,
+.ui.basic.secondary.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #27292a inset;
+ box-shadow: 0 0 0 1px #27292a inset;
+ color: #27292a;
}
-.ui.basic.grey.buttons .button:focus,
-.ui.basic.grey.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #8a8a8a inset !important;
- box-shadow: 0px 0px 0px 1px #8a8a8a inset !important;
- color: #838383 !important;
+.ui.basic.secondary.buttons .button:focus,
+.ui.basic.secondary.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #2e3032 inset;
+ box-shadow: 0 0 0 1px #2e3032 inset;
+ color: #27292a;
}
-.ui.basic.grey.buttons .active.button,
-.ui.basic.grey.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #696969 inset !important;
- box-shadow: 0px 0px 0px 1px #696969 inset !important;
- color: #909090 !important;
+.ui.basic.secondary.buttons .active.button,
+.ui.basic.secondary.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #27292a inset;
+ box-shadow: 0 0 0 1px #27292a inset;
+ color: #343637;
}
-.ui.basic.grey.buttons .button:active,
-.ui.basic.grey.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #909090 inset !important;
- box-shadow: 0px 0px 0px 1px #909090 inset !important;
- color: #909090 !important;
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+ -webkit-box-shadow: 0 0 0 1px #343637 inset;
+ box-shadow: 0 0 0 1px #343637 inset;
+ color: #343637;
}
-.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.secondary.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.grey.buttons .button,
-.ui.inverted.grey.button {
+.ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
- box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
- color: #FFFFFF;
+ -webkit-box-shadow: 0 0 0 2px #545454 inset;
+ box-shadow: 0 0 0 2px #545454 inset;
+ color: #545454;
}
-.ui.inverted.grey.buttons .button:hover,
-.ui.inverted.grey.button:hover,
-.ui.inverted.grey.buttons .button:focus,
-.ui.inverted.grey.button:focus,
-.ui.inverted.grey.buttons .button.active,
-.ui.inverted.grey.button.active,
-.ui.inverted.grey.buttons .button:active,
-.ui.inverted.grey.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: rgba(0, 0, 0, 0.6);
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover,
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button.active,
+.ui.inverted.secondary.button.active,
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
}
-.ui.inverted.grey.buttons .button:hover,
-.ui.inverted.grey.button:hover {
- background-color: #cfd0d2;
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover {
+ background-color: #6e6e6e;
}
-.ui.inverted.grey.buttons .button:focus,
-.ui.inverted.grey.button:focus {
- background-color: #c7c9cb;
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus {
+ background-color: #686868;
}
-.ui.inverted.grey.buttons .active.button,
-.ui.inverted.grey.active.button {
- background-color: #cfd0d2;
+.ui.inverted.secondary.buttons .active.button,
+.ui.inverted.secondary.active.button {
+ background-color: #616161;
}
-.ui.inverted.grey.buttons .button:active,
-.ui.inverted.grey.button:active {
- background-color: #c2c4c5;
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+ background-color: #6e6e6e;
}
/* Inverted Basic */
-.ui.inverted.grey.basic.buttons .button,
-.ui.inverted.grey.buttons .basic.button,
-.ui.inverted.grey.basic.button {
+.ui.inverted.secondary.basic.buttons .button,
+.ui.inverted.secondary.buttons .basic.button,
+.ui.inverted.secondary.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.grey.basic.buttons .button:hover,
-.ui.inverted.grey.buttons .basic.button:hover,
-.ui.inverted.grey.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
- box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.secondary.basic.buttons .button:hover,
+.ui.inverted.secondary.buttons .basic.button:hover,
+.ui.inverted.secondary.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #6e6e6e inset;
+ box-shadow: 0 0 0 2px #6e6e6e inset;
+ color: #545454;
}
-.ui.inverted.grey.basic.buttons .button:focus,
-.ui.inverted.grey.basic.buttons .button:focus,
-.ui.inverted.grey.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
- box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
- color: #DCDDDE !important;
+.ui.inverted.secondary.basic.buttons .button:focus,
+.ui.inverted.secondary.basic.buttons .button:focus,
+.ui.inverted.secondary.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #686868 inset;
+ box-shadow: 0 0 0 2px #686868 inset;
+ color: #545454;
}
-.ui.inverted.grey.basic.buttons .active.button,
-.ui.inverted.grey.buttons .basic.active.button,
-.ui.inverted.grey.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
- box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.secondary.basic.buttons .active.button,
+.ui.inverted.secondary.buttons .basic.active.button,
+.ui.inverted.secondary.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #616161 inset;
+ box-shadow: 0 0 0 2px #616161 inset;
+ color: #545454;
}
-.ui.inverted.grey.basic.buttons .button:active,
-.ui.inverted.grey.buttons .basic.button:active,
-.ui.inverted.grey.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
- box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
- color: #FFFFFF !important;
+.ui.inverted.secondary.basic.buttons .button:active,
+.ui.inverted.secondary.buttons .basic.button:active,
+.ui.inverted.secondary.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #6e6e6e inset;
+ box-shadow: 0 0 0 2px #6e6e6e inset;
+ color: #545454;
}
-/*--- Brown ---*/
-
-.ui.brown.buttons .button,
-.ui.brown.button {
- background-color: #A5673F;
+/* Tertiary */
+.ui.tertiary.secondary.buttons .button,
+.ui.tertiary.secondary.buttons .tertiary.button,
+.ui.tertiary.secondary.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #1B1C1D;
+}
+.ui.tertiary.secondary.buttons .button:hover,
+.ui.tertiary.secondary.buttons button:hover,
+.ui.tertiary.secondary.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #292929;
+ box-shadow: inset 0 -0.2em 0 #292929;
+ color: #292929;
+}
+.ui.tertiary.secondary.buttons .button:focus,
+.ui.tertiary.secondary.buttons .tertiary.button:focus,
+.ui.tertiary.secondary.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #303030;
+ box-shadow: inset 0 -0.2em 0 #303030;
+ color: #303030;
+}
+.ui.tertiary.secondary.buttons .active.button,
+.ui.tertiary.secondary.buttons .tertiary.active.button,
+.ui.tertiary.secondary.active.button,
+.ui.tertiary.secondary.buttons .button:active,
+.ui.tertiary.secondary.buttons .tertiary.button:active,
+.ui.tertiary.secondary.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #1f2933;
+ box-shadow: inset 0 -0.2em 0 #1f2933;
+ color: #27292a;
+}
+.ui.red.buttons .button,
+.ui.red.button {
+ background-color: #DB2828;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.brown.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.red.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.brown.buttons .button:hover,
-.ui.brown.button:hover {
- background-color: #975b33;
+.ui.red.buttons .button:hover,
+.ui.red.button:hover {
+ background-color: #d01919;
color: #FFFFFF;
text-shadow: none;
}
-.ui.brown.buttons .button:focus,
-.ui.brown.button:focus {
- background-color: #90532b;
+.ui.red.buttons .button:focus,
+.ui.red.button:focus {
+ background-color: #ca1010;
color: #FFFFFF;
text-shadow: none;
}
-.ui.brown.buttons .button:active,
-.ui.brown.button:active {
- background-color: #805031;
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+ background-color: #b21e1e;
color: #FFFFFF;
text-shadow: none;
}
-.ui.brown.buttons .active.button,
-.ui.brown.buttons .active.button:active,
-.ui.brown.active.button,
-.ui.brown.button .active.button:active {
- background-color: #995a31;
+.ui.red.buttons .active.button,
+.ui.red.buttons .active.button:active,
+.ui.red.active.button,
+.ui.red.button .active.button:active {
+ background-color: #d41515;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button {
- -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset !important;
- box-shadow: 0px 0px 0px 1px #A5673F inset !important;
- color: #A5673F !important;
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #DB2828 inset;
+ box-shadow: 0 0 0 1px #DB2828 inset;
+ color: #DB2828;
}
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #975b33 inset !important;
- box-shadow: 0px 0px 0px 1px #975b33 inset !important;
- color: #975b33 !important;
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #d01919 inset;
+ box-shadow: 0 0 0 1px #d01919 inset;
+ color: #d01919;
}
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #90532b inset !important;
- box-shadow: 0px 0px 0px 1px #90532b inset !important;
- color: #975b33 !important;
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #ca1010 inset;
+ box-shadow: 0 0 0 1px #ca1010 inset;
+ color: #d01919;
}
-.ui.basic.brown.buttons .active.button,
-.ui.basic.brown.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #995a31 inset !important;
- box-shadow: 0px 0px 0px 1px #995a31 inset !important;
- color: #805031 !important;
+.ui.basic.red.buttons .active.button,
+.ui.basic.red.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #d41515 inset;
+ box-shadow: 0 0 0 1px #d41515 inset;
+ color: #b21e1e;
}
-.ui.basic.brown.buttons .button:active,
-.ui.basic.brown.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #805031 inset !important;
- box-shadow: 0px 0px 0px 1px #805031 inset !important;
- color: #805031 !important;
+.ui.basic.red.buttons .button:active,
+.ui.basic.red.button:active {
+ -webkit-box-shadow: 0 0 0 1px #b21e1e inset;
+ box-shadow: 0 0 0 1px #b21e1e inset;
+ color: #b21e1e;
}
-.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.brown.buttons .button,
-.ui.inverted.brown.button {
+.ui.inverted.red.buttons .button,
+.ui.inverted.red.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #D67C1C inset !important;
- box-shadow: 0px 0px 0px 2px #D67C1C inset !important;
- color: #D67C1C;
+ -webkit-box-shadow: 0 0 0 2px #FF695E inset;
+ box-shadow: 0 0 0 2px #FF695E inset;
+ color: #FF695E;
}
-.ui.inverted.brown.buttons .button:hover,
-.ui.inverted.brown.button:hover,
-.ui.inverted.brown.buttons .button:focus,
-.ui.inverted.brown.button:focus,
-.ui.inverted.brown.buttons .button.active,
-.ui.inverted.brown.button.active,
-.ui.inverted.brown.buttons .button:active,
-.ui.inverted.brown.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+.ui.inverted.red.buttons .button:hover,
+.ui.inverted.red.button:hover,
+.ui.inverted.red.buttons .button:focus,
+.ui.inverted.red.button:focus,
+.ui.inverted.red.buttons .button.active,
+.ui.inverted.red.button.active,
+.ui.inverted.red.buttons .button:active,
+.ui.inverted.red.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
color: #FFFFFF;
}
-.ui.inverted.brown.buttons .button:hover,
-.ui.inverted.brown.button:hover {
- background-color: #c86f11;
+.ui.inverted.red.buttons .button:hover,
+.ui.inverted.red.button:hover {
+ background-color: #ff392b;
}
-.ui.inverted.brown.buttons .button:focus,
-.ui.inverted.brown.button:focus {
- background-color: #c16808;
+.ui.inverted.red.buttons .button:focus,
+.ui.inverted.red.button:focus {
+ background-color: #ff4335;
}
-.ui.inverted.brown.buttons .active.button,
-.ui.inverted.brown.active.button {
- background-color: #cc6f0d;
+.ui.inverted.red.buttons .active.button,
+.ui.inverted.red.active.button {
+ background-color: #ff5144;
}
-.ui.inverted.brown.buttons .button:active,
-.ui.inverted.brown.button:active {
- background-color: #a96216;
+.ui.inverted.red.buttons .button:active,
+.ui.inverted.red.button:active {
+ background-color: #ff392b;
}
/* Inverted Basic */
-.ui.inverted.brown.basic.buttons .button,
-.ui.inverted.brown.buttons .basic.button,
-.ui.inverted.brown.basic.button {
+.ui.inverted.red.basic.buttons .button,
+.ui.inverted.red.buttons .basic.button,
+.ui.inverted.red.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.brown.basic.buttons .button:hover,
-.ui.inverted.brown.buttons .basic.button:hover,
-.ui.inverted.brown.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
- box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
- color: #D67C1C !important;
+.ui.inverted.red.basic.buttons .button:hover,
+.ui.inverted.red.buttons .basic.button:hover,
+.ui.inverted.red.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #ff392b inset;
+ box-shadow: 0 0 0 2px #ff392b inset;
+ color: #FF695E;
}
-.ui.inverted.brown.basic.buttons .button:focus,
-.ui.inverted.brown.basic.buttons .button:focus,
-.ui.inverted.brown.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #c16808 inset !important;
- box-shadow: 0px 0px 0px 2px #c16808 inset !important;
- color: #D67C1C !important;
+.ui.inverted.red.basic.buttons .button:focus,
+.ui.inverted.red.basic.buttons .button:focus,
+.ui.inverted.red.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #ff4335 inset;
+ box-shadow: 0 0 0 2px #ff4335 inset;
+ color: #FF695E;
}
-.ui.inverted.brown.basic.buttons .active.button,
-.ui.inverted.brown.buttons .basic.active.button,
-.ui.inverted.brown.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
- box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
- color: #D67C1C !important;
-}
-.ui.inverted.brown.basic.buttons .button:active,
-.ui.inverted.brown.buttons .basic.button:active,
-.ui.inverted.brown.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #a96216 inset !important;
- box-shadow: 0px 0px 0px 2px #a96216 inset !important;
- color: #D67C1C !important;
-}
-
-/*--- Blue ---*/
-
-.ui.blue.buttons .button,
-.ui.blue.button {
- background-color: #2185D0;
- color: #FFFFFF;
- text-shadow: none;
- background-image: none;
-}
-.ui.blue.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover {
- background-color: #1678c2;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.blue.buttons .button:focus,
-.ui.blue.button:focus {
- background-color: #0d71bb;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
- background-color: #1a69a4;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.blue.buttons .active.button,
-.ui.blue.buttons .active.button:active,
-.ui.blue.active.button,
-.ui.blue.button .active.button:active {
- background-color: #1279c6;
- color: #FFFFFF;
- text-shadow: none;
-}
-
-/* Basic */
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button {
- -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
- box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
- color: #2185D0 !important;
-}
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
- box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
- color: #1678c2 !important;
-}
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
- box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
- color: #1678c2 !important;
-}
-.ui.basic.blue.buttons .active.button,
-.ui.basic.blue.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
- box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
- color: #1a69a4 !important;
-}
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
- box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
- color: #1a69a4 !important;
-}
-.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
- margin-left: -1px;
-}
-
-/* Inverted */
-.ui.inverted.blue.buttons .button,
-.ui.inverted.blue.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
- box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
- color: #54C8FF;
-}
-.ui.inverted.blue.buttons .button:hover,
-.ui.inverted.blue.button:hover,
-.ui.inverted.blue.buttons .button:focus,
-.ui.inverted.blue.button:focus,
-.ui.inverted.blue.buttons .button.active,
-.ui.inverted.blue.button.active,
-.ui.inverted.blue.buttons .button:active,
-.ui.inverted.blue.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: #FFFFFF;
-}
-.ui.inverted.blue.buttons .button:hover,
-.ui.inverted.blue.button:hover {
- background-color: #3ac0ff;
-}
-.ui.inverted.blue.buttons .button:focus,
-.ui.inverted.blue.button:focus {
- background-color: #2bbbff;
-}
-.ui.inverted.blue.buttons .active.button,
-.ui.inverted.blue.active.button {
- background-color: #3ac0ff;
-}
-.ui.inverted.blue.buttons .button:active,
-.ui.inverted.blue.button:active {
- background-color: #21b8ff;
-}
-
-/* Inverted Basic */
-.ui.inverted.blue.basic.buttons .button,
-.ui.inverted.blue.buttons .basic.button,
-.ui.inverted.blue.basic.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
-}
-.ui.inverted.blue.basic.buttons .button:hover,
-.ui.inverted.blue.buttons .basic.button:hover,
-.ui.inverted.blue.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- color: #54C8FF !important;
-}
-.ui.inverted.blue.basic.buttons .button:focus,
-.ui.inverted.blue.basic.buttons .button:focus,
-.ui.inverted.blue.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
- box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
- color: #54C8FF !important;
-}
-.ui.inverted.blue.basic.buttons .active.button,
-.ui.inverted.blue.buttons .basic.active.button,
-.ui.inverted.blue.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- color: #54C8FF !important;
-}
-.ui.inverted.blue.basic.buttons .button:active,
-.ui.inverted.blue.buttons .basic.button:active,
-.ui.inverted.blue.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
- box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
- color: #54C8FF !important;
-}
-
-/*--- Green ---*/
-
-.ui.green.buttons .button,
-.ui.green.button {
- background-color: #21BA45;
- color: #FFFFFF;
- text-shadow: none;
- background-image: none;
-}
-.ui.green.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
-}
-.ui.green.buttons .button:hover,
-.ui.green.button:hover {
- background-color: #16ab39;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.green.buttons .button:focus,
-.ui.green.button:focus {
- background-color: #0ea432;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.green.buttons .button:active,
-.ui.green.button:active {
- background-color: #198f35;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.green.buttons .active.button,
-.ui.green.buttons .active.button:active,
-.ui.green.active.button,
-.ui.green.button .active.button:active {
- background-color: #13ae38;
- color: #FFFFFF;
- text-shadow: none;
-}
-
-/* Basic */
-.ui.basic.green.buttons .button,
-.ui.basic.green.button {
- -webkit-box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
- box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
- color: #21BA45 !important;
-}
-.ui.basic.green.buttons .button:hover,
-.ui.basic.green.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
- box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
- color: #16ab39 !important;
-}
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
- box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
- color: #16ab39 !important;
-}
-.ui.basic.green.buttons .active.button,
-.ui.basic.green.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
- box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
- color: #198f35 !important;
-}
-.ui.basic.green.buttons .button:active,
-.ui.basic.green.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #198f35 inset !important;
- box-shadow: 0px 0px 0px 1px #198f35 inset !important;
- color: #198f35 !important;
-}
-.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
- margin-left: -1px;
-}
-
-/* Inverted */
-.ui.inverted.green.buttons .button,
-.ui.inverted.green.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #2ECC40 inset !important;
- box-shadow: 0px 0px 0px 2px #2ECC40 inset !important;
- color: #2ECC40;
-}
-.ui.inverted.green.buttons .button:hover,
-.ui.inverted.green.button:hover,
-.ui.inverted.green.buttons .button:focus,
-.ui.inverted.green.button:focus,
-.ui.inverted.green.buttons .button.active,
-.ui.inverted.green.button.active,
-.ui.inverted.green.buttons .button:active,
-.ui.inverted.green.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: #FFFFFF;
-}
-.ui.inverted.green.buttons .button:hover,
-.ui.inverted.green.button:hover {
- background-color: #22be34;
-}
-.ui.inverted.green.buttons .button:focus,
-.ui.inverted.green.button:focus {
- background-color: #19b82b;
-}
-.ui.inverted.green.buttons .active.button,
-.ui.inverted.green.active.button {
- background-color: #1fc231;
+.ui.inverted.red.basic.buttons .active.button,
+.ui.inverted.red.buttons .basic.active.button,
+.ui.inverted.red.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #ff5144 inset;
+ box-shadow: 0 0 0 2px #ff5144 inset;
+ color: #FF695E;
}
-.ui.inverted.green.buttons .button:active,
-.ui.inverted.green.button:active {
- background-color: #25a233;
+.ui.inverted.red.basic.buttons .button:active,
+.ui.inverted.red.buttons .basic.button:active,
+.ui.inverted.red.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #ff392b inset;
+ box-shadow: 0 0 0 2px #ff392b inset;
+ color: #FF695E;
}
-/* Inverted Basic */
-.ui.inverted.green.basic.buttons .button,
-.ui.inverted.green.buttons .basic.button,
-.ui.inverted.green.basic.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
-}
-.ui.inverted.green.basic.buttons .button:hover,
-.ui.inverted.green.buttons .basic.button:hover,
-.ui.inverted.green.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #22be34 inset !important;
- box-shadow: 0px 0px 0px 2px #22be34 inset !important;
- color: #2ECC40 !important;
-}
-.ui.inverted.green.basic.buttons .button:focus,
-.ui.inverted.green.basic.buttons .button:focus,
-.ui.inverted.green.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #19b82b inset !important;
- box-shadow: 0px 0px 0px 2px #19b82b inset !important;
- color: #2ECC40 !important;
-}
-.ui.inverted.green.basic.buttons .active.button,
-.ui.inverted.green.buttons .basic.active.button,
-.ui.inverted.green.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
- box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
- color: #2ECC40 !important;
-}
-.ui.inverted.green.basic.buttons .button:active,
-.ui.inverted.green.buttons .basic.button:active,
-.ui.inverted.green.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #25a233 inset !important;
- box-shadow: 0px 0px 0px 2px #25a233 inset !important;
- color: #2ECC40 !important;
+/* Tertiary */
+.ui.tertiary.red.buttons .button,
+.ui.tertiary.red.buttons .tertiary.button,
+.ui.tertiary.red.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #DB2828;
+}
+.ui.tertiary.red.buttons .button:hover,
+.ui.tertiary.red.buttons button:hover,
+.ui.tertiary.red.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #b93131;
+ box-shadow: inset 0 -0.2em 0 #b93131;
+ color: #b93131;
+}
+.ui.tertiary.red.buttons .button:focus,
+.ui.tertiary.red.buttons .tertiary.button:focus,
+.ui.tertiary.red.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #b52626;
+ box-shadow: inset 0 -0.2em 0 #b52626;
+ color: #b52626;
+}
+.ui.tertiary.red.buttons .active.button,
+.ui.tertiary.red.buttons .tertiary.active.button,
+.ui.tertiary.red.active.button,
+.ui.tertiary.red.buttons .button:active,
+.ui.tertiary.red.buttons .tertiary.button:active,
+.ui.tertiary.red.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #ea0000;
+ box-shadow: inset 0 -0.2em 0 #ea0000;
+ color: #d41515;
}
-
-/*--- Orange ---*/
-
.ui.orange.buttons .button,
.ui.orange.button {
background-color: #F2711C;
@@ -2044,8 +1894,8 @@
background-image: none;
}
.ui.orange.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover {
@@ -2077,36 +1927,37 @@
/* Basic */
.ui.basic.orange.buttons .button,
.ui.basic.orange.button {
- -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset !important;
- box-shadow: 0px 0px 0px 1px #F2711C inset !important;
- color: #F2711C !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #F2711C inset;
+ box-shadow: 0 0 0 1px #F2711C inset;
+ color: #F2711C;
}
.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #f26202 inset !important;
- box-shadow: 0px 0px 0px 1px #f26202 inset !important;
- color: #f26202 !important;
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #f26202 inset;
+ box-shadow: 0 0 0 1px #f26202 inset;
+ color: #f26202;
}
.ui.basic.orange.buttons .button:focus,
.ui.basic.orange.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #e55b00 inset !important;
- box-shadow: 0px 0px 0px 1px #e55b00 inset !important;
- color: #f26202 !important;
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #e55b00 inset;
+ box-shadow: 0 0 0 1px #e55b00 inset;
+ color: #f26202;
}
.ui.basic.orange.buttons .active.button,
.ui.basic.orange.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #f56100 inset !important;
- box-shadow: 0px 0px 0px 1px #f56100 inset !important;
- color: #cf590c !important;
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #f56100 inset;
+ box-shadow: 0 0 0 1px #f56100 inset;
+ color: #cf590c;
}
.ui.basic.orange.buttons .button:active,
.ui.basic.orange.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #cf590c inset !important;
- box-shadow: 0px 0px 0px 1px #cf590c inset !important;
- color: #cf590c !important;
+ -webkit-box-shadow: 0 0 0 1px #cf590c inset;
+ box-shadow: 0 0 0 1px #cf590c inset;
+ color: #cf590c;
}
.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
margin-left: -1px;
@@ -2116,8 +1967,8 @@
.ui.inverted.orange.buttons .button,
.ui.inverted.orange.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #FF851B inset !important;
- box-shadow: 0px 0px 0px 2px #FF851B inset !important;
+ -webkit-box-shadow: 0 0 0 2px #FF851B inset;
+ box-shadow: 0 0 0 2px #FF851B inset;
color: #FF851B;
}
.ui.inverted.orange.buttons .button:hover,
@@ -2128,13 +1979,13 @@
.ui.inverted.orange.button.active,
.ui.inverted.orange.buttons .button:active,
.ui.inverted.orange.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
color: #FFFFFF;
}
.ui.inverted.orange.buttons .button:hover,
.ui.inverted.orange.button:hover {
- background-color: #ff7701;
+ background-color: #e76b00;
}
.ui.inverted.orange.buttons .button:focus,
.ui.inverted.orange.button:focus {
@@ -2154,752 +2005,727 @@
.ui.inverted.orange.buttons .basic.button,
.ui.inverted.orange.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
.ui.inverted.orange.basic.buttons .button:hover,
.ui.inverted.orange.buttons .basic.button:hover,
.ui.inverted.orange.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
- box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
- color: #FF851B !important;
+ -webkit-box-shadow: 0 0 0 2px #e76b00 inset;
+ box-shadow: 0 0 0 2px #e76b00 inset;
+ color: #FF851B;
}
.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #f17000 inset !important;
- box-shadow: 0px 0px 0px 2px #f17000 inset !important;
- color: #FF851B !important;
+ -webkit-box-shadow: 0 0 0 2px #f17000 inset;
+ box-shadow: 0 0 0 2px #f17000 inset;
+ color: #FF851B;
}
.ui.inverted.orange.basic.buttons .active.button,
.ui.inverted.orange.buttons .basic.active.button,
.ui.inverted.orange.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
- box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
- color: #FF851B !important;
+ -webkit-box-shadow: 0 0 0 2px #ff7701 inset;
+ box-shadow: 0 0 0 2px #ff7701 inset;
+ color: #FF851B;
}
.ui.inverted.orange.basic.buttons .button:active,
.ui.inverted.orange.buttons .basic.button:active,
.ui.inverted.orange.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
- box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
- color: #FF851B !important;
+ -webkit-box-shadow: 0 0 0 2px #e76b00 inset;
+ box-shadow: 0 0 0 2px #e76b00 inset;
+ color: #FF851B;
}
-/*--- Pink ---*/
-
-.ui.pink.buttons .button,
-.ui.pink.button {
- background-color: #E03997;
+/* Tertiary */
+.ui.tertiary.orange.buttons .button,
+.ui.tertiary.orange.buttons .tertiary.button,
+.ui.tertiary.orange.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #F2711C;
+}
+.ui.tertiary.orange.buttons .button:hover,
+.ui.tertiary.orange.buttons button:hover,
+.ui.tertiary.orange.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #da671b;
+ box-shadow: inset 0 -0.2em 0 #da671b;
+ color: #da671b;
+}
+.ui.tertiary.orange.buttons .button:focus,
+.ui.tertiary.orange.buttons .tertiary.button:focus,
+.ui.tertiary.orange.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #ce6017;
+ box-shadow: inset 0 -0.2em 0 #ce6017;
+ color: #ce6017;
+}
+.ui.tertiary.orange.buttons .active.button,
+.ui.tertiary.orange.buttons .tertiary.active.button,
+.ui.tertiary.orange.active.button,
+.ui.tertiary.orange.buttons .button:active,
+.ui.tertiary.orange.buttons .tertiary.button:active,
+.ui.tertiary.orange.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #f56100;
+ box-shadow: inset 0 -0.2em 0 #f56100;
+ color: #f56100;
+}
+.ui.yellow.buttons .button,
+.ui.yellow.button {
+ background-color: #FBBD08;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.pink.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.yellow.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.pink.buttons .button:hover,
-.ui.pink.button:hover {
- background-color: #e61a8d;
+.ui.yellow.buttons .button:hover,
+.ui.yellow.button:hover {
+ background-color: #eaae00;
color: #FFFFFF;
text-shadow: none;
}
-.ui.pink.buttons .button:focus,
-.ui.pink.button:focus {
- background-color: #e10f85;
+.ui.yellow.buttons .button:focus,
+.ui.yellow.button:focus {
+ background-color: #daa300;
color: #FFFFFF;
text-shadow: none;
}
-.ui.pink.buttons .button:active,
-.ui.pink.button:active {
- background-color: #c71f7e;
+.ui.yellow.buttons .button:active,
+.ui.yellow.button:active {
+ background-color: #cd9903;
color: #FFFFFF;
text-shadow: none;
}
-.ui.pink.buttons .active.button,
-.ui.pink.buttons .active.button:active,
-.ui.pink.active.button,
-.ui.pink.button .active.button:active {
- background-color: #ea158d;
+.ui.yellow.buttons .active.button,
+.ui.yellow.buttons .active.button:active,
+.ui.yellow.active.button,
+.ui.yellow.button .active.button:active {
+ background-color: #eaae00;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button {
- -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset !important;
- box-shadow: 0px 0px 0px 1px #E03997 inset !important;
- color: #E03997 !important;
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #FBBD08 inset;
+ box-shadow: 0 0 0 1px #FBBD08 inset;
+ color: #FBBD08;
}
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #e61a8d inset !important;
- box-shadow: 0px 0px 0px 1px #e61a8d inset !important;
- color: #e61a8d !important;
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #eaae00 inset;
+ box-shadow: 0 0 0 1px #eaae00 inset;
+ color: #eaae00;
}
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #e10f85 inset !important;
- box-shadow: 0px 0px 0px 1px #e10f85 inset !important;
- color: #e61a8d !important;
+.ui.basic.yellow.buttons .button:focus,
+.ui.basic.yellow.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #daa300 inset;
+ box-shadow: 0 0 0 1px #daa300 inset;
+ color: #eaae00;
}
-.ui.basic.pink.buttons .active.button,
-.ui.basic.pink.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #ea158d inset !important;
- box-shadow: 0px 0px 0px 1px #ea158d inset !important;
- color: #c71f7e !important;
+.ui.basic.yellow.buttons .active.button,
+.ui.basic.yellow.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #eaae00 inset;
+ box-shadow: 0 0 0 1px #eaae00 inset;
+ color: #cd9903;
}
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #c71f7e inset !important;
- box-shadow: 0px 0px 0px 1px #c71f7e inset !important;
- color: #c71f7e !important;
+.ui.basic.yellow.buttons .button:active,
+.ui.basic.yellow.button:active {
+ -webkit-box-shadow: 0 0 0 1px #cd9903 inset;
+ box-shadow: 0 0 0 1px #cd9903 inset;
+ color: #cd9903;
}
-.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.pink.buttons .button,
-.ui.inverted.pink.button {
+.ui.inverted.yellow.buttons .button,
+.ui.inverted.yellow.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #FF8EDF inset !important;
- box-shadow: 0px 0px 0px 2px #FF8EDF inset !important;
- color: #FF8EDF;
+ -webkit-box-shadow: 0 0 0 2px #FFE21F inset;
+ box-shadow: 0 0 0 2px #FFE21F inset;
+ color: #FFE21F;
}
-.ui.inverted.pink.buttons .button:hover,
-.ui.inverted.pink.button:hover,
-.ui.inverted.pink.buttons .button:focus,
-.ui.inverted.pink.button:focus,
-.ui.inverted.pink.buttons .button.active,
-.ui.inverted.pink.button.active,
-.ui.inverted.pink.buttons .button:active,
-.ui.inverted.pink.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: #FFFFFF;
+.ui.inverted.yellow.buttons .button:hover,
+.ui.inverted.yellow.button:hover,
+.ui.inverted.yellow.buttons .button:focus,
+.ui.inverted.yellow.button:focus,
+.ui.inverted.yellow.buttons .button.active,
+.ui.inverted.yellow.button.active,
+.ui.inverted.yellow.buttons .button:active,
+.ui.inverted.yellow.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: rgba(0, 0, 0, 0.6);
}
-.ui.inverted.pink.buttons .button:hover,
-.ui.inverted.pink.button:hover {
- background-color: #ff74d8;
+.ui.inverted.yellow.buttons .button:hover,
+.ui.inverted.yellow.button:hover {
+ background-color: #ebcd00;
}
-.ui.inverted.pink.buttons .button:focus,
-.ui.inverted.pink.button:focus {
- background-color: #ff65d3;
+.ui.inverted.yellow.buttons .button:focus,
+.ui.inverted.yellow.button:focus {
+ background-color: #f5d500;
}
-.ui.inverted.pink.buttons .active.button,
-.ui.inverted.pink.active.button {
- background-color: #ff74d8;
+.ui.inverted.yellow.buttons .active.button,
+.ui.inverted.yellow.active.button {
+ background-color: #ffdf05;
}
-.ui.inverted.pink.buttons .button:active,
-.ui.inverted.pink.button:active {
- background-color: #ff5bd1;
+.ui.inverted.yellow.buttons .button:active,
+.ui.inverted.yellow.button:active {
+ background-color: #ebcd00;
}
/* Inverted Basic */
-.ui.inverted.pink.basic.buttons .button,
-.ui.inverted.pink.buttons .basic.button,
-.ui.inverted.pink.basic.button {
+.ui.inverted.yellow.basic.buttons .button,
+.ui.inverted.yellow.buttons .basic.button,
+.ui.inverted.yellow.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.pink.basic.buttons .button:hover,
-.ui.inverted.pink.buttons .basic.button:hover,
-.ui.inverted.pink.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
- box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
- color: #FF8EDF !important;
+.ui.inverted.yellow.basic.buttons .button:hover,
+.ui.inverted.yellow.buttons .basic.button:hover,
+.ui.inverted.yellow.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #ebcd00 inset;
+ box-shadow: 0 0 0 2px #ebcd00 inset;
+ color: #FFE21F;
}
-.ui.inverted.pink.basic.buttons .button:focus,
-.ui.inverted.pink.basic.buttons .button:focus,
-.ui.inverted.pink.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
- box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
- color: #FF8EDF !important;
+.ui.inverted.yellow.basic.buttons .button:focus,
+.ui.inverted.yellow.basic.buttons .button:focus,
+.ui.inverted.yellow.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #f5d500 inset;
+ box-shadow: 0 0 0 2px #f5d500 inset;
+ color: #FFE21F;
}
-.ui.inverted.pink.basic.buttons .active.button,
-.ui.inverted.pink.buttons .basic.active.button,
-.ui.inverted.pink.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
- box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
- color: #FF8EDF !important;
+.ui.inverted.yellow.basic.buttons .active.button,
+.ui.inverted.yellow.buttons .basic.active.button,
+.ui.inverted.yellow.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #ffdf05 inset;
+ box-shadow: 0 0 0 2px #ffdf05 inset;
+ color: #FFE21F;
}
-.ui.inverted.pink.basic.buttons .button:active,
-.ui.inverted.pink.buttons .basic.button:active,
-.ui.inverted.pink.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
- box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
- color: #FF8EDF !important;
+.ui.inverted.yellow.basic.buttons .button:active,
+.ui.inverted.yellow.buttons .basic.button:active,
+.ui.inverted.yellow.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #ebcd00 inset;
+ box-shadow: 0 0 0 2px #ebcd00 inset;
+ color: #FFE21F;
}
-/*--- Violet ---*/
-
-.ui.violet.buttons .button,
-.ui.violet.button {
- background-color: #6435C9;
+/* Tertiary */
+.ui.tertiary.yellow.buttons .button,
+.ui.tertiary.yellow.buttons .tertiary.button,
+.ui.tertiary.yellow.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #FBBD08;
+}
+.ui.tertiary.yellow.buttons .button:hover,
+.ui.tertiary.yellow.buttons button:hover,
+.ui.tertiary.yellow.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #d2a217;
+ box-shadow: inset 0 -0.2em 0 #d2a217;
+ color: #d2a217;
+}
+.ui.tertiary.yellow.buttons .button:focus,
+.ui.tertiary.yellow.buttons .tertiary.button:focus,
+.ui.tertiary.yellow.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #c49816;
+ box-shadow: inset 0 -0.2em 0 #c49816;
+ color: #c49816;
+}
+.ui.tertiary.yellow.buttons .active.button,
+.ui.tertiary.yellow.buttons .tertiary.active.button,
+.ui.tertiary.yellow.active.button,
+.ui.tertiary.yellow.buttons .button:active,
+.ui.tertiary.yellow.buttons .tertiary.button:active,
+.ui.tertiary.yellow.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #eaae00;
+ box-shadow: inset 0 -0.2em 0 #eaae00;
+ color: #eaae00;
+}
+.ui.olive.buttons .button,
+.ui.olive.button {
+ background-color: #B5CC18;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.violet.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.olive.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.violet.buttons .button:hover,
-.ui.violet.button:hover {
- background-color: #5829bb;
+.ui.olive.buttons .button:hover,
+.ui.olive.button:hover {
+ background-color: #a7bd0d;
color: #FFFFFF;
text-shadow: none;
}
-.ui.violet.buttons .button:focus,
-.ui.violet.button:focus {
- background-color: #4f20b5;
+.ui.olive.buttons .button:focus,
+.ui.olive.button:focus {
+ background-color: #a0b605;
color: #FFFFFF;
text-shadow: none;
}
-.ui.violet.buttons .button:active,
-.ui.violet.button:active {
- background-color: #502aa1;
+.ui.olive.buttons .button:active,
+.ui.olive.button:active {
+ background-color: #8d9e13;
color: #FFFFFF;
text-shadow: none;
}
-.ui.violet.buttons .active.button,
-.ui.violet.buttons .active.button:active,
-.ui.violet.active.button,
-.ui.violet.button .active.button:active {
- background-color: #5626bf;
+.ui.olive.buttons .active.button,
+.ui.olive.buttons .active.button:active,
+.ui.olive.active.button,
+.ui.olive.button .active.button:active {
+ background-color: #aac109;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button {
- -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset !important;
- box-shadow: 0px 0px 0px 1px #6435C9 inset !important;
- color: #6435C9 !important;
+.ui.basic.olive.buttons .button,
+.ui.basic.olive.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #B5CC18 inset;
+ box-shadow: 0 0 0 1px #B5CC18 inset;
+ color: #B5CC18;
}
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #5829bb inset !important;
- box-shadow: 0px 0px 0px 1px #5829bb inset !important;
- color: #5829bb !important;
+.ui.basic.olive.buttons .button:hover,
+.ui.basic.olive.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #a7bd0d inset;
+ box-shadow: 0 0 0 1px #a7bd0d inset;
+ color: #a7bd0d;
}
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #4f20b5 inset !important;
- box-shadow: 0px 0px 0px 1px #4f20b5 inset !important;
- color: #5829bb !important;
+.ui.basic.olive.buttons .button:focus,
+.ui.basic.olive.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #a0b605 inset;
+ box-shadow: 0 0 0 1px #a0b605 inset;
+ color: #a7bd0d;
}
-.ui.basic.violet.buttons .active.button,
-.ui.basic.violet.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #5626bf inset !important;
- box-shadow: 0px 0px 0px 1px #5626bf inset !important;
- color: #502aa1 !important;
+.ui.basic.olive.buttons .active.button,
+.ui.basic.olive.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #aac109 inset;
+ box-shadow: 0 0 0 1px #aac109 inset;
+ color: #8d9e13;
}
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #502aa1 inset !important;
- box-shadow: 0px 0px 0px 1px #502aa1 inset !important;
- color: #502aa1 !important;
+.ui.basic.olive.buttons .button:active,
+.ui.basic.olive.button:active {
+ -webkit-box-shadow: 0 0 0 1px #8d9e13 inset;
+ box-shadow: 0 0 0 1px #8d9e13 inset;
+ color: #8d9e13;
}
-.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.violet.buttons .button,
-.ui.inverted.violet.button {
+.ui.inverted.olive.buttons .button,
+.ui.inverted.olive.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #A291FB inset !important;
- box-shadow: 0px 0px 0px 2px #A291FB inset !important;
- color: #A291FB;
+ -webkit-box-shadow: 0 0 0 2px #D9E778 inset;
+ box-shadow: 0 0 0 2px #D9E778 inset;
+ color: #D9E778;
}
-.ui.inverted.violet.buttons .button:hover,
-.ui.inverted.violet.button:hover,
-.ui.inverted.violet.buttons .button:focus,
-.ui.inverted.violet.button:focus,
-.ui.inverted.violet.buttons .button.active,
-.ui.inverted.violet.button.active,
-.ui.inverted.violet.buttons .button:active,
-.ui.inverted.violet.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: #FFFFFF;
+.ui.inverted.olive.buttons .button:hover,
+.ui.inverted.olive.button:hover,
+.ui.inverted.olive.buttons .button:focus,
+.ui.inverted.olive.button:focus,
+.ui.inverted.olive.buttons .button.active,
+.ui.inverted.olive.button.active,
+.ui.inverted.olive.buttons .button:active,
+.ui.inverted.olive.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: rgba(0, 0, 0, 0.6);
}
-.ui.inverted.violet.buttons .button:hover,
-.ui.inverted.violet.button:hover {
- background-color: #8a73ff;
+.ui.inverted.olive.buttons .button:hover,
+.ui.inverted.olive.button:hover {
+ background-color: #d2e745;
}
-.ui.inverted.violet.buttons .button:focus,
-.ui.inverted.violet.button:focus {
- background-color: #7d64ff;
+.ui.inverted.olive.buttons .button:focus,
+.ui.inverted.olive.button:focus {
+ background-color: #daef47;
}
-.ui.inverted.violet.buttons .active.button,
-.ui.inverted.violet.active.button {
- background-color: #8a73ff;
+.ui.inverted.olive.buttons .active.button,
+.ui.inverted.olive.active.button {
+ background-color: #daed59;
}
-.ui.inverted.violet.buttons .button:active,
-.ui.inverted.violet.button:active {
- background-color: #7860f9;
+.ui.inverted.olive.buttons .button:active,
+.ui.inverted.olive.button:active {
+ background-color: #cddf4d;
}
/* Inverted Basic */
-.ui.inverted.violet.basic.buttons .button,
-.ui.inverted.violet.buttons .basic.button,
-.ui.inverted.violet.basic.button {
+.ui.inverted.olive.basic.buttons .button,
+.ui.inverted.olive.buttons .basic.button,
+.ui.inverted.olive.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
-}
-.ui.inverted.violet.basic.buttons .button:hover,
-.ui.inverted.violet.buttons .basic.button:hover,
-.ui.inverted.violet.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
- box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
- color: #A291FB !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.violet.basic.buttons .button:focus,
-.ui.inverted.violet.basic.buttons .button:focus,
-.ui.inverted.violet.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
- box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
- color: #A291FB !important;
+.ui.inverted.olive.basic.buttons .button:hover,
+.ui.inverted.olive.buttons .basic.button:hover,
+.ui.inverted.olive.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #d2e745 inset;
+ box-shadow: 0 0 0 2px #d2e745 inset;
+ color: #D9E778;
}
-.ui.inverted.violet.basic.buttons .active.button,
-.ui.inverted.violet.buttons .basic.active.button,
-.ui.inverted.violet.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
- box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
- color: #A291FB !important;
+.ui.inverted.olive.basic.buttons .button:focus,
+.ui.inverted.olive.basic.buttons .button:focus,
+.ui.inverted.olive.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #daef47 inset;
+ box-shadow: 0 0 0 2px #daef47 inset;
+ color: #D9E778;
}
-.ui.inverted.violet.basic.buttons .button:active,
-.ui.inverted.violet.buttons .basic.button:active,
-.ui.inverted.violet.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
- box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
- color: #A291FB !important;
+.ui.inverted.olive.basic.buttons .active.button,
+.ui.inverted.olive.buttons .basic.active.button,
+.ui.inverted.olive.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #daed59 inset;
+ box-shadow: 0 0 0 2px #daed59 inset;
+ color: #D9E778;
+}
+.ui.inverted.olive.basic.buttons .button:active,
+.ui.inverted.olive.buttons .basic.button:active,
+.ui.inverted.olive.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #cddf4d inset;
+ box-shadow: 0 0 0 2px #cddf4d inset;
+ color: #D9E778;
}
-/*--- Purple ---*/
-
-.ui.purple.buttons .button,
-.ui.purple.button {
- background-color: #A333C8;
+/* Tertiary */
+.ui.tertiary.olive.buttons .button,
+.ui.tertiary.olive.buttons .tertiary.button,
+.ui.tertiary.olive.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #B5CC18;
+}
+.ui.tertiary.olive.buttons .button:hover,
+.ui.tertiary.olive.buttons button:hover,
+.ui.tertiary.olive.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #98a922;
+ box-shadow: inset 0 -0.2em 0 #98a922;
+ color: #98a922;
+}
+.ui.tertiary.olive.buttons .button:focus,
+.ui.tertiary.olive.buttons .tertiary.button:focus,
+.ui.tertiary.olive.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #92a418;
+ box-shadow: inset 0 -0.2em 0 #92a418;
+ color: #92a418;
+}
+.ui.tertiary.olive.buttons .active.button,
+.ui.tertiary.olive.buttons .tertiary.active.button,
+.ui.tertiary.olive.active.button,
+.ui.tertiary.olive.buttons .button:active,
+.ui.tertiary.olive.buttons .tertiary.button:active,
+.ui.tertiary.olive.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #b1cb00;
+ box-shadow: inset 0 -0.2em 0 #b1cb00;
+ color: #aac109;
+}
+.ui.green.buttons .button,
+.ui.green.button {
+ background-color: #21BA45;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.purple.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.green.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover {
- background-color: #9627ba;
+.ui.green.buttons .button:hover,
+.ui.green.button:hover {
+ background-color: #16ab39;
color: #FFFFFF;
text-shadow: none;
}
-.ui.purple.buttons .button:focus,
-.ui.purple.button:focus {
- background-color: #8f1eb4;
+.ui.green.buttons .button:focus,
+.ui.green.button:focus {
+ background-color: #0ea432;
color: #FFFFFF;
text-shadow: none;
}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
- background-color: #82299f;
+.ui.green.buttons .button:active,
+.ui.green.button:active {
+ background-color: #198f35;
color: #FFFFFF;
text-shadow: none;
}
-.ui.purple.buttons .active.button,
-.ui.purple.buttons .active.button:active,
-.ui.purple.active.button,
-.ui.purple.button .active.button:active {
- background-color: #9724be;
+.ui.green.buttons .active.button,
+.ui.green.buttons .active.button:active,
+.ui.green.active.button,
+.ui.green.button .active.button:active {
+ background-color: #13ae38;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button {
- -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset !important;
- box-shadow: 0px 0px 0px 1px #A333C8 inset !important;
- color: #A333C8 !important;
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #21BA45 inset;
+ box-shadow: 0 0 0 1px #21BA45 inset;
+ color: #21BA45;
}
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #9627ba inset !important;
- box-shadow: 0px 0px 0px 1px #9627ba inset !important;
- color: #9627ba !important;
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #16ab39 inset;
+ box-shadow: 0 0 0 1px #16ab39 inset;
+ color: #16ab39;
}
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important;
- box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important;
- color: #9627ba !important;
+.ui.basic.green.buttons .button:focus,
+.ui.basic.green.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #0ea432 inset;
+ box-shadow: 0 0 0 1px #0ea432 inset;
+ color: #16ab39;
}
-.ui.basic.purple.buttons .active.button,
-.ui.basic.purple.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #9724be inset !important;
- box-shadow: 0px 0px 0px 1px #9724be inset !important;
- color: #82299f !important;
+.ui.basic.green.buttons .active.button,
+.ui.basic.green.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #13ae38 inset;
+ box-shadow: 0 0 0 1px #13ae38 inset;
+ color: #198f35;
}
-.ui.basic.purple.buttons .button:active,
-.ui.basic.purple.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #82299f inset !important;
- box-shadow: 0px 0px 0px 1px #82299f inset !important;
- color: #82299f !important;
+.ui.basic.green.buttons .button:active,
+.ui.basic.green.button:active {
+ -webkit-box-shadow: 0 0 0 1px #198f35 inset;
+ box-shadow: 0 0 0 1px #198f35 inset;
+ color: #198f35;
}
-.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.purple.buttons .button,
-.ui.inverted.purple.button {
+.ui.inverted.green.buttons .button,
+.ui.inverted.green.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #DC73FF inset !important;
- box-shadow: 0px 0px 0px 2px #DC73FF inset !important;
- color: #DC73FF;
+ -webkit-box-shadow: 0 0 0 2px #2ECC40 inset;
+ box-shadow: 0 0 0 2px #2ECC40 inset;
+ color: #2ECC40;
}
-.ui.inverted.purple.buttons .button:hover,
-.ui.inverted.purple.button:hover,
-.ui.inverted.purple.buttons .button:focus,
-.ui.inverted.purple.button:focus,
-.ui.inverted.purple.buttons .button.active,
-.ui.inverted.purple.button.active,
-.ui.inverted.purple.buttons .button:active,
-.ui.inverted.purple.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+.ui.inverted.green.buttons .button:hover,
+.ui.inverted.green.button:hover,
+.ui.inverted.green.buttons .button:focus,
+.ui.inverted.green.button:focus,
+.ui.inverted.green.buttons .button.active,
+.ui.inverted.green.button.active,
+.ui.inverted.green.buttons .button:active,
+.ui.inverted.green.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
color: #FFFFFF;
}
-.ui.inverted.purple.buttons .button:hover,
-.ui.inverted.purple.button:hover {
- background-color: #d65aff;
+.ui.inverted.green.buttons .button:hover,
+.ui.inverted.green.button:hover {
+ background-color: #1ea92e;
}
-.ui.inverted.purple.buttons .button:focus,
-.ui.inverted.purple.button:focus {
- background-color: #d24aff;
+.ui.inverted.green.buttons .button:focus,
+.ui.inverted.green.button:focus {
+ background-color: #19b82b;
}
-.ui.inverted.purple.buttons .active.button,
-.ui.inverted.purple.active.button {
- background-color: #d65aff;
+.ui.inverted.green.buttons .active.button,
+.ui.inverted.green.active.button {
+ background-color: #1fc231;
}
-.ui.inverted.purple.buttons .button:active,
-.ui.inverted.purple.button:active {
- background-color: #cf40ff;
+.ui.inverted.green.buttons .button:active,
+.ui.inverted.green.button:active {
+ background-color: #25a233;
}
/* Inverted Basic */
-.ui.inverted.purple.basic.buttons .button,
-.ui.inverted.purple.buttons .basic.button,
-.ui.inverted.purple.basic.button {
+.ui.inverted.green.basic.buttons .button,
+.ui.inverted.green.buttons .basic.button,
+.ui.inverted.green.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.purple.basic.buttons .button:hover,
-.ui.inverted.purple.buttons .basic.button:hover,
-.ui.inverted.purple.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important;
- box-shadow: 0px 0px 0px 2px #d65aff inset !important;
- color: #DC73FF !important;
+.ui.inverted.green.basic.buttons .button:hover,
+.ui.inverted.green.buttons .basic.button:hover,
+.ui.inverted.green.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #1ea92e inset;
+ box-shadow: 0 0 0 2px #1ea92e inset;
+ color: #2ECC40;
}
-.ui.inverted.purple.basic.buttons .button:focus,
-.ui.inverted.purple.basic.buttons .button:focus,
-.ui.inverted.purple.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #d24aff inset !important;
- box-shadow: 0px 0px 0px 2px #d24aff inset !important;
- color: #DC73FF !important;
+.ui.inverted.green.basic.buttons .button:focus,
+.ui.inverted.green.basic.buttons .button:focus,
+.ui.inverted.green.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #19b82b inset;
+ box-shadow: 0 0 0 2px #19b82b inset;
+ color: #2ECC40;
}
-.ui.inverted.purple.basic.buttons .active.button,
-.ui.inverted.purple.buttons .basic.active.button,
-.ui.inverted.purple.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important;
- box-shadow: 0px 0px 0px 2px #d65aff inset !important;
- color: #DC73FF !important;
+.ui.inverted.green.basic.buttons .active.button,
+.ui.inverted.green.buttons .basic.active.button,
+.ui.inverted.green.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #1fc231 inset;
+ box-shadow: 0 0 0 2px #1fc231 inset;
+ color: #2ECC40;
}
-.ui.inverted.purple.basic.buttons .button:active,
-.ui.inverted.purple.buttons .basic.button:active,
-.ui.inverted.purple.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
- box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
- color: #DC73FF !important;
+.ui.inverted.green.basic.buttons .button:active,
+.ui.inverted.green.buttons .basic.button:active,
+.ui.inverted.green.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #25a233 inset;
+ box-shadow: 0 0 0 2px #25a233 inset;
+ color: #2ECC40;
}
-/*--- Red ---*/
-
-.ui.red.buttons .button,
-.ui.red.button {
- background-color: #DB2828;
+/* Tertiary */
+.ui.tertiary.green.buttons .button,
+.ui.tertiary.green.buttons .tertiary.button,
+.ui.tertiary.green.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #21BA45;
+}
+.ui.tertiary.green.buttons .button:hover,
+.ui.tertiary.green.buttons button:hover,
+.ui.tertiary.green.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #2a9844;
+ box-shadow: inset 0 -0.2em 0 #2a9844;
+ color: #2a9844;
+}
+.ui.tertiary.green.buttons .button:focus,
+.ui.tertiary.green.buttons .tertiary.button:focus,
+.ui.tertiary.green.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #20923b;
+ box-shadow: inset 0 -0.2em 0 #20923b;
+ color: #20923b;
+}
+.ui.tertiary.green.buttons .active.button,
+.ui.tertiary.green.buttons .tertiary.active.button,
+.ui.tertiary.green.active.button,
+.ui.tertiary.green.buttons .button:active,
+.ui.tertiary.green.buttons .tertiary.button:active,
+.ui.tertiary.green.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #00c22e;
+ box-shadow: inset 0 -0.2em 0 #00c22e;
+ color: #13ae38;
+}
+.ui.teal.buttons .button,
+.ui.teal.button {
+ background-color: #00B5AD;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.red.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.teal.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover {
- background-color: #d01919;
+.ui.teal.buttons .button:hover,
+.ui.teal.button:hover {
+ background-color: #009c95;
color: #FFFFFF;
text-shadow: none;
}
-.ui.red.buttons .button:focus,
-.ui.red.button:focus {
- background-color: #ca1010;
+.ui.teal.buttons .button:focus,
+.ui.teal.button:focus {
+ background-color: #008c86;
color: #FFFFFF;
text-shadow: none;
}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
- background-color: #b21e1e;
+.ui.teal.buttons .button:active,
+.ui.teal.button:active {
+ background-color: #00827c;
color: #FFFFFF;
text-shadow: none;
}
-.ui.red.buttons .active.button,
-.ui.red.buttons .active.button:active,
-.ui.red.active.button,
-.ui.red.button .active.button:active {
- background-color: #d41515;
+.ui.teal.buttons .active.button,
+.ui.teal.buttons .active.button:active,
+.ui.teal.active.button,
+.ui.teal.button .active.button:active {
+ background-color: #009c95;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.red.buttons .button,
-.ui.basic.red.button {
- -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
- box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
- color: #DB2828 !important;
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #00B5AD inset;
+ box-shadow: 0 0 0 1px #00B5AD inset;
+ color: #00B5AD;
}
-.ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #d01919 inset !important;
- box-shadow: 0px 0px 0px 1px #d01919 inset !important;
- color: #d01919 !important;
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #009c95 inset;
+ box-shadow: 0 0 0 1px #009c95 inset;
+ color: #009c95;
}
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
- box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
- color: #d01919 !important;
+.ui.basic.teal.buttons .button:focus,
+.ui.basic.teal.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #008c86 inset;
+ box-shadow: 0 0 0 1px #008c86 inset;
+ color: #009c95;
}
-.ui.basic.red.buttons .active.button,
-.ui.basic.red.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #d41515 inset !important;
- box-shadow: 0px 0px 0px 1px #d41515 inset !important;
- color: #b21e1e !important;
+.ui.basic.teal.buttons .active.button,
+.ui.basic.teal.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #009c95 inset;
+ box-shadow: 0 0 0 1px #009c95 inset;
+ color: #00827c;
}
-.ui.basic.red.buttons .button:active,
-.ui.basic.red.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
- box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
- color: #b21e1e !important;
+.ui.basic.teal.buttons .button:active,
+.ui.basic.teal.button:active {
+ -webkit-box-shadow: 0 0 0 1px #00827c inset;
+ box-shadow: 0 0 0 1px #00827c inset;
+ color: #00827c;
}
-.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.red.buttons .button,
-.ui.inverted.red.button {
+.ui.inverted.teal.buttons .button,
+.ui.inverted.teal.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #FF695E inset !important;
- box-shadow: 0px 0px 0px 2px #FF695E inset !important;
- color: #FF695E;
+ -webkit-box-shadow: 0 0 0 2px #6DFFFF inset;
+ box-shadow: 0 0 0 2px #6DFFFF inset;
+ color: #6DFFFF;
}
-.ui.inverted.red.buttons .button:hover,
-.ui.inverted.red.button:hover,
-.ui.inverted.red.buttons .button:focus,
-.ui.inverted.red.button:focus,
-.ui.inverted.red.buttons .button.active,
-.ui.inverted.red.button.active,
-.ui.inverted.red.buttons .button:active,
-.ui.inverted.red.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: #FFFFFF;
-}
-.ui.inverted.red.buttons .button:hover,
-.ui.inverted.red.button:hover {
- background-color: #ff5144;
-}
-.ui.inverted.red.buttons .button:focus,
-.ui.inverted.red.button:focus {
- background-color: #ff4335;
-}
-.ui.inverted.red.buttons .active.button,
-.ui.inverted.red.active.button {
- background-color: #ff5144;
-}
-.ui.inverted.red.buttons .button:active,
-.ui.inverted.red.button:active {
- background-color: #ff392b;
-}
-
-/* Inverted Basic */
-.ui.inverted.red.basic.buttons .button,
-.ui.inverted.red.buttons .basic.button,
-.ui.inverted.red.basic.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
-}
-.ui.inverted.red.basic.buttons .button:hover,
-.ui.inverted.red.buttons .basic.button:hover,
-.ui.inverted.red.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
- box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
- color: #FF695E !important;
-}
-.ui.inverted.red.basic.buttons .button:focus,
-.ui.inverted.red.basic.buttons .button:focus,
-.ui.inverted.red.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
- box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
- color: #FF695E !important;
-}
-.ui.inverted.red.basic.buttons .active.button,
-.ui.inverted.red.buttons .basic.active.button,
-.ui.inverted.red.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
- box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
- color: #FF695E !important;
-}
-.ui.inverted.red.basic.buttons .button:active,
-.ui.inverted.red.buttons .basic.button:active,
-.ui.inverted.red.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #ff392b inset !important;
- box-shadow: 0px 0px 0px 2px #ff392b inset !important;
- color: #FF695E !important;
-}
-
-/*--- Teal ---*/
-
-.ui.teal.buttons .button,
-.ui.teal.button {
- background-color: #00B5AD;
- color: #FFFFFF;
- text-shadow: none;
- background-image: none;
-}
-.ui.teal.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover {
- background-color: #009c95;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.teal.buttons .button:focus,
-.ui.teal.button:focus {
- background-color: #008c86;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
- background-color: #00827c;
- color: #FFFFFF;
- text-shadow: none;
-}
-.ui.teal.buttons .active.button,
-.ui.teal.buttons .active.button:active,
-.ui.teal.active.button,
-.ui.teal.button .active.button:active {
- background-color: #009c95;
- color: #FFFFFF;
- text-shadow: none;
-}
-
-/* Basic */
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button {
- -webkit-box-shadow: 0px 0px 0px 1px #00B5AD inset !important;
- box-shadow: 0px 0px 0px 1px #00B5AD inset !important;
- color: #00B5AD !important;
-}
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !important;
- box-shadow: 0px 0px 0px 1px #009c95 inset !important;
- color: #009c95 !important;
-}
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #008c86 inset !important;
- box-shadow: 0px 0px 0px 1px #008c86 inset !important;
- color: #009c95 !important;
-}
-.ui.basic.teal.buttons .active.button,
-.ui.basic.teal.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !important;
- box-shadow: 0px 0px 0px 1px #009c95 inset !important;
- color: #00827c !important;
-}
-.ui.basic.teal.buttons .button:active,
-.ui.basic.teal.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #00827c inset !important;
- box-shadow: 0px 0px 0px 1px #00827c inset !important;
- color: #00827c !important;
-}
-.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
- margin-left: -1px;
-}
-
-/* Inverted */
-.ui.inverted.teal.buttons .button,
-.ui.inverted.teal.button {
- background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #6DFFFF inset !important;
- box-shadow: 0px 0px 0px 2px #6DFFFF inset !important;
- color: #6DFFFF;
-}
-.ui.inverted.teal.buttons .button:hover,
-.ui.inverted.teal.button:hover,
-.ui.inverted.teal.buttons .button:focus,
-.ui.inverted.teal.button:focus,
-.ui.inverted.teal.buttons .button.active,
-.ui.inverted.teal.button.active,
-.ui.inverted.teal.buttons .button:active,
-.ui.inverted.teal.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: rgba(0, 0, 0, 0.6);
+.ui.inverted.teal.buttons .button:hover,
+.ui.inverted.teal.button:hover,
+.ui.inverted.teal.buttons .button:focus,
+.ui.inverted.teal.button:focus,
+.ui.inverted.teal.buttons .button.active,
+.ui.inverted.teal.button.active,
+.ui.inverted.teal.buttons .button:active,
+.ui.inverted.teal.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: rgba(0, 0, 0, 0.6);
}
.ui.inverted.teal.buttons .button:hover,
.ui.inverted.teal.button:hover {
- background-color: #54ffff;
+ background-color: #3affff;
}
.ui.inverted.teal.buttons .button:focus,
.ui.inverted.teal.button:focus {
@@ -2919,658 +2745,1366 @@
.ui.inverted.teal.buttons .basic.button,
.ui.inverted.teal.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
.ui.inverted.teal.basic.buttons .button:hover,
.ui.inverted.teal.buttons .basic.button:hover,
.ui.inverted.teal.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important;
- box-shadow: 0px 0px 0px 2px #54ffff inset !important;
- color: #6DFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px #3affff inset;
+ box-shadow: 0 0 0 2px #3affff inset;
+ color: #6DFFFF;
}
.ui.inverted.teal.basic.buttons .button:focus,
.ui.inverted.teal.basic.buttons .button:focus,
.ui.inverted.teal.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #44ffff inset !important;
- box-shadow: 0px 0px 0px 2px #44ffff inset !important;
- color: #6DFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px #44ffff inset;
+ box-shadow: 0 0 0 2px #44ffff inset;
+ color: #6DFFFF;
}
.ui.inverted.teal.basic.buttons .active.button,
.ui.inverted.teal.buttons .basic.active.button,
.ui.inverted.teal.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important;
- box-shadow: 0px 0px 0px 2px #54ffff inset !important;
- color: #6DFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px #54ffff inset;
+ box-shadow: 0 0 0 2px #54ffff inset;
+ color: #6DFFFF;
}
.ui.inverted.teal.basic.buttons .button:active,
.ui.inverted.teal.buttons .basic.button:active,
.ui.inverted.teal.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #3affff inset !important;
- box-shadow: 0px 0px 0px 2px #3affff inset !important;
- color: #6DFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px #3affff inset;
+ box-shadow: 0 0 0 2px #3affff inset;
+ color: #6DFFFF;
}
-/*--- Olive ---*/
-
-.ui.olive.buttons .button,
-.ui.olive.button {
- background-color: #B5CC18;
+/* Tertiary */
+.ui.tertiary.teal.buttons .button,
+.ui.tertiary.teal.buttons .tertiary.button,
+.ui.tertiary.teal.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #00B5AD;
+}
+.ui.tertiary.teal.buttons .button:hover,
+.ui.tertiary.teal.buttons button:hover,
+.ui.tertiary.teal.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #108c86;
+ box-shadow: inset 0 -0.2em 0 #108c86;
+ color: #108c86;
+}
+.ui.tertiary.teal.buttons .button:focus,
+.ui.tertiary.teal.buttons .tertiary.button:focus,
+.ui.tertiary.teal.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #0e7e79;
+ box-shadow: inset 0 -0.2em 0 #0e7e79;
+ color: #0e7e79;
+}
+.ui.tertiary.teal.buttons .active.button,
+.ui.tertiary.teal.buttons .tertiary.active.button,
+.ui.tertiary.teal.active.button,
+.ui.tertiary.teal.buttons .button:active,
+.ui.tertiary.teal.buttons .tertiary.button:active,
+.ui.tertiary.teal.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #009c95;
+ box-shadow: inset 0 -0.2em 0 #009c95;
+ color: #009c95;
+}
+.ui.blue.buttons .button,
+.ui.blue.button {
+ background-color: #2185D0;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.olive.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.blue.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.olive.buttons .button:hover,
-.ui.olive.button:hover {
- background-color: #a7bd0d;
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover {
+ background-color: #1678c2;
color: #FFFFFF;
text-shadow: none;
}
-.ui.olive.buttons .button:focus,
-.ui.olive.button:focus {
- background-color: #a0b605;
+.ui.blue.buttons .button:focus,
+.ui.blue.button:focus {
+ background-color: #0d71bb;
color: #FFFFFF;
text-shadow: none;
}
-.ui.olive.buttons .button:active,
-.ui.olive.button:active {
- background-color: #8d9e13;
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+ background-color: #1a69a4;
color: #FFFFFF;
text-shadow: none;
}
-.ui.olive.buttons .active.button,
-.ui.olive.buttons .active.button:active,
-.ui.olive.active.button,
-.ui.olive.button .active.button:active {
- background-color: #aac109;
+.ui.blue.buttons .active.button,
+.ui.blue.buttons .active.button:active,
+.ui.blue.active.button,
+.ui.blue.button .active.button:active {
+ background-color: #1279c6;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button {
- -webkit-box-shadow: 0px 0px 0px 1px #B5CC18 inset !important;
- box-shadow: 0px 0px 0px 1px #B5CC18 inset !important;
- color: #B5CC18 !important;
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset;
+ box-shadow: 0 0 0 1px #2185D0 inset;
+ color: #2185D0;
}
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #a7bd0d inset !important;
- box-shadow: 0px 0px 0px 1px #a7bd0d inset !important;
- color: #a7bd0d !important;
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #1678c2 inset;
+ box-shadow: 0 0 0 1px #1678c2 inset;
+ color: #1678c2;
}
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #a0b605 inset !important;
- box-shadow: 0px 0px 0px 1px #a0b605 inset !important;
- color: #a7bd0d !important;
+.ui.basic.blue.buttons .button:focus,
+.ui.basic.blue.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #0d71bb inset;
+ box-shadow: 0 0 0 1px #0d71bb inset;
+ color: #1678c2;
}
-.ui.basic.olive.buttons .active.button,
-.ui.basic.olive.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #aac109 inset !important;
- box-shadow: 0px 0px 0px 1px #aac109 inset !important;
- color: #8d9e13 !important;
+.ui.basic.blue.buttons .active.button,
+.ui.basic.blue.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #1279c6 inset;
+ box-shadow: 0 0 0 1px #1279c6 inset;
+ color: #1a69a4;
}
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #8d9e13 inset !important;
- box-shadow: 0px 0px 0px 1px #8d9e13 inset !important;
- color: #8d9e13 !important;
+.ui.basic.blue.buttons .button:active,
+.ui.basic.blue.button:active {
+ -webkit-box-shadow: 0 0 0 1px #1a69a4 inset;
+ box-shadow: 0 0 0 1px #1a69a4 inset;
+ color: #1a69a4;
}
-.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.olive.buttons .button,
-.ui.inverted.olive.button {
+.ui.inverted.blue.buttons .button,
+.ui.inverted.blue.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #D9E778 inset !important;
- box-shadow: 0px 0px 0px 2px #D9E778 inset !important;
- color: #D9E778;
+ -webkit-box-shadow: 0 0 0 2px #54C8FF inset;
+ box-shadow: 0 0 0 2px #54C8FF inset;
+ color: #54C8FF;
}
-.ui.inverted.olive.buttons .button:hover,
-.ui.inverted.olive.button:hover,
-.ui.inverted.olive.buttons .button:focus,
-.ui.inverted.olive.button:focus,
-.ui.inverted.olive.buttons .button.active,
-.ui.inverted.olive.button.active,
-.ui.inverted.olive.buttons .button:active,
-.ui.inverted.olive.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: rgba(0, 0, 0, 0.6);
+.ui.inverted.blue.buttons .button:hover,
+.ui.inverted.blue.button:hover,
+.ui.inverted.blue.buttons .button:focus,
+.ui.inverted.blue.button:focus,
+.ui.inverted.blue.buttons .button.active,
+.ui.inverted.blue.button.active,
+.ui.inverted.blue.buttons .button:active,
+.ui.inverted.blue.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
}
-.ui.inverted.olive.buttons .button:hover,
-.ui.inverted.olive.button:hover {
- background-color: #d8ea5c;
+.ui.inverted.blue.buttons .button:hover,
+.ui.inverted.blue.button:hover {
+ background-color: #21b8ff;
}
-.ui.inverted.olive.buttons .button:focus,
-.ui.inverted.olive.button:focus {
- background-color: #daef47;
+.ui.inverted.blue.buttons .button:focus,
+.ui.inverted.blue.button:focus {
+ background-color: #2bbbff;
}
-.ui.inverted.olive.buttons .active.button,
-.ui.inverted.olive.active.button {
- background-color: #daed59;
+.ui.inverted.blue.buttons .active.button,
+.ui.inverted.blue.active.button {
+ background-color: #3ac0ff;
}
-.ui.inverted.olive.buttons .button:active,
-.ui.inverted.olive.button:active {
- background-color: #cddf4d;
+.ui.inverted.blue.buttons .button:active,
+.ui.inverted.blue.button:active {
+ background-color: #21b8ff;
}
/* Inverted Basic */
-.ui.inverted.olive.basic.buttons .button,
-.ui.inverted.olive.buttons .basic.button,
-.ui.inverted.olive.basic.button {
+.ui.inverted.blue.basic.buttons .button,
+.ui.inverted.blue.buttons .basic.button,
+.ui.inverted.blue.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.olive.basic.buttons .button:hover,
-.ui.inverted.olive.buttons .basic.button:hover,
-.ui.inverted.olive.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #d8ea5c inset !important;
- box-shadow: 0px 0px 0px 2px #d8ea5c inset !important;
- color: #D9E778 !important;
+.ui.inverted.blue.basic.buttons .button:hover,
+.ui.inverted.blue.buttons .basic.button:hover,
+.ui.inverted.blue.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
+ box-shadow: 0 0 0 2px #21b8ff inset;
+ color: #54C8FF;
}
-.ui.inverted.olive.basic.buttons .button:focus,
-.ui.inverted.olive.basic.buttons .button:focus,
-.ui.inverted.olive.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #daef47 inset !important;
- box-shadow: 0px 0px 0px 2px #daef47 inset !important;
- color: #D9E778 !important;
+.ui.inverted.blue.basic.buttons .button:focus,
+.ui.inverted.blue.basic.buttons .button:focus,
+.ui.inverted.blue.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #2bbbff inset;
+ box-shadow: 0 0 0 2px #2bbbff inset;
+ color: #54C8FF;
}
-.ui.inverted.olive.basic.buttons .active.button,
-.ui.inverted.olive.buttons .basic.active.button,
-.ui.inverted.olive.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #daed59 inset !important;
- box-shadow: 0px 0px 0px 2px #daed59 inset !important;
- color: #D9E778 !important;
+.ui.inverted.blue.basic.buttons .active.button,
+.ui.inverted.blue.buttons .basic.active.button,
+.ui.inverted.blue.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #3ac0ff inset;
+ box-shadow: 0 0 0 2px #3ac0ff inset;
+ color: #54C8FF;
}
-.ui.inverted.olive.basic.buttons .button:active,
-.ui.inverted.olive.buttons .basic.button:active,
-.ui.inverted.olive.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #cddf4d inset !important;
- box-shadow: 0px 0px 0px 2px #cddf4d inset !important;
- color: #D9E778 !important;
+.ui.inverted.blue.basic.buttons .button:active,
+.ui.inverted.blue.buttons .basic.button:active,
+.ui.inverted.blue.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
+ box-shadow: 0 0 0 2px #21b8ff inset;
+ color: #54C8FF;
+}
+
+/* Tertiary */
+.ui.tertiary.blue.buttons .button,
+.ui.tertiary.blue.buttons .tertiary.button,
+.ui.tertiary.blue.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #2185D0;
+}
+.ui.tertiary.blue.buttons .button:hover,
+.ui.tertiary.blue.buttons button:hover,
+.ui.tertiary.blue.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #2b75ac;
+ box-shadow: inset 0 -0.2em 0 #2b75ac;
+ color: #2b75ac;
+}
+.ui.tertiary.blue.buttons .button:focus,
+.ui.tertiary.blue.buttons .tertiary.button:focus,
+.ui.tertiary.blue.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #216ea7;
+ box-shadow: inset 0 -0.2em 0 #216ea7;
+ color: #216ea7;
+}
+.ui.tertiary.blue.buttons .active.button,
+.ui.tertiary.blue.buttons .tertiary.active.button,
+.ui.tertiary.blue.active.button,
+.ui.tertiary.blue.buttons .button:active,
+.ui.tertiary.blue.buttons .tertiary.button:active,
+.ui.tertiary.blue.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #007bd8;
+ box-shadow: inset 0 -0.2em 0 #007bd8;
+ color: #1279c6;
+}
+.ui.violet.buttons .button,
+.ui.violet.button {
+ background-color: #6435C9;
+ color: #FFFFFF;
+ text-shadow: none;
+ background-image: none;
+}
+.ui.violet.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+.ui.violet.buttons .button:hover,
+.ui.violet.button:hover {
+ background-color: #5829bb;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.violet.buttons .button:focus,
+.ui.violet.button:focus {
+ background-color: #4f20b5;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.violet.buttons .button:active,
+.ui.violet.button:active {
+ background-color: #502aa1;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.violet.buttons .active.button,
+.ui.violet.buttons .active.button:active,
+.ui.violet.active.button,
+.ui.violet.button .active.button:active {
+ background-color: #5626bf;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.violet.buttons .button,
+.ui.basic.violet.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #6435C9 inset;
+ box-shadow: 0 0 0 1px #6435C9 inset;
+ color: #6435C9;
+}
+.ui.basic.violet.buttons .button:hover,
+.ui.basic.violet.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #5829bb inset;
+ box-shadow: 0 0 0 1px #5829bb inset;
+ color: #5829bb;
+}
+.ui.basic.violet.buttons .button:focus,
+.ui.basic.violet.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #4f20b5 inset;
+ box-shadow: 0 0 0 1px #4f20b5 inset;
+ color: #5829bb;
+}
+.ui.basic.violet.buttons .active.button,
+.ui.basic.violet.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #5626bf inset;
+ box-shadow: 0 0 0 1px #5626bf inset;
+ color: #502aa1;
+}
+.ui.basic.violet.buttons .button:active,
+.ui.basic.violet.button:active {
+ -webkit-box-shadow: 0 0 0 1px #502aa1 inset;
+ box-shadow: 0 0 0 1px #502aa1 inset;
+ color: #502aa1;
+}
+.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
+ margin-left: -1px;
+}
+
+/* Inverted */
+.ui.inverted.violet.buttons .button,
+.ui.inverted.violet.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px #A291FB inset;
+ box-shadow: 0 0 0 2px #A291FB inset;
+ color: #A291FB;
+}
+.ui.inverted.violet.buttons .button:hover,
+.ui.inverted.violet.button:hover,
+.ui.inverted.violet.buttons .button:focus,
+.ui.inverted.violet.button:focus,
+.ui.inverted.violet.buttons .button.active,
+.ui.inverted.violet.button.active,
+.ui.inverted.violet.buttons .button:active,
+.ui.inverted.violet.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
+}
+.ui.inverted.violet.buttons .button:hover,
+.ui.inverted.violet.button:hover {
+ background-color: #745aff;
+}
+.ui.inverted.violet.buttons .button:focus,
+.ui.inverted.violet.button:focus {
+ background-color: #7d64ff;
+}
+.ui.inverted.violet.buttons .active.button,
+.ui.inverted.violet.active.button {
+ background-color: #8a73ff;
+}
+.ui.inverted.violet.buttons .button:active,
+.ui.inverted.violet.button:active {
+ background-color: #7860f9;
+}
+
+/* Inverted Basic */
+.ui.inverted.violet.basic.buttons .button,
+.ui.inverted.violet.buttons .basic.button,
+.ui.inverted.violet.basic.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
+}
+.ui.inverted.violet.basic.buttons .button:hover,
+.ui.inverted.violet.buttons .basic.button:hover,
+.ui.inverted.violet.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #745aff inset;
+ box-shadow: 0 0 0 2px #745aff inset;
+ color: #A291FB;
+}
+.ui.inverted.violet.basic.buttons .button:focus,
+.ui.inverted.violet.basic.buttons .button:focus,
+.ui.inverted.violet.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #7d64ff inset;
+ box-shadow: 0 0 0 2px #7d64ff inset;
+ color: #A291FB;
+}
+.ui.inverted.violet.basic.buttons .active.button,
+.ui.inverted.violet.buttons .basic.active.button,
+.ui.inverted.violet.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #8a73ff inset;
+ box-shadow: 0 0 0 2px #8a73ff inset;
+ color: #A291FB;
+}
+.ui.inverted.violet.basic.buttons .button:active,
+.ui.inverted.violet.buttons .basic.button:active,
+.ui.inverted.violet.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #7860f9 inset;
+ box-shadow: 0 0 0 2px #7860f9 inset;
+ color: #A291FB;
+}
+
+/* Tertiary */
+.ui.tertiary.violet.buttons .button,
+.ui.tertiary.violet.buttons .tertiary.button,
+.ui.tertiary.violet.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #6435C9;
+}
+.ui.tertiary.violet.buttons .button:hover,
+.ui.tertiary.violet.buttons button:hover,
+.ui.tertiary.violet.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #6040a5;
+ box-shadow: inset 0 -0.2em 0 #6040a5;
+ color: #6040a5;
+}
+.ui.tertiary.violet.buttons .button:focus,
+.ui.tertiary.violet.buttons .tertiary.button:focus,
+.ui.tertiary.violet.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #5735a0;
+ box-shadow: inset 0 -0.2em 0 #5735a0;
+ color: #5735a0;
+}
+.ui.tertiary.violet.buttons .active.button,
+.ui.tertiary.violet.buttons .tertiary.active.button,
+.ui.tertiary.violet.active.button,
+.ui.tertiary.violet.buttons .button:active,
+.ui.tertiary.violet.buttons .tertiary.button:active,
+.ui.tertiary.violet.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #4e0fd6;
+ box-shadow: inset 0 -0.2em 0 #4e0fd6;
+ color: #5626bf;
+}
+.ui.purple.buttons .button,
+.ui.purple.button {
+ background-color: #A333C8;
+ color: #FFFFFF;
+ text-shadow: none;
+ background-image: none;
+}
+.ui.purple.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+.ui.purple.buttons .button:hover,
+.ui.purple.button:hover {
+ background-color: #9627ba;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.purple.buttons .button:focus,
+.ui.purple.button:focus {
+ background-color: #8f1eb4;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.purple.buttons .button:active,
+.ui.purple.button:active {
+ background-color: #82299f;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.purple.buttons .active.button,
+.ui.purple.buttons .active.button:active,
+.ui.purple.active.button,
+.ui.purple.button .active.button:active {
+ background-color: #9724be;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #A333C8 inset;
+ box-shadow: 0 0 0 1px #A333C8 inset;
+ color: #A333C8;
+}
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #9627ba inset;
+ box-shadow: 0 0 0 1px #9627ba inset;
+ color: #9627ba;
+}
+.ui.basic.purple.buttons .button:focus,
+.ui.basic.purple.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #8f1eb4 inset;
+ box-shadow: 0 0 0 1px #8f1eb4 inset;
+ color: #9627ba;
+}
+.ui.basic.purple.buttons .active.button,
+.ui.basic.purple.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #9724be inset;
+ box-shadow: 0 0 0 1px #9724be inset;
+ color: #82299f;
+}
+.ui.basic.purple.buttons .button:active,
+.ui.basic.purple.button:active {
+ -webkit-box-shadow: 0 0 0 1px #82299f inset;
+ box-shadow: 0 0 0 1px #82299f inset;
+ color: #82299f;
+}
+.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
+ margin-left: -1px;
+}
+
+/* Inverted */
+.ui.inverted.purple.buttons .button,
+.ui.inverted.purple.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px #DC73FF inset;
+ box-shadow: 0 0 0 2px #DC73FF inset;
+ color: #DC73FF;
+}
+.ui.inverted.purple.buttons .button:hover,
+.ui.inverted.purple.button:hover,
+.ui.inverted.purple.buttons .button:focus,
+.ui.inverted.purple.button:focus,
+.ui.inverted.purple.buttons .button.active,
+.ui.inverted.purple.button.active,
+.ui.inverted.purple.buttons .button:active,
+.ui.inverted.purple.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
+}
+.ui.inverted.purple.buttons .button:hover,
+.ui.inverted.purple.button:hover {
+ background-color: #cf40ff;
+}
+.ui.inverted.purple.buttons .button:focus,
+.ui.inverted.purple.button:focus {
+ background-color: #d24aff;
+}
+.ui.inverted.purple.buttons .active.button,
+.ui.inverted.purple.active.button {
+ background-color: #d65aff;
+}
+.ui.inverted.purple.buttons .button:active,
+.ui.inverted.purple.button:active {
+ background-color: #cf40ff;
+}
+
+/* Inverted Basic */
+.ui.inverted.purple.basic.buttons .button,
+.ui.inverted.purple.buttons .basic.button,
+.ui.inverted.purple.basic.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
+}
+.ui.inverted.purple.basic.buttons .button:hover,
+.ui.inverted.purple.buttons .basic.button:hover,
+.ui.inverted.purple.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #cf40ff inset;
+ box-shadow: 0 0 0 2px #cf40ff inset;
+ color: #DC73FF;
+}
+.ui.inverted.purple.basic.buttons .button:focus,
+.ui.inverted.purple.basic.buttons .button:focus,
+.ui.inverted.purple.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #d24aff inset;
+ box-shadow: 0 0 0 2px #d24aff inset;
+ color: #DC73FF;
+}
+.ui.inverted.purple.basic.buttons .active.button,
+.ui.inverted.purple.buttons .basic.active.button,
+.ui.inverted.purple.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #d65aff inset;
+ box-shadow: 0 0 0 2px #d65aff inset;
+ color: #DC73FF;
+}
+.ui.inverted.purple.basic.buttons .button:active,
+.ui.inverted.purple.buttons .basic.button:active,
+.ui.inverted.purple.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #cf40ff inset;
+ box-shadow: 0 0 0 2px #cf40ff inset;
+ color: #DC73FF;
+}
+
+/* Tertiary */
+.ui.tertiary.purple.buttons .button,
+.ui.tertiary.purple.buttons .tertiary.button,
+.ui.tertiary.purple.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #A333C8;
+}
+.ui.tertiary.purple.buttons .button:hover,
+.ui.tertiary.purple.buttons button:hover,
+.ui.tertiary.purple.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #8a3ea4;
+ box-shadow: inset 0 -0.2em 0 #8a3ea4;
+ color: #8a3ea4;
+}
+.ui.tertiary.purple.buttons .button:focus,
+.ui.tertiary.purple.buttons .tertiary.button:focus,
+.ui.tertiary.purple.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #84339f;
+ box-shadow: inset 0 -0.2em 0 #84339f;
+ color: #84339f;
+}
+.ui.tertiary.purple.buttons .active.button,
+.ui.tertiary.purple.buttons .tertiary.active.button,
+.ui.tertiary.purple.active.button,
+.ui.tertiary.purple.buttons .button:active,
+.ui.tertiary.purple.buttons .tertiary.button:active,
+.ui.tertiary.purple.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #a30dd4;
+ box-shadow: inset 0 -0.2em 0 #a30dd4;
+ color: #9724be;
+}
+.ui.pink.buttons .button,
+.ui.pink.button {
+ background-color: #E03997;
+ color: #FFFFFF;
+ text-shadow: none;
+ background-image: none;
+}
+.ui.pink.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+.ui.pink.buttons .button:hover,
+.ui.pink.button:hover {
+ background-color: #e61a8d;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.pink.buttons .button:focus,
+.ui.pink.button:focus {
+ background-color: #e10f85;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.pink.buttons .button:active,
+.ui.pink.button:active {
+ background-color: #c71f7e;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+.ui.pink.buttons .active.button,
+.ui.pink.buttons .active.button:active,
+.ui.pink.active.button,
+.ui.pink.button .active.button:active {
+ background-color: #ea158d;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+
+/* Basic */
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #E03997 inset;
+ box-shadow: 0 0 0 1px #E03997 inset;
+ color: #E03997;
+}
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #e61a8d inset;
+ box-shadow: 0 0 0 1px #e61a8d inset;
+ color: #e61a8d;
+}
+.ui.basic.pink.buttons .button:focus,
+.ui.basic.pink.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #e10f85 inset;
+ box-shadow: 0 0 0 1px #e10f85 inset;
+ color: #e61a8d;
+}
+.ui.basic.pink.buttons .active.button,
+.ui.basic.pink.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #ea158d inset;
+ box-shadow: 0 0 0 1px #ea158d inset;
+ color: #c71f7e;
+}
+.ui.basic.pink.buttons .button:active,
+.ui.basic.pink.button:active {
+ -webkit-box-shadow: 0 0 0 1px #c71f7e inset;
+ box-shadow: 0 0 0 1px #c71f7e inset;
+ color: #c71f7e;
+}
+.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
+ margin-left: -1px;
}
-/*--- Yellow ---*/
+/* Inverted */
+.ui.inverted.pink.buttons .button,
+.ui.inverted.pink.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px #FF8EDF inset;
+ box-shadow: 0 0 0 2px #FF8EDF inset;
+ color: #FF8EDF;
+}
+.ui.inverted.pink.buttons .button:hover,
+.ui.inverted.pink.button:hover,
+.ui.inverted.pink.buttons .button:focus,
+.ui.inverted.pink.button:focus,
+.ui.inverted.pink.buttons .button.active,
+.ui.inverted.pink.button.active,
+.ui.inverted.pink.buttons .button:active,
+.ui.inverted.pink.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
+}
+.ui.inverted.pink.buttons .button:hover,
+.ui.inverted.pink.button:hover {
+ background-color: #ff5bd1;
+}
+.ui.inverted.pink.buttons .button:focus,
+.ui.inverted.pink.button:focus {
+ background-color: #ff65d3;
+}
+.ui.inverted.pink.buttons .active.button,
+.ui.inverted.pink.active.button {
+ background-color: #ff74d8;
+}
+.ui.inverted.pink.buttons .button:active,
+.ui.inverted.pink.button:active {
+ background-color: #ff5bd1;
+}
-.ui.yellow.buttons .button,
-.ui.yellow.button {
- background-color: #FBBD08;
+/* Inverted Basic */
+.ui.inverted.pink.basic.buttons .button,
+.ui.inverted.pink.buttons .basic.button,
+.ui.inverted.pink.basic.button {
+ background-color: transparent;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
+}
+.ui.inverted.pink.basic.buttons .button:hover,
+.ui.inverted.pink.buttons .basic.button:hover,
+.ui.inverted.pink.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #ff5bd1 inset;
+ box-shadow: 0 0 0 2px #ff5bd1 inset;
+ color: #FF8EDF;
+}
+.ui.inverted.pink.basic.buttons .button:focus,
+.ui.inverted.pink.basic.buttons .button:focus,
+.ui.inverted.pink.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #ff65d3 inset;
+ box-shadow: 0 0 0 2px #ff65d3 inset;
+ color: #FF8EDF;
+}
+.ui.inverted.pink.basic.buttons .active.button,
+.ui.inverted.pink.buttons .basic.active.button,
+.ui.inverted.pink.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #ff74d8 inset;
+ box-shadow: 0 0 0 2px #ff74d8 inset;
+ color: #FF8EDF;
+}
+.ui.inverted.pink.basic.buttons .button:active,
+.ui.inverted.pink.buttons .basic.button:active,
+.ui.inverted.pink.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #ff5bd1 inset;
+ box-shadow: 0 0 0 2px #ff5bd1 inset;
+ color: #FF8EDF;
+}
+
+/* Tertiary */
+.ui.tertiary.pink.buttons .button,
+.ui.tertiary.pink.buttons .tertiary.button,
+.ui.tertiary.pink.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #E03997;
+}
+.ui.tertiary.pink.buttons .button:hover,
+.ui.tertiary.pink.buttons button:hover,
+.ui.tertiary.pink.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #cc3389;
+ box-shadow: inset 0 -0.2em 0 #cc3389;
+ color: #cc3389;
+}
+.ui.tertiary.pink.buttons .button:focus,
+.ui.tertiary.pink.buttons .tertiary.button:focus,
+.ui.tertiary.pink.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #c92782;
+ box-shadow: inset 0 -0.2em 0 #c92782;
+ color: #c92782;
+}
+.ui.tertiary.pink.buttons .active.button,
+.ui.tertiary.pink.buttons .tertiary.active.button,
+.ui.tertiary.pink.active.button,
+.ui.tertiary.pink.buttons .button:active,
+.ui.tertiary.pink.buttons .tertiary.button:active,
+.ui.tertiary.pink.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #ff0090;
+ box-shadow: inset 0 -0.2em 0 #ff0090;
+ color: #ea158d;
+}
+.ui.brown.buttons .button,
+.ui.brown.button {
+ background-color: #A5673F;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.yellow.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.brown.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.yellow.buttons .button:hover,
-.ui.yellow.button:hover {
- background-color: #eaae00;
+.ui.brown.buttons .button:hover,
+.ui.brown.button:hover {
+ background-color: #975b33;
color: #FFFFFF;
text-shadow: none;
}
-.ui.yellow.buttons .button:focus,
-.ui.yellow.button:focus {
- background-color: #daa300;
+.ui.brown.buttons .button:focus,
+.ui.brown.button:focus {
+ background-color: #90532b;
color: #FFFFFF;
text-shadow: none;
}
-.ui.yellow.buttons .button:active,
-.ui.yellow.button:active {
- background-color: #cd9903;
+.ui.brown.buttons .button:active,
+.ui.brown.button:active {
+ background-color: #805031;
color: #FFFFFF;
text-shadow: none;
}
-.ui.yellow.buttons .active.button,
-.ui.yellow.buttons .active.button:active,
-.ui.yellow.active.button,
-.ui.yellow.button .active.button:active {
- background-color: #eaae00;
+.ui.brown.buttons .active.button,
+.ui.brown.buttons .active.button:active,
+.ui.brown.active.button,
+.ui.brown.button .active.button:active {
+ background-color: #995a31;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button {
- -webkit-box-shadow: 0px 0px 0px 1px #FBBD08 inset !important;
- box-shadow: 0px 0px 0px 1px #FBBD08 inset !important;
- color: #FBBD08 !important;
+.ui.basic.brown.buttons .button,
+.ui.basic.brown.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #A5673F inset;
+ box-shadow: 0 0 0 1px #A5673F inset;
+ color: #A5673F;
}
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
- box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
- color: #eaae00 !important;
+.ui.basic.brown.buttons .button:hover,
+.ui.basic.brown.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #975b33 inset;
+ box-shadow: 0 0 0 1px #975b33 inset;
+ color: #975b33;
}
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #daa300 inset !important;
- box-shadow: 0px 0px 0px 1px #daa300 inset !important;
- color: #eaae00 !important;
+.ui.basic.brown.buttons .button:focus,
+.ui.basic.brown.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #90532b inset;
+ box-shadow: 0 0 0 1px #90532b inset;
+ color: #975b33;
}
-.ui.basic.yellow.buttons .active.button,
-.ui.basic.yellow.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
- box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
- color: #cd9903 !important;
+.ui.basic.brown.buttons .active.button,
+.ui.basic.brown.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #995a31 inset;
+ box-shadow: 0 0 0 1px #995a31 inset;
+ color: #805031;
}
-.ui.basic.yellow.buttons .button:active,
-.ui.basic.yellow.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #cd9903 inset !important;
- box-shadow: 0px 0px 0px 1px #cd9903 inset !important;
- color: #cd9903 !important;
+.ui.basic.brown.buttons .button:active,
+.ui.basic.brown.button:active {
+ -webkit-box-shadow: 0 0 0 1px #805031 inset;
+ box-shadow: 0 0 0 1px #805031 inset;
+ color: #805031;
}
-.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.yellow.buttons .button,
-.ui.inverted.yellow.button {
+.ui.inverted.brown.buttons .button,
+.ui.inverted.brown.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #FFE21F inset !important;
- box-shadow: 0px 0px 0px 2px #FFE21F inset !important;
- color: #FFE21F;
+ -webkit-box-shadow: 0 0 0 2px #D67C1C inset;
+ box-shadow: 0 0 0 2px #D67C1C inset;
+ color: #D67C1C;
}
-.ui.inverted.yellow.buttons .button:hover,
-.ui.inverted.yellow.button:hover,
-.ui.inverted.yellow.buttons .button:focus,
-.ui.inverted.yellow.button:focus,
-.ui.inverted.yellow.buttons .button.active,
-.ui.inverted.yellow.button.active,
-.ui.inverted.yellow.buttons .button:active,
-.ui.inverted.yellow.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
- color: rgba(0, 0, 0, 0.6);
+.ui.inverted.brown.buttons .button:hover,
+.ui.inverted.brown.button:hover,
+.ui.inverted.brown.buttons .button:focus,
+.ui.inverted.brown.button:focus,
+.ui.inverted.brown.buttons .button.active,
+.ui.inverted.brown.button.active,
+.ui.inverted.brown.buttons .button:active,
+.ui.inverted.brown.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: #FFFFFF;
}
-.ui.inverted.yellow.buttons .button:hover,
-.ui.inverted.yellow.button:hover {
- background-color: #ffdf05;
+.ui.inverted.brown.buttons .button:hover,
+.ui.inverted.brown.button:hover {
+ background-color: #b0620f;
}
-.ui.inverted.yellow.buttons .button:focus,
-.ui.inverted.yellow.button:focus {
- background-color: #f5d500;
+.ui.inverted.brown.buttons .button:focus,
+.ui.inverted.brown.button:focus {
+ background-color: #c16808;
}
-.ui.inverted.yellow.buttons .active.button,
-.ui.inverted.yellow.active.button {
- background-color: #ffdf05;
+.ui.inverted.brown.buttons .active.button,
+.ui.inverted.brown.active.button {
+ background-color: #cc6f0d;
}
-.ui.inverted.yellow.buttons .button:active,
-.ui.inverted.yellow.button:active {
- background-color: #ebcd00;
+.ui.inverted.brown.buttons .button:active,
+.ui.inverted.brown.button:active {
+ background-color: #a96216;
}
/* Inverted Basic */
-.ui.inverted.yellow.basic.buttons .button,
-.ui.inverted.yellow.buttons .basic.button,
-.ui.inverted.yellow.basic.button {
+.ui.inverted.brown.basic.buttons .button,
+.ui.inverted.brown.buttons .basic.button,
+.ui.inverted.brown.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.yellow.basic.buttons .button:hover,
-.ui.inverted.yellow.buttons .basic.button:hover,
-.ui.inverted.yellow.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
- box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
- color: #FFE21F !important;
+.ui.inverted.brown.basic.buttons .button:hover,
+.ui.inverted.brown.buttons .basic.button:hover,
+.ui.inverted.brown.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #b0620f inset;
+ box-shadow: 0 0 0 2px #b0620f inset;
+ color: #D67C1C;
}
-.ui.inverted.yellow.basic.buttons .button:focus,
-.ui.inverted.yellow.basic.buttons .button:focus,
-.ui.inverted.yellow.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #f5d500 inset !important;
- box-shadow: 0px 0px 0px 2px #f5d500 inset !important;
- color: #FFE21F !important;
+.ui.inverted.brown.basic.buttons .button:focus,
+.ui.inverted.brown.basic.buttons .button:focus,
+.ui.inverted.brown.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #c16808 inset;
+ box-shadow: 0 0 0 2px #c16808 inset;
+ color: #D67C1C;
}
-.ui.inverted.yellow.basic.buttons .active.button,
-.ui.inverted.yellow.buttons .basic.active.button,
-.ui.inverted.yellow.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
- box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
- color: #FFE21F !important;
+.ui.inverted.brown.basic.buttons .active.button,
+.ui.inverted.brown.buttons .basic.active.button,
+.ui.inverted.brown.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #cc6f0d inset;
+ box-shadow: 0 0 0 2px #cc6f0d inset;
+ color: #D67C1C;
}
-.ui.inverted.yellow.basic.buttons .button:active,
-.ui.inverted.yellow.buttons .basic.button:active,
-.ui.inverted.yellow.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #ebcd00 inset !important;
- box-shadow: 0px 0px 0px 2px #ebcd00 inset !important;
- color: #FFE21F !important;
+.ui.inverted.brown.basic.buttons .button:active,
+.ui.inverted.brown.buttons .basic.button:active,
+.ui.inverted.brown.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #a96216 inset;
+ box-shadow: 0 0 0 2px #a96216 inset;
+ color: #D67C1C;
}
-/*-------------------
- Primary
---------------------*/
-
-
-/*--- Standard ---*/
-
-.ui.primary.buttons .button,
-.ui.primary.button {
- background-color: #2185D0;
+/* Tertiary */
+.ui.tertiary.brown.buttons .button,
+.ui.tertiary.brown.buttons .tertiary.button,
+.ui.tertiary.brown.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #A5673F;
+}
+.ui.tertiary.brown.buttons .button:hover,
+.ui.tertiary.brown.buttons button:hover,
+.ui.tertiary.brown.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #835f48;
+ box-shadow: inset 0 -0.2em 0 #835f48;
+ color: #835f48;
+}
+.ui.tertiary.brown.buttons .button:focus,
+.ui.tertiary.brown.buttons .tertiary.button:focus,
+.ui.tertiary.brown.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #7d573e;
+ box-shadow: inset 0 -0.2em 0 #7d573e;
+ color: #7d573e;
+}
+.ui.tertiary.brown.buttons .active.button,
+.ui.tertiary.brown.buttons .tertiary.active.button,
+.ui.tertiary.brown.active.button,
+.ui.tertiary.brown.buttons .button:active,
+.ui.tertiary.brown.buttons .tertiary.button:active,
+.ui.tertiary.brown.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #ae561d;
+ box-shadow: inset 0 -0.2em 0 #ae561d;
+ color: #995a31;
+}
+.ui.grey.buttons .button,
+.ui.grey.button {
+ background-color: #767676;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.primary.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.grey.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.primary.buttons .button:hover,
-.ui.primary.button:hover {
- background-color: #1678c2;
+.ui.grey.buttons .button:hover,
+.ui.grey.button:hover {
+ background-color: #838383;
color: #FFFFFF;
text-shadow: none;
}
-.ui.primary.buttons .button:focus,
-.ui.primary.button:focus {
- background-color: #0d71bb;
+.ui.grey.buttons .button:focus,
+.ui.grey.button:focus {
+ background-color: #8a8a8a;
color: #FFFFFF;
text-shadow: none;
}
-.ui.primary.buttons .button:active,
-.ui.primary.button:active {
- background-color: #1a69a4;
+.ui.grey.buttons .button:active,
+.ui.grey.button:active {
+ background-color: #909090;
color: #FFFFFF;
text-shadow: none;
}
-.ui.primary.buttons .active.button,
-.ui.primary.buttons .active.button:active,
-.ui.primary.active.button,
-.ui.primary.button .active.button:active {
- background-color: #1279c6;
+.ui.grey.buttons .active.button,
+.ui.grey.buttons .active.button:active,
+.ui.grey.active.button,
+.ui.grey.button .active.button:active {
+ background-color: #696969;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.primary.buttons .button,
-.ui.basic.primary.button {
- -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
- box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
- color: #2185D0 !important;
+.ui.basic.grey.buttons .button,
+.ui.basic.grey.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #767676 inset;
+ box-shadow: 0 0 0 1px #767676 inset;
+ color: #767676;
}
-.ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
- box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
- color: #1678c2 !important;
+.ui.basic.grey.buttons .button:hover,
+.ui.basic.grey.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #838383 inset;
+ box-shadow: 0 0 0 1px #838383 inset;
+ color: #838383;
}
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
- box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
- color: #1678c2 !important;
+.ui.basic.grey.buttons .button:focus,
+.ui.basic.grey.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #8a8a8a inset;
+ box-shadow: 0 0 0 1px #8a8a8a inset;
+ color: #838383;
}
-.ui.basic.primary.buttons .active.button,
-.ui.basic.primary.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
- box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
- color: #1a69a4 !important;
+.ui.basic.grey.buttons .active.button,
+.ui.basic.grey.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #696969 inset;
+ box-shadow: 0 0 0 1px #696969 inset;
+ color: #909090;
}
-.ui.basic.primary.buttons .button:active,
-.ui.basic.primary.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
- box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
- color: #1a69a4 !important;
+.ui.basic.grey.buttons .button:active,
+.ui.basic.grey.button:active {
+ -webkit-box-shadow: 0 0 0 1px #909090 inset;
+ box-shadow: 0 0 0 1px #909090 inset;
+ color: #909090;
}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.primary.buttons .button,
-.ui.inverted.primary.button {
+.ui.inverted.grey.buttons .button,
+.ui.inverted.grey.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
- box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
- color: #54C8FF;
-}
-.ui.inverted.primary.buttons .button:hover,
-.ui.inverted.primary.button:hover,
-.ui.inverted.primary.buttons .button:focus,
-.ui.inverted.primary.button:focus,
-.ui.inverted.primary.buttons .button.active,
-.ui.inverted.primary.button.active,
-.ui.inverted.primary.buttons .button:active,
-.ui.inverted.primary.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ -webkit-box-shadow: 0 0 0 2px #D4D4D5 inset;
+ box-shadow: 0 0 0 2px #D4D4D5 inset;
color: #FFFFFF;
}
-.ui.inverted.primary.buttons .button:hover,
-.ui.inverted.primary.button:hover {
- background-color: #3ac0ff;
+.ui.inverted.grey.buttons .button:hover,
+.ui.inverted.grey.button:hover,
+.ui.inverted.grey.buttons .button:focus,
+.ui.inverted.grey.button:focus,
+.ui.inverted.grey.buttons .button.active,
+.ui.inverted.grey.button.active,
+.ui.inverted.grey.buttons .button:active,
+.ui.inverted.grey.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
+ color: rgba(0, 0, 0, 0.6);
}
-.ui.inverted.primary.buttons .button:focus,
-.ui.inverted.primary.button:focus {
- background-color: #2bbbff;
+.ui.inverted.grey.buttons .button:hover,
+.ui.inverted.grey.button:hover {
+ background-color: #c2c4c5;
}
-.ui.inverted.primary.buttons .active.button,
-.ui.inverted.primary.active.button {
- background-color: #3ac0ff;
+.ui.inverted.grey.buttons .button:focus,
+.ui.inverted.grey.button:focus {
+ background-color: #c7c9cb;
}
-.ui.inverted.primary.buttons .button:active,
-.ui.inverted.primary.button:active {
- background-color: #21b8ff;
+.ui.inverted.grey.buttons .active.button,
+.ui.inverted.grey.active.button {
+ background-color: #cfd0d2;
+}
+.ui.inverted.grey.buttons .button:active,
+.ui.inverted.grey.button:active {
+ background-color: #c2c4c5;
}
/* Inverted Basic */
-.ui.inverted.primary.basic.buttons .button,
-.ui.inverted.primary.buttons .basic.button,
-.ui.inverted.primary.basic.button {
+.ui.inverted.grey.basic.buttons .button,
+.ui.inverted.grey.buttons .basic.button,
+.ui.inverted.grey.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.primary.basic.buttons .button:hover,
-.ui.inverted.primary.buttons .basic.button:hover,
-.ui.inverted.primary.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- color: #54C8FF !important;
+.ui.inverted.grey.basic.buttons .button:hover,
+.ui.inverted.grey.buttons .basic.button:hover,
+.ui.inverted.grey.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #c2c4c5 inset;
+ box-shadow: 0 0 0 2px #c2c4c5 inset;
+ color: #FFFFFF;
}
-.ui.inverted.primary.basic.buttons .button:focus,
-.ui.inverted.primary.basic.buttons .button:focus,
-.ui.inverted.primary.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
- box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
- color: #54C8FF !important;
+.ui.inverted.grey.basic.buttons .button:focus,
+.ui.inverted.grey.basic.buttons .button:focus,
+.ui.inverted.grey.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #c7c9cb inset;
+ box-shadow: 0 0 0 2px #c7c9cb inset;
+ color: #DCDDDE;
}
-.ui.inverted.primary.basic.buttons .active.button,
-.ui.inverted.primary.buttons .basic.active.button,
-.ui.inverted.primary.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
- color: #54C8FF !important;
+.ui.inverted.grey.basic.buttons .active.button,
+.ui.inverted.grey.buttons .basic.active.button,
+.ui.inverted.grey.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #cfd0d2 inset;
+ box-shadow: 0 0 0 2px #cfd0d2 inset;
+ color: #FFFFFF;
}
-.ui.inverted.primary.basic.buttons .button:active,
-.ui.inverted.primary.buttons .basic.button:active,
-.ui.inverted.primary.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
- box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
- color: #54C8FF !important;
+.ui.inverted.grey.basic.buttons .button:active,
+.ui.inverted.grey.buttons .basic.button:active,
+.ui.inverted.grey.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #c2c4c5 inset;
+ box-shadow: 0 0 0 2px #c2c4c5 inset;
+ color: #FFFFFF;
}
-/*-------------------
- Secondary
---------------------*/
-
-
-/* Standard */
-.ui.secondary.buttons .button,
-.ui.secondary.button {
+/* Tertiary */
+.ui.tertiary.grey.buttons .button,
+.ui.tertiary.grey.buttons .tertiary.button,
+.ui.tertiary.grey.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #767676;
+}
+.ui.tertiary.grey.buttons .button:hover,
+.ui.tertiary.grey.buttons button:hover,
+.ui.tertiary.grey.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #838383;
+ box-shadow: inset 0 -0.2em 0 #838383;
+ color: #838383;
+}
+.ui.tertiary.grey.buttons .button:focus,
+.ui.tertiary.grey.buttons .tertiary.button:focus,
+.ui.tertiary.grey.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #8a8a8a;
+ box-shadow: inset 0 -0.2em 0 #8a8a8a;
+ color: #8a8a8a;
+}
+.ui.tertiary.grey.buttons .active.button,
+.ui.tertiary.grey.buttons .tertiary.active.button,
+.ui.tertiary.grey.active.button,
+.ui.tertiary.grey.buttons .button:active,
+.ui.tertiary.grey.buttons .tertiary.button:active,
+.ui.tertiary.grey.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #7e5454;
+ box-shadow: inset 0 -0.2em 0 #7e5454;
+ color: #696969;
+}
+.ui.black.buttons .button,
+.ui.black.button {
background-color: #1B1C1D;
color: #FFFFFF;
text-shadow: none;
background-image: none;
}
-.ui.secondary.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.black.button {
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
-.ui.secondary.buttons .button:hover,
-.ui.secondary.button:hover {
+.ui.black.buttons .button:hover,
+.ui.black.button:hover {
background-color: #27292a;
color: #FFFFFF;
text-shadow: none;
}
-.ui.secondary.buttons .button:focus,
-.ui.secondary.button:focus {
- background-color: #2e3032;
+.ui.black.buttons .button:focus,
+.ui.black.button:focus {
+ background-color: #2f3032;
color: #FFFFFF;
text-shadow: none;
}
-.ui.secondary.buttons .button:active,
-.ui.secondary.button:active {
+.ui.black.buttons .button:active,
+.ui.black.button:active {
background-color: #343637;
color: #FFFFFF;
text-shadow: none;
}
-.ui.secondary.buttons .active.button,
-.ui.secondary.buttons .active.button:active,
-.ui.secondary.active.button,
-.ui.secondary.button .active.button:active {
- background-color: #27292a;
+.ui.black.buttons .active.button,
+.ui.black.buttons .active.button:active,
+.ui.black.active.button,
+.ui.black.button .active.button:active {
+ background-color: #0f0f10;
color: #FFFFFF;
text-shadow: none;
}
/* Basic */
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button {
- -webkit-box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
- box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
- color: #1B1C1D !important;
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #1B1C1D inset;
+ box-shadow: 0 0 0 1px #1B1C1D inset;
+ color: #1B1C1D;
}
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important;
- box-shadow: 0px 0px 0px 1px #27292a inset !important;
- color: #27292a !important;
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #27292a inset;
+ box-shadow: 0 0 0 1px #27292a inset;
+ color: #27292a;
}
-.ui.basic.secondary.buttons .button:focus,
-.ui.basic.secondary.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #2e3032 inset !important;
- box-shadow: 0px 0px 0px 1px #2e3032 inset !important;
- color: #27292a !important;
+.ui.basic.black.buttons .button:focus,
+.ui.basic.black.button:focus {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #2f3032 inset;
+ box-shadow: 0 0 0 1px #2f3032 inset;
+ color: #27292a;
}
-.ui.basic.secondary.buttons .active.button,
-.ui.basic.secondary.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important;
- box-shadow: 0px 0px 0px 1px #27292a inset !important;
- color: #343637 !important;
+.ui.basic.black.buttons .active.button,
+.ui.basic.black.active.button {
+ background: transparent ;
+ -webkit-box-shadow: 0 0 0 1px #0f0f10 inset;
+ box-shadow: 0 0 0 1px #0f0f10 inset;
+ color: #343637;
}
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #343637 inset !important;
- box-shadow: 0px 0px 0px 1px #343637 inset !important;
- color: #343637 !important;
+.ui.basic.black.buttons .button:active,
+.ui.basic.black.button:active {
+ -webkit-box-shadow: 0 0 0 1px #343637 inset;
+ box-shadow: 0 0 0 1px #343637 inset;
+ color: #343637;
}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
margin-left: -1px;
}
/* Inverted */
-.ui.inverted.secondary.buttons .button,
-.ui.inverted.secondary.button {
+.ui.inverted.black.buttons .button,
+.ui.inverted.black.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px #545454 inset !important;
- box-shadow: 0px 0px 0px 2px #545454 inset !important;
- color: #545454;
+ -webkit-box-shadow: 0 0 0 2px #D4D4D5 inset;
+ box-shadow: 0 0 0 2px #D4D4D5 inset;
+ color: #FFFFFF;
}
-.ui.inverted.secondary.buttons .button:hover,
-.ui.inverted.secondary.button:hover,
-.ui.inverted.secondary.buttons .button:focus,
-.ui.inverted.secondary.button:focus,
-.ui.inverted.secondary.buttons .button.active,
-.ui.inverted.secondary.button.active,
-.ui.inverted.secondary.buttons .button:active,
-.ui.inverted.secondary.button:active {
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+.ui.inverted.black.buttons .button:hover,
+.ui.inverted.black.button:hover,
+.ui.inverted.black.buttons .button:focus,
+.ui.inverted.black.button:focus,
+.ui.inverted.black.buttons .button.active,
+.ui.inverted.black.button.active,
+.ui.inverted.black.buttons .button:active,
+.ui.inverted.black.button:active {
+ -webkit-box-shadow: none ;
+ box-shadow: none ;
color: #FFFFFF;
}
-.ui.inverted.secondary.buttons .button:hover,
-.ui.inverted.secondary.button:hover {
- background-color: #616161;
+.ui.inverted.black.buttons .button:hover,
+.ui.inverted.black.button:hover {
+ background-color: #000000;
}
-.ui.inverted.secondary.buttons .button:focus,
-.ui.inverted.secondary.button:focus {
- background-color: #686868;
+.ui.inverted.black.buttons .button:focus,
+.ui.inverted.black.button:focus {
+ background-color: #000000;
}
-.ui.inverted.secondary.buttons .active.button,
-.ui.inverted.secondary.active.button {
- background-color: #616161;
+.ui.inverted.black.buttons .active.button,
+.ui.inverted.black.active.button {
+ background-color: #000000;
}
-.ui.inverted.secondary.buttons .button:active,
-.ui.inverted.secondary.button:active {
- background-color: #6e6e6e;
+.ui.inverted.black.buttons .button:active,
+.ui.inverted.black.button:active {
+ background-color: #000000;
}
/* Inverted Basic */
-.ui.inverted.secondary.basic.buttons .button,
-.ui.inverted.secondary.buttons .basic.button,
-.ui.inverted.secondary.basic.button {
+.ui.inverted.black.basic.buttons .button,
+.ui.inverted.black.buttons .basic.button,
+.ui.inverted.black.basic.button {
background-color: transparent;
- -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
- color: #FFFFFF !important;
+ -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
+ color: #FFFFFF;
}
-.ui.inverted.secondary.basic.buttons .button:hover,
-.ui.inverted.secondary.buttons .basic.button:hover,
-.ui.inverted.secondary.basic.button:hover {
- -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important;
- box-shadow: 0px 0px 0px 2px #616161 inset !important;
- color: #545454 !important;
+.ui.inverted.black.basic.buttons .button:hover,
+.ui.inverted.black.buttons .basic.button:hover,
+.ui.inverted.black.basic.button:hover {
+ -webkit-box-shadow: 0 0 0 2px #000000 inset;
+ box-shadow: 0 0 0 2px #000000 inset;
+ color: #FFFFFF;
}
-.ui.inverted.secondary.basic.buttons .button:focus,
-.ui.inverted.secondary.basic.buttons .button:focus,
-.ui.inverted.secondary.basic.button:focus {
- -webkit-box-shadow: 0px 0px 0px 2px #686868 inset !important;
- box-shadow: 0px 0px 0px 2px #686868 inset !important;
- color: #545454 !important;
+.ui.inverted.black.basic.buttons .button:focus,
+.ui.inverted.black.basic.buttons .button:focus,
+.ui.inverted.black.basic.button:focus {
+ -webkit-box-shadow: 0 0 0 2px #000000 inset;
+ box-shadow: 0 0 0 2px #000000 inset;
+ color: #545454;
}
-.ui.inverted.secondary.basic.buttons .active.button,
-.ui.inverted.secondary.buttons .basic.active.button,
-.ui.inverted.secondary.basic.active.button {
- -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important;
- box-shadow: 0px 0px 0px 2px #616161 inset !important;
- color: #545454 !important;
+.ui.inverted.black.basic.buttons .active.button,
+.ui.inverted.black.buttons .basic.active.button,
+.ui.inverted.black.basic.active.button {
+ -webkit-box-shadow: 0 0 0 2px #000000 inset;
+ box-shadow: 0 0 0 2px #000000 inset;
+ color: #FFFFFF;
}
-.ui.inverted.secondary.basic.buttons .button:active,
-.ui.inverted.secondary.buttons .basic.button:active,
-.ui.inverted.secondary.basic.button:active {
- -webkit-box-shadow: 0px 0px 0px 2px #6e6e6e inset !important;
- box-shadow: 0px 0px 0px 2px #6e6e6e inset !important;
- color: #545454 !important;
+.ui.inverted.black.basic.buttons .button:active,
+.ui.inverted.black.buttons .basic.button:active,
+.ui.inverted.black.basic.button:active {
+ -webkit-box-shadow: 0 0 0 2px #000000 inset;
+ box-shadow: 0 0 0 2px #000000 inset;
+ color: #FFFFFF;
+}
+
+/* Tertiary */
+.ui.tertiary.black.buttons .button,
+.ui.tertiary.black.buttons .tertiary.button,
+.ui.tertiary.black.button {
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #1B1C1D;
+}
+.ui.tertiary.black.buttons .button:hover,
+.ui.tertiary.black.buttons button:hover,
+.ui.tertiary.black.button:hover {
+ -webkit-box-shadow: inset 0 -0.2em 0 #8b8f93;
+ box-shadow: inset 0 -0.2em 0 #8b8f93;
+ color: #8b8f93;
+}
+.ui.tertiary.black.buttons .button:focus,
+.ui.tertiary.black.buttons .tertiary.button:focus,
+.ui.tertiary.black.button:focus {
+ -webkit-box-shadow: inset 0 -0.2em 0 #93969a;
+ box-shadow: inset 0 -0.2em 0 #93969a;
+ color: #93969a;
+}
+.ui.tertiary.black.buttons .active.button,
+.ui.tertiary.black.buttons .tertiary.active.button,
+.ui.tertiary.black.active.button,
+.ui.tertiary.black.buttons .button:active,
+.ui.tertiary.black.buttons .tertiary.button:active,
+.ui.tertiary.black.button:active {
+ -webkit-box-shadow: inset 0 -0.2em 0 #404245;
+ box-shadow: inset 0 -0.2em 0 #404245;
+ color: #0f0f10;
}
/*---------------
@@ -3587,8 +4121,8 @@
background-image: none;
}
.ui.positive.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover {
@@ -3620,38 +4154,39 @@
/* Basic */
.ui.basic.positive.buttons .button,
.ui.basic.positive.button {
- -webkit-box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
- box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
- color: #21BA45 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #21BA45 inset;
+ box-shadow: 0 0 0 1px #21BA45 inset;
+ color: #21BA45;
}
.ui.basic.positive.buttons .button:hover,
.ui.basic.positive.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
- box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
- color: #16ab39 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #16ab39 inset;
+ box-shadow: 0 0 0 1px #16ab39 inset;
+ color: #16ab39;
}
.ui.basic.positive.buttons .button:focus,
.ui.basic.positive.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
- box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
- color: #16ab39 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #0ea432 inset;
+ box-shadow: 0 0 0 1px #0ea432 inset;
+ color: #16ab39;
}
.ui.basic.positive.buttons .active.button,
.ui.basic.positive.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
- box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
- color: #198f35 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #13ae38 inset;
+ box-shadow: 0 0 0 1px #13ae38 inset;
+ color: #198f35;
}
.ui.basic.positive.buttons .button:active,
.ui.basic.positive.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #198f35 inset !important;
- box-shadow: 0px 0px 0px 1px #198f35 inset !important;
- color: #198f35 !important;
+ -webkit-box-shadow: 0 0 0 1px #198f35 inset;
+ box-shadow: 0 0 0 1px #198f35 inset;
+ color: #198f35;
}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) {
margin-left: -1px;
}
@@ -3669,8 +4204,8 @@
background-image: none;
}
.ui.negative.button {
- -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+ -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover {
@@ -3702,45 +4237,46 @@
/* Basic */
.ui.basic.negative.buttons .button,
.ui.basic.negative.button {
- -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
- box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
- color: #DB2828 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #DB2828 inset;
+ box-shadow: 0 0 0 1px #DB2828 inset;
+ color: #DB2828;
}
.ui.basic.negative.buttons .button:hover,
.ui.basic.negative.button:hover {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #d01919 inset !important;
- box-shadow: 0px 0px 0px 1px #d01919 inset !important;
- color: #d01919 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #d01919 inset;
+ box-shadow: 0 0 0 1px #d01919 inset;
+ color: #d01919;
}
.ui.basic.negative.buttons .button:focus,
.ui.basic.negative.button:focus {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
- box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
- color: #d01919 !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #ca1010 inset;
+ box-shadow: 0 0 0 1px #ca1010 inset;
+ color: #d01919;
}
.ui.basic.negative.buttons .active.button,
.ui.basic.negative.active.button {
- background: transparent !important;
- -webkit-box-shadow: 0px 0px 0px 1px #d41515 inset !important;
- box-shadow: 0px 0px 0px 1px #d41515 inset !important;
- color: #b21e1e !important;
+ background: transparent;
+ -webkit-box-shadow: 0 0 0 1px #d41515 inset;
+ box-shadow: 0 0 0 1px #d41515 inset;
+ color: #b21e1e;
}
.ui.basic.negative.buttons .button:active,
.ui.basic.negative.button:active {
- -webkit-box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
- box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
- color: #b21e1e !important;
+ -webkit-box-shadow: 0 0 0 1px #b21e1e inset;
+ box-shadow: 0 0 0 1px #b21e1e inset;
+ color: #b21e1e;
}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+.ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) {
margin-left: -1px;
}
/*******************************
- Groups
-*******************************/
+ Groups
+ *******************************/
.ui.buttons {
display: -webkit-inline-box;
@@ -3750,9 +4286,9 @@
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
- font-size: 0em;
+ font-size: 0;
vertical-align: baseline;
- margin: 0em 0.25em 0em 0em;
+ margin: 0 0.25em 0 0;
}
.ui.buttons:not(.basic):not(.inverted) {
-webkit-box-shadow: none;
@@ -3773,18 +4309,16 @@
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
- margin: 0em;
- border-radius: 0em;
- margin: 0px 0px 0px 0px;
+ border-radius: 0;
+ margin: 0 0 0 0;
}
-.ui.buttons > .ui.button:not(.basic):not(.inverted),
-.ui.buttons:not(.basic):not(.inverted) > .button {
- -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
+.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
+ -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.buttons .button:first-child {
border-left: none;
- margin-left: 0em;
+ margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
@@ -3807,17 +4341,17 @@
display: block;
float: none;
width: 100%;
- margin: 0px 0px 0px 0px;
+ margin: 0 0 0 0;
-webkit-box-shadow: none;
box-shadow: none;
- border-radius: 0em;
+ border-radius: 0;
}
.ui.vertical.buttons .button:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.ui.vertical.buttons .button:last-child {
- margin-bottom: 0px;
+ margin-bottom: 0;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
diff --git a/ui/dist/components/button.min.css b/ui/dist/components/button.min.css
index c89f59fbb10..e51048e4be2 100644
--- a/ui/dist/components/button.min.css
+++ b/ui/dist/components/button.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Button
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Button
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.button{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:#e0e1e2 none;color:rgba(0,0,0,.6);font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;margin:0 .25em 0 0;padding:.6875em 1.5em .6875em;text-transform:none;text-shadow:none;font-weight:700;line-height:1em;font-style:normal;text-align:center;text-decoration:none;border-radius:.25rem;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;will-change:'';-webkit-tap-highlight-color:transparent}.ui.button:hover{background-color:#cacbcd;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;color:rgba(0,0,0,.8)}.ui.button:hover .icon{opacity:.85}.ui.button:focus{background-color:#cacbcd;color:rgba(0,0,0,.8);background-image:''!important;-webkit-box-shadow:''!important;box-shadow:''!important}.ui.button:focus .icon{opacity:.85}.ui.active.button:active,.ui.button:active{background-color:#babbbc;background-image:'';color:rgba(0,0,0,.9);-webkit-box-shadow:0 0 0 1px transparent inset,none;box-shadow:0 0 0 1px transparent inset,none}.ui.active.button{background-color:#c0c1c2;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset;color:rgba(0,0,0,.95)}.ui.active.button:hover{background-color:#c0c1c2;background-image:none;color:rgba(0,0,0,.95)}.ui.active.button:active{background-color:#c0c1c2;background-image:none}.ui.loading.loading.loading.loading.loading.loading.button{position:relative;cursor:default;text-shadow:none!important;color:transparent!important;opacity:1;pointer-events:auto;-webkit-transition:all 0s linear,opacity .1s ease;transition:all 0s linear,opacity .1s ease}.ui.loading.button:before{position:absolute;content:'';top:50%;left:50%;margin:-.65625em 0 0 -.65625em;width:1.3125em;height:1.3125em;border-radius:500rem;border:.2em solid rgba(0,0,0,.15)}.ui.loading.button:after{position:absolute;content:'';top:50%;left:50%;margin:-.65625em 0 0 -.65625em;width:1.3125em;height:1.3125em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#fff transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.ui.labeled.icon.loading.button .icon{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}@-webkit-keyframes button-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes button-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.basic.loading.button:not(.inverted):before{border-color:rgba(0,0,0,.1)}.ui.basic.loading.button:not(.inverted):after{border-top-color:#767676}.ui.button:disabled,.ui.buttons .disabled.button,.ui.disabled.active.button,.ui.disabled.button,.ui.disabled.button:hover{cursor:default;opacity:.45!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;pointer-events:none!important}.ui.basic.buttons .ui.disabled.button{border-color:rgba(34,36,38,.5)}.ui.animated.button{position:relative;overflow:hidden;padding-right:0!important;vertical-align:middle;z-index:1}.ui.animated.button .content{will-change:transform,opacity}.ui.animated.button .visible.content{position:relative;margin-right:1.5em}.ui.animated.button .hidden.content{position:absolute;width:100%}.ui.animated.button .hidden.content,.ui.animated.button .visible.content{-webkit-transition:right .3s ease 0s;transition:right .3s ease 0s}.ui.animated.button .visible.content{left:auto;right:0}.ui.animated.button .hidden.content{top:50%;left:auto;right:-100%;margin-top:-.5em}.ui.animated.button:focus .visible.content,.ui.animated.button:hover .visible.content{left:auto;right:200%}.ui.animated.button:focus .hidden.content,.ui.animated.button:hover .hidden.content{left:auto;right:0}.ui.vertical.animated.button .hidden.content,.ui.vertical.animated.button .visible.content{-webkit-transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,transform .3s ease;transition:top .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.vertical.animated.button .visible.content{-webkit-transform:translateY(0);transform:translateY(0);right:auto}.ui.vertical.animated.button .hidden.content{top:-50%;left:0;right:auto}.ui.vertical.animated.button:focus .visible.content,.ui.vertical.animated.button:hover .visible.content{-webkit-transform:translateY(200%);transform:translateY(200%);right:auto}.ui.vertical.animated.button:focus .hidden.content,.ui.vertical.animated.button:hover .hidden.content{top:50%;right:auto}.ui.fade.animated.button .hidden.content,.ui.fade.animated.button .visible.content{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.fade.animated.button .visible.content{left:auto;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.fade.animated.button .hidden.content{opacity:0;left:0;right:auto;-webkit-transform:scale(1.5);transform:scale(1.5)}.ui.fade.animated.button:focus .visible.content,.ui.fade.animated.button:hover .visible.content{left:auto;right:auto;opacity:0;-webkit-transform:scale(.75);transform:scale(.75)}.ui.fade.animated.button:focus .hidden.content,.ui.fade.animated.button:hover .hidden.content{left:0;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.inverted.button{-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;background:transparent none;color:#fff;text-shadow:none!important}.ui.inverted.buttons .button{margin:0 0 0 -2px}.ui.inverted.buttons .button:first-child{margin-left:0}.ui.inverted.vertical.buttons .button{margin:0 0 -2px 0}.ui.inverted.vertical.buttons .button:first-child{margin-top:0}.ui.inverted.button:hover{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;color:rgba(0,0,0,.8)}.ui.inverted.button.active,.ui.inverted.button:focus{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;color:rgba(0,0,0,.8)}.ui.inverted.button.active:focus{background:#dcddde;-webkit-box-shadow:0 0 0 2px #dcddde inset!important;box-shadow:0 0 0 2px #dcddde inset!important;color:rgba(0,0,0,.8)}.ui.labeled.button:not(.icon){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background:0 0!important;padding:0!important;border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.labeled.button>.button{margin:0}.ui.labeled.button>.label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 0 0 -1px!important;padding:'';font-size:1em;border-color:rgba(34,36,38,.15)}.ui.labeled.button>.tag.label:before{width:1.85em;height:1.85em}.ui.labeled.button:not([class*="left labeled"])>.button{border-top-right-radius:0;border-bottom-right-radius:0}.ui.labeled.button:not([class*="left labeled"])>.label{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.button{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.label{border-top-right-radius:0;border-bottom-right-radius:0}.ui.facebook.button{background-color:#3b5998;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.facebook.button:hover{background-color:#304d8a;color:#fff;text-shadow:none}.ui.facebook.button:active{background-color:#2d4373;color:#fff;text-shadow:none}.ui.twitter.button{background-color:#55acee;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.twitter.button:hover{background-color:#35a2f4;color:#fff;text-shadow:none}.ui.twitter.button:active{background-color:#2795e9;color:#fff;text-shadow:none}.ui.google.plus.button{background-color:#dd4b39;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.google.plus.button:hover{background-color:#e0321c;color:#fff;text-shadow:none}.ui.google.plus.button:active{background-color:#c23321;color:#fff;text-shadow:none}.ui.linkedin.button{background-color:#1f88be;color:#fff;text-shadow:none}.ui.linkedin.button:hover{background-color:#147baf;color:#fff;text-shadow:none}.ui.linkedin.button:active{background-color:#186992;color:#fff;text-shadow:none}.ui.youtube.button{background-color:red;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.youtube.button:hover{background-color:#e60000;color:#fff;text-shadow:none}.ui.youtube.button:active{background-color:#c00;color:#fff;text-shadow:none}.ui.instagram.button{background-color:#49769c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.instagram.button:hover{background-color:#3d698e;color:#fff;text-shadow:none}.ui.instagram.button:active{background-color:#395c79;color:#fff;text-shadow:none}.ui.pinterest.button{background-color:#bd081c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pinterest.button:hover{background-color:#ac0013;color:#fff;text-shadow:none}.ui.pinterest.button:active{background-color:#8c0615;color:#fff;text-shadow:none}.ui.vk.button{background-color:#4d7198;color:#fff;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.vk.button:hover{background-color:#41648a;color:#fff}.ui.vk.button:active{background-color:#3c5876;color:#fff}.ui.button>.icon:not(.button){height:.875em;opacity:.8;margin:0 .375em 0 -.1875em;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;vertical-align:'';color:''}.ui.button:not(.icon)>.icon:not(.button):not(.dropdown){margin:0 .375em 0 -.1875em}.ui.button:not(.icon)>.right.icon:not(.button):not(.dropdown){margin:0 -.1875em 0 .375em}.ui[class*="left floated"].button,.ui[class*="left floated"].buttons{float:left;margin-left:0;margin-right:.25em}.ui[class*="right floated"].button,.ui[class*="right floated"].buttons{float:right;margin-right:0;margin-left:.25em}.ui.compact.button,.ui.compact.buttons .button{padding:.515625em 1.125em .515625em}.ui.compact.icon.button,.ui.compact.icon.buttons .button{padding:.515625em .515625em .515625em}.ui.compact.labeled.icon.button,.ui.compact.labeled.icon.buttons .button{padding:.515625em 3.5em .515625em}.ui.mini.button,.ui.mini.buttons .button,.ui.mini.buttons .or{font-size:.8125rem}.ui.tiny.button,.ui.tiny.buttons .button,.ui.tiny.buttons .or{font-size:.875rem}.ui.small.button,.ui.small.buttons .button,.ui.small.buttons .or{font-size:.9375rem}.ui.button,.ui.buttons .button,.ui.buttons .or{font-size:1rem}.ui.large.button,.ui.large.buttons .button,.ui.large.buttons .or{font-size:1.125rem}.ui.big.button,.ui.big.buttons .button,.ui.big.buttons .or{font-size:1.3125rem}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1.4375rem}.ui.massive.button,.ui.massive.buttons .button,.ui.massive.buttons .or{font-size:1.6875rem}.ui.icon.button,.ui.icon.buttons .button{padding:.6875em .6875em .6875em}.ui.icon.button>.icon,.ui.icon.buttons .button>.icon{opacity:.9;margin:0!important;vertical-align:top}.ui.basic.button,.ui.basic.buttons .button{background:transparent none!important;color:rgba(0,0,0,.6)!important;font-weight:400;border-radius:.25rem;text-transform:none;text-shadow:none!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.basic.buttons{-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.25rem}.ui.basic.buttons .button{border-radius:0}.ui.basic.button:hover,.ui.basic.buttons .button:hover{background:#fff!important;color:rgba(0,0,0,.8)!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:focus,.ui.basic.buttons .button:focus{background:#fff!important;color:rgba(0,0,0,.8)!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:active,.ui.basic.buttons .button:active{background:#f8f8f8!important;color:rgba(0,0,0,.9)!important;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset}.ui.basic.active.button,.ui.basic.buttons .active.button{background:rgba(0,0,0,.05)!important;-webkit-box-shadow:''!important;box-shadow:''!important;color:rgba(0,0,0,.95)!important}.ui.basic.active.button:hover,.ui.basic.buttons .active.button:hover{background-color:rgba(0,0,0,.05)}.ui.basic.buttons .button:hover{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .button:active{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .active.button{-webkit-box-shadow:''!important;box-shadow:''!important}.ui.basic.inverted.button,.ui.basic.inverted.buttons .button{background-color:transparent!important;color:#f9fafb!important;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important}.ui.basic.inverted.button:hover,.ui.basic.inverted.buttons .button:hover{color:#fff!important;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.inverted.button:focus,.ui.basic.inverted.buttons .button:focus{color:#fff!important;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.inverted.button:active,.ui.basic.inverted.buttons .button:active{background-color:rgba(255,255,255,.08)!important;color:#fff!important;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.9) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset!important}.ui.basic.inverted.active.button,.ui.basic.inverted.buttons .active.button{background-color:rgba(255,255,255,.08);color:#fff;text-shadow:none;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.7) inset;box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}.ui.basic.inverted.active.button:hover,.ui.basic.inverted.buttons .active.button:hover{background-color:rgba(255,255,255,.15);-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.buttons .button{border-left:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.vertical.buttons .button{border-left:none}.ui.basic.vertical.buttons .button{border-left-width:0;border-top:1px solid rgba(34,36,38,.15)}.ui.basic.vertical.buttons .button:first-child{border-top-width:0}.ui.labeled.icon.button,.ui.labeled.icon.buttons .button{position:relative;padding-left:3.875em!important;padding-right:1.5em!important}.ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{position:absolute;height:100%;line-height:1;border-radius:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit;text-align:center;margin:0;width:2.375em;background-color:rgba(0,0,0,.05);color:'';-webkit-box-shadow:-1px 0 0 0 transparent inset;box-shadow:-1px 0 0 0 transparent inset}.ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{top:0;left:0}.ui[class*="right labeled"].icon.button{padding-right:3.875em!important;padding-left:1.5em!important}.ui[class*="right labeled"].icon.button>.icon{left:auto;right:0;border-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;-webkit-box-shadow:1px 0 0 0 transparent inset;box-shadow:1px 0 0 0 transparent inset}.ui.labeled.icon.button>.icon:after,.ui.labeled.icon.button>.icon:before,.ui.labeled.icon.buttons>.button>.icon:after,.ui.labeled.icon.buttons>.button>.icon:before{display:block;position:absolute;width:100%;top:50%;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.ui.labeled.icon.buttons .button>.icon{border-radius:0}.ui.labeled.icon.buttons .button:first-child>.icon{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ui.labeled.icon.buttons .button:last-child>.icon{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.labeled.icon.buttons .button:first-child>.icon{border-radius:0;border-top-left-radius:.25rem}.ui.vertical.labeled.icon.buttons .button:last-child>.icon{border-radius:0;border-bottom-left-radius:.25rem}.ui.fluid[class*="left labeled"].icon.button,.ui.fluid[class*="right labeled"].icon.button{padding-left:1.5em!important;padding-right:1.5em!important}.ui.button.toggle.active,.ui.buttons .button.toggle.active,.ui.toggle.buttons .active.button{background-color:#21ba45!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none;color:#fff!important}.ui.button.toggle.active:hover{background-color:#16ab39!important;text-shadow:none;color:#fff!important}.ui.circular.button{border-radius:10em}.ui.circular.button>.icon{width:1em;vertical-align:baseline}.ui.buttons .or{position:relative;width:.3em;height:2.375em;z-index:3}.ui.buttons .or:before{position:absolute;text-align:center;border-radius:500rem;content:'or';top:50%;left:50%;background-color:#fff;text-shadow:none;margin-top:-.84375em;margin-left:-.84375em;width:1.6875em;height:1.6875em;line-height:1.6875em;color:rgba(0,0,0,.4);font-style:normal;font-weight:700;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset}.ui.buttons .or[data-text]:before{content:attr(data-text)}.ui.fluid.buttons .or{width:0!important}.ui.fluid.buttons .or:after{display:none}.ui.attached.button{position:relative;display:block;margin:0;border-radius:0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15)!important;box-shadow:0 0 0 1px rgba(34,36,38,.15)!important}.ui.attached.top.button{border-radius:.25rem .25rem 0 0}.ui.attached.bottom.button{border-radius:0 0 .25rem .25rem}.ui.left.attached.button{display:inline-block;border-left:none;text-align:right;padding-right:.75em;border-radius:.25rem 0 0 .25rem}.ui.right.attached.button{display:inline-block;text-align:left;padding-left:.75em;border-radius:0 .25rem .25rem 0}.ui.attached.buttons{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:auto!important;z-index:2;margin-left:-1px;margin-right:-1px}.ui.attached.buttons .button{margin:0}.ui.attached.buttons .button:first-child{border-radius:0}.ui.attached.buttons .button:last-child{border-radius:0}.ui[class*="top attached"].buttons{margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.ui[class*="top attached"].buttons .button:first-child{border-radius:.25rem 0 0 0}.ui[class*="top attached"].buttons .button:last-child{border-radius:0 .25rem 0 0}.ui[class*="bottom attached"].buttons{margin-top:-1px;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].buttons .button:first-child{border-radius:0 0 0 .25rem}.ui[class*="bottom attached"].buttons .button:last-child{border-radius:0 0 .25rem 0}.ui[class*="left attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:0;margin-left:-1px;border-radius:0 .25rem .25rem 0}.ui[class*="left attached"].buttons .button:first-child{margin-left:-1px;border-radius:0 .25rem 0 0}.ui[class*="left attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 .25rem 0}.ui[class*="right attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-left:0;margin-right:-1px;border-radius:.25rem 0 0 .25rem}.ui[class*="right attached"].buttons .button:first-child{margin-left:-1px;border-radius:.25rem 0 0 0}.ui[class*="right attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 0 .25rem}.ui.fluid.button,.ui.fluid.buttons{width:100%}.ui.fluid.button{display:block}.ui.two.buttons{width:100%}.ui.two.buttons>.button{width:50%}.ui.three.buttons{width:100%}.ui.three.buttons>.button{width:33.333%}.ui.four.buttons{width:100%}.ui.four.buttons>.button{width:25%}.ui.five.buttons{width:100%}.ui.five.buttons>.button{width:20%}.ui.six.buttons{width:100%}.ui.six.buttons>.button{width:16.666%}.ui.seven.buttons{width:100%}.ui.seven.buttons>.button{width:14.285%}.ui.eight.buttons{width:100%}.ui.eight.buttons>.button{width:12.5%}.ui.nine.buttons{width:100%}.ui.nine.buttons>.button{width:11.11%}.ui.ten.buttons{width:100%}.ui.ten.buttons>.button{width:10%}.ui.eleven.buttons{width:100%}.ui.eleven.buttons>.button{width:9.09%}.ui.twelve.buttons{width:100%}.ui.twelve.buttons>.button{width:8.3333%}.ui.fluid.vertical.buttons,.ui.fluid.vertical.buttons>.button{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.ui.two.vertical.buttons>.button{height:50%}.ui.three.vertical.buttons>.button{height:33.333%}.ui.four.vertical.buttons>.button{height:25%}.ui.five.vertical.buttons>.button{height:20%}.ui.six.vertical.buttons>.button{height:16.666%}.ui.seven.vertical.buttons>.button{height:14.285%}.ui.eight.vertical.buttons>.button{height:12.5%}.ui.nine.vertical.buttons>.button{height:11.11%}.ui.ten.vertical.buttons>.button{height:10%}.ui.eleven.vertical.buttons>.button{height:9.09%}.ui.twelve.vertical.buttons>.button{height:8.3333%}.ui.black.button,.ui.black.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.black.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.black.button:hover,.ui.black.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.black.button:focus,.ui.black.buttons .button:focus{background-color:#2f3032;color:#fff;text-shadow:none}.ui.black.button:active,.ui.black.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.black.active.button,.ui.black.button .active.button:active,.ui.black.buttons .active.button,.ui.black.buttons .active.button:active{background-color:#0f0f10;color:#fff;text-shadow:none}.ui.basic.black.button,.ui.basic.black.buttons .button{-webkit-box-shadow:0 0 0 1px #1b1c1d inset!important;box-shadow:0 0 0 1px #1b1c1d inset!important;color:#1b1c1d!important}.ui.basic.black.button:hover,.ui.basic.black.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#27292a!important}.ui.basic.black.button:focus,.ui.basic.black.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #2f3032 inset!important;box-shadow:0 0 0 1px #2f3032 inset!important;color:#27292a!important}.ui.basic.black.active.button,.ui.basic.black.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0f0f10 inset!important;box-shadow:0 0 0 1px #0f0f10 inset!important;color:#343637!important}.ui.basic.black.button:active,.ui.basic.black.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset!important;box-shadow:0 0 0 1px #343637 inset!important;color:#343637!important}.ui.buttons:not(.vertical)>.basic.black.button:not(:first-child){margin-left:-1px}.ui.inverted.black.button,.ui.inverted.black.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset!important;box-shadow:0 0 0 2px #d4d4d5 inset!important;color:#fff}.ui.inverted.black.button.active,.ui.inverted.black.button:active,.ui.inverted.black.button:focus,.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button.active,.ui.inverted.black.buttons .button:active,.ui.inverted.black.buttons .button:focus,.ui.inverted.black.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button:hover{background-color:#000}.ui.inverted.black.button:focus,.ui.inverted.black.buttons .button:focus{background-color:#000}.ui.inverted.black.active.button,.ui.inverted.black.buttons .active.button{background-color:#000}.ui.inverted.black.button:active,.ui.inverted.black.buttons .button:active{background-color:#000}.ui.inverted.black.basic.button,.ui.inverted.black.basic.buttons .button,.ui.inverted.black.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.black.basic.button:hover,.ui.inverted.black.basic.buttons .button:hover,.ui.inverted.black.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.inverted.black.basic.button:focus,.ui.inverted.black.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#545454!important}.ui.inverted.black.basic.active.button,.ui.inverted.black.basic.buttons .active.button,.ui.inverted.black.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.inverted.black.basic.button:active,.ui.inverted.black.basic.buttons .button:active,.ui.inverted.black.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.grey.button,.ui.grey.buttons .button{background-color:#767676;color:#fff;text-shadow:none;background-image:none}.ui.grey.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.grey.button:hover,.ui.grey.buttons .button:hover{background-color:#838383;color:#fff;text-shadow:none}.ui.grey.button:focus,.ui.grey.buttons .button:focus{background-color:#8a8a8a;color:#fff;text-shadow:none}.ui.grey.button:active,.ui.grey.buttons .button:active{background-color:#909090;color:#fff;text-shadow:none}.ui.grey.active.button,.ui.grey.button .active.button:active,.ui.grey.buttons .active.button,.ui.grey.buttons .active.button:active{background-color:#696969;color:#fff;text-shadow:none}.ui.basic.grey.button,.ui.basic.grey.buttons .button{-webkit-box-shadow:0 0 0 1px #767676 inset!important;box-shadow:0 0 0 1px #767676 inset!important;color:#767676!important}.ui.basic.grey.button:hover,.ui.basic.grey.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #838383 inset!important;box-shadow:0 0 0 1px #838383 inset!important;color:#838383!important}.ui.basic.grey.button:focus,.ui.basic.grey.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #8a8a8a inset!important;box-shadow:0 0 0 1px #8a8a8a inset!important;color:#838383!important}.ui.basic.grey.active.button,.ui.basic.grey.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #696969 inset!important;box-shadow:0 0 0 1px #696969 inset!important;color:#909090!important}.ui.basic.grey.button:active,.ui.basic.grey.buttons .button:active{-webkit-box-shadow:0 0 0 1px #909090 inset!important;box-shadow:0 0 0 1px #909090 inset!important;color:#909090!important}.ui.buttons:not(.vertical)>.basic.grey.button:not(:first-child){margin-left:-1px}.ui.inverted.grey.button,.ui.inverted.grey.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset!important;box-shadow:0 0 0 2px #d4d4d5 inset!important;color:#fff}.ui.inverted.grey.button.active,.ui.inverted.grey.button:active,.ui.inverted.grey.button:focus,.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button.active,.ui.inverted.grey.buttons .button:active,.ui.inverted.grey.buttons .button:focus,.ui.inverted.grey.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button:hover{background-color:#cfd0d2}.ui.inverted.grey.button:focus,.ui.inverted.grey.buttons .button:focus{background-color:#c7c9cb}.ui.inverted.grey.active.button,.ui.inverted.grey.buttons .active.button{background-color:#cfd0d2}.ui.inverted.grey.button:active,.ui.inverted.grey.buttons .button:active{background-color:#c2c4c5}.ui.inverted.grey.basic.button,.ui.inverted.grey.basic.buttons .button,.ui.inverted.grey.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.grey.basic.button:hover,.ui.inverted.grey.basic.buttons .button:hover,.ui.inverted.grey.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #cfd0d2 inset!important;box-shadow:0 0 0 2px #cfd0d2 inset!important;color:#fff!important}.ui.inverted.grey.basic.button:focus,.ui.inverted.grey.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c7c9cb inset!important;box-shadow:0 0 0 2px #c7c9cb inset!important;color:#dcddde!important}.ui.inverted.grey.basic.active.button,.ui.inverted.grey.basic.buttons .active.button,.ui.inverted.grey.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cfd0d2 inset!important;box-shadow:0 0 0 2px #cfd0d2 inset!important;color:#fff!important}.ui.inverted.grey.basic.button:active,.ui.inverted.grey.basic.buttons .button:active,.ui.inverted.grey.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #c2c4c5 inset!important;box-shadow:0 0 0 2px #c2c4c5 inset!important;color:#fff!important}.ui.brown.button,.ui.brown.buttons .button{background-color:#a5673f;color:#fff;text-shadow:none;background-image:none}.ui.brown.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.brown.button:hover,.ui.brown.buttons .button:hover{background-color:#975b33;color:#fff;text-shadow:none}.ui.brown.button:focus,.ui.brown.buttons .button:focus{background-color:#90532b;color:#fff;text-shadow:none}.ui.brown.button:active,.ui.brown.buttons .button:active{background-color:#805031;color:#fff;text-shadow:none}.ui.brown.active.button,.ui.brown.button .active.button:active,.ui.brown.buttons .active.button,.ui.brown.buttons .active.button:active{background-color:#995a31;color:#fff;text-shadow:none}.ui.basic.brown.button,.ui.basic.brown.buttons .button{-webkit-box-shadow:0 0 0 1px #a5673f inset!important;box-shadow:0 0 0 1px #a5673f inset!important;color:#a5673f!important}.ui.basic.brown.button:hover,.ui.basic.brown.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #975b33 inset!important;box-shadow:0 0 0 1px #975b33 inset!important;color:#975b33!important}.ui.basic.brown.button:focus,.ui.basic.brown.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #90532b inset!important;box-shadow:0 0 0 1px #90532b inset!important;color:#975b33!important}.ui.basic.brown.active.button,.ui.basic.brown.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #995a31 inset!important;box-shadow:0 0 0 1px #995a31 inset!important;color:#805031!important}.ui.basic.brown.button:active,.ui.basic.brown.buttons .button:active{-webkit-box-shadow:0 0 0 1px #805031 inset!important;box-shadow:0 0 0 1px #805031 inset!important;color:#805031!important}.ui.buttons:not(.vertical)>.basic.brown.button:not(:first-child){margin-left:-1px}.ui.inverted.brown.button,.ui.inverted.brown.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d67c1c inset!important;box-shadow:0 0 0 2px #d67c1c inset!important;color:#d67c1c}.ui.inverted.brown.button.active,.ui.inverted.brown.button:active,.ui.inverted.brown.button:focus,.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button.active,.ui.inverted.brown.buttons .button:active,.ui.inverted.brown.buttons .button:focus,.ui.inverted.brown.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button:hover{background-color:#c86f11}.ui.inverted.brown.button:focus,.ui.inverted.brown.buttons .button:focus{background-color:#c16808}.ui.inverted.brown.active.button,.ui.inverted.brown.buttons .active.button{background-color:#cc6f0d}.ui.inverted.brown.button:active,.ui.inverted.brown.buttons .button:active{background-color:#a96216}.ui.inverted.brown.basic.button,.ui.inverted.brown.basic.buttons .button,.ui.inverted.brown.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.brown.basic.button:hover,.ui.inverted.brown.basic.buttons .button:hover,.ui.inverted.brown.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #c86f11 inset!important;box-shadow:0 0 0 2px #c86f11 inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.button:focus,.ui.inverted.brown.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c16808 inset!important;box-shadow:0 0 0 2px #c16808 inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.active.button,.ui.inverted.brown.basic.buttons .active.button,.ui.inverted.brown.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cc6f0d inset!important;box-shadow:0 0 0 2px #cc6f0d inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.button:active,.ui.inverted.brown.basic.buttons .button:active,.ui.inverted.brown.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #a96216 inset!important;box-shadow:0 0 0 2px #a96216 inset!important;color:#d67c1c!important}.ui.blue.button,.ui.blue.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.blue.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.blue.button:hover,.ui.blue.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.blue.button:focus,.ui.blue.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.blue.button:active,.ui.blue.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.blue.active.button,.ui.blue.button .active.button:active,.ui.blue.buttons .active.button,.ui.blue.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.blue.button,.ui.basic.blue.buttons .button{-webkit-box-shadow:0 0 0 1px #2185d0 inset!important;box-shadow:0 0 0 1px #2185d0 inset!important;color:#2185d0!important}.ui.basic.blue.button:hover,.ui.basic.blue.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1678c2 inset!important;box-shadow:0 0 0 1px #1678c2 inset!important;color:#1678c2!important}.ui.basic.blue.button:focus,.ui.basic.blue.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0d71bb inset!important;box-shadow:0 0 0 1px #0d71bb inset!important;color:#1678c2!important}.ui.basic.blue.active.button,.ui.basic.blue.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1279c6 inset!important;box-shadow:0 0 0 1px #1279c6 inset!important;color:#1a69a4!important}.ui.basic.blue.button:active,.ui.basic.blue.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset!important;box-shadow:0 0 0 1px #1a69a4 inset!important;color:#1a69a4!important}.ui.buttons:not(.vertical)>.basic.blue.button:not(:first-child){margin-left:-1px}.ui.inverted.blue.button,.ui.inverted.blue.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset!important;box-shadow:0 0 0 2px #54c8ff inset!important;color:#54c8ff}.ui.inverted.blue.button.active,.ui.inverted.blue.button:active,.ui.inverted.blue.button:focus,.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button.active,.ui.inverted.blue.buttons .button:active,.ui.inverted.blue.buttons .button:focus,.ui.inverted.blue.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button:hover{background-color:#3ac0ff}.ui.inverted.blue.button:focus,.ui.inverted.blue.buttons .button:focus{background-color:#2bbbff}.ui.inverted.blue.active.button,.ui.inverted.blue.buttons .active.button{background-color:#3ac0ff}.ui.inverted.blue.button:active,.ui.inverted.blue.buttons .button:active{background-color:#21b8ff}.ui.inverted.blue.basic.button,.ui.inverted.blue.basic.buttons .button,.ui.inverted.blue.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.blue.basic.button:hover,.ui.inverted.blue.basic.buttons .button:hover,.ui.inverted.blue.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.button:focus,.ui.inverted.blue.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset!important;box-shadow:0 0 0 2px #2bbbff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.active.button,.ui.inverted.blue.basic.buttons .active.button,.ui.inverted.blue.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.button:active,.ui.inverted.blue.basic.buttons .button:active,.ui.inverted.blue.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset!important;box-shadow:0 0 0 2px #21b8ff inset!important;color:#54c8ff!important}.ui.green.button,.ui.green.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.green.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.green.button:hover,.ui.green.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.green.button:focus,.ui.green.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.green.button:active,.ui.green.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.green.active.button,.ui.green.button .active.button:active,.ui.green.buttons .active.button,.ui.green.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.green.button,.ui.basic.green.buttons .button{-webkit-box-shadow:0 0 0 1px #21ba45 inset!important;box-shadow:0 0 0 1px #21ba45 inset!important;color:#21ba45!important}.ui.basic.green.button:hover,.ui.basic.green.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #16ab39 inset!important;box-shadow:0 0 0 1px #16ab39 inset!important;color:#16ab39!important}.ui.basic.green.button:focus,.ui.basic.green.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0ea432 inset!important;box-shadow:0 0 0 1px #0ea432 inset!important;color:#16ab39!important}.ui.basic.green.active.button,.ui.basic.green.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #13ae38 inset!important;box-shadow:0 0 0 1px #13ae38 inset!important;color:#198f35!important}.ui.basic.green.button:active,.ui.basic.green.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset!important;box-shadow:0 0 0 1px #198f35 inset!important;color:#198f35!important}.ui.buttons:not(.vertical)>.basic.green.button:not(:first-child){margin-left:-1px}.ui.inverted.green.button,.ui.inverted.green.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #2ecc40 inset!important;box-shadow:0 0 0 2px #2ecc40 inset!important;color:#2ecc40}.ui.inverted.green.button.active,.ui.inverted.green.button:active,.ui.inverted.green.button:focus,.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button.active,.ui.inverted.green.buttons .button:active,.ui.inverted.green.buttons .button:focus,.ui.inverted.green.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button:hover{background-color:#22be34}.ui.inverted.green.button:focus,.ui.inverted.green.buttons .button:focus{background-color:#19b82b}.ui.inverted.green.active.button,.ui.inverted.green.buttons .active.button{background-color:#1fc231}.ui.inverted.green.button:active,.ui.inverted.green.buttons .button:active{background-color:#25a233}.ui.inverted.green.basic.button,.ui.inverted.green.basic.buttons .button,.ui.inverted.green.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.green.basic.button:hover,.ui.inverted.green.basic.buttons .button:hover,.ui.inverted.green.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #22be34 inset!important;box-shadow:0 0 0 2px #22be34 inset!important;color:#2ecc40!important}.ui.inverted.green.basic.button:focus,.ui.inverted.green.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #19b82b inset!important;box-shadow:0 0 0 2px #19b82b inset!important;color:#2ecc40!important}.ui.inverted.green.basic.active.button,.ui.inverted.green.basic.buttons .active.button,.ui.inverted.green.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #1fc231 inset!important;box-shadow:0 0 0 2px #1fc231 inset!important;color:#2ecc40!important}.ui.inverted.green.basic.button:active,.ui.inverted.green.basic.buttons .button:active,.ui.inverted.green.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #25a233 inset!important;box-shadow:0 0 0 2px #25a233 inset!important;color:#2ecc40!important}.ui.orange.button,.ui.orange.buttons .button{background-color:#f2711c;color:#fff;text-shadow:none;background-image:none}.ui.orange.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.orange.button:hover,.ui.orange.buttons .button:hover{background-color:#f26202;color:#fff;text-shadow:none}.ui.orange.button:focus,.ui.orange.buttons .button:focus{background-color:#e55b00;color:#fff;text-shadow:none}.ui.orange.button:active,.ui.orange.buttons .button:active{background-color:#cf590c;color:#fff;text-shadow:none}.ui.orange.active.button,.ui.orange.button .active.button:active,.ui.orange.buttons .active.button,.ui.orange.buttons .active.button:active{background-color:#f56100;color:#fff;text-shadow:none}.ui.basic.orange.button,.ui.basic.orange.buttons .button{-webkit-box-shadow:0 0 0 1px #f2711c inset!important;box-shadow:0 0 0 1px #f2711c inset!important;color:#f2711c!important}.ui.basic.orange.button:hover,.ui.basic.orange.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #f26202 inset!important;box-shadow:0 0 0 1px #f26202 inset!important;color:#f26202!important}.ui.basic.orange.button:focus,.ui.basic.orange.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e55b00 inset!important;box-shadow:0 0 0 1px #e55b00 inset!important;color:#f26202!important}.ui.basic.orange.active.button,.ui.basic.orange.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #f56100 inset!important;box-shadow:0 0 0 1px #f56100 inset!important;color:#cf590c!important}.ui.basic.orange.button:active,.ui.basic.orange.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cf590c inset!important;box-shadow:0 0 0 1px #cf590c inset!important;color:#cf590c!important}.ui.buttons:not(.vertical)>.basic.orange.button:not(:first-child){margin-left:-1px}.ui.inverted.orange.button,.ui.inverted.orange.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff851b inset!important;box-shadow:0 0 0 2px #ff851b inset!important;color:#ff851b}.ui.inverted.orange.button.active,.ui.inverted.orange.button:active,.ui.inverted.orange.button:focus,.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button.active,.ui.inverted.orange.buttons .button:active,.ui.inverted.orange.buttons .button:focus,.ui.inverted.orange.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button:hover{background-color:#ff7701}.ui.inverted.orange.button:focus,.ui.inverted.orange.buttons .button:focus{background-color:#f17000}.ui.inverted.orange.active.button,.ui.inverted.orange.buttons .active.button{background-color:#ff7701}.ui.inverted.orange.button:active,.ui.inverted.orange.buttons .button:active{background-color:#e76b00}.ui.inverted.orange.basic.button,.ui.inverted.orange.basic.buttons .button,.ui.inverted.orange.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.orange.basic.button:hover,.ui.inverted.orange.basic.buttons .button:hover,.ui.inverted.orange.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff7701 inset!important;box-shadow:0 0 0 2px #ff7701 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.button:focus,.ui.inverted.orange.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f17000 inset!important;box-shadow:0 0 0 2px #f17000 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.active.button,.ui.inverted.orange.basic.buttons .active.button,.ui.inverted.orange.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff7701 inset!important;box-shadow:0 0 0 2px #ff7701 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.button:active,.ui.inverted.orange.basic.buttons .button:active,.ui.inverted.orange.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #e76b00 inset!important;box-shadow:0 0 0 2px #e76b00 inset!important;color:#ff851b!important}.ui.pink.button,.ui.pink.buttons .button{background-color:#e03997;color:#fff;text-shadow:none;background-image:none}.ui.pink.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pink.button:hover,.ui.pink.buttons .button:hover{background-color:#e61a8d;color:#fff;text-shadow:none}.ui.pink.button:focus,.ui.pink.buttons .button:focus{background-color:#e10f85;color:#fff;text-shadow:none}.ui.pink.button:active,.ui.pink.buttons .button:active{background-color:#c71f7e;color:#fff;text-shadow:none}.ui.pink.active.button,.ui.pink.button .active.button:active,.ui.pink.buttons .active.button,.ui.pink.buttons .active.button:active{background-color:#ea158d;color:#fff;text-shadow:none}.ui.basic.pink.button,.ui.basic.pink.buttons .button{-webkit-box-shadow:0 0 0 1px #e03997 inset!important;box-shadow:0 0 0 1px #e03997 inset!important;color:#e03997!important}.ui.basic.pink.button:hover,.ui.basic.pink.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e61a8d inset!important;box-shadow:0 0 0 1px #e61a8d inset!important;color:#e61a8d!important}.ui.basic.pink.button:focus,.ui.basic.pink.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e10f85 inset!important;box-shadow:0 0 0 1px #e10f85 inset!important;color:#e61a8d!important}.ui.basic.pink.active.button,.ui.basic.pink.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ea158d inset!important;box-shadow:0 0 0 1px #ea158d inset!important;color:#c71f7e!important}.ui.basic.pink.button:active,.ui.basic.pink.buttons .button:active{-webkit-box-shadow:0 0 0 1px #c71f7e inset!important;box-shadow:0 0 0 1px #c71f7e inset!important;color:#c71f7e!important}.ui.buttons:not(.vertical)>.basic.pink.button:not(:first-child){margin-left:-1px}.ui.inverted.pink.button,.ui.inverted.pink.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff8edf inset!important;box-shadow:0 0 0 2px #ff8edf inset!important;color:#ff8edf}.ui.inverted.pink.button.active,.ui.inverted.pink.button:active,.ui.inverted.pink.button:focus,.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button.active,.ui.inverted.pink.buttons .button:active,.ui.inverted.pink.buttons .button:focus,.ui.inverted.pink.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button:hover{background-color:#ff74d8}.ui.inverted.pink.button:focus,.ui.inverted.pink.buttons .button:focus{background-color:#ff65d3}.ui.inverted.pink.active.button,.ui.inverted.pink.buttons .active.button{background-color:#ff74d8}.ui.inverted.pink.button:active,.ui.inverted.pink.buttons .button:active{background-color:#ff5bd1}.ui.inverted.pink.basic.button,.ui.inverted.pink.basic.buttons .button,.ui.inverted.pink.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.pink.basic.button:hover,.ui.inverted.pink.basic.buttons .button:hover,.ui.inverted.pink.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff74d8 inset!important;box-shadow:0 0 0 2px #ff74d8 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.button:focus,.ui.inverted.pink.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff65d3 inset!important;box-shadow:0 0 0 2px #ff65d3 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.active.button,.ui.inverted.pink.basic.buttons .active.button,.ui.inverted.pink.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff74d8 inset!important;box-shadow:0 0 0 2px #ff74d8 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.button:active,.ui.inverted.pink.basic.buttons .button:active,.ui.inverted.pink.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff5bd1 inset!important;box-shadow:0 0 0 2px #ff5bd1 inset!important;color:#ff8edf!important}.ui.violet.button,.ui.violet.buttons .button{background-color:#6435c9;color:#fff;text-shadow:none;background-image:none}.ui.violet.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.violet.button:hover,.ui.violet.buttons .button:hover{background-color:#5829bb;color:#fff;text-shadow:none}.ui.violet.button:focus,.ui.violet.buttons .button:focus{background-color:#4f20b5;color:#fff;text-shadow:none}.ui.violet.button:active,.ui.violet.buttons .button:active{background-color:#502aa1;color:#fff;text-shadow:none}.ui.violet.active.button,.ui.violet.button .active.button:active,.ui.violet.buttons .active.button,.ui.violet.buttons .active.button:active{background-color:#5626bf;color:#fff;text-shadow:none}.ui.basic.violet.button,.ui.basic.violet.buttons .button{-webkit-box-shadow:0 0 0 1px #6435c9 inset!important;box-shadow:0 0 0 1px #6435c9 inset!important;color:#6435c9!important}.ui.basic.violet.button:hover,.ui.basic.violet.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #5829bb inset!important;box-shadow:0 0 0 1px #5829bb inset!important;color:#5829bb!important}.ui.basic.violet.button:focus,.ui.basic.violet.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #4f20b5 inset!important;box-shadow:0 0 0 1px #4f20b5 inset!important;color:#5829bb!important}.ui.basic.violet.active.button,.ui.basic.violet.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #5626bf inset!important;box-shadow:0 0 0 1px #5626bf inset!important;color:#502aa1!important}.ui.basic.violet.button:active,.ui.basic.violet.buttons .button:active{-webkit-box-shadow:0 0 0 1px #502aa1 inset!important;box-shadow:0 0 0 1px #502aa1 inset!important;color:#502aa1!important}.ui.buttons:not(.vertical)>.basic.violet.button:not(:first-child){margin-left:-1px}.ui.inverted.violet.button,.ui.inverted.violet.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #a291fb inset!important;box-shadow:0 0 0 2px #a291fb inset!important;color:#a291fb}.ui.inverted.violet.button.active,.ui.inverted.violet.button:active,.ui.inverted.violet.button:focus,.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button.active,.ui.inverted.violet.buttons .button:active,.ui.inverted.violet.buttons .button:focus,.ui.inverted.violet.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button:hover{background-color:#8a73ff}.ui.inverted.violet.button:focus,.ui.inverted.violet.buttons .button:focus{background-color:#7d64ff}.ui.inverted.violet.active.button,.ui.inverted.violet.buttons .active.button{background-color:#8a73ff}.ui.inverted.violet.button:active,.ui.inverted.violet.buttons .button:active{background-color:#7860f9}.ui.inverted.violet.basic.button,.ui.inverted.violet.basic.buttons .button,.ui.inverted.violet.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.violet.basic.button:hover,.ui.inverted.violet.basic.buttons .button:hover,.ui.inverted.violet.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #8a73ff inset!important;box-shadow:0 0 0 2px #8a73ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.button:focus,.ui.inverted.violet.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #7d64ff inset!important;box-shadow:0 0 0 2px #7d64ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.active.button,.ui.inverted.violet.basic.buttons .active.button,.ui.inverted.violet.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #8a73ff inset!important;box-shadow:0 0 0 2px #8a73ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.button:active,.ui.inverted.violet.basic.buttons .button:active,.ui.inverted.violet.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #7860f9 inset!important;box-shadow:0 0 0 2px #7860f9 inset!important;color:#a291fb!important}.ui.purple.button,.ui.purple.buttons .button{background-color:#a333c8;color:#fff;text-shadow:none;background-image:none}.ui.purple.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.purple.button:hover,.ui.purple.buttons .button:hover{background-color:#9627ba;color:#fff;text-shadow:none}.ui.purple.button:focus,.ui.purple.buttons .button:focus{background-color:#8f1eb4;color:#fff;text-shadow:none}.ui.purple.button:active,.ui.purple.buttons .button:active{background-color:#82299f;color:#fff;text-shadow:none}.ui.purple.active.button,.ui.purple.button .active.button:active,.ui.purple.buttons .active.button,.ui.purple.buttons .active.button:active{background-color:#9724be;color:#fff;text-shadow:none}.ui.basic.purple.button,.ui.basic.purple.buttons .button{-webkit-box-shadow:0 0 0 1px #a333c8 inset!important;box-shadow:0 0 0 1px #a333c8 inset!important;color:#a333c8!important}.ui.basic.purple.button:hover,.ui.basic.purple.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #9627ba inset!important;box-shadow:0 0 0 1px #9627ba inset!important;color:#9627ba!important}.ui.basic.purple.button:focus,.ui.basic.purple.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #8f1eb4 inset!important;box-shadow:0 0 0 1px #8f1eb4 inset!important;color:#9627ba!important}.ui.basic.purple.active.button,.ui.basic.purple.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #9724be inset!important;box-shadow:0 0 0 1px #9724be inset!important;color:#82299f!important}.ui.basic.purple.button:active,.ui.basic.purple.buttons .button:active{-webkit-box-shadow:0 0 0 1px #82299f inset!important;box-shadow:0 0 0 1px #82299f inset!important;color:#82299f!important}.ui.buttons:not(.vertical)>.basic.purple.button:not(:first-child){margin-left:-1px}.ui.inverted.purple.button,.ui.inverted.purple.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #dc73ff inset!important;box-shadow:0 0 0 2px #dc73ff inset!important;color:#dc73ff}.ui.inverted.purple.button.active,.ui.inverted.purple.button:active,.ui.inverted.purple.button:focus,.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button.active,.ui.inverted.purple.buttons .button:active,.ui.inverted.purple.buttons .button:focus,.ui.inverted.purple.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button:hover{background-color:#d65aff}.ui.inverted.purple.button:focus,.ui.inverted.purple.buttons .button:focus{background-color:#d24aff}.ui.inverted.purple.active.button,.ui.inverted.purple.buttons .active.button{background-color:#d65aff}.ui.inverted.purple.button:active,.ui.inverted.purple.buttons .button:active{background-color:#cf40ff}.ui.inverted.purple.basic.button,.ui.inverted.purple.basic.buttons .button,.ui.inverted.purple.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.purple.basic.button:hover,.ui.inverted.purple.basic.buttons .button:hover,.ui.inverted.purple.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #d65aff inset!important;box-shadow:0 0 0 2px #d65aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.button:focus,.ui.inverted.purple.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #d24aff inset!important;box-shadow:0 0 0 2px #d24aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.active.button,.ui.inverted.purple.basic.buttons .active.button,.ui.inverted.purple.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #d65aff inset!important;box-shadow:0 0 0 2px #d65aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.button:active,.ui.inverted.purple.basic.buttons .button:active,.ui.inverted.purple.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cf40ff inset!important;box-shadow:0 0 0 2px #cf40ff inset!important;color:#dc73ff!important}.ui.red.button,.ui.red.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.red.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.red.button:hover,.ui.red.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.red.button:focus,.ui.red.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.red.button:active,.ui.red.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.red.active.button,.ui.red.button .active.button:active,.ui.red.buttons .active.button,.ui.red.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.red.button,.ui.basic.red.buttons .button{-webkit-box-shadow:0 0 0 1px #db2828 inset!important;box-shadow:0 0 0 1px #db2828 inset!important;color:#db2828!important}.ui.basic.red.button:hover,.ui.basic.red.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d01919 inset!important;box-shadow:0 0 0 1px #d01919 inset!important;color:#d01919!important}.ui.basic.red.button:focus,.ui.basic.red.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ca1010 inset!important;box-shadow:0 0 0 1px #ca1010 inset!important;color:#d01919!important}.ui.basic.red.active.button,.ui.basic.red.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d41515 inset!important;box-shadow:0 0 0 1px #d41515 inset!important;color:#b21e1e!important}.ui.basic.red.button:active,.ui.basic.red.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset!important;box-shadow:0 0 0 1px #b21e1e inset!important;color:#b21e1e!important}.ui.buttons:not(.vertical)>.basic.red.button:not(:first-child){margin-left:-1px}.ui.inverted.red.button,.ui.inverted.red.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff695e inset!important;box-shadow:0 0 0 2px #ff695e inset!important;color:#ff695e}.ui.inverted.red.button.active,.ui.inverted.red.button:active,.ui.inverted.red.button:focus,.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button.active,.ui.inverted.red.buttons .button:active,.ui.inverted.red.buttons .button:focus,.ui.inverted.red.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button:hover{background-color:#ff5144}.ui.inverted.red.button:focus,.ui.inverted.red.buttons .button:focus{background-color:#ff4335}.ui.inverted.red.active.button,.ui.inverted.red.buttons .active.button{background-color:#ff5144}.ui.inverted.red.button:active,.ui.inverted.red.buttons .button:active{background-color:#ff392b}.ui.inverted.red.basic.button,.ui.inverted.red.basic.buttons .button,.ui.inverted.red.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.red.basic.button:hover,.ui.inverted.red.basic.buttons .button:hover,.ui.inverted.red.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff5144 inset!important;box-shadow:0 0 0 2px #ff5144 inset!important;color:#ff695e!important}.ui.inverted.red.basic.button:focus,.ui.inverted.red.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff4335 inset!important;box-shadow:0 0 0 2px #ff4335 inset!important;color:#ff695e!important}.ui.inverted.red.basic.active.button,.ui.inverted.red.basic.buttons .active.button,.ui.inverted.red.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff5144 inset!important;box-shadow:0 0 0 2px #ff5144 inset!important;color:#ff695e!important}.ui.inverted.red.basic.button:active,.ui.inverted.red.basic.buttons .button:active,.ui.inverted.red.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff392b inset!important;box-shadow:0 0 0 2px #ff392b inset!important;color:#ff695e!important}.ui.teal.button,.ui.teal.buttons .button{background-color:#00b5ad;color:#fff;text-shadow:none;background-image:none}.ui.teal.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.teal.button:hover,.ui.teal.buttons .button:hover{background-color:#009c95;color:#fff;text-shadow:none}.ui.teal.button:focus,.ui.teal.buttons .button:focus{background-color:#008c86;color:#fff;text-shadow:none}.ui.teal.button:active,.ui.teal.buttons .button:active{background-color:#00827c;color:#fff;text-shadow:none}.ui.teal.active.button,.ui.teal.button .active.button:active,.ui.teal.buttons .active.button,.ui.teal.buttons .active.button:active{background-color:#009c95;color:#fff;text-shadow:none}.ui.basic.teal.button,.ui.basic.teal.buttons .button{-webkit-box-shadow:0 0 0 1px #00b5ad inset!important;box-shadow:0 0 0 1px #00b5ad inset!important;color:#00b5ad!important}.ui.basic.teal.button:hover,.ui.basic.teal.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #009c95 inset!important;box-shadow:0 0 0 1px #009c95 inset!important;color:#009c95!important}.ui.basic.teal.button:focus,.ui.basic.teal.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #008c86 inset!important;box-shadow:0 0 0 1px #008c86 inset!important;color:#009c95!important}.ui.basic.teal.active.button,.ui.basic.teal.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #009c95 inset!important;box-shadow:0 0 0 1px #009c95 inset!important;color:#00827c!important}.ui.basic.teal.button:active,.ui.basic.teal.buttons .button:active{-webkit-box-shadow:0 0 0 1px #00827c inset!important;box-shadow:0 0 0 1px #00827c inset!important;color:#00827c!important}.ui.buttons:not(.vertical)>.basic.teal.button:not(:first-child){margin-left:-1px}.ui.inverted.teal.button,.ui.inverted.teal.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #6dffff inset!important;box-shadow:0 0 0 2px #6dffff inset!important;color:#6dffff}.ui.inverted.teal.button.active,.ui.inverted.teal.button:active,.ui.inverted.teal.button:focus,.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button.active,.ui.inverted.teal.buttons .button:active,.ui.inverted.teal.buttons .button:focus,.ui.inverted.teal.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button:hover{background-color:#54ffff}.ui.inverted.teal.button:focus,.ui.inverted.teal.buttons .button:focus{background-color:#4ff}.ui.inverted.teal.active.button,.ui.inverted.teal.buttons .active.button{background-color:#54ffff}.ui.inverted.teal.button:active,.ui.inverted.teal.buttons .button:active{background-color:#3affff}.ui.inverted.teal.basic.button,.ui.inverted.teal.basic.buttons .button,.ui.inverted.teal.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.teal.basic.button:hover,.ui.inverted.teal.basic.buttons .button:hover,.ui.inverted.teal.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #54ffff inset!important;box-shadow:0 0 0 2px #54ffff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.button:focus,.ui.inverted.teal.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #4ff inset!important;box-shadow:0 0 0 2px #4ff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.active.button,.ui.inverted.teal.basic.buttons .active.button,.ui.inverted.teal.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #54ffff inset!important;box-shadow:0 0 0 2px #54ffff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.button:active,.ui.inverted.teal.basic.buttons .button:active,.ui.inverted.teal.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #3affff inset!important;box-shadow:0 0 0 2px #3affff inset!important;color:#6dffff!important}.ui.olive.button,.ui.olive.buttons .button{background-color:#b5cc18;color:#fff;text-shadow:none;background-image:none}.ui.olive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.olive.button:hover,.ui.olive.buttons .button:hover{background-color:#a7bd0d;color:#fff;text-shadow:none}.ui.olive.button:focus,.ui.olive.buttons .button:focus{background-color:#a0b605;color:#fff;text-shadow:none}.ui.olive.button:active,.ui.olive.buttons .button:active{background-color:#8d9e13;color:#fff;text-shadow:none}.ui.olive.active.button,.ui.olive.button .active.button:active,.ui.olive.buttons .active.button,.ui.olive.buttons .active.button:active{background-color:#aac109;color:#fff;text-shadow:none}.ui.basic.olive.button,.ui.basic.olive.buttons .button{-webkit-box-shadow:0 0 0 1px #b5cc18 inset!important;box-shadow:0 0 0 1px #b5cc18 inset!important;color:#b5cc18!important}.ui.basic.olive.button:hover,.ui.basic.olive.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #a7bd0d inset!important;box-shadow:0 0 0 1px #a7bd0d inset!important;color:#a7bd0d!important}.ui.basic.olive.button:focus,.ui.basic.olive.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #a0b605 inset!important;box-shadow:0 0 0 1px #a0b605 inset!important;color:#a7bd0d!important}.ui.basic.olive.active.button,.ui.basic.olive.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #aac109 inset!important;box-shadow:0 0 0 1px #aac109 inset!important;color:#8d9e13!important}.ui.basic.olive.button:active,.ui.basic.olive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #8d9e13 inset!important;box-shadow:0 0 0 1px #8d9e13 inset!important;color:#8d9e13!important}.ui.buttons:not(.vertical)>.basic.olive.button:not(:first-child){margin-left:-1px}.ui.inverted.olive.button,.ui.inverted.olive.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d9e778 inset!important;box-shadow:0 0 0 2px #d9e778 inset!important;color:#d9e778}.ui.inverted.olive.button.active,.ui.inverted.olive.button:active,.ui.inverted.olive.button:focus,.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button.active,.ui.inverted.olive.buttons .button:active,.ui.inverted.olive.buttons .button:focus,.ui.inverted.olive.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button:hover{background-color:#d8ea5c}.ui.inverted.olive.button:focus,.ui.inverted.olive.buttons .button:focus{background-color:#daef47}.ui.inverted.olive.active.button,.ui.inverted.olive.buttons .active.button{background-color:#daed59}.ui.inverted.olive.button:active,.ui.inverted.olive.buttons .button:active{background-color:#cddf4d}.ui.inverted.olive.basic.button,.ui.inverted.olive.basic.buttons .button,.ui.inverted.olive.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.olive.basic.button:hover,.ui.inverted.olive.basic.buttons .button:hover,.ui.inverted.olive.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #d8ea5c inset!important;box-shadow:0 0 0 2px #d8ea5c inset!important;color:#d9e778!important}.ui.inverted.olive.basic.button:focus,.ui.inverted.olive.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #daef47 inset!important;box-shadow:0 0 0 2px #daef47 inset!important;color:#d9e778!important}.ui.inverted.olive.basic.active.button,.ui.inverted.olive.basic.buttons .active.button,.ui.inverted.olive.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #daed59 inset!important;box-shadow:0 0 0 2px #daed59 inset!important;color:#d9e778!important}.ui.inverted.olive.basic.button:active,.ui.inverted.olive.basic.buttons .button:active,.ui.inverted.olive.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cddf4d inset!important;box-shadow:0 0 0 2px #cddf4d inset!important;color:#d9e778!important}.ui.yellow.button,.ui.yellow.buttons .button{background-color:#fbbd08;color:#fff;text-shadow:none;background-image:none}.ui.yellow.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.yellow.button:hover,.ui.yellow.buttons .button:hover{background-color:#eaae00;color:#fff;text-shadow:none}.ui.yellow.button:focus,.ui.yellow.buttons .button:focus{background-color:#daa300;color:#fff;text-shadow:none}.ui.yellow.button:active,.ui.yellow.buttons .button:active{background-color:#cd9903;color:#fff;text-shadow:none}.ui.yellow.active.button,.ui.yellow.button .active.button:active,.ui.yellow.buttons .active.button,.ui.yellow.buttons .active.button:active{background-color:#eaae00;color:#fff;text-shadow:none}.ui.basic.yellow.button,.ui.basic.yellow.buttons .button{-webkit-box-shadow:0 0 0 1px #fbbd08 inset!important;box-shadow:0 0 0 1px #fbbd08 inset!important;color:#fbbd08!important}.ui.basic.yellow.button:hover,.ui.basic.yellow.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #eaae00 inset!important;box-shadow:0 0 0 1px #eaae00 inset!important;color:#eaae00!important}.ui.basic.yellow.button:focus,.ui.basic.yellow.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #daa300 inset!important;box-shadow:0 0 0 1px #daa300 inset!important;color:#eaae00!important}.ui.basic.yellow.active.button,.ui.basic.yellow.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #eaae00 inset!important;box-shadow:0 0 0 1px #eaae00 inset!important;color:#cd9903!important}.ui.basic.yellow.button:active,.ui.basic.yellow.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cd9903 inset!important;box-shadow:0 0 0 1px #cd9903 inset!important;color:#cd9903!important}.ui.buttons:not(.vertical)>.basic.yellow.button:not(:first-child){margin-left:-1px}.ui.inverted.yellow.button,.ui.inverted.yellow.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ffe21f inset!important;box-shadow:0 0 0 2px #ffe21f inset!important;color:#ffe21f}.ui.inverted.yellow.button.active,.ui.inverted.yellow.button:active,.ui.inverted.yellow.button:focus,.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button.active,.ui.inverted.yellow.buttons .button:active,.ui.inverted.yellow.buttons .button:focus,.ui.inverted.yellow.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button:hover{background-color:#ffdf05}.ui.inverted.yellow.button:focus,.ui.inverted.yellow.buttons .button:focus{background-color:#f5d500}.ui.inverted.yellow.active.button,.ui.inverted.yellow.buttons .active.button{background-color:#ffdf05}.ui.inverted.yellow.button:active,.ui.inverted.yellow.buttons .button:active{background-color:#ebcd00}.ui.inverted.yellow.basic.button,.ui.inverted.yellow.basic.buttons .button,.ui.inverted.yellow.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.yellow.basic.button:hover,.ui.inverted.yellow.basic.buttons .button:hover,.ui.inverted.yellow.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ffdf05 inset!important;box-shadow:0 0 0 2px #ffdf05 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.button:focus,.ui.inverted.yellow.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f5d500 inset!important;box-shadow:0 0 0 2px #f5d500 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.active.button,.ui.inverted.yellow.basic.buttons .active.button,.ui.inverted.yellow.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ffdf05 inset!important;box-shadow:0 0 0 2px #ffdf05 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.button:active,.ui.inverted.yellow.basic.buttons .button:active,.ui.inverted.yellow.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ebcd00 inset!important;box-shadow:0 0 0 2px #ebcd00 inset!important;color:#ffe21f!important}.ui.primary.button,.ui.primary.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.primary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.primary.button:hover,.ui.primary.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.primary.button:focus,.ui.primary.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.primary.button:active,.ui.primary.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.primary.active.button,.ui.primary.button .active.button:active,.ui.primary.buttons .active.button,.ui.primary.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.primary.button,.ui.basic.primary.buttons .button{-webkit-box-shadow:0 0 0 1px #2185d0 inset!important;box-shadow:0 0 0 1px #2185d0 inset!important;color:#2185d0!important}.ui.basic.primary.button:hover,.ui.basic.primary.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1678c2 inset!important;box-shadow:0 0 0 1px #1678c2 inset!important;color:#1678c2!important}.ui.basic.primary.button:focus,.ui.basic.primary.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0d71bb inset!important;box-shadow:0 0 0 1px #0d71bb inset!important;color:#1678c2!important}.ui.basic.primary.active.button,.ui.basic.primary.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1279c6 inset!important;box-shadow:0 0 0 1px #1279c6 inset!important;color:#1a69a4!important}.ui.basic.primary.button:active,.ui.basic.primary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset!important;box-shadow:0 0 0 1px #1a69a4 inset!important;color:#1a69a4!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.inverted.primary.button,.ui.inverted.primary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset!important;box-shadow:0 0 0 2px #54c8ff inset!important;color:#54c8ff}.ui.inverted.primary.button.active,.ui.inverted.primary.button:active,.ui.inverted.primary.button:focus,.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button.active,.ui.inverted.primary.buttons .button:active,.ui.inverted.primary.buttons .button:focus,.ui.inverted.primary.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button:hover{background-color:#3ac0ff}.ui.inverted.primary.button:focus,.ui.inverted.primary.buttons .button:focus{background-color:#2bbbff}.ui.inverted.primary.active.button,.ui.inverted.primary.buttons .active.button{background-color:#3ac0ff}.ui.inverted.primary.button:active,.ui.inverted.primary.buttons .button:active{background-color:#21b8ff}.ui.inverted.primary.basic.button,.ui.inverted.primary.basic.buttons .button,.ui.inverted.primary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.primary.basic.button:hover,.ui.inverted.primary.basic.buttons .button:hover,.ui.inverted.primary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.button:focus,.ui.inverted.primary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset!important;box-shadow:0 0 0 2px #2bbbff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.active.button,.ui.inverted.primary.basic.buttons .active.button,.ui.inverted.primary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.button:active,.ui.inverted.primary.basic.buttons .button:active,.ui.inverted.primary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset!important;box-shadow:0 0 0 2px #21b8ff inset!important;color:#54c8ff!important}.ui.secondary.button,.ui.secondary.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.secondary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.secondary.button:hover,.ui.secondary.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.secondary.button:focus,.ui.secondary.buttons .button:focus{background-color:#2e3032;color:#fff;text-shadow:none}.ui.secondary.button:active,.ui.secondary.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.secondary.active.button,.ui.secondary.button .active.button:active,.ui.secondary.buttons .active.button,.ui.secondary.buttons .active.button:active{background-color:#27292a;color:#fff;text-shadow:none}.ui.basic.secondary.button,.ui.basic.secondary.buttons .button{-webkit-box-shadow:0 0 0 1px #1b1c1d inset!important;box-shadow:0 0 0 1px #1b1c1d inset!important;color:#1b1c1d!important}.ui.basic.secondary.button:hover,.ui.basic.secondary.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#27292a!important}.ui.basic.secondary.button:focus,.ui.basic.secondary.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #2e3032 inset!important;box-shadow:0 0 0 1px #2e3032 inset!important;color:#27292a!important}.ui.basic.secondary.active.button,.ui.basic.secondary.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#343637!important}.ui.basic.secondary.button:active,.ui.basic.secondary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset!important;box-shadow:0 0 0 1px #343637 inset!important;color:#343637!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.inverted.secondary.button,.ui.inverted.secondary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #545454 inset!important;box-shadow:0 0 0 2px #545454 inset!important;color:#545454}.ui.inverted.secondary.button.active,.ui.inverted.secondary.button:active,.ui.inverted.secondary.button:focus,.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button.active,.ui.inverted.secondary.buttons .button:active,.ui.inverted.secondary.buttons .button:focus,.ui.inverted.secondary.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button:hover{background-color:#616161}.ui.inverted.secondary.button:focus,.ui.inverted.secondary.buttons .button:focus{background-color:#686868}.ui.inverted.secondary.active.button,.ui.inverted.secondary.buttons .active.button{background-color:#616161}.ui.inverted.secondary.button:active,.ui.inverted.secondary.buttons .button:active{background-color:#6e6e6e}.ui.inverted.secondary.basic.button,.ui.inverted.secondary.basic.buttons .button,.ui.inverted.secondary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.secondary.basic.button:hover,.ui.inverted.secondary.basic.buttons .button:hover,.ui.inverted.secondary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #616161 inset!important;box-shadow:0 0 0 2px #616161 inset!important;color:#545454!important}.ui.inverted.secondary.basic.button:focus,.ui.inverted.secondary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #686868 inset!important;box-shadow:0 0 0 2px #686868 inset!important;color:#545454!important}.ui.inverted.secondary.basic.active.button,.ui.inverted.secondary.basic.buttons .active.button,.ui.inverted.secondary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #616161 inset!important;box-shadow:0 0 0 2px #616161 inset!important;color:#545454!important}.ui.inverted.secondary.basic.button:active,.ui.inverted.secondary.basic.buttons .button:active,.ui.inverted.secondary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #6e6e6e inset!important;box-shadow:0 0 0 2px #6e6e6e inset!important;color:#545454!important}.ui.positive.button,.ui.positive.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.positive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.positive.button:hover,.ui.positive.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.positive.button:focus,.ui.positive.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.positive.button:active,.ui.positive.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.positive.active.button,.ui.positive.button .active.button:active,.ui.positive.buttons .active.button,.ui.positive.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.positive.button,.ui.basic.positive.buttons .button{-webkit-box-shadow:0 0 0 1px #21ba45 inset!important;box-shadow:0 0 0 1px #21ba45 inset!important;color:#21ba45!important}.ui.basic.positive.button:hover,.ui.basic.positive.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #16ab39 inset!important;box-shadow:0 0 0 1px #16ab39 inset!important;color:#16ab39!important}.ui.basic.positive.button:focus,.ui.basic.positive.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0ea432 inset!important;box-shadow:0 0 0 1px #0ea432 inset!important;color:#16ab39!important}.ui.basic.positive.active.button,.ui.basic.positive.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #13ae38 inset!important;box-shadow:0 0 0 1px #13ae38 inset!important;color:#198f35!important}.ui.basic.positive.button:active,.ui.basic.positive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset!important;box-shadow:0 0 0 1px #198f35 inset!important;color:#198f35!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.negative.button,.ui.negative.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.negative.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.negative.button:hover,.ui.negative.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.negative.button:focus,.ui.negative.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.negative.button:active,.ui.negative.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.negative.active.button,.ui.negative.button .active.button:active,.ui.negative.buttons .active.button,.ui.negative.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.negative.button,.ui.basic.negative.buttons .button{-webkit-box-shadow:0 0 0 1px #db2828 inset!important;box-shadow:0 0 0 1px #db2828 inset!important;color:#db2828!important}.ui.basic.negative.button:hover,.ui.basic.negative.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d01919 inset!important;box-shadow:0 0 0 1px #d01919 inset!important;color:#d01919!important}.ui.basic.negative.button:focus,.ui.basic.negative.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ca1010 inset!important;box-shadow:0 0 0 1px #ca1010 inset!important;color:#d01919!important}.ui.basic.negative.active.button,.ui.basic.negative.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d41515 inset!important;box-shadow:0 0 0 1px #d41515 inset!important;color:#b21e1e!important}.ui.basic.negative.button:active,.ui.basic.negative.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset!important;box-shadow:0 0 0 1px #b21e1e inset!important;color:#b21e1e!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0;vertical-align:baseline;margin:0 .25em 0 0}.ui.buttons:not(.basic):not(.inverted){-webkit-box-shadow:none;box-shadow:none}.ui.buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.buttons .button{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;margin:0;border-radius:0;margin:0}.ui.buttons:not(.basic):not(.inverted)>.button,.ui.buttons>.ui.button:not(.basic):not(.inverted){-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.buttons .button:first-child{border-left:none;margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ui.buttons .button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.vertical.buttons .button{display:block;float:none;width:100%;margin:0;-webkit-box-shadow:none;box-shadow:none;border-radius:0}.ui.vertical.buttons .button:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ui.vertical.buttons .button:last-child{margin-bottom:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.buttons .button:only-child{border-radius:.25rem}.ui.segment.homepage-hero .ui.button.download{background:#fff;color:#2185d0}.ui.segment.homepage-hero .ui.button.download:hover{color:#54c8ff}
\ No newline at end of file
+ */.ui.button{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:#e0e1e2 none;color:rgba(0,0,0,.6);font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;margin:0 .25em 0 0;padding:.6875em 1.5em .6875em;text-transform:none;text-shadow:none;font-weight:700;line-height:1em;font-style:normal;text-align:center;text-decoration:none;border-radius:.25rem;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;will-change:auto;-webkit-tap-highlight-color:transparent}.ui.button:hover{background-color:#cacbcd;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;color:rgba(0,0,0,.8)}.ui.button:hover .icon{opacity:.85}.ui.button:focus{background-color:#cacbcd;color:rgba(0,0,0,.8);background-image:none;-webkit-box-shadow:'';box-shadow:''}.ui.button:focus .icon{opacity:.85}.ui.active.button:active,.ui.button:active{background-color:#babbbc;background-image:'';color:rgba(0,0,0,.9);-webkit-box-shadow:0 0 0 1px transparent inset,none;box-shadow:0 0 0 1px transparent inset,none}.ui.active.button{background-color:#c0c1c2;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset;color:rgba(0,0,0,.95)}.ui.active.button:hover{background-color:#c0c1c2;background-image:none;color:rgba(0,0,0,.95)}.ui.active.button:active{background-color:#c0c1c2;background-image:none}.ui.loading.loading.loading.loading.loading.loading.button{position:relative;cursor:default;text-shadow:none!important;color:transparent;opacity:1;pointer-events:auto;-webkit-transition:all 0s linear,opacity .1s ease;transition:all 0s linear,opacity .1s ease}.ui.loading.button:before{position:absolute;content:'';top:50%;left:50%;margin:-.65625em 0 0 -.65625em;width:1.3125em;height:1.3125em;border-radius:500rem;border:.2em solid rgba(0,0,0,.15)}.ui.loading.button:after{position:absolute;content:'';top:50%;left:50%;margin:-.65625em 0 0 -.65625em;width:1.3125em;height:1.3125em;border-radius:500rem;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid currentColor;color:#fff;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.ui.labeled.icon.loading.button .icon{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.ui.basic.loading.button:not(.inverted):before{border-color:rgba(0,0,0,.1)}.ui.basic.loading.button:not(.inverted):after{border-color:#767676}.ui.button:disabled,.ui.buttons .disabled.button:not(.basic),.ui.disabled.active.button,.ui.disabled.button,.ui.disabled.button:hover{cursor:default;opacity:.45!important;background-image:none;-webkit-box-shadow:none;box-shadow:none;pointer-events:none!important}.ui.basic.buttons .ui.disabled.button{border-color:rgba(34,36,38,.5)}.ui.animated.button{position:relative;overflow:hidden;padding-right:0!important;vertical-align:middle;z-index:1}.ui.animated.button .content{will-change:transform,opacity}.ui.animated.button .visible.content{position:relative;margin-right:1.5em}.ui.animated.button .hidden.content{position:absolute;width:100%}.ui.animated.button .hidden.content,.ui.animated.button .visible.content{-webkit-transition:right .3s ease 0s;transition:right .3s ease 0s}.ui.animated.button .visible.content{left:auto;right:0}.ui.animated.button .hidden.content{top:50%;left:auto;right:-100%;margin-top:-.5em}.ui.animated.button:focus .visible.content,.ui.animated.button:hover .visible.content{left:auto;right:200%}.ui.animated.button:focus .hidden.content,.ui.animated.button:hover .hidden.content{left:auto;right:0}.ui.vertical.animated.button .hidden.content,.ui.vertical.animated.button .visible.content{-webkit-transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,transform .3s ease;transition:top .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.vertical.animated.button .visible.content{-webkit-transform:translateY(0);transform:translateY(0);right:auto}.ui.vertical.animated.button .hidden.content{top:-50%;left:0;right:auto}.ui.vertical.animated.button:focus .visible.content,.ui.vertical.animated.button:hover .visible.content{-webkit-transform:translateY(200%);transform:translateY(200%);right:auto}.ui.vertical.animated.button:focus .hidden.content,.ui.vertical.animated.button:hover .hidden.content{top:50%;right:auto}.ui.fade.animated.button .hidden.content,.ui.fade.animated.button .visible.content{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.fade.animated.button .visible.content{left:auto;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.fade.animated.button .hidden.content{opacity:0;left:0;right:auto;-webkit-transform:scale(1.5);transform:scale(1.5)}.ui.fade.animated.button:focus .visible.content,.ui.fade.animated.button:hover .visible.content{left:auto;right:auto;opacity:0;-webkit-transform:scale(.75);transform:scale(.75)}.ui.fade.animated.button:focus .hidden.content,.ui.fade.animated.button:hover .hidden.content{left:0;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.inverted.button{-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset;background:transparent none;color:#fff;text-shadow:none!important}.ui.inverted.buttons .button{margin:0 0 0 -2px}.ui.inverted.buttons .button:first-child{margin-left:0}.ui.inverted.vertical.buttons .button{margin:0 0 -2px 0}.ui.inverted.vertical.buttons .button:first-child{margin-top:0}.ui.inverted.button:hover{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset;color:rgba(0,0,0,.8)}.ui.inverted.button.active,.ui.inverted.button:focus{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset;color:rgba(0,0,0,.8)}.ui.inverted.button.active:focus{background:#dcddde;-webkit-box-shadow:0 0 0 2px #dcddde inset;box-shadow:0 0 0 2px #dcddde inset;color:rgba(0,0,0,.8)}.ui.labeled.button:not(.icon){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background:0 0;padding:0!important;border:none;-webkit-box-shadow:none;box-shadow:none}.ui.labeled.button>.button{margin:0}.ui.labeled.button>.label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 0 0 -1px!important;font-size:1em;padding:'';border-color:rgba(34,36,38,.15)}.ui.labeled.button>.tag.label:before{width:1.85em;height:1.85em}.ui.labeled.button:not([class*="left labeled"])>.button{border-top-right-radius:0;border-bottom-right-radius:0}.ui.labeled.button:not([class*="left labeled"])>.label{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.button{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.label{border-top-right-radius:0;border-bottom-right-radius:0}.ui.facebook.button{background-color:#3b5998;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.facebook.button:hover{background-color:#304d8a;color:#fff;text-shadow:none}.ui.facebook.button:active{background-color:#2d4373;color:#fff;text-shadow:none}.ui.twitter.button{background-color:#1da1f2;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.twitter.button:hover{background-color:#0298f3;color:#fff;text-shadow:none}.ui.twitter.button:active{background-color:#0c85d0;color:#fff;text-shadow:none}.ui.google.plus.button{background-color:#dd4b39;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.google.plus.button:hover{background-color:#e0321c;color:#fff;text-shadow:none}.ui.google.plus.button:active{background-color:#c23321;color:#fff;text-shadow:none}.ui.linkedin.button{background-color:#0077b5;color:#fff;text-shadow:none}.ui.linkedin.button:hover{background-color:#00669c;color:#fff;text-shadow:none}.ui.linkedin.button:active{background-color:#005582;color:#fff;text-shadow:none}.ui.youtube.button{background-color:red;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.youtube.button:hover{background-color:#e60000;color:#fff;text-shadow:none}.ui.youtube.button:active{background-color:#c00;color:#fff;text-shadow:none}.ui.instagram.button{background-color:#49769c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.instagram.button:hover{background-color:#3d698e;color:#fff;text-shadow:none}.ui.instagram.button:active{background-color:#395c79;color:#fff;text-shadow:none}.ui.pinterest.button{background-color:#bd081c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pinterest.button:hover{background-color:#ac0013;color:#fff;text-shadow:none}.ui.pinterest.button:active{background-color:#8c0615;color:#fff;text-shadow:none}.ui.vk.button{background-color:#45668e;color:#fff;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.vk.button:hover{background-color:#395980;color:#fff}.ui.vk.button:active{background-color:#344d6c;color:#fff}.ui.whatsapp.button{background-color:#25d366;color:#fff;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.whatsapp.button:hover{background-color:#19c55a;color:#fff}.ui.whatsapp.button:active{background-color:#1da851;color:#fff}.ui.telegram.button{background-color:#08c;color:#fff;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.telegram.button:hover{background-color:#0077b3;color:#fff}.ui.telegram.button:active{background-color:#069;color:#fff}.ui.button>.icon:not(.button){height:auto;opacity:.8;margin:0 .375em 0 -.1875em;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;vertical-align:'';color:''}.ui.button:not(.icon)>.icon:not(.button):not(.dropdown),.ui.button:not(.icon)>.icons:not(.button):not(.dropdown){margin:0 .375em 0 -.1875em}.ui.button:not(.icon)>.right.icon:not(.button):not(.dropdown){margin:0 -.1875em 0 .375em}.ui[class*="left floated"].button,.ui[class*="left floated"].buttons{float:left;margin-left:0;margin-right:.25em}.ui[class*="right floated"].button,.ui[class*="right floated"].buttons{float:right;margin-right:0;margin-left:.25em}.ui.compact.button,.ui.compact.buttons .button{padding:.515625em 1.125em .515625em}.ui.compact.icon.button,.ui.compact.icon.buttons .button{padding:.515625em .515625em .515625em}.ui.compact.labeled.icon.button,.ui.compact.labeled.icon.buttons .button{padding:.515625em 3.5em .515625em}.ui.compact.labeled.icon.button>.icon,.ui.compact.labeled.icon.buttons .button>.icon{padding:.515625em 0 .515625em 0}.ui.button,.ui.buttons .button,.ui.buttons .or{font-size:1rem}.ui.mini.buttons .button,.ui.mini.buttons .dropdown,.ui.mini.buttons .dropdown .menu>.item,.ui.mini.buttons .or,.ui.ui.ui.ui.mini.button{font-size:.8125rem}.ui.tiny.buttons .button,.ui.tiny.buttons .dropdown,.ui.tiny.buttons .dropdown .menu>.item,.ui.tiny.buttons .or,.ui.ui.ui.ui.tiny.button{font-size:.875rem}.ui.small.buttons .button,.ui.small.buttons .dropdown,.ui.small.buttons .dropdown .menu>.item,.ui.small.buttons .or,.ui.ui.ui.ui.small.button{font-size:.9375rem}.ui.large.buttons .button,.ui.large.buttons .dropdown,.ui.large.buttons .dropdown .menu>.item,.ui.large.buttons .or,.ui.ui.ui.ui.large.button{font-size:1.125rem}.ui.big.buttons .button,.ui.big.buttons .dropdown,.ui.big.buttons .dropdown .menu>.item,.ui.big.buttons .or,.ui.ui.ui.ui.big.button{font-size:1.3125rem}.ui.huge.buttons .button,.ui.huge.buttons .dropdown,.ui.huge.buttons .dropdown .menu>.item,.ui.huge.buttons .or,.ui.ui.ui.ui.huge.button{font-size:1.4375rem}.ui.massive.buttons .button,.ui.massive.buttons .dropdown,.ui.massive.buttons .dropdown .menu>.item,.ui.massive.buttons .or,.ui.ui.ui.ui.massive.button{font-size:1.6875rem}.ui.icon.button,.ui.icon.buttons .button{padding:.6875em .6875em .6875em}.ui.icon.button>.icon,.ui.icon.buttons .button>.icon{opacity:.9;margin:0!important;vertical-align:top}.ui.basic.button,.ui.basic.buttons .button{background:transparent none;color:rgba(0,0,0,.6);font-weight:400;border-radius:.25rem;text-transform:none;text-shadow:none!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.basic.buttons{-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.25rem}.ui.basic.buttons .button{border-radius:0}.ui.basic.button:hover,.ui.basic.buttons .button:hover{background:#fff;color:rgba(0,0,0,.8);-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:focus,.ui.basic.buttons .button:focus{background:#fff;color:rgba(0,0,0,.8);-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:active,.ui.basic.buttons .button:active{background:#f8f8f8;color:rgba(0,0,0,.9);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset}.ui.basic.active.button,.ui.basic.buttons .active.button{background:rgba(0,0,0,.05);-webkit-box-shadow:'';box-shadow:'';color:rgba(0,0,0,.95)}.ui.basic.active.button:hover,.ui.basic.buttons .active.button:hover{background-color:rgba(0,0,0,.05)}.ui.basic.buttons .button:hover{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .button:active{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .active.button{-webkit-box-shadow:'';box-shadow:''}.ui.basic.inverted.button,.ui.basic.inverted.buttons .button{background-color:transparent;color:#f9fafb;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}.ui.basic.inverted.button:hover,.ui.basic.inverted.buttons .button:hover{color:#fff;-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset}.ui.basic.inverted.button:focus,.ui.basic.inverted.buttons .button:focus{color:#fff;-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset}.ui.basic.inverted.button:active,.ui.basic.inverted.buttons .button:active{background-color:rgba(255,255,255,.08);color:#fff;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.9) inset;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset}.ui.basic.inverted.active.button,.ui.basic.inverted.buttons .active.button{background-color:rgba(255,255,255,.08);color:#fff;text-shadow:none;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.7) inset;box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}.ui.basic.inverted.active.button:hover,.ui.basic.inverted.buttons .active.button:hover{background-color:rgba(255,255,255,.15);-webkit-box-shadow:0 0 0 2px #fff inset;box-shadow:0 0 0 2px #fff inset}.ui.basic.buttons .button{border-left:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.vertical.buttons .button{border-left:none;border-left-width:0;border-top:1px solid rgba(34,36,38,.15)}.ui.basic.vertical.buttons .button:first-child{border-top-width:0}.ui.tertiary.button{-webkit-transition:color .1s ease!important;transition:color .1s ease!important;border-radius:0;margin:.1875em .25em .1875em 0!important;padding:.5em!important;-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6);background:0 0}.ui.tertiary.button:hover{-webkit-box-shadow:inset 0 -.2em 0 #666;box-shadow:inset 0 -.2em 0 #666;color:#333;background:0 0}.ui.tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #666;box-shadow:inset 0 -.2em 0 #666;color:#333;background:0 0}.ui.tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #999;box-shadow:inset 0 -.2em 0 #999;border-radius:.25rem .25rem 0 0;color:#666;background:0 0}.ui.labeled.icon.button,.ui.labeled.icon.buttons .button{position:relative;padding-left:3.875em!important;padding-right:1.5em!important}.ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{position:absolute;top:0;left:0;height:100%;line-height:1;border-radius:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit;text-align:center;-webkit-animation:none;animation:none;padding:.6875em 0 .6875em 0;margin:0;width:2.375em;background-color:rgba(0,0,0,.05);color:'';-webkit-box-shadow:-1px 0 0 0 transparent inset;box-shadow:-1px 0 0 0 transparent inset}.ui[class*="right labeled"].icon.button{padding-right:3.875em!important;padding-left:1.5em!important}.ui[class*="right labeled"].icon.button>.icon{left:auto;right:0;border-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;-webkit-box-shadow:1px 0 0 0 transparent inset;box-shadow:1px 0 0 0 transparent inset}.ui.labeled.icon.button>.icon:after,.ui.labeled.icon.button>.icon:before,.ui.labeled.icon.buttons>.button>.icon:after,.ui.labeled.icon.buttons>.button>.icon:before{display:block;position:relative;width:100%;top:0;text-align:center}.ui.labeled.icon.buttons .button>.icon{border-radius:0}.ui.labeled.icon.buttons .button:first-child>.icon{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ui.labeled.icon.buttons .button:last-child>.icon{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.labeled.icon.buttons .button:first-child>.icon{border-radius:0;border-top-left-radius:.25rem}.ui.vertical.labeled.icon.buttons .button:last-child>.icon{border-radius:0;border-bottom-left-radius:.25rem}.ui.labeled.icon.button>.loading.icon:before{-webkit-animation:loader 2s linear infinite;animation:loader 2s linear infinite}.ui.button.toggle.active,.ui.buttons .button.toggle.active,.ui.toggle.buttons .active.button{background-color:#21ba45;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;color:#fff}.ui.button.toggle.active:hover{background-color:#16ab39;text-shadow:none;color:#fff}.ui.circular.button{border-radius:10em}.ui.circular.button>.icon{width:1em;vertical-align:baseline}.ui.buttons .or{position:relative;width:.3em;height:2.375em;z-index:3}.ui.buttons .or:before{position:absolute;text-align:center;border-radius:500rem;content:'or';top:50%;left:50%;background-color:#fff;text-shadow:none;margin-top:-.84375em;margin-left:-.84375em;width:1.6875em;height:1.6875em;line-height:1.6875em;color:rgba(0,0,0,.4);font-style:normal;font-weight:700;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset}.ui.buttons .or[data-text]:before{content:attr(data-text)}.ui.fluid.buttons .or{width:0!important}.ui.fluid.buttons .or:after{display:none}.ui.attached.button{position:relative;display:block;margin:0;border-radius:0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.15)}.ui.attached.top.button{border-radius:.25rem .25rem 0 0}.ui.attached.bottom.button{border-radius:0 0 .25rem .25rem}.ui.left.attached.button{display:inline-block;border-left:none;text-align:right;padding-right:.75em;border-radius:.25rem 0 0 .25rem}.ui.right.attached.button{display:inline-block;text-align:left;padding-left:.75em;border-radius:0 .25rem .25rem 0}.ui.attached.buttons{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:auto!important;z-index:auto;margin-left:-1px;margin-right:-1px}.ui.attached.buttons .button{margin:0}.ui.attached.buttons .button:first-child{border-radius:0}.ui.attached.buttons .button:last-child{border-radius:0}.ui[class*="top attached"].buttons{margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.ui[class*="top attached"].buttons .button:first-child{border-radius:.25rem 0 0 0}.ui[class*="top attached"].buttons .button:last-child{border-radius:0 .25rem 0 0}.ui[class*="bottom attached"].buttons{margin-top:-1px;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].buttons .button:first-child{border-radius:0 0 0 .25rem}.ui[class*="bottom attached"].buttons .button:last-child{border-radius:0 0 .25rem 0}.ui[class*="left attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:0;margin-left:-1px;border-radius:0 .25rem .25rem 0}.ui[class*="left attached"].buttons .button:first-child{margin-left:-1px;border-radius:0 .25rem 0 0}.ui[class*="left attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 .25rem 0}.ui[class*="right attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-left:0;margin-right:-1px;border-radius:.25rem 0 0 .25rem}.ui[class*="right attached"].buttons .button:first-child{margin-left:-1px;border-radius:.25rem 0 0 0}.ui[class*="right attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 0 .25rem}.ui.fluid.button,.ui.fluid.buttons{width:100%}.ui.fluid.button{display:block}.ui.two.buttons{width:100%}.ui.two.buttons>.button{width:50%}.ui.three.buttons{width:100%}.ui.three.buttons>.button{width:33.333%}.ui.four.buttons{width:100%}.ui.four.buttons>.button{width:25%}.ui.five.buttons{width:100%}.ui.five.buttons>.button{width:20%}.ui.six.buttons{width:100%}.ui.six.buttons>.button{width:16.666%}.ui.seven.buttons{width:100%}.ui.seven.buttons>.button{width:14.285%}.ui.eight.buttons{width:100%}.ui.eight.buttons>.button{width:12.5%}.ui.nine.buttons{width:100%}.ui.nine.buttons>.button{width:11.11%}.ui.ten.buttons{width:100%}.ui.ten.buttons>.button{width:10%}.ui.eleven.buttons{width:100%}.ui.eleven.buttons>.button{width:9.09%}.ui.twelve.buttons{width:100%}.ui.twelve.buttons>.button{width:8.3333%}.ui.fluid.vertical.buttons,.ui.fluid.vertical.buttons>.button{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.two.vertical.buttons>.button{height:50%}.ui.three.vertical.buttons>.button{height:33.333%}.ui.four.vertical.buttons>.button{height:25%}.ui.five.vertical.buttons>.button{height:20%}.ui.six.vertical.buttons>.button{height:16.666%}.ui.seven.vertical.buttons>.button{height:14.285%}.ui.eight.vertical.buttons>.button{height:12.5%}.ui.nine.vertical.buttons>.button{height:11.11%}.ui.ten.vertical.buttons>.button{height:10%}.ui.eleven.vertical.buttons>.button{height:9.09%}.ui.twelve.vertical.buttons>.button{height:8.3333%}.ui.primary.button,.ui.primary.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.primary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.primary.button:hover,.ui.primary.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.primary.button:focus,.ui.primary.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.primary.button:active,.ui.primary.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.primary.active.button,.ui.primary.button .active.button:active,.ui.primary.buttons .active.button,.ui.primary.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.primary.button,.ui.basic.primary.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #2185d0 inset;box-shadow:0 0 0 1px #2185d0 inset;color:#2185d0}.ui.basic.primary.button:hover,.ui.basic.primary.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #1678c2 inset;box-shadow:0 0 0 1px #1678c2 inset;color:#1678c2}.ui.basic.primary.button:focus,.ui.basic.primary.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #0d71bb inset;box-shadow:0 0 0 1px #0d71bb inset;color:#1678c2}.ui.basic.primary.active.button,.ui.basic.primary.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #1279c6 inset;box-shadow:0 0 0 1px #1279c6 inset;color:#1a69a4}.ui.basic.primary.button:active,.ui.basic.primary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset;box-shadow:0 0 0 1px #1a69a4 inset;color:#1a69a4}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.inverted.primary.button,.ui.inverted.primary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset;box-shadow:0 0 0 2px #54c8ff inset;color:#54c8ff}.ui.inverted.primary.button.active,.ui.inverted.primary.button:active,.ui.inverted.primary.button:focus,.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button.active,.ui.inverted.primary.buttons .button:active,.ui.inverted.primary.buttons .button:focus,.ui.inverted.primary.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button:hover{background-color:#21b8ff}.ui.inverted.primary.button:focus,.ui.inverted.primary.buttons .button:focus{background-color:#2bbbff}.ui.inverted.primary.active.button,.ui.inverted.primary.buttons .active.button{background-color:#3ac0ff}.ui.inverted.primary.button:active,.ui.inverted.primary.buttons .button:active{background-color:#21b8ff}.ui.inverted.primary.basic.button,.ui.inverted.primary.basic.buttons .button,.ui.inverted.primary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.primary.basic.button:hover,.ui.inverted.primary.basic.buttons .button:hover,.ui.inverted.primary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #21b8ff inset;box-shadow:0 0 0 2px #21b8ff inset;color:#54c8ff}.ui.inverted.primary.basic.button:focus,.ui.inverted.primary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset;box-shadow:0 0 0 2px #2bbbff inset;color:#54c8ff}.ui.inverted.primary.basic.active.button,.ui.inverted.primary.basic.buttons .active.button,.ui.inverted.primary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset;box-shadow:0 0 0 2px #3ac0ff inset;color:#54c8ff}.ui.inverted.primary.basic.button:active,.ui.inverted.primary.basic.buttons .button:active,.ui.inverted.primary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset;box-shadow:0 0 0 2px #21b8ff inset;color:#54c8ff}.ui.tertiary.primary.button,.ui.tertiary.primary.buttons .button,.ui.tertiary.primary.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#2185d0}.ui.tertiary.primary.button:hover,.ui.tertiary.primary.buttons .button:hover,.ui.tertiary.primary.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #2b75ac;box-shadow:inset 0 -.2em 0 #2b75ac;color:#2b75ac}.ui.tertiary.primary.button:focus,.ui.tertiary.primary.buttons .button:focus,.ui.tertiary.primary.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #216ea7;box-shadow:inset 0 -.2em 0 #216ea7;color:#216ea7}.ui.tertiary.primary.active.button,.ui.tertiary.primary.button:active,.ui.tertiary.primary.buttons .active.button,.ui.tertiary.primary.buttons .button:active,.ui.tertiary.primary.buttons .tertiary.active.button,.ui.tertiary.primary.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #007bd8;box-shadow:inset 0 -.2em 0 #007bd8;color:#1279c6}.ui.secondary.button,.ui.secondary.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.secondary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.secondary.button:hover,.ui.secondary.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.secondary.button:focus,.ui.secondary.buttons .button:focus{background-color:#2e3032;color:#fff;text-shadow:none}.ui.secondary.button:active,.ui.secondary.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.secondary.active.button,.ui.secondary.button .active.button:active,.ui.secondary.buttons .active.button,.ui.secondary.buttons .active.button:active{background-color:#27292a;color:#fff;text-shadow:none}.ui.basic.secondary.button,.ui.basic.secondary.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #1b1c1d inset;box-shadow:0 0 0 1px #1b1c1d inset;color:#1b1c1d}.ui.basic.secondary.button:hover,.ui.basic.secondary.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #27292a inset;box-shadow:0 0 0 1px #27292a inset;color:#27292a}.ui.basic.secondary.button:focus,.ui.basic.secondary.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #2e3032 inset;box-shadow:0 0 0 1px #2e3032 inset;color:#27292a}.ui.basic.secondary.active.button,.ui.basic.secondary.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #27292a inset;box-shadow:0 0 0 1px #27292a inset;color:#343637}.ui.basic.secondary.button:active,.ui.basic.secondary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset;box-shadow:0 0 0 1px #343637 inset;color:#343637}.ui.buttons:not(.vertical)>.basic.secondary.button:not(:first-child){margin-left:-1px}.ui.inverted.secondary.button,.ui.inverted.secondary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #545454 inset;box-shadow:0 0 0 2px #545454 inset;color:#545454}.ui.inverted.secondary.button.active,.ui.inverted.secondary.button:active,.ui.inverted.secondary.button:focus,.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button.active,.ui.inverted.secondary.buttons .button:active,.ui.inverted.secondary.buttons .button:focus,.ui.inverted.secondary.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button:hover{background-color:#6e6e6e}.ui.inverted.secondary.button:focus,.ui.inverted.secondary.buttons .button:focus{background-color:#686868}.ui.inverted.secondary.active.button,.ui.inverted.secondary.buttons .active.button{background-color:#616161}.ui.inverted.secondary.button:active,.ui.inverted.secondary.buttons .button:active{background-color:#6e6e6e}.ui.inverted.secondary.basic.button,.ui.inverted.secondary.basic.buttons .button,.ui.inverted.secondary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.secondary.basic.button:hover,.ui.inverted.secondary.basic.buttons .button:hover,.ui.inverted.secondary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #6e6e6e inset;box-shadow:0 0 0 2px #6e6e6e inset;color:#545454}.ui.inverted.secondary.basic.button:focus,.ui.inverted.secondary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #686868 inset;box-shadow:0 0 0 2px #686868 inset;color:#545454}.ui.inverted.secondary.basic.active.button,.ui.inverted.secondary.basic.buttons .active.button,.ui.inverted.secondary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #616161 inset;box-shadow:0 0 0 2px #616161 inset;color:#545454}.ui.inverted.secondary.basic.button:active,.ui.inverted.secondary.basic.buttons .button:active,.ui.inverted.secondary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #6e6e6e inset;box-shadow:0 0 0 2px #6e6e6e inset;color:#545454}.ui.tertiary.secondary.button,.ui.tertiary.secondary.buttons .button,.ui.tertiary.secondary.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#1b1c1d}.ui.tertiary.secondary.button:hover,.ui.tertiary.secondary.buttons .button:hover,.ui.tertiary.secondary.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #292929;box-shadow:inset 0 -.2em 0 #292929;color:#292929}.ui.tertiary.secondary.button:focus,.ui.tertiary.secondary.buttons .button:focus,.ui.tertiary.secondary.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #303030;box-shadow:inset 0 -.2em 0 #303030;color:#303030}.ui.tertiary.secondary.active.button,.ui.tertiary.secondary.button:active,.ui.tertiary.secondary.buttons .active.button,.ui.tertiary.secondary.buttons .button:active,.ui.tertiary.secondary.buttons .tertiary.active.button,.ui.tertiary.secondary.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #1f2933;box-shadow:inset 0 -.2em 0 #1f2933;color:#27292a}.ui.red.button,.ui.red.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.red.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.red.button:hover,.ui.red.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.red.button:focus,.ui.red.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.red.button:active,.ui.red.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.red.active.button,.ui.red.button .active.button:active,.ui.red.buttons .active.button,.ui.red.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.red.button,.ui.basic.red.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #db2828 inset;box-shadow:0 0 0 1px #db2828 inset;color:#db2828}.ui.basic.red.button:hover,.ui.basic.red.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #d01919 inset;box-shadow:0 0 0 1px #d01919 inset;color:#d01919}.ui.basic.red.button:focus,.ui.basic.red.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #ca1010 inset;box-shadow:0 0 0 1px #ca1010 inset;color:#d01919}.ui.basic.red.active.button,.ui.basic.red.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #d41515 inset;box-shadow:0 0 0 1px #d41515 inset;color:#b21e1e}.ui.basic.red.button:active,.ui.basic.red.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset;box-shadow:0 0 0 1px #b21e1e inset;color:#b21e1e}.ui.buttons:not(.vertical)>.basic.red.button:not(:first-child){margin-left:-1px}.ui.inverted.red.button,.ui.inverted.red.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff695e inset;box-shadow:0 0 0 2px #ff695e inset;color:#ff695e}.ui.inverted.red.button.active,.ui.inverted.red.button:active,.ui.inverted.red.button:focus,.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button.active,.ui.inverted.red.buttons .button:active,.ui.inverted.red.buttons .button:focus,.ui.inverted.red.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button:hover{background-color:#ff392b}.ui.inverted.red.button:focus,.ui.inverted.red.buttons .button:focus{background-color:#ff4335}.ui.inverted.red.active.button,.ui.inverted.red.buttons .active.button{background-color:#ff5144}.ui.inverted.red.button:active,.ui.inverted.red.buttons .button:active{background-color:#ff392b}.ui.inverted.red.basic.button,.ui.inverted.red.basic.buttons .button,.ui.inverted.red.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.red.basic.button:hover,.ui.inverted.red.basic.buttons .button:hover,.ui.inverted.red.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff392b inset;box-shadow:0 0 0 2px #ff392b inset;color:#ff695e}.ui.inverted.red.basic.button:focus,.ui.inverted.red.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff4335 inset;box-shadow:0 0 0 2px #ff4335 inset;color:#ff695e}.ui.inverted.red.basic.active.button,.ui.inverted.red.basic.buttons .active.button,.ui.inverted.red.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff5144 inset;box-shadow:0 0 0 2px #ff5144 inset;color:#ff695e}.ui.inverted.red.basic.button:active,.ui.inverted.red.basic.buttons .button:active,.ui.inverted.red.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff392b inset;box-shadow:0 0 0 2px #ff392b inset;color:#ff695e}.ui.tertiary.red.button,.ui.tertiary.red.buttons .button,.ui.tertiary.red.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#db2828}.ui.tertiary.red.button:hover,.ui.tertiary.red.buttons .button:hover,.ui.tertiary.red.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #b93131;box-shadow:inset 0 -.2em 0 #b93131;color:#b93131}.ui.tertiary.red.button:focus,.ui.tertiary.red.buttons .button:focus,.ui.tertiary.red.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #b52626;box-shadow:inset 0 -.2em 0 #b52626;color:#b52626}.ui.tertiary.red.active.button,.ui.tertiary.red.button:active,.ui.tertiary.red.buttons .active.button,.ui.tertiary.red.buttons .button:active,.ui.tertiary.red.buttons .tertiary.active.button,.ui.tertiary.red.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #ea0000;box-shadow:inset 0 -.2em 0 #ea0000;color:#d41515}.ui.orange.button,.ui.orange.buttons .button{background-color:#f2711c;color:#fff;text-shadow:none;background-image:none}.ui.orange.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.orange.button:hover,.ui.orange.buttons .button:hover{background-color:#f26202;color:#fff;text-shadow:none}.ui.orange.button:focus,.ui.orange.buttons .button:focus{background-color:#e55b00;color:#fff;text-shadow:none}.ui.orange.button:active,.ui.orange.buttons .button:active{background-color:#cf590c;color:#fff;text-shadow:none}.ui.orange.active.button,.ui.orange.button .active.button:active,.ui.orange.buttons .active.button,.ui.orange.buttons .active.button:active{background-color:#f56100;color:#fff;text-shadow:none}.ui.basic.orange.button,.ui.basic.orange.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #f2711c inset;box-shadow:0 0 0 1px #f2711c inset;color:#f2711c}.ui.basic.orange.button:hover,.ui.basic.orange.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #f26202 inset;box-shadow:0 0 0 1px #f26202 inset;color:#f26202}.ui.basic.orange.button:focus,.ui.basic.orange.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #e55b00 inset;box-shadow:0 0 0 1px #e55b00 inset;color:#f26202}.ui.basic.orange.active.button,.ui.basic.orange.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #f56100 inset;box-shadow:0 0 0 1px #f56100 inset;color:#cf590c}.ui.basic.orange.button:active,.ui.basic.orange.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cf590c inset;box-shadow:0 0 0 1px #cf590c inset;color:#cf590c}.ui.buttons:not(.vertical)>.basic.orange.button:not(:first-child){margin-left:-1px}.ui.inverted.orange.button,.ui.inverted.orange.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff851b inset;box-shadow:0 0 0 2px #ff851b inset;color:#ff851b}.ui.inverted.orange.button.active,.ui.inverted.orange.button:active,.ui.inverted.orange.button:focus,.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button.active,.ui.inverted.orange.buttons .button:active,.ui.inverted.orange.buttons .button:focus,.ui.inverted.orange.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button:hover{background-color:#e76b00}.ui.inverted.orange.button:focus,.ui.inverted.orange.buttons .button:focus{background-color:#f17000}.ui.inverted.orange.active.button,.ui.inverted.orange.buttons .active.button{background-color:#ff7701}.ui.inverted.orange.button:active,.ui.inverted.orange.buttons .button:active{background-color:#e76b00}.ui.inverted.orange.basic.button,.ui.inverted.orange.basic.buttons .button,.ui.inverted.orange.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.orange.basic.button:hover,.ui.inverted.orange.basic.buttons .button:hover,.ui.inverted.orange.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #e76b00 inset;box-shadow:0 0 0 2px #e76b00 inset;color:#ff851b}.ui.inverted.orange.basic.button:focus,.ui.inverted.orange.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f17000 inset;box-shadow:0 0 0 2px #f17000 inset;color:#ff851b}.ui.inverted.orange.basic.active.button,.ui.inverted.orange.basic.buttons .active.button,.ui.inverted.orange.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff7701 inset;box-shadow:0 0 0 2px #ff7701 inset;color:#ff851b}.ui.inverted.orange.basic.button:active,.ui.inverted.orange.basic.buttons .button:active,.ui.inverted.orange.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #e76b00 inset;box-shadow:0 0 0 2px #e76b00 inset;color:#ff851b}.ui.tertiary.orange.button,.ui.tertiary.orange.buttons .button,.ui.tertiary.orange.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#f2711c}.ui.tertiary.orange.button:hover,.ui.tertiary.orange.buttons .button:hover,.ui.tertiary.orange.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #da671b;box-shadow:inset 0 -.2em 0 #da671b;color:#da671b}.ui.tertiary.orange.button:focus,.ui.tertiary.orange.buttons .button:focus,.ui.tertiary.orange.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #ce6017;box-shadow:inset 0 -.2em 0 #ce6017;color:#ce6017}.ui.tertiary.orange.active.button,.ui.tertiary.orange.button:active,.ui.tertiary.orange.buttons .active.button,.ui.tertiary.orange.buttons .button:active,.ui.tertiary.orange.buttons .tertiary.active.button,.ui.tertiary.orange.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #f56100;box-shadow:inset 0 -.2em 0 #f56100;color:#f56100}.ui.yellow.button,.ui.yellow.buttons .button{background-color:#fbbd08;color:#fff;text-shadow:none;background-image:none}.ui.yellow.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.yellow.button:hover,.ui.yellow.buttons .button:hover{background-color:#eaae00;color:#fff;text-shadow:none}.ui.yellow.button:focus,.ui.yellow.buttons .button:focus{background-color:#daa300;color:#fff;text-shadow:none}.ui.yellow.button:active,.ui.yellow.buttons .button:active{background-color:#cd9903;color:#fff;text-shadow:none}.ui.yellow.active.button,.ui.yellow.button .active.button:active,.ui.yellow.buttons .active.button,.ui.yellow.buttons .active.button:active{background-color:#eaae00;color:#fff;text-shadow:none}.ui.basic.yellow.button,.ui.basic.yellow.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #fbbd08 inset;box-shadow:0 0 0 1px #fbbd08 inset;color:#fbbd08}.ui.basic.yellow.button:hover,.ui.basic.yellow.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #eaae00 inset;box-shadow:0 0 0 1px #eaae00 inset;color:#eaae00}.ui.basic.yellow.button:focus,.ui.basic.yellow.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #daa300 inset;box-shadow:0 0 0 1px #daa300 inset;color:#eaae00}.ui.basic.yellow.active.button,.ui.basic.yellow.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #eaae00 inset;box-shadow:0 0 0 1px #eaae00 inset;color:#cd9903}.ui.basic.yellow.button:active,.ui.basic.yellow.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cd9903 inset;box-shadow:0 0 0 1px #cd9903 inset;color:#cd9903}.ui.buttons:not(.vertical)>.basic.yellow.button:not(:first-child){margin-left:-1px}.ui.inverted.yellow.button,.ui.inverted.yellow.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ffe21f inset;box-shadow:0 0 0 2px #ffe21f inset;color:#ffe21f}.ui.inverted.yellow.button.active,.ui.inverted.yellow.button:active,.ui.inverted.yellow.button:focus,.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button.active,.ui.inverted.yellow.buttons .button:active,.ui.inverted.yellow.buttons .button:focus,.ui.inverted.yellow.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6)}.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button:hover{background-color:#ebcd00}.ui.inverted.yellow.button:focus,.ui.inverted.yellow.buttons .button:focus{background-color:#f5d500}.ui.inverted.yellow.active.button,.ui.inverted.yellow.buttons .active.button{background-color:#ffdf05}.ui.inverted.yellow.button:active,.ui.inverted.yellow.buttons .button:active{background-color:#ebcd00}.ui.inverted.yellow.basic.button,.ui.inverted.yellow.basic.buttons .button,.ui.inverted.yellow.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.yellow.basic.button:hover,.ui.inverted.yellow.basic.buttons .button:hover,.ui.inverted.yellow.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ebcd00 inset;box-shadow:0 0 0 2px #ebcd00 inset;color:#ffe21f}.ui.inverted.yellow.basic.button:focus,.ui.inverted.yellow.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f5d500 inset;box-shadow:0 0 0 2px #f5d500 inset;color:#ffe21f}.ui.inverted.yellow.basic.active.button,.ui.inverted.yellow.basic.buttons .active.button,.ui.inverted.yellow.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ffdf05 inset;box-shadow:0 0 0 2px #ffdf05 inset;color:#ffe21f}.ui.inverted.yellow.basic.button:active,.ui.inverted.yellow.basic.buttons .button:active,.ui.inverted.yellow.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ebcd00 inset;box-shadow:0 0 0 2px #ebcd00 inset;color:#ffe21f}.ui.tertiary.yellow.button,.ui.tertiary.yellow.buttons .button,.ui.tertiary.yellow.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#fbbd08}.ui.tertiary.yellow.button:hover,.ui.tertiary.yellow.buttons .button:hover,.ui.tertiary.yellow.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #d2a217;box-shadow:inset 0 -.2em 0 #d2a217;color:#d2a217}.ui.tertiary.yellow.button:focus,.ui.tertiary.yellow.buttons .button:focus,.ui.tertiary.yellow.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #c49816;box-shadow:inset 0 -.2em 0 #c49816;color:#c49816}.ui.tertiary.yellow.active.button,.ui.tertiary.yellow.button:active,.ui.tertiary.yellow.buttons .active.button,.ui.tertiary.yellow.buttons .button:active,.ui.tertiary.yellow.buttons .tertiary.active.button,.ui.tertiary.yellow.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #eaae00;box-shadow:inset 0 -.2em 0 #eaae00;color:#eaae00}.ui.olive.button,.ui.olive.buttons .button{background-color:#b5cc18;color:#fff;text-shadow:none;background-image:none}.ui.olive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.olive.button:hover,.ui.olive.buttons .button:hover{background-color:#a7bd0d;color:#fff;text-shadow:none}.ui.olive.button:focus,.ui.olive.buttons .button:focus{background-color:#a0b605;color:#fff;text-shadow:none}.ui.olive.button:active,.ui.olive.buttons .button:active{background-color:#8d9e13;color:#fff;text-shadow:none}.ui.olive.active.button,.ui.olive.button .active.button:active,.ui.olive.buttons .active.button,.ui.olive.buttons .active.button:active{background-color:#aac109;color:#fff;text-shadow:none}.ui.basic.olive.button,.ui.basic.olive.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #b5cc18 inset;box-shadow:0 0 0 1px #b5cc18 inset;color:#b5cc18}.ui.basic.olive.button:hover,.ui.basic.olive.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #a7bd0d inset;box-shadow:0 0 0 1px #a7bd0d inset;color:#a7bd0d}.ui.basic.olive.button:focus,.ui.basic.olive.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #a0b605 inset;box-shadow:0 0 0 1px #a0b605 inset;color:#a7bd0d}.ui.basic.olive.active.button,.ui.basic.olive.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #aac109 inset;box-shadow:0 0 0 1px #aac109 inset;color:#8d9e13}.ui.basic.olive.button:active,.ui.basic.olive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #8d9e13 inset;box-shadow:0 0 0 1px #8d9e13 inset;color:#8d9e13}.ui.buttons:not(.vertical)>.basic.olive.button:not(:first-child){margin-left:-1px}.ui.inverted.olive.button,.ui.inverted.olive.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d9e778 inset;box-shadow:0 0 0 2px #d9e778 inset;color:#d9e778}.ui.inverted.olive.button.active,.ui.inverted.olive.button:active,.ui.inverted.olive.button:focus,.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button.active,.ui.inverted.olive.buttons .button:active,.ui.inverted.olive.buttons .button:focus,.ui.inverted.olive.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6)}.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button:hover{background-color:#d2e745}.ui.inverted.olive.button:focus,.ui.inverted.olive.buttons .button:focus{background-color:#daef47}.ui.inverted.olive.active.button,.ui.inverted.olive.buttons .active.button{background-color:#daed59}.ui.inverted.olive.button:active,.ui.inverted.olive.buttons .button:active{background-color:#cddf4d}.ui.inverted.olive.basic.button,.ui.inverted.olive.basic.buttons .button,.ui.inverted.olive.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.olive.basic.button:hover,.ui.inverted.olive.basic.buttons .button:hover,.ui.inverted.olive.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #d2e745 inset;box-shadow:0 0 0 2px #d2e745 inset;color:#d9e778}.ui.inverted.olive.basic.button:focus,.ui.inverted.olive.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #daef47 inset;box-shadow:0 0 0 2px #daef47 inset;color:#d9e778}.ui.inverted.olive.basic.active.button,.ui.inverted.olive.basic.buttons .active.button,.ui.inverted.olive.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #daed59 inset;box-shadow:0 0 0 2px #daed59 inset;color:#d9e778}.ui.inverted.olive.basic.button:active,.ui.inverted.olive.basic.buttons .button:active,.ui.inverted.olive.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cddf4d inset;box-shadow:0 0 0 2px #cddf4d inset;color:#d9e778}.ui.tertiary.olive.button,.ui.tertiary.olive.buttons .button,.ui.tertiary.olive.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#b5cc18}.ui.tertiary.olive.button:hover,.ui.tertiary.olive.buttons .button:hover,.ui.tertiary.olive.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #98a922;box-shadow:inset 0 -.2em 0 #98a922;color:#98a922}.ui.tertiary.olive.button:focus,.ui.tertiary.olive.buttons .button:focus,.ui.tertiary.olive.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #92a418;box-shadow:inset 0 -.2em 0 #92a418;color:#92a418}.ui.tertiary.olive.active.button,.ui.tertiary.olive.button:active,.ui.tertiary.olive.buttons .active.button,.ui.tertiary.olive.buttons .button:active,.ui.tertiary.olive.buttons .tertiary.active.button,.ui.tertiary.olive.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #b1cb00;box-shadow:inset 0 -.2em 0 #b1cb00;color:#aac109}.ui.green.button,.ui.green.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.green.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.green.button:hover,.ui.green.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.green.button:focus,.ui.green.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.green.button:active,.ui.green.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.green.active.button,.ui.green.button .active.button:active,.ui.green.buttons .active.button,.ui.green.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.green.button,.ui.basic.green.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #21ba45 inset;box-shadow:0 0 0 1px #21ba45 inset;color:#21ba45}.ui.basic.green.button:hover,.ui.basic.green.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #16ab39 inset;box-shadow:0 0 0 1px #16ab39 inset;color:#16ab39}.ui.basic.green.button:focus,.ui.basic.green.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #0ea432 inset;box-shadow:0 0 0 1px #0ea432 inset;color:#16ab39}.ui.basic.green.active.button,.ui.basic.green.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #13ae38 inset;box-shadow:0 0 0 1px #13ae38 inset;color:#198f35}.ui.basic.green.button:active,.ui.basic.green.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset;box-shadow:0 0 0 1px #198f35 inset;color:#198f35}.ui.buttons:not(.vertical)>.basic.green.button:not(:first-child){margin-left:-1px}.ui.inverted.green.button,.ui.inverted.green.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #2ecc40 inset;box-shadow:0 0 0 2px #2ecc40 inset;color:#2ecc40}.ui.inverted.green.button.active,.ui.inverted.green.button:active,.ui.inverted.green.button:focus,.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button.active,.ui.inverted.green.buttons .button:active,.ui.inverted.green.buttons .button:focus,.ui.inverted.green.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button:hover{background-color:#1ea92e}.ui.inverted.green.button:focus,.ui.inverted.green.buttons .button:focus{background-color:#19b82b}.ui.inverted.green.active.button,.ui.inverted.green.buttons .active.button{background-color:#1fc231}.ui.inverted.green.button:active,.ui.inverted.green.buttons .button:active{background-color:#25a233}.ui.inverted.green.basic.button,.ui.inverted.green.basic.buttons .button,.ui.inverted.green.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.green.basic.button:hover,.ui.inverted.green.basic.buttons .button:hover,.ui.inverted.green.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #1ea92e inset;box-shadow:0 0 0 2px #1ea92e inset;color:#2ecc40}.ui.inverted.green.basic.button:focus,.ui.inverted.green.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #19b82b inset;box-shadow:0 0 0 2px #19b82b inset;color:#2ecc40}.ui.inverted.green.basic.active.button,.ui.inverted.green.basic.buttons .active.button,.ui.inverted.green.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #1fc231 inset;box-shadow:0 0 0 2px #1fc231 inset;color:#2ecc40}.ui.inverted.green.basic.button:active,.ui.inverted.green.basic.buttons .button:active,.ui.inverted.green.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #25a233 inset;box-shadow:0 0 0 2px #25a233 inset;color:#2ecc40}.ui.tertiary.green.button,.ui.tertiary.green.buttons .button,.ui.tertiary.green.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#21ba45}.ui.tertiary.green.button:hover,.ui.tertiary.green.buttons .button:hover,.ui.tertiary.green.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #2a9844;box-shadow:inset 0 -.2em 0 #2a9844;color:#2a9844}.ui.tertiary.green.button:focus,.ui.tertiary.green.buttons .button:focus,.ui.tertiary.green.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #20923b;box-shadow:inset 0 -.2em 0 #20923b;color:#20923b}.ui.tertiary.green.active.button,.ui.tertiary.green.button:active,.ui.tertiary.green.buttons .active.button,.ui.tertiary.green.buttons .button:active,.ui.tertiary.green.buttons .tertiary.active.button,.ui.tertiary.green.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #00c22e;box-shadow:inset 0 -.2em 0 #00c22e;color:#13ae38}.ui.teal.button,.ui.teal.buttons .button{background-color:#00b5ad;color:#fff;text-shadow:none;background-image:none}.ui.teal.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.teal.button:hover,.ui.teal.buttons .button:hover{background-color:#009c95;color:#fff;text-shadow:none}.ui.teal.button:focus,.ui.teal.buttons .button:focus{background-color:#008c86;color:#fff;text-shadow:none}.ui.teal.button:active,.ui.teal.buttons .button:active{background-color:#00827c;color:#fff;text-shadow:none}.ui.teal.active.button,.ui.teal.button .active.button:active,.ui.teal.buttons .active.button,.ui.teal.buttons .active.button:active{background-color:#009c95;color:#fff;text-shadow:none}.ui.basic.teal.button,.ui.basic.teal.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #00b5ad inset;box-shadow:0 0 0 1px #00b5ad inset;color:#00b5ad}.ui.basic.teal.button:hover,.ui.basic.teal.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #009c95 inset;box-shadow:0 0 0 1px #009c95 inset;color:#009c95}.ui.basic.teal.button:focus,.ui.basic.teal.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #008c86 inset;box-shadow:0 0 0 1px #008c86 inset;color:#009c95}.ui.basic.teal.active.button,.ui.basic.teal.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #009c95 inset;box-shadow:0 0 0 1px #009c95 inset;color:#00827c}.ui.basic.teal.button:active,.ui.basic.teal.buttons .button:active{-webkit-box-shadow:0 0 0 1px #00827c inset;box-shadow:0 0 0 1px #00827c inset;color:#00827c}.ui.buttons:not(.vertical)>.basic.teal.button:not(:first-child){margin-left:-1px}.ui.inverted.teal.button,.ui.inverted.teal.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #6dffff inset;box-shadow:0 0 0 2px #6dffff inset;color:#6dffff}.ui.inverted.teal.button.active,.ui.inverted.teal.button:active,.ui.inverted.teal.button:focus,.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button.active,.ui.inverted.teal.buttons .button:active,.ui.inverted.teal.buttons .button:focus,.ui.inverted.teal.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6)}.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button:hover{background-color:#3affff}.ui.inverted.teal.button:focus,.ui.inverted.teal.buttons .button:focus{background-color:#4ff}.ui.inverted.teal.active.button,.ui.inverted.teal.buttons .active.button{background-color:#54ffff}.ui.inverted.teal.button:active,.ui.inverted.teal.buttons .button:active{background-color:#3affff}.ui.inverted.teal.basic.button,.ui.inverted.teal.basic.buttons .button,.ui.inverted.teal.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.teal.basic.button:hover,.ui.inverted.teal.basic.buttons .button:hover,.ui.inverted.teal.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #3affff inset;box-shadow:0 0 0 2px #3affff inset;color:#6dffff}.ui.inverted.teal.basic.button:focus,.ui.inverted.teal.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #4ff inset;box-shadow:0 0 0 2px #4ff inset;color:#6dffff}.ui.inverted.teal.basic.active.button,.ui.inverted.teal.basic.buttons .active.button,.ui.inverted.teal.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #54ffff inset;box-shadow:0 0 0 2px #54ffff inset;color:#6dffff}.ui.inverted.teal.basic.button:active,.ui.inverted.teal.basic.buttons .button:active,.ui.inverted.teal.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #3affff inset;box-shadow:0 0 0 2px #3affff inset;color:#6dffff}.ui.tertiary.teal.button,.ui.tertiary.teal.buttons .button,.ui.tertiary.teal.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#00b5ad}.ui.tertiary.teal.button:hover,.ui.tertiary.teal.buttons .button:hover,.ui.tertiary.teal.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #108c86;box-shadow:inset 0 -.2em 0 #108c86;color:#108c86}.ui.tertiary.teal.button:focus,.ui.tertiary.teal.buttons .button:focus,.ui.tertiary.teal.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #0e7e79;box-shadow:inset 0 -.2em 0 #0e7e79;color:#0e7e79}.ui.tertiary.teal.active.button,.ui.tertiary.teal.button:active,.ui.tertiary.teal.buttons .active.button,.ui.tertiary.teal.buttons .button:active,.ui.tertiary.teal.buttons .tertiary.active.button,.ui.tertiary.teal.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #009c95;box-shadow:inset 0 -.2em 0 #009c95;color:#009c95}.ui.blue.button,.ui.blue.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.blue.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.blue.button:hover,.ui.blue.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.blue.button:focus,.ui.blue.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.blue.button:active,.ui.blue.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.blue.active.button,.ui.blue.button .active.button:active,.ui.blue.buttons .active.button,.ui.blue.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.blue.button,.ui.basic.blue.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #2185d0 inset;box-shadow:0 0 0 1px #2185d0 inset;color:#2185d0}.ui.basic.blue.button:hover,.ui.basic.blue.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #1678c2 inset;box-shadow:0 0 0 1px #1678c2 inset;color:#1678c2}.ui.basic.blue.button:focus,.ui.basic.blue.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #0d71bb inset;box-shadow:0 0 0 1px #0d71bb inset;color:#1678c2}.ui.basic.blue.active.button,.ui.basic.blue.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #1279c6 inset;box-shadow:0 0 0 1px #1279c6 inset;color:#1a69a4}.ui.basic.blue.button:active,.ui.basic.blue.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset;box-shadow:0 0 0 1px #1a69a4 inset;color:#1a69a4}.ui.buttons:not(.vertical)>.basic.blue.button:not(:first-child){margin-left:-1px}.ui.inverted.blue.button,.ui.inverted.blue.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset;box-shadow:0 0 0 2px #54c8ff inset;color:#54c8ff}.ui.inverted.blue.button.active,.ui.inverted.blue.button:active,.ui.inverted.blue.button:focus,.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button.active,.ui.inverted.blue.buttons .button:active,.ui.inverted.blue.buttons .button:focus,.ui.inverted.blue.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button:hover{background-color:#21b8ff}.ui.inverted.blue.button:focus,.ui.inverted.blue.buttons .button:focus{background-color:#2bbbff}.ui.inverted.blue.active.button,.ui.inverted.blue.buttons .active.button{background-color:#3ac0ff}.ui.inverted.blue.button:active,.ui.inverted.blue.buttons .button:active{background-color:#21b8ff}.ui.inverted.blue.basic.button,.ui.inverted.blue.basic.buttons .button,.ui.inverted.blue.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.blue.basic.button:hover,.ui.inverted.blue.basic.buttons .button:hover,.ui.inverted.blue.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #21b8ff inset;box-shadow:0 0 0 2px #21b8ff inset;color:#54c8ff}.ui.inverted.blue.basic.button:focus,.ui.inverted.blue.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset;box-shadow:0 0 0 2px #2bbbff inset;color:#54c8ff}.ui.inverted.blue.basic.active.button,.ui.inverted.blue.basic.buttons .active.button,.ui.inverted.blue.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset;box-shadow:0 0 0 2px #3ac0ff inset;color:#54c8ff}.ui.inverted.blue.basic.button:active,.ui.inverted.blue.basic.buttons .button:active,.ui.inverted.blue.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset;box-shadow:0 0 0 2px #21b8ff inset;color:#54c8ff}.ui.tertiary.blue.button,.ui.tertiary.blue.buttons .button,.ui.tertiary.blue.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#2185d0}.ui.tertiary.blue.button:hover,.ui.tertiary.blue.buttons .button:hover,.ui.tertiary.blue.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #2b75ac;box-shadow:inset 0 -.2em 0 #2b75ac;color:#2b75ac}.ui.tertiary.blue.button:focus,.ui.tertiary.blue.buttons .button:focus,.ui.tertiary.blue.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #216ea7;box-shadow:inset 0 -.2em 0 #216ea7;color:#216ea7}.ui.tertiary.blue.active.button,.ui.tertiary.blue.button:active,.ui.tertiary.blue.buttons .active.button,.ui.tertiary.blue.buttons .button:active,.ui.tertiary.blue.buttons .tertiary.active.button,.ui.tertiary.blue.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #007bd8;box-shadow:inset 0 -.2em 0 #007bd8;color:#1279c6}.ui.violet.button,.ui.violet.buttons .button{background-color:#6435c9;color:#fff;text-shadow:none;background-image:none}.ui.violet.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.violet.button:hover,.ui.violet.buttons .button:hover{background-color:#5829bb;color:#fff;text-shadow:none}.ui.violet.button:focus,.ui.violet.buttons .button:focus{background-color:#4f20b5;color:#fff;text-shadow:none}.ui.violet.button:active,.ui.violet.buttons .button:active{background-color:#502aa1;color:#fff;text-shadow:none}.ui.violet.active.button,.ui.violet.button .active.button:active,.ui.violet.buttons .active.button,.ui.violet.buttons .active.button:active{background-color:#5626bf;color:#fff;text-shadow:none}.ui.basic.violet.button,.ui.basic.violet.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #6435c9 inset;box-shadow:0 0 0 1px #6435c9 inset;color:#6435c9}.ui.basic.violet.button:hover,.ui.basic.violet.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #5829bb inset;box-shadow:0 0 0 1px #5829bb inset;color:#5829bb}.ui.basic.violet.button:focus,.ui.basic.violet.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #4f20b5 inset;box-shadow:0 0 0 1px #4f20b5 inset;color:#5829bb}.ui.basic.violet.active.button,.ui.basic.violet.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #5626bf inset;box-shadow:0 0 0 1px #5626bf inset;color:#502aa1}.ui.basic.violet.button:active,.ui.basic.violet.buttons .button:active{-webkit-box-shadow:0 0 0 1px #502aa1 inset;box-shadow:0 0 0 1px #502aa1 inset;color:#502aa1}.ui.buttons:not(.vertical)>.basic.violet.button:not(:first-child){margin-left:-1px}.ui.inverted.violet.button,.ui.inverted.violet.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #a291fb inset;box-shadow:0 0 0 2px #a291fb inset;color:#a291fb}.ui.inverted.violet.button.active,.ui.inverted.violet.button:active,.ui.inverted.violet.button:focus,.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button.active,.ui.inverted.violet.buttons .button:active,.ui.inverted.violet.buttons .button:focus,.ui.inverted.violet.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button:hover{background-color:#745aff}.ui.inverted.violet.button:focus,.ui.inverted.violet.buttons .button:focus{background-color:#7d64ff}.ui.inverted.violet.active.button,.ui.inverted.violet.buttons .active.button{background-color:#8a73ff}.ui.inverted.violet.button:active,.ui.inverted.violet.buttons .button:active{background-color:#7860f9}.ui.inverted.violet.basic.button,.ui.inverted.violet.basic.buttons .button,.ui.inverted.violet.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.violet.basic.button:hover,.ui.inverted.violet.basic.buttons .button:hover,.ui.inverted.violet.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #745aff inset;box-shadow:0 0 0 2px #745aff inset;color:#a291fb}.ui.inverted.violet.basic.button:focus,.ui.inverted.violet.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #7d64ff inset;box-shadow:0 0 0 2px #7d64ff inset;color:#a291fb}.ui.inverted.violet.basic.active.button,.ui.inverted.violet.basic.buttons .active.button,.ui.inverted.violet.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #8a73ff inset;box-shadow:0 0 0 2px #8a73ff inset;color:#a291fb}.ui.inverted.violet.basic.button:active,.ui.inverted.violet.basic.buttons .button:active,.ui.inverted.violet.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #7860f9 inset;box-shadow:0 0 0 2px #7860f9 inset;color:#a291fb}.ui.tertiary.violet.button,.ui.tertiary.violet.buttons .button,.ui.tertiary.violet.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#6435c9}.ui.tertiary.violet.button:hover,.ui.tertiary.violet.buttons .button:hover,.ui.tertiary.violet.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #6040a5;box-shadow:inset 0 -.2em 0 #6040a5;color:#6040a5}.ui.tertiary.violet.button:focus,.ui.tertiary.violet.buttons .button:focus,.ui.tertiary.violet.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #5735a0;box-shadow:inset 0 -.2em 0 #5735a0;color:#5735a0}.ui.tertiary.violet.active.button,.ui.tertiary.violet.button:active,.ui.tertiary.violet.buttons .active.button,.ui.tertiary.violet.buttons .button:active,.ui.tertiary.violet.buttons .tertiary.active.button,.ui.tertiary.violet.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #4e0fd6;box-shadow:inset 0 -.2em 0 #4e0fd6;color:#5626bf}.ui.purple.button,.ui.purple.buttons .button{background-color:#a333c8;color:#fff;text-shadow:none;background-image:none}.ui.purple.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.purple.button:hover,.ui.purple.buttons .button:hover{background-color:#9627ba;color:#fff;text-shadow:none}.ui.purple.button:focus,.ui.purple.buttons .button:focus{background-color:#8f1eb4;color:#fff;text-shadow:none}.ui.purple.button:active,.ui.purple.buttons .button:active{background-color:#82299f;color:#fff;text-shadow:none}.ui.purple.active.button,.ui.purple.button .active.button:active,.ui.purple.buttons .active.button,.ui.purple.buttons .active.button:active{background-color:#9724be;color:#fff;text-shadow:none}.ui.basic.purple.button,.ui.basic.purple.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #a333c8 inset;box-shadow:0 0 0 1px #a333c8 inset;color:#a333c8}.ui.basic.purple.button:hover,.ui.basic.purple.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #9627ba inset;box-shadow:0 0 0 1px #9627ba inset;color:#9627ba}.ui.basic.purple.button:focus,.ui.basic.purple.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #8f1eb4 inset;box-shadow:0 0 0 1px #8f1eb4 inset;color:#9627ba}.ui.basic.purple.active.button,.ui.basic.purple.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #9724be inset;box-shadow:0 0 0 1px #9724be inset;color:#82299f}.ui.basic.purple.button:active,.ui.basic.purple.buttons .button:active{-webkit-box-shadow:0 0 0 1px #82299f inset;box-shadow:0 0 0 1px #82299f inset;color:#82299f}.ui.buttons:not(.vertical)>.basic.purple.button:not(:first-child){margin-left:-1px}.ui.inverted.purple.button,.ui.inverted.purple.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #dc73ff inset;box-shadow:0 0 0 2px #dc73ff inset;color:#dc73ff}.ui.inverted.purple.button.active,.ui.inverted.purple.button:active,.ui.inverted.purple.button:focus,.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button.active,.ui.inverted.purple.buttons .button:active,.ui.inverted.purple.buttons .button:focus,.ui.inverted.purple.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button:hover{background-color:#cf40ff}.ui.inverted.purple.button:focus,.ui.inverted.purple.buttons .button:focus{background-color:#d24aff}.ui.inverted.purple.active.button,.ui.inverted.purple.buttons .active.button{background-color:#d65aff}.ui.inverted.purple.button:active,.ui.inverted.purple.buttons .button:active{background-color:#cf40ff}.ui.inverted.purple.basic.button,.ui.inverted.purple.basic.buttons .button,.ui.inverted.purple.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.purple.basic.button:hover,.ui.inverted.purple.basic.buttons .button:hover,.ui.inverted.purple.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #cf40ff inset;box-shadow:0 0 0 2px #cf40ff inset;color:#dc73ff}.ui.inverted.purple.basic.button:focus,.ui.inverted.purple.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #d24aff inset;box-shadow:0 0 0 2px #d24aff inset;color:#dc73ff}.ui.inverted.purple.basic.active.button,.ui.inverted.purple.basic.buttons .active.button,.ui.inverted.purple.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #d65aff inset;box-shadow:0 0 0 2px #d65aff inset;color:#dc73ff}.ui.inverted.purple.basic.button:active,.ui.inverted.purple.basic.buttons .button:active,.ui.inverted.purple.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cf40ff inset;box-shadow:0 0 0 2px #cf40ff inset;color:#dc73ff}.ui.tertiary.purple.button,.ui.tertiary.purple.buttons .button,.ui.tertiary.purple.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#a333c8}.ui.tertiary.purple.button:hover,.ui.tertiary.purple.buttons .button:hover,.ui.tertiary.purple.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #8a3ea4;box-shadow:inset 0 -.2em 0 #8a3ea4;color:#8a3ea4}.ui.tertiary.purple.button:focus,.ui.tertiary.purple.buttons .button:focus,.ui.tertiary.purple.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #84339f;box-shadow:inset 0 -.2em 0 #84339f;color:#84339f}.ui.tertiary.purple.active.button,.ui.tertiary.purple.button:active,.ui.tertiary.purple.buttons .active.button,.ui.tertiary.purple.buttons .button:active,.ui.tertiary.purple.buttons .tertiary.active.button,.ui.tertiary.purple.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #a30dd4;box-shadow:inset 0 -.2em 0 #a30dd4;color:#9724be}.ui.pink.button,.ui.pink.buttons .button{background-color:#e03997;color:#fff;text-shadow:none;background-image:none}.ui.pink.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pink.button:hover,.ui.pink.buttons .button:hover{background-color:#e61a8d;color:#fff;text-shadow:none}.ui.pink.button:focus,.ui.pink.buttons .button:focus{background-color:#e10f85;color:#fff;text-shadow:none}.ui.pink.button:active,.ui.pink.buttons .button:active{background-color:#c71f7e;color:#fff;text-shadow:none}.ui.pink.active.button,.ui.pink.button .active.button:active,.ui.pink.buttons .active.button,.ui.pink.buttons .active.button:active{background-color:#ea158d;color:#fff;text-shadow:none}.ui.basic.pink.button,.ui.basic.pink.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #e03997 inset;box-shadow:0 0 0 1px #e03997 inset;color:#e03997}.ui.basic.pink.button:hover,.ui.basic.pink.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #e61a8d inset;box-shadow:0 0 0 1px #e61a8d inset;color:#e61a8d}.ui.basic.pink.button:focus,.ui.basic.pink.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #e10f85 inset;box-shadow:0 0 0 1px #e10f85 inset;color:#e61a8d}.ui.basic.pink.active.button,.ui.basic.pink.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #ea158d inset;box-shadow:0 0 0 1px #ea158d inset;color:#c71f7e}.ui.basic.pink.button:active,.ui.basic.pink.buttons .button:active{-webkit-box-shadow:0 0 0 1px #c71f7e inset;box-shadow:0 0 0 1px #c71f7e inset;color:#c71f7e}.ui.buttons:not(.vertical)>.basic.pink.button:not(:first-child){margin-left:-1px}.ui.inverted.pink.button,.ui.inverted.pink.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff8edf inset;box-shadow:0 0 0 2px #ff8edf inset;color:#ff8edf}.ui.inverted.pink.button.active,.ui.inverted.pink.button:active,.ui.inverted.pink.button:focus,.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button.active,.ui.inverted.pink.buttons .button:active,.ui.inverted.pink.buttons .button:focus,.ui.inverted.pink.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button:hover{background-color:#ff5bd1}.ui.inverted.pink.button:focus,.ui.inverted.pink.buttons .button:focus{background-color:#ff65d3}.ui.inverted.pink.active.button,.ui.inverted.pink.buttons .active.button{background-color:#ff74d8}.ui.inverted.pink.button:active,.ui.inverted.pink.buttons .button:active{background-color:#ff5bd1}.ui.inverted.pink.basic.button,.ui.inverted.pink.basic.buttons .button,.ui.inverted.pink.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.pink.basic.button:hover,.ui.inverted.pink.basic.buttons .button:hover,.ui.inverted.pink.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff5bd1 inset;box-shadow:0 0 0 2px #ff5bd1 inset;color:#ff8edf}.ui.inverted.pink.basic.button:focus,.ui.inverted.pink.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff65d3 inset;box-shadow:0 0 0 2px #ff65d3 inset;color:#ff8edf}.ui.inverted.pink.basic.active.button,.ui.inverted.pink.basic.buttons .active.button,.ui.inverted.pink.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff74d8 inset;box-shadow:0 0 0 2px #ff74d8 inset;color:#ff8edf}.ui.inverted.pink.basic.button:active,.ui.inverted.pink.basic.buttons .button:active,.ui.inverted.pink.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff5bd1 inset;box-shadow:0 0 0 2px #ff5bd1 inset;color:#ff8edf}.ui.tertiary.pink.button,.ui.tertiary.pink.buttons .button,.ui.tertiary.pink.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#e03997}.ui.tertiary.pink.button:hover,.ui.tertiary.pink.buttons .button:hover,.ui.tertiary.pink.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #cc3389;box-shadow:inset 0 -.2em 0 #cc3389;color:#cc3389}.ui.tertiary.pink.button:focus,.ui.tertiary.pink.buttons .button:focus,.ui.tertiary.pink.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #c92782;box-shadow:inset 0 -.2em 0 #c92782;color:#c92782}.ui.tertiary.pink.active.button,.ui.tertiary.pink.button:active,.ui.tertiary.pink.buttons .active.button,.ui.tertiary.pink.buttons .button:active,.ui.tertiary.pink.buttons .tertiary.active.button,.ui.tertiary.pink.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #ff0090;box-shadow:inset 0 -.2em 0 #ff0090;color:#ea158d}.ui.brown.button,.ui.brown.buttons .button{background-color:#a5673f;color:#fff;text-shadow:none;background-image:none}.ui.brown.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.brown.button:hover,.ui.brown.buttons .button:hover{background-color:#975b33;color:#fff;text-shadow:none}.ui.brown.button:focus,.ui.brown.buttons .button:focus{background-color:#90532b;color:#fff;text-shadow:none}.ui.brown.button:active,.ui.brown.buttons .button:active{background-color:#805031;color:#fff;text-shadow:none}.ui.brown.active.button,.ui.brown.button .active.button:active,.ui.brown.buttons .active.button,.ui.brown.buttons .active.button:active{background-color:#995a31;color:#fff;text-shadow:none}.ui.basic.brown.button,.ui.basic.brown.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #a5673f inset;box-shadow:0 0 0 1px #a5673f inset;color:#a5673f}.ui.basic.brown.button:hover,.ui.basic.brown.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #975b33 inset;box-shadow:0 0 0 1px #975b33 inset;color:#975b33}.ui.basic.brown.button:focus,.ui.basic.brown.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #90532b inset;box-shadow:0 0 0 1px #90532b inset;color:#975b33}.ui.basic.brown.active.button,.ui.basic.brown.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #995a31 inset;box-shadow:0 0 0 1px #995a31 inset;color:#805031}.ui.basic.brown.button:active,.ui.basic.brown.buttons .button:active{-webkit-box-shadow:0 0 0 1px #805031 inset;box-shadow:0 0 0 1px #805031 inset;color:#805031}.ui.buttons:not(.vertical)>.basic.brown.button:not(:first-child){margin-left:-1px}.ui.inverted.brown.button,.ui.inverted.brown.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d67c1c inset;box-shadow:0 0 0 2px #d67c1c inset;color:#d67c1c}.ui.inverted.brown.button.active,.ui.inverted.brown.button:active,.ui.inverted.brown.button:focus,.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button.active,.ui.inverted.brown.buttons .button:active,.ui.inverted.brown.buttons .button:focus,.ui.inverted.brown.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button:hover{background-color:#b0620f}.ui.inverted.brown.button:focus,.ui.inverted.brown.buttons .button:focus{background-color:#c16808}.ui.inverted.brown.active.button,.ui.inverted.brown.buttons .active.button{background-color:#cc6f0d}.ui.inverted.brown.button:active,.ui.inverted.brown.buttons .button:active{background-color:#a96216}.ui.inverted.brown.basic.button,.ui.inverted.brown.basic.buttons .button,.ui.inverted.brown.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.brown.basic.button:hover,.ui.inverted.brown.basic.buttons .button:hover,.ui.inverted.brown.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #b0620f inset;box-shadow:0 0 0 2px #b0620f inset;color:#d67c1c}.ui.inverted.brown.basic.button:focus,.ui.inverted.brown.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c16808 inset;box-shadow:0 0 0 2px #c16808 inset;color:#d67c1c}.ui.inverted.brown.basic.active.button,.ui.inverted.brown.basic.buttons .active.button,.ui.inverted.brown.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cc6f0d inset;box-shadow:0 0 0 2px #cc6f0d inset;color:#d67c1c}.ui.inverted.brown.basic.button:active,.ui.inverted.brown.basic.buttons .button:active,.ui.inverted.brown.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #a96216 inset;box-shadow:0 0 0 2px #a96216 inset;color:#d67c1c}.ui.tertiary.brown.button,.ui.tertiary.brown.buttons .button,.ui.tertiary.brown.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#a5673f}.ui.tertiary.brown.button:hover,.ui.tertiary.brown.buttons .button:hover,.ui.tertiary.brown.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #835f48;box-shadow:inset 0 -.2em 0 #835f48;color:#835f48}.ui.tertiary.brown.button:focus,.ui.tertiary.brown.buttons .button:focus,.ui.tertiary.brown.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #7d573e;box-shadow:inset 0 -.2em 0 #7d573e;color:#7d573e}.ui.tertiary.brown.active.button,.ui.tertiary.brown.button:active,.ui.tertiary.brown.buttons .active.button,.ui.tertiary.brown.buttons .button:active,.ui.tertiary.brown.buttons .tertiary.active.button,.ui.tertiary.brown.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #ae561d;box-shadow:inset 0 -.2em 0 #ae561d;color:#995a31}.ui.grey.button,.ui.grey.buttons .button{background-color:#767676;color:#fff;text-shadow:none;background-image:none}.ui.grey.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.grey.button:hover,.ui.grey.buttons .button:hover{background-color:#838383;color:#fff;text-shadow:none}.ui.grey.button:focus,.ui.grey.buttons .button:focus{background-color:#8a8a8a;color:#fff;text-shadow:none}.ui.grey.button:active,.ui.grey.buttons .button:active{background-color:#909090;color:#fff;text-shadow:none}.ui.grey.active.button,.ui.grey.button .active.button:active,.ui.grey.buttons .active.button,.ui.grey.buttons .active.button:active{background-color:#696969;color:#fff;text-shadow:none}.ui.basic.grey.button,.ui.basic.grey.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #767676 inset;box-shadow:0 0 0 1px #767676 inset;color:#767676}.ui.basic.grey.button:hover,.ui.basic.grey.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #838383 inset;box-shadow:0 0 0 1px #838383 inset;color:#838383}.ui.basic.grey.button:focus,.ui.basic.grey.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #8a8a8a inset;box-shadow:0 0 0 1px #8a8a8a inset;color:#838383}.ui.basic.grey.active.button,.ui.basic.grey.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #696969 inset;box-shadow:0 0 0 1px #696969 inset;color:#909090}.ui.basic.grey.button:active,.ui.basic.grey.buttons .button:active{-webkit-box-shadow:0 0 0 1px #909090 inset;box-shadow:0 0 0 1px #909090 inset;color:#909090}.ui.buttons:not(.vertical)>.basic.grey.button:not(:first-child){margin-left:-1px}.ui.inverted.grey.button,.ui.inverted.grey.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset;box-shadow:0 0 0 2px #d4d4d5 inset;color:#fff}.ui.inverted.grey.button.active,.ui.inverted.grey.button:active,.ui.inverted.grey.button:focus,.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button.active,.ui.inverted.grey.buttons .button:active,.ui.inverted.grey.buttons .button:focus,.ui.inverted.grey.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6)}.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button:hover{background-color:#c2c4c5}.ui.inverted.grey.button:focus,.ui.inverted.grey.buttons .button:focus{background-color:#c7c9cb}.ui.inverted.grey.active.button,.ui.inverted.grey.buttons .active.button{background-color:#cfd0d2}.ui.inverted.grey.button:active,.ui.inverted.grey.buttons .button:active{background-color:#c2c4c5}.ui.inverted.grey.basic.button,.ui.inverted.grey.basic.buttons .button,.ui.inverted.grey.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.grey.basic.button:hover,.ui.inverted.grey.basic.buttons .button:hover,.ui.inverted.grey.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #c2c4c5 inset;box-shadow:0 0 0 2px #c2c4c5 inset;color:#fff}.ui.inverted.grey.basic.button:focus,.ui.inverted.grey.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c7c9cb inset;box-shadow:0 0 0 2px #c7c9cb inset;color:#dcddde}.ui.inverted.grey.basic.active.button,.ui.inverted.grey.basic.buttons .active.button,.ui.inverted.grey.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cfd0d2 inset;box-shadow:0 0 0 2px #cfd0d2 inset;color:#fff}.ui.inverted.grey.basic.button:active,.ui.inverted.grey.basic.buttons .button:active,.ui.inverted.grey.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #c2c4c5 inset;box-shadow:0 0 0 2px #c2c4c5 inset;color:#fff}.ui.tertiary.grey.button,.ui.tertiary.grey.buttons .button,.ui.tertiary.grey.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#767676}.ui.tertiary.grey.button:hover,.ui.tertiary.grey.buttons .button:hover,.ui.tertiary.grey.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #838383;box-shadow:inset 0 -.2em 0 #838383;color:#838383}.ui.tertiary.grey.button:focus,.ui.tertiary.grey.buttons .button:focus,.ui.tertiary.grey.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #8a8a8a;box-shadow:inset 0 -.2em 0 #8a8a8a;color:#8a8a8a}.ui.tertiary.grey.active.button,.ui.tertiary.grey.button:active,.ui.tertiary.grey.buttons .active.button,.ui.tertiary.grey.buttons .button:active,.ui.tertiary.grey.buttons .tertiary.active.button,.ui.tertiary.grey.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #7e5454;box-shadow:inset 0 -.2em 0 #7e5454;color:#696969}.ui.black.button,.ui.black.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.black.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.black.button:hover,.ui.black.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.black.button:focus,.ui.black.buttons .button:focus{background-color:#2f3032;color:#fff;text-shadow:none}.ui.black.button:active,.ui.black.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.black.active.button,.ui.black.button .active.button:active,.ui.black.buttons .active.button,.ui.black.buttons .active.button:active{background-color:#0f0f10;color:#fff;text-shadow:none}.ui.basic.black.button,.ui.basic.black.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #1b1c1d inset;box-shadow:0 0 0 1px #1b1c1d inset;color:#1b1c1d}.ui.basic.black.button:hover,.ui.basic.black.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #27292a inset;box-shadow:0 0 0 1px #27292a inset;color:#27292a}.ui.basic.black.button:focus,.ui.basic.black.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #2f3032 inset;box-shadow:0 0 0 1px #2f3032 inset;color:#27292a}.ui.basic.black.active.button,.ui.basic.black.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #0f0f10 inset;box-shadow:0 0 0 1px #0f0f10 inset;color:#343637}.ui.basic.black.button:active,.ui.basic.black.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset;box-shadow:0 0 0 1px #343637 inset;color:#343637}.ui.buttons:not(.vertical)>.basic.black.button:not(:first-child){margin-left:-1px}.ui.inverted.black.button,.ui.inverted.black.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset;box-shadow:0 0 0 2px #d4d4d5 inset;color:#fff}.ui.inverted.black.button.active,.ui.inverted.black.button:active,.ui.inverted.black.button:focus,.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button.active,.ui.inverted.black.buttons .button:active,.ui.inverted.black.buttons .button:focus,.ui.inverted.black.buttons .button:hover{-webkit-box-shadow:none;box-shadow:none;color:#fff}.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button:hover{background-color:#000}.ui.inverted.black.button:focus,.ui.inverted.black.buttons .button:focus{background-color:#000}.ui.inverted.black.active.button,.ui.inverted.black.buttons .active.button{background-color:#000}.ui.inverted.black.button:active,.ui.inverted.black.buttons .button:active{background-color:#000}.ui.inverted.black.basic.button,.ui.inverted.black.basic.buttons .button,.ui.inverted.black.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;color:#fff}.ui.inverted.black.basic.button:hover,.ui.inverted.black.basic.buttons .button:hover,.ui.inverted.black.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #000 inset;box-shadow:0 0 0 2px #000 inset;color:#fff}.ui.inverted.black.basic.button:focus,.ui.inverted.black.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #000 inset;box-shadow:0 0 0 2px #000 inset;color:#545454}.ui.inverted.black.basic.active.button,.ui.inverted.black.basic.buttons .active.button,.ui.inverted.black.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #000 inset;box-shadow:0 0 0 2px #000 inset;color:#fff}.ui.inverted.black.basic.button:active,.ui.inverted.black.basic.buttons .button:active,.ui.inverted.black.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #000 inset;box-shadow:0 0 0 2px #000 inset;color:#fff}.ui.tertiary.black.button,.ui.tertiary.black.buttons .button,.ui.tertiary.black.buttons .tertiary.button{background:0 0;-webkit-box-shadow:none;box-shadow:none;color:#1b1c1d}.ui.tertiary.black.button:hover,.ui.tertiary.black.buttons .button:hover,.ui.tertiary.black.buttons button:hover{-webkit-box-shadow:inset 0 -.2em 0 #8b8f93;box-shadow:inset 0 -.2em 0 #8b8f93;color:#8b8f93}.ui.tertiary.black.button:focus,.ui.tertiary.black.buttons .button:focus,.ui.tertiary.black.buttons .tertiary.button:focus{-webkit-box-shadow:inset 0 -.2em 0 #93969a;box-shadow:inset 0 -.2em 0 #93969a;color:#93969a}.ui.tertiary.black.active.button,.ui.tertiary.black.button:active,.ui.tertiary.black.buttons .active.button,.ui.tertiary.black.buttons .button:active,.ui.tertiary.black.buttons .tertiary.active.button,.ui.tertiary.black.buttons .tertiary.button:active{-webkit-box-shadow:inset 0 -.2em 0 #404245;box-shadow:inset 0 -.2em 0 #404245;color:#0f0f10}.ui.positive.button,.ui.positive.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.positive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.positive.button:hover,.ui.positive.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.positive.button:focus,.ui.positive.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.positive.button:active,.ui.positive.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.positive.active.button,.ui.positive.button .active.button:active,.ui.positive.buttons .active.button,.ui.positive.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.positive.button,.ui.basic.positive.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #21ba45 inset;box-shadow:0 0 0 1px #21ba45 inset;color:#21ba45}.ui.basic.positive.button:hover,.ui.basic.positive.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #16ab39 inset;box-shadow:0 0 0 1px #16ab39 inset;color:#16ab39}.ui.basic.positive.button:focus,.ui.basic.positive.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #0ea432 inset;box-shadow:0 0 0 1px #0ea432 inset;color:#16ab39}.ui.basic.positive.active.button,.ui.basic.positive.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #13ae38 inset;box-shadow:0 0 0 1px #13ae38 inset;color:#198f35}.ui.basic.positive.button:active,.ui.basic.positive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset;box-shadow:0 0 0 1px #198f35 inset;color:#198f35}.ui.buttons:not(.vertical)>.basic.positive.button:not(:first-child){margin-left:-1px}.ui.negative.button,.ui.negative.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.negative.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.negative.button:hover,.ui.negative.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.negative.button:focus,.ui.negative.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.negative.button:active,.ui.negative.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.negative.active.button,.ui.negative.button .active.button:active,.ui.negative.buttons .active.button,.ui.negative.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.negative.button,.ui.basic.negative.buttons .button{background:0 0;-webkit-box-shadow:0 0 0 1px #db2828 inset;box-shadow:0 0 0 1px #db2828 inset;color:#db2828}.ui.basic.negative.button:hover,.ui.basic.negative.buttons .button:hover{background:0 0;-webkit-box-shadow:0 0 0 1px #d01919 inset;box-shadow:0 0 0 1px #d01919 inset;color:#d01919}.ui.basic.negative.button:focus,.ui.basic.negative.buttons .button:focus{background:0 0;-webkit-box-shadow:0 0 0 1px #ca1010 inset;box-shadow:0 0 0 1px #ca1010 inset;color:#d01919}.ui.basic.negative.active.button,.ui.basic.negative.buttons .active.button{background:0 0;-webkit-box-shadow:0 0 0 1px #d41515 inset;box-shadow:0 0 0 1px #d41515 inset;color:#b21e1e}.ui.basic.negative.button:active,.ui.basic.negative.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset;box-shadow:0 0 0 1px #b21e1e inset;color:#b21e1e}.ui.buttons:not(.vertical)>.basic.negative.button:not(:first-child){margin-left:-1px}.ui.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0;vertical-align:baseline;margin:0 .25em 0 0}.ui.buttons:not(.basic):not(.inverted){-webkit-box-shadow:none;box-shadow:none}.ui.buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.buttons .button{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;border-radius:0;margin:0}.ui.buttons:not(.basic):not(.inverted)>.button:not(.basic):not(.inverted){-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.buttons .button:first-child{border-left:none;margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.ui.buttons .button:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.vertical.buttons .button{display:block;float:none;width:100%;margin:0;-webkit-box-shadow:none;box-shadow:none;border-radius:0}.ui.vertical.buttons .button:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ui.vertical.buttons .button:last-child{margin-bottom:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.ui.vertical.buttons .button:only-child{border-radius:.25rem}.ui.segment.homepage-hero .ui.button.download{background:#fff;color:#2185d0}.ui.segment.homepage-hero .ui.button.download:hover{color:#54c8ff}
\ No newline at end of file
diff --git a/ui/dist/components/card.css b/ui/dist/components/card.css
index d8858fd93d7..bff58272d8a 100644
--- a/ui/dist/components/card.css
+++ b/ui/dist/components/card.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Item
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Card
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -30,31 +30,32 @@
-ms-flex-direction: column;
flex-direction: column;
width: 290px;
- min-height: 0px;
+ min-height: 0;
background: #FFFFFF;
- padding: 0em;
+ padding: 0;
border: none;
border-radius: 0.25rem;
- -webkit-box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
- box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
+ -webkit-box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
+ box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
-webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
transition: box-shadow 0.1s ease, transform 0.1s ease;
transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
z-index: '';
+ word-wrap: break-word;
}
.ui.card {
- margin: 1em 0em;
+ margin: 1em 0;
}
.ui.cards > .card a,
.ui.card a {
cursor: pointer;
}
.ui.card:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.card:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
@@ -82,7 +83,7 @@
.ui.card:after {
display: block;
content: ' ';
- height: 0px;
+ height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
@@ -99,12 +100,12 @@
.ui.cards > .card > :first-child,
.ui.card > :first-child {
- border-radius: 0.25rem 0.25rem 0em 0em !important;
+ border-radius: 0.25rem 0.25rem 0 0 !important;
border-top: none !important;
}
.ui.cards > .card > :last-child,
.ui.card > :last-child {
- border-radius: 0em 0em 0.25rem 0.25rem !important;
+ border-radius: 0 0 0.25rem 0.25rem !important;
}
.ui.cards > .card > :only-child,
.ui.card > :only-child {
@@ -122,7 +123,7 @@
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
- padding: 0em;
+ padding: 0;
background: rgba(0, 0, 0, 0.05);
}
.ui.cards > .card > .image > img,
@@ -149,18 +150,18 @@
border: none;
border-top: 1px solid rgba(34, 36, 38, 0.1);
background: none;
- margin: 0em;
+ margin: 0;
padding: 1em 1em;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 1em;
- border-radius: 0em;
+ border-radius: 0;
}
.ui.cards > .card > .content:after,
.ui.card > .content:after {
display: block;
content: ' ';
- height: 0px;
+ height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
@@ -253,11 +254,11 @@
.ui.cards > .card > .content p,
.ui.card > .content p {
- margin: 0em 0em 0.5em;
+ margin: 0 0 0.5em;
}
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
@@ -275,11 +276,11 @@
}
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
- margin-right: 0em;
+ margin-right: 0;
}
.ui.cards > .card .meta [class*="right floated"],
.ui.card .meta [class*="right floated"] {
- margin-right: 0em;
+ margin-right: 0;
margin-left: 0.3em;
}
@@ -328,8 +329,14 @@
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
- margin: 0px -1px;
- width: calc(100% + 2px );
+ margin: 0 -1px;
+ width: calc(100% + 2px);
+}
+.ui.cards > .card > .buttons:last-child,
+.ui.card > .buttons:last-child,
+.ui.cards > .card > .button:last-child,
+.ui.card > .button:last-child {
+ margin-bottom: -1px;
}
/*--------------
@@ -396,7 +403,7 @@
.ui.cards > .card > .extra,
.ui.card > .extra {
max-width: 100%;
- min-height: 0em !important;
+ min-height: 0 !important;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
@@ -404,10 +411,10 @@
position: static;
background: none;
width: auto;
- margin: 0em 0em;
+ margin: 0 0;
padding: 0.75em 1em;
- top: 0em;
- left: 0em;
+ top: 0;
+ left: 0;
color: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: none;
box-shadow: none;
@@ -430,30 +437,79 @@
/*-------------------
- Raised
---------------------*/
+ Horizontal
+ --------------------*/
+
+.ui.horizontal.cards > .card,
+.ui.card.horizontal {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ min-width: 270px;
+ width: 400px;
+ max-width: 100%;
+}
+.ui.horizontal.cards > .card > .image,
+.ui.card.horizontal > .image {
+ border-radius: 0.25rem 0 0 0.25rem;
+ width: 150px;
+}
+.ui.horizontal.cards > .card > .image > img,
+.ui.card.horizontal > .image > img {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border-radius: 0.25rem 0 0 0.25rem;
+}
+.ui.horizontal.cards > .card > .image:last-child > img,
+.ui.card.horizontal > .image:last-child > img {
+ border-radius: 0 0.25rem 0.25rem 0;
+}
+.ui.horizontal.cards > .card > .content,
+.ui.horizontal.card > .content {
+ -ms-flex-preferred-size: 1px;
+ flex-basis: 1px;
+}
+.ui.horizontal.cards > .card > .extra,
+.ui.horizontal.card > .extra {
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+
+/*-------------------
+ Raised
+ --------------------*/
.ui.raised.cards > .card,
.ui.raised.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.raised.cards a.card:hover,
.ui.link.cards .raised.card:hover,
a.ui.raised.card:hover,
.ui.link.raised.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
-}
-.ui.raised.cards > .card,
-.ui.raised.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
}
/*-------------------
- Centered
---------------------*/
+ Centered
+ --------------------*/
.ui.centered.cards {
-webkit-box-pack: center;
@@ -466,8 +522,8 @@ a.ui.raised.card:hover,
}
/*-------------------
- Fluid
---------------------*/
+ Fluid
+ --------------------*/
.ui.fluid.card {
width: 100%;
@@ -475,8 +531,8 @@ a.ui.raised.card:hover,
}
/*-------------------
- Link
---------------------*/
+ Link
+ --------------------*/
.ui.cards a.card,
.ui.link.cards .card,
@@ -486,15 +542,15 @@ a.ui.card,
transform: none;
}
.ui.cards a.card:hover,
-.ui.link.cards .card:hover,
+.ui.link.cards .card:not(.icon):hover,
a.ui.card:hover,
.ui.link.card:hover {
cursor: pointer;
z-index: 5;
background: #FFFFFF;
border: none;
- -webkit-box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5;
- box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5;
+ -webkit-box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5;
+ box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
@@ -503,187 +559,365 @@ a.ui.card:hover,
Colors
--------------------*/
-
-/* Red */
+.ui.primary.cards > .card,
+.ui.cards > .primary.card,
+.ui.primary.card {
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
+}
+.ui.primary.cards > .card:hover,
+.ui.cards > .primary.card:hover,
+.ui.primary.card:hover {
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.primary.cards > .card,
+.ui.inverted.cards > .primary.card,
+.ui.inverted.primary.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
+}
+.ui.inverted.primary.cards > .card:hover,
+.ui.inverted.cards > .primary.card:hover,
+.ui.inverted.primary.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
+}
+.ui.secondary.cards > .card,
+.ui.cards > .secondary.card,
+.ui.secondary.card {
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
+}
+.ui.secondary.cards > .card:hover,
+.ui.cards > .secondary.card:hover,
+.ui.secondary.card:hover {
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.secondary.cards > .card,
+.ui.inverted.cards > .secondary.card,
+.ui.inverted.secondary.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
+}
+.ui.inverted.secondary.cards > .card:hover,
+.ui.inverted.cards > .secondary.card:hover,
+.ui.inverted.secondary.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555;
+}
.ui.red.cards > .card,
.ui.cards > .red.card,
.ui.red.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5;
}
.ui.red.cards > .card:hover,
.ui.cards > .red.card:hover,
.ui.red.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.red.cards > .card,
+.ui.inverted.cards > .red.card,
+.ui.inverted.red.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555;
+}
+.ui.inverted.red.cards > .card:hover,
+.ui.inverted.cards > .red.card:hover,
+.ui.inverted.red.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555;
}
-
-/* Orange */
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.orange.cards > .card,
+.ui.inverted.cards > .orange.card,
+.ui.inverted.orange.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555;
+}
+.ui.inverted.orange.cards > .card:hover,
+.ui.inverted.cards > .orange.card:hover,
+.ui.inverted.orange.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555;
}
-
-/* Yellow */
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5;
}
.ui.yellow.cards > .card:hover,
.ui.cards > .yellow.card:hover,
.ui.yellow.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.yellow.cards > .card,
+.ui.inverted.cards > .yellow.card,
+.ui.inverted.yellow.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555;
+}
+.ui.inverted.yellow.cards > .card:hover,
+.ui.inverted.cards > .yellow.card:hover,
+.ui.inverted.yellow.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555;
}
-
-/* Olive */
.ui.olive.cards > .card,
.ui.cards > .olive.card,
.ui.olive.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5;
}
.ui.olive.cards > .card:hover,
.ui.cards > .olive.card:hover,
.ui.olive.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.olive.cards > .card,
+.ui.inverted.cards > .olive.card,
+.ui.inverted.olive.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555;
+}
+.ui.inverted.olive.cards > .card:hover,
+.ui.inverted.cards > .olive.card:hover,
+.ui.inverted.olive.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555;
}
-
-/* Green */
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.green.cards > .card,
+.ui.inverted.cards > .green.card,
+.ui.inverted.green.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555;
+}
+.ui.inverted.green.cards > .card:hover,
+.ui.inverted.cards > .green.card:hover,
+.ui.inverted.green.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555;
}
-
-/* Teal */
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.teal.cards > .card,
+.ui.inverted.cards > .teal.card,
+.ui.inverted.teal.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555;
+}
+.ui.inverted.teal.cards > .card:hover,
+.ui.inverted.cards > .teal.card:hover,
+.ui.inverted.teal.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555;
}
-
-/* Blue */
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.blue.cards > .card,
+.ui.inverted.cards > .blue.card,
+.ui.inverted.blue.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
+}
+.ui.inverted.blue.cards > .card:hover,
+.ui.inverted.cards > .blue.card:hover,
+.ui.inverted.blue.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
}
-
-/* Violet */
.ui.violet.cards > .card,
.ui.cards > .violet.card,
.ui.violet.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5;
}
.ui.violet.cards > .card:hover,
.ui.cards > .violet.card:hover,
.ui.violet.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.violet.cards > .card,
+.ui.inverted.cards > .violet.card,
+.ui.inverted.violet.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555;
+}
+.ui.inverted.violet.cards > .card:hover,
+.ui.inverted.cards > .violet.card:hover,
+.ui.inverted.violet.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555;
}
-
-/* Purple */
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.purple.cards > .card,
+.ui.inverted.cards > .purple.card,
+.ui.inverted.purple.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555;
+}
+.ui.inverted.purple.cards > .card:hover,
+.ui.inverted.cards > .purple.card:hover,
+.ui.inverted.purple.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555;
}
-
-/* Pink */
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.pink.cards > .card,
+.ui.inverted.cards > .pink.card,
+.ui.inverted.pink.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555;
+}
+.ui.inverted.pink.cards > .card:hover,
+.ui.inverted.cards > .pink.card:hover,
+.ui.inverted.pink.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555;
}
-
-/* Brown */
.ui.brown.cards > .card,
.ui.cards > .brown.card,
.ui.brown.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5;
}
.ui.brown.cards > .card:hover,
.ui.cards > .brown.card:hover,
.ui.brown.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.brown.cards > .card,
+.ui.inverted.cards > .brown.card,
+.ui.inverted.brown.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555;
+}
+.ui.inverted.brown.cards > .card:hover,
+.ui.inverted.cards > .brown.card:hover,
+.ui.inverted.brown.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555;
}
-
-/* Grey */
.ui.grey.cards > .card,
.ui.cards > .grey.card,
.ui.grey.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5;
}
.ui.grey.cards > .card:hover,
.ui.cards > .grey.card:hover,
.ui.grey.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.grey.cards > .card,
+.ui.inverted.cards > .grey.card,
+.ui.inverted.grey.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555;
+}
+.ui.inverted.grey.cards > .card:hover,
+.ui.inverted.cards > .grey.card:hover,
+.ui.inverted.grey.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555;
}
-
-/* Black */
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
}
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
- box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
+ box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
+}
+.ui.inverted.black.cards > .card,
+.ui.inverted.cards > .black.card,
+.ui.inverted.black.card {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
+}
+.ui.inverted.black.cards > .card:hover,
+.ui.inverted.cards > .black.card:hover,
+.ui.inverted.black.card:hover {
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555;
}
/*--------------
@@ -691,8 +925,8 @@ a.ui.card:hover,
---------------*/
.ui.one.cards {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.one.cards > .card {
width: 100%;
@@ -702,7 +936,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.two.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -711,7 +945,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.three.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -720,7 +954,7 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.four.cards > .card {
- width: calc( 25% - 1.5em );
+ width: calc(25% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
@@ -729,7 +963,7 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.five.cards > .card {
- width: calc( 20% - 1.5em );
+ width: calc(20% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
@@ -738,7 +972,7 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.six.cards > .card {
- width: calc( 16.66666667% - 1.5em );
+ width: calc(16.666666666666664% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
@@ -747,7 +981,7 @@ a.ui.card:hover,
margin-right: -0.5em;
}
.ui.seven.cards > .card {
- width: calc( 14.28571429% - 1em );
+ width: calc(14.285714285714285% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
}
@@ -756,7 +990,7 @@ a.ui.card:hover,
margin-right: -0.5em;
}
.ui.eight.cards > .card {
- width: calc( 12.5% - 1em );
+ width: calc(12.5% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
font-size: 11px;
@@ -766,7 +1000,7 @@ a.ui.card:hover,
margin-right: -0.5em;
}
.ui.nine.cards > .card {
- width: calc( 11.11111111% - 1em );
+ width: calc(11.11111111111111% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
font-size: 10px;
@@ -776,33 +1010,33 @@ a.ui.card:hover,
margin-right: -0.5em;
}
.ui.ten.cards > .card {
- width: calc( 10% - 1em );
+ width: calc(10% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
}
/*-------------------
- Doubling
---------------------*/
+ Doubling
+ --------------------*/
/* Mobile Only */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.two.doubling.cards {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.two.doubling.cards > .card {
width: 100%;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.three.doubling.cards {
margin-left: -1em;
margin-right: -1em;
}
.ui.three.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -811,7 +1045,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.four.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -820,7 +1054,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.five.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -829,7 +1063,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.six.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -838,7 +1072,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.seven.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -847,7 +1081,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.eight.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -856,7 +1090,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.nine.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -865,29 +1099,29 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.ten.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
}
/* Tablet Only */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.two.doubling.cards {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.two.doubling.cards > .card {
width: 100%;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.three.doubling.cards {
margin-left: -1em;
margin-right: -1em;
}
.ui.three.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -896,7 +1130,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.four.doubling.cards > .card {
- width: calc( 50% - 2em );
+ width: calc(50% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -905,7 +1139,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.five.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -914,7 +1148,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.six.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -923,7 +1157,7 @@ a.ui.card:hover,
margin-right: -1em;
}
.ui.eight.doubling.cards > .card {
- width: calc( 33.33333333% - 2em );
+ width: calc(33.33333333333333% - 2em);
margin-left: 1em;
margin-right: 1em;
}
@@ -932,7 +1166,7 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.eight.doubling.cards > .card {
- width: calc( 25% - 1.5em );
+ width: calc(25% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
@@ -941,7 +1175,7 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.nine.doubling.cards > .card {
- width: calc( 25% - 1.5em );
+ width: calc(25% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
@@ -950,29 +1184,29 @@ a.ui.card:hover,
margin-right: -0.75em;
}
.ui.ten.doubling.cards > .card {
- width: calc( 20% - 1.5em );
+ width: calc(20% - 1.5em);
margin-left: 0.75em;
margin-right: 0.75em;
}
}
/*-------------------
- Stackable
---------------------*/
+ Stackable
+ --------------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.stackable.cards {
display: block !important;
}
.ui.stackable.cards .card:first-child {
- margin-top: 0em !important;
+ margin-top: 0 !important;
}
.ui.stackable.cards > .card {
display: block !important;
height: auto !important;
margin: 1em 1em;
padding: 0 !important;
- width: calc( 100% - 2em ) !important;
+ width: calc(100% - 2em) !important;
}
}
@@ -983,6 +1217,93 @@ a.ui.card:hover,
.ui.cards > .card {
font-size: 1em;
}
+.ui.mini.cards .card {
+ font-size: 0.8125rem;
+}
+.ui.tiny.cards .card {
+ font-size: 0.875rem;
+}
+.ui.small.cards .card {
+ font-size: 0.9375rem;
+}
+.ui.large.cards .card {
+ font-size: 1.125rem;
+}
+.ui.big.cards .card {
+ font-size: 1.3125rem;
+}
+.ui.huge.cards .card {
+ font-size: 1.4375rem;
+}
+.ui.massive.cards .card {
+ font-size: 1.6875rem;
+}
+
+/*-----------------
+ Inverted
+ ------------------*/
+
+.ui.inverted.cards > .card,
+.ui.inverted.card {
+ background: #1B1C1D;
+ -webkit-box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555;
+ box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555;
+}
+
+/* Content */
+.ui.inverted.cards > .card > .content,
+.ui.inverted.card > .content {
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Header */
+.ui.inverted.cards > .card > .content > .header,
+.ui.inverted.card > .content > .header {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+/* Description */
+.ui.inverted.cards > .card > .content > .description,
+.ui.inverted.card > .content > .description {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+/* Meta */
+.ui.inverted.cards > .card .meta,
+.ui.inverted.card .meta {
+ color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.cards > .card .meta > a:not(.ui),
+.ui.inverted.card .meta > a:not(.ui) {
+ color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.cards > .card .meta > a:not(.ui):hover,
+.ui.inverted.card .meta > a:not(.ui):hover {
+ color: #ffffff;
+}
+
+/* Extra */
+.ui.inverted.cards > .card > .extra,
+.ui.inverted.card > .extra {
+ border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
+ color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.cards > .card > .extra a:not(.ui),
+.ui.inverted.card > .extra a:not(.ui) {
+ color: rgba(255, 255, 255, 0.5);
+}
+.ui.inverted.cards > .card > .extra a:not(.ui):hover,
+.ui.inverted.card > .extra a:not(.ui):hover {
+ color: #1e70bf;
+}
+
+/* Link card(s) */
+.ui.inverted.cards a.card:hover,
+.ui.inverted.link.cards .card:not(.icon):hover,
+a.inverted.ui.card:hover,
+.ui.inverted.link.card:hover {
+ background: #1B1C1D;
+}
/*******************************
diff --git a/ui/dist/components/card.min.css b/ui/dist/components/card.min.css
index 2841f29a04e..d521fec934b 100644
--- a/ui/dist/components/card.min.css
+++ b/ui/dist/components/card.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Item
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Card
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:290px;min-height:0;background:#fff;padding:0;border:none;border-radius:.25rem;-webkit-box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;-webkit-transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,transform .1s ease;transition:box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;z-index:''}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.cards:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.25rem .25rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .25rem .25rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.25rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em 1em;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.3125em;margin-top:-.25em;line-height:1.28571429em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0 0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.raised.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.centered.cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{-webkit-transform:none;transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#fff;border:none;-webkit-box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5}.ui.cards>.red.card:hover,.ui.red.card:hover,.ui.red.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5}.ui.cards>.orange.card:hover,.ui.orange.card:hover,.ui.orange.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5}.ui.cards>.yellow.card:hover,.ui.yellow.card:hover,.ui.yellow.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5}.ui.cards>.olive.card:hover,.ui.olive.card:hover,.ui.olive.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5}.ui.cards>.green.card:hover,.ui.green.card:hover,.ui.green.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5}.ui.cards>.teal.card:hover,.ui.teal.card:hover,.ui.teal.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.blue.card:hover,.ui.blue.cards>.card:hover,.ui.cards>.blue.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5}.ui.cards>.violet.card:hover,.ui.violet.card:hover,.ui.violet.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5}.ui.cards>.purple.card:hover,.ui.purple.card:hover,.ui.purple.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5}.ui.cards>.pink.card:hover,.ui.pink.card:hover,.ui.pink.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5}.ui.brown.card:hover,.ui.brown.cards>.card:hover,.ui.cards>.brown.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5}.ui.cards>.grey.card:hover,.ui.grey.card:hover,.ui.grey.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.black.card:hover,.ui.black.cards>.card:hover,.ui.cards>.black.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.66666667% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.28571429% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:768px) and (max-width:991px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em 1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em}
\ No newline at end of file
+ */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:290px;min-height:0;background:#fff;padding:0;border:none;border-radius:.25rem;-webkit-box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;-webkit-transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,transform .1s ease;transition:box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;z-index:'';word-wrap:break-word}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.cards:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.25rem .25rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .25rem .25rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.25rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em 1em;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.3125em;margin-top:-.25em;line-height:1.28571429em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card>.button:last-child,.ui.card>.buttons:last-child,.ui.cards>.card>.button:last-child,.ui.cards>.card>.buttons:last-child{margin-bottom:-1px}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0 0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.card.horizontal,.ui.horizontal.cards>.card{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:270px;width:400px;max-width:100%}.ui.card.horizontal>.image,.ui.horizontal.cards>.card>.image{border-radius:.25rem 0 0 .25rem;width:150px}.ui.card.horizontal>.image>img,.ui.horizontal.cards>.card>.image>img{background-size:cover;background-repeat:no-repeat;background-position:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:.25rem 0 0 .25rem}.ui.card.horizontal>.image:last-child>img,.ui.horizontal.cards>.card>.image:last-child>img{border-radius:0 .25rem .25rem 0}.ui.horizontal.card>.content,.ui.horizontal.cards>.card>.content{-ms-flex-preferred-size:1px;flex-basis:1px}.ui.horizontal.card>.extra,.ui.horizontal.cards>.card>.extra{-ms-flex-preferred-size:100%;flex-basis:100%}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.raised.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.centered.cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{-webkit-transform:none;transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:not(.icon):hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#fff;border:none;-webkit-box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.ui.cards>.primary.card,.ui.primary.card,.ui.primary.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.cards>.primary.card:hover,.ui.primary.card:hover,.ui.primary.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.primary.card,.ui.inverted.primary.card,.ui.inverted.primary.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555}.ui.inverted.cards>.primary.card:hover,.ui.inverted.primary.card:hover,.ui.inverted.primary.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555}.ui.cards>.secondary.card,.ui.secondary.card,.ui.secondary.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.cards>.secondary.card:hover,.ui.secondary.card:hover,.ui.secondary.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.secondary.card,.ui.inverted.secondary.card,.ui.inverted.secondary.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555}.ui.inverted.cards>.secondary.card:hover,.ui.inverted.secondary.card:hover,.ui.inverted.secondary.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6e6e6e,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6e6e6e,0 0 0 1px #555}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5}.ui.cards>.red.card:hover,.ui.red.card:hover,.ui.red.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.red.card,.ui.inverted.red.card,.ui.inverted.red.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff695e,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff695e,0 0 0 1px #555}.ui.inverted.cards>.red.card:hover,.ui.inverted.red.card:hover,.ui.inverted.red.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff392b,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff392b,0 0 0 1px #555}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5}.ui.cards>.orange.card:hover,.ui.orange.card:hover,.ui.orange.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.orange.card,.ui.inverted.orange.card,.ui.inverted.orange.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff851b,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff851b,0 0 0 1px #555}.ui.inverted.cards>.orange.card:hover,.ui.inverted.orange.card:hover,.ui.inverted.orange.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #e76b00,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #e76b00,0 0 0 1px #555}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5}.ui.cards>.yellow.card:hover,.ui.yellow.card:hover,.ui.yellow.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.yellow.card,.ui.inverted.yellow.card,.ui.inverted.yellow.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ffe21f,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ffe21f,0 0 0 1px #555}.ui.inverted.cards>.yellow.card:hover,.ui.inverted.yellow.card:hover,.ui.inverted.yellow.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ebcd00,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ebcd00,0 0 0 1px #555}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5}.ui.cards>.olive.card:hover,.ui.olive.card:hover,.ui.olive.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.olive.card,.ui.inverted.olive.card,.ui.inverted.olive.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d9e778,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d9e778,0 0 0 1px #555}.ui.inverted.cards>.olive.card:hover,.ui.inverted.olive.card:hover,.ui.inverted.olive.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d2e745,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d2e745,0 0 0 1px #555}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5}.ui.cards>.green.card:hover,.ui.green.card:hover,.ui.green.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.green.card,.ui.inverted.green.card,.ui.inverted.green.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #2ecc40,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #2ecc40,0 0 0 1px #555}.ui.inverted.cards>.green.card:hover,.ui.inverted.green.card:hover,.ui.inverted.green.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #1ea92e,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #1ea92e,0 0 0 1px #555}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5}.ui.cards>.teal.card:hover,.ui.teal.card:hover,.ui.teal.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.teal.card,.ui.inverted.teal.card,.ui.inverted.teal.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6dffff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #6dffff,0 0 0 1px #555}.ui.inverted.cards>.teal.card:hover,.ui.inverted.teal.card:hover,.ui.inverted.teal.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #3affff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #3affff,0 0 0 1px #555}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.blue.card:hover,.ui.blue.cards>.card:hover,.ui.cards>.blue.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.inverted.blue.card,.ui.inverted.blue.cards>.card,.ui.inverted.cards>.blue.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #54c8ff,0 0 0 1px #555}.ui.inverted.blue.card:hover,.ui.inverted.blue.cards>.card:hover,.ui.inverted.cards>.blue.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #21b8ff,0 0 0 1px #555}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5}.ui.cards>.violet.card:hover,.ui.violet.card:hover,.ui.violet.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.violet.card,.ui.inverted.violet.card,.ui.inverted.violet.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #a291fb,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #a291fb,0 0 0 1px #555}.ui.inverted.cards>.violet.card:hover,.ui.inverted.violet.card:hover,.ui.inverted.violet.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #745aff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #745aff,0 0 0 1px #555}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5}.ui.cards>.purple.card:hover,.ui.purple.card:hover,.ui.purple.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.purple.card,.ui.inverted.purple.card,.ui.inverted.purple.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dc73ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dc73ff,0 0 0 1px #555}.ui.inverted.cards>.purple.card:hover,.ui.inverted.purple.card:hover,.ui.inverted.purple.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #cf40ff,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #cf40ff,0 0 0 1px #555}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5}.ui.cards>.pink.card:hover,.ui.pink.card:hover,.ui.pink.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.pink.card,.ui.inverted.pink.card,.ui.inverted.pink.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff8edf,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff8edf,0 0 0 1px #555}.ui.inverted.cards>.pink.card:hover,.ui.inverted.pink.card:hover,.ui.inverted.pink.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff5bd1,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #ff5bd1,0 0 0 1px #555}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5}.ui.brown.card:hover,.ui.brown.cards>.card:hover,.ui.cards>.brown.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd}.ui.inverted.brown.card,.ui.inverted.brown.cards>.card,.ui.inverted.cards>.brown.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d67c1c,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #d67c1c,0 0 0 1px #555}.ui.inverted.brown.card:hover,.ui.inverted.brown.cards>.card:hover,.ui.inverted.cards>.brown.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #b0620f,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #b0620f,0 0 0 1px #555}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5}.ui.cards>.grey.card:hover,.ui.grey.card:hover,.ui.grey.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd}.ui.inverted.cards>.grey.card,.ui.inverted.grey.card,.ui.inverted.grey.cards>.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dcddde,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #dcddde,0 0 0 1px #555}.ui.inverted.cards>.grey.card:hover,.ui.inverted.grey.card:hover,.ui.inverted.grey.cards>.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #c2c4c5,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #c2c4c5,0 0 0 1px #555}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.black.card:hover,.ui.black.cards>.card:hover,.ui.cards>.black.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.inverted.black.card,.ui.inverted.black.cards>.card,.ui.inverted.cards>.black.card{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #545454,0 0 0 1px #555}.ui.inverted.black.card:hover,.ui.inverted.black.cards>.card:hover,.ui.inverted.cards>.black.card:hover{-webkit-box-shadow:0 1px 3px 0 #555,0 2px 0 0 #000,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 2px 0 0 #000,0 0 0 1px #555}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.666666666666664% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.285714285714285% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767.98px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767.98px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em 1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em}.ui.mini.cards .card{font-size:.8125rem}.ui.tiny.cards .card{font-size:.875rem}.ui.small.cards .card{font-size:.9375rem}.ui.large.cards .card{font-size:1.125rem}.ui.big.cards .card{font-size:1.3125rem}.ui.huge.cards .card{font-size:1.4375rem}.ui.massive.cards .card{font-size:1.6875rem}.ui.inverted.card,.ui.inverted.cards>.card{background:#1b1c1d;-webkit-box-shadow:0 1px 3px 0 #555,0 0 0 1px #555;box-shadow:0 1px 3px 0 #555,0 0 0 1px #555}.ui.inverted.card>.content,.ui.inverted.cards>.card>.content{border-top:1px solid rgba(255,255,255,.15)}.ui.inverted.card>.content>.header,.ui.inverted.cards>.card>.content>.header{color:rgba(255,255,255,.9)}.ui.inverted.card>.content>.description,.ui.inverted.cards>.card>.content>.description{color:rgba(255,255,255,.8)}.ui.inverted.card .meta,.ui.inverted.cards>.card .meta{color:rgba(255,255,255,.7)}.ui.inverted.card .meta>a:not(.ui),.ui.inverted.cards>.card .meta>a:not(.ui){color:rgba(255,255,255,.7)}.ui.inverted.card .meta>a:not(.ui):hover,.ui.inverted.cards>.card .meta>a:not(.ui):hover{color:#fff}.ui.inverted.card>.extra,.ui.inverted.cards>.card>.extra{border-top:1px solid rgba(255,255,255,.15)!important;color:rgba(255,255,255,.7)}.ui.inverted.card>.extra a:not(.ui),.ui.inverted.cards>.card>.extra a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.card>.extra a:not(.ui):hover,.ui.inverted.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.inverted.cards a.card:hover,.ui.inverted.link.card:hover,.ui.inverted.link.cards .card:not(.icon):hover,a.inverted.ui.card:hover{background:#1b1c1d}
\ No newline at end of file
diff --git a/ui/dist/components/container.css b/ui/dist/components/container.css
index b7cf7bf8516..63ede9941ef 100644
--- a/ui/dist/components/container.css
+++ b/ui/dist/components/container.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Container
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Container
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -17,78 +17,78 @@
/* All Sizes */
.ui.container {
display: block;
- max-width: 100% !important;
+ max-width: 100%;
}
/* Mobile */
-@media only screen and (max-width: 767px) {
- .ui.container {
- width: auto !important;
- margin-left: 1em !important;
- margin-right: 1em !important;
+@media only screen and (max-width: 767.98px) {
+ .ui.ui.ui.container:not(.fluid) {
+ width: auto;
+ margin-left: 1em;
+ margin-right: 1em;
}
- .ui.grid.container {
- width: auto !important;
+ .ui.ui.ui.grid.container {
+ width: auto;
}
- .ui.relaxed.grid.container {
- width: auto !important;
+ .ui.ui.ui.relaxed.grid.container {
+ width: auto;
}
- .ui.very.relaxed.grid.container {
- width: auto !important;
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: auto;
}
}
/* Tablet */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
- .ui.container {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
+ .ui.ui.ui.container:not(.fluid) {
width: 719px;
- margin-left: auto !important;
- margin-right: auto !important;
+ margin-left: auto;
+ margin-right: auto;
}
- .ui.grid.container {
- width: calc( 719px + 2rem ) !important;
+ .ui.ui.ui.grid.container {
+ width: calc(719px + 2rem);
}
- .ui.relaxed.grid.container {
- width: calc( 719px + 3rem ) !important;
+ .ui.ui.ui.relaxed.grid.container {
+ width: calc(719px + 3rem);
}
- .ui.very.relaxed.grid.container {
- width: calc( 719px + 5rem ) !important;
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: calc(719px + 5rem);
}
}
/* Small Monitor */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
- .ui.container {
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+ .ui.ui.ui.container:not(.fluid) {
width: 927px;
- margin-left: auto !important;
- margin-right: auto !important;
+ margin-left: auto;
+ margin-right: auto;
}
- .ui.grid.container {
- width: calc( 927px + 2rem ) !important;
+ .ui.ui.ui.grid.container {
+ width: calc(927px + 2rem);
}
- .ui.relaxed.grid.container {
- width: calc( 927px + 3rem ) !important;
+ .ui.ui.ui.relaxed.grid.container {
+ width: calc(927px + 3rem);
}
- .ui.very.relaxed.grid.container {
- width: calc( 927px + 5rem ) !important;
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: calc(927px + 5rem);
}
}
/* Large Monitor */
@media only screen and (min-width: 1200px) {
- .ui.container {
+ .ui.ui.ui.container:not(.fluid) {
width: 1119px;
- margin-left: auto !important;
- margin-right: auto !important;
+ margin-left: auto;
+ margin-right: auto;
}
- .ui.grid.container {
- width: calc( 1119px + 2rem ) !important;
+ .ui.ui.ui.grid.container {
+ width: calc(1119px + 2rem);
}
- .ui.relaxed.grid.container {
- width: calc( 1119px + 3rem ) !important;
+ .ui.ui.ui.relaxed.grid.container {
+ width: calc(1119px + 3rem);
}
- .ui.very.relaxed.grid.container {
- width: calc( 1119px + 5rem ) !important;
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: calc(1119px + 5rem);
}
}
@@ -101,10 +101,8 @@
/* Text Container */
.ui.text.container {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
- max-width: 700px !important;
+ max-width: 700px;
line-height: 1.5;
-}
-.ui.text.container {
font-size: 1.125rem;
}
diff --git a/ui/dist/components/container.min.css b/ui/dist/components/container.min.css
index 3114418b263..7ffec5c0a79 100644
--- a/ui/dist/components/container.min.css
+++ b/ui/dist/components/container.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Container
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Container
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:767px){.ui.container{width:auto!important;margin-left:1em!important;margin-right:1em!important}.ui.grid.container{width:auto!important}.ui.relaxed.grid.container{width:auto!important}.ui.very.relaxed.grid.container{width:auto!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.container{width:719px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(719px + 2rem)!important}.ui.relaxed.grid.container{width:calc(719px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(719px + 5rem)!important}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.container{width:927px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(927px + 2rem)!important}.ui.relaxed.grid.container{width:calc(927px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(927px + 5rem)!important}}@media only screen and (min-width:1200px){.ui.container{width:1119px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(1119px + 2rem)!important}.ui.relaxed.grid.container{width:calc(1119px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)!important}}.ui.text.container{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5}.ui.text.container{font-size:1.125rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
\ No newline at end of file
+ */.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:719px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(719px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(719px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(719px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px;line-height:1.5;font-size:1.125rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
\ No newline at end of file
diff --git a/ui/dist/components/divider.css b/ui/dist/components/divider.css
index beb03a9fc34..b36ecbfb9e3 100644
--- a/ui/dist/components/divider.css
+++ b/ui/dist/components/divider.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Divider
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Divider
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -14,9 +14,9 @@
*******************************/
.ui.divider {
- margin: 1rem 0rem;
+ margin: 1rem 0;
line-height: 1;
- height: 0em;
+ height: 0;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -49,8 +49,8 @@
}
/*--------------
- Horizontal
----------------*/
+ Horizontal
+ ---------------*/
.ui.horizontal.divider {
display: table;
@@ -77,19 +77,19 @@
}
/*--------------
- Vertical
----------------*/
+ Vertical
+ ---------------*/
.ui.vertical.divider {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
- margin: 0rem;
- padding: 0em;
+ margin: 0;
+ padding: 0;
width: auto;
height: 50%;
- line-height: 0em;
+ line-height: 0;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
@@ -102,19 +102,19 @@
z-index: 3;
border-left: 1px solid rgba(34, 36, 38, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.1);
- width: 0%;
- height: calc(100% - 1rem );
+ width: 0;
+ height: calc(100% - 1rem);
}
.ui.vertical.divider:before {
top: -100%;
}
.ui.vertical.divider:after {
top: auto;
- bottom: 0px;
+ bottom: 0;
}
/* Inside grid */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.stackable.grid .ui.vertical.divider,
.ui.grid .stackable.row .ui.vertical.divider {
display: table;
@@ -134,7 +134,6 @@
.ui.grid .stackable.row .ui.vertical.divider:before,
.ui.stackable.grid .ui.vertical.divider:after,
.ui.grid .stackable.row .ui.vertical.divider:after {
- position: static;
left: 0;
border-left: none;
border-right: none;
@@ -156,16 +155,33 @@
}
/*--------------
- Icon
----------------*/
+ Icon
+ ---------------*/
.ui.divider > .icon {
- margin: 0rem;
+ margin: 0;
font-size: 1rem;
height: 1em;
vertical-align: middle;
}
+/*--------------
+ Header
+ ---------------*/
+
+.ui.horizontal.divider[class*="left aligned"]:before {
+ display: none;
+}
+.ui.horizontal.divider[class*="left aligned"]:after {
+ width: 100%;
+}
+.ui.horizontal.divider[class*="right aligned"]:before {
+ width: 100%;
+}
+.ui.horizontal.divider[class*="right aligned"]:after {
+ display: none;
+}
+
/*******************************
Variations
@@ -173,8 +189,8 @@
/*--------------
- Hidden
----------------*/
+ Hidden
+ ---------------*/
.ui.hidden.divider {
border-color: transparent !important;
@@ -207,20 +223,20 @@
---------------*/
.ui.fitted.divider {
- margin: 0em;
+ margin: 0;
}
/*--------------
- Clearing
----------------*/
+ Clearing
+ ---------------*/
.ui.clearing.divider {
clear: both;
}
/*--------------
- Section
----------------*/
+ Section
+ ---------------*/
.ui.section.divider {
margin-top: 2rem;
@@ -234,6 +250,27 @@
.ui.divider {
font-size: 1rem;
}
+.ui.mini.divider {
+ font-size: 0.8125rem;
+}
+.ui.tiny.divider {
+ font-size: 0.875rem;
+}
+.ui.small.divider {
+ font-size: 0.9375rem;
+}
+.ui.large.divider {
+ font-size: 1.125rem;
+}
+.ui.big.divider {
+ font-size: 1.3125rem;
+}
+.ui.huge.divider {
+ font-size: 1.4375rem;
+}
+.ui.massive.divider {
+ font-size: 1.6875rem;
+}
/*******************************
diff --git a/ui/dist/components/divider.min.css b/ui/dist/components/divider.min.css
index 3ada2c8f140..614c30e8bd8 100644
--- a/ui/dist/components/divider.min.css
+++ b/ui/dist/components/divider.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Divider
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Divider
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.divider{margin:1rem 0;line-height:1;height:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.divider:not(.vertical):not(.horizontal){border-top:1px solid rgba(34,36,38,.15);border-bottom:1px solid rgba(255,255,255,.1)}.ui.grid>.column+.divider,.ui.grid>.row>.column+.divider{left:auto}.ui.horizontal.divider{display:table;white-space:nowrap;height:auto;margin:'';line-height:1;text-align:center}.ui.horizontal.divider:after,.ui.horizontal.divider:before{content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.horizontal.divider:before{background-position:right 1em top 50%}.ui.horizontal.divider:after{background-position:left 1em top 50%}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0;padding:0;width:auto;height:50%;line-height:0;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:'';z-index:3;border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(255,255,255,.1);width:0%;height:calc(100% - 1rem)}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider,.ui.stackable.grid .ui.vertical.divider{display:table;white-space:nowrap;height:auto;margin:'';overflow:hidden;line-height:1;text-align:center;position:static;top:0;left:0;-webkit-transform:none;transform:none}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{position:static;left:0;border-left:none;border-right:none;content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:before{background-position:right 1em top 50%}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:after{background-position:left 1em top 50%}}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent!important}.ui.hidden.divider:after,.ui.hidden.divider:before{display:none}.ui.divider.inverted,.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:#fff}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(34,36,38,.15)!important;border-left-color:rgba(34,36,38,.15)!important;border-bottom-color:rgba(255,255,255,.15)!important;border-right-color:rgba(255,255,255,.15)!important}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}.ui.horizontal.divider:after,.ui.horizontal.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}}
\ No newline at end of file
+ */.ui.divider{margin:1rem 0;line-height:1;height:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.divider:not(.vertical):not(.horizontal){border-top:1px solid rgba(34,36,38,.15);border-bottom:1px solid rgba(255,255,255,.1)}.ui.grid>.column+.divider,.ui.grid>.row>.column+.divider{left:auto}.ui.horizontal.divider{display:table;white-space:nowrap;height:auto;margin:'';line-height:1;text-align:center}.ui.horizontal.divider:after,.ui.horizontal.divider:before{content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.horizontal.divider:before{background-position:right 1em top 50%}.ui.horizontal.divider:after{background-position:left 1em top 50%}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0;padding:0;width:auto;height:50%;line-height:0;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:'';z-index:3;border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(255,255,255,.1);width:0;height:calc(100% - 1rem)}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}@media only screen and (max-width:767.98px){.ui.grid .stackable.row .ui.vertical.divider,.ui.stackable.grid .ui.vertical.divider{display:table;white-space:nowrap;height:auto;margin:'';overflow:hidden;line-height:1;text-align:center;position:static;top:0;left:0;-webkit-transform:none;transform:none}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{left:0;border-left:none;border-right:none;content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:before{background-position:right 1em top 50%}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:after{background-position:left 1em top 50%}}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.horizontal.divider[class*="left aligned"]:before{display:none}.ui.horizontal.divider[class*="left aligned"]:after{width:100%}.ui.horizontal.divider[class*="right aligned"]:before{width:100%}.ui.horizontal.divider[class*="right aligned"]:after{display:none}.ui.hidden.divider{border-color:transparent!important}.ui.hidden.divider:after,.ui.hidden.divider:before{display:none}.ui.divider.inverted,.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:#fff}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(34,36,38,.15)!important;border-left-color:rgba(34,36,38,.15)!important;border-bottom-color:rgba(255,255,255,.15)!important;border-right-color:rgba(255,255,255,.15)!important}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}.ui.mini.divider{font-size:.8125rem}.ui.tiny.divider{font-size:.875rem}.ui.small.divider{font-size:.9375rem}.ui.large.divider{font-size:1.125rem}.ui.big.divider{font-size:1.3125rem}.ui.huge.divider{font-size:1.4375rem}.ui.massive.divider{font-size:1.6875rem}.ui.horizontal.divider:after,.ui.horizontal.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}}
\ No newline at end of file
diff --git a/ui/dist/components/grid.css b/ui/dist/components/grid.css
index 3920a8bd9f9..b1c6bf1576c 100644
--- a/ui/dist/components/grid.css
+++ b/ui/dist/components/grid.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Grid
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Grid
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -26,7 +26,7 @@
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
- padding: 0em;
+ padding: 0;
}
/*----------------------
@@ -95,7 +95,7 @@
-ms-flex-align: stretch;
align-items: stretch;
width: 100% !important;
- padding: 0rem;
+ padding: 0;
padding-top: 1rem;
padding-bottom: 1rem;
}
@@ -111,8 +111,8 @@
padding-bottom: 1rem;
}
.ui.grid > .row > .column {
- margin-top: 0em;
- margin-bottom: 0em;
+ margin-top: 0;
+ margin-bottom: 0;
}
/*-------------------
@@ -131,10 +131,10 @@
/* Collapse Margin on Consecutive Grid */
.ui.grid > .ui.grid:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.grid > .ui.grid:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Segment inside Aligned Grid */
@@ -151,7 +151,7 @@
margin: 1rem 1rem;
}
.ui.grid .column + .ui.vertical.divider {
- height: calc(50% - 1rem );
+ height: calc(50% - 1rem);
}
/* Remove Border on Last Horizontal Segment */
@@ -168,41 +168,41 @@
/*-----------------------
- Page Grid
--------------------------*/
+ Page Grid
+ -------------------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.page.grid {
width: auto;
- padding-left: 0em;
- padding-right: 0em;
- margin-left: 0em;
- margin-right: 0em;
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
}
}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.page.grid {
width: auto;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
padding-left: 2em;
padding-right: 2em;
}
}
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
.ui.page.grid {
width: auto;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
padding-left: 3%;
padding-right: 3%;
}
}
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
.ui.page.grid {
width: auto;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
padding-left: 15%;
padding-right: 15%;
}
@@ -210,8 +210,8 @@
@media only screen and (min-width: 1920px) {
.ui.page.grid {
width: auto;
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
padding-left: 23%;
padding-right: 23%;
}
@@ -459,7 +459,7 @@
/* Mobile Sizing Combinations */
-@media only screen and (min-width: 320px) and (max-width: 767px) {
+@media only screen and (min-width: 320px) and (max-width: 767.98px) {
.ui.grid > .row > [class*="one wide mobile"].column,
.ui.grid > .column.row > [class*="one wide mobile"].column,
.ui.grid > [class*="one wide mobile"].column,
@@ -559,7 +559,7 @@
}
/* Tablet Sizing Combinations */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.grid > .row > [class*="one wide tablet"].column,
.ui.grid > .column.row > [class*="one wide tablet"].column,
.ui.grid > [class*="one wide tablet"].column,
@@ -759,7 +759,7 @@
}
/* Large Monitor Sizing Combinations */
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
.ui.grid > .row > [class*="one wide large screen"].column,
.ui.grid > .column.row > [class*="one wide large screen"].column,
.ui.grid > [class*="one wide large screen"].column,
@@ -959,8 +959,8 @@
}
/*----------------------
- Centered
------------------------*/
+ Centered
+ -----------------------*/
.ui.centered.grid,
.ui.centered.grid > .row,
@@ -983,8 +983,8 @@
}
/*----------------------
- Relaxed
------------------------*/
+ Relaxed
+ -----------------------*/
.ui.relaxed.grid > .column:not(.row),
.ui.relaxed.grid > .row > .column,
@@ -1012,24 +1012,24 @@
}
/*----------------------
- Padded
------------------------*/
+ Padded
+ -----------------------*/
.ui.padded.grid:not(.vertically):not(.horizontally) {
- margin: 0em !important;
+ margin: 0 !important;
}
[class*="horizontally padded"].ui.grid {
- margin-left: 0em !important;
- margin-right: 0em !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
[class*="vertically padded"].ui.grid {
- margin-top: 0em !important;
- margin-bottom: 0em !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
}
/*----------------------
- "Floated"
------------------------*/
+ "Floated"
+ -----------------------*/
.ui.grid [class*="left floated"].column {
margin-right: auto;
@@ -1039,13 +1039,13 @@
}
/*----------------------
- Divided
------------------------*/
+ Divided
+ -----------------------*/
.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
.ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
}
/* Swap from padding to margin on columns to have dividers align */
@@ -1053,12 +1053,12 @@
.ui[class*="vertically divided"].grid > .row > .column {
margin-top: 1rem;
margin-bottom: 1rem;
- padding-top: 0rem;
- padding-bottom: 0rem;
+ padding-top: 0;
+ padding-bottom: 0;
}
.ui[class*="vertically divided"].grid > .row {
- margin-top: 0em;
- margin-bottom: 0em;
+ margin-top: 0;
+ margin-bottom: 0;
}
/* No divider on first column on row */
@@ -1070,13 +1070,13 @@
/* No space on top of first row */
.ui[class*="vertically divided"].grid > .row:first-child > .column {
- margin-top: 0em;
+ margin-top: 0;
}
/* Divided Row */
.ui.grid > .divided.row > .column {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
}
.ui.grid > .divided.row > .column:first-child {
-webkit-box-shadow: none;
@@ -1090,13 +1090,13 @@
.ui[class*="vertically divided"].grid > .row:before {
position: absolute;
content: "";
- top: 0em;
- left: 0px;
- width: calc(100% - 2rem );
+ top: 0;
+ left: 0;
+ width: calc(100% - 2rem);
height: 1px;
- margin: 0% 1rem;
- -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
+ margin: 0 1rem;
+ -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
/* Padded Horizontally Divided */
@@ -1114,8 +1114,8 @@
/* Inverted Divided */
.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
- box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
+ -webkit-box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
+ box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
}
.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
@@ -1123,43 +1123,43 @@
box-shadow: none;
}
.ui.inverted[class*="vertically divided"].grid > .row:before {
- -webkit-box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
- box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
+ -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
+ box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
}
/* Relaxed */
.ui.relaxed[class*="vertically divided"].grid > .row:before {
margin-left: 1.5rem;
margin-right: 1.5rem;
- width: calc(100% - 3rem );
+ width: calc(100% - 3rem);
}
.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
- margin-left: 5rem;
- margin-right: 5rem;
- width: calc(100% - 5rem );
+ margin-left: 2.5rem;
+ margin-right: 2.5rem;
+ width: calc(100% - 5rem);
}
/*----------------------
- Celled
------------------------*/
+ Celled
+ -----------------------*/
.ui.celled.grid {
width: 100%;
- margin: 1em 0em;
- -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5;
- box-shadow: 0px 0px 0px 1px #D4D4D5;
+ margin: 1em 0;
+ -webkit-box-shadow: 0 0 0 1px #D4D4D5;
+ box-shadow: 0 0 0 1px #D4D4D5;
}
.ui.celled.grid > .row {
width: 100% !important;
- margin: 0em;
- padding: 0em;
- -webkit-box-shadow: 0px -1px 0px 0px #D4D4D5;
- box-shadow: 0px -1px 0px 0px #D4D4D5;
+ margin: 0;
+ padding: 0;
+ -webkit-box-shadow: 0 -1px 0 0 #D4D4D5;
+ box-shadow: 0 -1px 0 0 #D4D4D5;
}
.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column {
- -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5;
- box-shadow: -1px 0px 0px 0px #D4D4D5;
+ -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
+ box-shadow: -1px 0 0 0 #D4D4D5;
}
.ui.celled.grid > .column:first-child,
.ui.celled.grid > .row > .column:first-child {
@@ -1183,7 +1183,7 @@
.ui[class*="internally celled"].grid {
-webkit-box-shadow: none;
box-shadow: none;
- margin: 0em;
+ margin: 0;
}
.ui[class*="internally celled"].grid > .row:first-child {
-webkit-box-shadow: none;
@@ -1195,8 +1195,8 @@
}
/*----------------------
- Vertically Aligned
------------------------*/
+ Vertically Aligned
+ -----------------------*/
/* Top Aligned */
@@ -1271,8 +1271,8 @@
}
/*----------------------
- Horizontally Centered
------------------------*/
+ Horizontally Centered
+ -----------------------*/
/* Left Aligned */
@@ -1329,126 +1329,94 @@
Colored
-----------------------*/
-.ui.grid > .row > .red.column,
-.ui.grid > .row > .orange.column,
-.ui.grid > .row > .yellow.column,
-.ui.grid > .row > .olive.column,
-.ui.grid > .row > .green.column,
-.ui.grid > .row > .teal.column,
-.ui.grid > .row > .blue.column,
-.ui.grid > .row > .violet.column,
-.ui.grid > .row > .purple.column,
-.ui.grid > .row > .pink.column,
-.ui.grid > .row > .brown.column,
-.ui.grid > .row > .grey.column,
-.ui.grid > .row > .black.column {
- margin-top: -1rem;
- margin-bottom: -1rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
+.ui.grid > .primary.row,
+.ui.grid > .primary.column,
+.ui.grid > .row > .primary.column {
+ background-color: #2185D0;
+ color: #FFFFFF;
+}
+.ui.grid > .secondary.row,
+.ui.grid > .secondary.column,
+.ui.grid > .row > .secondary.column {
+ background-color: #1B1C1D;
+ color: #FFFFFF;
}
-
-/* Red */
.ui.grid > .red.row,
.ui.grid > .red.column,
.ui.grid > .row > .red.column {
- background-color: #DB2828 !important;
+ background-color: #DB2828;
color: #FFFFFF;
}
-
-/* Orange */
.ui.grid > .orange.row,
.ui.grid > .orange.column,
.ui.grid > .row > .orange.column {
- background-color: #F2711C !important;
+ background-color: #F2711C;
color: #FFFFFF;
}
-
-/* Yellow */
.ui.grid > .yellow.row,
.ui.grid > .yellow.column,
.ui.grid > .row > .yellow.column {
- background-color: #FBBD08 !important;
+ background-color: #FBBD08;
color: #FFFFFF;
}
-
-/* Olive */
.ui.grid > .olive.row,
.ui.grid > .olive.column,
.ui.grid > .row > .olive.column {
- background-color: #B5CC18 !important;
+ background-color: #B5CC18;
color: #FFFFFF;
}
-
-/* Green */
.ui.grid > .green.row,
.ui.grid > .green.column,
.ui.grid > .row > .green.column {
- background-color: #21BA45 !important;
+ background-color: #21BA45;
color: #FFFFFF;
}
-
-/* Teal */
.ui.grid > .teal.row,
.ui.grid > .teal.column,
.ui.grid > .row > .teal.column {
- background-color: #00B5AD !important;
+ background-color: #00B5AD;
color: #FFFFFF;
}
-
-/* Blue */
.ui.grid > .blue.row,
.ui.grid > .blue.column,
.ui.grid > .row > .blue.column {
- background-color: #2185D0 !important;
+ background-color: #2185D0;
color: #FFFFFF;
}
-
-/* Violet */
.ui.grid > .violet.row,
.ui.grid > .violet.column,
.ui.grid > .row > .violet.column {
- background-color: #6435C9 !important;
+ background-color: #6435C9;
color: #FFFFFF;
}
-
-/* Purple */
.ui.grid > .purple.row,
.ui.grid > .purple.column,
.ui.grid > .row > .purple.column {
- background-color: #A333C8 !important;
+ background-color: #A333C8;
color: #FFFFFF;
}
-
-/* Pink */
.ui.grid > .pink.row,
.ui.grid > .pink.column,
.ui.grid > .row > .pink.column {
- background-color: #E03997 !important;
+ background-color: #E03997;
color: #FFFFFF;
}
-
-/* Brown */
.ui.grid > .brown.row,
.ui.grid > .brown.column,
.ui.grid > .row > .brown.column {
- background-color: #A5673F !important;
+ background-color: #A5673F;
color: #FFFFFF;
}
-
-/* Grey */
.ui.grid > .grey.row,
.ui.grid > .grey.column,
.ui.grid > .row > .grey.column {
- background-color: #767676 !important;
+ background-color: #767676;
color: #FFFFFF;
}
-
-/* Black */
.ui.grid > .black.row,
.ui.grid > .black.column,
.ui.grid > .row > .black.column {
- background-color: #1B1C1D !important;
+ background-color: #1B1C1D;
color: #FFFFFF;
}
@@ -1473,12 +1441,12 @@
}
/*----------------------
- Reverse
------------------------*/
+ Reverse
+ -----------------------*/
/* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui[class*="mobile reversed"].grid,
.ui[class*="mobile reversed"].grid > .row,
.ui.grid > [class*="mobile reversed"].row {
@@ -1498,8 +1466,8 @@
/* Divided Reversed */
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
}
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
@@ -1509,8 +1477,8 @@
/* Vertically Divided Reversed */
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
- -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
-webkit-box-shadow: none;
@@ -1519,8 +1487,8 @@
/* Celled Reversed */
.ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5;
- box-shadow: -1px 0px 0px 0px #D4D4D5;
+ -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
+ box-shadow: -1px 0 0 0 #D4D4D5;
}
.ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
-webkit-box-shadow: none;
@@ -1529,7 +1497,7 @@
}
/* Tablet */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui[class*="tablet reversed"].grid,
.ui[class*="tablet reversed"].grid > .row,
.ui.grid > [class*="tablet reversed"].row {
@@ -1548,8 +1516,8 @@
/* Divided Reversed */
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
}
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
@@ -1559,8 +1527,8 @@
/* Vertically Divided Reversed */
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
- -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
-webkit-box-shadow: none;
@@ -1569,8 +1537,8 @@
/* Celled Reversed */
.ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5;
- box-shadow: -1px 0px 0px 0px #D4D4D5;
+ -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
+ box-shadow: -1px 0 0 0 #D4D4D5;
}
.ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
-webkit-box-shadow: none;
@@ -1598,8 +1566,8 @@
/* Divided Reversed */
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
}
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
@@ -1609,8 +1577,8 @@
/* Vertically Divided Reversed */
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
- -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
}
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
-webkit-box-shadow: none;
@@ -1619,8 +1587,8 @@
/* Celled Reversed */
.ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
- -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5;
- box-shadow: -1px 0px 0px 0px #D4D4D5;
+ -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
+ box-shadow: -1px 0 0 0 #D4D4D5;
}
.ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
-webkit-box-shadow: none;
@@ -1629,19 +1597,19 @@
}
/*-------------------
- Doubling
---------------------*/
+ Doubling
+ --------------------*/
/* Tablet Only */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.doubling.grid {
width: auto;
}
.ui.grid > .doubling.row,
.ui.doubling.grid > .row {
- margin: 0em !important;
- padding: 0em !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
@@ -1650,7 +1618,7 @@
padding-bottom: 1rem !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
- margin: 0em;
+ margin: 0;
}
.ui[class*="two column"].doubling.grid > .row > .column,
.ui[class*="two column"].doubling.grid > .column:not(.row),
@@ -1730,17 +1698,17 @@
}
/* Mobile Only */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.grid > .doubling.row,
.ui.doubling.grid > .row {
- margin: 0em !important;
- padding: 0em !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
.ui.grid > .doubling.row > .column,
.ui.doubling.grid > .row > .column {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
- margin: 0em !important;
+ margin: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
@@ -1822,14 +1790,14 @@
}
/*-------------------
- Stackable
---------------------*/
+ Stackable
+ --------------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.stackable.grid {
width: auto;
- margin-left: 0em !important;
- margin-right: 0em !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
.ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column,
@@ -1837,23 +1805,23 @@
.ui.stackable.grid > .column.row > .column,
.ui.stackable.grid > .row > .column,
.ui.stackable.grid > .column:not(.row),
- .ui.grid > .stackable.stackable.row > .column {
+ .ui.grid > .stackable.stackable.stackable.row > .column {
width: 100% !important;
- margin: 0em 0em !important;
+ margin: 0 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
- padding: 1rem 1rem !important;
+ padding: 1rem 1rem;
}
.ui.stackable.grid:not(.vertically) > .row {
- margin: 0em;
- padding: 0em;
+ margin: 0;
+ padding: 0;
}
/* Coupling */
.ui.container > .ui.stackable.grid > .column,
.ui.container > .ui.stackable.grid > .row > .column {
- padding-left: 0em !important;
- padding-right: 0em !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
}
/* Don't pad inside segment or nested grid */
@@ -1892,8 +1860,8 @@
}
.ui.stackable.divided:not(.vertically).grid > .column:not(.row),
.ui.stackable.divided:not(.vertically).grid > .row > .column {
- padding-left: 0em !important;
- padding-right: 0em !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
}
}
@@ -1905,7 +1873,7 @@
/* These include arbitrary class repetitions for forced specificity */
/* Mobile Only Hide */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui[class*="tablet only"].grid.grid.grid:not(.mobile),
.ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
.ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
@@ -1933,7 +1901,7 @@
}
/* Tablet Only Hide */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui[class*="mobile only"].grid.grid.grid:not(.tablet),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
@@ -1961,7 +1929,7 @@
}
/* Computer Only Hide */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
@@ -1989,7 +1957,7 @@
}
/* Large Screen Only Hide */
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
@@ -2026,6 +1994,78 @@
}
}
+/*-----------------
+ Compact
+ -----------------*/
+
+.ui.ui.ui.compact.grid > .column:not(.row),
+.ui.ui.ui.compact.grid > .row > .column {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+.ui.ui.ui.compact.grid > * {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+/* Row */
+.ui.ui.ui.compact.grid > .row {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+/* Columns */
+.ui.ui.ui.compact.grid > .column:not(.row) {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+/* Relaxed + Celled */
+.ui.compact.relaxed.celled.grid > .column:not(.row),
+.ui.compact.relaxed.celled.grid > .row > .column {
+ padding: 0.75em;
+}
+.ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
+.ui.compact[class*="very relaxed"].celled.grid > .row > .column {
+ padding: 1em;
+}
+
+/*-----------------
+ Very compact
+ -----------------*/
+
+.ui[class*="very compact"].grid > .column:not(.row),
+.ui[class*="very compact"].grid > .row > .column {
+ padding-left: 0.25rem;
+ padding-right: 0.5rem;
+}
+.ui[class*="very compact"].grid > * {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+/* Row */
+.ui[class*="very compact"].grid > .row {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+/* Columns */
+.ui[class*="very compact"].grid > .column:not(.row) {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+/* Relaxed + Celled */
+.ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
+.ui[class*="very compact"].relaxed.celled.grid > .row > .column {
+ padding: 0.375em;
+}
+.ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
+.ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
+ padding: 0.5em;
+}
+
/*******************************
Theme Overrides
diff --git a/ui/dist/components/grid.min.css b/ui/dist/components/grid.min.css
index 0c8ec55c8fb..500c98d2c85 100644
--- a/ui/dist/components/grid.min.css
+++ b/ui/dist/components/grid.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Grid
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Grid
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0}.ui.grid{margin-top:-1rem;margin-bottom:-1rem;margin-left:-1rem;margin-right:-1rem}.ui.relaxed.grid{margin-left:-1.5rem;margin-right:-1.5rem}.ui[class*="very relaxed"].grid{margin-left:-2.5rem;margin-right:-2.5rem}.ui.grid+.grid{margin-top:1rem}.ui.grid>.column:not(.row),.ui.grid>.row>.column{position:relative;display:inline-block;width:6.25%;padding-left:1rem;padding-right:1rem;vertical-align:top}.ui.grid>*{padding-left:1rem;padding-right:1rem}.ui.grid>.row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%!important;padding:0;padding-top:1rem;padding-bottom:1rem}.ui.grid>.column:not(.row){padding-top:1rem;padding-bottom:1rem}.ui.grid>.row>.column{margin-top:0;margin-bottom:0}.ui.grid>.row>.column>img,.ui.grid>.row>img{max-width:100%}.ui.grid>.ui.grid:first-child{margin-top:0}.ui.grid>.ui.grid:last-child{margin-bottom:0}.ui.aligned.grid .column>.segment:not(.compact):not(.attached),.ui.grid .aligned.row>.column>.segment:not(.compact):not(.attached){width:100%}.ui.grid .row+.ui.divider{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:1rem 1rem}.ui.grid .column+.ui.vertical.divider{height:calc(50% - 1rem)}.ui.grid>.column:last-child>.horizontal.segment,.ui.grid>.row>.column:last-child>.horizontal.segment{-webkit-box-shadow:none;box-shadow:none}@media only screen and (max-width:767px){.ui.page.grid{width:auto;padding-left:0;padding-right:0;margin-left:0;margin-right:0}}@media only screen and (min-width:768px) and (max-width:991px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:2em;padding-right:2em}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:3%;padding-right:3%}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:15%;padding-right:15%}}@media only screen and (min-width:1920px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:23%;padding-right:23%}}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui[class*="one column"].grid>.column:not(.row),.ui[class*="one column"].grid>.row>.column{width:100%}.ui[class*="two column"].grid>.column:not(.row),.ui[class*="two column"].grid>.row>.column{width:50%}.ui[class*="three column"].grid>.column:not(.row),.ui[class*="three column"].grid>.row>.column{width:33.33333333%}.ui[class*="four column"].grid>.column:not(.row),.ui[class*="four column"].grid>.row>.column{width:25%}.ui[class*="five column"].grid>.column:not(.row),.ui[class*="five column"].grid>.row>.column{width:20%}.ui[class*="six column"].grid>.column:not(.row),.ui[class*="six column"].grid>.row>.column{width:16.66666667%}.ui[class*="seven column"].grid>.column:not(.row),.ui[class*="seven column"].grid>.row>.column{width:14.28571429%}.ui[class*="eight column"].grid>.column:not(.row),.ui[class*="eight column"].grid>.row>.column{width:12.5%}.ui[class*="nine column"].grid>.column:not(.row),.ui[class*="nine column"].grid>.row>.column{width:11.11111111%}.ui[class*="ten column"].grid>.column:not(.row),.ui[class*="ten column"].grid>.row>.column{width:10%}.ui[class*="eleven column"].grid>.column:not(.row),.ui[class*="eleven column"].grid>.row>.column{width:9.09090909%}.ui[class*="twelve column"].grid>.column:not(.row),.ui[class*="twelve column"].grid>.row>.column{width:8.33333333%}.ui[class*="thirteen column"].grid>.column:not(.row),.ui[class*="thirteen column"].grid>.row>.column{width:7.69230769%}.ui[class*="fourteen column"].grid>.column:not(.row),.ui[class*="fourteen column"].grid>.row>.column{width:7.14285714%}.ui[class*="fifteen column"].grid>.column:not(.row),.ui[class*="fifteen column"].grid>.row>.column{width:6.66666667%}.ui[class*="sixteen column"].grid>.column:not(.row),.ui[class*="sixteen column"].grid>.row>.column{width:6.25%}.ui.grid>[class*="one column"].row>.column{width:100%!important}.ui.grid>[class*="two column"].row>.column{width:50%!important}.ui.grid>[class*="three column"].row>.column{width:33.33333333%!important}.ui.grid>[class*="four column"].row>.column{width:25%!important}.ui.grid>[class*="five column"].row>.column{width:20%!important}.ui.grid>[class*="six column"].row>.column{width:16.66666667%!important}.ui.grid>[class*="seven column"].row>.column{width:14.28571429%!important}.ui.grid>[class*="eight column"].row>.column{width:12.5%!important}.ui.grid>[class*="nine column"].row>.column{width:11.11111111%!important}.ui.grid>[class*="ten column"].row>.column{width:10%!important}.ui.grid>[class*="eleven column"].row>.column{width:9.09090909%!important}.ui.grid>[class*="twelve column"].row>.column{width:8.33333333%!important}.ui.grid>[class*="thirteen column"].row>.column{width:7.69230769%!important}.ui.grid>[class*="fourteen column"].row>.column{width:7.14285714%!important}.ui.grid>[class*="fifteen column"].row>.column{width:6.66666667%!important}.ui.grid>[class*="sixteen column"].row>.column{width:6.25%!important}.ui.celled.page.grid{-webkit-box-shadow:none;box-shadow:none}.ui.column.grid>[class*="one wide"].column,.ui.grid>.column.row>[class*="one wide"].column,.ui.grid>.row>[class*="one wide"].column,.ui.grid>[class*="one wide"].column{width:6.25%!important}.ui.column.grid>[class*="two wide"].column,.ui.grid>.column.row>[class*="two wide"].column,.ui.grid>.row>[class*="two wide"].column,.ui.grid>[class*="two wide"].column{width:12.5%!important}.ui.column.grid>[class*="three wide"].column,.ui.grid>.column.row>[class*="three wide"].column,.ui.grid>.row>[class*="three wide"].column,.ui.grid>[class*="three wide"].column{width:18.75%!important}.ui.column.grid>[class*="four wide"].column,.ui.grid>.column.row>[class*="four wide"].column,.ui.grid>.row>[class*="four wide"].column,.ui.grid>[class*="four wide"].column{width:25%!important}.ui.column.grid>[class*="five wide"].column,.ui.grid>.column.row>[class*="five wide"].column,.ui.grid>.row>[class*="five wide"].column,.ui.grid>[class*="five wide"].column{width:31.25%!important}.ui.column.grid>[class*="six wide"].column,.ui.grid>.column.row>[class*="six wide"].column,.ui.grid>.row>[class*="six wide"].column,.ui.grid>[class*="six wide"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide"].column,.ui.grid>.column.row>[class*="seven wide"].column,.ui.grid>.row>[class*="seven wide"].column,.ui.grid>[class*="seven wide"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide"].column,.ui.grid>.column.row>[class*="eight wide"].column,.ui.grid>.row>[class*="eight wide"].column,.ui.grid>[class*="eight wide"].column{width:50%!important}.ui.column.grid>[class*="nine wide"].column,.ui.grid>.column.row>[class*="nine wide"].column,.ui.grid>.row>[class*="nine wide"].column,.ui.grid>[class*="nine wide"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide"].column,.ui.grid>.column.row>[class*="ten wide"].column,.ui.grid>.row>[class*="ten wide"].column,.ui.grid>[class*="ten wide"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide"].column,.ui.grid>.column.row>[class*="eleven wide"].column,.ui.grid>.row>[class*="eleven wide"].column,.ui.grid>[class*="eleven wide"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide"].column,.ui.grid>.column.row>[class*="twelve wide"].column,.ui.grid>.row>[class*="twelve wide"].column,.ui.grid>[class*="twelve wide"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide"].column,.ui.grid>.column.row>[class*="thirteen wide"].column,.ui.grid>.row>[class*="thirteen wide"].column,.ui.grid>[class*="thirteen wide"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide"].column,.ui.grid>.column.row>[class*="fourteen wide"].column,.ui.grid>.row>[class*="fourteen wide"].column,.ui.grid>[class*="fourteen wide"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide"].column,.ui.grid>.column.row>[class*="fifteen wide"].column,.ui.grid>.row>[class*="fifteen wide"].column,.ui.grid>[class*="fifteen wide"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide"].column,.ui.grid>.column.row>[class*="sixteen wide"].column,.ui.grid>.row>[class*="sixteen wide"].column,.ui.grid>[class*="sixteen wide"].column{width:100%!important}@media only screen and (min-width:320px) and (max-width:767px){.ui.column.grid>[class*="one wide mobile"].column,.ui.grid>.column.row>[class*="one wide mobile"].column,.ui.grid>.row>[class*="one wide mobile"].column,.ui.grid>[class*="one wide mobile"].column{width:6.25%!important}.ui.column.grid>[class*="two wide mobile"].column,.ui.grid>.column.row>[class*="two wide mobile"].column,.ui.grid>.row>[class*="two wide mobile"].column,.ui.grid>[class*="two wide mobile"].column{width:12.5%!important}.ui.column.grid>[class*="three wide mobile"].column,.ui.grid>.column.row>[class*="three wide mobile"].column,.ui.grid>.row>[class*="three wide mobile"].column,.ui.grid>[class*="three wide mobile"].column{width:18.75%!important}.ui.column.grid>[class*="four wide mobile"].column,.ui.grid>.column.row>[class*="four wide mobile"].column,.ui.grid>.row>[class*="four wide mobile"].column,.ui.grid>[class*="four wide mobile"].column{width:25%!important}.ui.column.grid>[class*="five wide mobile"].column,.ui.grid>.column.row>[class*="five wide mobile"].column,.ui.grid>.row>[class*="five wide mobile"].column,.ui.grid>[class*="five wide mobile"].column{width:31.25%!important}.ui.column.grid>[class*="six wide mobile"].column,.ui.grid>.column.row>[class*="six wide mobile"].column,.ui.grid>.row>[class*="six wide mobile"].column,.ui.grid>[class*="six wide mobile"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide mobile"].column,.ui.grid>.column.row>[class*="seven wide mobile"].column,.ui.grid>.row>[class*="seven wide mobile"].column,.ui.grid>[class*="seven wide mobile"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide mobile"].column,.ui.grid>.column.row>[class*="eight wide mobile"].column,.ui.grid>.row>[class*="eight wide mobile"].column,.ui.grid>[class*="eight wide mobile"].column{width:50%!important}.ui.column.grid>[class*="nine wide mobile"].column,.ui.grid>.column.row>[class*="nine wide mobile"].column,.ui.grid>.row>[class*="nine wide mobile"].column,.ui.grid>[class*="nine wide mobile"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide mobile"].column,.ui.grid>.column.row>[class*="ten wide mobile"].column,.ui.grid>.row>[class*="ten wide mobile"].column,.ui.grid>[class*="ten wide mobile"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide mobile"].column,.ui.grid>.column.row>[class*="eleven wide mobile"].column,.ui.grid>.row>[class*="eleven wide mobile"].column,.ui.grid>[class*="eleven wide mobile"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide mobile"].column,.ui.grid>.column.row>[class*="twelve wide mobile"].column,.ui.grid>.row>[class*="twelve wide mobile"].column,.ui.grid>[class*="twelve wide mobile"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide mobile"].column,.ui.grid>.column.row>[class*="thirteen wide mobile"].column,.ui.grid>.row>[class*="thirteen wide mobile"].column,.ui.grid>[class*="thirteen wide mobile"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide mobile"].column,.ui.grid>.column.row>[class*="fourteen wide mobile"].column,.ui.grid>.row>[class*="fourteen wide mobile"].column,.ui.grid>[class*="fourteen wide mobile"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide mobile"].column,.ui.grid>.column.row>[class*="fifteen wide mobile"].column,.ui.grid>.row>[class*="fifteen wide mobile"].column,.ui.grid>[class*="fifteen wide mobile"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide mobile"].column,.ui.grid>.column.row>[class*="sixteen wide mobile"].column,.ui.grid>.row>[class*="sixteen wide mobile"].column,.ui.grid>[class*="sixteen wide mobile"].column{width:100%!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.column.grid>[class*="one wide tablet"].column,.ui.grid>.column.row>[class*="one wide tablet"].column,.ui.grid>.row>[class*="one wide tablet"].column,.ui.grid>[class*="one wide tablet"].column{width:6.25%!important}.ui.column.grid>[class*="two wide tablet"].column,.ui.grid>.column.row>[class*="two wide tablet"].column,.ui.grid>.row>[class*="two wide tablet"].column,.ui.grid>[class*="two wide tablet"].column{width:12.5%!important}.ui.column.grid>[class*="three wide tablet"].column,.ui.grid>.column.row>[class*="three wide tablet"].column,.ui.grid>.row>[class*="three wide tablet"].column,.ui.grid>[class*="three wide tablet"].column{width:18.75%!important}.ui.column.grid>[class*="four wide tablet"].column,.ui.grid>.column.row>[class*="four wide tablet"].column,.ui.grid>.row>[class*="four wide tablet"].column,.ui.grid>[class*="four wide tablet"].column{width:25%!important}.ui.column.grid>[class*="five wide tablet"].column,.ui.grid>.column.row>[class*="five wide tablet"].column,.ui.grid>.row>[class*="five wide tablet"].column,.ui.grid>[class*="five wide tablet"].column{width:31.25%!important}.ui.column.grid>[class*="six wide tablet"].column,.ui.grid>.column.row>[class*="six wide tablet"].column,.ui.grid>.row>[class*="six wide tablet"].column,.ui.grid>[class*="six wide tablet"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide tablet"].column,.ui.grid>.column.row>[class*="seven wide tablet"].column,.ui.grid>.row>[class*="seven wide tablet"].column,.ui.grid>[class*="seven wide tablet"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide tablet"].column,.ui.grid>.column.row>[class*="eight wide tablet"].column,.ui.grid>.row>[class*="eight wide tablet"].column,.ui.grid>[class*="eight wide tablet"].column{width:50%!important}.ui.column.grid>[class*="nine wide tablet"].column,.ui.grid>.column.row>[class*="nine wide tablet"].column,.ui.grid>.row>[class*="nine wide tablet"].column,.ui.grid>[class*="nine wide tablet"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide tablet"].column,.ui.grid>.column.row>[class*="ten wide tablet"].column,.ui.grid>.row>[class*="ten wide tablet"].column,.ui.grid>[class*="ten wide tablet"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide tablet"].column,.ui.grid>.column.row>[class*="eleven wide tablet"].column,.ui.grid>.row>[class*="eleven wide tablet"].column,.ui.grid>[class*="eleven wide tablet"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide tablet"].column,.ui.grid>.column.row>[class*="twelve wide tablet"].column,.ui.grid>.row>[class*="twelve wide tablet"].column,.ui.grid>[class*="twelve wide tablet"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide tablet"].column,.ui.grid>.column.row>[class*="thirteen wide tablet"].column,.ui.grid>.row>[class*="thirteen wide tablet"].column,.ui.grid>[class*="thirteen wide tablet"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide tablet"].column,.ui.grid>.column.row>[class*="fourteen wide tablet"].column,.ui.grid>.row>[class*="fourteen wide tablet"].column,.ui.grid>[class*="fourteen wide tablet"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide tablet"].column,.ui.grid>.column.row>[class*="fifteen wide tablet"].column,.ui.grid>.row>[class*="fifteen wide tablet"].column,.ui.grid>[class*="fifteen wide tablet"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide tablet"].column,.ui.grid>.column.row>[class*="sixteen wide tablet"].column,.ui.grid>.row>[class*="sixteen wide tablet"].column,.ui.grid>[class*="sixteen wide tablet"].column{width:100%!important}}@media only screen and (min-width:992px){.ui.column.grid>[class*="one wide computer"].column,.ui.grid>.column.row>[class*="one wide computer"].column,.ui.grid>.row>[class*="one wide computer"].column,.ui.grid>[class*="one wide computer"].column{width:6.25%!important}.ui.column.grid>[class*="two wide computer"].column,.ui.grid>.column.row>[class*="two wide computer"].column,.ui.grid>.row>[class*="two wide computer"].column,.ui.grid>[class*="two wide computer"].column{width:12.5%!important}.ui.column.grid>[class*="three wide computer"].column,.ui.grid>.column.row>[class*="three wide computer"].column,.ui.grid>.row>[class*="three wide computer"].column,.ui.grid>[class*="three wide computer"].column{width:18.75%!important}.ui.column.grid>[class*="four wide computer"].column,.ui.grid>.column.row>[class*="four wide computer"].column,.ui.grid>.row>[class*="four wide computer"].column,.ui.grid>[class*="four wide computer"].column{width:25%!important}.ui.column.grid>[class*="five wide computer"].column,.ui.grid>.column.row>[class*="five wide computer"].column,.ui.grid>.row>[class*="five wide computer"].column,.ui.grid>[class*="five wide computer"].column{width:31.25%!important}.ui.column.grid>[class*="six wide computer"].column,.ui.grid>.column.row>[class*="six wide computer"].column,.ui.grid>.row>[class*="six wide computer"].column,.ui.grid>[class*="six wide computer"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide computer"].column,.ui.grid>.column.row>[class*="seven wide computer"].column,.ui.grid>.row>[class*="seven wide computer"].column,.ui.grid>[class*="seven wide computer"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide computer"].column,.ui.grid>.column.row>[class*="eight wide computer"].column,.ui.grid>.row>[class*="eight wide computer"].column,.ui.grid>[class*="eight wide computer"].column{width:50%!important}.ui.column.grid>[class*="nine wide computer"].column,.ui.grid>.column.row>[class*="nine wide computer"].column,.ui.grid>.row>[class*="nine wide computer"].column,.ui.grid>[class*="nine wide computer"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide computer"].column,.ui.grid>.column.row>[class*="ten wide computer"].column,.ui.grid>.row>[class*="ten wide computer"].column,.ui.grid>[class*="ten wide computer"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide computer"].column,.ui.grid>.column.row>[class*="eleven wide computer"].column,.ui.grid>.row>[class*="eleven wide computer"].column,.ui.grid>[class*="eleven wide computer"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide computer"].column,.ui.grid>.column.row>[class*="twelve wide computer"].column,.ui.grid>.row>[class*="twelve wide computer"].column,.ui.grid>[class*="twelve wide computer"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide computer"].column,.ui.grid>.column.row>[class*="thirteen wide computer"].column,.ui.grid>.row>[class*="thirteen wide computer"].column,.ui.grid>[class*="thirteen wide computer"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide computer"].column,.ui.grid>.column.row>[class*="fourteen wide computer"].column,.ui.grid>.row>[class*="fourteen wide computer"].column,.ui.grid>[class*="fourteen wide computer"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide computer"].column,.ui.grid>.column.row>[class*="fifteen wide computer"].column,.ui.grid>.row>[class*="fifteen wide computer"].column,.ui.grid>[class*="fifteen wide computer"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide computer"].column,.ui.grid>.column.row>[class*="sixteen wide computer"].column,.ui.grid>.row>[class*="sixteen wide computer"].column,.ui.grid>[class*="sixteen wide computer"].column{width:100%!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.column.grid>[class*="one wide large screen"].column,.ui.grid>.column.row>[class*="one wide large screen"].column,.ui.grid>.row>[class*="one wide large screen"].column,.ui.grid>[class*="one wide large screen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide large screen"].column,.ui.grid>.column.row>[class*="two wide large screen"].column,.ui.grid>.row>[class*="two wide large screen"].column,.ui.grid>[class*="two wide large screen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide large screen"].column,.ui.grid>.column.row>[class*="three wide large screen"].column,.ui.grid>.row>[class*="three wide large screen"].column,.ui.grid>[class*="three wide large screen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide large screen"].column,.ui.grid>.column.row>[class*="four wide large screen"].column,.ui.grid>.row>[class*="four wide large screen"].column,.ui.grid>[class*="four wide large screen"].column{width:25%!important}.ui.column.grid>[class*="five wide large screen"].column,.ui.grid>.column.row>[class*="five wide large screen"].column,.ui.grid>.row>[class*="five wide large screen"].column,.ui.grid>[class*="five wide large screen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide large screen"].column,.ui.grid>.column.row>[class*="six wide large screen"].column,.ui.grid>.row>[class*="six wide large screen"].column,.ui.grid>[class*="six wide large screen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide large screen"].column,.ui.grid>.column.row>[class*="seven wide large screen"].column,.ui.grid>.row>[class*="seven wide large screen"].column,.ui.grid>[class*="seven wide large screen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide large screen"].column,.ui.grid>.column.row>[class*="eight wide large screen"].column,.ui.grid>.row>[class*="eight wide large screen"].column,.ui.grid>[class*="eight wide large screen"].column{width:50%!important}.ui.column.grid>[class*="nine wide large screen"].column,.ui.grid>.column.row>[class*="nine wide large screen"].column,.ui.grid>.row>[class*="nine wide large screen"].column,.ui.grid>[class*="nine wide large screen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide large screen"].column,.ui.grid>.column.row>[class*="ten wide large screen"].column,.ui.grid>.row>[class*="ten wide large screen"].column,.ui.grid>[class*="ten wide large screen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide large screen"].column,.ui.grid>.column.row>[class*="eleven wide large screen"].column,.ui.grid>.row>[class*="eleven wide large screen"].column,.ui.grid>[class*="eleven wide large screen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide large screen"].column,.ui.grid>.column.row>[class*="twelve wide large screen"].column,.ui.grid>.row>[class*="twelve wide large screen"].column,.ui.grid>[class*="twelve wide large screen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide large screen"].column,.ui.grid>.column.row>[class*="thirteen wide large screen"].column,.ui.grid>.row>[class*="thirteen wide large screen"].column,.ui.grid>[class*="thirteen wide large screen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide large screen"].column,.ui.grid>.column.row>[class*="fourteen wide large screen"].column,.ui.grid>.row>[class*="fourteen wide large screen"].column,.ui.grid>[class*="fourteen wide large screen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide large screen"].column,.ui.grid>.column.row>[class*="fifteen wide large screen"].column,.ui.grid>.row>[class*="fifteen wide large screen"].column,.ui.grid>[class*="fifteen wide large screen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide large screen"].column,.ui.grid>.column.row>[class*="sixteen wide large screen"].column,.ui.grid>.row>[class*="sixteen wide large screen"].column,.ui.grid>[class*="sixteen wide large screen"].column{width:100%!important}}@media only screen and (min-width:1920px){.ui.column.grid>[class*="one wide widescreen"].column,.ui.grid>.column.row>[class*="one wide widescreen"].column,.ui.grid>.row>[class*="one wide widescreen"].column,.ui.grid>[class*="one wide widescreen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide widescreen"].column,.ui.grid>.column.row>[class*="two wide widescreen"].column,.ui.grid>.row>[class*="two wide widescreen"].column,.ui.grid>[class*="two wide widescreen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide widescreen"].column,.ui.grid>.column.row>[class*="three wide widescreen"].column,.ui.grid>.row>[class*="three wide widescreen"].column,.ui.grid>[class*="three wide widescreen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide widescreen"].column,.ui.grid>.column.row>[class*="four wide widescreen"].column,.ui.grid>.row>[class*="four wide widescreen"].column,.ui.grid>[class*="four wide widescreen"].column{width:25%!important}.ui.column.grid>[class*="five wide widescreen"].column,.ui.grid>.column.row>[class*="five wide widescreen"].column,.ui.grid>.row>[class*="five wide widescreen"].column,.ui.grid>[class*="five wide widescreen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide widescreen"].column,.ui.grid>.column.row>[class*="six wide widescreen"].column,.ui.grid>.row>[class*="six wide widescreen"].column,.ui.grid>[class*="six wide widescreen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide widescreen"].column,.ui.grid>.column.row>[class*="seven wide widescreen"].column,.ui.grid>.row>[class*="seven wide widescreen"].column,.ui.grid>[class*="seven wide widescreen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide widescreen"].column,.ui.grid>.column.row>[class*="eight wide widescreen"].column,.ui.grid>.row>[class*="eight wide widescreen"].column,.ui.grid>[class*="eight wide widescreen"].column{width:50%!important}.ui.column.grid>[class*="nine wide widescreen"].column,.ui.grid>.column.row>[class*="nine wide widescreen"].column,.ui.grid>.row>[class*="nine wide widescreen"].column,.ui.grid>[class*="nine wide widescreen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide widescreen"].column,.ui.grid>.column.row>[class*="ten wide widescreen"].column,.ui.grid>.row>[class*="ten wide widescreen"].column,.ui.grid>[class*="ten wide widescreen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide widescreen"].column,.ui.grid>.column.row>[class*="eleven wide widescreen"].column,.ui.grid>.row>[class*="eleven wide widescreen"].column,.ui.grid>[class*="eleven wide widescreen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide widescreen"].column,.ui.grid>.column.row>[class*="twelve wide widescreen"].column,.ui.grid>.row>[class*="twelve wide widescreen"].column,.ui.grid>[class*="twelve wide widescreen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide widescreen"].column,.ui.grid>.column.row>[class*="thirteen wide widescreen"].column,.ui.grid>.row>[class*="thirteen wide widescreen"].column,.ui.grid>[class*="thirteen wide widescreen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide widescreen"].column,.ui.grid>.column.row>[class*="fourteen wide widescreen"].column,.ui.grid>.row>[class*="fourteen wide widescreen"].column,.ui.grid>[class*="fourteen wide widescreen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide widescreen"].column,.ui.grid>.column.row>[class*="fifteen wide widescreen"].column,.ui.grid>.row>[class*="fifteen wide widescreen"].column,.ui.grid>[class*="fifteen wide widescreen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide widescreen"].column,.ui.grid>.column.row>[class*="sixteen wide widescreen"].column,.ui.grid>.row>[class*="sixteen wide widescreen"].column,.ui.grid>[class*="sixteen wide widescreen"].column{width:100%!important}}.ui.centered.grid,.ui.centered.grid>.row,.ui.grid>.centered.row{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.grid>.column:not(.aligned):not(.justified):not(.row),.ui.centered.grid>.row>.column:not(.aligned):not(.justified),.ui.grid .centered.row>.column:not(.aligned):not(.justified){text-align:left}.ui.grid>.centered.column,.ui.grid>.row>.centered.column{display:block;margin-left:auto;margin-right:auto}.ui.grid>.relaxed.row>.column,.ui.relaxed.grid>.column:not(.row),.ui.relaxed.grid>.row>.column{padding-left:1.5rem;padding-right:1.5rem}.ui.grid>[class*="very relaxed"].row>.column,.ui[class*="very relaxed"].grid>.column:not(.row),.ui[class*="very relaxed"].grid>.row>.column{padding-left:2.5rem;padding-right:2.5rem}.ui.grid .relaxed.row+.ui.divider,.ui.relaxed.grid .row+.ui.divider{margin-left:1.5rem;margin-right:1.5rem}.ui.grid [class*="very relaxed"].row+.ui.divider,.ui[class*="very relaxed"].grid .row+.ui.divider{margin-left:2.5rem;margin-right:2.5rem}.ui.padded.grid:not(.vertically):not(.horizontally){margin:0!important}[class*="horizontally padded"].ui.grid{margin-left:0!important;margin-right:0!important}[class*="vertically padded"].ui.grid{margin-top:0!important;margin-bottom:0!important}.ui.grid [class*="left floated"].column{margin-right:auto}.ui.grid [class*="right floated"].column{margin-left:auto}.ui.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="vertically divided"].grid>.column:not(.row),.ui[class*="vertically divided"].grid>.row>.column{margin-top:1rem;margin-bottom:1rem;padding-top:0;padding-bottom:0}.ui[class*="vertically divided"].grid>.row{margin-top:0;margin-bottom:0}.ui.divided.grid:not([class*="vertically divided"])>.column:first-child,.ui.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row:first-child>.column{margin-top:0}.ui.grid>.divided.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui.grid>.divided.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row{position:relative}.ui[class*="vertically divided"].grid>.row:before{position:absolute;content:"";top:0;left:0;width:calc(100% - 2rem);height:1px;margin:0 1rem;-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.padded.divided.grid:not(.vertically):not(.horizontally),[class*="horizontally padded"].ui.divided.grid{width:100%}.ui[class*="vertically divided"].grid>.row:first-child:before{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(255,255,255,.1);box-shadow:-1px 0 0 0 rgba(255,255,255,.1)}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row):first-child,.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.inverted[class*="vertically divided"].grid>.row:before{-webkit-box-shadow:0 -1px 0 0 rgba(255,255,255,.1);box-shadow:0 -1px 0 0 rgba(255,255,255,.1)}.ui.relaxed[class*="vertically divided"].grid>.row:before{margin-left:1.5rem;margin-right:1.5rem;width:calc(100% - 3rem)}.ui[class*="very relaxed"][class*="vertically divided"].grid>.row:before{margin-left:5rem;margin-right:5rem;width:calc(100% - 5rem)}.ui.celled.grid{width:100%;margin:1em 0;-webkit-box-shadow:0 0 0 1px #d4d4d5;box-shadow:0 0 0 1px #d4d4d5}.ui.celled.grid>.row{width:100%!important;margin:0;padding:0;-webkit-box-shadow:0 -1px 0 0 #d4d4d5;box-shadow:0 -1px 0 0 #d4d4d5}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{padding:1em}.ui.relaxed.celled.grid>.column:not(.row),.ui.relaxed.celled.grid>.row>.column{padding:1.5em}.ui[class*="very relaxed"].celled.grid>.column:not(.row),.ui[class*="very relaxed"].celled.grid>.row>.column{padding:2em}.ui[class*="internally celled"].grid{-webkit-box-shadow:none;box-shadow:none;margin:0}.ui[class*="internally celled"].grid>.row:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="internally celled"].grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid>.row>[class*="top aligned"].column,.ui.grid>[class*="top aligned"].column:not(.row),.ui.grid>[class*="top aligned"].row>.column,.ui[class*="top aligned"].grid>.column:not(.row),.ui[class*="top aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:top;-ms-flex-item-align:start!important;align-self:flex-start!important}.ui.grid>.row>[class*="middle aligned"].column,.ui.grid>[class*="middle aligned"].column:not(.row),.ui.grid>[class*="middle aligned"].row>.column,.ui[class*="middle aligned"].grid>.column:not(.row),.ui[class*="middle aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:middle;-ms-flex-item-align:center!important;align-self:center!important}.ui.grid>.row>[class*="bottom aligned"].column,.ui.grid>[class*="bottom aligned"].column:not(.row),.ui.grid>[class*="bottom aligned"].row>.column,.ui[class*="bottom aligned"].grid>.column:not(.row),.ui[class*="bottom aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:bottom;-ms-flex-item-align:end!important;align-self:flex-end!important}.ui.grid>.row>.stretched.column,.ui.grid>.stretched.column:not(.row),.ui.grid>.stretched.row>.column,.ui.stretched.grid>.column,.ui.stretched.grid>.row>.column{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.grid>.row>.stretched.column>*,.ui.grid>.stretched.column:not(.row)>*,.ui.grid>.stretched.row>.column>*,.ui.stretched.grid>.column>*,.ui.stretched.grid>.row>.column>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>.row>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].row>.column,.ui[class*="left aligned"].grid>.column,.ui[class*="left aligned"].grid>.row>.column{text-align:left;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.row>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].row>.column,.ui[class*="center aligned"].grid>.column,.ui[class*="center aligned"].grid>.row>.column{text-align:center;-ms-flex-item-align:inherit;align-self:inherit}.ui[class*="center aligned"].grid{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.grid>.row>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].row>.column,.ui[class*="right aligned"].grid>.column,.ui[class*="right aligned"].grid>.row>.column{text-align:right;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.justified.column.column,.ui.grid>.justified.row>.column,.ui.grid>.row>.justified.column.column,.ui.justified.grid>.column,.ui.justified.grid>.row>.column{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.grid>.row>.black.column,.ui.grid>.row>.blue.column,.ui.grid>.row>.brown.column,.ui.grid>.row>.green.column,.ui.grid>.row>.grey.column,.ui.grid>.row>.olive.column,.ui.grid>.row>.orange.column,.ui.grid>.row>.pink.column,.ui.grid>.row>.purple.column,.ui.grid>.row>.red.column,.ui.grid>.row>.teal.column,.ui.grid>.row>.violet.column,.ui.grid>.row>.yellow.column{margin-top:-1rem;margin-bottom:-1rem;padding-top:1rem;padding-bottom:1rem}.ui.grid>.red.column,.ui.grid>.red.row,.ui.grid>.row>.red.column{background-color:#db2828!important;color:#fff}.ui.grid>.orange.column,.ui.grid>.orange.row,.ui.grid>.row>.orange.column{background-color:#f2711c!important;color:#fff}.ui.grid>.row>.yellow.column,.ui.grid>.yellow.column,.ui.grid>.yellow.row{background-color:#fbbd08!important;color:#fff}.ui.grid>.olive.column,.ui.grid>.olive.row,.ui.grid>.row>.olive.column{background-color:#b5cc18!important;color:#fff}.ui.grid>.green.column,.ui.grid>.green.row,.ui.grid>.row>.green.column{background-color:#21ba45!important;color:#fff}.ui.grid>.row>.teal.column,.ui.grid>.teal.column,.ui.grid>.teal.row{background-color:#00b5ad!important;color:#fff}.ui.grid>.blue.column,.ui.grid>.blue.row,.ui.grid>.row>.blue.column{background-color:#2185d0!important;color:#fff}.ui.grid>.row>.violet.column,.ui.grid>.violet.column,.ui.grid>.violet.row{background-color:#6435c9!important;color:#fff}.ui.grid>.purple.column,.ui.grid>.purple.row,.ui.grid>.row>.purple.column{background-color:#a333c8!important;color:#fff}.ui.grid>.pink.column,.ui.grid>.pink.row,.ui.grid>.row>.pink.column{background-color:#e03997!important;color:#fff}.ui.grid>.brown.column,.ui.grid>.brown.row,.ui.grid>.row>.brown.column{background-color:#a5673f!important;color:#fff}.ui.grid>.grey.column,.ui.grid>.grey.row,.ui.grid>.row>.grey.column{background-color:#767676!important;color:#fff}.ui.grid>.black.column,.ui.grid>.black.row,.ui.grid>.row>.black.column{background-color:#1b1c1d!important;color:#fff}.ui.grid>[class*="equal width"].row>.column,.ui[class*="equal width"].grid>.column:not(.row),.ui[class*="equal width"].grid>.row>.column{display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>[class*="equal width"].row>.wide.column,.ui[class*="equal width"].grid>.row>.wide.column,.ui[class*="equal width"].grid>.wide.column{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media only screen and (max-width:767px){.ui.grid>[class*="mobile reversed"].row,.ui[class*="mobile reversed"].grid,.ui[class*="mobile reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui.stackable[class*="mobile reversed"],.ui[class*="mobile vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="mobile reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="mobile reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991px){.ui.grid>[class*="tablet reversed"].row,.ui[class*="tablet reversed"].grid,.ui[class*="tablet reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="tablet vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="tablet reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="tablet reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:992px){.ui.grid>[class*="computer reversed"].row,.ui[class*="computer reversed"].grid,.ui[class*="computer reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="computer vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="computer reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="computer reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991px){.ui.doubling.grid{width:auto}.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{display:inline-block!important;padding-top:1rem!important;padding-bottom:1rem!important;-webkit-box-shadow:none!important;box-shadow:none!important;margin:0}.ui.grid>[class*="two column"].doubling.row.row>.column,.ui[class*="two column"].doubling.grid>.column:not(.row),.ui[class*="two column"].doubling.grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling.row.row>.column,.ui[class*="three column"].doubling.grid>.column:not(.row),.ui[class*="three column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling.row.row>.column,.ui[class*="four column"].doubling.grid>.column:not(.row),.ui[class*="four column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling.row.row>.column,.ui[class*="five column"].doubling.grid>.column:not(.row),.ui[class*="five column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="six column"].doubling.row.row>.column,.ui[class*="six column"].doubling.grid>.column:not(.row),.ui[class*="six column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="seven column"].doubling.row.row>.column,.ui[class*="seven column"].doubling.grid>.column:not(.row),.ui[class*="seven column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eight column"].doubling.row.row>.column,.ui[class*="eight column"].doubling.grid>.column:not(.row),.ui[class*="eight column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="nine column"].doubling.row.row>.column,.ui[class*="nine column"].doubling.grid>.column:not(.row),.ui[class*="nine column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="ten column"].doubling.row.row>.column,.ui[class*="ten column"].doubling.grid>.column:not(.row),.ui[class*="ten column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="eleven column"].doubling.row.row>.column,.ui[class*="eleven column"].doubling.grid>.column:not(.row),.ui[class*="eleven column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="twelve column"].doubling.row.row>.column,.ui[class*="twelve column"].doubling.grid>.column:not(.row),.ui[class*="twelve column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="thirteen column"].doubling.row.row>.column,.ui[class*="thirteen column"].doubling.grid>.column:not(.row),.ui[class*="thirteen column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="fourteen column"].doubling.row.row>.column,.ui[class*="fourteen column"].doubling.grid>.column:not(.row),.ui[class*="fourteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="fifteen column"].doubling.row.row>.column,.ui[class*="fifteen column"].doubling.grid>.column:not(.row),.ui[class*="fifteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="sixteen column"].doubling.row.row>.column,.ui[class*="sixteen column"].doubling.grid>.column:not(.row),.ui[class*="sixteen column"].doubling.grid>.row>.column{width:12.5%!important}}@media only screen and (max-width:767px){.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{padding-top:1rem!important;padding-bottom:1rem!important;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.grid>[class*="two column"].doubling:not(.stackable).row.row>.column,.ui[class*="two column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="two column"].doubling:not(.stackable).grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling:not(.stackable).row.row>.column,.ui[class*="three column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="three column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling:not(.stackable).row.row>.column,.ui[class*="four column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="four column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling:not(.stackable).row.row>.column,.ui[class*="five column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="five column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="six column"].doubling:not(.stackable).row.row>.column,.ui[class*="six column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="six column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="seven column"].doubling:not(.stackable).row.row>.column,.ui[class*="seven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="seven column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="eight column"].doubling:not(.stackable).row.row>.column,.ui[class*="eight column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eight column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="nine column"].doubling:not(.stackable).row.row>.column,.ui[class*="nine column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="nine column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="ten column"].doubling:not(.stackable).row.row>.column,.ui[class*="ten column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="ten column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eleven column"].doubling:not(.stackable).row.row>.column,.ui[class*="eleven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eleven column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="twelve column"].doubling:not(.stackable).row.row>.column,.ui[class*="twelve column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="twelve column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="thirteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="thirteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="thirteen column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="fourteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fourteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fourteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="fifteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fifteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fifteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="sixteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="sixteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="sixteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}}@media only screen and (max-width:767px){.ui.stackable.grid{width:auto;margin-left:0!important;margin-right:0!important}.ui.grid>.stackable.stackable.row>.column,.ui.stackable.grid>.column.grid>.column,.ui.stackable.grid>.column.row>.column,.ui.stackable.grid>.column:not(.row),.ui.stackable.grid>.row>.column,.ui.stackable.grid>.row>.wide.column,.ui.stackable.grid>.wide.column{width:100%!important;margin:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;padding:1rem 1rem!important}.ui.stackable.grid:not(.vertically)>.row{margin:0;padding:0}.ui.container>.ui.stackable.grid>.column,.ui.container>.ui.stackable.grid>.row>.column{padding-left:0!important;padding-right:0!important}.ui.grid .ui.stackable.grid,.ui.segment:not(.vertical) .ui.stackable.page.grid{margin-left:-1rem!important;margin-right:-1rem!important}.ui.stackable.celled.grid>.column:not(.row):first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:not(.row):first-child,.ui.stackable.divided.grid>.row:first-child>.column:first-child{border-top:none!important}.ui.inverted.stackable.celled.grid>.column:not(.row),.ui.inverted.stackable.celled.grid>.row>.column,.ui.inverted.stackable.divided.grid>.column:not(.row),.ui.inverted.stackable.divided.grid>.row>.column{border-top:1px solid rgba(255,255,255,.1)}.ui.stackable.celled.grid>.column:not(.row),.ui.stackable.celled.grid>.row>.column,.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{border-top:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none!important;box-shadow:none!important;padding-top:2rem!important;padding-bottom:2rem!important}.ui.stackable.celled.grid>.row{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{padding-left:0!important;padding-right:0!important}}@media only screen and (max-width:767px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].row:not(.mobile),.ui[class*="tablet only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].row:not(.mobile),.ui[class*="computer only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].row:not(.tablet),.ui[class*="mobile only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].row:not(.tablet),.ui[class*="computer only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1920px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}}
\ No newline at end of file
+ */.ui.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0}.ui.grid{margin-top:-1rem;margin-bottom:-1rem;margin-left:-1rem;margin-right:-1rem}.ui.relaxed.grid{margin-left:-1.5rem;margin-right:-1.5rem}.ui[class*="very relaxed"].grid{margin-left:-2.5rem;margin-right:-2.5rem}.ui.grid+.grid{margin-top:1rem}.ui.grid>.column:not(.row),.ui.grid>.row>.column{position:relative;display:inline-block;width:6.25%;padding-left:1rem;padding-right:1rem;vertical-align:top}.ui.grid>*{padding-left:1rem;padding-right:1rem}.ui.grid>.row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%!important;padding:0;padding-top:1rem;padding-bottom:1rem}.ui.grid>.column:not(.row){padding-top:1rem;padding-bottom:1rem}.ui.grid>.row>.column{margin-top:0;margin-bottom:0}.ui.grid>.row>.column>img,.ui.grid>.row>img{max-width:100%}.ui.grid>.ui.grid:first-child{margin-top:0}.ui.grid>.ui.grid:last-child{margin-bottom:0}.ui.aligned.grid .column>.segment:not(.compact):not(.attached),.ui.grid .aligned.row>.column>.segment:not(.compact):not(.attached){width:100%}.ui.grid .row+.ui.divider{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:1rem 1rem}.ui.grid .column+.ui.vertical.divider{height:calc(50% - 1rem)}.ui.grid>.column:last-child>.horizontal.segment,.ui.grid>.row>.column:last-child>.horizontal.segment{-webkit-box-shadow:none;box-shadow:none}@media only screen and (max-width:767.98px){.ui.page.grid{width:auto;padding-left:0;padding-right:0;margin-left:0;margin-right:0}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:2em;padding-right:2em}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:3%;padding-right:3%}}@media only screen and (min-width:1200px) and (max-width:1919.98px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:15%;padding-right:15%}}@media only screen and (min-width:1920px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:23%;padding-right:23%}}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui[class*="one column"].grid>.column:not(.row),.ui[class*="one column"].grid>.row>.column{width:100%}.ui[class*="two column"].grid>.column:not(.row),.ui[class*="two column"].grid>.row>.column{width:50%}.ui[class*="three column"].grid>.column:not(.row),.ui[class*="three column"].grid>.row>.column{width:33.33333333%}.ui[class*="four column"].grid>.column:not(.row),.ui[class*="four column"].grid>.row>.column{width:25%}.ui[class*="five column"].grid>.column:not(.row),.ui[class*="five column"].grid>.row>.column{width:20%}.ui[class*="six column"].grid>.column:not(.row),.ui[class*="six column"].grid>.row>.column{width:16.66666667%}.ui[class*="seven column"].grid>.column:not(.row),.ui[class*="seven column"].grid>.row>.column{width:14.28571429%}.ui[class*="eight column"].grid>.column:not(.row),.ui[class*="eight column"].grid>.row>.column{width:12.5%}.ui[class*="nine column"].grid>.column:not(.row),.ui[class*="nine column"].grid>.row>.column{width:11.11111111%}.ui[class*="ten column"].grid>.column:not(.row),.ui[class*="ten column"].grid>.row>.column{width:10%}.ui[class*="eleven column"].grid>.column:not(.row),.ui[class*="eleven column"].grid>.row>.column{width:9.09090909%}.ui[class*="twelve column"].grid>.column:not(.row),.ui[class*="twelve column"].grid>.row>.column{width:8.33333333%}.ui[class*="thirteen column"].grid>.column:not(.row),.ui[class*="thirteen column"].grid>.row>.column{width:7.69230769%}.ui[class*="fourteen column"].grid>.column:not(.row),.ui[class*="fourteen column"].grid>.row>.column{width:7.14285714%}.ui[class*="fifteen column"].grid>.column:not(.row),.ui[class*="fifteen column"].grid>.row>.column{width:6.66666667%}.ui[class*="sixteen column"].grid>.column:not(.row),.ui[class*="sixteen column"].grid>.row>.column{width:6.25%}.ui.grid>[class*="one column"].row>.column{width:100%!important}.ui.grid>[class*="two column"].row>.column{width:50%!important}.ui.grid>[class*="three column"].row>.column{width:33.33333333%!important}.ui.grid>[class*="four column"].row>.column{width:25%!important}.ui.grid>[class*="five column"].row>.column{width:20%!important}.ui.grid>[class*="six column"].row>.column{width:16.66666667%!important}.ui.grid>[class*="seven column"].row>.column{width:14.28571429%!important}.ui.grid>[class*="eight column"].row>.column{width:12.5%!important}.ui.grid>[class*="nine column"].row>.column{width:11.11111111%!important}.ui.grid>[class*="ten column"].row>.column{width:10%!important}.ui.grid>[class*="eleven column"].row>.column{width:9.09090909%!important}.ui.grid>[class*="twelve column"].row>.column{width:8.33333333%!important}.ui.grid>[class*="thirteen column"].row>.column{width:7.69230769%!important}.ui.grid>[class*="fourteen column"].row>.column{width:7.14285714%!important}.ui.grid>[class*="fifteen column"].row>.column{width:6.66666667%!important}.ui.grid>[class*="sixteen column"].row>.column{width:6.25%!important}.ui.celled.page.grid{-webkit-box-shadow:none;box-shadow:none}.ui.column.grid>[class*="one wide"].column,.ui.grid>.column.row>[class*="one wide"].column,.ui.grid>.row>[class*="one wide"].column,.ui.grid>[class*="one wide"].column{width:6.25%!important}.ui.column.grid>[class*="two wide"].column,.ui.grid>.column.row>[class*="two wide"].column,.ui.grid>.row>[class*="two wide"].column,.ui.grid>[class*="two wide"].column{width:12.5%!important}.ui.column.grid>[class*="three wide"].column,.ui.grid>.column.row>[class*="three wide"].column,.ui.grid>.row>[class*="three wide"].column,.ui.grid>[class*="three wide"].column{width:18.75%!important}.ui.column.grid>[class*="four wide"].column,.ui.grid>.column.row>[class*="four wide"].column,.ui.grid>.row>[class*="four wide"].column,.ui.grid>[class*="four wide"].column{width:25%!important}.ui.column.grid>[class*="five wide"].column,.ui.grid>.column.row>[class*="five wide"].column,.ui.grid>.row>[class*="five wide"].column,.ui.grid>[class*="five wide"].column{width:31.25%!important}.ui.column.grid>[class*="six wide"].column,.ui.grid>.column.row>[class*="six wide"].column,.ui.grid>.row>[class*="six wide"].column,.ui.grid>[class*="six wide"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide"].column,.ui.grid>.column.row>[class*="seven wide"].column,.ui.grid>.row>[class*="seven wide"].column,.ui.grid>[class*="seven wide"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide"].column,.ui.grid>.column.row>[class*="eight wide"].column,.ui.grid>.row>[class*="eight wide"].column,.ui.grid>[class*="eight wide"].column{width:50%!important}.ui.column.grid>[class*="nine wide"].column,.ui.grid>.column.row>[class*="nine wide"].column,.ui.grid>.row>[class*="nine wide"].column,.ui.grid>[class*="nine wide"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide"].column,.ui.grid>.column.row>[class*="ten wide"].column,.ui.grid>.row>[class*="ten wide"].column,.ui.grid>[class*="ten wide"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide"].column,.ui.grid>.column.row>[class*="eleven wide"].column,.ui.grid>.row>[class*="eleven wide"].column,.ui.grid>[class*="eleven wide"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide"].column,.ui.grid>.column.row>[class*="twelve wide"].column,.ui.grid>.row>[class*="twelve wide"].column,.ui.grid>[class*="twelve wide"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide"].column,.ui.grid>.column.row>[class*="thirteen wide"].column,.ui.grid>.row>[class*="thirteen wide"].column,.ui.grid>[class*="thirteen wide"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide"].column,.ui.grid>.column.row>[class*="fourteen wide"].column,.ui.grid>.row>[class*="fourteen wide"].column,.ui.grid>[class*="fourteen wide"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide"].column,.ui.grid>.column.row>[class*="fifteen wide"].column,.ui.grid>.row>[class*="fifteen wide"].column,.ui.grid>[class*="fifteen wide"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide"].column,.ui.grid>.column.row>[class*="sixteen wide"].column,.ui.grid>.row>[class*="sixteen wide"].column,.ui.grid>[class*="sixteen wide"].column{width:100%!important}@media only screen and (min-width:320px) and (max-width:767.98px){.ui.column.grid>[class*="one wide mobile"].column,.ui.grid>.column.row>[class*="one wide mobile"].column,.ui.grid>.row>[class*="one wide mobile"].column,.ui.grid>[class*="one wide mobile"].column{width:6.25%!important}.ui.column.grid>[class*="two wide mobile"].column,.ui.grid>.column.row>[class*="two wide mobile"].column,.ui.grid>.row>[class*="two wide mobile"].column,.ui.grid>[class*="two wide mobile"].column{width:12.5%!important}.ui.column.grid>[class*="three wide mobile"].column,.ui.grid>.column.row>[class*="three wide mobile"].column,.ui.grid>.row>[class*="three wide mobile"].column,.ui.grid>[class*="three wide mobile"].column{width:18.75%!important}.ui.column.grid>[class*="four wide mobile"].column,.ui.grid>.column.row>[class*="four wide mobile"].column,.ui.grid>.row>[class*="four wide mobile"].column,.ui.grid>[class*="four wide mobile"].column{width:25%!important}.ui.column.grid>[class*="five wide mobile"].column,.ui.grid>.column.row>[class*="five wide mobile"].column,.ui.grid>.row>[class*="five wide mobile"].column,.ui.grid>[class*="five wide mobile"].column{width:31.25%!important}.ui.column.grid>[class*="six wide mobile"].column,.ui.grid>.column.row>[class*="six wide mobile"].column,.ui.grid>.row>[class*="six wide mobile"].column,.ui.grid>[class*="six wide mobile"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide mobile"].column,.ui.grid>.column.row>[class*="seven wide mobile"].column,.ui.grid>.row>[class*="seven wide mobile"].column,.ui.grid>[class*="seven wide mobile"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide mobile"].column,.ui.grid>.column.row>[class*="eight wide mobile"].column,.ui.grid>.row>[class*="eight wide mobile"].column,.ui.grid>[class*="eight wide mobile"].column{width:50%!important}.ui.column.grid>[class*="nine wide mobile"].column,.ui.grid>.column.row>[class*="nine wide mobile"].column,.ui.grid>.row>[class*="nine wide mobile"].column,.ui.grid>[class*="nine wide mobile"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide mobile"].column,.ui.grid>.column.row>[class*="ten wide mobile"].column,.ui.grid>.row>[class*="ten wide mobile"].column,.ui.grid>[class*="ten wide mobile"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide mobile"].column,.ui.grid>.column.row>[class*="eleven wide mobile"].column,.ui.grid>.row>[class*="eleven wide mobile"].column,.ui.grid>[class*="eleven wide mobile"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide mobile"].column,.ui.grid>.column.row>[class*="twelve wide mobile"].column,.ui.grid>.row>[class*="twelve wide mobile"].column,.ui.grid>[class*="twelve wide mobile"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide mobile"].column,.ui.grid>.column.row>[class*="thirteen wide mobile"].column,.ui.grid>.row>[class*="thirteen wide mobile"].column,.ui.grid>[class*="thirteen wide mobile"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide mobile"].column,.ui.grid>.column.row>[class*="fourteen wide mobile"].column,.ui.grid>.row>[class*="fourteen wide mobile"].column,.ui.grid>[class*="fourteen wide mobile"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide mobile"].column,.ui.grid>.column.row>[class*="fifteen wide mobile"].column,.ui.grid>.row>[class*="fifteen wide mobile"].column,.ui.grid>[class*="fifteen wide mobile"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide mobile"].column,.ui.grid>.column.row>[class*="sixteen wide mobile"].column,.ui.grid>.row>[class*="sixteen wide mobile"].column,.ui.grid>[class*="sixteen wide mobile"].column{width:100%!important}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.column.grid>[class*="one wide tablet"].column,.ui.grid>.column.row>[class*="one wide tablet"].column,.ui.grid>.row>[class*="one wide tablet"].column,.ui.grid>[class*="one wide tablet"].column{width:6.25%!important}.ui.column.grid>[class*="two wide tablet"].column,.ui.grid>.column.row>[class*="two wide tablet"].column,.ui.grid>.row>[class*="two wide tablet"].column,.ui.grid>[class*="two wide tablet"].column{width:12.5%!important}.ui.column.grid>[class*="three wide tablet"].column,.ui.grid>.column.row>[class*="three wide tablet"].column,.ui.grid>.row>[class*="three wide tablet"].column,.ui.grid>[class*="three wide tablet"].column{width:18.75%!important}.ui.column.grid>[class*="four wide tablet"].column,.ui.grid>.column.row>[class*="four wide tablet"].column,.ui.grid>.row>[class*="four wide tablet"].column,.ui.grid>[class*="four wide tablet"].column{width:25%!important}.ui.column.grid>[class*="five wide tablet"].column,.ui.grid>.column.row>[class*="five wide tablet"].column,.ui.grid>.row>[class*="five wide tablet"].column,.ui.grid>[class*="five wide tablet"].column{width:31.25%!important}.ui.column.grid>[class*="six wide tablet"].column,.ui.grid>.column.row>[class*="six wide tablet"].column,.ui.grid>.row>[class*="six wide tablet"].column,.ui.grid>[class*="six wide tablet"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide tablet"].column,.ui.grid>.column.row>[class*="seven wide tablet"].column,.ui.grid>.row>[class*="seven wide tablet"].column,.ui.grid>[class*="seven wide tablet"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide tablet"].column,.ui.grid>.column.row>[class*="eight wide tablet"].column,.ui.grid>.row>[class*="eight wide tablet"].column,.ui.grid>[class*="eight wide tablet"].column{width:50%!important}.ui.column.grid>[class*="nine wide tablet"].column,.ui.grid>.column.row>[class*="nine wide tablet"].column,.ui.grid>.row>[class*="nine wide tablet"].column,.ui.grid>[class*="nine wide tablet"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide tablet"].column,.ui.grid>.column.row>[class*="ten wide tablet"].column,.ui.grid>.row>[class*="ten wide tablet"].column,.ui.grid>[class*="ten wide tablet"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide tablet"].column,.ui.grid>.column.row>[class*="eleven wide tablet"].column,.ui.grid>.row>[class*="eleven wide tablet"].column,.ui.grid>[class*="eleven wide tablet"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide tablet"].column,.ui.grid>.column.row>[class*="twelve wide tablet"].column,.ui.grid>.row>[class*="twelve wide tablet"].column,.ui.grid>[class*="twelve wide tablet"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide tablet"].column,.ui.grid>.column.row>[class*="thirteen wide tablet"].column,.ui.grid>.row>[class*="thirteen wide tablet"].column,.ui.grid>[class*="thirteen wide tablet"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide tablet"].column,.ui.grid>.column.row>[class*="fourteen wide tablet"].column,.ui.grid>.row>[class*="fourteen wide tablet"].column,.ui.grid>[class*="fourteen wide tablet"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide tablet"].column,.ui.grid>.column.row>[class*="fifteen wide tablet"].column,.ui.grid>.row>[class*="fifteen wide tablet"].column,.ui.grid>[class*="fifteen wide tablet"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide tablet"].column,.ui.grid>.column.row>[class*="sixteen wide tablet"].column,.ui.grid>.row>[class*="sixteen wide tablet"].column,.ui.grid>[class*="sixteen wide tablet"].column{width:100%!important}}@media only screen and (min-width:992px){.ui.column.grid>[class*="one wide computer"].column,.ui.grid>.column.row>[class*="one wide computer"].column,.ui.grid>.row>[class*="one wide computer"].column,.ui.grid>[class*="one wide computer"].column{width:6.25%!important}.ui.column.grid>[class*="two wide computer"].column,.ui.grid>.column.row>[class*="two wide computer"].column,.ui.grid>.row>[class*="two wide computer"].column,.ui.grid>[class*="two wide computer"].column{width:12.5%!important}.ui.column.grid>[class*="three wide computer"].column,.ui.grid>.column.row>[class*="three wide computer"].column,.ui.grid>.row>[class*="three wide computer"].column,.ui.grid>[class*="three wide computer"].column{width:18.75%!important}.ui.column.grid>[class*="four wide computer"].column,.ui.grid>.column.row>[class*="four wide computer"].column,.ui.grid>.row>[class*="four wide computer"].column,.ui.grid>[class*="four wide computer"].column{width:25%!important}.ui.column.grid>[class*="five wide computer"].column,.ui.grid>.column.row>[class*="five wide computer"].column,.ui.grid>.row>[class*="five wide computer"].column,.ui.grid>[class*="five wide computer"].column{width:31.25%!important}.ui.column.grid>[class*="six wide computer"].column,.ui.grid>.column.row>[class*="six wide computer"].column,.ui.grid>.row>[class*="six wide computer"].column,.ui.grid>[class*="six wide computer"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide computer"].column,.ui.grid>.column.row>[class*="seven wide computer"].column,.ui.grid>.row>[class*="seven wide computer"].column,.ui.grid>[class*="seven wide computer"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide computer"].column,.ui.grid>.column.row>[class*="eight wide computer"].column,.ui.grid>.row>[class*="eight wide computer"].column,.ui.grid>[class*="eight wide computer"].column{width:50%!important}.ui.column.grid>[class*="nine wide computer"].column,.ui.grid>.column.row>[class*="nine wide computer"].column,.ui.grid>.row>[class*="nine wide computer"].column,.ui.grid>[class*="nine wide computer"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide computer"].column,.ui.grid>.column.row>[class*="ten wide computer"].column,.ui.grid>.row>[class*="ten wide computer"].column,.ui.grid>[class*="ten wide computer"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide computer"].column,.ui.grid>.column.row>[class*="eleven wide computer"].column,.ui.grid>.row>[class*="eleven wide computer"].column,.ui.grid>[class*="eleven wide computer"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide computer"].column,.ui.grid>.column.row>[class*="twelve wide computer"].column,.ui.grid>.row>[class*="twelve wide computer"].column,.ui.grid>[class*="twelve wide computer"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide computer"].column,.ui.grid>.column.row>[class*="thirteen wide computer"].column,.ui.grid>.row>[class*="thirteen wide computer"].column,.ui.grid>[class*="thirteen wide computer"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide computer"].column,.ui.grid>.column.row>[class*="fourteen wide computer"].column,.ui.grid>.row>[class*="fourteen wide computer"].column,.ui.grid>[class*="fourteen wide computer"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide computer"].column,.ui.grid>.column.row>[class*="fifteen wide computer"].column,.ui.grid>.row>[class*="fifteen wide computer"].column,.ui.grid>[class*="fifteen wide computer"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide computer"].column,.ui.grid>.column.row>[class*="sixteen wide computer"].column,.ui.grid>.row>[class*="sixteen wide computer"].column,.ui.grid>[class*="sixteen wide computer"].column{width:100%!important}}@media only screen and (min-width:1200px) and (max-width:1919.98px){.ui.column.grid>[class*="one wide large screen"].column,.ui.grid>.column.row>[class*="one wide large screen"].column,.ui.grid>.row>[class*="one wide large screen"].column,.ui.grid>[class*="one wide large screen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide large screen"].column,.ui.grid>.column.row>[class*="two wide large screen"].column,.ui.grid>.row>[class*="two wide large screen"].column,.ui.grid>[class*="two wide large screen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide large screen"].column,.ui.grid>.column.row>[class*="three wide large screen"].column,.ui.grid>.row>[class*="three wide large screen"].column,.ui.grid>[class*="three wide large screen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide large screen"].column,.ui.grid>.column.row>[class*="four wide large screen"].column,.ui.grid>.row>[class*="four wide large screen"].column,.ui.grid>[class*="four wide large screen"].column{width:25%!important}.ui.column.grid>[class*="five wide large screen"].column,.ui.grid>.column.row>[class*="five wide large screen"].column,.ui.grid>.row>[class*="five wide large screen"].column,.ui.grid>[class*="five wide large screen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide large screen"].column,.ui.grid>.column.row>[class*="six wide large screen"].column,.ui.grid>.row>[class*="six wide large screen"].column,.ui.grid>[class*="six wide large screen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide large screen"].column,.ui.grid>.column.row>[class*="seven wide large screen"].column,.ui.grid>.row>[class*="seven wide large screen"].column,.ui.grid>[class*="seven wide large screen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide large screen"].column,.ui.grid>.column.row>[class*="eight wide large screen"].column,.ui.grid>.row>[class*="eight wide large screen"].column,.ui.grid>[class*="eight wide large screen"].column{width:50%!important}.ui.column.grid>[class*="nine wide large screen"].column,.ui.grid>.column.row>[class*="nine wide large screen"].column,.ui.grid>.row>[class*="nine wide large screen"].column,.ui.grid>[class*="nine wide large screen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide large screen"].column,.ui.grid>.column.row>[class*="ten wide large screen"].column,.ui.grid>.row>[class*="ten wide large screen"].column,.ui.grid>[class*="ten wide large screen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide large screen"].column,.ui.grid>.column.row>[class*="eleven wide large screen"].column,.ui.grid>.row>[class*="eleven wide large screen"].column,.ui.grid>[class*="eleven wide large screen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide large screen"].column,.ui.grid>.column.row>[class*="twelve wide large screen"].column,.ui.grid>.row>[class*="twelve wide large screen"].column,.ui.grid>[class*="twelve wide large screen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide large screen"].column,.ui.grid>.column.row>[class*="thirteen wide large screen"].column,.ui.grid>.row>[class*="thirteen wide large screen"].column,.ui.grid>[class*="thirteen wide large screen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide large screen"].column,.ui.grid>.column.row>[class*="fourteen wide large screen"].column,.ui.grid>.row>[class*="fourteen wide large screen"].column,.ui.grid>[class*="fourteen wide large screen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide large screen"].column,.ui.grid>.column.row>[class*="fifteen wide large screen"].column,.ui.grid>.row>[class*="fifteen wide large screen"].column,.ui.grid>[class*="fifteen wide large screen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide large screen"].column,.ui.grid>.column.row>[class*="sixteen wide large screen"].column,.ui.grid>.row>[class*="sixteen wide large screen"].column,.ui.grid>[class*="sixteen wide large screen"].column{width:100%!important}}@media only screen and (min-width:1920px){.ui.column.grid>[class*="one wide widescreen"].column,.ui.grid>.column.row>[class*="one wide widescreen"].column,.ui.grid>.row>[class*="one wide widescreen"].column,.ui.grid>[class*="one wide widescreen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide widescreen"].column,.ui.grid>.column.row>[class*="two wide widescreen"].column,.ui.grid>.row>[class*="two wide widescreen"].column,.ui.grid>[class*="two wide widescreen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide widescreen"].column,.ui.grid>.column.row>[class*="three wide widescreen"].column,.ui.grid>.row>[class*="three wide widescreen"].column,.ui.grid>[class*="three wide widescreen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide widescreen"].column,.ui.grid>.column.row>[class*="four wide widescreen"].column,.ui.grid>.row>[class*="four wide widescreen"].column,.ui.grid>[class*="four wide widescreen"].column{width:25%!important}.ui.column.grid>[class*="five wide widescreen"].column,.ui.grid>.column.row>[class*="five wide widescreen"].column,.ui.grid>.row>[class*="five wide widescreen"].column,.ui.grid>[class*="five wide widescreen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide widescreen"].column,.ui.grid>.column.row>[class*="six wide widescreen"].column,.ui.grid>.row>[class*="six wide widescreen"].column,.ui.grid>[class*="six wide widescreen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide widescreen"].column,.ui.grid>.column.row>[class*="seven wide widescreen"].column,.ui.grid>.row>[class*="seven wide widescreen"].column,.ui.grid>[class*="seven wide widescreen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide widescreen"].column,.ui.grid>.column.row>[class*="eight wide widescreen"].column,.ui.grid>.row>[class*="eight wide widescreen"].column,.ui.grid>[class*="eight wide widescreen"].column{width:50%!important}.ui.column.grid>[class*="nine wide widescreen"].column,.ui.grid>.column.row>[class*="nine wide widescreen"].column,.ui.grid>.row>[class*="nine wide widescreen"].column,.ui.grid>[class*="nine wide widescreen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide widescreen"].column,.ui.grid>.column.row>[class*="ten wide widescreen"].column,.ui.grid>.row>[class*="ten wide widescreen"].column,.ui.grid>[class*="ten wide widescreen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide widescreen"].column,.ui.grid>.column.row>[class*="eleven wide widescreen"].column,.ui.grid>.row>[class*="eleven wide widescreen"].column,.ui.grid>[class*="eleven wide widescreen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide widescreen"].column,.ui.grid>.column.row>[class*="twelve wide widescreen"].column,.ui.grid>.row>[class*="twelve wide widescreen"].column,.ui.grid>[class*="twelve wide widescreen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide widescreen"].column,.ui.grid>.column.row>[class*="thirteen wide widescreen"].column,.ui.grid>.row>[class*="thirteen wide widescreen"].column,.ui.grid>[class*="thirteen wide widescreen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide widescreen"].column,.ui.grid>.column.row>[class*="fourteen wide widescreen"].column,.ui.grid>.row>[class*="fourteen wide widescreen"].column,.ui.grid>[class*="fourteen wide widescreen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide widescreen"].column,.ui.grid>.column.row>[class*="fifteen wide widescreen"].column,.ui.grid>.row>[class*="fifteen wide widescreen"].column,.ui.grid>[class*="fifteen wide widescreen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide widescreen"].column,.ui.grid>.column.row>[class*="sixteen wide widescreen"].column,.ui.grid>.row>[class*="sixteen wide widescreen"].column,.ui.grid>[class*="sixteen wide widescreen"].column{width:100%!important}}.ui.centered.grid,.ui.centered.grid>.row,.ui.grid>.centered.row{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.grid>.column:not(.aligned):not(.justified):not(.row),.ui.centered.grid>.row>.column:not(.aligned):not(.justified),.ui.grid .centered.row>.column:not(.aligned):not(.justified){text-align:left}.ui.grid>.centered.column,.ui.grid>.row>.centered.column{display:block;margin-left:auto;margin-right:auto}.ui.grid>.relaxed.row>.column,.ui.relaxed.grid>.column:not(.row),.ui.relaxed.grid>.row>.column{padding-left:1.5rem;padding-right:1.5rem}.ui.grid>[class*="very relaxed"].row>.column,.ui[class*="very relaxed"].grid>.column:not(.row),.ui[class*="very relaxed"].grid>.row>.column{padding-left:2.5rem;padding-right:2.5rem}.ui.grid .relaxed.row+.ui.divider,.ui.relaxed.grid .row+.ui.divider{margin-left:1.5rem;margin-right:1.5rem}.ui.grid [class*="very relaxed"].row+.ui.divider,.ui[class*="very relaxed"].grid .row+.ui.divider{margin-left:2.5rem;margin-right:2.5rem}.ui.padded.grid:not(.vertically):not(.horizontally){margin:0!important}[class*="horizontally padded"].ui.grid{margin-left:0!important;margin-right:0!important}[class*="vertically padded"].ui.grid{margin-top:0!important;margin-bottom:0!important}.ui.grid [class*="left floated"].column{margin-right:auto}.ui.grid [class*="right floated"].column{margin-left:auto}.ui.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="vertically divided"].grid>.column:not(.row),.ui[class*="vertically divided"].grid>.row>.column{margin-top:1rem;margin-bottom:1rem;padding-top:0;padding-bottom:0}.ui[class*="vertically divided"].grid>.row{margin-top:0;margin-bottom:0}.ui.divided.grid:not([class*="vertically divided"])>.column:first-child,.ui.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row:first-child>.column{margin-top:0}.ui.grid>.divided.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui.grid>.divided.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row{position:relative}.ui[class*="vertically divided"].grid>.row:before{position:absolute;content:"";top:0;left:0;width:calc(100% - 2rem);height:1px;margin:0 1rem;-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.padded.divided.grid:not(.vertically):not(.horizontally),[class*="horizontally padded"].ui.divided.grid{width:100%}.ui[class*="vertically divided"].grid>.row:first-child:before{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(255,255,255,.1);box-shadow:-1px 0 0 0 rgba(255,255,255,.1)}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row):first-child,.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.inverted[class*="vertically divided"].grid>.row:before{-webkit-box-shadow:0 -1px 0 0 rgba(255,255,255,.1);box-shadow:0 -1px 0 0 rgba(255,255,255,.1)}.ui.relaxed[class*="vertically divided"].grid>.row:before{margin-left:1.5rem;margin-right:1.5rem;width:calc(100% - 3rem)}.ui[class*="very relaxed"][class*="vertically divided"].grid>.row:before{margin-left:2.5rem;margin-right:2.5rem;width:calc(100% - 5rem)}.ui.celled.grid{width:100%;margin:1em 0;-webkit-box-shadow:0 0 0 1px #d4d4d5;box-shadow:0 0 0 1px #d4d4d5}.ui.celled.grid>.row{width:100%!important;margin:0;padding:0;-webkit-box-shadow:0 -1px 0 0 #d4d4d5;box-shadow:0 -1px 0 0 #d4d4d5}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{padding:1em}.ui.relaxed.celled.grid>.column:not(.row),.ui.relaxed.celled.grid>.row>.column{padding:1.5em}.ui[class*="very relaxed"].celled.grid>.column:not(.row),.ui[class*="very relaxed"].celled.grid>.row>.column{padding:2em}.ui[class*="internally celled"].grid{-webkit-box-shadow:none;box-shadow:none;margin:0}.ui[class*="internally celled"].grid>.row:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="internally celled"].grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid>.row>[class*="top aligned"].column,.ui.grid>[class*="top aligned"].column:not(.row),.ui.grid>[class*="top aligned"].row>.column,.ui[class*="top aligned"].grid>.column:not(.row),.ui[class*="top aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:top;-ms-flex-item-align:start!important;align-self:flex-start!important}.ui.grid>.row>[class*="middle aligned"].column,.ui.grid>[class*="middle aligned"].column:not(.row),.ui.grid>[class*="middle aligned"].row>.column,.ui[class*="middle aligned"].grid>.column:not(.row),.ui[class*="middle aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:middle;-ms-flex-item-align:center!important;align-self:center!important}.ui.grid>.row>[class*="bottom aligned"].column,.ui.grid>[class*="bottom aligned"].column:not(.row),.ui.grid>[class*="bottom aligned"].row>.column,.ui[class*="bottom aligned"].grid>.column:not(.row),.ui[class*="bottom aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:bottom;-ms-flex-item-align:end!important;align-self:flex-end!important}.ui.grid>.row>.stretched.column,.ui.grid>.stretched.column:not(.row),.ui.grid>.stretched.row>.column,.ui.stretched.grid>.column,.ui.stretched.grid>.row>.column{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.grid>.row>.stretched.column>*,.ui.grid>.stretched.column:not(.row)>*,.ui.grid>.stretched.row>.column>*,.ui.stretched.grid>.column>*,.ui.stretched.grid>.row>.column>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>.row>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].row>.column,.ui[class*="left aligned"].grid>.column,.ui[class*="left aligned"].grid>.row>.column{text-align:left;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.row>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].row>.column,.ui[class*="center aligned"].grid>.column,.ui[class*="center aligned"].grid>.row>.column{text-align:center;-ms-flex-item-align:inherit;align-self:inherit}.ui[class*="center aligned"].grid{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.grid>.row>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].row>.column,.ui[class*="right aligned"].grid>.column,.ui[class*="right aligned"].grid>.row>.column{text-align:right;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.justified.column.column,.ui.grid>.justified.row>.column,.ui.grid>.row>.justified.column.column,.ui.justified.grid>.column,.ui.justified.grid>.row>.column{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.grid>.primary.column,.ui.grid>.primary.row,.ui.grid>.row>.primary.column{background-color:#2185d0;color:#fff}.ui.grid>.row>.secondary.column,.ui.grid>.secondary.column,.ui.grid>.secondary.row{background-color:#1b1c1d;color:#fff}.ui.grid>.red.column,.ui.grid>.red.row,.ui.grid>.row>.red.column{background-color:#db2828;color:#fff}.ui.grid>.orange.column,.ui.grid>.orange.row,.ui.grid>.row>.orange.column{background-color:#f2711c;color:#fff}.ui.grid>.row>.yellow.column,.ui.grid>.yellow.column,.ui.grid>.yellow.row{background-color:#fbbd08;color:#fff}.ui.grid>.olive.column,.ui.grid>.olive.row,.ui.grid>.row>.olive.column{background-color:#b5cc18;color:#fff}.ui.grid>.green.column,.ui.grid>.green.row,.ui.grid>.row>.green.column{background-color:#21ba45;color:#fff}.ui.grid>.row>.teal.column,.ui.grid>.teal.column,.ui.grid>.teal.row{background-color:#00b5ad;color:#fff}.ui.grid>.blue.column,.ui.grid>.blue.row,.ui.grid>.row>.blue.column{background-color:#2185d0;color:#fff}.ui.grid>.row>.violet.column,.ui.grid>.violet.column,.ui.grid>.violet.row{background-color:#6435c9;color:#fff}.ui.grid>.purple.column,.ui.grid>.purple.row,.ui.grid>.row>.purple.column{background-color:#a333c8;color:#fff}.ui.grid>.pink.column,.ui.grid>.pink.row,.ui.grid>.row>.pink.column{background-color:#e03997;color:#fff}.ui.grid>.brown.column,.ui.grid>.brown.row,.ui.grid>.row>.brown.column{background-color:#a5673f;color:#fff}.ui.grid>.grey.column,.ui.grid>.grey.row,.ui.grid>.row>.grey.column{background-color:#767676;color:#fff}.ui.grid>.black.column,.ui.grid>.black.row,.ui.grid>.row>.black.column{background-color:#1b1c1d;color:#fff}.ui.grid>[class*="equal width"].row>.column,.ui[class*="equal width"].grid>.column:not(.row),.ui[class*="equal width"].grid>.row>.column{display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>[class*="equal width"].row>.wide.column,.ui[class*="equal width"].grid>.row>.wide.column,.ui[class*="equal width"].grid>.wide.column{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media only screen and (max-width:767.98px){.ui.grid>[class*="mobile reversed"].row,.ui[class*="mobile reversed"].grid,.ui[class*="mobile reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui.stackable[class*="mobile reversed"],.ui[class*="mobile vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="mobile reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="mobile reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.grid>[class*="tablet reversed"].row,.ui[class*="tablet reversed"].grid,.ui[class*="tablet reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="tablet vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="tablet reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="tablet reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:992px){.ui.grid>[class*="computer reversed"].row,.ui[class*="computer reversed"].grid,.ui[class*="computer reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="computer vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="computer reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="computer reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.doubling.grid{width:auto}.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{display:inline-block!important;padding-top:1rem!important;padding-bottom:1rem!important;-webkit-box-shadow:none!important;box-shadow:none!important;margin:0}.ui.grid>[class*="two column"].doubling.row.row>.column,.ui[class*="two column"].doubling.grid>.column:not(.row),.ui[class*="two column"].doubling.grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling.row.row>.column,.ui[class*="three column"].doubling.grid>.column:not(.row),.ui[class*="three column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling.row.row>.column,.ui[class*="four column"].doubling.grid>.column:not(.row),.ui[class*="four column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling.row.row>.column,.ui[class*="five column"].doubling.grid>.column:not(.row),.ui[class*="five column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="six column"].doubling.row.row>.column,.ui[class*="six column"].doubling.grid>.column:not(.row),.ui[class*="six column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="seven column"].doubling.row.row>.column,.ui[class*="seven column"].doubling.grid>.column:not(.row),.ui[class*="seven column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eight column"].doubling.row.row>.column,.ui[class*="eight column"].doubling.grid>.column:not(.row),.ui[class*="eight column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="nine column"].doubling.row.row>.column,.ui[class*="nine column"].doubling.grid>.column:not(.row),.ui[class*="nine column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="ten column"].doubling.row.row>.column,.ui[class*="ten column"].doubling.grid>.column:not(.row),.ui[class*="ten column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="eleven column"].doubling.row.row>.column,.ui[class*="eleven column"].doubling.grid>.column:not(.row),.ui[class*="eleven column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="twelve column"].doubling.row.row>.column,.ui[class*="twelve column"].doubling.grid>.column:not(.row),.ui[class*="twelve column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="thirteen column"].doubling.row.row>.column,.ui[class*="thirteen column"].doubling.grid>.column:not(.row),.ui[class*="thirteen column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="fourteen column"].doubling.row.row>.column,.ui[class*="fourteen column"].doubling.grid>.column:not(.row),.ui[class*="fourteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="fifteen column"].doubling.row.row>.column,.ui[class*="fifteen column"].doubling.grid>.column:not(.row),.ui[class*="fifteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="sixteen column"].doubling.row.row>.column,.ui[class*="sixteen column"].doubling.grid>.column:not(.row),.ui[class*="sixteen column"].doubling.grid>.row>.column{width:12.5%!important}}@media only screen and (max-width:767.98px){.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{padding-top:1rem!important;padding-bottom:1rem!important;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.grid>[class*="two column"].doubling:not(.stackable).row.row>.column,.ui[class*="two column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="two column"].doubling:not(.stackable).grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling:not(.stackable).row.row>.column,.ui[class*="three column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="three column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling:not(.stackable).row.row>.column,.ui[class*="four column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="four column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling:not(.stackable).row.row>.column,.ui[class*="five column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="five column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="six column"].doubling:not(.stackable).row.row>.column,.ui[class*="six column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="six column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="seven column"].doubling:not(.stackable).row.row>.column,.ui[class*="seven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="seven column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="eight column"].doubling:not(.stackable).row.row>.column,.ui[class*="eight column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eight column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="nine column"].doubling:not(.stackable).row.row>.column,.ui[class*="nine column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="nine column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="ten column"].doubling:not(.stackable).row.row>.column,.ui[class*="ten column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="ten column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eleven column"].doubling:not(.stackable).row.row>.column,.ui[class*="eleven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eleven column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="twelve column"].doubling:not(.stackable).row.row>.column,.ui[class*="twelve column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="twelve column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="thirteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="thirteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="thirteen column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="fourteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fourteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fourteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="fifteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fifteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fifteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="sixteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="sixteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="sixteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}}@media only screen and (max-width:767.98px){.ui.stackable.grid{width:auto;margin-left:0!important;margin-right:0!important}.ui.grid>.stackable.stackable.stackable.row>.column,.ui.stackable.grid>.column.grid>.column,.ui.stackable.grid>.column.row>.column,.ui.stackable.grid>.column:not(.row),.ui.stackable.grid>.row>.column,.ui.stackable.grid>.row>.wide.column,.ui.stackable.grid>.wide.column{width:100%!important;margin:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;padding:1rem 1rem}.ui.stackable.grid:not(.vertically)>.row{margin:0;padding:0}.ui.container>.ui.stackable.grid>.column,.ui.container>.ui.stackable.grid>.row>.column{padding-left:0!important;padding-right:0!important}.ui.grid .ui.stackable.grid,.ui.segment:not(.vertical) .ui.stackable.page.grid{margin-left:-1rem!important;margin-right:-1rem!important}.ui.stackable.celled.grid>.column:not(.row):first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:not(.row):first-child,.ui.stackable.divided.grid>.row:first-child>.column:first-child{border-top:none!important}.ui.inverted.stackable.celled.grid>.column:not(.row),.ui.inverted.stackable.celled.grid>.row>.column,.ui.inverted.stackable.divided.grid>.column:not(.row),.ui.inverted.stackable.divided.grid>.row>.column{border-top:1px solid rgba(255,255,255,.1)}.ui.stackable.celled.grid>.column:not(.row),.ui.stackable.celled.grid>.row>.column,.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{border-top:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none!important;box-shadow:none!important;padding-top:2rem!important;padding-bottom:2rem!important}.ui.stackable.celled.grid>.row{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{padding-left:0!important;padding-right:0!important}}@media only screen and (max-width:767.98px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].row:not(.mobile),.ui[class*="tablet only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].row:not(.mobile),.ui[class*="computer only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].row:not(.tablet),.ui[class*="mobile only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].row:not(.tablet),.ui[class*="computer only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919.98px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1920px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}}.ui.ui.ui.compact.grid>.column:not(.row),.ui.ui.ui.compact.grid>.row>.column{padding-left:.5rem;padding-right:.5rem}.ui.ui.ui.compact.grid>*{padding-left:.5rem;padding-right:.5rem}.ui.ui.ui.compact.grid>.row{padding-top:.5rem;padding-bottom:.5rem}.ui.ui.ui.compact.grid>.column:not(.row){padding-top:.5rem;padding-bottom:.5rem}.ui.compact.relaxed.celled.grid>.column:not(.row),.ui.compact.relaxed.celled.grid>.row>.column{padding:.75em}.ui.compact[class*="very relaxed"].celled.grid>.column:not(.row),.ui.compact[class*="very relaxed"].celled.grid>.row>.column{padding:1em}.ui[class*="very compact"].grid>.column:not(.row),.ui[class*="very compact"].grid>.row>.column{padding-left:.25rem;padding-right:.5rem}.ui[class*="very compact"].grid>*{padding-left:.25rem;padding-right:.25rem}.ui[class*="very compact"].grid>.row{padding-top:.25rem;padding-bottom:.25rem}.ui[class*="very compact"].grid>.column:not(.row){padding-top:.25rem;padding-bottom:.25rem}.ui[class*="very compact"].relaxed.celled.grid>.column:not(.row),.ui[class*="very compact"].relaxed.celled.grid>.row>.column{padding:.375em}.ui[class*="very compact"][class*="very relaxed"].celled.grid>.column:not(.row),.ui[class*="very compact"][class*="very relaxed"].celled.grid>.row>.column{padding:.5em}
\ No newline at end of file
diff --git a/ui/dist/components/header.css b/ui/dist/components/header.css
index 2b9132dce3d..3abf2a53081 100644
--- a/ui/dist/components/header.css
+++ b/ui/dist/components/header.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Header
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Header
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -17,8 +17,8 @@
/* Standard */
.ui.header {
border: none;
- margin: calc(2rem - 0.14285714em ) 0em 1rem;
- padding: 0em 0em;
+ margin: calc(2rem - 0.1428571428571429em) 0 1rem;
+ padding: 0 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 200;
line-height: 1.28571429em;
@@ -29,18 +29,18 @@
margin-top: -0.14285714em;
}
.ui.header:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
- Sub Header
----------------*/
+ Sub Header
+ ---------------*/
.ui.header .sub.header {
display: block;
font-weight: normal;
- padding: 0em;
- margin: 0em;
+ padding: 0;
+ margin: 0;
font-size: 1rem;
line-height: 1.2em;
color: rgba(0, 0, 0, 0.6);
@@ -54,14 +54,14 @@
display: table-cell;
opacity: 1;
font-size: 1.5em;
- padding-top: 0em;
+ padding-top: 0;
vertical-align: middle;
}
/* With Text Node */
.ui.header .icon:only-child {
display: inline-block;
- padding: 0em;
+ padding: 0;
margin-right: 0.75rem;
}
@@ -117,7 +117,7 @@
/* Positioning */
.ui.header + p {
- margin-top: 0em;
+ margin-top: 0;
}
@@ -133,33 +133,37 @@
h1.ui.header {
font-size: 3rem;
}
+h1.ui.header .sub.header {
+ font-size: 1.125rem;
+}
h2.ui.header {
font-size: 2.614rem;
}
+h2.ui.header .sub.header {
+ font-size: 1.125rem;
+}
h3.ui.header {
font-size: 2.18rem;
}
+h3.ui.header .sub.header {
+ font-size: 1rem;
+}
h4.ui.header {
font-size: 1.8rem;
}
+h4.ui.header .sub.header {
+ font-size: 1rem;
+}
h5.ui.header {
font-size: 1.5rem;
}
-
-/* Sub Header */
-h1.ui.header .sub.header {
- font-size: 1.125rem;
-}
-h2.ui.header .sub.header {
- font-size: 1.125rem;
-}
-h3.ui.header .sub.header {
- font-size: 1rem;
+h5.ui.header .sub.header {
+ font-size: 0.9375rem;
}
-h4.ui.header .sub.header {
- font-size: 1rem;
+h6.ui.header {
+ font-size: 0.85714286rem;
}
-h5.ui.header .sub.header {
+h6.ui.header .sub.header {
font-size: 0.9375rem;
}
@@ -167,83 +171,104 @@ h5.ui.header .sub.header {
Content Heading
---------------*/
-.ui.huge.header {
- min-height: 1em;
- font-size: 3em;
+.ui.mini.header {
+ font-size: 0.85714286em;
}
-.ui.large.header {
- font-size: 2.614em;
+.ui.mini.header .sub.header {
+ font-size: 0.9375rem;
}
-.ui.medium.header {
- font-size: 2.18em;
+.ui.mini.sub.header {
+ font-size: 0.8125em;
+}
+.ui.tiny.header {
+ font-size: 1.5em;
+}
+.ui.tiny.header .sub.header {
+ font-size: 0.9375rem;
+}
+.ui.tiny.sub.header {
+ font-size: 0.8125em;
}
.ui.small.header {
font-size: 1.8em;
}
-.ui.tiny.header {
- font-size: 1.5em;
+.ui.small.header .sub.header {
+ font-size: 1rem;
}
-
-/* Sub Header */
-.ui.huge.header .sub.header {
- font-size: 1.125rem;
+.ui.small.sub.header {
+ font-size: 0.8125em;
+}
+.ui.large.header {
+ font-size: 2.614em;
+ min-height: 1em;
}
.ui.large.header .sub.header {
font-size: 1.125rem;
}
-.ui.header .sub.header {
- font-size: 1rem;
+.ui.large.sub.header {
+ font-size: 0.9375em;
}
-.ui.small.header .sub.header {
- font-size: 1rem;
+.ui.big.header {
+ font-size: 1.85714286em;
}
-.ui.tiny.header .sub.header {
- font-size: 0.9375rem;
+.ui.big.header .sub.header {
+ font-size: 1.125rem;
+}
+.ui.big.sub.header {
+ font-size: 1em;
+}
+.ui.huge.header {
+ font-size: 3em;
+ min-height: 1em;
+}
+.ui.huge.header .sub.header {
+ font-size: 1.125rem;
+}
+.ui.huge.sub.header {
+ font-size: 1em;
+}
+.ui.massive.header {
+ font-size: 2.28571429em;
+ min-height: 1em;
+}
+.ui.massive.header .sub.header {
+ font-size: 1.4375rem;
+}
+.ui.massive.sub.header {
+ font-size: 1.125em;
}
/*--------------
- Sub Heading
----------------*/
+ Sub Heading
+ ---------------*/
.ui.sub.header {
- padding: 0em;
+ padding: 0;
margin-bottom: 0.125rem;
font-weight: bold;
font-size: 0.875em;
text-transform: uppercase;
color: '';
}
-.ui.small.sub.header {
- font-size: 0.8125em;
-}
-.ui.sub.header {
- font-size: 0.875em;
-}
-.ui.large.sub.header {
- font-size: 0.9375em;
-}
-.ui.huge.sub.header {
- font-size: 1em;
-}
/*-------------------
- Icon
---------------------*/
+ Icon
+ --------------------*/
.ui.icon.header {
display: inline-block;
text-align: center;
- margin: 2rem 0em 1rem;
+ margin: 2rem 0 1rem;
}
.ui.icon.header:after {
content: '';
display: block;
- height: 0px;
+ height: 0;
clear: both;
visibility: hidden;
}
.ui.icon.header:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.icon.header .icon {
float: none;
@@ -251,14 +276,17 @@ h5.ui.header .sub.header {
width: auto;
height: auto;
line-height: 1;
- padding: 0em;
+ padding: 0;
font-size: 3em;
- margin: 0em auto 0.5rem;
+ margin: 0 auto 0.5rem;
opacity: 1;
}
+.ui.icon.header .corner.icon {
+ font-size: calc(3em * 0.45);
+}
.ui.icon.header .content {
display: block;
- padding: 0em;
+ padding: 0;
}
.ui.icon.header .circular.icon {
font-size: 2em;
@@ -267,7 +295,7 @@ h5.ui.header .sub.header {
font-size: 2em;
}
.ui.block.icon.header .icon {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.icon.header.aligned {
margin-left: auto;
@@ -291,8 +319,8 @@ h5.ui.header .sub.header {
/*-------------------
- Inverted
---------------------*/
+ Inverted
+ --------------------*/
.ui.inverted.header {
color: #FFFFFF;
@@ -301,9 +329,7 @@ h5.ui.header .sub.header {
color: rgba(255, 255, 255, 0.8);
}
.ui.inverted.attached.header {
- background: #545454 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
- background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+ background: #1B1C1D;
-webkit-box-shadow: none;
box-shadow: none;
border-color: transparent;
@@ -314,8 +340,6 @@ h5.ui.header .sub.header {
background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
-webkit-box-shadow: none;
box-shadow: none;
-}
-.ui.inverted.block.header {
border-bottom: none;
}
@@ -323,250 +347,280 @@ h5.ui.header .sub.header {
Colors
--------------------*/
-
-/*--- Red ---*/
-
+.ui.primary.header {
+ color: #2185D0;
+}
+a.ui.primary.header:hover {
+ color: #1678c2;
+}
+.ui.primary.dividing.header {
+ border-bottom: 2px solid #2185D0;
+}
+.ui.inverted.primary.header.header.header {
+ color: #54C8FF;
+}
+a.ui.inverted.primary.header.header.header:hover {
+ color: #21b8ff;
+}
+.ui.inverted.primary.dividing.header {
+ border-bottom: 2px solid #54C8FF;
+}
+.ui.secondary.header {
+ color: #1B1C1D;
+}
+a.ui.secondary.header:hover {
+ color: #27292a;
+}
+.ui.secondary.dividing.header {
+ border-bottom: 2px solid #1B1C1D;
+}
+.ui.inverted.secondary.header.header.header {
+ color: #545454;
+}
+a.ui.inverted.secondary.header.header.header:hover {
+ color: #6e6e6e;
+}
+.ui.inverted.secondary.dividing.header {
+ border-bottom: 2px solid #545454;
+}
.ui.red.header {
- color: #DB2828 !important;
+ color: #DB2828;
}
a.ui.red.header:hover {
- color: #d01919 !important;
+ color: #d01919;
}
.ui.red.dividing.header {
border-bottom: 2px solid #DB2828;
}
-
-/* Inverted */
-.ui.inverted.red.header {
- color: #FF695E !important;
+.ui.inverted.red.header.header.header {
+ color: #FF695E;
}
-a.ui.inverted.red.header:hover {
- color: #ff5144 !important;
+a.ui.inverted.red.header.header.header:hover {
+ color: #ff392b;
+}
+.ui.inverted.red.dividing.header {
+ border-bottom: 2px solid #FF695E;
}
-
-/*--- Orange ---*/
-
.ui.orange.header {
- color: #F2711C !important;
+ color: #F2711C;
}
a.ui.orange.header:hover {
- color: #f26202 !important;
+ color: #f26202;
}
.ui.orange.dividing.header {
border-bottom: 2px solid #F2711C;
}
-
-/* Inverted */
-.ui.inverted.orange.header {
- color: #FF851B !important;
-}
-a.ui.inverted.orange.header:hover {
- color: #ff7701 !important;
+.ui.inverted.orange.header.header.header {
+ color: #FF851B;
}
-
-/*--- Olive ---*/
-
-.ui.olive.header {
- color: #B5CC18 !important;
+a.ui.inverted.orange.header.header.header:hover {
+ color: #e76b00;
}
-a.ui.olive.header:hover {
- color: #a7bd0d !important;
-}
-.ui.olive.dividing.header {
- border-bottom: 2px solid #B5CC18;
-}
-
-/* Inverted */
-.ui.inverted.olive.header {
- color: #D9E778 !important;
+.ui.inverted.orange.dividing.header {
+ border-bottom: 2px solid #FF851B;
}
-a.ui.inverted.olive.header:hover {
- color: #d8ea5c !important;
-}
-
-/*--- Yellow ---*/
-
.ui.yellow.header {
- color: #FBBD08 !important;
+ color: #FBBD08;
}
a.ui.yellow.header:hover {
- color: #eaae00 !important;
+ color: #eaae00;
}
.ui.yellow.dividing.header {
border-bottom: 2px solid #FBBD08;
}
-
-/* Inverted */
-.ui.inverted.yellow.header {
- color: #FFE21F !important;
+.ui.inverted.yellow.header.header.header {
+ color: #FFE21F;
}
-a.ui.inverted.yellow.header:hover {
- color: #ffdf05 !important;
+a.ui.inverted.yellow.header.header.header:hover {
+ color: #ebcd00;
+}
+.ui.inverted.yellow.dividing.header {
+ border-bottom: 2px solid #FFE21F;
+}
+.ui.olive.header {
+ color: #B5CC18;
+}
+a.ui.olive.header:hover {
+ color: #a7bd0d;
+}
+.ui.olive.dividing.header {
+ border-bottom: 2px solid #B5CC18;
+}
+.ui.inverted.olive.header.header.header {
+ color: #D9E778;
+}
+a.ui.inverted.olive.header.header.header:hover {
+ color: #d2e745;
+}
+.ui.inverted.olive.dividing.header {
+ border-bottom: 2px solid #D9E778;
}
-
-/*--- Green ---*/
-
.ui.green.header {
- color: #21BA45 !important;
+ color: #21BA45;
}
a.ui.green.header:hover {
- color: #16ab39 !important;
+ color: #16ab39;
}
.ui.green.dividing.header {
border-bottom: 2px solid #21BA45;
}
-
-/* Inverted */
-.ui.inverted.green.header {
- color: #2ECC40 !important;
+.ui.inverted.green.header.header.header {
+ color: #2ECC40;
}
-a.ui.inverted.green.header:hover {
- color: #22be34 !important;
+a.ui.inverted.green.header.header.header:hover {
+ color: #1ea92e;
+}
+.ui.inverted.green.dividing.header {
+ border-bottom: 2px solid #2ECC40;
}
-
-/*--- Teal ---*/
-
.ui.teal.header {
- color: #00B5AD !important;
+ color: #00B5AD;
}
a.ui.teal.header:hover {
- color: #009c95 !important;
+ color: #009c95;
}
.ui.teal.dividing.header {
border-bottom: 2px solid #00B5AD;
}
-
-/* Inverted */
-.ui.inverted.teal.header {
- color: #6DFFFF !important;
+.ui.inverted.teal.header.header.header {
+ color: #6DFFFF;
}
-a.ui.inverted.teal.header:hover {
- color: #54ffff !important;
+a.ui.inverted.teal.header.header.header:hover {
+ color: #3affff;
+}
+.ui.inverted.teal.dividing.header {
+ border-bottom: 2px solid #6DFFFF;
}
-
-/*--- Blue ---*/
-
.ui.blue.header {
- color: #2185D0 !important;
+ color: #2185D0;
}
a.ui.blue.header:hover {
- color: #1678c2 !important;
+ color: #1678c2;
}
.ui.blue.dividing.header {
border-bottom: 2px solid #2185D0;
}
-
-/* Inverted */
-.ui.inverted.blue.header {
- color: #54C8FF !important;
+.ui.inverted.blue.header.header.header {
+ color: #54C8FF;
}
-a.ui.inverted.blue.header:hover {
- color: #3ac0ff !important;
+a.ui.inverted.blue.header.header.header:hover {
+ color: #21b8ff;
+}
+.ui.inverted.blue.dividing.header {
+ border-bottom: 2px solid #54C8FF;
}
-
-/*--- Violet ---*/
-
.ui.violet.header {
- color: #6435C9 !important;
+ color: #6435C9;
}
a.ui.violet.header:hover {
- color: #5829bb !important;
+ color: #5829bb;
}
.ui.violet.dividing.header {
border-bottom: 2px solid #6435C9;
}
-
-/* Inverted */
-.ui.inverted.violet.header {
- color: #A291FB !important;
+.ui.inverted.violet.header.header.header {
+ color: #A291FB;
}
-a.ui.inverted.violet.header:hover {
- color: #8a73ff !important;
+a.ui.inverted.violet.header.header.header:hover {
+ color: #745aff;
+}
+.ui.inverted.violet.dividing.header {
+ border-bottom: 2px solid #A291FB;
}
-
-/*--- Purple ---*/
-
.ui.purple.header {
- color: #A333C8 !important;
+ color: #A333C8;
}
a.ui.purple.header:hover {
- color: #9627ba !important;
+ color: #9627ba;
}
.ui.purple.dividing.header {
border-bottom: 2px solid #A333C8;
}
-
-/* Inverted */
-.ui.inverted.purple.header {
- color: #DC73FF !important;
+.ui.inverted.purple.header.header.header {
+ color: #DC73FF;
}
-a.ui.inverted.purple.header:hover {
- color: #d65aff !important;
+a.ui.inverted.purple.header.header.header:hover {
+ color: #cf40ff;
+}
+.ui.inverted.purple.dividing.header {
+ border-bottom: 2px solid #DC73FF;
}
-
-/*--- Pink ---*/
-
.ui.pink.header {
- color: #E03997 !important;
+ color: #E03997;
}
a.ui.pink.header:hover {
- color: #e61a8d !important;
+ color: #e61a8d;
}
.ui.pink.dividing.header {
border-bottom: 2px solid #E03997;
}
-
-/* Inverted */
-.ui.inverted.pink.header {
- color: #FF8EDF !important;
+.ui.inverted.pink.header.header.header {
+ color: #FF8EDF;
}
-a.ui.inverted.pink.header:hover {
- color: #ff74d8 !important;
+a.ui.inverted.pink.header.header.header:hover {
+ color: #ff5bd1;
+}
+.ui.inverted.pink.dividing.header {
+ border-bottom: 2px solid #FF8EDF;
}
-
-/*--- Brown ---*/
-
.ui.brown.header {
- color: #A5673F !important;
+ color: #A5673F;
}
a.ui.brown.header:hover {
- color: #975b33 !important;
+ color: #975b33;
}
.ui.brown.dividing.header {
border-bottom: 2px solid #A5673F;
}
-
-/* Inverted */
-.ui.inverted.brown.header {
- color: #D67C1C !important;
+.ui.inverted.brown.header.header.header {
+ color: #D67C1C;
}
-a.ui.inverted.brown.header:hover {
- color: #c86f11 !important;
+a.ui.inverted.brown.header.header.header:hover {
+ color: #b0620f;
+}
+.ui.inverted.brown.dividing.header {
+ border-bottom: 2px solid #D67C1C;
}
-
-/*--- Grey ---*/
-
.ui.grey.header {
- color: #767676 !important;
+ color: #767676;
}
a.ui.grey.header:hover {
- color: #838383 !important;
+ color: #838383;
}
.ui.grey.dividing.header {
border-bottom: 2px solid #767676;
}
-
-/* Inverted */
-.ui.inverted.grey.header {
- color: #DCDDDE !important;
+.ui.inverted.grey.header.header.header {
+ color: #DCDDDE;
+}
+a.ui.inverted.grey.header.header.header:hover {
+ color: #c2c4c5;
+}
+.ui.inverted.grey.dividing.header {
+ border-bottom: 2px solid #DCDDDE;
+}
+.ui.black.header {
+ color: #1B1C1D;
+}
+a.ui.black.header:hover {
+ color: #27292a;
+}
+.ui.black.dividing.header {
+ border-bottom: 2px solid #1B1C1D;
+}
+.ui.inverted.black.header.header.header {
+ color: #545454;
+}
+a.ui.inverted.black.header.header.header:hover {
+ color: #000000;
}
-a.ui.inverted.grey.header:hover {
- color: #cfd0d2 !important;
+.ui.inverted.black.dividing.header {
+ border-bottom: 2px solid #545454;
}
/*-------------------
- Aligned
---------------------*/
+ Aligned
+ --------------------*/
.ui.left.aligned.header {
text-align: left;
@@ -588,32 +642,32 @@ a.ui.inverted.grey.header:hover {
}
/*-------------------
- Floated
---------------------*/
+ Floated
+ --------------------*/
.ui.floated.header,
.ui[class*="left floated"].header {
float: left;
- margin-top: 0em;
+ margin-top: 0;
margin-right: 0.5em;
}
.ui[class*="right floated"].header {
float: right;
- margin-top: 0em;
+ margin-top: 0;
margin-left: 0.5em;
}
/*-------------------
- Fitted
---------------------*/
+ Fitted
+ --------------------*/
.ui.fitted.header {
- padding: 0em;
+ padding: 0;
}
/*-------------------
- Dividing
---------------------*/
+ Dividing
+ --------------------*/
.ui.dividing.header {
padding-bottom: 0.1875rem;
@@ -623,15 +677,15 @@ a.ui.inverted.grey.header:hover {
padding-bottom: 0.1875rem;
}
.ui.dividing.header .icon {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.inverted.dividing.header {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
/*-------------------
- Block
---------------------*/
+ Block
+ --------------------*/
.ui.block.header {
background: #F3F4F5;
@@ -641,70 +695,82 @@ a.ui.inverted.grey.header:hover {
border: 1px solid #D4D4D5;
border-radius: 0.25rem;
}
+.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+ font-size: 1rem;
+}
+.ui.mini.block.header {
+ font-size: 0.8125rem;
+}
.ui.tiny.block.header {
font-size: 0.875rem;
}
.ui.small.block.header {
font-size: 0.9375rem;
}
-.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: 1rem;
-}
.ui.large.block.header {
font-size: 1.125rem;
}
+.ui.big.block.header {
+ font-size: 1.3125rem;
+}
.ui.huge.block.header {
font-size: 1.4375rem;
}
+.ui.massive.block.header {
+ font-size: 1.6875rem;
+}
/*-------------------
- Attached
---------------------*/
+ Attached
+ --------------------*/
.ui.attached.header {
background: #FFFFFF;
padding: 0.8125rem 1rem;
- margin-left: -1px;
- margin-right: -1px;
+ margin: 0 -1px 0 -1px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #D4D4D5;
+ border-radius: 0;
}
.ui.attached.block.header {
background: #F3F4F5;
}
-.ui.attached:not(.top):not(.bottom).header {
- margin-top: 0em;
- margin-bottom: 0em;
+.ui.attached:not(.top).header {
border-top: none;
- border-radius: 0em;
}
.ui.top.attached.header {
- margin-bottom: 0em;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.bottom.attached.header {
- margin-top: 0em;
- border-top: none;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
/* Attached Sizes */
+.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+ font-size: 1em;
+}
+.ui.mini.attached.header {
+ font-size: 0.8125em;
+}
.ui.tiny.attached.header {
font-size: 0.875em;
}
.ui.small.attached.header {
font-size: 0.9375em;
}
-.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: 1em;
-}
.ui.large.attached.header {
font-size: 1.125em;
}
+.ui.big.attached.header {
+ font-size: 1.3125em;
+}
.ui.huge.attached.header {
font-size: 1.4375em;
}
+.ui.massive.attached.header {
+ font-size: 1.6875em;
+}
/*-------------------
Sizing
diff --git a/ui/dist/components/header.min.css b/ui/dist/components/header.min.css
index 42128ec0b67..14fcdcef8c8 100644
--- a/ui/dist/components/header.min.css
+++ b/ui/dist/components/header.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Header
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Header
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.header{border:none;margin:calc(2rem - .14285714em) 0 1rem;padding:0 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:200;line-height:1.28571429em;text-transform:none;color:rgba(0,0,0,.87)}.ui.header:first-child{margin-top:-.14285714em}.ui.header:last-child{margin-bottom:0}.ui.header .sub.header{display:block;font-weight:400;padding:0;margin:0;font-size:1rem;line-height:1.2em;color:rgba(0,0,0,.6)}.ui.header>.icon{display:table-cell;opacity:1;font-size:1.5em;padding-top:0;vertical-align:middle}.ui.header .icon:only-child{display:inline-block;padding:0;margin-right:.75rem}.ui.header>.image:not(.icon),.ui.header>img{display:inline-block;margin-top:.14285714em;width:2.5em;height:auto;vertical-align:middle}.ui.header>.image:not(.icon):only-child,.ui.header>img:only-child{margin-right:.75rem}.ui.header .content{display:inline-block;vertical-align:top}.ui.header>.image+.content,.ui.header>img+.content{padding-left:.75rem;vertical-align:middle}.ui.header>.icon+.content{padding-left:.75rem;display:table-cell;vertical-align:middle}.ui.header .ui.label{font-size:'';margin-left:.5rem;vertical-align:middle}.ui.header+p{margin-top:0}h1.ui.header{font-size:3rem}h2.ui.header{font-size:2.614rem}h3.ui.header{font-size:2.18rem}h4.ui.header{font-size:1.8rem}h5.ui.header{font-size:1.5rem}h1.ui.header .sub.header{font-size:1.125rem}h2.ui.header .sub.header{font-size:1.125rem}h3.ui.header .sub.header{font-size:1rem}h4.ui.header .sub.header{font-size:1rem}h5.ui.header .sub.header{font-size:.9375rem}.ui.huge.header{min-height:1em;font-size:3em}.ui.large.header{font-size:2.614em}.ui.medium.header{font-size:2.18em}.ui.small.header{font-size:1.8em}.ui.tiny.header{font-size:1.5em}.ui.huge.header .sub.header{font-size:1.125rem}.ui.large.header .sub.header{font-size:1.125rem}.ui.header .sub.header{font-size:1rem}.ui.small.header .sub.header{font-size:1rem}.ui.tiny.header .sub.header{font-size:.9375rem}.ui.sub.header{padding:0;margin-bottom:.125rem;font-weight:700;font-size:.875em;text-transform:uppercase;color:''}.ui.small.sub.header{font-size:.8125em}.ui.sub.header{font-size:.875em}.ui.large.sub.header{font-size:.9375em}.ui.huge.sub.header{font-size:1em}.ui.icon.header{display:inline-block;text-align:center;margin:2rem 0 1rem}.ui.icon.header:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.icon.header:first-child{margin-top:0}.ui.icon.header .icon{float:none;display:block;width:auto;height:auto;line-height:1;padding:0;font-size:3em;margin:0 auto .5rem;opacity:1}.ui.icon.header .content{display:block;padding:0}.ui.icon.header .circular.icon{font-size:2em}.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{margin-left:auto;margin-right:auto;display:block}.ui.disabled.header{opacity:.45}.ui.inverted.header{color:#fff}.ui.inverted.header .sub.header{color:rgba(255,255,255,.8)}.ui.inverted.attached.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.ui.inverted.block.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none}.ui.inverted.block.header{border-bottom:none}.ui.red.header{color:#db2828!important}a.ui.red.header:hover{color:#d01919!important}.ui.red.dividing.header{border-bottom:2px solid #db2828}.ui.inverted.red.header{color:#ff695e!important}a.ui.inverted.red.header:hover{color:#ff5144!important}.ui.orange.header{color:#f2711c!important}a.ui.orange.header:hover{color:#f26202!important}.ui.orange.dividing.header{border-bottom:2px solid #f2711c}.ui.inverted.orange.header{color:#ff851b!important}a.ui.inverted.orange.header:hover{color:#ff7701!important}.ui.olive.header{color:#b5cc18!important}a.ui.olive.header:hover{color:#a7bd0d!important}.ui.olive.dividing.header{border-bottom:2px solid #b5cc18}.ui.inverted.olive.header{color:#d9e778!important}a.ui.inverted.olive.header:hover{color:#d8ea5c!important}.ui.yellow.header{color:#fbbd08!important}a.ui.yellow.header:hover{color:#eaae00!important}.ui.yellow.dividing.header{border-bottom:2px solid #fbbd08}.ui.inverted.yellow.header{color:#ffe21f!important}a.ui.inverted.yellow.header:hover{color:#ffdf05!important}.ui.green.header{color:#21ba45!important}a.ui.green.header:hover{color:#16ab39!important}.ui.green.dividing.header{border-bottom:2px solid #21ba45}.ui.inverted.green.header{color:#2ecc40!important}a.ui.inverted.green.header:hover{color:#22be34!important}.ui.teal.header{color:#00b5ad!important}a.ui.teal.header:hover{color:#009c95!important}.ui.teal.dividing.header{border-bottom:2px solid #00b5ad}.ui.inverted.teal.header{color:#6dffff!important}a.ui.inverted.teal.header:hover{color:#54ffff!important}.ui.blue.header{color:#2185d0!important}a.ui.blue.header:hover{color:#1678c2!important}.ui.blue.dividing.header{border-bottom:2px solid #2185d0}.ui.inverted.blue.header{color:#54c8ff!important}a.ui.inverted.blue.header:hover{color:#3ac0ff!important}.ui.violet.header{color:#6435c9!important}a.ui.violet.header:hover{color:#5829bb!important}.ui.violet.dividing.header{border-bottom:2px solid #6435c9}.ui.inverted.violet.header{color:#a291fb!important}a.ui.inverted.violet.header:hover{color:#8a73ff!important}.ui.purple.header{color:#a333c8!important}a.ui.purple.header:hover{color:#9627ba!important}.ui.purple.dividing.header{border-bottom:2px solid #a333c8}.ui.inverted.purple.header{color:#dc73ff!important}a.ui.inverted.purple.header:hover{color:#d65aff!important}.ui.pink.header{color:#e03997!important}a.ui.pink.header:hover{color:#e61a8d!important}.ui.pink.dividing.header{border-bottom:2px solid #e03997}.ui.inverted.pink.header{color:#ff8edf!important}a.ui.inverted.pink.header:hover{color:#ff74d8!important}.ui.brown.header{color:#a5673f!important}a.ui.brown.header:hover{color:#975b33!important}.ui.brown.dividing.header{border-bottom:2px solid #a5673f}.ui.inverted.brown.header{color:#d67c1c!important}a.ui.inverted.brown.header:hover{color:#c86f11!important}.ui.grey.header{color:#767676!important}a.ui.grey.header:hover{color:#838383!important}.ui.grey.dividing.header{border-bottom:2px solid #767676}.ui.inverted.grey.header{color:#dcddde!important}a.ui.inverted.grey.header:hover{color:#cfd0d2!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header,.ui.centered.header{text-align:center}.ui.justified.header{text-align:justify}.ui.justified.header:after{display:inline-block;content:'';width:100%}.ui.floated.header,.ui[class*="left floated"].header{float:left;margin-top:0;margin-right:.5em}.ui[class*="right floated"].header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.1875rem;border-bottom:1px solid rgba(34,36,38,.15)}.ui.dividing.header .sub.header{padding-bottom:.1875rem}.ui.dividing.header .icon{margin-bottom:0}.ui.inverted.dividing.header{border-bottom-color:rgba(255,255,255,.1)}.ui.block.header{background:#f3f4f5;padding:.8125rem 1rem;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5;border-radius:.25rem}.ui.tiny.block.header{font-size:.875rem}.ui.small.block.header{font-size:.9375rem}.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1rem}.ui.large.block.header{font-size:1.125rem}.ui.huge.block.header{font-size:1.4375rem}.ui.attached.header{background:#fff;padding:.8125rem 1rem;margin-left:-1px;margin-right:-1px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached.block.header{background:#f3f4f5}.ui.attached:not(.top):not(.bottom).header{margin-top:0;margin-bottom:0;border-top:none;border-radius:0}.ui.top.attached.header{margin-bottom:0;border-radius:.25rem .25rem 0 0}.ui.bottom.attached.header{margin-top:0;border-top:none;border-radius:0 0 .25rem .25rem}.ui.tiny.attached.header{font-size:.875em}.ui.small.attached.header{font-size:.9375em}.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1em}.ui.large.attached.header{font-size:1.125em}.ui.huge.attached.header{font-size:1.4375em}.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:2.18em}
\ No newline at end of file
+ */.ui.header{border:none;margin:calc(2rem - .1428571428571429em) 0 1rem;padding:0 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:200;line-height:1.28571429em;text-transform:none;color:rgba(0,0,0,.87)}.ui.header:first-child{margin-top:-.14285714em}.ui.header:last-child{margin-bottom:0}.ui.header .sub.header{display:block;font-weight:400;padding:0;margin:0;font-size:1rem;line-height:1.2em;color:rgba(0,0,0,.6)}.ui.header>.icon{display:table-cell;opacity:1;font-size:1.5em;padding-top:0;vertical-align:middle}.ui.header .icon:only-child{display:inline-block;padding:0;margin-right:.75rem}.ui.header>.image:not(.icon),.ui.header>img{display:inline-block;margin-top:.14285714em;width:2.5em;height:auto;vertical-align:middle}.ui.header>.image:not(.icon):only-child,.ui.header>img:only-child{margin-right:.75rem}.ui.header .content{display:inline-block;vertical-align:top}.ui.header>.image+.content,.ui.header>img+.content{padding-left:.75rem;vertical-align:middle}.ui.header>.icon+.content{padding-left:.75rem;display:table-cell;vertical-align:middle}.ui.header .ui.label{font-size:'';margin-left:.5rem;vertical-align:middle}.ui.header+p{margin-top:0}h1.ui.header{font-size:3rem}h1.ui.header .sub.header{font-size:1.125rem}h2.ui.header{font-size:2.614rem}h2.ui.header .sub.header{font-size:1.125rem}h3.ui.header{font-size:2.18rem}h3.ui.header .sub.header{font-size:1rem}h4.ui.header{font-size:1.8rem}h4.ui.header .sub.header{font-size:1rem}h5.ui.header{font-size:1.5rem}h5.ui.header .sub.header{font-size:.9375rem}h6.ui.header{font-size:.85714286rem}h6.ui.header .sub.header{font-size:.9375rem}.ui.mini.header{font-size:.85714286em}.ui.mini.header .sub.header{font-size:.9375rem}.ui.mini.sub.header{font-size:.8125em}.ui.tiny.header{font-size:1.5em}.ui.tiny.header .sub.header{font-size:.9375rem}.ui.tiny.sub.header{font-size:.8125em}.ui.small.header{font-size:1.8em}.ui.small.header .sub.header{font-size:1rem}.ui.small.sub.header{font-size:.8125em}.ui.large.header{font-size:2.614em;min-height:1em}.ui.large.header .sub.header{font-size:1.125rem}.ui.large.sub.header{font-size:.9375em}.ui.big.header{font-size:1.85714286em}.ui.big.header .sub.header{font-size:1.125rem}.ui.big.sub.header{font-size:1em}.ui.huge.header{font-size:3em;min-height:1em}.ui.huge.header .sub.header{font-size:1.125rem}.ui.huge.sub.header{font-size:1em}.ui.massive.header{font-size:2.28571429em;min-height:1em}.ui.massive.header .sub.header{font-size:1.4375rem}.ui.massive.sub.header{font-size:1.125em}.ui.sub.header{padding:0;margin-bottom:.125rem;font-weight:700;font-size:.875em;text-transform:uppercase;color:''}.ui.icon.header{display:inline-block;text-align:center;margin:2rem 0 1rem}.ui.icon.header:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.icon.header:first-child{margin-top:0}.ui.icon.header .icon{float:none;display:block;width:auto;height:auto;line-height:1;padding:0;font-size:3em;margin:0 auto .5rem;opacity:1}.ui.icon.header .corner.icon{font-size:calc(3em * .45)}.ui.icon.header .content{display:block;padding:0}.ui.icon.header .circular.icon{font-size:2em}.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{margin-left:auto;margin-right:auto;display:block}.ui.disabled.header{opacity:.45}.ui.inverted.header{color:#fff}.ui.inverted.header .sub.header{color:rgba(255,255,255,.8)}.ui.inverted.attached.header{background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.ui.inverted.block.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none;border-bottom:none}.ui.primary.header{color:#2185d0}a.ui.primary.header:hover{color:#1678c2}.ui.primary.dividing.header{border-bottom:2px solid #2185d0}.ui.inverted.primary.header.header.header{color:#54c8ff}a.ui.inverted.primary.header.header.header:hover{color:#21b8ff}.ui.inverted.primary.dividing.header{border-bottom:2px solid #54c8ff}.ui.secondary.header{color:#1b1c1d}a.ui.secondary.header:hover{color:#27292a}.ui.secondary.dividing.header{border-bottom:2px solid #1b1c1d}.ui.inverted.secondary.header.header.header{color:#545454}a.ui.inverted.secondary.header.header.header:hover{color:#6e6e6e}.ui.inverted.secondary.dividing.header{border-bottom:2px solid #545454}.ui.red.header{color:#db2828}a.ui.red.header:hover{color:#d01919}.ui.red.dividing.header{border-bottom:2px solid #db2828}.ui.inverted.red.header.header.header{color:#ff695e}a.ui.inverted.red.header.header.header:hover{color:#ff392b}.ui.inverted.red.dividing.header{border-bottom:2px solid #ff695e}.ui.orange.header{color:#f2711c}a.ui.orange.header:hover{color:#f26202}.ui.orange.dividing.header{border-bottom:2px solid #f2711c}.ui.inverted.orange.header.header.header{color:#ff851b}a.ui.inverted.orange.header.header.header:hover{color:#e76b00}.ui.inverted.orange.dividing.header{border-bottom:2px solid #ff851b}.ui.yellow.header{color:#fbbd08}a.ui.yellow.header:hover{color:#eaae00}.ui.yellow.dividing.header{border-bottom:2px solid #fbbd08}.ui.inverted.yellow.header.header.header{color:#ffe21f}a.ui.inverted.yellow.header.header.header:hover{color:#ebcd00}.ui.inverted.yellow.dividing.header{border-bottom:2px solid #ffe21f}.ui.olive.header{color:#b5cc18}a.ui.olive.header:hover{color:#a7bd0d}.ui.olive.dividing.header{border-bottom:2px solid #b5cc18}.ui.inverted.olive.header.header.header{color:#d9e778}a.ui.inverted.olive.header.header.header:hover{color:#d2e745}.ui.inverted.olive.dividing.header{border-bottom:2px solid #d9e778}.ui.green.header{color:#21ba45}a.ui.green.header:hover{color:#16ab39}.ui.green.dividing.header{border-bottom:2px solid #21ba45}.ui.inverted.green.header.header.header{color:#2ecc40}a.ui.inverted.green.header.header.header:hover{color:#1ea92e}.ui.inverted.green.dividing.header{border-bottom:2px solid #2ecc40}.ui.teal.header{color:#00b5ad}a.ui.teal.header:hover{color:#009c95}.ui.teal.dividing.header{border-bottom:2px solid #00b5ad}.ui.inverted.teal.header.header.header{color:#6dffff}a.ui.inverted.teal.header.header.header:hover{color:#3affff}.ui.inverted.teal.dividing.header{border-bottom:2px solid #6dffff}.ui.blue.header{color:#2185d0}a.ui.blue.header:hover{color:#1678c2}.ui.blue.dividing.header{border-bottom:2px solid #2185d0}.ui.inverted.blue.header.header.header{color:#54c8ff}a.ui.inverted.blue.header.header.header:hover{color:#21b8ff}.ui.inverted.blue.dividing.header{border-bottom:2px solid #54c8ff}.ui.violet.header{color:#6435c9}a.ui.violet.header:hover{color:#5829bb}.ui.violet.dividing.header{border-bottom:2px solid #6435c9}.ui.inverted.violet.header.header.header{color:#a291fb}a.ui.inverted.violet.header.header.header:hover{color:#745aff}.ui.inverted.violet.dividing.header{border-bottom:2px solid #a291fb}.ui.purple.header{color:#a333c8}a.ui.purple.header:hover{color:#9627ba}.ui.purple.dividing.header{border-bottom:2px solid #a333c8}.ui.inverted.purple.header.header.header{color:#dc73ff}a.ui.inverted.purple.header.header.header:hover{color:#cf40ff}.ui.inverted.purple.dividing.header{border-bottom:2px solid #dc73ff}.ui.pink.header{color:#e03997}a.ui.pink.header:hover{color:#e61a8d}.ui.pink.dividing.header{border-bottom:2px solid #e03997}.ui.inverted.pink.header.header.header{color:#ff8edf}a.ui.inverted.pink.header.header.header:hover{color:#ff5bd1}.ui.inverted.pink.dividing.header{border-bottom:2px solid #ff8edf}.ui.brown.header{color:#a5673f}a.ui.brown.header:hover{color:#975b33}.ui.brown.dividing.header{border-bottom:2px solid #a5673f}.ui.inverted.brown.header.header.header{color:#d67c1c}a.ui.inverted.brown.header.header.header:hover{color:#b0620f}.ui.inverted.brown.dividing.header{border-bottom:2px solid #d67c1c}.ui.grey.header{color:#767676}a.ui.grey.header:hover{color:#838383}.ui.grey.dividing.header{border-bottom:2px solid #767676}.ui.inverted.grey.header.header.header{color:#dcddde}a.ui.inverted.grey.header.header.header:hover{color:#c2c4c5}.ui.inverted.grey.dividing.header{border-bottom:2px solid #dcddde}.ui.black.header{color:#1b1c1d}a.ui.black.header:hover{color:#27292a}.ui.black.dividing.header{border-bottom:2px solid #1b1c1d}.ui.inverted.black.header.header.header{color:#545454}a.ui.inverted.black.header.header.header:hover{color:#000}.ui.inverted.black.dividing.header{border-bottom:2px solid #545454}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header,.ui.centered.header{text-align:center}.ui.justified.header{text-align:justify}.ui.justified.header:after{display:inline-block;content:'';width:100%}.ui.floated.header,.ui[class*="left floated"].header{float:left;margin-top:0;margin-right:.5em}.ui[class*="right floated"].header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.1875rem;border-bottom:1px solid rgba(34,36,38,.15)}.ui.dividing.header .sub.header{padding-bottom:.1875rem}.ui.dividing.header .icon{margin-bottom:0}.ui.inverted.dividing.header{border-bottom-color:rgba(255,255,255,.1)}.ui.block.header{background:#f3f4f5;padding:.8125rem 1rem;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5;border-radius:.25rem}.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1rem}.ui.mini.block.header{font-size:.8125rem}.ui.tiny.block.header{font-size:.875rem}.ui.small.block.header{font-size:.9375rem}.ui.large.block.header{font-size:1.125rem}.ui.big.block.header{font-size:1.3125rem}.ui.huge.block.header{font-size:1.4375rem}.ui.massive.block.header{font-size:1.6875rem}.ui.attached.header{background:#fff;padding:.8125rem 1rem;margin:0 -1px 0 -1px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5;border-radius:0}.ui.attached.block.header{background:#f3f4f5}.ui.attached:not(.top).header{border-top:none}.ui.top.attached.header{border-radius:.25rem .25rem 0 0}.ui.bottom.attached.header{border-radius:0 0 .25rem .25rem}.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1em}.ui.mini.attached.header{font-size:.8125em}.ui.tiny.attached.header{font-size:.875em}.ui.small.attached.header{font-size:.9375em}.ui.large.attached.header{font-size:1.125em}.ui.big.attached.header{font-size:1.3125em}.ui.huge.attached.header{font-size:1.4375em}.ui.massive.attached.header{font-size:1.6875em}.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:2.18em}
\ No newline at end of file
diff --git a/ui/dist/components/icon.css b/ui/dist/components/icon.css
index d1a2eb653e7..b82ffe99567 100644
--- a/ui/dist/components/icon.css
+++ b/ui/dist/components/icon.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Icon
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Icon
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -26,7 +26,7 @@
i.icon {
display: inline-block;
opacity: 1;
- margin: 0em 0.25rem 0em 0em;
+ margin: 0 0.25rem 0 0;
width: 1.18em;
height: 1em;
font-family: 'Icons';
@@ -35,7 +35,6 @@ i.icon {
text-decoration: inherit;
text-align: center;
speak: none;
- font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
@@ -52,34 +51,14 @@ i.icon:before {
/*--------------
- Loading
----------------*/
+ Loading
+ ---------------*/
i.icon.loading {
height: 1em;
line-height: 1;
- -webkit-animation: icon-loading 2s linear infinite;
- animation: icon-loading 2s linear infinite;
-}
-@-webkit-keyframes icon-loading {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes icon-loading {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
+ -webkit-animation: loader 2s linear infinite;
+ animation: loader 2s linear infinite;
}
@@ -87,17 +66,19 @@ i.icon.loading {
States
*******************************/
-i.icon.hover {
- opacity: 1 !important;
-}
-i.icon.active {
- opacity: 1 !important;
-}
-i.emphasized.icon {
- opacity: 1 !important;
+i.icon:hover,
+i.icons:hover,
+i.icon:active,
+i.icons:active,
+i.emphasized.icon:not(.disabled),
+i.emphasized.icons:not(.disabled) {
+ opacity: 1;
}
-i.disabled.icon {
- opacity: 0.45 !important;
+i.disabled.icon,
+i.disabled.icons {
+ opacity: 0.45;
+ cursor: default;
+ pointer-events: none;
}
@@ -107,20 +88,20 @@ i.disabled.icon {
/*-------------------
- Fitted
---------------------*/
+ Fitted
+ --------------------*/
i.fitted.icon {
width: auto;
- margin: 0em !important;
+ margin: 0 !important;
}
/*-------------------
- Link
---------------------*/
+ Link
+ --------------------*/
-i.link.icon,
-i.link.icons {
+i.link.icon:not(.disabled),
+i.link.icons:not(.disabled) {
cursor: pointer;
opacity: 0.8;
-webkit-transition: opacity 0.1s ease;
@@ -128,19 +109,19 @@ i.link.icons {
}
i.link.icon:hover,
i.link.icons:hover {
- opacity: 1 !important;
+ opacity: 1;
}
/*-------------------
- Circular
---------------------*/
+ Circular
+ --------------------*/
i.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
- padding: 0.5em 0em !important;
- -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+ padding: 0.5em 0 !important;
+ -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
width: 2em !important;
height: 2em !important;
}
@@ -151,8 +132,8 @@ i.circular.inverted.icon {
}
/*-------------------
- Flipped
---------------------*/
+ Flipped
+ --------------------*/
i.flipped.icon,
i.horizontally.flipped.icon {
@@ -165,8 +146,8 @@ i.vertically.flipped.icon {
}
/*-------------------
- Rotated
---------------------*/
+ Rotated
+ --------------------*/
i.rotated.icon,
i.right.rotated.icon,
@@ -179,19 +160,58 @@ i.counterclockwise.rotated.icon {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+i.halfway.rotated.icon {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+/*--------------------------
+ Flipped & Rotated
+ ---------------------------*/
+
+i.rotated.flipped.icon,
+i.right.rotated.flipped.icon,
+i.clockwise.rotated.flipped.icon {
+ -webkit-transform: scale(-1, 1) rotate(90deg);
+ transform: scale(-1, 1) rotate(90deg);
+}
+i.left.rotated.flipped.icon,
+i.counterclockwise.rotated.flipped.icon {
+ -webkit-transform: scale(-1, 1) rotate(-90deg);
+ transform: scale(-1, 1) rotate(-90deg);
+}
+i.halfway.rotated.flipped.icon {
+ -webkit-transform: scale(-1, 1) rotate(180deg);
+ transform: scale(-1, 1) rotate(180deg);
+}
+i.rotated.vertically.flipped.icon,
+i.right.rotated.vertically.flipped.icon,
+i.clockwise.rotated.vertically.flipped.icon {
+ -webkit-transform: scale(1, -1) rotate(90deg);
+ transform: scale(1, -1) rotate(90deg);
+}
+i.left.rotated.vertically.flipped.icon,
+i.counterclockwise.rotated.vertically.flipped.icon {
+ -webkit-transform: scale(1, -1) rotate(-90deg);
+ transform: scale(1, -1) rotate(-90deg);
+}
+i.halfway.rotated.vertically.flipped.icon {
+ -webkit-transform: scale(1, -1) rotate(180deg);
+ transform: scale(1, -1) rotate(180deg);
+}
/*-------------------
- Bordered
---------------------*/
+ Bordered
+ --------------------*/
i.bordered.icon {
line-height: 1;
vertical-align: baseline;
width: 2em;
height: 2em;
- padding: 0.5em 0em !important;
- -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+ padding: 0.5em 0 !important;
+ -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
}
i.bordered.inverted.icon {
border: none;
@@ -200,15 +220,15 @@ i.bordered.inverted.icon {
}
/*-------------------
- Inverted
---------------------*/
+ Inverted
+ --------------------*/
/* Inverted Shapes */
i.inverted.bordered.icon,
i.inverted.circular.icon {
- background-color: #1B1C1D !important;
- color: #FFFFFF !important;
+ background-color: #1B1C1D;
+ color: #FFFFFF;
}
i.inverted.icon {
color: #FFFFFF;
@@ -218,219 +238,218 @@ i.inverted.icon {
Colors
--------------------*/
-
-/* Red */
-i.red.icon {
- color: #DB2828 !important;
+i.primary.icon.icon.icon.icon {
+ color: #2185D0;
+}
+i.inverted.primary.icon.icon.icon.icon {
+ color: #54C8FF;
}
-i.inverted.red.icon {
- color: #FF695E !important;
+i.inverted.bordered.primary.icon.icon.icon.icon,
+i.inverted.circular.primary.icon.icon.icon.icon {
+ background-color: #2185D0;
+ color: #FFFFFF;
}
-i.inverted.bordered.red.icon,
-i.inverted.circular.red.icon {
- background-color: #DB2828 !important;
- color: #FFFFFF !important;
+i.secondary.icon.icon.icon.icon {
+ color: #1B1C1D;
}
-
-/* Orange */
-i.orange.icon {
- color: #F2711C !important;
+i.inverted.secondary.icon.icon.icon.icon {
+ color: #545454;
}
-i.inverted.orange.icon {
- color: #FF851B !important;
+i.inverted.bordered.secondary.icon.icon.icon.icon,
+i.inverted.circular.secondary.icon.icon.icon.icon {
+ background-color: #1B1C1D;
+ color: #FFFFFF;
}
-i.inverted.bordered.orange.icon,
-i.inverted.circular.orange.icon {
- background-color: #F2711C !important;
- color: #FFFFFF !important;
+i.red.icon.icon.icon.icon {
+ color: #DB2828;
}
-
-/* Yellow */
-i.yellow.icon {
- color: #FBBD08 !important;
+i.inverted.red.icon.icon.icon.icon {
+ color: #FF695E;
}
-i.inverted.yellow.icon {
- color: #FFE21F !important;
+i.inverted.bordered.red.icon.icon.icon.icon,
+i.inverted.circular.red.icon.icon.icon.icon {
+ background-color: #DB2828;
+ color: #FFFFFF;
}
-i.inverted.bordered.yellow.icon,
-i.inverted.circular.yellow.icon {
- background-color: #FBBD08 !important;
- color: #FFFFFF !important;
+i.orange.icon.icon.icon.icon {
+ color: #F2711C;
}
-
-/* Olive */
-i.olive.icon {
- color: #B5CC18 !important;
+i.inverted.orange.icon.icon.icon.icon {
+ color: #FF851B;
}
-i.inverted.olive.icon {
- color: #D9E778 !important;
+i.inverted.bordered.orange.icon.icon.icon.icon,
+i.inverted.circular.orange.icon.icon.icon.icon {
+ background-color: #F2711C;
+ color: #FFFFFF;
}
-i.inverted.bordered.olive.icon,
-i.inverted.circular.olive.icon {
- background-color: #B5CC18 !important;
- color: #FFFFFF !important;
+i.yellow.icon.icon.icon.icon {
+ color: #FBBD08;
}
-
-/* Green */
-i.green.icon {
- color: #21BA45 !important;
+i.inverted.yellow.icon.icon.icon.icon {
+ color: #FFE21F;
}
-i.inverted.green.icon {
- color: #2ECC40 !important;
+i.inverted.bordered.yellow.icon.icon.icon.icon,
+i.inverted.circular.yellow.icon.icon.icon.icon {
+ background-color: #FBBD08;
+ color: #FFFFFF;
}
-i.inverted.bordered.green.icon,
-i.inverted.circular.green.icon {
- background-color: #21BA45 !important;
- color: #FFFFFF !important;
+i.olive.icon.icon.icon.icon {
+ color: #B5CC18;
}
-
-/* Teal */
-i.teal.icon {
- color: #00B5AD !important;
+i.inverted.olive.icon.icon.icon.icon {
+ color: #D9E778;
}
-i.inverted.teal.icon {
- color: #6DFFFF !important;
+i.inverted.bordered.olive.icon.icon.icon.icon,
+i.inverted.circular.olive.icon.icon.icon.icon {
+ background-color: #B5CC18;
+ color: #FFFFFF;
}
-i.inverted.bordered.teal.icon,
-i.inverted.circular.teal.icon {
- background-color: #00B5AD !important;
- color: #FFFFFF !important;
+i.green.icon.icon.icon.icon {
+ color: #21BA45;
}
-
-/* Blue */
-i.blue.icon {
- color: #2185D0 !important;
+i.inverted.green.icon.icon.icon.icon {
+ color: #2ECC40;
}
-i.inverted.blue.icon {
- color: #54C8FF !important;
+i.inverted.bordered.green.icon.icon.icon.icon,
+i.inverted.circular.green.icon.icon.icon.icon {
+ background-color: #21BA45;
+ color: #FFFFFF;
}
-i.inverted.bordered.blue.icon,
-i.inverted.circular.blue.icon {
- background-color: #2185D0 !important;
- color: #FFFFFF !important;
+i.teal.icon.icon.icon.icon {
+ color: #00B5AD;
}
-
-/* Violet */
-i.violet.icon {
- color: #6435C9 !important;
+i.inverted.teal.icon.icon.icon.icon {
+ color: #6DFFFF;
}
-i.inverted.violet.icon {
- color: #A291FB !important;
+i.inverted.bordered.teal.icon.icon.icon.icon,
+i.inverted.circular.teal.icon.icon.icon.icon {
+ background-color: #00B5AD;
+ color: #FFFFFF;
}
-i.inverted.bordered.violet.icon,
-i.inverted.circular.violet.icon {
- background-color: #6435C9 !important;
- color: #FFFFFF !important;
+i.blue.icon.icon.icon.icon {
+ color: #2185D0;
}
-
-/* Purple */
-i.purple.icon {
- color: #A333C8 !important;
+i.inverted.blue.icon.icon.icon.icon {
+ color: #54C8FF;
}
-i.inverted.purple.icon {
- color: #DC73FF !important;
+i.inverted.bordered.blue.icon.icon.icon.icon,
+i.inverted.circular.blue.icon.icon.icon.icon {
+ background-color: #2185D0;
+ color: #FFFFFF;
}
-i.inverted.bordered.purple.icon,
-i.inverted.circular.purple.icon {
- background-color: #A333C8 !important;
- color: #FFFFFF !important;
+i.violet.icon.icon.icon.icon {
+ color: #6435C9;
}
-
-/* Pink */
-i.pink.icon {
- color: #E03997 !important;
+i.inverted.violet.icon.icon.icon.icon {
+ color: #A291FB;
}
-i.inverted.pink.icon {
- color: #FF8EDF !important;
+i.inverted.bordered.violet.icon.icon.icon.icon,
+i.inverted.circular.violet.icon.icon.icon.icon {
+ background-color: #6435C9;
+ color: #FFFFFF;
}
-i.inverted.bordered.pink.icon,
-i.inverted.circular.pink.icon {
- background-color: #E03997 !important;
- color: #FFFFFF !important;
+i.purple.icon.icon.icon.icon {
+ color: #A333C8;
}
-
-/* Brown */
-i.brown.icon {
- color: #A5673F !important;
+i.inverted.purple.icon.icon.icon.icon {
+ color: #DC73FF;
}
-i.inverted.brown.icon {
- color: #D67C1C !important;
+i.inverted.bordered.purple.icon.icon.icon.icon,
+i.inverted.circular.purple.icon.icon.icon.icon {
+ background-color: #A333C8;
+ color: #FFFFFF;
}
-i.inverted.bordered.brown.icon,
-i.inverted.circular.brown.icon {
- background-color: #A5673F !important;
- color: #FFFFFF !important;
+i.pink.icon.icon.icon.icon {
+ color: #E03997;
}
-
-/* Grey */
-i.grey.icon {
- color: #767676 !important;
+i.inverted.pink.icon.icon.icon.icon {
+ color: #FF8EDF;
}
-i.inverted.grey.icon {
- color: #DCDDDE !important;
+i.inverted.bordered.pink.icon.icon.icon.icon,
+i.inverted.circular.pink.icon.icon.icon.icon {
+ background-color: #E03997;
+ color: #FFFFFF;
}
-i.inverted.bordered.grey.icon,
-i.inverted.circular.grey.icon {
- background-color: #767676 !important;
- color: #FFFFFF !important;
+i.brown.icon.icon.icon.icon {
+ color: #A5673F;
}
-
-/* Black */
-i.black.icon {
- color: #1B1C1D !important;
+i.inverted.brown.icon.icon.icon.icon {
+ color: #D67C1C;
+}
+i.inverted.bordered.brown.icon.icon.icon.icon,
+i.inverted.circular.brown.icon.icon.icon.icon {
+ background-color: #A5673F;
+ color: #FFFFFF;
+}
+i.grey.icon.icon.icon.icon {
+ color: #767676;
+}
+i.inverted.grey.icon.icon.icon.icon {
+ color: #DCDDDE;
+}
+i.inverted.bordered.grey.icon.icon.icon.icon,
+i.inverted.circular.grey.icon.icon.icon.icon {
+ background-color: #767676;
+ color: #FFFFFF;
}
-i.inverted.black.icon {
- color: #545454 !important;
+i.black.icon.icon.icon.icon {
+ color: #1B1C1D;
}
-i.inverted.bordered.black.icon,
-i.inverted.circular.black.icon {
- background-color: #1B1C1D !important;
- color: #FFFFFF !important;
+i.inverted.black.icon.icon.icon.icon {
+ color: #545454;
+}
+i.inverted.bordered.black.icon.icon.icon.icon,
+i.inverted.circular.black.icon.icon.icon.icon {
+ background-color: #1B1C1D;
+ color: #FFFFFF;
}
/*-------------------
Sizes
--------------------*/
-i.mini.icon,
-i.mini.icons {
+i.icon,
+i.icons {
+ font-size: 1em;
+}
+i.mini.mini.mini.icon,
+i.mini.mini.mini.icons {
line-height: 1;
+ vertical-align: middle;
font-size: 0.4em;
}
-i.tiny.icon,
-i.tiny.icons {
+i.tiny.tiny.tiny.icon,
+i.tiny.tiny.tiny.icons {
line-height: 1;
+ vertical-align: middle;
font-size: 0.5em;
}
-i.small.icon,
-i.small.icons {
+i.small.small.small.icon,
+i.small.small.small.icons {
line-height: 1;
+ vertical-align: middle;
font-size: 0.75em;
}
-i.icon,
-i.icons {
- font-size: 1em;
-}
-i.large.icon,
-i.large.icons {
+i.large.large.large.icon,
+i.large.large.large.icons {
line-height: 1;
vertical-align: middle;
font-size: 1.5em;
}
-i.big.icon,
-i.big.icons {
+i.big.big.big.icon,
+i.big.big.big.icons {
line-height: 1;
vertical-align: middle;
font-size: 2em;
}
-i.huge.icon,
-i.huge.icons {
+i.huge.huge.huge.icon,
+i.huge.huge.huge.icons {
line-height: 1;
vertical-align: middle;
font-size: 4em;
}
-i.massive.icon,
-i.massive.icons {
+i.massive.massive.massive.icon,
+i.massive.massive.massive.icons {
line-height: 1;
vertical-align: middle;
font-size: 8em;
@@ -438,8 +457,8 @@ i.massive.icons {
/*******************************
- Groups
-*******************************/
+ Groups
+ *******************************/
i.icons {
display: inline-block;
@@ -452,7 +471,6 @@ i.icons .icon {
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
- margin: 0em;
margin: 0;
}
i.icons .icon:first-child {
@@ -462,7 +480,6 @@ i.icons .icon:first-child {
vertical-align: top;
-webkit-transform: none;
transform: none;
- margin-right: 0.25rem;
}
/* Corner Icon */
@@ -476,25 +493,25 @@ i.icons .corner.icon {
font-size: 0.45em;
text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}
-i.icons .top.right.corner.icon {
+i.icons .icon.corner[class*="top right"] {
top: 0;
left: auto;
right: 0;
bottom: auto;
}
-i.icons .top.left.corner.icon {
+i.icons .icon.corner[class*="top left"] {
top: 0;
left: 0;
right: auto;
bottom: auto;
}
-i.icons .bottom.left.corner.icon {
+i.icons .icon.corner[class*="bottom left"] {
top: auto;
left: 0;
right: auto;
bottom: 0;
}
-i.icons .bottom.right.corner.icon {
+i.icons .icon.corner[class*="bottom right"] {
top: auto;
left: auto;
right: 0;
@@ -504,38 +521,39 @@ i.icons .inverted.corner.icon {
text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D;
}
/*
- * Font Awesome 5.0.8 by @fontawesome - http://fontawesome.io - @fontawesome
- * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License)
- */
+* Font Awesome 5.12.0 by @fontawesome [https://fontawesome.com]
+* License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License)
+*/
/*******************************
-Semantic-UI integration of font-awesome :
+Fomantic-UI integration of FontAwesome :
+
+// class names are separated
+i.icon.angle-left => i.icon.angle.left
-///class names are separated
-i.icon.circle => i.icon.circle
-i.icon.circle-o => i.icon.circle.outline
+// variations are extracted
+i.icon.circle => i.icon.circle
+i.icon.circle-o => i.icon.circle.outline
-//abbreviation are replaced by full letters:
-i.icon.ellipsis-h => i.icon.ellipsis.horizontal
-i.icon.ellipsis-v => i.icon.ellipsis.vertical
-.alpha => .i.icon.alphabet
-.asc => .i.icon.ascending
-.desc => .i.icon.descending
-.alt =>.alternate
+// abbreviation are replaced by full words
+i.icon.*-h => i.icon.*.horizontal
+i.icon.*-v => i.icon.*.vertical
+i.icon.alpha => i.icon.alphabet
+i.icon.asc => i.icon.ascending
+i.icon.desc => i.icon.descending
+i.icon.alt => i.icon.alternate
-ASCII order is conserved for easier maintenance.
-Icons that only have one style 'outline', 'square' etc do not require this class
-for instance `lemon icon` not `lemon outline icon` since there is only one lemon
+Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
*******************************/
/*******************************
- Icons
+ Icons
*******************************/
@@ -562,15 +580,15 @@ i.icon.sign.out:before {
content: "\f2f5";
}
+
+/*******************************
+ Solid Icons
+*******************************/
+
+
/* Icons */
-i.icon.\35 00px:before {
- content: "\f26e";
-}
-i.icon.accessible.icon:before {
- content: "\f368";
-}
-i.icon.accusoft:before {
- content: "\f369";
+i.icon.ad:before {
+ content: "\f641";
}
i.icon.address.book:before {
content: "\f2b9";
@@ -581,17 +599,8 @@ i.icon.address.card:before {
i.icon.adjust:before {
content: "\f042";
}
-i.icon.adn:before {
- content: "\f170";
-}
-i.icon.adversal:before {
- content: "\f36a";
-}
-i.icon.affiliatetheme:before {
- content: "\f36b";
-}
-i.icon.algolia:before {
- content: "\f36c";
+i.icon.air.freshener:before {
+ content: "\f5d0";
}
i.icon.align.center:before {
content: "\f037";
@@ -605,11 +614,8 @@ i.icon.align.left:before {
i.icon.align.right:before {
content: "\f038";
}
-i.icon.amazon:before {
- content: "\f270";
-}
-i.icon.amazon.pay:before {
- content: "\f42c";
+i.icon.allergies:before {
+ content: "\f461";
}
i.icon.ambulance:before {
content: "\f0f9";
@@ -617,18 +623,9 @@ i.icon.ambulance:before {
i.icon.american.sign.language.interpreting:before {
content: "\f2a3";
}
-i.icon.amilia:before {
- content: "\f36d";
-}
i.icon.anchor:before {
content: "\f13d";
}
-i.icon.android:before {
- content: "\f17b";
-}
-i.icon.angellist:before {
- content: "\f209";
-}
i.icon.angle.double.down:before {
content: "\f103";
}
@@ -653,30 +650,18 @@ i.icon.angle.right:before {
i.icon.angle.up:before {
content: "\f106";
}
-i.icon.angrycreative:before {
- content: "\f36e";
-}
-i.icon.angular:before {
- content: "\f420";
-}
-i.icon.app.store:before {
- content: "\f36f";
-}
-i.icon.app.store.ios:before {
- content: "\f370";
-}
-i.icon.apper:before {
- content: "\f371";
-}
-i.icon.apple:before {
- content: "\f179";
+i.icon.angry:before {
+ content: "\f556";
}
-i.icon.apple.pay:before {
- content: "\f415";
+i.icon.ankh:before {
+ content: "\f644";
}
i.icon.archive:before {
content: "\f187";
}
+i.icon.archway:before {
+ content: "\f557";
+}
i.icon.arrow.alternate.circle.down:before {
content: "\f358";
}
@@ -701,9 +686,6 @@ i.icon.arrow.circle.right:before {
i.icon.arrow.circle.up:before {
content: "\f0aa";
}
-i.icon.arrow.down:before {
- content: "\f063";
-}
i.icon.arrow.left:before {
content: "\f060";
}
@@ -713,6 +695,9 @@ i.icon.arrow.right:before {
i.icon.arrow.up:before {
content: "\f062";
}
+i.icon.arrow.down:before {
+ content: "\f063";
+}
i.icon.arrows.alternate:before {
content: "\f0b2";
}
@@ -728,45 +713,54 @@ i.icon.assistive.listening.systems:before {
i.icon.asterisk:before {
content: "\f069";
}
-i.icon.asymmetrik:before {
- content: "\f372";
-}
i.icon.at:before {
content: "\f1fa";
}
-i.icon.audible:before {
- content: "\f373";
+i.icon.atlas:before {
+ content: "\f558";
+}
+i.icon.atom:before {
+ content: "\f5d2";
}
i.icon.audio.description:before {
content: "\f29e";
}
-i.icon.autoprefixer:before {
- content: "\f41c";
+i.icon.award:before {
+ content: "\f559";
}
-i.icon.avianex:before {
- content: "\f374";
+i.icon.baby:before {
+ content: "\f77c";
}
-i.icon.aviato:before {
- content: "\f421";
+i.icon.baby.carriage:before {
+ content: "\f77d";
}
-i.icon.aws:before {
- content: "\f375";
+i.icon.backspace:before {
+ content: "\f55a";
}
i.icon.backward:before {
content: "\f04a";
}
+i.icon.bacon:before {
+ content: "\f7e5";
+}
+i.icon.bahai:before {
+ content: "\f666";
+}
i.icon.balance.scale:before {
content: "\f24e";
}
+i.icon.balance.scale.left:before {
+ content: "\f515";
+}
+i.icon.balance.scale.right:before {
+ content: "\f516";
+}
i.icon.ban:before {
content: "\f05e";
}
i.icon.band.aid:before {
content: "\f462";
}
-i.icon.bandcamp:before {
- content: "\f2d5";
-}
i.icon.barcode:before {
content: "\f02a";
}
@@ -803,59 +797,44 @@ i.icon.bed:before {
i.icon.beer:before {
content: "\f0fc";
}
-i.icon.behance:before {
- content: "\f1b4";
-}
-i.icon.behance.square:before {
- content: "\f1b5";
-}
i.icon.bell:before {
content: "\f0f3";
}
i.icon.bell.slash:before {
content: "\f1f6";
}
+i.icon.bezier.curve:before {
+ content: "\f55b";
+}
+i.icon.bible:before {
+ content: "\f647";
+}
i.icon.bicycle:before {
content: "\f206";
}
-i.icon.bimobject:before {
- content: "\f378";
+i.icon.biking:before {
+ content: "\f84a";
}
i.icon.binoculars:before {
content: "\f1e5";
}
+i.icon.biohazard:before {
+ content: "\f780";
+}
i.icon.birthday.cake:before {
content: "\f1fd";
}
-i.icon.bitbucket:before {
- content: "\f171";
-}
-i.icon.bitcoin:before {
- content: "\f379";
-}
-i.icon.bity:before {
- content: "\f37a";
-}
-i.icon.black.tie:before {
- content: "\f27e";
+i.icon.blender:before {
+ content: "\f517";
}
-i.icon.blackberry:before {
- content: "\f37b";
+i.icon.blender.phone:before {
+ content: "\f6b6";
}
i.icon.blind:before {
content: "\f29d";
}
-i.icon.blogger:before {
- content: "\f37c";
-}
-i.icon.blogger.b:before {
- content: "\f37d";
-}
-i.icon.bluetooth:before {
- content: "\f293";
-}
-i.icon.bluetooth.b:before {
- content: "\f294";
+i.icon.blog:before {
+ content: "\f781";
}
i.icon.bold:before {
content: "\f032";
@@ -866,29 +845,74 @@ i.icon.bolt:before {
i.icon.bomb:before {
content: "\f1e2";
}
+i.icon.bone:before {
+ content: "\f5d7";
+}
+i.icon.bong:before {
+ content: "\f55c";
+}
i.icon.book:before {
content: "\f02d";
}
+i.icon.book.dead:before {
+ content: "\f6b7";
+}
+i.icon.book.medical:before {
+ content: "\f7e6";
+}
+i.icon.book.open:before {
+ content: "\f518";
+}
+i.icon.book.reader:before {
+ content: "\f5da";
+}
i.icon.bookmark:before {
content: "\f02e";
}
+i.icon.border.all:before {
+ content: "\f84c";
+}
+i.icon.border.none:before {
+ content: "\f850";
+}
+i.icon.border.style:before {
+ content: "\f853";
+}
i.icon.bowling.ball:before {
content: "\f436";
}
i.icon.box:before {
content: "\f466";
}
+i.icon.box.open:before {
+ content: "\f49e";
+}
i.icon.boxes:before {
content: "\f468";
}
i.icon.braille:before {
content: "\f2a1";
}
+i.icon.brain:before {
+ content: "\f5dc";
+}
+i.icon.bread.slice:before {
+ content: "\f7ec";
+}
i.icon.briefcase:before {
content: "\f0b1";
}
-i.icon.btc:before {
- content: "\f15a";
+i.icon.briefcase.medical:before {
+ content: "\f469";
+}
+i.icon.broadcast.tower:before {
+ content: "\f519";
+}
+i.icon.broom:before {
+ content: "\f51a";
+}
+i.icon.brush:before {
+ content: "\f55d";
}
i.icon.bug:before {
content: "\f188";
@@ -902,14 +926,17 @@ i.icon.bullhorn:before {
i.icon.bullseye:before {
content: "\f140";
}
-i.icon.buromobelexperte:before {
- content: "\f37f";
+i.icon.burn:before {
+ content: "\f46a";
}
i.icon.bus:before {
content: "\f207";
}
-i.icon.buysellads:before {
- content: "\f20d";
+i.icon.bus.alternate:before {
+ content: "\f55e";
+}
+i.icon.business.time:before {
+ content: "\f64a";
}
i.icon.calculator:before {
content: "\f1ec";
@@ -923,6 +950,9 @@ i.icon.calendar.alternate:before {
i.icon.calendar.check:before {
content: "\f274";
}
+i.icon.calendar.day:before {
+ content: "\f783";
+}
i.icon.calendar.minus:before {
content: "\f272";
}
@@ -932,15 +962,45 @@ i.icon.calendar.plus:before {
i.icon.calendar.times:before {
content: "\f273";
}
+i.icon.calendar.week:before {
+ content: "\f784";
+}
i.icon.camera:before {
content: "\f030";
}
i.icon.camera.retro:before {
content: "\f083";
}
+i.icon.campground:before {
+ content: "\f6bb";
+}
+i.icon.candy.cane:before {
+ content: "\f786";
+}
+i.icon.cannabis:before {
+ content: "\f55f";
+}
+i.icon.capsules:before {
+ content: "\f46b";
+}
i.icon.car:before {
content: "\f1b9";
}
+i.icon.car.alternate:before {
+ content: "\f5de";
+}
+i.icon.car.battery:before {
+ content: "\f5df";
+}
+i.icon.car.crash:before {
+ content: "\f5e1";
+}
+i.icon.car.side:before {
+ content: "\f5e4";
+}
+i.icon.caravan:before {
+ content: "\f8ff";
+}
i.icon.caret.down:before {
content: "\f0d7";
}
@@ -965,47 +1025,35 @@ i.icon.caret.square.up:before {
i.icon.caret.up:before {
content: "\f0d8";
}
+i.icon.carrot:before {
+ content: "\f787";
+}
i.icon.cart.arrow.down:before {
content: "\f218";
}
i.icon.cart.plus:before {
content: "\f217";
}
-i.icon.cc.amazon.pay:before {
- content: "\f42d";
-}
-i.icon.cc.amex:before {
- content: "\f1f3";
-}
-i.icon.cc.apple.pay:before {
- content: "\f416";
-}
-i.icon.cc.diners.club:before {
- content: "\f24c";
-}
-i.icon.cc.discover:before {
- content: "\f1f2";
-}
-i.icon.cc.jcb:before {
- content: "\f24b";
+i.icon.cash.register:before {
+ content: "\f788";
}
-i.icon.cc.mastercard:before {
- content: "\f1f1";
+i.icon.cat:before {
+ content: "\f6be";
}
-i.icon.cc.paypal:before {
- content: "\f1f4";
+i.icon.certificate:before {
+ content: "\f0a3";
}
-i.icon.cc.stripe:before {
- content: "\f1f5";
+i.icon.chair:before {
+ content: "\f6c0";
}
-i.icon.cc.visa:before {
- content: "\f1f0";
+i.icon.chalkboard:before {
+ content: "\f51b";
}
-i.icon.centercode:before {
- content: "\f380";
+i.icon.chalkboard.teacher:before {
+ content: "\f51c";
}
-i.icon.certificate:before {
- content: "\f0a3";
+i.icon.charging.station:before {
+ content: "\f5e7";
}
i.icon.chart.area:before {
content: "\f1fe";
@@ -1025,9 +1073,15 @@ i.icon.check:before {
i.icon.check.circle:before {
content: "\f058";
}
+i.icon.check.double:before {
+ content: "\f560";
+}
i.icon.check.square:before {
content: "\f14a";
}
+i.icon.cheese:before {
+ content: "\f7ef";
+}
i.icon.chess:before {
content: "\f439";
}
@@ -1079,8 +1133,8 @@ i.icon.chevron.up:before {
i.icon.child:before {
content: "\f1ae";
}
-i.icon.chrome:before {
- content: "\f268";
+i.icon.church:before {
+ content: "\f51d";
}
i.icon.circle:before {
content: "\f111";
@@ -1088,6 +1142,12 @@ i.icon.circle:before {
i.icon.circle.notch:before {
content: "\f1ce";
}
+i.icon.city:before {
+ content: "\f64f";
+}
+i.icon.clinic.medical:before {
+ content: "\f7f2";
+}
i.icon.clipboard:before {
content: "\f328";
}
@@ -1109,14 +1169,35 @@ i.icon.closed.captioning:before {
i.icon.cloud:before {
content: "\f0c2";
}
-i.icon.cloudscale:before {
- content: "\f383";
+i.icon.cloud.download.alternate:before {
+ content: "\f381";
}
-i.icon.cloudsmith:before {
- content: "\f384";
+i.icon.cloud.meatball:before {
+ content: "\f73b";
}
-i.icon.cloudversify:before {
- content: "\f385";
+i.icon.cloud.moon:before {
+ content: "\f6c3";
+}
+i.icon.cloud.moon.rain:before {
+ content: "\f73c";
+}
+i.icon.cloud.rain:before {
+ content: "\f73d";
+}
+i.icon.cloud.showers.heavy:before {
+ content: "\f740";
+}
+i.icon.cloud.sun:before {
+ content: "\f6c4";
+}
+i.icon.cloud.sun.rain:before {
+ content: "\f743";
+}
+i.icon.cloud.upload.alternate:before {
+ content: "\f382";
+}
+i.icon.cocktail:before {
+ content: "\f561";
}
i.icon.code:before {
content: "\f121";
@@ -1124,12 +1205,6 @@ i.icon.code:before {
i.icon.code.branch:before {
content: "\f126";
}
-i.icon.codepen:before {
- content: "\f1cb";
-}
-i.icon.codiepie:before {
- content: "\f284";
-}
i.icon.coffee:before {
content: "\f0f4";
}
@@ -1139,6 +1214,9 @@ i.icon.cog:before {
i.icon.cogs:before {
content: "\f085";
}
+i.icon.coins:before {
+ content: "\f51e";
+}
i.icon.columns:before {
content: "\f0db";
}
@@ -1148,20 +1226,47 @@ i.icon.comment:before {
i.icon.comment.alternate:before {
content: "\f27a";
}
+i.icon.comment.dollar:before {
+ content: "\f651";
+}
+i.icon.comment.dots:before {
+ content: "\f4ad";
+}
+i.icon.comment.medical:before {
+ content: "\f7f5";
+}
+i.icon.comment.slash:before {
+ content: "\f4b3";
+}
i.icon.comments:before {
content: "\f086";
}
+i.icon.comments.dollar:before {
+ content: "\f653";
+}
+i.icon.compact.disc:before {
+ content: "\f51f";
+}
i.icon.compass:before {
content: "\f14e";
}
i.icon.compress:before {
content: "\f066";
}
-i.icon.connectdevelop:before {
- content: "\f20e";
+i.icon.compress.alternate:before {
+ content: "\f422";
}
-i.icon.contao:before {
- content: "\f26d";
+i.icon.compress.arrows.alternate:before {
+ content: "\f78c";
+}
+i.icon.concierge.bell:before {
+ content: "\f562";
+}
+i.icon.cookie:before {
+ content: "\f563";
+}
+i.icon.cookie.bite:before {
+ content: "\f564";
}
i.icon.copy:before {
content: "\f0c5";
@@ -1169,11 +1274,8 @@ i.icon.copy:before {
i.icon.copyright:before {
content: "\f1f9";
}
-i.icon.cpanel:before {
- content: "\f388";
-}
-i.icon.creative.commons:before {
- content: "\f25e";
+i.icon.couch:before {
+ content: "\f4b8";
}
i.icon.credit.card:before {
content: "\f09d";
@@ -1181,14 +1283,23 @@ i.icon.credit.card:before {
i.icon.crop:before {
content: "\f125";
}
+i.icon.crop.alternate:before {
+ content: "\f565";
+}
+i.icon.cross:before {
+ content: "\f654";
+}
i.icon.crosshairs:before {
content: "\f05b";
}
-i.icon.css3:before {
- content: "\f13c";
+i.icon.crow:before {
+ content: "\f520";
}
-i.icon.css3.alternate:before {
- content: "\f38b";
+i.icon.crown:before {
+ content: "\f521";
+}
+i.icon.crutch:before {
+ content: "\f7f7";
}
i.icon.cube:before {
content: "\f1b2";
@@ -1199,56 +1310,68 @@ i.icon.cubes:before {
i.icon.cut:before {
content: "\f0c4";
}
-i.icon.cuttlefish:before {
- content: "\f38c";
-}
-i.icon.d.and.d:before {
- content: "\f38d";
-}
-i.icon.dashcube:before {
- content: "\f210";
-}
i.icon.database:before {
content: "\f1c0";
}
i.icon.deaf:before {
content: "\f2a4";
}
-i.icon.delicious:before {
- content: "\f1a5";
-}
-i.icon.deploydog:before {
- content: "\f38e";
-}
-i.icon.deskpro:before {
- content: "\f38f";
+i.icon.democrat:before {
+ content: "\f747";
}
i.icon.desktop:before {
content: "\f108";
}
-i.icon.deviantart:before {
- content: "\f1bd";
+i.icon.dharmachakra:before {
+ content: "\f655";
}
-i.icon.digg:before {
- content: "\f1a6";
+i.icon.diagnoses:before {
+ content: "\f470";
}
-i.icon.digital.ocean:before {
- content: "\f391";
+i.icon.dice:before {
+ content: "\f522";
}
-i.icon.discord:before {
- content: "\f392";
+i.icon.dice.d20:before {
+ content: "\f6cf";
}
-i.icon.discourse:before {
- content: "\f393";
+i.icon.dice.d6:before {
+ content: "\f6d1";
+}
+i.icon.dice.five:before {
+ content: "\f523";
+}
+i.icon.dice.four:before {
+ content: "\f524";
+}
+i.icon.dice.one:before {
+ content: "\f525";
+}
+i.icon.dice.six:before {
+ content: "\f526";
+}
+i.icon.dice.three:before {
+ content: "\f527";
+}
+i.icon.dice.two:before {
+ content: "\f528";
+}
+i.icon.digital.tachograph:before {
+ content: "\f566";
+}
+i.icon.directions:before {
+ content: "\f5eb";
+}
+i.icon.divide:before {
+ content: "\f529";
+}
+i.icon.dizzy:before {
+ content: "\f567";
}
i.icon.dna:before {
content: "\f471";
}
-i.icon.dochub:before {
- content: "\f394";
-}
-i.icon.docker:before {
- content: "\f395";
+i.icon.dog:before {
+ content: "\f6d3";
}
i.icon.dollar.sign:before {
content: "\f155";
@@ -1259,80 +1382,89 @@ i.icon.dolly:before {
i.icon.dolly.flatbed:before {
content: "\f474";
}
+i.icon.donate:before {
+ content: "\f4b9";
+}
+i.icon.door.closed:before {
+ content: "\f52a";
+}
+i.icon.door.open:before {
+ content: "\f52b";
+}
i.icon.dot.circle:before {
content: "\f192";
}
+i.icon.dove:before {
+ content: "\f4ba";
+}
i.icon.download:before {
content: "\f019";
}
-i.icon.draft2digital:before {
- content: "\f396";
+i.icon.drafting.compass:before {
+ content: "\f568";
}
-i.icon.dribbble:before {
- content: "\f17d";
+i.icon.dragon:before {
+ content: "\f6d5";
}
-i.icon.dribbble.square:before {
- content: "\f397";
+i.icon.draw.polygon:before {
+ content: "\f5ee";
}
-i.icon.dropbox:before {
- content: "\f16b";
+i.icon.drum:before {
+ content: "\f569";
}
-i.icon.drupal:before {
- content: "\f1a9";
+i.icon.drum.steelpan:before {
+ content: "\f56a";
}
-i.icon.dyalog:before {
- content: "\f399";
+i.icon.drumstick.bite:before {
+ content: "\f6d7";
}
-i.icon.earlybirds:before {
- content: "\f39a";
+i.icon.dumbbell:before {
+ content: "\f44b";
}
-i.icon.edge:before {
- content: "\f282";
+i.icon.dumpster:before {
+ content: "\f793";
+}
+i.icon.dumpster.fire:before {
+ content: "\f794";
+}
+i.icon.dungeon:before {
+ content: "\f6d9";
}
i.icon.edit:before {
content: "\f044";
}
+i.icon.egg:before {
+ content: "\f7fb";
+}
i.icon.eject:before {
content: "\f052";
}
-i.icon.elementor:before {
- content: "\f430";
-}
i.icon.ellipsis.horizontal:before {
content: "\f141";
}
i.icon.ellipsis.vertical:before {
content: "\f142";
}
-i.icon.ember:before {
- content: "\f423";
-}
-i.icon.empire:before {
- content: "\f1d1";
-}
i.icon.envelope:before {
content: "\f0e0";
}
i.icon.envelope.open:before {
content: "\f2b6";
}
+i.icon.envelope.open.text:before {
+ content: "\f658";
+}
i.icon.envelope.square:before {
content: "\f199";
}
-i.icon.envira:before {
- content: "\f299";
+i.icon.equals:before {
+ content: "\f52c";
}
i.icon.eraser:before {
content: "\f12d";
}
-i.icon.erlang:before {
- content: "\f39d";
-}
-i.icon.ethereum:before {
- content: "\f42e";
-}
-i.icon.etsy:before {
- content: "\f2d7";
+i.icon.ethernet:before {
+ content: "\f796";
}
i.icon.euro.sign:before {
content: "\f153";
@@ -1352,16 +1484,16 @@ i.icon.exclamation.triangle:before {
i.icon.expand:before {
content: "\f065";
}
+i.icon.expand.alternate:before {
+ content: "\f424";
+}
i.icon.expand.arrows.alternate:before {
content: "\f31e";
}
-i.icon.expeditedssl:before {
- content: "\f23e";
-}
i.icon.external.alternate:before {
content: "\f35d";
}
-i.icon.external.square.alternate:before {
+i.icon.external.link.square.alternate:before {
content: "\f360";
}
i.icon.eye:before {
@@ -1373,17 +1505,8 @@ i.icon.eye.dropper:before {
i.icon.eye.slash:before {
content: "\f070";
}
-i.icon.facebook:before {
- content: "\f09a";
-}
-i.icon.facebook.f:before {
- content: "\f39e";
-}
-i.icon.facebook.messenger:before {
- content: "\f39f";
-}
-i.icon.facebook.square:before {
- content: "\f082";
+i.icon.fan:before {
+ content: "\f863";
}
i.icon.fast.backward:before {
content: "\f049";
@@ -1394,6 +1517,12 @@ i.icon.fast.forward:before {
i.icon.fax:before {
content: "\f1ac";
}
+i.icon.feather:before {
+ content: "\f52d";
+}
+i.icon.feather.alternate:before {
+ content: "\f56b";
+}
i.icon.female:before {
content: "\f182";
}
@@ -1415,47 +1544,92 @@ i.icon.file.audio:before {
i.icon.file.code:before {
content: "\f1c9";
}
+i.icon.file.contract:before {
+ content: "\f56c";
+}
+i.icon.file.csv:before {
+ content: "\f6dd";
+}
+i.icon.file.download:before {
+ content: "\f56d";
+}
i.icon.file.excel:before {
content: "\f1c3";
}
+i.icon.file.export:before {
+ content: "\f56e";
+}
i.icon.file.image:before {
content: "\f1c5";
}
+i.icon.file.import:before {
+ content: "\f56f";
+}
+i.icon.file.invoice:before {
+ content: "\f570";
+}
+i.icon.file.invoice.dollar:before {
+ content: "\f571";
+}
+i.icon.file.medical:before {
+ content: "\f477";
+}
+i.icon.file.medical.alternate:before {
+ content: "\f478";
+}
i.icon.file.pdf:before {
content: "\f1c1";
}
i.icon.file.powerpoint:before {
content: "\f1c4";
}
+i.icon.file.prescription:before {
+ content: "\f572";
+}
+i.icon.file.signature:before {
+ content: "\f573";
+}
+i.icon.file.upload:before {
+ content: "\f574";
+}
i.icon.file.video:before {
content: "\f1c8";
}
i.icon.file.word:before {
content: "\f1c2";
}
+i.icon.fill:before {
+ content: "\f575";
+}
+i.icon.fill.drip:before {
+ content: "\f576";
+}
i.icon.film:before {
content: "\f008";
}
i.icon.filter:before {
content: "\f0b0";
}
+i.icon.fingerprint:before {
+ content: "\f577";
+}
i.icon.fire:before {
content: "\f06d";
}
+i.icon.fire.alternate:before {
+ content: "\f7e4";
+}
i.icon.fire.extinguisher:before {
content: "\f134";
}
-i.icon.firefox:before {
- content: "\f269";
-}
i.icon.first.aid:before {
content: "\f479";
}
-i.icon.first.order:before {
- content: "\f2b0";
+i.icon.fish:before {
+ content: "\f578";
}
-i.icon.firstdraft:before {
- content: "\f3a1";
+i.icon.fist.raised:before {
+ content: "\f6de";
}
i.icon.flag:before {
content: "\f024";
@@ -1463,75 +1637,60 @@ i.icon.flag:before {
i.icon.flag.checkered:before {
content: "\f11e";
}
+i.icon.flag.usa:before {
+ content: "\f74d";
+}
i.icon.flask:before {
content: "\f0c3";
}
-i.icon.flickr:before {
- content: "\f16e";
-}
-i.icon.flipboard:before {
- content: "\f44d";
-}
-i.icon.fly:before {
- content: "\f417";
+i.icon.flushed:before {
+ content: "\f579";
}
i.icon.folder:before {
content: "\f07b";
}
+i.icon.folder.minus:before {
+ content: "\f65d";
+}
i.icon.folder.open:before {
content: "\f07c";
}
+i.icon.folder.plus:before {
+ content: "\f65e";
+}
i.icon.font:before {
content: "\f031";
}
-i.icon.font.awesome:before {
- content: "\f2b4";
-}
-i.icon.font.awesome.alternate:before {
- content: "\f35c";
-}
-i.icon.font.awesome.flag:before {
- content: "\f425";
-}
-i.icon.fonticons:before {
- content: "\f280";
-}
-i.icon.fonticons.fi:before {
- content: "\f3a2";
-}
i.icon.football.ball:before {
content: "\f44e";
}
-i.icon.fort.awesome:before {
- content: "\f286";
-}
-i.icon.fort.awesome.alternate:before {
- content: "\f3a3";
-}
-i.icon.forumbee:before {
- content: "\f211";
-}
i.icon.forward:before {
content: "\f04e";
}
-i.icon.foursquare:before {
- content: "\f180";
-}
-i.icon.free.code.camp:before {
- content: "\f2c5";
-}
-i.icon.freebsd:before {
- content: "\f3a4";
+i.icon.frog:before {
+ content: "\f52e";
}
i.icon.frown:before {
content: "\f119";
}
+i.icon.frown.open:before {
+ content: "\f57a";
+}
+i.icon.fruit-apple:before {
+ content: "\f5d1";
+}
+i.icon.funnel.dollar:before {
+ content: "\f662";
+}
i.icon.futbol:before {
content: "\f1e3";
}
i.icon.gamepad:before {
content: "\f11b";
}
+i.icon.gas.pump:before {
+ content: "\f52f";
+}
i.icon.gavel:before {
content: "\f0e3";
}
@@ -1541,117 +1700,144 @@ i.icon.gem:before {
i.icon.genderless:before {
content: "\f22d";
}
-i.icon.get.pocket:before {
- content: "\f265";
-}
-i.icon.gg:before {
- content: "\f260";
-}
-i.icon.gg.circle:before {
- content: "\f261";
+i.icon.ghost:before {
+ content: "\f6e2";
}
i.icon.gift:before {
content: "\f06b";
}
-i.icon.git:before {
- content: "\f1d3";
+i.icon.gifts:before {
+ content: "\f79c";
}
-i.icon.git.square:before {
- content: "\f1d2";
+i.icon.glass.cheers:before {
+ content: "\f79f";
}
-i.icon.github:before {
- content: "\f09b";
+i.icon.glass.martini:before {
+ content: "\f000";
}
-i.icon.github.alternate:before {
- content: "\f113";
+i.icon.glass.martini.alternate:before {
+ content: "\f57b";
}
-i.icon.github.square:before {
- content: "\f092";
+i.icon.glass.whiskey:before {
+ content: "\f7a0";
}
-i.icon.gitkraken:before {
- content: "\f3a6";
+i.icon.glasses:before {
+ content: "\f530";
}
-i.icon.gitlab:before {
- content: "\f296";
+i.icon.globe:before {
+ content: "\f0ac";
}
-i.icon.gitter:before {
- content: "\f426";
+i.icon.globe.africa:before {
+ content: "\f57c";
}
-i.icon.glass.martini:before {
- content: "\f000";
+i.icon.globe.americas:before {
+ content: "\f57d";
}
-i.icon.glide:before {
- content: "\f2a5";
+i.icon.globe.asia:before {
+ content: "\f57e";
}
-i.icon.glide.g:before {
- content: "\f2a6";
+i.icon.globe.europe:before {
+ content: "\f7a2";
}
-i.icon.globe:before {
- content: "\f0ac";
+i.icon.golf.ball:before {
+ content: "\f450";
}
-i.icon.gofore:before {
- content: "\f3a7";
+i.icon.gopuram:before {
+ content: "\f664";
}
-i.icon.golf.ball:before {
- content: "\f450";
+i.icon.graduation.cap:before {
+ content: "\f19d";
}
-i.icon.goodreads:before {
- content: "\f3a8";
+i.icon.greater.than:before {
+ content: "\f531";
}
-i.icon.goodreads.g:before {
- content: "\f3a9";
+i.icon.greater.than.equal:before {
+ content: "\f532";
}
-i.icon.google:before {
- content: "\f1a0";
+i.icon.grimace:before {
+ content: "\f57f";
}
-i.icon.google.drive:before {
- content: "\f3aa";
+i.icon.grin:before {
+ content: "\f580";
}
-i.icon.google.play:before {
- content: "\f3ab";
+i.icon.grin.alternate:before {
+ content: "\f581";
}
-i.icon.google.plus:before {
- content: "\f2b3";
+i.icon.grin.beam:before {
+ content: "\f582";
}
-i.icon.google.plus.g:before {
- content: "\f0d5";
+i.icon.grin.beam.sweat:before {
+ content: "\f583";
}
-i.icon.google.plus.square:before {
- content: "\f0d4";
+i.icon.grin.hearts:before {
+ content: "\f584";
}
-i.icon.google.wallet:before {
- content: "\f1ee";
+i.icon.grin.squint:before {
+ content: "\f585";
}
-i.icon.graduation.cap:before {
- content: "\f19d";
+i.icon.grin.squint.tears:before {
+ content: "\f586";
}
-i.icon.gratipay:before {
- content: "\f184";
+i.icon.grin.stars:before {
+ content: "\f587";
}
-i.icon.grav:before {
- content: "\f2d6";
+i.icon.grin.tears:before {
+ content: "\f588";
}
-i.icon.gripfire:before {
- content: "\f3ac";
+i.icon.grin.tongue:before {
+ content: "\f589";
}
-i.icon.grunt:before {
- content: "\f3ad";
+i.icon.grin.tongue.squint:before {
+ content: "\f58a";
}
-i.icon.gulp:before {
- content: "\f3ae";
+i.icon.grin.tongue.wink:before {
+ content: "\f58b";
+}
+i.icon.grin.wink:before {
+ content: "\f58c";
+}
+i.icon.grip.horizontal:before {
+ content: "\f58d";
+}
+i.icon.grip.lines:before {
+ content: "\f7a4";
+}
+i.icon.grip.lines.vertical:before {
+ content: "\f7a5";
+}
+i.icon.grip.vertical:before {
+ content: "\f58e";
+}
+i.icon.guitar:before {
+ content: "\f7a6";
}
i.icon.h.square:before {
content: "\f0fd";
}
-i.icon.hacker.news:before {
- content: "\f1d4";
+i.icon.hamburger:before {
+ content: "\f805";
}
-i.icon.hacker.news.square:before {
- content: "\f3af";
+i.icon.hammer:before {
+ content: "\f6e3";
+}
+i.icon.hamsa:before {
+ content: "\f665";
+}
+i.icon.hand.holding:before {
+ content: "\f4bd";
+}
+i.icon.hand.holding.heart:before {
+ content: "\f4be";
+}
+i.icon.hand.holding.usd:before {
+ content: "\f4c0";
}
i.icon.hand.lizard:before {
content: "\f258";
}
+i.icon.hand.middle.finger:before {
+ content: "\f806";
+}
i.icon.hand.paper:before {
content: "\f256";
}
@@ -1682,12 +1868,33 @@ i.icon.hand.scissors:before {
i.icon.hand.spock:before {
content: "\f259";
}
+i.icon.hands:before {
+ content: "\f4c2";
+}
+i.icon.hands.helping:before {
+ content: "\f4c4";
+}
i.icon.handshake:before {
content: "\f2b5";
}
+i.icon.hanukiah:before {
+ content: "\f6e6";
+}
+i.icon.hard.hat:before {
+ content: "\f807";
+}
i.icon.hashtag:before {
content: "\f292";
}
+i.icon.hat.cowboy:before {
+ content: "\f8c0";
+}
+i.icon.hat.cowboy.side:before {
+ content: "\f8c1";
+}
+i.icon.hat.wizard:before {
+ content: "\f6e8";
+}
i.icon.hdd:before {
content: "\f0a0";
}
@@ -1697,17 +1904,32 @@ i.icon.heading:before {
i.icon.headphones:before {
content: "\f025";
}
+i.icon.headphones.alternate:before {
+ content: "\f58f";
+}
+i.icon.headset:before {
+ content: "\f590";
+}
i.icon.heart:before {
content: "\f004";
}
+i.icon.heart.broken:before {
+ content: "\f7a9";
+}
i.icon.heartbeat:before {
content: "\f21e";
}
-i.icon.hips:before {
- content: "\f452";
+i.icon.helicopter:before {
+ content: "\f533";
}
-i.icon.hire.a.helper:before {
- content: "\f3b0";
+i.icon.highlighter:before {
+ content: "\f591";
+}
+i.icon.hiking:before {
+ content: "\f6ec";
+}
+i.icon.hippo:before {
+ content: "\f6ed";
}
i.icon.history:before {
content: "\f1da";
@@ -1715,20 +1937,35 @@ i.icon.history:before {
i.icon.hockey.puck:before {
content: "\f453";
}
+i.icon.holly.berry:before {
+ content: "\f7aa";
+}
i.icon.home:before {
content: "\f015";
}
-i.icon.hooli:before {
- content: "\f427";
+i.icon.horse:before {
+ content: "\f6f0";
+}
+i.icon.horse.head:before {
+ content: "\f7ab";
}
i.icon.hospital:before {
content: "\f0f8";
}
+i.icon.hospital.alternate:before {
+ content: "\f47d";
+}
i.icon.hospital.symbol:before {
content: "\f47e";
}
-i.icon.hotjar:before {
- content: "\f3b1";
+i.icon.hot.tub:before {
+ content: "\f593";
+}
+i.icon.hotdog:before {
+ content: "\f80f";
+}
+i.icon.hotel:before {
+ content: "\f594";
}
i.icon.hourglass:before {
content: "\f254";
@@ -1742,33 +1979,42 @@ i.icon.hourglass.half:before {
i.icon.hourglass.start:before {
content: "\f251";
}
-i.icon.houzz:before {
- content: "\f27c";
-}
-i.icon.html5:before {
- content: "\f13b";
+i.icon.house.damage:before {
+ content: "\f6f1";
}
-i.icon.hubspot:before {
- content: "\f3b2";
+i.icon.hryvnia:before {
+ content: "\f6f2";
}
i.icon.i.cursor:before {
content: "\f246";
}
+i.icon.ice.cream:before {
+ content: "\f810";
+}
+i.icon.icicles:before {
+ content: "\f7ad";
+}
+i.icon.icons:before {
+ content: "\f86d";
+}
i.icon.id.badge:before {
content: "\f2c1";
}
i.icon.id.card:before {
content: "\f2c2";
}
+i.icon.id.card.alternate:before {
+ content: "\f47f";
+}
+i.icon.igloo:before {
+ content: "\f7ae";
+}
i.icon.image:before {
content: "\f03e";
}
i.icon.images:before {
content: "\f302";
}
-i.icon.imdb:before {
- content: "\f2d8";
-}
i.icon.inbox:before {
content: "\f01c";
}
@@ -1778,47 +2024,29 @@ i.icon.indent:before {
i.icon.industry:before {
content: "\f275";
}
+i.icon.infinity:before {
+ content: "\f534";
+}
i.icon.info:before {
content: "\f129";
}
i.icon.info.circle:before {
content: "\f05a";
}
-i.icon.instagram:before {
- content: "\f16d";
-}
-i.icon.internet.explorer:before {
- content: "\f26b";
-}
-i.icon.ioxhost:before {
- content: "\f208";
-}
i.icon.italic:before {
content: "\f033";
}
-i.icon.itunes:before {
- content: "\f3b4";
-}
-i.icon.itunes.note:before {
- content: "\f3b5";
-}
-i.icon.jenkins:before {
- content: "\f3b6";
-}
-i.icon.joget:before {
- content: "\f3b7";
-}
-i.icon.joomla:before {
- content: "\f1aa";
+i.icon.jedi:before {
+ content: "\f669";
}
-i.icon.js:before {
- content: "\f3b8";
+i.icon.joint:before {
+ content: "\f595";
}
-i.icon.js.square:before {
- content: "\f3b9";
+i.icon.journal.whills:before {
+ content: "\f66a";
}
-i.icon.jsfiddle:before {
- content: "\f1cc";
+i.icon.kaaba:before {
+ content: "\f66b";
}
i.icon.key:before {
content: "\f084";
@@ -1826,17 +2054,23 @@ i.icon.key:before {
i.icon.keyboard:before {
content: "\f11c";
}
-i.icon.keycdn:before {
- content: "\f3ba";
+i.icon.khanda:before {
+ content: "\f66d";
}
-i.icon.kickstarter:before {
- content: "\f3bb";
+i.icon.kiss:before {
+ content: "\f596";
}
-i.icon.kickstarter.k:before {
- content: "\f3bc";
+i.icon.kiss.beam:before {
+ content: "\f597";
}
-i.icon.korvue:before {
- content: "\f42f";
+i.icon.kiss.wink.heart:before {
+ content: "\f598";
+}
+i.icon.kiwi.bird:before {
+ content: "\f535";
+}
+i.icon.landmark:before {
+ content: "\f66f";
}
i.icon.language:before {
content: "\f1ab";
@@ -1844,26 +2078,38 @@ i.icon.language:before {
i.icon.laptop:before {
content: "\f109";
}
-i.icon.laravel:before {
- content: "\f3bd";
+i.icon.laptop.code:before {
+ content: "\f5fc";
}
-i.icon.lastfm:before {
- content: "\f202";
+i.icon.laptop.medical:before {
+ content: "\f812";
}
-i.icon.lastfm.square:before {
- content: "\f203";
+i.icon.laugh:before {
+ content: "\f599";
+}
+i.icon.laugh.beam:before {
+ content: "\f59a";
+}
+i.icon.laugh.squint:before {
+ content: "\f59b";
+}
+i.icon.laugh.wink:before {
+ content: "\f59c";
+}
+i.icon.layer.group:before {
+ content: "\f5fd";
}
i.icon.leaf:before {
content: "\f06c";
}
-i.icon.leanpub:before {
- content: "\f212";
-}
i.icon.lemon:before {
content: "\f094";
}
-i.icon.less:before {
- content: "\f41d";
+i.icon.less.than:before {
+ content: "\f536";
+}
+i.icon.less.than.equal:before {
+ content: "\f537";
}
i.icon.level.down.alternate:before {
content: "\f3be";
@@ -1877,24 +2123,9 @@ i.icon.life.ring:before {
i.icon.lightbulb:before {
content: "\f0eb";
}
-i.icon.linechat:before {
- content: "\f3c0";
-}
i.icon.linkify:before {
content: "\f0c1";
}
-i.icon.linkedin:before {
- content: "\f08c";
-}
-i.icon.linkedin.alt:before {
- content: "\f0e1";
-}
-i.icon.linode:before {
- content: "\f2b8";
-}
-i.icon.linux:before {
- content: "\f17c";
-}
i.icon.lira.sign:before {
content: "\f195";
}
@@ -1934,11 +2165,8 @@ i.icon.long.arrow.alternate.up:before {
i.icon.low.vision:before {
content: "\f2a8";
}
-i.icon.lyft:before {
- content: "\f3c3";
-}
-i.icon.magento:before {
- content: "\f3c4";
+i.icon.luggage.cart:before {
+ content: "\f59d";
}
i.icon.magic:before {
content: "\f0d0";
@@ -1946,12 +2174,21 @@ i.icon.magic:before {
i.icon.magnet:before {
content: "\f076";
}
+i.icon.mail.bulk:before {
+ content: "\f674";
+}
i.icon.male:before {
content: "\f183";
}
i.icon.map:before {
content: "\f279";
}
+i.icon.map.marked:before {
+ content: "\f59f";
+}
+i.icon.map.marked.alternate:before {
+ content: "\f5a0";
+}
i.icon.map.marker:before {
content: "\f041";
}
@@ -1964,6 +2201,9 @@ i.icon.map.pin:before {
i.icon.map.signs:before {
content: "\f277";
}
+i.icon.marker:before {
+ content: "\f5a1";
+}
i.icon.mars:before {
content: "\f222";
}
@@ -1979,44 +2219,53 @@ i.icon.mars.stroke.horizontal:before {
i.icon.mars.stroke.vertical:before {
content: "\f22a";
}
-i.icon.maxcdn:before {
- content: "\f136";
-}
-i.icon.medapps:before {
- content: "\f3c6";
-}
-i.icon.medium:before {
- content: "\f23a";
+i.icon.mask:before {
+ content: "\f6fa";
}
-i.icon.medium.m:before {
- content: "\f3c7";
+i.icon.medal:before {
+ content: "\f5a2";
}
i.icon.medkit:before {
content: "\f0fa";
}
-i.icon.medrt:before {
- content: "\f3c8";
-}
-i.icon.meetup:before {
- content: "\f2e0";
-}
i.icon.meh:before {
content: "\f11a";
}
+i.icon.meh.blank:before {
+ content: "\f5a4";
+}
+i.icon.meh.rolling.eyes:before {
+ content: "\f5a5";
+}
+i.icon.memory:before {
+ content: "\f538";
+}
+i.icon.menorah:before {
+ content: "\f676";
+}
i.icon.mercury:before {
content: "\f223";
}
+i.icon.meteor:before {
+ content: "\f753";
+}
i.icon.microchip:before {
content: "\f2db";
}
i.icon.microphone:before {
content: "\f130";
}
+i.icon.microphone.alternate:before {
+ content: "\f3c9";
+}
+i.icon.microphone.alternate.slash:before {
+ content: "\f539";
+}
i.icon.microphone.slash:before {
content: "\f131";
}
-i.icon.microsoft:before {
- content: "\f3ca";
+i.icon.microscope:before {
+ content: "\f610";
}
i.icon.minus:before {
content: "\f068";
@@ -2027,14 +2276,8 @@ i.icon.minus.circle:before {
i.icon.minus.square:before {
content: "\f146";
}
-i.icon.mix:before {
- content: "\f3cb";
-}
-i.icon.mixcloud:before {
- content: "\f289";
-}
-i.icon.mizuni:before {
- content: "\f3cc";
+i.icon.mitten:before {
+ content: "\f7b5";
}
i.icon.mobile:before {
content: "\f10b";
@@ -2042,29 +2285,56 @@ i.icon.mobile:before {
i.icon.mobile.alternate:before {
content: "\f3cd";
}
-i.icon.modx:before {
- content: "\f285";
-}
-i.icon.monero:before {
- content: "\f3d0";
+i.icon.money.bill:before {
+ content: "\f0d6";
}
i.icon.money.bill.alternate:before {
content: "\f3d1";
}
+i.icon.money.bill.wave:before {
+ content: "\f53a";
+}
+i.icon.money.bill.wave.alternate:before {
+ content: "\f53b";
+}
+i.icon.money.check:before {
+ content: "\f53c";
+}
+i.icon.money.check.alternate:before {
+ content: "\f53d";
+}
+i.icon.monument:before {
+ content: "\f5a6";
+}
i.icon.moon:before {
content: "\f186";
}
+i.icon.mortar.pestle:before {
+ content: "\f5a7";
+}
+i.icon.mosque:before {
+ content: "\f678";
+}
i.icon.motorcycle:before {
content: "\f21c";
}
+i.icon.mountain:before {
+ content: "\f6fc";
+}
+i.icon.mouse:before {
+ content: "\f8cc";
+}
i.icon.mouse.pointer:before {
content: "\f245";
}
+i.icon.mug.hot:before {
+ content: "\f7b6";
+}
i.icon.music:before {
content: "\f001";
}
-i.icon.napster:before {
- content: "\f3d2";
+i.icon.network.wired:before {
+ content: "\f6ff";
}
i.icon.neuter:before {
content: "\f22c";
@@ -2072,23 +2342,11 @@ i.icon.neuter:before {
i.icon.newspaper:before {
content: "\f1ea";
}
-i.icon.nintendo.switch:before {
- content: "\f418";
-}
-i.icon.node:before {
- content: "\f419";
-}
-i.icon.node.js:before {
- content: "\f3d3";
-}
-i.icon.npm:before {
- content: "\f3d4";
-}
-i.icon.ns8:before {
- content: "\f3d5";
+i.icon.not.equal:before {
+ content: "\f53e";
}
-i.icon.nutritionix:before {
- content: "\f3d6";
+i.icon.notes.medical:before {
+ content: "\f481";
}
i.icon.object.group:before {
content: "\f247";
@@ -2096,41 +2354,29 @@ i.icon.object.group:before {
i.icon.object.ungroup:before {
content: "\f248";
}
-i.icon.odnoklassniki:before {
- content: "\f263";
+i.icon.oil.can:before {
+ content: "\f613";
}
-i.icon.odnoklassniki.square:before {
- content: "\f264";
+i.icon.om:before {
+ content: "\f679";
}
-i.icon.opencart:before {
- content: "\f23d";
+i.icon.otter:before {
+ content: "\f700";
}
-i.icon.openid:before {
- content: "\f19b";
+i.icon.outdent:before {
+ content: "\f03b";
}
-i.icon.opera:before {
- content: "\f26a";
+i.icon.pager:before {
+ content: "\f815";
}
-i.icon.optin.monster:before {
- content: "\f23c";
+i.icon.paint.brush:before {
+ content: "\f1fc";
}
-i.icon.osi:before {
- content: "\f41a";
+i.icon.paint.roller:before {
+ content: "\f5aa";
}
-i.icon.outdent:before {
- content: "\f03b";
-}
-i.icon.page4:before {
- content: "\f3d7";
-}
-i.icon.pagelines:before {
- content: "\f18c";
-}
-i.icon.paint.brush:before {
- content: "\f1fc";
-}
-i.icon.palfed:before {
- content: "\f3d8";
+i.icon.palette:before {
+ content: "\f53f";
}
i.icon.pallet:before {
content: "\f482";
@@ -2141,15 +2387,24 @@ i.icon.paper.plane:before {
i.icon.paperclip:before {
content: "\f0c6";
}
+i.icon.parachute.box:before {
+ content: "\f4cd";
+}
i.icon.paragraph:before {
content: "\f1dd";
}
+i.icon.parking:before {
+ content: "\f540";
+}
+i.icon.passport:before {
+ content: "\f5ab";
+}
+i.icon.pastafarianism:before {
+ content: "\f67b";
+}
i.icon.paste:before {
content: "\f0ea";
}
-i.icon.patreon:before {
- content: "\f3d9";
-}
i.icon.pause:before {
content: "\f04c";
}
@@ -2159,8 +2414,20 @@ i.icon.pause.circle:before {
i.icon.paw:before {
content: "\f1b0";
}
-i.icon.paypal:before {
- content: "\f1ed";
+i.icon.peace:before {
+ content: "\f67c";
+}
+i.icon.pen:before {
+ content: "\f304";
+}
+i.icon.pen.alternate:before {
+ content: "\f305";
+}
+i.icon.pen.fancy:before {
+ content: "\f5ac";
+}
+i.icon.pen.nib:before {
+ content: "\f5ad";
}
i.icon.pen.square:before {
content: "\f14b";
@@ -2168,63 +2435,72 @@ i.icon.pen.square:before {
i.icon.pencil.alternate:before {
content: "\f303";
}
+i.icon.pencil.ruler:before {
+ content: "\f5ae";
+}
+i.icon.people.carry:before {
+ content: "\f4ce";
+}
+i.icon.pepper.hot:before {
+ content: "\f816";
+}
i.icon.percent:before {
content: "\f295";
}
-i.icon.periscope:before {
- content: "\f3da";
-}
-i.icon.phabricator:before {
- content: "\f3db";
+i.icon.percentage:before {
+ content: "\f541";
}
-i.icon.phoenix.framework:before {
- content: "\f3dc";
+i.icon.person.booth:before {
+ content: "\f756";
}
i.icon.phone:before {
content: "\f095";
}
+i.icon.phone.alternate:before {
+ content: "\f879";
+}
+i.icon.phone.slash:before {
+ content: "\f3dd";
+}
i.icon.phone.square:before {
content: "\f098";
}
+i.icon.phone.square.alternate:before {
+ content: "\f87b";
+}
i.icon.phone.volume:before {
content: "\f2a0";
}
-i.icon.php:before {
- content: "\f457";
-}
-i.icon.pied.piper:before {
- content: "\f2ae";
-}
-i.icon.pied.piper.alternate:before {
- content: "\f1a8";
+i.icon.photo.video:before {
+ content: "\f87c";
}
-i.icon.pied.piper.pp:before {
- content: "\f1a7";
+i.icon.piggy.bank:before {
+ content: "\f4d3";
}
i.icon.pills:before {
content: "\f484";
}
-i.icon.pinterest:before {
- content: "\f0d2";
-}
-i.icon.pinterest.p:before {
- content: "\f231";
+i.icon.pizza.slice:before {
+ content: "\f818";
}
-i.icon.pinterest.square:before {
- content: "\f0d3";
+i.icon.place.of.worship:before {
+ content: "\f67f";
}
i.icon.plane:before {
content: "\f072";
}
+i.icon.plane.arrival:before {
+ content: "\f5af";
+}
+i.icon.plane.departure:before {
+ content: "\f5b0";
+}
i.icon.play:before {
content: "\f04b";
}
i.icon.play.circle:before {
content: "\f144";
}
-i.icon.playstation:before {
- content: "\f3df";
-}
i.icon.plug:before {
content: "\f1e6";
}
@@ -2240,30 +2516,57 @@ i.icon.plus.square:before {
i.icon.podcast:before {
content: "\f2ce";
}
+i.icon.poll:before {
+ content: "\f681";
+}
+i.icon.poll.horizontal:before {
+ content: "\f682";
+}
+i.icon.poo:before {
+ content: "\f2fe";
+}
+i.icon.poo.storm:before {
+ content: "\f75a";
+}
+i.icon.poop:before {
+ content: "\f619";
+}
+i.icon.portrait:before {
+ content: "\f3e0";
+}
i.icon.pound.sign:before {
content: "\f154";
}
i.icon.power.off:before {
content: "\f011";
}
+i.icon.pray:before {
+ content: "\f683";
+}
+i.icon.praying.hands:before {
+ content: "\f684";
+}
+i.icon.prescription:before {
+ content: "\f5b1";
+}
+i.icon.prescription.bottle:before {
+ content: "\f485";
+}
+i.icon.prescription.bottle.alternate:before {
+ content: "\f486";
+}
i.icon.print:before {
content: "\f02f";
}
-i.icon.product.hunt:before {
- content: "\f288";
+i.icon.procedures:before {
+ content: "\f487";
}
-i.icon.pushed:before {
- content: "\f3e1";
+i.icon.project.diagram:before {
+ content: "\f542";
}
i.icon.puzzle.piece:before {
content: "\f12e";
}
-i.icon.python:before {
- content: "\f3e2";
-}
-i.icon.qq:before {
- content: "\f1d6";
-}
i.icon.qrcode:before {
content: "\f029";
}
@@ -2276,44 +2579,35 @@ i.icon.question.circle:before {
i.icon.quidditch:before {
content: "\f458";
}
-i.icon.quinscape:before {
- content: "\f459";
-}
-i.icon.quora:before {
- content: "\f2c4";
-}
i.icon.quote.left:before {
content: "\f10d";
}
i.icon.quote.right:before {
content: "\f10e";
}
-i.icon.random:before {
- content: "\f074";
-}
-i.icon.ravelry:before {
- content: "\f2d9";
+i.icon.quran:before {
+ content: "\f687";
}
-i.icon.react:before {
- content: "\f41b";
+i.icon.radiation:before {
+ content: "\f7b9";
}
-i.icon.rebel:before {
- content: "\f1d0";
+i.icon.radiation.alternate:before {
+ content: "\f7ba";
}
-i.icon.recycle:before {
- content: "\f1b8";
+i.icon.rainbow:before {
+ content: "\f75b";
}
-i.icon.redriver:before {
- content: "\f3e3";
+i.icon.random:before {
+ content: "\f074";
}
-i.icon.reddit:before {
- content: "\f1a1";
+i.icon.receipt:before {
+ content: "\f543";
}
-i.icon.reddit.alien:before {
- content: "\f281";
+i.icon.record.vinyl:before {
+ content: "\f8d9";
}
-i.icon.reddit.square:before {
- content: "\f1a2";
+i.icon.recycle:before {
+ content: "\f1b8";
}
i.icon.redo:before {
content: "\f01e";
@@ -2324,11 +2618,8 @@ i.icon.redo.alternate:before {
i.icon.registered:before {
content: "\f25d";
}
-i.icon.rendact:before {
- content: "\f3e4";
-}
-i.icon.renren:before {
- content: "\f18b";
+i.icon.remove.format:before {
+ content: "\f87d";
}
i.icon.reply:before {
content: "\f3e5";
@@ -2336,26 +2627,32 @@ i.icon.reply:before {
i.icon.reply.all:before {
content: "\f122";
}
-i.icon.replyd:before {
- content: "\f3e6";
+i.icon.republican:before {
+ content: "\f75e";
}
-i.icon.resolving:before {
- content: "\f3e7";
+i.icon.restroom:before {
+ content: "\f7bd";
}
i.icon.retweet:before {
content: "\f079";
}
+i.icon.ribbon:before {
+ content: "\f4d6";
+}
+i.icon.ring:before {
+ content: "\f70b";
+}
i.icon.road:before {
content: "\f018";
}
+i.icon.robot:before {
+ content: "\f544";
+}
i.icon.rocket:before {
content: "\f135";
}
-i.icon.rocketchat:before {
- content: "\f3e8";
-}
-i.icon.rockrms:before {
- content: "\f3e9";
+i.icon.route:before {
+ content: "\f4d7";
}
i.icon.rss:before {
content: "\f09e";
@@ -2366,47 +2663,74 @@ i.icon.rss.square:before {
i.icon.ruble.sign:before {
content: "\f158";
}
+i.icon.ruler:before {
+ content: "\f545";
+}
+i.icon.ruler.combined:before {
+ content: "\f546";
+}
+i.icon.ruler.horizontal:before {
+ content: "\f547";
+}
+i.icon.ruler.vertical:before {
+ content: "\f548";
+}
+i.icon.running:before {
+ content: "\f70c";
+}
i.icon.rupee.sign:before {
content: "\f156";
}
-i.icon.safari:before {
- content: "\f267";
+i.icon.sad.cry:before {
+ content: "\f5b3";
}
-i.icon.sass:before {
- content: "\f41e";
+i.icon.sad.tear:before {
+ content: "\f5b4";
+}
+i.icon.satellite:before {
+ content: "\f7bf";
+}
+i.icon.satellite.dish:before {
+ content: "\f7c0";
}
i.icon.save:before {
content: "\f0c7";
}
-i.icon.schlix:before {
- content: "\f3ea";
+i.icon.school:before {
+ content: "\f549";
}
-i.icon.scribd:before {
- content: "\f28a";
+i.icon.screwdriver:before {
+ content: "\f54a";
+}
+i.icon.scroll:before {
+ content: "\f70e";
+}
+i.icon.sd.card:before {
+ content: "\f7c2";
}
i.icon.search:before {
content: "\f002";
}
+i.icon.search.dollar:before {
+ content: "\f688";
+}
+i.icon.search.location:before {
+ content: "\f689";
+}
i.icon.search.minus:before {
content: "\f010";
}
i.icon.search.plus:before {
content: "\f00e";
}
-i.icon.searchengin:before {
- content: "\f3eb";
-}
-i.icon.sellcast:before {
- content: "\f2da";
-}
-i.icon.sellsy:before {
- content: "\f213";
+i.icon.seedling:before {
+ content: "\f4d8";
}
i.icon.server:before {
content: "\f233";
}
-i.icon.servicestack:before {
- content: "\f3ec";
+i.icon.shapes:before {
+ content: "\f61f";
}
i.icon.share:before {
content: "\f064";
@@ -2432,8 +2756,8 @@ i.icon.ship:before {
i.icon.shipping.fast:before {
content: "\f48b";
}
-i.icon.shirtsinbulk:before {
- content: "\f214";
+i.icon.shoe.prints:before {
+ content: "\f54b";
}
i.icon.shopping.bag:before {
content: "\f290";
@@ -2447,95 +2771,161 @@ i.icon.shopping.cart:before {
i.icon.shower:before {
content: "\f2cc";
}
+i.icon.shuttle.van:before {
+ content: "\f5b6";
+}
+i.icon.sign:before {
+ content: "\f4d9";
+}
+i.icon.sign.in.alternate:before {
+ content: "\f2f6";
+}
i.icon.sign.language:before {
content: "\f2a7";
}
+i.icon.sign.out.alternate:before {
+ content: "\f2f5";
+}
i.icon.signal:before {
content: "\f012";
}
-i.icon.simplybuilt:before {
- content: "\f215";
+i.icon.signature:before {
+ content: "\f5b7";
}
-i.icon.sistrix:before {
- content: "\f3ee";
+i.icon.sim.card:before {
+ content: "\f7c4";
}
i.icon.sitemap:before {
content: "\f0e8";
}
-i.icon.skyatlas:before {
- content: "\f216";
+i.icon.skating:before {
+ content: "\f7c5";
}
-i.icon.skype:before {
- content: "\f17e";
+i.icon.skiing:before {
+ content: "\f7c9";
}
-i.icon.slack:before {
- content: "\f198";
+i.icon.skiing.nordic:before {
+ content: "\f7ca";
}
-i.icon.slack.hash:before {
- content: "\f3ef";
+i.icon.skull:before {
+ content: "\f54c";
+}
+i.icon.skull.crossbones:before {
+ content: "\f714";
+}
+i.icon.slash:before {
+ content: "\f715";
+}
+i.icon.sleigh:before {
+ content: "\f7cc";
}
i.icon.sliders.horizontal:before {
content: "\f1de";
}
-i.icon.slideshare:before {
- content: "\f1e7";
-}
i.icon.smile:before {
content: "\f118";
}
-i.icon.snapchat:before {
- content: "\f2ab";
+i.icon.smile.beam:before {
+ content: "\f5b8";
}
-i.icon.snapchat.ghost:before {
- content: "\f2ac";
+i.icon.smile.wink:before {
+ content: "\f4da";
}
-i.icon.snapchat.square:before {
- content: "\f2ad";
+i.icon.smog:before {
+ content: "\f75f";
+}
+i.icon.smoking:before {
+ content: "\f48d";
+}
+i.icon.smoking.ban:before {
+ content: "\f54d";
+}
+i.icon.sms:before {
+ content: "\f7cd";
+}
+i.icon.snowboarding:before {
+ content: "\f7ce";
}
i.icon.snowflake:before {
content: "\f2dc";
}
+i.icon.snowman:before {
+ content: "\f7d0";
+}
+i.icon.snowplow:before {
+ content: "\f7d2";
+}
+i.icon.socks:before {
+ content: "\f696";
+}
+i.icon.solar.panel:before {
+ content: "\f5ba";
+}
i.icon.sort:before {
content: "\f0dc";
}
i.icon.sort.alphabet.down:before {
content: "\f15d";
}
+i.icon.sort.alphabet.down.alternate:before {
+ content: "\f881";
+}
i.icon.sort.alphabet.up:before {
content: "\f15e";
}
+i.icon.sort.alphabet.up.alternate:before {
+ content: "\f882";
+}
i.icon.sort.amount.down:before {
content: "\f160";
}
+i.icon.sort.amount.down.alternate:before {
+ content: "\f884";
+}
i.icon.sort.amount.up:before {
content: "\f161";
}
+i.icon.sort.amount.up.alternate:before {
+ content: "\f885";
+}
i.icon.sort.down:before {
content: "\f0dd";
}
i.icon.sort.numeric.down:before {
content: "\f162";
}
+i.icon.sort.numeric.down.alternate:before {
+ content: "\f886";
+}
i.icon.sort.numeric.up:before {
content: "\f163";
}
+i.icon.sort.numeric.up.alternate:before {
+ content: "\f887";
+}
i.icon.sort.up:before {
content: "\f0de";
}
-i.icon.soundcloud:before {
- content: "\f1be";
+i.icon.spa:before {
+ content: "\f5bb";
}
i.icon.space.shuttle:before {
content: "\f197";
}
-i.icon.speakap:before {
- content: "\f3f3";
+i.icon.spell.check:before {
+ content: "\f891";
+}
+i.icon.spider:before {
+ content: "\f717";
}
i.icon.spinner:before {
content: "\f110";
}
-i.icon.spotify:before {
- content: "\f1bc";
+i.icon.splotch:before {
+ content: "\f5bc";
+}
+i.icon.spray.can:before {
+ content: "\f5bd";
}
i.icon.square:before {
content: "\f0c8";
@@ -2543,29 +2933,29 @@ i.icon.square:before {
i.icon.square.full:before {
content: "\f45c";
}
-i.icon.stack.exchange:before {
- content: "\f18d";
+i.icon.square.root.alternate:before {
+ content: "\f698";
}
-i.icon.stack.overflow:before {
- content: "\f16c";
+i.icon.stamp:before {
+ content: "\f5bf";
}
i.icon.star:before {
content: "\f005";
}
+i.icon.star.and.crescent:before {
+ content: "\f699";
+}
i.icon.star.half:before {
content: "\f089";
}
-i.icon.staylinked:before {
- content: "\f3f5";
-}
-i.icon.steam:before {
- content: "\f1b6";
+i.icon.star.half.alternate:before {
+ content: "\f5c0";
}
-i.icon.steam.square:before {
- content: "\f1b7";
+i.icon.star.of.david:before {
+ content: "\f69a";
}
-i.icon.steam.symbol:before {
- content: "\f3f6";
+i.icon.star.of.life:before {
+ content: "\f621";
}
i.icon.step.backward:before {
content: "\f048";
@@ -2576,9 +2966,6 @@ i.icon.step.forward:before {
i.icon.stethoscope:before {
content: "\f0f1";
}
-i.icon.sticker.mule:before {
- content: "\f3f7";
-}
i.icon.sticky.note:before {
content: "\f249";
}
@@ -2591,8 +2978,14 @@ i.icon.stop.circle:before {
i.icon.stopwatch:before {
content: "\f2f2";
}
-i.icon.strava:before {
- content: "\f428";
+i.icon.store:before {
+ content: "\f54e";
+}
+i.icon.store.alternate:before {
+ content: "\f54f";
+}
+i.icon.stream:before {
+ content: "\f550";
}
i.icon.street.view:before {
content: "\f21d";
@@ -2600,20 +2993,8 @@ i.icon.street.view:before {
i.icon.strikethrough:before {
content: "\f0cc";
}
-i.icon.stripe:before {
- content: "\f429";
-}
-i.icon.stripe.s:before {
- content: "\f42a";
-}
-i.icon.studiovinari:before {
- content: "\f3f8";
-}
-i.icon.stumbleupon:before {
- content: "\f1a4";
-}
-i.icon.stumbleupon.circle:before {
- content: "\f1a3";
+i.icon.stroopwafel:before {
+ content: "\f551";
}
i.icon.subscript:before {
content: "\f12c";
@@ -2624,17 +3005,29 @@ i.icon.subway:before {
i.icon.suitcase:before {
content: "\f0f2";
}
+i.icon.suitcase.rolling:before {
+ content: "\f5c1";
+}
i.icon.sun:before {
content: "\f185";
}
-i.icon.superpowers:before {
- content: "\f2dd";
-}
i.icon.superscript:before {
content: "\f12b";
}
-i.icon.supple:before {
- content: "\f3f9";
+i.icon.surprise:before {
+ content: "\f5c2";
+}
+i.icon.swatchbook:before {
+ content: "\f5c3";
+}
+i.icon.swimmer:before {
+ content: "\f5c4";
+}
+i.icon.swimming.pool:before {
+ content: "\f5c5";
+}
+i.icon.synagogue:before {
+ content: "\f69b";
}
i.icon.sync:before {
content: "\f021";
@@ -2657,6 +3050,9 @@ i.icon.tablet:before {
i.icon.tablet.alternate:before {
content: "\f3fa";
}
+i.icon.tablets:before {
+ content: "\f490";
+}
i.icon.tachometer.alternate:before {
content: "\f3fd";
}
@@ -2666,20 +3062,29 @@ i.icon.tag:before {
i.icon.tags:before {
content: "\f02c";
}
+i.icon.tape:before {
+ content: "\f4db";
+}
i.icon.tasks:before {
content: "\f0ae";
}
i.icon.taxi:before {
content: "\f1ba";
}
-i.icon.telegram:before {
- content: "\f2c6";
+i.icon.teeth:before {
+ content: "\f62e";
}
-i.icon.telegram.plane:before {
- content: "\f3fe";
+i.icon.teeth.open:before {
+ content: "\f62f";
}
-i.icon.tencent.weibo:before {
- content: "\f1d5";
+i.icon.temperature.high:before {
+ content: "\f769";
+}
+i.icon.temperature.low:before {
+ content: "\f76b";
+}
+i.icon.tenge:before {
+ content: "\f7d7";
}
i.icon.terminal:before {
content: "\f120";
@@ -2699,8 +3104,8 @@ i.icon.th.large:before {
i.icon.th.list:before {
content: "\f00b";
}
-i.icon.themeisle:before {
- content: "\f2b2";
+i.icon.theater.masks:before {
+ content: "\f630";
}
i.icon.thermometer:before {
content: "\f491";
@@ -2741,18 +3146,57 @@ i.icon.times.circle:before {
i.icon.tint:before {
content: "\f043";
}
+i.icon.tint.slash:before {
+ content: "\f5c7";
+}
+i.icon.tired:before {
+ content: "\f5c8";
+}
i.icon.toggle.off:before {
content: "\f204";
}
i.icon.toggle.on:before {
content: "\f205";
}
+i.icon.toilet:before {
+ content: "\f7d8";
+}
+i.icon.toilet.paper:before {
+ content: "\f71e";
+}
+i.icon.toolbox:before {
+ content: "\f552";
+}
+i.icon.tools:before {
+ content: "\f7d9";
+}
+i.icon.tooth:before {
+ content: "\f5c9";
+}
+i.icon.torah:before {
+ content: "\f6a0";
+}
+i.icon.torii.gate:before {
+ content: "\f6a1";
+}
+i.icon.tractor:before {
+ content: "\f722";
+}
i.icon.trademark:before {
content: "\f25c";
}
+i.icon.traffic.light:before {
+ content: "\f637";
+}
+i.icon.trailer:before {
+ content: "\f941";
+}
i.icon.train:before {
content: "\f238";
}
+i.icon.tram:before {
+ content: "\f7da";
+}
i.icon.transgender:before {
content: "\f224";
}
@@ -2765,14 +3209,14 @@ i.icon.trash:before {
i.icon.trash.alternate:before {
content: "\f2ed";
}
-i.icon.tree:before {
- content: "\f1bb";
+i.icon.trash.restore:before {
+ content: "\f829";
}
-i.icon.trello:before {
- content: "\f181";
+i.icon.trash.restore.alternate:before {
+ content: "\f82a";
}
-i.icon.tripadvisor:before {
- content: "\f262";
+i.icon.tree:before {
+ content: "\f1bb";
}
i.icon.trophy:before {
content: "\f091";
@@ -2780,39 +3224,33 @@ i.icon.trophy:before {
i.icon.truck:before {
content: "\f0d1";
}
-i.icon.tty:before {
- content: "\f1e4";
-}
-i.icon.tumblr:before {
- content: "\f173";
-}
-i.icon.tumblr.square:before {
- content: "\f174";
-}
-i.icon.tv:before {
- content: "\f26c";
+i.icon.truck.monster:before {
+ content: "\f63b";
}
-i.icon.twitch:before {
- content: "\f1e8";
+i.icon.truck.moving:before {
+ content: "\f4df";
}
-i.icon.twitter:before {
- content: "\f099";
+i.icon.truck.packing:before {
+ content: "\f4de";
}
-i.icon.twitter.square:before {
- content: "\f081";
+i.icon.truck.pickup:before {
+ content: "\f63c";
}
-i.icon.typo3:before {
- content: "\f42b";
+i.icon.tshirt:before {
+ content: "\f553";
}
-i.icon.uber:before {
- content: "\f402";
+i.icon.tty:before {
+ content: "\f1e4";
}
-i.icon.uikit:before {
- content: "\f403";
+i.icon.tv:before {
+ content: "\f26c";
}
i.icon.umbrella:before {
content: "\f0e9";
}
+i.icon.umbrella.beach:before {
+ content: "\f5ca";
+}
i.icon.underline:before {
content: "\f0cd";
}
@@ -2822,9 +3260,6 @@ i.icon.undo:before {
i.icon.undo.alternate:before {
content: "\f2ea";
}
-i.icon.uniregistry:before {
- content: "\f404";
-}
i.icon.universal.access:before {
content: "\f29a";
}
@@ -2840,38 +3275,86 @@ i.icon.unlock:before {
i.icon.unlock.alternate:before {
content: "\f13e";
}
-i.icon.untappd:before {
- content: "\f405";
-}
i.icon.upload:before {
content: "\f093";
}
-i.icon.usb:before {
- content: "\f287";
-}
i.icon.user:before {
content: "\f007";
}
+i.icon.user.alternate:before {
+ content: "\f406";
+}
+i.icon.user.alternate.slash:before {
+ content: "\f4fa";
+}
+i.icon.user.astronaut:before {
+ content: "\f4fb";
+}
+i.icon.user.check:before {
+ content: "\f4fc";
+}
i.icon.user.circle:before {
content: "\f2bd";
}
+i.icon.user.clock:before {
+ content: "\f4fd";
+}
+i.icon.user.cog:before {
+ content: "\f4fe";
+}
+i.icon.user.edit:before {
+ content: "\f4ff";
+}
+i.icon.user.friends:before {
+ content: "\f500";
+}
+i.icon.user.graduate:before {
+ content: "\f501";
+}
+i.icon.user.injured:before {
+ content: "\f728";
+}
+i.icon.user.lock:before {
+ content: "\f502";
+}
i.icon.user.md:before {
content: "\f0f0";
}
+i.icon.user.minus:before {
+ content: "\f503";
+}
+i.icon.user.ninja:before {
+ content: "\f504";
+}
+i.icon.user.nurse:before {
+ content: "\f82f";
+}
i.icon.user.plus:before {
content: "\f234";
}
i.icon.user.secret:before {
content: "\f21b";
}
+i.icon.user.shield:before {
+ content: "\f505";
+}
+i.icon.user.slash:before {
+ content: "\f506";
+}
+i.icon.user.tag:before {
+ content: "\f507";
+}
+i.icon.user.tie:before {
+ content: "\f508";
+}
i.icon.user.times:before {
content: "\f235";
}
i.icon.users:before {
content: "\f0c0";
}
-i.icon.ussunnah:before {
- content: "\f407";
+i.icon.users.cog:before {
+ content: "\f509";
}
i.icon.utensil.spoon:before {
content: "\f2e5";
@@ -2879,8 +3362,8 @@ i.icon.utensil.spoon:before {
i.icon.utensils:before {
content: "\f2e7";
}
-i.icon.vaadin:before {
- content: "\f408";
+i.icon.vector.square:before {
+ content: "\f5cb";
}
i.icon.venus:before {
content: "\f221";
@@ -2891,38 +3374,23 @@ i.icon.venus.double:before {
i.icon.venus.mars:before {
content: "\f228";
}
-i.icon.viacoin:before {
- content: "\f237";
-}
-i.icon.viadeo:before {
- content: "\f2a9";
-}
-i.icon.viadeo.square:before {
- content: "\f2aa";
+i.icon.vial:before {
+ content: "\f492";
}
-i.icon.viber:before {
- content: "\f409";
+i.icon.vials:before {
+ content: "\f493";
}
i.icon.video:before {
content: "\f03d";
}
-i.icon.vimeo:before {
- content: "\f40a";
-}
-i.icon.vimeo.square:before {
- content: "\f194";
-}
-i.icon.vimeo.v:before {
- content: "\f27d";
-}
-i.icon.vine:before {
- content: "\f1ca";
+i.icon.video.slash:before {
+ content: "\f4e2";
}
-i.icon.vk:before {
- content: "\f189";
+i.icon.vihara:before {
+ content: "\f6a7";
}
-i.icon.vnv:before {
- content: "\f40b";
+i.icon.voicemail:before {
+ content: "\f897";
}
i.icon.volleyball.ball:before {
content: "\f45f";
@@ -2930,44 +3398,50 @@ i.icon.volleyball.ball:before {
i.icon.volume.down:before {
content: "\f027";
}
+i.icon.volume.mute:before {
+ content: "\f6a9";
+}
i.icon.volume.off:before {
content: "\f026";
}
i.icon.volume.up:before {
content: "\f028";
}
-i.icon.vuejs:before {
- content: "\f41f";
+i.icon.vote.yea:before {
+ content: "\f772";
+}
+i.icon.vr.cardboard:before {
+ content: "\f729";
+}
+i.icon.walking:before {
+ content: "\f554";
+}
+i.icon.wallet:before {
+ content: "\f555";
}
i.icon.warehouse:before {
content: "\f494";
}
-i.icon.weibo:before {
- content: "\f18a";
+i.icon.water:before {
+ content: "\f773";
+}
+i.icon.wave.square:before {
+ content: "\f83e";
}
i.icon.weight:before {
content: "\f496";
}
-i.icon.weixin:before {
- content: "\f1d7";
-}
-i.icon.whatsapp:before {
- content: "\f232";
-}
-i.icon.whatsapp.square:before {
- content: "\f40c";
+i.icon.weight.hanging:before {
+ content: "\f5cd";
}
i.icon.wheelchair:before {
content: "\f193";
}
-i.icon.whmcs:before {
- content: "\f40d";
-}
i.icon.wifi:before {
content: "\f1eb";
}
-i.icon.wikipedia.w:before {
- content: "\f266";
+i.icon.wind:before {
+ content: "\f72e";
}
i.icon.window.close:before {
content: "\f410";
@@ -2981,112 +3455,34 @@ i.icon.window.minimize:before {
i.icon.window.restore:before {
content: "\f2d2";
}
-i.icon.windows:before {
- content: "\f17a";
-}
-i.icon.won.sign:before {
- content: "\f159";
-}
-i.icon.wordpress:before {
- content: "\f19a";
-}
-i.icon.wordpress.simple:before {
- content: "\f411";
+i.icon.wine.bottle:before {
+ content: "\f72f";
}
-i.icon.wpbeginner:before {
- content: "\f297";
+i.icon.wine.glass:before {
+ content: "\f4e3";
}
-i.icon.wpexplorer:before {
- content: "\f2de";
+i.icon.wine.glass.alternate:before {
+ content: "\f5ce";
}
-i.icon.wpforms:before {
- content: "\f298";
+i.icon.won.sign:before {
+ content: "\f159";
}
i.icon.wrench:before {
content: "\f0ad";
}
-i.icon.xbox:before {
- content: "\f412";
-}
-i.icon.xing:before {
- content: "\f168";
-}
-i.icon.xing.square:before {
- content: "\f169";
-}
-i.icon.y.combinator:before {
- content: "\f23b";
-}
-i.icon.yahoo:before {
- content: "\f19e";
-}
-i.icon.yandex:before {
- content: "\f413";
-}
-i.icon.yandex.international:before {
- content: "\f414";
-}
-i.icon.yelp:before {
- content: "\f1e9";
+i.icon.x.ray:before {
+ content: "\f497";
}
i.icon.yen.sign:before {
content: "\f157";
}
-i.icon.yoast:before {
- content: "\f2b1";
-}
-i.icon.youtube:before {
- content: "\f167";
-}
-i.icon.youtube.square:before {
- content: "\f431";
+i.icon.yin.yang:before {
+ content: "\f6ad";
}
/* Aliases */
-i.icon.chess.rock:before {
- content: "\f447";
-}
-i.icon.ordered.list:before {
- content: "\f0cb";
-}
-i.icon.unordered.list:before {
- content: "\f0ca";
-}
-i.icon.user.doctor:before {
- content: "\f0f0";
-}
-i.icon.shield:before {
- content: "\f3ed";
-}
-i.icon.puzzle:before {
- content: "\f12e";
-}
-i.icon.credit.card.amazon.pay:before {
- content: "\f42d";
-}
-i.icon.credit.card.american.express:before {
- content: "\f1f3";
-}
-i.icon.credit.card.diners.club:before {
- content: "\f24c";
-}
-i.icon.credit.card.discover:before {
- content: "\f1f2";
-}
-i.icon.credit.card.jcb:before {
- content: "\f24b";
-}
-i.icon.credit.card.mastercard:before {
- content: "\f1f1";
-}
-i.icon.credit.card.paypal:before {
- content: "\f1f4";
-}
-i.icon.credit.card.stripe:before {
- content: "\f1f5";
-}
-i.icon.credit.card.visa:before {
- content: "\f1f0";
+i.icon.add:before {
+ content: "\f067";
}
i.icon.add.circle:before {
content: "\f055";
@@ -3103,30 +3499,18 @@ i.icon.add.to.cart:before {
i.icon.add.user:before {
content: "\f234";
}
-i.icon.add:before {
- content: "\f067";
+i.icon.alarm:before {
+ content: "\f0f3";
}
i.icon.alarm.mute:before {
content: "\f1f6";
}
-i.icon.alarm:before {
- content: "\f0f3";
-}
i.icon.ald:before {
content: "\f2a2";
}
i.icon.als:before {
content: "\f2a2";
}
-i.icon.american.express.card:before {
- content: "\f1f3";
-}
-i.icon.american.express:before {
- content: "\f1f3";
-}
-i.icon.amex:before {
- content: "\f1f3";
-}
i.icon.announcement:before {
content: "\f0a1";
}
@@ -3142,10 +3526,10 @@ i.icon.arrow.down.cart:before {
i.icon.asexual:before {
content: "\f22d";
}
-i.icon.asl.interpreting:before {
+i.icon.asl:before {
content: "\f2a3";
}
-i.icon.asl:before {
+i.icon.asl.interpreting:before {
content: "\f2a3";
}
i.icon.assistive.listening.devices:before {
@@ -3196,21 +3580,18 @@ i.icon.birthday:before {
i.icon.block.layout:before {
content: "\f009";
}
-i.icon.bluetooth.alternative:before {
- content: "\f294";
-}
i.icon.broken.chain:before {
content: "\f127";
}
i.icon.browser:before {
content: "\f022";
}
-i.icon.call.square:before {
- content: "\f098";
-}
i.icon.call:before {
content: "\f095";
}
+i.icon.call.square:before {
+ content: "\f098";
+}
i.icon.cancel:before {
content: "\f00d";
}
@@ -3232,12 +3613,27 @@ i.icon.checked.calendar:before {
i.icon.checkmark:before {
content: "\f00c";
}
+i.icon.checkmark.box:before {
+ content: "\f14a";
+}
+i.icon.chess.rock:before {
+ content: "\f447";
+}
i.icon.circle.notched:before {
content: "\f1ce";
}
+i.icon.circle.thin:before {
+ content: "\f111";
+}
i.icon.close:before {
content: "\f00d";
}
+i.icon.cloud.download:before {
+ content: "\f381";
+}
+i.icon.cloud.upload:before {
+ content: "\f382";
+}
i.icon.cny:before {
content: "\f157";
}
@@ -3247,6 +3643,9 @@ i.icon.cocktail:before {
i.icon.commenting:before {
content: "\f27a";
}
+i.icon.compose:before {
+ content: "\f303";
+}
i.icon.computer:before {
content: "\f108";
}
@@ -3256,33 +3655,39 @@ i.icon.configure:before {
i.icon.content:before {
content: "\f0c9";
}
+i.icon.conversation:before {
+ content: "\f086";
+}
+i.icon.credit.card.alternative:before {
+ content: "\f09d";
+}
+i.icon.currency:before {
+ content: "\f3d1";
+}
+i.icon.dashboard:before {
+ content: "\f3fd";
+}
i.icon.deafness:before {
content: "\f2a4";
}
-i.icon.delete.calendar:before {
- content: "\f273";
-}
i.icon.delete:before {
content: "\f00d";
}
+i.icon.delete.calendar:before {
+ content: "\f273";
+}
i.icon.detective:before {
content: "\f21b";
}
-i.icon.diners.club.card:before {
- content: "\f24c";
-}
-i.icon.diners.club:before {
- content: "\f24c";
-}
-i.icon.discover.card:before {
- content: "\f1f2";
-}
-i.icon.discover:before {
- content: "\f1f2";
+i.icon.diamond:before {
+ content: "\f3a5";
}
i.icon.discussions:before {
content: "\f086";
}
+i.icon.disk:before {
+ content: "\f0a0";
+}
i.icon.doctor:before {
content: "\f0f0";
}
@@ -3292,24 +3697,15 @@ i.icon.dollar:before {
i.icon.dont:before {
content: "\f05e";
}
-i.icon.dribble:before {
- content: "\f17d";
-}
i.icon.drivers.license:before {
content: "\f2c2";
}
i.icon.dropdown:before {
content: "\f0d7";
}
-i.icon.eercast:before {
- content: "\f2da";
-}
i.icon.emergency:before {
content: "\f0f9";
}
-i.icon.envira.gallery:before {
- content: "\f299";
-}
i.icon.erase:before {
content: "\f12d";
}
@@ -3319,12 +3715,21 @@ i.icon.eur:before {
i.icon.euro:before {
content: "\f153";
}
+i.icon.exchange:before {
+ content: "\f362";
+}
+i.icon.external:before {
+ content: "\f35d";
+}
+i.icon.external.share:before {
+ content: "\f14d";
+}
+i.icon.external.square:before {
+ content: "\f360";
+}
i.icon.eyedropper:before {
content: "\f1fb";
}
-i.icon.fa:before {
- content: "\f2b4";
-}
i.icon.factory:before {
content: "\f275";
}
@@ -3346,8 +3751,8 @@ i.icon.find:before {
i.icon.first.aid:before {
content: "\f0fa";
}
-i.icon.five.hundred.pixels:before {
- content: "\f26e";
+i.icon.food:before {
+ content: "\f2e7";
}
i.icon.fork:before {
content: "\f126";
@@ -3361,15 +3766,6 @@ i.icon.gay:before {
i.icon.gbp:before {
content: "\f154";
}
-i.icon.gittip:before {
- content: "\f184";
-}
-i.icon.google.plus.circle:before {
- content: "\f2b3";
-}
-i.icon.google.plus.official:before {
- content: "\f2b3";
-}
i.icon.grab:before {
content: "\f255";
}
@@ -3385,6 +3781,9 @@ i.icon.group:before {
i.icon.h:before {
content: "\f0fd";
}
+i.icon.hamburger:before {
+ content: "\f0c9";
+}
i.icon.hand.victory:before {
content: "\f25b";
}
@@ -3397,12 +3796,15 @@ i.icon.hard.of.hearing:before {
i.icon.header:before {
content: "\f1dc";
}
-i.icon.help.circle:before {
- content: "\f059";
+i.icon.heart.empty:before {
+ content: "\f004";
}
i.icon.help:before {
content: "\f128";
}
+i.icon.help.circle:before {
+ content: "\f059";
+}
i.icon.heterosexual:before {
content: "\f228";
}
@@ -3427,13 +3829,16 @@ i.icon.hourglass.three:before {
i.icon.hourglass.two:before {
content: "\f252";
}
+i.icon.hourglass.zero:before {
+ content: "\f253";
+}
i.icon.idea:before {
content: "\f0eb";
}
i.icon.ils:before {
content: "\f20b";
}
-i.icon.in-cart:before {
+i.icon.in.cart:before {
content: "\f218";
}
i.icon.inr:before {
@@ -3445,15 +3850,6 @@ i.icon.intergender:before {
i.icon.intersex:before {
content: "\f224";
}
-i.icon.japan.credit.bureau.card:before {
- content: "\f24b";
-}
-i.icon.japan.credit.bureau:before {
- content: "\f24b";
-}
-i.icon.jcb:before {
- content: "\f24b";
-}
i.icon.jpy:before {
content: "\f157";
}
@@ -3472,6 +3868,12 @@ i.icon.legal:before {
i.icon.lesbian:before {
content: "\f226";
}
+i.icon.level.down:before {
+ content: "\f3be";
+}
+i.icon.level.up:before {
+ content: "\f3bf";
+}
i.icon.lightning:before {
content: "\f0e7";
}
@@ -3481,9 +3883,6 @@ i.icon.like:before {
i.icon.line.graph:before {
content: "\f201";
}
-i.icon.linkedin.square:before {
- content: "\f08c";
-}
i.icon.linkify:before {
content: "\f0c1";
}
@@ -3493,18 +3892,21 @@ i.icon.lira:before {
i.icon.list.layout:before {
content: "\f00b";
}
+i.icon.log.out:before {
+ content: "\f2f5";
+}
i.icon.magnify:before {
content: "\f00e";
}
+i.icon.mail:before {
+ content: "\f0e0";
+}
i.icon.mail.forward:before {
content: "\f064";
}
i.icon.mail.square:before {
content: "\f199";
}
-i.icon.mail:before {
- content: "\f0e0";
-}
i.icon.male.homosexual:before {
content: "\f227";
}
@@ -3523,53 +3925,47 @@ i.icon.mars.horizontal:before {
i.icon.mars.vertical:before {
content: "\f22a";
}
-i.icon.mastercard.card:before {
- content: "\f1f1";
-}
-i.icon.mastercard:before {
- content: "\f1f1";
-}
-i.icon.microsoft.edge:before {
- content: "\f282";
+i.icon.meanpath:before {
+ content: "\f0c8";
}
i.icon.military:before {
content: "\f0fb";
}
-i.icon.ms.edge:before {
- content: "\f282";
+i.icon.money:before {
+ content: "\f3d1";
+}
+i.icon.move:before {
+ content: "\f0b2";
}
i.icon.mute:before {
content: "\f131";
}
-i.icon.new.pied.piper:before {
- content: "\f2ae";
-}
i.icon.non.binary.transgender:before {
content: "\f223";
}
i.icon.numbered.list:before {
content: "\f0cb";
}
-i.icon.optinmonster:before {
- content: "\f23c";
-}
i.icon.options:before {
content: "\f1de";
}
+i.icon.ordered.list:before {
+ content: "\f0cb";
+}
+i.icon.other.gender:before {
+ content: "\f229";
+}
i.icon.other.gender.horizontal:before {
content: "\f22b";
}
i.icon.other.gender.vertical:before {
content: "\f22a";
}
-i.icon.other.gender:before {
- content: "\f229";
-}
i.icon.payment:before {
content: "\f09d";
}
-i.icon.paypal.card:before {
- content: "\f1f4";
+i.icon.pencil:before {
+ content: "\f303";
}
i.icon.pencil.square:before {
content: "\f14b";
@@ -3586,18 +3982,12 @@ i.icon.pie.chart:before {
i.icon.pie.graph:before {
content: "\f200";
}
-i.icon.pied.piper.hat:before {
- content: "\f2ae";
-}
i.icon.pin:before {
content: "\f08d";
}
i.icon.plus.cart:before {
content: "\f217";
}
-i.icon.pocket:before {
- content: "\f265";
-}
i.icon.point:before {
content: "\f041";
}
@@ -3616,18 +4006,27 @@ i.icon.pointing.up:before {
i.icon.pound:before {
content: "\f154";
}
-i.icon.power.cord:before {
- content: "\f1e6";
-}
i.icon.power:before {
content: "\f011";
}
+i.icon.power.cord:before {
+ content: "\f1e6";
+}
i.icon.privacy:before {
content: "\f084";
}
+i.icon.protect:before {
+ content: "\f023";
+}
+i.icon.puzzle:before {
+ content: "\f12e";
+}
i.icon.r.circle:before {
content: "\f25d";
}
+i.icon.radio:before {
+ content: "\f192";
+}
i.icon.rain:before {
content: "\f0e9";
}
@@ -3637,6 +4036,12 @@ i.icon.record:before {
i.icon.refresh:before {
content: "\f021";
}
+i.icon.remove:before {
+ content: "\f00d";
+}
+i.icon.remove.bookmark:before {
+ content: "\f02e";
+}
i.icon.remove.circle:before {
content: "\f057";
}
@@ -3646,12 +4051,15 @@ i.icon.remove.from.calendar:before {
i.icon.remove.user:before {
content: "\f235";
}
-i.icon.remove:before {
- content: "\f00d";
-}
i.icon.repeat:before {
content: "\f01e";
}
+i.icon.resize.horizontal:before {
+ content: "\f337";
+}
+i.icon.resize.vertical:before {
+ content: "\f338";
+}
i.icon.rmb:before {
content: "\f157";
}
@@ -3688,6 +4096,9 @@ i.icon.shekel:before {
i.icon.sheqel:before {
content: "\f20b";
}
+i.icon.shield:before {
+ content: "\f3ed";
+}
i.icon.shipping:before {
content: "\f0d1";
}
@@ -3703,6 +4114,12 @@ i.icon.shutdown:before {
i.icon.sidebar:before {
content: "\f0c9";
}
+i.icon.sign.in:before {
+ content: "\f2f6";
+}
+i.icon.sign.out:before {
+ content: "\f2f5";
+}
i.icon.signing:before {
content: "\f2a7";
}
@@ -3742,11 +4159,20 @@ i.icon.sort.numeric.descending:before {
i.icon.sound:before {
content: "\f025";
}
+i.icon.spoon:before {
+ content: "\f2e5";
+}
i.icon.spy:before {
content: "\f21b";
}
-i.icon.stripe.card:before {
- content: "\f1f5";
+i.icon.star.empty:before {
+ content: "\f005";
+}
+i.icon.star.half.empty:before {
+ content: "\f089";
+}
+i.icon.star.half.full:before {
+ content: "\f089";
}
i.icon.student:before {
content: "\f19d";
@@ -3769,9 +4195,6 @@ i.icon.text.cursor:before {
i.icon.text.telephone:before {
content: "\f1e4";
}
-i.icon.theme.isle:before {
- content: "\f2b2";
-}
i.icon.theme:before {
content: "\f043";
}
@@ -3781,9 +4204,15 @@ i.icon.thermometer:before {
i.icon.thumb.tack:before {
content: "\f08d";
}
+i.icon.ticket:before {
+ content: "\f3ff";
+}
i.icon.time:before {
content: "\f017";
}
+i.icon.times.rectangle:before {
+ content: "\f410";
+}
i.icon.tm:before {
content: "\f25c";
}
@@ -3832,6 +4261,9 @@ i.icon.unlinkify:before {
i.icon.unmute:before {
content: "\f130";
}
+i.icon.unordered.list:before {
+ content: "\f0ca";
+}
i.icon.usd:before {
content: "\f155";
}
@@ -3844,6 +4276,9 @@ i.icon.user.close:before {
i.icon.user.delete:before {
content: "\f235";
}
+i.icon.user.doctor:before {
+ content: "\f0f0";
+}
i.icon.user.x:before {
content: "\f235";
}
@@ -3856,35 +4291,23 @@ i.icon.video.camera:before {
i.icon.video.play:before {
content: "\f144";
}
-i.icon.visa.card:before {
- content: "\f1f0";
-}
-i.icon.visa:before {
- content: "\f1f0";
-}
i.icon.volume.control.phone:before {
content: "\f2a0";
}
i.icon.wait:before {
content: "\f017";
}
+i.icon.warning:before {
+ content: "\f12a";
+}
i.icon.warning.circle:before {
content: "\f06a";
}
i.icon.warning.sign:before {
content: "\f071";
}
-i.icon.warning:before {
- content: "\f12a";
-}
-i.icon.wechat:before {
- content: "\f1d7";
-}
-i.icon.wi-fi:before {
- content: "\f1eb";
-}
-i.icon.wikipedia:before {
- content: "\f266";
+i.icon.wi.fi:before {
+ content: "\f1eb";
}
i.icon.winner:before {
content: "\f091";
@@ -3898,166 +4321,37 @@ i.icon.woman:before {
i.icon.won:before {
content: "\f159";
}
-i.icon.wordpress.beginner:before {
- content: "\f297";
-}
-i.icon.wordpress.forms:before {
- content: "\f298";
-}
i.icon.world:before {
content: "\f0ac";
}
+i.icon.write:before {
+ content: "\f303";
+}
i.icon.write.square:before {
content: "\f14b";
}
i.icon.x:before {
content: "\f00d";
}
-i.icon.yc:before {
- content: "\f23b";
-}
-i.icon.ycombinator:before {
- content: "\f23b";
-}
i.icon.yen:before {
content: "\f157";
}
i.icon.zip:before {
content: "\f187";
}
-i.icon.zoom-in:before {
- content: "\f00e";
-}
-i.icon.zoom-out:before {
- content: "\f010";
-}
i.icon.zoom:before {
content: "\f00e";
}
-i.icon.bitbucket.square:before {
- content: "\f171";
-}
-i.icon.checkmark.box:before {
- content: "\f14a";
-}
-i.icon.circle.thin:before {
- content: "\f111";
-}
-i.icon.cloud.download:before {
- content: "\f381";
-}
-i.icon.cloud.upload:before {
- content: "\f382";
-}
-i.icon.compose:before {
- content: "\f303";
-}
-i.icon.conversation:before {
- content: "\f086";
-}
-i.icon.credit.card.alternative:before {
- content: "\f09d";
-}
-i.icon.currency:before {
- content: "\f3d1";
-}
-i.icon.dashboard:before {
- content: "\f3fd";
-}
-i.icon.diamond:before {
- content: "\f3a5";
-}
-i.icon.disk:before {
- content: "\f0a0";
-}
-i.icon.exchange:before {
- content: "\f362";
-}
-i.icon.external.share:before {
- content: "\f14d";
-}
-i.icon.external.square:before {
- content: "\f360";
-}
-i.icon.external:before {
- content: "\f35d";
-}
-i.icon.facebook.official:before {
- content: "\f082";
-}
-i.icon.food:before {
- content: "\f2e7";
-}
-i.icon.hourglass.zero:before {
- content: "\f253";
-}
-i.icon.level.down:before {
- content: "\f3be";
-}
-i.icon.level.up:before {
- content: "\f3bf";
-}
-i.icon.logout:before {
- content: "\f2f5";
-}
-i.icon.meanpath:before {
- content: "\f0c8";
-}
-i.icon.money:before {
- content: "\f3d1";
-}
-i.icon.move:before {
- content: "\f0b2";
-}
-i.icon.pencil:before {
- content: "\f303";
-}
-i.icon.protect:before {
- content: "\f023";
-}
-i.icon.radio:before {
- content: "\f192";
-}
-i.icon.remove.bookmark:before {
- content: "\f02e";
-}
-i.icon.resize.horizontal:before {
- content: "\f337";
-}
-i.icon.resize.vertical:before {
- content: "\f338";
-}
-i.icon.sign-in:before {
- content: "\f2f6";
-}
-i.icon.sign-out:before {
- content: "\f2f5";
-}
-i.icon.spoon:before {
- content: "\f2e5";
-}
-i.icon.star.half.empty:before {
- content: "\f089";
-}
-i.icon.star.half.full:before {
- content: "\f089";
-}
-i.icon.ticket:before {
- content: "\f3ff";
-}
-i.icon.times.rectangle:before {
- content: "\f410";
-}
-i.icon.write:before {
- content: "\f303";
+i.icon.zoom.in:before {
+ content: "\f00e";
}
-i.icon.youtube.play:before {
- content: "\f167";
+i.icon.zoom.out:before {
+ content: "\f010";
}
/*******************************
- Outline Icons
+ Outline Icons
*******************************/
@@ -4078,13 +4372,16 @@ i.icon.outline {
font-family: 'outline-icons';
}
-/* Icon Definitions */
+/* Icons */
i.icon.address.book.outline:before {
content: "\f2b9";
}
i.icon.address.card.outline:before {
content: "\f2bb";
}
+i.icon.angry.outline:before {
+ content: "\f556";
+}
i.icon.arrow.alternate.circle.down.outline:before {
content: "\f358";
}
@@ -4109,9 +4406,6 @@ i.icon.bookmark.outline:before {
i.icon.building.outline:before {
content: "\f1ad";
}
-i.icon.calendar.outline:before {
- content: "\f133";
-}
i.icon.calendar.alternate.outline:before {
content: "\f073";
}
@@ -4121,6 +4415,9 @@ i.icon.calendar.check.outline:before {
i.icon.calendar.minus.outline:before {
content: "\f272";
}
+i.icon.calendar.outline:before {
+ content: "\f133";
+}
i.icon.calendar.plus.outline:before {
content: "\f271";
}
@@ -4163,12 +4460,15 @@ i.icon.clone.outline:before {
i.icon.closed.captioning.outline:before {
content: "\f20a";
}
-i.icon.comment.outline:before {
- content: "\f075";
-}
i.icon.comment.alternate.outline:before {
content: "\f27a";
}
+i.icon.comment.dots.outline:before {
+ content: "\f4ad";
+}
+i.icon.comment.outline:before {
+ content: "\f075";
+}
i.icon.comments.outline:before {
content: "\f086";
}
@@ -4184,24 +4484,27 @@ i.icon.copyright.outline:before {
i.icon.credit.card.outline:before {
content: "\f09d";
}
+i.icon.dizzy.outline:before {
+ content: "\f567";
+}
i.icon.dot.circle.outline:before {
content: "\f192";
}
i.icon.edit.outline:before {
content: "\f044";
}
+i.icon.envelope.open.outline:before {
+ content: "\f2b6";
+}
i.icon.envelope.outline:before {
content: "\f0e0";
}
-i.icon.envelope.open.outline:before {
- content: "\f2b6";
+i.icon.eye.outline:before {
+ content: "\f06e";
}
i.icon.eye.slash.outline:before {
content: "\f070";
}
-i.icon.file.outline:before {
- content: "\f15b";
-}
i.icon.file.alternate.outline:before {
content: "\f15c";
}
@@ -4220,6 +4523,9 @@ i.icon.file.excel.outline:before {
i.icon.file.image.outline:before {
content: "\f1c5";
}
+i.icon.file.outline:before {
+ content: "\f15b";
+}
i.icon.file.pdf.outline:before {
content: "\f1c1";
}
@@ -4235,12 +4541,18 @@ i.icon.file.word.outline:before {
i.icon.flag.outline:before {
content: "\f024";
}
-i.icon.folder.outline:before {
- content: "\f07b";
+i.icon.flushed.outline:before {
+ content: "\f579";
}
i.icon.folder.open.outline:before {
content: "\f07c";
}
+i.icon.folder.outline:before {
+ content: "\f07b";
+}
+i.icon.frown.open.outline:before {
+ content: "\f57a";
+}
i.icon.frown.outline:before {
content: "\f119";
}
@@ -4250,6 +4562,48 @@ i.icon.futbol.outline:before {
i.icon.gem.outline:before {
content: "\f3a5";
}
+i.icon.grimace.outline:before {
+ content: "\f57f";
+}
+i.icon.grin.alternate.outline:before {
+ content: "\f581";
+}
+i.icon.grin.beam.outline:before {
+ content: "\f582";
+}
+i.icon.grin.beam.sweat.outline:before {
+ content: "\f583";
+}
+i.icon.grin.hearts.outline:before {
+ content: "\f584";
+}
+i.icon.grin.outline:before {
+ content: "\f580";
+}
+i.icon.grin.squint.outline:before {
+ content: "\f585";
+}
+i.icon.grin.squint.tears.outline:before {
+ content: "\f586";
+}
+i.icon.grin.stars.outline:before {
+ content: "\f587";
+}
+i.icon.grin.tears.outline:before {
+ content: "\f588";
+}
+i.icon.grin.tongue.outline:before {
+ content: "\f589";
+}
+i.icon.grin.tongue.squint.outline:before {
+ content: "\f58a";
+}
+i.icon.grin.tongue.wink.outline:before {
+ content: "\f58b";
+}
+i.icon.grin.wink.outline:before {
+ content: "\f58c";
+}
i.icon.hand.lizard.outline:before {
content: "\f258";
}
@@ -4313,6 +4667,27 @@ i.icon.images.outline:before {
i.icon.keyboard.outline:before {
content: "\f11c";
}
+i.icon.kiss.beam.outline:before {
+ content: "\f597";
+}
+i.icon.kiss.outline:before {
+ content: "\f596";
+}
+i.icon.kiss.wink.heart.outline:before {
+ content: "\f598";
+}
+i.icon.laugh.beam.outline:before {
+ content: "\f59a";
+}
+i.icon.laugh.outline:before {
+ content: "\f599";
+}
+i.icon.laugh.squint.outline:before {
+ content: "\f59b";
+}
+i.icon.laugh.wink.outline:before {
+ content: "\f59c";
+}
i.icon.lemon.outline:before {
content: "\f094";
}
@@ -4328,9 +4703,15 @@ i.icon.list.alternate.outline:before {
i.icon.map.outline:before {
content: "\f279";
}
+i.icon.meh.blank.outline:before {
+ content: "\f5a4";
+}
i.icon.meh.outline:before {
content: "\f11a";
}
+i.icon.meh.rolling.eyes.outline:before {
+ content: "\f5a5";
+}
i.icon.minus.square.outline:before {
content: "\f146";
}
@@ -4367,27 +4748,39 @@ i.icon.question.circle.outline:before {
i.icon.registered.outline:before {
content: "\f25d";
}
+i.icon.sad.cry.outline:before {
+ content: "\f5b3";
+}
+i.icon.sad.tear.outline:before {
+ content: "\f5b4";
+}
i.icon.save.outline:before {
content: "\f0c7";
}
i.icon.share.square.outline:before {
content: "\f14d";
}
+i.icon.smile.beam.outline:before {
+ content: "\f5b8";
+}
i.icon.smile.outline:before {
content: "\f118";
}
+i.icon.smile.wink.outline:before {
+ content: "\f4da";
+}
i.icon.snowflake.outline:before {
content: "\f2dc";
}
i.icon.square.outline:before {
content: "\f0c8";
}
-i.icon.star.outline:before {
- content: "\f005";
-}
i.icon.star.half.outline:before {
content: "\f089";
}
+i.icon.star.outline:before {
+ content: "\f005";
+}
i.icon.sticky.note.outline:before {
content: "\f249";
}
@@ -4397,6 +4790,9 @@ i.icon.stop.circle.outline:before {
i.icon.sun.outline:before {
content: "\f185";
}
+i.icon.surprise.outline:before {
+ content: "\f5c2";
+}
i.icon.thumbs.down.outline:before {
content: "\f165";
}
@@ -4406,15 +4802,18 @@ i.icon.thumbs.up.outline:before {
i.icon.times.circle.outline:before {
content: "\f057";
}
+i.icon.tired.outline:before {
+ content: "\f5c8";
+}
i.icon.trash.alternate.outline:before {
content: "\f2ed";
}
-i.icon.user.outline:before {
- content: "\f007";
-}
i.icon.user.circle.outline:before {
content: "\f2bd";
}
+i.icon.user.outline:before {
+ content: "\f007";
+}
i.icon.window.close.outline:before {
content: "\f410";
}
@@ -4427,25 +4826,10 @@ i.icon.window.minimize.outline:before {
i.icon.window.restore.outline:before {
content: "\f2d2";
}
-i.icon.disk.outline:before {
- content: "\f369";
-}
-
-/* Outline Aliases */
-i.icon.heart.empty,
-i.icon.star.empty {
- font-family: 'outline-icons';
-}
-i.icon.heart.empty:before {
- content: "\f004";
-}
-i.icon.star.empty:before {
- content: "\f089";
-}
/*******************************
- Brand Icons
+ Brand Icons
*******************************/
@@ -4461,343 +4845,1969 @@ i.icon.star.empty:before {
text-transform: none;
}
-/* Brand Icon Font Family */
-i.icon.\35 00px,
-i.icon.accessible.icon,
-i.icon.accusoft,
-i.icon.adn,
-i.icon.adversal,
-i.icon.affiliatetheme,
-i.icon.algolia,
-i.icon.amazon,
-i.icon.amazon.pay,
-i.icon.amilia,
-i.icon.android,
-i.icon.angellist,
-i.icon.angrycreative,
-i.icon.angular,
-i.icon.app.store,
-i.icon.app.store.ios,
-i.icon.apper,
-i.icon.apple,
-i.icon.apple.pay,
-i.icon.asymmetrik,
-i.icon.audible,
-i.icon.autoprefixer,
-i.icon.avianex,
-i.icon.aviato,
-i.icon.aws,
-i.icon.bandcamp,
-i.icon.behance,
-i.icon.behance.square,
-i.icon.bimobject,
-i.icon.bitbucket,
-i.icon.bitcoin,
-i.icon.bity,
-i.icon.black.tie,
-i.icon.blackberry,
-i.icon.blogger,
-i.icon.blogger.b,
-i.icon.bluetooth,
-i.icon.bluetooth.b,
-i.icon.btc,
-i.icon.buromobelexperte,
-i.icon.buysellads,
-i.icon.cc.amazon.pay,
-i.icon.cc.amex,
-i.icon.cc.apple.pay,
-i.icon.cc.diners.club,
-i.icon.cc.discover,
-i.icon.cc.jcb,
-i.icon.cc.mastercard,
-i.icon.cc.paypal,
-i.icon.cc.stripe,
-i.icon.cc.visa,
-i.icon.centercode,
-i.icon.chrome,
-i.icon.cloudscale,
-i.icon.cloudsmith,
-i.icon.cloudversify,
-i.icon.codepen,
-i.icon.codiepie,
-i.icon.connectdevelop,
-i.icon.contao,
-i.icon.cpanel,
-i.icon.creative.commons,
-i.icon.css3,
-i.icon.css3.alternate,
-i.icon.cuttlefish,
-i.icon.d.and.d,
-i.icon.dashcube,
-i.icon.delicious,
-i.icon.deploydog,
-i.icon.deskpro,
-i.icon.deviantart,
-i.icon.digg,
-i.icon.digital.ocean,
-i.icon.discord,
-i.icon.discourse,
-i.icon.dochub,
-i.icon.docker,
-i.icon.draft2digital,
-i.icon.dribbble,
-i.icon.dribbble.square,
-i.icon.dropbox,
-i.icon.drupal,
-i.icon.dyalog,
-i.icon.earlybirds,
-i.icon.edge,
-i.icon.elementor,
-i.icon.ember,
-i.icon.empire,
-i.icon.envira,
-i.icon.erlang,
-i.icon.ethereum,
-i.icon.etsy,
-i.icon.expeditedssl,
-i.icon.facebook,
-i.icon.facebook.f,
-i.icon.facebook.messenger,
-i.icon.facebook.square,
-i.icon.firefox,
-i.icon.first.order,
-i.icon.firstdraft,
-i.icon.flickr,
-i.icon.flipboard,
-i.icon.fly,
-i.icon.font.awesome,
-i.icon.font.awesome.alternate,
-i.icon.font.awesome.flag,
-i.icon.fonticons,
-i.icon.fonticons.fi,
-i.icon.fort.awesome,
-i.icon.fort.awesome.alternate,
-i.icon.forumbee,
-i.icon.foursquare,
-i.icon.free.code.camp,
-i.icon.freebsd,
-i.icon.get.pocket,
-i.icon.gg,
-i.icon.gg.circle,
-i.icon.git,
-i.icon.git.square,
-i.icon.github,
-i.icon.github.alternate,
-i.icon.github.square,
-i.icon.gitkraken,
-i.icon.gitlab,
-i.icon.gitter,
-i.icon.glide,
-i.icon.glide.g,
-i.icon.gofore,
-i.icon.goodreads,
-i.icon.goodreads.g,
-i.icon.google,
-i.icon.google.drive,
-i.icon.google.play,
-i.icon.google.plus,
-i.icon.google.plus.g,
-i.icon.google.plus.square,
-i.icon.google.wallet,
-i.icon.gratipay,
-i.icon.grav,
-i.icon.gripfire,
-i.icon.grunt,
-i.icon.gulp,
-i.icon.hacker.news,
-i.icon.hacker.news.square,
-i.icon.hips,
-i.icon.hire.a.helper,
-i.icon.hooli,
-i.icon.hotjar,
-i.icon.houzz,
-i.icon.html5,
-i.icon.hubspot,
-i.icon.imdb,
-i.icon.instagram,
-i.icon.internet.explorer,
-i.icon.ioxhost,
-i.icon.itunes,
-i.icon.itunes.note,
-i.icon.jenkins,
-i.icon.joget,
-i.icon.joomla,
-i.icon.js,
-i.icon.js.square,
-i.icon.jsfiddle,
-i.icon.keycdn,
-i.icon.kickstarter,
-i.icon.kickstarter.k,
-i.icon.korvue,
-i.icon.laravel,
-i.icon.lastfm,
-i.icon.lastfm.square,
-i.icon.leanpub,
-i.icon.less,
-i.icon.linechat,
-i.icon.linkedin,
-i.icon.linkedin.alternate,
-i.icon.linkedin.in,
-i.icon.linode,
-i.icon.linux,
-i.icon.lyft,
-i.icon.magento,
-i.icon.maxcdn,
-i.icon.medapps,
-i.icon.medium,
-i.icon.medium.m,
-i.icon.medrt,
-i.icon.meetup,
-i.icon.microsoft,
-i.icon.mix,
-i.icon.mixcloud,
-i.icon.mizuni,
-i.icon.modx,
-i.icon.monero,
-i.icon.napster,
-i.icon.nintendo.switch,
-i.icon.node,
-i.icon.node.js,
-i.icon.npm,
-i.icon.ns8,
-i.icon.nutritionix,
-i.icon.odnoklassniki,
-i.icon.odnoklassniki.square,
-i.icon.opencart,
-i.icon.openid,
-i.icon.opera,
-i.icon.optin.monster,
-i.icon.osi,
-i.icon.page4,
-i.icon.pagelines,
-i.icon.palfed,
-i.icon.patreon,
-i.icon.paypal,
-i.icon.periscope,
-i.icon.phabricator,
-i.icon.phoenix.framework,
-i.icon.php,
-i.icon.pied.piper,
-i.icon.pied.piper.alternate,
-i.icon.pied.piper.pp,
-i.icon.pinterest,
-i.icon.pinterest.p,
-i.icon.pinterest.square,
-i.icon.playstation,
-i.icon.product.hunt,
-i.icon.pushed,
-i.icon.python,
-i.icon.qq,
-i.icon.quinscape,
-i.icon.quora,
-i.icon.ravelry,
-i.icon.react,
-i.icon.rebel,
-i.icon.redriver,
-i.icon.reddit,
-i.icon.reddit.alien,
-i.icon.reddit.square,
-i.icon.rendact,
-i.icon.renren,
-i.icon.replyd,
-i.icon.resolving,
-i.icon.rocketchat,
-i.icon.rockrms,
-i.icon.safari,
-i.icon.sass,
-i.icon.schlix,
-i.icon.scribd,
-i.icon.searchengin,
-i.icon.sellcast,
-i.icon.sellsy,
-i.icon.servicestack,
-i.icon.shirtsinbulk,
-i.icon.simplybuilt,
-i.icon.sistrix,
-i.icon.skyatlas,
-i.icon.skype,
-i.icon.slack,
-i.icon.slack.hash,
-i.icon.slideshare,
-i.icon.snapchat,
-i.icon.snapchat.ghost,
-i.icon.snapchat.square,
-i.icon.soundcloud,
-i.icon.speakap,
-i.icon.spotify,
-i.icon.stack.exchange,
-i.icon.stack.overflow,
-i.icon.staylinked,
-i.icon.steam,
-i.icon.steam.square,
-i.icon.steam.symbol,
-i.icon.sticker.mule,
-i.icon.strava,
-i.icon.stripe,
-i.icon.stripe.s,
-i.icon.studiovinari,
-i.icon.stumbleupon,
-i.icon.stumbleupon.circle,
-i.icon.superpowers,
-i.icon.supple,
-i.icon.telegram,
-i.icon.telegram.plane,
-i.icon.tencent.weibo,
-i.icon.themeisle,
-i.icon.trello,
-i.icon.tripadvisor,
-i.icon.tumblr,
-i.icon.tumblr.square,
-i.icon.twitch,
-i.icon.twitter,
-i.icon.twitter.square,
-i.icon.typo3,
-i.icon.uber,
-i.icon.uikit,
-i.icon.uniregistry,
-i.icon.untappd,
-i.icon.usb,
-i.icon.ussunnah,
-i.icon.vaadin,
-i.icon.viacoin,
-i.icon.viadeo,
-i.icon.viadeo.square,
-i.icon.viber,
-i.icon.vimeo,
-i.icon.vimeo.square,
-i.icon.vimeo.v,
-i.icon.vine,
-i.icon.vk,
-i.icon.vnv,
-i.icon.vuejs,
-i.icon.wechat,
-i.icon.weibo,
-i.icon.weixin,
-i.icon.whatsapp,
-i.icon.whatsapp.square,
-i.icon.whmcs,
-i.icon.wikipedia.w,
-i.icon.windows,
-i.icon.wordpress,
-i.icon.wordpress.simple,
-i.icon.wpbeginner,
-i.icon.wpexplorer,
-i.icon.wpforms,
-i.icon.xbox,
-i.icon.xing,
-i.icon.xing.square,
-i.icon.y.combinator,
-i.icon.yahoo,
-i.icon.yandex,
-i.icon.yandex.international,
-i.icon.yelp,
-i.icon.yoast,
-i.icon.youtube,
-i.icon.youtube.square {
+/* Icons */
+i.icon.\35 00px:before {
+ content: "\f26e";
+ font-family: 'brand-icons';
+}
+i.icon.accessible:before {
+ content: "\f368";
+ font-family: 'brand-icons';
+}
+i.icon.accusoft:before {
+ content: "\f369";
+ font-family: 'brand-icons';
+}
+i.icon.acquisitions.incorporated:before {
+ content: "\f6af";
+ font-family: 'brand-icons';
+}
+i.icon.adn:before {
+ content: "\f170";
+ font-family: 'brand-icons';
+}
+i.icon.adobe:before {
+ content: "\f778";
+ font-family: 'brand-icons';
+}
+i.icon.adversal:before {
+ content: "\f36a";
+ font-family: 'brand-icons';
+}
+i.icon.affiliatetheme:before {
+ content: "\f36b";
+ font-family: 'brand-icons';
+}
+i.icon.airbnb:before {
+ content: "\f834";
+ font-family: 'brand-icons';
+}
+i.icon.algolia:before {
+ content: "\f36c";
+ font-family: 'brand-icons';
+}
+i.icon.alipay:before {
+ content: "\f642";
+ font-family: 'brand-icons';
+}
+i.icon.amazon:before {
+ content: "\f270";
+ font-family: 'brand-icons';
+}
+i.icon.amazon.pay:before {
+ content: "\f42c";
+ font-family: 'brand-icons';
+}
+i.icon.amilia:before {
+ content: "\f36d";
+ font-family: 'brand-icons';
+}
+i.icon.android:before {
+ content: "\f17b";
+ font-family: 'brand-icons';
+}
+i.icon.angellist:before {
+ content: "\f209";
+ font-family: 'brand-icons';
+}
+i.icon.angrycreative:before {
+ content: "\f36e";
+ font-family: 'brand-icons';
+}
+i.icon.angular:before {
+ content: "\f420";
+ font-family: 'brand-icons';
+}
+i.icon.app.store:before {
+ content: "\f36f";
+ font-family: 'brand-icons';
+}
+i.icon.app.store.ios:before {
+ content: "\f370";
+ font-family: 'brand-icons';
+}
+i.icon.apper:before {
+ content: "\f371";
+ font-family: 'brand-icons';
+}
+i.icon.apple:before {
+ content: "\f179";
+ font-family: 'brand-icons';
+}
+i.icon.apple.pay:before {
+ content: "\f415";
+ font-family: 'brand-icons';
+}
+i.icon.artstation:before {
+ content: "\f77a";
+ font-family: 'brand-icons';
+}
+i.icon.asymmetrik:before {
+ content: "\f372";
+ font-family: 'brand-icons';
+}
+i.icon.atlassian:before {
+ content: "\f77b";
+ font-family: 'brand-icons';
+}
+i.icon.audible:before {
+ content: "\f373";
+ font-family: 'brand-icons';
+}
+i.icon.autoprefixer:before {
+ content: "\f41c";
+ font-family: 'brand-icons';
+}
+i.icon.avianex:before {
+ content: "\f374";
+ font-family: 'brand-icons';
+}
+i.icon.aviato:before {
+ content: "\f421";
+ font-family: 'brand-icons';
+}
+i.icon.aws:before {
+ content: "\f375";
+ font-family: 'brand-icons';
+}
+i.icon.bandcamp:before {
+ content: "\f2d5";
+ font-family: 'brand-icons';
+}
+i.icon.battle.net:before {
+ content: "\f835";
+ font-family: 'brand-icons';
+}
+i.icon.behance:before {
+ content: "\f1b4";
+ font-family: 'brand-icons';
+}
+i.icon.behance.square:before {
+ content: "\f1b5";
+ font-family: 'brand-icons';
+}
+i.icon.bimobject:before {
+ content: "\f378";
+ font-family: 'brand-icons';
+}
+i.icon.bitbucket:before {
+ content: "\f171";
+ font-family: 'brand-icons';
+}
+i.icon.bitcoin:before {
+ content: "\f379";
+ font-family: 'brand-icons';
+}
+i.icon.bity:before {
+ content: "\f37a";
+ font-family: 'brand-icons';
+}
+i.icon.black.tie:before {
+ content: "\f27e";
+ font-family: 'brand-icons';
+}
+i.icon.blackberry:before {
+ content: "\f37b";
+ font-family: 'brand-icons';
+}
+i.icon.blogger:before {
+ content: "\f37c";
+ font-family: 'brand-icons';
+}
+i.icon.blogger.b:before {
+ content: "\f37d";
+ font-family: 'brand-icons';
+}
+i.icon.bluetooth:before {
+ content: "\f293";
+ font-family: 'brand-icons';
+}
+i.icon.bluetooth.b:before {
+ content: "\f294";
+ font-family: 'brand-icons';
+}
+i.icon.bootstrap:before {
+ content: "\f836";
+ font-family: 'brand-icons';
+}
+i.icon.btc:before {
+ content: "\f15a";
+ font-family: 'brand-icons';
+}
+i.icon.buffer:before {
+ content: "\f837";
+ font-family: 'brand-icons';
+}
+i.icon.buromobelexperte:before {
+ content: "\f37f";
+ font-family: 'brand-icons';
+}
+i.icon.buy.n.large:before {
+ content: "\f8a6";
+ font-family: 'brand-icons';
+}
+i.icon.buysellads:before {
+ content: "\f20d";
+ font-family: 'brand-icons';
+}
+i.icon.canadian.maple.leaf:before {
+ content: "\f785";
+ font-family: 'brand-icons';
+}
+i.icon.cc.amazon.pay:before {
+ content: "\f42d";
+ font-family: 'brand-icons';
+}
+i.icon.cc.amex:before {
+ content: "\f1f3";
+ font-family: 'brand-icons';
+}
+i.icon.cc.apple.pay:before {
+ content: "\f416";
+ font-family: 'brand-icons';
+}
+i.icon.cc.diners.club:before {
+ content: "\f24c";
+ font-family: 'brand-icons';
+}
+i.icon.cc.discover:before {
+ content: "\f1f2";
+ font-family: 'brand-icons';
+}
+i.icon.cc.jcb:before {
+ content: "\f24b";
+ font-family: 'brand-icons';
+}
+i.icon.cc.mastercard:before {
+ content: "\f1f1";
+ font-family: 'brand-icons';
+}
+i.icon.cc.paypal:before {
+ content: "\f1f4";
+ font-family: 'brand-icons';
+}
+i.icon.cc.stripe:before {
+ content: "\f1f5";
+ font-family: 'brand-icons';
+}
+i.icon.cc.visa:before {
+ content: "\f1f0";
+ font-family: 'brand-icons';
+}
+i.icon.centercode:before {
+ content: "\f380";
+ font-family: 'brand-icons';
+}
+i.icon.centos:before {
+ content: "\f789";
+ font-family: 'brand-icons';
+}
+i.icon.chrome:before {
+ content: "\f268";
+ font-family: 'brand-icons';
+}
+i.icon.chromecast:before {
+ content: "\f838";
+ font-family: 'brand-icons';
+}
+i.icon.cloudscale:before {
+ content: "\f383";
+ font-family: 'brand-icons';
+}
+i.icon.cloudsmith:before {
+ content: "\f384";
+ font-family: 'brand-icons';
+}
+i.icon.cloudversify:before {
+ content: "\f385";
+ font-family: 'brand-icons';
+}
+i.icon.codepen:before {
+ content: "\f1cb";
+ font-family: 'brand-icons';
+}
+i.icon.codiepie:before {
+ content: "\f284";
+ font-family: 'brand-icons';
+}
+i.icon.confluence:before {
+ content: "\f78d";
+ font-family: 'brand-icons';
+}
+i.icon.connectdevelop:before {
+ content: "\f20e";
+ font-family: 'brand-icons';
+}
+i.icon.contao:before {
+ content: "\f26d";
+ font-family: 'brand-icons';
+}
+i.icon.cotton.bureau:before {
+ content: "\f89e";
+ font-family: 'brand-icons';
+}
+i.icon.cpanel:before {
+ content: "\f388";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons:before {
+ content: "\f25e";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.by:before {
+ content: "\f4e7";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.nc:before {
+ content: "\f4e8";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.nc.eu:before {
+ content: "\f4e9";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.nc.jp:before {
+ content: "\f4ea";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.nd:before {
+ content: "\f4eb";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.pd:before {
+ content: "\f4ec";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.pd.alternate:before {
+ content: "\f4ed";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.remix:before {
+ content: "\f4ee";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.sa:before {
+ content: "\f4ef";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.sampling:before {
+ content: "\f4f0";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.sampling.plus:before {
+ content: "\f4f1";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.share:before {
+ content: "\f4f2";
+ font-family: 'brand-icons';
+}
+i.icon.creative.commons.zero:before {
+ content: "\f4f3";
+ font-family: 'brand-icons';
+}
+i.icon.critical.role:before {
+ content: "\f6c9";
+ font-family: 'brand-icons';
+}
+i.icon.css3:before {
+ content: "\f13c";
+ font-family: 'brand-icons';
+}
+i.icon.css3.alternate:before {
+ content: "\f38b";
+ font-family: 'brand-icons';
+}
+i.icon.cuttlefish:before {
+ content: "\f38c";
+ font-family: 'brand-icons';
+}
+i.icon.d.and.d:before {
+ content: "\f38d";
+ font-family: 'brand-icons';
+}
+i.icon.d.and.d.beyond:before {
+ content: "\f6ca";
+ font-family: 'brand-icons';
+}
+i.icon.dashcube:before {
+ content: "\f210";
+ font-family: 'brand-icons';
+}
+i.icon.delicious:before {
+ content: "\f1a5";
+ font-family: 'brand-icons';
+}
+i.icon.deploydog:before {
+ content: "\f38e";
+ font-family: 'brand-icons';
+}
+i.icon.deskpro:before {
+ content: "\f38f";
+ font-family: 'brand-icons';
+}
+i.icon.dev:before {
+ content: "\f6cc";
+ font-family: 'brand-icons';
+}
+i.icon.deviantart:before {
+ content: "\f1bd";
+ font-family: 'brand-icons';
+}
+i.icon.dhl:before {
+ content: "\f790";
+ font-family: 'brand-icons';
+}
+i.icon.diaspora:before {
+ content: "\f791";
+ font-family: 'brand-icons';
+}
+i.icon.digg:before {
+ content: "\f1a6";
+ font-family: 'brand-icons';
+}
+i.icon.digital.ocean:before {
+ content: "\f391";
+ font-family: 'brand-icons';
+}
+i.icon.discord:before {
+ content: "\f392";
+ font-family: 'brand-icons';
+}
+i.icon.discourse:before {
+ content: "\f393";
+ font-family: 'brand-icons';
+}
+i.icon.dochub:before {
+ content: "\f394";
+ font-family: 'brand-icons';
+}
+i.icon.docker:before {
+ content: "\f395";
+ font-family: 'brand-icons';
+}
+i.icon.draft2digital:before {
+ content: "\f396";
+ font-family: 'brand-icons';
+}
+i.icon.dribbble:before {
+ content: "\f17d";
+ font-family: 'brand-icons';
+}
+i.icon.dribbble.square:before {
+ content: "\f397";
+ font-family: 'brand-icons';
+}
+i.icon.dropbox:before {
+ content: "\f16b";
+ font-family: 'brand-icons';
+}
+i.icon.drupal:before {
+ content: "\f1a9";
+ font-family: 'brand-icons';
+}
+i.icon.dyalog:before {
+ content: "\f399";
+ font-family: 'brand-icons';
+}
+i.icon.earlybirds:before {
+ content: "\f39a";
+ font-family: 'brand-icons';
+}
+i.icon.ebay:before {
+ content: "\f4f4";
+ font-family: 'brand-icons';
+}
+i.icon.edge:before {
+ content: "\f282";
+ font-family: 'brand-icons';
+}
+i.icon.elementor:before {
+ content: "\f430";
+ font-family: 'brand-icons';
+}
+i.icon.ello:before {
+ content: "\f5f1";
+ font-family: 'brand-icons';
+}
+i.icon.ember:before {
+ content: "\f423";
+ font-family: 'brand-icons';
+}
+i.icon.empire:before {
+ content: "\f1d1";
+ font-family: 'brand-icons';
+}
+i.icon.envira:before {
+ content: "\f299";
+ font-family: 'brand-icons';
+}
+i.icon.erlang:before {
+ content: "\f39d";
+ font-family: 'brand-icons';
+}
+i.icon.ethereum:before {
+ content: "\f42e";
+ font-family: 'brand-icons';
+}
+i.icon.etsy:before {
+ content: "\f2d7";
+ font-family: 'brand-icons';
+}
+i.icon.evernote:before {
+ content: "\f839";
+ font-family: 'brand-icons';
+}
+i.icon.expeditedssl:before {
+ content: "\f23e";
+ font-family: 'brand-icons';
+}
+i.icon.facebook:before {
+ content: "\f09a";
+ font-family: 'brand-icons';
+}
+i.icon.facebook.f:before {
+ content: "\f39e";
+ font-family: 'brand-icons';
+}
+i.icon.facebook.messenger:before {
+ content: "\f39f";
+ font-family: 'brand-icons';
+}
+i.icon.facebook.square:before {
+ content: "\f082";
+ font-family: 'brand-icons';
+}
+i.icon.fantasy.flight.games:before {
+ content: "\f6dc";
+ font-family: 'brand-icons';
+}
+i.icon.fedex:before {
+ content: "\f797";
+ font-family: 'brand-icons';
+}
+i.icon.fedora:before {
+ content: "\f798";
+ font-family: 'brand-icons';
+}
+i.icon.figma:before {
+ content: "\f799";
+ font-family: 'brand-icons';
+}
+i.icon.firefox:before {
+ content: "\f269";
+ font-family: 'brand-icons';
+}
+i.icon.firefox.browser:before {
+ content: "\f907";
+ font-family: 'brand-icons';
+}
+i.icon.first.order:before {
+ content: "\f2b0";
+ font-family: 'brand-icons';
+}
+i.icon.first.order.alternate:before {
+ content: "\f50a";
+ font-family: 'brand-icons';
+}
+i.icon.firstdraft:before {
+ content: "\f3a1";
+ font-family: 'brand-icons';
+}
+i.icon.flickr:before {
+ content: "\f16e";
+ font-family: 'brand-icons';
+}
+i.icon.flipboard:before {
+ content: "\f44d";
+ font-family: 'brand-icons';
+}
+i.icon.fly:before {
+ content: "\f417";
+ font-family: 'brand-icons';
+}
+i.icon.font.awesome:before {
+ content: "\f2b4";
+ font-family: 'brand-icons';
+}
+i.icon.font.awesome.alternate:before {
+ content: "\f35c";
+ font-family: 'brand-icons';
+}
+i.icon.font.awesome.flag:before {
+ content: "\f425";
+ font-family: 'brand-icons';
+}
+i.icon.fonticons:before {
+ content: "\f280";
+ font-family: 'brand-icons';
+}
+i.icon.fonticons.fi:before {
+ content: "\f3a2";
+ font-family: 'brand-icons';
+}
+i.icon.fort.awesome:before {
+ content: "\f286";
+ font-family: 'brand-icons';
+}
+i.icon.fort.awesome.alternate:before {
+ content: "\f3a3";
+ font-family: 'brand-icons';
+}
+i.icon.forumbee:before {
+ content: "\f211";
+ font-family: 'brand-icons';
+}
+i.icon.foursquare:before {
+ content: "\f180";
+ font-family: 'brand-icons';
+}
+i.icon.free.code.camp:before {
+ content: "\f2c5";
+ font-family: 'brand-icons';
+}
+i.icon.freebsd:before {
+ content: "\f3a4";
+ font-family: 'brand-icons';
+}
+i.icon.fulcrum:before {
+ content: "\f50b";
+ font-family: 'brand-icons';
+}
+i.icon.galactic.republic:before {
+ content: "\f50c";
+ font-family: 'brand-icons';
+}
+i.icon.galactic.senate:before {
+ content: "\f50d";
+ font-family: 'brand-icons';
+}
+i.icon.get.pocket:before {
+ content: "\f265";
+ font-family: 'brand-icons';
+}
+i.icon.gg:before {
+ content: "\f260";
+ font-family: 'brand-icons';
+}
+i.icon.gg.circle:before {
+ content: "\f261";
+ font-family: 'brand-icons';
+}
+i.icon.git:before {
+ content: "\f1d3";
+ font-family: 'brand-icons';
+}
+i.icon.git.alternate:before {
+ content: "\f841";
+ font-family: 'brand-icons';
+}
+i.icon.git.square:before {
+ content: "\f1d2";
+ font-family: 'brand-icons';
+}
+i.icon.github:before {
+ content: "\f09b";
+ font-family: 'brand-icons';
+}
+i.icon.github.alternate:before {
+ content: "\f113";
+ font-family: 'brand-icons';
+}
+i.icon.github.square:before {
+ content: "\f092";
+ font-family: 'brand-icons';
+}
+i.icon.gitkraken:before {
+ content: "\f3a6";
+ font-family: 'brand-icons';
+}
+i.icon.gitlab:before {
+ content: "\f296";
+ font-family: 'brand-icons';
+}
+i.icon.gitter:before {
+ content: "\f426";
+ font-family: 'brand-icons';
+}
+i.icon.glide:before {
+ content: "\f2a5";
+ font-family: 'brand-icons';
+}
+i.icon.glide.g:before {
+ content: "\f2a6";
+ font-family: 'brand-icons';
+}
+i.icon.gofore:before {
+ content: "\f3a7";
+ font-family: 'brand-icons';
+}
+i.icon.goodreads:before {
+ content: "\f3a8";
+ font-family: 'brand-icons';
+}
+i.icon.goodreads.g:before {
+ content: "\f3a9";
+ font-family: 'brand-icons';
+}
+i.icon.google:before {
+ content: "\f1a0";
+ font-family: 'brand-icons';
+}
+i.icon.google.drive:before {
+ content: "\f3aa";
+ font-family: 'brand-icons';
+}
+i.icon.google.play:before {
+ content: "\f3ab";
+ font-family: 'brand-icons';
+}
+i.icon.google.plus:before {
+ content: "\f2b3";
+ font-family: 'brand-icons';
+}
+i.icon.google.plus.g:before {
+ content: "\f0d5";
+ font-family: 'brand-icons';
+}
+i.icon.google.plus.square:before {
+ content: "\f0d4";
+ font-family: 'brand-icons';
+}
+i.icon.google.wallet:before {
+ content: "\f1ee";
+ font-family: 'brand-icons';
+}
+i.icon.gratipay:before {
+ content: "\f184";
+ font-family: 'brand-icons';
+}
+i.icon.grav:before {
+ content: "\f2d6";
+ font-family: 'brand-icons';
+}
+i.icon.gripfire:before {
+ content: "\f3ac";
+ font-family: 'brand-icons';
+}
+i.icon.grunt:before {
+ content: "\f3ad";
+ font-family: 'brand-icons';
+}
+i.icon.gulp:before {
+ content: "\f3ae";
+ font-family: 'brand-icons';
+}
+i.icon.hacker.news:before {
+ content: "\f1d4";
+ font-family: 'brand-icons';
+}
+i.icon.hacker.news.square:before {
+ content: "\f3af";
+ font-family: 'brand-icons';
+}
+i.icon.hackerrank:before {
+ content: "\f5f7";
+ font-family: 'brand-icons';
+}
+i.icon.hips:before {
+ content: "\f452";
+ font-family: 'brand-icons';
+}
+i.icon.hire.a.helper:before {
+ content: "\f3b0";
+ font-family: 'brand-icons';
+}
+i.icon.hooli:before {
+ content: "\f427";
+ font-family: 'brand-icons';
+}
+i.icon.hornbill:before {
+ content: "\f592";
+ font-family: 'brand-icons';
+}
+i.icon.hotjar:before {
+ content: "\f3b1";
+ font-family: 'brand-icons';
+}
+i.icon.houzz:before {
+ content: "\f27c";
+ font-family: 'brand-icons';
+}
+i.icon.html5:before {
+ content: "\f13b";
+ font-family: 'brand-icons';
+}
+i.icon.hubspot:before {
+ content: "\f3b2";
+ font-family: 'brand-icons';
+}
+i.icon.ideal:before {
+ content: "\f913";
+ font-family: 'brand-icons';
+}
+i.icon.imdb:before {
+ content: "\f2d8";
+ font-family: 'brand-icons';
+}
+i.icon.instagram:before {
+ content: "\f16d";
+ font-family: 'brand-icons';
+}
+i.icon.intercom:before {
+ content: "\f7af";
+ font-family: 'brand-icons';
+}
+i.icon.internet.explorer:before {
+ content: "\f26b";
+ font-family: 'brand-icons';
+}
+i.icon.invision:before {
+ content: "\f7b0";
+ font-family: 'brand-icons';
+}
+i.icon.ioxhost:before {
+ content: "\f208";
+ font-family: 'brand-icons';
+}
+i.icon.itch.io:before {
+ content: "\f83a";
+ font-family: 'brand-icons';
+}
+i.icon.itunes:before {
+ content: "\f3b4";
+ font-family: 'brand-icons';
+}
+i.icon.itunes.note:before {
+ content: "\f3b5";
+ font-family: 'brand-icons';
+}
+i.icon.java:before {
+ content: "\f4e4";
+ font-family: 'brand-icons';
+}
+i.icon.jedi.order:before {
+ content: "\f50e";
+ font-family: 'brand-icons';
+}
+i.icon.jenkins:before {
+ content: "\f3b6";
+ font-family: 'brand-icons';
+}
+i.icon.jira:before {
+ content: "\f7b1";
+ font-family: 'brand-icons';
+}
+i.icon.joget:before {
+ content: "\f3b7";
+ font-family: 'brand-icons';
+}
+i.icon.joomla:before {
+ content: "\f1aa";
+ font-family: 'brand-icons';
+}
+i.icon.js:before {
+ content: "\f3b8";
+ font-family: 'brand-icons';
+}
+i.icon.js.square:before {
+ content: "\f3b9";
+ font-family: 'brand-icons';
+}
+i.icon.jsfiddle:before {
+ content: "\f1cc";
+ font-family: 'brand-icons';
+}
+i.icon.kaggle:before {
+ content: "\f5fa";
+ font-family: 'brand-icons';
+}
+i.icon.keybase:before {
+ content: "\f4f5";
+ font-family: 'brand-icons';
+}
+i.icon.keycdn:before {
+ content: "\f3ba";
+ font-family: 'brand-icons';
+}
+i.icon.kickstarter:before {
+ content: "\f3bb";
+ font-family: 'brand-icons';
+}
+i.icon.kickstarter.k:before {
+ content: "\f3bc";
+ font-family: 'brand-icons';
+}
+i.icon.korvue:before {
+ content: "\f42f";
+ font-family: 'brand-icons';
+}
+i.icon.laravel:before {
+ content: "\f3bd";
+ font-family: 'brand-icons';
+}
+i.icon.lastfm:before {
+ content: "\f202";
+ font-family: 'brand-icons';
+}
+i.icon.lastfm.square:before {
+ content: "\f203";
+ font-family: 'brand-icons';
+}
+i.icon.leanpub:before {
+ content: "\f212";
+ font-family: 'brand-icons';
+}
+i.icon.lesscss:before {
+ content: "\f41d";
+ font-family: 'brand-icons';
+}
+i.icon.linechat:before {
+ content: "\f3c0";
+ font-family: 'brand-icons';
+}
+i.icon.linkedin:before {
+ content: "\f08c";
+ font-family: 'brand-icons';
+}
+i.icon.linkedin.in:before {
+ content: "\f0e1";
+ font-family: 'brand-icons';
+}
+i.icon.linode:before {
+ content: "\f2b8";
+ font-family: 'brand-icons';
+}
+i.icon.linux:before {
+ content: "\f17c";
+ font-family: 'brand-icons';
+}
+i.icon.lyft:before {
+ content: "\f3c3";
+ font-family: 'brand-icons';
+}
+i.icon.magento:before {
+ content: "\f3c4";
+ font-family: 'brand-icons';
+}
+i.icon.mailchimp:before {
+ content: "\f59e";
+ font-family: 'brand-icons';
+}
+i.icon.mandalorian:before {
+ content: "\f50f";
+ font-family: 'brand-icons';
+}
+i.icon.markdown:before {
+ content: "\f60f";
+ font-family: 'brand-icons';
+}
+i.icon.mastodon:before {
+ content: "\f4f6";
+ font-family: 'brand-icons';
+}
+i.icon.maxcdn:before {
+ content: "\f136";
+ font-family: 'brand-icons';
+}
+i.icon.mdb:before {
+ content: "\f8ca";
+ font-family: 'brand-icons';
+}
+i.icon.medapps:before {
+ content: "\f3c6";
+ font-family: 'brand-icons';
+}
+i.icon.medium:before {
+ content: "\f23a";
+ font-family: 'brand-icons';
+}
+i.icon.medium.m:before {
+ content: "\f3c7";
+ font-family: 'brand-icons';
+}
+i.icon.medrt:before {
+ content: "\f3c8";
+ font-family: 'brand-icons';
+}
+i.icon.meetup:before {
+ content: "\f2e0";
+ font-family: 'brand-icons';
+}
+i.icon.megaport:before {
+ content: "\f5a3";
+ font-family: 'brand-icons';
+}
+i.icon.mendeley:before {
+ content: "\f7b3";
+ font-family: 'brand-icons';
+}
+i.icon.microblog:before {
+ content: "\f91a";
+ font-family: 'brand-icons';
+}
+i.icon.microsoft:before {
+ content: "\f3ca";
+ font-family: 'brand-icons';
+}
+i.icon.mix:before {
+ content: "\f3cb";
+ font-family: 'brand-icons';
+}
+i.icon.mixcloud:before {
+ content: "\f289";
+ font-family: 'brand-icons';
+}
+i.icon.mizuni:before {
+ content: "\f3cc";
+ font-family: 'brand-icons';
+}
+i.icon.modx:before {
+ content: "\f285";
+ font-family: 'brand-icons';
+}
+i.icon.monero:before {
+ content: "\f3d0";
+ font-family: 'brand-icons';
+}
+i.icon.napster:before {
+ content: "\f3d2";
+ font-family: 'brand-icons';
+}
+i.icon.neos:before {
+ content: "\f612";
+ font-family: 'brand-icons';
+}
+i.icon.nimblr:before {
+ content: "\f5a8";
+ font-family: 'brand-icons';
+}
+i.icon.node:before {
+ content: "\f419";
+ font-family: 'brand-icons';
+}
+i.icon.node.js:before {
+ content: "\f3d3";
+ font-family: 'brand-icons';
+}
+i.icon.npm:before {
+ content: "\f3d4";
+ font-family: 'brand-icons';
+}
+i.icon.ns8:before {
+ content: "\f3d5";
+ font-family: 'brand-icons';
+}
+i.icon.nutritionix:before {
+ content: "\f3d6";
+ font-family: 'brand-icons';
+}
+i.icon.odnoklassniki:before {
+ content: "\f263";
+ font-family: 'brand-icons';
+}
+i.icon.odnoklassniki.square:before {
+ content: "\f264";
+ font-family: 'brand-icons';
+}
+i.icon.old.republic:before {
+ content: "\f510";
+ font-family: 'brand-icons';
+}
+i.icon.opencart:before {
+ content: "\f23d";
+ font-family: 'brand-icons';
+}
+i.icon.openid:before {
+ content: "\f19b";
+ font-family: 'brand-icons';
+}
+i.icon.opera:before {
+ content: "\f26a";
+ font-family: 'brand-icons';
+}
+i.icon.optin.monster:before {
+ content: "\f23c";
+ font-family: 'brand-icons';
+}
+i.icon.orcid:before {
+ content: "\f8d2";
+ font-family: 'brand-icons';
+}
+i.icon.osi:before {
+ content: "\f41a";
+ font-family: 'brand-icons';
+}
+i.icon.page4:before {
+ content: "\f3d7";
+ font-family: 'brand-icons';
+}
+i.icon.pagelines:before {
+ content: "\f18c";
+ font-family: 'brand-icons';
+}
+i.icon.palfed:before {
+ content: "\f3d8";
+ font-family: 'brand-icons';
+}
+i.icon.patreon:before {
+ content: "\f3d9";
+ font-family: 'brand-icons';
+}
+i.icon.paypal:before {
+ content: "\f1ed";
+ font-family: 'brand-icons';
+}
+i.icon.penny.arcade:before {
+ content: "\f704";
+ font-family: 'brand-icons';
+}
+i.icon.periscope:before {
+ content: "\f3da";
+ font-family: 'brand-icons';
+}
+i.icon.phabricator:before {
+ content: "\f3db";
+ font-family: 'brand-icons';
+}
+i.icon.phoenix.framework:before {
+ content: "\f3dc";
+ font-family: 'brand-icons';
+}
+i.icon.phoenix.squadron:before {
+ content: "\f511";
+ font-family: 'brand-icons';
+}
+i.icon.php:before {
+ content: "\f457";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper:before {
+ content: "\f2ae";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper.alternate:before {
+ content: "\f1a8";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper.hat:before {
+ content: "\f4e5";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper.pp:before {
+ content: "\f1a7";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper.square:before {
+ content: "\f91e";
+ font-family: 'brand-icons';
+}
+i.icon.pinterest:before {
+ content: "\f0d2";
+ font-family: 'brand-icons';
+}
+i.icon.pinterest.p:before {
+ content: "\f231";
+ font-family: 'brand-icons';
+}
+i.icon.pinterest.square:before {
+ content: "\f0d3";
+ font-family: 'brand-icons';
+}
+i.icon.playstation:before {
+ content: "\f3df";
+ font-family: 'brand-icons';
+}
+i.icon.product.hunt:before {
+ content: "\f288";
+ font-family: 'brand-icons';
+}
+i.icon.pushed:before {
+ content: "\f3e1";
+ font-family: 'brand-icons';
+}
+i.icon.python:before {
+ content: "\f3e2";
+ font-family: 'brand-icons';
+}
+i.icon.qq:before {
+ content: "\f1d6";
+ font-family: 'brand-icons';
+}
+i.icon.quinscape:before {
+ content: "\f459";
+ font-family: 'brand-icons';
+}
+i.icon.quora:before {
+ content: "\f2c4";
+ font-family: 'brand-icons';
+}
+i.icon.r.project:before {
+ content: "\f4f7";
+ font-family: 'brand-icons';
+}
+i.icon.raspberry.pi:before {
+ content: "\f7bb";
+ font-family: 'brand-icons';
+}
+i.icon.ravelry:before {
+ content: "\f2d9";
+ font-family: 'brand-icons';
+}
+i.icon.react:before {
+ content: "\f41b";
+ font-family: 'brand-icons';
+}
+i.icon.reacteurope:before {
+ content: "\f75d";
+ font-family: 'brand-icons';
+}
+i.icon.readme:before {
+ content: "\f4d5";
+ font-family: 'brand-icons';
+}
+i.icon.rebel:before {
+ content: "\f1d0";
+ font-family: 'brand-icons';
+}
+i.icon.reddit:before {
+ content: "\f1a1";
+ font-family: 'brand-icons';
+}
+i.icon.reddit.alien:before {
+ content: "\f281";
+ font-family: 'brand-icons';
+}
+i.icon.reddit.square:before {
+ content: "\f1a2";
+ font-family: 'brand-icons';
+}
+i.icon.redhat:before {
+ content: "\f7bc";
+ font-family: 'brand-icons';
+}
+i.icon.redriver:before {
+ content: "\f3e3";
+ font-family: 'brand-icons';
+}
+i.icon.redyeti:before {
+ content: "\f69d";
+ font-family: 'brand-icons';
+}
+i.icon.renren:before {
+ content: "\f18b";
+ font-family: 'brand-icons';
+}
+i.icon.replyd:before {
+ content: "\f3e6";
+ font-family: 'brand-icons';
+}
+i.icon.researchgate:before {
+ content: "\f4f8";
+ font-family: 'brand-icons';
+}
+i.icon.resolving:before {
+ content: "\f3e7";
+ font-family: 'brand-icons';
+}
+i.icon.rev:before {
+ content: "\f5b2";
+ font-family: 'brand-icons';
+}
+i.icon.rocketchat:before {
+ content: "\f3e8";
+ font-family: 'brand-icons';
+}
+i.icon.rockrms:before {
+ content: "\f3e9";
+ font-family: 'brand-icons';
+}
+i.icon.safari:before {
+ content: "\f267";
+ font-family: 'brand-icons';
+}
+i.icon.salesforce:before {
+ content: "\f83b";
+ font-family: 'brand-icons';
+}
+i.icon.sass:before {
+ content: "\f41e";
+ font-family: 'brand-icons';
+}
+i.icon.schlix:before {
+ content: "\f3ea";
+ font-family: 'brand-icons';
+}
+i.icon.scribd:before {
+ content: "\f28a";
+ font-family: 'brand-icons';
+}
+i.icon.searchengin:before {
+ content: "\f3eb";
+ font-family: 'brand-icons';
+}
+i.icon.sellcast:before {
+ content: "\f2da";
+ font-family: 'brand-icons';
+}
+i.icon.sellsy:before {
+ content: "\f213";
+ font-family: 'brand-icons';
+}
+i.icon.servicestack:before {
+ content: "\f3ec";
+ font-family: 'brand-icons';
+}
+i.icon.shirtsinbulk:before {
+ content: "\f214";
+ font-family: 'brand-icons';
+}
+i.icon.shopware:before {
+ content: "\f5b5";
+ font-family: 'brand-icons';
+}
+i.icon.simplybuilt:before {
+ content: "\f215";
+ font-family: 'brand-icons';
+}
+i.icon.sistrix:before {
+ content: "\f3ee";
+ font-family: 'brand-icons';
+}
+i.icon.sith:before {
+ content: "\f512";
+ font-family: 'brand-icons';
+}
+i.icon.sketch:before {
+ content: "\f7c6";
+ font-family: 'brand-icons';
+}
+i.icon.skyatlas:before {
+ content: "\f216";
+ font-family: 'brand-icons';
+}
+i.icon.skype:before {
+ content: "\f17e";
+ font-family: 'brand-icons';
+}
+i.icon.slack:before {
+ content: "\f198";
+ font-family: 'brand-icons';
+}
+i.icon.slack.hash:before {
+ content: "\f3ef";
+ font-family: 'brand-icons';
+}
+i.icon.slideshare:before {
+ content: "\f1e7";
+ font-family: 'brand-icons';
+}
+i.icon.snapchat:before {
+ content: "\f2ab";
+ font-family: 'brand-icons';
+}
+i.icon.snapchat.ghost:before {
+ content: "\f2ac";
+ font-family: 'brand-icons';
+}
+i.icon.snapchat.square:before {
+ content: "\f2ad";
+ font-family: 'brand-icons';
+}
+i.icon.soundcloud:before {
+ content: "\f1be";
+ font-family: 'brand-icons';
+}
+i.icon.sourcetree:before {
+ content: "\f7d3";
+ font-family: 'brand-icons';
+}
+i.icon.speakap:before {
+ content: "\f3f3";
+ font-family: 'brand-icons';
+}
+i.icon.speaker.deck:before {
+ content: "\f83c";
+ font-family: 'brand-icons';
+}
+i.icon.spotify:before {
+ content: "\f1bc";
+ font-family: 'brand-icons';
+}
+i.icon.squarespace:before {
+ content: "\f5be";
+ font-family: 'brand-icons';
+}
+i.icon.stack.exchange:before {
+ content: "\f18d";
+ font-family: 'brand-icons';
+}
+i.icon.stack.overflow:before {
+ content: "\f16c";
+ font-family: 'brand-icons';
+}
+i.icon.stackpath:before {
+ content: "\f842";
+ font-family: 'brand-icons';
+}
+i.icon.staylinked:before {
+ content: "\f3f5";
+ font-family: 'brand-icons';
+}
+i.icon.steam:before {
+ content: "\f1b6";
+ font-family: 'brand-icons';
+}
+i.icon.steam.square:before {
+ content: "\f1b7";
+ font-family: 'brand-icons';
+}
+i.icon.steam.symbol:before {
+ content: "\f3f6";
+ font-family: 'brand-icons';
+}
+i.icon.sticker.mule:before {
+ content: "\f3f7";
+ font-family: 'brand-icons';
+}
+i.icon.strava:before {
+ content: "\f428";
+ font-family: 'brand-icons';
+}
+i.icon.stripe:before {
+ content: "\f429";
+ font-family: 'brand-icons';
+}
+i.icon.stripe.s:before {
+ content: "\f42a";
+ font-family: 'brand-icons';
+}
+i.icon.studiovinari:before {
+ content: "\f3f8";
+ font-family: 'brand-icons';
+}
+i.icon.stumbleupon:before {
+ content: "\f1a4";
+ font-family: 'brand-icons';
+}
+i.icon.stumbleupon.circle:before {
+ content: "\f1a3";
+ font-family: 'brand-icons';
+}
+i.icon.superpowers:before {
+ content: "\f2dd";
+ font-family: 'brand-icons';
+}
+i.icon.supple:before {
+ content: "\f3f9";
+ font-family: 'brand-icons';
+}
+i.icon.suse:before {
+ content: "\f7d6";
+ font-family: 'brand-icons';
+}
+i.icon.swift:before {
+ content: "\f8e1";
+ font-family: 'brand-icons';
+}
+i.icon.symfony:before {
+ content: "\f83d";
+ font-family: 'brand-icons';
+}
+i.icon.teamspeak:before {
+ content: "\f4f9";
+ font-family: 'brand-icons';
+}
+i.icon.telegram:before {
+ content: "\f2c6";
+ font-family: 'brand-icons';
+}
+i.icon.telegram.plane:before {
+ content: "\f3fe";
+ font-family: 'brand-icons';
+}
+i.icon.tencent.weibo:before {
+ content: "\f1d5";
+ font-family: 'brand-icons';
+}
+i.icon.themeco:before {
+ content: "\f5c6";
+ font-family: 'brand-icons';
+}
+i.icon.themeisle:before {
+ content: "\f2b2";
+ font-family: 'brand-icons';
+}
+i.icon.think.peaks:before {
+ content: "\f731";
+ font-family: 'brand-icons';
+}
+i.icon.trade.federation:before {
+ content: "\f513";
+ font-family: 'brand-icons';
+}
+i.icon.trello:before {
+ content: "\f181";
+ font-family: 'brand-icons';
+}
+i.icon.tripadvisor:before {
+ content: "\f262";
+ font-family: 'brand-icons';
+}
+i.icon.tumblr:before {
+ content: "\f173";
+ font-family: 'brand-icons';
+}
+i.icon.tumblr.square:before {
+ content: "\f174";
+ font-family: 'brand-icons';
+}
+i.icon.twitch:before {
+ content: "\f1e8";
+ font-family: 'brand-icons';
+}
+i.icon.twitter:before {
+ content: "\f099";
+ font-family: 'brand-icons';
+}
+i.icon.twitter.square:before {
+ content: "\f081";
+ font-family: 'brand-icons';
+}
+i.icon.typo3:before {
+ content: "\f42b";
+ font-family: 'brand-icons';
+}
+i.icon.uber:before {
+ content: "\f402";
+ font-family: 'brand-icons';
+}
+i.icon.ubuntu:before {
+ content: "\f7df";
+ font-family: 'brand-icons';
+}
+i.icon.uikit:before {
+ content: "\f403";
+ font-family: 'brand-icons';
+}
+i.icon.umbraco:before {
+ content: "\f8e8";
+ font-family: 'brand-icons';
+}
+i.icon.uniregistry:before {
+ content: "\f404";
+ font-family: 'brand-icons';
+}
+i.icon.unity:before {
+ content: "\f949";
+ font-family: 'brand-icons';
+}
+i.icon.untappd:before {
+ content: "\f405";
+ font-family: 'brand-icons';
+}
+i.icon.ups:before {
+ content: "\f7e0";
+ font-family: 'brand-icons';
+}
+i.icon.usb:before {
+ content: "\f287";
+ font-family: 'brand-icons';
+}
+i.icon.usps:before {
+ content: "\f7e1";
+ font-family: 'brand-icons';
+}
+i.icon.ussunnah:before {
+ content: "\f407";
+ font-family: 'brand-icons';
+}
+i.icon.vaadin:before {
+ content: "\f408";
+ font-family: 'brand-icons';
+}
+i.icon.viacoin:before {
+ content: "\f237";
+ font-family: 'brand-icons';
+}
+i.icon.viadeo:before {
+ content: "\f2a9";
+ font-family: 'brand-icons';
+}
+i.icon.viadeo.square:before {
+ content: "\f2aa";
+ font-family: 'brand-icons';
+}
+i.icon.viber:before {
+ content: "\f409";
+ font-family: 'brand-icons';
+}
+i.icon.vimeo:before {
+ content: "\f40a";
+ font-family: 'brand-icons';
+}
+i.icon.vimeo.square:before {
+ content: "\f194";
+ font-family: 'brand-icons';
+}
+i.icon.vimeo.v:before {
+ content: "\f27d";
+ font-family: 'brand-icons';
+}
+i.icon.vine:before {
+ content: "\f1ca";
+ font-family: 'brand-icons';
+}
+i.icon.vk:before {
+ content: "\f189";
+ font-family: 'brand-icons';
+}
+i.icon.vnv:before {
+ content: "\f40b";
+ font-family: 'brand-icons';
+}
+i.icon.vuejs:before {
+ content: "\f41f";
+ font-family: 'brand-icons';
+}
+i.icon.waze:before {
+ content: "\f83f";
+ font-family: 'brand-icons';
+}
+i.icon.weebly:before {
+ content: "\f5cc";
+ font-family: 'brand-icons';
+}
+i.icon.weibo:before {
+ content: "\f18a";
+ font-family: 'brand-icons';
+}
+i.icon.weixin:before {
+ content: "\f1d7";
+ font-family: 'brand-icons';
+}
+i.icon.whatsapp:before {
+ content: "\f232";
+ font-family: 'brand-icons';
+}
+i.icon.whatsapp.square:before {
+ content: "\f40c";
+ font-family: 'brand-icons';
+}
+i.icon.whmcs:before {
+ content: "\f40d";
+ font-family: 'brand-icons';
+}
+i.icon.wikipedia.w:before {
+ content: "\f266";
+ font-family: 'brand-icons';
+}
+i.icon.windows:before {
+ content: "\f17a";
+ font-family: 'brand-icons';
+}
+i.icon.wix:before {
+ content: "\f5cf";
+ font-family: 'brand-icons';
+}
+i.icon.wizards.of.the.coast:before {
+ content: "\f730";
+ font-family: 'brand-icons';
+}
+i.icon.wolf.pack.battalion:before {
+ content: "\f514";
+ font-family: 'brand-icons';
+}
+i.icon.wordpress:before {
+ content: "\f19a";
+ font-family: 'brand-icons';
+}
+i.icon.wordpress.simple:before {
+ content: "\f411";
+ font-family: 'brand-icons';
+}
+i.icon.wpbeginner:before {
+ content: "\f297";
+ font-family: 'brand-icons';
+}
+i.icon.wpexplorer:before {
+ content: "\f2de";
+ font-family: 'brand-icons';
+}
+i.icon.wpforms:before {
+ content: "\f298";
+ font-family: 'brand-icons';
+}
+i.icon.wpressr:before {
+ content: "\f3e4";
+ font-family: 'brand-icons';
+}
+i.icon.xbox:before {
+ content: "\f412";
+ font-family: 'brand-icons';
+}
+i.icon.xing:before {
+ content: "\f168";
+ font-family: 'brand-icons';
+}
+i.icon.xing.square:before {
+ content: "\f169";
+ font-family: 'brand-icons';
+}
+i.icon.y.combinator:before {
+ content: "\f23b";
+ font-family: 'brand-icons';
+}
+i.icon.yahoo:before {
+ content: "\f19e";
+ font-family: 'brand-icons';
+}
+i.icon.yammer:before {
+ content: "\f840";
+ font-family: 'brand-icons';
+}
+i.icon.yandex:before {
+ content: "\f413";
+ font-family: 'brand-icons';
+}
+i.icon.yandex.international:before {
+ content: "\f414";
+ font-family: 'brand-icons';
+}
+i.icon.yarn:before {
+ content: "\f7e3";
+ font-family: 'brand-icons';
+}
+i.icon.yelp:before {
+ content: "\f1e9";
+ font-family: 'brand-icons';
+}
+i.icon.yoast:before {
+ content: "\f2b1";
+ font-family: 'brand-icons';
+}
+i.icon.youtube:before {
+ content: "\f167";
+ font-family: 'brand-icons';
+}
+i.icon.youtube.square:before {
+ content: "\f431";
+ font-family: 'brand-icons';
+}
+i.icon.zhihu:before {
+ content: "\f63f";
+ font-family: 'brand-icons';
+}
+
+/* Aliases */
+i.icon.american.express:before {
+ content: "\f1f3";
+ font-family: 'brand-icons';
+}
+i.icon.american.express.card:before {
+ content: "\f1f3";
+ font-family: 'brand-icons';
+}
+i.icon.amex:before {
+ content: "\f1f3";
+ font-family: 'brand-icons';
+}
+i.icon.bitbucket.square:before {
+ content: "\f171";
+ font-family: 'brand-icons';
+}
+i.icon.bluetooth.alternative:before {
+ content: "\f294";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.amazon.pay:before {
+ content: "\f42d";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.american.express:before {
+ content: "\f1f3";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.diners.club:before {
+ content: "\f24c";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.discover:before {
+ content: "\f1f2";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.jcb:before {
+ content: "\f24b";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.mastercard:before {
+ content: "\f1f1";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.paypal:before {
+ content: "\f1f4";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.stripe:before {
+ content: "\f1f5";
+ font-family: 'brand-icons';
+}
+i.icon.credit.card.visa:before {
+ content: "\f1f0";
+ font-family: 'brand-icons';
+}
+i.icon.diners.club:before {
+ content: "\f24c";
+ font-family: 'brand-icons';
+}
+i.icon.diners.club.card:before {
+ content: "\f24c";
+ font-family: 'brand-icons';
+}
+i.icon.discover:before {
+ content: "\f1f2";
+ font-family: 'brand-icons';
+}
+i.icon.discover.card:before {
+ content: "\f1f2";
+ font-family: 'brand-icons';
+}
+i.icon.disk.outline:before {
+ content: "\f369";
+ font-family: 'brand-icons';
+}
+i.icon.dribble:before {
+ content: "\f17d";
+ font-family: 'brand-icons';
+}
+i.icon.eercast:before {
+ content: "\f2da";
+ font-family: 'brand-icons';
+}
+i.icon.envira.gallery:before {
+ content: "\f299";
+ font-family: 'brand-icons';
+}
+i.icon.fa:before {
+ content: "\f2b4";
+ font-family: 'brand-icons';
+}
+i.icon.facebook.official:before {
+ content: "\f082";
+ font-family: 'brand-icons';
+}
+i.icon.five.hundred.pixels:before {
+ content: "\f26e";
+ font-family: 'brand-icons';
+}
+i.icon.gittip:before {
+ content: "\f184";
+ font-family: 'brand-icons';
+}
+i.icon.google.plus.circle:before {
+ content: "\f2b3";
+ font-family: 'brand-icons';
+}
+i.icon.google.plus.official:before {
+ content: "\f2b3";
+ font-family: 'brand-icons';
+}
+i.icon.japan.credit.bureau:before {
+ content: "\f24b";
+ font-family: 'brand-icons';
+}
+i.icon.japan.credit.bureau.card:before {
+ content: "\f24b";
+ font-family: 'brand-icons';
+}
+i.icon.jcb:before {
+ content: "\f24b";
+ font-family: 'brand-icons';
+}
+i.icon.linkedin.square:before {
+ content: "\f08c";
+ font-family: 'brand-icons';
+}
+i.icon.mastercard:before {
+ content: "\f1f1";
+ font-family: 'brand-icons';
+}
+i.icon.mastercard.card:before {
+ content: "\f1f1";
+ font-family: 'brand-icons';
+}
+i.icon.microsoft.edge:before {
+ content: "\f282";
+ font-family: 'brand-icons';
+}
+i.icon.ms.edge:before {
+ content: "\f282";
+ font-family: 'brand-icons';
+}
+i.icon.new.pied.piper:before {
+ content: "\f2ae";
+ font-family: 'brand-icons';
+}
+i.icon.optinmonster:before {
+ content: "\f23c";
+ font-family: 'brand-icons';
+}
+i.icon.paypal.card:before {
+ content: "\f1f4";
+ font-family: 'brand-icons';
+}
+i.icon.pied.piper.hat:before {
+ content: "\f2ae";
+ font-family: 'brand-icons';
+}
+i.icon.pocket:before {
+ content: "\f265";
+ font-family: 'brand-icons';
+}
+i.icon.stripe.card:before {
+ content: "\f1f5";
+ font-family: 'brand-icons';
+}
+i.icon.theme.isle:before {
+ content: "\f2b2";
+ font-family: 'brand-icons';
+}
+i.icon.visa:before {
+ content: "\f1f0";
+ font-family: 'brand-icons';
+}
+i.icon.visa.card:before {
+ content: "\f1f0";
+ font-family: 'brand-icons';
+}
+i.icon.wechat:before {
+ content: "\f1d7";
+ font-family: 'brand-icons';
+}
+i.icon.wikipedia:before {
+ content: "\f266";
+ font-family: 'brand-icons';
+}
+i.icon.wordpress.beginner:before {
+ content: "\f297";
+ font-family: 'brand-icons';
+}
+i.icon.wordpress.forms:before {
+ content: "\f298";
+ font-family: 'brand-icons';
+}
+i.icon.yc:before {
+ content: "\f23b";
+ font-family: 'brand-icons';
+}
+i.icon.ycombinator:before {
+ content: "\f23b";
+ font-family: 'brand-icons';
+}
+i.icon.youtube.play:before {
+ content: "\f167";
font-family: 'brand-icons';
}
-
-/* Brand Icons Ideally Would Be Defined Here */
/*******************************
diff --git a/ui/dist/components/icon.min.css b/ui/dist/components/icon.min.css
index 4de36c6d66b..9df11014dff 100644
--- a/ui/dist/components/icon.min.css
+++ b/ui/dist/components/icon.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Icon
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Icon
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */@font-face{font-family:Icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon{display:inline-block;opacity:1;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-backface-visibility:hidden;backface-visibility:hidden}i.icon:before{background:0 0!important}i.icon.loading{height:1em;line-height:1;-webkit-animation:icon-loading 2s linear infinite;animation:icon-loading 2s linear infinite}@-webkit-keyframes icon-loading{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-loading{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}i.icon.hover{opacity:1!important}i.icon.active{opacity:1!important}i.emphasized.icon{opacity:1!important}i.disabled.icon{opacity:.45!important}i.fitted.icon{width:auto;margin:0!important}i.link.icon,i.link.icons{cursor:pointer;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}i.link.icon:hover,i.link.icons:hover{opacity:1!important}i.circular.icon{border-radius:500em!important;line-height:1!important;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:2em!important;height:2em!important}i.circular.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.flipped.icon,i.horizontally.flipped.icon{-webkit-transform:scale(-1,1);transform:scale(-1,1)}i.vertically.flipped.icon{-webkit-transform:scale(1,-1);transform:scale(1,-1)}i.clockwise.rotated.icon,i.right.rotated.icon,i.rotated.icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}i.counterclockwise.rotated.icon,i.left.rotated.icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}i.bordered.icon{line-height:1;vertical-align:baseline;width:2em;height:2em;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset}i.bordered.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.inverted.bordered.icon,i.inverted.circular.icon{background-color:#1b1c1d!important;color:#fff!important}i.inverted.icon{color:#fff}i.red.icon{color:#db2828!important}i.inverted.red.icon{color:#ff695e!important}i.inverted.bordered.red.icon,i.inverted.circular.red.icon{background-color:#db2828!important;color:#fff!important}i.orange.icon{color:#f2711c!important}i.inverted.orange.icon{color:#ff851b!important}i.inverted.bordered.orange.icon,i.inverted.circular.orange.icon{background-color:#f2711c!important;color:#fff!important}i.yellow.icon{color:#fbbd08!important}i.inverted.yellow.icon{color:#ffe21f!important}i.inverted.bordered.yellow.icon,i.inverted.circular.yellow.icon{background-color:#fbbd08!important;color:#fff!important}i.olive.icon{color:#b5cc18!important}i.inverted.olive.icon{color:#d9e778!important}i.inverted.bordered.olive.icon,i.inverted.circular.olive.icon{background-color:#b5cc18!important;color:#fff!important}i.green.icon{color:#21ba45!important}i.inverted.green.icon{color:#2ecc40!important}i.inverted.bordered.green.icon,i.inverted.circular.green.icon{background-color:#21ba45!important;color:#fff!important}i.teal.icon{color:#00b5ad!important}i.inverted.teal.icon{color:#6dffff!important}i.inverted.bordered.teal.icon,i.inverted.circular.teal.icon{background-color:#00b5ad!important;color:#fff!important}i.blue.icon{color:#2185d0!important}i.inverted.blue.icon{color:#54c8ff!important}i.inverted.bordered.blue.icon,i.inverted.circular.blue.icon{background-color:#2185d0!important;color:#fff!important}i.violet.icon{color:#6435c9!important}i.inverted.violet.icon{color:#a291fb!important}i.inverted.bordered.violet.icon,i.inverted.circular.violet.icon{background-color:#6435c9!important;color:#fff!important}i.purple.icon{color:#a333c8!important}i.inverted.purple.icon{color:#dc73ff!important}i.inverted.bordered.purple.icon,i.inverted.circular.purple.icon{background-color:#a333c8!important;color:#fff!important}i.pink.icon{color:#e03997!important}i.inverted.pink.icon{color:#ff8edf!important}i.inverted.bordered.pink.icon,i.inverted.circular.pink.icon{background-color:#e03997!important;color:#fff!important}i.brown.icon{color:#a5673f!important}i.inverted.brown.icon{color:#d67c1c!important}i.inverted.bordered.brown.icon,i.inverted.circular.brown.icon{background-color:#a5673f!important;color:#fff!important}i.grey.icon{color:#767676!important}i.inverted.grey.icon{color:#dcddde!important}i.inverted.bordered.grey.icon,i.inverted.circular.grey.icon{background-color:#767676!important;color:#fff!important}i.black.icon{color:#1b1c1d!important}i.inverted.black.icon{color:#545454!important}i.inverted.bordered.black.icon,i.inverted.circular.black.icon{background-color:#1b1c1d!important;color:#fff!important}i.mini.icon,i.mini.icons{line-height:1;font-size:.4em}i.tiny.icon,i.tiny.icons{line-height:1;font-size:.5em}i.small.icon,i.small.icons{line-height:1;font-size:.75em}i.icon,i.icons{font-size:1em}i.large.icon,i.large.icons{line-height:1;vertical-align:middle;font-size:1.5em}i.big.icon,i.big.icons{line-height:1;vertical-align:middle;font-size:2em}i.huge.icon,i.huge.icons{line-height:1;vertical-align:middle;font-size:4em}i.massive.icon,i.massive.icons{line-height:1;vertical-align:middle;font-size:8em}i.icons{display:inline-block;position:relative;line-height:1}i.icons .icon{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);margin:0;margin:0}i.icons .icon:first-child{position:static;width:auto;height:auto;vertical-align:top;-webkit-transform:none;transform:none;margin-right:.25rem}i.icons .corner.icon{top:auto;left:auto;right:0;bottom:0;-webkit-transform:none;transform:none;font-size:.45em;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff}i.icons .top.right.corner.icon{top:0;left:auto;right:0;bottom:auto}i.icons .top.left.corner.icon{top:0;left:0;right:auto;bottom:auto}i.icons .bottom.left.corner.icon{top:auto;left:0;right:auto;bottom:0}i.icons .bottom.right.corner.icon{top:auto;left:auto;right:0;bottom:0}i.icons .inverted.corner.icon{text-shadow:-1px -1px 0 #1b1c1d,1px -1px 0 #1b1c1d,-1px 1px 0 #1b1c1d,1px 1px 0 #1b1c1d}i.icon.linkedin.in:before{content:"\f0e1"}i.icon.zoom.in:before{content:"\f00e"}i.icon.zoom.out:before{content:"\f010"}i.icon.sign.in:before{content:"\f2f6"}i.icon.in.cart:before{content:"\f218"}i.icon.log.out:before{content:"\f2f5"}i.icon.sign.out:before{content:"\f2f5"}i.icon.\35 00px:before{content:"\f26e"}i.icon.accessible.icon:before{content:"\f368"}i.icon.accusoft:before{content:"\f369"}i.icon.address.book:before{content:"\f2b9"}i.icon.address.card:before{content:"\f2bb"}i.icon.adjust:before{content:"\f042"}i.icon.adn:before{content:"\f170"}i.icon.adversal:before{content:"\f36a"}i.icon.affiliatetheme:before{content:"\f36b"}i.icon.algolia:before{content:"\f36c"}i.icon.align.center:before{content:"\f037"}i.icon.align.justify:before{content:"\f039"}i.icon.align.left:before{content:"\f036"}i.icon.align.right:before{content:"\f038"}i.icon.amazon:before{content:"\f270"}i.icon.amazon.pay:before{content:"\f42c"}i.icon.ambulance:before{content:"\f0f9"}i.icon.american.sign.language.interpreting:before{content:"\f2a3"}i.icon.amilia:before{content:"\f36d"}i.icon.anchor:before{content:"\f13d"}i.icon.android:before{content:"\f17b"}i.icon.angellist:before{content:"\f209"}i.icon.angle.double.down:before{content:"\f103"}i.icon.angle.double.left:before{content:"\f100"}i.icon.angle.double.right:before{content:"\f101"}i.icon.angle.double.up:before{content:"\f102"}i.icon.angle.down:before{content:"\f107"}i.icon.angle.left:before{content:"\f104"}i.icon.angle.right:before{content:"\f105"}i.icon.angle.up:before{content:"\f106"}i.icon.angrycreative:before{content:"\f36e"}i.icon.angular:before{content:"\f420"}i.icon.app.store:before{content:"\f36f"}i.icon.app.store.ios:before{content:"\f370"}i.icon.apper:before{content:"\f371"}i.icon.apple:before{content:"\f179"}i.icon.apple.pay:before{content:"\f415"}i.icon.archive:before{content:"\f187"}i.icon.arrow.alternate.circle.down:before{content:"\f358"}i.icon.arrow.alternate.circle.left:before{content:"\f359"}i.icon.arrow.alternate.circle.right:before{content:"\f35a"}i.icon.arrow.alternate.circle.up:before{content:"\f35b"}i.icon.arrow.circle.down:before{content:"\f0ab"}i.icon.arrow.circle.left:before{content:"\f0a8"}i.icon.arrow.circle.right:before{content:"\f0a9"}i.icon.arrow.circle.up:before{content:"\f0aa"}i.icon.arrow.down:before{content:"\f063"}i.icon.arrow.left:before{content:"\f060"}i.icon.arrow.right:before{content:"\f061"}i.icon.arrow.up:before{content:"\f062"}i.icon.arrows.alternate:before{content:"\f0b2"}i.icon.arrows.alternate.horizontal:before{content:"\f337"}i.icon.arrows.alternate.vertical:before{content:"\f338"}i.icon.assistive.listening.systems:before{content:"\f2a2"}i.icon.asterisk:before{content:"\f069"}i.icon.asymmetrik:before{content:"\f372"}i.icon.at:before{content:"\f1fa"}i.icon.audible:before{content:"\f373"}i.icon.audio.description:before{content:"\f29e"}i.icon.autoprefixer:before{content:"\f41c"}i.icon.avianex:before{content:"\f374"}i.icon.aviato:before{content:"\f421"}i.icon.aws:before{content:"\f375"}i.icon.backward:before{content:"\f04a"}i.icon.balance.scale:before{content:"\f24e"}i.icon.ban:before{content:"\f05e"}i.icon.band.aid:before{content:"\f462"}i.icon.bandcamp:before{content:"\f2d5"}i.icon.barcode:before{content:"\f02a"}i.icon.bars:before{content:"\f0c9"}i.icon.baseball.ball:before{content:"\f433"}i.icon.basketball.ball:before{content:"\f434"}i.icon.bath:before{content:"\f2cd"}i.icon.battery.empty:before{content:"\f244"}i.icon.battery.full:before{content:"\f240"}i.icon.battery.half:before{content:"\f242"}i.icon.battery.quarter:before{content:"\f243"}i.icon.battery.three.quarters:before{content:"\f241"}i.icon.bed:before{content:"\f236"}i.icon.beer:before{content:"\f0fc"}i.icon.behance:before{content:"\f1b4"}i.icon.behance.square:before{content:"\f1b5"}i.icon.bell:before{content:"\f0f3"}i.icon.bell.slash:before{content:"\f1f6"}i.icon.bicycle:before{content:"\f206"}i.icon.bimobject:before{content:"\f378"}i.icon.binoculars:before{content:"\f1e5"}i.icon.birthday.cake:before{content:"\f1fd"}i.icon.bitbucket:before{content:"\f171"}i.icon.bitcoin:before{content:"\f379"}i.icon.bity:before{content:"\f37a"}i.icon.black.tie:before{content:"\f27e"}i.icon.blackberry:before{content:"\f37b"}i.icon.blind:before{content:"\f29d"}i.icon.blogger:before{content:"\f37c"}i.icon.blogger.b:before{content:"\f37d"}i.icon.bluetooth:before{content:"\f293"}i.icon.bluetooth.b:before{content:"\f294"}i.icon.bold:before{content:"\f032"}i.icon.bolt:before{content:"\f0e7"}i.icon.bomb:before{content:"\f1e2"}i.icon.book:before{content:"\f02d"}i.icon.bookmark:before{content:"\f02e"}i.icon.bowling.ball:before{content:"\f436"}i.icon.box:before{content:"\f466"}i.icon.boxes:before{content:"\f468"}i.icon.braille:before{content:"\f2a1"}i.icon.briefcase:before{content:"\f0b1"}i.icon.btc:before{content:"\f15a"}i.icon.bug:before{content:"\f188"}i.icon.building:before{content:"\f1ad"}i.icon.bullhorn:before{content:"\f0a1"}i.icon.bullseye:before{content:"\f140"}i.icon.buromobelexperte:before{content:"\f37f"}i.icon.bus:before{content:"\f207"}i.icon.buysellads:before{content:"\f20d"}i.icon.calculator:before{content:"\f1ec"}i.icon.calendar:before{content:"\f133"}i.icon.calendar.alternate:before{content:"\f073"}i.icon.calendar.check:before{content:"\f274"}i.icon.calendar.minus:before{content:"\f272"}i.icon.calendar.plus:before{content:"\f271"}i.icon.calendar.times:before{content:"\f273"}i.icon.camera:before{content:"\f030"}i.icon.camera.retro:before{content:"\f083"}i.icon.car:before{content:"\f1b9"}i.icon.caret.down:before{content:"\f0d7"}i.icon.caret.left:before{content:"\f0d9"}i.icon.caret.right:before{content:"\f0da"}i.icon.caret.square.down:before{content:"\f150"}i.icon.caret.square.left:before{content:"\f191"}i.icon.caret.square.right:before{content:"\f152"}i.icon.caret.square.up:before{content:"\f151"}i.icon.caret.up:before{content:"\f0d8"}i.icon.cart.arrow.down:before{content:"\f218"}i.icon.cart.plus:before{content:"\f217"}i.icon.cc.amazon.pay:before{content:"\f42d"}i.icon.cc.amex:before{content:"\f1f3"}i.icon.cc.apple.pay:before{content:"\f416"}i.icon.cc.diners.club:before{content:"\f24c"}i.icon.cc.discover:before{content:"\f1f2"}i.icon.cc.jcb:before{content:"\f24b"}i.icon.cc.mastercard:before{content:"\f1f1"}i.icon.cc.paypal:before{content:"\f1f4"}i.icon.cc.stripe:before{content:"\f1f5"}i.icon.cc.visa:before{content:"\f1f0"}i.icon.centercode:before{content:"\f380"}i.icon.certificate:before{content:"\f0a3"}i.icon.chart.area:before{content:"\f1fe"}i.icon.chart.bar:before{content:"\f080"}i.icon.chart.line:before{content:"\f201"}i.icon.chart.pie:before{content:"\f200"}i.icon.check:before{content:"\f00c"}i.icon.check.circle:before{content:"\f058"}i.icon.check.square:before{content:"\f14a"}i.icon.chess:before{content:"\f439"}i.icon.chess.bishop:before{content:"\f43a"}i.icon.chess.board:before{content:"\f43c"}i.icon.chess.king:before{content:"\f43f"}i.icon.chess.knight:before{content:"\f441"}i.icon.chess.pawn:before{content:"\f443"}i.icon.chess.queen:before{content:"\f445"}i.icon.chess.rook:before{content:"\f447"}i.icon.chevron.circle.down:before{content:"\f13a"}i.icon.chevron.circle.left:before{content:"\f137"}i.icon.chevron.circle.right:before{content:"\f138"}i.icon.chevron.circle.up:before{content:"\f139"}i.icon.chevron.down:before{content:"\f078"}i.icon.chevron.left:before{content:"\f053"}i.icon.chevron.right:before{content:"\f054"}i.icon.chevron.up:before{content:"\f077"}i.icon.child:before{content:"\f1ae"}i.icon.chrome:before{content:"\f268"}i.icon.circle:before{content:"\f111"}i.icon.circle.notch:before{content:"\f1ce"}i.icon.clipboard:before{content:"\f328"}i.icon.clipboard.check:before{content:"\f46c"}i.icon.clipboard.list:before{content:"\f46d"}i.icon.clock:before{content:"\f017"}i.icon.clone:before{content:"\f24d"}i.icon.closed.captioning:before{content:"\f20a"}i.icon.cloud:before{content:"\f0c2"}i.icon.cloudscale:before{content:"\f383"}i.icon.cloudsmith:before{content:"\f384"}i.icon.cloudversify:before{content:"\f385"}i.icon.code:before{content:"\f121"}i.icon.code.branch:before{content:"\f126"}i.icon.codepen:before{content:"\f1cb"}i.icon.codiepie:before{content:"\f284"}i.icon.coffee:before{content:"\f0f4"}i.icon.cog:before{content:"\f013"}i.icon.cogs:before{content:"\f085"}i.icon.columns:before{content:"\f0db"}i.icon.comment:before{content:"\f075"}i.icon.comment.alternate:before{content:"\f27a"}i.icon.comments:before{content:"\f086"}i.icon.compass:before{content:"\f14e"}i.icon.compress:before{content:"\f066"}i.icon.connectdevelop:before{content:"\f20e"}i.icon.contao:before{content:"\f26d"}i.icon.copy:before{content:"\f0c5"}i.icon.copyright:before{content:"\f1f9"}i.icon.cpanel:before{content:"\f388"}i.icon.creative.commons:before{content:"\f25e"}i.icon.credit.card:before{content:"\f09d"}i.icon.crop:before{content:"\f125"}i.icon.crosshairs:before{content:"\f05b"}i.icon.css3:before{content:"\f13c"}i.icon.css3.alternate:before{content:"\f38b"}i.icon.cube:before{content:"\f1b2"}i.icon.cubes:before{content:"\f1b3"}i.icon.cut:before{content:"\f0c4"}i.icon.cuttlefish:before{content:"\f38c"}i.icon.d.and.d:before{content:"\f38d"}i.icon.dashcube:before{content:"\f210"}i.icon.database:before{content:"\f1c0"}i.icon.deaf:before{content:"\f2a4"}i.icon.delicious:before{content:"\f1a5"}i.icon.deploydog:before{content:"\f38e"}i.icon.deskpro:before{content:"\f38f"}i.icon.desktop:before{content:"\f108"}i.icon.deviantart:before{content:"\f1bd"}i.icon.digg:before{content:"\f1a6"}i.icon.digital.ocean:before{content:"\f391"}i.icon.discord:before{content:"\f392"}i.icon.discourse:before{content:"\f393"}i.icon.dna:before{content:"\f471"}i.icon.dochub:before{content:"\f394"}i.icon.docker:before{content:"\f395"}i.icon.dollar.sign:before{content:"\f155"}i.icon.dolly:before{content:"\f472"}i.icon.dolly.flatbed:before{content:"\f474"}i.icon.dot.circle:before{content:"\f192"}i.icon.download:before{content:"\f019"}i.icon.draft2digital:before{content:"\f396"}i.icon.dribbble:before{content:"\f17d"}i.icon.dribbble.square:before{content:"\f397"}i.icon.dropbox:before{content:"\f16b"}i.icon.drupal:before{content:"\f1a9"}i.icon.dyalog:before{content:"\f399"}i.icon.earlybirds:before{content:"\f39a"}i.icon.edge:before{content:"\f282"}i.icon.edit:before{content:"\f044"}i.icon.eject:before{content:"\f052"}i.icon.elementor:before{content:"\f430"}i.icon.ellipsis.horizontal:before{content:"\f141"}i.icon.ellipsis.vertical:before{content:"\f142"}i.icon.ember:before{content:"\f423"}i.icon.empire:before{content:"\f1d1"}i.icon.envelope:before{content:"\f0e0"}i.icon.envelope.open:before{content:"\f2b6"}i.icon.envelope.square:before{content:"\f199"}i.icon.envira:before{content:"\f299"}i.icon.eraser:before{content:"\f12d"}i.icon.erlang:before{content:"\f39d"}i.icon.ethereum:before{content:"\f42e"}i.icon.etsy:before{content:"\f2d7"}i.icon.euro.sign:before{content:"\f153"}i.icon.exchange.alternate:before{content:"\f362"}i.icon.exclamation:before{content:"\f12a"}i.icon.exclamation.circle:before{content:"\f06a"}i.icon.exclamation.triangle:before{content:"\f071"}i.icon.expand:before{content:"\f065"}i.icon.expand.arrows.alternate:before{content:"\f31e"}i.icon.expeditedssl:before{content:"\f23e"}i.icon.external.alternate:before{content:"\f35d"}i.icon.external.square.alternate:before{content:"\f360"}i.icon.eye:before{content:"\f06e"}i.icon.eye.dropper:before{content:"\f1fb"}i.icon.eye.slash:before{content:"\f070"}i.icon.facebook:before{content:"\f09a"}i.icon.facebook.f:before{content:"\f39e"}i.icon.facebook.messenger:before{content:"\f39f"}i.icon.facebook.square:before{content:"\f082"}i.icon.fast.backward:before{content:"\f049"}i.icon.fast.forward:before{content:"\f050"}i.icon.fax:before{content:"\f1ac"}i.icon.female:before{content:"\f182"}i.icon.fighter.jet:before{content:"\f0fb"}i.icon.file:before{content:"\f15b"}i.icon.file.alternate:before{content:"\f15c"}i.icon.file.archive:before{content:"\f1c6"}i.icon.file.audio:before{content:"\f1c7"}i.icon.file.code:before{content:"\f1c9"}i.icon.file.excel:before{content:"\f1c3"}i.icon.file.image:before{content:"\f1c5"}i.icon.file.pdf:before{content:"\f1c1"}i.icon.file.powerpoint:before{content:"\f1c4"}i.icon.file.video:before{content:"\f1c8"}i.icon.file.word:before{content:"\f1c2"}i.icon.film:before{content:"\f008"}i.icon.filter:before{content:"\f0b0"}i.icon.fire:before{content:"\f06d"}i.icon.fire.extinguisher:before{content:"\f134"}i.icon.firefox:before{content:"\f269"}i.icon.first.aid:before{content:"\f479"}i.icon.first.order:before{content:"\f2b0"}i.icon.firstdraft:before{content:"\f3a1"}i.icon.flag:before{content:"\f024"}i.icon.flag.checkered:before{content:"\f11e"}i.icon.flask:before{content:"\f0c3"}i.icon.flickr:before{content:"\f16e"}i.icon.flipboard:before{content:"\f44d"}i.icon.fly:before{content:"\f417"}i.icon.folder:before{content:"\f07b"}i.icon.folder.open:before{content:"\f07c"}i.icon.font:before{content:"\f031"}i.icon.font.awesome:before{content:"\f2b4"}i.icon.font.awesome.alternate:before{content:"\f35c"}i.icon.font.awesome.flag:before{content:"\f425"}i.icon.fonticons:before{content:"\f280"}i.icon.fonticons.fi:before{content:"\f3a2"}i.icon.football.ball:before{content:"\f44e"}i.icon.fort.awesome:before{content:"\f286"}i.icon.fort.awesome.alternate:before{content:"\f3a3"}i.icon.forumbee:before{content:"\f211"}i.icon.forward:before{content:"\f04e"}i.icon.foursquare:before{content:"\f180"}i.icon.free.code.camp:before{content:"\f2c5"}i.icon.freebsd:before{content:"\f3a4"}i.icon.frown:before{content:"\f119"}i.icon.futbol:before{content:"\f1e3"}i.icon.gamepad:before{content:"\f11b"}i.icon.gavel:before{content:"\f0e3"}i.icon.gem:before{content:"\f3a5"}i.icon.genderless:before{content:"\f22d"}i.icon.get.pocket:before{content:"\f265"}i.icon.gg:before{content:"\f260"}i.icon.gg.circle:before{content:"\f261"}i.icon.gift:before{content:"\f06b"}i.icon.git:before{content:"\f1d3"}i.icon.git.square:before{content:"\f1d2"}i.icon.github:before{content:"\f09b"}i.icon.github.alternate:before{content:"\f113"}i.icon.github.square:before{content:"\f092"}i.icon.gitkraken:before{content:"\f3a6"}i.icon.gitlab:before{content:"\f296"}i.icon.gitter:before{content:"\f426"}i.icon.glass.martini:before{content:"\f000"}i.icon.glide:before{content:"\f2a5"}i.icon.glide.g:before{content:"\f2a6"}i.icon.globe:before{content:"\f0ac"}i.icon.gofore:before{content:"\f3a7"}i.icon.golf.ball:before{content:"\f450"}i.icon.goodreads:before{content:"\f3a8"}i.icon.goodreads.g:before{content:"\f3a9"}i.icon.google:before{content:"\f1a0"}i.icon.google.drive:before{content:"\f3aa"}i.icon.google.play:before{content:"\f3ab"}i.icon.google.plus:before{content:"\f2b3"}i.icon.google.plus.g:before{content:"\f0d5"}i.icon.google.plus.square:before{content:"\f0d4"}i.icon.google.wallet:before{content:"\f1ee"}i.icon.graduation.cap:before{content:"\f19d"}i.icon.gratipay:before{content:"\f184"}i.icon.grav:before{content:"\f2d6"}i.icon.gripfire:before{content:"\f3ac"}i.icon.grunt:before{content:"\f3ad"}i.icon.gulp:before{content:"\f3ae"}i.icon.h.square:before{content:"\f0fd"}i.icon.hacker.news:before{content:"\f1d4"}i.icon.hacker.news.square:before{content:"\f3af"}i.icon.hand.lizard:before{content:"\f258"}i.icon.hand.paper:before{content:"\f256"}i.icon.hand.peace:before{content:"\f25b"}i.icon.hand.point.down:before{content:"\f0a7"}i.icon.hand.point.left:before{content:"\f0a5"}i.icon.hand.point.right:before{content:"\f0a4"}i.icon.hand.point.up:before{content:"\f0a6"}i.icon.hand.pointer:before{content:"\f25a"}i.icon.hand.rock:before{content:"\f255"}i.icon.hand.scissors:before{content:"\f257"}i.icon.hand.spock:before{content:"\f259"}i.icon.handshake:before{content:"\f2b5"}i.icon.hashtag:before{content:"\f292"}i.icon.hdd:before{content:"\f0a0"}i.icon.heading:before{content:"\f1dc"}i.icon.headphones:before{content:"\f025"}i.icon.heart:before{content:"\f004"}i.icon.heartbeat:before{content:"\f21e"}i.icon.hips:before{content:"\f452"}i.icon.hire.a.helper:before{content:"\f3b0"}i.icon.history:before{content:"\f1da"}i.icon.hockey.puck:before{content:"\f453"}i.icon.home:before{content:"\f015"}i.icon.hooli:before{content:"\f427"}i.icon.hospital:before{content:"\f0f8"}i.icon.hospital.symbol:before{content:"\f47e"}i.icon.hotjar:before{content:"\f3b1"}i.icon.hourglass:before{content:"\f254"}i.icon.hourglass.end:before{content:"\f253"}i.icon.hourglass.half:before{content:"\f252"}i.icon.hourglass.start:before{content:"\f251"}i.icon.houzz:before{content:"\f27c"}i.icon.html5:before{content:"\f13b"}i.icon.hubspot:before{content:"\f3b2"}i.icon.i.cursor:before{content:"\f246"}i.icon.id.badge:before{content:"\f2c1"}i.icon.id.card:before{content:"\f2c2"}i.icon.image:before{content:"\f03e"}i.icon.images:before{content:"\f302"}i.icon.imdb:before{content:"\f2d8"}i.icon.inbox:before{content:"\f01c"}i.icon.indent:before{content:"\f03c"}i.icon.industry:before{content:"\f275"}i.icon.info:before{content:"\f129"}i.icon.info.circle:before{content:"\f05a"}i.icon.instagram:before{content:"\f16d"}i.icon.internet.explorer:before{content:"\f26b"}i.icon.ioxhost:before{content:"\f208"}i.icon.italic:before{content:"\f033"}i.icon.itunes:before{content:"\f3b4"}i.icon.itunes.note:before{content:"\f3b5"}i.icon.jenkins:before{content:"\f3b6"}i.icon.joget:before{content:"\f3b7"}i.icon.joomla:before{content:"\f1aa"}i.icon.js:before{content:"\f3b8"}i.icon.js.square:before{content:"\f3b9"}i.icon.jsfiddle:before{content:"\f1cc"}i.icon.key:before{content:"\f084"}i.icon.keyboard:before{content:"\f11c"}i.icon.keycdn:before{content:"\f3ba"}i.icon.kickstarter:before{content:"\f3bb"}i.icon.kickstarter.k:before{content:"\f3bc"}i.icon.korvue:before{content:"\f42f"}i.icon.language:before{content:"\f1ab"}i.icon.laptop:before{content:"\f109"}i.icon.laravel:before{content:"\f3bd"}i.icon.lastfm:before{content:"\f202"}i.icon.lastfm.square:before{content:"\f203"}i.icon.leaf:before{content:"\f06c"}i.icon.leanpub:before{content:"\f212"}i.icon.lemon:before{content:"\f094"}i.icon.less:before{content:"\f41d"}i.icon.level.down.alternate:before{content:"\f3be"}i.icon.level.up.alternate:before{content:"\f3bf"}i.icon.life.ring:before{content:"\f1cd"}i.icon.lightbulb:before{content:"\f0eb"}i.icon.linechat:before{content:"\f3c0"}i.icon.linkify:before{content:"\f0c1"}i.icon.linkedin:before{content:"\f08c"}i.icon.linkedin.alt:before{content:"\f0e1"}i.icon.linode:before{content:"\f2b8"}i.icon.linux:before{content:"\f17c"}i.icon.lira.sign:before{content:"\f195"}i.icon.list:before{content:"\f03a"}i.icon.list.alternate:before{content:"\f022"}i.icon.list.ol:before{content:"\f0cb"}i.icon.list.ul:before{content:"\f0ca"}i.icon.location.arrow:before{content:"\f124"}i.icon.lock:before{content:"\f023"}i.icon.lock.open:before{content:"\f3c1"}i.icon.long.arrow.alternate.down:before{content:"\f309"}i.icon.long.arrow.alternate.left:before{content:"\f30a"}i.icon.long.arrow.alternate.right:before{content:"\f30b"}i.icon.long.arrow.alternate.up:before{content:"\f30c"}i.icon.low.vision:before{content:"\f2a8"}i.icon.lyft:before{content:"\f3c3"}i.icon.magento:before{content:"\f3c4"}i.icon.magic:before{content:"\f0d0"}i.icon.magnet:before{content:"\f076"}i.icon.male:before{content:"\f183"}i.icon.map:before{content:"\f279"}i.icon.map.marker:before{content:"\f041"}i.icon.map.marker.alternate:before{content:"\f3c5"}i.icon.map.pin:before{content:"\f276"}i.icon.map.signs:before{content:"\f277"}i.icon.mars:before{content:"\f222"}i.icon.mars.double:before{content:"\f227"}i.icon.mars.stroke:before{content:"\f229"}i.icon.mars.stroke.horizontal:before{content:"\f22b"}i.icon.mars.stroke.vertical:before{content:"\f22a"}i.icon.maxcdn:before{content:"\f136"}i.icon.medapps:before{content:"\f3c6"}i.icon.medium:before{content:"\f23a"}i.icon.medium.m:before{content:"\f3c7"}i.icon.medkit:before{content:"\f0fa"}i.icon.medrt:before{content:"\f3c8"}i.icon.meetup:before{content:"\f2e0"}i.icon.meh:before{content:"\f11a"}i.icon.mercury:before{content:"\f223"}i.icon.microchip:before{content:"\f2db"}i.icon.microphone:before{content:"\f130"}i.icon.microphone.slash:before{content:"\f131"}i.icon.microsoft:before{content:"\f3ca"}i.icon.minus:before{content:"\f068"}i.icon.minus.circle:before{content:"\f056"}i.icon.minus.square:before{content:"\f146"}i.icon.mix:before{content:"\f3cb"}i.icon.mixcloud:before{content:"\f289"}i.icon.mizuni:before{content:"\f3cc"}i.icon.mobile:before{content:"\f10b"}i.icon.mobile.alternate:before{content:"\f3cd"}i.icon.modx:before{content:"\f285"}i.icon.monero:before{content:"\f3d0"}i.icon.money.bill.alternate:before{content:"\f3d1"}i.icon.moon:before{content:"\f186"}i.icon.motorcycle:before{content:"\f21c"}i.icon.mouse.pointer:before{content:"\f245"}i.icon.music:before{content:"\f001"}i.icon.napster:before{content:"\f3d2"}i.icon.neuter:before{content:"\f22c"}i.icon.newspaper:before{content:"\f1ea"}i.icon.nintendo.switch:before{content:"\f418"}i.icon.node:before{content:"\f419"}i.icon.node.js:before{content:"\f3d3"}i.icon.npm:before{content:"\f3d4"}i.icon.ns8:before{content:"\f3d5"}i.icon.nutritionix:before{content:"\f3d6"}i.icon.object.group:before{content:"\f247"}i.icon.object.ungroup:before{content:"\f248"}i.icon.odnoklassniki:before{content:"\f263"}i.icon.odnoklassniki.square:before{content:"\f264"}i.icon.opencart:before{content:"\f23d"}i.icon.openid:before{content:"\f19b"}i.icon.opera:before{content:"\f26a"}i.icon.optin.monster:before{content:"\f23c"}i.icon.osi:before{content:"\f41a"}i.icon.outdent:before{content:"\f03b"}i.icon.page4:before{content:"\f3d7"}i.icon.pagelines:before{content:"\f18c"}i.icon.paint.brush:before{content:"\f1fc"}i.icon.palfed:before{content:"\f3d8"}i.icon.pallet:before{content:"\f482"}i.icon.paper.plane:before{content:"\f1d8"}i.icon.paperclip:before{content:"\f0c6"}i.icon.paragraph:before{content:"\f1dd"}i.icon.paste:before{content:"\f0ea"}i.icon.patreon:before{content:"\f3d9"}i.icon.pause:before{content:"\f04c"}i.icon.pause.circle:before{content:"\f28b"}i.icon.paw:before{content:"\f1b0"}i.icon.paypal:before{content:"\f1ed"}i.icon.pen.square:before{content:"\f14b"}i.icon.pencil.alternate:before{content:"\f303"}i.icon.percent:before{content:"\f295"}i.icon.periscope:before{content:"\f3da"}i.icon.phabricator:before{content:"\f3db"}i.icon.phoenix.framework:before{content:"\f3dc"}i.icon.phone:before{content:"\f095"}i.icon.phone.square:before{content:"\f098"}i.icon.phone.volume:before{content:"\f2a0"}i.icon.php:before{content:"\f457"}i.icon.pied.piper:before{content:"\f2ae"}i.icon.pied.piper.alternate:before{content:"\f1a8"}i.icon.pied.piper.pp:before{content:"\f1a7"}i.icon.pills:before{content:"\f484"}i.icon.pinterest:before{content:"\f0d2"}i.icon.pinterest.p:before{content:"\f231"}i.icon.pinterest.square:before{content:"\f0d3"}i.icon.plane:before{content:"\f072"}i.icon.play:before{content:"\f04b"}i.icon.play.circle:before{content:"\f144"}i.icon.playstation:before{content:"\f3df"}i.icon.plug:before{content:"\f1e6"}i.icon.plus:before{content:"\f067"}i.icon.plus.circle:before{content:"\f055"}i.icon.plus.square:before{content:"\f0fe"}i.icon.podcast:before{content:"\f2ce"}i.icon.pound.sign:before{content:"\f154"}i.icon.power.off:before{content:"\f011"}i.icon.print:before{content:"\f02f"}i.icon.product.hunt:before{content:"\f288"}i.icon.pushed:before{content:"\f3e1"}i.icon.puzzle.piece:before{content:"\f12e"}i.icon.python:before{content:"\f3e2"}i.icon.qq:before{content:"\f1d6"}i.icon.qrcode:before{content:"\f029"}i.icon.question:before{content:"\f128"}i.icon.question.circle:before{content:"\f059"}i.icon.quidditch:before{content:"\f458"}i.icon.quinscape:before{content:"\f459"}i.icon.quora:before{content:"\f2c4"}i.icon.quote.left:before{content:"\f10d"}i.icon.quote.right:before{content:"\f10e"}i.icon.random:before{content:"\f074"}i.icon.ravelry:before{content:"\f2d9"}i.icon.react:before{content:"\f41b"}i.icon.rebel:before{content:"\f1d0"}i.icon.recycle:before{content:"\f1b8"}i.icon.redriver:before{content:"\f3e3"}i.icon.reddit:before{content:"\f1a1"}i.icon.reddit.alien:before{content:"\f281"}i.icon.reddit.square:before{content:"\f1a2"}i.icon.redo:before{content:"\f01e"}i.icon.redo.alternate:before{content:"\f2f9"}i.icon.registered:before{content:"\f25d"}i.icon.rendact:before{content:"\f3e4"}i.icon.renren:before{content:"\f18b"}i.icon.reply:before{content:"\f3e5"}i.icon.reply.all:before{content:"\f122"}i.icon.replyd:before{content:"\f3e6"}i.icon.resolving:before{content:"\f3e7"}i.icon.retweet:before{content:"\f079"}i.icon.road:before{content:"\f018"}i.icon.rocket:before{content:"\f135"}i.icon.rocketchat:before{content:"\f3e8"}i.icon.rockrms:before{content:"\f3e9"}i.icon.rss:before{content:"\f09e"}i.icon.rss.square:before{content:"\f143"}i.icon.ruble.sign:before{content:"\f158"}i.icon.rupee.sign:before{content:"\f156"}i.icon.safari:before{content:"\f267"}i.icon.sass:before{content:"\f41e"}i.icon.save:before{content:"\f0c7"}i.icon.schlix:before{content:"\f3ea"}i.icon.scribd:before{content:"\f28a"}i.icon.search:before{content:"\f002"}i.icon.search.minus:before{content:"\f010"}i.icon.search.plus:before{content:"\f00e"}i.icon.searchengin:before{content:"\f3eb"}i.icon.sellcast:before{content:"\f2da"}i.icon.sellsy:before{content:"\f213"}i.icon.server:before{content:"\f233"}i.icon.servicestack:before{content:"\f3ec"}i.icon.share:before{content:"\f064"}i.icon.share.alternate:before{content:"\f1e0"}i.icon.share.alternate.square:before{content:"\f1e1"}i.icon.share.square:before{content:"\f14d"}i.icon.shekel.sign:before{content:"\f20b"}i.icon.shield.alternate:before{content:"\f3ed"}i.icon.ship:before{content:"\f21a"}i.icon.shipping.fast:before{content:"\f48b"}i.icon.shirtsinbulk:before{content:"\f214"}i.icon.shopping.bag:before{content:"\f290"}i.icon.shopping.basket:before{content:"\f291"}i.icon.shopping.cart:before{content:"\f07a"}i.icon.shower:before{content:"\f2cc"}i.icon.sign.language:before{content:"\f2a7"}i.icon.signal:before{content:"\f012"}i.icon.simplybuilt:before{content:"\f215"}i.icon.sistrix:before{content:"\f3ee"}i.icon.sitemap:before{content:"\f0e8"}i.icon.skyatlas:before{content:"\f216"}i.icon.skype:before{content:"\f17e"}i.icon.slack:before{content:"\f198"}i.icon.slack.hash:before{content:"\f3ef"}i.icon.sliders.horizontal:before{content:"\f1de"}i.icon.slideshare:before{content:"\f1e7"}i.icon.smile:before{content:"\f118"}i.icon.snapchat:before{content:"\f2ab"}i.icon.snapchat.ghost:before{content:"\f2ac"}i.icon.snapchat.square:before{content:"\f2ad"}i.icon.snowflake:before{content:"\f2dc"}i.icon.sort:before{content:"\f0dc"}i.icon.sort.alphabet.down:before{content:"\f15d"}i.icon.sort.alphabet.up:before{content:"\f15e"}i.icon.sort.amount.down:before{content:"\f160"}i.icon.sort.amount.up:before{content:"\f161"}i.icon.sort.down:before{content:"\f0dd"}i.icon.sort.numeric.down:before{content:"\f162"}i.icon.sort.numeric.up:before{content:"\f163"}i.icon.sort.up:before{content:"\f0de"}i.icon.soundcloud:before{content:"\f1be"}i.icon.space.shuttle:before{content:"\f197"}i.icon.speakap:before{content:"\f3f3"}i.icon.spinner:before{content:"\f110"}i.icon.spotify:before{content:"\f1bc"}i.icon.square:before{content:"\f0c8"}i.icon.square.full:before{content:"\f45c"}i.icon.stack.exchange:before{content:"\f18d"}i.icon.stack.overflow:before{content:"\f16c"}i.icon.star:before{content:"\f005"}i.icon.star.half:before{content:"\f089"}i.icon.staylinked:before{content:"\f3f5"}i.icon.steam:before{content:"\f1b6"}i.icon.steam.square:before{content:"\f1b7"}i.icon.steam.symbol:before{content:"\f3f6"}i.icon.step.backward:before{content:"\f048"}i.icon.step.forward:before{content:"\f051"}i.icon.stethoscope:before{content:"\f0f1"}i.icon.sticker.mule:before{content:"\f3f7"}i.icon.sticky.note:before{content:"\f249"}i.icon.stop:before{content:"\f04d"}i.icon.stop.circle:before{content:"\f28d"}i.icon.stopwatch:before{content:"\f2f2"}i.icon.strava:before{content:"\f428"}i.icon.street.view:before{content:"\f21d"}i.icon.strikethrough:before{content:"\f0cc"}i.icon.stripe:before{content:"\f429"}i.icon.stripe.s:before{content:"\f42a"}i.icon.studiovinari:before{content:"\f3f8"}i.icon.stumbleupon:before{content:"\f1a4"}i.icon.stumbleupon.circle:before{content:"\f1a3"}i.icon.subscript:before{content:"\f12c"}i.icon.subway:before{content:"\f239"}i.icon.suitcase:before{content:"\f0f2"}i.icon.sun:before{content:"\f185"}i.icon.superpowers:before{content:"\f2dd"}i.icon.superscript:before{content:"\f12b"}i.icon.supple:before{content:"\f3f9"}i.icon.sync:before{content:"\f021"}i.icon.sync.alternate:before{content:"\f2f1"}i.icon.syringe:before{content:"\f48e"}i.icon.table:before{content:"\f0ce"}i.icon.table.tennis:before{content:"\f45d"}i.icon.tablet:before{content:"\f10a"}i.icon.tablet.alternate:before{content:"\f3fa"}i.icon.tachometer.alternate:before{content:"\f3fd"}i.icon.tag:before{content:"\f02b"}i.icon.tags:before{content:"\f02c"}i.icon.tasks:before{content:"\f0ae"}i.icon.taxi:before{content:"\f1ba"}i.icon.telegram:before{content:"\f2c6"}i.icon.telegram.plane:before{content:"\f3fe"}i.icon.tencent.weibo:before{content:"\f1d5"}i.icon.terminal:before{content:"\f120"}i.icon.text.height:before{content:"\f034"}i.icon.text.width:before{content:"\f035"}i.icon.th:before{content:"\f00a"}i.icon.th.large:before{content:"\f009"}i.icon.th.list:before{content:"\f00b"}i.icon.themeisle:before{content:"\f2b2"}i.icon.thermometer:before{content:"\f491"}i.icon.thermometer.empty:before{content:"\f2cb"}i.icon.thermometer.full:before{content:"\f2c7"}i.icon.thermometer.half:before{content:"\f2c9"}i.icon.thermometer.quarter:before{content:"\f2ca"}i.icon.thermometer.three.quarters:before{content:"\f2c8"}i.icon.thumbs.down:before{content:"\f165"}i.icon.thumbs.up:before{content:"\f164"}i.icon.thumbtack:before{content:"\f08d"}i.icon.ticket.alternate:before{content:"\f3ff"}i.icon.times:before{content:"\f00d"}i.icon.times.circle:before{content:"\f057"}i.icon.tint:before{content:"\f043"}i.icon.toggle.off:before{content:"\f204"}i.icon.toggle.on:before{content:"\f205"}i.icon.trademark:before{content:"\f25c"}i.icon.train:before{content:"\f238"}i.icon.transgender:before{content:"\f224"}i.icon.transgender.alternate:before{content:"\f225"}i.icon.trash:before{content:"\f1f8"}i.icon.trash.alternate:before{content:"\f2ed"}i.icon.tree:before{content:"\f1bb"}i.icon.trello:before{content:"\f181"}i.icon.tripadvisor:before{content:"\f262"}i.icon.trophy:before{content:"\f091"}i.icon.truck:before{content:"\f0d1"}i.icon.tty:before{content:"\f1e4"}i.icon.tumblr:before{content:"\f173"}i.icon.tumblr.square:before{content:"\f174"}i.icon.tv:before{content:"\f26c"}i.icon.twitch:before{content:"\f1e8"}i.icon.twitter:before{content:"\f099"}i.icon.twitter.square:before{content:"\f081"}i.icon.typo3:before{content:"\f42b"}i.icon.uber:before{content:"\f402"}i.icon.uikit:before{content:"\f403"}i.icon.umbrella:before{content:"\f0e9"}i.icon.underline:before{content:"\f0cd"}i.icon.undo:before{content:"\f0e2"}i.icon.undo.alternate:before{content:"\f2ea"}i.icon.uniregistry:before{content:"\f404"}i.icon.universal.access:before{content:"\f29a"}i.icon.university:before{content:"\f19c"}i.icon.unlink:before{content:"\f127"}i.icon.unlock:before{content:"\f09c"}i.icon.unlock.alternate:before{content:"\f13e"}i.icon.untappd:before{content:"\f405"}i.icon.upload:before{content:"\f093"}i.icon.usb:before{content:"\f287"}i.icon.user:before{content:"\f007"}i.icon.user.circle:before{content:"\f2bd"}i.icon.user.md:before{content:"\f0f0"}i.icon.user.plus:before{content:"\f234"}i.icon.user.secret:before{content:"\f21b"}i.icon.user.times:before{content:"\f235"}i.icon.users:before{content:"\f0c0"}i.icon.ussunnah:before{content:"\f407"}i.icon.utensil.spoon:before{content:"\f2e5"}i.icon.utensils:before{content:"\f2e7"}i.icon.vaadin:before{content:"\f408"}i.icon.venus:before{content:"\f221"}i.icon.venus.double:before{content:"\f226"}i.icon.venus.mars:before{content:"\f228"}i.icon.viacoin:before{content:"\f237"}i.icon.viadeo:before{content:"\f2a9"}i.icon.viadeo.square:before{content:"\f2aa"}i.icon.viber:before{content:"\f409"}i.icon.video:before{content:"\f03d"}i.icon.vimeo:before{content:"\f40a"}i.icon.vimeo.square:before{content:"\f194"}i.icon.vimeo.v:before{content:"\f27d"}i.icon.vine:before{content:"\f1ca"}i.icon.vk:before{content:"\f189"}i.icon.vnv:before{content:"\f40b"}i.icon.volleyball.ball:before{content:"\f45f"}i.icon.volume.down:before{content:"\f027"}i.icon.volume.off:before{content:"\f026"}i.icon.volume.up:before{content:"\f028"}i.icon.vuejs:before{content:"\f41f"}i.icon.warehouse:before{content:"\f494"}i.icon.weibo:before{content:"\f18a"}i.icon.weight:before{content:"\f496"}i.icon.weixin:before{content:"\f1d7"}i.icon.whatsapp:before{content:"\f232"}i.icon.whatsapp.square:before{content:"\f40c"}i.icon.wheelchair:before{content:"\f193"}i.icon.whmcs:before{content:"\f40d"}i.icon.wifi:before{content:"\f1eb"}i.icon.wikipedia.w:before{content:"\f266"}i.icon.window.close:before{content:"\f410"}i.icon.window.maximize:before{content:"\f2d0"}i.icon.window.minimize:before{content:"\f2d1"}i.icon.window.restore:before{content:"\f2d2"}i.icon.windows:before{content:"\f17a"}i.icon.won.sign:before{content:"\f159"}i.icon.wordpress:before{content:"\f19a"}i.icon.wordpress.simple:before{content:"\f411"}i.icon.wpbeginner:before{content:"\f297"}i.icon.wpexplorer:before{content:"\f2de"}i.icon.wpforms:before{content:"\f298"}i.icon.wrench:before{content:"\f0ad"}i.icon.xbox:before{content:"\f412"}i.icon.xing:before{content:"\f168"}i.icon.xing.square:before{content:"\f169"}i.icon.y.combinator:before{content:"\f23b"}i.icon.yahoo:before{content:"\f19e"}i.icon.yandex:before{content:"\f413"}i.icon.yandex.international:before{content:"\f414"}i.icon.yelp:before{content:"\f1e9"}i.icon.yen.sign:before{content:"\f157"}i.icon.yoast:before{content:"\f2b1"}i.icon.youtube:before{content:"\f167"}i.icon.youtube.square:before{content:"\f431"}i.icon.chess.rock:before{content:"\f447"}i.icon.ordered.list:before{content:"\f0cb"}i.icon.unordered.list:before{content:"\f0ca"}i.icon.user.doctor:before{content:"\f0f0"}i.icon.shield:before{content:"\f3ed"}i.icon.puzzle:before{content:"\f12e"}i.icon.credit.card.amazon.pay:before{content:"\f42d"}i.icon.credit.card.american.express:before{content:"\f1f3"}i.icon.credit.card.diners.club:before{content:"\f24c"}i.icon.credit.card.discover:before{content:"\f1f2"}i.icon.credit.card.jcb:before{content:"\f24b"}i.icon.credit.card.mastercard:before{content:"\f1f1"}i.icon.credit.card.paypal:before{content:"\f1f4"}i.icon.credit.card.stripe:before{content:"\f1f5"}i.icon.credit.card.visa:before{content:"\f1f0"}i.icon.add.circle:before{content:"\f055"}i.icon.add.square:before{content:"\f0fe"}i.icon.add.to.calendar:before{content:"\f271"}i.icon.add.to.cart:before{content:"\f217"}i.icon.add.user:before{content:"\f234"}i.icon.add:before{content:"\f067"}i.icon.alarm.mute:before{content:"\f1f6"}i.icon.alarm:before{content:"\f0f3"}i.icon.ald:before{content:"\f2a2"}i.icon.als:before{content:"\f2a2"}i.icon.american.express.card:before{content:"\f1f3"}i.icon.american.express:before{content:"\f1f3"}i.icon.amex:before{content:"\f1f3"}i.icon.announcement:before{content:"\f0a1"}i.icon.area.chart:before{content:"\f1fe"}i.icon.area.graph:before{content:"\f1fe"}i.icon.arrow.down.cart:before{content:"\f218"}i.icon.asexual:before{content:"\f22d"}i.icon.asl.interpreting:before{content:"\f2a3"}i.icon.asl:before{content:"\f2a3"}i.icon.assistive.listening.devices:before{content:"\f2a2"}i.icon.attach:before{content:"\f0c6"}i.icon.attention:before{content:"\f06a"}i.icon.balance:before{content:"\f24e"}i.icon.bar:before{content:"\f0fc"}i.icon.bathtub:before{content:"\f2cd"}i.icon.battery.four:before{content:"\f240"}i.icon.battery.high:before{content:"\f241"}i.icon.battery.low:before{content:"\f243"}i.icon.battery.medium:before{content:"\f242"}i.icon.battery.one:before{content:"\f243"}i.icon.battery.three:before{content:"\f241"}i.icon.battery.two:before{content:"\f242"}i.icon.battery.zero:before{content:"\f244"}i.icon.birthday:before{content:"\f1fd"}i.icon.block.layout:before{content:"\f009"}i.icon.bluetooth.alternative:before{content:"\f294"}i.icon.broken.chain:before{content:"\f127"}i.icon.browser:before{content:"\f022"}i.icon.call.square:before{content:"\f098"}i.icon.call:before{content:"\f095"}i.icon.cancel:before{content:"\f00d"}i.icon.cart:before{content:"\f07a"}i.icon.cc:before{content:"\f20a"}i.icon.chain:before{content:"\f0c1"}i.icon.chat:before{content:"\f075"}i.icon.checked.calendar:before{content:"\f274"}i.icon.checkmark:before{content:"\f00c"}i.icon.circle.notched:before{content:"\f1ce"}i.icon.close:before{content:"\f00d"}i.icon.cny:before{content:"\f157"}i.icon.cocktail:before{content:"\f000"}i.icon.commenting:before{content:"\f27a"}i.icon.computer:before{content:"\f108"}i.icon.configure:before{content:"\f0ad"}i.icon.content:before{content:"\f0c9"}i.icon.deafness:before{content:"\f2a4"}i.icon.delete.calendar:before{content:"\f273"}i.icon.delete:before{content:"\f00d"}i.icon.detective:before{content:"\f21b"}i.icon.diners.club.card:before{content:"\f24c"}i.icon.diners.club:before{content:"\f24c"}i.icon.discover.card:before{content:"\f1f2"}i.icon.discover:before{content:"\f1f2"}i.icon.discussions:before{content:"\f086"}i.icon.doctor:before{content:"\f0f0"}i.icon.dollar:before{content:"\f155"}i.icon.dont:before{content:"\f05e"}i.icon.dribble:before{content:"\f17d"}i.icon.drivers.license:before{content:"\f2c2"}i.icon.dropdown:before{content:"\f0d7"}i.icon.eercast:before{content:"\f2da"}i.icon.emergency:before{content:"\f0f9"}i.icon.envira.gallery:before{content:"\f299"}i.icon.erase:before{content:"\f12d"}i.icon.eur:before{content:"\f153"}i.icon.euro:before{content:"\f153"}i.icon.eyedropper:before{content:"\f1fb"}i.icon.fa:before{content:"\f2b4"}i.icon.factory:before{content:"\f275"}i.icon.favorite:before{content:"\f005"}i.icon.feed:before{content:"\f09e"}i.icon.female.homosexual:before{content:"\f226"}i.icon.file.text:before{content:"\f15c"}i.icon.find:before{content:"\f1e5"}i.icon.first.aid:before{content:"\f0fa"}i.icon.five.hundred.pixels:before{content:"\f26e"}i.icon.fork:before{content:"\f126"}i.icon.game:before{content:"\f11b"}i.icon.gay:before{content:"\f227"}i.icon.gbp:before{content:"\f154"}i.icon.gittip:before{content:"\f184"}i.icon.google.plus.circle:before{content:"\f2b3"}i.icon.google.plus.official:before{content:"\f2b3"}i.icon.grab:before{content:"\f255"}i.icon.graduation:before{content:"\f19d"}i.icon.grid.layout:before{content:"\f00a"}i.icon.group:before{content:"\f0c0"}i.icon.h:before{content:"\f0fd"}i.icon.hand.victory:before{content:"\f25b"}i.icon.handicap:before{content:"\f193"}i.icon.hard.of.hearing:before{content:"\f2a4"}i.icon.header:before{content:"\f1dc"}i.icon.help.circle:before{content:"\f059"}i.icon.help:before{content:"\f128"}i.icon.heterosexual:before{content:"\f228"}i.icon.hide:before{content:"\f070"}i.icon.hotel:before{content:"\f236"}i.icon.hourglass.four:before{content:"\f254"}i.icon.hourglass.full:before{content:"\f254"}i.icon.hourglass.one:before{content:"\f251"}i.icon.hourglass.three:before{content:"\f253"}i.icon.hourglass.two:before{content:"\f252"}i.icon.idea:before{content:"\f0eb"}i.icon.ils:before{content:"\f20b"}i.icon.in-cart:before{content:"\f218"}i.icon.inr:before{content:"\f156"}i.icon.intergender:before{content:"\f224"}i.icon.intersex:before{content:"\f224"}i.icon.japan.credit.bureau.card:before{content:"\f24b"}i.icon.japan.credit.bureau:before{content:"\f24b"}i.icon.jcb:before{content:"\f24b"}i.icon.jpy:before{content:"\f157"}i.icon.krw:before{content:"\f159"}i.icon.lab:before{content:"\f0c3"}i.icon.law:before{content:"\f24e"}i.icon.legal:before{content:"\f0e3"}i.icon.lesbian:before{content:"\f226"}i.icon.lightning:before{content:"\f0e7"}i.icon.like:before{content:"\f004"}i.icon.line.graph:before{content:"\f201"}i.icon.linkedin.square:before{content:"\f08c"}i.icon.linkify:before{content:"\f0c1"}i.icon.lira:before{content:"\f195"}i.icon.list.layout:before{content:"\f00b"}i.icon.magnify:before{content:"\f00e"}i.icon.mail.forward:before{content:"\f064"}i.icon.mail.square:before{content:"\f199"}i.icon.mail:before{content:"\f0e0"}i.icon.male.homosexual:before{content:"\f227"}i.icon.man:before{content:"\f222"}i.icon.marker:before{content:"\f041"}i.icon.mars.alternate:before{content:"\f229"}i.icon.mars.horizontal:before{content:"\f22b"}i.icon.mars.vertical:before{content:"\f22a"}i.icon.mastercard.card:before{content:"\f1f1"}i.icon.mastercard:before{content:"\f1f1"}i.icon.microsoft.edge:before{content:"\f282"}i.icon.military:before{content:"\f0fb"}i.icon.ms.edge:before{content:"\f282"}i.icon.mute:before{content:"\f131"}i.icon.new.pied.piper:before{content:"\f2ae"}i.icon.non.binary.transgender:before{content:"\f223"}i.icon.numbered.list:before{content:"\f0cb"}i.icon.optinmonster:before{content:"\f23c"}i.icon.options:before{content:"\f1de"}i.icon.other.gender.horizontal:before{content:"\f22b"}i.icon.other.gender.vertical:before{content:"\f22a"}i.icon.other.gender:before{content:"\f229"}i.icon.payment:before{content:"\f09d"}i.icon.paypal.card:before{content:"\f1f4"}i.icon.pencil.square:before{content:"\f14b"}i.icon.photo:before{content:"\f030"}i.icon.picture:before{content:"\f03e"}i.icon.pie.chart:before{content:"\f200"}i.icon.pie.graph:before{content:"\f200"}i.icon.pied.piper.hat:before{content:"\f2ae"}i.icon.pin:before{content:"\f08d"}i.icon.plus.cart:before{content:"\f217"}i.icon.pocket:before{content:"\f265"}i.icon.point:before{content:"\f041"}i.icon.pointing.down:before{content:"\f0a7"}i.icon.pointing.left:before{content:"\f0a5"}i.icon.pointing.right:before{content:"\f0a4"}i.icon.pointing.up:before{content:"\f0a6"}i.icon.pound:before{content:"\f154"}i.icon.power.cord:before{content:"\f1e6"}i.icon.power:before{content:"\f011"}i.icon.privacy:before{content:"\f084"}i.icon.r.circle:before{content:"\f25d"}i.icon.rain:before{content:"\f0e9"}i.icon.record:before{content:"\f03d"}i.icon.refresh:before{content:"\f021"}i.icon.remove.circle:before{content:"\f057"}i.icon.remove.from.calendar:before{content:"\f272"}i.icon.remove.user:before{content:"\f235"}i.icon.remove:before{content:"\f00d"}i.icon.repeat:before{content:"\f01e"}i.icon.rmb:before{content:"\f157"}i.icon.rouble:before{content:"\f158"}i.icon.rub:before{content:"\f158"}i.icon.ruble:before{content:"\f158"}i.icon.rupee:before{content:"\f156"}i.icon.s15:before{content:"\f2cd"}i.icon.selected.radio:before{content:"\f192"}i.icon.send:before{content:"\f1d8"}i.icon.setting:before{content:"\f013"}i.icon.settings:before{content:"\f085"}i.icon.shekel:before{content:"\f20b"}i.icon.sheqel:before{content:"\f20b"}i.icon.shipping:before{content:"\f0d1"}i.icon.shop:before{content:"\f07a"}i.icon.shuffle:before{content:"\f074"}i.icon.shutdown:before{content:"\f011"}i.icon.sidebar:before{content:"\f0c9"}i.icon.signing:before{content:"\f2a7"}i.icon.signup:before{content:"\f044"}i.icon.sliders:before{content:"\f1de"}i.icon.soccer:before{content:"\f1e3"}i.icon.sort.alphabet.ascending:before{content:"\f15d"}i.icon.sort.alphabet.descending:before{content:"\f15e"}i.icon.sort.ascending:before{content:"\f0de"}i.icon.sort.content.ascending:before{content:"\f160"}i.icon.sort.content.descending:before{content:"\f161"}i.icon.sort.descending:before{content:"\f0dd"}i.icon.sort.numeric.ascending:before{content:"\f162"}i.icon.sort.numeric.descending:before{content:"\f163"}i.icon.sound:before{content:"\f025"}i.icon.spy:before{content:"\f21b"}i.icon.stripe.card:before{content:"\f1f5"}i.icon.student:before{content:"\f19d"}i.icon.talk:before{content:"\f27a"}i.icon.target:before{content:"\f140"}i.icon.teletype:before{content:"\f1e4"}i.icon.television:before{content:"\f26c"}i.icon.text.cursor:before{content:"\f246"}i.icon.text.telephone:before{content:"\f1e4"}i.icon.theme.isle:before{content:"\f2b2"}i.icon.theme:before{content:"\f043"}i.icon.thermometer:before{content:"\f2c7"}i.icon.thumb.tack:before{content:"\f08d"}i.icon.time:before{content:"\f017"}i.icon.tm:before{content:"\f25c"}i.icon.toggle.down:before{content:"\f150"}i.icon.toggle.left:before{content:"\f191"}i.icon.toggle.right:before{content:"\f152"}i.icon.toggle.up:before{content:"\f151"}i.icon.translate:before{content:"\f1ab"}i.icon.travel:before{content:"\f0b1"}i.icon.treatment:before{content:"\f0f1"}i.icon.triangle.down:before{content:"\f0d7"}i.icon.triangle.left:before{content:"\f0d9"}i.icon.triangle.right:before{content:"\f0da"}i.icon.triangle.up:before{content:"\f0d8"}i.icon.try:before{content:"\f195"}i.icon.unhide:before{content:"\f06e"}i.icon.unlinkify:before{content:"\f127"}i.icon.unmute:before{content:"\f130"}i.icon.usd:before{content:"\f155"}i.icon.user.cancel:before{content:"\f235"}i.icon.user.close:before{content:"\f235"}i.icon.user.delete:before{content:"\f235"}i.icon.user.x:before{content:"\f235"}i.icon.vcard:before{content:"\f2bb"}i.icon.video.camera:before{content:"\f03d"}i.icon.video.play:before{content:"\f144"}i.icon.visa.card:before{content:"\f1f0"}i.icon.visa:before{content:"\f1f0"}i.icon.volume.control.phone:before{content:"\f2a0"}i.icon.wait:before{content:"\f017"}i.icon.warning.circle:before{content:"\f06a"}i.icon.warning.sign:before{content:"\f071"}i.icon.warning:before{content:"\f12a"}i.icon.wechat:before{content:"\f1d7"}i.icon.wi-fi:before{content:"\f1eb"}i.icon.wikipedia:before{content:"\f266"}i.icon.winner:before{content:"\f091"}i.icon.wizard:before{content:"\f0d0"}i.icon.woman:before{content:"\f221"}i.icon.won:before{content:"\f159"}i.icon.wordpress.beginner:before{content:"\f297"}i.icon.wordpress.forms:before{content:"\f298"}i.icon.world:before{content:"\f0ac"}i.icon.write.square:before{content:"\f14b"}i.icon.x:before{content:"\f00d"}i.icon.yc:before{content:"\f23b"}i.icon.ycombinator:before{content:"\f23b"}i.icon.yen:before{content:"\f157"}i.icon.zip:before{content:"\f187"}i.icon.zoom-in:before{content:"\f00e"}i.icon.zoom-out:before{content:"\f010"}i.icon.zoom:before{content:"\f00e"}i.icon.bitbucket.square:before{content:"\f171"}i.icon.checkmark.box:before{content:"\f14a"}i.icon.circle.thin:before{content:"\f111"}i.icon.cloud.download:before{content:"\f381"}i.icon.cloud.upload:before{content:"\f382"}i.icon.compose:before{content:"\f303"}i.icon.conversation:before{content:"\f086"}i.icon.credit.card.alternative:before{content:"\f09d"}i.icon.currency:before{content:"\f3d1"}i.icon.dashboard:before{content:"\f3fd"}i.icon.diamond:before{content:"\f3a5"}i.icon.disk:before{content:"\f0a0"}i.icon.exchange:before{content:"\f362"}i.icon.external.share:before{content:"\f14d"}i.icon.external.square:before{content:"\f360"}i.icon.external:before{content:"\f35d"}i.icon.facebook.official:before{content:"\f082"}i.icon.food:before{content:"\f2e7"}i.icon.hourglass.zero:before{content:"\f253"}i.icon.level.down:before{content:"\f3be"}i.icon.level.up:before{content:"\f3bf"}i.icon.logout:before{content:"\f2f5"}i.icon.meanpath:before{content:"\f0c8"}i.icon.money:before{content:"\f3d1"}i.icon.move:before{content:"\f0b2"}i.icon.pencil:before{content:"\f303"}i.icon.protect:before{content:"\f023"}i.icon.radio:before{content:"\f192"}i.icon.remove.bookmark:before{content:"\f02e"}i.icon.resize.horizontal:before{content:"\f337"}i.icon.resize.vertical:before{content:"\f338"}i.icon.sign-in:before{content:"\f2f6"}i.icon.sign-out:before{content:"\f2f5"}i.icon.spoon:before{content:"\f2e5"}i.icon.star.half.empty:before{content:"\f089"}i.icon.star.half.full:before{content:"\f089"}i.icon.ticket:before{content:"\f3ff"}i.icon.times.rectangle:before{content:"\f410"}i.icon.write:before{content:"\f303"}i.icon.youtube.play:before{content:"\f167"}@font-face{font-family:outline-icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.outline{font-family:outline-icons}i.icon.address.book.outline:before{content:"\f2b9"}i.icon.address.card.outline:before{content:"\f2bb"}i.icon.arrow.alternate.circle.down.outline:before{content:"\f358"}i.icon.arrow.alternate.circle.left.outline:before{content:"\f359"}i.icon.arrow.alternate.circle.right.outline:before{content:"\f35a"}i.icon.arrow.alternate.circle.up.outline:before{content:"\f35b"}i.icon.bell.outline:before{content:"\f0f3"}i.icon.bell.slash.outline:before{content:"\f1f6"}i.icon.bookmark.outline:before{content:"\f02e"}i.icon.building.outline:before{content:"\f1ad"}i.icon.calendar.outline:before{content:"\f133"}i.icon.calendar.alternate.outline:before{content:"\f073"}i.icon.calendar.check.outline:before{content:"\f274"}i.icon.calendar.minus.outline:before{content:"\f272"}i.icon.calendar.plus.outline:before{content:"\f271"}i.icon.calendar.times.outline:before{content:"\f273"}i.icon.caret.square.down.outline:before{content:"\f150"}i.icon.caret.square.left.outline:before{content:"\f191"}i.icon.caret.square.right.outline:before{content:"\f152"}i.icon.caret.square.up.outline:before{content:"\f151"}i.icon.chart.bar.outline:before{content:"\f080"}i.icon.check.circle.outline:before{content:"\f058"}i.icon.check.square.outline:before{content:"\f14a"}i.icon.circle.outline:before{content:"\f111"}i.icon.clipboard.outline:before{content:"\f328"}i.icon.clock.outline:before{content:"\f017"}i.icon.clone.outline:before{content:"\f24d"}i.icon.closed.captioning.outline:before{content:"\f20a"}i.icon.comment.outline:before{content:"\f075"}i.icon.comment.alternate.outline:before{content:"\f27a"}i.icon.comments.outline:before{content:"\f086"}i.icon.compass.outline:before{content:"\f14e"}i.icon.copy.outline:before{content:"\f0c5"}i.icon.copyright.outline:before{content:"\f1f9"}i.icon.credit.card.outline:before{content:"\f09d"}i.icon.dot.circle.outline:before{content:"\f192"}i.icon.edit.outline:before{content:"\f044"}i.icon.envelope.outline:before{content:"\f0e0"}i.icon.envelope.open.outline:before{content:"\f2b6"}i.icon.eye.slash.outline:before{content:"\f070"}i.icon.file.outline:before{content:"\f15b"}i.icon.file.alternate.outline:before{content:"\f15c"}i.icon.file.archive.outline:before{content:"\f1c6"}i.icon.file.audio.outline:before{content:"\f1c7"}i.icon.file.code.outline:before{content:"\f1c9"}i.icon.file.excel.outline:before{content:"\f1c3"}i.icon.file.image.outline:before{content:"\f1c5"}i.icon.file.pdf.outline:before{content:"\f1c1"}i.icon.file.powerpoint.outline:before{content:"\f1c4"}i.icon.file.video.outline:before{content:"\f1c8"}i.icon.file.word.outline:before{content:"\f1c2"}i.icon.flag.outline:before{content:"\f024"}i.icon.folder.outline:before{content:"\f07b"}i.icon.folder.open.outline:before{content:"\f07c"}i.icon.frown.outline:before{content:"\f119"}i.icon.futbol.outline:before{content:"\f1e3"}i.icon.gem.outline:before{content:"\f3a5"}i.icon.hand.lizard.outline:before{content:"\f258"}i.icon.hand.paper.outline:before{content:"\f256"}i.icon.hand.peace.outline:before{content:"\f25b"}i.icon.hand.point.down.outline:before{content:"\f0a7"}i.icon.hand.point.left.outline:before{content:"\f0a5"}i.icon.hand.point.right.outline:before{content:"\f0a4"}i.icon.hand.point.up.outline:before{content:"\f0a6"}i.icon.hand.pointer.outline:before{content:"\f25a"}i.icon.hand.rock.outline:before{content:"\f255"}i.icon.hand.scissors.outline:before{content:"\f257"}i.icon.hand.spock.outline:before{content:"\f259"}i.icon.handshake.outline:before{content:"\f2b5"}i.icon.hdd.outline:before{content:"\f0a0"}i.icon.heart.outline:before{content:"\f004"}i.icon.hospital.outline:before{content:"\f0f8"}i.icon.hourglass.outline:before{content:"\f254"}i.icon.id.badge.outline:before{content:"\f2c1"}i.icon.id.card.outline:before{content:"\f2c2"}i.icon.image.outline:before{content:"\f03e"}i.icon.images.outline:before{content:"\f302"}i.icon.keyboard.outline:before{content:"\f11c"}i.icon.lemon.outline:before{content:"\f094"}i.icon.life.ring.outline:before{content:"\f1cd"}i.icon.lightbulb.outline:before{content:"\f0eb"}i.icon.list.alternate.outline:before{content:"\f022"}i.icon.map.outline:before{content:"\f279"}i.icon.meh.outline:before{content:"\f11a"}i.icon.minus.square.outline:before{content:"\f146"}i.icon.money.bill.alternate.outline:before{content:"\f3d1"}i.icon.moon.outline:before{content:"\f186"}i.icon.newspaper.outline:before{content:"\f1ea"}i.icon.object.group.outline:before{content:"\f247"}i.icon.object.ungroup.outline:before{content:"\f248"}i.icon.paper.plane.outline:before{content:"\f1d8"}i.icon.pause.circle.outline:before{content:"\f28b"}i.icon.play.circle.outline:before{content:"\f144"}i.icon.plus.square.outline:before{content:"\f0fe"}i.icon.question.circle.outline:before{content:"\f059"}i.icon.registered.outline:before{content:"\f25d"}i.icon.save.outline:before{content:"\f0c7"}i.icon.share.square.outline:before{content:"\f14d"}i.icon.smile.outline:before{content:"\f118"}i.icon.snowflake.outline:before{content:"\f2dc"}i.icon.square.outline:before{content:"\f0c8"}i.icon.star.outline:before{content:"\f005"}i.icon.star.half.outline:before{content:"\f089"}i.icon.sticky.note.outline:before{content:"\f249"}i.icon.stop.circle.outline:before{content:"\f28d"}i.icon.sun.outline:before{content:"\f185"}i.icon.thumbs.down.outline:before{content:"\f165"}i.icon.thumbs.up.outline:before{content:"\f164"}i.icon.times.circle.outline:before{content:"\f057"}i.icon.trash.alternate.outline:before{content:"\f2ed"}i.icon.user.outline:before{content:"\f007"}i.icon.user.circle.outline:before{content:"\f2bd"}i.icon.window.close.outline:before{content:"\f410"}i.icon.window.maximize.outline:before{content:"\f2d0"}i.icon.window.minimize.outline:before{content:"\f2d1"}i.icon.window.restore.outline:before{content:"\f2d2"}i.icon.disk.outline:before{content:"\f369"}i.icon.heart.empty,i.icon.star.empty{font-family:outline-icons}i.icon.heart.empty:before{content:"\f004"}i.icon.star.empty:before{content:"\f089"}@font-face{font-family:brand-icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.\35 00px,i.icon.accessible.icon,i.icon.accusoft,i.icon.adn,i.icon.adversal,i.icon.affiliatetheme,i.icon.algolia,i.icon.amazon,i.icon.amazon.pay,i.icon.amilia,i.icon.android,i.icon.angellist,i.icon.angrycreative,i.icon.angular,i.icon.app.store,i.icon.app.store.ios,i.icon.apper,i.icon.apple,i.icon.apple.pay,i.icon.asymmetrik,i.icon.audible,i.icon.autoprefixer,i.icon.avianex,i.icon.aviato,i.icon.aws,i.icon.bandcamp,i.icon.behance,i.icon.behance.square,i.icon.bimobject,i.icon.bitbucket,i.icon.bitcoin,i.icon.bity,i.icon.black.tie,i.icon.blackberry,i.icon.blogger,i.icon.blogger.b,i.icon.bluetooth,i.icon.bluetooth.b,i.icon.btc,i.icon.buromobelexperte,i.icon.buysellads,i.icon.cc.amazon.pay,i.icon.cc.amex,i.icon.cc.apple.pay,i.icon.cc.diners.club,i.icon.cc.discover,i.icon.cc.jcb,i.icon.cc.mastercard,i.icon.cc.paypal,i.icon.cc.stripe,i.icon.cc.visa,i.icon.centercode,i.icon.chrome,i.icon.cloudscale,i.icon.cloudsmith,i.icon.cloudversify,i.icon.codepen,i.icon.codiepie,i.icon.connectdevelop,i.icon.contao,i.icon.cpanel,i.icon.creative.commons,i.icon.css3,i.icon.css3.alternate,i.icon.cuttlefish,i.icon.d.and.d,i.icon.dashcube,i.icon.delicious,i.icon.deploydog,i.icon.deskpro,i.icon.deviantart,i.icon.digg,i.icon.digital.ocean,i.icon.discord,i.icon.discourse,i.icon.dochub,i.icon.docker,i.icon.draft2digital,i.icon.dribbble,i.icon.dribbble.square,i.icon.dropbox,i.icon.drupal,i.icon.dyalog,i.icon.earlybirds,i.icon.edge,i.icon.elementor,i.icon.ember,i.icon.empire,i.icon.envira,i.icon.erlang,i.icon.ethereum,i.icon.etsy,i.icon.expeditedssl,i.icon.facebook,i.icon.facebook.f,i.icon.facebook.messenger,i.icon.facebook.square,i.icon.firefox,i.icon.first.order,i.icon.firstdraft,i.icon.flickr,i.icon.flipboard,i.icon.fly,i.icon.font.awesome,i.icon.font.awesome.alternate,i.icon.font.awesome.flag,i.icon.fonticons,i.icon.fonticons.fi,i.icon.fort.awesome,i.icon.fort.awesome.alternate,i.icon.forumbee,i.icon.foursquare,i.icon.free.code.camp,i.icon.freebsd,i.icon.get.pocket,i.icon.gg,i.icon.gg.circle,i.icon.git,i.icon.git.square,i.icon.github,i.icon.github.alternate,i.icon.github.square,i.icon.gitkraken,i.icon.gitlab,i.icon.gitter,i.icon.glide,i.icon.glide.g,i.icon.gofore,i.icon.goodreads,i.icon.goodreads.g,i.icon.google,i.icon.google.drive,i.icon.google.play,i.icon.google.plus,i.icon.google.plus.g,i.icon.google.plus.square,i.icon.google.wallet,i.icon.gratipay,i.icon.grav,i.icon.gripfire,i.icon.grunt,i.icon.gulp,i.icon.hacker.news,i.icon.hacker.news.square,i.icon.hips,i.icon.hire.a.helper,i.icon.hooli,i.icon.hotjar,i.icon.houzz,i.icon.html5,i.icon.hubspot,i.icon.imdb,i.icon.instagram,i.icon.internet.explorer,i.icon.ioxhost,i.icon.itunes,i.icon.itunes.note,i.icon.jenkins,i.icon.joget,i.icon.joomla,i.icon.js,i.icon.js.square,i.icon.jsfiddle,i.icon.keycdn,i.icon.kickstarter,i.icon.kickstarter.k,i.icon.korvue,i.icon.laravel,i.icon.lastfm,i.icon.lastfm.square,i.icon.leanpub,i.icon.less,i.icon.linechat,i.icon.linkedin,i.icon.linkedin.alternate,i.icon.linkedin.in,i.icon.linode,i.icon.linux,i.icon.lyft,i.icon.magento,i.icon.maxcdn,i.icon.medapps,i.icon.medium,i.icon.medium.m,i.icon.medrt,i.icon.meetup,i.icon.microsoft,i.icon.mix,i.icon.mixcloud,i.icon.mizuni,i.icon.modx,i.icon.monero,i.icon.napster,i.icon.nintendo.switch,i.icon.node,i.icon.node.js,i.icon.npm,i.icon.ns8,i.icon.nutritionix,i.icon.odnoklassniki,i.icon.odnoklassniki.square,i.icon.opencart,i.icon.openid,i.icon.opera,i.icon.optin.monster,i.icon.osi,i.icon.page4,i.icon.pagelines,i.icon.palfed,i.icon.patreon,i.icon.paypal,i.icon.periscope,i.icon.phabricator,i.icon.phoenix.framework,i.icon.php,i.icon.pied.piper,i.icon.pied.piper.alternate,i.icon.pied.piper.pp,i.icon.pinterest,i.icon.pinterest.p,i.icon.pinterest.square,i.icon.playstation,i.icon.product.hunt,i.icon.pushed,i.icon.python,i.icon.qq,i.icon.quinscape,i.icon.quora,i.icon.ravelry,i.icon.react,i.icon.rebel,i.icon.reddit,i.icon.reddit.alien,i.icon.reddit.square,i.icon.redriver,i.icon.rendact,i.icon.renren,i.icon.replyd,i.icon.resolving,i.icon.rocketchat,i.icon.rockrms,i.icon.safari,i.icon.sass,i.icon.schlix,i.icon.scribd,i.icon.searchengin,i.icon.sellcast,i.icon.sellsy,i.icon.servicestack,i.icon.shirtsinbulk,i.icon.simplybuilt,i.icon.sistrix,i.icon.skyatlas,i.icon.skype,i.icon.slack,i.icon.slack.hash,i.icon.slideshare,i.icon.snapchat,i.icon.snapchat.ghost,i.icon.snapchat.square,i.icon.soundcloud,i.icon.speakap,i.icon.spotify,i.icon.stack.exchange,i.icon.stack.overflow,i.icon.staylinked,i.icon.steam,i.icon.steam.square,i.icon.steam.symbol,i.icon.sticker.mule,i.icon.strava,i.icon.stripe,i.icon.stripe.s,i.icon.studiovinari,i.icon.stumbleupon,i.icon.stumbleupon.circle,i.icon.superpowers,i.icon.supple,i.icon.telegram,i.icon.telegram.plane,i.icon.tencent.weibo,i.icon.themeisle,i.icon.trello,i.icon.tripadvisor,i.icon.tumblr,i.icon.tumblr.square,i.icon.twitch,i.icon.twitter,i.icon.twitter.square,i.icon.typo3,i.icon.uber,i.icon.uikit,i.icon.uniregistry,i.icon.untappd,i.icon.usb,i.icon.ussunnah,i.icon.vaadin,i.icon.viacoin,i.icon.viadeo,i.icon.viadeo.square,i.icon.viber,i.icon.vimeo,i.icon.vimeo.square,i.icon.vimeo.v,i.icon.vine,i.icon.vk,i.icon.vnv,i.icon.vuejs,i.icon.wechat,i.icon.weibo,i.icon.weixin,i.icon.whatsapp,i.icon.whatsapp.square,i.icon.whmcs,i.icon.wikipedia.w,i.icon.windows,i.icon.wordpress,i.icon.wordpress.simple,i.icon.wpbeginner,i.icon.wpexplorer,i.icon.wpforms,i.icon.xbox,i.icon.xing,i.icon.xing.square,i.icon.y.combinator,i.icon.yahoo,i.icon.yandex,i.icon.yandex.international,i.icon.yelp,i.icon.yoast,i.icon.youtube,i.icon.youtube.square{font-family:brand-icons}
\ No newline at end of file
+ */@font-face{font-family:Icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon{display:inline-block;opacity:1;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;text-align:center;speak:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-backface-visibility:hidden;backface-visibility:hidden}i.icon:before{background:0 0!important}i.icon.loading{height:1em;line-height:1;-webkit-animation:loader 2s linear infinite;animation:loader 2s linear infinite}i.emphasized.icon:not(.disabled),i.emphasized.icons:not(.disabled),i.icon:active,i.icon:hover,i.icons:active,i.icons:hover{opacity:1}i.disabled.icon,i.disabled.icons{opacity:.45;cursor:default;pointer-events:none}i.fitted.icon{width:auto;margin:0!important}i.link.icon:not(.disabled),i.link.icons:not(.disabled){cursor:pointer;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}i.link.icon:hover,i.link.icons:hover{opacity:1}i.circular.icon{border-radius:500em!important;line-height:1!important;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:2em!important;height:2em!important}i.circular.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.flipped.icon,i.horizontally.flipped.icon{-webkit-transform:scale(-1,1);transform:scale(-1,1)}i.vertically.flipped.icon{-webkit-transform:scale(1,-1);transform:scale(1,-1)}i.clockwise.rotated.icon,i.right.rotated.icon,i.rotated.icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}i.counterclockwise.rotated.icon,i.left.rotated.icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}i.halfway.rotated.icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}i.clockwise.rotated.flipped.icon,i.right.rotated.flipped.icon,i.rotated.flipped.icon{-webkit-transform:scale(-1,1) rotate(90deg);transform:scale(-1,1) rotate(90deg)}i.counterclockwise.rotated.flipped.icon,i.left.rotated.flipped.icon{-webkit-transform:scale(-1,1) rotate(-90deg);transform:scale(-1,1) rotate(-90deg)}i.halfway.rotated.flipped.icon{-webkit-transform:scale(-1,1) rotate(180deg);transform:scale(-1,1) rotate(180deg)}i.clockwise.rotated.vertically.flipped.icon,i.right.rotated.vertically.flipped.icon,i.rotated.vertically.flipped.icon{-webkit-transform:scale(1,-1) rotate(90deg);transform:scale(1,-1) rotate(90deg)}i.counterclockwise.rotated.vertically.flipped.icon,i.left.rotated.vertically.flipped.icon{-webkit-transform:scale(1,-1) rotate(-90deg);transform:scale(1,-1) rotate(-90deg)}i.halfway.rotated.vertically.flipped.icon{-webkit-transform:scale(1,-1) rotate(180deg);transform:scale(1,-1) rotate(180deg)}i.bordered.icon{line-height:1;vertical-align:baseline;width:2em;height:2em;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset}i.bordered.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.inverted.bordered.icon,i.inverted.circular.icon{background-color:#1b1c1d;color:#fff}i.inverted.icon{color:#fff}i.primary.icon.icon.icon.icon{color:#2185d0}i.inverted.primary.icon.icon.icon.icon{color:#54c8ff}i.inverted.bordered.primary.icon.icon.icon.icon,i.inverted.circular.primary.icon.icon.icon.icon{background-color:#2185d0;color:#fff}i.secondary.icon.icon.icon.icon{color:#1b1c1d}i.inverted.secondary.icon.icon.icon.icon{color:#545454}i.inverted.bordered.secondary.icon.icon.icon.icon,i.inverted.circular.secondary.icon.icon.icon.icon{background-color:#1b1c1d;color:#fff}i.red.icon.icon.icon.icon{color:#db2828}i.inverted.red.icon.icon.icon.icon{color:#ff695e}i.inverted.bordered.red.icon.icon.icon.icon,i.inverted.circular.red.icon.icon.icon.icon{background-color:#db2828;color:#fff}i.orange.icon.icon.icon.icon{color:#f2711c}i.inverted.orange.icon.icon.icon.icon{color:#ff851b}i.inverted.bordered.orange.icon.icon.icon.icon,i.inverted.circular.orange.icon.icon.icon.icon{background-color:#f2711c;color:#fff}i.yellow.icon.icon.icon.icon{color:#fbbd08}i.inverted.yellow.icon.icon.icon.icon{color:#ffe21f}i.inverted.bordered.yellow.icon.icon.icon.icon,i.inverted.circular.yellow.icon.icon.icon.icon{background-color:#fbbd08;color:#fff}i.olive.icon.icon.icon.icon{color:#b5cc18}i.inverted.olive.icon.icon.icon.icon{color:#d9e778}i.inverted.bordered.olive.icon.icon.icon.icon,i.inverted.circular.olive.icon.icon.icon.icon{background-color:#b5cc18;color:#fff}i.green.icon.icon.icon.icon{color:#21ba45}i.inverted.green.icon.icon.icon.icon{color:#2ecc40}i.inverted.bordered.green.icon.icon.icon.icon,i.inverted.circular.green.icon.icon.icon.icon{background-color:#21ba45;color:#fff}i.teal.icon.icon.icon.icon{color:#00b5ad}i.inverted.teal.icon.icon.icon.icon{color:#6dffff}i.inverted.bordered.teal.icon.icon.icon.icon,i.inverted.circular.teal.icon.icon.icon.icon{background-color:#00b5ad;color:#fff}i.blue.icon.icon.icon.icon{color:#2185d0}i.inverted.blue.icon.icon.icon.icon{color:#54c8ff}i.inverted.bordered.blue.icon.icon.icon.icon,i.inverted.circular.blue.icon.icon.icon.icon{background-color:#2185d0;color:#fff}i.violet.icon.icon.icon.icon{color:#6435c9}i.inverted.violet.icon.icon.icon.icon{color:#a291fb}i.inverted.bordered.violet.icon.icon.icon.icon,i.inverted.circular.violet.icon.icon.icon.icon{background-color:#6435c9;color:#fff}i.purple.icon.icon.icon.icon{color:#a333c8}i.inverted.purple.icon.icon.icon.icon{color:#dc73ff}i.inverted.bordered.purple.icon.icon.icon.icon,i.inverted.circular.purple.icon.icon.icon.icon{background-color:#a333c8;color:#fff}i.pink.icon.icon.icon.icon{color:#e03997}i.inverted.pink.icon.icon.icon.icon{color:#ff8edf}i.inverted.bordered.pink.icon.icon.icon.icon,i.inverted.circular.pink.icon.icon.icon.icon{background-color:#e03997;color:#fff}i.brown.icon.icon.icon.icon{color:#a5673f}i.inverted.brown.icon.icon.icon.icon{color:#d67c1c}i.inverted.bordered.brown.icon.icon.icon.icon,i.inverted.circular.brown.icon.icon.icon.icon{background-color:#a5673f;color:#fff}i.grey.icon.icon.icon.icon{color:#767676}i.inverted.grey.icon.icon.icon.icon{color:#dcddde}i.inverted.bordered.grey.icon.icon.icon.icon,i.inverted.circular.grey.icon.icon.icon.icon{background-color:#767676;color:#fff}i.black.icon.icon.icon.icon{color:#1b1c1d}i.inverted.black.icon.icon.icon.icon{color:#545454}i.inverted.bordered.black.icon.icon.icon.icon,i.inverted.circular.black.icon.icon.icon.icon{background-color:#1b1c1d;color:#fff}i.icon,i.icons{font-size:1em}i.mini.mini.mini.icon,i.mini.mini.mini.icons{line-height:1;vertical-align:middle;font-size:.4em}i.tiny.tiny.tiny.icon,i.tiny.tiny.tiny.icons{line-height:1;vertical-align:middle;font-size:.5em}i.small.small.small.icon,i.small.small.small.icons{line-height:1;vertical-align:middle;font-size:.75em}i.large.large.large.icon,i.large.large.large.icons{line-height:1;vertical-align:middle;font-size:1.5em}i.big.big.big.icon,i.big.big.big.icons{line-height:1;vertical-align:middle;font-size:2em}i.huge.huge.huge.icon,i.huge.huge.huge.icons{line-height:1;vertical-align:middle;font-size:4em}i.massive.massive.massive.icon,i.massive.massive.massive.icons{line-height:1;vertical-align:middle;font-size:8em}i.icons{display:inline-block;position:relative;line-height:1}i.icons .icon{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);margin:0}i.icons .icon:first-child{position:static;width:auto;height:auto;vertical-align:top;-webkit-transform:none;transform:none}i.icons .corner.icon{top:auto;left:auto;right:0;bottom:0;-webkit-transform:none;transform:none;font-size:.45em;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff}i.icons .icon.corner[class*="top right"]{top:0;left:auto;right:0;bottom:auto}i.icons .icon.corner[class*="top left"]{top:0;left:0;right:auto;bottom:auto}i.icons .icon.corner[class*="bottom left"]{top:auto;left:0;right:auto;bottom:0}i.icons .icon.corner[class*="bottom right"]{top:auto;left:auto;right:0;bottom:0}i.icons .inverted.corner.icon{text-shadow:-1px -1px 0 #1b1c1d,1px -1px 0 #1b1c1d,-1px 1px 0 #1b1c1d,1px 1px 0 #1b1c1d}i.icon.linkedin.in:before{content:"\f0e1"}i.icon.zoom.in:before{content:"\f00e"}i.icon.zoom.out:before{content:"\f010"}i.icon.sign.in:before{content:"\f2f6"}i.icon.in.cart:before{content:"\f218"}i.icon.log.out:before{content:"\f2f5"}i.icon.sign.out:before{content:"\f2f5"}i.icon.ad:before{content:"\f641"}i.icon.address.book:before{content:"\f2b9"}i.icon.address.card:before{content:"\f2bb"}i.icon.adjust:before{content:"\f042"}i.icon.air.freshener:before{content:"\f5d0"}i.icon.align.center:before{content:"\f037"}i.icon.align.justify:before{content:"\f039"}i.icon.align.left:before{content:"\f036"}i.icon.align.right:before{content:"\f038"}i.icon.allergies:before{content:"\f461"}i.icon.ambulance:before{content:"\f0f9"}i.icon.american.sign.language.interpreting:before{content:"\f2a3"}i.icon.anchor:before{content:"\f13d"}i.icon.angle.double.down:before{content:"\f103"}i.icon.angle.double.left:before{content:"\f100"}i.icon.angle.double.right:before{content:"\f101"}i.icon.angle.double.up:before{content:"\f102"}i.icon.angle.down:before{content:"\f107"}i.icon.angle.left:before{content:"\f104"}i.icon.angle.right:before{content:"\f105"}i.icon.angle.up:before{content:"\f106"}i.icon.angry:before{content:"\f556"}i.icon.ankh:before{content:"\f644"}i.icon.archive:before{content:"\f187"}i.icon.archway:before{content:"\f557"}i.icon.arrow.alternate.circle.down:before{content:"\f358"}i.icon.arrow.alternate.circle.left:before{content:"\f359"}i.icon.arrow.alternate.circle.right:before{content:"\f35a"}i.icon.arrow.alternate.circle.up:before{content:"\f35b"}i.icon.arrow.circle.down:before{content:"\f0ab"}i.icon.arrow.circle.left:before{content:"\f0a8"}i.icon.arrow.circle.right:before{content:"\f0a9"}i.icon.arrow.circle.up:before{content:"\f0aa"}i.icon.arrow.left:before{content:"\f060"}i.icon.arrow.right:before{content:"\f061"}i.icon.arrow.up:before{content:"\f062"}i.icon.arrow.down:before{content:"\f063"}i.icon.arrows.alternate:before{content:"\f0b2"}i.icon.arrows.alternate.horizontal:before{content:"\f337"}i.icon.arrows.alternate.vertical:before{content:"\f338"}i.icon.assistive.listening.systems:before{content:"\f2a2"}i.icon.asterisk:before{content:"\f069"}i.icon.at:before{content:"\f1fa"}i.icon.atlas:before{content:"\f558"}i.icon.atom:before{content:"\f5d2"}i.icon.audio.description:before{content:"\f29e"}i.icon.award:before{content:"\f559"}i.icon.baby:before{content:"\f77c"}i.icon.baby.carriage:before{content:"\f77d"}i.icon.backspace:before{content:"\f55a"}i.icon.backward:before{content:"\f04a"}i.icon.bacon:before{content:"\f7e5"}i.icon.bahai:before{content:"\f666"}i.icon.balance.scale:before{content:"\f24e"}i.icon.balance.scale.left:before{content:"\f515"}i.icon.balance.scale.right:before{content:"\f516"}i.icon.ban:before{content:"\f05e"}i.icon.band.aid:before{content:"\f462"}i.icon.barcode:before{content:"\f02a"}i.icon.bars:before{content:"\f0c9"}i.icon.baseball.ball:before{content:"\f433"}i.icon.basketball.ball:before{content:"\f434"}i.icon.bath:before{content:"\f2cd"}i.icon.battery.empty:before{content:"\f244"}i.icon.battery.full:before{content:"\f240"}i.icon.battery.half:before{content:"\f242"}i.icon.battery.quarter:before{content:"\f243"}i.icon.battery.three.quarters:before{content:"\f241"}i.icon.bed:before{content:"\f236"}i.icon.beer:before{content:"\f0fc"}i.icon.bell:before{content:"\f0f3"}i.icon.bell.slash:before{content:"\f1f6"}i.icon.bezier.curve:before{content:"\f55b"}i.icon.bible:before{content:"\f647"}i.icon.bicycle:before{content:"\f206"}i.icon.biking:before{content:"\f84a"}i.icon.binoculars:before{content:"\f1e5"}i.icon.biohazard:before{content:"\f780"}i.icon.birthday.cake:before{content:"\f1fd"}i.icon.blender:before{content:"\f517"}i.icon.blender.phone:before{content:"\f6b6"}i.icon.blind:before{content:"\f29d"}i.icon.blog:before{content:"\f781"}i.icon.bold:before{content:"\f032"}i.icon.bolt:before{content:"\f0e7"}i.icon.bomb:before{content:"\f1e2"}i.icon.bone:before{content:"\f5d7"}i.icon.bong:before{content:"\f55c"}i.icon.book:before{content:"\f02d"}i.icon.book.dead:before{content:"\f6b7"}i.icon.book.medical:before{content:"\f7e6"}i.icon.book.open:before{content:"\f518"}i.icon.book.reader:before{content:"\f5da"}i.icon.bookmark:before{content:"\f02e"}i.icon.border.all:before{content:"\f84c"}i.icon.border.none:before{content:"\f850"}i.icon.border.style:before{content:"\f853"}i.icon.bowling.ball:before{content:"\f436"}i.icon.box:before{content:"\f466"}i.icon.box.open:before{content:"\f49e"}i.icon.boxes:before{content:"\f468"}i.icon.braille:before{content:"\f2a1"}i.icon.brain:before{content:"\f5dc"}i.icon.bread.slice:before{content:"\f7ec"}i.icon.briefcase:before{content:"\f0b1"}i.icon.briefcase.medical:before{content:"\f469"}i.icon.broadcast.tower:before{content:"\f519"}i.icon.broom:before{content:"\f51a"}i.icon.brush:before{content:"\f55d"}i.icon.bug:before{content:"\f188"}i.icon.building:before{content:"\f1ad"}i.icon.bullhorn:before{content:"\f0a1"}i.icon.bullseye:before{content:"\f140"}i.icon.burn:before{content:"\f46a"}i.icon.bus:before{content:"\f207"}i.icon.bus.alternate:before{content:"\f55e"}i.icon.business.time:before{content:"\f64a"}i.icon.calculator:before{content:"\f1ec"}i.icon.calendar:before{content:"\f133"}i.icon.calendar.alternate:before{content:"\f073"}i.icon.calendar.check:before{content:"\f274"}i.icon.calendar.day:before{content:"\f783"}i.icon.calendar.minus:before{content:"\f272"}i.icon.calendar.plus:before{content:"\f271"}i.icon.calendar.times:before{content:"\f273"}i.icon.calendar.week:before{content:"\f784"}i.icon.camera:before{content:"\f030"}i.icon.camera.retro:before{content:"\f083"}i.icon.campground:before{content:"\f6bb"}i.icon.candy.cane:before{content:"\f786"}i.icon.cannabis:before{content:"\f55f"}i.icon.capsules:before{content:"\f46b"}i.icon.car:before{content:"\f1b9"}i.icon.car.alternate:before{content:"\f5de"}i.icon.car.battery:before{content:"\f5df"}i.icon.car.crash:before{content:"\f5e1"}i.icon.car.side:before{content:"\f5e4"}i.icon.caravan:before{content:"\f8ff"}i.icon.caret.down:before{content:"\f0d7"}i.icon.caret.left:before{content:"\f0d9"}i.icon.caret.right:before{content:"\f0da"}i.icon.caret.square.down:before{content:"\f150"}i.icon.caret.square.left:before{content:"\f191"}i.icon.caret.square.right:before{content:"\f152"}i.icon.caret.square.up:before{content:"\f151"}i.icon.caret.up:before{content:"\f0d8"}i.icon.carrot:before{content:"\f787"}i.icon.cart.arrow.down:before{content:"\f218"}i.icon.cart.plus:before{content:"\f217"}i.icon.cash.register:before{content:"\f788"}i.icon.cat:before{content:"\f6be"}i.icon.certificate:before{content:"\f0a3"}i.icon.chair:before{content:"\f6c0"}i.icon.chalkboard:before{content:"\f51b"}i.icon.chalkboard.teacher:before{content:"\f51c"}i.icon.charging.station:before{content:"\f5e7"}i.icon.chart.area:before{content:"\f1fe"}i.icon.chart.bar:before{content:"\f080"}i.icon.chart.line:before{content:"\f201"}i.icon.chart.pie:before{content:"\f200"}i.icon.check:before{content:"\f00c"}i.icon.check.circle:before{content:"\f058"}i.icon.check.double:before{content:"\f560"}i.icon.check.square:before{content:"\f14a"}i.icon.cheese:before{content:"\f7ef"}i.icon.chess:before{content:"\f439"}i.icon.chess.bishop:before{content:"\f43a"}i.icon.chess.board:before{content:"\f43c"}i.icon.chess.king:before{content:"\f43f"}i.icon.chess.knight:before{content:"\f441"}i.icon.chess.pawn:before{content:"\f443"}i.icon.chess.queen:before{content:"\f445"}i.icon.chess.rook:before{content:"\f447"}i.icon.chevron.circle.down:before{content:"\f13a"}i.icon.chevron.circle.left:before{content:"\f137"}i.icon.chevron.circle.right:before{content:"\f138"}i.icon.chevron.circle.up:before{content:"\f139"}i.icon.chevron.down:before{content:"\f078"}i.icon.chevron.left:before{content:"\f053"}i.icon.chevron.right:before{content:"\f054"}i.icon.chevron.up:before{content:"\f077"}i.icon.child:before{content:"\f1ae"}i.icon.church:before{content:"\f51d"}i.icon.circle:before{content:"\f111"}i.icon.circle.notch:before{content:"\f1ce"}i.icon.city:before{content:"\f64f"}i.icon.clinic.medical:before{content:"\f7f2"}i.icon.clipboard:before{content:"\f328"}i.icon.clipboard.check:before{content:"\f46c"}i.icon.clipboard.list:before{content:"\f46d"}i.icon.clock:before{content:"\f017"}i.icon.clone:before{content:"\f24d"}i.icon.closed.captioning:before{content:"\f20a"}i.icon.cloud:before{content:"\f0c2"}i.icon.cloud.download.alternate:before{content:"\f381"}i.icon.cloud.meatball:before{content:"\f73b"}i.icon.cloud.moon:before{content:"\f6c3"}i.icon.cloud.moon.rain:before{content:"\f73c"}i.icon.cloud.rain:before{content:"\f73d"}i.icon.cloud.showers.heavy:before{content:"\f740"}i.icon.cloud.sun:before{content:"\f6c4"}i.icon.cloud.sun.rain:before{content:"\f743"}i.icon.cloud.upload.alternate:before{content:"\f382"}i.icon.cocktail:before{content:"\f561"}i.icon.code:before{content:"\f121"}i.icon.code.branch:before{content:"\f126"}i.icon.coffee:before{content:"\f0f4"}i.icon.cog:before{content:"\f013"}i.icon.cogs:before{content:"\f085"}i.icon.coins:before{content:"\f51e"}i.icon.columns:before{content:"\f0db"}i.icon.comment:before{content:"\f075"}i.icon.comment.alternate:before{content:"\f27a"}i.icon.comment.dollar:before{content:"\f651"}i.icon.comment.dots:before{content:"\f4ad"}i.icon.comment.medical:before{content:"\f7f5"}i.icon.comment.slash:before{content:"\f4b3"}i.icon.comments:before{content:"\f086"}i.icon.comments.dollar:before{content:"\f653"}i.icon.compact.disc:before{content:"\f51f"}i.icon.compass:before{content:"\f14e"}i.icon.compress:before{content:"\f066"}i.icon.compress.alternate:before{content:"\f422"}i.icon.compress.arrows.alternate:before{content:"\f78c"}i.icon.concierge.bell:before{content:"\f562"}i.icon.cookie:before{content:"\f563"}i.icon.cookie.bite:before{content:"\f564"}i.icon.copy:before{content:"\f0c5"}i.icon.copyright:before{content:"\f1f9"}i.icon.couch:before{content:"\f4b8"}i.icon.credit.card:before{content:"\f09d"}i.icon.crop:before{content:"\f125"}i.icon.crop.alternate:before{content:"\f565"}i.icon.cross:before{content:"\f654"}i.icon.crosshairs:before{content:"\f05b"}i.icon.crow:before{content:"\f520"}i.icon.crown:before{content:"\f521"}i.icon.crutch:before{content:"\f7f7"}i.icon.cube:before{content:"\f1b2"}i.icon.cubes:before{content:"\f1b3"}i.icon.cut:before{content:"\f0c4"}i.icon.database:before{content:"\f1c0"}i.icon.deaf:before{content:"\f2a4"}i.icon.democrat:before{content:"\f747"}i.icon.desktop:before{content:"\f108"}i.icon.dharmachakra:before{content:"\f655"}i.icon.diagnoses:before{content:"\f470"}i.icon.dice:before{content:"\f522"}i.icon.dice.d20:before{content:"\f6cf"}i.icon.dice.d6:before{content:"\f6d1"}i.icon.dice.five:before{content:"\f523"}i.icon.dice.four:before{content:"\f524"}i.icon.dice.one:before{content:"\f525"}i.icon.dice.six:before{content:"\f526"}i.icon.dice.three:before{content:"\f527"}i.icon.dice.two:before{content:"\f528"}i.icon.digital.tachograph:before{content:"\f566"}i.icon.directions:before{content:"\f5eb"}i.icon.divide:before{content:"\f529"}i.icon.dizzy:before{content:"\f567"}i.icon.dna:before{content:"\f471"}i.icon.dog:before{content:"\f6d3"}i.icon.dollar.sign:before{content:"\f155"}i.icon.dolly:before{content:"\f472"}i.icon.dolly.flatbed:before{content:"\f474"}i.icon.donate:before{content:"\f4b9"}i.icon.door.closed:before{content:"\f52a"}i.icon.door.open:before{content:"\f52b"}i.icon.dot.circle:before{content:"\f192"}i.icon.dove:before{content:"\f4ba"}i.icon.download:before{content:"\f019"}i.icon.drafting.compass:before{content:"\f568"}i.icon.dragon:before{content:"\f6d5"}i.icon.draw.polygon:before{content:"\f5ee"}i.icon.drum:before{content:"\f569"}i.icon.drum.steelpan:before{content:"\f56a"}i.icon.drumstick.bite:before{content:"\f6d7"}i.icon.dumbbell:before{content:"\f44b"}i.icon.dumpster:before{content:"\f793"}i.icon.dumpster.fire:before{content:"\f794"}i.icon.dungeon:before{content:"\f6d9"}i.icon.edit:before{content:"\f044"}i.icon.egg:before{content:"\f7fb"}i.icon.eject:before{content:"\f052"}i.icon.ellipsis.horizontal:before{content:"\f141"}i.icon.ellipsis.vertical:before{content:"\f142"}i.icon.envelope:before{content:"\f0e0"}i.icon.envelope.open:before{content:"\f2b6"}i.icon.envelope.open.text:before{content:"\f658"}i.icon.envelope.square:before{content:"\f199"}i.icon.equals:before{content:"\f52c"}i.icon.eraser:before{content:"\f12d"}i.icon.ethernet:before{content:"\f796"}i.icon.euro.sign:before{content:"\f153"}i.icon.exchange.alternate:before{content:"\f362"}i.icon.exclamation:before{content:"\f12a"}i.icon.exclamation.circle:before{content:"\f06a"}i.icon.exclamation.triangle:before{content:"\f071"}i.icon.expand:before{content:"\f065"}i.icon.expand.alternate:before{content:"\f424"}i.icon.expand.arrows.alternate:before{content:"\f31e"}i.icon.external.alternate:before{content:"\f35d"}i.icon.external.link.square.alternate:before{content:"\f360"}i.icon.eye:before{content:"\f06e"}i.icon.eye.dropper:before{content:"\f1fb"}i.icon.eye.slash:before{content:"\f070"}i.icon.fan:before{content:"\f863"}i.icon.fast.backward:before{content:"\f049"}i.icon.fast.forward:before{content:"\f050"}i.icon.fax:before{content:"\f1ac"}i.icon.feather:before{content:"\f52d"}i.icon.feather.alternate:before{content:"\f56b"}i.icon.female:before{content:"\f182"}i.icon.fighter.jet:before{content:"\f0fb"}i.icon.file:before{content:"\f15b"}i.icon.file.alternate:before{content:"\f15c"}i.icon.file.archive:before{content:"\f1c6"}i.icon.file.audio:before{content:"\f1c7"}i.icon.file.code:before{content:"\f1c9"}i.icon.file.contract:before{content:"\f56c"}i.icon.file.csv:before{content:"\f6dd"}i.icon.file.download:before{content:"\f56d"}i.icon.file.excel:before{content:"\f1c3"}i.icon.file.export:before{content:"\f56e"}i.icon.file.image:before{content:"\f1c5"}i.icon.file.import:before{content:"\f56f"}i.icon.file.invoice:before{content:"\f570"}i.icon.file.invoice.dollar:before{content:"\f571"}i.icon.file.medical:before{content:"\f477"}i.icon.file.medical.alternate:before{content:"\f478"}i.icon.file.pdf:before{content:"\f1c1"}i.icon.file.powerpoint:before{content:"\f1c4"}i.icon.file.prescription:before{content:"\f572"}i.icon.file.signature:before{content:"\f573"}i.icon.file.upload:before{content:"\f574"}i.icon.file.video:before{content:"\f1c8"}i.icon.file.word:before{content:"\f1c2"}i.icon.fill:before{content:"\f575"}i.icon.fill.drip:before{content:"\f576"}i.icon.film:before{content:"\f008"}i.icon.filter:before{content:"\f0b0"}i.icon.fingerprint:before{content:"\f577"}i.icon.fire:before{content:"\f06d"}i.icon.fire.alternate:before{content:"\f7e4"}i.icon.fire.extinguisher:before{content:"\f134"}i.icon.first.aid:before{content:"\f479"}i.icon.fish:before{content:"\f578"}i.icon.fist.raised:before{content:"\f6de"}i.icon.flag:before{content:"\f024"}i.icon.flag.checkered:before{content:"\f11e"}i.icon.flag.usa:before{content:"\f74d"}i.icon.flask:before{content:"\f0c3"}i.icon.flushed:before{content:"\f579"}i.icon.folder:before{content:"\f07b"}i.icon.folder.minus:before{content:"\f65d"}i.icon.folder.open:before{content:"\f07c"}i.icon.folder.plus:before{content:"\f65e"}i.icon.font:before{content:"\f031"}i.icon.football.ball:before{content:"\f44e"}i.icon.forward:before{content:"\f04e"}i.icon.frog:before{content:"\f52e"}i.icon.frown:before{content:"\f119"}i.icon.frown.open:before{content:"\f57a"}i.icon.fruit-apple:before{content:"\f5d1"}i.icon.funnel.dollar:before{content:"\f662"}i.icon.futbol:before{content:"\f1e3"}i.icon.gamepad:before{content:"\f11b"}i.icon.gas.pump:before{content:"\f52f"}i.icon.gavel:before{content:"\f0e3"}i.icon.gem:before{content:"\f3a5"}i.icon.genderless:before{content:"\f22d"}i.icon.ghost:before{content:"\f6e2"}i.icon.gift:before{content:"\f06b"}i.icon.gifts:before{content:"\f79c"}i.icon.glass.cheers:before{content:"\f79f"}i.icon.glass.martini:before{content:"\f000"}i.icon.glass.martini.alternate:before{content:"\f57b"}i.icon.glass.whiskey:before{content:"\f7a0"}i.icon.glasses:before{content:"\f530"}i.icon.globe:before{content:"\f0ac"}i.icon.globe.africa:before{content:"\f57c"}i.icon.globe.americas:before{content:"\f57d"}i.icon.globe.asia:before{content:"\f57e"}i.icon.globe.europe:before{content:"\f7a2"}i.icon.golf.ball:before{content:"\f450"}i.icon.gopuram:before{content:"\f664"}i.icon.graduation.cap:before{content:"\f19d"}i.icon.greater.than:before{content:"\f531"}i.icon.greater.than.equal:before{content:"\f532"}i.icon.grimace:before{content:"\f57f"}i.icon.grin:before{content:"\f580"}i.icon.grin.alternate:before{content:"\f581"}i.icon.grin.beam:before{content:"\f582"}i.icon.grin.beam.sweat:before{content:"\f583"}i.icon.grin.hearts:before{content:"\f584"}i.icon.grin.squint:before{content:"\f585"}i.icon.grin.squint.tears:before{content:"\f586"}i.icon.grin.stars:before{content:"\f587"}i.icon.grin.tears:before{content:"\f588"}i.icon.grin.tongue:before{content:"\f589"}i.icon.grin.tongue.squint:before{content:"\f58a"}i.icon.grin.tongue.wink:before{content:"\f58b"}i.icon.grin.wink:before{content:"\f58c"}i.icon.grip.horizontal:before{content:"\f58d"}i.icon.grip.lines:before{content:"\f7a4"}i.icon.grip.lines.vertical:before{content:"\f7a5"}i.icon.grip.vertical:before{content:"\f58e"}i.icon.guitar:before{content:"\f7a6"}i.icon.h.square:before{content:"\f0fd"}i.icon.hamburger:before{content:"\f805"}i.icon.hammer:before{content:"\f6e3"}i.icon.hamsa:before{content:"\f665"}i.icon.hand.holding:before{content:"\f4bd"}i.icon.hand.holding.heart:before{content:"\f4be"}i.icon.hand.holding.usd:before{content:"\f4c0"}i.icon.hand.lizard:before{content:"\f258"}i.icon.hand.middle.finger:before{content:"\f806"}i.icon.hand.paper:before{content:"\f256"}i.icon.hand.peace:before{content:"\f25b"}i.icon.hand.point.down:before{content:"\f0a7"}i.icon.hand.point.left:before{content:"\f0a5"}i.icon.hand.point.right:before{content:"\f0a4"}i.icon.hand.point.up:before{content:"\f0a6"}i.icon.hand.pointer:before{content:"\f25a"}i.icon.hand.rock:before{content:"\f255"}i.icon.hand.scissors:before{content:"\f257"}i.icon.hand.spock:before{content:"\f259"}i.icon.hands:before{content:"\f4c2"}i.icon.hands.helping:before{content:"\f4c4"}i.icon.handshake:before{content:"\f2b5"}i.icon.hanukiah:before{content:"\f6e6"}i.icon.hard.hat:before{content:"\f807"}i.icon.hashtag:before{content:"\f292"}i.icon.hat.cowboy:before{content:"\f8c0"}i.icon.hat.cowboy.side:before{content:"\f8c1"}i.icon.hat.wizard:before{content:"\f6e8"}i.icon.hdd:before{content:"\f0a0"}i.icon.heading:before{content:"\f1dc"}i.icon.headphones:before{content:"\f025"}i.icon.headphones.alternate:before{content:"\f58f"}i.icon.headset:before{content:"\f590"}i.icon.heart:before{content:"\f004"}i.icon.heart.broken:before{content:"\f7a9"}i.icon.heartbeat:before{content:"\f21e"}i.icon.helicopter:before{content:"\f533"}i.icon.highlighter:before{content:"\f591"}i.icon.hiking:before{content:"\f6ec"}i.icon.hippo:before{content:"\f6ed"}i.icon.history:before{content:"\f1da"}i.icon.hockey.puck:before{content:"\f453"}i.icon.holly.berry:before{content:"\f7aa"}i.icon.home:before{content:"\f015"}i.icon.horse:before{content:"\f6f0"}i.icon.horse.head:before{content:"\f7ab"}i.icon.hospital:before{content:"\f0f8"}i.icon.hospital.alternate:before{content:"\f47d"}i.icon.hospital.symbol:before{content:"\f47e"}i.icon.hot.tub:before{content:"\f593"}i.icon.hotdog:before{content:"\f80f"}i.icon.hotel:before{content:"\f594"}i.icon.hourglass:before{content:"\f254"}i.icon.hourglass.end:before{content:"\f253"}i.icon.hourglass.half:before{content:"\f252"}i.icon.hourglass.start:before{content:"\f251"}i.icon.house.damage:before{content:"\f6f1"}i.icon.hryvnia:before{content:"\f6f2"}i.icon.i.cursor:before{content:"\f246"}i.icon.ice.cream:before{content:"\f810"}i.icon.icicles:before{content:"\f7ad"}i.icon.icons:before{content:"\f86d"}i.icon.id.badge:before{content:"\f2c1"}i.icon.id.card:before{content:"\f2c2"}i.icon.id.card.alternate:before{content:"\f47f"}i.icon.igloo:before{content:"\f7ae"}i.icon.image:before{content:"\f03e"}i.icon.images:before{content:"\f302"}i.icon.inbox:before{content:"\f01c"}i.icon.indent:before{content:"\f03c"}i.icon.industry:before{content:"\f275"}i.icon.infinity:before{content:"\f534"}i.icon.info:before{content:"\f129"}i.icon.info.circle:before{content:"\f05a"}i.icon.italic:before{content:"\f033"}i.icon.jedi:before{content:"\f669"}i.icon.joint:before{content:"\f595"}i.icon.journal.whills:before{content:"\f66a"}i.icon.kaaba:before{content:"\f66b"}i.icon.key:before{content:"\f084"}i.icon.keyboard:before{content:"\f11c"}i.icon.khanda:before{content:"\f66d"}i.icon.kiss:before{content:"\f596"}i.icon.kiss.beam:before{content:"\f597"}i.icon.kiss.wink.heart:before{content:"\f598"}i.icon.kiwi.bird:before{content:"\f535"}i.icon.landmark:before{content:"\f66f"}i.icon.language:before{content:"\f1ab"}i.icon.laptop:before{content:"\f109"}i.icon.laptop.code:before{content:"\f5fc"}i.icon.laptop.medical:before{content:"\f812"}i.icon.laugh:before{content:"\f599"}i.icon.laugh.beam:before{content:"\f59a"}i.icon.laugh.squint:before{content:"\f59b"}i.icon.laugh.wink:before{content:"\f59c"}i.icon.layer.group:before{content:"\f5fd"}i.icon.leaf:before{content:"\f06c"}i.icon.lemon:before{content:"\f094"}i.icon.less.than:before{content:"\f536"}i.icon.less.than.equal:before{content:"\f537"}i.icon.level.down.alternate:before{content:"\f3be"}i.icon.level.up.alternate:before{content:"\f3bf"}i.icon.life.ring:before{content:"\f1cd"}i.icon.lightbulb:before{content:"\f0eb"}i.icon.linkify:before{content:"\f0c1"}i.icon.lira.sign:before{content:"\f195"}i.icon.list:before{content:"\f03a"}i.icon.list.alternate:before{content:"\f022"}i.icon.list.ol:before{content:"\f0cb"}i.icon.list.ul:before{content:"\f0ca"}i.icon.location.arrow:before{content:"\f124"}i.icon.lock:before{content:"\f023"}i.icon.lock.open:before{content:"\f3c1"}i.icon.long.arrow.alternate.down:before{content:"\f309"}i.icon.long.arrow.alternate.left:before{content:"\f30a"}i.icon.long.arrow.alternate.right:before{content:"\f30b"}i.icon.long.arrow.alternate.up:before{content:"\f30c"}i.icon.low.vision:before{content:"\f2a8"}i.icon.luggage.cart:before{content:"\f59d"}i.icon.magic:before{content:"\f0d0"}i.icon.magnet:before{content:"\f076"}i.icon.mail.bulk:before{content:"\f674"}i.icon.male:before{content:"\f183"}i.icon.map:before{content:"\f279"}i.icon.map.marked:before{content:"\f59f"}i.icon.map.marked.alternate:before{content:"\f5a0"}i.icon.map.marker:before{content:"\f041"}i.icon.map.marker.alternate:before{content:"\f3c5"}i.icon.map.pin:before{content:"\f276"}i.icon.map.signs:before{content:"\f277"}i.icon.marker:before{content:"\f5a1"}i.icon.mars:before{content:"\f222"}i.icon.mars.double:before{content:"\f227"}i.icon.mars.stroke:before{content:"\f229"}i.icon.mars.stroke.horizontal:before{content:"\f22b"}i.icon.mars.stroke.vertical:before{content:"\f22a"}i.icon.mask:before{content:"\f6fa"}i.icon.medal:before{content:"\f5a2"}i.icon.medkit:before{content:"\f0fa"}i.icon.meh:before{content:"\f11a"}i.icon.meh.blank:before{content:"\f5a4"}i.icon.meh.rolling.eyes:before{content:"\f5a5"}i.icon.memory:before{content:"\f538"}i.icon.menorah:before{content:"\f676"}i.icon.mercury:before{content:"\f223"}i.icon.meteor:before{content:"\f753"}i.icon.microchip:before{content:"\f2db"}i.icon.microphone:before{content:"\f130"}i.icon.microphone.alternate:before{content:"\f3c9"}i.icon.microphone.alternate.slash:before{content:"\f539"}i.icon.microphone.slash:before{content:"\f131"}i.icon.microscope:before{content:"\f610"}i.icon.minus:before{content:"\f068"}i.icon.minus.circle:before{content:"\f056"}i.icon.minus.square:before{content:"\f146"}i.icon.mitten:before{content:"\f7b5"}i.icon.mobile:before{content:"\f10b"}i.icon.mobile.alternate:before{content:"\f3cd"}i.icon.money.bill:before{content:"\f0d6"}i.icon.money.bill.alternate:before{content:"\f3d1"}i.icon.money.bill.wave:before{content:"\f53a"}i.icon.money.bill.wave.alternate:before{content:"\f53b"}i.icon.money.check:before{content:"\f53c"}i.icon.money.check.alternate:before{content:"\f53d"}i.icon.monument:before{content:"\f5a6"}i.icon.moon:before{content:"\f186"}i.icon.mortar.pestle:before{content:"\f5a7"}i.icon.mosque:before{content:"\f678"}i.icon.motorcycle:before{content:"\f21c"}i.icon.mountain:before{content:"\f6fc"}i.icon.mouse:before{content:"\f8cc"}i.icon.mouse.pointer:before{content:"\f245"}i.icon.mug.hot:before{content:"\f7b6"}i.icon.music:before{content:"\f001"}i.icon.network.wired:before{content:"\f6ff"}i.icon.neuter:before{content:"\f22c"}i.icon.newspaper:before{content:"\f1ea"}i.icon.not.equal:before{content:"\f53e"}i.icon.notes.medical:before{content:"\f481"}i.icon.object.group:before{content:"\f247"}i.icon.object.ungroup:before{content:"\f248"}i.icon.oil.can:before{content:"\f613"}i.icon.om:before{content:"\f679"}i.icon.otter:before{content:"\f700"}i.icon.outdent:before{content:"\f03b"}i.icon.pager:before{content:"\f815"}i.icon.paint.brush:before{content:"\f1fc"}i.icon.paint.roller:before{content:"\f5aa"}i.icon.palette:before{content:"\f53f"}i.icon.pallet:before{content:"\f482"}i.icon.paper.plane:before{content:"\f1d8"}i.icon.paperclip:before{content:"\f0c6"}i.icon.parachute.box:before{content:"\f4cd"}i.icon.paragraph:before{content:"\f1dd"}i.icon.parking:before{content:"\f540"}i.icon.passport:before{content:"\f5ab"}i.icon.pastafarianism:before{content:"\f67b"}i.icon.paste:before{content:"\f0ea"}i.icon.pause:before{content:"\f04c"}i.icon.pause.circle:before{content:"\f28b"}i.icon.paw:before{content:"\f1b0"}i.icon.peace:before{content:"\f67c"}i.icon.pen:before{content:"\f304"}i.icon.pen.alternate:before{content:"\f305"}i.icon.pen.fancy:before{content:"\f5ac"}i.icon.pen.nib:before{content:"\f5ad"}i.icon.pen.square:before{content:"\f14b"}i.icon.pencil.alternate:before{content:"\f303"}i.icon.pencil.ruler:before{content:"\f5ae"}i.icon.people.carry:before{content:"\f4ce"}i.icon.pepper.hot:before{content:"\f816"}i.icon.percent:before{content:"\f295"}i.icon.percentage:before{content:"\f541"}i.icon.person.booth:before{content:"\f756"}i.icon.phone:before{content:"\f095"}i.icon.phone.alternate:before{content:"\f879"}i.icon.phone.slash:before{content:"\f3dd"}i.icon.phone.square:before{content:"\f098"}i.icon.phone.square.alternate:before{content:"\f87b"}i.icon.phone.volume:before{content:"\f2a0"}i.icon.photo.video:before{content:"\f87c"}i.icon.piggy.bank:before{content:"\f4d3"}i.icon.pills:before{content:"\f484"}i.icon.pizza.slice:before{content:"\f818"}i.icon.place.of.worship:before{content:"\f67f"}i.icon.plane:before{content:"\f072"}i.icon.plane.arrival:before{content:"\f5af"}i.icon.plane.departure:before{content:"\f5b0"}i.icon.play:before{content:"\f04b"}i.icon.play.circle:before{content:"\f144"}i.icon.plug:before{content:"\f1e6"}i.icon.plus:before{content:"\f067"}i.icon.plus.circle:before{content:"\f055"}i.icon.plus.square:before{content:"\f0fe"}i.icon.podcast:before{content:"\f2ce"}i.icon.poll:before{content:"\f681"}i.icon.poll.horizontal:before{content:"\f682"}i.icon.poo:before{content:"\f2fe"}i.icon.poo.storm:before{content:"\f75a"}i.icon.poop:before{content:"\f619"}i.icon.portrait:before{content:"\f3e0"}i.icon.pound.sign:before{content:"\f154"}i.icon.power.off:before{content:"\f011"}i.icon.pray:before{content:"\f683"}i.icon.praying.hands:before{content:"\f684"}i.icon.prescription:before{content:"\f5b1"}i.icon.prescription.bottle:before{content:"\f485"}i.icon.prescription.bottle.alternate:before{content:"\f486"}i.icon.print:before{content:"\f02f"}i.icon.procedures:before{content:"\f487"}i.icon.project.diagram:before{content:"\f542"}i.icon.puzzle.piece:before{content:"\f12e"}i.icon.qrcode:before{content:"\f029"}i.icon.question:before{content:"\f128"}i.icon.question.circle:before{content:"\f059"}i.icon.quidditch:before{content:"\f458"}i.icon.quote.left:before{content:"\f10d"}i.icon.quote.right:before{content:"\f10e"}i.icon.quran:before{content:"\f687"}i.icon.radiation:before{content:"\f7b9"}i.icon.radiation.alternate:before{content:"\f7ba"}i.icon.rainbow:before{content:"\f75b"}i.icon.random:before{content:"\f074"}i.icon.receipt:before{content:"\f543"}i.icon.record.vinyl:before{content:"\f8d9"}i.icon.recycle:before{content:"\f1b8"}i.icon.redo:before{content:"\f01e"}i.icon.redo.alternate:before{content:"\f2f9"}i.icon.registered:before{content:"\f25d"}i.icon.remove.format:before{content:"\f87d"}i.icon.reply:before{content:"\f3e5"}i.icon.reply.all:before{content:"\f122"}i.icon.republican:before{content:"\f75e"}i.icon.restroom:before{content:"\f7bd"}i.icon.retweet:before{content:"\f079"}i.icon.ribbon:before{content:"\f4d6"}i.icon.ring:before{content:"\f70b"}i.icon.road:before{content:"\f018"}i.icon.robot:before{content:"\f544"}i.icon.rocket:before{content:"\f135"}i.icon.route:before{content:"\f4d7"}i.icon.rss:before{content:"\f09e"}i.icon.rss.square:before{content:"\f143"}i.icon.ruble.sign:before{content:"\f158"}i.icon.ruler:before{content:"\f545"}i.icon.ruler.combined:before{content:"\f546"}i.icon.ruler.horizontal:before{content:"\f547"}i.icon.ruler.vertical:before{content:"\f548"}i.icon.running:before{content:"\f70c"}i.icon.rupee.sign:before{content:"\f156"}i.icon.sad.cry:before{content:"\f5b3"}i.icon.sad.tear:before{content:"\f5b4"}i.icon.satellite:before{content:"\f7bf"}i.icon.satellite.dish:before{content:"\f7c0"}i.icon.save:before{content:"\f0c7"}i.icon.school:before{content:"\f549"}i.icon.screwdriver:before{content:"\f54a"}i.icon.scroll:before{content:"\f70e"}i.icon.sd.card:before{content:"\f7c2"}i.icon.search:before{content:"\f002"}i.icon.search.dollar:before{content:"\f688"}i.icon.search.location:before{content:"\f689"}i.icon.search.minus:before{content:"\f010"}i.icon.search.plus:before{content:"\f00e"}i.icon.seedling:before{content:"\f4d8"}i.icon.server:before{content:"\f233"}i.icon.shapes:before{content:"\f61f"}i.icon.share:before{content:"\f064"}i.icon.share.alternate:before{content:"\f1e0"}i.icon.share.alternate.square:before{content:"\f1e1"}i.icon.share.square:before{content:"\f14d"}i.icon.shekel.sign:before{content:"\f20b"}i.icon.shield.alternate:before{content:"\f3ed"}i.icon.ship:before{content:"\f21a"}i.icon.shipping.fast:before{content:"\f48b"}i.icon.shoe.prints:before{content:"\f54b"}i.icon.shopping.bag:before{content:"\f290"}i.icon.shopping.basket:before{content:"\f291"}i.icon.shopping.cart:before{content:"\f07a"}i.icon.shower:before{content:"\f2cc"}i.icon.shuttle.van:before{content:"\f5b6"}i.icon.sign:before{content:"\f4d9"}i.icon.sign.in.alternate:before{content:"\f2f6"}i.icon.sign.language:before{content:"\f2a7"}i.icon.sign.out.alternate:before{content:"\f2f5"}i.icon.signal:before{content:"\f012"}i.icon.signature:before{content:"\f5b7"}i.icon.sim.card:before{content:"\f7c4"}i.icon.sitemap:before{content:"\f0e8"}i.icon.skating:before{content:"\f7c5"}i.icon.skiing:before{content:"\f7c9"}i.icon.skiing.nordic:before{content:"\f7ca"}i.icon.skull:before{content:"\f54c"}i.icon.skull.crossbones:before{content:"\f714"}i.icon.slash:before{content:"\f715"}i.icon.sleigh:before{content:"\f7cc"}i.icon.sliders.horizontal:before{content:"\f1de"}i.icon.smile:before{content:"\f118"}i.icon.smile.beam:before{content:"\f5b8"}i.icon.smile.wink:before{content:"\f4da"}i.icon.smog:before{content:"\f75f"}i.icon.smoking:before{content:"\f48d"}i.icon.smoking.ban:before{content:"\f54d"}i.icon.sms:before{content:"\f7cd"}i.icon.snowboarding:before{content:"\f7ce"}i.icon.snowflake:before{content:"\f2dc"}i.icon.snowman:before{content:"\f7d0"}i.icon.snowplow:before{content:"\f7d2"}i.icon.socks:before{content:"\f696"}i.icon.solar.panel:before{content:"\f5ba"}i.icon.sort:before{content:"\f0dc"}i.icon.sort.alphabet.down:before{content:"\f15d"}i.icon.sort.alphabet.down.alternate:before{content:"\f881"}i.icon.sort.alphabet.up:before{content:"\f15e"}i.icon.sort.alphabet.up.alternate:before{content:"\f882"}i.icon.sort.amount.down:before{content:"\f160"}i.icon.sort.amount.down.alternate:before{content:"\f884"}i.icon.sort.amount.up:before{content:"\f161"}i.icon.sort.amount.up.alternate:before{content:"\f885"}i.icon.sort.down:before{content:"\f0dd"}i.icon.sort.numeric.down:before{content:"\f162"}i.icon.sort.numeric.down.alternate:before{content:"\f886"}i.icon.sort.numeric.up:before{content:"\f163"}i.icon.sort.numeric.up.alternate:before{content:"\f887"}i.icon.sort.up:before{content:"\f0de"}i.icon.spa:before{content:"\f5bb"}i.icon.space.shuttle:before{content:"\f197"}i.icon.spell.check:before{content:"\f891"}i.icon.spider:before{content:"\f717"}i.icon.spinner:before{content:"\f110"}i.icon.splotch:before{content:"\f5bc"}i.icon.spray.can:before{content:"\f5bd"}i.icon.square:before{content:"\f0c8"}i.icon.square.full:before{content:"\f45c"}i.icon.square.root.alternate:before{content:"\f698"}i.icon.stamp:before{content:"\f5bf"}i.icon.star:before{content:"\f005"}i.icon.star.and.crescent:before{content:"\f699"}i.icon.star.half:before{content:"\f089"}i.icon.star.half.alternate:before{content:"\f5c0"}i.icon.star.of.david:before{content:"\f69a"}i.icon.star.of.life:before{content:"\f621"}i.icon.step.backward:before{content:"\f048"}i.icon.step.forward:before{content:"\f051"}i.icon.stethoscope:before{content:"\f0f1"}i.icon.sticky.note:before{content:"\f249"}i.icon.stop:before{content:"\f04d"}i.icon.stop.circle:before{content:"\f28d"}i.icon.stopwatch:before{content:"\f2f2"}i.icon.store:before{content:"\f54e"}i.icon.store.alternate:before{content:"\f54f"}i.icon.stream:before{content:"\f550"}i.icon.street.view:before{content:"\f21d"}i.icon.strikethrough:before{content:"\f0cc"}i.icon.stroopwafel:before{content:"\f551"}i.icon.subscript:before{content:"\f12c"}i.icon.subway:before{content:"\f239"}i.icon.suitcase:before{content:"\f0f2"}i.icon.suitcase.rolling:before{content:"\f5c1"}i.icon.sun:before{content:"\f185"}i.icon.superscript:before{content:"\f12b"}i.icon.surprise:before{content:"\f5c2"}i.icon.swatchbook:before{content:"\f5c3"}i.icon.swimmer:before{content:"\f5c4"}i.icon.swimming.pool:before{content:"\f5c5"}i.icon.synagogue:before{content:"\f69b"}i.icon.sync:before{content:"\f021"}i.icon.sync.alternate:before{content:"\f2f1"}i.icon.syringe:before{content:"\f48e"}i.icon.table:before{content:"\f0ce"}i.icon.table.tennis:before{content:"\f45d"}i.icon.tablet:before{content:"\f10a"}i.icon.tablet.alternate:before{content:"\f3fa"}i.icon.tablets:before{content:"\f490"}i.icon.tachometer.alternate:before{content:"\f3fd"}i.icon.tag:before{content:"\f02b"}i.icon.tags:before{content:"\f02c"}i.icon.tape:before{content:"\f4db"}i.icon.tasks:before{content:"\f0ae"}i.icon.taxi:before{content:"\f1ba"}i.icon.teeth:before{content:"\f62e"}i.icon.teeth.open:before{content:"\f62f"}i.icon.temperature.high:before{content:"\f769"}i.icon.temperature.low:before{content:"\f76b"}i.icon.tenge:before{content:"\f7d7"}i.icon.terminal:before{content:"\f120"}i.icon.text.height:before{content:"\f034"}i.icon.text.width:before{content:"\f035"}i.icon.th:before{content:"\f00a"}i.icon.th.large:before{content:"\f009"}i.icon.th.list:before{content:"\f00b"}i.icon.theater.masks:before{content:"\f630"}i.icon.thermometer:before{content:"\f491"}i.icon.thermometer.empty:before{content:"\f2cb"}i.icon.thermometer.full:before{content:"\f2c7"}i.icon.thermometer.half:before{content:"\f2c9"}i.icon.thermometer.quarter:before{content:"\f2ca"}i.icon.thermometer.three.quarters:before{content:"\f2c8"}i.icon.thumbs.down:before{content:"\f165"}i.icon.thumbs.up:before{content:"\f164"}i.icon.thumbtack:before{content:"\f08d"}i.icon.ticket.alternate:before{content:"\f3ff"}i.icon.times:before{content:"\f00d"}i.icon.times.circle:before{content:"\f057"}i.icon.tint:before{content:"\f043"}i.icon.tint.slash:before{content:"\f5c7"}i.icon.tired:before{content:"\f5c8"}i.icon.toggle.off:before{content:"\f204"}i.icon.toggle.on:before{content:"\f205"}i.icon.toilet:before{content:"\f7d8"}i.icon.toilet.paper:before{content:"\f71e"}i.icon.toolbox:before{content:"\f552"}i.icon.tools:before{content:"\f7d9"}i.icon.tooth:before{content:"\f5c9"}i.icon.torah:before{content:"\f6a0"}i.icon.torii.gate:before{content:"\f6a1"}i.icon.tractor:before{content:"\f722"}i.icon.trademark:before{content:"\f25c"}i.icon.traffic.light:before{content:"\f637"}i.icon.trailer:before{content:"\f941"}i.icon.train:before{content:"\f238"}i.icon.tram:before{content:"\f7da"}i.icon.transgender:before{content:"\f224"}i.icon.transgender.alternate:before{content:"\f225"}i.icon.trash:before{content:"\f1f8"}i.icon.trash.alternate:before{content:"\f2ed"}i.icon.trash.restore:before{content:"\f829"}i.icon.trash.restore.alternate:before{content:"\f82a"}i.icon.tree:before{content:"\f1bb"}i.icon.trophy:before{content:"\f091"}i.icon.truck:before{content:"\f0d1"}i.icon.truck.monster:before{content:"\f63b"}i.icon.truck.moving:before{content:"\f4df"}i.icon.truck.packing:before{content:"\f4de"}i.icon.truck.pickup:before{content:"\f63c"}i.icon.tshirt:before{content:"\f553"}i.icon.tty:before{content:"\f1e4"}i.icon.tv:before{content:"\f26c"}i.icon.umbrella:before{content:"\f0e9"}i.icon.umbrella.beach:before{content:"\f5ca"}i.icon.underline:before{content:"\f0cd"}i.icon.undo:before{content:"\f0e2"}i.icon.undo.alternate:before{content:"\f2ea"}i.icon.universal.access:before{content:"\f29a"}i.icon.university:before{content:"\f19c"}i.icon.unlink:before{content:"\f127"}i.icon.unlock:before{content:"\f09c"}i.icon.unlock.alternate:before{content:"\f13e"}i.icon.upload:before{content:"\f093"}i.icon.user:before{content:"\f007"}i.icon.user.alternate:before{content:"\f406"}i.icon.user.alternate.slash:before{content:"\f4fa"}i.icon.user.astronaut:before{content:"\f4fb"}i.icon.user.check:before{content:"\f4fc"}i.icon.user.circle:before{content:"\f2bd"}i.icon.user.clock:before{content:"\f4fd"}i.icon.user.cog:before{content:"\f4fe"}i.icon.user.edit:before{content:"\f4ff"}i.icon.user.friends:before{content:"\f500"}i.icon.user.graduate:before{content:"\f501"}i.icon.user.injured:before{content:"\f728"}i.icon.user.lock:before{content:"\f502"}i.icon.user.md:before{content:"\f0f0"}i.icon.user.minus:before{content:"\f503"}i.icon.user.ninja:before{content:"\f504"}i.icon.user.nurse:before{content:"\f82f"}i.icon.user.plus:before{content:"\f234"}i.icon.user.secret:before{content:"\f21b"}i.icon.user.shield:before{content:"\f505"}i.icon.user.slash:before{content:"\f506"}i.icon.user.tag:before{content:"\f507"}i.icon.user.tie:before{content:"\f508"}i.icon.user.times:before{content:"\f235"}i.icon.users:before{content:"\f0c0"}i.icon.users.cog:before{content:"\f509"}i.icon.utensil.spoon:before{content:"\f2e5"}i.icon.utensils:before{content:"\f2e7"}i.icon.vector.square:before{content:"\f5cb"}i.icon.venus:before{content:"\f221"}i.icon.venus.double:before{content:"\f226"}i.icon.venus.mars:before{content:"\f228"}i.icon.vial:before{content:"\f492"}i.icon.vials:before{content:"\f493"}i.icon.video:before{content:"\f03d"}i.icon.video.slash:before{content:"\f4e2"}i.icon.vihara:before{content:"\f6a7"}i.icon.voicemail:before{content:"\f897"}i.icon.volleyball.ball:before{content:"\f45f"}i.icon.volume.down:before{content:"\f027"}i.icon.volume.mute:before{content:"\f6a9"}i.icon.volume.off:before{content:"\f026"}i.icon.volume.up:before{content:"\f028"}i.icon.vote.yea:before{content:"\f772"}i.icon.vr.cardboard:before{content:"\f729"}i.icon.walking:before{content:"\f554"}i.icon.wallet:before{content:"\f555"}i.icon.warehouse:before{content:"\f494"}i.icon.water:before{content:"\f773"}i.icon.wave.square:before{content:"\f83e"}i.icon.weight:before{content:"\f496"}i.icon.weight.hanging:before{content:"\f5cd"}i.icon.wheelchair:before{content:"\f193"}i.icon.wifi:before{content:"\f1eb"}i.icon.wind:before{content:"\f72e"}i.icon.window.close:before{content:"\f410"}i.icon.window.maximize:before{content:"\f2d0"}i.icon.window.minimize:before{content:"\f2d1"}i.icon.window.restore:before{content:"\f2d2"}i.icon.wine.bottle:before{content:"\f72f"}i.icon.wine.glass:before{content:"\f4e3"}i.icon.wine.glass.alternate:before{content:"\f5ce"}i.icon.won.sign:before{content:"\f159"}i.icon.wrench:before{content:"\f0ad"}i.icon.x.ray:before{content:"\f497"}i.icon.yen.sign:before{content:"\f157"}i.icon.yin.yang:before{content:"\f6ad"}i.icon.add:before{content:"\f067"}i.icon.add.circle:before{content:"\f055"}i.icon.add.square:before{content:"\f0fe"}i.icon.add.to.calendar:before{content:"\f271"}i.icon.add.to.cart:before{content:"\f217"}i.icon.add.user:before{content:"\f234"}i.icon.alarm:before{content:"\f0f3"}i.icon.alarm.mute:before{content:"\f1f6"}i.icon.ald:before{content:"\f2a2"}i.icon.als:before{content:"\f2a2"}i.icon.announcement:before{content:"\f0a1"}i.icon.area.chart:before{content:"\f1fe"}i.icon.area.graph:before{content:"\f1fe"}i.icon.arrow.down.cart:before{content:"\f218"}i.icon.asexual:before{content:"\f22d"}i.icon.asl:before{content:"\f2a3"}i.icon.asl.interpreting:before{content:"\f2a3"}i.icon.assistive.listening.devices:before{content:"\f2a2"}i.icon.attach:before{content:"\f0c6"}i.icon.attention:before{content:"\f06a"}i.icon.balance:before{content:"\f24e"}i.icon.bar:before{content:"\f0fc"}i.icon.bathtub:before{content:"\f2cd"}i.icon.battery.four:before{content:"\f240"}i.icon.battery.high:before{content:"\f241"}i.icon.battery.low:before{content:"\f243"}i.icon.battery.medium:before{content:"\f242"}i.icon.battery.one:before{content:"\f243"}i.icon.battery.three:before{content:"\f241"}i.icon.battery.two:before{content:"\f242"}i.icon.battery.zero:before{content:"\f244"}i.icon.birthday:before{content:"\f1fd"}i.icon.block.layout:before{content:"\f009"}i.icon.broken.chain:before{content:"\f127"}i.icon.browser:before{content:"\f022"}i.icon.call:before{content:"\f095"}i.icon.call.square:before{content:"\f098"}i.icon.cancel:before{content:"\f00d"}i.icon.cart:before{content:"\f07a"}i.icon.cc:before{content:"\f20a"}i.icon.chain:before{content:"\f0c1"}i.icon.chat:before{content:"\f075"}i.icon.checked.calendar:before{content:"\f274"}i.icon.checkmark:before{content:"\f00c"}i.icon.checkmark.box:before{content:"\f14a"}i.icon.chess.rock:before{content:"\f447"}i.icon.circle.notched:before{content:"\f1ce"}i.icon.circle.thin:before{content:"\f111"}i.icon.close:before{content:"\f00d"}i.icon.cloud.download:before{content:"\f381"}i.icon.cloud.upload:before{content:"\f382"}i.icon.cny:before{content:"\f157"}i.icon.cocktail:before{content:"\f000"}i.icon.commenting:before{content:"\f27a"}i.icon.compose:before{content:"\f303"}i.icon.computer:before{content:"\f108"}i.icon.configure:before{content:"\f0ad"}i.icon.content:before{content:"\f0c9"}i.icon.conversation:before{content:"\f086"}i.icon.credit.card.alternative:before{content:"\f09d"}i.icon.currency:before{content:"\f3d1"}i.icon.dashboard:before{content:"\f3fd"}i.icon.deafness:before{content:"\f2a4"}i.icon.delete:before{content:"\f00d"}i.icon.delete.calendar:before{content:"\f273"}i.icon.detective:before{content:"\f21b"}i.icon.diamond:before{content:"\f3a5"}i.icon.discussions:before{content:"\f086"}i.icon.disk:before{content:"\f0a0"}i.icon.doctor:before{content:"\f0f0"}i.icon.dollar:before{content:"\f155"}i.icon.dont:before{content:"\f05e"}i.icon.drivers.license:before{content:"\f2c2"}i.icon.dropdown:before{content:"\f0d7"}i.icon.emergency:before{content:"\f0f9"}i.icon.erase:before{content:"\f12d"}i.icon.eur:before{content:"\f153"}i.icon.euro:before{content:"\f153"}i.icon.exchange:before{content:"\f362"}i.icon.external:before{content:"\f35d"}i.icon.external.share:before{content:"\f14d"}i.icon.external.square:before{content:"\f360"}i.icon.eyedropper:before{content:"\f1fb"}i.icon.factory:before{content:"\f275"}i.icon.favorite:before{content:"\f005"}i.icon.feed:before{content:"\f09e"}i.icon.female.homosexual:before{content:"\f226"}i.icon.file.text:before{content:"\f15c"}i.icon.find:before{content:"\f1e5"}i.icon.first.aid:before{content:"\f0fa"}i.icon.food:before{content:"\f2e7"}i.icon.fork:before{content:"\f126"}i.icon.game:before{content:"\f11b"}i.icon.gay:before{content:"\f227"}i.icon.gbp:before{content:"\f154"}i.icon.grab:before{content:"\f255"}i.icon.graduation:before{content:"\f19d"}i.icon.grid.layout:before{content:"\f00a"}i.icon.group:before{content:"\f0c0"}i.icon.h:before{content:"\f0fd"}i.icon.hamburger:before{content:"\f0c9"}i.icon.hand.victory:before{content:"\f25b"}i.icon.handicap:before{content:"\f193"}i.icon.hard.of.hearing:before{content:"\f2a4"}i.icon.header:before{content:"\f1dc"}i.icon.heart.empty:before{content:"\f004"}i.icon.help:before{content:"\f128"}i.icon.help.circle:before{content:"\f059"}i.icon.heterosexual:before{content:"\f228"}i.icon.hide:before{content:"\f070"}i.icon.hotel:before{content:"\f236"}i.icon.hourglass.four:before{content:"\f254"}i.icon.hourglass.full:before{content:"\f254"}i.icon.hourglass.one:before{content:"\f251"}i.icon.hourglass.three:before{content:"\f253"}i.icon.hourglass.two:before{content:"\f252"}i.icon.hourglass.zero:before{content:"\f253"}i.icon.idea:before{content:"\f0eb"}i.icon.ils:before{content:"\f20b"}i.icon.in.cart:before{content:"\f218"}i.icon.inr:before{content:"\f156"}i.icon.intergender:before{content:"\f224"}i.icon.intersex:before{content:"\f224"}i.icon.jpy:before{content:"\f157"}i.icon.krw:before{content:"\f159"}i.icon.lab:before{content:"\f0c3"}i.icon.law:before{content:"\f24e"}i.icon.legal:before{content:"\f0e3"}i.icon.lesbian:before{content:"\f226"}i.icon.level.down:before{content:"\f3be"}i.icon.level.up:before{content:"\f3bf"}i.icon.lightning:before{content:"\f0e7"}i.icon.like:before{content:"\f004"}i.icon.line.graph:before{content:"\f201"}i.icon.linkify:before{content:"\f0c1"}i.icon.lira:before{content:"\f195"}i.icon.list.layout:before{content:"\f00b"}i.icon.log.out:before{content:"\f2f5"}i.icon.magnify:before{content:"\f00e"}i.icon.mail:before{content:"\f0e0"}i.icon.mail.forward:before{content:"\f064"}i.icon.mail.square:before{content:"\f199"}i.icon.male.homosexual:before{content:"\f227"}i.icon.man:before{content:"\f222"}i.icon.marker:before{content:"\f041"}i.icon.mars.alternate:before{content:"\f229"}i.icon.mars.horizontal:before{content:"\f22b"}i.icon.mars.vertical:before{content:"\f22a"}i.icon.meanpath:before{content:"\f0c8"}i.icon.military:before{content:"\f0fb"}i.icon.money:before{content:"\f3d1"}i.icon.move:before{content:"\f0b2"}i.icon.mute:before{content:"\f131"}i.icon.non.binary.transgender:before{content:"\f223"}i.icon.numbered.list:before{content:"\f0cb"}i.icon.options:before{content:"\f1de"}i.icon.ordered.list:before{content:"\f0cb"}i.icon.other.gender:before{content:"\f229"}i.icon.other.gender.horizontal:before{content:"\f22b"}i.icon.other.gender.vertical:before{content:"\f22a"}i.icon.payment:before{content:"\f09d"}i.icon.pencil:before{content:"\f303"}i.icon.pencil.square:before{content:"\f14b"}i.icon.photo:before{content:"\f030"}i.icon.picture:before{content:"\f03e"}i.icon.pie.chart:before{content:"\f200"}i.icon.pie.graph:before{content:"\f200"}i.icon.pin:before{content:"\f08d"}i.icon.plus.cart:before{content:"\f217"}i.icon.point:before{content:"\f041"}i.icon.pointing.down:before{content:"\f0a7"}i.icon.pointing.left:before{content:"\f0a5"}i.icon.pointing.right:before{content:"\f0a4"}i.icon.pointing.up:before{content:"\f0a6"}i.icon.pound:before{content:"\f154"}i.icon.power:before{content:"\f011"}i.icon.power.cord:before{content:"\f1e6"}i.icon.privacy:before{content:"\f084"}i.icon.protect:before{content:"\f023"}i.icon.puzzle:before{content:"\f12e"}i.icon.r.circle:before{content:"\f25d"}i.icon.radio:before{content:"\f192"}i.icon.rain:before{content:"\f0e9"}i.icon.record:before{content:"\f03d"}i.icon.refresh:before{content:"\f021"}i.icon.remove:before{content:"\f00d"}i.icon.remove.bookmark:before{content:"\f02e"}i.icon.remove.circle:before{content:"\f057"}i.icon.remove.from.calendar:before{content:"\f272"}i.icon.remove.user:before{content:"\f235"}i.icon.repeat:before{content:"\f01e"}i.icon.resize.horizontal:before{content:"\f337"}i.icon.resize.vertical:before{content:"\f338"}i.icon.rmb:before{content:"\f157"}i.icon.rouble:before{content:"\f158"}i.icon.rub:before{content:"\f158"}i.icon.ruble:before{content:"\f158"}i.icon.rupee:before{content:"\f156"}i.icon.s15:before{content:"\f2cd"}i.icon.selected.radio:before{content:"\f192"}i.icon.send:before{content:"\f1d8"}i.icon.setting:before{content:"\f013"}i.icon.settings:before{content:"\f085"}i.icon.shekel:before{content:"\f20b"}i.icon.sheqel:before{content:"\f20b"}i.icon.shield:before{content:"\f3ed"}i.icon.shipping:before{content:"\f0d1"}i.icon.shop:before{content:"\f07a"}i.icon.shuffle:before{content:"\f074"}i.icon.shutdown:before{content:"\f011"}i.icon.sidebar:before{content:"\f0c9"}i.icon.sign.in:before{content:"\f2f6"}i.icon.sign.out:before{content:"\f2f5"}i.icon.signing:before{content:"\f2a7"}i.icon.signup:before{content:"\f044"}i.icon.sliders:before{content:"\f1de"}i.icon.soccer:before{content:"\f1e3"}i.icon.sort.alphabet.ascending:before{content:"\f15d"}i.icon.sort.alphabet.descending:before{content:"\f15e"}i.icon.sort.ascending:before{content:"\f0de"}i.icon.sort.content.ascending:before{content:"\f160"}i.icon.sort.content.descending:before{content:"\f161"}i.icon.sort.descending:before{content:"\f0dd"}i.icon.sort.numeric.ascending:before{content:"\f162"}i.icon.sort.numeric.descending:before{content:"\f163"}i.icon.sound:before{content:"\f025"}i.icon.spoon:before{content:"\f2e5"}i.icon.spy:before{content:"\f21b"}i.icon.star.empty:before{content:"\f005"}i.icon.star.half.empty:before{content:"\f089"}i.icon.star.half.full:before{content:"\f089"}i.icon.student:before{content:"\f19d"}i.icon.talk:before{content:"\f27a"}i.icon.target:before{content:"\f140"}i.icon.teletype:before{content:"\f1e4"}i.icon.television:before{content:"\f26c"}i.icon.text.cursor:before{content:"\f246"}i.icon.text.telephone:before{content:"\f1e4"}i.icon.theme:before{content:"\f043"}i.icon.thermometer:before{content:"\f2c7"}i.icon.thumb.tack:before{content:"\f08d"}i.icon.ticket:before{content:"\f3ff"}i.icon.time:before{content:"\f017"}i.icon.times.rectangle:before{content:"\f410"}i.icon.tm:before{content:"\f25c"}i.icon.toggle.down:before{content:"\f150"}i.icon.toggle.left:before{content:"\f191"}i.icon.toggle.right:before{content:"\f152"}i.icon.toggle.up:before{content:"\f151"}i.icon.translate:before{content:"\f1ab"}i.icon.travel:before{content:"\f0b1"}i.icon.treatment:before{content:"\f0f1"}i.icon.triangle.down:before{content:"\f0d7"}i.icon.triangle.left:before{content:"\f0d9"}i.icon.triangle.right:before{content:"\f0da"}i.icon.triangle.up:before{content:"\f0d8"}i.icon.try:before{content:"\f195"}i.icon.unhide:before{content:"\f06e"}i.icon.unlinkify:before{content:"\f127"}i.icon.unmute:before{content:"\f130"}i.icon.unordered.list:before{content:"\f0ca"}i.icon.usd:before{content:"\f155"}i.icon.user.cancel:before{content:"\f235"}i.icon.user.close:before{content:"\f235"}i.icon.user.delete:before{content:"\f235"}i.icon.user.doctor:before{content:"\f0f0"}i.icon.user.x:before{content:"\f235"}i.icon.vcard:before{content:"\f2bb"}i.icon.video.camera:before{content:"\f03d"}i.icon.video.play:before{content:"\f144"}i.icon.volume.control.phone:before{content:"\f2a0"}i.icon.wait:before{content:"\f017"}i.icon.warning:before{content:"\f12a"}i.icon.warning.circle:before{content:"\f06a"}i.icon.warning.sign:before{content:"\f071"}i.icon.wi.fi:before{content:"\f1eb"}i.icon.winner:before{content:"\f091"}i.icon.wizard:before{content:"\f0d0"}i.icon.woman:before{content:"\f221"}i.icon.won:before{content:"\f159"}i.icon.world:before{content:"\f0ac"}i.icon.write:before{content:"\f303"}i.icon.write.square:before{content:"\f14b"}i.icon.x:before{content:"\f00d"}i.icon.yen:before{content:"\f157"}i.icon.zip:before{content:"\f187"}i.icon.zoom:before{content:"\f00e"}i.icon.zoom.in:before{content:"\f00e"}i.icon.zoom.out:before{content:"\f010"}@font-face{font-family:outline-icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/outline-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.outline{font-family:outline-icons}i.icon.address.book.outline:before{content:"\f2b9"}i.icon.address.card.outline:before{content:"\f2bb"}i.icon.angry.outline:before{content:"\f556"}i.icon.arrow.alternate.circle.down.outline:before{content:"\f358"}i.icon.arrow.alternate.circle.left.outline:before{content:"\f359"}i.icon.arrow.alternate.circle.right.outline:before{content:"\f35a"}i.icon.arrow.alternate.circle.up.outline:before{content:"\f35b"}i.icon.bell.outline:before{content:"\f0f3"}i.icon.bell.slash.outline:before{content:"\f1f6"}i.icon.bookmark.outline:before{content:"\f02e"}i.icon.building.outline:before{content:"\f1ad"}i.icon.calendar.alternate.outline:before{content:"\f073"}i.icon.calendar.check.outline:before{content:"\f274"}i.icon.calendar.minus.outline:before{content:"\f272"}i.icon.calendar.outline:before{content:"\f133"}i.icon.calendar.plus.outline:before{content:"\f271"}i.icon.calendar.times.outline:before{content:"\f273"}i.icon.caret.square.down.outline:before{content:"\f150"}i.icon.caret.square.left.outline:before{content:"\f191"}i.icon.caret.square.right.outline:before{content:"\f152"}i.icon.caret.square.up.outline:before{content:"\f151"}i.icon.chart.bar.outline:before{content:"\f080"}i.icon.check.circle.outline:before{content:"\f058"}i.icon.check.square.outline:before{content:"\f14a"}i.icon.circle.outline:before{content:"\f111"}i.icon.clipboard.outline:before{content:"\f328"}i.icon.clock.outline:before{content:"\f017"}i.icon.clone.outline:before{content:"\f24d"}i.icon.closed.captioning.outline:before{content:"\f20a"}i.icon.comment.alternate.outline:before{content:"\f27a"}i.icon.comment.dots.outline:before{content:"\f4ad"}i.icon.comment.outline:before{content:"\f075"}i.icon.comments.outline:before{content:"\f086"}i.icon.compass.outline:before{content:"\f14e"}i.icon.copy.outline:before{content:"\f0c5"}i.icon.copyright.outline:before{content:"\f1f9"}i.icon.credit.card.outline:before{content:"\f09d"}i.icon.dizzy.outline:before{content:"\f567"}i.icon.dot.circle.outline:before{content:"\f192"}i.icon.edit.outline:before{content:"\f044"}i.icon.envelope.open.outline:before{content:"\f2b6"}i.icon.envelope.outline:before{content:"\f0e0"}i.icon.eye.outline:before{content:"\f06e"}i.icon.eye.slash.outline:before{content:"\f070"}i.icon.file.alternate.outline:before{content:"\f15c"}i.icon.file.archive.outline:before{content:"\f1c6"}i.icon.file.audio.outline:before{content:"\f1c7"}i.icon.file.code.outline:before{content:"\f1c9"}i.icon.file.excel.outline:before{content:"\f1c3"}i.icon.file.image.outline:before{content:"\f1c5"}i.icon.file.outline:before{content:"\f15b"}i.icon.file.pdf.outline:before{content:"\f1c1"}i.icon.file.powerpoint.outline:before{content:"\f1c4"}i.icon.file.video.outline:before{content:"\f1c8"}i.icon.file.word.outline:before{content:"\f1c2"}i.icon.flag.outline:before{content:"\f024"}i.icon.flushed.outline:before{content:"\f579"}i.icon.folder.open.outline:before{content:"\f07c"}i.icon.folder.outline:before{content:"\f07b"}i.icon.frown.open.outline:before{content:"\f57a"}i.icon.frown.outline:before{content:"\f119"}i.icon.futbol.outline:before{content:"\f1e3"}i.icon.gem.outline:before{content:"\f3a5"}i.icon.grimace.outline:before{content:"\f57f"}i.icon.grin.alternate.outline:before{content:"\f581"}i.icon.grin.beam.outline:before{content:"\f582"}i.icon.grin.beam.sweat.outline:before{content:"\f583"}i.icon.grin.hearts.outline:before{content:"\f584"}i.icon.grin.outline:before{content:"\f580"}i.icon.grin.squint.outline:before{content:"\f585"}i.icon.grin.squint.tears.outline:before{content:"\f586"}i.icon.grin.stars.outline:before{content:"\f587"}i.icon.grin.tears.outline:before{content:"\f588"}i.icon.grin.tongue.outline:before{content:"\f589"}i.icon.grin.tongue.squint.outline:before{content:"\f58a"}i.icon.grin.tongue.wink.outline:before{content:"\f58b"}i.icon.grin.wink.outline:before{content:"\f58c"}i.icon.hand.lizard.outline:before{content:"\f258"}i.icon.hand.paper.outline:before{content:"\f256"}i.icon.hand.peace.outline:before{content:"\f25b"}i.icon.hand.point.down.outline:before{content:"\f0a7"}i.icon.hand.point.left.outline:before{content:"\f0a5"}i.icon.hand.point.right.outline:before{content:"\f0a4"}i.icon.hand.point.up.outline:before{content:"\f0a6"}i.icon.hand.pointer.outline:before{content:"\f25a"}i.icon.hand.rock.outline:before{content:"\f255"}i.icon.hand.scissors.outline:before{content:"\f257"}i.icon.hand.spock.outline:before{content:"\f259"}i.icon.handshake.outline:before{content:"\f2b5"}i.icon.hdd.outline:before{content:"\f0a0"}i.icon.heart.outline:before{content:"\f004"}i.icon.hospital.outline:before{content:"\f0f8"}i.icon.hourglass.outline:before{content:"\f254"}i.icon.id.badge.outline:before{content:"\f2c1"}i.icon.id.card.outline:before{content:"\f2c2"}i.icon.image.outline:before{content:"\f03e"}i.icon.images.outline:before{content:"\f302"}i.icon.keyboard.outline:before{content:"\f11c"}i.icon.kiss.beam.outline:before{content:"\f597"}i.icon.kiss.outline:before{content:"\f596"}i.icon.kiss.wink.heart.outline:before{content:"\f598"}i.icon.laugh.beam.outline:before{content:"\f59a"}i.icon.laugh.outline:before{content:"\f599"}i.icon.laugh.squint.outline:before{content:"\f59b"}i.icon.laugh.wink.outline:before{content:"\f59c"}i.icon.lemon.outline:before{content:"\f094"}i.icon.life.ring.outline:before{content:"\f1cd"}i.icon.lightbulb.outline:before{content:"\f0eb"}i.icon.list.alternate.outline:before{content:"\f022"}i.icon.map.outline:before{content:"\f279"}i.icon.meh.blank.outline:before{content:"\f5a4"}i.icon.meh.outline:before{content:"\f11a"}i.icon.meh.rolling.eyes.outline:before{content:"\f5a5"}i.icon.minus.square.outline:before{content:"\f146"}i.icon.money.bill.alternate.outline:before{content:"\f3d1"}i.icon.moon.outline:before{content:"\f186"}i.icon.newspaper.outline:before{content:"\f1ea"}i.icon.object.group.outline:before{content:"\f247"}i.icon.object.ungroup.outline:before{content:"\f248"}i.icon.paper.plane.outline:before{content:"\f1d8"}i.icon.pause.circle.outline:before{content:"\f28b"}i.icon.play.circle.outline:before{content:"\f144"}i.icon.plus.square.outline:before{content:"\f0fe"}i.icon.question.circle.outline:before{content:"\f059"}i.icon.registered.outline:before{content:"\f25d"}i.icon.sad.cry.outline:before{content:"\f5b3"}i.icon.sad.tear.outline:before{content:"\f5b4"}i.icon.save.outline:before{content:"\f0c7"}i.icon.share.square.outline:before{content:"\f14d"}i.icon.smile.beam.outline:before{content:"\f5b8"}i.icon.smile.outline:before{content:"\f118"}i.icon.smile.wink.outline:before{content:"\f4da"}i.icon.snowflake.outline:before{content:"\f2dc"}i.icon.square.outline:before{content:"\f0c8"}i.icon.star.half.outline:before{content:"\f089"}i.icon.star.outline:before{content:"\f005"}i.icon.sticky.note.outline:before{content:"\f249"}i.icon.stop.circle.outline:before{content:"\f28d"}i.icon.sun.outline:before{content:"\f185"}i.icon.surprise.outline:before{content:"\f5c2"}i.icon.thumbs.down.outline:before{content:"\f165"}i.icon.thumbs.up.outline:before{content:"\f164"}i.icon.times.circle.outline:before{content:"\f057"}i.icon.tired.outline:before{content:"\f5c8"}i.icon.trash.alternate.outline:before{content:"\f2ed"}i.icon.user.circle.outline:before{content:"\f2bd"}i.icon.user.outline:before{content:"\f007"}i.icon.window.close.outline:before{content:"\f410"}i.icon.window.maximize.outline:before{content:"\f2d0"}i.icon.window.minimize.outline:before{content:"\f2d1"}i.icon.window.restore.outline:before{content:"\f2d2"}@font-face{font-family:brand-icons;src:url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.eot);src:url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.eot?#iefix) format('embedded-opentype'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.woff2) format('woff2'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.woff) format('woff'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.ttf) format('truetype'),url(../../../src/assets/ui/themes/default/assets/fonts/brand-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.\35 00px:before{content:"\f26e";font-family:brand-icons}i.icon.accessible:before{content:"\f368";font-family:brand-icons}i.icon.accusoft:before{content:"\f369";font-family:brand-icons}i.icon.acquisitions.incorporated:before{content:"\f6af";font-family:brand-icons}i.icon.adn:before{content:"\f170";font-family:brand-icons}i.icon.adobe:before{content:"\f778";font-family:brand-icons}i.icon.adversal:before{content:"\f36a";font-family:brand-icons}i.icon.affiliatetheme:before{content:"\f36b";font-family:brand-icons}i.icon.airbnb:before{content:"\f834";font-family:brand-icons}i.icon.algolia:before{content:"\f36c";font-family:brand-icons}i.icon.alipay:before{content:"\f642";font-family:brand-icons}i.icon.amazon:before{content:"\f270";font-family:brand-icons}i.icon.amazon.pay:before{content:"\f42c";font-family:brand-icons}i.icon.amilia:before{content:"\f36d";font-family:brand-icons}i.icon.android:before{content:"\f17b";font-family:brand-icons}i.icon.angellist:before{content:"\f209";font-family:brand-icons}i.icon.angrycreative:before{content:"\f36e";font-family:brand-icons}i.icon.angular:before{content:"\f420";font-family:brand-icons}i.icon.app.store:before{content:"\f36f";font-family:brand-icons}i.icon.app.store.ios:before{content:"\f370";font-family:brand-icons}i.icon.apper:before{content:"\f371";font-family:brand-icons}i.icon.apple:before{content:"\f179";font-family:brand-icons}i.icon.apple.pay:before{content:"\f415";font-family:brand-icons}i.icon.artstation:before{content:"\f77a";font-family:brand-icons}i.icon.asymmetrik:before{content:"\f372";font-family:brand-icons}i.icon.atlassian:before{content:"\f77b";font-family:brand-icons}i.icon.audible:before{content:"\f373";font-family:brand-icons}i.icon.autoprefixer:before{content:"\f41c";font-family:brand-icons}i.icon.avianex:before{content:"\f374";font-family:brand-icons}i.icon.aviato:before{content:"\f421";font-family:brand-icons}i.icon.aws:before{content:"\f375";font-family:brand-icons}i.icon.bandcamp:before{content:"\f2d5";font-family:brand-icons}i.icon.battle.net:before{content:"\f835";font-family:brand-icons}i.icon.behance:before{content:"\f1b4";font-family:brand-icons}i.icon.behance.square:before{content:"\f1b5";font-family:brand-icons}i.icon.bimobject:before{content:"\f378";font-family:brand-icons}i.icon.bitbucket:before{content:"\f171";font-family:brand-icons}i.icon.bitcoin:before{content:"\f379";font-family:brand-icons}i.icon.bity:before{content:"\f37a";font-family:brand-icons}i.icon.black.tie:before{content:"\f27e";font-family:brand-icons}i.icon.blackberry:before{content:"\f37b";font-family:brand-icons}i.icon.blogger:before{content:"\f37c";font-family:brand-icons}i.icon.blogger.b:before{content:"\f37d";font-family:brand-icons}i.icon.bluetooth:before{content:"\f293";font-family:brand-icons}i.icon.bluetooth.b:before{content:"\f294";font-family:brand-icons}i.icon.bootstrap:before{content:"\f836";font-family:brand-icons}i.icon.btc:before{content:"\f15a";font-family:brand-icons}i.icon.buffer:before{content:"\f837";font-family:brand-icons}i.icon.buromobelexperte:before{content:"\f37f";font-family:brand-icons}i.icon.buy.n.large:before{content:"\f8a6";font-family:brand-icons}i.icon.buysellads:before{content:"\f20d";font-family:brand-icons}i.icon.canadian.maple.leaf:before{content:"\f785";font-family:brand-icons}i.icon.cc.amazon.pay:before{content:"\f42d";font-family:brand-icons}i.icon.cc.amex:before{content:"\f1f3";font-family:brand-icons}i.icon.cc.apple.pay:before{content:"\f416";font-family:brand-icons}i.icon.cc.diners.club:before{content:"\f24c";font-family:brand-icons}i.icon.cc.discover:before{content:"\f1f2";font-family:brand-icons}i.icon.cc.jcb:before{content:"\f24b";font-family:brand-icons}i.icon.cc.mastercard:before{content:"\f1f1";font-family:brand-icons}i.icon.cc.paypal:before{content:"\f1f4";font-family:brand-icons}i.icon.cc.stripe:before{content:"\f1f5";font-family:brand-icons}i.icon.cc.visa:before{content:"\f1f0";font-family:brand-icons}i.icon.centercode:before{content:"\f380";font-family:brand-icons}i.icon.centos:before{content:"\f789";font-family:brand-icons}i.icon.chrome:before{content:"\f268";font-family:brand-icons}i.icon.chromecast:before{content:"\f838";font-family:brand-icons}i.icon.cloudscale:before{content:"\f383";font-family:brand-icons}i.icon.cloudsmith:before{content:"\f384";font-family:brand-icons}i.icon.cloudversify:before{content:"\f385";font-family:brand-icons}i.icon.codepen:before{content:"\f1cb";font-family:brand-icons}i.icon.codiepie:before{content:"\f284";font-family:brand-icons}i.icon.confluence:before{content:"\f78d";font-family:brand-icons}i.icon.connectdevelop:before{content:"\f20e";font-family:brand-icons}i.icon.contao:before{content:"\f26d";font-family:brand-icons}i.icon.cotton.bureau:before{content:"\f89e";font-family:brand-icons}i.icon.cpanel:before{content:"\f388";font-family:brand-icons}i.icon.creative.commons:before{content:"\f25e";font-family:brand-icons}i.icon.creative.commons.by:before{content:"\f4e7";font-family:brand-icons}i.icon.creative.commons.nc:before{content:"\f4e8";font-family:brand-icons}i.icon.creative.commons.nc.eu:before{content:"\f4e9";font-family:brand-icons}i.icon.creative.commons.nc.jp:before{content:"\f4ea";font-family:brand-icons}i.icon.creative.commons.nd:before{content:"\f4eb";font-family:brand-icons}i.icon.creative.commons.pd:before{content:"\f4ec";font-family:brand-icons}i.icon.creative.commons.pd.alternate:before{content:"\f4ed";font-family:brand-icons}i.icon.creative.commons.remix:before{content:"\f4ee";font-family:brand-icons}i.icon.creative.commons.sa:before{content:"\f4ef";font-family:brand-icons}i.icon.creative.commons.sampling:before{content:"\f4f0";font-family:brand-icons}i.icon.creative.commons.sampling.plus:before{content:"\f4f1";font-family:brand-icons}i.icon.creative.commons.share:before{content:"\f4f2";font-family:brand-icons}i.icon.creative.commons.zero:before{content:"\f4f3";font-family:brand-icons}i.icon.critical.role:before{content:"\f6c9";font-family:brand-icons}i.icon.css3:before{content:"\f13c";font-family:brand-icons}i.icon.css3.alternate:before{content:"\f38b";font-family:brand-icons}i.icon.cuttlefish:before{content:"\f38c";font-family:brand-icons}i.icon.d.and.d:before{content:"\f38d";font-family:brand-icons}i.icon.d.and.d.beyond:before{content:"\f6ca";font-family:brand-icons}i.icon.dashcube:before{content:"\f210";font-family:brand-icons}i.icon.delicious:before{content:"\f1a5";font-family:brand-icons}i.icon.deploydog:before{content:"\f38e";font-family:brand-icons}i.icon.deskpro:before{content:"\f38f";font-family:brand-icons}i.icon.dev:before{content:"\f6cc";font-family:brand-icons}i.icon.deviantart:before{content:"\f1bd";font-family:brand-icons}i.icon.dhl:before{content:"\f790";font-family:brand-icons}i.icon.diaspora:before{content:"\f791";font-family:brand-icons}i.icon.digg:before{content:"\f1a6";font-family:brand-icons}i.icon.digital.ocean:before{content:"\f391";font-family:brand-icons}i.icon.discord:before{content:"\f392";font-family:brand-icons}i.icon.discourse:before{content:"\f393";font-family:brand-icons}i.icon.dochub:before{content:"\f394";font-family:brand-icons}i.icon.docker:before{content:"\f395";font-family:brand-icons}i.icon.draft2digital:before{content:"\f396";font-family:brand-icons}i.icon.dribbble:before{content:"\f17d";font-family:brand-icons}i.icon.dribbble.square:before{content:"\f397";font-family:brand-icons}i.icon.dropbox:before{content:"\f16b";font-family:brand-icons}i.icon.drupal:before{content:"\f1a9";font-family:brand-icons}i.icon.dyalog:before{content:"\f399";font-family:brand-icons}i.icon.earlybirds:before{content:"\f39a";font-family:brand-icons}i.icon.ebay:before{content:"\f4f4";font-family:brand-icons}i.icon.edge:before{content:"\f282";font-family:brand-icons}i.icon.elementor:before{content:"\f430";font-family:brand-icons}i.icon.ello:before{content:"\f5f1";font-family:brand-icons}i.icon.ember:before{content:"\f423";font-family:brand-icons}i.icon.empire:before{content:"\f1d1";font-family:brand-icons}i.icon.envira:before{content:"\f299";font-family:brand-icons}i.icon.erlang:before{content:"\f39d";font-family:brand-icons}i.icon.ethereum:before{content:"\f42e";font-family:brand-icons}i.icon.etsy:before{content:"\f2d7";font-family:brand-icons}i.icon.evernote:before{content:"\f839";font-family:brand-icons}i.icon.expeditedssl:before{content:"\f23e";font-family:brand-icons}i.icon.facebook:before{content:"\f09a";font-family:brand-icons}i.icon.facebook.f:before{content:"\f39e";font-family:brand-icons}i.icon.facebook.messenger:before{content:"\f39f";font-family:brand-icons}i.icon.facebook.square:before{content:"\f082";font-family:brand-icons}i.icon.fantasy.flight.games:before{content:"\f6dc";font-family:brand-icons}i.icon.fedex:before{content:"\f797";font-family:brand-icons}i.icon.fedora:before{content:"\f798";font-family:brand-icons}i.icon.figma:before{content:"\f799";font-family:brand-icons}i.icon.firefox:before{content:"\f269";font-family:brand-icons}i.icon.firefox.browser:before{content:"\f907";font-family:brand-icons}i.icon.first.order:before{content:"\f2b0";font-family:brand-icons}i.icon.first.order.alternate:before{content:"\f50a";font-family:brand-icons}i.icon.firstdraft:before{content:"\f3a1";font-family:brand-icons}i.icon.flickr:before{content:"\f16e";font-family:brand-icons}i.icon.flipboard:before{content:"\f44d";font-family:brand-icons}i.icon.fly:before{content:"\f417";font-family:brand-icons}i.icon.font.awesome:before{content:"\f2b4";font-family:brand-icons}i.icon.font.awesome.alternate:before{content:"\f35c";font-family:brand-icons}i.icon.font.awesome.flag:before{content:"\f425";font-family:brand-icons}i.icon.fonticons:before{content:"\f280";font-family:brand-icons}i.icon.fonticons.fi:before{content:"\f3a2";font-family:brand-icons}i.icon.fort.awesome:before{content:"\f286";font-family:brand-icons}i.icon.fort.awesome.alternate:before{content:"\f3a3";font-family:brand-icons}i.icon.forumbee:before{content:"\f211";font-family:brand-icons}i.icon.foursquare:before{content:"\f180";font-family:brand-icons}i.icon.free.code.camp:before{content:"\f2c5";font-family:brand-icons}i.icon.freebsd:before{content:"\f3a4";font-family:brand-icons}i.icon.fulcrum:before{content:"\f50b";font-family:brand-icons}i.icon.galactic.republic:before{content:"\f50c";font-family:brand-icons}i.icon.galactic.senate:before{content:"\f50d";font-family:brand-icons}i.icon.get.pocket:before{content:"\f265";font-family:brand-icons}i.icon.gg:before{content:"\f260";font-family:brand-icons}i.icon.gg.circle:before{content:"\f261";font-family:brand-icons}i.icon.git:before{content:"\f1d3";font-family:brand-icons}i.icon.git.alternate:before{content:"\f841";font-family:brand-icons}i.icon.git.square:before{content:"\f1d2";font-family:brand-icons}i.icon.github:before{content:"\f09b";font-family:brand-icons}i.icon.github.alternate:before{content:"\f113";font-family:brand-icons}i.icon.github.square:before{content:"\f092";font-family:brand-icons}i.icon.gitkraken:before{content:"\f3a6";font-family:brand-icons}i.icon.gitlab:before{content:"\f296";font-family:brand-icons}i.icon.gitter:before{content:"\f426";font-family:brand-icons}i.icon.glide:before{content:"\f2a5";font-family:brand-icons}i.icon.glide.g:before{content:"\f2a6";font-family:brand-icons}i.icon.gofore:before{content:"\f3a7";font-family:brand-icons}i.icon.goodreads:before{content:"\f3a8";font-family:brand-icons}i.icon.goodreads.g:before{content:"\f3a9";font-family:brand-icons}i.icon.google:before{content:"\f1a0";font-family:brand-icons}i.icon.google.drive:before{content:"\f3aa";font-family:brand-icons}i.icon.google.play:before{content:"\f3ab";font-family:brand-icons}i.icon.google.plus:before{content:"\f2b3";font-family:brand-icons}i.icon.google.plus.g:before{content:"\f0d5";font-family:brand-icons}i.icon.google.plus.square:before{content:"\f0d4";font-family:brand-icons}i.icon.google.wallet:before{content:"\f1ee";font-family:brand-icons}i.icon.gratipay:before{content:"\f184";font-family:brand-icons}i.icon.grav:before{content:"\f2d6";font-family:brand-icons}i.icon.gripfire:before{content:"\f3ac";font-family:brand-icons}i.icon.grunt:before{content:"\f3ad";font-family:brand-icons}i.icon.gulp:before{content:"\f3ae";font-family:brand-icons}i.icon.hacker.news:before{content:"\f1d4";font-family:brand-icons}i.icon.hacker.news.square:before{content:"\f3af";font-family:brand-icons}i.icon.hackerrank:before{content:"\f5f7";font-family:brand-icons}i.icon.hips:before{content:"\f452";font-family:brand-icons}i.icon.hire.a.helper:before{content:"\f3b0";font-family:brand-icons}i.icon.hooli:before{content:"\f427";font-family:brand-icons}i.icon.hornbill:before{content:"\f592";font-family:brand-icons}i.icon.hotjar:before{content:"\f3b1";font-family:brand-icons}i.icon.houzz:before{content:"\f27c";font-family:brand-icons}i.icon.html5:before{content:"\f13b";font-family:brand-icons}i.icon.hubspot:before{content:"\f3b2";font-family:brand-icons}i.icon.ideal:before{content:"\f913";font-family:brand-icons}i.icon.imdb:before{content:"\f2d8";font-family:brand-icons}i.icon.instagram:before{content:"\f16d";font-family:brand-icons}i.icon.intercom:before{content:"\f7af";font-family:brand-icons}i.icon.internet.explorer:before{content:"\f26b";font-family:brand-icons}i.icon.invision:before{content:"\f7b0";font-family:brand-icons}i.icon.ioxhost:before{content:"\f208";font-family:brand-icons}i.icon.itch.io:before{content:"\f83a";font-family:brand-icons}i.icon.itunes:before{content:"\f3b4";font-family:brand-icons}i.icon.itunes.note:before{content:"\f3b5";font-family:brand-icons}i.icon.java:before{content:"\f4e4";font-family:brand-icons}i.icon.jedi.order:before{content:"\f50e";font-family:brand-icons}i.icon.jenkins:before{content:"\f3b6";font-family:brand-icons}i.icon.jira:before{content:"\f7b1";font-family:brand-icons}i.icon.joget:before{content:"\f3b7";font-family:brand-icons}i.icon.joomla:before{content:"\f1aa";font-family:brand-icons}i.icon.js:before{content:"\f3b8";font-family:brand-icons}i.icon.js.square:before{content:"\f3b9";font-family:brand-icons}i.icon.jsfiddle:before{content:"\f1cc";font-family:brand-icons}i.icon.kaggle:before{content:"\f5fa";font-family:brand-icons}i.icon.keybase:before{content:"\f4f5";font-family:brand-icons}i.icon.keycdn:before{content:"\f3ba";font-family:brand-icons}i.icon.kickstarter:before{content:"\f3bb";font-family:brand-icons}i.icon.kickstarter.k:before{content:"\f3bc";font-family:brand-icons}i.icon.korvue:before{content:"\f42f";font-family:brand-icons}i.icon.laravel:before{content:"\f3bd";font-family:brand-icons}i.icon.lastfm:before{content:"\f202";font-family:brand-icons}i.icon.lastfm.square:before{content:"\f203";font-family:brand-icons}i.icon.leanpub:before{content:"\f212";font-family:brand-icons}i.icon.lesscss:before{content:"\f41d";font-family:brand-icons}i.icon.linechat:before{content:"\f3c0";font-family:brand-icons}i.icon.linkedin:before{content:"\f08c";font-family:brand-icons}i.icon.linkedin.in:before{content:"\f0e1";font-family:brand-icons}i.icon.linode:before{content:"\f2b8";font-family:brand-icons}i.icon.linux:before{content:"\f17c";font-family:brand-icons}i.icon.lyft:before{content:"\f3c3";font-family:brand-icons}i.icon.magento:before{content:"\f3c4";font-family:brand-icons}i.icon.mailchimp:before{content:"\f59e";font-family:brand-icons}i.icon.mandalorian:before{content:"\f50f";font-family:brand-icons}i.icon.markdown:before{content:"\f60f";font-family:brand-icons}i.icon.mastodon:before{content:"\f4f6";font-family:brand-icons}i.icon.maxcdn:before{content:"\f136";font-family:brand-icons}i.icon.mdb:before{content:"\f8ca";font-family:brand-icons}i.icon.medapps:before{content:"\f3c6";font-family:brand-icons}i.icon.medium:before{content:"\f23a";font-family:brand-icons}i.icon.medium.m:before{content:"\f3c7";font-family:brand-icons}i.icon.medrt:before{content:"\f3c8";font-family:brand-icons}i.icon.meetup:before{content:"\f2e0";font-family:brand-icons}i.icon.megaport:before{content:"\f5a3";font-family:brand-icons}i.icon.mendeley:before{content:"\f7b3";font-family:brand-icons}i.icon.microblog:before{content:"\f91a";font-family:brand-icons}i.icon.microsoft:before{content:"\f3ca";font-family:brand-icons}i.icon.mix:before{content:"\f3cb";font-family:brand-icons}i.icon.mixcloud:before{content:"\f289";font-family:brand-icons}i.icon.mizuni:before{content:"\f3cc";font-family:brand-icons}i.icon.modx:before{content:"\f285";font-family:brand-icons}i.icon.monero:before{content:"\f3d0";font-family:brand-icons}i.icon.napster:before{content:"\f3d2";font-family:brand-icons}i.icon.neos:before{content:"\f612";font-family:brand-icons}i.icon.nimblr:before{content:"\f5a8";font-family:brand-icons}i.icon.node:before{content:"\f419";font-family:brand-icons}i.icon.node.js:before{content:"\f3d3";font-family:brand-icons}i.icon.npm:before{content:"\f3d4";font-family:brand-icons}i.icon.ns8:before{content:"\f3d5";font-family:brand-icons}i.icon.nutritionix:before{content:"\f3d6";font-family:brand-icons}i.icon.odnoklassniki:before{content:"\f263";font-family:brand-icons}i.icon.odnoklassniki.square:before{content:"\f264";font-family:brand-icons}i.icon.old.republic:before{content:"\f510";font-family:brand-icons}i.icon.opencart:before{content:"\f23d";font-family:brand-icons}i.icon.openid:before{content:"\f19b";font-family:brand-icons}i.icon.opera:before{content:"\f26a";font-family:brand-icons}i.icon.optin.monster:before{content:"\f23c";font-family:brand-icons}i.icon.orcid:before{content:"\f8d2";font-family:brand-icons}i.icon.osi:before{content:"\f41a";font-family:brand-icons}i.icon.page4:before{content:"\f3d7";font-family:brand-icons}i.icon.pagelines:before{content:"\f18c";font-family:brand-icons}i.icon.palfed:before{content:"\f3d8";font-family:brand-icons}i.icon.patreon:before{content:"\f3d9";font-family:brand-icons}i.icon.paypal:before{content:"\f1ed";font-family:brand-icons}i.icon.penny.arcade:before{content:"\f704";font-family:brand-icons}i.icon.periscope:before{content:"\f3da";font-family:brand-icons}i.icon.phabricator:before{content:"\f3db";font-family:brand-icons}i.icon.phoenix.framework:before{content:"\f3dc";font-family:brand-icons}i.icon.phoenix.squadron:before{content:"\f511";font-family:brand-icons}i.icon.php:before{content:"\f457";font-family:brand-icons}i.icon.pied.piper:before{content:"\f2ae";font-family:brand-icons}i.icon.pied.piper.alternate:before{content:"\f1a8";font-family:brand-icons}i.icon.pied.piper.hat:before{content:"\f4e5";font-family:brand-icons}i.icon.pied.piper.pp:before{content:"\f1a7";font-family:brand-icons}i.icon.pied.piper.square:before{content:"\f91e";font-family:brand-icons}i.icon.pinterest:before{content:"\f0d2";font-family:brand-icons}i.icon.pinterest.p:before{content:"\f231";font-family:brand-icons}i.icon.pinterest.square:before{content:"\f0d3";font-family:brand-icons}i.icon.playstation:before{content:"\f3df";font-family:brand-icons}i.icon.product.hunt:before{content:"\f288";font-family:brand-icons}i.icon.pushed:before{content:"\f3e1";font-family:brand-icons}i.icon.python:before{content:"\f3e2";font-family:brand-icons}i.icon.qq:before{content:"\f1d6";font-family:brand-icons}i.icon.quinscape:before{content:"\f459";font-family:brand-icons}i.icon.quora:before{content:"\f2c4";font-family:brand-icons}i.icon.r.project:before{content:"\f4f7";font-family:brand-icons}i.icon.raspberry.pi:before{content:"\f7bb";font-family:brand-icons}i.icon.ravelry:before{content:"\f2d9";font-family:brand-icons}i.icon.react:before{content:"\f41b";font-family:brand-icons}i.icon.reacteurope:before{content:"\f75d";font-family:brand-icons}i.icon.readme:before{content:"\f4d5";font-family:brand-icons}i.icon.rebel:before{content:"\f1d0";font-family:brand-icons}i.icon.reddit:before{content:"\f1a1";font-family:brand-icons}i.icon.reddit.alien:before{content:"\f281";font-family:brand-icons}i.icon.reddit.square:before{content:"\f1a2";font-family:brand-icons}i.icon.redhat:before{content:"\f7bc";font-family:brand-icons}i.icon.redriver:before{content:"\f3e3";font-family:brand-icons}i.icon.redyeti:before{content:"\f69d";font-family:brand-icons}i.icon.renren:before{content:"\f18b";font-family:brand-icons}i.icon.replyd:before{content:"\f3e6";font-family:brand-icons}i.icon.researchgate:before{content:"\f4f8";font-family:brand-icons}i.icon.resolving:before{content:"\f3e7";font-family:brand-icons}i.icon.rev:before{content:"\f5b2";font-family:brand-icons}i.icon.rocketchat:before{content:"\f3e8";font-family:brand-icons}i.icon.rockrms:before{content:"\f3e9";font-family:brand-icons}i.icon.safari:before{content:"\f267";font-family:brand-icons}i.icon.salesforce:before{content:"\f83b";font-family:brand-icons}i.icon.sass:before{content:"\f41e";font-family:brand-icons}i.icon.schlix:before{content:"\f3ea";font-family:brand-icons}i.icon.scribd:before{content:"\f28a";font-family:brand-icons}i.icon.searchengin:before{content:"\f3eb";font-family:brand-icons}i.icon.sellcast:before{content:"\f2da";font-family:brand-icons}i.icon.sellsy:before{content:"\f213";font-family:brand-icons}i.icon.servicestack:before{content:"\f3ec";font-family:brand-icons}i.icon.shirtsinbulk:before{content:"\f214";font-family:brand-icons}i.icon.shopware:before{content:"\f5b5";font-family:brand-icons}i.icon.simplybuilt:before{content:"\f215";font-family:brand-icons}i.icon.sistrix:before{content:"\f3ee";font-family:brand-icons}i.icon.sith:before{content:"\f512";font-family:brand-icons}i.icon.sketch:before{content:"\f7c6";font-family:brand-icons}i.icon.skyatlas:before{content:"\f216";font-family:brand-icons}i.icon.skype:before{content:"\f17e";font-family:brand-icons}i.icon.slack:before{content:"\f198";font-family:brand-icons}i.icon.slack.hash:before{content:"\f3ef";font-family:brand-icons}i.icon.slideshare:before{content:"\f1e7";font-family:brand-icons}i.icon.snapchat:before{content:"\f2ab";font-family:brand-icons}i.icon.snapchat.ghost:before{content:"\f2ac";font-family:brand-icons}i.icon.snapchat.square:before{content:"\f2ad";font-family:brand-icons}i.icon.soundcloud:before{content:"\f1be";font-family:brand-icons}i.icon.sourcetree:before{content:"\f7d3";font-family:brand-icons}i.icon.speakap:before{content:"\f3f3";font-family:brand-icons}i.icon.speaker.deck:before{content:"\f83c";font-family:brand-icons}i.icon.spotify:before{content:"\f1bc";font-family:brand-icons}i.icon.squarespace:before{content:"\f5be";font-family:brand-icons}i.icon.stack.exchange:before{content:"\f18d";font-family:brand-icons}i.icon.stack.overflow:before{content:"\f16c";font-family:brand-icons}i.icon.stackpath:before{content:"\f842";font-family:brand-icons}i.icon.staylinked:before{content:"\f3f5";font-family:brand-icons}i.icon.steam:before{content:"\f1b6";font-family:brand-icons}i.icon.steam.square:before{content:"\f1b7";font-family:brand-icons}i.icon.steam.symbol:before{content:"\f3f6";font-family:brand-icons}i.icon.sticker.mule:before{content:"\f3f7";font-family:brand-icons}i.icon.strava:before{content:"\f428";font-family:brand-icons}i.icon.stripe:before{content:"\f429";font-family:brand-icons}i.icon.stripe.s:before{content:"\f42a";font-family:brand-icons}i.icon.studiovinari:before{content:"\f3f8";font-family:brand-icons}i.icon.stumbleupon:before{content:"\f1a4";font-family:brand-icons}i.icon.stumbleupon.circle:before{content:"\f1a3";font-family:brand-icons}i.icon.superpowers:before{content:"\f2dd";font-family:brand-icons}i.icon.supple:before{content:"\f3f9";font-family:brand-icons}i.icon.suse:before{content:"\f7d6";font-family:brand-icons}i.icon.swift:before{content:"\f8e1";font-family:brand-icons}i.icon.symfony:before{content:"\f83d";font-family:brand-icons}i.icon.teamspeak:before{content:"\f4f9";font-family:brand-icons}i.icon.telegram:before{content:"\f2c6";font-family:brand-icons}i.icon.telegram.plane:before{content:"\f3fe";font-family:brand-icons}i.icon.tencent.weibo:before{content:"\f1d5";font-family:brand-icons}i.icon.themeco:before{content:"\f5c6";font-family:brand-icons}i.icon.themeisle:before{content:"\f2b2";font-family:brand-icons}i.icon.think.peaks:before{content:"\f731";font-family:brand-icons}i.icon.trade.federation:before{content:"\f513";font-family:brand-icons}i.icon.trello:before{content:"\f181";font-family:brand-icons}i.icon.tripadvisor:before{content:"\f262";font-family:brand-icons}i.icon.tumblr:before{content:"\f173";font-family:brand-icons}i.icon.tumblr.square:before{content:"\f174";font-family:brand-icons}i.icon.twitch:before{content:"\f1e8";font-family:brand-icons}i.icon.twitter:before{content:"\f099";font-family:brand-icons}i.icon.twitter.square:before{content:"\f081";font-family:brand-icons}i.icon.typo3:before{content:"\f42b";font-family:brand-icons}i.icon.uber:before{content:"\f402";font-family:brand-icons}i.icon.ubuntu:before{content:"\f7df";font-family:brand-icons}i.icon.uikit:before{content:"\f403";font-family:brand-icons}i.icon.umbraco:before{content:"\f8e8";font-family:brand-icons}i.icon.uniregistry:before{content:"\f404";font-family:brand-icons}i.icon.unity:before{content:"\f949";font-family:brand-icons}i.icon.untappd:before{content:"\f405";font-family:brand-icons}i.icon.ups:before{content:"\f7e0";font-family:brand-icons}i.icon.usb:before{content:"\f287";font-family:brand-icons}i.icon.usps:before{content:"\f7e1";font-family:brand-icons}i.icon.ussunnah:before{content:"\f407";font-family:brand-icons}i.icon.vaadin:before{content:"\f408";font-family:brand-icons}i.icon.viacoin:before{content:"\f237";font-family:brand-icons}i.icon.viadeo:before{content:"\f2a9";font-family:brand-icons}i.icon.viadeo.square:before{content:"\f2aa";font-family:brand-icons}i.icon.viber:before{content:"\f409";font-family:brand-icons}i.icon.vimeo:before{content:"\f40a";font-family:brand-icons}i.icon.vimeo.square:before{content:"\f194";font-family:brand-icons}i.icon.vimeo.v:before{content:"\f27d";font-family:brand-icons}i.icon.vine:before{content:"\f1ca";font-family:brand-icons}i.icon.vk:before{content:"\f189";font-family:brand-icons}i.icon.vnv:before{content:"\f40b";font-family:brand-icons}i.icon.vuejs:before{content:"\f41f";font-family:brand-icons}i.icon.waze:before{content:"\f83f";font-family:brand-icons}i.icon.weebly:before{content:"\f5cc";font-family:brand-icons}i.icon.weibo:before{content:"\f18a";font-family:brand-icons}i.icon.weixin:before{content:"\f1d7";font-family:brand-icons}i.icon.whatsapp:before{content:"\f232";font-family:brand-icons}i.icon.whatsapp.square:before{content:"\f40c";font-family:brand-icons}i.icon.whmcs:before{content:"\f40d";font-family:brand-icons}i.icon.wikipedia.w:before{content:"\f266";font-family:brand-icons}i.icon.windows:before{content:"\f17a";font-family:brand-icons}i.icon.wix:before{content:"\f5cf";font-family:brand-icons}i.icon.wizards.of.the.coast:before{content:"\f730";font-family:brand-icons}i.icon.wolf.pack.battalion:before{content:"\f514";font-family:brand-icons}i.icon.wordpress:before{content:"\f19a";font-family:brand-icons}i.icon.wordpress.simple:before{content:"\f411";font-family:brand-icons}i.icon.wpbeginner:before{content:"\f297";font-family:brand-icons}i.icon.wpexplorer:before{content:"\f2de";font-family:brand-icons}i.icon.wpforms:before{content:"\f298";font-family:brand-icons}i.icon.wpressr:before{content:"\f3e4";font-family:brand-icons}i.icon.xbox:before{content:"\f412";font-family:brand-icons}i.icon.xing:before{content:"\f168";font-family:brand-icons}i.icon.xing.square:before{content:"\f169";font-family:brand-icons}i.icon.y.combinator:before{content:"\f23b";font-family:brand-icons}i.icon.yahoo:before{content:"\f19e";font-family:brand-icons}i.icon.yammer:before{content:"\f840";font-family:brand-icons}i.icon.yandex:before{content:"\f413";font-family:brand-icons}i.icon.yandex.international:before{content:"\f414";font-family:brand-icons}i.icon.yarn:before{content:"\f7e3";font-family:brand-icons}i.icon.yelp:before{content:"\f1e9";font-family:brand-icons}i.icon.yoast:before{content:"\f2b1";font-family:brand-icons}i.icon.youtube:before{content:"\f167";font-family:brand-icons}i.icon.youtube.square:before{content:"\f431";font-family:brand-icons}i.icon.zhihu:before{content:"\f63f";font-family:brand-icons}i.icon.american.express:before{content:"\f1f3";font-family:brand-icons}i.icon.american.express.card:before{content:"\f1f3";font-family:brand-icons}i.icon.amex:before{content:"\f1f3";font-family:brand-icons}i.icon.bitbucket.square:before{content:"\f171";font-family:brand-icons}i.icon.bluetooth.alternative:before{content:"\f294";font-family:brand-icons}i.icon.credit.card.amazon.pay:before{content:"\f42d";font-family:brand-icons}i.icon.credit.card.american.express:before{content:"\f1f3";font-family:brand-icons}i.icon.credit.card.diners.club:before{content:"\f24c";font-family:brand-icons}i.icon.credit.card.discover:before{content:"\f1f2";font-family:brand-icons}i.icon.credit.card.jcb:before{content:"\f24b";font-family:brand-icons}i.icon.credit.card.mastercard:before{content:"\f1f1";font-family:brand-icons}i.icon.credit.card.paypal:before{content:"\f1f4";font-family:brand-icons}i.icon.credit.card.stripe:before{content:"\f1f5";font-family:brand-icons}i.icon.credit.card.visa:before{content:"\f1f0";font-family:brand-icons}i.icon.diners.club:before{content:"\f24c";font-family:brand-icons}i.icon.diners.club.card:before{content:"\f24c";font-family:brand-icons}i.icon.discover:before{content:"\f1f2";font-family:brand-icons}i.icon.discover.card:before{content:"\f1f2";font-family:brand-icons}i.icon.disk.outline:before{content:"\f369";font-family:brand-icons}i.icon.dribble:before{content:"\f17d";font-family:brand-icons}i.icon.eercast:before{content:"\f2da";font-family:brand-icons}i.icon.envira.gallery:before{content:"\f299";font-family:brand-icons}i.icon.fa:before{content:"\f2b4";font-family:brand-icons}i.icon.facebook.official:before{content:"\f082";font-family:brand-icons}i.icon.five.hundred.pixels:before{content:"\f26e";font-family:brand-icons}i.icon.gittip:before{content:"\f184";font-family:brand-icons}i.icon.google.plus.circle:before{content:"\f2b3";font-family:brand-icons}i.icon.google.plus.official:before{content:"\f2b3";font-family:brand-icons}i.icon.japan.credit.bureau:before{content:"\f24b";font-family:brand-icons}i.icon.japan.credit.bureau.card:before{content:"\f24b";font-family:brand-icons}i.icon.jcb:before{content:"\f24b";font-family:brand-icons}i.icon.linkedin.square:before{content:"\f08c";font-family:brand-icons}i.icon.mastercard:before{content:"\f1f1";font-family:brand-icons}i.icon.mastercard.card:before{content:"\f1f1";font-family:brand-icons}i.icon.microsoft.edge:before{content:"\f282";font-family:brand-icons}i.icon.ms.edge:before{content:"\f282";font-family:brand-icons}i.icon.new.pied.piper:before{content:"\f2ae";font-family:brand-icons}i.icon.optinmonster:before{content:"\f23c";font-family:brand-icons}i.icon.paypal.card:before{content:"\f1f4";font-family:brand-icons}i.icon.pied.piper.hat:before{content:"\f2ae";font-family:brand-icons}i.icon.pocket:before{content:"\f265";font-family:brand-icons}i.icon.stripe.card:before{content:"\f1f5";font-family:brand-icons}i.icon.theme.isle:before{content:"\f2b2";font-family:brand-icons}i.icon.visa:before{content:"\f1f0";font-family:brand-icons}i.icon.visa.card:before{content:"\f1f0";font-family:brand-icons}i.icon.wechat:before{content:"\f1d7";font-family:brand-icons}i.icon.wikipedia:before{content:"\f266";font-family:brand-icons}i.icon.wordpress.beginner:before{content:"\f297";font-family:brand-icons}i.icon.wordpress.forms:before{content:"\f298";font-family:brand-icons}i.icon.yc:before{content:"\f23b";font-family:brand-icons}i.icon.ycombinator:before{content:"\f23b";font-family:brand-icons}i.icon.youtube.play:before{content:"\f167";font-family:brand-icons}
\ No newline at end of file
diff --git a/ui/dist/components/image.css b/ui/dist/components/image.css
index 6f7d253a103..53fe4789f16 100644
--- a/ui/dist/components/image.css
+++ b/ui/dist/components/image.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Image
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Image
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -36,7 +36,7 @@ img.ui.image {
*******************************/
.ui.hidden.images,
-.ui.hidden.image {
+.ui.ui.hidden.image {
display: none;
}
.ui.hidden.transition.images,
@@ -61,8 +61,8 @@ img.ui.image {
/*--------------
- Inline
----------------*/
+ Inline
+ ---------------*/
.ui.inline.image,
.ui.inline.image svg,
@@ -71,8 +71,8 @@ img.ui.image {
}
/*------------------
- Vertical Aligned
--------------------*/
+ Vertical Aligned
+ -------------------*/
.ui.top.aligned.images .image,
.ui.top.aligned.image,
@@ -97,8 +97,8 @@ img.ui.image {
}
/*--------------
- Rounded
----------------*/
+ Rounded
+ ---------------*/
.ui.rounded.images .image,
.ui.rounded.image,
@@ -108,8 +108,8 @@ img.ui.image {
}
/*--------------
- Bordered
----------------*/
+ Bordered
+ ---------------*/
.ui.bordered.images .image,
.ui.bordered.images img,
@@ -121,8 +121,8 @@ img.ui.bordered.image {
}
/*--------------
- Circular
----------------*/
+ Circular
+ ---------------*/
.ui.circular.images,
.ui.circular.image {
@@ -136,8 +136,8 @@ img.ui.bordered.image {
}
/*--------------
- Fluid
----------------*/
+ Fluid
+ ---------------*/
.ui.fluid.images,
.ui.fluid.image,
@@ -151,8 +151,8 @@ img.ui.bordered.image {
}
/*--------------
- Avatar
----------------*/
+ Avatar
+ ---------------*/
.ui.avatar.images .image,
.ui.avatar.images img,
@@ -168,8 +168,8 @@ img.ui.bordered.image {
}
/*-------------------
- Spaced
---------------------*/
+ Spaced
+ --------------------*/
.ui.spaced.image {
display: inline-block !important;
@@ -178,16 +178,16 @@ img.ui.bordered.image {
}
.ui[class*="left spaced"].image {
margin-left: 0.5em;
- margin-right: 0em;
+ margin-right: 0;
}
.ui[class*="right spaced"].image {
- margin-left: 0em;
+ margin-left: 0;
margin-right: 0.5em;
}
/*-------------------
- Floated
---------------------*/
+ Floated
+ --------------------*/
.ui.floated.image,
.ui.floated.images {
@@ -198,13 +198,13 @@ img.ui.bordered.image {
.ui.right.floated.images,
.ui.right.floated.image {
float: right;
- margin-right: 0em;
+ margin-right: 0;
margin-bottom: 1em;
margin-left: 1em;
}
.ui.floated.images:last-child,
.ui.floated.image:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.centered.images,
.ui.centered.image {
@@ -216,6 +216,14 @@ img.ui.bordered.image {
Sizes
---------------*/
+.ui.medium.images .image,
+.ui.medium.images img,
+.ui.medium.images svg,
+.ui.medium.image {
+ width: 300px;
+ height: auto;
+ font-size: 1rem;
+}
.ui.mini.images .image,
.ui.mini.images img,
.ui.mini.images svg,
@@ -240,14 +248,6 @@ img.ui.bordered.image {
height: auto;
font-size: 0.9375rem;
}
-.ui.medium.images .image,
-.ui.medium.images img,
-.ui.medium.images svg,
-.ui.medium.image {
- width: 300px;
- height: auto;
- font-size: 1rem;
-}
.ui.large.images .image,
.ui.large.images img,
.ui.large.images svg,
@@ -283,18 +283,18 @@ img.ui.bordered.image {
/*******************************
- Groups
-*******************************/
+ Groups
+ *******************************/
.ui.images {
- font-size: 0em;
- margin: 0em -0.25rem 0rem;
+ font-size: 0;
+ margin: 0 -0.25rem 0;
}
.ui.images .image,
.ui.images > img,
.ui.images > svg {
display: inline-block;
- margin: 0em 0.25rem 0.5rem;
+ margin: 0 0.25rem 0.5rem;
}
diff --git a/ui/dist/components/image.min.css b/ui/dist/components/image.min.css
index e06dc8d2c1c..3ce24dbb076 100644
--- a/ui/dist/components/image.min.css
+++ b/ui/dist/components/image.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Image
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Image
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.image,.ui.hidden.images{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.8125rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.875rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.9375rem}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.125rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.3125rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.4375rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.6875rem}.ui.images{font-size:0;margin:0 -.25rem 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem}
\ No newline at end of file
+ */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.images,.ui.ui.hidden.image{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.8125rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.875rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.9375rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.125rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.3125rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.4375rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.6875rem}.ui.images{font-size:0;margin:0 -.25rem 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem}
\ No newline at end of file
diff --git a/ui/dist/components/item.css b/ui/dist/components/item.css
index c5309fff85d..04598a4ab01 100644
--- a/ui/dist/components/item.css
+++ b/ui/dist/components/item.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Item
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Item
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -22,13 +22,13 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: 1em 0em;
+ margin: 1em 0;
width: 100%;
- min-height: 0px;
+ min-height: 0;
background: transparent;
- padding: 0em;
+ padding: 0;
border: none;
- border-radius: 0rem;
+ border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: -webkit-box-shadow 0.1s ease;
@@ -46,13 +46,13 @@
---------------*/
.ui.items {
- margin: 1.5em 0em;
+ margin: 1.5em 0;
}
.ui.items:first-child {
- margin-top: 0em !important;
+ margin-top: 0 !important;
}
.ui.items:last-child {
- margin-bottom: 0em !important;
+ margin-bottom: 0 !important;
}
/*--------------
@@ -62,16 +62,16 @@
.ui.items > .item:after {
display: block;
content: ' ';
- height: 0px;
+ height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.ui.items > .item:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.items > .item:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
@@ -85,11 +85,11 @@
flex: 0 0 auto;
display: block;
float: none;
- margin: 0em;
- padding: 0em;
+ margin: 0;
+ padding: 0;
max-height: '';
- -ms-flex-item-align: top;
- align-self: top;
+ -ms-flex-item-align: start;
+ align-self: start;
}
.ui.items > .item > .image > img {
display: block;
@@ -99,7 +99,7 @@
border: none;
}
.ui.items > .item > .image:only-child > img {
- border-radius: 0rem;
+ border-radius: 0;
}
/*--------------
@@ -112,18 +112,19 @@
-ms-flex: 1 1 auto;
flex: 1 1 auto;
background: none;
- margin: 0em;
- padding: 0em;
+ color: rgba(0, 0, 0, 0.87);
+ margin: 0;
+ padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 1em;
border: none;
- border-radius: 0em;
+ border-radius: 0;
}
.ui.items > .item > .content:after {
display: block;
content: ' ';
- height: 0px;
+ height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
@@ -132,14 +133,14 @@
min-width: 0;
width: auto;
display: block;
- margin-left: 0em;
- -ms-flex-item-align: top;
- align-self: top;
+ margin-left: 0;
+ -ms-flex-item-align: start;
+ align-self: start;
padding-left: 1.5em;
}
.ui.items > .item > .content > .header {
display: inline-block;
- margin: -0.25em 0em 0em;
+ margin: -0.25em 0 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
@@ -166,8 +167,8 @@
---------------*/
.ui.items > .item .content img {
- -ms-flex-item-align: middle;
- align-self: middle;
+ -ms-flex-item-align: center;
+ align-self: center;
width: '';
}
.ui.items > .item img.avatar,
@@ -194,10 +195,10 @@
---------------*/
.ui.items > .item > .content p {
- margin: 0em 0em 0.5em;
+ margin: 0 0 0.5em;
}
.ui.items > .item > .content p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
@@ -205,7 +206,7 @@
---------------*/
.ui.items > .item .meta {
- margin: 0.5em 0em 0.5em;
+ margin: 0.5em 0 0.5em;
font-size: 1em;
line-height: 1em;
color: rgba(0, 0, 0, 0.6);
@@ -214,10 +215,10 @@
margin-right: 0.3em;
}
.ui.items > .item .meta :last-child {
- margin-right: 0em;
+ margin-right: 0;
}
.ui.items > .item .meta [class*="right floated"] {
- margin-right: 0em;
+ margin-right: 0;
margin-left: 0.3em;
}
@@ -301,11 +302,11 @@
display: block;
position: relative;
background: none;
- margin: 0.5rem 0em 0em;
+ margin: 0.5rem 0 0;
width: 100%;
- padding: 0em 0em 0em;
- top: 0em;
- left: 0em;
+ padding: 0 0 0;
+ top: 0;
+ left: 0;
color: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: none;
box-shadow: none;
@@ -314,15 +315,15 @@
border-top: none;
}
.ui.items > .item .extra > * {
- margin: 0.25rem 0.5rem 0.25rem 0em;
+ margin: 0.25rem 0.5rem 0.25rem 0;
}
.ui.items > .item .extra > [class*="right floated"] {
- margin: 0.25rem 0em 0.25rem 0.5rem;
+ margin: 0.25rem 0 0.25rem 0.5rem;
}
.ui.items > .item .extra:after {
display: block;
content: ' ';
- height: 0px;
+ height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
@@ -340,27 +341,27 @@
}
/* Tablet Only */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.items > .item {
- margin: 1em 0em;
+ margin: 1em 0;
}
.ui.items > .item > .image:not(.ui) {
width: 150px;
}
.ui.items > .item > .image + .content {
display: block;
- padding: 0em 0em 0em 1em;
+ padding: 0 0 0 1em;
}
}
/* Mobile Only */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.items:not(.unstackable) > .item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
- margin: 2em 0em;
+ margin: 2em 0;
}
.ui.items:not(.unstackable) > .item > .image {
display: block;
@@ -375,7 +376,7 @@
}
.ui.items:not(.unstackable) > .item > .image + .content {
display: block;
- padding: 1.5em 0em 0em;
+ padding: 1.5em 0 0;
}
}
@@ -386,8 +387,8 @@
/*-------------------
- Aligned
---------------------*/
+ Aligned
+ --------------------*/
.ui.items > .item > .image + [class*="top aligned"].content {
-ms-flex-item-align: start;
@@ -403,48 +404,48 @@
}
/*--------------
- Relaxed
----------------*/
+ Relaxed
+ ---------------*/
.ui.relaxed.items > .item {
- margin: 1.5em 0em;
+ margin: 1.5em 0;
}
.ui[class*="very relaxed"].items > .item {
- margin: 2em 0em;
+ margin: 2em 0;
}
/*-------------------
- Divided
---------------------*/
+ Divided
+ --------------------*/
.ui.divided.items > .item {
border-top: 1px solid rgba(34, 36, 38, 0.15);
- margin: 0em;
- padding: 1em 0em;
+ margin: 0;
+ padding: 1em 0;
}
.ui.divided.items > .item:first-child {
border-top: none;
- margin-top: 0em !important;
- padding-top: 0em !important;
+ margin-top: 0 !important;
+ padding-top: 0 !important;
}
.ui.divided.items > .item:last-child {
- margin-bottom: 0em !important;
- padding-bottom: 0em !important;
+ margin-bottom: 0 !important;
+ padding-bottom: 0 !important;
}
/* Relaxed Divided */
.ui.relaxed.divided.items > .item {
- margin: 0em;
- padding: 1.5em 0em;
+ margin: 0;
+ padding: 1.5em 0;
}
.ui[class*="very relaxed"].divided.items > .item {
- margin: 0em;
- padding: 2em 0em;
+ margin: 0;
+ padding: 2em 0;
}
/*-------------------
- Link
---------------------*/
+ Link
+ --------------------*/
.ui.items a.item:hover,
.ui.link.items > .item:hover {
@@ -462,18 +463,106 @@
.ui.items > .item {
font-size: 1em;
}
+.ui.mini.items > .item {
+ font-size: 0.8125em;
+}
+.ui.tiny.items > .item {
+ font-size: 0.875em;
+}
+.ui.small.items > .item {
+ font-size: 0.9375em;
+}
+.ui.large.items > .item {
+ font-size: 1.125em;
+}
+.ui.big.items > .item {
+ font-size: 1.3125em;
+}
+.ui.huge.items > .item {
+ font-size: 1.4375em;
+}
+.ui.massive.items > .item {
+ font-size: 1.6875em;
+}
/*---------------
- Unstackable
-----------------*/
+ Unstackable
+ ----------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.unstackable.items > .item > .image,
.ui.unstackable.items > .item > .image > img {
width: 125px !important;
}
}
+/*--------------
+ Inverted
+ ---------------*/
+
+.ui.inverted.items > .item {
+ background: transparent;
+}
+.ui.inverted.items > .item > .content {
+ background: none;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.items > .item .extra {
+ background: none;
+}
+.ui.inverted.items > .item > .content > .header {
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.items > .item > .content > .description {
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.items > .item .meta {
+ color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.items > .item > .content a:not(.ui) {
+ color: #57a4ef;
+}
+.ui.inverted.items > .item > .content a:not(.ui):hover {
+ color: #4183C4;
+}
+.ui.inverted.items > .item > .content > a.header {
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.items > .item > .content > a.header:hover {
+ color: #ffffff;
+}
+.ui.inverted.items > .item .meta > a:not(.ui) {
+ color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.items > .item .meta > a:not(.ui):hover {
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.items > .item > .content .favorite.icon:hover {
+ color: #ffc63d;
+}
+.ui.inverted.items > .item > .content .active.favorite.icon {
+ color: #ffec56;
+}
+.ui.inverted.items > .item > .content .like.icon:hover {
+ color: #ff5a63;
+}
+.ui.inverted.items > .item > .content .active.like.icon {
+ color: #ff5a63;
+}
+.ui.inverted.items > .item .extra {
+ color: rgba(255, 255, 255, 0.7);
+}
+.ui.inverted.items a.item:hover .content .header,
+.ui.inverted.link.items > .item:hover .content .header {
+ color: #ffffff;
+}
+.ui.inverted.divided.items > .item {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.ui.inverted.divided.items > .item:first-child {
+ border-top: none;
+}
+
/*******************************
Theme Overrides
diff --git a/ui/dist/components/item.min.css b/ui/dist/components/item.min.css
index 970b9498482..89f0fb225e7 100644
--- a/ui/dist/components/item.min.css
+++ b/ui/dist/components/item.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Item
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Item
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.items>.item{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em 0;width:100%;min-height:0;background:0 0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease,-webkit-box-shadow .1s ease;z-index:''}.ui.items>.item a{cursor:pointer}.ui.items{margin:1.5em 0}.ui.items:first-child{margin-top:0!important}.ui.items:last-child{margin-bottom:0!important}.ui.items>.item:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item:first-child{margin-top:0}.ui.items>.item:last-child{margin-bottom:0}.ui.items>.item>.image{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:block;float:none;margin:0;padding:0;max-height:'';-ms-flex-item-align:top;align-self:top}.ui.items>.item>.image>img{display:block;width:100%;height:auto;border-radius:.125rem;border:none}.ui.items>.item>.image:only-child>img{border-radius:0}.ui.items>.item>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:0 0;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border:none;border-radius:0}.ui.items>.item>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image+.content{min-width:0;width:auto;display:block;margin-left:0;-ms-flex-item-align:top;align-self:top;padding-left:1.5em}.ui.items>.item>.content>.header{display:inline-block;margin:-.25em 0 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.85)}.ui.items>.item>.content>.header:not(.ui){font-size:1.3125em}.ui.items>.item [class*="left floated"]{float:left}.ui.items>.item [class*="right floated"]{float:right}.ui.items>.item .content img{-ms-flex-item-align:middle;align-self:middle;width:''}.ui.items>.item .avatar img,.ui.items>.item img.avatar{width:'';height:'';border-radius:500rem}.ui.items>.item>.content>.description{margin-top:.6em;max-width:auto;font-size:1em;line-height:1.5em;color:rgba(0,0,0,.87)}.ui.items>.item>.content p{margin:0 0 .5em}.ui.items>.item>.content p:last-child{margin-bottom:0}.ui.items>.item .meta{margin:.5em 0 .5em;font-size:1em;line-height:1em;color:rgba(0,0,0,.6)}.ui.items>.item .meta *{margin-right:.3em}.ui.items>.item .meta :last-child{margin-right:0}.ui.items>.item .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.items>.item>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content a:not(.ui):hover{color:''}.ui.items>.item>.content>a.header{color:rgba(0,0,0,.85)}.ui.items>.item>.content>a.header:hover{color:#1e70bf}.ui.items>.item .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.items>.item .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.items>.item>.content .favorite.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .favorite.icon:hover{opacity:1;color:#ffb70a}.ui.items>.item>.content .active.favorite.icon{color:#ffe623}.ui.items>.item>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.items>.item>.content .active.like.icon{color:#ff2733}.ui.items>.item .extra{display:block;position:relative;background:0 0;margin:.5rem 0 0;width:100%;padding:0 0 0;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease;border-top:none}.ui.items>.item .extra>*{margin:.25rem .5rem .25rem 0}.ui.items>.item .extra>[class*="right floated"]{margin:.25rem 0 .25rem .5rem}.ui.items>.item .extra:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image:not(.ui){width:175px}@media only screen and (min-width:768px) and (max-width:991px){.ui.items>.item{margin:1em 0}.ui.items>.item>.image:not(.ui){width:150px}.ui.items>.item>.image+.content{display:block;padding:0 0 0 1em}}@media only screen and (max-width:767px){.ui.items:not(.unstackable)>.item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:2em 0}.ui.items:not(.unstackable)>.item>.image{display:block;margin-left:auto;margin-right:auto}.ui.items:not(.unstackable)>.item>.image,.ui.items:not(.unstackable)>.item>.image>img{max-width:100%!important;width:auto!important;max-height:250px!important}.ui.items:not(.unstackable)>.item>.image+.content{display:block;padding:1.5em 0 0}}.ui.items>.item>.image+[class*="top aligned"].content{-ms-flex-item-align:start;align-self:flex-start}.ui.items>.item>.image+[class*="middle aligned"].content{-ms-flex-item-align:center;align-self:center}.ui.items>.item>.image+[class*="bottom aligned"].content{-ms-flex-item-align:end;align-self:flex-end}.ui.relaxed.items>.item{margin:1.5em 0}.ui[class*="very relaxed"].items>.item{margin:2em 0}.ui.divided.items>.item{border-top:1px solid rgba(34,36,38,.15);margin:0;padding:1em 0}.ui.divided.items>.item:first-child{border-top:none;margin-top:0!important;padding-top:0!important}.ui.divided.items>.item:last-child{margin-bottom:0!important;padding-bottom:0!important}.ui.relaxed.divided.items>.item{margin:0;padding:1.5em 0}.ui[class*="very relaxed"].divided.items>.item{margin:0;padding:2em 0}.ui.items a.item:hover,.ui.link.items>.item:hover{cursor:pointer}.ui.items a.item:hover .content .header,.ui.link.items>.item:hover .content .header{color:#1e70bf}.ui.items>.item{font-size:1em}@media only screen and (max-width:767px){.ui.unstackable.items>.item>.image,.ui.unstackable.items>.item>.image>img{width:125px!important}}
\ No newline at end of file
+ */.ui.items>.item{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em 0;width:100%;min-height:0;background:0 0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease,-webkit-box-shadow .1s ease;z-index:''}.ui.items>.item a{cursor:pointer}.ui.items{margin:1.5em 0}.ui.items:first-child{margin-top:0!important}.ui.items:last-child{margin-bottom:0!important}.ui.items>.item:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item:first-child{margin-top:0}.ui.items>.item:last-child{margin-bottom:0}.ui.items>.item>.image{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:block;float:none;margin:0;padding:0;max-height:'';-ms-flex-item-align:start;align-self:start}.ui.items>.item>.image>img{display:block;width:100%;height:auto;border-radius:.125rem;border:none}.ui.items>.item>.image:only-child>img{border-radius:0}.ui.items>.item>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:0 0;color:rgba(0,0,0,.87);margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border:none;border-radius:0}.ui.items>.item>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image+.content{min-width:0;width:auto;display:block;margin-left:0;-ms-flex-item-align:start;align-self:start;padding-left:1.5em}.ui.items>.item>.content>.header{display:inline-block;margin:-.25em 0 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.85)}.ui.items>.item>.content>.header:not(.ui){font-size:1.3125em}.ui.items>.item [class*="left floated"]{float:left}.ui.items>.item [class*="right floated"]{float:right}.ui.items>.item .content img{-ms-flex-item-align:center;align-self:center;width:''}.ui.items>.item .avatar img,.ui.items>.item img.avatar{width:'';height:'';border-radius:500rem}.ui.items>.item>.content>.description{margin-top:.6em;max-width:auto;font-size:1em;line-height:1.5em;color:rgba(0,0,0,.87)}.ui.items>.item>.content p{margin:0 0 .5em}.ui.items>.item>.content p:last-child{margin-bottom:0}.ui.items>.item .meta{margin:.5em 0 .5em;font-size:1em;line-height:1em;color:rgba(0,0,0,.6)}.ui.items>.item .meta *{margin-right:.3em}.ui.items>.item .meta :last-child{margin-right:0}.ui.items>.item .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.items>.item>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content a:not(.ui):hover{color:''}.ui.items>.item>.content>a.header{color:rgba(0,0,0,.85)}.ui.items>.item>.content>a.header:hover{color:#1e70bf}.ui.items>.item .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.items>.item .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.items>.item>.content .favorite.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .favorite.icon:hover{opacity:1;color:#ffb70a}.ui.items>.item>.content .active.favorite.icon{color:#ffe623}.ui.items>.item>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.items>.item>.content .active.like.icon{color:#ff2733}.ui.items>.item .extra{display:block;position:relative;background:0 0;margin:.5rem 0 0;width:100%;padding:0 0 0;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease;border-top:none}.ui.items>.item .extra>*{margin:.25rem .5rem .25rem 0}.ui.items>.item .extra>[class*="right floated"]{margin:.25rem 0 .25rem .5rem}.ui.items>.item .extra:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image:not(.ui){width:175px}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.items>.item{margin:1em 0}.ui.items>.item>.image:not(.ui){width:150px}.ui.items>.item>.image+.content{display:block;padding:0 0 0 1em}}@media only screen and (max-width:767.98px){.ui.items:not(.unstackable)>.item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:2em 0}.ui.items:not(.unstackable)>.item>.image{display:block;margin-left:auto;margin-right:auto}.ui.items:not(.unstackable)>.item>.image,.ui.items:not(.unstackable)>.item>.image>img{max-width:100%!important;width:auto!important;max-height:250px!important}.ui.items:not(.unstackable)>.item>.image+.content{display:block;padding:1.5em 0 0}}.ui.items>.item>.image+[class*="top aligned"].content{-ms-flex-item-align:start;align-self:flex-start}.ui.items>.item>.image+[class*="middle aligned"].content{-ms-flex-item-align:center;align-self:center}.ui.items>.item>.image+[class*="bottom aligned"].content{-ms-flex-item-align:end;align-self:flex-end}.ui.relaxed.items>.item{margin:1.5em 0}.ui[class*="very relaxed"].items>.item{margin:2em 0}.ui.divided.items>.item{border-top:1px solid rgba(34,36,38,.15);margin:0;padding:1em 0}.ui.divided.items>.item:first-child{border-top:none;margin-top:0!important;padding-top:0!important}.ui.divided.items>.item:last-child{margin-bottom:0!important;padding-bottom:0!important}.ui.relaxed.divided.items>.item{margin:0;padding:1.5em 0}.ui[class*="very relaxed"].divided.items>.item{margin:0;padding:2em 0}.ui.items a.item:hover,.ui.link.items>.item:hover{cursor:pointer}.ui.items a.item:hover .content .header,.ui.link.items>.item:hover .content .header{color:#1e70bf}.ui.items>.item{font-size:1em}.ui.mini.items>.item{font-size:.8125em}.ui.tiny.items>.item{font-size:.875em}.ui.small.items>.item{font-size:.9375em}.ui.large.items>.item{font-size:1.125em}.ui.big.items>.item{font-size:1.3125em}.ui.huge.items>.item{font-size:1.4375em}.ui.massive.items>.item{font-size:1.6875em}@media only screen and (max-width:767.98px){.ui.unstackable.items>.item>.image,.ui.unstackable.items>.item>.image>img{width:125px!important}}.ui.inverted.items>.item{background:0 0}.ui.inverted.items>.item>.content{background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.items>.item .extra{background:0 0}.ui.inverted.items>.item>.content>.header{color:rgba(255,255,255,.9)}.ui.inverted.items>.item>.content>.description{color:rgba(255,255,255,.9)}.ui.inverted.items>.item .meta{color:rgba(255,255,255,.8)}.ui.inverted.items>.item>.content a:not(.ui){color:#57a4ef}.ui.inverted.items>.item>.content a:not(.ui):hover{color:#4183c4}.ui.inverted.items>.item>.content>a.header{color:rgba(255,255,255,.9)}.ui.inverted.items>.item>.content>a.header:hover{color:#fff}.ui.inverted.items>.item .meta>a:not(.ui){color:rgba(255,255,255,.7)}.ui.inverted.items>.item .meta>a:not(.ui):hover{color:rgba(255,255,255,.9)}.ui.inverted.items>.item>.content .favorite.icon:hover{color:#ffc63d}.ui.inverted.items>.item>.content .active.favorite.icon{color:#ffec56}.ui.inverted.items>.item>.content .like.icon:hover{color:#ff5a63}.ui.inverted.items>.item>.content .active.like.icon{color:#ff5a63}.ui.inverted.items>.item .extra{color:rgba(255,255,255,.7)}.ui.inverted.items a.item:hover .content .header,.ui.inverted.link.items>.item:hover .content .header{color:#fff}.ui.inverted.divided.items>.item{border-top:1px solid rgba(255,255,255,.1)}.ui.inverted.divided.items>.item:first-child{border-top:none}
\ No newline at end of file
diff --git a/ui/dist/components/label.css b/ui/dist/components/label.css
index bfe8d305388..de44b58eed4 100644
--- a/ui/dist/components/label.css
+++ b/ui/dist/components/label.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Label
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Label
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -17,23 +17,23 @@
display: inline-block;
line-height: 1;
vertical-align: baseline;
- margin: 0em 0.125em;
+ margin: 0 0.125em;
background-color: #E8E8E8;
background-image: none;
padding: 0.5833em 0.833em;
color: rgba(0, 0, 0, 0.6);
text-transform: none;
font-weight: bold;
- border: 0px solid transparent;
+ border: 0 solid transparent;
border-radius: 0.25rem;
-webkit-transition: background 0.1s ease;
transition: background 0.1s ease;
}
.ui.label:first-child {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.label:last-child {
- margin-right: 0em;
+ margin-right: 0;
}
/* Link */
@@ -57,13 +57,14 @@ a.ui.label {
.ui.label > img {
width: auto !important;
vertical-align: middle;
- height: 2.1666em !important;
+ height: 2.1666em;
}
/* Icon */
+.ui.left.icon.label > .icon,
.ui.label > .icon {
width: auto;
- margin: 0em 0.75em 0em 0em;
+ margin: 0 0.75em 0 0;
}
/* Detail */
@@ -75,30 +76,49 @@ a.ui.label {
opacity: 0.8;
}
.ui.label > .detail .icon {
- margin: 0em 0.25em 0em 0em;
+ margin: 0 0.25em 0 0;
}
/* Removable label */
.ui.label > .close.icon,
.ui.label > .delete.icon {
cursor: pointer;
- margin-right: 0em;
- margin-left: 0.5em;
font-size: 0.9375em;
opacity: 0.5;
-webkit-transition: background 0.1s ease;
transition: background 0.1s ease;
}
+.ui.label > .close.icon:hover,
.ui.label > .delete.icon:hover {
opacity: 1;
}
+/* Backward compatible positioning */
+.ui.label.left.icon > .close.icon,
+.ui.label.left.icon > .delete.icon {
+ margin: 0 0.5em 0 0;
+}
+.ui.label:not(.icon) > .close.icon,
+.ui.label:not(.icon) > .delete.icon {
+ margin: 0 0 0 0.5em;
+}
+
+/* Label for only an icon */
+.ui.icon.label > .icon {
+ margin: 0 auto;
+}
+
+/* Right Side Icon */
+.ui.right.icon.label > .icon {
+ margin: 0 0 0 0.75em;
+}
+
/*-------------------
Group
--------------------*/
.ui.labels > .label {
- margin: 0em 0.5em 0.5em 0em;
+ margin: 0 0.5em 0.5em 0;
}
/*-------------------
@@ -126,12 +146,12 @@ a.ui.label {
}
/* Padding on next content after a label */
-.ui.top.attached.label:first-child + :not(.attached),
-.ui.top.attached.label + [class*="right floated"] + * {
+.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
+.ui.top.attached.label + :not(.attached) {
margin-top: 2rem !important;
}
-.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {
- margin-top: 0em;
+.ui.bottom.attached.label ~ :last-child:not(.attached) {
+ margin-top: 0;
margin-bottom: 2rem !important;
}
@@ -142,8 +162,8 @@ a.ui.label {
.ui.image.label {
width: auto !important;
- margin-top: 0em;
- margin-bottom: 0em;
+ margin-top: 0;
+ margin-bottom: 0;
max-width: 9999px;
vertical-align: baseline;
text-transform: none;
@@ -158,13 +178,13 @@ a.ui.label {
vertical-align: top;
height: 2.1666em;
margin: -0.5833em 0.5em -0.5833em -0.5em;
- border-radius: 0.25rem 0em 0em 0.25rem;
+ border-radius: 0.25rem 0 0 0.25rem;
}
.ui.image.label .detail {
background: rgba(0, 0, 0, 0.1);
margin: -0.5833em -0.833em -0.5833em 0.5em;
padding: 0.5833em 0.833em;
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
}
/*-------------------
@@ -177,7 +197,7 @@ a.ui.label {
position: relative;
padding-left: 1.5em;
padding-right: 1.5em;
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
-webkit-transition: none;
transition: none;
}
@@ -203,13 +223,25 @@ a.ui.label {
top: 50%;
left: -0.25em;
margin-top: -0.25em;
- background-color: #FFFFFF !important;
+ background-color: #FFFFFF;
width: 0.5em;
height: 0.5em;
-webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
border-radius: 500rem;
}
+.ui.basic.tag.labels .label:before,
+.ui.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ right: calc(100% + 1px);
+}
+.ui.basic.tag.labels .label:after,
+.ui.basic.tag.label:after {
+ -webkit-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
+ box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
+}
/*-------------------
Corner Label
@@ -217,10 +249,10 @@ a.ui.label {
.ui.corner.label {
position: absolute;
- top: 0em;
- right: 0em;
- margin: 0em;
- padding: 0em;
+ top: 0;
+ right: 0;
+ margin: 0;
+ padding: 0;
text-align: center;
border-color: #E8E8E8;
width: 4em;
@@ -237,44 +269,46 @@ a.ui.label {
.ui.corner.label:after {
position: absolute;
content: "";
- right: 0em;
- top: 0em;
+ right: 0;
+ top: 0;
z-index: -1;
- width: 0em;
- height: 0em;
- background-color: transparent !important;
- border-top: 0em solid transparent;
+ width: 0;
+ height: 0;
+ background-color: transparent;
+ border-top: 0 solid transparent;
border-right: 4em solid transparent;
border-bottom: 4em solid transparent;
- border-left: 0em solid transparent;
+ border-left: 0 solid transparent;
border-right-color: inherit;
-webkit-transition: border-color 0.1s ease;
transition: border-color 0.1s ease;
}
.ui.corner.label .icon {
- cursor: default;
- position: relative;
+ cursor: inherit;
+ position: absolute;
top: 0.5625em;
- left: 0.6875em;
+ left: auto;
+ right: 0.5em;
font-size: 1.125em;
- margin: 0em;
+ margin: 0;
}
/* Left Corner */
.ui.left.corner.label,
.ui.left.corner.label:after {
right: auto;
- left: 0em;
+ left: 0;
}
.ui.left.corner.label:after {
border-top: 4em solid transparent;
border-right: 4em solid transparent;
- border-bottom: 0em solid transparent;
- border-left: 0em solid transparent;
+ border-bottom: 0 solid transparent;
+ border-left: 0 solid transparent;
border-top-color: inherit;
}
.ui.left.corner.label .icon {
- left: -0.6875em;
+ left: 0.5em;
+ right: auto;
}
/* Segment */
@@ -288,43 +322,64 @@ a.ui.label {
}
/*-------------------
- Ribbon
---------------------*/
+ Ribbon
+ --------------------*/
.ui.ribbon.label {
position: relative;
- margin: 0em;
+ margin: 0;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
border-color: rgba(0, 0, 0, 0.15);
}
.ui.ribbon.label:after {
position: absolute;
content: '';
top: 100%;
- left: 0%;
- background-color: transparent !important;
+ left: 0;
+ background-color: transparent;
border-style: solid;
- border-width: 0em 1.2em 1.2em 0em;
+ border-width: 0 1.2em 1.2em 0;
border-color: transparent;
border-right-color: inherit;
- width: 0em;
- height: 0em;
+ width: 0;
+ height: 0;
}
/* Positioning */
.ui.ribbon.label {
- left: calc( -1rem - 1.2em );
+ left: calc(-1rem - 1.2em);
margin-right: -1.2em;
- padding-left: calc( 1rem + 1.2em );
+ padding-left: calc(1rem + 1.2em);
padding-right: 1.2em;
}
.ui[class*="right ribbon"].label {
- left: calc(100% + 1rem + 1.2em );
+ left: calc(100% + 1rem + 1.2em);
padding-left: 1.2em;
- padding-right: calc( 1rem + 1.2em );
+ padding-right: calc(1rem + 1.2em);
+}
+.ui.basic.ribbon.label {
+ padding-top: calc(0.5833em - 1px);
+ padding-bottom: calc(0.5833em - 1px);
+}
+.ui.basic.ribbon.label:not([class*="right ribbon"]) {
+ padding-left: calc(1rem + 1.2em - 1px);
+ padding-right: calc(1.2em - 1px);
+}
+.ui.basic[class*="right ribbon"].label {
+ padding-left: calc(1.2em - 1px);
+ padding-right: calc(1rem + 1.2em - 1px);
+}
+.ui.basic.ribbon.label::after {
+ top: calc(100% + 1px);
+}
+.ui.basic.ribbon.label:not([class*="right ribbon"])::after {
+ left: -1px;
+}
+.ui.basic[class*="right ribbon"].label::after {
+ right: -1px;
}
/* Right Ribbon */
@@ -332,13 +387,13 @@ a.ui.label {
text-align: left;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
- border-radius: 0.25rem 0em 0em 0.25rem;
+ border-radius: 0.25rem 0 0 0.25rem;
}
.ui[class*="right ribbon"].label:after {
left: auto;
- right: 0%;
+ right: 0;
border-style: solid;
- border-width: 1.2em 1.2em 0em 0em;
+ border-width: 1.2em 1.2em 0 0;
border-color: transparent;
border-top-color: inherit;
}
@@ -351,66 +406,66 @@ a.ui.label {
}
.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
- left: calc( 0.05rem - 1.2em );
+ left: calc(0.05rem - 1.2em);
}
.ui.card .image > .ui[class*="right ribbon"].label,
.ui.image > .ui[class*="right ribbon"].label {
- left: calc(100% + -0.05rem + 1.2em );
+ left: calc(100% + -0.05rem + 1.2em);
padding-left: 0.833em;
}
/* Inside Table */
.ui.table td > .ui.ribbon.label {
- left: calc( -0.8125em - 1.2em );
+ left: calc(-1em - 1.2em);
}
.ui.table td > .ui[class*="right ribbon"].label {
- left: calc(100% + 0.8125em + 1.2em );
+ left: calc(100% + 1em + 1.2em);
padding-left: 0.833em;
}
/*-------------------
- Attached
---------------------*/
+ Attached
+ --------------------*/
.ui[class*="top attached"].label,
.ui.attached.label {
width: 100%;
position: absolute;
- margin: 0em;
- top: 0em;
- left: 0em;
+ margin: 0;
+ top: 0;
+ left: 0;
padding: 0.75em 1em;
- border-radius: 0.1875rem 0.1875rem 0em 0em;
+ border-radius: 0.1875rem 0.1875rem 0 0;
}
.ui[class*="bottom attached"].label {
top: auto;
- bottom: 0em;
- border-radius: 0em 0em 0.1875rem 0.1875rem;
+ bottom: 0;
+ border-radius: 0 0 0.1875rem 0.1875rem;
}
.ui[class*="top left attached"].label {
width: auto;
- margin-top: 0em !important;
- border-radius: 0.1875rem 0em 0.25rem 0em;
+ margin-top: 0 !important;
+ border-radius: 0.1875rem 0 0.25rem 0;
}
.ui[class*="top right attached"].label {
width: auto;
left: auto;
- right: 0em;
- border-radius: 0em 0.1875rem 0em 0.25rem;
+ right: 0;
+ border-radius: 0 0.1875rem 0 0.25rem;
}
.ui[class*="bottom left attached"].label {
width: auto;
top: auto;
- bottom: 0em;
- border-radius: 0em 0.25rem 0em 0.1875rem;
+ bottom: 0;
+ border-radius: 0 0.25rem 0 0.1875rem;
}
.ui[class*="bottom right attached"].label {
top: auto;
- bottom: 0em;
+ bottom: 0;
left: auto;
- right: 0em;
+ right: 0;
width: auto;
- border-radius: 0.25rem 0em 0.1875rem 0em;
+ border-radius: 0.25rem 0 0.1875rem 0;
}
@@ -431,7 +486,7 @@ a.ui.label {
Hover
--------------------*/
-a.ui.labels .label:hover,
+.ui.labels a.label:hover,
a.ui.label:hover {
background-color: #E0E0E0;
border-color: #E0E0E0;
@@ -463,15 +518,15 @@ a.ui.label:hover:before {
Active Hover
--------------------*/
-a.ui.labels .active.label:hover,
+.ui.labels a.active.label:hover,
a.ui.active.label:hover {
background-color: #C8C8C8;
border-color: #C8C8C8;
background-image: none;
color: rgba(0, 0, 0, 0.95);
}
-.ui.labels a.active.label:ActiveHover:before,
-a.ui.active.label:ActiveHover:before {
+.ui.labels a.active.label:hover:before,
+a.ui.active.label:hover:before {
background-color: #C8C8C8;
background-image: none;
color: rgba(0, 0, 0, 0.95);
@@ -501,590 +556,1303 @@ a.ui.active.label:ActiveHover:before {
*******************************/
+/*-------------------
+ Basic
+ --------------------*/
+
+.ui.basic.labels .label,
+.ui.basic.label {
+ background: none #FFFFFF;
+ border: 1px solid rgba(34, 36, 38, 0.15);
+ color: rgba(0, 0, 0, 0.87);
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Link */
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+ text-decoration: none;
+ background: none #FFFFFF;
+ color: #1e70bf;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Pointing */
+.ui.basic.pointing.label:before {
+ border-color: inherit;
+}
+
+/*-------------------
+ Fluid
+ --------------------*/
+
+.ui.label.fluid,
+.ui.fluid.labels > .label {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/*-------------------
+ Inverted
+ --------------------*/
+
+.ui.inverted.labels .label,
+.ui.inverted.label {
+ color: rgba(255, 255, 255, 0.9);
+ background-color: #b5b5b5;
+}
+.ui.inverted.corner.label {
+ border-color: #b5b5b5;
+}
+.ui.inverted.corner.label:hover {
+ border-color: #E8E8E8;
+ -webkit-transition: none;
+ transition: none;
+}
+.ui.inverted.basic.labels .label,
+.ui.inverted.basic.label,
+.ui.inverted.basic.label:hover {
+ border-color: rgba(255, 255, 255, 0.5);
+ background: #1B1C1D;
+}
+.ui.inverted.basic.label:hover {
+ color: #4183C4;
+}
+
/*-------------------
Colors
--------------------*/
+.ui.primary.labels .label,
+.ui.ui.ui.primary.label {
+ background-color: #2185D0;
+ border-color: #2185D0;
+ color: rgba(255, 255, 255, 0.9);
+}
-/*--- Red ---*/
+/* Link */
+.ui.primary.labels a.label:hover,
+a.ui.ui.ui.primary.label:hover {
+ background-color: #1678c2;
+ border-color: #1678c2;
+ color: #FFFFFF;
+}
-.ui.red.labels .label,
-.ui.red.label {
- background-color: #DB2828 !important;
- border-color: #DB2828 !important;
- color: #FFFFFF !important;
+/* Ribbon */
+.ui.ui.ui.primary.ribbon.label {
+ border-color: #1a69a4;
}
-/* Link */
-.ui.red.labels .label:hover,
-a.ui.red.label:hover {
- background-color: #d01919 !important;
- border-color: #d01919 !important;
- color: #FFFFFF !important;
+/* Basic */
+.ui.basic.labels .primary.label,
+.ui.ui.ui.basic.primary.label {
+ background: none #FFFFFF;
+ border-color: #2185D0;
+ color: #2185D0;
+}
+.ui.basic.labels a.primary.label:hover,
+a.ui.ui.ui.basic.primary.label:hover {
+ background: none #FFFFFF;
+ border-color: #1678c2;
+ color: #1678c2;
}
-/* Corner */
-.ui.red.corner.label,
-.ui.red.corner.label:hover {
- background-color: transparent !important;
+/* Inverted */
+.ui.inverted.labels .primary.label,
+.ui.ui.ui.inverted.primary.label {
+ background-color: #54C8FF;
+ border-color: #54C8FF;
+ color: #1B1C1D;
+}
+
+/* Inverted Link */
+.ui.inverted.labels a.primary.label:hover,
+a.ui.ui.ui.inverted.primary.label:hover {
+ background-color: #21b8ff;
+ border-color: #21b8ff;
+ color: #1B1C1D;
+}
+
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.primary.ribbon.label {
+ border-color: #21b8ff;
+}
+
+/* Inverted Basic */
+.ui.inverted.basic.labels .primary.label,
+.ui.ui.ui.inverted.basic.primary.label {
+ background-color: #1B1C1D;
+ border-color: #54C8FF;
+ color: #54C8FF;
+}
+.ui.inverted.basic.labels a.primary.label:hover,
+a.ui.ui.ui.inverted.basic.primary.label:hover {
+ border-color: #21b8ff;
+ background-color: #1B1C1D;
+ color: #21b8ff;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .primary.label,
+.ui.ui.ui.inverted.primary.basic.tag.label {
+ border: 1px solid #54C8FF;
+}
+.ui.inverted.basic.tag.labels .primary.label:before,
+.ui.ui.ui.inverted.primary.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.secondary.labels .label,
+.ui.ui.ui.secondary.label {
+ background-color: #1B1C1D;
+ border-color: #1B1C1D;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+/* Link */
+.ui.secondary.labels a.label:hover,
+a.ui.ui.ui.secondary.label:hover {
+ background-color: #27292a;
+ border-color: #27292a;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.red.ribbon.label {
- border-color: #b21e1e !important;
+.ui.ui.ui.secondary.ribbon.label {
+ border-color: #020203;
}
/* Basic */
-.ui.basic.red.label {
- background-color: none #FFFFFF !important;
- color: #DB2828 !important;
- border-color: #DB2828 !important;
+.ui.basic.labels .secondary.label,
+.ui.ui.ui.basic.secondary.label {
+ background: none #FFFFFF;
+ border-color: #1B1C1D;
+ color: #1B1C1D;
}
-.ui.basic.red.labels a.label:hover,
-a.ui.basic.red.label:hover {
- background-color: #FFFFFF !important;
- color: #d01919 !important;
- border-color: #d01919 !important;
+.ui.basic.labels a.secondary.label:hover,
+a.ui.ui.ui.basic.secondary.label:hover {
+ background: none #FFFFFF;
+ border-color: #27292a;
+ color: #27292a;
}
-/*--- Orange ---*/
+/* Inverted */
+.ui.inverted.labels .secondary.label,
+.ui.ui.ui.inverted.secondary.label {
+ background-color: #545454;
+ border-color: #545454;
+ color: #1B1C1D;
+}
-.ui.orange.labels .label,
-.ui.orange.label {
- background-color: #F2711C !important;
- border-color: #F2711C !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.secondary.label:hover,
+a.ui.ui.ui.inverted.secondary.label:hover {
+ background-color: #6e6e6e;
+ border-color: #6e6e6e;
+ color: #1B1C1D;
}
-/* Link */
-.ui.orange.labels .label:hover,
-a.ui.orange.label:hover {
- background-color: #f26202 !important;
- border-color: #f26202 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.secondary.ribbon.label {
+ border-color: #3b3b3b;
}
-/* Corner */
-.ui.orange.corner.label,
-.ui.orange.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .secondary.label,
+.ui.ui.ui.inverted.basic.secondary.label {
+ background-color: #1B1C1D;
+ border-color: #545454;
+ color: #545454;
+}
+.ui.inverted.basic.labels a.secondary.label:hover,
+a.ui.ui.ui.inverted.basic.secondary.label:hover {
+ border-color: #6e6e6e;
+ background-color: #1B1C1D;
+ color: #6e6e6e;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .secondary.label,
+.ui.ui.ui.inverted.secondary.basic.tag.label {
+ border: 1px solid #545454;
+}
+.ui.inverted.basic.tag.labels .secondary.label:before,
+.ui.ui.ui.inverted.secondary.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.red.labels .label,
+.ui.ui.ui.red.label {
+ background-color: #DB2828;
+ border-color: #DB2828;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.red.labels a.label:hover,
+a.ui.ui.ui.red.label:hover {
+ background-color: #d01919;
+ border-color: #d01919;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.orange.ribbon.label {
- border-color: #cf590c !important;
+.ui.ui.ui.red.ribbon.label {
+ border-color: #b21e1e;
}
/* Basic */
-.ui.basic.orange.label {
- background-color: none #FFFFFF !important;
- color: #F2711C !important;
- border-color: #F2711C !important;
+.ui.basic.labels .red.label,
+.ui.ui.ui.basic.red.label {
+ background: none #FFFFFF;
+ border-color: #DB2828;
+ color: #DB2828;
}
-.ui.basic.orange.labels a.label:hover,
-a.ui.basic.orange.label:hover {
- background-color: #FFFFFF !important;
- color: #f26202 !important;
- border-color: #f26202 !important;
+.ui.basic.labels a.red.label:hover,
+a.ui.ui.ui.basic.red.label:hover {
+ background: none #FFFFFF;
+ border-color: #d01919;
+ color: #d01919;
}
-/*--- Yellow ---*/
+/* Inverted */
+.ui.inverted.labels .red.label,
+.ui.ui.ui.inverted.red.label {
+ background-color: #FF695E;
+ border-color: #FF695E;
+ color: #1B1C1D;
+}
-.ui.yellow.labels .label,
-.ui.yellow.label {
- background-color: #FBBD08 !important;
- border-color: #FBBD08 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.red.label:hover,
+a.ui.ui.ui.inverted.red.label:hover {
+ background-color: #ff392b;
+ border-color: #ff392b;
+ color: #1B1C1D;
}
-/* Link */
-.ui.yellow.labels .label:hover,
-a.ui.yellow.label:hover {
- background-color: #eaae00 !important;
- border-color: #eaae00 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.red.ribbon.label {
+ border-color: #ff392b;
}
-/* Corner */
-.ui.yellow.corner.label,
-.ui.yellow.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .red.label,
+.ui.ui.ui.inverted.basic.red.label {
+ background-color: #1B1C1D;
+ border-color: #FF695E;
+ color: #FF695E;
+}
+.ui.inverted.basic.labels a.red.label:hover,
+a.ui.ui.ui.inverted.basic.red.label:hover {
+ border-color: #ff392b;
+ background-color: #1B1C1D;
+ color: #ff392b;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .red.label,
+.ui.ui.ui.inverted.red.basic.tag.label {
+ border: 1px solid #FF695E;
+}
+.ui.inverted.basic.tag.labels .red.label:before,
+.ui.ui.ui.inverted.red.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label {
+ background-color: #F2711C;
+ border-color: #F2711C;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.orange.labels a.label:hover,
+a.ui.ui.ui.orange.label:hover {
+ background-color: #f26202;
+ border-color: #f26202;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.yellow.ribbon.label {
- border-color: #cd9903 !important;
+.ui.ui.ui.orange.ribbon.label {
+ border-color: #cf590c;
}
/* Basic */
-.ui.basic.yellow.label {
- background-color: none #FFFFFF !important;
- color: #FBBD08 !important;
- border-color: #FBBD08 !important;
+.ui.basic.labels .orange.label,
+.ui.ui.ui.basic.orange.label {
+ background: none #FFFFFF;
+ border-color: #F2711C;
+ color: #F2711C;
}
-.ui.basic.yellow.labels a.label:hover,
-a.ui.basic.yellow.label:hover {
- background-color: #FFFFFF !important;
- color: #eaae00 !important;
- border-color: #eaae00 !important;
+.ui.basic.labels a.orange.label:hover,
+a.ui.ui.ui.basic.orange.label:hover {
+ background: none #FFFFFF;
+ border-color: #f26202;
+ color: #f26202;
}
-/*--- Olive ---*/
+/* Inverted */
+.ui.inverted.labels .orange.label,
+.ui.ui.ui.inverted.orange.label {
+ background-color: #FF851B;
+ border-color: #FF851B;
+ color: #1B1C1D;
+}
-.ui.olive.labels .label,
-.ui.olive.label {
- background-color: #B5CC18 !important;
- border-color: #B5CC18 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.orange.label:hover,
+a.ui.ui.ui.inverted.orange.label:hover {
+ background-color: #e76b00;
+ border-color: #e76b00;
+ color: #1B1C1D;
}
-/* Link */
-.ui.olive.labels .label:hover,
-a.ui.olive.label:hover {
- background-color: #a7bd0d !important;
- border-color: #a7bd0d !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.orange.ribbon.label {
+ border-color: #e76b00;
}
-/* Corner */
-.ui.olive.corner.label,
-.ui.olive.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .orange.label,
+.ui.ui.ui.inverted.basic.orange.label {
+ background-color: #1B1C1D;
+ border-color: #FF851B;
+ color: #FF851B;
+}
+.ui.inverted.basic.labels a.orange.label:hover,
+a.ui.ui.ui.inverted.basic.orange.label:hover {
+ border-color: #e76b00;
+ background-color: #1B1C1D;
+ color: #e76b00;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .orange.label,
+.ui.ui.ui.inverted.orange.basic.tag.label {
+ border: 1px solid #FF851B;
+}
+.ui.inverted.basic.tag.labels .orange.label:before,
+.ui.ui.ui.inverted.orange.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.yellow.labels .label,
+.ui.ui.ui.yellow.label {
+ background-color: #FBBD08;
+ border-color: #FBBD08;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.yellow.labels a.label:hover,
+a.ui.ui.ui.yellow.label:hover {
+ background-color: #eaae00;
+ border-color: #eaae00;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.olive.ribbon.label {
- border-color: #198f35 !important;
+.ui.ui.ui.yellow.ribbon.label {
+ border-color: #cd9903;
}
/* Basic */
-.ui.basic.olive.label {
- background-color: none #FFFFFF !important;
- color: #B5CC18 !important;
- border-color: #B5CC18 !important;
+.ui.basic.labels .yellow.label,
+.ui.ui.ui.basic.yellow.label {
+ background: none #FFFFFF;
+ border-color: #FBBD08;
+ color: #FBBD08;
}
-.ui.basic.olive.labels a.label:hover,
-a.ui.basic.olive.label:hover {
- background-color: #FFFFFF !important;
- color: #a7bd0d !important;
- border-color: #a7bd0d !important;
+.ui.basic.labels a.yellow.label:hover,
+a.ui.ui.ui.basic.yellow.label:hover {
+ background: none #FFFFFF;
+ border-color: #eaae00;
+ color: #eaae00;
}
-/*--- Green ---*/
+/* Inverted */
+.ui.inverted.labels .yellow.label,
+.ui.ui.ui.inverted.yellow.label {
+ background-color: #FFE21F;
+ border-color: #FFE21F;
+ color: #1B1C1D;
+}
-.ui.green.labels .label,
-.ui.green.label {
- background-color: #21BA45 !important;
- border-color: #21BA45 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.yellow.label:hover,
+a.ui.ui.ui.inverted.yellow.label:hover {
+ background-color: #ebcd00;
+ border-color: #ebcd00;
+ color: #1B1C1D;
}
-/* Link */
-.ui.green.labels .label:hover,
-a.ui.green.label:hover {
- background-color: #16ab39 !important;
- border-color: #16ab39 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.yellow.ribbon.label {
+ border-color: #ebcd00;
}
-/* Corner */
-.ui.green.corner.label,
-.ui.green.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .yellow.label,
+.ui.ui.ui.inverted.basic.yellow.label {
+ background-color: #1B1C1D;
+ border-color: #FFE21F;
+ color: #FFE21F;
+}
+.ui.inverted.basic.labels a.yellow.label:hover,
+a.ui.ui.ui.inverted.basic.yellow.label:hover {
+ border-color: #ebcd00;
+ background-color: #1B1C1D;
+ color: #ebcd00;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .yellow.label,
+.ui.ui.ui.inverted.yellow.basic.tag.label {
+ border: 1px solid #FFE21F;
+}
+.ui.inverted.basic.tag.labels .yellow.label:before,
+.ui.ui.ui.inverted.yellow.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.olive.labels .label,
+.ui.ui.ui.olive.label {
+ background-color: #B5CC18;
+ border-color: #B5CC18;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.olive.labels a.label:hover,
+a.ui.ui.ui.olive.label:hover {
+ background-color: #a7bd0d;
+ border-color: #a7bd0d;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.green.ribbon.label {
- border-color: #198f35 !important;
+.ui.ui.ui.olive.ribbon.label {
+ border-color: #8d9e13;
}
/* Basic */
-.ui.basic.green.label {
- background-color: none #FFFFFF !important;
- color: #21BA45 !important;
- border-color: #21BA45 !important;
+.ui.basic.labels .olive.label,
+.ui.ui.ui.basic.olive.label {
+ background: none #FFFFFF;
+ border-color: #B5CC18;
+ color: #B5CC18;
}
-.ui.basic.green.labels a.label:hover,
-a.ui.basic.green.label:hover {
- background-color: #FFFFFF !important;
- color: #16ab39 !important;
- border-color: #16ab39 !important;
+.ui.basic.labels a.olive.label:hover,
+a.ui.ui.ui.basic.olive.label:hover {
+ background: none #FFFFFF;
+ border-color: #a7bd0d;
+ color: #a7bd0d;
}
-/*--- Teal ---*/
+/* Inverted */
+.ui.inverted.labels .olive.label,
+.ui.ui.ui.inverted.olive.label {
+ background-color: #D9E778;
+ border-color: #D9E778;
+ color: #1B1C1D;
+}
-.ui.teal.labels .label,
-.ui.teal.label {
- background-color: #00B5AD !important;
- border-color: #00B5AD !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.olive.label:hover,
+a.ui.ui.ui.inverted.olive.label:hover {
+ background-color: #d2e745;
+ border-color: #d2e745;
+ color: #1B1C1D;
}
-/* Link */
-.ui.teal.labels .label:hover,
-a.ui.teal.label:hover {
- background-color: #009c95 !important;
- border-color: #009c95 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.olive.ribbon.label {
+ border-color: #cddf4d;
}
-/* Corner */
-.ui.teal.corner.label,
-.ui.teal.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .olive.label,
+.ui.ui.ui.inverted.basic.olive.label {
+ background-color: #1B1C1D;
+ border-color: #D9E778;
+ color: #D9E778;
+}
+.ui.inverted.basic.labels a.olive.label:hover,
+a.ui.ui.ui.inverted.basic.olive.label:hover {
+ border-color: #d2e745;
+ background-color: #1B1C1D;
+ color: #d2e745;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .olive.label,
+.ui.ui.ui.inverted.olive.basic.tag.label {
+ border: 1px solid #D9E778;
+}
+.ui.inverted.basic.tag.labels .olive.label:before,
+.ui.ui.ui.inverted.olive.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.green.labels .label,
+.ui.ui.ui.green.label {
+ background-color: #21BA45;
+ border-color: #21BA45;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.green.labels a.label:hover,
+a.ui.ui.ui.green.label:hover {
+ background-color: #16ab39;
+ border-color: #16ab39;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.teal.ribbon.label {
- border-color: #00827c !important;
+.ui.ui.ui.green.ribbon.label {
+ border-color: #198f35;
}
/* Basic */
-.ui.basic.teal.label {
- background-color: none #FFFFFF !important;
- color: #00B5AD !important;
- border-color: #00B5AD !important;
+.ui.basic.labels .green.label,
+.ui.ui.ui.basic.green.label {
+ background: none #FFFFFF;
+ border-color: #21BA45;
+ color: #21BA45;
}
-.ui.basic.teal.labels a.label:hover,
-a.ui.basic.teal.label:hover {
- background-color: #FFFFFF !important;
- color: #009c95 !important;
- border-color: #009c95 !important;
+.ui.basic.labels a.green.label:hover,
+a.ui.ui.ui.basic.green.label:hover {
+ background: none #FFFFFF;
+ border-color: #16ab39;
+ color: #16ab39;
}
-/*--- Blue ---*/
+/* Inverted */
+.ui.inverted.labels .green.label,
+.ui.ui.ui.inverted.green.label {
+ background-color: #2ECC40;
+ border-color: #2ECC40;
+ color: #1B1C1D;
+}
-.ui.blue.labels .label,
-.ui.blue.label {
- background-color: #2185D0 !important;
- border-color: #2185D0 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.green.label:hover,
+a.ui.ui.ui.inverted.green.label:hover {
+ background-color: #1ea92e;
+ border-color: #1ea92e;
+ color: #1B1C1D;
}
-/* Link */
-.ui.blue.labels .label:hover,
-a.ui.blue.label:hover {
- background-color: #1678c2 !important;
- border-color: #1678c2 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.green.ribbon.label {
+ border-color: #25a233;
}
-/* Corner */
-.ui.blue.corner.label,
-.ui.blue.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .green.label,
+.ui.ui.ui.inverted.basic.green.label {
+ background-color: #1B1C1D;
+ border-color: #2ECC40;
+ color: #2ECC40;
+}
+.ui.inverted.basic.labels a.green.label:hover,
+a.ui.ui.ui.inverted.basic.green.label:hover {
+ border-color: #1ea92e;
+ background-color: #1B1C1D;
+ color: #1ea92e;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .green.label,
+.ui.ui.ui.inverted.green.basic.tag.label {
+ border: 1px solid #2ECC40;
+}
+.ui.inverted.basic.tag.labels .green.label:before,
+.ui.ui.ui.inverted.green.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.teal.labels .label,
+.ui.ui.ui.teal.label {
+ background-color: #00B5AD;
+ border-color: #00B5AD;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.teal.labels a.label:hover,
+a.ui.ui.ui.teal.label:hover {
+ background-color: #009c95;
+ border-color: #009c95;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.blue.ribbon.label {
- border-color: #1a69a4 !important;
+.ui.ui.ui.teal.ribbon.label {
+ border-color: #00827c;
}
/* Basic */
-.ui.basic.blue.label {
- background-color: none #FFFFFF !important;
- color: #2185D0 !important;
- border-color: #2185D0 !important;
+.ui.basic.labels .teal.label,
+.ui.ui.ui.basic.teal.label {
+ background: none #FFFFFF;
+ border-color: #00B5AD;
+ color: #00B5AD;
}
-.ui.basic.blue.labels a.label:hover,
-a.ui.basic.blue.label:hover {
- background-color: #FFFFFF !important;
- color: #1678c2 !important;
- border-color: #1678c2 !important;
+.ui.basic.labels a.teal.label:hover,
+a.ui.ui.ui.basic.teal.label:hover {
+ background: none #FFFFFF;
+ border-color: #009c95;
+ color: #009c95;
}
-/*--- Violet ---*/
+/* Inverted */
+.ui.inverted.labels .teal.label,
+.ui.ui.ui.inverted.teal.label {
+ background-color: #6DFFFF;
+ border-color: #6DFFFF;
+ color: #1B1C1D;
+}
-.ui.violet.labels .label,
-.ui.violet.label {
- background-color: #6435C9 !important;
- border-color: #6435C9 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.teal.label:hover,
+a.ui.ui.ui.inverted.teal.label:hover {
+ background-color: #3affff;
+ border-color: #3affff;
+ color: #1B1C1D;
}
-/* Link */
-.ui.violet.labels .label:hover,
-a.ui.violet.label:hover {
- background-color: #5829bb !important;
- border-color: #5829bb !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.teal.ribbon.label {
+ border-color: #3affff;
}
-/* Corner */
-.ui.violet.corner.label,
-.ui.violet.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .teal.label,
+.ui.ui.ui.inverted.basic.teal.label {
+ background-color: #1B1C1D;
+ border-color: #6DFFFF;
+ color: #6DFFFF;
+}
+.ui.inverted.basic.labels a.teal.label:hover,
+a.ui.ui.ui.inverted.basic.teal.label:hover {
+ border-color: #3affff;
+ background-color: #1B1C1D;
+ color: #3affff;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .teal.label,
+.ui.ui.ui.inverted.teal.basic.tag.label {
+ border: 1px solid #6DFFFF;
+}
+.ui.inverted.basic.tag.labels .teal.label:before,
+.ui.ui.ui.inverted.teal.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.blue.labels .label,
+.ui.ui.ui.blue.label {
+ background-color: #2185D0;
+ border-color: #2185D0;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.blue.labels a.label:hover,
+a.ui.ui.ui.blue.label:hover {
+ background-color: #1678c2;
+ border-color: #1678c2;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.violet.ribbon.label {
- border-color: #502aa1 !important;
+.ui.ui.ui.blue.ribbon.label {
+ border-color: #1a69a4;
}
/* Basic */
-.ui.basic.violet.label {
- background-color: none #FFFFFF !important;
- color: #6435C9 !important;
- border-color: #6435C9 !important;
+.ui.basic.labels .blue.label,
+.ui.ui.ui.basic.blue.label {
+ background: none #FFFFFF;
+ border-color: #2185D0;
+ color: #2185D0;
}
-.ui.basic.violet.labels a.label:hover,
-a.ui.basic.violet.label:hover {
- background-color: #FFFFFF !important;
- color: #5829bb !important;
- border-color: #5829bb !important;
+.ui.basic.labels a.blue.label:hover,
+a.ui.ui.ui.basic.blue.label:hover {
+ background: none #FFFFFF;
+ border-color: #1678c2;
+ color: #1678c2;
}
-/*--- Purple ---*/
+/* Inverted */
+.ui.inverted.labels .blue.label,
+.ui.ui.ui.inverted.blue.label {
+ background-color: #54C8FF;
+ border-color: #54C8FF;
+ color: #1B1C1D;
+}
-.ui.purple.labels .label,
-.ui.purple.label {
- background-color: #A333C8 !important;
- border-color: #A333C8 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.blue.label:hover,
+a.ui.ui.ui.inverted.blue.label:hover {
+ background-color: #21b8ff;
+ border-color: #21b8ff;
+ color: #1B1C1D;
}
-/* Link */
-.ui.purple.labels .label:hover,
-a.ui.purple.label:hover {
- background-color: #9627ba !important;
- border-color: #9627ba !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.blue.ribbon.label {
+ border-color: #21b8ff;
}
-/* Corner */
-.ui.purple.corner.label,
-.ui.purple.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .blue.label,
+.ui.ui.ui.inverted.basic.blue.label {
+ background-color: #1B1C1D;
+ border-color: #54C8FF;
+ color: #54C8FF;
+}
+.ui.inverted.basic.labels a.blue.label:hover,
+a.ui.ui.ui.inverted.basic.blue.label:hover {
+ border-color: #21b8ff;
+ background-color: #1B1C1D;
+ color: #21b8ff;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .blue.label,
+.ui.ui.ui.inverted.blue.basic.tag.label {
+ border: 1px solid #54C8FF;
+}
+.ui.inverted.basic.tag.labels .blue.label:before,
+.ui.ui.ui.inverted.blue.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.violet.labels .label,
+.ui.ui.ui.violet.label {
+ background-color: #6435C9;
+ border-color: #6435C9;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.violet.labels a.label:hover,
+a.ui.ui.ui.violet.label:hover {
+ background-color: #5829bb;
+ border-color: #5829bb;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.purple.ribbon.label {
- border-color: #82299f !important;
+.ui.ui.ui.violet.ribbon.label {
+ border-color: #502aa1;
}
/* Basic */
-.ui.basic.purple.label {
- background-color: none #FFFFFF !important;
- color: #A333C8 !important;
- border-color: #A333C8 !important;
+.ui.basic.labels .violet.label,
+.ui.ui.ui.basic.violet.label {
+ background: none #FFFFFF;
+ border-color: #6435C9;
+ color: #6435C9;
}
-.ui.basic.purple.labels a.label:hover,
-a.ui.basic.purple.label:hover {
- background-color: #FFFFFF !important;
- color: #9627ba !important;
- border-color: #9627ba !important;
+.ui.basic.labels a.violet.label:hover,
+a.ui.ui.ui.basic.violet.label:hover {
+ background: none #FFFFFF;
+ border-color: #5829bb;
+ color: #5829bb;
}
-/*--- Pink ---*/
+/* Inverted */
+.ui.inverted.labels .violet.label,
+.ui.ui.ui.inverted.violet.label {
+ background-color: #A291FB;
+ border-color: #A291FB;
+ color: #1B1C1D;
+}
-.ui.pink.labels .label,
-.ui.pink.label {
- background-color: #E03997 !important;
- border-color: #E03997 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.violet.label:hover,
+a.ui.ui.ui.inverted.violet.label:hover {
+ background-color: #745aff;
+ border-color: #745aff;
+ color: #1B1C1D;
}
-/* Link */
-.ui.pink.labels .label:hover,
-a.ui.pink.label:hover {
- background-color: #e61a8d !important;
- border-color: #e61a8d !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.violet.ribbon.label {
+ border-color: #7860f9;
}
-/* Corner */
-.ui.pink.corner.label,
-.ui.pink.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .violet.label,
+.ui.ui.ui.inverted.basic.violet.label {
+ background-color: #1B1C1D;
+ border-color: #A291FB;
+ color: #A291FB;
+}
+.ui.inverted.basic.labels a.violet.label:hover,
+a.ui.ui.ui.inverted.basic.violet.label:hover {
+ border-color: #745aff;
+ background-color: #1B1C1D;
+ color: #745aff;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .violet.label,
+.ui.ui.ui.inverted.violet.basic.tag.label {
+ border: 1px solid #A291FB;
+}
+.ui.inverted.basic.tag.labels .violet.label:before,
+.ui.ui.ui.inverted.violet.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.purple.labels .label,
+.ui.ui.ui.purple.label {
+ background-color: #A333C8;
+ border-color: #A333C8;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.purple.labels a.label:hover,
+a.ui.ui.ui.purple.label:hover {
+ background-color: #9627ba;
+ border-color: #9627ba;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.pink.ribbon.label {
- border-color: #c71f7e !important;
+.ui.ui.ui.purple.ribbon.label {
+ border-color: #82299f;
}
/* Basic */
-.ui.basic.pink.label {
- background-color: none #FFFFFF !important;
- color: #E03997 !important;
- border-color: #E03997 !important;
+.ui.basic.labels .purple.label,
+.ui.ui.ui.basic.purple.label {
+ background: none #FFFFFF;
+ border-color: #A333C8;
+ color: #A333C8;
}
-.ui.basic.pink.labels a.label:hover,
-a.ui.basic.pink.label:hover {
- background-color: #FFFFFF !important;
- color: #e61a8d !important;
- border-color: #e61a8d !important;
+.ui.basic.labels a.purple.label:hover,
+a.ui.ui.ui.basic.purple.label:hover {
+ background: none #FFFFFF;
+ border-color: #9627ba;
+ color: #9627ba;
}
-/*--- Brown ---*/
+/* Inverted */
+.ui.inverted.labels .purple.label,
+.ui.ui.ui.inverted.purple.label {
+ background-color: #DC73FF;
+ border-color: #DC73FF;
+ color: #1B1C1D;
+}
-.ui.brown.labels .label,
-.ui.brown.label {
- background-color: #A5673F !important;
- border-color: #A5673F !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.purple.label:hover,
+a.ui.ui.ui.inverted.purple.label:hover {
+ background-color: #cf40ff;
+ border-color: #cf40ff;
+ color: #1B1C1D;
}
-/* Link */
-.ui.brown.labels .label:hover,
-a.ui.brown.label:hover {
- background-color: #975b33 !important;
- border-color: #975b33 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.purple.ribbon.label {
+ border-color: #cf40ff;
}
-/* Corner */
-.ui.brown.corner.label,
-.ui.brown.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .purple.label,
+.ui.ui.ui.inverted.basic.purple.label {
+ background-color: #1B1C1D;
+ border-color: #DC73FF;
+ color: #DC73FF;
+}
+.ui.inverted.basic.labels a.purple.label:hover,
+a.ui.ui.ui.inverted.basic.purple.label:hover {
+ border-color: #cf40ff;
+ background-color: #1B1C1D;
+ color: #cf40ff;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .purple.label,
+.ui.ui.ui.inverted.purple.basic.tag.label {
+ border: 1px solid #DC73FF;
+}
+.ui.inverted.basic.tag.labels .purple.label:before,
+.ui.ui.ui.inverted.purple.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.pink.labels .label,
+.ui.ui.ui.pink.label {
+ background-color: #E03997;
+ border-color: #E03997;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.pink.labels a.label:hover,
+a.ui.ui.ui.pink.label:hover {
+ background-color: #e61a8d;
+ border-color: #e61a8d;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.brown.ribbon.label {
- border-color: #805031 !important;
+.ui.ui.ui.pink.ribbon.label {
+ border-color: #c71f7e;
}
/* Basic */
-.ui.basic.brown.label {
- background-color: none #FFFFFF !important;
- color: #A5673F !important;
- border-color: #A5673F !important;
+.ui.basic.labels .pink.label,
+.ui.ui.ui.basic.pink.label {
+ background: none #FFFFFF;
+ border-color: #E03997;
+ color: #E03997;
}
-.ui.basic.brown.labels a.label:hover,
-a.ui.basic.brown.label:hover {
- background-color: #FFFFFF !important;
- color: #975b33 !important;
- border-color: #975b33 !important;
+.ui.basic.labels a.pink.label:hover,
+a.ui.ui.ui.basic.pink.label:hover {
+ background: none #FFFFFF;
+ border-color: #e61a8d;
+ color: #e61a8d;
}
-/*--- Grey ---*/
+/* Inverted */
+.ui.inverted.labels .pink.label,
+.ui.ui.ui.inverted.pink.label {
+ background-color: #FF8EDF;
+ border-color: #FF8EDF;
+ color: #1B1C1D;
+}
-.ui.grey.labels .label,
-.ui.grey.label {
- background-color: #767676 !important;
- border-color: #767676 !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.pink.label:hover,
+a.ui.ui.ui.inverted.pink.label:hover {
+ background-color: #ff5bd1;
+ border-color: #ff5bd1;
+ color: #1B1C1D;
}
-/* Link */
-.ui.grey.labels .label:hover,
-a.ui.grey.label:hover {
- background-color: #838383 !important;
- border-color: #838383 !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.pink.ribbon.label {
+ border-color: #ff5bd1;
}
-/* Corner */
-.ui.grey.corner.label,
-.ui.grey.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .pink.label,
+.ui.ui.ui.inverted.basic.pink.label {
+ background-color: #1B1C1D;
+ border-color: #FF8EDF;
+ color: #FF8EDF;
+}
+.ui.inverted.basic.labels a.pink.label:hover,
+a.ui.ui.ui.inverted.basic.pink.label:hover {
+ border-color: #ff5bd1;
+ background-color: #1B1C1D;
+ color: #ff5bd1;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .pink.label,
+.ui.ui.ui.inverted.pink.basic.tag.label {
+ border: 1px solid #FF8EDF;
+}
+.ui.inverted.basic.tag.labels .pink.label:before,
+.ui.ui.ui.inverted.pink.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.brown.labels .label,
+.ui.ui.ui.brown.label {
+ background-color: #A5673F;
+ border-color: #A5673F;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.brown.labels a.label:hover,
+a.ui.ui.ui.brown.label:hover {
+ background-color: #975b33;
+ border-color: #975b33;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.grey.ribbon.label {
- border-color: #805031 !important;
+.ui.ui.ui.brown.ribbon.label {
+ border-color: #805031;
}
/* Basic */
-.ui.basic.grey.label {
- background-color: none #FFFFFF !important;
- color: #767676 !important;
- border-color: #767676 !important;
+.ui.basic.labels .brown.label,
+.ui.ui.ui.basic.brown.label {
+ background: none #FFFFFF;
+ border-color: #A5673F;
+ color: #A5673F;
}
-.ui.basic.grey.labels a.label:hover,
-a.ui.basic.grey.label:hover {
- background-color: #FFFFFF !important;
- color: #838383 !important;
- border-color: #838383 !important;
+.ui.basic.labels a.brown.label:hover,
+a.ui.ui.ui.basic.brown.label:hover {
+ background: none #FFFFFF;
+ border-color: #975b33;
+ color: #975b33;
}
-/*--- Black ---*/
+/* Inverted */
+.ui.inverted.labels .brown.label,
+.ui.ui.ui.inverted.brown.label {
+ background-color: #D67C1C;
+ border-color: #D67C1C;
+ color: #1B1C1D;
+}
-.ui.black.labels .label,
-.ui.black.label {
- background-color: #1B1C1D !important;
- border-color: #1B1C1D !important;
- color: #FFFFFF !important;
+/* Inverted Link */
+.ui.inverted.labels a.brown.label:hover,
+a.ui.ui.ui.inverted.brown.label:hover {
+ background-color: #b0620f;
+ border-color: #b0620f;
+ color: #1B1C1D;
}
-/* Link */
-.ui.black.labels .label:hover,
-a.ui.black.label:hover {
- background-color: #27292a !important;
- border-color: #27292a !important;
- color: #FFFFFF !important;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.brown.ribbon.label {
+ border-color: #a96216;
}
-/* Corner */
-.ui.black.corner.label,
-.ui.black.corner.label:hover {
- background-color: transparent !important;
+/* Inverted Basic */
+.ui.inverted.basic.labels .brown.label,
+.ui.ui.ui.inverted.basic.brown.label {
+ background-color: #1B1C1D;
+ border-color: #D67C1C;
+ color: #D67C1C;
+}
+.ui.inverted.basic.labels a.brown.label:hover,
+a.ui.ui.ui.inverted.basic.brown.label:hover {
+ border-color: #b0620f;
+ background-color: #1B1C1D;
+ color: #b0620f;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .brown.label,
+.ui.ui.ui.inverted.brown.basic.tag.label {
+ border: 1px solid #D67C1C;
+}
+.ui.inverted.basic.tag.labels .brown.label:before,
+.ui.ui.ui.inverted.brown.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label {
+ background-color: #767676;
+ border-color: #767676;
+ color: #FFFFFF;
+}
+
+/* Link */
+.ui.grey.labels a.label:hover,
+a.ui.ui.ui.grey.label:hover {
+ background-color: #838383;
+ border-color: #838383;
+ color: #FFFFFF;
}
/* Ribbon */
-.ui.black.ribbon.label {
- border-color: #805031 !important;
+.ui.ui.ui.grey.ribbon.label {
+ border-color: #5d5d5d;
}
/* Basic */
-.ui.basic.black.label {
- background-color: none #FFFFFF !important;
- color: #1B1C1D !important;
- border-color: #1B1C1D !important;
+.ui.basic.labels .grey.label,
+.ui.ui.ui.basic.grey.label {
+ background: none #FFFFFF;
+ border-color: #767676;
+ color: #767676;
}
-.ui.basic.black.labels a.label:hover,
-a.ui.basic.black.label:hover {
- background-color: #FFFFFF !important;
- color: #27292a !important;
- border-color: #27292a !important;
+.ui.basic.labels a.grey.label:hover,
+a.ui.ui.ui.basic.grey.label:hover {
+ background: none #FFFFFF;
+ border-color: #838383;
+ color: #838383;
}
-/*-------------------
- Basic
---------------------*/
+/* Inverted */
+.ui.inverted.labels .grey.label,
+.ui.ui.ui.inverted.grey.label {
+ background-color: #DCDDDE;
+ border-color: #DCDDDE;
+ color: #1B1C1D;
+}
-.ui.basic.label {
- background: none #FFFFFF;
- border: 1px solid rgba(34, 36, 38, 0.15);
- color: rgba(0, 0, 0, 0.87);
- -webkit-box-shadow: none;
- box-shadow: none;
+/* Inverted Link */
+.ui.inverted.labels a.grey.label:hover,
+a.ui.ui.ui.inverted.grey.label:hover {
+ background-color: #c2c4c5;
+ border-color: #c2c4c5;
+ color: #FFFFFF;
+}
+
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.grey.ribbon.label {
+ border-color: #e9eaea;
+}
+
+/* Inverted Basic */
+.ui.inverted.basic.labels .grey.label,
+.ui.ui.ui.inverted.basic.grey.label {
+ background-color: #1B1C1D;
+ border-color: #DCDDDE;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.basic.labels a.grey.label:hover,
+a.ui.ui.ui.inverted.basic.grey.label:hover {
+ border-color: #c2c4c5;
+ background-color: #1B1C1D;
+}
+
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .grey.label,
+.ui.ui.ui.inverted.grey.basic.tag.label {
+ border: 1px solid #DCDDDE;
+}
+.ui.inverted.basic.tag.labels .grey.label:before,
+.ui.ui.ui.inverted.grey.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
+}
+.ui.black.labels .label,
+.ui.ui.ui.black.label {
+ background-color: #1B1C1D;
+ border-color: #1B1C1D;
+ color: #FFFFFF;
}
/* Link */
-a.ui.basic.label:hover {
- text-decoration: none;
+.ui.black.labels a.label:hover,
+a.ui.ui.ui.black.label:hover {
+ background-color: #27292a;
+ border-color: #27292a;
+ color: #FFFFFF;
+}
+
+/* Ribbon */
+.ui.ui.ui.black.ribbon.label {
+ border-color: #020203;
+}
+
+/* Basic */
+.ui.basic.labels .black.label,
+.ui.ui.ui.basic.black.label {
background: none #FFFFFF;
- color: #1e70bf;
- -webkit-box-shadow: 1px solid rgba(34, 36, 38, 0.15);
- box-shadow: 1px solid rgba(34, 36, 38, 0.15);
- -webkit-box-shadow: none;
- box-shadow: none;
+ border-color: #1B1C1D;
+ color: #1B1C1D;
+}
+.ui.basic.labels a.black.label:hover,
+a.ui.ui.ui.basic.black.label:hover {
+ background: none #FFFFFF;
+ border-color: #27292a;
+ color: #27292a;
}
-/* Pointing */
-.ui.basic.pointing.label:before {
- border-color: inherit;
+/* Inverted */
+.ui.inverted.labels .black.label,
+.ui.ui.ui.inverted.black.label {
+ background-color: #545454;
+ border-color: #545454;
+ color: #1B1C1D;
}
-/*-------------------
- Fluid
---------------------*/
+/* Inverted Link */
+.ui.inverted.labels a.black.label:hover,
+a.ui.ui.ui.inverted.black.label:hover {
+ background-color: #000000;
+ border-color: #000000;
+ color: #FFFFFF;
+}
-.ui.label.fluid,
-.ui.fluid.labels > .label {
- width: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+/* Inverted Ribbon */
+.ui.ui.ui.inverted.black.ribbon.label {
+ border-color: #616161;
}
-/*-------------------
- Inverted
---------------------*/
+/* Inverted Basic */
+.ui.inverted.basic.labels .black.label,
+.ui.ui.ui.inverted.basic.black.label {
+ background-color: #1B1C1D;
+ border-color: #545454;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.basic.labels a.black.label:hover,
+a.ui.ui.ui.inverted.basic.black.label:hover {
+ border-color: #000000;
+ background-color: #1B1C1D;
+}
-.ui.inverted.labels .label,
-.ui.inverted.label {
- color: rgba(255, 255, 255, 0.9) !important;
+/* Inverted Basic Tags */
+.ui.inverted.basic.tag.labels .black.label,
+.ui.ui.ui.inverted.black.basic.tag.label {
+ border: 1px solid #545454;
+}
+.ui.inverted.basic.tag.labels .black.label:before,
+.ui.ui.ui.inverted.black.basic.tag.label:before {
+ border-color: inherit;
+ border-width: 1px 0 0 1px;
+ border-style: inherit;
+ background-color: #1B1C1D;
+ right: calc(100% + 1px);
}
/*-------------------
@@ -1093,15 +1861,15 @@ a.ui.basic.label:hover {
.ui.horizontal.labels .label,
.ui.horizontal.label {
- margin: 0em 0.5em 0em 0em;
+ margin: 0 0.5em 0 0;
padding: 0.4em 0.833em;
min-width: 3em;
text-align: center;
}
/*-------------------
- Circular
---------------------*/
+ Circular
+ --------------------*/
.ui.circular.labels .label,
.ui.circular.label {
@@ -1114,8 +1882,8 @@ a.ui.basic.label:hover {
}
.ui.empty.circular.labels .label,
.ui.empty.circular.label {
- min-width: 0em;
- min-height: 0em;
+ min-width: 0;
+ min-height: 0;
overflow: hidden;
width: 0.5em;
height: 0.5em;
@@ -1123,8 +1891,8 @@ a.ui.basic.label:hover {
}
/*-------------------
- Pointing
---------------------*/
+ Pointing
+ --------------------*/
.ui.pointing.label {
position: relative;
@@ -1135,7 +1903,7 @@ a.ui.basic.label:hover {
.ui.pointing.label:before {
background-color: inherit;
background-image: inherit;
- border-width: none;
+ border-width: 0;
border-style: solid;
border-color: inherit;
}
@@ -1150,8 +1918,8 @@ a.ui.basic.label:hover {
z-index: 2;
width: 0.6666em;
height: 0.6666em;
- -webkit-transition: background 0.1s ease;
- transition: background 0.1s ease;
+ -webkit-transition: none;
+ transition: none;
}
/*--- Above ---*/
@@ -1162,10 +1930,10 @@ a.ui.basic.label:hover {
}
.ui.pointing.label:before,
.ui[class*="pointing above"].label:before {
- border-width: 1px 0px 0px 1px;
+ border-width: 1px 0 0 1px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
- top: 0%;
+ top: 0;
left: 50%;
}
@@ -1173,12 +1941,12 @@ a.ui.basic.label:hover {
.ui[class*="bottom pointing"].label,
.ui[class*="pointing below"].label {
- margin-top: 0em;
+ margin-top: 0;
margin-bottom: 1em;
}
.ui[class*="bottom pointing"].label:before,
.ui[class*="pointing below"].label:before {
- border-width: 0px 1px 1px 0px;
+ border-width: 0 1px 1px 0;
top: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
@@ -1190,31 +1958,31 @@ a.ui.basic.label:hover {
/*--- Left ---*/
.ui[class*="left pointing"].label {
- margin-top: 0em;
+ margin-top: 0;
margin-left: 0.6666em;
}
.ui[class*="left pointing"].label:before {
- border-width: 0px 0px 1px 1px;
+ border-width: 0 0 1px 1px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
bottom: auto;
right: auto;
top: 50%;
- left: 0em;
+ left: 0;
}
/*--- Right ---*/
.ui[class*="right pointing"].label {
- margin-top: 0em;
+ margin-top: 0;
margin-right: 0.6666em;
}
.ui[class*="right pointing"].label:before {
- border-width: 1px 1px 0px 0px;
+ border-width: 1px 1px 0 0;
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
top: 50%;
- right: 0%;
+ right: 0;
bottom: auto;
left: auto;
}
@@ -1252,21 +2020,45 @@ a.ui.basic.label:hover {
}
/*------------------
- Floating Label
--------------------*/
+ Floating Label
+ -------------------*/
.ui.floating.label {
position: absolute;
z-index: 100;
top: -1em;
- left: 100%;
- margin: 0em 0em 0em -1.5em !important;
+ right: 0;
+ white-space: nowrap;
+ -webkit-transform: translateX(50%);
+ transform: translateX(50%);
+}
+.ui.right.aligned.floating.label {
+ -webkit-transform: translateX(1.2em);
+ transform: translateX(1.2em);
+}
+.ui.left.floating.label {
+ left: 0;
+ right: auto;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+.ui.left.aligned.floating.label {
+ -webkit-transform: translateX(-1.2em);
+ transform: translateX(-1.2em);
+}
+.ui.bottom.floating.label {
+ top: auto;
+ bottom: -1em;
}
/*-------------------
Sizes
--------------------*/
+.ui.labels .label,
+.ui.label {
+ font-size: 0.75rem;
+}
.ui.mini.labels .label,
.ui.mini.label {
font-size: 0.5625rem;
@@ -1279,10 +2071,6 @@ a.ui.basic.label:hover {
.ui.small.label {
font-size: 0.6875rem;
}
-.ui.labels .label,
-.ui.label {
- font-size: 0.75rem;
-}
.ui.large.labels .label,
.ui.large.label {
font-size: 1rem;
diff --git a/ui/dist/components/label.min.css b/ui/dist/components/label.min.css
index aabead297ab..e35b67c3dec 100644
--- a/ui/dist/components/label.min.css
+++ b/ui/dist/components/label.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Label
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Label
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.label{display:inline-block;line-height:1;vertical-align:baseline;margin:0 .125em;background-color:#e8e8e8;background-image:none;padding:.5833em .833em;color:rgba(0,0,0,.6);text-transform:none;font-weight:700;border:0 solid transparent;border-radius:.25rem;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label:first-child{margin-left:0}.ui.label:last-child{margin-right:0}a.ui.label{cursor:pointer}.ui.label>a{cursor:pointer;color:inherit;opacity:.5;-webkit-transition:.1s opacity ease;transition:.1s opacity ease}.ui.label>a:hover{opacity:1}.ui.label>img{width:auto!important;vertical-align:middle;height:2.1666em!important}.ui.label>.icon{width:auto;margin:0 .75em 0 0}.ui.label>.detail{display:inline-block;vertical-align:top;font-weight:700;margin-left:1em;opacity:.8}.ui.label>.detail .icon{margin:0 .25em 0 0}.ui.label>.close.icon,.ui.label>.delete.icon{cursor:pointer;margin-right:0;margin-left:.5em;font-size:.9375em;opacity:.5;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label>.delete.icon:hover{opacity:1}.ui.labels>.label{margin:0 .5em .5em 0}.ui.header>.ui.label{margin-top:-.29165em}.ui.attached.segment>.ui.top.left.attached.label,.ui.bottom.attached.segment>.ui.top.left.attached.label{border-top-left-radius:0}.ui.attached.segment>.ui.top.right.attached.label,.ui.bottom.attached.segment>.ui.top.right.attached.label{border-top-right-radius:0}.ui.top.attached.segment>.ui.bottom.left.attached.label{border-bottom-left-radius:0}.ui.top.attached.segment>.ui.bottom.right.attached.label{border-bottom-right-radius:0}.ui.top.attached.label+[class*="right floated"]+*,.ui.top.attached.label:first-child+:not(.attached){margin-top:2rem!important}.ui.bottom.attached.label:first-child~:last-child:not(.attached){margin-top:0;margin-bottom:2rem!important}.ui.image.label{width:auto!important;margin-top:0;margin-bottom:0;max-width:9999px;vertical-align:baseline;text-transform:none;background:#e8e8e8;padding:.5833em .833em .5833em .5em;border-radius:.25rem;-webkit-box-shadow:none;box-shadow:none}.ui.image.label img{display:inline-block;vertical-align:top;height:2.1666em;margin:-.5833em .5em -.5833em -.5em;border-radius:.25rem 0 0 .25rem}.ui.image.label .detail{background:rgba(0,0,0,.1);margin:-.5833em -.833em -.5833em .5em;padding:.5833em .833em;border-radius:0 .25rem .25rem 0}.ui.tag.label,.ui.tag.labels .label{margin-left:1em;position:relative;padding-left:1.5em;padding-right:1.5em;border-radius:0 .25rem .25rem 0;-webkit-transition:none;transition:none}.ui.tag.label:before,.ui.tag.labels .label:before{position:absolute;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);transform:translateY(-50%) translateX(50%) rotate(-45deg);top:50%;right:100%;content:'';background-color:inherit;background-image:none;width:1.56em;height:1.56em;-webkit-transition:none;transition:none}.ui.tag.label:after,.ui.tag.labels .label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.25em;background-color:#fff!important;width:.5em;height:.5em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);border-radius:500rem}.ui.corner.label{position:absolute;top:0;right:0;margin:0;padding:0;text-align:center;border-color:#e8e8e8;width:4em;height:4em;z-index:1;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label{background-color:transparent!important}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;background-color:transparent!important;border-top:0 solid transparent;border-right:4em solid transparent;border-bottom:4em solid transparent;border-left:0 solid transparent;border-right-color:inherit;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label .icon{cursor:default;position:relative;top:.5625em;left:.6875em;font-size:1.125em;margin:0}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-top:4em solid transparent;border-right:4em solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;border-top-color:inherit}.ui.left.corner.label .icon{left:-.6875em}.ui.segment>.ui.corner.label{top:-1px;right:-1px}.ui.segment>.ui.left.corner.label{right:auto;left:-1px}.ui.ribbon.label{position:relative;margin:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;border-radius:0 .25rem .25rem 0;border-color:rgba(0,0,0,.15)}.ui.ribbon.label:after{position:absolute;content:'';top:100%;left:0;background-color:transparent!important;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent;border-right-color:inherit;width:0;height:0}.ui.ribbon.label{left:calc(-1rem - 1.2em);margin-right:-1.2em;padding-left:calc(1rem + 1.2em);padding-right:1.2em}.ui[class*="right ribbon"].label{left:calc(100% + 1rem + 1.2em);padding-left:1.2em;padding-right:calc(1rem + 1.2em)}.ui[class*="right ribbon"].label{text-align:left;-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:.25rem 0 0 .25rem}.ui[class*="right ribbon"].label:after{left:auto;right:0;border-style:solid;border-width:1.2em 1.2em 0 0;border-color:transparent;border-top-color:inherit}.ui.card .image>.ribbon.label,.ui.image>.ribbon.label{position:absolute;top:1rem}.ui.card .image>.ui.ribbon.label,.ui.image>.ui.ribbon.label{left:calc(.05rem - 1.2em)}.ui.card .image>.ui[class*="right ribbon"].label,.ui.image>.ui[class*="right ribbon"].label{left:calc(100% + -.05rem + 1.2em);padding-left:.833em}.ui.table td>.ui.ribbon.label{left:calc(-.8125em - 1.2em)}.ui.table td>.ui[class*="right ribbon"].label{left:calc(100% + .8125em + 1.2em);padding-left:.833em}.ui.attached.label,.ui[class*="top attached"].label{width:100%;position:absolute;margin:0;top:0;left:0;padding:.75em 1em;border-radius:.1875rem .1875rem 0 0}.ui[class*="bottom attached"].label{top:auto;bottom:0;border-radius:0 0 .1875rem .1875rem}.ui[class*="top left attached"].label{width:auto;margin-top:0!important;border-radius:.1875rem 0 .25rem 0}.ui[class*="top right attached"].label{width:auto;left:auto;right:0;border-radius:0 .1875rem 0 .25rem}.ui[class*="bottom left attached"].label{width:auto;top:auto;bottom:0;border-radius:0 .25rem 0 .1875rem}.ui[class*="bottom right attached"].label{top:auto;bottom:0;left:auto;right:0;width:auto;border-radius:.25rem 0 .1875rem 0}.ui.label.disabled{opacity:.5}a.ui.label:hover,a.ui.labels .label:hover{background-color:#e0e0e0;border-color:#e0e0e0;background-image:none;color:rgba(0,0,0,.8)}.ui.labels a.label:hover:before,a.ui.label:hover:before{color:rgba(0,0,0,.8)}.ui.active.label{background-color:#d0d0d0;border-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}.ui.active.label:before{background-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}a.ui.active.label:hover,a.ui.labels .active.label:hover{background-color:#c8c8c8;border-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.labels a.active.label:ActiveHover:before,a.ui.active.label:ActiveHover:before{background-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.label.visible:not(.dropdown),.ui.labels.visible .label{display:inline-block!important}.ui.label.hidden,.ui.labels.hidden .label{display:none!important}.ui.red.label,.ui.red.labels .label{background-color:#db2828!important;border-color:#db2828!important;color:#fff!important}.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#d01919!important;border-color:#d01919!important;color:#fff!important}.ui.red.corner.label,.ui.red.corner.label:hover{background-color:transparent!important}.ui.red.ribbon.label{border-color:#b21e1e!important}.ui.basic.red.label{background-color:none #fff!important;color:#db2828!important;border-color:#db2828!important}.ui.basic.red.labels a.label:hover,a.ui.basic.red.label:hover{background-color:#fff!important;color:#d01919!important;border-color:#d01919!important}.ui.orange.label,.ui.orange.labels .label{background-color:#f2711c!important;border-color:#f2711c!important;color:#fff!important}.ui.orange.labels .label:hover,a.ui.orange.label:hover{background-color:#f26202!important;border-color:#f26202!important;color:#fff!important}.ui.orange.corner.label,.ui.orange.corner.label:hover{background-color:transparent!important}.ui.orange.ribbon.label{border-color:#cf590c!important}.ui.basic.orange.label{background-color:none #fff!important;color:#f2711c!important;border-color:#f2711c!important}.ui.basic.orange.labels a.label:hover,a.ui.basic.orange.label:hover{background-color:#fff!important;color:#f26202!important;border-color:#f26202!important}.ui.yellow.label,.ui.yellow.labels .label{background-color:#fbbd08!important;border-color:#fbbd08!important;color:#fff!important}.ui.yellow.labels .label:hover,a.ui.yellow.label:hover{background-color:#eaae00!important;border-color:#eaae00!important;color:#fff!important}.ui.yellow.corner.label,.ui.yellow.corner.label:hover{background-color:transparent!important}.ui.yellow.ribbon.label{border-color:#cd9903!important}.ui.basic.yellow.label{background-color:none #fff!important;color:#fbbd08!important;border-color:#fbbd08!important}.ui.basic.yellow.labels a.label:hover,a.ui.basic.yellow.label:hover{background-color:#fff!important;color:#eaae00!important;border-color:#eaae00!important}.ui.olive.label,.ui.olive.labels .label{background-color:#b5cc18!important;border-color:#b5cc18!important;color:#fff!important}.ui.olive.labels .label:hover,a.ui.olive.label:hover{background-color:#a7bd0d!important;border-color:#a7bd0d!important;color:#fff!important}.ui.olive.corner.label,.ui.olive.corner.label:hover{background-color:transparent!important}.ui.olive.ribbon.label{border-color:#198f35!important}.ui.basic.olive.label{background-color:none #fff!important;color:#b5cc18!important;border-color:#b5cc18!important}.ui.basic.olive.labels a.label:hover,a.ui.basic.olive.label:hover{background-color:#fff!important;color:#a7bd0d!important;border-color:#a7bd0d!important}.ui.green.label,.ui.green.labels .label{background-color:#21ba45!important;border-color:#21ba45!important;color:#fff!important}.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#16ab39!important;border-color:#16ab39!important;color:#fff!important}.ui.green.corner.label,.ui.green.corner.label:hover{background-color:transparent!important}.ui.green.ribbon.label{border-color:#198f35!important}.ui.basic.green.label{background-color:none #fff!important;color:#21ba45!important;border-color:#21ba45!important}.ui.basic.green.labels a.label:hover,a.ui.basic.green.label:hover{background-color:#fff!important;color:#16ab39!important;border-color:#16ab39!important}.ui.teal.label,.ui.teal.labels .label{background-color:#00b5ad!important;border-color:#00b5ad!important;color:#fff!important}.ui.teal.labels .label:hover,a.ui.teal.label:hover{background-color:#009c95!important;border-color:#009c95!important;color:#fff!important}.ui.teal.corner.label,.ui.teal.corner.label:hover{background-color:transparent!important}.ui.teal.ribbon.label{border-color:#00827c!important}.ui.basic.teal.label{background-color:none #fff!important;color:#00b5ad!important;border-color:#00b5ad!important}.ui.basic.teal.labels a.label:hover,a.ui.basic.teal.label:hover{background-color:#fff!important;color:#009c95!important;border-color:#009c95!important}.ui.blue.label,.ui.blue.labels .label{background-color:#2185d0!important;border-color:#2185d0!important;color:#fff!important}.ui.blue.labels .label:hover,a.ui.blue.label:hover{background-color:#1678c2!important;border-color:#1678c2!important;color:#fff!important}.ui.blue.corner.label,.ui.blue.corner.label:hover{background-color:transparent!important}.ui.blue.ribbon.label{border-color:#1a69a4!important}.ui.basic.blue.label{background-color:none #fff!important;color:#2185d0!important;border-color:#2185d0!important}.ui.basic.blue.labels a.label:hover,a.ui.basic.blue.label:hover{background-color:#fff!important;color:#1678c2!important;border-color:#1678c2!important}.ui.violet.label,.ui.violet.labels .label{background-color:#6435c9!important;border-color:#6435c9!important;color:#fff!important}.ui.violet.labels .label:hover,a.ui.violet.label:hover{background-color:#5829bb!important;border-color:#5829bb!important;color:#fff!important}.ui.violet.corner.label,.ui.violet.corner.label:hover{background-color:transparent!important}.ui.violet.ribbon.label{border-color:#502aa1!important}.ui.basic.violet.label{background-color:none #fff!important;color:#6435c9!important;border-color:#6435c9!important}.ui.basic.violet.labels a.label:hover,a.ui.basic.violet.label:hover{background-color:#fff!important;color:#5829bb!important;border-color:#5829bb!important}.ui.purple.label,.ui.purple.labels .label{background-color:#a333c8!important;border-color:#a333c8!important;color:#fff!important}.ui.purple.labels .label:hover,a.ui.purple.label:hover{background-color:#9627ba!important;border-color:#9627ba!important;color:#fff!important}.ui.purple.corner.label,.ui.purple.corner.label:hover{background-color:transparent!important}.ui.purple.ribbon.label{border-color:#82299f!important}.ui.basic.purple.label{background-color:none #fff!important;color:#a333c8!important;border-color:#a333c8!important}.ui.basic.purple.labels a.label:hover,a.ui.basic.purple.label:hover{background-color:#fff!important;color:#9627ba!important;border-color:#9627ba!important}.ui.pink.label,.ui.pink.labels .label{background-color:#e03997!important;border-color:#e03997!important;color:#fff!important}.ui.pink.labels .label:hover,a.ui.pink.label:hover{background-color:#e61a8d!important;border-color:#e61a8d!important;color:#fff!important}.ui.pink.corner.label,.ui.pink.corner.label:hover{background-color:transparent!important}.ui.pink.ribbon.label{border-color:#c71f7e!important}.ui.basic.pink.label{background-color:none #fff!important;color:#e03997!important;border-color:#e03997!important}.ui.basic.pink.labels a.label:hover,a.ui.basic.pink.label:hover{background-color:#fff!important;color:#e61a8d!important;border-color:#e61a8d!important}.ui.brown.label,.ui.brown.labels .label{background-color:#a5673f!important;border-color:#a5673f!important;color:#fff!important}.ui.brown.labels .label:hover,a.ui.brown.label:hover{background-color:#975b33!important;border-color:#975b33!important;color:#fff!important}.ui.brown.corner.label,.ui.brown.corner.label:hover{background-color:transparent!important}.ui.brown.ribbon.label{border-color:#805031!important}.ui.basic.brown.label{background-color:none #fff!important;color:#a5673f!important;border-color:#a5673f!important}.ui.basic.brown.labels a.label:hover,a.ui.basic.brown.label:hover{background-color:#fff!important;color:#975b33!important;border-color:#975b33!important}.ui.grey.label,.ui.grey.labels .label{background-color:#767676!important;border-color:#767676!important;color:#fff!important}.ui.grey.labels .label:hover,a.ui.grey.label:hover{background-color:#838383!important;border-color:#838383!important;color:#fff!important}.ui.grey.corner.label,.ui.grey.corner.label:hover{background-color:transparent!important}.ui.grey.ribbon.label{border-color:#805031!important}.ui.basic.grey.label{background-color:none #fff!important;color:#767676!important;border-color:#767676!important}.ui.basic.grey.labels a.label:hover,a.ui.basic.grey.label:hover{background-color:#fff!important;color:#838383!important;border-color:#838383!important}.ui.black.label,.ui.black.labels .label{background-color:#1b1c1d!important;border-color:#1b1c1d!important;color:#fff!important}.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#27292a!important;border-color:#27292a!important;color:#fff!important}.ui.black.corner.label,.ui.black.corner.label:hover{background-color:transparent!important}.ui.black.ribbon.label{border-color:#805031!important}.ui.basic.black.label{background-color:none #fff!important;color:#1b1c1d!important;border-color:#1b1c1d!important}.ui.basic.black.labels a.label:hover,a.ui.basic.black.label:hover{background-color:#fff!important;color:#27292a!important;border-color:#27292a!important}.ui.basic.label{background:none #fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none}a.ui.basic.label:hover{text-decoration:none;background:none #fff;color:#1e70bf;-webkit-box-shadow:1px solid rgba(34,36,38,.15);box-shadow:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.pointing.label:before{border-color:inherit}.ui.fluid.labels>.label,.ui.label.fluid{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ui.inverted.label,.ui.inverted.labels .label{color:rgba(255,255,255,.9)!important}.ui.horizontal.label,.ui.horizontal.labels .label{margin:0 .5em 0 0;padding:.4em .833em;min-width:3em;text-align:center}.ui.circular.label,.ui.circular.labels .label{min-width:2em;min-height:2em;padding:.5em!important;line-height:1em;text-align:center;border-radius:500rem}.ui.empty.circular.label,.ui.empty.circular.labels .label{min-width:0;min-height:0;overflow:hidden;width:.5em;height:.5em;vertical-align:baseline}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{background-color:inherit;background-image:inherit;border-width:none;border-style:solid;border-color:inherit}.ui.pointing.label:before{position:absolute;content:'';-webkit-transform:rotate(45deg);transform:rotate(45deg);background-image:none;z-index:2;width:.6666em;height:.6666em;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.pointing.label,.ui[class*="pointing above"].label{margin-top:1em}.ui.pointing.label:before,.ui[class*="pointing above"].label:before{border-width:1px 0 0 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:0;left:50%}.ui[class*="bottom pointing"].label,.ui[class*="pointing below"].label{margin-top:0;margin-bottom:1em}.ui[class*="bottom pointing"].label:before,.ui[class*="pointing below"].label:before{border-width:0 1px 1px 0;top:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:100%;left:50%}.ui[class*="left pointing"].label{margin-top:0;margin-left:.6666em}.ui[class*="left pointing"].label:before{border-width:0 0 1px 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);bottom:auto;right:auto;top:50%;left:0}.ui[class*="right pointing"].label{margin-top:0;margin-right:.6666em}.ui[class*="right pointing"].label:before{border-width:1px 1px 0 0;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);top:50%;right:0;bottom:auto;left:auto}.ui.basic.pointing.label:before,.ui.basic[class*="pointing above"].label:before{margin-top:-1px}.ui.basic[class*="bottom pointing"].label:before,.ui.basic[class*="pointing below"].label:before{bottom:auto;top:100%;margin-top:1px}.ui.basic[class*="left pointing"].label:before{top:50%;left:-1px}.ui.basic[class*="right pointing"].label:before{top:50%;right:-1px}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important}.ui.mini.label,.ui.mini.labels .label{font-size:.5625rem}.ui.tiny.label,.ui.tiny.labels .label{font-size:.625rem}.ui.small.label,.ui.small.labels .label{font-size:.6875rem}.ui.label,.ui.labels .label{font-size:.75rem}.ui.large.label,.ui.large.labels .label{font-size:1rem}.ui.big.label,.ui.big.labels .label{font-size:1.3125rem}.ui.huge.label,.ui.huge.labels .label{font-size:1.4375rem}.ui.massive.label,.ui.massive.labels .label{font-size:1.6875rem}
\ No newline at end of file
+ */.ui.label{display:inline-block;line-height:1;vertical-align:baseline;margin:0 .125em;background-color:#e8e8e8;background-image:none;padding:.5833em .833em;color:rgba(0,0,0,.6);text-transform:none;font-weight:700;border:0 solid transparent;border-radius:.25rem;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label:first-child{margin-left:0}.ui.label:last-child{margin-right:0}a.ui.label{cursor:pointer}.ui.label>a{cursor:pointer;color:inherit;opacity:.5;-webkit-transition:.1s opacity ease;transition:.1s opacity ease}.ui.label>a:hover{opacity:1}.ui.label>img{width:auto!important;vertical-align:middle;height:2.1666em}.ui.label>.icon,.ui.left.icon.label>.icon{width:auto;margin:0 .75em 0 0}.ui.label>.detail{display:inline-block;vertical-align:top;font-weight:700;margin-left:1em;opacity:.8}.ui.label>.detail .icon{margin:0 .25em 0 0}.ui.label>.close.icon,.ui.label>.delete.icon{cursor:pointer;font-size:.9375em;opacity:.5;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label>.close.icon:hover,.ui.label>.delete.icon:hover{opacity:1}.ui.label.left.icon>.close.icon,.ui.label.left.icon>.delete.icon{margin:0 .5em 0 0}.ui.label:not(.icon)>.close.icon,.ui.label:not(.icon)>.delete.icon{margin:0 0 0 .5em}.ui.icon.label>.icon{margin:0 auto}.ui.right.icon.label>.icon{margin:0 0 0 .75em}.ui.labels>.label{margin:0 .5em .5em 0}.ui.header>.ui.label{margin-top:-.29165em}.ui.attached.segment>.ui.top.left.attached.label,.ui.bottom.attached.segment>.ui.top.left.attached.label{border-top-left-radius:0}.ui.attached.segment>.ui.top.right.attached.label,.ui.bottom.attached.segment>.ui.top.right.attached.label{border-top-right-radius:0}.ui.top.attached.segment>.ui.bottom.left.attached.label{border-bottom-left-radius:0}.ui.top.attached.segment>.ui.bottom.right.attached.label{border-bottom-right-radius:0}.ui.top.attached.label+:not(.attached),.ui.top.attached.label~.ui.bottom.attached.label+:not(.attached){margin-top:2rem!important}.ui.bottom.attached.label~:last-child:not(.attached){margin-top:0;margin-bottom:2rem!important}.ui.image.label{width:auto!important;margin-top:0;margin-bottom:0;max-width:9999px;vertical-align:baseline;text-transform:none;background:#e8e8e8;padding:.5833em .833em .5833em .5em;border-radius:.25rem;-webkit-box-shadow:none;box-shadow:none}.ui.image.label img{display:inline-block;vertical-align:top;height:2.1666em;margin:-.5833em .5em -.5833em -.5em;border-radius:.25rem 0 0 .25rem}.ui.image.label .detail{background:rgba(0,0,0,.1);margin:-.5833em -.833em -.5833em .5em;padding:.5833em .833em;border-radius:0 .25rem .25rem 0}.ui.tag.label,.ui.tag.labels .label{margin-left:1em;position:relative;padding-left:1.5em;padding-right:1.5em;border-radius:0 .25rem .25rem 0;-webkit-transition:none;transition:none}.ui.tag.label:before,.ui.tag.labels .label:before{position:absolute;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);transform:translateY(-50%) translateX(50%) rotate(-45deg);top:50%;right:100%;content:'';background-color:inherit;background-image:none;width:1.56em;height:1.56em;-webkit-transition:none;transition:none}.ui.tag.label:after,.ui.tag.labels .label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.25em;background-color:#fff;width:.5em;height:.5em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);border-radius:500rem}.ui.basic.tag.label:before,.ui.basic.tag.labels .label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;right:calc(100% + 1px)}.ui.basic.tag.label:after,.ui.basic.tag.labels .label:after{-webkit-box-shadow:0 -1px 3px 0 rgba(0,0,0,.8);box-shadow:0 -1px 3px 0 rgba(0,0,0,.8)}.ui.corner.label{position:absolute;top:0;right:0;margin:0;padding:0;text-align:center;border-color:#e8e8e8;width:4em;height:4em;z-index:1;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label{background-color:transparent!important}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;background-color:transparent;border-top:0 solid transparent;border-right:4em solid transparent;border-bottom:4em solid transparent;border-left:0 solid transparent;border-right-color:inherit;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label .icon{cursor:inherit;position:absolute;top:.5625em;left:auto;right:.5em;font-size:1.125em;margin:0}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-top:4em solid transparent;border-right:4em solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;border-top-color:inherit}.ui.left.corner.label .icon{left:.5em;right:auto}.ui.segment>.ui.corner.label{top:-1px;right:-1px}.ui.segment>.ui.left.corner.label{right:auto;left:-1px}.ui.ribbon.label{position:relative;margin:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;border-radius:0 .25rem .25rem 0;border-color:rgba(0,0,0,.15)}.ui.ribbon.label:after{position:absolute;content:'';top:100%;left:0;background-color:transparent;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent;border-right-color:inherit;width:0;height:0}.ui.ribbon.label{left:calc(-1rem - 1.2em);margin-right:-1.2em;padding-left:calc(1rem + 1.2em);padding-right:1.2em}.ui[class*="right ribbon"].label{left:calc(100% + 1rem + 1.2em);padding-left:1.2em;padding-right:calc(1rem + 1.2em)}.ui.basic.ribbon.label{padding-top:calc(.5833em - 1px);padding-bottom:calc(.5833em - 1px)}.ui.basic.ribbon.label:not([class*="right ribbon"]){padding-left:calc(1rem + 1.2em - 1px);padding-right:calc(1.2em - 1px)}.ui.basic[class*="right ribbon"].label{padding-left:calc(1.2em - 1px);padding-right:calc(1rem + 1.2em - 1px)}.ui.basic.ribbon.label::after{top:calc(100% + 1px)}.ui.basic.ribbon.label:not([class*="right ribbon"])::after{left:-1px}.ui.basic[class*="right ribbon"].label::after{right:-1px}.ui[class*="right ribbon"].label{text-align:left;-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:.25rem 0 0 .25rem}.ui[class*="right ribbon"].label:after{left:auto;right:0;border-style:solid;border-width:1.2em 1.2em 0 0;border-color:transparent;border-top-color:inherit}.ui.card .image>.ribbon.label,.ui.image>.ribbon.label{position:absolute;top:1rem}.ui.card .image>.ui.ribbon.label,.ui.image>.ui.ribbon.label{left:calc(.05rem - 1.2em)}.ui.card .image>.ui[class*="right ribbon"].label,.ui.image>.ui[class*="right ribbon"].label{left:calc(100% + -.05rem + 1.2em);padding-left:.833em}.ui.table td>.ui.ribbon.label{left:calc(-1em - 1.2em)}.ui.table td>.ui[class*="right ribbon"].label{left:calc(100% + 1em + 1.2em);padding-left:.833em}.ui.attached.label,.ui[class*="top attached"].label{width:100%;position:absolute;margin:0;top:0;left:0;padding:.75em 1em;border-radius:.1875rem .1875rem 0 0}.ui[class*="bottom attached"].label{top:auto;bottom:0;border-radius:0 0 .1875rem .1875rem}.ui[class*="top left attached"].label{width:auto;margin-top:0!important;border-radius:.1875rem 0 .25rem 0}.ui[class*="top right attached"].label{width:auto;left:auto;right:0;border-radius:0 .1875rem 0 .25rem}.ui[class*="bottom left attached"].label{width:auto;top:auto;bottom:0;border-radius:0 .25rem 0 .1875rem}.ui[class*="bottom right attached"].label{top:auto;bottom:0;left:auto;right:0;width:auto;border-radius:.25rem 0 .1875rem 0}.ui.label.disabled{opacity:.5}.ui.labels a.label:hover,a.ui.label:hover{background-color:#e0e0e0;border-color:#e0e0e0;background-image:none;color:rgba(0,0,0,.8)}.ui.labels a.label:hover:before,a.ui.label:hover:before{color:rgba(0,0,0,.8)}.ui.active.label{background-color:#d0d0d0;border-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}.ui.active.label:before{background-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}.ui.labels a.active.label:hover,a.ui.active.label:hover{background-color:#c8c8c8;border-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.labels a.active.label:hover:before,a.ui.active.label:hover:before{background-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.label.visible:not(.dropdown),.ui.labels.visible .label{display:inline-block!important}.ui.label.hidden,.ui.labels.hidden .label{display:none!important}.ui.basic.label,.ui.basic.labels .label{background:none #fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none}.ui.basic.labels a.label:hover,a.ui.basic.label:hover{text-decoration:none;background:none #fff;color:#1e70bf;-webkit-box-shadow:none;box-shadow:none}.ui.basic.pointing.label:before{border-color:inherit}.ui.fluid.labels>.label,.ui.label.fluid{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ui.inverted.label,.ui.inverted.labels .label{color:rgba(255,255,255,.9);background-color:#b5b5b5}.ui.inverted.corner.label{border-color:#b5b5b5}.ui.inverted.corner.label:hover{border-color:#e8e8e8;-webkit-transition:none;transition:none}.ui.inverted.basic.label,.ui.inverted.basic.label:hover,.ui.inverted.basic.labels .label{border-color:rgba(255,255,255,.5);background:#1b1c1d}.ui.inverted.basic.label:hover{color:#4183c4}.ui.primary.labels .label,.ui.ui.ui.primary.label{background-color:#2185d0;border-color:#2185d0;color:rgba(255,255,255,.9)}.ui.primary.labels a.label:hover,a.ui.ui.ui.primary.label:hover{background-color:#1678c2;border-color:#1678c2;color:#fff}.ui.ui.ui.primary.ribbon.label{border-color:#1a69a4}.ui.basic.labels .primary.label,.ui.ui.ui.basic.primary.label{background:none #fff;border-color:#2185d0;color:#2185d0}.ui.basic.labels a.primary.label:hover,a.ui.ui.ui.basic.primary.label:hover{background:none #fff;border-color:#1678c2;color:#1678c2}.ui.inverted.labels .primary.label,.ui.ui.ui.inverted.primary.label{background-color:#54c8ff;border-color:#54c8ff;color:#1b1c1d}.ui.inverted.labels a.primary.label:hover,a.ui.ui.ui.inverted.primary.label:hover{background-color:#21b8ff;border-color:#21b8ff;color:#1b1c1d}.ui.ui.ui.inverted.primary.ribbon.label{border-color:#21b8ff}.ui.inverted.basic.labels .primary.label,.ui.ui.ui.inverted.basic.primary.label{background-color:#1b1c1d;border-color:#54c8ff;color:#54c8ff}.ui.inverted.basic.labels a.primary.label:hover,a.ui.ui.ui.inverted.basic.primary.label:hover{border-color:#21b8ff;background-color:#1b1c1d;color:#21b8ff}.ui.inverted.basic.tag.labels .primary.label,.ui.ui.ui.inverted.primary.basic.tag.label{border:1px solid #54c8ff}.ui.inverted.basic.tag.labels .primary.label:before,.ui.ui.ui.inverted.primary.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.secondary.labels .label,.ui.ui.ui.secondary.label{background-color:#1b1c1d;border-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.secondary.labels a.label:hover,a.ui.ui.ui.secondary.label:hover{background-color:#27292a;border-color:#27292a;color:#fff}.ui.ui.ui.secondary.ribbon.label{border-color:#020203}.ui.basic.labels .secondary.label,.ui.ui.ui.basic.secondary.label{background:none #fff;border-color:#1b1c1d;color:#1b1c1d}.ui.basic.labels a.secondary.label:hover,a.ui.ui.ui.basic.secondary.label:hover{background:none #fff;border-color:#27292a;color:#27292a}.ui.inverted.labels .secondary.label,.ui.ui.ui.inverted.secondary.label{background-color:#545454;border-color:#545454;color:#1b1c1d}.ui.inverted.labels a.secondary.label:hover,a.ui.ui.ui.inverted.secondary.label:hover{background-color:#6e6e6e;border-color:#6e6e6e;color:#1b1c1d}.ui.ui.ui.inverted.secondary.ribbon.label{border-color:#3b3b3b}.ui.inverted.basic.labels .secondary.label,.ui.ui.ui.inverted.basic.secondary.label{background-color:#1b1c1d;border-color:#545454;color:#545454}.ui.inverted.basic.labels a.secondary.label:hover,a.ui.ui.ui.inverted.basic.secondary.label:hover{border-color:#6e6e6e;background-color:#1b1c1d;color:#6e6e6e}.ui.inverted.basic.tag.labels .secondary.label,.ui.ui.ui.inverted.secondary.basic.tag.label{border:1px solid #545454}.ui.inverted.basic.tag.labels .secondary.label:before,.ui.ui.ui.inverted.secondary.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.red.labels .label,.ui.ui.ui.red.label{background-color:#db2828;border-color:#db2828;color:#fff}.ui.red.labels a.label:hover,a.ui.ui.ui.red.label:hover{background-color:#d01919;border-color:#d01919;color:#fff}.ui.ui.ui.red.ribbon.label{border-color:#b21e1e}.ui.basic.labels .red.label,.ui.ui.ui.basic.red.label{background:none #fff;border-color:#db2828;color:#db2828}.ui.basic.labels a.red.label:hover,a.ui.ui.ui.basic.red.label:hover{background:none #fff;border-color:#d01919;color:#d01919}.ui.inverted.labels .red.label,.ui.ui.ui.inverted.red.label{background-color:#ff695e;border-color:#ff695e;color:#1b1c1d}.ui.inverted.labels a.red.label:hover,a.ui.ui.ui.inverted.red.label:hover{background-color:#ff392b;border-color:#ff392b;color:#1b1c1d}.ui.ui.ui.inverted.red.ribbon.label{border-color:#ff392b}.ui.inverted.basic.labels .red.label,.ui.ui.ui.inverted.basic.red.label{background-color:#1b1c1d;border-color:#ff695e;color:#ff695e}.ui.inverted.basic.labels a.red.label:hover,a.ui.ui.ui.inverted.basic.red.label:hover{border-color:#ff392b;background-color:#1b1c1d;color:#ff392b}.ui.inverted.basic.tag.labels .red.label,.ui.ui.ui.inverted.red.basic.tag.label{border:1px solid #ff695e}.ui.inverted.basic.tag.labels .red.label:before,.ui.ui.ui.inverted.red.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.orange.labels .label,.ui.ui.ui.orange.label{background-color:#f2711c;border-color:#f2711c;color:#fff}.ui.orange.labels a.label:hover,a.ui.ui.ui.orange.label:hover{background-color:#f26202;border-color:#f26202;color:#fff}.ui.ui.ui.orange.ribbon.label{border-color:#cf590c}.ui.basic.labels .orange.label,.ui.ui.ui.basic.orange.label{background:none #fff;border-color:#f2711c;color:#f2711c}.ui.basic.labels a.orange.label:hover,a.ui.ui.ui.basic.orange.label:hover{background:none #fff;border-color:#f26202;color:#f26202}.ui.inverted.labels .orange.label,.ui.ui.ui.inverted.orange.label{background-color:#ff851b;border-color:#ff851b;color:#1b1c1d}.ui.inverted.labels a.orange.label:hover,a.ui.ui.ui.inverted.orange.label:hover{background-color:#e76b00;border-color:#e76b00;color:#1b1c1d}.ui.ui.ui.inverted.orange.ribbon.label{border-color:#e76b00}.ui.inverted.basic.labels .orange.label,.ui.ui.ui.inverted.basic.orange.label{background-color:#1b1c1d;border-color:#ff851b;color:#ff851b}.ui.inverted.basic.labels a.orange.label:hover,a.ui.ui.ui.inverted.basic.orange.label:hover{border-color:#e76b00;background-color:#1b1c1d;color:#e76b00}.ui.inverted.basic.tag.labels .orange.label,.ui.ui.ui.inverted.orange.basic.tag.label{border:1px solid #ff851b}.ui.inverted.basic.tag.labels .orange.label:before,.ui.ui.ui.inverted.orange.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.ui.ui.yellow.label,.ui.yellow.labels .label{background-color:#fbbd08;border-color:#fbbd08;color:#fff}.ui.yellow.labels a.label:hover,a.ui.ui.ui.yellow.label:hover{background-color:#eaae00;border-color:#eaae00;color:#fff}.ui.ui.ui.yellow.ribbon.label{border-color:#cd9903}.ui.basic.labels .yellow.label,.ui.ui.ui.basic.yellow.label{background:none #fff;border-color:#fbbd08;color:#fbbd08}.ui.basic.labels a.yellow.label:hover,a.ui.ui.ui.basic.yellow.label:hover{background:none #fff;border-color:#eaae00;color:#eaae00}.ui.inverted.labels .yellow.label,.ui.ui.ui.inverted.yellow.label{background-color:#ffe21f;border-color:#ffe21f;color:#1b1c1d}.ui.inverted.labels a.yellow.label:hover,a.ui.ui.ui.inverted.yellow.label:hover{background-color:#ebcd00;border-color:#ebcd00;color:#1b1c1d}.ui.ui.ui.inverted.yellow.ribbon.label{border-color:#ebcd00}.ui.inverted.basic.labels .yellow.label,.ui.ui.ui.inverted.basic.yellow.label{background-color:#1b1c1d;border-color:#ffe21f;color:#ffe21f}.ui.inverted.basic.labels a.yellow.label:hover,a.ui.ui.ui.inverted.basic.yellow.label:hover{border-color:#ebcd00;background-color:#1b1c1d;color:#ebcd00}.ui.inverted.basic.tag.labels .yellow.label,.ui.ui.ui.inverted.yellow.basic.tag.label{border:1px solid #ffe21f}.ui.inverted.basic.tag.labels .yellow.label:before,.ui.ui.ui.inverted.yellow.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.olive.labels .label,.ui.ui.ui.olive.label{background-color:#b5cc18;border-color:#b5cc18;color:#fff}.ui.olive.labels a.label:hover,a.ui.ui.ui.olive.label:hover{background-color:#a7bd0d;border-color:#a7bd0d;color:#fff}.ui.ui.ui.olive.ribbon.label{border-color:#8d9e13}.ui.basic.labels .olive.label,.ui.ui.ui.basic.olive.label{background:none #fff;border-color:#b5cc18;color:#b5cc18}.ui.basic.labels a.olive.label:hover,a.ui.ui.ui.basic.olive.label:hover{background:none #fff;border-color:#a7bd0d;color:#a7bd0d}.ui.inverted.labels .olive.label,.ui.ui.ui.inverted.olive.label{background-color:#d9e778;border-color:#d9e778;color:#1b1c1d}.ui.inverted.labels a.olive.label:hover,a.ui.ui.ui.inverted.olive.label:hover{background-color:#d2e745;border-color:#d2e745;color:#1b1c1d}.ui.ui.ui.inverted.olive.ribbon.label{border-color:#cddf4d}.ui.inverted.basic.labels .olive.label,.ui.ui.ui.inverted.basic.olive.label{background-color:#1b1c1d;border-color:#d9e778;color:#d9e778}.ui.inverted.basic.labels a.olive.label:hover,a.ui.ui.ui.inverted.basic.olive.label:hover{border-color:#d2e745;background-color:#1b1c1d;color:#d2e745}.ui.inverted.basic.tag.labels .olive.label,.ui.ui.ui.inverted.olive.basic.tag.label{border:1px solid #d9e778}.ui.inverted.basic.tag.labels .olive.label:before,.ui.ui.ui.inverted.olive.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.green.labels .label,.ui.ui.ui.green.label{background-color:#21ba45;border-color:#21ba45;color:#fff}.ui.green.labels a.label:hover,a.ui.ui.ui.green.label:hover{background-color:#16ab39;border-color:#16ab39;color:#fff}.ui.ui.ui.green.ribbon.label{border-color:#198f35}.ui.basic.labels .green.label,.ui.ui.ui.basic.green.label{background:none #fff;border-color:#21ba45;color:#21ba45}.ui.basic.labels a.green.label:hover,a.ui.ui.ui.basic.green.label:hover{background:none #fff;border-color:#16ab39;color:#16ab39}.ui.inverted.labels .green.label,.ui.ui.ui.inverted.green.label{background-color:#2ecc40;border-color:#2ecc40;color:#1b1c1d}.ui.inverted.labels a.green.label:hover,a.ui.ui.ui.inverted.green.label:hover{background-color:#1ea92e;border-color:#1ea92e;color:#1b1c1d}.ui.ui.ui.inverted.green.ribbon.label{border-color:#25a233}.ui.inverted.basic.labels .green.label,.ui.ui.ui.inverted.basic.green.label{background-color:#1b1c1d;border-color:#2ecc40;color:#2ecc40}.ui.inverted.basic.labels a.green.label:hover,a.ui.ui.ui.inverted.basic.green.label:hover{border-color:#1ea92e;background-color:#1b1c1d;color:#1ea92e}.ui.inverted.basic.tag.labels .green.label,.ui.ui.ui.inverted.green.basic.tag.label{border:1px solid #2ecc40}.ui.inverted.basic.tag.labels .green.label:before,.ui.ui.ui.inverted.green.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.teal.labels .label,.ui.ui.ui.teal.label{background-color:#00b5ad;border-color:#00b5ad;color:#fff}.ui.teal.labels a.label:hover,a.ui.ui.ui.teal.label:hover{background-color:#009c95;border-color:#009c95;color:#fff}.ui.ui.ui.teal.ribbon.label{border-color:#00827c}.ui.basic.labels .teal.label,.ui.ui.ui.basic.teal.label{background:none #fff;border-color:#00b5ad;color:#00b5ad}.ui.basic.labels a.teal.label:hover,a.ui.ui.ui.basic.teal.label:hover{background:none #fff;border-color:#009c95;color:#009c95}.ui.inverted.labels .teal.label,.ui.ui.ui.inverted.teal.label{background-color:#6dffff;border-color:#6dffff;color:#1b1c1d}.ui.inverted.labels a.teal.label:hover,a.ui.ui.ui.inverted.teal.label:hover{background-color:#3affff;border-color:#3affff;color:#1b1c1d}.ui.ui.ui.inverted.teal.ribbon.label{border-color:#3affff}.ui.inverted.basic.labels .teal.label,.ui.ui.ui.inverted.basic.teal.label{background-color:#1b1c1d;border-color:#6dffff;color:#6dffff}.ui.inverted.basic.labels a.teal.label:hover,a.ui.ui.ui.inverted.basic.teal.label:hover{border-color:#3affff;background-color:#1b1c1d;color:#3affff}.ui.inverted.basic.tag.labels .teal.label,.ui.ui.ui.inverted.teal.basic.tag.label{border:1px solid #6dffff}.ui.inverted.basic.tag.labels .teal.label:before,.ui.ui.ui.inverted.teal.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.blue.labels .label,.ui.ui.ui.blue.label{background-color:#2185d0;border-color:#2185d0;color:#fff}.ui.blue.labels a.label:hover,a.ui.ui.ui.blue.label:hover{background-color:#1678c2;border-color:#1678c2;color:#fff}.ui.ui.ui.blue.ribbon.label{border-color:#1a69a4}.ui.basic.labels .blue.label,.ui.ui.ui.basic.blue.label{background:none #fff;border-color:#2185d0;color:#2185d0}.ui.basic.labels a.blue.label:hover,a.ui.ui.ui.basic.blue.label:hover{background:none #fff;border-color:#1678c2;color:#1678c2}.ui.inverted.labels .blue.label,.ui.ui.ui.inverted.blue.label{background-color:#54c8ff;border-color:#54c8ff;color:#1b1c1d}.ui.inverted.labels a.blue.label:hover,a.ui.ui.ui.inverted.blue.label:hover{background-color:#21b8ff;border-color:#21b8ff;color:#1b1c1d}.ui.ui.ui.inverted.blue.ribbon.label{border-color:#21b8ff}.ui.inverted.basic.labels .blue.label,.ui.ui.ui.inverted.basic.blue.label{background-color:#1b1c1d;border-color:#54c8ff;color:#54c8ff}.ui.inverted.basic.labels a.blue.label:hover,a.ui.ui.ui.inverted.basic.blue.label:hover{border-color:#21b8ff;background-color:#1b1c1d;color:#21b8ff}.ui.inverted.basic.tag.labels .blue.label,.ui.ui.ui.inverted.blue.basic.tag.label{border:1px solid #54c8ff}.ui.inverted.basic.tag.labels .blue.label:before,.ui.ui.ui.inverted.blue.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.ui.ui.violet.label,.ui.violet.labels .label{background-color:#6435c9;border-color:#6435c9;color:#fff}.ui.violet.labels a.label:hover,a.ui.ui.ui.violet.label:hover{background-color:#5829bb;border-color:#5829bb;color:#fff}.ui.ui.ui.violet.ribbon.label{border-color:#502aa1}.ui.basic.labels .violet.label,.ui.ui.ui.basic.violet.label{background:none #fff;border-color:#6435c9;color:#6435c9}.ui.basic.labels a.violet.label:hover,a.ui.ui.ui.basic.violet.label:hover{background:none #fff;border-color:#5829bb;color:#5829bb}.ui.inverted.labels .violet.label,.ui.ui.ui.inverted.violet.label{background-color:#a291fb;border-color:#a291fb;color:#1b1c1d}.ui.inverted.labels a.violet.label:hover,a.ui.ui.ui.inverted.violet.label:hover{background-color:#745aff;border-color:#745aff;color:#1b1c1d}.ui.ui.ui.inverted.violet.ribbon.label{border-color:#7860f9}.ui.inverted.basic.labels .violet.label,.ui.ui.ui.inverted.basic.violet.label{background-color:#1b1c1d;border-color:#a291fb;color:#a291fb}.ui.inverted.basic.labels a.violet.label:hover,a.ui.ui.ui.inverted.basic.violet.label:hover{border-color:#745aff;background-color:#1b1c1d;color:#745aff}.ui.inverted.basic.tag.labels .violet.label,.ui.ui.ui.inverted.violet.basic.tag.label{border:1px solid #a291fb}.ui.inverted.basic.tag.labels .violet.label:before,.ui.ui.ui.inverted.violet.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.purple.labels .label,.ui.ui.ui.purple.label{background-color:#a333c8;border-color:#a333c8;color:#fff}.ui.purple.labels a.label:hover,a.ui.ui.ui.purple.label:hover{background-color:#9627ba;border-color:#9627ba;color:#fff}.ui.ui.ui.purple.ribbon.label{border-color:#82299f}.ui.basic.labels .purple.label,.ui.ui.ui.basic.purple.label{background:none #fff;border-color:#a333c8;color:#a333c8}.ui.basic.labels a.purple.label:hover,a.ui.ui.ui.basic.purple.label:hover{background:none #fff;border-color:#9627ba;color:#9627ba}.ui.inverted.labels .purple.label,.ui.ui.ui.inverted.purple.label{background-color:#dc73ff;border-color:#dc73ff;color:#1b1c1d}.ui.inverted.labels a.purple.label:hover,a.ui.ui.ui.inverted.purple.label:hover{background-color:#cf40ff;border-color:#cf40ff;color:#1b1c1d}.ui.ui.ui.inverted.purple.ribbon.label{border-color:#cf40ff}.ui.inverted.basic.labels .purple.label,.ui.ui.ui.inverted.basic.purple.label{background-color:#1b1c1d;border-color:#dc73ff;color:#dc73ff}.ui.inverted.basic.labels a.purple.label:hover,a.ui.ui.ui.inverted.basic.purple.label:hover{border-color:#cf40ff;background-color:#1b1c1d;color:#cf40ff}.ui.inverted.basic.tag.labels .purple.label,.ui.ui.ui.inverted.purple.basic.tag.label{border:1px solid #dc73ff}.ui.inverted.basic.tag.labels .purple.label:before,.ui.ui.ui.inverted.purple.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.pink.labels .label,.ui.ui.ui.pink.label{background-color:#e03997;border-color:#e03997;color:#fff}.ui.pink.labels a.label:hover,a.ui.ui.ui.pink.label:hover{background-color:#e61a8d;border-color:#e61a8d;color:#fff}.ui.ui.ui.pink.ribbon.label{border-color:#c71f7e}.ui.basic.labels .pink.label,.ui.ui.ui.basic.pink.label{background:none #fff;border-color:#e03997;color:#e03997}.ui.basic.labels a.pink.label:hover,a.ui.ui.ui.basic.pink.label:hover{background:none #fff;border-color:#e61a8d;color:#e61a8d}.ui.inverted.labels .pink.label,.ui.ui.ui.inverted.pink.label{background-color:#ff8edf;border-color:#ff8edf;color:#1b1c1d}.ui.inverted.labels a.pink.label:hover,a.ui.ui.ui.inverted.pink.label:hover{background-color:#ff5bd1;border-color:#ff5bd1;color:#1b1c1d}.ui.ui.ui.inverted.pink.ribbon.label{border-color:#ff5bd1}.ui.inverted.basic.labels .pink.label,.ui.ui.ui.inverted.basic.pink.label{background-color:#1b1c1d;border-color:#ff8edf;color:#ff8edf}.ui.inverted.basic.labels a.pink.label:hover,a.ui.ui.ui.inverted.basic.pink.label:hover{border-color:#ff5bd1;background-color:#1b1c1d;color:#ff5bd1}.ui.inverted.basic.tag.labels .pink.label,.ui.ui.ui.inverted.pink.basic.tag.label{border:1px solid #ff8edf}.ui.inverted.basic.tag.labels .pink.label:before,.ui.ui.ui.inverted.pink.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.brown.labels .label,.ui.ui.ui.brown.label{background-color:#a5673f;border-color:#a5673f;color:#fff}.ui.brown.labels a.label:hover,a.ui.ui.ui.brown.label:hover{background-color:#975b33;border-color:#975b33;color:#fff}.ui.ui.ui.brown.ribbon.label{border-color:#805031}.ui.basic.labels .brown.label,.ui.ui.ui.basic.brown.label{background:none #fff;border-color:#a5673f;color:#a5673f}.ui.basic.labels a.brown.label:hover,a.ui.ui.ui.basic.brown.label:hover{background:none #fff;border-color:#975b33;color:#975b33}.ui.inverted.labels .brown.label,.ui.ui.ui.inverted.brown.label{background-color:#d67c1c;border-color:#d67c1c;color:#1b1c1d}.ui.inverted.labels a.brown.label:hover,a.ui.ui.ui.inverted.brown.label:hover{background-color:#b0620f;border-color:#b0620f;color:#1b1c1d}.ui.ui.ui.inverted.brown.ribbon.label{border-color:#a96216}.ui.inverted.basic.labels .brown.label,.ui.ui.ui.inverted.basic.brown.label{background-color:#1b1c1d;border-color:#d67c1c;color:#d67c1c}.ui.inverted.basic.labels a.brown.label:hover,a.ui.ui.ui.inverted.basic.brown.label:hover{border-color:#b0620f;background-color:#1b1c1d;color:#b0620f}.ui.inverted.basic.tag.labels .brown.label,.ui.ui.ui.inverted.brown.basic.tag.label{border:1px solid #d67c1c}.ui.inverted.basic.tag.labels .brown.label:before,.ui.ui.ui.inverted.brown.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.grey.labels .label,.ui.ui.ui.grey.label{background-color:#767676;border-color:#767676;color:#fff}.ui.grey.labels a.label:hover,a.ui.ui.ui.grey.label:hover{background-color:#838383;border-color:#838383;color:#fff}.ui.ui.ui.grey.ribbon.label{border-color:#5d5d5d}.ui.basic.labels .grey.label,.ui.ui.ui.basic.grey.label{background:none #fff;border-color:#767676;color:#767676}.ui.basic.labels a.grey.label:hover,a.ui.ui.ui.basic.grey.label:hover{background:none #fff;border-color:#838383;color:#838383}.ui.inverted.labels .grey.label,.ui.ui.ui.inverted.grey.label{background-color:#dcddde;border-color:#dcddde;color:#1b1c1d}.ui.inverted.labels a.grey.label:hover,a.ui.ui.ui.inverted.grey.label:hover{background-color:#c2c4c5;border-color:#c2c4c5;color:#fff}.ui.ui.ui.inverted.grey.ribbon.label{border-color:#e9eaea}.ui.inverted.basic.labels .grey.label,.ui.ui.ui.inverted.basic.grey.label{background-color:#1b1c1d;border-color:#dcddde;color:rgba(255,255,255,.9)}.ui.inverted.basic.labels a.grey.label:hover,a.ui.ui.ui.inverted.basic.grey.label:hover{border-color:#c2c4c5;background-color:#1b1c1d}.ui.inverted.basic.tag.labels .grey.label,.ui.ui.ui.inverted.grey.basic.tag.label{border:1px solid #dcddde}.ui.inverted.basic.tag.labels .grey.label:before,.ui.ui.ui.inverted.grey.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.black.labels .label,.ui.ui.ui.black.label{background-color:#1b1c1d;border-color:#1b1c1d;color:#fff}.ui.black.labels a.label:hover,a.ui.ui.ui.black.label:hover{background-color:#27292a;border-color:#27292a;color:#fff}.ui.ui.ui.black.ribbon.label{border-color:#020203}.ui.basic.labels .black.label,.ui.ui.ui.basic.black.label{background:none #fff;border-color:#1b1c1d;color:#1b1c1d}.ui.basic.labels a.black.label:hover,a.ui.ui.ui.basic.black.label:hover{background:none #fff;border-color:#27292a;color:#27292a}.ui.inverted.labels .black.label,.ui.ui.ui.inverted.black.label{background-color:#545454;border-color:#545454;color:#1b1c1d}.ui.inverted.labels a.black.label:hover,a.ui.ui.ui.inverted.black.label:hover{background-color:#000;border-color:#000;color:#fff}.ui.ui.ui.inverted.black.ribbon.label{border-color:#616161}.ui.inverted.basic.labels .black.label,.ui.ui.ui.inverted.basic.black.label{background-color:#1b1c1d;border-color:#545454;color:rgba(255,255,255,.9)}.ui.inverted.basic.labels a.black.label:hover,a.ui.ui.ui.inverted.basic.black.label:hover{border-color:#000;background-color:#1b1c1d}.ui.inverted.basic.tag.labels .black.label,.ui.ui.ui.inverted.black.basic.tag.label{border:1px solid #545454}.ui.inverted.basic.tag.labels .black.label:before,.ui.ui.ui.inverted.black.basic.tag.label:before{border-color:inherit;border-width:1px 0 0 1px;border-style:inherit;background-color:#1b1c1d;right:calc(100% + 1px)}.ui.horizontal.label,.ui.horizontal.labels .label{margin:0 .5em 0 0;padding:.4em .833em;min-width:3em;text-align:center}.ui.circular.label,.ui.circular.labels .label{min-width:2em;min-height:2em;padding:.5em!important;line-height:1em;text-align:center;border-radius:500rem}.ui.empty.circular.label,.ui.empty.circular.labels .label{min-width:0;min-height:0;overflow:hidden;width:.5em;height:.5em;vertical-align:baseline}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{background-color:inherit;background-image:inherit;border-width:0;border-style:solid;border-color:inherit}.ui.pointing.label:before{position:absolute;content:'';-webkit-transform:rotate(45deg);transform:rotate(45deg);background-image:none;z-index:2;width:.6666em;height:.6666em;-webkit-transition:none;transition:none}.ui.pointing.label,.ui[class*="pointing above"].label{margin-top:1em}.ui.pointing.label:before,.ui[class*="pointing above"].label:before{border-width:1px 0 0 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:0;left:50%}.ui[class*="bottom pointing"].label,.ui[class*="pointing below"].label{margin-top:0;margin-bottom:1em}.ui[class*="bottom pointing"].label:before,.ui[class*="pointing below"].label:before{border-width:0 1px 1px 0;top:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:100%;left:50%}.ui[class*="left pointing"].label{margin-top:0;margin-left:.6666em}.ui[class*="left pointing"].label:before{border-width:0 0 1px 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);bottom:auto;right:auto;top:50%;left:0}.ui[class*="right pointing"].label{margin-top:0;margin-right:.6666em}.ui[class*="right pointing"].label:before{border-width:1px 1px 0 0;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);top:50%;right:0;bottom:auto;left:auto}.ui.basic.pointing.label:before,.ui.basic[class*="pointing above"].label:before{margin-top:-1px}.ui.basic[class*="bottom pointing"].label:before,.ui.basic[class*="pointing below"].label:before{bottom:auto;top:100%;margin-top:1px}.ui.basic[class*="left pointing"].label:before{top:50%;left:-1px}.ui.basic[class*="right pointing"].label:before{top:50%;right:-1px}.ui.floating.label{position:absolute;z-index:100;top:-1em;right:0;white-space:nowrap;-webkit-transform:translateX(50%);transform:translateX(50%)}.ui.right.aligned.floating.label{-webkit-transform:translateX(1.2em);transform:translateX(1.2em)}.ui.left.floating.label{left:0;right:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.left.aligned.floating.label{-webkit-transform:translateX(-1.2em);transform:translateX(-1.2em)}.ui.bottom.floating.label{top:auto;bottom:-1em}.ui.label,.ui.labels .label{font-size:.75rem}.ui.mini.label,.ui.mini.labels .label{font-size:.5625rem}.ui.tiny.label,.ui.tiny.labels .label{font-size:.625rem}.ui.small.label,.ui.small.labels .label{font-size:.6875rem}.ui.large.label,.ui.large.labels .label{font-size:1rem}.ui.big.label,.ui.big.labels .label{font-size:1.3125rem}.ui.huge.label,.ui.huge.labels .label{font-size:1.4375rem}.ui.massive.label,.ui.massive.labels .label{font-size:1.6875rem}
\ No newline at end of file
diff --git a/ui/dist/components/list.css b/ui/dist/components/list.css
index 4804a1ad98e..2f2d7d9d995 100644
--- a/ui/dist/components/list.css
+++ b/ui/dist/components/list.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - List
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - List
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -17,20 +17,20 @@ ul.ui.list,
ol.ui.list,
.ui.list {
list-style-type: none;
- margin: 1em 0em;
- padding: 0em 0em;
+ margin: 1em 0;
+ padding: 0 0;
}
ul.ui.list:first-child,
ol.ui.list:first-child,
.ui.list:first-child {
- margin-top: 0em;
- padding-top: 0em;
+ margin-top: 0;
+ padding-top: 0;
}
ul.ui.list:last-child,
ol.ui.list:last-child,
.ui.list:last-child {
- margin-bottom: 0em;
- padding-bottom: 0em;
+ margin-bottom: 0;
+ padding-bottom: 0;
}
@@ -48,12 +48,12 @@ ol.ui.list li,
table-layout: fixed;
list-style-type: none;
list-style-position: outside;
- padding: 0.1875em 0em;
+ padding: 0.1875em 0;
line-height: 1.125em;
}
ul.ui.list > li:first-child:after,
ol.ui.list > li:first-child:after,
-.ui.list > .list > .item,
+.ui.list > .list > .item:after,
.ui.list > .item:after {
content: '';
display: block;
@@ -65,29 +65,29 @@ ul.ui.list li:first-child,
ol.ui.list li:first-child,
.ui.list .list > .item:first-child,
.ui.list > .item:first-child {
- padding-top: 0em;
+ padding-top: 0;
}
ul.ui.list li:last-child,
ol.ui.list li:last-child,
.ui.list .list > .item:last-child,
.ui.list > .item:last-child {
- padding-bottom: 0em;
+ padding-bottom: 0;
}
/* Child List */
ul.ui.list ul,
ol.ui.list ol,
-.ui.list .list {
+.ui.list .list:not(.icon) {
clear: both;
- margin: 0em;
- padding: 0.75em 0em 0.25em 0.5em;
+ margin: 0;
+ padding: 0.75em 0 0.25em 0.5em;
}
/* Child Item */
ul.ui.list ul li,
ol.ui.list ol li,
.ui.list .list > .item {
- padding: 0.125em 0em;
+ padding: 0.125em 0;
line-height: inherit;
}
@@ -95,16 +95,21 @@ ol.ui.list ol li,
.ui.list .list > .item > i.icon,
.ui.list > .item > i.icon {
display: table-cell;
- margin: 0em;
- padding-top: 0em;
- padding-right: 0.25em;
- vertical-align: top;
+ min-width: 1.55em;
+ margin: 0;
+ padding-top: 0;
-webkit-transition: color 0.1s ease;
transition: color 0.1s ease;
}
+.ui.list .list > .item > i.icon:not(.loading),
+.ui.list > .item > i.icon:not(.loading) {
+ padding-right: 0.25em;
+ vertical-align: top;
+}
.ui.list .list > .item > i.icon:only-child,
.ui.list > .item > i.icon:only-child {
display: inline-block;
+ min-width: auto;
vertical-align: top;
}
@@ -113,7 +118,7 @@ ol.ui.list ol li,
.ui.list > .item > .image {
display: table-cell;
background-color: transparent;
- margin: 0em;
+ margin: 0;
vertical-align: top;
}
.ui.list .list > .item > .image:not(:only-child):not(img),
@@ -135,30 +140,37 @@ ol.ui.list ol li,
.ui.list .list > .item > .content,
.ui.list > .item > .content {
line-height: 1.125em;
+ color: rgba(0, 0, 0, 0.87);
}
.ui.list .list > .item > .image + .content,
.ui.list .list > .item > .icon + .content,
.ui.list > .item > .image + .content,
.ui.list > .item > .icon + .content {
display: table-cell;
- padding: 0em 0em 0em 0.5em;
+ width: 100%;
+ padding: 0 0 0 0.5em;
vertical-align: top;
}
+.ui.list .list > .item > .loading.icon + .content,
+.ui.list > .item > .loading.icon + .content {
+ padding-left: calc(0.25em + 0.5em);
+}
.ui.list .list > .item > img.image + .content,
.ui.list > .item > img.image + .content {
display: inline-block;
+ width: auto;
}
.ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list {
- margin-left: 0em;
- padding-left: 0em;
+ margin-left: 0;
+ padding-left: 0;
}
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
- margin: 0em;
+ margin: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.87);
@@ -189,8 +201,10 @@ ol.ui.list ol li,
}
/* Linked Item Icons */
-.ui.list .list > a.item i.icon,
-.ui.list > a.item i.icon {
+.ui.list .list > a.item > i.icons,
+.ui.list > a.item > i.icons,
+.ui.list .list > a.item > i.icon,
+.ui.list > a.item > i.icon {
color: rgba(0, 0, 0, 0.4);
}
@@ -200,8 +214,8 @@ ol.ui.list ol li,
cursor: pointer;
color: #4183C4 !important;
}
-.ui.list .list > .item a.header:hover,
-.ui.list > .item a.header:hover {
+.ui.list .list > .item > a.header:hover,
+.ui.list > .item > a.header:hover {
color: #1e70bf !important;
}
@@ -215,12 +229,12 @@ ol.ui.list ol li,
.ui.list .list > .item [class*="left floated"],
.ui.list > .item [class*="left floated"] {
float: left;
- margin: 0em 1em 0em 0em;
+ margin: 0 1em 0 0;
}
.ui.list .list > .item [class*="right floated"],
.ui.list > .item [class*="right floated"] {
float: right;
- margin: 0em 0em 0em 1em;
+ margin: 0 0 0 1em;
}
@@ -235,7 +249,7 @@ ol.ui.list ol li,
background-color: transparent;
list-style-type: none;
list-style-position: outside;
- padding: 0.1875em 0em;
+ padding: 0.1875em 0;
line-height: 1.125em;
}
.ui.menu .ui.list .list > .item:before,
@@ -245,11 +259,11 @@ ol.ui.list ol li,
}
.ui.menu .ui.list .list > .item:first-child,
.ui.menu .ui.list > .item:first-child {
- padding-top: 0em;
+ padding-top: 0;
}
.ui.menu .ui.list .list > .item:last-child,
.ui.menu .ui.list > .item:last-child {
- padding-bottom: 0em;
+ padding-bottom: 0;
}
@@ -259,25 +273,25 @@ ol.ui.list ol li,
/*-------------------
- Horizontal
---------------------*/
+ Horizontal
+ --------------------*/
.ui.horizontal.list {
display: inline-block;
- font-size: 0em;
+ font-size: 0;
}
.ui.horizontal.list > .item {
display: inline-block;
- margin-left: 1em;
+ margin-right: 1em;
font-size: 1rem;
}
-.ui.horizontal.list:not(.celled) > .item:first-child {
- margin-left: 0em !important;
- padding-left: 0em !important;
+.ui.horizontal.list:not(.celled) > .item:last-child {
+ margin-right: 0;
+ padding-right: 0;
}
-.ui.horizontal.list .list {
- padding-left: 0em;
- padding-bottom: 0em;
+.ui.horizontal.list .list:not(.icon) {
+ padding-left: 0;
+ padding-bottom: 0;
}
.ui.horizontal.list > .item > .image,
.ui.horizontal.list .list > .item > .image,
@@ -296,14 +310,20 @@ ol.ui.list ol li,
}
/* Horizontal List */
-.ui.horizontal.list > .item > i.icon {
- margin: 0em;
- padding: 0em 0.25em 0em 0em;
+.ui.horizontal.list > .item > i.icon,
+.ui.horizontal.list .item > i.icons > i.icon {
+ margin: 0;
+ padding: 0 0.25em 0 0;
}
+.ui.horizontal.list > .item > .image + .content,
.ui.horizontal.list > .item > .icon,
.ui.horizontal.list > .item > .icon + .content {
float: none;
display: inline-block;
+ width: auto;
+}
+.ui.horizontal.list > .item > .image {
+ display: inline-block;
}
@@ -313,8 +333,8 @@ ol.ui.list ol li,
/*-------------------
- Disabled
---------------------*/
+ Disabled
+ --------------------*/
.ui.list .list > .disabled.item,
.ui.list > .disabled.item {
@@ -330,8 +350,10 @@ ol.ui.list ol li,
Hover
--------------------*/
-.ui.list .list > a.item:hover .icon,
-.ui.list > a.item:hover .icon {
+.ui.list .list > a.item:hover > .icons,
+.ui.list > a.item:hover > .icons,
+.ui.list .list > a.item:hover > .icon,
+.ui.list > a.item:hover > .icon {
color: rgba(0, 0, 0, 0.87);
}
@@ -342,8 +364,8 @@ ol.ui.list ol li,
/*-------------------
- Inverted
---------------------*/
+ Inverted
+ --------------------*/
.ui.inverted.list .list > a.item > .icon,
.ui.inverted.list > a.item > .icon {
@@ -357,6 +379,10 @@ ol.ui.list ol li,
.ui.inverted.list > .item .description {
color: rgba(255, 255, 255, 0.7);
}
+.ui.inverted.list .list > .item > .content,
+.ui.inverted.list > .item > .content {
+ color: rgba(255, 255, 255, 0.7);
+}
/* Item Link */
.ui.inverted.list .list > a.item,
@@ -378,8 +404,8 @@ ol.ui.list ol li,
}
/*-------------------
- Aligned
---------------------*/
+ Aligned
+ --------------------*/
.ui.list[class*="top aligned"] .image,
.ui.list[class*="top aligned"] .content,
@@ -398,8 +424,8 @@ ol.ui.list ol li,
}
/*-------------------
- Link
---------------------*/
+ Link
+ --------------------*/
.ui.link.list .item,
.ui.link.list a.item,
@@ -441,15 +467,15 @@ ol.ui.list ol li,
}
/*-------------------
- Selection
---------------------*/
+ Selection
+ --------------------*/
.ui.selection.list .list > .item,
.ui.selection.list > .item {
cursor: pointer;
background: transparent;
padding: 0.5em 0.5em;
- margin: 0em;
+ margin: 0;
color: rgba(0, 0, 0, 0.4);
border-radius: 0.5em;
-webkit-transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease;
@@ -457,9 +483,9 @@ ol.ui.list ol li,
}
.ui.selection.list .list > .item:last-child,
.ui.selection.list > .item:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
-.ui.selection.list.list > .item:hover,
+.ui.selection.list .list > .item:hover,
.ui.selection.list > .item:hover {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.8);
@@ -476,22 +502,18 @@ ol.ui.list ol li,
}
/* Inverted */
-.ui.inverted.selection.list > .item,
.ui.inverted.selection.list > .item {
background: transparent;
color: rgba(255, 255, 255, 0.5);
}
-.ui.inverted.selection.list > .item:hover,
.ui.inverted.selection.list > .item:hover {
background: rgba(255, 255, 255, 0.02);
color: #ffffff;
}
-.ui.inverted.selection.list > .item:active,
.ui.inverted.selection.list > .item:active {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
-.ui.inverted.selection.list > .item.active,
.ui.inverted.selection.list > .item.active {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
@@ -502,12 +524,12 @@ ol.ui.list ol li,
.ui.divided.selection.list .list > .item,
.ui.celled.selection.list > .item,
.ui.divided.selection.list > .item {
- border-radius: 0em;
+ border-radius: 0;
}
/*-------------------
- Animated
---------------------*/
+ Animated
+ --------------------*/
.ui.animated.list > .item {
-webkit-transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s;
@@ -518,13 +540,13 @@ ol.ui.list ol li,
}
/*-------------------
- Fitted
---------------------*/
+ Fitted
+ --------------------*/
.ui.fitted.list:not(.selection) .list > .item,
.ui.fitted.list:not(.selection) > .item {
- padding-left: 0em;
- padding-right: 0em;
+ padding-left: 0;
+ padding-right: 0;
}
.ui.fitted.selection.list .list > .item,
.ui.fitted.selection.list > .item {
@@ -533,8 +555,8 @@ ol.ui.list ol li,
}
/*-------------------
- Bulleted
---------------------*/
+ Bulleted
+ --------------------*/
ul.ui.list,
.ui.bulleted.list {
@@ -558,7 +580,7 @@ ul.ui.list li:before,
left: auto;
font-weight: normal;
margin-left: -1.25rem;
- content: '•';
+ content: '\2022';
opacity: 1;
color: inherit;
vertical-align: top;
@@ -569,14 +591,14 @@ ul.ui.list li:before,
color: rgba(0, 0, 0, 0.87);
}
ul.ui.list ul,
-.ui.bulleted.list .list {
+.ui.bulleted.list .list:not(.icon) {
padding-left: 1.25rem;
}
/* Horizontal Bulleted */
ul.ui.horizontal.bulleted.list,
.ui.horizontal.bulleted.list {
- margin-left: 0em;
+ margin-left: 0;
}
ul.ui.horizontal.bulleted.list li,
.ui.horizontal.bulleted.list > .item {
@@ -584,7 +606,7 @@ ul.ui.horizontal.bulleted.list li,
}
ul.ui.horizontal.bulleted.list li:first-child,
.ui.horizontal.bulleted.list > .item:first-child {
- margin-left: 0em;
+ margin-left: 0;
}
ul.ui.horizontal.bulleted.list li::before,
.ui.horizontal.bulleted.list > .item::before {
@@ -596,12 +618,12 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
}
/*-------------------
- Ordered
---------------------*/
+ Ordered
+ --------------------*/
ol.ui.list,
.ui.ordered.list,
-.ui.ordered.list .list,
+.ui.ordered.list .list:not(.icon),
ol.ui.list ol {
counter-reset: ordered;
margin-left: 1.25rem;
@@ -639,8 +661,8 @@ ol.ui.inverted.list li:before,
}
/* Value */
-.ui.ordered.list > .list > .item[data-value],
-.ui.ordered.list > .item[data-value] {
+.ui.ordered.list .list > .item[data-value]:before,
+.ui.ordered.list > .item[data-value]:before {
content: attr(data-value);
}
ol.ui.list li[value]:before {
@@ -649,7 +671,7 @@ ol.ui.list li[value]:before {
/* Child Lists */
ol.ui.list ol,
-.ui.ordered.list .list {
+.ui.ordered.list .list:not(.icon) {
margin-left: 1em;
}
ol.ui.list ol li:before,
@@ -660,18 +682,25 @@ ol.ui.list ol li:before,
/* Horizontal Ordered */
ol.ui.horizontal.list,
.ui.ordered.horizontal.list {
- margin-left: 0em;
+ margin-left: 0;
}
ol.ui.horizontal.list li:before,
.ui.ordered.horizontal.list .list > .item:before,
.ui.ordered.horizontal.list > .item:before {
position: static;
- margin: 0em 0.5em 0em 0em;
+ margin: 0 0.5em 0 0;
+}
+
+/* Suffixed Ordered */
+ol.ui.suffixed.list li:before,
+.ui.suffixed.ordered.list .list > .item:before,
+.ui.suffixed.ordered.list > .item:before {
+ content: counters(ordered, ".") ".";
}
/*-------------------
- Divided
---------------------*/
+ Divided
+ --------------------*/
.ui.divided.list > .item {
border-top: 1px solid rgba(34, 36, 38, 0.15);
@@ -694,9 +723,9 @@ ol.ui.horizontal.list li:before,
/* Divided bulleted */
.ui.divided.bulleted.list:not(.horizontal),
-.ui.divided.bulleted.list .list {
- margin-left: 0em;
- padding-left: 0em;
+.ui.divided.bulleted.list .list:not(.icon) {
+ margin-left: 0;
+ padding-left: 0;
}
.ui.divided.bulleted.list > .item:not(.horizontal) {
padding-left: 1.25rem;
@@ -704,15 +733,15 @@ ol.ui.horizontal.list li:before,
/* Divided Ordered */
.ui.divided.ordered.list {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.divided.ordered.list .list > .item,
.ui.divided.ordered.list > .item {
padding-left: 1.25rem;
}
-.ui.divided.ordered.list .item .list {
- margin-left: 0em;
- margin-right: 0em;
+.ui.divided.ordered.list .item .list:not(.icon) {
+ margin-left: 0;
+ margin-right: 0;
padding-bottom: 0.1875em;
}
.ui.divided.ordered.list .item .list > .item {
@@ -722,15 +751,15 @@ ol.ui.horizontal.list li:before,
/* Divided Selection */
.ui.divided.selection.list .list > .item,
.ui.divided.selection.list > .item {
- margin: 0em;
- border-radius: 0em;
+ margin: 0;
+ border-radius: 0;
}
/* Divided horizontal */
.ui.divided.horizontal.list {
- margin-left: 0em;
+ margin-left: 0;
}
-.ui.divided.horizontal.list > .item:not(:first-child) {
+.ui.divided.horizontal.list > .item {
padding-left: 0.5em;
}
.ui.divided.horizontal.list > .item:not(:last-child) {
@@ -738,12 +767,12 @@ ol.ui.horizontal.list li:before,
}
.ui.divided.horizontal.list > .item {
border-top: none;
- border-left: 1px solid rgba(34, 36, 38, 0.15);
- margin: 0em;
+ border-right: 1px solid rgba(34, 36, 38, 0.15);
+ margin: 0;
line-height: 0.6;
}
-.ui.horizontal.divided.list > .item:first-child {
- border-left: none;
+.ui.horizontal.divided.list > .item:last-child {
+ border-right: none;
}
/* Inverted */
@@ -754,8 +783,8 @@ ol.ui.horizontal.list li:before,
}
/*-------------------
- Celled
---------------------*/
+ Celled
+ --------------------*/
.ui.celled.list > .item,
.ui.celled.list > .list {
@@ -776,21 +805,21 @@ ol.ui.horizontal.list li:before,
/* Sub Menu */
.ui.celled.list .item .list > .item {
- border-width: 0px;
+ border-width: 0;
}
.ui.celled.list .list > .item:first-child {
- border-top-width: 0px;
+ border-top-width: 0;
}
/* Celled Bulleted */
.ui.celled.bulleted.list {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.celled.bulleted.list .list > .item,
.ui.celled.bulleted.list > .item {
padding-left: 1.25rem;
}
-.ui.celled.bulleted.list .item .list {
+.ui.celled.bulleted.list .item .list:not(.icon) {
margin-left: -1.25rem;
margin-right: -1.25rem;
padding-bottom: 0.1875em;
@@ -798,15 +827,15 @@ ol.ui.horizontal.list li:before,
/* Celled Ordered */
.ui.celled.ordered.list {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.celled.ordered.list .list > .item,
.ui.celled.ordered.list > .item {
padding-left: 1.25rem;
}
-.ui.celled.ordered.list .item .list {
- margin-left: 0em;
- margin-right: 0em;
+.ui.celled.ordered.list .item .list:not(.icon) {
+ margin-left: 0;
+ margin-right: 0;
padding-bottom: 0.1875em;
}
.ui.celled.ordered.list .list > .item {
@@ -815,13 +844,13 @@ ol.ui.horizontal.list li:before,
/* Celled Horizontal */
.ui.horizontal.celled.list {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.horizontal.celled.list .list > .item,
.ui.horizontal.celled.list > .item {
border-top: none;
border-left: 1px solid rgba(34, 36, 38, 0.15);
- margin: 0em;
+ margin: 0;
padding-left: 0.5em;
padding-right: 0.5em;
line-height: 0.6;
@@ -835,16 +864,16 @@ ol.ui.horizontal.list li:before,
/* Inverted */
.ui.celled.inverted.list > .item,
.ui.celled.inverted.list > .list {
- border-color: 1px solid rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.1);
}
.ui.celled.inverted.horizontal.list .list > .item,
.ui.celled.inverted.horizontal.list > .item {
- border-color: 1px solid rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.1);
}
/*-------------------
- Relaxed
---------------------*/
+ Relaxed
+ --------------------*/
.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
padding-top: 0.375em;
@@ -881,58 +910,54 @@ ol.ui.horizontal.list li:before,
Sizes
--------------------*/
-.ui.mini.list {
- font-size: 0.8125em;
-}
-.ui.tiny.list {
- font-size: 0.875em;
-}
-.ui.small.list {
- font-size: 0.9375em;
-}
.ui.list {
font-size: 1em;
}
-.ui.large.list {
- font-size: 1.125em;
-}
-.ui.big.list {
- font-size: 1.3125em;
-}
-.ui.huge.list {
- font-size: 1.4375em;
-}
-.ui.massive.list {
- font-size: 1.6875em;
+.ui.mini.list {
+ font-size: 0.8125em;
}
.ui.mini.horizontal.list .list > .item,
.ui.mini.horizontal.list > .item {
font-size: 0.8125rem;
}
+.ui.tiny.list {
+ font-size: 0.875em;
+}
.ui.tiny.horizontal.list .list > .item,
.ui.tiny.horizontal.list > .item {
font-size: 0.875rem;
}
+.ui.small.list {
+ font-size: 0.9375em;
+}
.ui.small.horizontal.list .list > .item,
.ui.small.horizontal.list > .item {
font-size: 0.9375rem;
}
-.ui.horizontal.list .list > .item,
-.ui.horizontal.list > .item {
- font-size: 1rem;
+.ui.large.list {
+ font-size: 1.125em;
}
.ui.large.horizontal.list .list > .item,
.ui.large.horizontal.list > .item {
font-size: 1.125rem;
}
+.ui.big.list {
+ font-size: 1.3125em;
+}
.ui.big.horizontal.list .list > .item,
.ui.big.horizontal.list > .item {
font-size: 1.3125rem;
}
+.ui.huge.list {
+ font-size: 1.4375em;
+}
.ui.huge.horizontal.list .list > .item,
.ui.huge.horizontal.list > .item {
font-size: 1.4375rem;
}
+.ui.massive.list {
+ font-size: 1.6875em;
+}
.ui.massive.horizontal.list .list > .item,
.ui.massive.horizontal.list > .item {
font-size: 1.6875rem;
diff --git a/ui/dist/components/list.min.css b/ui/dist/components/list.min.css
index ac6ee6e4f93..d10fb567b64 100644
--- a/ui/dist/components/list.min.css
+++ b/ui/dist/components/list.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - List
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - List
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.list,ol.ui.list,ul.ui.list{list-style-type:none;margin:1em 0;padding:0 0}.ui.list:first-child,ol.ui.list:first-child,ul.ui.list:first-child{margin-top:0;padding-top:0}.ui.list:last-child,ol.ui.list:last-child,ul.ui.list:last-child{margin-bottom:0;padding-bottom:0}.ui.list .list>.item,.ui.list>.item,ol.ui.list li,ul.ui.list li{display:list-item;table-layout:fixed;list-style-type:none;list-style-position:outside;padding:.1875em 0;line-height:1.125em}.ui.list>.item:after,.ui.list>.list>.item,ol.ui.list>li:first-child:after,ul.ui.list>li:first-child:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.list .list>.item:first-child,.ui.list>.item:first-child,ol.ui.list li:first-child,ul.ui.list li:first-child{padding-top:0}.ui.list .list>.item:last-child,.ui.list>.item:last-child,ol.ui.list li:last-child,ul.ui.list li:last-child{padding-bottom:0}.ui.list .list,ol.ui.list ol,ul.ui.list ul{clear:both;margin:0;padding:.75em 0 .25em .5em}.ui.list .list>.item,ol.ui.list ol li,ul.ui.list ul li{padding:.125em 0;line-height:inherit}.ui.list .list>.item>i.icon,.ui.list>.item>i.icon{display:table-cell;margin:0;padding-top:0;padding-right:.25em;vertical-align:top;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.list .list>.item>i.icon:only-child,.ui.list>.item>i.icon:only-child{display:inline-block;vertical-align:top}.ui.list .list>.item>.image,.ui.list>.item>.image{display:table-cell;background-color:transparent;margin:0;vertical-align:top}.ui.list .list>.item>.image:not(:only-child):not(img),.ui.list>.item>.image:not(:only-child):not(img){padding-right:.5em}.ui.list .list>.item>.image img,.ui.list>.item>.image img{vertical-align:top}.ui.list .list>.item>.image:only-child,.ui.list .list>.item>img.image,.ui.list>.item>.image:only-child,.ui.list>.item>img.image{display:inline-block}.ui.list .list>.item>.content,.ui.list>.item>.content{line-height:1.125em}.ui.list .list>.item>.icon+.content,.ui.list .list>.item>.image+.content,.ui.list>.item>.icon+.content,.ui.list>.item>.image+.content{display:table-cell;padding:0 0 0 .5em;vertical-align:top}.ui.list .list>.item>img.image+.content,.ui.list>.item>img.image+.content{display:inline-block}.ui.list .list>.item>.content>.list,.ui.list>.item>.content>.list{margin-left:0;padding-left:0}.ui.list .list>.item .header,.ui.list>.item .header{display:block;margin:0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.87)}.ui.list .list>.item .description,.ui.list>.item .description{display:block;color:rgba(0,0,0,.7)}.ui.list .list>.item a,.ui.list>.item a{cursor:pointer}.ui.list .list>a.item,.ui.list>a.item{cursor:pointer;color:#4183c4}.ui.list .list>a.item:hover,.ui.list>a.item:hover{color:#1e70bf}.ui.list .list>a.item i.icon,.ui.list>a.item i.icon{color:rgba(0,0,0,.4)}.ui.list .list>.item a.header,.ui.list>.item a.header{cursor:pointer;color:#4183c4!important}.ui.list .list>.item a.header:hover,.ui.list>.item a.header:hover{color:#1e70bf!important}.ui[class*="left floated"].list{float:left}.ui[class*="right floated"].list{float:right}.ui.list .list>.item [class*="left floated"],.ui.list>.item [class*="left floated"]{float:left;margin:0 1em 0 0}.ui.list .list>.item [class*="right floated"],.ui.list>.item [class*="right floated"]{float:right;margin:0 0 0 1em}.ui.menu .ui.list .list>.item,.ui.menu .ui.list>.item{display:list-item;table-layout:fixed;background-color:transparent;list-style-type:none;list-style-position:outside;padding:.1875em 0;line-height:1.125em}.ui.menu .ui.list .list>.item:before,.ui.menu .ui.list>.item:before{border:none;background:0 0}.ui.menu .ui.list .list>.item:first-child,.ui.menu .ui.list>.item:first-child{padding-top:0}.ui.menu .ui.list .list>.item:last-child,.ui.menu .ui.list>.item:last-child{padding-bottom:0}.ui.horizontal.list{display:inline-block;font-size:0}.ui.horizontal.list>.item{display:inline-block;margin-left:1em;font-size:1rem}.ui.horizontal.list:not(.celled)>.item:first-child{margin-left:0!important;padding-left:0!important}.ui.horizontal.list .list{padding-left:0;padding-bottom:0}.ui.horizontal.list .list>.item>.content,.ui.horizontal.list .list>.item>.icon,.ui.horizontal.list .list>.item>.image,.ui.horizontal.list>.item>.content,.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.image{vertical-align:middle}.ui.horizontal.list>.item:first-child,.ui.horizontal.list>.item:last-child{padding-top:.1875em;padding-bottom:.1875em}.ui.horizontal.list>.item>i.icon{margin:0;padding:0 .25em 0 0}.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.icon+.content{float:none;display:inline-block}.ui.list .list>.disabled.item,.ui.list>.disabled.item{pointer-events:none;color:rgba(40,40,40,.3)!important}.ui.inverted.list .list>.disabled.item,.ui.inverted.list>.disabled.item{color:rgba(225,225,225,.3)!important}.ui.list .list>a.item:hover .icon,.ui.list>a.item:hover .icon{color:rgba(0,0,0,.87)}.ui.inverted.list .list>a.item>.icon,.ui.inverted.list>a.item>.icon{color:rgba(255,255,255,.7)}.ui.inverted.list .list>.item .header,.ui.inverted.list>.item .header{color:rgba(255,255,255,.9)}.ui.inverted.list .list>.item .description,.ui.inverted.list>.item .description{color:rgba(255,255,255,.7)}.ui.inverted.list .list>a.item,.ui.inverted.list>a.item{cursor:pointer;color:rgba(255,255,255,.9)}.ui.inverted.list .list>a.item:hover,.ui.inverted.list>a.item:hover{color:#1e70bf}.ui.inverted.list .item a:not(.ui){color:rgba(255,255,255,.9)!important}.ui.inverted.list .item a:not(.ui):hover{color:#1e70bf!important}.ui.list [class*="top aligned"],.ui.list[class*="top aligned"] .content,.ui.list[class*="top aligned"] .image{vertical-align:top!important}.ui.list [class*="middle aligned"],.ui.list[class*="middle aligned"] .content,.ui.list[class*="middle aligned"] .image{vertical-align:middle!important}.ui.list [class*="bottom aligned"],.ui.list[class*="bottom aligned"] .content,.ui.list[class*="bottom aligned"] .image{vertical-align:bottom!important}.ui.link.list .item,.ui.link.list .item a:not(.ui),.ui.link.list a.item{color:rgba(0,0,0,.4);-webkit-transition:.1s color ease;transition:.1s color ease}.ui.link.list.list .item a:not(.ui):hover,.ui.link.list.list a.item:hover{color:rgba(0,0,0,.8)}.ui.link.list.list .item a:not(.ui):active,.ui.link.list.list a.item:active{color:rgba(0,0,0,.9)}.ui.link.list.list .active.item,.ui.link.list.list .active.item a:not(.ui){color:rgba(0,0,0,.95)}.ui.inverted.link.list .item,.ui.inverted.link.list .item a:not(.ui),.ui.inverted.link.list a.item{color:rgba(255,255,255,.5)}.ui.inverted.link.list.list .item a:not(.ui):hover,.ui.inverted.link.list.list a.item:hover{color:#fff}.ui.inverted.link.list.list .item a:not(.ui):active,.ui.inverted.link.list.list a.item:active{color:#fff}.ui.inverted.link.list.list .active.item a:not(.ui),.ui.inverted.link.list.list a.active.item{color:#fff}.ui.selection.list .list>.item,.ui.selection.list>.item{cursor:pointer;background:0 0;padding:.5em .5em;margin:0;color:rgba(0,0,0,.4);border-radius:.5em;-webkit-transition:.1s color ease,.1s padding-left ease,.1s background-color ease;transition:.1s color ease,.1s padding-left ease,.1s background-color ease}.ui.selection.list .list>.item:last-child,.ui.selection.list>.item:last-child{margin-bottom:0}.ui.selection.list.list>.item:hover,.ui.selection.list>.item:hover{background:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.selection.list .list>.item:active,.ui.selection.list>.item:active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.9)}.ui.selection.list .list>.item.active,.ui.selection.list>.item.active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.selection.list>.item{background:0 0;color:rgba(255,255,255,.5)}.ui.inverted.selection.list>.item:hover{background:rgba(255,255,255,.02);color:#fff}.ui.inverted.selection.list>.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.selection.list>.item.active{background:rgba(255,255,255,.08);color:#fff}.ui.celled.selection.list .list>.item,.ui.celled.selection.list>.item,.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{border-radius:0}.ui.animated.list>.item{-webkit-transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s;transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s}.ui.animated.list:not(.horizontal)>.item:hover{padding-left:1em}.ui.fitted.list:not(.selection) .list>.item,.ui.fitted.list:not(.selection)>.item{padding-left:0;padding-right:0}.ui.fitted.selection.list .list>.item,.ui.fitted.selection.list>.item{margin-left:-.5em;margin-right:-.5em}.ui.bulleted.list,ul.ui.list{margin-left:1.25rem}.ui.bulleted.list .list>.item,.ui.bulleted.list>.item,ul.ui.list li{position:relative}.ui.bulleted.list .list>.item:before,.ui.bulleted.list>.item:before,ul.ui.list li:before{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;top:auto;left:auto;font-weight:400;margin-left:-1.25rem;content:'•';opacity:1;color:inherit;vertical-align:top}.ui.bulleted.list .list>a.item:before,.ui.bulleted.list>a.item:before,ul.ui.list li:before{color:rgba(0,0,0,.87)}.ui.bulleted.list .list,ul.ui.list ul{padding-left:1.25rem}.ui.horizontal.bulleted.list,ul.ui.horizontal.bulleted.list{margin-left:0}.ui.horizontal.bulleted.list>.item,ul.ui.horizontal.bulleted.list li{margin-left:1.75rem}.ui.horizontal.bulleted.list>.item:first-child,ul.ui.horizontal.bulleted.list li:first-child{margin-left:0}.ui.horizontal.bulleted.list>.item::before,ul.ui.horizontal.bulleted.list li::before{color:rgba(0,0,0,.87)}.ui.horizontal.bulleted.list>.item:first-child::before,ul.ui.horizontal.bulleted.list li:first-child::before{display:none}.ui.ordered.list,.ui.ordered.list .list,ol.ui.list,ol.ui.list ol{counter-reset:ordered;margin-left:1.25rem;list-style-type:none}.ui.ordered.list .list>.item,.ui.ordered.list>.item,ol.ui.list li{list-style-type:none;position:relative}.ui.ordered.list .list>.item:before,.ui.ordered.list>.item:before,ol.ui.list li:before{position:absolute;top:auto;left:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;margin-left:-1.25rem;counter-increment:ordered;content:counters(ordered, ".") " ";text-align:right;color:rgba(0,0,0,.87);vertical-align:middle;opacity:.8}.ui.ordered.inverted.list .list>.item:before,.ui.ordered.inverted.list>.item:before,ol.ui.inverted.list li:before{color:rgba(255,255,255,.7)}.ui.ordered.list>.item[data-value],.ui.ordered.list>.list>.item[data-value]{content:attr(data-value)}ol.ui.list li[value]:before{content:attr(value)}.ui.ordered.list .list,ol.ui.list ol{margin-left:1em}.ui.ordered.list .list>.item:before,ol.ui.list ol li:before{margin-left:-2em}.ui.ordered.horizontal.list,ol.ui.horizontal.list{margin-left:0}.ui.ordered.horizontal.list .list>.item:before,.ui.ordered.horizontal.list>.item:before,ol.ui.horizontal.list li:before{position:static;margin:0 .5em 0 0}.ui.divided.list>.item{border-top:1px solid rgba(34,36,38,.15)}.ui.divided.list .list>.item{border-top:none}.ui.divided.list .item .list>.item{border-top:none}.ui.divided.list .list>.item:first-child,.ui.divided.list>.item:first-child{border-top:none}.ui.divided.list:not(.horizontal) .list>.item:first-child{border-top-width:1px}.ui.divided.bulleted.list .list,.ui.divided.bulleted.list:not(.horizontal){margin-left:0;padding-left:0}.ui.divided.bulleted.list>.item:not(.horizontal){padding-left:1.25rem}.ui.divided.ordered.list{margin-left:0}.ui.divided.ordered.list .list>.item,.ui.divided.ordered.list>.item{padding-left:1.25rem}.ui.divided.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.1875em}.ui.divided.ordered.list .item .list>.item{padding-left:1em}.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{margin:0;border-radius:0}.ui.divided.horizontal.list{margin-left:0}.ui.divided.horizontal.list>.item:not(:first-child){padding-left:.5em}.ui.divided.horizontal.list>.item:not(:last-child){padding-right:.5em}.ui.divided.horizontal.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;line-height:.6}.ui.horizontal.divided.list>.item:first-child{border-left:none}.ui.divided.inverted.horizontal.list>.item,.ui.divided.inverted.list>.item,.ui.divided.inverted.list>.list{border-color:rgba(255,255,255,.1)}.ui.celled.list>.item,.ui.celled.list>.list{border-top:1px solid rgba(34,36,38,.15);padding-left:.5em;padding-right:.5em}.ui.celled.list>.item:last-child{border-bottom:1px solid rgba(34,36,38,.15)}.ui.celled.list>.item:first-child,.ui.celled.list>.item:last-child{padding-top:.1875em;padding-bottom:.1875em}.ui.celled.list .item .list>.item{border-width:0}.ui.celled.list .list>.item:first-child{border-top-width:0}.ui.celled.bulleted.list{margin-left:0}.ui.celled.bulleted.list .list>.item,.ui.celled.bulleted.list>.item{padding-left:1.25rem}.ui.celled.bulleted.list .item .list{margin-left:-1.25rem;margin-right:-1.25rem;padding-bottom:.1875em}.ui.celled.ordered.list{margin-left:0}.ui.celled.ordered.list .list>.item,.ui.celled.ordered.list>.item{padding-left:1.25rem}.ui.celled.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.1875em}.ui.celled.ordered.list .list>.item{padding-left:1em}.ui.horizontal.celled.list{margin-left:0}.ui.horizontal.celled.list .list>.item,.ui.horizontal.celled.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;padding-left:.5em;padding-right:.5em;line-height:.6}.ui.horizontal.celled.list .list>.item:last-child,.ui.horizontal.celled.list>.item:last-child{border-bottom:none;border-right:1px solid rgba(34,36,38,.15)}.ui.celled.inverted.list>.item,.ui.celled.inverted.list>.list{border-color:1px solid rgba(255,255,255,.1)}.ui.celled.inverted.horizontal.list .list>.item,.ui.celled.inverted.horizontal.list>.item{border-color:1px solid rgba(255,255,255,.1)}.ui.relaxed.list:not(.horizontal)>.item:not(:first-child){padding-top:.375em}.ui.relaxed.list:not(.horizontal)>.item:not(:last-child){padding-bottom:.375em}.ui.horizontal.relaxed.list .list>.item:not(:first-child),.ui.horizontal.relaxed.list>.item:not(:first-child){padding-left:1rem}.ui.horizontal.relaxed.list .list>.item:not(:last-child),.ui.horizontal.relaxed.list>.item:not(:last-child){padding-right:1rem}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:first-child){padding-top:.75em}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:last-child){padding-bottom:.75em}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:first-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:first-child){padding-left:1.5rem}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:last-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:last-child){padding-right:1.5rem}.ui.mini.list{font-size:.8125em}.ui.tiny.list{font-size:.875em}.ui.small.list{font-size:.9375em}.ui.list{font-size:1em}.ui.large.list{font-size:1.125em}.ui.big.list{font-size:1.3125em}.ui.huge.list{font-size:1.4375em}.ui.massive.list{font-size:1.6875em}.ui.mini.horizontal.list .list>.item,.ui.mini.horizontal.list>.item{font-size:.8125rem}.ui.tiny.horizontal.list .list>.item,.ui.tiny.horizontal.list>.item{font-size:.875rem}.ui.small.horizontal.list .list>.item,.ui.small.horizontal.list>.item{font-size:.9375rem}.ui.horizontal.list .list>.item,.ui.horizontal.list>.item{font-size:1rem}.ui.large.horizontal.list .list>.item,.ui.large.horizontal.list>.item{font-size:1.125rem}.ui.big.horizontal.list .list>.item,.ui.big.horizontal.list>.item{font-size:1.3125rem}.ui.huge.horizontal.list .list>.item,.ui.huge.horizontal.list>.item{font-size:1.4375rem}.ui.massive.horizontal.list .list>.item,.ui.massive.horizontal.list>.item{font-size:1.6875rem}
\ No newline at end of file
+ */.ui.list,ol.ui.list,ul.ui.list{list-style-type:none;margin:1em 0;padding:0 0}.ui.list:first-child,ol.ui.list:first-child,ul.ui.list:first-child{margin-top:0;padding-top:0}.ui.list:last-child,ol.ui.list:last-child,ul.ui.list:last-child{margin-bottom:0;padding-bottom:0}.ui.list .list>.item,.ui.list>.item,ol.ui.list li,ul.ui.list li{display:list-item;table-layout:fixed;list-style-type:none;list-style-position:outside;padding:.1875em 0;line-height:1.125em}.ui.list>.item:after,.ui.list>.list>.item:after,ol.ui.list>li:first-child:after,ul.ui.list>li:first-child:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.list .list>.item:first-child,.ui.list>.item:first-child,ol.ui.list li:first-child,ul.ui.list li:first-child{padding-top:0}.ui.list .list>.item:last-child,.ui.list>.item:last-child,ol.ui.list li:last-child,ul.ui.list li:last-child{padding-bottom:0}.ui.list .list:not(.icon),ol.ui.list ol,ul.ui.list ul{clear:both;margin:0;padding:.75em 0 .25em .5em}.ui.list .list>.item,ol.ui.list ol li,ul.ui.list ul li{padding:.125em 0;line-height:inherit}.ui.list .list>.item>i.icon,.ui.list>.item>i.icon{display:table-cell;min-width:1.55em;margin:0;padding-top:0;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.list .list>.item>i.icon:not(.loading),.ui.list>.item>i.icon:not(.loading){padding-right:.25em;vertical-align:top}.ui.list .list>.item>i.icon:only-child,.ui.list>.item>i.icon:only-child{display:inline-block;min-width:auto;vertical-align:top}.ui.list .list>.item>.image,.ui.list>.item>.image{display:table-cell;background-color:transparent;margin:0;vertical-align:top}.ui.list .list>.item>.image:not(:only-child):not(img),.ui.list>.item>.image:not(:only-child):not(img){padding-right:.5em}.ui.list .list>.item>.image img,.ui.list>.item>.image img{vertical-align:top}.ui.list .list>.item>.image:only-child,.ui.list .list>.item>img.image,.ui.list>.item>.image:only-child,.ui.list>.item>img.image{display:inline-block}.ui.list .list>.item>.content,.ui.list>.item>.content{line-height:1.125em;color:rgba(0,0,0,.87)}.ui.list .list>.item>.icon+.content,.ui.list .list>.item>.image+.content,.ui.list>.item>.icon+.content,.ui.list>.item>.image+.content{display:table-cell;width:100%;padding:0 0 0 .5em;vertical-align:top}.ui.list .list>.item>.loading.icon+.content,.ui.list>.item>.loading.icon+.content{padding-left:calc(.25em + .5em)}.ui.list .list>.item>img.image+.content,.ui.list>.item>img.image+.content{display:inline-block;width:auto}.ui.list .list>.item>.content>.list,.ui.list>.item>.content>.list{margin-left:0;padding-left:0}.ui.list .list>.item .header,.ui.list>.item .header{display:block;margin:0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.87)}.ui.list .list>.item .description,.ui.list>.item .description{display:block;color:rgba(0,0,0,.7)}.ui.list .list>.item a,.ui.list>.item a{cursor:pointer}.ui.list .list>a.item,.ui.list>a.item{cursor:pointer;color:#4183c4}.ui.list .list>a.item:hover,.ui.list>a.item:hover{color:#1e70bf}.ui.list .list>a.item>i.icon,.ui.list .list>a.item>i.icons,.ui.list>a.item>i.icon,.ui.list>a.item>i.icons{color:rgba(0,0,0,.4)}.ui.list .list>.item a.header,.ui.list>.item a.header{cursor:pointer;color:#4183c4!important}.ui.list .list>.item>a.header:hover,.ui.list>.item>a.header:hover{color:#1e70bf!important}.ui[class*="left floated"].list{float:left}.ui[class*="right floated"].list{float:right}.ui.list .list>.item [class*="left floated"],.ui.list>.item [class*="left floated"]{float:left;margin:0 1em 0 0}.ui.list .list>.item [class*="right floated"],.ui.list>.item [class*="right floated"]{float:right;margin:0 0 0 1em}.ui.menu .ui.list .list>.item,.ui.menu .ui.list>.item{display:list-item;table-layout:fixed;background-color:transparent;list-style-type:none;list-style-position:outside;padding:.1875em 0;line-height:1.125em}.ui.menu .ui.list .list>.item:before,.ui.menu .ui.list>.item:before{border:none;background:0 0}.ui.menu .ui.list .list>.item:first-child,.ui.menu .ui.list>.item:first-child{padding-top:0}.ui.menu .ui.list .list>.item:last-child,.ui.menu .ui.list>.item:last-child{padding-bottom:0}.ui.horizontal.list{display:inline-block;font-size:0}.ui.horizontal.list>.item{display:inline-block;margin-right:1em;font-size:1rem}.ui.horizontal.list:not(.celled)>.item:last-child{margin-right:0;padding-right:0}.ui.horizontal.list .list:not(.icon){padding-left:0;padding-bottom:0}.ui.horizontal.list .list>.item>.content,.ui.horizontal.list .list>.item>.icon,.ui.horizontal.list .list>.item>.image,.ui.horizontal.list>.item>.content,.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.image{vertical-align:middle}.ui.horizontal.list>.item:first-child,.ui.horizontal.list>.item:last-child{padding-top:.1875em;padding-bottom:.1875em}.ui.horizontal.list .item>i.icons>i.icon,.ui.horizontal.list>.item>i.icon{margin:0;padding:0 .25em 0 0}.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.icon+.content,.ui.horizontal.list>.item>.image+.content{float:none;display:inline-block;width:auto}.ui.horizontal.list>.item>.image{display:inline-block}.ui.list .list>.disabled.item,.ui.list>.disabled.item{pointer-events:none;color:rgba(40,40,40,.3)!important}.ui.inverted.list .list>.disabled.item,.ui.inverted.list>.disabled.item{color:rgba(225,225,225,.3)!important}.ui.list .list>a.item:hover>.icon,.ui.list .list>a.item:hover>.icons,.ui.list>a.item:hover>.icon,.ui.list>a.item:hover>.icons{color:rgba(0,0,0,.87)}.ui.inverted.list .list>a.item>.icon,.ui.inverted.list>a.item>.icon{color:rgba(255,255,255,.7)}.ui.inverted.list .list>.item .header,.ui.inverted.list>.item .header{color:rgba(255,255,255,.9)}.ui.inverted.list .list>.item .description,.ui.inverted.list>.item .description{color:rgba(255,255,255,.7)}.ui.inverted.list .list>.item>.content,.ui.inverted.list>.item>.content{color:rgba(255,255,255,.7)}.ui.inverted.list .list>a.item,.ui.inverted.list>a.item{cursor:pointer;color:rgba(255,255,255,.9)}.ui.inverted.list .list>a.item:hover,.ui.inverted.list>a.item:hover{color:#1e70bf}.ui.inverted.list .item a:not(.ui){color:rgba(255,255,255,.9)!important}.ui.inverted.list .item a:not(.ui):hover{color:#1e70bf!important}.ui.list [class*="top aligned"],.ui.list[class*="top aligned"] .content,.ui.list[class*="top aligned"] .image{vertical-align:top!important}.ui.list [class*="middle aligned"],.ui.list[class*="middle aligned"] .content,.ui.list[class*="middle aligned"] .image{vertical-align:middle!important}.ui.list [class*="bottom aligned"],.ui.list[class*="bottom aligned"] .content,.ui.list[class*="bottom aligned"] .image{vertical-align:bottom!important}.ui.link.list .item,.ui.link.list .item a:not(.ui),.ui.link.list a.item{color:rgba(0,0,0,.4);-webkit-transition:.1s color ease;transition:.1s color ease}.ui.link.list.list .item a:not(.ui):hover,.ui.link.list.list a.item:hover{color:rgba(0,0,0,.8)}.ui.link.list.list .item a:not(.ui):active,.ui.link.list.list a.item:active{color:rgba(0,0,0,.9)}.ui.link.list.list .active.item,.ui.link.list.list .active.item a:not(.ui){color:rgba(0,0,0,.95)}.ui.inverted.link.list .item,.ui.inverted.link.list .item a:not(.ui),.ui.inverted.link.list a.item{color:rgba(255,255,255,.5)}.ui.inverted.link.list.list .item a:not(.ui):hover,.ui.inverted.link.list.list a.item:hover{color:#fff}.ui.inverted.link.list.list .item a:not(.ui):active,.ui.inverted.link.list.list a.item:active{color:#fff}.ui.inverted.link.list.list .active.item a:not(.ui),.ui.inverted.link.list.list a.active.item{color:#fff}.ui.selection.list .list>.item,.ui.selection.list>.item{cursor:pointer;background:0 0;padding:.5em .5em;margin:0;color:rgba(0,0,0,.4);border-radius:.5em;-webkit-transition:.1s color ease,.1s padding-left ease,.1s background-color ease;transition:.1s color ease,.1s padding-left ease,.1s background-color ease}.ui.selection.list .list>.item:last-child,.ui.selection.list>.item:last-child{margin-bottom:0}.ui.selection.list .list>.item:hover,.ui.selection.list>.item:hover{background:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.selection.list .list>.item:active,.ui.selection.list>.item:active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.9)}.ui.selection.list .list>.item.active,.ui.selection.list>.item.active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.selection.list>.item{background:0 0;color:rgba(255,255,255,.5)}.ui.inverted.selection.list>.item:hover{background:rgba(255,255,255,.02);color:#fff}.ui.inverted.selection.list>.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.selection.list>.item.active{background:rgba(255,255,255,.08);color:#fff}.ui.celled.selection.list .list>.item,.ui.celled.selection.list>.item,.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{border-radius:0}.ui.animated.list>.item{-webkit-transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s;transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s}.ui.animated.list:not(.horizontal)>.item:hover{padding-left:1em}.ui.fitted.list:not(.selection) .list>.item,.ui.fitted.list:not(.selection)>.item{padding-left:0;padding-right:0}.ui.fitted.selection.list .list>.item,.ui.fitted.selection.list>.item{margin-left:-.5em;margin-right:-.5em}.ui.bulleted.list,ul.ui.list{margin-left:1.25rem}.ui.bulleted.list .list>.item,.ui.bulleted.list>.item,ul.ui.list li{position:relative}.ui.bulleted.list .list>.item:before,.ui.bulleted.list>.item:before,ul.ui.list li:before{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;top:auto;left:auto;font-weight:400;margin-left:-1.25rem;content:'\2022';opacity:1;color:inherit;vertical-align:top}.ui.bulleted.list .list>a.item:before,.ui.bulleted.list>a.item:before,ul.ui.list li:before{color:rgba(0,0,0,.87)}.ui.bulleted.list .list:not(.icon),ul.ui.list ul{padding-left:1.25rem}.ui.horizontal.bulleted.list,ul.ui.horizontal.bulleted.list{margin-left:0}.ui.horizontal.bulleted.list>.item,ul.ui.horizontal.bulleted.list li{margin-left:1.75rem}.ui.horizontal.bulleted.list>.item:first-child,ul.ui.horizontal.bulleted.list li:first-child{margin-left:0}.ui.horizontal.bulleted.list>.item::before,ul.ui.horizontal.bulleted.list li::before{color:rgba(0,0,0,.87)}.ui.horizontal.bulleted.list>.item:first-child::before,ul.ui.horizontal.bulleted.list li:first-child::before{display:none}.ui.ordered.list,.ui.ordered.list .list:not(.icon),ol.ui.list,ol.ui.list ol{counter-reset:ordered;margin-left:1.25rem;list-style-type:none}.ui.ordered.list .list>.item,.ui.ordered.list>.item,ol.ui.list li{list-style-type:none;position:relative}.ui.ordered.list .list>.item:before,.ui.ordered.list>.item:before,ol.ui.list li:before{position:absolute;top:auto;left:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;margin-left:-1.25rem;counter-increment:ordered;content:counters(ordered, ".") " ";text-align:right;color:rgba(0,0,0,.87);vertical-align:middle;opacity:.8}.ui.ordered.inverted.list .list>.item:before,.ui.ordered.inverted.list>.item:before,ol.ui.inverted.list li:before{color:rgba(255,255,255,.7)}.ui.ordered.list .list>.item[data-value]:before,.ui.ordered.list>.item[data-value]:before{content:attr(data-value)}ol.ui.list li[value]:before{content:attr(value)}.ui.ordered.list .list:not(.icon),ol.ui.list ol{margin-left:1em}.ui.ordered.list .list>.item:before,ol.ui.list ol li:before{margin-left:-2em}.ui.ordered.horizontal.list,ol.ui.horizontal.list{margin-left:0}.ui.ordered.horizontal.list .list>.item:before,.ui.ordered.horizontal.list>.item:before,ol.ui.horizontal.list li:before{position:static;margin:0 .5em 0 0}.ui.suffixed.ordered.list .list>.item:before,.ui.suffixed.ordered.list>.item:before,ol.ui.suffixed.list li:before{content:counters(ordered, ".") "."}.ui.divided.list>.item{border-top:1px solid rgba(34,36,38,.15)}.ui.divided.list .list>.item{border-top:none}.ui.divided.list .item .list>.item{border-top:none}.ui.divided.list .list>.item:first-child,.ui.divided.list>.item:first-child{border-top:none}.ui.divided.list:not(.horizontal) .list>.item:first-child{border-top-width:1px}.ui.divided.bulleted.list .list:not(.icon),.ui.divided.bulleted.list:not(.horizontal){margin-left:0;padding-left:0}.ui.divided.bulleted.list>.item:not(.horizontal){padding-left:1.25rem}.ui.divided.ordered.list{margin-left:0}.ui.divided.ordered.list .list>.item,.ui.divided.ordered.list>.item{padding-left:1.25rem}.ui.divided.ordered.list .item .list:not(.icon){margin-left:0;margin-right:0;padding-bottom:.1875em}.ui.divided.ordered.list .item .list>.item{padding-left:1em}.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{margin:0;border-radius:0}.ui.divided.horizontal.list{margin-left:0}.ui.divided.horizontal.list>.item{padding-left:.5em}.ui.divided.horizontal.list>.item:not(:last-child){padding-right:.5em}.ui.divided.horizontal.list>.item{border-top:none;border-right:1px solid rgba(34,36,38,.15);margin:0;line-height:.6}.ui.horizontal.divided.list>.item:last-child{border-right:none}.ui.divided.inverted.horizontal.list>.item,.ui.divided.inverted.list>.item,.ui.divided.inverted.list>.list{border-color:rgba(255,255,255,.1)}.ui.celled.list>.item,.ui.celled.list>.list{border-top:1px solid rgba(34,36,38,.15);padding-left:.5em;padding-right:.5em}.ui.celled.list>.item:last-child{border-bottom:1px solid rgba(34,36,38,.15)}.ui.celled.list>.item:first-child,.ui.celled.list>.item:last-child{padding-top:.1875em;padding-bottom:.1875em}.ui.celled.list .item .list>.item{border-width:0}.ui.celled.list .list>.item:first-child{border-top-width:0}.ui.celled.bulleted.list{margin-left:0}.ui.celled.bulleted.list .list>.item,.ui.celled.bulleted.list>.item{padding-left:1.25rem}.ui.celled.bulleted.list .item .list:not(.icon){margin-left:-1.25rem;margin-right:-1.25rem;padding-bottom:.1875em}.ui.celled.ordered.list{margin-left:0}.ui.celled.ordered.list .list>.item,.ui.celled.ordered.list>.item{padding-left:1.25rem}.ui.celled.ordered.list .item .list:not(.icon){margin-left:0;margin-right:0;padding-bottom:.1875em}.ui.celled.ordered.list .list>.item{padding-left:1em}.ui.horizontal.celled.list{margin-left:0}.ui.horizontal.celled.list .list>.item,.ui.horizontal.celled.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;padding-left:.5em;padding-right:.5em;line-height:.6}.ui.horizontal.celled.list .list>.item:last-child,.ui.horizontal.celled.list>.item:last-child{border-bottom:none;border-right:1px solid rgba(34,36,38,.15)}.ui.celled.inverted.list>.item,.ui.celled.inverted.list>.list{border-color:rgba(255,255,255,.1)}.ui.celled.inverted.horizontal.list .list>.item,.ui.celled.inverted.horizontal.list>.item{border-color:rgba(255,255,255,.1)}.ui.relaxed.list:not(.horizontal)>.item:not(:first-child){padding-top:.375em}.ui.relaxed.list:not(.horizontal)>.item:not(:last-child){padding-bottom:.375em}.ui.horizontal.relaxed.list .list>.item:not(:first-child),.ui.horizontal.relaxed.list>.item:not(:first-child){padding-left:1rem}.ui.horizontal.relaxed.list .list>.item:not(:last-child),.ui.horizontal.relaxed.list>.item:not(:last-child){padding-right:1rem}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:first-child){padding-top:.75em}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:last-child){padding-bottom:.75em}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:first-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:first-child){padding-left:1.5rem}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:last-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:last-child){padding-right:1.5rem}.ui.list{font-size:1em}.ui.mini.list{font-size:.8125em}.ui.mini.horizontal.list .list>.item,.ui.mini.horizontal.list>.item{font-size:.8125rem}.ui.tiny.list{font-size:.875em}.ui.tiny.horizontal.list .list>.item,.ui.tiny.horizontal.list>.item{font-size:.875rem}.ui.small.list{font-size:.9375em}.ui.small.horizontal.list .list>.item,.ui.small.horizontal.list>.item{font-size:.9375rem}.ui.large.list{font-size:1.125em}.ui.large.horizontal.list .list>.item,.ui.large.horizontal.list>.item{font-size:1.125rem}.ui.big.list{font-size:1.3125em}.ui.big.horizontal.list .list>.item,.ui.big.horizontal.list>.item{font-size:1.3125rem}.ui.huge.list{font-size:1.4375em}.ui.huge.horizontal.list .list>.item,.ui.huge.horizontal.list>.item{font-size:1.4375rem}.ui.massive.list{font-size:1.6875em}.ui.massive.horizontal.list .list>.item,.ui.massive.horizontal.list>.item{font-size:1.6875rem}
\ No newline at end of file
diff --git a/ui/dist/components/menu.css b/ui/dist/components/menu.css
index f91be45b777..cd75af79aa1 100644
--- a/ui/dist/components/menu.css
+++ b/ui/dist/components/menu.css
@@ -1,6 +1,6 @@
/*
- * # Semantic - Menu
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic - Menu
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Copyright 2015 Contributor
@@ -23,28 +23,28 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: 1rem 0em;
+ margin: 1rem 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-weight: normal;
border: 1px solid rgba(34, 36, 38, 0.15);
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
border-radius: 0.25rem;
min-height: 2.875em;
}
.ui.menu:after {
content: '';
display: block;
- height: 0px;
+ height: 0;
clear: both;
visibility: hidden;
}
.ui.menu:first-child {
- margin-top: 0rem;
+ margin-top: 0;
}
.ui.menu:last-child {
- margin-bottom: 0rem;
+ margin-bottom: 0;
}
/*--------------
@@ -52,7 +52,7 @@
---------------*/
.ui.menu .menu {
- margin: 0em;
+ margin: 0;
}
.ui.menu:not(.vertical) > .menu {
display: -webkit-box;
@@ -96,15 +96,15 @@
transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
}
.ui.menu > .item:first-child {
- border-radius: 0.25rem 0px 0px 0.25rem;
+ border-radius: 0.25rem 0 0 0.25rem;
}
/* Border */
.ui.menu .item:before {
position: absolute;
content: '';
- top: 0%;
- right: 0px;
+ top: 0;
+ right: 0;
height: 100%;
width: 1px;
background: rgba(34, 36, 38, 0.1);
@@ -137,7 +137,7 @@
.ui.menu .item > i.icon {
opacity: 0.9;
float: none;
- margin: 0em 0.3125em 0em 0em;
+ margin: 0 0.3125em 0 0;
}
/*--------------
@@ -146,8 +146,8 @@
.ui.menu:not(.vertical) .item > .button {
position: relative;
- top: 0em;
- margin: -0.5em 0em;
+ top: 0;
+ margin: -0.5em 0;
padding-bottom: 0.8125em;
padding-top: 0.8125em;
font-size: 1em;
@@ -180,8 +180,8 @@
}
.ui.menu:not(.vertical) .item > .input {
position: relative;
- top: 0em;
- margin: -0.5em 0em;
+ top: 0;
+ margin: -0.5em 0;
}
.ui.menu .item > .input input {
font-size: 1em;
@@ -195,13 +195,13 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
- margin: 0em;
+ margin: 0;
background: '';
text-transform: normal;
font-weight: bold;
}
.ui.vertical.menu .item > .header:not(.ui) {
- margin: 0em 0em 0.5em;
+ margin: 0 0 0.5em;
font-size: 1em;
font-weight: bold;
}
@@ -213,19 +213,19 @@
/* Dropdown Icon */
.ui.menu .item > i.dropdown.icon {
- padding: 0em;
+ padding: 0;
float: right;
- margin: 0em 0em 0em 1em;
+ margin: 0 0 0 1em;
}
/* Menu */
.ui.menu .dropdown.item .menu {
min-width: calc(100% - 1px);
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
background: #FFFFFF;
- margin: 0em 0px 0px;
- -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
+ margin: 0 0 0;
+ -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
@@ -267,7 +267,7 @@
display: inline-block;
font-size: 1em !important;
float: none;
- margin: 0em 0.75em 0em 0em;
+ margin: 0 0.75em 0 0 !important;
}
/* Secondary */
@@ -296,11 +296,16 @@
}
.ui.vertical.menu .dropdown.item .menu {
left: 100%;
+
+/* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
min-width: 0;
- margin: 0em 0em 0em 0em;
- -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
- border-radius: 0em 0.25rem 0.25rem 0.25rem;
+ min-width: -webkit-max-content;
+ min-width: -moz-max-content;
+ min-width: max-content;
+ margin: 0 0 0 0;
+ -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+ border-radius: 0 0.25rem 0.25rem 0.25rem;
}
.ui.vertical.menu .dropdown.item.upward .menu {
bottom: 0;
@@ -309,8 +314,8 @@
top: 0;
}
.ui.vertical.menu .active.dropdown.item {
- border-top-right-radius: 0em;
- border-bottom-right-radius: 0em;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
.ui.vertical.menu .dropdown.active.item {
-webkit-box-shadow: none;
@@ -326,15 +331,11 @@
Labels
---------------*/
-.ui.menu .item > .label {
- background: #999999;
- color: #FFFFFF;
+.ui.menu .item > .label:not(.floating) {
margin-left: 1em;
padding: 0.3em 0.8125em;
}
.ui.vertical.menu .item > .label {
- background: #999999;
- color: #FFFFFF;
margin-top: -0.15em;
margin-bottom: -0.15em;
padding: 0.3em 0.8125em;
@@ -342,6 +343,14 @@
.ui.menu .item > .floating.label {
padding: 0.3em 0.8125em;
}
+.ui.menu .item > .label {
+ background: #999999;
+ color: #FFFFFF;
+}
+.ui.menu .item > .image.label img {
+ margin: -0.2833em 0.8em -0.2833em -0.8em;
+ height: 1.5666em;
+}
/*--------------
Images
@@ -350,7 +359,7 @@
.ui.menu .item > img:not(.ui) {
display: inline-block;
vertical-align: middle;
- margin: -0.3em 0em;
+ margin: -0.3em 0;
width: 2.5em;
}
.ui.vertical.menu .item > img:not(.ui):only-child {
@@ -376,8 +385,8 @@
}
/*--------------
- Sidebar
----------------*/
+ Sidebar
+ ---------------*/
/* Show vertical dividers below last */
@@ -386,24 +395,28 @@
}
.ui.vertical.sidebar.menu > .item::before {
top: auto;
- bottom: 0px;
+ bottom: 0;
}
/*--------------
Container
---------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.menu > .ui.container {
width: 100% !important;
- margin-left: 0em !important;
- margin-right: 0em !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
}
@media only screen and (min-width: 768px) {
.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
border-left: 1px solid rgba(34, 36, 38, 0.1);
}
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
+ border-right: 1px solid rgba(34, 36, 38, 0.1);
+ }
}
@@ -465,11 +478,11 @@
Disabled
---------------*/
-.ui.menu .item.disabled,
-.ui.menu .item.disabled:hover {
- cursor: default !important;
- background-color: transparent !important;
- color: rgba(40, 40, 40, 0.3) !important;
+.ui.ui.menu .item.disabled {
+ cursor: default;
+ background-color: transparent;
+ color: rgba(40, 40, 40, 0.3);
+ pointer-events: none;
}
@@ -500,6 +513,20 @@ Floated Menu / Item
display: flex;
margin-left: auto !important;
}
+.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
+.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
+ display: inherit;
+}
+
+/* Center */
+.ui.menu:not(.vertical) .center.item,
+.ui.menu:not(.vertical) .center.menu {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
/* Swapped Borders */
.ui.menu .right.item::before,
@@ -508,9 +535,15 @@ Floated Menu / Item
left: 0;
}
+/* Remove Outer Borders */
+.ui.menu .center.item:last-child::before,
+.ui.menu .center.menu > .item:last-child::before {
+ display: none;
+}
+
/*--------------
- Vertical
----------------*/
+ Vertical
+ ---------------*/
.ui.vertical.menu {
display: block;
@@ -519,8 +552,8 @@ Floated Menu / Item
-ms-flex-direction: column;
flex-direction: column;
background: #FFFFFF;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
}
/*--- Item ---*/
@@ -532,10 +565,10 @@ Floated Menu / Item
border-right: none;
}
.ui.vertical.menu > .item:first-child {
- border-radius: 0.25rem 0.25rem 0px 0px;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.vertical.menu > .item:last-child {
- border-radius: 0px 0px 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
/*--- Label ---*/
@@ -547,14 +580,15 @@ Floated Menu / Item
/*--- Icon ---*/
-.ui.vertical.menu .item > i.icon {
+.ui.vertical.menu .item > i.icon,
+.ui.vertical.menu .item > i.icons {
width: 1.18em;
float: right;
- margin: 0em 0em 0em 0.5em;
+ margin: 0 0 0 0.5em;
}
.ui.vertical.menu .item > .label + i.icon {
float: none;
- margin: 0em 0.5em 0em 0em;
+ margin: 0 0.5em 0 0;
}
/*--- Border ---*/
@@ -562,8 +596,8 @@ Floated Menu / Item
.ui.vertical.menu .item:before {
position: absolute;
content: '';
- top: 0%;
- left: 0px;
+ top: 0;
+ left: 0;
width: 100%;
height: 1px;
background: rgba(34, 36, 38, 0.1);
@@ -575,7 +609,7 @@ Floated Menu / Item
/*--- Sub Menu ---*/
.ui.vertical.menu .item > .menu {
- margin: 0.5em -1.125em 0em;
+ margin: 0.5em -1.125em 0;
}
.ui.vertical.menu .menu .item {
background: none;
@@ -594,15 +628,15 @@ Floated Menu / Item
/* Vertical Active */
.ui.vertical.menu .active.item {
background: rgba(0, 0, 0, 0.05);
- border-radius: 0em;
+ border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.ui.vertical.menu > .active.item:first-child {
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.vertical.menu > .active.item:last-child {
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
.ui.vertical.menu > .active.item:only-child {
border-radius: 0.25rem;
@@ -617,11 +651,11 @@ Floated Menu / Item
}
/*--------------
- Tabular
----------------*/
+ Tabular
+ ---------------*/
.ui.tabular.menu {
- border-radius: 0em;
+ border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none;
@@ -629,7 +663,7 @@ Floated Menu / Item
border-bottom: 1px solid #D4D4D5;
}
.ui.tabular.fluid.menu {
- width: calc(100% + 2px ) !important;
+ width: calc(100% + 2px) !important;
}
.ui.tabular.menu .item {
background: transparent;
@@ -660,28 +694,28 @@ Floated Menu / Item
margin-bottom: -1px;
-webkit-box-shadow: none;
box-shadow: none;
- border-radius: 0.25rem 0.25rem 0px 0px !important;
+ border-radius: 0.25rem 0.25rem 0 0 !important;
}
/* Coupling with segment for attachment */
.ui.tabular.menu + .attached:not(.top).segment,
.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
border-top: none;
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
+ margin-left: 0;
+ margin-top: 0;
+ margin-right: 0;
width: 100%;
}
.top.attached.segment + .ui.bottom.tabular.menu {
position: relative;
- width: calc(100% + 2px );
+ width: calc(100% + 2px);
left: -1px;
}
/* Bottom Vertical Tabular */
.ui.bottom.tabular.menu {
background: none transparent;
- border-radius: 0em;
+ border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-bottom: none;
@@ -698,14 +732,14 @@ Floated Menu / Item
background: none #FFFFFF;
color: rgba(0, 0, 0, 0.95);
border-color: #D4D4D5;
- margin: -1px 0px 0px 0px;
- border-radius: 0px 0px 0.25rem 0.25rem !important;
+ margin: -1px 0 0 0;
+ border-radius: 0 0 0.25rem 0.25rem !important;
}
/* Vertical Tabular (Left) */
.ui.vertical.tabular.menu {
background: none transparent;
- border-radius: 0em;
+ border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-bottom: none;
@@ -722,14 +756,14 @@ Floated Menu / Item
background: none #FFFFFF;
color: rgba(0, 0, 0, 0.95);
border-color: #D4D4D5;
- margin: 0px -1px 0px 0px;
- border-radius: 0.25rem 0px 0px 0.25rem !important;
+ margin: 0 -1px 0 0;
+ border-radius: 0.25rem 0 0 0.25rem !important;
}
/* Vertical Right Tabular */
.ui.vertical.right.tabular.menu {
background: none transparent;
- border-radius: 0em;
+ border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-bottom: none;
@@ -747,13 +781,13 @@ Floated Menu / Item
background: none #FFFFFF;
color: rgba(0, 0, 0, 0.95);
border-color: #D4D4D5;
- margin: 0px 0px 0px -1px;
- border-radius: 0px 0.25rem 0.25rem 0px !important;
+ margin: 0 0 0 -1px;
+ border-radius: 0 0.25rem 0.25rem 0 !important;
}
/* Dropdown */
.ui.tabular.menu .active.dropdown.item {
- margin-bottom: 0px;
+ margin-bottom: 0;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 2px solid transparent;
@@ -761,21 +795,21 @@ Floated Menu / Item
}
/*--------------
- Pagination
----------------*/
+ Pagination
+ ---------------*/
.ui.pagination.menu {
- margin: 0em;
+ margin: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle;
}
.ui.pagination.menu .item:last-child {
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
}
.ui.compact.menu .item:last-child {
- border-radius: 0em 0.25rem 0.25rem 0em;
+ border-radius: 0 0.25rem 0.25rem 0;
}
.ui.pagination.menu .item:last-child:before {
display: none;
@@ -799,14 +833,14 @@ Floated Menu / Item
}
/*--------------
- Secondary
----------------*/
+ Secondary
+ ---------------*/
.ui.secondary.menu {
background: none;
margin-left: -0.3125em;
margin-right: -0.3125em;
- border-radius: 0em;
+ border-radius: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
@@ -820,7 +854,7 @@ Floated Menu / Item
box-shadow: none;
border: none;
padding: 0.8125em 0.9375em;
- margin: 0em 0.3125em;
+ margin: 0 0.3125em;
background: none;
-webkit-transition: color 0.1s ease;
transition: color 0.1s ease;
@@ -834,14 +868,14 @@ Floated Menu / Item
/* Header */
.ui.secondary.menu .header.item {
- border-radius: 0em;
+ border-radius: 0;
border-right: none;
background: none transparent;
}
/* Image */
.ui.secondary.menu .item > img:not(.ui) {
- margin: 0em;
+ margin: 0;
}
/* Hover */
@@ -870,54 +904,54 @@ Floated Menu / Item
}
/* Inverted */
-.ui.secondary.inverted.menu .link.item,
-.ui.secondary.inverted.menu a.item {
- color: rgba(255, 255, 255, 0.7) !important;
+.ui.secondary.inverted.menu .link.item:not(.disabled),
+.ui.secondary.inverted.menu a.item:not(.disabled) {
+ color: rgba(255, 255, 255, 0.7);
}
.ui.secondary.inverted.menu .dropdown.item:hover,
.ui.secondary.inverted.menu .link.item:hover,
.ui.secondary.inverted.menu a.item:hover {
background: rgba(255, 255, 255, 0.08);
- color: #ffffff !important;
+ color: #ffffff;
}
.ui.secondary.inverted.menu .active.item {
background: rgba(255, 255, 255, 0.15);
- color: #ffffff !important;
+ color: #ffffff;
}
/* Fix item margins */
.ui.secondary.item.menu {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
.ui.secondary.item.menu .item:last-child {
- margin-right: 0em;
+ margin-right: 0;
}
.ui.secondary.attached.menu {
-webkit-box-shadow: none;
box-shadow: none;
}
+/*---------------------
+ Secondary Vertical
+ -----------------------*/
+
+
/* Sub Menu */
.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
- margin: 0em -0.9375em;
+ margin: 0 -0.9375em;
}
.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
- margin: 0em;
+ margin: 0;
padding: 0.4375em 1.3125em;
}
-
-/*---------------------
- Secondary Vertical
------------------------*/
-
.ui.secondary.vertical.menu > .item {
border: none;
- margin: 0em 0em 0.3125em;
+ margin: 0 0 0.3125em;
border-radius: 0.25rem !important;
}
.ui.secondary.vertical.menu > .header.item {
- border-radius: 0em;
+ border-radius: 0;
}
/* Sub Menu */
@@ -931,26 +965,37 @@ Floated Menu / Item
}
/*---------------------
- Secondary Pointing
------------------------*/
+ Secondary Pointing
+ -----------------------*/
.ui.secondary.pointing.menu {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
border-bottom: 2px solid rgba(34, 36, 38, 0.15);
}
.ui.secondary.pointing.menu .item {
border-bottom-color: transparent;
border-bottom-style: solid;
- border-radius: 0em;
+ border-radius: 0;
-ms-flex-item-align: end;
align-self: flex-end;
- margin: 0em 0em -2px;
+ margin: 0 0 -2px;
padding: 0.875em 1.125em;
border-bottom-width: 2px;
-webkit-transition: color 0.1s ease;
transition: color 0.1s ease;
}
+.ui.secondary.pointing.menu .ui.dropdown .menu .item {
+ border-bottom-width: 0;
+}
+.ui.secondary.pointing.menu .item > .label:not(.floating) {
+ margin-top: -0.3em;
+ margin-bottom: -0.3em;
+}
+.ui.secondary.pointing.menu .item > .circular.label {
+ margin-top: -0.5em;
+ margin-bottom: -0.5em;
+}
/* Item Types */
.ui.secondary.pointing.menu .header.item {
@@ -985,14 +1030,14 @@ Floated Menu / Item
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
- border-color: #1B1C1D;
+ border-color: currentColor;
font-weight: bold;
color: rgba(0, 0, 0, 0.95);
}
/* Active Hover */
.ui.secondary.pointing.menu .active.item:hover {
- border-color: #1B1C1D;
+ border-color: currentColor;
color: rgba(0, 0, 0, 0.95);
}
@@ -1003,7 +1048,7 @@ Floated Menu / Item
/* Vertical Pointing */
.ui.secondary.vertical.pointing.menu {
- border-bottom-width: 0px;
+ border-bottom-width: 0;
border-right-width: 2px;
border-right-style: solid;
border-right-color: rgba(34, 36, 38, 0.15);
@@ -1012,25 +1057,21 @@ Floated Menu / Item
border-bottom: none;
border-right-style: solid;
border-right-color: transparent;
- border-radius: 0em !important;
- margin: 0em -2px 0em 0em;
+ border-radius: 0 !important;
+ margin: 0 -2px 0 0;
border-right-width: 2px;
}
/* Vertical Active */
.ui.secondary.vertical.pointing.menu .active.item {
- border-color: #1B1C1D;
+ border-color: currentColor;
}
/* Inverted */
.ui.secondary.inverted.pointing.menu {
border-color: rgba(255, 255, 255, 0.1);
}
-.ui.secondary.inverted.pointing.menu {
- border-width: 2px;
- border-color: rgba(34, 36, 38, 0.15);
-}
-.ui.secondary.inverted.pointing.menu .item {
+.ui.secondary.inverted.pointing.menu .item:not(.disabled) {
color: rgba(255, 255, 255, 0.9);
}
.ui.secondary.inverted.pointing.menu .header.item {
@@ -1040,34 +1081,35 @@ Floated Menu / Item
/* Hover */
.ui.secondary.inverted.pointing.menu .link.item:hover,
.ui.secondary.inverted.pointing.menu a.item:hover {
- color: rgba(0, 0, 0, 0.95);
+ color: #ffffff;
}
/* Active */
-.ui.secondary.inverted.pointing.menu .active.item {
+.ui.ui.secondary.inverted.pointing.menu .active.item {
border-color: #FFFFFF;
color: #ffffff;
+ background-color: transparent;
}
/*--------------
- Text Menu
----------------*/
+ Text Menu
+ ---------------*/
.ui.text.menu {
background: none transparent;
- border-radius: 0px;
+ border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
margin: 1em -0.4375em;
}
.ui.text.menu .item {
- border-radius: 0px;
+ border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-ms-flex-item-align: center;
align-self: center;
- margin: 0em 0em;
+ margin: 0 0;
padding: 0.3125em 0.4375em;
font-weight: normal;
color: rgba(0, 0, 0, 0.6);
@@ -1093,46 +1135,46 @@ Floated Menu / Item
/* Image */
.ui.text.menu .item > img:not(.ui) {
- margin: 0em;
+ margin: 0;
}
/*--- fluid text ---*/
.ui.text.item.menu .item {
- margin: 0em;
+ margin: 0;
}
/*--- vertical text ---*/
.ui.vertical.text.menu {
- margin: 1em 0em;
+ margin: 1em 0;
}
.ui.vertical.text.menu:first-child {
- margin-top: 0rem;
+ margin-top: 0;
}
.ui.vertical.text.menu:last-child {
- margin-bottom: 0rem;
+ margin-bottom: 0;
}
.ui.vertical.text.menu .item {
- margin: 0.5em 0em;
- padding-left: 0em;
- padding-right: 0em;
+ margin: 0.5em 0;
+ padding-left: 0;
+ padding-right: 0;
}
.ui.vertical.text.menu .item > i.icon {
float: none;
- margin: 0em 0.3125em 0em 0em;
+ margin: 0 0.3125em 0 0;
}
.ui.vertical.text.menu .header.item {
- margin: 0.5em 0em 0.625em;
+ margin: 0.5em 0 0.625em;
}
/* Vertical Sub Menu */
.ui.vertical.text.menu .item:not(.dropdown) > .menu {
- margin: 0em;
+ margin: 0;
}
.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
- margin: 0em;
- padding: 0.4375em 0em;
+ margin: 0;
+ padding: 0.4375em 0;
}
/*--- hover ---*/
@@ -1174,13 +1216,13 @@ Floated Menu / Item
.ui.inverted.text.menu .item,
.ui.inverted.text.menu .item:hover,
.ui.inverted.text.menu .active.item {
- background-color: transparent !important;
+ background-color: transparent;
}
/* Fluid */
.ui.fluid.text.menu {
- margin-left: 0em;
- margin-right: 0em;
+ margin-left: 0;
+ margin-right: 0;
}
/*--------------
@@ -1215,14 +1257,14 @@ Floated Menu / Item
/* (x) Item Icon */
.ui.menu .icon.item > .icon {
width: auto;
- margin: 0em auto;
+ margin: 0 auto;
}
/* Vertical Icon */
.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
display: block;
opacity: 1;
- margin: 0em auto;
+ margin: 0 auto;
float: none;
}
@@ -1232,8 +1274,8 @@ Floated Menu / Item
}
/*--------------
- Labeled Icon
----------------*/
+ Labeled Icon
+ ---------------*/
/* Menu */
@@ -1251,16 +1293,16 @@ Floated Menu / Item
}
/* Icon */
-.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
+.ui.labeled.icon.menu > .item > .icon:not(.dropdown) {
height: 1em;
display: block;
font-size: 1.6875em !important;
- margin: 0em auto 0.5rem !important;
+ margin: 0 auto 0.5rem !important;
}
/* Fluid */
.ui.fluid.labeled.icon.menu > .item {
- min-width: 0em;
+ min-width: 0;
}
@@ -1270,10 +1312,10 @@ Floated Menu / Item
/*--------------
- Stackable
----------------*/
+ Stackable
+ ---------------*/
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.stackable.menu {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -1287,8 +1329,8 @@ Floated Menu / Item
position: absolute;
content: '';
top: auto;
- bottom: 0px;
- left: 0px;
+ bottom: 0;
+ left: 0;
width: 100%;
height: 1px;
background: rgba(34, 36, 38, 0.1);
@@ -1301,7 +1343,13 @@ Floated Menu / Item
.ui.stackable.menu .right.item {
margin-left: 0 !important;
}
+ .ui.stackable.menu .center.menu,
+ .ui.stackable.menu .center.item {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
.ui.stackable.menu .right.menu,
+ .ui.stackable.menu .center.menu,
.ui.stackable.menu .left.menu {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -1314,76 +1362,83 @@ Floated Menu / Item
Colors
---------------*/
-
-/*--- Standard Colors ---*/
-
-.ui.menu .red.active.item,
-.ui.red.menu .active.item {
- border-color: #DB2828 !important;
- color: #DB2828 !important;
-}
-.ui.menu .orange.active.item,
-.ui.orange.menu .active.item {
- border-color: #F2711C !important;
- color: #F2711C !important;
-}
-.ui.menu .yellow.active.item,
-.ui.yellow.menu .active.item {
- border-color: #FBBD08 !important;
- color: #FBBD08 !important;
-}
-.ui.menu .olive.active.item,
-.ui.olive.menu .active.item {
- border-color: #B5CC18 !important;
- color: #B5CC18 !important;
-}
-.ui.menu .green.active.item,
-.ui.green.menu .active.item {
- border-color: #21BA45 !important;
- color: #21BA45 !important;
-}
-.ui.menu .teal.active.item,
-.ui.teal.menu .active.item {
- border-color: #00B5AD !important;
- color: #00B5AD !important;
-}
-.ui.menu .blue.active.item,
-.ui.blue.menu .active.item {
- border-color: #2185D0 !important;
- color: #2185D0 !important;
-}
-.ui.menu .violet.active.item,
-.ui.violet.menu .active.item {
- border-color: #6435C9 !important;
- color: #6435C9 !important;
-}
-.ui.menu .purple.active.item,
-.ui.purple.menu .active.item {
- border-color: #A333C8 !important;
- color: #A333C8 !important;
-}
-.ui.menu .pink.active.item,
-.ui.pink.menu .active.item {
- border-color: #E03997 !important;
- color: #E03997 !important;
-}
-.ui.menu .brown.active.item,
-.ui.brown.menu .active.item {
- border-color: #A5673F !important;
- color: #A5673F !important;
-}
-.ui.menu .grey.active.item,
-.ui.grey.menu .active.item {
- border-color: #767676 !important;
- color: #767676 !important;
+.ui.ui.ui.menu .primary.active.item,
+.ui.ui.primary.menu .active.item:hover,
+.ui.ui.primary.menu .active.item {
+ color: #2185D0;
+}
+.ui.ui.ui.menu .red.active.item,
+.ui.ui.red.menu .active.item:hover,
+.ui.ui.red.menu .active.item {
+ color: #DB2828;
+}
+.ui.ui.ui.menu .orange.active.item,
+.ui.ui.orange.menu .active.item:hover,
+.ui.ui.orange.menu .active.item {
+ color: #F2711C;
+}
+.ui.ui.ui.menu .yellow.active.item,
+.ui.ui.yellow.menu .active.item:hover,
+.ui.ui.yellow.menu .active.item {
+ color: #FBBD08;
+}
+.ui.ui.ui.menu .olive.active.item,
+.ui.ui.olive.menu .active.item:hover,
+.ui.ui.olive.menu .active.item {
+ color: #B5CC18;
+}
+.ui.ui.ui.menu .green.active.item,
+.ui.ui.green.menu .active.item:hover,
+.ui.ui.green.menu .active.item {
+ color: #21BA45;
+}
+.ui.ui.ui.menu .teal.active.item,
+.ui.ui.teal.menu .active.item:hover,
+.ui.ui.teal.menu .active.item {
+ color: #00B5AD;
+}
+.ui.ui.ui.menu .blue.active.item,
+.ui.ui.blue.menu .active.item:hover,
+.ui.ui.blue.menu .active.item {
+ color: #2185D0;
+}
+.ui.ui.ui.menu .violet.active.item,
+.ui.ui.violet.menu .active.item:hover,
+.ui.ui.violet.menu .active.item {
+ color: #6435C9;
+}
+.ui.ui.ui.menu .purple.active.item,
+.ui.ui.purple.menu .active.item:hover,
+.ui.ui.purple.menu .active.item {
+ color: #A333C8;
+}
+.ui.ui.ui.menu .pink.active.item,
+.ui.ui.pink.menu .active.item:hover,
+.ui.ui.pink.menu .active.item {
+ color: #E03997;
+}
+.ui.ui.ui.menu .brown.active.item,
+.ui.ui.brown.menu .active.item:hover,
+.ui.ui.brown.menu .active.item {
+ color: #A5673F;
+}
+.ui.ui.ui.menu .grey.active.item,
+.ui.ui.grey.menu .active.item:hover,
+.ui.ui.grey.menu .active.item {
+ color: #767676;
+}
+.ui.ui.ui.menu .black.active.item,
+.ui.ui.black.menu .active.item:hover,
+.ui.ui.black.menu .active.item {
+ color: #1B1C1D;
}
/*--------------
- Inverted
----------------*/
+ Inverted
+ ---------------*/
.ui.inverted.menu {
- border: 0px solid transparent;
+ border: 0 solid transparent;
background: #1B1C1D;
-webkit-box-shadow: none;
box-shadow: none;
@@ -1416,15 +1471,14 @@ Floated Menu / Item
/* Header */
.ui.inverted.menu .header.item {
- margin: 0em;
+ margin: 0;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Disabled */
-.ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover {
+.ui.ui.inverted.menu .item.disabled {
color: rgba(225, 225, 225, 0.3);
}
@@ -1454,7 +1508,7 @@ Floated Menu / Item
/*--- Active ---*/
.ui.inverted.menu .active.item {
- background: rgba(255, 255, 255, 0.15);
+ background: #3D3E3F;
color: #ffffff !important;
}
.ui.inverted.vertical.menu .item .menu .active.item {
@@ -1462,8 +1516,8 @@ Floated Menu / Item
color: #FFFFFF;
}
.ui.inverted.pointing.menu .active.item:after {
- background: #3D3E3F !important;
- margin: 0em !important;
+ background: #3D3E3F;
+ margin: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none !important;
@@ -1472,186 +1526,227 @@ Floated Menu / Item
/*--- Active Hover ---*/
.ui.inverted.menu .active.item:hover {
- background: rgba(255, 255, 255, 0.15);
+ background: #3D3E3F;
color: #FFFFFF !important;
}
.ui.inverted.pointing.menu .active.item:hover:after {
- background: #3D3E3F !important;
+ background: #3D3E3F;
}
/*--------------
- Floated
----------------*/
+ Floated
+ ---------------*/
.ui.floated.menu {
float: left;
- margin: 0rem 0.5rem 0rem 0rem;
+ margin: 0 0.5rem 0 0;
}
.ui.floated.menu .item:last-child:before {
display: none;
}
.ui.right.floated.menu {
float: right;
- margin: 0rem 0rem 0rem 0.5rem;
+ margin: 0 0 0 0.5rem;
}
/*--------------
- Inverted
----------------*/
+ Inverted
+ ---------------*/
-
-/* Red */
-.ui.inverted.menu .red.active.item,
-.ui.inverted.red.menu {
+.ui.ui.ui.inverted.menu .primary.active.item,
+.ui.ui.inverted.primary.menu {
+ background-color: #2185D0;
+}
+.ui.inverted.primary.menu .item:before {
+ background-color: rgba(34, 36, 38, 0.1);
+}
+.ui.ui.inverted.primary.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.ui.inverted.pointing.primary.menu .active.item {
+ background-color: #1678c2;
+}
+.ui.ui.ui.inverted.menu .red.active.item,
+.ui.ui.inverted.red.menu {
background-color: #DB2828;
}
.ui.inverted.red.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.red.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.red.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Orange */
-.ui.inverted.menu .orange.active.item,
-.ui.inverted.orange.menu {
+.ui.inverted.pointing.red.menu .active.item {
+ background-color: #d01919;
+}
+.ui.ui.ui.inverted.menu .orange.active.item,
+.ui.ui.inverted.orange.menu {
background-color: #F2711C;
}
.ui.inverted.orange.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.orange.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.orange.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Yellow */
-.ui.inverted.menu .yellow.active.item,
-.ui.inverted.yellow.menu {
+.ui.inverted.pointing.orange.menu .active.item {
+ background-color: #f26202;
+}
+.ui.ui.ui.inverted.menu .yellow.active.item,
+.ui.ui.inverted.yellow.menu {
background-color: #FBBD08;
}
.ui.inverted.yellow.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.yellow.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.yellow.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Olive */
-.ui.inverted.menu .olive.active.item,
-.ui.inverted.olive.menu {
+.ui.inverted.pointing.yellow.menu .active.item {
+ background-color: #eaae00;
+}
+.ui.ui.ui.inverted.menu .olive.active.item,
+.ui.ui.inverted.olive.menu {
background-color: #B5CC18;
}
.ui.inverted.olive.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.olive.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.olive.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Green */
-.ui.inverted.menu .green.active.item,
-.ui.inverted.green.menu {
+.ui.inverted.pointing.olive.menu .active.item {
+ background-color: #a7bd0d;
+}
+.ui.ui.ui.inverted.menu .green.active.item,
+.ui.ui.inverted.green.menu {
background-color: #21BA45;
}
.ui.inverted.green.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.green.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.green.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Teal */
-.ui.inverted.menu .teal.active.item,
-.ui.inverted.teal.menu {
+.ui.inverted.pointing.green.menu .active.item {
+ background-color: #16ab39;
+}
+.ui.ui.ui.inverted.menu .teal.active.item,
+.ui.ui.inverted.teal.menu {
background-color: #00B5AD;
}
.ui.inverted.teal.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.teal.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.teal.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Blue */
-.ui.inverted.menu .blue.active.item,
-.ui.inverted.blue.menu {
+.ui.inverted.pointing.teal.menu .active.item {
+ background-color: #009c95;
+}
+.ui.ui.ui.inverted.menu .blue.active.item,
+.ui.ui.inverted.blue.menu {
background-color: #2185D0;
}
.ui.inverted.blue.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.blue.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.blue.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Violet */
-.ui.inverted.menu .violet.active.item,
-.ui.inverted.violet.menu {
+.ui.inverted.pointing.blue.menu .active.item {
+ background-color: #1678c2;
+}
+.ui.ui.ui.inverted.menu .violet.active.item,
+.ui.ui.inverted.violet.menu {
background-color: #6435C9;
}
.ui.inverted.violet.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.violet.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.violet.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Purple */
-.ui.inverted.menu .purple.active.item,
-.ui.inverted.purple.menu {
+.ui.inverted.pointing.violet.menu .active.item {
+ background-color: #5829bb;
+}
+.ui.ui.ui.inverted.menu .purple.active.item,
+.ui.ui.inverted.purple.menu {
background-color: #A333C8;
}
.ui.inverted.purple.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.purple.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.purple.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Pink */
-.ui.inverted.menu .pink.active.item,
-.ui.inverted.pink.menu {
+.ui.inverted.pointing.purple.menu .active.item {
+ background-color: #9627ba;
+}
+.ui.ui.ui.inverted.menu .pink.active.item,
+.ui.ui.inverted.pink.menu {
background-color: #E03997;
}
.ui.inverted.pink.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.pink.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.pink.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Brown */
-.ui.inverted.menu .brown.active.item,
-.ui.inverted.brown.menu {
+.ui.inverted.pointing.pink.menu .active.item {
+ background-color: #e61a8d;
+}
+.ui.ui.ui.inverted.menu .brown.active.item,
+.ui.ui.inverted.brown.menu {
background-color: #A5673F;
}
.ui.inverted.brown.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.brown.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.brown.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
}
-
-/* Grey */
-.ui.inverted.menu .grey.active.item,
-.ui.inverted.grey.menu {
+.ui.inverted.pointing.brown.menu .active.item {
+ background-color: #975b33;
+}
+.ui.ui.ui.inverted.menu .grey.active.item,
+.ui.ui.inverted.grey.menu {
background-color: #767676;
}
.ui.inverted.grey.menu .item:before {
background-color: rgba(34, 36, 38, 0.1);
}
-.ui.inverted.grey.menu .active.item {
- background-color: rgba(0, 0, 0, 0.1) !important;
+.ui.ui.inverted.grey.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.ui.inverted.pointing.grey.menu .active.item {
+ background-color: #838383;
+}
+.ui.ui.ui.inverted.menu .black.active.item,
+.ui.ui.inverted.black.menu {
+ background-color: #1B1C1D;
+}
+.ui.inverted.black.menu .item:before {
+ background-color: rgba(34, 36, 38, 0.1);
+}
+.ui.ui.inverted.black.menu .active.item {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.ui.inverted.pointing.black.menu .active.item {
+ background-color: #27292a;
+}
+.ui.ui.ui.inverted.pointing.menu .active.item:after {
+ background-color: inherit;
}
/*--------------
- Fitted
----------------*/
+ Fitted
+ ---------------*/
.ui.fitted.menu .item,
.ui.fitted.menu .item .menu .item,
.ui.menu .fitted.item {
- padding: 0em;
+ padding: 0;
}
.ui.horizontally.fitted.menu .item,
.ui.horizontally.fitted.menu .item .menu .item,
@@ -1667,8 +1762,8 @@ Floated Menu / Item
}
/*--------------
- Borderless
----------------*/
+ Borderless
+ ---------------*/
.ui.borderless.menu .item:before,
.ui.borderless.menu .item .menu .item:before,
@@ -1677,21 +1772,24 @@ Floated Menu / Item
}
/*-------------------
- Compact
---------------------*/
+ Compact
+ --------------------*/
.ui.compact.menu {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
- margin: 0em;
+ margin: 0;
vertical-align: middle;
}
.ui.compact.vertical.menu {
+
+/* IE hack to make dropdown icons appear inline */
+ display: -ms-inline-flexbox !important;
display: inline-block;
}
-.ui.compact.menu .item:last-child {
- border-radius: 0em 0.25rem 0.25rem 0em;
+.ui.compact.menu:not(.secondary) .item:last-child {
+ border-radius: 0 0.25rem 0.25rem 0;
}
.ui.compact.menu .item:last-child:before {
display: none;
@@ -1704,8 +1802,8 @@ Floated Menu / Item
}
/*-------------------
- Fluid
---------------------*/
+ Fluid
+ --------------------*/
.ui.menu.fluid,
.ui.vertical.menu.fluid {
@@ -1719,17 +1817,17 @@ Floated Menu / Item
.ui.item.menu,
.ui.item.menu .item {
width: 100%;
- padding-left: 0em !important;
- padding-right: 0em !important;
- margin-left: 0em !important;
- margin-right: 0em !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
-.ui.attached.item.menu {
- margin: 0em -1px !important;
+.ui.attached.item.menu:not(.tabular) {
+ margin: 0 -1px !important;
}
.ui.item.menu .item:last-child:before {
display: none;
@@ -1753,13 +1851,13 @@ Floated Menu / Item
width: 14.285%;
}
.ui.menu.eight.item .item {
- width: 12.500%;
+ width: 12.5%;
}
.ui.menu.nine.item .item {
width: 11.11%;
}
.ui.menu.ten.item .item {
- width: 10.0%;
+ width: 10%;
}
.ui.menu.eleven.item .item {
width: 9.09%;
@@ -1769,24 +1867,24 @@ Floated Menu / Item
}
/*--------------
- Fixed
----------------*/
+ Fixed
+ ---------------*/
.ui.menu.fixed {
position: fixed;
z-index: 101;
- margin: 0em;
+ margin: 0;
width: 100%;
}
.ui.menu.fixed,
.ui.menu.fixed .item:first-child,
.ui.menu.fixed .item:last-child {
- border-radius: 0px !important;
+ border-radius: 0 !important;
}
.ui.fixed.menu,
.ui[class*="top fixed"].menu {
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
right: auto;
bottom: auto;
}
@@ -1799,8 +1897,8 @@ Floated Menu / Item
border-top: none;
border-bottom: none;
border-right: none;
- top: 0px;
- right: 0px;
+ top: 0;
+ right: 0;
left: auto;
bottom: auto;
width: auto;
@@ -1810,8 +1908,8 @@ Floated Menu / Item
border-bottom: none;
border-left: none;
border-right: none;
- bottom: 0px;
- left: 0px;
+ bottom: 0;
+ left: 0;
top: auto;
right: auto;
}
@@ -1819,8 +1917,8 @@ Floated Menu / Item
border-top: none;
border-bottom: none;
border-left: none;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
right: auto;
bottom: auto;
width: auto;
@@ -1833,8 +1931,8 @@ Floated Menu / Item
}
/*-------------------
- Pointing
---------------------*/
+ Pointing
+ --------------------*/
.ui.pointing.menu .item:after {
visibility: hidden;
@@ -1845,7 +1943,7 @@ Floated Menu / Item
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
background: none;
- margin: 0.5px 0em 0em;
+ margin: 0.5px 0 0;
width: 0.5em;
height: 0.5em;
border: none;
@@ -1858,16 +1956,20 @@ Floated Menu / Item
.ui.vertical.pointing.menu .item:after {
position: absolute;
top: 50%;
- right: 0%;
+ right: 0;
bottom: auto;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
- margin: 0em -0.5px 0em 0em;
+ margin: 0 -0.5px 0 0;
border: none;
border-top: 1px solid #D4D4D5;
border-right: 1px solid #D4D4D5;
}
+.ui.pointing.menu .ui.dropdown .menu .item:after,
+.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
+ display: none;
+}
/* Active */
.ui.pointing.menu .active.item:after {
@@ -1902,20 +2004,65 @@ Floated Menu / Item
.ui.vertical.pointing.menu .menu .active.item:after {
background-color: #FFFFFF;
}
+.ui.inverted.pointing.menu .primary.active.item:after {
+ background-color: #2185D0;
+}
+.ui.inverted.pointing.menu .secondary.active.item:after {
+ background-color: #1B1C1D;
+}
+.ui.inverted.pointing.menu .red.active.item:after {
+ background-color: #DB2828;
+}
+.ui.inverted.pointing.menu .orange.active.item:after {
+ background-color: #F2711C;
+}
+.ui.inverted.pointing.menu .yellow.active.item:after {
+ background-color: #FBBD08;
+}
+.ui.inverted.pointing.menu .olive.active.item:after {
+ background-color: #B5CC18;
+}
+.ui.inverted.pointing.menu .green.active.item:after {
+ background-color: #21BA45;
+}
+.ui.inverted.pointing.menu .teal.active.item:after {
+ background-color: #00B5AD;
+}
+.ui.inverted.pointing.menu .blue.active.item:after {
+ background-color: #2185D0;
+}
+.ui.inverted.pointing.menu .violet.active.item:after {
+ background-color: #6435C9;
+}
+.ui.inverted.pointing.menu .purple.active.item:after {
+ background-color: #A333C8;
+}
+.ui.inverted.pointing.menu .pink.active.item:after {
+ background-color: #E03997;
+}
+.ui.inverted.pointing.menu .brown.active.item:after {
+ background-color: #A5673F;
+}
+.ui.inverted.pointing.menu .grey.active.item:after {
+ background-color: #767676;
+}
+.ui.inverted.pointing.menu .black.active.item:after {
+ background-color: #1B1C1D;
+}
/*--------------
- Attached
----------------*/
+ Attached
+ ---------------*/
/* Middle */
.ui.attached.menu {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em -1px;
- width: calc(100% + 2px );
- max-width: calc(100% + 2px );
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 -1px;
+ width: calc(100% + 2px);
+ max-width: calc(100% + 2px);
-webkit-box-shadow: none;
box-shadow: none;
}
@@ -1925,36 +2072,36 @@ Floated Menu / Item
/* Top */
.ui[class*="top attached"].menu {
- bottom: 0px;
- margin-bottom: 0em;
- top: 0px;
+ bottom: 0;
+ margin-bottom: 0;
+ top: 0;
margin-top: 1rem;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.menu[class*="top attached"]:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
/* Bottom */
.ui[class*="bottom attached"].menu {
- bottom: 0px;
- margin-top: 0em;
- top: 0px;
+ bottom: 0;
+ margin-top: 0;
+ top: 0;
margin-bottom: 1rem;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ border-radius: 0 0 0.25rem 0.25rem;
}
.ui[class*="bottom attached"].menu:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Attached Menu Item */
.ui.top.attached.menu > .item:first-child {
- border-radius: 0.25rem 0em 0em 0em;
+ border-radius: 0.25rem 0 0 0;
}
.ui.bottom.attached.menu > .item:first-child {
- border-radius: 0em 0em 0em 0.25rem;
+ border-radius: 0 0 0 0.25rem;
}
/* Tabular Attached */
@@ -1974,69 +2121,98 @@ Floated Menu / Item
Sizes
---------------*/
-
-/* Mini */
-.ui.mini.menu {
+.ui.menu {
+ font-size: 1rem;
+}
+.ui.vertical.menu {
+ width: 15rem;
+}
+.ui.mini.menu,
+.ui.mini.menu .dropdown,
+.ui.mini.menu .dropdown .menu > .item {
font-size: 0.6875rem;
}
-.ui.mini.vertical.menu {
+.ui.mini.vertical.menu:not(.icon) {
width: 9rem;
}
-
-/* Tiny */
-.ui.tiny.menu {
+.ui.tiny.menu,
+.ui.tiny.menu .dropdown,
+.ui.tiny.menu .dropdown .menu > .item {
font-size: 0.75rem;
}
-.ui.tiny.vertical.menu {
+.ui.tiny.vertical.menu:not(.icon) {
width: 11rem;
}
-
-/* Small */
-.ui.small.menu {
+.ui.small.menu,
+.ui.small.menu .dropdown,
+.ui.small.menu .dropdown .menu > .item {
font-size: 0.8125rem;
}
-.ui.small.vertical.menu {
+.ui.small.vertical.menu:not(.icon) {
width: 13rem;
}
-
-/* Medium */
-.ui.menu {
- font-size: 1rem;
-}
-.ui.vertical.menu {
- width: 15rem;
-}
-
-/* Large */
-.ui.large.menu {
+.ui.large.menu,
+.ui.large.menu .dropdown,
+.ui.large.menu .dropdown .menu > .item {
font-size: 0.9375rem;
}
-.ui.large.vertical.menu {
+.ui.large.vertical.menu:not(.icon) {
width: 18rem;
}
-
-/* Huge */
-.ui.huge.menu {
+.ui.big.menu,
+.ui.big.menu .dropdown,
+.ui.big.menu .dropdown .menu > .item {
+ font-size: 1rem;
+}
+.ui.big.vertical.menu:not(.icon) {
+ width: 20rem;
+}
+.ui.huge.menu,
+.ui.huge.menu .dropdown,
+.ui.huge.menu .dropdown .menu > .item {
font-size: 1.0625rem;
}
-.ui.huge.vertical.menu {
+.ui.huge.vertical.menu:not(.icon) {
width: 22rem;
}
-
-/* Big */
-.ui.big.menu {
- font-size: 1rem;
+.ui.massive.menu,
+.ui.massive.menu .dropdown,
+.ui.massive.menu .dropdown .menu > .item {
+ font-size: 1.125rem;
}
-.ui.big.vertical.menu {
- width: 20rem;
+.ui.massive.vertical.menu:not(.icon) {
+ width: 25rem;
}
-/* Massive */
-.ui.massive.menu {
- font-size: 1.125rem;
+/*-------------------
+ Inverted dropdowns
+--------------------*/
+
+.ui.menu .ui.inverted.inverted.dropdown.item .menu {
+ background: #1B1C1D;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
-.ui.massive.vertical.menu {
- width: 25rem;
+.ui.menu .ui.inverted.dropdown .menu > .item {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+.ui.menu .ui.inverted.dropdown .menu > .active.item {
+ background: transparent !important;
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+.ui.menu .ui.inverted.dropdown .menu > .item:hover {
+ background: rgba(255, 255, 255, 0.08) !important;
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+.ui.menu .ui.inverted.dropdown .menu > .selected.item {
+ background: rgba(255, 255, 255, 0.15) !important;
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+
+/* Vertical */
+.ui.vertical.menu .inverted.dropdown.item .menu {
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
diff --git a/ui/dist/components/menu.min.css b/ui/dist/components/menu.min.css
index 389396a475f..6a1d54465df 100644
--- a/ui/dist/components/menu.min.css
+++ b/ui/dist/components/menu.min.css
@@ -1 +1 @@
-.ui.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1rem 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;font-weight:400;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.25rem;min-height:2.875em}.ui.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.menu:first-child{margin-top:0}.ui.menu:last-child{margin-bottom:0}.ui.menu .menu{margin:0}.ui.menu:not(.vertical)>.menu{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.menu:not(.vertical) .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.menu .item{position:relative;vertical-align:middle;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;padding:.9375em 1.125em;text-transform:none;color:rgba(0,0,0,.87);font-weight:400;-webkit-transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease,-webkit-box-shadow .1s ease}.ui.menu>.item:first-child{border-radius:.25rem 0 0 .25rem}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;height:100%;width:1px;background:rgba(34,36,38,.1)}.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child,.ui.menu .text.item>*{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;line-height:1.3}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:last-child{margin-bottom:0}.ui.menu .item>i.icon{opacity:.9;float:none;margin:0 .3125em 0 0}.ui.menu:not(.vertical) .item>.button{position:relative;top:0;margin:-.5em 0;padding-bottom:.8125em;padding-top:.8125em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-orient:inherit;-webkit-box-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.ui.menu .item>.input{width:100%}.ui.menu:not(.vertical) .item>.input{position:relative;top:0;margin:-.5em 0}.ui.menu .item>.input input{font-size:1em;padding-top:.5em;padding-bottom:.5em}.ui.menu .header.item,.ui.vertical.menu .header.item{margin:0;background:'';text-transform:normal;font-weight:700}.ui.vertical.menu .item>.header:not(.ui){margin:0 0 .5em;font-size:1em;font-weight:700}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{min-width:calc(100% - 1px);border-radius:0 0 .25rem .25rem;background:#fff;margin:0 0 0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.ui.menu .ui.dropdown .menu>.item{margin:0;text-align:left;font-size:1em!important;padding:.8125em 1.125em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-transition:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.selected.item{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.active.item{background:rgba(0,0,0,.03)!important;font-weight:700!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown.item .menu .item:not(.filtered){display:block}.ui.menu .ui.dropdown .menu>.item .icon:not(.dropdown){display:inline-block;font-size:1em!important;float:none;margin:0 .75em 0 0}.ui.secondary.menu .dropdown.item>.menu,.ui.text.menu .dropdown.item>.menu{border-radius:.25rem;margin-top:.3125em}.ui.menu .pointing.dropdown.item .menu{margin-top:.75em}.ui.inverted.menu .search.dropdown.item>.search,.ui.inverted.menu .search.dropdown.item>.text{color:rgba(255,255,255,.9)}.ui.vertical.menu .dropdown.item>.icon{float:right;content:"\f0da";margin-left:1em}.ui.vertical.menu .dropdown.item .menu{left:100%;min-width:0;margin:0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .25rem .25rem .25rem}.ui.vertical.menu .dropdown.item.upward .menu{bottom:0}.ui.vertical.menu .dropdown.item:not(.upward) .menu{top:0}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{-webkit-box-shadow:none;box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label{background:#999;color:#fff;margin-left:1em;padding:.3em .8125em}.ui.vertical.menu .item>.label{background:#999;color:#fff;margin-top:-.15em;margin-bottom:-.15em;padding:.3em .8125em}.ui.menu .item>.floating.label{padding:.3em .8125em}.ui.menu .item>img:not(.ui){display:inline-block;vertical-align:middle;margin:-.3em 0;width:2.5em}.ui.vertical.menu .item>img:not(.ui):only-child{display:block;max-width:100%;width:auto}.ui.menu .list .item:before{background:0 0!important}.ui.vertical.sidebar.menu>.item:first-child:before{display:block!important}.ui.vertical.sidebar.menu>.item::before{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.menu>.ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media only screen and (min-width:768px){.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(34,36,38,.1)}}.ui.link.menu .item:hover,.ui.menu .dropdown.item:hover,.ui.menu .link.item:hover,.ui.menu a.item:hover{cursor:pointer;background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.link.menu .item:active,.ui.menu .link.item:active,.ui.menu a.item:active{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.menu .active.item{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);font-weight:400;-webkit-box-shadow:none;box-shadow:none}.ui.menu .active.item>i.icon{opacity:1}.ui.menu .active.item:hover,.ui.vertical.menu .active.item:hover{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.menu .item.disabled,.ui.menu .item.disabled:hover{cursor:default!important;background-color:transparent!important;color:rgba(40,40,40,.3)!important}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) .left.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto!important}.ui.menu:not(.vertical) .right.item,.ui.menu:not(.vertical) .right.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto!important}.ui.menu .right.item::before,.ui.menu .right.menu>.item::before{right:auto;left:0}.ui.vertical.menu{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui.vertical.menu .item{display:block;background:0 0;border-top:none;border-right:none}.ui.vertical.menu>.item:first-child{border-radius:.25rem .25rem 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .25rem .25rem}.ui.vertical.menu .item>.label{float:right;text-align:center}.ui.vertical.menu .item>i.icon{width:1.18em;float:right;margin:0 0 0 .5em}.ui.vertical.menu .item>.label+i.icon{float:none;margin:0 .5em 0 0}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.vertical.menu .item:first-child:before{display:none!important}.ui.vertical.menu .item>.menu{margin:.5em -1.125em 0}.ui.vertical.menu .menu .item{background:0 0;padding:.5em 1.3125em;font-size:.875em;color:rgba(0,0,0,.5)}.ui.vertical.menu .item .menu .link.item:hover,.ui.vertical.menu .item .menu a.item:hover{color:rgba(0,0,0,.85)}.ui.vertical.menu .menu .item:before{display:none}.ui.vertical.menu .active.item{background:rgba(0,0,0,.05);border-radius:0;-webkit-box-shadow:none;box-shadow:none}.ui.vertical.menu>.active.item:first-child{border-radius:.25rem .25rem 0 0}.ui.vertical.menu>.active.item:last-child{border-radius:0 0 .25rem .25rem}.ui.vertical.menu>.active.item:only-child{border-radius:.25rem}.ui.vertical.menu .active.item .menu .active.item{border-left:none}.ui.vertical.menu .item .menu .active.item{background-color:transparent;font-weight:700;color:rgba(0,0,0,.95)}.ui.tabular.menu{border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border:none;background:none transparent;border-bottom:1px solid #d4d4d5}.ui.tabular.fluid.menu{width:calc(100% + 2px)!important}.ui.tabular.menu .item{background:0 0;border-bottom:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;padding:.9375em 1.4375em;color:rgba(0,0,0,.87)}.ui.tabular.menu .item:before{display:none}.ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)}.ui.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#d4d4d5;font-weight:700;margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none;border-radius:.25rem .25rem 0 0!important}.ui.tabular.menu+.attached:not(.top).segment,.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment{border-top:none;margin-left:0;margin-top:0;margin-right:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + 2px);left:-1px}.ui.bottom.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-top:1px solid #d4d4d5}.ui.bottom.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:none}.ui.bottom.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:-1px 0 0 0;border-radius:0 0 .25rem .25rem!important}.ui.vertical.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:1px solid #d4d4d5}.ui.vertical.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-right:none}.ui.vertical.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 -1px 0 0;border-radius:.25rem 0 0 .25rem!important}.ui.vertical.right.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:none;border-left:1px solid #d4d4d5}.ui.vertical.right.tabular.menu .item{background:0 0;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-left:none}.ui.vertical.right.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 0 0 -1px;border-radius:0 .25rem .25rem 0!important}.ui.tabular.menu .active.dropdown.item{margin-bottom:0;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;border-bottom:none}.ui.pagination.menu{margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.ui.pagination.menu .item:last-child{border-radius:0 .25rem .25rem 0}.ui.compact.menu .item:last-child{border-radius:0 .25rem .25rem 0}.ui.pagination.menu .item:last-child:before{display:none}.ui.pagination.menu .item{min-width:3em;text-align:center}.ui.pagination.menu .icon.item i.icon{vertical-align:top}.ui.pagination.menu .active.item{border-top:none;padding-top:.9375em;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.3125em;margin-right:-.3125em;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu .item{-ms-flex-item-align:center;align-self:center;-webkit-box-shadow:none;box-shadow:none;border:none;padding:.8125em .9375em;margin:0 .3125em;background:0 0;-webkit-transition:color .1s ease;transition:color .1s ease;border-radius:.25rem}.ui.secondary.menu .item:before{display:none!important}.ui.secondary.menu .header.item{border-radius:0;border-right:none;background:none transparent}.ui.secondary.menu .item>img:not(.ui){margin:0}.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.menu .active.item{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.25rem}.ui.secondary.menu .active.item:hover{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.inverted.menu .link.item,.ui.secondary.inverted.menu a.item{color:rgba(255,255,255,.7)!important}.ui.secondary.inverted.menu .dropdown.item:hover,.ui.secondary.inverted.menu .link.item:hover,.ui.secondary.inverted.menu a.item:hover{background:rgba(255,255,255,.08);color:#fff!important}.ui.secondary.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.secondary.item.menu{margin-left:0;margin-right:0}.ui.secondary.item.menu .item:last-child{margin-right:0}.ui.secondary.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu{margin:0 -.9375em}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.4375em 1.3125em}.ui.secondary.vertical.menu>.item{border:none;margin:0 0 .3125em;border-radius:.25rem!important}.ui.secondary.vertical.menu>.header.item{border-radius:0}.ui.vertical.secondary.menu .item>.menu .item{background-color:transparent}.ui.secondary.inverted.menu{background-color:transparent}.ui.secondary.pointing.menu{margin-left:0;margin-right:0;border-bottom:2px solid rgba(34,36,38,.15)}.ui.secondary.pointing.menu .item{border-bottom-color:transparent;border-bottom-style:solid;border-radius:0;-ms-flex-item-align:end;align-self:flex-end;margin:0 0 -2px;padding:.875em 1.125em;border-bottom-width:2px;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.secondary.pointing.menu .header.item{color:rgba(0,0,0,.85)!important}.ui.secondary.pointing.menu .text.item{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.secondary.pointing.menu .item:after{display:none}.ui.secondary.pointing.menu .dropdown.item:hover,.ui.secondary.pointing.menu .link.item:hover,.ui.secondary.pointing.menu a.item:hover{background-color:transparent;color:rgba(0,0,0,.87)}.ui.secondary.pointing.menu .dropdown.item:active,.ui.secondary.pointing.menu .link.item:active,.ui.secondary.pointing.menu a.item:active{background-color:transparent;border-color:rgba(34,36,38,.15)}.ui.secondary.pointing.menu .active.item{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;border-color:#1b1c1d;font-weight:700;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.item:hover{border-color:#1b1c1d;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent}.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right-width:2px;border-right-style:solid;border-right-color:rgba(34,36,38,.15)}.ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-right-style:solid;border-right-color:transparent;border-radius:0!important;margin:0 -2px 0 0;border-right-width:2px}.ui.secondary.vertical.pointing.menu .active.item{border-color:#1b1c1d}.ui.secondary.inverted.pointing.menu{border-color:rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu{border-width:2px;border-color:rgba(34,36,38,.15)}.ui.secondary.inverted.pointing.menu .item{color:rgba(255,255,255,.9)}.ui.secondary.inverted.pointing.menu .header.item{color:#fff!important}.ui.secondary.inverted.pointing.menu .link.item:hover,.ui.secondary.inverted.pointing.menu a.item:hover{color:rgba(0,0,0,.95)}.ui.secondary.inverted.pointing.menu .active.item{border-color:#fff;color:#fff}.ui.text.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;margin:1em -.4375em}.ui.text.menu .item{border-radius:0;-webkit-box-shadow:none;box-shadow:none;-ms-flex-item-align:center;align-self:center;margin:0 0;padding:.3125em .4375em;font-weight:400;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.text.menu .item:before,.ui.text.menu .menu .item:before{display:none!important}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(0,0,0,.85);font-size:.9375em;text-transform:uppercase;font-weight:700}.ui.text.menu .item>img:not(.ui){margin:0}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1em 0}.ui.vertical.text.menu:first-child{margin-top:0}.ui.vertical.text.menu:last-child{margin-bottom:0}.ui.vertical.text.menu .item{margin:.5em 0;padding-left:0;padding-right:0}.ui.vertical.text.menu .item>i.icon{float:none;margin:0 .3125em 0 0}.ui.vertical.text.menu .header.item{margin:.5em 0 .625em}.ui.vertical.text.menu .item:not(.dropdown)>.menu{margin:0}.ui.vertical.text.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.4375em 0}.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.pointing.menu .active.item:after{-webkit-box-shadow:none;box-shadow:none}.ui.text.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.text.menu,.ui.inverted.text.menu .active.item,.ui.inverted.text.menu .item,.ui.inverted.text.menu .item:hover{background-color:transparent!important}.ui.fluid.text.menu{margin-left:0;margin-right:0}.ui.vertical.icon.menu{display:inline-block;width:auto}.ui.icon.menu .item{height:auto;text-align:center;color:#1b1c1d}.ui.icon.menu .item>.icon:not(.dropdown){margin:0;opacity:1}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item>.icon{width:auto;margin:0 auto}.ui.vertical.icon.menu .item>.icon:not(.dropdown){display:block;opacity:1;margin:0 auto;float:none}.ui.inverted.icon.menu .item{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .item{min-width:6em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.labeled.icon.menu .item>.icon:not(.dropdown){height:1em;display:block;font-size:1.6875em!important;margin:0 auto .5rem!important}.ui.fluid.labeled.icon.menu>.item{min-width:0}@media only screen and (max-width:767px){.ui.stackable.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.stackable.menu .item{width:100%!important}.ui.stackable.menu .item:before{position:absolute;content:'';top:auto;bottom:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.stackable.menu .left.item,.ui.stackable.menu .left.menu{margin-right:0!important}.ui.stackable.menu .right.item,.ui.stackable.menu .right.menu{margin-left:0!important}.ui.stackable.menu .left.menu,.ui.stackable.menu .right.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#db2828!important;color:#db2828!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#f2711c!important;color:#f2711c!important}.ui.menu .yellow.active.item,.ui.yellow.menu .active.item{border-color:#fbbd08!important;color:#fbbd08!important}.ui.menu .olive.active.item,.ui.olive.menu .active.item{border-color:#b5cc18!important;color:#b5cc18!important}.ui.green.menu .active.item,.ui.menu .green.active.item{border-color:#21ba45!important;color:#21ba45!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00b5ad!important;color:#00b5ad!important}.ui.blue.menu .active.item,.ui.menu .blue.active.item{border-color:#2185d0!important;color:#2185d0!important}.ui.menu .violet.active.item,.ui.violet.menu .active.item{border-color:#6435c9!important;color:#6435c9!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#a333c8!important;color:#a333c8!important}.ui.menu .pink.active.item,.ui.pink.menu .active.item{border-color:#e03997!important;color:#e03997!important}.ui.brown.menu .active.item,.ui.menu .brown.active.item{border-color:#a5673f!important;color:#a5673f!important}.ui.grey.menu .active.item,.ui.menu .grey.active.item{border-color:#767676!important;color:#767676!important}.ui.inverted.menu{border:0 solid transparent;background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a:not(.ui){background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.menu .item.menu{background:0 0}.ui.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .menu .item,.ui.vertical.inverted.menu .menu .item a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.menu .header.item{margin:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover{color:rgba(225,225,225,.3)}.ui.inverted.menu .dropdown.item:hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.link.inverted.menu .item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.vertical.inverted.menu .item .menu .link.item:hover,.ui.vertical.inverted.menu .item .menu a.item:hover{background:0 0;color:#fff}.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.vertical.menu .item .menu .active.item{background:0 0;color:#fff}.ui.inverted.pointing.menu .active.item:after{background:#3d3e3f!important;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important;border:none!important}.ui.inverted.menu .active.item:hover{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.pointing.menu .active.item:hover:after{background:#3d3e3f!important}.ui.floated.menu{float:left;margin:0 .5rem 0 0}.ui.floated.menu .item:last-child:before{display:none}.ui.right.floated.menu{float:right;margin:0 0 0 .5rem}.ui.inverted.menu .red.active.item,.ui.inverted.red.menu{background-color:#db2828}.ui.inverted.red.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.red.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .orange.active.item,.ui.inverted.orange.menu{background-color:#f2711c}.ui.inverted.orange.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.orange.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .yellow.active.item,.ui.inverted.yellow.menu{background-color:#fbbd08}.ui.inverted.yellow.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.yellow.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .olive.active.item,.ui.inverted.olive.menu{background-color:#b5cc18}.ui.inverted.olive.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.olive.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.green.menu,.ui.inverted.menu .green.active.item{background-color:#21ba45}.ui.inverted.green.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.green.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .teal.active.item,.ui.inverted.teal.menu{background-color:#00b5ad}.ui.inverted.teal.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.teal.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.blue.menu,.ui.inverted.menu .blue.active.item{background-color:#2185d0}.ui.inverted.blue.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.blue.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .violet.active.item,.ui.inverted.violet.menu{background-color:#6435c9}.ui.inverted.violet.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.violet.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .purple.active.item,.ui.inverted.purple.menu{background-color:#a333c8}.ui.inverted.purple.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.purple.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .pink.active.item,.ui.inverted.pink.menu{background-color:#e03997}.ui.inverted.pink.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.pink.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.brown.menu,.ui.inverted.menu .brown.active.item{background-color:#a5673f}.ui.inverted.brown.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.brown.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.grey.menu,.ui.inverted.menu .grey.active.item{background-color:#767676}.ui.inverted.grey.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.grey.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.fitted.menu .item,.ui.fitted.menu .item .menu .item,.ui.menu .fitted.item{padding:0}.ui.horizontally.fitted.menu .item,.ui.horizontally.fitted.menu .item .menu .item,.ui.menu .horizontally.fitted.item{padding-top:.9375em;padding-bottom:.9375em}.ui.menu .vertically.fitted.item,.ui.vertically.fitted.menu .item,.ui.vertically.fitted.menu .item .menu .item{padding-left:1.125em;padding-right:1.125em}.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item:before,.ui.menu .borderless.item:before{background:0 0!important}.ui.compact.menu{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:inline-block}.ui.compact.menu .item:last-child{border-radius:0 .25rem .25rem 0}.ui.compact.menu .item:last-child:before{display:none}.ui.compact.vertical.menu{width:auto!important}.ui.compact.vertical.menu .item:last-child::before{display:block}.ui.menu.fluid,.ui.vertical.menu.fluid{width:100%!important}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.attached.item.menu{margin:0 -1px!important}.ui.item.menu .item:last-child:before{display:none}.ui.menu.two.item .item{width:50%}.ui.menu.three.item .item{width:33.333%}.ui.menu.four.item .item{width:25%}.ui.menu.five.item .item{width:20%}.ui.menu.six.item .item{width:16.666%}.ui.menu.seven.item .item{width:14.285%}.ui.menu.eight.item .item{width:12.5%}.ui.menu.nine.item .item{width:11.11%}.ui.menu.ten.item .item{width:10%}.ui.menu.eleven.item .item{width:9.09%}.ui.menu.twelve.item .item{width:8.333%}.ui.menu.fixed{position:fixed;z-index:101;margin:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{border-radius:0!important}.ui.fixed.menu,.ui[class*="top fixed"].menu{top:0;left:0;right:auto;bottom:auto}.ui[class*="top fixed"].menu{border-top:none;border-left:none;border-right:none}.ui[class*="right fixed"].menu{border-top:none;border-bottom:none;border-right:none;top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui[class*="bottom fixed"].menu{border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;top:auto;right:auto}.ui[class*="left fixed"].menu{border-top:none;border-bottom:none;border-left:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.fixed.menu+.ui.grid{padding-top:2.75rem}.ui.pointing.menu .item:after{visibility:hidden;position:absolute;content:'';top:100%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);background:0 0;margin:.5px 0 0;width:.5em;height:.5em;border:none;border-bottom:1px solid #d4d4d5;border-right:1px solid #d4d4d5;z-index:2;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.vertical.pointing.menu .item:after{position:absolute;top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);margin:0 -.5px 0 0;border:none;border-top:1px solid #d4d4d5;border-right:1px solid #d4d4d5}.ui.pointing.menu .active.item:after{visibility:visible}.ui.pointing.menu .active.dropdown.item:after{visibility:hidden}.ui.pointing.menu .active.item .menu .active.item:after,.ui.pointing.menu .dropdown.active.item:after{display:none}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#fff}.ui.attached.menu{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none}.ui.attached+.ui.attached.menu:not(.top){border-top:none}.ui[class*="top attached"].menu{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.25rem .25rem 0 0}.ui.menu[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].menu{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].menu:last-child{margin-bottom:0}.ui.top.attached.menu>.item:first-child{border-radius:.25rem 0 0 0}.ui.bottom.attached.menu>.item:first-child{border-radius:0 0 0 .25rem}.ui.attached.menu:not(.tabular){border:1px solid #d4d4d5}.ui.attached.inverted.menu{border:none}.ui.attached.tabular.menu{margin-left:0;margin-right:0;width:100%}.ui.mini.menu{font-size:.6875rem}.ui.mini.vertical.menu{width:9rem}.ui.tiny.menu{font-size:.75rem}.ui.tiny.vertical.menu{width:11rem}.ui.small.menu{font-size:.8125rem}.ui.small.vertical.menu{width:13rem}.ui.menu{font-size:1rem}.ui.vertical.menu{width:15rem}.ui.large.menu{font-size:.9375rem}.ui.large.vertical.menu{width:18rem}.ui.huge.menu{font-size:1.0625rem}.ui.huge.vertical.menu{width:22rem}.ui.big.menu{font-size:1rem}.ui.big.vertical.menu{width:20rem}.ui.massive.menu{font-size:1.125rem}.ui.massive.vertical.menu{width:25rem}.ui.segment.homepage-hero .ui.text.menu .item{color:#fff}.ui.segment.homepage-hero .ui.text.menu .item:hover{text-decoration:underline}
\ No newline at end of file
+.ui.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1rem 0;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;font-weight:400;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.25rem;min-height:2.875em}.ui.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.menu:first-child{margin-top:0}.ui.menu:last-child{margin-bottom:0}.ui.menu .menu{margin:0}.ui.menu:not(.vertical)>.menu{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.menu:not(.vertical) .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.menu .item{position:relative;vertical-align:middle;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;padding:.9375em 1.125em;text-transform:none;color:rgba(0,0,0,.87);font-weight:400;-webkit-transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease,-webkit-box-shadow .1s ease}.ui.menu>.item:first-child{border-radius:.25rem 0 0 .25rem}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;height:100%;width:1px;background:rgba(34,36,38,.1)}.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child,.ui.menu .text.item>*{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;line-height:1.3}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:last-child{margin-bottom:0}.ui.menu .item>i.icon{opacity:.9;float:none;margin:0 .3125em 0 0}.ui.menu:not(.vertical) .item>.button{position:relative;top:0;margin:-.5em 0;padding-bottom:.8125em;padding-top:.8125em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-orient:inherit;-webkit-box-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.ui.menu .item>.input{width:100%}.ui.menu:not(.vertical) .item>.input{position:relative;top:0;margin:-.5em 0}.ui.menu .item>.input input{font-size:1em;padding-top:.5em;padding-bottom:.5em}.ui.menu .header.item,.ui.vertical.menu .header.item{margin:0;background:'';text-transform:normal;font-weight:700}.ui.vertical.menu .item>.header:not(.ui){margin:0 0 .5em;font-size:1em;font-weight:700}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{min-width:calc(100% - 1px);border-radius:0 0 .25rem .25rem;background:#fff;margin:0 0 0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.ui.menu .ui.dropdown .menu>.item{margin:0;text-align:left;font-size:1em!important;padding:.8125em 1.125em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-transition:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.selected.item{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.active.item{background:rgba(0,0,0,.03)!important;font-weight:700!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown.item .menu .item:not(.filtered){display:block}.ui.menu .ui.dropdown .menu>.item .icon:not(.dropdown){display:inline-block;font-size:1em!important;float:none;margin:0 .75em 0 0!important}.ui.secondary.menu .dropdown.item>.menu,.ui.text.menu .dropdown.item>.menu{border-radius:.25rem;margin-top:.3125em}.ui.menu .pointing.dropdown.item .menu{margin-top:.75em}.ui.inverted.menu .search.dropdown.item>.search,.ui.inverted.menu .search.dropdown.item>.text{color:rgba(255,255,255,.9)}.ui.vertical.menu .dropdown.item>.icon{float:right;content:"\f0da";margin-left:1em}.ui.vertical.menu .dropdown.item .menu{left:100%;min-width:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;margin:0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .25rem .25rem .25rem}.ui.vertical.menu .dropdown.item.upward .menu{bottom:0}.ui.vertical.menu .dropdown.item:not(.upward) .menu{top:0}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{-webkit-box-shadow:none;box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label:not(.floating){margin-left:1em;padding:.3em .8125em}.ui.vertical.menu .item>.label{margin-top:-.15em;margin-bottom:-.15em;padding:.3em .8125em}.ui.menu .item>.floating.label{padding:.3em .8125em}.ui.menu .item>.label{background:#999;color:#fff}.ui.menu .item>.image.label img{margin:-.2833em .8em -.2833em -.8em;height:1.5666em}.ui.menu .item>img:not(.ui){display:inline-block;vertical-align:middle;margin:-.3em 0;width:2.5em}.ui.vertical.menu .item>img:not(.ui):only-child{display:block;max-width:100%;width:auto}.ui.menu .list .item:before{background:0 0!important}.ui.vertical.sidebar.menu>.item:first-child:before{display:block!important}.ui.vertical.sidebar.menu>.item::before{top:auto;bottom:0}@media only screen and (max-width:767.98px){.ui.menu>.ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media only screen and (min-width:768px){.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(34,36,38,.1)}.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.right.item:not(.borderless):last-child,.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.right.menu>.item:not(.borderless):last-child{border-right:1px solid rgba(34,36,38,.1)}}.ui.link.menu .item:hover,.ui.menu .dropdown.item:hover,.ui.menu .link.item:hover,.ui.menu a.item:hover{cursor:pointer;background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.link.menu .item:active,.ui.menu .link.item:active,.ui.menu a.item:active{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.menu .active.item{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);font-weight:400;-webkit-box-shadow:none;box-shadow:none}.ui.menu .active.item>i.icon{opacity:1}.ui.menu .active.item:hover,.ui.vertical.menu .active.item:hover{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.ui.menu .item.disabled{cursor:default;background-color:transparent;color:rgba(40,40,40,.3);pointer-events:none}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) .left.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto!important}.ui.menu:not(.vertical) .right.item,.ui.menu:not(.vertical) .right.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto!important}.ui.menu:not(.vertical) :not(.dropdown)>.left.menu,.ui.menu:not(.vertical) :not(.dropdown)>.right.menu{display:inherit}.ui.menu:not(.vertical) .center.item,.ui.menu:not(.vertical) .center.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto!important;margin-right:auto!important}.ui.menu .right.item::before,.ui.menu .right.menu>.item::before{right:auto;left:0}.ui.menu .center.item:last-child::before,.ui.menu .center.menu>.item:last-child::before{display:none}.ui.vertical.menu{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui.vertical.menu .item{display:block;background:0 0;border-top:none;border-right:none}.ui.vertical.menu>.item:first-child{border-radius:.25rem .25rem 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .25rem .25rem}.ui.vertical.menu .item>.label{float:right;text-align:center}.ui.vertical.menu .item>i.icon,.ui.vertical.menu .item>i.icons{width:1.18em;float:right;margin:0 0 0 .5em}.ui.vertical.menu .item>.label+i.icon{float:none;margin:0 .5em 0 0}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.vertical.menu .item:first-child:before{display:none!important}.ui.vertical.menu .item>.menu{margin:.5em -1.125em 0}.ui.vertical.menu .menu .item{background:0 0;padding:.5em 1.3125em;font-size:.875em;color:rgba(0,0,0,.5)}.ui.vertical.menu .item .menu .link.item:hover,.ui.vertical.menu .item .menu a.item:hover{color:rgba(0,0,0,.85)}.ui.vertical.menu .menu .item:before{display:none}.ui.vertical.menu .active.item{background:rgba(0,0,0,.05);border-radius:0;-webkit-box-shadow:none;box-shadow:none}.ui.vertical.menu>.active.item:first-child{border-radius:.25rem .25rem 0 0}.ui.vertical.menu>.active.item:last-child{border-radius:0 0 .25rem .25rem}.ui.vertical.menu>.active.item:only-child{border-radius:.25rem}.ui.vertical.menu .active.item .menu .active.item{border-left:none}.ui.vertical.menu .item .menu .active.item{background-color:transparent;font-weight:700;color:rgba(0,0,0,.95)}.ui.tabular.menu{border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border:none;background:none transparent;border-bottom:1px solid #d4d4d5}.ui.tabular.fluid.menu{width:calc(100% + 2px)!important}.ui.tabular.menu .item{background:0 0;border-bottom:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;padding:.9375em 1.4375em;color:rgba(0,0,0,.87)}.ui.tabular.menu .item:before{display:none}.ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)}.ui.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#d4d4d5;font-weight:700;margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none;border-radius:.25rem .25rem 0 0!important}.ui.tabular.menu+.attached:not(.top).segment,.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment{border-top:none;margin-left:0;margin-top:0;margin-right:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + 2px);left:-1px}.ui.bottom.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-top:1px solid #d4d4d5}.ui.bottom.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:none}.ui.bottom.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:-1px 0 0 0;border-radius:0 0 .25rem .25rem!important}.ui.vertical.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:1px solid #d4d4d5}.ui.vertical.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-right:none}.ui.vertical.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 -1px 0 0;border-radius:.25rem 0 0 .25rem!important}.ui.vertical.right.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:none;border-left:1px solid #d4d4d5}.ui.vertical.right.tabular.menu .item{background:0 0;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-left:none}.ui.vertical.right.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 0 0 -1px;border-radius:0 .25rem .25rem 0!important}.ui.tabular.menu .active.dropdown.item{margin-bottom:0;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;border-bottom:none}.ui.pagination.menu{margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.ui.pagination.menu .item:last-child{border-radius:0 .25rem .25rem 0}.ui.compact.menu .item:last-child{border-radius:0 .25rem .25rem 0}.ui.pagination.menu .item:last-child:before{display:none}.ui.pagination.menu .item{min-width:3em;text-align:center}.ui.pagination.menu .icon.item i.icon{vertical-align:top}.ui.pagination.menu .active.item{border-top:none;padding-top:.9375em;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.3125em;margin-right:-.3125em;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu .item{-ms-flex-item-align:center;align-self:center;-webkit-box-shadow:none;box-shadow:none;border:none;padding:.8125em .9375em;margin:0 .3125em;background:0 0;-webkit-transition:color .1s ease;transition:color .1s ease;border-radius:.25rem}.ui.secondary.menu .item:before{display:none!important}.ui.secondary.menu .header.item{border-radius:0;border-right:none;background:none transparent}.ui.secondary.menu .item>img:not(.ui){margin:0}.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.menu .active.item{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.25rem}.ui.secondary.menu .active.item:hover{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.inverted.menu .link.item:not(.disabled),.ui.secondary.inverted.menu a.item:not(.disabled){color:rgba(255,255,255,.7)}.ui.secondary.inverted.menu .dropdown.item:hover,.ui.secondary.inverted.menu .link.item:hover,.ui.secondary.inverted.menu a.item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.secondary.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff}.ui.secondary.item.menu{margin-left:0;margin-right:0}.ui.secondary.item.menu .item:last-child{margin-right:0}.ui.secondary.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu{margin:0 -.9375em}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.4375em 1.3125em}.ui.secondary.vertical.menu>.item{border:none;margin:0 0 .3125em;border-radius:.25rem!important}.ui.secondary.vertical.menu>.header.item{border-radius:0}.ui.vertical.secondary.menu .item>.menu .item{background-color:transparent}.ui.secondary.inverted.menu{background-color:transparent}.ui.secondary.pointing.menu{margin-left:0;margin-right:0;border-bottom:2px solid rgba(34,36,38,.15)}.ui.secondary.pointing.menu .item{border-bottom-color:transparent;border-bottom-style:solid;border-radius:0;-ms-flex-item-align:end;align-self:flex-end;margin:0 0 -2px;padding:.875em 1.125em;border-bottom-width:2px;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.secondary.pointing.menu .ui.dropdown .menu .item{border-bottom-width:0}.ui.secondary.pointing.menu .item>.label:not(.floating){margin-top:-.3em;margin-bottom:-.3em}.ui.secondary.pointing.menu .item>.circular.label{margin-top:-.5em;margin-bottom:-.5em}.ui.secondary.pointing.menu .header.item{color:rgba(0,0,0,.85)!important}.ui.secondary.pointing.menu .text.item{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.secondary.pointing.menu .item:after{display:none}.ui.secondary.pointing.menu .dropdown.item:hover,.ui.secondary.pointing.menu .link.item:hover,.ui.secondary.pointing.menu a.item:hover{background-color:transparent;color:rgba(0,0,0,.87)}.ui.secondary.pointing.menu .dropdown.item:active,.ui.secondary.pointing.menu .link.item:active,.ui.secondary.pointing.menu a.item:active{background-color:transparent;border-color:rgba(34,36,38,.15)}.ui.secondary.pointing.menu .active.item{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;border-color:currentColor;font-weight:700;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.item:hover{border-color:currentColor;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent}.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right-width:2px;border-right-style:solid;border-right-color:rgba(34,36,38,.15)}.ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-right-style:solid;border-right-color:transparent;border-radius:0!important;margin:0 -2px 0 0;border-right-width:2px}.ui.secondary.vertical.pointing.menu .active.item{border-color:currentColor}.ui.secondary.inverted.pointing.menu{border-color:rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu .item:not(.disabled){color:rgba(255,255,255,.9)}.ui.secondary.inverted.pointing.menu .header.item{color:#fff!important}.ui.secondary.inverted.pointing.menu .link.item:hover,.ui.secondary.inverted.pointing.menu a.item:hover{color:#fff}.ui.ui.secondary.inverted.pointing.menu .active.item{border-color:#fff;color:#fff;background-color:transparent}.ui.text.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;margin:1em -.4375em}.ui.text.menu .item{border-radius:0;-webkit-box-shadow:none;box-shadow:none;-ms-flex-item-align:center;align-self:center;margin:0 0;padding:.3125em .4375em;font-weight:400;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.text.menu .item:before,.ui.text.menu .menu .item:before{display:none!important}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(0,0,0,.85);font-size:.9375em;text-transform:uppercase;font-weight:700}.ui.text.menu .item>img:not(.ui){margin:0}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1em 0}.ui.vertical.text.menu:first-child{margin-top:0}.ui.vertical.text.menu:last-child{margin-bottom:0}.ui.vertical.text.menu .item{margin:.5em 0;padding-left:0;padding-right:0}.ui.vertical.text.menu .item>i.icon{float:none;margin:0 .3125em 0 0}.ui.vertical.text.menu .header.item{margin:.5em 0 .625em}.ui.vertical.text.menu .item:not(.dropdown)>.menu{margin:0}.ui.vertical.text.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.4375em 0}.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.pointing.menu .active.item:after{-webkit-box-shadow:none;box-shadow:none}.ui.text.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.text.menu,.ui.inverted.text.menu .active.item,.ui.inverted.text.menu .item,.ui.inverted.text.menu .item:hover{background-color:transparent}.ui.fluid.text.menu{margin-left:0;margin-right:0}.ui.vertical.icon.menu{display:inline-block;width:auto}.ui.icon.menu .item{height:auto;text-align:center;color:#1b1c1d}.ui.icon.menu .item>.icon:not(.dropdown){margin:0;opacity:1}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item>.icon{width:auto;margin:0 auto}.ui.vertical.icon.menu .item>.icon:not(.dropdown){display:block;opacity:1;margin:0 auto;float:none}.ui.inverted.icon.menu .item{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .item{min-width:6em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.labeled.icon.menu>.item>.icon:not(.dropdown){height:1em;display:block;font-size:1.6875em!important;margin:0 auto .5rem!important}.ui.fluid.labeled.icon.menu>.item{min-width:0}@media only screen and (max-width:767.98px){.ui.stackable.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.stackable.menu .item{width:100%!important}.ui.stackable.menu .item:before{position:absolute;content:'';top:auto;bottom:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.stackable.menu .left.item,.ui.stackable.menu .left.menu{margin-right:0!important}.ui.stackable.menu .right.item,.ui.stackable.menu .right.menu{margin-left:0!important}.ui.stackable.menu .center.item,.ui.stackable.menu .center.menu{margin-left:0!important;margin-right:0!important}.ui.stackable.menu .center.menu,.ui.stackable.menu .left.menu,.ui.stackable.menu .right.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.ui.ui.primary.menu .active.item,.ui.ui.primary.menu .active.item:hover,.ui.ui.ui.menu .primary.active.item{color:#2185d0}.ui.ui.red.menu .active.item,.ui.ui.red.menu .active.item:hover,.ui.ui.ui.menu .red.active.item{color:#db2828}.ui.ui.orange.menu .active.item,.ui.ui.orange.menu .active.item:hover,.ui.ui.ui.menu .orange.active.item{color:#f2711c}.ui.ui.ui.menu .yellow.active.item,.ui.ui.yellow.menu .active.item,.ui.ui.yellow.menu .active.item:hover{color:#fbbd08}.ui.ui.olive.menu .active.item,.ui.ui.olive.menu .active.item:hover,.ui.ui.ui.menu .olive.active.item{color:#b5cc18}.ui.ui.green.menu .active.item,.ui.ui.green.menu .active.item:hover,.ui.ui.ui.menu .green.active.item{color:#21ba45}.ui.ui.teal.menu .active.item,.ui.ui.teal.menu .active.item:hover,.ui.ui.ui.menu .teal.active.item{color:#00b5ad}.ui.ui.blue.menu .active.item,.ui.ui.blue.menu .active.item:hover,.ui.ui.ui.menu .blue.active.item{color:#2185d0}.ui.ui.ui.menu .violet.active.item,.ui.ui.violet.menu .active.item,.ui.ui.violet.menu .active.item:hover{color:#6435c9}.ui.ui.purple.menu .active.item,.ui.ui.purple.menu .active.item:hover,.ui.ui.ui.menu .purple.active.item{color:#a333c8}.ui.ui.pink.menu .active.item,.ui.ui.pink.menu .active.item:hover,.ui.ui.ui.menu .pink.active.item{color:#e03997}.ui.ui.brown.menu .active.item,.ui.ui.brown.menu .active.item:hover,.ui.ui.ui.menu .brown.active.item{color:#a5673f}.ui.ui.grey.menu .active.item,.ui.ui.grey.menu .active.item:hover,.ui.ui.ui.menu .grey.active.item{color:#767676}.ui.ui.black.menu .active.item,.ui.ui.black.menu .active.item:hover,.ui.ui.ui.menu .black.active.item{color:#1b1c1d}.ui.inverted.menu{border:0 solid transparent;background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a:not(.ui){background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.menu .item.menu{background:0 0}.ui.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .menu .item,.ui.vertical.inverted.menu .menu .item a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.menu .header.item{margin:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.ui.ui.inverted.menu .item.disabled{color:rgba(225,225,225,.3)}.ui.inverted.menu .dropdown.item:hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.link.inverted.menu .item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.vertical.inverted.menu .item .menu .link.item:hover,.ui.vertical.inverted.menu .item .menu a.item:hover{background:0 0;color:#fff}.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.menu .active.item{background:#3d3e3f;color:#fff!important}.ui.inverted.vertical.menu .item .menu .active.item{background:0 0;color:#fff}.ui.inverted.pointing.menu .active.item:after{background:#3d3e3f;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important;border:none!important}.ui.inverted.menu .active.item:hover{background:#3d3e3f;color:#fff!important}.ui.inverted.pointing.menu .active.item:hover:after{background:#3d3e3f}.ui.floated.menu{float:left;margin:0 .5rem 0 0}.ui.floated.menu .item:last-child:before{display:none}.ui.right.floated.menu{float:right;margin:0 0 0 .5rem}.ui.ui.inverted.primary.menu,.ui.ui.ui.inverted.menu .primary.active.item{background-color:#2185d0}.ui.inverted.primary.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.primary.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.primary.menu .active.item{background-color:#1678c2}.ui.ui.inverted.red.menu,.ui.ui.ui.inverted.menu .red.active.item{background-color:#db2828}.ui.inverted.red.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.red.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.red.menu .active.item{background-color:#d01919}.ui.ui.inverted.orange.menu,.ui.ui.ui.inverted.menu .orange.active.item{background-color:#f2711c}.ui.inverted.orange.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.orange.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.orange.menu .active.item{background-color:#f26202}.ui.ui.inverted.yellow.menu,.ui.ui.ui.inverted.menu .yellow.active.item{background-color:#fbbd08}.ui.inverted.yellow.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.yellow.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.yellow.menu .active.item{background-color:#eaae00}.ui.ui.inverted.olive.menu,.ui.ui.ui.inverted.menu .olive.active.item{background-color:#b5cc18}.ui.inverted.olive.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.olive.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.olive.menu .active.item{background-color:#a7bd0d}.ui.ui.inverted.green.menu,.ui.ui.ui.inverted.menu .green.active.item{background-color:#21ba45}.ui.inverted.green.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.green.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.green.menu .active.item{background-color:#16ab39}.ui.ui.inverted.teal.menu,.ui.ui.ui.inverted.menu .teal.active.item{background-color:#00b5ad}.ui.inverted.teal.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.teal.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.teal.menu .active.item{background-color:#009c95}.ui.ui.inverted.blue.menu,.ui.ui.ui.inverted.menu .blue.active.item{background-color:#2185d0}.ui.inverted.blue.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.blue.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.blue.menu .active.item{background-color:#1678c2}.ui.ui.inverted.violet.menu,.ui.ui.ui.inverted.menu .violet.active.item{background-color:#6435c9}.ui.inverted.violet.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.violet.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.violet.menu .active.item{background-color:#5829bb}.ui.ui.inverted.purple.menu,.ui.ui.ui.inverted.menu .purple.active.item{background-color:#a333c8}.ui.inverted.purple.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.purple.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.purple.menu .active.item{background-color:#9627ba}.ui.ui.inverted.pink.menu,.ui.ui.ui.inverted.menu .pink.active.item{background-color:#e03997}.ui.inverted.pink.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.pink.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.pink.menu .active.item{background-color:#e61a8d}.ui.ui.inverted.brown.menu,.ui.ui.ui.inverted.menu .brown.active.item{background-color:#a5673f}.ui.inverted.brown.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.brown.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.brown.menu .active.item{background-color:#975b33}.ui.ui.inverted.grey.menu,.ui.ui.ui.inverted.menu .grey.active.item{background-color:#767676}.ui.inverted.grey.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.grey.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.grey.menu .active.item{background-color:#838383}.ui.ui.inverted.black.menu,.ui.ui.ui.inverted.menu .black.active.item{background-color:#1b1c1d}.ui.inverted.black.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.ui.inverted.black.menu .active.item{background-color:rgba(0,0,0,.1)}.ui.inverted.pointing.black.menu .active.item{background-color:#27292a}.ui.ui.ui.inverted.pointing.menu .active.item:after{background-color:inherit}.ui.fitted.menu .item,.ui.fitted.menu .item .menu .item,.ui.menu .fitted.item{padding:0}.ui.horizontally.fitted.menu .item,.ui.horizontally.fitted.menu .item .menu .item,.ui.menu .horizontally.fitted.item{padding-top:.9375em;padding-bottom:.9375em}.ui.menu .vertically.fitted.item,.ui.vertically.fitted.menu .item,.ui.vertically.fitted.menu .item .menu .item{padding-left:1.125em;padding-right:1.125em}.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item:before,.ui.menu .borderless.item:before{background:0 0!important}.ui.compact.menu{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:-ms-inline-flexbox!important;display:inline-block}.ui.compact.menu:not(.secondary) .item:last-child{border-radius:0 .25rem .25rem 0}.ui.compact.menu .item:last-child:before{display:none}.ui.compact.vertical.menu{width:auto!important}.ui.compact.vertical.menu .item:last-child::before{display:block}.ui.menu.fluid,.ui.vertical.menu.fluid{width:100%!important}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.attached.item.menu:not(.tabular){margin:0 -1px!important}.ui.item.menu .item:last-child:before{display:none}.ui.menu.two.item .item{width:50%}.ui.menu.three.item .item{width:33.333%}.ui.menu.four.item .item{width:25%}.ui.menu.five.item .item{width:20%}.ui.menu.six.item .item{width:16.666%}.ui.menu.seven.item .item{width:14.285%}.ui.menu.eight.item .item{width:12.5%}.ui.menu.nine.item .item{width:11.11%}.ui.menu.ten.item .item{width:10%}.ui.menu.eleven.item .item{width:9.09%}.ui.menu.twelve.item .item{width:8.333%}.ui.menu.fixed{position:fixed;z-index:101;margin:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{border-radius:0!important}.ui.fixed.menu,.ui[class*="top fixed"].menu{top:0;left:0;right:auto;bottom:auto}.ui[class*="top fixed"].menu{border-top:none;border-left:none;border-right:none}.ui[class*="right fixed"].menu{border-top:none;border-bottom:none;border-right:none;top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui[class*="bottom fixed"].menu{border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;top:auto;right:auto}.ui[class*="left fixed"].menu{border-top:none;border-bottom:none;border-left:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.fixed.menu+.ui.grid{padding-top:2.75rem}.ui.pointing.menu .item:after{visibility:hidden;position:absolute;content:'';top:100%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);background:0 0;margin:.5px 0 0;width:.5em;height:.5em;border:none;border-bottom:1px solid #d4d4d5;border-right:1px solid #d4d4d5;z-index:2;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.vertical.pointing.menu .item:after{position:absolute;top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);margin:0 -.5px 0 0;border:none;border-top:1px solid #d4d4d5;border-right:1px solid #d4d4d5}.ui.pointing.menu .ui.dropdown .menu .item:after,.ui.vertical.pointing.menu .ui.dropdown .menu .item:after{display:none}.ui.pointing.menu .active.item:after{visibility:visible}.ui.pointing.menu .active.dropdown.item:after{visibility:hidden}.ui.pointing.menu .active.item .menu .active.item:after,.ui.pointing.menu .dropdown.active.item:after{display:none}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#fff}.ui.inverted.pointing.menu .primary.active.item:after{background-color:#2185d0}.ui.inverted.pointing.menu .secondary.active.item:after{background-color:#1b1c1d}.ui.inverted.pointing.menu .red.active.item:after{background-color:#db2828}.ui.inverted.pointing.menu .orange.active.item:after{background-color:#f2711c}.ui.inverted.pointing.menu .yellow.active.item:after{background-color:#fbbd08}.ui.inverted.pointing.menu .olive.active.item:after{background-color:#b5cc18}.ui.inverted.pointing.menu .green.active.item:after{background-color:#21ba45}.ui.inverted.pointing.menu .teal.active.item:after{background-color:#00b5ad}.ui.inverted.pointing.menu .blue.active.item:after{background-color:#2185d0}.ui.inverted.pointing.menu .violet.active.item:after{background-color:#6435c9}.ui.inverted.pointing.menu .purple.active.item:after{background-color:#a333c8}.ui.inverted.pointing.menu .pink.active.item:after{background-color:#e03997}.ui.inverted.pointing.menu .brown.active.item:after{background-color:#a5673f}.ui.inverted.pointing.menu .grey.active.item:after{background-color:#767676}.ui.inverted.pointing.menu .black.active.item:after{background-color:#1b1c1d}.ui.attached.menu{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none}.ui.attached+.ui.attached.menu:not(.top){border-top:none}.ui[class*="top attached"].menu{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.25rem .25rem 0 0}.ui.menu[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].menu{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].menu:last-child{margin-bottom:0}.ui.top.attached.menu>.item:first-child{border-radius:.25rem 0 0 0}.ui.bottom.attached.menu>.item:first-child{border-radius:0 0 0 .25rem}.ui.attached.menu:not(.tabular){border:1px solid #d4d4d5}.ui.attached.inverted.menu{border:none}.ui.attached.tabular.menu{margin-left:0;margin-right:0;width:100%}.ui.menu{font-size:1rem}.ui.vertical.menu{width:15rem}.ui.mini.menu,.ui.mini.menu .dropdown,.ui.mini.menu .dropdown .menu>.item{font-size:.6875rem}.ui.mini.vertical.menu:not(.icon){width:9rem}.ui.tiny.menu,.ui.tiny.menu .dropdown,.ui.tiny.menu .dropdown .menu>.item{font-size:.75rem}.ui.tiny.vertical.menu:not(.icon){width:11rem}.ui.small.menu,.ui.small.menu .dropdown,.ui.small.menu .dropdown .menu>.item{font-size:.8125rem}.ui.small.vertical.menu:not(.icon){width:13rem}.ui.large.menu,.ui.large.menu .dropdown,.ui.large.menu .dropdown .menu>.item{font-size:.9375rem}.ui.large.vertical.menu:not(.icon){width:18rem}.ui.big.menu,.ui.big.menu .dropdown,.ui.big.menu .dropdown .menu>.item{font-size:1rem}.ui.big.vertical.menu:not(.icon){width:20rem}.ui.huge.menu,.ui.huge.menu .dropdown,.ui.huge.menu .dropdown .menu>.item{font-size:1.0625rem}.ui.huge.vertical.menu:not(.icon){width:22rem}.ui.massive.menu,.ui.massive.menu .dropdown,.ui.massive.menu .dropdown .menu>.item{font-size:1.125rem}.ui.massive.vertical.menu:not(.icon){width:25rem}.ui.menu .ui.inverted.inverted.dropdown.item .menu{background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none}.ui.menu .ui.inverted.dropdown .menu>.item{color:rgba(255,255,255,.8)!important}.ui.menu .ui.inverted.dropdown .menu>.active.item{background:0 0!important;color:rgba(255,255,255,.8)!important}.ui.menu .ui.inverted.dropdown .menu>.item:hover{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.8)!important}.ui.menu .ui.inverted.dropdown .menu>.selected.item{background:rgba(255,255,255,.15)!important;color:rgba(255,255,255,.8)!important}.ui.vertical.menu .inverted.dropdown.item .menu{-webkit-box-shadow:none;box-shadow:none}.ui.segment.homepage-hero .ui.text.menu .item{color:#fff}.ui.segment.homepage-hero .ui.text.menu .item:hover{text-decoration:underline}
\ No newline at end of file
diff --git a/ui/dist/components/message.css b/ui/dist/components/message.css
index 4e9ff7862d5..c7393431e42 100644
--- a/ui/dist/components/message.css
+++ b/ui/dist/components/message.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Message
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Message
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -16,7 +16,7 @@
.ui.message {
position: relative;
min-height: 1em;
- margin: 1em 0em;
+ margin: 1em 0;
background: #F8F8F9;
padding: 1em 1.5em;
line-height: 1.5em;
@@ -26,14 +26,14 @@
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
border-radius: 0.25rem;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
}
.ui.message:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
@@ -46,7 +46,7 @@
display: block;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: bold;
- margin: -0.14285714em 0em 0rem 0em;
+ margin: -0.14285714em 0 0 0;
}
/* Default font size */
@@ -57,13 +57,13 @@
/* Paragraph */
.ui.message p {
opacity: 0.85;
- margin: 0.75em 0em;
+ margin: 0.75em 0;
}
.ui.message p:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.message .header + p {
margin-top: 0.25em;
@@ -72,22 +72,22 @@
/* List */
.ui.message .list:not(.ui) {
text-align: left;
- padding: 0em;
+ padding: 0;
opacity: 0.85;
list-style-position: inside;
- margin: 0.5em 0em 0em;
+ margin: 0.5em 0 0;
}
.ui.message .list:not(.ui):first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message .list:not(.ui):last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.message .list:not(.ui) li {
position: relative;
list-style-type: none;
- margin: 0em 0em 0.3em 1em;
- padding: 0em;
+ margin: 0 0 0.3em 1em;
+ padding: 0;
}
.ui.message .list:not(.ui) li:before {
position: absolute;
@@ -97,7 +97,7 @@
vertical-align: baseline;
}
.ui.message .list:not(.ui) li:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Icon */
@@ -109,7 +109,7 @@
.ui.message > .close.icon {
cursor: pointer;
position: absolute;
- margin: 0em;
+ margin: 0;
top: 0.75em;
right: 0.5em;
opacity: 0.7;
@@ -122,10 +122,10 @@
/* First / Last Element */
.ui.message > :first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message > :last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -134,7 +134,7 @@
*******************************/
.ui.dropdown .menu > .message {
- margin: 0px -1px;
+ margin: 0 -1px;
}
@@ -171,8 +171,8 @@
/*--------------
- Compact
----------------*/
+ Compact
+ ---------------*/
.ui.compact.message {
display: inline-block;
@@ -181,29 +181,30 @@
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
+ width: auto;
}
/*--------------
- Attached
----------------*/
+ Attached
+ ---------------*/
.ui.attached.message {
margin-bottom: -1px;
- border-radius: 0.25rem 0.25rem 0em 0em;
- -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;
- box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;
+ border-radius: 0.25rem 0.25rem 0 0;
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
margin-left: -1px;
margin-right: -1px;
}
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
margin-top: -1px;
- border-radius: 0em;
+ border-radius: 0;
}
.ui.bottom.attached.message {
margin-top: -1px;
- border-radius: 0em 0em 0.25rem 0.25rem;
- -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
+ border-radius: 0 0 0.25rem 0.25rem;
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
}
.ui.bottom.attached.message:not(:last-child) {
margin-bottom: 1em;
@@ -213,8 +214,8 @@
}
/*--------------
- Icon
----------------*/
+ Icon
+ ---------------*/
.ui.icon.message {
display: -webkit-box;
@@ -244,130 +245,170 @@
vertical-align: middle;
}
.ui.icon.message .icon:not(.close) + .content {
- padding-left: 0rem;
+ padding-left: 0;
}
.ui.icon.message .circular.icon {
width: 1em;
}
/*--------------
- Floating
----------------*/
+ Floating
+ ---------------*/
.ui.floating.message {
- -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
/*--------------
Colors
---------------*/
-.ui.black.message {
- background-color: #1B1C1D;
- color: rgba(255, 255, 255, 0.9);
-}
/*--------------
Types
---------------*/
-
-/* Positive */
.ui.positive.message {
background-color: #FCFFF5;
color: #2C662D;
}
.ui.positive.message,
.ui.attached.positive.message {
- -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.positive.message {
+ -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.positive.message .header {
color: #1A531B;
}
-
-/* Negative */
.ui.negative.message {
background-color: #FFF6F6;
color: #9F3A38;
}
.ui.negative.message,
.ui.attached.negative.message {
- -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.negative.message {
+ -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.negative.message .header {
color: #912D2B;
}
-
-/* Info */
.ui.info.message {
background-color: #F8FFFF;
color: #276F86;
}
.ui.info.message,
.ui.attached.info.message {
- -webkit-box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.info.message {
+ -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.info.message .header {
color: #0E566C;
}
-
-/* Warning */
.ui.warning.message {
background-color: #FFFAF3;
color: #573A08;
}
.ui.warning.message,
.ui.attached.warning.message {
- -webkit-box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.warning.message {
+ -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.warning.message .header {
color: #794B02;
}
-
-/* Error */
.ui.error.message {
background-color: #FFF6F6;
color: #9F3A38;
}
.ui.error.message,
.ui.attached.error.message {
- -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.error.message {
+ -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.error.message .header {
color: #912D2B;
}
-
-/* Success */
.ui.success.message {
background-color: #FCFFF5;
color: #2C662D;
}
.ui.success.message,
.ui.attached.success.message {
- -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+ -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.success.message {
+ -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.success.message .header {
color: #1A531B;
}
-
-/* Colors */
-.ui.inverted.message,
-.ui.black.message {
- background-color: #1B1C1D;
+.ui.primary.message {
+ background-color: #DFF0FF;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.primary.message,
+.ui.attached.primary.message {
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.primary.message {
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.primary.message .header {
+ color: rgba(242, 242, 242, 0.9);
+}
+.ui.secondary.message {
+ background-color: #F4F4F4;
color: rgba(255, 255, 255, 0.9);
}
+.ui.secondary.message,
+.ui.attached.secondary.message {
+ -webkit-box-shadow: 0 0 0 1px #1B1C1D inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #1B1C1D inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.secondary.message {
+ -webkit-box-shadow: 0 0 0 1px #1B1C1D inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #1B1C1D inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.secondary.message .header {
+ color: rgba(242, 242, 242, 0.9);
+}
.ui.red.message {
background-color: #FFE8E6;
color: #DB2828;
- -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.red.message,
+.ui.attached.red.message {
+ -webkit-box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.red.message {
+ -webkit-box-shadow: 0 0 0 1px #DB2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #DB2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.red.message .header {
color: #c82121;
@@ -375,8 +416,15 @@
.ui.orange.message {
background-color: #FFEDDE;
color: #F2711C;
- -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.orange.message,
+.ui.attached.orange.message {
+ -webkit-box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.orange.message {
+ -webkit-box-shadow: 0 0 0 1px #F2711C inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #F2711C inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.orange.message .header {
color: #e7640d;
@@ -384,8 +432,15 @@
.ui.yellow.message {
background-color: #FFF8DB;
color: #B58105;
- -webkit-box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.yellow.message,
+.ui.attached.yellow.message {
+ -webkit-box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.yellow.message {
+ -webkit-box-shadow: 0 0 0 1px #B58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #B58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.yellow.message .header {
color: #9c6f04;
@@ -393,8 +448,15 @@
.ui.olive.message {
background-color: #FBFDEF;
color: #8ABC1E;
- -webkit-box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.olive.message,
+.ui.attached.olive.message {
+ -webkit-box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.olive.message {
+ -webkit-box-shadow: 0 0 0 1px #8ABC1E inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #8ABC1E inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.olive.message .header {
color: #7aa61a;
@@ -402,8 +464,15 @@
.ui.green.message {
background-color: #E5F9E7;
color: #1EBC30;
- -webkit-box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.green.message,
+.ui.attached.green.message {
+ -webkit-box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.green.message {
+ -webkit-box-shadow: 0 0 0 1px #1EBC30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #1EBC30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.green.message .header {
color: #1aa62a;
@@ -411,8 +480,15 @@
.ui.teal.message {
background-color: #E1F7F7;
color: #10A3A3;
- -webkit-box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.teal.message,
+.ui.attached.teal.message {
+ -webkit-box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.teal.message {
+ -webkit-box-shadow: 0 0 0 1px #10A3A3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #10A3A3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.teal.message .header {
color: #0e8c8c;
@@ -420,8 +496,15 @@
.ui.blue.message {
background-color: #DFF0FF;
color: #2185D0;
- -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.blue.message,
+.ui.attached.blue.message {
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.blue.message {
+ -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.blue.message .header {
color: #1e77ba;
@@ -429,8 +512,15 @@
.ui.violet.message {
background-color: #EAE7FF;
color: #6435C9;
- -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.violet.message,
+.ui.attached.violet.message {
+ -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.violet.message {
+ -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.violet.message .header {
color: #5a30b5;
@@ -438,8 +528,15 @@
.ui.purple.message {
background-color: #F6E7FF;
color: #A333C8;
- -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.purple.message,
+.ui.attached.purple.message {
+ -webkit-box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.purple.message {
+ -webkit-box-shadow: 0 0 0 1px #A333C8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #A333C8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.purple.message .header {
color: #922eb4;
@@ -447,8 +544,15 @@
.ui.pink.message {
background-color: #FFE3FB;
color: #E03997;
- -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.pink.message,
+.ui.attached.pink.message {
+ -webkit-box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.pink.message {
+ -webkit-box-shadow: 0 0 0 1px #E03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #E03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.pink.message .header {
color: #dd238b;
@@ -456,17 +560,54 @@
.ui.brown.message {
background-color: #F1E2D3;
color: #A5673F;
- -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
- box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.ui.brown.message,
+.ui.attached.brown.message {
+ -webkit-box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.brown.message {
+ -webkit-box-shadow: 0 0 0 1px #A5673F inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #A5673F inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
.ui.brown.message .header {
color: #935b38;
}
+.ui.grey.message {
+ background-color: #F4F4F4;
+ color: #767676;
+}
+.ui.grey.message,
+.ui.attached.grey.message {
+ -webkit-box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.grey.message {
+ -webkit-box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.grey.message .header {
+ color: #696969;
+}
+.ui.black.message {
+ background-color: #1B1C1D;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.black.message .header {
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.message {
+ background-color: #1B1C1D;
+ color: rgba(255, 255, 255, 0.9);
+}
/*--------------
Sizes
---------------*/
+.ui.message {
+ font-size: 1em;
+}
.ui.mini.message {
font-size: 0.8125em;
}
@@ -476,9 +617,6 @@
.ui.small.message {
font-size: 0.9375em;
}
-.ui.message {
- font-size: 1em;
-}
.ui.large.message {
font-size: 1.125em;
}
diff --git a/ui/dist/components/message.min.css b/ui/dist/components/message.min.css
index aec5862c5eb..1f012fdb1cd 100644
--- a/ui/dist/components/message.min.css
+++ b/ui/dist/components/message.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Message
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Message
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.message{position:relative;min-height:1em;margin:1em 0;background:#f8f8f9;padding:1em 1.5em;line-height:1.5em;color:rgba(0,0,0,.87);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;border-radius:.25rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent;box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent}.ui.message:first-child{margin-top:0}.ui.message:last-child{margin-bottom:0}.ui.message .header{display:block;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;margin:-.14285714em 0 0 0}.ui.message .header:not(.ui){font-size:1.125em}.ui.message p{opacity:.85;margin:.75em 0}.ui.message p:first-child{margin-top:0}.ui.message p:last-child{margin-bottom:0}.ui.message .header+p{margin-top:.25em}.ui.message .list:not(.ui){text-align:left;padding:0;opacity:.85;list-style-position:inside;margin:.5em 0 0}.ui.message .list:not(.ui):first-child{margin-top:0}.ui.message .list:not(.ui):last-child{margin-bottom:0}.ui.message .list:not(.ui) li{position:relative;list-style-type:none;margin:0 0 .3em 1em;padding:0}.ui.message .list:not(.ui) li:before{position:absolute;content:'•';left:-1em;height:100%;vertical-align:baseline}.ui.message .list:not(.ui) li:last-child{margin-bottom:0}.ui.message>.icon{margin-right:.6em}.ui.message>.close.icon{cursor:pointer;position:absolute;margin:0;top:.75em;right:.5em;opacity:.7;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.message>.close.icon:hover{opacity:1}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.dropdown .menu>.message{margin:0 -1px}.ui.visible.visible.visible.visible.message{display:block}.ui.icon.visible.visible.visible.visible.message{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.hidden.hidden.hidden.hidden.message{display:none}.ui.compact.message{display:inline-block}.ui.compact.icon.message{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ui.attached.message{margin-bottom:-1px;border-radius:.25rem .25rem 0 0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;margin-left:-1px;margin-right:-1px}.ui.attached+.ui.attached.message:not(.top):not(.bottom){margin-top:-1px;border-radius:0}.ui.bottom.attached.message{margin-top:-1px;border-radius:0 0 .25rem .25rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15)}.ui.bottom.attached.message:not(:last-child){margin-bottom:1em}.ui.attached.icon.message{width:auto}.ui.icon.message{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.icon.message>.icon:not(.close){display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;line-height:1;vertical-align:middle;font-size:3em;opacity:.8}.ui.icon.message>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;vertical-align:middle}.ui.icon.message .icon:not(.close)+.content{padding-left:0}.ui.icon.message .circular.icon{width:1em}.ui.floating.message{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.black.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.positive.message{background-color:#fcfff5;color:#2c662d}.ui.attached.positive.message,.ui.positive.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.positive.message .header{color:#1a531b}.ui.negative.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.negative.message,.ui.negative.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.negative.message .header{color:#912d2b}.ui.info.message{background-color:#f8ffff;color:#276f86}.ui.attached.info.message,.ui.info.message{-webkit-box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent}.ui.info.message .header{color:#0e566c}.ui.warning.message{background-color:#fffaf3;color:#573a08}.ui.attached.warning.message,.ui.warning.message{-webkit-box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent}.ui.warning.message .header{color:#794b02}.ui.error.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.error.message,.ui.error.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.error.message .header{color:#912d2b}.ui.success.message{background-color:#fcfff5;color:#2c662d}.ui.attached.success.message,.ui.success.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.success.message .header{color:#1a531b}.ui.black.message,.ui.inverted.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.red.message{background-color:#ffe8e6;color:#db2828;-webkit-box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent}.ui.red.message .header{color:#c82121}.ui.orange.message{background-color:#ffedde;color:#f2711c;-webkit-box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent}.ui.orange.message .header{color:#e7640d}.ui.yellow.message{background-color:#fff8db;color:#b58105;-webkit-box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent}.ui.yellow.message .header{color:#9c6f04}.ui.olive.message{background-color:#fbfdef;color:#8abc1e;-webkit-box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent}.ui.olive.message .header{color:#7aa61a}.ui.green.message{background-color:#e5f9e7;color:#1ebc30;-webkit-box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent}.ui.green.message .header{color:#1aa62a}.ui.teal.message{background-color:#e1f7f7;color:#10a3a3;-webkit-box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent}.ui.teal.message .header{color:#0e8c8c}.ui.blue.message{background-color:#dff0ff;color:#2185d0;-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent}.ui.blue.message .header{color:#1e77ba}.ui.violet.message{background-color:#eae7ff;color:#6435c9;-webkit-box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent}.ui.violet.message .header{color:#5a30b5}.ui.purple.message{background-color:#f6e7ff;color:#a333c8;-webkit-box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent}.ui.purple.message .header{color:#922eb4}.ui.pink.message{background-color:#ffe3fb;color:#e03997;-webkit-box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent}.ui.pink.message .header{color:#dd238b}.ui.brown.message{background-color:#f1e2d3;color:#a5673f;-webkit-box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent}.ui.brown.message .header{color:#935b38}.ui.mini.message{font-size:.8125em}.ui.tiny.message{font-size:.875em}.ui.small.message{font-size:.9375em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.big.message{font-size:1.3125em}.ui.huge.message{font-size:1.4375em}.ui.massive.message{font-size:1.6875em}
\ No newline at end of file
+ */.ui.message{position:relative;min-height:1em;margin:1em 0;background:#f8f8f9;padding:1em 1.5em;line-height:1.5em;color:rgba(0,0,0,.87);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;border-radius:.25rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent;box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent}.ui.message:first-child{margin-top:0}.ui.message:last-child{margin-bottom:0}.ui.message .header{display:block;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;margin:-.14285714em 0 0 0}.ui.message .header:not(.ui){font-size:1.125em}.ui.message p{opacity:.85;margin:.75em 0}.ui.message p:first-child{margin-top:0}.ui.message p:last-child{margin-bottom:0}.ui.message .header+p{margin-top:.25em}.ui.message .list:not(.ui){text-align:left;padding:0;opacity:.85;list-style-position:inside;margin:.5em 0 0}.ui.message .list:not(.ui):first-child{margin-top:0}.ui.message .list:not(.ui):last-child{margin-bottom:0}.ui.message .list:not(.ui) li{position:relative;list-style-type:none;margin:0 0 .3em 1em;padding:0}.ui.message .list:not(.ui) li:before{position:absolute;content:'•';left:-1em;height:100%;vertical-align:baseline}.ui.message .list:not(.ui) li:last-child{margin-bottom:0}.ui.message>.icon{margin-right:.6em}.ui.message>.close.icon{cursor:pointer;position:absolute;margin:0;top:.75em;right:.5em;opacity:.7;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.message>.close.icon:hover{opacity:1}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.dropdown .menu>.message{margin:0 -1px}.ui.visible.visible.visible.visible.message{display:block}.ui.icon.visible.visible.visible.visible.message{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.hidden.hidden.hidden.hidden.message{display:none}.ui.compact.message{display:inline-block}.ui.compact.icon.message{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:auto}.ui.attached.message{margin-bottom:-1px;border-radius:.25rem .25rem 0 0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;margin-left:-1px;margin-right:-1px}.ui.attached+.ui.attached.message:not(.top):not(.bottom){margin-top:-1px;border-radius:0}.ui.bottom.attached.message{margin-top:-1px;border-radius:0 0 .25rem .25rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15)}.ui.bottom.attached.message:not(:last-child){margin-bottom:1em}.ui.attached.icon.message{width:auto}.ui.icon.message{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.icon.message>.icon:not(.close){display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;line-height:1;vertical-align:middle;font-size:3em;opacity:.8}.ui.icon.message>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;vertical-align:middle}.ui.icon.message .icon:not(.close)+.content{padding-left:0}.ui.icon.message .circular.icon{width:1em}.ui.floating.message{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.positive.message{background-color:#fcfff5;color:#2c662d}.ui.attached.positive.message,.ui.positive.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.floating.positive.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #a3c293 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.positive.message .header{color:#1a531b}.ui.negative.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.negative.message,.ui.negative.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.floating.negative.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #e0b4b4 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.negative.message .header{color:#912d2b}.ui.info.message{background-color:#f8ffff;color:#276f86}.ui.attached.info.message,.ui.info.message{-webkit-box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent}.ui.floating.info.message{-webkit-box-shadow:0 0 0 1px #a9d5de inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #a9d5de inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.info.message .header{color:#0e566c}.ui.warning.message{background-color:#fffaf3;color:#573a08}.ui.attached.warning.message,.ui.warning.message{-webkit-box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent}.ui.floating.warning.message{-webkit-box-shadow:0 0 0 1px #c9ba9b inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #c9ba9b inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.warning.message .header{color:#794b02}.ui.error.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.error.message,.ui.error.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.floating.error.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #e0b4b4 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.error.message .header{color:#912d2b}.ui.success.message{background-color:#fcfff5;color:#2c662d}.ui.attached.success.message,.ui.success.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.floating.success.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #a3c293 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.success.message .header{color:#1a531b}.ui.primary.message{background-color:#dff0ff;color:rgba(255,255,255,.9)}.ui.attached.primary.message,.ui.primary.message{-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent}.ui.floating.primary.message{-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #2185d0 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.primary.message .header{color:rgba(242,242,242,.9)}.ui.secondary.message{background-color:#f4f4f4;color:rgba(255,255,255,.9)}.ui.attached.secondary.message,.ui.secondary.message{-webkit-box-shadow:0 0 0 1px #1b1c1d inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #1b1c1d inset,0 0 0 0 transparent}.ui.floating.secondary.message{-webkit-box-shadow:0 0 0 1px #1b1c1d inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #1b1c1d inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.secondary.message .header{color:rgba(242,242,242,.9)}.ui.red.message{background-color:#ffe8e6;color:#db2828}.ui.attached.red.message,.ui.red.message{-webkit-box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent}.ui.floating.red.message{-webkit-box-shadow:0 0 0 1px #db2828 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #db2828 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.red.message .header{color:#c82121}.ui.orange.message{background-color:#ffedde;color:#f2711c}.ui.attached.orange.message,.ui.orange.message{-webkit-box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent}.ui.floating.orange.message{-webkit-box-shadow:0 0 0 1px #f2711c inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #f2711c inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.orange.message .header{color:#e7640d}.ui.yellow.message{background-color:#fff8db;color:#b58105}.ui.attached.yellow.message,.ui.yellow.message{-webkit-box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent}.ui.floating.yellow.message{-webkit-box-shadow:0 0 0 1px #b58105 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #b58105 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.yellow.message .header{color:#9c6f04}.ui.olive.message{background-color:#fbfdef;color:#8abc1e}.ui.attached.olive.message,.ui.olive.message{-webkit-box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent}.ui.floating.olive.message{-webkit-box-shadow:0 0 0 1px #8abc1e inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #8abc1e inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.olive.message .header{color:#7aa61a}.ui.green.message{background-color:#e5f9e7;color:#1ebc30}.ui.attached.green.message,.ui.green.message{-webkit-box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent}.ui.floating.green.message{-webkit-box-shadow:0 0 0 1px #1ebc30 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #1ebc30 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.green.message .header{color:#1aa62a}.ui.teal.message{background-color:#e1f7f7;color:#10a3a3}.ui.attached.teal.message,.ui.teal.message{-webkit-box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent}.ui.floating.teal.message{-webkit-box-shadow:0 0 0 1px #10a3a3 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #10a3a3 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.teal.message .header{color:#0e8c8c}.ui.blue.message{background-color:#dff0ff;color:#2185d0}.ui.attached.blue.message,.ui.blue.message{-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent}.ui.floating.blue.message{-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #2185d0 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.blue.message .header{color:#1e77ba}.ui.violet.message{background-color:#eae7ff;color:#6435c9}.ui.attached.violet.message,.ui.violet.message{-webkit-box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent}.ui.floating.violet.message{-webkit-box-shadow:0 0 0 1px #6435c9 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #6435c9 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.violet.message .header{color:#5a30b5}.ui.purple.message{background-color:#f6e7ff;color:#a333c8}.ui.attached.purple.message,.ui.purple.message{-webkit-box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent}.ui.floating.purple.message{-webkit-box-shadow:0 0 0 1px #a333c8 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #a333c8 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.purple.message .header{color:#922eb4}.ui.pink.message{background-color:#ffe3fb;color:#e03997}.ui.attached.pink.message,.ui.pink.message{-webkit-box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent}.ui.floating.pink.message{-webkit-box-shadow:0 0 0 1px #e03997 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #e03997 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.pink.message .header{color:#dd238b}.ui.brown.message{background-color:#f1e2d3;color:#a5673f}.ui.attached.brown.message,.ui.brown.message{-webkit-box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent}.ui.floating.brown.message{-webkit-box-shadow:0 0 0 1px #a5673f inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #a5673f inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.brown.message .header{color:#935b38}.ui.grey.message{background-color:#f4f4f4;color:#767676}.ui.attached.grey.message,.ui.grey.message{-webkit-box-shadow:0 0 0 1px #767676 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #767676 inset,0 0 0 0 transparent}.ui.floating.grey.message{-webkit-box-shadow:0 0 0 1px #767676 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #767676 inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.grey.message .header{color:#696969}.ui.black.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.black.message .header{color:rgba(255,255,255,.9)}.ui.inverted.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.message{font-size:1em}.ui.mini.message{font-size:.8125em}.ui.tiny.message{font-size:.875em}.ui.small.message{font-size:.9375em}.ui.large.message{font-size:1.125em}.ui.big.message{font-size:1.3125em}.ui.huge.message{font-size:1.4375em}.ui.massive.message{font-size:1.6875em}
\ No newline at end of file
diff --git a/ui/dist/components/reset.css b/ui/dist/components/reset.css
index b52d7891a29..654f9a60aa3 100644
--- a/ui/dist/components/reset.css
+++ b/ui/dist/components/reset.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Reset
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Reset
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -36,22 +36,18 @@ input[type="password"] {
/* mobile firefox too! */
}
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- * IE on Windows Phone and in iOS.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
- -ms-text-size-adjust: 100%;
-
-/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
@@ -60,20 +56,15 @@ html {
/* Sections
========================================================================== */
/**
- * Remove the margin in all browsers (opinionated).
+ * Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
- * Add the correct display in IE 9-.
- */
-article,
-aside,
-footer,
-header,
-nav,
-section {
+ * Render the `main` element consistently in IE.
+ */
+main {
display: block;
}
/**
@@ -87,23 +78,6 @@ h1 {
/* Grouping content
========================================================================== */
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-figcaption,
-figure,
-main {
-
-/* 1 */
- display: block;
-}
-/**
- * Add the correct margin in IE 8.
- */
-figure {
- margin: 1em 40px;
-}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
@@ -136,19 +110,13 @@ pre {
/* Text-level semantics
========================================================================== */
/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
-
-/* 1 */
- -webkit-text-decoration-skip: objects;
-
-/* 2 */
}
/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
@@ -163,13 +131,6 @@ abbr[title] {
/* 2 */
}
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-b,
-strong {
- font-weight: inherit;
-}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
@@ -191,19 +152,6 @@ samp {
/* 2 */
}
-/**
- * Add the correct font style in Android 4.3-.
- */
-dfn {
- font-style: italic;
-}
-/**
- * Add the correct background and color in IE 9-.
- */
-mark {
- background-color: #ff0;
- color: #000;
-}
/**
* Add the correct font size in all browsers.
*/
@@ -231,36 +179,16 @@ sup {
/* Embedded content
========================================================================== */
/**
- * Add the correct display in IE 9-.
- */
-audio,
-video {
- display: inline-block;
-}
-/**
- * Add the correct display in iOS 4-7.
- */
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-/**
- * Remove the border on images inside links in IE 10-.
+ * Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
-/**
- * Hide the overflow in IE.
- */
-svg:not(:root) {
- overflow: hidden;
-}
/* Forms
========================================================================== */
/**
- * 1. Change the font styles in all browsers (opinionated).
+ * 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
@@ -268,7 +196,7 @@ input,
optgroup,
select,
textarea {
- font-family: sans-serif;
+ font-family: inherit;
/* 1 */
font-size: 100%;
@@ -302,17 +230,13 @@ select {
text-transform: none;
}
/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- * controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * Correct the inability to style clickable types in iOS and Safari.
*/
button,
-html [type="button"],
+[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
-
-/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
@@ -367,26 +291,20 @@ legend {
/* 1 */
}
/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
- display: inline-block;
-
-/* 1 */
vertical-align: baseline;
-
-/* 2 */
}
/**
- * Remove the default vertical scrollbar in IE.
+ * Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
@@ -418,9 +336,8 @@ textarea {
/* 2 */
}
/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome and Safari on macOS.
*/
-[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@@ -440,11 +357,9 @@ textarea {
/* Interactive
========================================================================== */
/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
+ * Add the correct display in Edge, IE 10+, and Firefox.
*/
-details,
-menu {
+details {
display: block;
}
/*
@@ -454,25 +369,16 @@ summary {
display: list-item;
}
-/* Scripting
+/* Misc
========================================================================== */
/**
- * Add the correct display in IE 9-.
- */
-canvas {
- display: inline-block;
-}
-/**
- * Add the correct display in IE.
+ * Add the correct display in IE 10+.
*/
template {
display: none;
}
-
-/* Hidden
- ========================================================================== */
/**
- * Add the correct display in IE 10-.
+ * Add the correct display in IE 10.
*/
[hidden] {
display: none;
diff --git a/ui/dist/components/reset.min.css b/ui/dist/components/reset.min.css
index 9b3eefcddb2..333a3cdfbe4 100644
--- a/ui/dist/components/reset.min.css
+++ b/ui/dist/components/reset.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Reset
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Reset
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
\ No newline at end of file
+ */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
\ No newline at end of file
diff --git a/ui/dist/components/segment.css b/ui/dist/components/segment.css
index 99c0682c518..1d397539a0c 100644
--- a/ui/dist/components/segment.css
+++ b/ui/dist/components/segment.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Segment
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Segment
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -16,27 +16,27 @@
.ui.segment {
position: relative;
background: #FFFFFF;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- margin: 1rem 0em;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ margin: 1rem 0;
padding: 1em 1em;
border-radius: 0.25rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.segment:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.segment:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Vertical */
.ui.vertical.segment {
- margin: 0em;
- padding-left: 0em;
- padding-right: 0em;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
background: none transparent;
- border-radius: 0px;
+ border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
@@ -52,26 +52,27 @@
/* Header */
+.ui.inverted.segment > .ui.header .sub.header,
.ui.inverted.segment > .ui.header {
color: #FFFFFF;
}
/* Label */
.ui[class*="bottom attached"].segment > [class*="top attached"].label {
- border-top-left-radius: 0em;
- border-top-right-radius: 0em;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
.ui[class*="top attached"].segment > [class*="bottom attached"].label {
- border-bottom-left-radius: 0em;
- border-bottom-right-radius: 0em;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
}
.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
- border-top-left-radius: 0em;
- border-top-right-radius: 0em;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
- border-bottom-left-radius: 0em;
- border-bottom-right-radius: 0em;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
}
/* Grid */
@@ -82,7 +83,7 @@
padding-bottom: 2em;
}
.ui.grid.segment {
- margin: 1rem 0em;
+ margin: 1rem 0;
border-radius: 0.25rem;
}
@@ -90,13 +91,18 @@
.ui.basic.table.segment {
background: #FFFFFF;
border: 1px solid rgba(34, 36, 38, 0.15);
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
}
.ui[class*="very basic"].table.segment {
padding: 1em 1em;
}
+/* Tab */
+.ui.segment.tab:last-child {
+ margin-bottom: 1rem;
+}
+
/*******************************
Types
@@ -104,21 +110,83 @@
/*-------------------
- Piled
---------------------*/
+ Placeholder
+ --------------------*/
+
+.ui.placeholder.segment {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ max-width: initial;
+ -webkit-animation: none;
+ animation: none;
+ overflow: visible;
+ padding: 1em 1em;
+ min-height: 18rem;
+ background: #F9FAFB;
+ border-color: rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+ box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+}
+.ui.placeholder.segment .button,
+.ui.placeholder.segment textarea {
+ display: block;
+}
+.ui.placeholder.segment .field,
+.ui.placeholder.segment textarea,
+.ui.placeholder.segment > .ui.input,
+.ui.placeholder.segment .button {
+ max-width: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+.ui.placeholder.segment .column .button,
+.ui.placeholder.segment .column .field,
+.ui.placeholder.segment .column textarea,
+.ui.placeholder.segment .column > .ui.input {
+ max-width: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+.ui.placeholder.segment > .inline {
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.ui.placeholder.segment > .inline > .button {
+ display: inline-block;
+ width: auto;
+ margin: 0 0.3125rem 0 0;
+}
+.ui.placeholder.segment > .inline > .button:last-child {
+ margin-right: 0;
+}
+
+/*-------------------
+ Piled
+ --------------------*/
.ui.piled.segments,
.ui.piled.segment {
- margin: 3em 0em;
+ margin: 3em 0;
-webkit-box-shadow: '';
box-shadow: '';
z-index: auto;
}
.ui.piled.segment:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.piled.segment:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.piled.segments:after,
.ui.piled.segments:before,
@@ -129,7 +197,7 @@
content: '';
display: block;
height: 100%;
- left: 0px;
+ left: 0;
position: absolute;
width: 100%;
border: 1px solid rgba(34, 36, 38, 0.15);
@@ -154,22 +222,22 @@
/* Piled Attached */
.ui[class*="top attached"].piled.segment {
margin-top: 3em;
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.piled.segment[class*="top attached"]:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.piled.segment[class*="bottom attached"] {
- margin-top: 0em;
+ margin-top: 0;
margin-bottom: 3em;
}
.ui.piled.segment[class*="bottom attached"]:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*-------------------
- Stacked
---------------------*/
+ Stacked
+ --------------------*/
.ui.stacked.segment {
padding-bottom: 1.4em;
@@ -181,7 +249,7 @@
content: '';
position: absolute;
bottom: -3px;
- left: 0%;
+ left: 0;
border-top: 1px solid rgba(34, 36, 38, 0.15);
background: rgba(0, 0, 0, 0.03);
width: 100%;
@@ -197,7 +265,7 @@
.ui.tall.stacked.segments:before,
.ui.tall.stacked.segment:before {
display: block;
- bottom: 0px;
+ bottom: 0;
}
/* Inverted */
@@ -210,8 +278,8 @@
}
/*-------------------
- Padded
---------------------*/
+ Padded
+ --------------------*/
.ui.padded.segment {
padding: 1.5em;
@@ -223,13 +291,13 @@
/* Padded vertical */
.ui.padded.segment.vertical.segment,
.ui[class*="very padded"].vertical.segment {
- padding-left: 0px;
- padding-right: 0px;
+ padding-left: 0;
+ padding-right: 0;
}
/*-------------------
- Compact
---------------------*/
+ Compact
+ --------------------*/
.ui.compact.segment {
display: table;
@@ -250,8 +318,8 @@
}
/*-------------------
- Circular
---------------------*/
+ Circular
+ --------------------*/
.ui.circular.segment {
display: table-cell;
@@ -262,19 +330,19 @@
}
/*-------------------
- Raised
---------------------*/
+ Raised
+ --------------------*/
-.ui.raised.segments,
-.ui.raised.segment {
- -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
- box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+.ui.raised.raised.segments,
+.ui.raised.raised.segment {
+ -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
/*******************************
- Groups
-*******************************/
+ Groups
+ *******************************/
/* Group */
@@ -284,25 +352,25 @@
-ms-flex-direction: column;
flex-direction: column;
position: relative;
- margin: 1rem 0em;
+ margin: 1rem 0;
border: 1px solid rgba(34, 36, 38, 0.15);
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
border-radius: 0.25rem;
}
.ui.segments:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.segments:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Nested Segment */
.ui.segments > .segment {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em;
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0;
width: auto;
-webkit-box-shadow: none;
box-shadow: none;
@@ -310,23 +378,23 @@
border-top: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.segments:not(.horizontal) > .segment:first-child {
+ top: 0;
+ bottom: 0;
border-top: none;
- margin-top: 0em;
- bottom: 0px;
- margin-bottom: 0em;
- top: 0px;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ margin-top: 0;
+ margin-bottom: 0;
+ border-radius: 0.25rem 0.25rem 0 0;
}
/* Bottom */
.ui.segments:not(.horizontal) > .segment:last-child {
- top: 0px;
- bottom: 0px;
- margin-top: 0em;
- margin-bottom: 0em;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ top: 0;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ border-radius: 0 0 0.25rem 0.25rem;
}
/* Only */
@@ -343,7 +411,7 @@
border-top: none;
}
.ui.segments > .segment + .segments:not(.horizontal) {
- margin-top: 0em;
+ margin-top: 0;
}
/* Horizontal Group */
@@ -356,21 +424,23 @@
-ms-flex-direction: row;
flex-direction: row;
background-color: transparent;
- border-radius: 0px;
- padding: 0em;
- background-color: #FFFFFF;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
- margin: 1rem 0em;
+ padding: 0;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+ margin: 1rem 0;
border-radius: 0.25rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
+.ui.stackable.horizontal.segments {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
/* Nested Horizontal Group */
.ui.segments > .horizontal.segments {
- margin: 0em;
+ margin: 0;
background-color: transparent;
- border-radius: 0px;
+ border-radius: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
@@ -378,16 +448,17 @@
}
/* Horizontal Segment */
-.ui.horizontal.segments > .segment {
+.ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
-webkit-box-flex: 1;
flex: 1 1 auto;
- -ms-flex: 1 1 0px;
+ -ms-flex: 1 1 0;
/* Solves #2550 MS Flex */
- margin: 0em;
- min-width: 0px;
- background-color: transparent;
- border-radius: 0px;
+}
+.ui.horizontal.segments > .segment {
+ margin: 0;
+ min-width: 0;
+ border-radius: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
@@ -398,7 +469,7 @@
.ui.segments > .horizontal.segments:first-child {
border-top: none;
}
-.ui.horizontal.segments > .segment:first-child {
+.ui.horizontal.segments:not(.stackable) > .segment:first-child {
border-left: none;
}
@@ -409,8 +480,8 @@
/*--------------
- Disabled
----------------*/
+ Disabled
+ ---------------*/
.ui.disabled.segment {
opacity: 0.45;
@@ -418,23 +489,22 @@
}
/*--------------
- Loading
----------------*/
+ Loading
+ ---------------*/
.ui.loading.segment {
position: relative;
cursor: default;
pointer-events: none;
text-shadow: none !important;
- color: transparent !important;
-webkit-transition: all 0s linear;
transition: all 0s linear;
}
.ui.loading.segment:before {
position: absolute;
content: '';
- top: 0%;
- left: 0%;
+ top: 0;
+ left: 0;
background: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
@@ -446,42 +516,18 @@
content: '';
top: 50%;
left: 50%;
- margin: -1.5em 0em 0em -1.5em;
+ margin: -1.5em 0 0 -1.5em;
width: 3em;
height: 3em;
- -webkit-animation: segment-spin 0.6s linear;
- animation: segment-spin 0.6s linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+ -webkit-animation: loader 0.6s infinite linear;
+ animation: loader 0.6s infinite linear;
+ border: 0.2em solid #767676;
border-radius: 500rem;
- border-color: #767676 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
- border-style: solid;
- border-width: 0.2em;
- -webkit-box-shadow: 0px 0px 0px 1px transparent;
- box-shadow: 0px 0px 0px 1px transparent;
+ -webkit-box-shadow: 0 0 0 1px transparent;
+ box-shadow: 0 0 0 1px transparent;
visibility: visible;
z-index: 101;
}
-@-webkit-keyframes segment-spin {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes segment-spin {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
/*******************************
@@ -490,154 +536,128 @@
/*-------------------
- Basic
---------------------*/
+ Basic
+ --------------------*/
-.ui.basic.segment {
+.ui.basic.segment,
+.ui.segments .ui.basic.segment,
+.ui.basic.segments {
background: none transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
- border-radius: 0px;
+ border-radius: 0;
}
/*-------------------
- Clearing
---------------------*/
+ Clearing
+ --------------------*/
.ui.clearing.segment:after {
- content: ".";
+ content: "";
display: block;
- height: 0;
clear: both;
- visibility: hidden;
}
/*-------------------
Colors
--------------------*/
-
-/* Red */
-.ui.red.segment:not(.inverted) {
- border-top: 2px solid #DB2828 !important;
+.ui.red.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #DB2828;
}
-.ui.inverted.red.segment {
- background-color: #DB2828 !important;
- color: #FFFFFF !important;
+.ui.inverted.red.segment.segment.segment.segment.segment {
+ background-color: #DB2828;
+ color: #FFFFFF;
}
-
-/* Orange */
-.ui.orange.segment:not(.inverted) {
- border-top: 2px solid #F2711C !important;
+.ui.orange.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #F2711C;
}
-.ui.inverted.orange.segment {
- background-color: #F2711C !important;
- color: #FFFFFF !important;
+.ui.inverted.orange.segment.segment.segment.segment.segment {
+ background-color: #F2711C;
+ color: #FFFFFF;
}
-
-/* Yellow */
-.ui.yellow.segment:not(.inverted) {
- border-top: 2px solid #FBBD08 !important;
+.ui.yellow.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #FBBD08;
}
-.ui.inverted.yellow.segment {
- background-color: #FBBD08 !important;
- color: #FFFFFF !important;
+.ui.inverted.yellow.segment.segment.segment.segment.segment {
+ background-color: #FBBD08;
+ color: #FFFFFF;
}
-
-/* Olive */
-.ui.olive.segment:not(.inverted) {
- border-top: 2px solid #B5CC18 !important;
+.ui.olive.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #B5CC18;
}
-.ui.inverted.olive.segment {
- background-color: #B5CC18 !important;
- color: #FFFFFF !important;
+.ui.inverted.olive.segment.segment.segment.segment.segment {
+ background-color: #B5CC18;
+ color: #FFFFFF;
}
-
-/* Green */
-.ui.green.segment:not(.inverted) {
- border-top: 2px solid #21BA45 !important;
+.ui.green.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #21BA45;
}
-.ui.inverted.green.segment {
- background-color: #21BA45 !important;
- color: #FFFFFF !important;
+.ui.inverted.green.segment.segment.segment.segment.segment {
+ background-color: #21BA45;
+ color: #FFFFFF;
}
-
-/* Teal */
-.ui.teal.segment:not(.inverted) {
- border-top: 2px solid #00B5AD !important;
+.ui.teal.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #00B5AD;
}
-.ui.inverted.teal.segment {
- background-color: #00B5AD !important;
- color: #FFFFFF !important;
+.ui.inverted.teal.segment.segment.segment.segment.segment {
+ background-color: #00B5AD;
+ color: #FFFFFF;
}
-
-/* Blue */
-.ui.blue.segment:not(.inverted) {
- border-top: 2px solid #2185D0 !important;
+.ui.blue.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #2185D0;
}
-.ui.inverted.blue.segment {
- background-color: #2185D0 !important;
- color: #FFFFFF !important;
+.ui.inverted.blue.segment.segment.segment.segment.segment {
+ background-color: #2185D0;
+ color: #FFFFFF;
}
-
-/* Violet */
-.ui.violet.segment:not(.inverted) {
- border-top: 2px solid #6435C9 !important;
+.ui.violet.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #6435C9;
}
-.ui.inverted.violet.segment {
- background-color: #6435C9 !important;
- color: #FFFFFF !important;
+.ui.inverted.violet.segment.segment.segment.segment.segment {
+ background-color: #6435C9;
+ color: #FFFFFF;
}
-
-/* Purple */
-.ui.purple.segment:not(.inverted) {
- border-top: 2px solid #A333C8 !important;
+.ui.purple.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #A333C8;
}
-.ui.inverted.purple.segment {
- background-color: #A333C8 !important;
- color: #FFFFFF !important;
+.ui.inverted.purple.segment.segment.segment.segment.segment {
+ background-color: #A333C8;
+ color: #FFFFFF;
}
-
-/* Pink */
-.ui.pink.segment:not(.inverted) {
- border-top: 2px solid #E03997 !important;
+.ui.pink.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #E03997;
}
-.ui.inverted.pink.segment {
- background-color: #E03997 !important;
- color: #FFFFFF !important;
+.ui.inverted.pink.segment.segment.segment.segment.segment {
+ background-color: #E03997;
+ color: #FFFFFF;
}
-
-/* Brown */
-.ui.brown.segment:not(.inverted) {
- border-top: 2px solid #A5673F !important;
+.ui.brown.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #A5673F;
}
-.ui.inverted.brown.segment {
- background-color: #A5673F !important;
- color: #FFFFFF !important;
+.ui.inverted.brown.segment.segment.segment.segment.segment {
+ background-color: #A5673F;
+ color: #FFFFFF;
}
-
-/* Grey */
-.ui.grey.segment:not(.inverted) {
- border-top: 2px solid #767676 !important;
+.ui.grey.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #767676;
}
-.ui.inverted.grey.segment {
- background-color: #767676 !important;
- color: #FFFFFF !important;
+.ui.inverted.grey.segment.segment.segment.segment.segment {
+ background-color: #767676;
+ color: #FFFFFF;
}
-
-/* Black */
-.ui.black.segment:not(.inverted) {
- border-top: 2px solid #1B1C1D !important;
+.ui.black.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: 2px solid #1B1C1D;
}
-.ui.inverted.black.segment {
- background-color: #1B1C1D !important;
- color: #FFFFFF !important;
+.ui.inverted.black.segment.segment.segment.segment.segment {
+ background-color: #1B1C1D;
+ color: #FFFFFF;
}
/*-------------------
- Aligned
---------------------*/
+ Aligned
+ --------------------*/
.ui[class*="left aligned"].segment {
text-align: left;
@@ -650,8 +670,8 @@
}
/*-------------------
- Floated
---------------------*/
+ Floated
+ --------------------*/
.ui.floated.segment,
.ui[class*="left floated"].segment {
@@ -664,8 +684,8 @@
}
/*-------------------
- Inverted
---------------------*/
+ Inverted
+ --------------------*/
.ui.inverted.segment {
border: none;
@@ -691,6 +711,14 @@
border-color: #555555;
}
+/* Loading */
+.ui.inverted.loading.segment {
+ color: #FFFFFF;
+}
+.ui.inverted.loading.segment:before {
+ background: rgba(0, 0, 0, 0.85);
+}
+
/*-------------------
Emphasis
--------------------*/
@@ -702,9 +730,9 @@
color: rgba(0, 0, 0, 0.6);
}
.ui.secondary.inverted.segment {
- background: #4c4f52 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.2)));
- background: #4c4f52 -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
- background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
+ background: #4c4f52 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.2)));
+ background: #4c4f52 -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%);
+ background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%);
color: rgba(255, 255, 255, 0.8);
}
@@ -714,25 +742,25 @@
color: rgba(0, 0, 0, 0.6);
}
.ui.tertiary.inverted.segment {
- background: #717579 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.35)));
- background: #717579 -webkit-linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%);
- background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%);
+ background: #717579 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.35)));
+ background: #717579 -webkit-linear-gradient(rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 100%);
+ background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 100%);
color: rgba(255, 255, 255, 0.8);
}
/*-------------------
- Attached
---------------------*/
+ Attached
+ --------------------*/
/* Middle */
.ui.attached.segment {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em -1px;
- width: calc(100% + 2px );
- max-width: calc(100% + 2px );
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 -1px;
+ width: calc(100% + 2px);
+ max-width: calc(100% + 2px);
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #D4D4D5;
@@ -743,34 +771,51 @@
/* Top */
.ui[class*="top attached"].segment {
- bottom: 0px;
- margin-bottom: 0em;
- top: 0px;
+ bottom: 0;
+ margin-bottom: 0;
+ top: 0;
margin-top: 1rem;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.segment[class*="top attached"]:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
/* Bottom */
.ui.segment[class*="bottom attached"] {
- bottom: 0px;
- margin-top: 0em;
- top: 0px;
+ bottom: 0;
+ margin-top: 0;
+ top: 0;
margin-bottom: 1rem;
- -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+ border-radius: 0 0 0.25rem 0.25rem;
}
.ui.segment[class*="bottom attached"]:last-child {
- margin-bottom: 0em;
+ margin-bottom: 1rem;
+}
+
+/*--------------
+ Fitted
+ ---------------*/
+
+.ui.fitted.segment:not(.horizontally) {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.ui.fitted.segment:not(.vertically) {
+ padding-left: 0;
+ padding-right: 0;
}
/*-------------------
Size
--------------------*/
+.ui.segments .segment,
+.ui.segment {
+ font-size: 1rem;
+}
.ui.mini.segments .segment,
.ui.mini.segment {
font-size: 0.8125rem;
@@ -783,10 +828,6 @@
.ui.small.segment {
font-size: 0.9375rem;
}
-.ui.segments .segment,
-.ui.segment {
- font-size: 1rem;
-}
.ui.large.segments .segment,
.ui.large.segment {
font-size: 1.125rem;
diff --git a/ui/dist/components/segment.min.css b/ui/dist/components/segment.min.css
index 8b10983165f..ca49f171a1b 100644
--- a/ui/dist/components/segment.min.css
+++ b/ui/dist/components/segment.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Segment
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Segment
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.segment{position:relative;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;padding:1em 1em;border-radius:.25rem;border:1px solid rgba(34,36,38,.15)}.ui.segment:first-child{margin-top:0}.ui.segment:last-child{margin-bottom:0}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;border-bottom:1px solid rgba(34,36,38,.15)}.ui.vertical.segment:last-child{border-bottom:none}.ui.inverted.segment>.ui.header{color:#fff}.ui[class*="bottom attached"].segment>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="top attached"].segment>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.grid>.row>.ui.segment.column,.ui.grid>.ui.segment.column,.ui.page.grid.segment{padding-top:2em;padding-bottom:2em}.ui.grid.segment{margin:1rem 0;border-radius:.25rem}.ui.basic.table.segment{background:#fff;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui[class*="very basic"].table.segment{padding:1em 1em}.ui.piled.segment,.ui.piled.segments{margin:3em 0;-webkit-box-shadow:'';box-shadow:'';z-index:auto}.ui.piled.segment:first-child{margin-top:0}.ui.piled.segment:last-child{margin-bottom:0}.ui.piled.segment:after,.ui.piled.segment:before,.ui.piled.segments:after,.ui.piled.segments:before{background-color:#fff;visibility:visible;content:'';display:block;height:100%;left:0;position:absolute;width:100%;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:'';box-shadow:''}.ui.piled.segment:before,.ui.piled.segments:before{-webkit-transform:rotate(-1.2deg);transform:rotate(-1.2deg);top:0;z-index:-2}.ui.piled.segment:after,.ui.piled.segments:after{-webkit-transform:rotate(1.2deg);transform:rotate(1.2deg);top:0;z-index:-1}.ui[class*="top attached"].piled.segment{margin-top:3em;margin-bottom:0}.ui.piled.segment[class*="top attached"]:first-child{margin-top:0}.ui.piled.segment[class*="bottom attached"]{margin-top:0;margin-bottom:3em}.ui.piled.segment[class*="bottom attached"]:last-child{margin-bottom:0}.ui.stacked.segment{padding-bottom:1.4em}.ui.stacked.segment:after,.ui.stacked.segment:before,.ui.stacked.segments:after,.ui.stacked.segments:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(34,36,38,.15);background:rgba(0,0,0,.03);width:100%;height:6px;visibility:visible}.ui.stacked.segment:before,.ui.stacked.segments:before{display:none}.ui.tall.stacked.segment:before,.ui.tall.stacked.segments:before{display:block;bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before,.ui.stacked.inverted.segments:after,.ui.stacked.inverted.segments:before{background-color:rgba(0,0,0,.03);border-top:1px solid rgba(34,36,38,.35)}.ui.padded.segment{padding:1.5em}.ui[class*="very padded"].segment{padding:3em}.ui.padded.segment.vertical.segment,.ui[class*="very padded"].vertical.segment{padding-left:0;padding-right:0}.ui.compact.segment{display:table}.ui.compact.segments{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ui.compact.segments .segment,.ui.segments .compact.segment{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ui.circular.segment{display:table-cell;padding:2em;text-align:center;vertical-align:middle;border-radius:500em}.ui.raised.segment,.ui.raised.segments{-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.segments{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;margin:1rem 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.25rem}.ui.segments:first-child{margin-top:0}.ui.segments:last-child{margin-bottom:0}.ui.segments>.segment{top:0;bottom:0;border-radius:0;margin:0;width:auto;-webkit-box-shadow:none;box-shadow:none;border:none;border-top:1px solid rgba(34,36,38,.15)}.ui.segments:not(.horizontal)>.segment:first-child{border-top:none;margin-top:0;bottom:0;margin-bottom:0;top:0;border-radius:.25rem .25rem 0 0}.ui.segments:not(.horizontal)>.segment:last-child{top:0;bottom:0;margin-top:0;margin-bottom:0;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui.segments:not(.horizontal)>.segment:only-child{border-radius:.25rem}.ui.segments>.ui.segments{border-top:1px solid rgba(34,36,38,.15);margin:1rem 1rem}.ui.segments>.segments:first-child{border-top:none}.ui.segments>.segment+.segments:not(.horizontal){margin-top:0}.ui.horizontal.segments{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background-color:transparent;border-radius:0;padding:0;background-color:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;border-radius:.25rem;border:1px solid rgba(34,36,38,.15)}.ui.segments>.horizontal.segments{margin:0;background-color:transparent;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-top:1px solid rgba(34,36,38,.15)}.ui.horizontal.segments>.segment{-webkit-box-flex:1;flex:1 1 auto;-ms-flex:1 1 0px;margin:0;min-width:0;background-color:transparent;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-left:1px solid rgba(34,36,38,.15)}.ui.segments>.horizontal.segments:first-child{border-top:none}.ui.horizontal.segments>.segment:first-child{border-left:none}.ui.disabled.segment{opacity:.45;color:rgba(40,40,40,.3)}.ui.loading.segment{position:relative;cursor:default;pointer-events:none;text-shadow:none!important;color:transparent!important;-webkit-transition:all 0s linear;transition:all 0s linear}.ui.loading.segment:before{position:absolute;content:'';top:0;left:0;background:rgba(255,255,255,.8);width:100%;height:100%;border-radius:.25rem;z-index:100}.ui.loading.segment:after{position:absolute;content:'';top:50%;left:50%;margin:-1.5em 0 0 -1.5em;width:3em;height:3em;-webkit-animation:segment-spin .6s linear;animation:segment-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}@-webkit-keyframes segment-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes segment-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.basic.segment{background:none transparent;-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:0}.ui.clearing.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.red.segment:not(.inverted){border-top:2px solid #db2828!important}.ui.inverted.red.segment{background-color:#db2828!important;color:#fff!important}.ui.orange.segment:not(.inverted){border-top:2px solid #f2711c!important}.ui.inverted.orange.segment{background-color:#f2711c!important;color:#fff!important}.ui.yellow.segment:not(.inverted){border-top:2px solid #fbbd08!important}.ui.inverted.yellow.segment{background-color:#fbbd08!important;color:#fff!important}.ui.olive.segment:not(.inverted){border-top:2px solid #b5cc18!important}.ui.inverted.olive.segment{background-color:#b5cc18!important;color:#fff!important}.ui.green.segment:not(.inverted){border-top:2px solid #21ba45!important}.ui.inverted.green.segment{background-color:#21ba45!important;color:#fff!important}.ui.teal.segment:not(.inverted){border-top:2px solid #00b5ad!important}.ui.inverted.teal.segment{background-color:#00b5ad!important;color:#fff!important}.ui.blue.segment:not(.inverted){border-top:2px solid #2185d0!important}.ui.inverted.blue.segment{background-color:#2185d0!important;color:#fff!important}.ui.violet.segment:not(.inverted){border-top:2px solid #6435c9!important}.ui.inverted.violet.segment{background-color:#6435c9!important;color:#fff!important}.ui.purple.segment:not(.inverted){border-top:2px solid #a333c8!important}.ui.inverted.purple.segment{background-color:#a333c8!important;color:#fff!important}.ui.pink.segment:not(.inverted){border-top:2px solid #e03997!important}.ui.inverted.pink.segment{background-color:#e03997!important;color:#fff!important}.ui.brown.segment:not(.inverted){border-top:2px solid #a5673f!important}.ui.inverted.brown.segment{background-color:#a5673f!important;color:#fff!important}.ui.grey.segment:not(.inverted){border-top:2px solid #767676!important}.ui.inverted.grey.segment{background-color:#767676!important;color:#fff!important}.ui.black.segment:not(.inverted){border-top:2px solid #1b1c1d!important}.ui.inverted.black.segment{background-color:#1b1c1d!important;color:#fff!important}.ui[class*="left aligned"].segment{text-align:left}.ui[class*="right aligned"].segment{text-align:right}.ui[class*="center aligned"].segment{text-align:center}.ui.floated.segment,.ui[class*="left floated"].segment{float:left;margin-right:1em}.ui[class*="right floated"].segment{float:right;margin-left:1em}.ui.inverted.segment{border:none;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background:#1b1c1d;color:rgba(255,255,255,.9)}.ui.inverted.segment .segment{color:rgba(0,0,0,.87)}.ui.inverted.segment .inverted.segment{color:rgba(255,255,255,.9)}.ui.inverted.attached.segment{border-color:#555}.ui.secondary.segment{background:#f3f4f5;color:rgba(0,0,0,.6)}.ui.secondary.inverted.segment{background:#4c4f52 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.2)),to(rgba(255,255,255,.2)));background:#4c4f52 -webkit-linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);background:#4c4f52 linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);color:rgba(255,255,255,.8)}.ui.tertiary.segment{background:#dcddde;color:rgba(0,0,0,.6)}.ui.tertiary.inverted.segment{background:#717579 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.35)),to(rgba(255,255,255,.35)));background:#717579 -webkit-linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);background:#717579 linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);color:rgba(255,255,255,.8)}.ui.attached.segment{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached:not(.message)+.ui.attached.segment:not(.top){border-top:none}.ui[class*="top attached"].segment{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.25rem .25rem 0 0}.ui.segment[class*="top attached"]:first-child{margin-top:0}.ui.segment[class*="bottom attached"]{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui.segment[class*="bottom attached"]:last-child{margin-bottom:0}.ui.mini.segment,.ui.mini.segments .segment{font-size:.8125rem}.ui.tiny.segment,.ui.tiny.segments .segment{font-size:.875rem}.ui.small.segment,.ui.small.segments .segment{font-size:.9375rem}.ui.segment,.ui.segments .segment{font-size:1rem}.ui.large.segment,.ui.large.segments .segment{font-size:1.125rem}.ui.big.segment,.ui.big.segments .segment{font-size:1.3125rem}.ui.huge.segment,.ui.huge.segments .segment{font-size:1.4375rem}.ui.massive.segment,.ui.massive.segments .segment{font-size:1.6875rem}.ui.segment.square{border-radius:0}.ui.segment.homepage-hero .ui.segment .size{color:#9ec2e3}.ui.segment.homepage-callout{padding:3em 0 3em 0;margin:0}footer.ui.segment{margin:0;padding:3em 0 3em 0}
\ No newline at end of file
+ */.ui.segment{position:relative;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;padding:1em 1em;border-radius:.25rem;border:1px solid rgba(34,36,38,.15)}.ui.segment:first-child{margin-top:0}.ui.segment:last-child{margin-bottom:0}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;border-bottom:1px solid rgba(34,36,38,.15)}.ui.vertical.segment:last-child{border-bottom:none}.ui.inverted.segment>.ui.header,.ui.inverted.segment>.ui.header .sub.header{color:#fff}.ui[class*="bottom attached"].segment>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="top attached"].segment>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.grid>.row>.ui.segment.column,.ui.grid>.ui.segment.column,.ui.page.grid.segment{padding-top:2em;padding-bottom:2em}.ui.grid.segment{margin:1rem 0;border-radius:.25rem}.ui.basic.table.segment{background:#fff;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui[class*="very basic"].table.segment{padding:1em 1em}.ui.segment.tab:last-child{margin-bottom:1rem}.ui.placeholder.segment{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;max-width:initial;-webkit-animation:none;animation:none;overflow:visible;padding:1em 1em;min-height:18rem;background:#f9fafb;border-color:rgba(34,36,38,.15);-webkit-box-shadow:0 2px 25px 0 rgba(34,36,38,.05) inset;box-shadow:0 2px 25px 0 rgba(34,36,38,.05) inset}.ui.placeholder.segment .button,.ui.placeholder.segment textarea{display:block}.ui.placeholder.segment .button,.ui.placeholder.segment .field,.ui.placeholder.segment textarea,.ui.placeholder.segment>.ui.input{max-width:15rem;margin-left:auto;margin-right:auto}.ui.placeholder.segment .column .button,.ui.placeholder.segment .column .field,.ui.placeholder.segment .column textarea,.ui.placeholder.segment .column>.ui.input{max-width:15rem;margin-left:auto;margin-right:auto}.ui.placeholder.segment>.inline{-ms-flex-item-align:center;align-self:center}.ui.placeholder.segment>.inline>.button{display:inline-block;width:auto;margin:0 .3125rem 0 0}.ui.placeholder.segment>.inline>.button:last-child{margin-right:0}.ui.piled.segment,.ui.piled.segments{margin:3em 0;-webkit-box-shadow:'';box-shadow:'';z-index:auto}.ui.piled.segment:first-child{margin-top:0}.ui.piled.segment:last-child{margin-bottom:0}.ui.piled.segment:after,.ui.piled.segment:before,.ui.piled.segments:after,.ui.piled.segments:before{background-color:#fff;visibility:visible;content:'';display:block;height:100%;left:0;position:absolute;width:100%;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:'';box-shadow:''}.ui.piled.segment:before,.ui.piled.segments:before{-webkit-transform:rotate(-1.2deg);transform:rotate(-1.2deg);top:0;z-index:-2}.ui.piled.segment:after,.ui.piled.segments:after{-webkit-transform:rotate(1.2deg);transform:rotate(1.2deg);top:0;z-index:-1}.ui[class*="top attached"].piled.segment{margin-top:3em;margin-bottom:0}.ui.piled.segment[class*="top attached"]:first-child{margin-top:0}.ui.piled.segment[class*="bottom attached"]{margin-top:0;margin-bottom:3em}.ui.piled.segment[class*="bottom attached"]:last-child{margin-bottom:0}.ui.stacked.segment{padding-bottom:1.4em}.ui.stacked.segment:after,.ui.stacked.segment:before,.ui.stacked.segments:after,.ui.stacked.segments:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(34,36,38,.15);background:rgba(0,0,0,.03);width:100%;height:6px;visibility:visible}.ui.stacked.segment:before,.ui.stacked.segments:before{display:none}.ui.tall.stacked.segment:before,.ui.tall.stacked.segments:before{display:block;bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before,.ui.stacked.inverted.segments:after,.ui.stacked.inverted.segments:before{background-color:rgba(0,0,0,.03);border-top:1px solid rgba(34,36,38,.35)}.ui.padded.segment{padding:1.5em}.ui[class*="very padded"].segment{padding:3em}.ui.padded.segment.vertical.segment,.ui[class*="very padded"].vertical.segment{padding-left:0;padding-right:0}.ui.compact.segment{display:table}.ui.compact.segments{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ui.compact.segments .segment,.ui.segments .compact.segment{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ui.circular.segment{display:table-cell;padding:2em;text-align:center;vertical-align:middle;border-radius:500em}.ui.raised.raised.segment,.ui.raised.raised.segments{-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.segments{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;margin:1rem 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.25rem}.ui.segments:first-child{margin-top:0}.ui.segments:last-child{margin-bottom:0}.ui.segments>.segment{top:0;bottom:0;border-radius:0;margin:0;width:auto;-webkit-box-shadow:none;box-shadow:none;border:none;border-top:1px solid rgba(34,36,38,.15)}.ui.segments:not(.horizontal)>.segment:first-child{top:0;bottom:0;border-top:none;margin-top:0;margin-bottom:0;border-radius:.25rem .25rem 0 0}.ui.segments:not(.horizontal)>.segment:last-child{top:0;bottom:0;margin-top:0;margin-bottom:0;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui.segments:not(.horizontal)>.segment:only-child{border-radius:.25rem}.ui.segments>.ui.segments{border-top:1px solid rgba(34,36,38,.15);margin:1rem 1rem}.ui.segments>.segments:first-child{border-top:none}.ui.segments>.segment+.segments:not(.horizontal){margin-top:0}.ui.horizontal.segments{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background-color:transparent;padding:0;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;border-radius:.25rem;border:1px solid rgba(34,36,38,.15)}.ui.stackable.horizontal.segments{-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.segments>.horizontal.segments{margin:0;background-color:transparent;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-top:1px solid rgba(34,36,38,.15)}.ui.horizontal.segments:not(.compact)>.segment:not(.compact){-webkit-box-flex:1;flex:1 1 auto;-ms-flex:1 1 0}.ui.horizontal.segments>.segment{margin:0;min-width:0;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-left:1px solid rgba(34,36,38,.15)}.ui.segments>.horizontal.segments:first-child{border-top:none}.ui.horizontal.segments:not(.stackable)>.segment:first-child{border-left:none}.ui.disabled.segment{opacity:.45;color:rgba(40,40,40,.3)}.ui.loading.segment{position:relative;cursor:default;pointer-events:none;text-shadow:none!important;-webkit-transition:all 0s linear;transition:all 0s linear}.ui.loading.segment:before{position:absolute;content:'';top:0;left:0;background:rgba(255,255,255,.8);width:100%;height:100%;border-radius:.25rem;z-index:100}.ui.loading.segment:after{position:absolute;content:'';top:50%;left:50%;margin:-1.5em 0 0 -1.5em;width:3em;height:3em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}.ui.basic.segment,.ui.basic.segments,.ui.segments .ui.basic.segment{background:none transparent;-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:0}.ui.clearing.segment:after{content:"";display:block;clear:both}.ui.red.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #db2828}.ui.inverted.red.segment.segment.segment.segment.segment{background-color:#db2828;color:#fff}.ui.orange.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #f2711c}.ui.inverted.orange.segment.segment.segment.segment.segment{background-color:#f2711c;color:#fff}.ui.yellow.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #fbbd08}.ui.inverted.yellow.segment.segment.segment.segment.segment{background-color:#fbbd08;color:#fff}.ui.olive.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #b5cc18}.ui.inverted.olive.segment.segment.segment.segment.segment{background-color:#b5cc18;color:#fff}.ui.green.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #21ba45}.ui.inverted.green.segment.segment.segment.segment.segment{background-color:#21ba45;color:#fff}.ui.teal.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #00b5ad}.ui.inverted.teal.segment.segment.segment.segment.segment{background-color:#00b5ad;color:#fff}.ui.blue.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #2185d0}.ui.inverted.blue.segment.segment.segment.segment.segment{background-color:#2185d0;color:#fff}.ui.violet.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #6435c9}.ui.inverted.violet.segment.segment.segment.segment.segment{background-color:#6435c9;color:#fff}.ui.purple.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #a333c8}.ui.inverted.purple.segment.segment.segment.segment.segment{background-color:#a333c8;color:#fff}.ui.pink.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #e03997}.ui.inverted.pink.segment.segment.segment.segment.segment{background-color:#e03997;color:#fff}.ui.brown.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #a5673f}.ui.inverted.brown.segment.segment.segment.segment.segment{background-color:#a5673f;color:#fff}.ui.grey.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #767676}.ui.inverted.grey.segment.segment.segment.segment.segment{background-color:#767676;color:#fff}.ui.black.segment.segment.segment.segment.segment:not(.inverted){border-top:2px solid #1b1c1d}.ui.inverted.black.segment.segment.segment.segment.segment{background-color:#1b1c1d;color:#fff}.ui[class*="left aligned"].segment{text-align:left}.ui[class*="right aligned"].segment{text-align:right}.ui[class*="center aligned"].segment{text-align:center}.ui.floated.segment,.ui[class*="left floated"].segment{float:left;margin-right:1em}.ui[class*="right floated"].segment{float:right;margin-left:1em}.ui.inverted.segment{border:none;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background:#1b1c1d;color:rgba(255,255,255,.9)}.ui.inverted.segment .segment{color:rgba(0,0,0,.87)}.ui.inverted.segment .inverted.segment{color:rgba(255,255,255,.9)}.ui.inverted.attached.segment{border-color:#555}.ui.inverted.loading.segment{color:#fff}.ui.inverted.loading.segment:before{background:rgba(0,0,0,.85)}.ui.secondary.segment{background:#f3f4f5;color:rgba(0,0,0,.6)}.ui.secondary.inverted.segment{background:#4c4f52 -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.2)),to(rgba(255,255,255,.2)));background:#4c4f52 -webkit-linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);background:#4c4f52 linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);color:rgba(255,255,255,.8)}.ui.tertiary.segment{background:#dcddde;color:rgba(0,0,0,.6)}.ui.tertiary.inverted.segment{background:#717579 -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.35)),to(rgba(255,255,255,.35)));background:#717579 -webkit-linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);background:#717579 linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);color:rgba(255,255,255,.8)}.ui.attached.segment{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached:not(.message)+.ui.attached.segment:not(.top){border-top:none}.ui[class*="top attached"].segment{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.25rem .25rem 0 0}.ui.segment[class*="top attached"]:first-child{margin-top:0}.ui.segment[class*="bottom attached"]{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .25rem .25rem}.ui.segment[class*="bottom attached"]:last-child{margin-bottom:1rem}.ui.fitted.segment:not(.horizontally){padding-top:0;padding-bottom:0}.ui.fitted.segment:not(.vertically){padding-left:0;padding-right:0}.ui.segment,.ui.segments .segment{font-size:1rem}.ui.mini.segment,.ui.mini.segments .segment{font-size:.8125rem}.ui.tiny.segment,.ui.tiny.segments .segment{font-size:.875rem}.ui.small.segment,.ui.small.segments .segment{font-size:.9375rem}.ui.large.segment,.ui.large.segments .segment{font-size:1.125rem}.ui.big.segment,.ui.big.segments .segment{font-size:1.3125rem}.ui.huge.segment,.ui.huge.segments .segment{font-size:1.4375rem}.ui.massive.segment,.ui.massive.segments .segment{font-size:1.6875rem}.ui.segment.square{border-radius:0}.ui.segment.homepage-hero .ui.segment .size{color:#9ec2e3}.ui.segment.homepage-callout{padding:3em 0 3em 0;margin:0}footer.ui.segment{margin:0;padding:3em 0 3em 0}
\ No newline at end of file
diff --git a/ui/dist/components/site.css b/ui/dist/components/site.css
index a424bbf3298..f1f92c75c1a 100644
--- a/ui/dist/components/site.css
+++ b/ui/dist/components/site.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Site
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Site
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -13,7 +13,7 @@
Page
*******************************/
-@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:200,400,400italic&subset=latin');
+@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:200,400,400italic&subset=latin&display=swap');
html,
body {
height: 100%;
@@ -22,8 +22,8 @@ html {
font-size: 16px;
}
body {
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #FFFFFF;
@@ -31,7 +31,6 @@ body {
font-size: 18px;
line-height: 1.5em;
color: rgba(0, 0, 0, 0.87);
- font-smoothing: antialiased;
}
@@ -46,9 +45,9 @@ h4,
h5 {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
line-height: 1.28571429em;
- margin: calc(2rem - 0.14285714em ) 0em 1rem;
+ margin: calc(2rem - 0.1428571428571429em) 0 1rem;
font-weight: 200;
- padding: 0em;
+ padding: 0;
}
h1 {
min-height: 1rem;
@@ -71,14 +70,14 @@ h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -87,14 +86,14 @@ h5:last-child {
*******************************/
p {
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
line-height: 1.5em;
}
p:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*-------------------
@@ -147,6 +146,10 @@ input::-moz-selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.87);
}
+textarea::-moz-selection, input::-moz-selection {
+ background-color: rgba(100, 100, 100, 0.4);
+ color: rgba(0, 0, 0, 0.87);
+}
textarea::selection,
input::selection {
background-color: rgba(100, 100, 100, 0.4);
@@ -161,7 +164,7 @@ body ::-webkit-scrollbar {
}
body ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
- border-radius: 0px;
+ border-radius: 0;
}
body ::-webkit-scrollbar-thumb {
cursor: pointer;
@@ -178,16 +181,16 @@ body ::-webkit-scrollbar-thumb:hover {
}
/* Inverted UI */
-body .ui.inverted::-webkit-scrollbar-track {
+body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
-body .ui.inverted::-webkit-scrollbar-thumb {
+body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
}
-body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
+body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 255, 255, 0.15);
}
-body .ui.inverted::-webkit-scrollbar-thumb:hover {
+body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.35);
}
diff --git a/ui/dist/components/site.js b/ui/dist/components/site.js
index 235cd49d104..bc53e9f6798 100644
--- a/ui/dist/components/site.js
+++ b/ui/dist/components/site.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Site
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Site
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -10,6 +10,10 @@
;(function ($, window, document, undefined) {
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
$.site = $.fn.site = function(parameters) {
var
time = new Date().getTime(),
@@ -26,7 +30,6 @@ $.site = $.fn.site = function(parameters) {
namespace = settings.namespace,
error = settings.error,
- eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$document = $(document),
@@ -391,7 +394,7 @@ $.site = $.fn.site = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -439,6 +442,7 @@ $.site.settings = {
modules: [
'accordion',
'api',
+ 'calendar',
'checkbox',
'dimmer',
'dropdown',
@@ -447,15 +451,17 @@ $.site.settings = {
'modal',
'nag',
'popup',
+ 'slider',
'rating',
'shape',
'sidebar',
'state',
'sticky',
'tab',
+ 'toast',
'transition',
- 'visit',
- 'visibility'
+ 'visibility',
+ 'visit'
],
siteNamespace : 'site',
diff --git a/ui/dist/components/site.min.css b/ui/dist/components/site.min.css
index 3f613ead514..b1cfc3b15dd 100644
--- a/ui/dist/components/site.min.css
+++ b/ui/dist/components/site.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Site
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Site
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:200,400,400italic&subset=latin');body,html{height:100%}html{font-size:16px}body{margin:0;padding:0;overflow-x:hidden;min-width:320px;background:#fff;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:18px;line-height:1.5em;color:rgba(0,0,0,.87);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.28571429em;margin:calc(2rem - .14285714em) 0 1rem;font-weight:200;padding:0}h1{min-height:1rem;font-size:3rem}h2{font-size:2.614rem}h3{font-size:2.18rem}h4{font-size:1.8rem}h5{font-size:1.5rem}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child{margin-bottom:0}p{margin:0 0 1em;line-height:1.5em}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#4183c4;text-decoration:none}a:hover{color:#1e70bf;text-decoration:none}::-webkit-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::-moz-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}input::-webkit-selection,textarea::-webkit-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::selection,textarea::selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}body .ui.inverted::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}body .ui.inverted::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}body .ui.inverted::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.segment.homepage-hero a{color:#fff}.ui.docs.menu .item.sub{display:none}.ui.docs.menu .item.active+.item.sub{display:inherit;padding:0 0 0 2em}.docs-content{font-family:"Libre Baskerville";line-height:1.6}.docs-content :not(pre)>code[class*=language-]{background:#fff1f1;color:#ec4f4f}
\ No newline at end of file
+ */@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:200,400,400italic&subset=latin&display=swap');body,html{height:100%}html{font-size:16px}body{margin:0;padding:0;overflow-x:hidden;min-width:320px;background:#fff;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:18px;line-height:1.5em;color:rgba(0,0,0,.87)}h1,h2,h3,h4,h5{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.28571429em;margin:calc(2rem - .1428571428571429em) 0 1rem;font-weight:200;padding:0}h1{min-height:1rem;font-size:3rem}h2{font-size:2.614rem}h3{font-size:2.18rem}h4{font-size:1.8rem}h5{font-size:1.5rem}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child{margin-bottom:0}p{margin:0 0 1em;line-height:1.5em}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#4183c4;text-decoration:none}a:hover{color:#1e70bf;text-decoration:none}::-webkit-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::-moz-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}input::-webkit-selection,textarea::-webkit-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::selection,textarea::selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.segment.homepage-hero a{color:#fff}.ui.docs.menu .item.sub{display:none}.ui.docs.menu .item.active+.item.sub{display:inherit;padding:0 0 0 2em}.docs-content{font-family:"Libre Baskerville";line-height:1.6}.docs-content :not(pre)>code[class*=language-]{background:#fff1f1;color:#ec4f4f}
\ No newline at end of file
diff --git a/ui/dist/components/site.min.js b/ui/dist/components/site.min.js
index 263af030f33..62b5afdc000 100644
--- a/ui/dist/components/site.min.js
+++ b/ui/dist/components/site.min.js
@@ -1 +1,11 @@
-!function(b,p,v,h){b.site=b.fn.site=function(e){var a,c,i=(new Date).getTime(),t=[],n=e,o="string"==typeof n,l=[].slice.call(arguments,1),u=b.isPlainObject(e)?b.extend(!0,{},b.site.settings,e):b.extend({},b.site.settings),s=u.namespace,m=u.error,r="module-"+s,d=b(v),g=this,f=d.data(r);return a={initialize:function(){a.instantiate()},instantiate:function(){a.verbose("Storing instance of site",a),f=a,d.data(r,a)},normalize:function(){a.fix.console(),a.fix.requestAnimationFrame()},fix:{console:function(){a.debug("Normalizing window.console"),console!==h&&console.log!==h||(a.verbose("Console not available, normalizing events"),a.disable.console()),void 0!==console.group&&void 0!==console.groupEnd&&void 0!==console.groupCollapsed||(a.verbose("Console group not available, normalizing events"),p.console.group=function(){},p.console.groupEnd=function(){},p.console.groupCollapsed=function(){}),void 0===console.markTimeline&&(a.verbose("Mark timeline not available, normalizing events"),p.console.markTimeline=function(){})},consoleClear:function(){a.debug("Disabling programmatic console clearing"),p.console.clear=function(){}},requestAnimationFrame:function(){a.debug("Normalizing requestAnimationFrame"),p.requestAnimationFrame===h&&(a.debug("RequestAnimationFrame not available, normalizing event"),p.requestAnimationFrame=p.requestAnimationFrame||p.mozRequestAnimationFrame||p.webkitRequestAnimationFrame||p.msRequestAnimationFrame||function(e){setTimeout(e,0)})}},moduleExists:function(e){return b.fn[e]!==h&&b.fn[e].settings!==h},enabled:{modules:function(e){var o=[];return e=e||u.modules,b.each(e,function(e,n){a.moduleExists(n)&&o.push(n)}),o}},disabled:{modules:function(e){var o=[];return e=e||u.modules,b.each(e,function(e,n){a.moduleExists(n)||o.push(n)}),o}},change:{setting:function(t,s,e,r){e="string"==typeof e?"all"===e?u.modules:[e]:e||u.modules,r=r===h||r,b.each(e,function(e,n){var o,i=!a.moduleExists(n)||(b.fn[n].settings.namespace||!1);a.moduleExists(n)&&(a.verbose("Changing default setting",t,s,n),b.fn[n].settings[t]=s,r&&i&&0<(o=b(":data(module-"+i+")")).length&&(a.verbose("Modifying existing settings",o),o[n]("setting",t,s)))})},settings:function(i,e,t){e="string"==typeof e?[e]:e||u.modules,t=t===h||t,b.each(e,function(e,n){var o;a.moduleExists(n)&&(a.verbose("Changing default setting",i,n),b.extend(!0,b.fn[n].settings,i),t&&s&&0<(o=b(":data(module-"+s+")")).length&&(a.verbose("Modifying existing settings",o),o[n]("setting",i)))})}},enable:{console:function(){a.console(!0)},debug:function(e,n){e=e||u.modules,a.debug("Enabling debug for modules",e),a.change.setting("debug",!0,e,n)},verbose:function(e,n){e=e||u.modules,a.debug("Enabling verbose debug for modules",e),a.change.setting("verbose",!0,e,n)}},disable:{console:function(){a.console(!1)},debug:function(e,n){e=e||u.modules,a.debug("Disabling debug for modules",e),a.change.setting("debug",!1,e,n)},verbose:function(e,n){e=e||u.modules,a.debug("Disabling verbose debug for modules",e),a.change.setting("verbose",!1,e,n)}},console:function(e){if(e){if(f.cache.console===h)return void a.error(m.console);a.debug("Restoring console function"),p.console=f.cache.console}else a.debug("Disabling console function"),f.cache.console=p.console,p.console={clear:function(){},error:function(){},group:function(){},groupCollapsed:function(){},groupEnd:function(){},info:function(){},log:function(){},markTimeline:function(){},warn:function(){}}},destroy:function(){a.verbose("Destroying previous site for",d),d.removeData(r)},cache:{},setting:function(e,n){if(b.isPlainObject(e))b.extend(!0,u,e);else{if(n===h)return u[e];u[e]=n}},internal:function(e,n){if(b.isPlainObject(e))b.extend(!0,a,e);else{if(n===h)return a[e];a[e]=n}},debug:function(){u.debug&&(u.performance?a.performance.log(arguments):(a.debug=Function.prototype.bind.call(console.info,console,u.name+":"),a.debug.apply(console,arguments)))},verbose:function(){u.verbose&&u.debug&&(u.performance?a.performance.log(arguments):(a.verbose=Function.prototype.bind.call(console.info,console,u.name+":"),a.verbose.apply(console,arguments)))},error:function(){a.error=Function.prototype.bind.call(console.error,console,u.name+":"),a.error.apply(console,arguments)},performance:{log:function(e){var n,o;u.performance&&(o=(n=(new Date).getTime())-(i||n),i=n,t.push({Element:g,Name:e[0],Arguments:[].slice.call(e,1)||"","Execution Time":o})),clearTimeout(a.performance.timer),a.performance.timer=setTimeout(a.performance.display,500)},display:function(){var e=u.name+":",o=0;i=!1,clearTimeout(a.performance.timer),b.each(t,function(e,n){o+=n["Execution Time"]}),e+=" "+o+"ms",(console.group!==h||console.table!==h)&&00&&(console.groupCollapsed(t),console.table?console.table(r):e.each(r,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),r=[]}},invoke:function(t,o,s){var c,r,l,u=C;return o=o||d,s=w||s,"string"==typeof t&&u!==a&&(t=t.split(/[\. ]/),c=t.length-1,e.each(t,function(i,o){var s=i!=c?o+t[i+1].charAt(0).toUpperCase()+t[i+1].slice(1):t;if(e.isPlainObject(u[s])&&i!=c)u=u[s];else{if(u[s]!==a)return r=u[s],!1;if(!e.isPlainObject(u[o])||i==c)return u[o]!==a?(r=u[o],!1):(n.error(v.method,t),!1);u=u[o]}})),e.isFunction(r)?l=r.apply(s,o):r!==a&&(l=r),e.isArray(i)?i.push(l):i!==a?i=[i,l]:l!==a&&(i=l),r}},u?(C===a&&n.initialize(),n.invoke(l)):(C!==a&&C.invoke("destroy"),n.initialize())}),i!==a?i:this},e.fn.state.settings={name:"State",debug:!1,verbose:!1,namespace:"state",performance:!0,onActivate:function(){},onDeactivate:function(){},onChange:function(){},activateTest:function(){return!0},deactivateTest:function(){return!0},automatic:!0,sync:!1,flashDuration:1e3,filter:{text:".loading, .disabled",active:".disabled"},context:!1,error:{beforeSend:"The before send function has cancelled state change",method:"The method you called is not defined."},metadata:{promise:"promise",storedText:"stored-text"},className:{active:"active",disabled:"disabled",error:"error",loading:"loading",success:"success",warning:"warning"},selector:{text:!1},defaults:{input:{disabled:!0,loading:!0,active:!0},button:{disabled:!0,loading:!0,active:!0},progress:{active:!0,success:!0,warning:!0,error:!0}},states:{active:!0,disabled:!0,error:!0,loading:!0,success:!0,warning:!0},text:{disabled:!1,flash:!1,hover:!1,active:!1,inactive:!1,activate:!1,deactivate:!1}}}(jQuery,window,document);
\ No newline at end of file
+!function(w,e,C){"use strict";w.isFunction=w.isFunction||function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),w.fn.state=function(v){var g,b=w(this),x=b.selector||"",p=(new Date).getTime(),h=[],m=v,T="string"==typeof m,y=[].slice.call(arguments,1);return b.each(function(){var i=w.isPlainObject(v)?w.extend(!0,{},w.fn.state.settings,v):w.extend({},w.fn.state.settings),c=i.error,n=i.metadata,t=i.className,e=i.namespace,a=i.states,o=i.text,s="."+e,r=e+"-module",l=w(this),u=this,d=l.data(r),f={initialize:function(){f.verbose("Initializing module"),i.automatic&&f.add.defaults(),i.context&&""!==x?w(i.context).on(x,"mouseenter"+s,f.change.text).on(x,"mouseleave"+s,f.reset.text).on(x,"click"+s,f.toggle.state):l.on("mouseenter"+s,f.change.text).on("mouseleave"+s,f.reset.text).on("click"+s,f.toggle.state),f.instantiate()},instantiate:function(){f.verbose("Storing instance of module",f),d=f,l.data(r,f)},destroy:function(){f.verbose("Destroying previous module",d),l.off(s).removeData(r)},refresh:function(){f.verbose("Refreshing selector cache"),l=w(u)},add:{defaults:function(){var n=v&&w.isPlainObject(v.states)?v.states:{};w.each(i.defaults,function(e,t){f.is[e]!==C&&f.is[e]()&&(f.verbose("Adding default states",e,u),w.extend(i.states,t,n))})}},is:{active:function(){return l.hasClass(t.active)},loading:function(){return l.hasClass(t.loading)},inactive:function(){return!l.hasClass(t.active)},state:function(e){return t[e]!==C&&l.hasClass(t[e])},enabled:function(){return!l.is(i.filter.active)},disabled:function(){return l.is(i.filter.active)},textEnabled:function(){return!l.is(i.filter.text)},button:function(){return l.is(".button:not(a, .submit)")},input:function(){return l.is("input")},progress:function(){return l.is(".ui.progress")}},allow:function(e){f.debug("Now allowing state",e),a[e]=!0},disallow:function(e){f.debug("No longer allowing",e),a[e]=!1},allows:function(e){return a[e]||!1},enable:function(){l.removeClass(t.disabled)},disable:function(){l.addClass(t.disabled)},setState:function(e){f.allows(e)&&l.addClass(t[e])},removeState:function(e){f.allows(e)&&l.removeClass(t[e])},toggle:{state:function(){var e;if(f.allows("active")&&f.is.enabled()){if(f.refresh(),w.fn.api!==C)if(e=l.api("get request"),l.api("was cancelled"))f.debug("API Request cancelled by beforesend"),i.activateTest=function(){return!1},i.deactivateTest=function(){return!1};else if(e)return void f.listenTo(e);f.change.state()}}},listenTo:function(e){f.debug("API request detected, waiting for state signal",e),e&&(o.loading&&f.update.text(o.loading),w.when(e).then(function(){"resolved"==e.state()?(f.debug("API request succeeded"),i.activateTest=function(){return!0},i.deactivateTest=function(){return!0}):(f.debug("API request failed"),i.activateTest=function(){return!1},i.deactivateTest=function(){return!1}),f.change.state()}))},change:{state:function(){f.debug("Determining state change direction"),f.is.inactive()?f.activate():f.deactivate(),i.sync&&f.sync(),i.onChange.call(u)},text:function(){f.is.textEnabled()&&(f.is.disabled()?(f.verbose("Changing text to disabled text",o.hover),f.update.text(o.disabled)):f.is.active()?o.hover?(f.verbose("Changing text to hover text",o.hover),f.update.text(o.hover)):o.deactivate&&(f.verbose("Changing text to deactivating text",o.deactivate),f.update.text(o.deactivate)):o.hover?(f.verbose("Changing text to hover text",o.hover),f.update.text(o.hover)):o.activate&&(f.verbose("Changing text to activating text",o.activate),f.update.text(o.activate)))}},activate:function(){i.activateTest.call(u)&&(f.debug("Setting state to active"),l.addClass(t.active),f.update.text(o.active),i.onActivate.call(u))},deactivate:function(){i.deactivateTest.call(u)&&(f.debug("Setting state to inactive"),l.removeClass(t.active),f.update.text(o.inactive),i.onDeactivate.call(u))},sync:function(){f.verbose("Syncing other buttons to current state"),f.is.active()?b.not(l).state("activate"):b.not(l).state("deactivate")},get:{text:function(){return i.selector.text?l.find(i.selector.text).text():l.html()},textFor:function(e){return o[e]||!1}},flash:{text:function(e,t,n){var a=f.get.text();f.debug("Flashing text message",e,t),e=e||i.text.flash,t=t||i.flashDuration,n=n||function(){},f.update.text(e),setTimeout(function(){f.update.text(a),n.call(u)},t)}},reset:{text:function(){var e=o.active||l.data(n.storedText),t=o.inactive||l.data(n.storedText);f.is.textEnabled()&&(f.is.active()&&e?(f.verbose("Resetting active text",e),f.update.text(e)):t&&(f.verbose("Resetting inactive text",e),f.update.text(t)))}},update:{text:function(e){var t=f.get.text();e&&e!==t?(f.debug("Updating text",e),i.selector.text?l.data(n.storedText,e).find(i.selector.text).text(e):l.data(n.storedText,e).html(e)):f.debug("Text is already set, ignoring update",e)}},setting:function(e,t){if(f.debug("Changing setting",e,t),w.isPlainObject(e))w.extend(!0,i,e);else{if(t===C)return i[e];w.isPlainObject(i[e])?w.extend(!0,i[e],t):i[e]=t}},internal:function(e,t){if(w.isPlainObject(e))w.extend(!0,f,e);else{if(t===C)return f[e];f[e]=t}},debug:function(){!i.silent&&i.debug&&(i.performance?f.performance.log(arguments):(f.debug=Function.prototype.bind.call(console.info,console,i.name+":"),f.debug.apply(console,arguments)))},verbose:function(){!i.silent&&i.verbose&&i.debug&&(i.performance?f.performance.log(arguments):(f.verbose=Function.prototype.bind.call(console.info,console,i.name+":"),f.verbose.apply(console,arguments)))},error:function(){i.silent||(f.error=Function.prototype.bind.call(console.error,console,i.name+":"),f.error.apply(console,arguments))},performance:{log:function(e){var t,n;i.performance&&(n=(t=(new Date).getTime())-(p||t),p=t,h.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:u,"Execution Time":n})),clearTimeout(f.performance.timer),f.performance.timer=setTimeout(f.performance.display,500)},display:function(){var e=i.name+":",n=0;p=!1,clearTimeout(f.performance.timer),w.each(h,function(e,t){n+=t["Execution Time"]}),e+=" "+n+"ms",x&&(e+=" '"+x+"'"),(console.group!==C||console.table!==C)&&0 .label ~ .value,
.ui.statistic > .label ~ .value {
- margin-top: 0rem;
+ margin-top: 0;
}
/* Bottom Label */
.ui.statistics .statistic > .value ~ .label,
.ui.statistic > .value ~ .label {
- margin-top: 0rem;
+ margin-top: 0;
}
@@ -148,7 +148,7 @@
.ui.statistic > .value .icon {
opacity: 1;
width: auto;
- margin: 0em;
+ margin: 0;
}
/*--------------
@@ -188,79 +188,79 @@
---------------*/
.ui.ten.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.ten.statistics .statistic {
min-width: 10%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.nine.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.nine.statistics .statistic {
min-width: 11.11111111%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.eight.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.eight.statistics .statistic {
min-width: 12.5%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.seven.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.seven.statistics .statistic {
min-width: 14.28571429%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.six.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.six.statistics .statistic {
min-width: 16.66666667%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.five.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.five.statistics .statistic {
min-width: 20%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.four.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.four.statistics .statistic {
min-width: 25%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.three.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.three.statistics .statistic {
min-width: 33.33333333%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.two.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.two.statistics .statistic {
min-width: 50%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
.ui.one.statistics {
- margin: 0em 0em -1em;
+ margin: 0 0 -1em;
}
.ui.one.statistics .statistic {
min-width: 100%;
- margin: 0em 0em 1em;
+ margin: 0 0 1em;
}
/*--------------
- Horizontal
----------------*/
+ Horizontal
+ ---------------*/
.ui.horizontal.statistic {
-webkit-box-orient: horizontal;
@@ -276,7 +276,7 @@
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
- margin: 0em;
+ margin: 0;
max-width: none;
}
.ui.horizontal.statistics .statistic {
@@ -288,11 +288,11 @@
-ms-flex-align: center;
align-items: center;
max-width: none;
- margin: 1em 0em;
+ margin: 1em 0;
}
.ui.horizontal.statistic > .text.value,
.ui.horizontal.statistics > .statistic > .text.value {
- min-height: 0em !important;
+ min-height: 0 !important;
}
.ui.horizontal.statistics .statistic > .value .icon,
.ui.horizontal.statistic > .value .icon {
@@ -307,77 +307,12 @@
.ui.horizontal.statistic > .label {
display: inline-block;
vertical-align: middle;
- margin: 0em 0em 0em 0.75em;
+ margin: 0 0 0 0.75em;
}
/*--------------
- Colors
----------------*/
-
-.ui.red.statistics .statistic > .value,
-.ui.statistics .red.statistic > .value,
-.ui.red.statistic > .value {
- color: #DB2828;
-}
-.ui.orange.statistics .statistic > .value,
-.ui.statistics .orange.statistic > .value,
-.ui.orange.statistic > .value {
- color: #F2711C;
-}
-.ui.yellow.statistics .statistic > .value,
-.ui.statistics .yellow.statistic > .value,
-.ui.yellow.statistic > .value {
- color: #FBBD08;
-}
-.ui.olive.statistics .statistic > .value,
-.ui.statistics .olive.statistic > .value,
-.ui.olive.statistic > .value {
- color: #B5CC18;
-}
-.ui.green.statistics .statistic > .value,
-.ui.statistics .green.statistic > .value,
-.ui.green.statistic > .value {
- color: #21BA45;
-}
-.ui.teal.statistics .statistic > .value,
-.ui.statistics .teal.statistic > .value,
-.ui.teal.statistic > .value {
- color: #00B5AD;
-}
-.ui.blue.statistics .statistic > .value,
-.ui.statistics .blue.statistic > .value,
-.ui.blue.statistic > .value {
- color: #2185D0;
-}
-.ui.violet.statistics .statistic > .value,
-.ui.statistics .violet.statistic > .value,
-.ui.violet.statistic > .value {
- color: #6435C9;
-}
-.ui.purple.statistics .statistic > .value,
-.ui.statistics .purple.statistic > .value,
-.ui.purple.statistic > .value {
- color: #A333C8;
-}
-.ui.pink.statistics .statistic > .value,
-.ui.statistics .pink.statistic > .value,
-.ui.pink.statistic > .value {
- color: #E03997;
-}
-.ui.brown.statistics .statistic > .value,
-.ui.statistics .brown.statistic > .value,
-.ui.brown.statistic > .value {
- color: #A5673F;
-}
-.ui.grey.statistics .statistic > .value,
-.ui.statistics .grey.statistic > .value,
-.ui.grey.statistic > .value {
- color: #767676;
-}
-
-/*--------------
- Inverted
----------------*/
+ Inverted
+ ---------------*/
.ui.inverted.statistics .statistic > .value,
.ui.inverted.statistic .value {
@@ -387,81 +322,193 @@
.ui.inverted.statistic .label {
color: rgba(255, 255, 255, 0.9);
}
+
+/*--------------
+ Colors
+---------------*/
+
+.ui.primary.statistics .statistic > .value,
+.ui.statistics .primary.statistic > .value,
+.ui.primary.statistic > .value {
+ color: #2185D0;
+}
+.ui.inverted.primary.statistics .statistic > .value,
+.ui.statistics .inverted.primary.statistic > .value,
+.ui.inverted.primary.statistic > .value {
+ color: #54C8FF;
+}
+.ui.secondary.statistics .statistic > .value,
+.ui.statistics .secondary.statistic > .value,
+.ui.secondary.statistic > .value {
+ color: #1B1C1D;
+}
+.ui.inverted.secondary.statistics .statistic > .value,
+.ui.statistics .inverted.secondary.statistic > .value,
+.ui.inverted.secondary.statistic > .value {
+ color: #545454;
+}
+.ui.red.statistics .statistic > .value,
+.ui.statistics .red.statistic > .value,
+.ui.red.statistic > .value {
+ color: #DB2828;
+}
.ui.inverted.red.statistics .statistic > .value,
.ui.statistics .inverted.red.statistic > .value,
.ui.inverted.red.statistic > .value {
color: #FF695E;
}
+.ui.orange.statistics .statistic > .value,
+.ui.statistics .orange.statistic > .value,
+.ui.orange.statistic > .value {
+ color: #F2711C;
+}
.ui.inverted.orange.statistics .statistic > .value,
.ui.statistics .inverted.orange.statistic > .value,
.ui.inverted.orange.statistic > .value {
color: #FF851B;
}
+.ui.yellow.statistics .statistic > .value,
+.ui.statistics .yellow.statistic > .value,
+.ui.yellow.statistic > .value {
+ color: #FBBD08;
+}
.ui.inverted.yellow.statistics .statistic > .value,
.ui.statistics .inverted.yellow.statistic > .value,
.ui.inverted.yellow.statistic > .value {
color: #FFE21F;
}
+.ui.olive.statistics .statistic > .value,
+.ui.statistics .olive.statistic > .value,
+.ui.olive.statistic > .value {
+ color: #B5CC18;
+}
.ui.inverted.olive.statistics .statistic > .value,
.ui.statistics .inverted.olive.statistic > .value,
.ui.inverted.olive.statistic > .value {
color: #D9E778;
}
+.ui.green.statistics .statistic > .value,
+.ui.statistics .green.statistic > .value,
+.ui.green.statistic > .value {
+ color: #21BA45;
+}
.ui.inverted.green.statistics .statistic > .value,
.ui.statistics .inverted.green.statistic > .value,
.ui.inverted.green.statistic > .value {
color: #2ECC40;
}
+.ui.teal.statistics .statistic > .value,
+.ui.statistics .teal.statistic > .value,
+.ui.teal.statistic > .value {
+ color: #00B5AD;
+}
.ui.inverted.teal.statistics .statistic > .value,
.ui.statistics .inverted.teal.statistic > .value,
.ui.inverted.teal.statistic > .value {
color: #6DFFFF;
}
+.ui.blue.statistics .statistic > .value,
+.ui.statistics .blue.statistic > .value,
+.ui.blue.statistic > .value {
+ color: #2185D0;
+}
.ui.inverted.blue.statistics .statistic > .value,
.ui.statistics .inverted.blue.statistic > .value,
.ui.inverted.blue.statistic > .value {
color: #54C8FF;
}
+.ui.violet.statistics .statistic > .value,
+.ui.statistics .violet.statistic > .value,
+.ui.violet.statistic > .value {
+ color: #6435C9;
+}
.ui.inverted.violet.statistics .statistic > .value,
.ui.statistics .inverted.violet.statistic > .value,
.ui.inverted.violet.statistic > .value {
color: #A291FB;
}
+.ui.purple.statistics .statistic > .value,
+.ui.statistics .purple.statistic > .value,
+.ui.purple.statistic > .value {
+ color: #A333C8;
+}
.ui.inverted.purple.statistics .statistic > .value,
.ui.statistics .inverted.purple.statistic > .value,
.ui.inverted.purple.statistic > .value {
color: #DC73FF;
}
+.ui.pink.statistics .statistic > .value,
+.ui.statistics .pink.statistic > .value,
+.ui.pink.statistic > .value {
+ color: #E03997;
+}
.ui.inverted.pink.statistics .statistic > .value,
.ui.statistics .inverted.pink.statistic > .value,
.ui.inverted.pink.statistic > .value {
color: #FF8EDF;
}
+.ui.brown.statistics .statistic > .value,
+.ui.statistics .brown.statistic > .value,
+.ui.brown.statistic > .value {
+ color: #A5673F;
+}
.ui.inverted.brown.statistics .statistic > .value,
.ui.statistics .inverted.brown.statistic > .value,
.ui.inverted.brown.statistic > .value {
color: #D67C1C;
}
+.ui.grey.statistics .statistic > .value,
+.ui.statistics .grey.statistic > .value,
+.ui.grey.statistic > .value {
+ color: #767676;
+}
.ui.inverted.grey.statistics .statistic > .value,
.ui.statistics .inverted.grey.statistic > .value,
.ui.inverted.grey.statistic > .value {
color: #DCDDDE;
}
+.ui.black.statistics .statistic > .value,
+.ui.statistics .black.statistic > .value,
+.ui.black.statistic > .value {
+ color: #1B1C1D;
+}
+.ui.inverted.black.statistics .statistic > .value,
+.ui.statistics .inverted.black.statistic > .value,
+.ui.inverted.black.statistic > .value {
+ color: #545454;
+}
/*--------------
- Floated
----------------*/
+ Floated
+ ---------------*/
.ui[class*="left floated"].statistic {
float: left;
- margin: 0em 2em 1em 0em;
+ margin: 0 2em 1em 0;
}
.ui[class*="right floated"].statistic {
float: right;
- margin: 0em 0em 1em 2em;
+ margin: 0 0 1em 2em;
}
.ui.floated.statistic:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
+}
+
+/*--------------
+ Stackable
+ ---------------*/
+
+@media only screen and (max-width: 767.98px) {
+ .ui.stackable.statistics {
+ width: auto;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .ui.stackable.statistics > .statistic {
+ width: 100% !important;
+ margin: 0 0 !important;
+ padding: 1rem 1rem !important;
+ }
}
/*--------------
@@ -469,88 +516,102 @@
---------------*/
-/* Mini */
+/* Medium */
+.ui.statistics .statistic > .value,
+.ui.statistic > .value {
+ font-size: 4rem;
+}
+.ui.horizontal.statistics .statistic > .value,
+.ui.horizontal.statistic > .value {
+ font-size: 3rem;
+}
+.ui.statistics .statistic > .text.value,
+.ui.statistic > .text.value {
+ font-size: 2rem;
+}
.ui.mini.statistics .statistic > .value,
.ui.mini.statistic > .value {
- font-size: 1.5rem !important;
+ font-size: 1.5rem;
}
.ui.mini.horizontal.statistics .statistic > .value,
.ui.mini.horizontal.statistic > .value {
- font-size: 1.5rem !important;
+ font-size: 1.5rem;
}
.ui.mini.statistics .statistic > .text.value,
.ui.mini.statistic > .text.value {
- font-size: 1rem !important;
+ font-size: 1rem;
}
-
-/* Tiny */
.ui.tiny.statistics .statistic > .value,
.ui.tiny.statistic > .value {
- font-size: 2rem !important;
+ font-size: 2rem;
}
.ui.tiny.horizontal.statistics .statistic > .value,
.ui.tiny.horizontal.statistic > .value {
- font-size: 2rem !important;
+ font-size: 2rem;
}
.ui.tiny.statistics .statistic > .text.value,
.ui.tiny.statistic > .text.value {
- font-size: 1rem !important;
+ font-size: 1rem;
}
-
-/* Small */
.ui.small.statistics .statistic > .value,
.ui.small.statistic > .value {
- font-size: 3rem !important;
+ font-size: 3rem;
}
.ui.small.horizontal.statistics .statistic > .value,
.ui.small.horizontal.statistic > .value {
- font-size: 2rem !important;
+ font-size: 2rem;
}
.ui.small.statistics .statistic > .text.value,
.ui.small.statistic > .text.value {
- font-size: 1rem !important;
-}
-
-/* Medium */
-.ui.statistics .statistic > .value,
-.ui.statistic > .value {
- font-size: 4rem !important;
-}
-.ui.horizontal.statistics .statistic > .value,
-.ui.horizontal.statistic > .value {
- font-size: 3rem !important;
-}
-.ui.statistics .statistic > .text.value,
-.ui.statistic > .text.value {
- font-size: 2rem !important;
+ font-size: 1rem;
}
-
-/* Large */
.ui.large.statistics .statistic > .value,
.ui.large.statistic > .value {
- font-size: 5rem !important;
+ font-size: 5rem;
}
.ui.large.horizontal.statistics .statistic > .value,
.ui.large.horizontal.statistic > .value {
- font-size: 4rem !important;
+ font-size: 4rem;
}
.ui.large.statistics .statistic > .text.value,
.ui.large.statistic > .text.value {
- font-size: 2.5rem !important;
+ font-size: 2.5rem;
+}
+.ui.big.statistics .statistic > .value,
+.ui.big.statistic > .value {
+ font-size: 5.5rem;
+}
+.ui.big.horizontal.statistics .statistic > .value,
+.ui.big.horizontal.statistic > .value {
+ font-size: 4.5rem;
+}
+.ui.big.statistics .statistic > .text.value,
+.ui.big.statistic > .text.value {
+ font-size: 2.5rem;
}
-
-/* Huge */
.ui.huge.statistics .statistic > .value,
.ui.huge.statistic > .value {
- font-size: 6rem !important;
+ font-size: 6rem;
}
.ui.huge.horizontal.statistics .statistic > .value,
.ui.huge.horizontal.statistic > .value {
- font-size: 5rem !important;
+ font-size: 5rem;
}
.ui.huge.statistics .statistic > .text.value,
.ui.huge.statistic > .text.value {
- font-size: 2.5rem !important;
+ font-size: 2.5rem;
+}
+.ui.massive.statistics .statistic > .value,
+.ui.massive.statistic > .value {
+ font-size: 7rem;
+}
+.ui.massive.horizontal.statistics .statistic > .value,
+.ui.massive.horizontal.statistic > .value {
+ font-size: 6rem;
+}
+.ui.massive.statistics .statistic > .text.value,
+.ui.massive.statistic > .text.value {
+ font-size: 3rem;
}
diff --git a/ui/dist/components/statistic.min.css b/ui/dist/components/statistic.min.css
index 1103bc496a8..7ce5eaf7cce 100644
--- a/ui/dist/components/statistic.min.css
+++ b/ui/dist/components/statistic.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Statistic
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Statistic
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:1em 0;max-width:auto}.ui.statistic+.ui.statistic{margin:0 0 0 1.5em}.ui.statistic:first-child{margin-top:0}.ui.statistic:last-child{margin-bottom:0}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.statistics>.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 1.5em 1em;max-width:auto}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em -1.5em -1em}.ui.statistics:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.statistics:first-child{margin-top:0}.ui.statistic>.value,.ui.statistics .statistic>.value{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:4rem;font-weight:400;line-height:1em;color:#1b1c1d;text-transform:uppercase;text-align:center}.ui.statistic>.label,.ui.statistics .statistic>.label{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;font-weight:700;color:rgba(0,0,0,.87);text-transform:uppercase;text-align:center}.ui.statistic>.label~.value,.ui.statistics .statistic>.label~.value{margin-top:0}.ui.statistic>.value~.label,.ui.statistics .statistic>.value~.label{margin-top:0}.ui.statistic>.value .icon,.ui.statistics .statistic>.value .icon{opacity:1;width:auto;margin:0}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{line-height:1em;min-height:2em;font-weight:700;text-align:center}.ui.statistic>.text.value+.label,.ui.statistics .statistic>.text.value+.label{text-align:center}.ui.statistic>.value img,.ui.statistics .statistic>.value img{max-height:3rem;vertical-align:baseline}.ui.ten.statistics{margin:0 0 -1em}.ui.ten.statistics .statistic{min-width:10%;margin:0 0 1em}.ui.nine.statistics{margin:0 0 -1em}.ui.nine.statistics .statistic{min-width:11.11111111%;margin:0 0 1em}.ui.eight.statistics{margin:0 0 -1em}.ui.eight.statistics .statistic{min-width:12.5%;margin:0 0 1em}.ui.seven.statistics{margin:0 0 -1em}.ui.seven.statistics .statistic{min-width:14.28571429%;margin:0 0 1em}.ui.six.statistics{margin:0 0 -1em}.ui.six.statistics .statistic{min-width:16.66666667%;margin:0 0 1em}.ui.five.statistics{margin:0 0 -1em}.ui.five.statistics .statistic{min-width:20%;margin:0 0 1em}.ui.four.statistics{margin:0 0 -1em}.ui.four.statistics .statistic{min-width:25%;margin:0 0 1em}.ui.three.statistics{margin:0 0 -1em}.ui.three.statistics .statistic{min-width:33.33333333%;margin:0 0 1em}.ui.two.statistics{margin:0 0 -1em}.ui.two.statistics .statistic{min-width:50%;margin:0 0 1em}.ui.one.statistics{margin:0 0 -1em}.ui.one.statistics .statistic{min-width:100%;margin:0 0 1em}.ui.horizontal.statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.horizontal.statistics{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;max-width:none}.ui.horizontal.statistics .statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:none;margin:1em 0}.ui.horizontal.statistic>.text.value,.ui.horizontal.statistics>.statistic>.text.value{min-height:0!important}.ui.horizontal.statistic>.value .icon,.ui.horizontal.statistics .statistic>.value .icon{width:1.18em}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{display:inline-block;vertical-align:middle}.ui.horizontal.statistic>.label,.ui.horizontal.statistics .statistic>.label{display:inline-block;vertical-align:middle;margin:0 0 0 .75em}.ui.red.statistic>.value,.ui.red.statistics .statistic>.value,.ui.statistics .red.statistic>.value{color:#db2828}.ui.orange.statistic>.value,.ui.orange.statistics .statistic>.value,.ui.statistics .orange.statistic>.value{color:#f2711c}.ui.statistics .yellow.statistic>.value,.ui.yellow.statistic>.value,.ui.yellow.statistics .statistic>.value{color:#fbbd08}.ui.olive.statistic>.value,.ui.olive.statistics .statistic>.value,.ui.statistics .olive.statistic>.value{color:#b5cc18}.ui.green.statistic>.value,.ui.green.statistics .statistic>.value,.ui.statistics .green.statistic>.value{color:#21ba45}.ui.statistics .teal.statistic>.value,.ui.teal.statistic>.value,.ui.teal.statistics .statistic>.value{color:#00b5ad}.ui.blue.statistic>.value,.ui.blue.statistics .statistic>.value,.ui.statistics .blue.statistic>.value{color:#2185d0}.ui.statistics .violet.statistic>.value,.ui.violet.statistic>.value,.ui.violet.statistics .statistic>.value{color:#6435c9}.ui.purple.statistic>.value,.ui.purple.statistics .statistic>.value,.ui.statistics .purple.statistic>.value{color:#a333c8}.ui.pink.statistic>.value,.ui.pink.statistics .statistic>.value,.ui.statistics .pink.statistic>.value{color:#e03997}.ui.brown.statistic>.value,.ui.brown.statistics .statistic>.value,.ui.statistics .brown.statistic>.value{color:#a5673f}.ui.grey.statistic>.value,.ui.grey.statistics .statistic>.value,.ui.statistics .grey.statistic>.value{color:#767676}.ui.inverted.statistic .value,.ui.inverted.statistics .statistic>.value{color:#fff}.ui.inverted.statistic .label,.ui.inverted.statistics .statistic>.label{color:rgba(255,255,255,.9)}.ui.inverted.red.statistic>.value,.ui.inverted.red.statistics .statistic>.value,.ui.statistics .inverted.red.statistic>.value{color:#ff695e}.ui.inverted.orange.statistic>.value,.ui.inverted.orange.statistics .statistic>.value,.ui.statistics .inverted.orange.statistic>.value{color:#ff851b}.ui.inverted.yellow.statistic>.value,.ui.inverted.yellow.statistics .statistic>.value,.ui.statistics .inverted.yellow.statistic>.value{color:#ffe21f}.ui.inverted.olive.statistic>.value,.ui.inverted.olive.statistics .statistic>.value,.ui.statistics .inverted.olive.statistic>.value{color:#d9e778}.ui.inverted.green.statistic>.value,.ui.inverted.green.statistics .statistic>.value,.ui.statistics .inverted.green.statistic>.value{color:#2ecc40}.ui.inverted.teal.statistic>.value,.ui.inverted.teal.statistics .statistic>.value,.ui.statistics .inverted.teal.statistic>.value{color:#6dffff}.ui.inverted.blue.statistic>.value,.ui.inverted.blue.statistics .statistic>.value,.ui.statistics .inverted.blue.statistic>.value{color:#54c8ff}.ui.inverted.violet.statistic>.value,.ui.inverted.violet.statistics .statistic>.value,.ui.statistics .inverted.violet.statistic>.value{color:#a291fb}.ui.inverted.purple.statistic>.value,.ui.inverted.purple.statistics .statistic>.value,.ui.statistics .inverted.purple.statistic>.value{color:#dc73ff}.ui.inverted.pink.statistic>.value,.ui.inverted.pink.statistics .statistic>.value,.ui.statistics .inverted.pink.statistic>.value{color:#ff8edf}.ui.inverted.brown.statistic>.value,.ui.inverted.brown.statistics .statistic>.value,.ui.statistics .inverted.brown.statistic>.value{color:#d67c1c}.ui.inverted.grey.statistic>.value,.ui.inverted.grey.statistics .statistic>.value,.ui.statistics .inverted.grey.statistic>.value{color:#dcddde}.ui[class*="left floated"].statistic{float:left;margin:0 2em 1em 0}.ui[class*="right floated"].statistic{float:right;margin:0 0 1em 2em}.ui.floated.statistic:last-child{margin-bottom:0}.ui.mini.statistic>.value,.ui.mini.statistics .statistic>.value{font-size:1.5rem!important}.ui.mini.horizontal.statistic>.value,.ui.mini.horizontal.statistics .statistic>.value{font-size:1.5rem!important}.ui.mini.statistic>.text.value,.ui.mini.statistics .statistic>.text.value{font-size:1rem!important}.ui.tiny.statistic>.value,.ui.tiny.statistics .statistic>.value{font-size:2rem!important}.ui.tiny.horizontal.statistic>.value,.ui.tiny.horizontal.statistics .statistic>.value{font-size:2rem!important}.ui.tiny.statistic>.text.value,.ui.tiny.statistics .statistic>.text.value{font-size:1rem!important}.ui.small.statistic>.value,.ui.small.statistics .statistic>.value{font-size:3rem!important}.ui.small.horizontal.statistic>.value,.ui.small.horizontal.statistics .statistic>.value{font-size:2rem!important}.ui.small.statistic>.text.value,.ui.small.statistics .statistic>.text.value{font-size:1rem!important}.ui.statistic>.value,.ui.statistics .statistic>.value{font-size:4rem!important}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{font-size:3rem!important}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{font-size:2rem!important}.ui.large.statistic>.value,.ui.large.statistics .statistic>.value{font-size:5rem!important}.ui.large.horizontal.statistic>.value,.ui.large.horizontal.statistics .statistic>.value{font-size:4rem!important}.ui.large.statistic>.text.value,.ui.large.statistics .statistic>.text.value{font-size:2.5rem!important}.ui.huge.statistic>.value,.ui.huge.statistics .statistic>.value{font-size:6rem!important}.ui.huge.horizontal.statistic>.value,.ui.huge.horizontal.statistics .statistic>.value{font-size:5rem!important}.ui.huge.statistic>.text.value,.ui.huge.statistics .statistic>.text.value{font-size:2.5rem!important}
\ No newline at end of file
+ */.ui.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:1em 0;max-width:none}.ui.statistic+.ui.statistic{margin:0 0 0 1.5em}.ui.statistic:first-child{margin-top:0}.ui.statistic:last-child{margin-bottom:0}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.statistics>.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 1.5em 1em;max-width:none}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em -1.5em -1em}.ui.statistics:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.statistics:first-child{margin-top:0}.ui.statistic>.value,.ui.statistics .statistic>.value{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:4rem;font-weight:400;line-height:1em;color:#1b1c1d;text-transform:uppercase;text-align:center}.ui.statistic>.label,.ui.statistics .statistic>.label{font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;font-weight:700;color:rgba(0,0,0,.87);text-transform:uppercase;text-align:center}.ui.statistic>.label~.value,.ui.statistics .statistic>.label~.value{margin-top:0}.ui.statistic>.value~.label,.ui.statistics .statistic>.value~.label{margin-top:0}.ui.statistic>.value .icon,.ui.statistics .statistic>.value .icon{opacity:1;width:auto;margin:0}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{line-height:1em;min-height:2em;font-weight:700;text-align:center}.ui.statistic>.text.value+.label,.ui.statistics .statistic>.text.value+.label{text-align:center}.ui.statistic>.value img,.ui.statistics .statistic>.value img{max-height:3rem;vertical-align:baseline}.ui.ten.statistics{margin:0 0 -1em}.ui.ten.statistics .statistic{min-width:10%;margin:0 0 1em}.ui.nine.statistics{margin:0 0 -1em}.ui.nine.statistics .statistic{min-width:11.11111111%;margin:0 0 1em}.ui.eight.statistics{margin:0 0 -1em}.ui.eight.statistics .statistic{min-width:12.5%;margin:0 0 1em}.ui.seven.statistics{margin:0 0 -1em}.ui.seven.statistics .statistic{min-width:14.28571429%;margin:0 0 1em}.ui.six.statistics{margin:0 0 -1em}.ui.six.statistics .statistic{min-width:16.66666667%;margin:0 0 1em}.ui.five.statistics{margin:0 0 -1em}.ui.five.statistics .statistic{min-width:20%;margin:0 0 1em}.ui.four.statistics{margin:0 0 -1em}.ui.four.statistics .statistic{min-width:25%;margin:0 0 1em}.ui.three.statistics{margin:0 0 -1em}.ui.three.statistics .statistic{min-width:33.33333333%;margin:0 0 1em}.ui.two.statistics{margin:0 0 -1em}.ui.two.statistics .statistic{min-width:50%;margin:0 0 1em}.ui.one.statistics{margin:0 0 -1em}.ui.one.statistics .statistic{min-width:100%;margin:0 0 1em}.ui.horizontal.statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.horizontal.statistics{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;max-width:none}.ui.horizontal.statistics .statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:none;margin:1em 0}.ui.horizontal.statistic>.text.value,.ui.horizontal.statistics>.statistic>.text.value{min-height:0!important}.ui.horizontal.statistic>.value .icon,.ui.horizontal.statistics .statistic>.value .icon{width:1.18em}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{display:inline-block;vertical-align:middle}.ui.horizontal.statistic>.label,.ui.horizontal.statistics .statistic>.label{display:inline-block;vertical-align:middle;margin:0 0 0 .75em}.ui.inverted.statistic .value,.ui.inverted.statistics .statistic>.value{color:#fff}.ui.inverted.statistic .label,.ui.inverted.statistics .statistic>.label{color:rgba(255,255,255,.9)}.ui.primary.statistic>.value,.ui.primary.statistics .statistic>.value,.ui.statistics .primary.statistic>.value{color:#2185d0}.ui.inverted.primary.statistic>.value,.ui.inverted.primary.statistics .statistic>.value,.ui.statistics .inverted.primary.statistic>.value{color:#54c8ff}.ui.secondary.statistic>.value,.ui.secondary.statistics .statistic>.value,.ui.statistics .secondary.statistic>.value{color:#1b1c1d}.ui.inverted.secondary.statistic>.value,.ui.inverted.secondary.statistics .statistic>.value,.ui.statistics .inverted.secondary.statistic>.value{color:#545454}.ui.red.statistic>.value,.ui.red.statistics .statistic>.value,.ui.statistics .red.statistic>.value{color:#db2828}.ui.inverted.red.statistic>.value,.ui.inverted.red.statistics .statistic>.value,.ui.statistics .inverted.red.statistic>.value{color:#ff695e}.ui.orange.statistic>.value,.ui.orange.statistics .statistic>.value,.ui.statistics .orange.statistic>.value{color:#f2711c}.ui.inverted.orange.statistic>.value,.ui.inverted.orange.statistics .statistic>.value,.ui.statistics .inverted.orange.statistic>.value{color:#ff851b}.ui.statistics .yellow.statistic>.value,.ui.yellow.statistic>.value,.ui.yellow.statistics .statistic>.value{color:#fbbd08}.ui.inverted.yellow.statistic>.value,.ui.inverted.yellow.statistics .statistic>.value,.ui.statistics .inverted.yellow.statistic>.value{color:#ffe21f}.ui.olive.statistic>.value,.ui.olive.statistics .statistic>.value,.ui.statistics .olive.statistic>.value{color:#b5cc18}.ui.inverted.olive.statistic>.value,.ui.inverted.olive.statistics .statistic>.value,.ui.statistics .inverted.olive.statistic>.value{color:#d9e778}.ui.green.statistic>.value,.ui.green.statistics .statistic>.value,.ui.statistics .green.statistic>.value{color:#21ba45}.ui.inverted.green.statistic>.value,.ui.inverted.green.statistics .statistic>.value,.ui.statistics .inverted.green.statistic>.value{color:#2ecc40}.ui.statistics .teal.statistic>.value,.ui.teal.statistic>.value,.ui.teal.statistics .statistic>.value{color:#00b5ad}.ui.inverted.teal.statistic>.value,.ui.inverted.teal.statistics .statistic>.value,.ui.statistics .inverted.teal.statistic>.value{color:#6dffff}.ui.blue.statistic>.value,.ui.blue.statistics .statistic>.value,.ui.statistics .blue.statistic>.value{color:#2185d0}.ui.inverted.blue.statistic>.value,.ui.inverted.blue.statistics .statistic>.value,.ui.statistics .inverted.blue.statistic>.value{color:#54c8ff}.ui.statistics .violet.statistic>.value,.ui.violet.statistic>.value,.ui.violet.statistics .statistic>.value{color:#6435c9}.ui.inverted.violet.statistic>.value,.ui.inverted.violet.statistics .statistic>.value,.ui.statistics .inverted.violet.statistic>.value{color:#a291fb}.ui.purple.statistic>.value,.ui.purple.statistics .statistic>.value,.ui.statistics .purple.statistic>.value{color:#a333c8}.ui.inverted.purple.statistic>.value,.ui.inverted.purple.statistics .statistic>.value,.ui.statistics .inverted.purple.statistic>.value{color:#dc73ff}.ui.pink.statistic>.value,.ui.pink.statistics .statistic>.value,.ui.statistics .pink.statistic>.value{color:#e03997}.ui.inverted.pink.statistic>.value,.ui.inverted.pink.statistics .statistic>.value,.ui.statistics .inverted.pink.statistic>.value{color:#ff8edf}.ui.brown.statistic>.value,.ui.brown.statistics .statistic>.value,.ui.statistics .brown.statistic>.value{color:#a5673f}.ui.inverted.brown.statistic>.value,.ui.inverted.brown.statistics .statistic>.value,.ui.statistics .inverted.brown.statistic>.value{color:#d67c1c}.ui.grey.statistic>.value,.ui.grey.statistics .statistic>.value,.ui.statistics .grey.statistic>.value{color:#767676}.ui.inverted.grey.statistic>.value,.ui.inverted.grey.statistics .statistic>.value,.ui.statistics .inverted.grey.statistic>.value{color:#dcddde}.ui.black.statistic>.value,.ui.black.statistics .statistic>.value,.ui.statistics .black.statistic>.value{color:#1b1c1d}.ui.inverted.black.statistic>.value,.ui.inverted.black.statistics .statistic>.value,.ui.statistics .inverted.black.statistic>.value{color:#545454}.ui[class*="left floated"].statistic{float:left;margin:0 2em 1em 0}.ui[class*="right floated"].statistic{float:right;margin:0 0 1em 2em}.ui.floated.statistic:last-child{margin-bottom:0}@media only screen and (max-width:767.98px){.ui.stackable.statistics{width:auto;margin-left:0!important;margin-right:0!important}.ui.stackable.statistics>.statistic{width:100%!important;margin:0 0!important;padding:1rem 1rem!important}}.ui.statistic>.value,.ui.statistics .statistic>.value{font-size:4rem}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{font-size:3rem}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{font-size:2rem}.ui.mini.statistic>.value,.ui.mini.statistics .statistic>.value{font-size:1.5rem}.ui.mini.horizontal.statistic>.value,.ui.mini.horizontal.statistics .statistic>.value{font-size:1.5rem}.ui.mini.statistic>.text.value,.ui.mini.statistics .statistic>.text.value{font-size:1rem}.ui.tiny.statistic>.value,.ui.tiny.statistics .statistic>.value{font-size:2rem}.ui.tiny.horizontal.statistic>.value,.ui.tiny.horizontal.statistics .statistic>.value{font-size:2rem}.ui.tiny.statistic>.text.value,.ui.tiny.statistics .statistic>.text.value{font-size:1rem}.ui.small.statistic>.value,.ui.small.statistics .statistic>.value{font-size:3rem}.ui.small.horizontal.statistic>.value,.ui.small.horizontal.statistics .statistic>.value{font-size:2rem}.ui.small.statistic>.text.value,.ui.small.statistics .statistic>.text.value{font-size:1rem}.ui.large.statistic>.value,.ui.large.statistics .statistic>.value{font-size:5rem}.ui.large.horizontal.statistic>.value,.ui.large.horizontal.statistics .statistic>.value{font-size:4rem}.ui.large.statistic>.text.value,.ui.large.statistics .statistic>.text.value{font-size:2.5rem}.ui.big.statistic>.value,.ui.big.statistics .statistic>.value{font-size:5.5rem}.ui.big.horizontal.statistic>.value,.ui.big.horizontal.statistics .statistic>.value{font-size:4.5rem}.ui.big.statistic>.text.value,.ui.big.statistics .statistic>.text.value{font-size:2.5rem}.ui.huge.statistic>.value,.ui.huge.statistics .statistic>.value{font-size:6rem}.ui.huge.horizontal.statistic>.value,.ui.huge.horizontal.statistics .statistic>.value{font-size:5rem}.ui.huge.statistic>.text.value,.ui.huge.statistics .statistic>.text.value{font-size:2.5rem}.ui.massive.statistic>.value,.ui.massive.statistics .statistic>.value{font-size:7rem}.ui.massive.horizontal.statistic>.value,.ui.massive.horizontal.statistics .statistic>.value{font-size:6rem}.ui.massive.statistic>.text.value,.ui.massive.statistics .statistic>.text.value{font-size:3rem}
\ No newline at end of file
diff --git a/ui/dist/components/table.css b/ui/dist/components/table.css
index a45ecf7e33e..862fa85dd24 100644
--- a/ui/dist/components/table.css
+++ b/ui/dist/components/table.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Table
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Table
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -18,21 +18,27 @@
.ui.table {
width: 100%;
background: #FFFFFF;
- margin: 1em 0em;
+ margin: 1em 0;
border: 1px solid rgba(34, 36, 38, 0.15);
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0.25rem;
text-align: left;
+ vertical-align: middle;
color: rgba(0, 0, 0, 0.87);
border-collapse: separate;
- border-spacing: 0px;
+ border-spacing: 0;
}
.ui.table:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.table:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
+}
+.ui.table > thead,
+.ui.table > tbody {
+ text-align: inherit;
+ vertical-align: inherit;
}
@@ -48,12 +54,18 @@
transition: background 0.1s ease, color 0.1s ease;
}
+/* Rowspan helper class */
+.ui.table th.rowspanned,
+.ui.table td.rowspanned {
+ display: none;
+}
+
/* Headers */
-.ui.table thead {
+.ui.table > thead {
-webkit-box-shadow: none;
box-shadow: none;
}
-.ui.table thead th {
+.ui.table > thead > tr > th {
cursor: auto;
background: #F9FAFB;
text-align: inherit;
@@ -66,25 +78,26 @@
border-bottom: 1px solid rgba(34, 36, 38, 0.1);
border-left: none;
}
-.ui.table thead tr > th:first-child {
+.ui.table > thead > tr > th:first-child {
border-left: none;
}
-.ui.table thead tr:first-child > th:first-child {
- border-radius: 0.25rem 0em 0em 0em;
+.ui.table > thead > tr:first-child > th:first-child {
+ border-radius: 0.25rem 0 0 0;
}
-.ui.table thead tr:first-child > th:last-child {
- border-radius: 0em 0.25rem 0em 0em;
+.ui.table > thead > tr:first-child > th:last-child {
+ border-radius: 0 0.25rem 0 0;
}
-.ui.table thead tr:first-child > th:only-child {
- border-radius: 0.25rem 0.25rem 0em 0em;
+.ui.table > thead > tr:first-child > th:only-child {
+ border-radius: 0.25rem 0.25rem 0 0;
}
/* Footer */
-.ui.table tfoot {
+.ui.table > tfoot {
-webkit-box-shadow: none;
box-shadow: none;
}
-.ui.table tfoot th {
+.ui.table > tfoot > tr > th,
+.ui.table > tfoot > tr > td {
cursor: auto;
border-top: 1px solid rgba(34, 36, 38, 0.15);
background: #F9FAFB;
@@ -96,34 +109,41 @@
font-weight: normal;
text-transform: none;
}
-.ui.table tfoot tr > th:first-child {
+.ui.table > tfoot > tr > th:first-child,
+.ui.table > tfoot > tr > td:first-child {
border-left: none;
}
-.ui.table tfoot tr:first-child > th:first-child {
- border-radius: 0em 0em 0em 0.25rem;
+.ui.table > tfoot > tr:first-child > th:first-child,
+.ui.table > tfoot > tr:first-child > td:first-child {
+ border-radius: 0 0 0 0.25rem;
}
-.ui.table tfoot tr:first-child > th:last-child {
- border-radius: 0em 0em 0.25rem 0em;
+.ui.table > tfoot > tr:first-child > th:last-child,
+.ui.table > tfoot > tr:first-child > td:last-child {
+ border-radius: 0 0 0.25rem 0;
}
-.ui.table tfoot tr:first-child > th:only-child {
- border-radius: 0em 0em 0.25rem 0.25rem;
+.ui.table > tfoot > tr:first-child > th:only-child,
+.ui.table > tfoot > tr:first-child > td:only-child {
+ border-radius: 0 0 0.25rem 0.25rem;
}
/* Table Row */
-.ui.table tr td {
+.ui.table > tr > td,
+.ui.table > tbody > tr > td {
border-top: 1px solid rgba(34, 36, 38, 0.1);
}
-.ui.table tr:first-child td {
+.ui.table > tr:first-child > td,
+.ui.table > tbody > tr:first-child > td {
border-top: none;
}
/* Repeated tbody */
-.ui.table tbody + tbody tr:first-child td {
+.ui.table > tbody + tbody tr:first-child > td {
border-top: 1px solid rgba(34, 36, 38, 0.1);
}
/* Table Cells */
-.ui.table td {
+.ui.table > tbody > tr > td,
+.ui.table > tr > td {
padding: 0.8125em 0.8125em;
text-align: inherit;
}
@@ -133,12 +153,12 @@
vertical-align: baseline;
}
.ui.table > .icon:only-child {
- margin: 0em;
+ margin: 0;
}
/* Table Segment */
.ui.table.segment {
- padding: 0em;
+ padding: 0;
}
.ui.table.segment:after {
display: none;
@@ -148,50 +168,311 @@
}
/* Responsive */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767.98px) {
.ui.table:not(.unstackable) {
width: 100%;
+ padding: 0;
}
- .ui.table:not(.unstackable) tbody,
- .ui.table:not(.unstackable) tr,
- .ui.table:not(.unstackable) tr > th,
- .ui.table:not(.unstackable) tr > td {
- width: auto !important;
+ .ui.table:not(.unstackable) > thead,
+ .ui.table:not(.unstackable) > thead > tr,
+ .ui.table:not(.unstackable) > tfoot,
+ .ui.table:not(.unstackable) > tfoot > tr,
+ .ui.table:not(.unstackable) > tbody,
+ .ui.table:not(.unstackable) > tr,
+ .ui.table:not(.unstackable) > tbody > tr,
+ .ui.table:not(.unstackable) > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tr > td:not(.rowspanned),
+ .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
+ .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
display: block !important;
+ width: auto !important;
}
- .ui.table:not(.unstackable) {
- padding: 0em;
- }
- .ui.table:not(.unstackable) thead {
+ .ui.table:not(.unstackable) > thead {
display: block;
}
- .ui.table:not(.unstackable) tfoot {
+ .ui.table:not(.unstackable) > tfoot {
display: block;
}
- .ui.table:not(.unstackable) tr {
+ .ui.ui.ui.ui.table:not(.unstackable) > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
padding-top: 1em;
padding-bottom: 1em;
- -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
- box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
}
- .ui.table:not(.unstackable) tr > th,
- .ui.table:not(.unstackable) tr > td {
+ .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
background: none;
- border: none !important;
- padding: 0.25em 0.75em !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ border: none;
+ padding: 0.25em 0.75em;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
- .ui.table:not(.unstackable) th:first-child,
- .ui.table:not(.unstackable) td:first-child {
+ .ui.table:not(.unstackable) > tr > th:first-child,
+ .ui.table:not(.unstackable) > thead > tr > th:first-child,
+ .ui.table:not(.unstackable) > tbody > tr > th:first-child,
+ .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
+ .ui.table:not(.unstackable) > tr > td:first-child,
+ .ui.table:not(.unstackable) > tbody > tr > td:first-child,
+ .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
font-weight: bold;
}
/* Definition Table */
- .ui.definition.table:not(.unstackable) thead th:first-child {
+ .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.primary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.primary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.secondary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.secondary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.red.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.red.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.orange.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.orange.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.yellow.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.yellow.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.olive.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.olive.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.green.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.green.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.teal.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.teal.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.blue.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.blue.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.violet.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.violet.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.purple.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.purple.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.pink.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.pink.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.brown.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.brown.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.grey.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.grey.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ }
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.black.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ }
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.black.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ }
}
@@ -201,10 +482,8 @@
/* UI Image */
-.ui.table th .image,
-.ui.table th .image img,
-.ui.table td .image,
-.ui.table td .image img {
+.ui.table .collapsing .image,
+.ui.table .collapsing .image img {
max-width: none;
}
@@ -221,57 +500,59 @@
.ui.structured.table {
border-collapse: collapse;
}
-.ui.structured.table thead th {
+.ui.structured.table > thead > tr > th {
border-left: none;
border-right: none;
}
-.ui.structured.sortable.table thead th {
+.ui.structured.sortable.table > thead > tr > th {
border-left: 1px solid rgba(34, 36, 38, 0.15);
border-right: 1px solid rgba(34, 36, 38, 0.15);
}
-.ui.structured.basic.table th {
+.ui.structured.basic.table > tr > th,
+.ui.structured.basic.table > thead > tr > th,
+.ui.structured.basic.table > tbody > tr > th,
+.ui.structured.basic.table > tfoot > tr > th {
border-left: none;
border-right: none;
}
-.ui.structured.celled.table tr th,
-.ui.structured.celled.table tr td {
+.ui.structured.celled.table > tr > th,
+.ui.structured.celled.table > thead > tr > th,
+.ui.structured.celled.table > tbody > tr > th,
+.ui.structured.celled.table > tfoot > tr > th,
+.ui.structured.celled.table > tr > td,
+.ui.structured.celled.table > tbody > tr > td,
+.ui.structured.celled.table > tfoot > tr > td {
border-left: 1px solid rgba(34, 36, 38, 0.1);
border-right: 1px solid rgba(34, 36, 38, 0.1);
}
/*--------------
- Definition
----------------*/
+ Definition
+ ---------------*/
-.ui.definition.table thead:not(.full-width) th:first-child {
+.ui.definition.table > thead:not(.full-width) > tr > th:first-child {
pointer-events: none;
- background: transparent;
+ background: #FFFFFF;
font-weight: normal;
color: rgba(0, 0, 0, 0.4);
- -webkit-box-shadow: -1px -1px 0px 1px #FFFFFF;
- box-shadow: -1px -1px 0px 1px #FFFFFF;
+ -webkit-box-shadow: -0.1em -0.2em 0 0.1em #FFFFFF;
+ box-shadow: -0.1em -0.2em 0 0.1em #FFFFFF;
+ -moz-transform: scale(1);
}
-.ui.definition.table tfoot:not(.full-width) th:first-child {
+.ui.definition.table > tfoot:not(.full-width) > tr > th:first-child {
pointer-events: none;
- background: transparent;
- font-weight: rgba(0, 0, 0, 0.4);
- color: normal;
- -webkit-box-shadow: 1px 1px 0px 1px #FFFFFF;
- box-shadow: 1px 1px 0px 1px #FFFFFF;
-}
-
-/* Remove Border */
-.ui.celled.definition.table thead:not(.full-width) th:first-child {
- -webkit-box-shadow: 0px -1px 0px 1px #FFFFFF;
- box-shadow: 0px -1px 0px 1px #FFFFFF;
-}
-.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
- -webkit-box-shadow: 0px 1px 0px 1px #FFFFFF;
- box-shadow: 0px 1px 0px 1px #FFFFFF;
+ background: #FFFFFF;
+ font-weight: normal;
+ color: rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: -0.1em 0.2em 0 0.1em #FFFFFF;
+ box-shadow: -0.1em 0.2em 0 0.1em #FFFFFF;
+ -moz-transform: scale(1);
}
/* Highlight Defining Column */
-.ui.definition.table tr td:first-child:not(.ignored),
+.ui.definition.table > tr > td:first-child:not(.ignored),
+.ui.definition.table > tbody > tr > td:first-child:not(.ignored),
+.ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
.ui.definition.table tr td.definition {
background: rgba(0, 0, 0, 0.03);
font-weight: bold;
@@ -286,13 +567,15 @@
}
/* Fix 2nd Column */
-.ui.definition.table thead:not(.full-width) th:nth-child(2) {
+.ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) {
border-left: 1px solid rgba(34, 36, 38, 0.15);
}
-.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
+.ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2),
+.ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) {
border-left: 1px solid rgba(34, 36, 38, 0.15);
}
-.ui.definition.table td:nth-child(2) {
+.ui.definition.table > tr > td:nth-child(2),
+.ui.definition.table > tbody > tr > td:nth-child(2) {
border-left: 1px solid rgba(34, 36, 38, 0.15);
}
@@ -303,83 +586,68 @@
/*--------------
- Positive
----------------*/
+ Positive
+ ---------------*/
-.ui.table tr.positive,
-.ui.table td.positive {
- -webkit-box-shadow: 0px 0px 0px #A3C293 inset;
- box-shadow: 0px 0px 0px #A3C293 inset;
-}
-.ui.table tr.positive,
-.ui.table td.positive {
- background: #FCFFF5 !important;
- color: #2C662D !important;
+.ui.ui.ui.ui.table tr.positive,
+.ui.ui.table td.positive {
+ -webkit-box-shadow: 0 0 0 #A3C293 inset;
+ box-shadow: 0 0 0 #A3C293 inset;
+ background: #FCFFF5;
+ color: #2C662D;
}
/*--------------
- Negative
----------------*/
+ Negative
+ ---------------*/
-.ui.table tr.negative,
-.ui.table td.negative {
- -webkit-box-shadow: 0px 0px 0px #E0B4B4 inset;
- box-shadow: 0px 0px 0px #E0B4B4 inset;
-}
-.ui.table tr.negative,
-.ui.table td.negative {
- background: #FFF6F6 !important;
- color: #9F3A38 !important;
+.ui.ui.ui.ui.table tr.negative,
+.ui.ui.table td.negative {
+ -webkit-box-shadow: 0 0 0 #E0B4B4 inset;
+ box-shadow: 0 0 0 #E0B4B4 inset;
+ background: #FFF6F6;
+ color: #9F3A38;
}
/*--------------
- Error
----------------*/
+ Error
+ ---------------*/
-.ui.table tr.error,
-.ui.table td.error {
- -webkit-box-shadow: 0px 0px 0px #E0B4B4 inset;
- box-shadow: 0px 0px 0px #E0B4B4 inset;
-}
-.ui.table tr.error,
-.ui.table td.error {
- background: #FFF6F6 !important;
- color: #9F3A38 !important;
+.ui.ui.ui.ui.table tr.error,
+.ui.ui.table td.error {
+ -webkit-box-shadow: 0 0 0 #E0B4B4 inset;
+ box-shadow: 0 0 0 #E0B4B4 inset;
+ background: #FFF6F6;
+ color: #9F3A38;
}
/*--------------
- Warning
----------------*/
+ Warning
+ ---------------*/
-.ui.table tr.warning,
-.ui.table td.warning {
- -webkit-box-shadow: 0px 0px 0px #C9BA9B inset;
- box-shadow: 0px 0px 0px #C9BA9B inset;
-}
-.ui.table tr.warning,
-.ui.table td.warning {
- background: #FFFAF3 !important;
- color: #573A08 !important;
+.ui.ui.ui.ui.table tr.warning,
+.ui.ui.table td.warning {
+ -webkit-box-shadow: 0 0 0 #C9BA9B inset;
+ box-shadow: 0 0 0 #C9BA9B inset;
+ background: #FFFAF3;
+ color: #573A08;
}
/*--------------
- Active
----------------*/
-
-.ui.table tr.active,
-.ui.table td.active {
- -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset;
- box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset;
-}
-.ui.table tr.active,
-.ui.table td.active {
- background: #E0E0E0 !important;
- color: rgba(0, 0, 0, 0.87) !important;
+ Active
+ ---------------*/
+
+.ui.ui.ui.ui.table tr.active,
+.ui.ui.table td.active {
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset;
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset;
+ background: #E0E0E0;
+ color: rgba(0, 0, 0, 0.87);
}
/*--------------
- Disabled
----------------*/
+ Disabled
+ ---------------*/
.ui.table tr.disabled td,
.ui.table tr td.disabled,
@@ -396,52 +664,310 @@
/*--------------
- Stackable
----------------*/
+ Stackable
+ ---------------*/
-@media only screen and (max-width: 991px) {
+@media only screen and (max-width: 991.98px) {
.ui[class*="tablet stackable"].table,
- .ui[class*="tablet stackable"].table tbody,
- .ui[class*="tablet stackable"].table tr,
- .ui[class*="tablet stackable"].table tr > th,
- .ui[class*="tablet stackable"].table tr > td {
- width: 100% !important;
+ .ui[class*="tablet stackable"].table > thead,
+ .ui[class*="tablet stackable"].table > thead > tr,
+ .ui[class*="tablet stackable"].table > tfoot,
+ .ui[class*="tablet stackable"].table > tfoot > tr,
+ .ui[class*="tablet stackable"].table > tbody,
+ .ui[class*="tablet stackable"].table > tbody > tr,
+ .ui[class*="tablet stackable"].table > tr,
+ .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
display: block !important;
+ width: 100% !important;
}
.ui[class*="tablet stackable"].table {
- padding: 0em;
+ padding: 0;
}
- .ui[class*="tablet stackable"].table thead {
+ .ui[class*="tablet stackable"].table > thead {
display: block;
}
- .ui[class*="tablet stackable"].table tfoot {
+ .ui[class*="tablet stackable"].table > tfoot {
display: block;
}
- .ui[class*="tablet stackable"].table tr {
+ .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tr {
padding-top: 1em;
padding-bottom: 1em;
- -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
- box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
}
- .ui[class*="tablet stackable"].table tr > th,
- .ui[class*="tablet stackable"].table tr > td {
+ .ui[class*="tablet stackable"].table > thead > tr > th,
+ .ui[class*="tablet stackable"].table > tbody > tr > th,
+ .ui[class*="tablet stackable"].table > tfoot > tr > th,
+ .ui[class*="tablet stackable"].table > tr > th,
+ .ui[class*="tablet stackable"].table > tbody > tr > td,
+ .ui[class*="tablet stackable"].table > tfoot > tr > td,
+ .ui[class*="tablet stackable"].table > tr > td {
background: none;
border: none !important;
padding: 0.25em 0.75em;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
/* Definition Table */
- .ui.definition[class*="tablet stackable"].table thead th:first-child {
+ .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.primary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.primary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.secondary.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.secondary.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.red.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.red.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.orange.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.orange.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.yellow.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.yellow.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.olive.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.olive.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.green.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.green.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.teal.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.teal.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.blue.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.blue.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.violet.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.violet.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.purple.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.purple.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.pink.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.pink.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.brown.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.brown.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.grey.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.grey.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.black.left {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset;
+}
+.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.black.right {
+ -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
+}
/*--------------
- Text Alignment
----------------*/
+ Text Alignment
+ ---------------*/
.ui.table[class*="left aligned"],
.ui.table [class*="left aligned"] {
@@ -457,8 +983,8 @@
}
/*------------------
- Vertical Alignment
-------------------*/
+ Vertical Alignment
+ ------------------*/
.ui.table[class*="top aligned"],
.ui.table [class*="top aligned"] {
@@ -474,8 +1000,8 @@
}
/*--------------
- Collapsing
----------------*/
+ Collapsing
+ ---------------*/
.ui.table th.collapsing,
.ui.table td.collapsing {
@@ -484,8 +1010,8 @@
}
/*--------------
- Fixed
----------------*/
+ Fixed
+ ---------------*/
.ui.fixed.table {
table-layout: fixed;
@@ -497,75 +1023,81 @@
}
/*--------------
- Selectable
----------------*/
+ Selectable
+ ---------------*/
-.ui.selectable.table tbody tr:hover,
+.ui.ui.selectable.table > tbody > tr:hover,
.ui.table tbody tr td.selectable:hover {
- background: rgba(0, 0, 0, 0.05) !important;
- color: rgba(0, 0, 0, 0.95) !important;
+ background: rgba(0, 0, 0, 0.05);
+ color: rgba(0, 0, 0, 0.95);
}
-.ui.selectable.inverted.table tbody tr:hover,
+.ui.ui.selectable.inverted.table > tbody > tr:hover,
.ui.inverted.table tbody tr td.selectable:hover {
- background: rgba(255, 255, 255, 0.08) !important;
- color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
+ color: #ffffff;
}
/* Selectable Cell Link */
.ui.table tbody tr td.selectable {
- padding: 0em;
+ padding: 0;
}
.ui.table tbody tr td.selectable > a:not(.ui) {
display: block;
color: inherit;
padding: 0.8125em 0.8125em;
}
+.ui.table > tr > td.selectable,
+.ui.table > tbody > tr > td.selectable,
+.ui.selectable.table > tbody > tr,
+.ui.selectable.table > tr {
+ cursor: pointer;
+}
/* Other States */
-.ui.selectable.table tr.error:hover,
+.ui.ui.selectable.table tr.error:hover,
.ui.table tr td.selectable.error:hover,
.ui.selectable.table tr:hover td.error {
- background: #ffe7e7 !important;
- color: #943634 !important;
+ background: #ffe7e7;
+ color: #943634;
}
-.ui.selectable.table tr.warning:hover,
+.ui.ui.selectable.table tr.warning:hover,
.ui.table tr td.selectable.warning:hover,
.ui.selectable.table tr:hover td.warning {
- background: #fff4e4 !important;
- color: #493107 !important;
+ background: #fff4e4;
+ color: #493107;
}
-.ui.selectable.table tr.active:hover,
+.ui.ui.selectable.table tr.active:hover,
.ui.table tr td.selectable.active:hover,
.ui.selectable.table tr:hover td.active {
- background: #E0E0E0 !important;
- color: rgba(0, 0, 0, 0.87) !important;
+ background: #E0E0E0;
+ color: rgba(0, 0, 0, 0.87);
}
-.ui.selectable.table tr.positive:hover,
+.ui.ui.selectable.table tr.positive:hover,
.ui.table tr td.selectable.positive:hover,
.ui.selectable.table tr:hover td.positive {
- background: #f7ffe6 !important;
- color: #275b28 !important;
+ background: #f7ffe6;
+ color: #275b28;
}
-.ui.selectable.table tr.negative:hover,
+.ui.ui.selectable.table tr.negative:hover,
.ui.table tr td.selectable.negative:hover,
.ui.selectable.table tr:hover td.negative {
- background: #ffe7e7 !important;
- color: #943634 !important;
+ background: #ffe7e7;
+ color: #943634;
}
/*-------------------
- Attached
---------------------*/
+ Attached
+ --------------------*/
/* Middle */
.ui.attached.table {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em -1px;
- width: calc(100% + 2px );
- max-width: calc(100% + 2px );
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 -1px;
+ width: calc(100% + 2px);
+ max-width: calc(100% + 2px);
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #D4D4D5;
@@ -576,61 +1108,57 @@
/* Top */
.ui[class*="top attached"].table {
- bottom: 0px;
- margin-bottom: 0em;
- top: 0px;
+ bottom: 0;
+ margin-bottom: 0;
+ top: 0;
margin-top: 1em;
- border-radius: 0.25rem 0.25rem 0em 0em;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.ui.table[class*="top attached"]:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
/* Bottom */
.ui[class*="bottom attached"].table {
- bottom: 0px;
- margin-top: 0em;
- top: 0px;
+ bottom: 0;
+ margin-top: 0;
+ top: 0;
margin-bottom: 1em;
-webkit-box-shadow: none, none;
box-shadow: none, none;
- border-radius: 0em 0em 0.25rem 0.25rem;
+ border-radius: 0 0 0.25rem 0.25rem;
}
.ui[class*="bottom attached"].table:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*--------------
- Striped
----------------*/
+ Striped
+ ---------------*/
/* Table Striping */
.ui.striped.table > tr:nth-child(2n),
-.ui.striped.table tbody tr:nth-child(2n) {
+.ui.striped.table > tbody > tr:nth-child(2n) {
background-color: rgba(0, 0, 50, 0.02);
}
/* Stripes */
.ui.inverted.striped.table > tr:nth-child(2n),
-.ui.inverted.striped.table tbody tr:nth-child(2n) {
+.ui.inverted.striped.table > tbody > tr:nth-child(2n) {
background-color: rgba(255, 255, 255, 0.05);
}
/* Allow striped active hover */
.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
- background: #EFEFEF !important;
- color: rgba(0, 0, 0, 0.95) !important;
+ background: #EFEFEF;
+ color: rgba(0, 0, 0, 0.95);
}
/*--------------
Single Line
---------------*/
-.ui.table[class*="single line"],
-.ui.table [class*="single line"] {
- white-space: nowrap;
-}
.ui.table[class*="single line"],
.ui.table [class*="single line"] {
white-space: nowrap;
@@ -640,122 +1168,575 @@
Colors
--------------------*/
-
-/* Red */
+.ui.primary.table {
+ border-top: 0.2em solid #2185D0;
+}
+.ui.inverted.primary.table {
+ background-color: #2185D0;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.primary:not(.marked),
+.ui.ui.table td.primary:not(.marked) {
+ background: #ddf4ff;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.ui.selectable.table tr.primary:not(.marked):hover,
+.ui.table tr td.selectable.primary:not(.marked):hover,
+.ui.selectable.table tr:hover td.primary:not(.marked) {
+ background: #d3f1ff;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.table td.marked.primary.left,
+.ui.table tr.marked.primary.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0.2em 0 0 0 #2185D0 inset;
+}
+.ui.table td.marked.primary.right,
+.ui.table tr.marked.primary.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: -0.2em 0 0 0 #2185D0 inset;
+}
+.ui.inverted.table td.marked.primary.left,
+.ui.inverted.table tr.marked.primary.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0.2em 0 0 0 #54C8FF inset;
+}
+.ui.inverted.table td.marked.primary.right,
+.ui.inverted.table tr.marked.primary.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: -0.2em 0 0 0 #54C8FF inset;
+}
+.ui.secondary.table {
+ border-top: 0.2em solid #1B1C1D;
+}
+.ui.inverted.secondary.table {
+ background-color: #1B1C1D;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.secondary:not(.marked),
+.ui.ui.table td.secondary:not(.marked) {
+ background: #dddddd;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.ui.selectable.table tr.secondary:not(.marked):hover,
+.ui.table tr td.selectable.secondary:not(.marked):hover,
+.ui.selectable.table tr:hover td.secondary:not(.marked) {
+ background: #e2e2e2;
+ color: rgba(255, 255, 255, 0.9);
+}
+.ui.table td.marked.secondary.left,
+.ui.table tr.marked.secondary.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.table td.marked.secondary.right,
+.ui.table tr.marked.secondary.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: -0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.inverted.table td.marked.secondary.left,
+.ui.inverted.table tr.marked.secondary.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0.2em 0 0 0 #545454 inset;
+}
+.ui.inverted.table td.marked.secondary.right,
+.ui.inverted.table tr.marked.secondary.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #545454 inset;
+ box-shadow: -0.2em 0 0 0 #545454 inset;
+}
.ui.red.table {
border-top: 0.2em solid #DB2828;
}
.ui.inverted.red.table {
- background-color: #DB2828 !important;
- color: #FFFFFF !important;
+ background-color: #DB2828;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.red:not(.marked),
+.ui.ui.table td.red:not(.marked) {
+ background: #ffe1df;
+ color: #DB2828;
+}
+.ui.ui.selectable.table tr.red:not(.marked):hover,
+.ui.table tr td.selectable.red:not(.marked):hover,
+.ui.selectable.table tr:hover td.red:not(.marked) {
+ background: #ffd7d5;
+ color: #DB2828;
+}
+.ui.table td.marked.red.left,
+.ui.table tr.marked.red.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #DB2828 inset;
+ box-shadow: 0.2em 0 0 0 #DB2828 inset;
+}
+.ui.table td.marked.red.right,
+.ui.table tr.marked.red.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #DB2828 inset;
+ box-shadow: -0.2em 0 0 0 #DB2828 inset;
+}
+.ui.inverted.table td.marked.red.left,
+.ui.inverted.table tr.marked.red.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #FF695E inset;
+ box-shadow: 0.2em 0 0 0 #FF695E inset;
+}
+.ui.inverted.table td.marked.red.right,
+.ui.inverted.table tr.marked.red.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #FF695E inset;
+ box-shadow: -0.2em 0 0 0 #FF695E inset;
}
-
-/* Orange */
.ui.orange.table {
border-top: 0.2em solid #F2711C;
}
.ui.inverted.orange.table {
- background-color: #F2711C !important;
- color: #FFFFFF !important;
+ background-color: #F2711C;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.orange:not(.marked),
+.ui.ui.table td.orange:not(.marked) {
+ background: #ffe7d1;
+ color: #F2711C;
+}
+.ui.ui.selectable.table tr.orange:not(.marked):hover,
+.ui.table tr td.selectable.orange:not(.marked):hover,
+.ui.selectable.table tr:hover td.orange:not(.marked) {
+ background: #fae1cc;
+ color: #F2711C;
+}
+.ui.table td.marked.orange.left,
+.ui.table tr.marked.orange.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #F2711C inset;
+ box-shadow: 0.2em 0 0 0 #F2711C inset;
+}
+.ui.table td.marked.orange.right,
+.ui.table tr.marked.orange.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #F2711C inset;
+ box-shadow: -0.2em 0 0 0 #F2711C inset;
+}
+.ui.inverted.table td.marked.orange.left,
+.ui.inverted.table tr.marked.orange.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #FF851B inset;
+ box-shadow: 0.2em 0 0 0 #FF851B inset;
+}
+.ui.inverted.table td.marked.orange.right,
+.ui.inverted.table tr.marked.orange.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #FF851B inset;
+ box-shadow: -0.2em 0 0 0 #FF851B inset;
}
-
-/* Yellow */
.ui.yellow.table {
border-top: 0.2em solid #FBBD08;
}
.ui.inverted.yellow.table {
- background-color: #FBBD08 !important;
- color: #FFFFFF !important;
+ background-color: #FBBD08;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.yellow:not(.marked),
+.ui.ui.table td.yellow:not(.marked) {
+ background: #fff9d2;
+ color: #B58105;
+}
+.ui.ui.selectable.table tr.yellow:not(.marked):hover,
+.ui.table tr td.selectable.yellow:not(.marked):hover,
+.ui.selectable.table tr:hover td.yellow:not(.marked) {
+ background: #fbf5cc;
+ color: #B58105;
+}
+.ui.table td.marked.yellow.left,
+.ui.table tr.marked.yellow.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: 0.2em 0 0 0 #FBBD08 inset;
+}
+.ui.table td.marked.yellow.right,
+.ui.table tr.marked.yellow.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #FBBD08 inset;
+ box-shadow: -0.2em 0 0 0 #FBBD08 inset;
+}
+.ui.inverted.table td.marked.yellow.left,
+.ui.inverted.table tr.marked.yellow.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #FFE21F inset;
+ box-shadow: 0.2em 0 0 0 #FFE21F inset;
+}
+.ui.inverted.table td.marked.yellow.right,
+.ui.inverted.table tr.marked.yellow.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #FFE21F inset;
+ box-shadow: -0.2em 0 0 0 #FFE21F inset;
}
-
-/* Olive */
.ui.olive.table {
border-top: 0.2em solid #B5CC18;
}
.ui.inverted.olive.table {
- background-color: #B5CC18 !important;
- color: #FFFFFF !important;
+ background-color: #B5CC18;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.olive:not(.marked),
+.ui.ui.table td.olive:not(.marked) {
+ background: #f7fae4;
+ color: #8ABC1E;
+}
+.ui.ui.selectable.table tr.olive:not(.marked):hover,
+.ui.table tr td.selectable.olive:not(.marked):hover,
+.ui.selectable.table tr:hover td.olive:not(.marked) {
+ background: #f6fada;
+ color: #8ABC1E;
+}
+.ui.table td.marked.olive.left,
+.ui.table tr.marked.olive.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: 0.2em 0 0 0 #B5CC18 inset;
+}
+.ui.table td.marked.olive.right,
+.ui.table tr.marked.olive.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #B5CC18 inset;
+ box-shadow: -0.2em 0 0 0 #B5CC18 inset;
+}
+.ui.inverted.table td.marked.olive.left,
+.ui.inverted.table tr.marked.olive.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #D9E778 inset;
+ box-shadow: 0.2em 0 0 0 #D9E778 inset;
+}
+.ui.inverted.table td.marked.olive.right,
+.ui.inverted.table tr.marked.olive.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #D9E778 inset;
+ box-shadow: -0.2em 0 0 0 #D9E778 inset;
}
-
-/* Green */
.ui.green.table {
border-top: 0.2em solid #21BA45;
}
.ui.inverted.green.table {
- background-color: #21BA45 !important;
- color: #FFFFFF !important;
+ background-color: #21BA45;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.green:not(.marked),
+.ui.ui.table td.green:not(.marked) {
+ background: #d5f5d9;
+ color: #1EBC30;
+}
+.ui.ui.selectable.table tr.green:not(.marked):hover,
+.ui.table tr td.selectable.green:not(.marked):hover,
+.ui.selectable.table tr:hover td.green:not(.marked) {
+ background: #d2eed5;
+ color: #1EBC30;
+}
+.ui.table td.marked.green.left,
+.ui.table tr.marked.green.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #21BA45 inset;
+ box-shadow: 0.2em 0 0 0 #21BA45 inset;
+}
+.ui.table td.marked.green.right,
+.ui.table tr.marked.green.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #21BA45 inset;
+ box-shadow: -0.2em 0 0 0 #21BA45 inset;
+}
+.ui.inverted.table td.marked.green.left,
+.ui.inverted.table tr.marked.green.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: 0.2em 0 0 0 #2ECC40 inset;
+}
+.ui.inverted.table td.marked.green.right,
+.ui.inverted.table tr.marked.green.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #2ECC40 inset;
+ box-shadow: -0.2em 0 0 0 #2ECC40 inset;
}
-
-/* Teal */
.ui.teal.table {
border-top: 0.2em solid #00B5AD;
}
.ui.inverted.teal.table {
- background-color: #00B5AD !important;
- color: #FFFFFF !important;
+ background-color: #00B5AD;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.teal:not(.marked),
+.ui.ui.table td.teal:not(.marked) {
+ background: #e2ffff;
+ color: #10A3A3;
+}
+.ui.ui.selectable.table tr.teal:not(.marked):hover,
+.ui.table tr td.selectable.teal:not(.marked):hover,
+.ui.selectable.table tr:hover td.teal:not(.marked) {
+ background: #d8ffff;
+ color: #10A3A3;
+}
+.ui.table td.marked.teal.left,
+.ui.table tr.marked.teal.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #00B5AD inset;
+ box-shadow: 0.2em 0 0 0 #00B5AD inset;
+}
+.ui.table td.marked.teal.right,
+.ui.table tr.marked.teal.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #00B5AD inset;
+ box-shadow: -0.2em 0 0 0 #00B5AD inset;
+}
+.ui.inverted.table td.marked.teal.left,
+.ui.inverted.table tr.marked.teal.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: 0.2em 0 0 0 #6DFFFF inset;
+}
+.ui.inverted.table td.marked.teal.right,
+.ui.inverted.table tr.marked.teal.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #6DFFFF inset;
+ box-shadow: -0.2em 0 0 0 #6DFFFF inset;
}
-
-/* Blue */
.ui.blue.table {
border-top: 0.2em solid #2185D0;
}
.ui.inverted.blue.table {
- background-color: #2185D0 !important;
- color: #FFFFFF !important;
+ background-color: #2185D0;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.blue:not(.marked),
+.ui.ui.table td.blue:not(.marked) {
+ background: #ddf4ff;
+ color: #2185D0;
+}
+.ui.ui.selectable.table tr.blue:not(.marked):hover,
+.ui.table tr td.selectable.blue:not(.marked):hover,
+.ui.selectable.table tr:hover td.blue:not(.marked) {
+ background: #d3f1ff;
+ color: #2185D0;
+}
+.ui.table td.marked.blue.left,
+.ui.table tr.marked.blue.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #2185D0 inset;
+ box-shadow: 0.2em 0 0 0 #2185D0 inset;
+}
+.ui.table td.marked.blue.right,
+.ui.table tr.marked.blue.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #2185D0 inset;
+ box-shadow: -0.2em 0 0 0 #2185D0 inset;
+}
+.ui.inverted.table td.marked.blue.left,
+.ui.inverted.table tr.marked.blue.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #54C8FF inset;
+ box-shadow: 0.2em 0 0 0 #54C8FF inset;
+}
+.ui.inverted.table td.marked.blue.right,
+.ui.inverted.table tr.marked.blue.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #54C8FF inset;
+ box-shadow: -0.2em 0 0 0 #54C8FF inset;
}
-
-/* Violet */
.ui.violet.table {
border-top: 0.2em solid #6435C9;
}
.ui.inverted.violet.table {
- background-color: #6435C9 !important;
- color: #FFFFFF !important;
+ background-color: #6435C9;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.violet:not(.marked),
+.ui.ui.table td.violet:not(.marked) {
+ background: #ece9fe;
+ color: #6435C9;
+}
+.ui.ui.selectable.table tr.violet:not(.marked):hover,
+.ui.table tr td.selectable.violet:not(.marked):hover,
+.ui.selectable.table tr:hover td.violet:not(.marked) {
+ background: #e3deff;
+ color: #6435C9;
+}
+.ui.table td.marked.violet.left,
+.ui.table tr.marked.violet.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #6435C9 inset;
+ box-shadow: 0.2em 0 0 0 #6435C9 inset;
+}
+.ui.table td.marked.violet.right,
+.ui.table tr.marked.violet.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #6435C9 inset;
+ box-shadow: -0.2em 0 0 0 #6435C9 inset;
+}
+.ui.inverted.table td.marked.violet.left,
+.ui.inverted.table tr.marked.violet.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #A291FB inset;
+ box-shadow: 0.2em 0 0 0 #A291FB inset;
+}
+.ui.inverted.table td.marked.violet.right,
+.ui.inverted.table tr.marked.violet.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #A291FB inset;
+ box-shadow: -0.2em 0 0 0 #A291FB inset;
}
-
-/* Purple */
.ui.purple.table {
border-top: 0.2em solid #A333C8;
}
.ui.inverted.purple.table {
- background-color: #A333C8 !important;
- color: #FFFFFF !important;
+ background-color: #A333C8;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.purple:not(.marked),
+.ui.ui.table td.purple:not(.marked) {
+ background: #f8e3ff;
+ color: #A333C8;
+}
+.ui.ui.selectable.table tr.purple:not(.marked):hover,
+.ui.table tr td.selectable.purple:not(.marked):hover,
+.ui.selectable.table tr:hover td.purple:not(.marked) {
+ background: #f5d9ff;
+ color: #A333C8;
+}
+.ui.table td.marked.purple.left,
+.ui.table tr.marked.purple.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #A333C8 inset;
+ box-shadow: 0.2em 0 0 0 #A333C8 inset;
+}
+.ui.table td.marked.purple.right,
+.ui.table tr.marked.purple.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #A333C8 inset;
+ box-shadow: -0.2em 0 0 0 #A333C8 inset;
+}
+.ui.inverted.table td.marked.purple.left,
+.ui.inverted.table tr.marked.purple.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #DC73FF inset;
+ box-shadow: 0.2em 0 0 0 #DC73FF inset;
+}
+.ui.inverted.table td.marked.purple.right,
+.ui.inverted.table tr.marked.purple.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #DC73FF inset;
+ box-shadow: -0.2em 0 0 0 #DC73FF inset;
}
-
-/* Pink */
.ui.pink.table {
border-top: 0.2em solid #E03997;
}
.ui.inverted.pink.table {
- background-color: #E03997 !important;
- color: #FFFFFF !important;
+ background-color: #E03997;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.pink:not(.marked),
+.ui.ui.table td.pink:not(.marked) {
+ background: #ffe8f9;
+ color: #E03997;
+}
+.ui.ui.selectable.table tr.pink:not(.marked):hover,
+.ui.table tr td.selectable.pink:not(.marked):hover,
+.ui.selectable.table tr:hover td.pink:not(.marked) {
+ background: #ffdef6;
+ color: #E03997;
+}
+.ui.table td.marked.pink.left,
+.ui.table tr.marked.pink.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #E03997 inset;
+ box-shadow: 0.2em 0 0 0 #E03997 inset;
+}
+.ui.table td.marked.pink.right,
+.ui.table tr.marked.pink.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #E03997 inset;
+ box-shadow: -0.2em 0 0 0 #E03997 inset;
+}
+.ui.inverted.table td.marked.pink.left,
+.ui.inverted.table tr.marked.pink.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: 0.2em 0 0 0 #FF8EDF inset;
+}
+.ui.inverted.table td.marked.pink.right,
+.ui.inverted.table tr.marked.pink.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #FF8EDF inset;
+ box-shadow: -0.2em 0 0 0 #FF8EDF inset;
}
-
-/* Brown */
.ui.brown.table {
border-top: 0.2em solid #A5673F;
}
.ui.inverted.brown.table {
- background-color: #A5673F !important;
- color: #FFFFFF !important;
+ background-color: #A5673F;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.brown:not(.marked),
+.ui.ui.table td.brown:not(.marked) {
+ background: #f7e5d2;
+ color: #A5673F;
+}
+.ui.ui.selectable.table tr.brown:not(.marked):hover,
+.ui.table tr td.selectable.brown:not(.marked):hover,
+.ui.selectable.table tr:hover td.brown:not(.marked) {
+ background: #efe0cf;
+ color: #A5673F;
+}
+.ui.table td.marked.brown.left,
+.ui.table tr.marked.brown.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #A5673F inset;
+ box-shadow: 0.2em 0 0 0 #A5673F inset;
+}
+.ui.table td.marked.brown.right,
+.ui.table tr.marked.brown.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #A5673F inset;
+ box-shadow: -0.2em 0 0 0 #A5673F inset;
+}
+.ui.inverted.table td.marked.brown.left,
+.ui.inverted.table tr.marked.brown.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #D67C1C inset;
+ box-shadow: 0.2em 0 0 0 #D67C1C inset;
+}
+.ui.inverted.table td.marked.brown.right,
+.ui.inverted.table tr.marked.brown.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #D67C1C inset;
+ box-shadow: -0.2em 0 0 0 #D67C1C inset;
}
-
-/* Grey */
.ui.grey.table {
border-top: 0.2em solid #767676;
}
.ui.inverted.grey.table {
- background-color: #767676 !important;
- color: #FFFFFF !important;
+ background-color: #767676;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.grey:not(.marked),
+.ui.ui.table td.grey:not(.marked) {
+ background: #DCDDDE;
+ color: #767676;
+}
+.ui.ui.selectable.table tr.grey:not(.marked):hover,
+.ui.table tr td.selectable.grey:not(.marked):hover,
+.ui.selectable.table tr:hover td.grey:not(.marked) {
+ background: #c2c4c5;
+ color: #767676;
+}
+.ui.table td.marked.grey.left,
+.ui.table tr.marked.grey.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #767676 inset;
+ box-shadow: 0.2em 0 0 0 #767676 inset;
+}
+.ui.table td.marked.grey.right,
+.ui.table tr.marked.grey.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #767676 inset;
+ box-shadow: -0.2em 0 0 0 #767676 inset;
+}
+.ui.inverted.table td.marked.grey.left,
+.ui.inverted.table tr.marked.grey.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: 0.2em 0 0 0 #DCDDDE inset;
+}
+.ui.inverted.table td.marked.grey.right,
+.ui.inverted.table tr.marked.grey.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #DCDDDE inset;
+ box-shadow: -0.2em 0 0 0 #DCDDDE inset;
}
-
-/* Black */
.ui.black.table {
border-top: 0.2em solid #1B1C1D;
}
.ui.inverted.black.table {
- background-color: #1B1C1D !important;
- color: #FFFFFF !important;
+ background-color: #1B1C1D;
+ color: #FFFFFF;
+}
+.ui.ui.ui.ui.table tr.black:not(.marked),
+.ui.ui.table td.black:not(.marked) {
+ background: #545454;
+ color: #FFFFFF;
+}
+.ui.ui.selectable.table tr.black:not(.marked):hover,
+.ui.table tr td.selectable.black:not(.marked):hover,
+.ui.selectable.table tr:hover td.black:not(.marked) {
+ background: #000000;
+ color: #FFFFFF;
+}
+.ui.table td.marked.black.left,
+.ui.table tr.marked.black.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: 0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.table td.marked.black.right,
+.ui.table tr.marked.black.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #1B1C1D inset;
+ box-shadow: -0.2em 0 0 0 #1B1C1D inset;
+}
+.ui.inverted.table td.marked.black.left,
+.ui.inverted.table tr.marked.black.left {
+ -webkit-box-shadow: 0.2em 0 0 0 #545454 inset;
+ box-shadow: 0.2em 0 0 0 #545454 inset;
+}
+.ui.inverted.table td.marked.black.right,
+.ui.inverted.table tr.marked.black.right {
+ -webkit-box-shadow: -0.2em 0 0 0 #545454 inset;
+ box-shadow: -0.2em 0 0 0 #545454 inset;
}
/*--------------
@@ -880,16 +1861,16 @@
}
/*--------------
- Sortable
----------------*/
+ Sortable
+ ---------------*/
-.ui.sortable.table thead th {
+.ui.sortable.table > thead > tr > th {
cursor: pointer;
white-space: nowrap;
border-left: 1px solid rgba(34, 36, 38, 0.15);
color: rgba(0, 0, 0, 0.87);
}
-.ui.sortable.table thead th:first-child {
+.ui.sortable.table > thead > tr > th:first-child {
border-left: none;
}
.ui.sortable.table thead th.sorted,
@@ -899,7 +1880,7 @@
-ms-user-select: none;
user-select: none;
}
-.ui.sortable.table thead th:after {
+.ui.sortable.table > thead > tr > th:after {
display: none;
font-style: normal;
font-weight: normal;
@@ -908,7 +1889,7 @@
height: 1em;
width: auto;
opacity: 0.8;
- margin: 0em 0em 0em 0.5em;
+ margin: 0 0 0 0.5em;
font-family: 'Icons';
}
.ui.sortable.table thead th.ascending:after {
@@ -923,47 +1904,57 @@
cursor: auto;
color: rgba(40, 40, 40, 0.3);
}
-.ui.sortable.table thead th:hover {
- background: rgba(0, 0, 0, 0.05);
+.ui.sortable.table > thead > tr > th:hover {
color: rgba(0, 0, 0, 0.8);
}
+.ui.sortable.table:not(.basic) > thead > tr > th:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
/* Sorted */
.ui.sortable.table thead th.sorted {
- background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
}
+.ui.sortable.table:not(.basic) thead th.sorted {
+ background: rgba(0, 0, 0, 0.05);
+}
.ui.sortable.table thead th.sorted:after {
display: inline-block;
}
/* Sorted Hover */
.ui.sortable.table thead th.sorted:hover {
- background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
}
+.ui.sortable.table:not(.basic) thead th.sorted:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
/* Inverted */
.ui.inverted.sortable.table thead th.sorted {
+ color: #ffffff;
+}
+.ui.inverted.sortable.table:not(.basic) thead th.sorted {
background: rgba(255, 255, 255, 0.15) -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+}
+.ui.inverted.sortable.table > thead > tr > th:hover {
color: #ffffff;
}
-.ui.inverted.sortable.table thead th:hover {
+.ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover {
background: rgba(255, 255, 255, 0.08) -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
- color: #ffffff;
}
-.ui.inverted.sortable.table thead th {
+.ui.inverted.sortable.table:not(.basic) > thead > tr > th {
border-left-color: transparent;
border-right-color: transparent;
}
/*--------------
- Inverted
----------------*/
+ Inverted
+ ---------------*/
/* Text Color */
@@ -972,13 +1963,19 @@
color: rgba(255, 255, 255, 0.9);
border: none;
}
-.ui.inverted.table th {
+.ui.ui.inverted.table > thead > tr > th,
+.ui.ui.inverted.table > tbody > tr > th,
+.ui.ui.inverted.table > tfoot > tr > th,
+.ui.ui.inverted.table > tfoot > tr > td,
+.ui.ui.inverted.table > tr > th {
background-color: rgba(0, 0, 0, 0.15);
- border-color: rgba(255, 255, 255, 0.1) !important;
- color: rgba(255, 255, 255, 0.9) !important;
+ border-color: rgba(255, 255, 255, 0.1);
+ color: rgba(255, 255, 255, 0.9);
}
-.ui.inverted.table tr td {
- border-color: rgba(255, 255, 255, 0.1) !important;
+.ui.inverted.table > tbody > tr > td,
+.ui.inverted.table > tfoot > tr > td,
+.ui.inverted.table > tr > td {
+ border-color: rgba(255, 255, 255, 0.1);
}
.ui.inverted.table tr.disabled td,
.ui.inverted.table tr td.disabled,
@@ -987,28 +1984,35 @@
pointer-events: none;
color: rgba(225, 225, 225, 0.3);
}
+.ui.inverted.table tr td.disabled:not([class="disabled"]),
+.ui.inverted.table tr.disabled:not([class="disabled"]) td,
+.ui.inverted.table tr.disabled td[class]:not(.disabled),
+.ui.inverted.table tr:hover td.disabled:not([class="disabled"]) {
+ color: rgba(40, 40, 40, 0.3);
+}
/* Definition */
-.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
-.ui.inverted.definition.table thead:not(.full-width) th:first-child {
+.ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child,
+.ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child {
background: #FFFFFF;
}
-.ui.inverted.definition.table tr td:first-child {
+.ui.inverted.definition.table > tbody > tr > td:first-child .ui.inverted.definition.table > tfoot > tr > td:first-child,
+.ui.inverted.definition.table > tr > td:first-child {
background: rgba(255, 255, 255, 0.02);
color: #ffffff;
}
/*--------------
- Collapsing
----------------*/
+ Collapsing
+ ---------------*/
.ui.collapsing.table {
width: auto;
}
/*--------------
- Basic
----------------*/
+ Basic
+ ---------------*/
.ui.basic.table {
background: transparent;
@@ -1016,98 +2020,154 @@
-webkit-box-shadow: none;
box-shadow: none;
}
-.ui.basic.table thead,
-.ui.basic.table tfoot {
+.ui.basic.table > thead,
+.ui.basic.table > tfoot {
-webkit-box-shadow: none;
box-shadow: none;
}
-.ui.basic.table th {
+.ui.basic.table > thead > tr > th,
+.ui.basic.table > tbody > tr > th,
+.ui.basic.table > tfoot > tr > th,
+.ui.basic.table > tr > th {
background: transparent;
border-left: none;
}
-.ui.basic.table tbody tr {
+.ui.basic.table > tbody > tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
-.ui.basic.table td {
+.ui.basic.table > tbody > tr > td,
+.ui.basic.table > tfoot > tr > td,
+.ui.basic.table > tr > td {
background: transparent;
}
-.ui.basic.striped.table tbody tr:nth-child(2n) {
- background-color: rgba(0, 0, 0, 0.05) !important;
+.ui.basic.striped.table > tbody > tr:nth-child(2n) {
+ background-color: rgba(0, 0, 0, 0.05);
}
/* Very Basic */
.ui[class*="very basic"].table {
border: none;
}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
padding: '';
}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
- padding-left: 0em;
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
+ padding-left: 0;
}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
- padding-right: 0em;
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child {
+ padding-right: 0;
}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
- padding-top: 0em;
+.ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
+ padding-top: 0;
}
/*--------------
- Celled
----------------*/
-
-.ui.celled.table tr th,
-.ui.celled.table tr td {
+ Celled
+ ---------------*/
+
+.ui.celled.table > tr > th,
+.ui.celled.table > thead > tr > th,
+.ui.celled.table > tbody > tr > th,
+.ui.celled.table > tfoot > tr > th,
+.ui.celled.table > tr > td,
+.ui.celled.table > tbody > tr > td,
+.ui.celled.table > tfoot > tr > td {
border-left: 1px solid rgba(34, 36, 38, 0.1);
}
-.ui.celled.table tr th:first-child,
-.ui.celled.table tr td:first-child {
+.ui.inverted.celled.table > tbody > tr > td,
+.ui.inverted.celled.table > tr > td {
+ border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+.ui.celled.table > tr > th:first-child,
+.ui.celled.table > thead > tr > th:first-child,
+.ui.celled.table > tbody > tr > th:first-child,
+.ui.celled.table > tfoot > tr > th:first-child,
+.ui.celled.table > tr > td:first-child,
+.ui.celled.table > tbody > tr > td:first-child,
+.ui.celled.table > tfoot > tr > td:first-child {
border-left: none;
}
/*--------------
- Padded
----------------*/
+ Padded
+ ---------------*/
-.ui.padded.table th {
+.ui.padded.table > tr > th,
+.ui.padded.table > thead > tr > th,
+.ui.padded.table > tbody > tr > th,
+.ui.padded.table > tfoot > tr > th {
padding-left: 1em;
padding-right: 1em;
}
-.ui.padded.table th,
-.ui.padded.table td {
+.ui.padded.table > tr > th,
+.ui.padded.table > thead > tr > th,
+.ui.padded.table > tbody > tr > th,
+.ui.padded.table > tfoot > tr > th,
+.ui.padded.table > tr > td,
+.ui.padded.table > tbody > tr > td,
+.ui.padded.table > tfoot > tr > td {
padding: 1em 1em;
}
/* Very */
-.ui[class*="very padded"].table th {
+.ui[class*="very padded"].table > tr > th,
+.ui[class*="very padded"].table > thead > tr > th,
+.ui[class*="very padded"].table > tbody > tr > th,
+.ui[class*="very padded"].table > tfoot > tr > th {
padding-left: 1.5em;
padding-right: 1.5em;
}
-.ui[class*="very padded"].table td {
+.ui[class*="very padded"].table > tr > td,
+.ui[class*="very padded"].table > tbody > tr > td,
+.ui[class*="very padded"].table > tfoot > tr > td {
padding: 1.5em 1.5em;
}
/*--------------
- Compact
----------------*/
+ Compact
+ ---------------*/
-.ui.compact.table th {
+.ui.compact.table > tr > th,
+.ui.compact.table > thead > tr > th,
+.ui.compact.table > tbody > tr > th,
+.ui.compact.table > tfoot > tr > th {
padding-left: 0.7em;
padding-right: 0.7em;
}
-.ui.compact.table td {
+.ui.compact.table > tr > td,
+.ui.compact.table > tbody > tr > td,
+.ui.compact.table > tfoot > tr > td {
padding: 0.5em 0.7em;
}
/* Very */
-.ui[class*="very compact"].table th {
+.ui[class*="very compact"].table > tr > th,
+.ui[class*="very compact"].table > thead > tr > th,
+.ui[class*="very compact"].table > tbody > tr > th,
+.ui[class*="very compact"].table > tfoot > tr > th {
padding-left: 0.6em;
padding-right: 0.6em;
}
-.ui[class*="very compact"].table td {
+.ui[class*="very compact"].table > tr > td,
+.ui[class*="very compact"].table > tbody > tr > td,
+.ui[class*="very compact"].table > tfoot > tr > td {
padding: 0.4em 0.6em;
}
@@ -1116,20 +2176,31 @@
---------------*/
-/* Small */
-.ui.small.table {
- font-size: 0.9em;
-}
-
/* Standard */
.ui.table {
font-size: 1em;
}
-
-/* Large */
+.ui.mini.table {
+ font-size: 0.8125rem;
+}
+.ui.tiny.table {
+ font-size: 0.875rem;
+}
+.ui.small.table {
+ font-size: 0.9em;
+}
.ui.large.table {
font-size: 1.1em;
}
+.ui.big.table {
+ font-size: 1.3125rem;
+}
+.ui.huge.table {
+ font-size: 1.4375rem;
+}
+.ui.massive.table {
+ font-size: 1.6875rem;
+}
/*******************************
diff --git a/ui/dist/components/table.min.css b/ui/dist/components/table.min.css
index 30832287bff..2e3964a19a7 100644
--- a/ui/dist/components/table.min.css
+++ b/ui/dist/components/table.min.css
@@ -1,9 +1,9 @@
/*!
- * # Semantic UI 2.3.3 - Table
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Table
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
- */.ui.table{width:100%;background:#fff;margin:1em 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none;border-radius:.25rem;text-align:left;color:rgba(0,0,0,.87);border-collapse:separate;border-spacing:0}.ui.table:first-child{margin-top:0}.ui.table:last-child{margin-bottom:0}.ui.table td,.ui.table th{-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease}.ui.table thead{-webkit-box-shadow:none;box-shadow:none}.ui.table thead th{cursor:auto;background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.9375em .8125em;vertical-align:inherit;font-style:none;font-weight:700;text-transform:none;border-bottom:1px solid rgba(34,36,38,.1);border-left:none}.ui.table thead tr>th:first-child{border-left:none}.ui.table thead tr:first-child>th:first-child{border-radius:.25rem 0 0 0}.ui.table thead tr:first-child>th:last-child{border-radius:0 .25rem 0 0}.ui.table thead tr:first-child>th:only-child{border-radius:.25rem .25rem 0 0}.ui.table tfoot{-webkit-box-shadow:none;box-shadow:none}.ui.table tfoot th{cursor:auto;border-top:1px solid rgba(34,36,38,.15);background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.8125em .8125em;vertical-align:middle;font-style:normal;font-weight:400;text-transform:none}.ui.table tfoot tr>th:first-child{border-left:none}.ui.table tfoot tr:first-child>th:first-child{border-radius:0 0 0 .25rem}.ui.table tfoot tr:first-child>th:last-child{border-radius:0 0 .25rem 0}.ui.table tfoot tr:first-child>th:only-child{border-radius:0 0 .25rem .25rem}.ui.table tr td{border-top:1px solid rgba(34,36,38,.1)}.ui.table tr:first-child td{border-top:none}.ui.table tbody+tbody tr:first-child td{border-top:1px solid rgba(34,36,38,.1)}.ui.table td{padding:.8125em .8125em;text-align:inherit}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.table.segment{padding:0}.ui.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}@media only screen and (max-width:767px){.ui.table:not(.unstackable){width:100%}.ui.table:not(.unstackable) tbody,.ui.table:not(.unstackable) tr,.ui.table:not(.unstackable) tr>td,.ui.table:not(.unstackable) tr>th{width:auto!important;display:block!important}.ui.table:not(.unstackable){padding:0}.ui.table:not(.unstackable) thead{display:block}.ui.table:not(.unstackable) tfoot{display:block}.ui.table:not(.unstackable) tr{padding-top:1em;padding-bottom:1em;-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important}.ui.table:not(.unstackable) tr>td,.ui.table:not(.unstackable) tr>th{background:0 0;border:none!important;padding:.25em .75em!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.table:not(.unstackable) td:first-child,.ui.table:not(.unstackable) th:first-child{font-weight:700}.ui.definition.table:not(.unstackable) thead th:first-child{-webkit-box-shadow:none!important;box-shadow:none!important}}.ui.table td .image,.ui.table td .image img,.ui.table th .image,.ui.table th .image img{max-width:none}.ui.structured.table{border-collapse:collapse}.ui.structured.table thead th{border-left:none;border-right:none}.ui.structured.sortable.table thead th{border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(34,36,38,.15)}.ui.structured.basic.table th{border-left:none;border-right:none}.ui.structured.celled.table tr td,.ui.structured.celled.table tr th{border-left:1px solid rgba(34,36,38,.1);border-right:1px solid rgba(34,36,38,.1)}.ui.definition.table thead:not(.full-width) th:first-child{pointer-events:none;background:0 0;font-weight:400;color:rgba(0,0,0,.4);-webkit-box-shadow:-1px -1px 0 1px #fff;box-shadow:-1px -1px 0 1px #fff}.ui.definition.table tfoot:not(.full-width) th:first-child{pointer-events:none;background:0 0;font-weight:rgba(0,0,0,.4);color:normal;-webkit-box-shadow:1px 1px 0 1px #fff;box-shadow:1px 1px 0 1px #fff}.ui.celled.definition.table thead:not(.full-width) th:first-child{-webkit-box-shadow:0 -1px 0 1px #fff;box-shadow:0 -1px 0 1px #fff}.ui.celled.definition.table tfoot:not(.full-width) th:first-child{-webkit-box-shadow:0 1px 0 1px #fff;box-shadow:0 1px 0 1px #fff}.ui.definition.table tr td.definition,.ui.definition.table tr td:first-child:not(.ignored){background:rgba(0,0,0,.03);font-weight:700;color:rgba(0,0,0,.95);text-transform:'';-webkit-box-shadow:'';box-shadow:'';text-align:'';font-size:1em;padding-left:'';padding-right:''}.ui.definition.table thead:not(.full-width) th:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.definition.table tfoot:not(.full-width) th:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.definition.table td:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.table td.positive,.ui.table tr.positive{-webkit-box-shadow:0 0 0 #a3c293 inset;box-shadow:0 0 0 #a3c293 inset}.ui.table td.positive,.ui.table tr.positive{background:#fcfff5!important;color:#2c662d!important}.ui.table td.negative,.ui.table tr.negative{-webkit-box-shadow:0 0 0 #e0b4b4 inset;box-shadow:0 0 0 #e0b4b4 inset}.ui.table td.negative,.ui.table tr.negative{background:#fff6f6!important;color:#9f3a38!important}.ui.table td.error,.ui.table tr.error{-webkit-box-shadow:0 0 0 #e0b4b4 inset;box-shadow:0 0 0 #e0b4b4 inset}.ui.table td.error,.ui.table tr.error{background:#fff6f6!important;color:#9f3a38!important}.ui.table td.warning,.ui.table tr.warning{-webkit-box-shadow:0 0 0 #c9ba9b inset;box-shadow:0 0 0 #c9ba9b inset}.ui.table td.warning,.ui.table tr.warning{background:#fffaf3!important;color:#573a08!important}.ui.table td.active,.ui.table tr.active{-webkit-box-shadow:0 0 0 rgba(0,0,0,.87) inset;box-shadow:0 0 0 rgba(0,0,0,.87) inset}.ui.table td.active,.ui.table tr.active{background:#e0e0e0!important;color:rgba(0,0,0,.87)!important}.ui.table tr td.disabled,.ui.table tr.disabled td,.ui.table tr.disabled:hover,.ui.table tr:hover td.disabled{pointer-events:none;color:rgba(40,40,40,.3)}@media only screen and (max-width:991px){.ui[class*="tablet stackable"].table,.ui[class*="tablet stackable"].table tbody,.ui[class*="tablet stackable"].table tr,.ui[class*="tablet stackable"].table tr>td,.ui[class*="tablet stackable"].table tr>th{width:100%!important;display:block!important}.ui[class*="tablet stackable"].table{padding:0}.ui[class*="tablet stackable"].table thead{display:block}.ui[class*="tablet stackable"].table tfoot{display:block}.ui[class*="tablet stackable"].table tr{padding-top:1em;padding-bottom:1em;-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important}.ui[class*="tablet stackable"].table tr>td,.ui[class*="tablet stackable"].table tr>th{background:0 0;border:none!important;padding:.25em .75em;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.definition[class*="tablet stackable"].table thead th:first-child{-webkit-box-shadow:none!important;box-shadow:none!important}}.ui.table [class*="left aligned"],.ui.table[class*="left aligned"]{text-align:left}.ui.table [class*="center aligned"],.ui.table[class*="center aligned"]{text-align:center}.ui.table [class*="right aligned"],.ui.table[class*="right aligned"]{text-align:right}.ui.table [class*="top aligned"],.ui.table[class*="top aligned"]{vertical-align:top}.ui.table [class*="middle aligned"],.ui.table[class*="middle aligned"]{vertical-align:middle}.ui.table [class*="bottom aligned"],.ui.table[class*="bottom aligned"]{vertical-align:bottom}.ui.table td.collapsing,.ui.table th.collapsing{width:1px;white-space:nowrap}.ui.fixed.table{table-layout:fixed}.ui.fixed.table td,.ui.fixed.table th{overflow:hidden;text-overflow:ellipsis}.ui.selectable.table tbody tr:hover,.ui.table tbody tr td.selectable:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.inverted.table tbody tr td.selectable:hover,.ui.selectable.inverted.table tbody tr:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}.ui.table tbody tr td.selectable{padding:0}.ui.table tbody tr td.selectable>a:not(.ui){display:block;color:inherit;padding:.8125em .8125em}.ui.selectable.table tr.error:hover,.ui.selectable.table tr:hover td.error,.ui.table tr td.selectable.error:hover{background:#ffe7e7!important;color:#943634!important}.ui.selectable.table tr.warning:hover,.ui.selectable.table tr:hover td.warning,.ui.table tr td.selectable.warning:hover{background:#fff4e4!important;color:#493107!important}.ui.selectable.table tr.active:hover,.ui.selectable.table tr:hover td.active,.ui.table tr td.selectable.active:hover{background:#e0e0e0!important;color:rgba(0,0,0,.87)!important}.ui.selectable.table tr.positive:hover,.ui.selectable.table tr:hover td.positive,.ui.table tr td.selectable.positive:hover{background:#f7ffe6!important;color:#275b28!important}.ui.selectable.table tr.negative:hover,.ui.selectable.table tr:hover td.negative,.ui.table tr td.selectable.negative:hover{background:#ffe7e7!important;color:#943634!important}.ui.attached.table{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached+.ui.attached.table:not(.top){border-top:none}.ui[class*="top attached"].table{bottom:0;margin-bottom:0;top:0;margin-top:1em;border-radius:.25rem .25rem 0 0}.ui.table[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].table{bottom:0;margin-top:0;top:0;margin-bottom:1em;-webkit-box-shadow:none,none;box-shadow:none,none;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].table:last-child{margin-bottom:0}.ui.striped.table tbody tr:nth-child(2n),.ui.striped.table>tr:nth-child(2n){background-color:rgba(0,0,50,.02)}.ui.inverted.striped.table tbody tr:nth-child(2n),.ui.inverted.striped.table>tr:nth-child(2n){background-color:rgba(255,255,255,.05)}.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover{background:#efefef!important;color:rgba(0,0,0,.95)!important}.ui.table [class*="single line"],.ui.table[class*="single line"]{white-space:nowrap}.ui.table [class*="single line"],.ui.table[class*="single line"]{white-space:nowrap}.ui.red.table{border-top:.2em solid #db2828}.ui.inverted.red.table{background-color:#db2828!important;color:#fff!important}.ui.orange.table{border-top:.2em solid #f2711c}.ui.inverted.orange.table{background-color:#f2711c!important;color:#fff!important}.ui.yellow.table{border-top:.2em solid #fbbd08}.ui.inverted.yellow.table{background-color:#fbbd08!important;color:#fff!important}.ui.olive.table{border-top:.2em solid #b5cc18}.ui.inverted.olive.table{background-color:#b5cc18!important;color:#fff!important}.ui.green.table{border-top:.2em solid #21ba45}.ui.inverted.green.table{background-color:#21ba45!important;color:#fff!important}.ui.teal.table{border-top:.2em solid #00b5ad}.ui.inverted.teal.table{background-color:#00b5ad!important;color:#fff!important}.ui.blue.table{border-top:.2em solid #2185d0}.ui.inverted.blue.table{background-color:#2185d0!important;color:#fff!important}.ui.violet.table{border-top:.2em solid #6435c9}.ui.inverted.violet.table{background-color:#6435c9!important;color:#fff!important}.ui.purple.table{border-top:.2em solid #a333c8}.ui.inverted.purple.table{background-color:#a333c8!important;color:#fff!important}.ui.pink.table{border-top:.2em solid #e03997}.ui.inverted.pink.table{background-color:#e03997!important;color:#fff!important}.ui.brown.table{border-top:.2em solid #a5673f}.ui.inverted.brown.table{background-color:#a5673f!important;color:#fff!important}.ui.grey.table{border-top:.2em solid #767676}.ui.inverted.grey.table{background-color:#767676!important;color:#fff!important}.ui.black.table{border-top:.2em solid #1b1c1d}.ui.inverted.black.table{background-color:#1b1c1d!important;color:#fff!important}.ui.one.column.table td{width:100%}.ui.two.column.table td{width:50%}.ui.three.column.table td{width:33.33333333%}.ui.four.column.table td{width:25%}.ui.five.column.table td{width:20%}.ui.six.column.table td{width:16.66666667%}.ui.seven.column.table td{width:14.28571429%}.ui.eight.column.table td{width:12.5%}.ui.nine.column.table td{width:11.11111111%}.ui.ten.column.table td{width:10%}.ui.eleven.column.table td{width:9.09090909%}.ui.twelve.column.table td{width:8.33333333%}.ui.thirteen.column.table td{width:7.69230769%}.ui.fourteen.column.table td{width:7.14285714%}.ui.fifteen.column.table td{width:6.66666667%}.ui.sixteen.column.table td{width:6.25%}.ui.table td.one.wide,.ui.table th.one.wide{width:6.25%}.ui.table td.two.wide,.ui.table th.two.wide{width:12.5%}.ui.table td.three.wide,.ui.table th.three.wide{width:18.75%}.ui.table td.four.wide,.ui.table th.four.wide{width:25%}.ui.table td.five.wide,.ui.table th.five.wide{width:31.25%}.ui.table td.six.wide,.ui.table th.six.wide{width:37.5%}.ui.table td.seven.wide,.ui.table th.seven.wide{width:43.75%}.ui.table td.eight.wide,.ui.table th.eight.wide{width:50%}.ui.table td.nine.wide,.ui.table th.nine.wide{width:56.25%}.ui.table td.ten.wide,.ui.table th.ten.wide{width:62.5%}.ui.table td.eleven.wide,.ui.table th.eleven.wide{width:68.75%}.ui.table td.twelve.wide,.ui.table th.twelve.wide{width:75%}.ui.table td.thirteen.wide,.ui.table th.thirteen.wide{width:81.25%}.ui.table td.fourteen.wide,.ui.table th.fourteen.wide{width:87.5%}.ui.table td.fifteen.wide,.ui.table th.fifteen.wide{width:93.75%}.ui.table td.sixteen.wide,.ui.table th.sixteen.wide{width:100%}.ui.sortable.table thead th{cursor:pointer;white-space:nowrap;border-left:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87)}.ui.sortable.table thead th:first-child{border-left:none}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.sortable.table thead th:after{display:none;font-style:normal;font-weight:400;text-decoration:inherit;content:'';height:1em;width:auto;opacity:.8;margin:0 0 0 .5em;font-family:Icons}.ui.sortable.table thead th.ascending:after{content:'\f0d8'}.ui.sortable.table thead th.descending:after{content:'\f0d7'}.ui.sortable.table th.disabled:hover{cursor:auto;color:rgba(40,40,40,.3)}.ui.sortable.table thead th:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.8)}.ui.sortable.table thead th.sorted{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.sortable.table thead th.sorted:after{display:inline-block}.ui.sortable.table thead th.sorted:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.sortable.table thead th.sorted{background:rgba(255,255,255,.15) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:rgba(255,255,255,.15) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:rgba(255,255,255,.15) linear-gradient(transparent,rgba(0,0,0,.05));color:#fff}.ui.inverted.sortable.table thead th:hover{background:rgba(255,255,255,.08) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:rgba(255,255,255,.08) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:rgba(255,255,255,.08) linear-gradient(transparent,rgba(0,0,0,.05));color:#fff}.ui.inverted.sortable.table thead th{border-left-color:transparent;border-right-color:transparent}.ui.inverted.table{background:#333;color:rgba(255,255,255,.9);border:none}.ui.inverted.table th{background-color:rgba(0,0,0,.15);border-color:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.9)!important}.ui.inverted.table tr td{border-color:rgba(255,255,255,.1)!important}.ui.inverted.table tr td.disabled,.ui.inverted.table tr.disabled td,.ui.inverted.table tr.disabled:hover td,.ui.inverted.table tr:hover td.disabled{pointer-events:none;color:rgba(225,225,225,.3)}.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,.ui.inverted.definition.table thead:not(.full-width) th:first-child{background:#fff}.ui.inverted.definition.table tr td:first-child{background:rgba(255,255,255,.02);color:#fff}.ui.collapsing.table{width:auto}.ui.basic.table{background:0 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.table tfoot,.ui.basic.table thead{-webkit-box-shadow:none;box-shadow:none}.ui.basic.table th{background:0 0;border-left:none}.ui.basic.table tbody tr{border-bottom:1px solid rgba(0,0,0,.1)}.ui.basic.table td{background:0 0}.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.05)!important}.ui[class*="very basic"].table{border:none}.ui[class*="very basic"].table:not(.sortable):not(.striped) td,.ui[class*="very basic"].table:not(.sortable):not(.striped) th{padding:''}.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child{padding-left:0}.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child{padding-right:0}.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th{padding-top:0}.ui.celled.table tr td,.ui.celled.table tr th{border-left:1px solid rgba(34,36,38,.1)}.ui.celled.table tr td:first-child,.ui.celled.table tr th:first-child{border-left:none}.ui.padded.table th{padding-left:1em;padding-right:1em}.ui.padded.table td,.ui.padded.table th{padding:1em 1em}.ui[class*="very padded"].table th{padding-left:1.5em;padding-right:1.5em}.ui[class*="very padded"].table td{padding:1.5em 1.5em}.ui.compact.table th{padding-left:.7em;padding-right:.7em}.ui.compact.table td{padding:.5em .7em}.ui[class*="very compact"].table th{padding-left:.6em;padding-right:.6em}.ui[class*="very compact"].table td{padding:.4em .6em}.ui.small.table{font-size:.9em}.ui.table{font-size:1em}.ui.large.table{font-size:1.1em}
\ No newline at end of file
+ */.ui.table{width:100%;background:#fff;margin:1em 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none;border-radius:.25rem;text-align:left;vertical-align:middle;color:rgba(0,0,0,.87);border-collapse:separate;border-spacing:0}.ui.table:first-child{margin-top:0}.ui.table:last-child{margin-bottom:0}.ui.table>tbody,.ui.table>thead{text-align:inherit;vertical-align:inherit}.ui.table td,.ui.table th{-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease}.ui.table td.rowspanned,.ui.table th.rowspanned{display:none}.ui.table>thead{-webkit-box-shadow:none;box-shadow:none}.ui.table>thead>tr>th{cursor:auto;background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.9375em .8125em;vertical-align:inherit;font-style:none;font-weight:700;text-transform:none;border-bottom:1px solid rgba(34,36,38,.1);border-left:none}.ui.table>thead>tr>th:first-child{border-left:none}.ui.table>thead>tr:first-child>th:first-child{border-radius:.25rem 0 0 0}.ui.table>thead>tr:first-child>th:last-child{border-radius:0 .25rem 0 0}.ui.table>thead>tr:first-child>th:only-child{border-radius:.25rem .25rem 0 0}.ui.table>tfoot{-webkit-box-shadow:none;box-shadow:none}.ui.table>tfoot>tr>td,.ui.table>tfoot>tr>th{cursor:auto;border-top:1px solid rgba(34,36,38,.15);background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.8125em .8125em;vertical-align:middle;font-style:normal;font-weight:400;text-transform:none}.ui.table>tfoot>tr>td:first-child,.ui.table>tfoot>tr>th:first-child{border-left:none}.ui.table>tfoot>tr:first-child>td:first-child,.ui.table>tfoot>tr:first-child>th:first-child{border-radius:0 0 0 .25rem}.ui.table>tfoot>tr:first-child>td:last-child,.ui.table>tfoot>tr:first-child>th:last-child{border-radius:0 0 .25rem 0}.ui.table>tfoot>tr:first-child>td:only-child,.ui.table>tfoot>tr:first-child>th:only-child{border-radius:0 0 .25rem .25rem}.ui.table>tbody>tr>td,.ui.table>tr>td{border-top:1px solid rgba(34,36,38,.1)}.ui.table>tbody>tr:first-child>td,.ui.table>tr:first-child>td{border-top:none}.ui.table>tbody+tbody tr:first-child>td{border-top:1px solid rgba(34,36,38,.1)}.ui.table>tbody>tr>td,.ui.table>tr>td{padding:.8125em .8125em;text-align:inherit}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.table.segment{padding:0}.ui.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}@media only screen and (max-width:767.98px){.ui.table:not(.unstackable){width:100%;padding:0}.ui.table:not(.unstackable)>tbody,.ui.table:not(.unstackable)>tbody>tr,.ui.table:not(.unstackable)>tbody>tr>td:not(.rowspanned),.ui.table:not(.unstackable)>tbody>tr>th:not(.rowspanned),.ui.table:not(.unstackable)>tfoot,.ui.table:not(.unstackable)>tfoot>tr,.ui.table:not(.unstackable)>tfoot>tr>td:not(.rowspanned),.ui.table:not(.unstackable)>tfoot>tr>th:not(.rowspanned),.ui.table:not(.unstackable)>thead,.ui.table:not(.unstackable)>thead>tr,.ui.table:not(.unstackable)>thead>tr>th:not(.rowspanned),.ui.table:not(.unstackable)>tr,.ui.table:not(.unstackable)>tr>td:not(.rowspanned),.ui.table:not(.unstackable)>tr>th:not(.rowspanned){display:block!important;width:auto!important}.ui.table:not(.unstackable)>thead{display:block}.ui.table:not(.unstackable)>tfoot{display:block}.ui.ui.ui.ui.table:not(.unstackable)>tbody>tr,.ui.ui.ui.ui.table:not(.unstackable)>tfoot>tr,.ui.ui.ui.ui.table:not(.unstackable)>thead>tr,.ui.ui.ui.ui.table:not(.unstackable)>tr{padding-top:1em;padding-bottom:1em;-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset}.ui.ui.ui.ui.table:not(.unstackable)>tbody>tr>td,.ui.ui.ui.ui.table:not(.unstackable)>tbody>tr>th,.ui.ui.ui.ui.table:not(.unstackable)>tfoot>tr>td,.ui.ui.ui.ui.table:not(.unstackable)>tfoot>tr>th,.ui.ui.ui.ui.table:not(.unstackable)>thead>tr>th,.ui.ui.ui.ui.table:not(.unstackable)>tr>td,.ui.ui.ui.ui.table:not(.unstackable)>tr>th{background:0 0;border:none;padding:.25em .75em;-webkit-box-shadow:none;box-shadow:none}.ui.table:not(.unstackable)>tbody>tr>td:first-child,.ui.table:not(.unstackable)>tbody>tr>th:first-child,.ui.table:not(.unstackable)>tfoot>tr>td:first-child,.ui.table:not(.unstackable)>tfoot>tr>th:first-child,.ui.table:not(.unstackable)>thead>tr>th:first-child,.ui.table:not(.unstackable)>tr>td:first-child,.ui.table:not(.unstackable)>tr>th:first-child{font-weight:700}.ui.definition.table:not(.unstackable)>thead>tr>th:first-child{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.primary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.primary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.secondary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.secondary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #db2828 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #db2828 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #db2828 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #db2828 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.red.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff695e inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff695e inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.red.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff695e inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff695e inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #f2711c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #f2711c inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #f2711c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #f2711c inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.orange.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff851b inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff851b inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.orange.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff851b inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff851b inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #fbbd08 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #fbbd08 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #fbbd08 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #fbbd08 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.yellow.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ffe21f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ffe21f inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.yellow.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ffe21f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ffe21f inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #b5cc18 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #b5cc18 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #b5cc18 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #b5cc18 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.olive.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d9e778 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d9e778 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.olive.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d9e778 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d9e778 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #21ba45 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #21ba45 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #21ba45 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #21ba45 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.green.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2ecc40 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2ecc40 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.green.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2ecc40 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2ecc40 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #00b5ad inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #00b5ad inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #00b5ad inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #00b5ad inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.teal.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6dffff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6dffff inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.teal.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6dffff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6dffff inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.blue.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.blue.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6435c9 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6435c9 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6435c9 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6435c9 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.violet.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a291fb inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a291fb inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.violet.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a291fb inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a291fb inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a333c8 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a333c8 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a333c8 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a333c8 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.purple.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dc73ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dc73ff inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.purple.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dc73ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dc73ff inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #e03997 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #e03997 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #e03997 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #e03997 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.pink.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff8edf inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff8edf inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.pink.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff8edf inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff8edf inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a5673f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a5673f inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a5673f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a5673f inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.brown.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d67c1c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d67c1c inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.brown.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d67c1c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d67c1c inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #767676 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #767676 inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #767676 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #767676 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.grey.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dcddde inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dcddde inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.grey.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dcddde inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dcddde inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.black.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset}.ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.black.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset}}.ui.table .collapsing .image,.ui.table .collapsing .image img{max-width:none}.ui.structured.table{border-collapse:collapse}.ui.structured.table>thead>tr>th{border-left:none;border-right:none}.ui.structured.sortable.table>thead>tr>th{border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(34,36,38,.15)}.ui.structured.basic.table>tbody>tr>th,.ui.structured.basic.table>tfoot>tr>th,.ui.structured.basic.table>thead>tr>th,.ui.structured.basic.table>tr>th{border-left:none;border-right:none}.ui.structured.celled.table>tbody>tr>td,.ui.structured.celled.table>tbody>tr>th,.ui.structured.celled.table>tfoot>tr>td,.ui.structured.celled.table>tfoot>tr>th,.ui.structured.celled.table>thead>tr>th,.ui.structured.celled.table>tr>td,.ui.structured.celled.table>tr>th{border-left:1px solid rgba(34,36,38,.1);border-right:1px solid rgba(34,36,38,.1)}.ui.definition.table>thead:not(.full-width)>tr>th:first-child{pointer-events:none;background:#fff;font-weight:400;color:rgba(0,0,0,.4);-webkit-box-shadow:-.1em -.2em 0 .1em #fff;box-shadow:-.1em -.2em 0 .1em #fff;-moz-transform:scale(1)}.ui.definition.table>tfoot:not(.full-width)>tr>th:first-child{pointer-events:none;background:#fff;font-weight:400;color:rgba(0,0,0,.4);-webkit-box-shadow:-.1em .2em 0 .1em #fff;box-shadow:-.1em .2em 0 .1em #fff;-moz-transform:scale(1)}.ui.definition.table tr td.definition,.ui.definition.table>tbody>tr>td:first-child:not(.ignored),.ui.definition.table>tfoot>tr>td:first-child:not(.ignored),.ui.definition.table>tr>td:first-child:not(.ignored){background:rgba(0,0,0,.03);font-weight:700;color:rgba(0,0,0,.95);text-transform:'';-webkit-box-shadow:'';box-shadow:'';text-align:'';font-size:1em;padding-left:'';padding-right:''}.ui.definition.table>thead:not(.full-width)>tr>th:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.definition.table>tfoot:not(.full-width)>tr>td:nth-child(2),.ui.definition.table>tfoot:not(.full-width)>tr>th:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.definition.table>tbody>tr>td:nth-child(2),.ui.definition.table>tr>td:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.ui.table td.positive,.ui.ui.ui.ui.table tr.positive{-webkit-box-shadow:0 0 0 #a3c293 inset;box-shadow:0 0 0 #a3c293 inset;background:#fcfff5;color:#2c662d}.ui.ui.table td.negative,.ui.ui.ui.ui.table tr.negative{-webkit-box-shadow:0 0 0 #e0b4b4 inset;box-shadow:0 0 0 #e0b4b4 inset;background:#fff6f6;color:#9f3a38}.ui.ui.table td.error,.ui.ui.ui.ui.table tr.error{-webkit-box-shadow:0 0 0 #e0b4b4 inset;box-shadow:0 0 0 #e0b4b4 inset;background:#fff6f6;color:#9f3a38}.ui.ui.table td.warning,.ui.ui.ui.ui.table tr.warning{-webkit-box-shadow:0 0 0 #c9ba9b inset;box-shadow:0 0 0 #c9ba9b inset;background:#fffaf3;color:#573a08}.ui.ui.table td.active,.ui.ui.ui.ui.table tr.active{-webkit-box-shadow:0 0 0 rgba(0,0,0,.87) inset;box-shadow:0 0 0 rgba(0,0,0,.87) inset;background:#e0e0e0;color:rgba(0,0,0,.87)}.ui.table tr td.disabled,.ui.table tr.disabled td,.ui.table tr.disabled:hover,.ui.table tr:hover td.disabled{pointer-events:none;color:rgba(40,40,40,.3)}@media only screen and (max-width:991.98px){.ui[class*="tablet stackable"].table,.ui[class*="tablet stackable"].table>tbody,.ui[class*="tablet stackable"].table>tbody>tr,.ui[class*="tablet stackable"].table>tbody>tr>td:not(.rowspanned),.ui[class*="tablet stackable"].table>tbody>tr>th:not(.rowspanned),.ui[class*="tablet stackable"].table>tfoot,.ui[class*="tablet stackable"].table>tfoot>tr,.ui[class*="tablet stackable"].table>tfoot>tr>td:not(.rowspanned),.ui[class*="tablet stackable"].table>tfoot>tr>th:not(.rowspanned),.ui[class*="tablet stackable"].table>thead,.ui[class*="tablet stackable"].table>thead>tr,.ui[class*="tablet stackable"].table>thead>tr>th:not(.rowspanned),.ui[class*="tablet stackable"].table>tr,.ui[class*="tablet stackable"].table>tr>td:not(.rowspanned),.ui[class*="tablet stackable"].table>tr>th:not(.rowspanned){display:block!important;width:100%!important}.ui[class*="tablet stackable"].table{padding:0}.ui[class*="tablet stackable"].table>thead{display:block}.ui[class*="tablet stackable"].table>tfoot{display:block}.ui.ui.ui.ui[class*="tablet stackable"].table>tbody>tr,.ui.ui.ui.ui[class*="tablet stackable"].table>tfoot>tr,.ui.ui.ui.ui[class*="tablet stackable"].table>thead>tr,.ui.ui.ui.ui[class*="tablet stackable"].table>tr{padding-top:1em;padding-bottom:1em;-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset}.ui[class*="tablet stackable"].table>tbody>tr>td,.ui[class*="tablet stackable"].table>tbody>tr>th,.ui[class*="tablet stackable"].table>tfoot>tr>td,.ui[class*="tablet stackable"].table>tfoot>tr>th,.ui[class*="tablet stackable"].table>thead>tr>th,.ui[class*="tablet stackable"].table>tr>td,.ui[class*="tablet stackable"].table>tr>th{background:0 0;border:none!important;padding:.25em .75em;-webkit-box-shadow:none;box-shadow:none}.ui.definition[class*="tablet stackable"].table>thead>tr>th:first-child{-webkit-box-shadow:none!important;box-shadow:none!important}}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.primary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.primary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.secondary.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.secondary.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #db2828 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #db2828 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #db2828 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #db2828 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.red.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff695e inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff695e inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.red.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff695e inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff695e inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #f2711c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #f2711c inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #f2711c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #f2711c inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.orange.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff851b inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff851b inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.orange.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff851b inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff851b inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #fbbd08 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #fbbd08 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #fbbd08 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #fbbd08 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.yellow.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ffe21f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ffe21f inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.yellow.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ffe21f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ffe21f inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #b5cc18 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #b5cc18 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #b5cc18 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #b5cc18 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.olive.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d9e778 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d9e778 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.olive.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d9e778 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d9e778 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #21ba45 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #21ba45 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #21ba45 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #21ba45 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.green.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2ecc40 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2ecc40 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.green.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2ecc40 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2ecc40 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #00b5ad inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #00b5ad inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #00b5ad inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #00b5ad inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.teal.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6dffff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6dffff inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.teal.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6dffff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6dffff inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #2185d0 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.blue.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.blue.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #54c8ff inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6435c9 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #6435c9 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6435c9 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #6435c9 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.violet.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a291fb inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a291fb inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.violet.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a291fb inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a291fb inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a333c8 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a333c8 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a333c8 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a333c8 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.purple.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dc73ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dc73ff inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.purple.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dc73ff inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dc73ff inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #e03997 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #e03997 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #e03997 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #e03997 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.pink.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff8edf inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #ff8edf inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.pink.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff8edf inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #ff8edf inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a5673f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #a5673f inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a5673f inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #a5673f inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.brown.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d67c1c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #d67c1c inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.brown.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d67c1c inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #d67c1c inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #767676 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #767676 inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #767676 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #767676 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.grey.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dcddde inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #dcddde inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.grey.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dcddde inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #dcddde inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #1b1c1d inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.black.left{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,.2em 0 0 0 #545454 inset}.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.black.right{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset,-.2em 0 0 0 #545454 inset}.ui.table [class*="left aligned"],.ui.table[class*="left aligned"]{text-align:left}.ui.table [class*="center aligned"],.ui.table[class*="center aligned"]{text-align:center}.ui.table [class*="right aligned"],.ui.table[class*="right aligned"]{text-align:right}.ui.table [class*="top aligned"],.ui.table[class*="top aligned"]{vertical-align:top}.ui.table [class*="middle aligned"],.ui.table[class*="middle aligned"]{vertical-align:middle}.ui.table [class*="bottom aligned"],.ui.table[class*="bottom aligned"]{vertical-align:bottom}.ui.table td.collapsing,.ui.table th.collapsing{width:1px;white-space:nowrap}.ui.fixed.table{table-layout:fixed}.ui.fixed.table td,.ui.fixed.table th{overflow:hidden;text-overflow:ellipsis}.ui.table tbody tr td.selectable:hover,.ui.ui.selectable.table>tbody>tr:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.table tbody tr td.selectable:hover,.ui.ui.selectable.inverted.table>tbody>tr:hover{background:rgba(255,255,255,.08);color:#fff}.ui.table tbody tr td.selectable{padding:0}.ui.table tbody tr td.selectable>a:not(.ui){display:block;color:inherit;padding:.8125em .8125em}.ui.selectable.table>tbody>tr,.ui.selectable.table>tr,.ui.table>tbody>tr>td.selectable,.ui.table>tr>td.selectable{cursor:pointer}.ui.selectable.table tr:hover td.error,.ui.table tr td.selectable.error:hover,.ui.ui.selectable.table tr.error:hover{background:#ffe7e7;color:#943634}.ui.selectable.table tr:hover td.warning,.ui.table tr td.selectable.warning:hover,.ui.ui.selectable.table tr.warning:hover{background:#fff4e4;color:#493107}.ui.selectable.table tr:hover td.active,.ui.table tr td.selectable.active:hover,.ui.ui.selectable.table tr.active:hover{background:#e0e0e0;color:rgba(0,0,0,.87)}.ui.selectable.table tr:hover td.positive,.ui.table tr td.selectable.positive:hover,.ui.ui.selectable.table tr.positive:hover{background:#f7ffe6;color:#275b28}.ui.selectable.table tr:hover td.negative,.ui.table tr td.selectable.negative:hover,.ui.ui.selectable.table tr.negative:hover{background:#ffe7e7;color:#943634}.ui.attached.table{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached+.ui.attached.table:not(.top){border-top:none}.ui[class*="top attached"].table{bottom:0;margin-bottom:0;top:0;margin-top:1em;border-radius:.25rem .25rem 0 0}.ui.table[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].table{bottom:0;margin-top:0;top:0;margin-bottom:1em;-webkit-box-shadow:none,none;box-shadow:none,none;border-radius:0 0 .25rem .25rem}.ui[class*="bottom attached"].table:last-child{margin-bottom:0}.ui.striped.table>tbody>tr:nth-child(2n),.ui.striped.table>tr:nth-child(2n){background-color:rgba(0,0,50,.02)}.ui.inverted.striped.table>tbody>tr:nth-child(2n),.ui.inverted.striped.table>tr:nth-child(2n){background-color:rgba(255,255,255,.05)}.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover{background:#efefef;color:rgba(0,0,0,.95)}.ui.table [class*="single line"],.ui.table[class*="single line"]{white-space:nowrap}.ui.primary.table{border-top:.2em solid #2185d0}.ui.inverted.primary.table{background-color:#2185d0;color:#fff}.ui.ui.table td.primary:not(.marked),.ui.ui.ui.ui.table tr.primary:not(.marked){background:#ddf4ff;color:rgba(255,255,255,.9)}.ui.selectable.table tr:hover td.primary:not(.marked),.ui.table tr td.selectable.primary:not(.marked):hover,.ui.ui.selectable.table tr.primary:not(.marked):hover{background:#d3f1ff;color:rgba(255,255,255,.9)}.ui.table td.marked.primary.left,.ui.table tr.marked.primary.left{-webkit-box-shadow:.2em 0 0 0 #2185d0 inset;box-shadow:.2em 0 0 0 #2185d0 inset}.ui.table td.marked.primary.right,.ui.table tr.marked.primary.right{-webkit-box-shadow:-.2em 0 0 0 #2185d0 inset;box-shadow:-.2em 0 0 0 #2185d0 inset}.ui.inverted.table td.marked.primary.left,.ui.inverted.table tr.marked.primary.left{-webkit-box-shadow:.2em 0 0 0 #54c8ff inset;box-shadow:.2em 0 0 0 #54c8ff inset}.ui.inverted.table td.marked.primary.right,.ui.inverted.table tr.marked.primary.right{-webkit-box-shadow:-.2em 0 0 0 #54c8ff inset;box-shadow:-.2em 0 0 0 #54c8ff inset}.ui.secondary.table{border-top:.2em solid #1b1c1d}.ui.inverted.secondary.table{background-color:#1b1c1d;color:#fff}.ui.ui.table td.secondary:not(.marked),.ui.ui.ui.ui.table tr.secondary:not(.marked){background:#ddd;color:rgba(255,255,255,.9)}.ui.selectable.table tr:hover td.secondary:not(.marked),.ui.table tr td.selectable.secondary:not(.marked):hover,.ui.ui.selectable.table tr.secondary:not(.marked):hover{background:#e2e2e2;color:rgba(255,255,255,.9)}.ui.table td.marked.secondary.left,.ui.table tr.marked.secondary.left{-webkit-box-shadow:.2em 0 0 0 #1b1c1d inset;box-shadow:.2em 0 0 0 #1b1c1d inset}.ui.table td.marked.secondary.right,.ui.table tr.marked.secondary.right{-webkit-box-shadow:-.2em 0 0 0 #1b1c1d inset;box-shadow:-.2em 0 0 0 #1b1c1d inset}.ui.inverted.table td.marked.secondary.left,.ui.inverted.table tr.marked.secondary.left{-webkit-box-shadow:.2em 0 0 0 #545454 inset;box-shadow:.2em 0 0 0 #545454 inset}.ui.inverted.table td.marked.secondary.right,.ui.inverted.table tr.marked.secondary.right{-webkit-box-shadow:-.2em 0 0 0 #545454 inset;box-shadow:-.2em 0 0 0 #545454 inset}.ui.red.table{border-top:.2em solid #db2828}.ui.inverted.red.table{background-color:#db2828;color:#fff}.ui.ui.table td.red:not(.marked),.ui.ui.ui.ui.table tr.red:not(.marked){background:#ffe1df;color:#db2828}.ui.selectable.table tr:hover td.red:not(.marked),.ui.table tr td.selectable.red:not(.marked):hover,.ui.ui.selectable.table tr.red:not(.marked):hover{background:#ffd7d5;color:#db2828}.ui.table td.marked.red.left,.ui.table tr.marked.red.left{-webkit-box-shadow:.2em 0 0 0 #db2828 inset;box-shadow:.2em 0 0 0 #db2828 inset}.ui.table td.marked.red.right,.ui.table tr.marked.red.right{-webkit-box-shadow:-.2em 0 0 0 #db2828 inset;box-shadow:-.2em 0 0 0 #db2828 inset}.ui.inverted.table td.marked.red.left,.ui.inverted.table tr.marked.red.left{-webkit-box-shadow:.2em 0 0 0 #ff695e inset;box-shadow:.2em 0 0 0 #ff695e inset}.ui.inverted.table td.marked.red.right,.ui.inverted.table tr.marked.red.right{-webkit-box-shadow:-.2em 0 0 0 #ff695e inset;box-shadow:-.2em 0 0 0 #ff695e inset}.ui.orange.table{border-top:.2em solid #f2711c}.ui.inverted.orange.table{background-color:#f2711c;color:#fff}.ui.ui.table td.orange:not(.marked),.ui.ui.ui.ui.table tr.orange:not(.marked){background:#ffe7d1;color:#f2711c}.ui.selectable.table tr:hover td.orange:not(.marked),.ui.table tr td.selectable.orange:not(.marked):hover,.ui.ui.selectable.table tr.orange:not(.marked):hover{background:#fae1cc;color:#f2711c}.ui.table td.marked.orange.left,.ui.table tr.marked.orange.left{-webkit-box-shadow:.2em 0 0 0 #f2711c inset;box-shadow:.2em 0 0 0 #f2711c inset}.ui.table td.marked.orange.right,.ui.table tr.marked.orange.right{-webkit-box-shadow:-.2em 0 0 0 #f2711c inset;box-shadow:-.2em 0 0 0 #f2711c inset}.ui.inverted.table td.marked.orange.left,.ui.inverted.table tr.marked.orange.left{-webkit-box-shadow:.2em 0 0 0 #ff851b inset;box-shadow:.2em 0 0 0 #ff851b inset}.ui.inverted.table td.marked.orange.right,.ui.inverted.table tr.marked.orange.right{-webkit-box-shadow:-.2em 0 0 0 #ff851b inset;box-shadow:-.2em 0 0 0 #ff851b inset}.ui.yellow.table{border-top:.2em solid #fbbd08}.ui.inverted.yellow.table{background-color:#fbbd08;color:#fff}.ui.ui.table td.yellow:not(.marked),.ui.ui.ui.ui.table tr.yellow:not(.marked){background:#fff9d2;color:#b58105}.ui.selectable.table tr:hover td.yellow:not(.marked),.ui.table tr td.selectable.yellow:not(.marked):hover,.ui.ui.selectable.table tr.yellow:not(.marked):hover{background:#fbf5cc;color:#b58105}.ui.table td.marked.yellow.left,.ui.table tr.marked.yellow.left{-webkit-box-shadow:.2em 0 0 0 #fbbd08 inset;box-shadow:.2em 0 0 0 #fbbd08 inset}.ui.table td.marked.yellow.right,.ui.table tr.marked.yellow.right{-webkit-box-shadow:-.2em 0 0 0 #fbbd08 inset;box-shadow:-.2em 0 0 0 #fbbd08 inset}.ui.inverted.table td.marked.yellow.left,.ui.inverted.table tr.marked.yellow.left{-webkit-box-shadow:.2em 0 0 0 #ffe21f inset;box-shadow:.2em 0 0 0 #ffe21f inset}.ui.inverted.table td.marked.yellow.right,.ui.inverted.table tr.marked.yellow.right{-webkit-box-shadow:-.2em 0 0 0 #ffe21f inset;box-shadow:-.2em 0 0 0 #ffe21f inset}.ui.olive.table{border-top:.2em solid #b5cc18}.ui.inverted.olive.table{background-color:#b5cc18;color:#fff}.ui.ui.table td.olive:not(.marked),.ui.ui.ui.ui.table tr.olive:not(.marked){background:#f7fae4;color:#8abc1e}.ui.selectable.table tr:hover td.olive:not(.marked),.ui.table tr td.selectable.olive:not(.marked):hover,.ui.ui.selectable.table tr.olive:not(.marked):hover{background:#f6fada;color:#8abc1e}.ui.table td.marked.olive.left,.ui.table tr.marked.olive.left{-webkit-box-shadow:.2em 0 0 0 #b5cc18 inset;box-shadow:.2em 0 0 0 #b5cc18 inset}.ui.table td.marked.olive.right,.ui.table tr.marked.olive.right{-webkit-box-shadow:-.2em 0 0 0 #b5cc18 inset;box-shadow:-.2em 0 0 0 #b5cc18 inset}.ui.inverted.table td.marked.olive.left,.ui.inverted.table tr.marked.olive.left{-webkit-box-shadow:.2em 0 0 0 #d9e778 inset;box-shadow:.2em 0 0 0 #d9e778 inset}.ui.inverted.table td.marked.olive.right,.ui.inverted.table tr.marked.olive.right{-webkit-box-shadow:-.2em 0 0 0 #d9e778 inset;box-shadow:-.2em 0 0 0 #d9e778 inset}.ui.green.table{border-top:.2em solid #21ba45}.ui.inverted.green.table{background-color:#21ba45;color:#fff}.ui.ui.table td.green:not(.marked),.ui.ui.ui.ui.table tr.green:not(.marked){background:#d5f5d9;color:#1ebc30}.ui.selectable.table tr:hover td.green:not(.marked),.ui.table tr td.selectable.green:not(.marked):hover,.ui.ui.selectable.table tr.green:not(.marked):hover{background:#d2eed5;color:#1ebc30}.ui.table td.marked.green.left,.ui.table tr.marked.green.left{-webkit-box-shadow:.2em 0 0 0 #21ba45 inset;box-shadow:.2em 0 0 0 #21ba45 inset}.ui.table td.marked.green.right,.ui.table tr.marked.green.right{-webkit-box-shadow:-.2em 0 0 0 #21ba45 inset;box-shadow:-.2em 0 0 0 #21ba45 inset}.ui.inverted.table td.marked.green.left,.ui.inverted.table tr.marked.green.left{-webkit-box-shadow:.2em 0 0 0 #2ecc40 inset;box-shadow:.2em 0 0 0 #2ecc40 inset}.ui.inverted.table td.marked.green.right,.ui.inverted.table tr.marked.green.right{-webkit-box-shadow:-.2em 0 0 0 #2ecc40 inset;box-shadow:-.2em 0 0 0 #2ecc40 inset}.ui.teal.table{border-top:.2em solid #00b5ad}.ui.inverted.teal.table{background-color:#00b5ad;color:#fff}.ui.ui.table td.teal:not(.marked),.ui.ui.ui.ui.table tr.teal:not(.marked){background:#e2ffff;color:#10a3a3}.ui.selectable.table tr:hover td.teal:not(.marked),.ui.table tr td.selectable.teal:not(.marked):hover,.ui.ui.selectable.table tr.teal:not(.marked):hover{background:#d8ffff;color:#10a3a3}.ui.table td.marked.teal.left,.ui.table tr.marked.teal.left{-webkit-box-shadow:.2em 0 0 0 #00b5ad inset;box-shadow:.2em 0 0 0 #00b5ad inset}.ui.table td.marked.teal.right,.ui.table tr.marked.teal.right{-webkit-box-shadow:-.2em 0 0 0 #00b5ad inset;box-shadow:-.2em 0 0 0 #00b5ad inset}.ui.inverted.table td.marked.teal.left,.ui.inverted.table tr.marked.teal.left{-webkit-box-shadow:.2em 0 0 0 #6dffff inset;box-shadow:.2em 0 0 0 #6dffff inset}.ui.inverted.table td.marked.teal.right,.ui.inverted.table tr.marked.teal.right{-webkit-box-shadow:-.2em 0 0 0 #6dffff inset;box-shadow:-.2em 0 0 0 #6dffff inset}.ui.blue.table{border-top:.2em solid #2185d0}.ui.inverted.blue.table{background-color:#2185d0;color:#fff}.ui.ui.table td.blue:not(.marked),.ui.ui.ui.ui.table tr.blue:not(.marked){background:#ddf4ff;color:#2185d0}.ui.selectable.table tr:hover td.blue:not(.marked),.ui.table tr td.selectable.blue:not(.marked):hover,.ui.ui.selectable.table tr.blue:not(.marked):hover{background:#d3f1ff;color:#2185d0}.ui.table td.marked.blue.left,.ui.table tr.marked.blue.left{-webkit-box-shadow:.2em 0 0 0 #2185d0 inset;box-shadow:.2em 0 0 0 #2185d0 inset}.ui.table td.marked.blue.right,.ui.table tr.marked.blue.right{-webkit-box-shadow:-.2em 0 0 0 #2185d0 inset;box-shadow:-.2em 0 0 0 #2185d0 inset}.ui.inverted.table td.marked.blue.left,.ui.inverted.table tr.marked.blue.left{-webkit-box-shadow:.2em 0 0 0 #54c8ff inset;box-shadow:.2em 0 0 0 #54c8ff inset}.ui.inverted.table td.marked.blue.right,.ui.inverted.table tr.marked.blue.right{-webkit-box-shadow:-.2em 0 0 0 #54c8ff inset;box-shadow:-.2em 0 0 0 #54c8ff inset}.ui.violet.table{border-top:.2em solid #6435c9}.ui.inverted.violet.table{background-color:#6435c9;color:#fff}.ui.ui.table td.violet:not(.marked),.ui.ui.ui.ui.table tr.violet:not(.marked){background:#ece9fe;color:#6435c9}.ui.selectable.table tr:hover td.violet:not(.marked),.ui.table tr td.selectable.violet:not(.marked):hover,.ui.ui.selectable.table tr.violet:not(.marked):hover{background:#e3deff;color:#6435c9}.ui.table td.marked.violet.left,.ui.table tr.marked.violet.left{-webkit-box-shadow:.2em 0 0 0 #6435c9 inset;box-shadow:.2em 0 0 0 #6435c9 inset}.ui.table td.marked.violet.right,.ui.table tr.marked.violet.right{-webkit-box-shadow:-.2em 0 0 0 #6435c9 inset;box-shadow:-.2em 0 0 0 #6435c9 inset}.ui.inverted.table td.marked.violet.left,.ui.inverted.table tr.marked.violet.left{-webkit-box-shadow:.2em 0 0 0 #a291fb inset;box-shadow:.2em 0 0 0 #a291fb inset}.ui.inverted.table td.marked.violet.right,.ui.inverted.table tr.marked.violet.right{-webkit-box-shadow:-.2em 0 0 0 #a291fb inset;box-shadow:-.2em 0 0 0 #a291fb inset}.ui.purple.table{border-top:.2em solid #a333c8}.ui.inverted.purple.table{background-color:#a333c8;color:#fff}.ui.ui.table td.purple:not(.marked),.ui.ui.ui.ui.table tr.purple:not(.marked){background:#f8e3ff;color:#a333c8}.ui.selectable.table tr:hover td.purple:not(.marked),.ui.table tr td.selectable.purple:not(.marked):hover,.ui.ui.selectable.table tr.purple:not(.marked):hover{background:#f5d9ff;color:#a333c8}.ui.table td.marked.purple.left,.ui.table tr.marked.purple.left{-webkit-box-shadow:.2em 0 0 0 #a333c8 inset;box-shadow:.2em 0 0 0 #a333c8 inset}.ui.table td.marked.purple.right,.ui.table tr.marked.purple.right{-webkit-box-shadow:-.2em 0 0 0 #a333c8 inset;box-shadow:-.2em 0 0 0 #a333c8 inset}.ui.inverted.table td.marked.purple.left,.ui.inverted.table tr.marked.purple.left{-webkit-box-shadow:.2em 0 0 0 #dc73ff inset;box-shadow:.2em 0 0 0 #dc73ff inset}.ui.inverted.table td.marked.purple.right,.ui.inverted.table tr.marked.purple.right{-webkit-box-shadow:-.2em 0 0 0 #dc73ff inset;box-shadow:-.2em 0 0 0 #dc73ff inset}.ui.pink.table{border-top:.2em solid #e03997}.ui.inverted.pink.table{background-color:#e03997;color:#fff}.ui.ui.table td.pink:not(.marked),.ui.ui.ui.ui.table tr.pink:not(.marked){background:#ffe8f9;color:#e03997}.ui.selectable.table tr:hover td.pink:not(.marked),.ui.table tr td.selectable.pink:not(.marked):hover,.ui.ui.selectable.table tr.pink:not(.marked):hover{background:#ffdef6;color:#e03997}.ui.table td.marked.pink.left,.ui.table tr.marked.pink.left{-webkit-box-shadow:.2em 0 0 0 #e03997 inset;box-shadow:.2em 0 0 0 #e03997 inset}.ui.table td.marked.pink.right,.ui.table tr.marked.pink.right{-webkit-box-shadow:-.2em 0 0 0 #e03997 inset;box-shadow:-.2em 0 0 0 #e03997 inset}.ui.inverted.table td.marked.pink.left,.ui.inverted.table tr.marked.pink.left{-webkit-box-shadow:.2em 0 0 0 #ff8edf inset;box-shadow:.2em 0 0 0 #ff8edf inset}.ui.inverted.table td.marked.pink.right,.ui.inverted.table tr.marked.pink.right{-webkit-box-shadow:-.2em 0 0 0 #ff8edf inset;box-shadow:-.2em 0 0 0 #ff8edf inset}.ui.brown.table{border-top:.2em solid #a5673f}.ui.inverted.brown.table{background-color:#a5673f;color:#fff}.ui.ui.table td.brown:not(.marked),.ui.ui.ui.ui.table tr.brown:not(.marked){background:#f7e5d2;color:#a5673f}.ui.selectable.table tr:hover td.brown:not(.marked),.ui.table tr td.selectable.brown:not(.marked):hover,.ui.ui.selectable.table tr.brown:not(.marked):hover{background:#efe0cf;color:#a5673f}.ui.table td.marked.brown.left,.ui.table tr.marked.brown.left{-webkit-box-shadow:.2em 0 0 0 #a5673f inset;box-shadow:.2em 0 0 0 #a5673f inset}.ui.table td.marked.brown.right,.ui.table tr.marked.brown.right{-webkit-box-shadow:-.2em 0 0 0 #a5673f inset;box-shadow:-.2em 0 0 0 #a5673f inset}.ui.inverted.table td.marked.brown.left,.ui.inverted.table tr.marked.brown.left{-webkit-box-shadow:.2em 0 0 0 #d67c1c inset;box-shadow:.2em 0 0 0 #d67c1c inset}.ui.inverted.table td.marked.brown.right,.ui.inverted.table tr.marked.brown.right{-webkit-box-shadow:-.2em 0 0 0 #d67c1c inset;box-shadow:-.2em 0 0 0 #d67c1c inset}.ui.grey.table{border-top:.2em solid #767676}.ui.inverted.grey.table{background-color:#767676;color:#fff}.ui.ui.table td.grey:not(.marked),.ui.ui.ui.ui.table tr.grey:not(.marked){background:#dcddde;color:#767676}.ui.selectable.table tr:hover td.grey:not(.marked),.ui.table tr td.selectable.grey:not(.marked):hover,.ui.ui.selectable.table tr.grey:not(.marked):hover{background:#c2c4c5;color:#767676}.ui.table td.marked.grey.left,.ui.table tr.marked.grey.left{-webkit-box-shadow:.2em 0 0 0 #767676 inset;box-shadow:.2em 0 0 0 #767676 inset}.ui.table td.marked.grey.right,.ui.table tr.marked.grey.right{-webkit-box-shadow:-.2em 0 0 0 #767676 inset;box-shadow:-.2em 0 0 0 #767676 inset}.ui.inverted.table td.marked.grey.left,.ui.inverted.table tr.marked.grey.left{-webkit-box-shadow:.2em 0 0 0 #dcddde inset;box-shadow:.2em 0 0 0 #dcddde inset}.ui.inverted.table td.marked.grey.right,.ui.inverted.table tr.marked.grey.right{-webkit-box-shadow:-.2em 0 0 0 #dcddde inset;box-shadow:-.2em 0 0 0 #dcddde inset}.ui.black.table{border-top:.2em solid #1b1c1d}.ui.inverted.black.table{background-color:#1b1c1d;color:#fff}.ui.ui.table td.black:not(.marked),.ui.ui.ui.ui.table tr.black:not(.marked){background:#545454;color:#fff}.ui.selectable.table tr:hover td.black:not(.marked),.ui.table tr td.selectable.black:not(.marked):hover,.ui.ui.selectable.table tr.black:not(.marked):hover{background:#000;color:#fff}.ui.table td.marked.black.left,.ui.table tr.marked.black.left{-webkit-box-shadow:.2em 0 0 0 #1b1c1d inset;box-shadow:.2em 0 0 0 #1b1c1d inset}.ui.table td.marked.black.right,.ui.table tr.marked.black.right{-webkit-box-shadow:-.2em 0 0 0 #1b1c1d inset;box-shadow:-.2em 0 0 0 #1b1c1d inset}.ui.inverted.table td.marked.black.left,.ui.inverted.table tr.marked.black.left{-webkit-box-shadow:.2em 0 0 0 #545454 inset;box-shadow:.2em 0 0 0 #545454 inset}.ui.inverted.table td.marked.black.right,.ui.inverted.table tr.marked.black.right{-webkit-box-shadow:-.2em 0 0 0 #545454 inset;box-shadow:-.2em 0 0 0 #545454 inset}.ui.one.column.table td{width:100%}.ui.two.column.table td{width:50%}.ui.three.column.table td{width:33.33333333%}.ui.four.column.table td{width:25%}.ui.five.column.table td{width:20%}.ui.six.column.table td{width:16.66666667%}.ui.seven.column.table td{width:14.28571429%}.ui.eight.column.table td{width:12.5%}.ui.nine.column.table td{width:11.11111111%}.ui.ten.column.table td{width:10%}.ui.eleven.column.table td{width:9.09090909%}.ui.twelve.column.table td{width:8.33333333%}.ui.thirteen.column.table td{width:7.69230769%}.ui.fourteen.column.table td{width:7.14285714%}.ui.fifteen.column.table td{width:6.66666667%}.ui.sixteen.column.table td{width:6.25%}.ui.table td.one.wide,.ui.table th.one.wide{width:6.25%}.ui.table td.two.wide,.ui.table th.two.wide{width:12.5%}.ui.table td.three.wide,.ui.table th.three.wide{width:18.75%}.ui.table td.four.wide,.ui.table th.four.wide{width:25%}.ui.table td.five.wide,.ui.table th.five.wide{width:31.25%}.ui.table td.six.wide,.ui.table th.six.wide{width:37.5%}.ui.table td.seven.wide,.ui.table th.seven.wide{width:43.75%}.ui.table td.eight.wide,.ui.table th.eight.wide{width:50%}.ui.table td.nine.wide,.ui.table th.nine.wide{width:56.25%}.ui.table td.ten.wide,.ui.table th.ten.wide{width:62.5%}.ui.table td.eleven.wide,.ui.table th.eleven.wide{width:68.75%}.ui.table td.twelve.wide,.ui.table th.twelve.wide{width:75%}.ui.table td.thirteen.wide,.ui.table th.thirteen.wide{width:81.25%}.ui.table td.fourteen.wide,.ui.table th.fourteen.wide{width:87.5%}.ui.table td.fifteen.wide,.ui.table th.fifteen.wide{width:93.75%}.ui.table td.sixteen.wide,.ui.table th.sixteen.wide{width:100%}.ui.sortable.table>thead>tr>th{cursor:pointer;white-space:nowrap;border-left:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87)}.ui.sortable.table>thead>tr>th:first-child{border-left:none}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.sortable.table>thead>tr>th:after{display:none;font-style:normal;font-weight:400;text-decoration:inherit;content:'';height:1em;width:auto;opacity:.8;margin:0 0 0 .5em;font-family:Icons}.ui.sortable.table thead th.ascending:after{content:'\f0d8'}.ui.sortable.table thead th.descending:after{content:'\f0d7'}.ui.sortable.table th.disabled:hover{cursor:auto;color:rgba(40,40,40,.3)}.ui.sortable.table>thead>tr>th:hover{color:rgba(0,0,0,.8)}.ui.sortable.table:not(.basic)>thead>tr>th:hover{background:rgba(0,0,0,.05)}.ui.sortable.table thead th.sorted{color:rgba(0,0,0,.95)}.ui.sortable.table:not(.basic) thead th.sorted{background:rgba(0,0,0,.05)}.ui.sortable.table thead th.sorted:after{display:inline-block}.ui.sortable.table thead th.sorted:hover{color:rgba(0,0,0,.95)}.ui.sortable.table:not(.basic) thead th.sorted:hover{background:rgba(0,0,0,.05)}.ui.inverted.sortable.table thead th.sorted{color:#fff}.ui.inverted.sortable.table:not(.basic) thead th.sorted{background:rgba(255,255,255,.15) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:rgba(255,255,255,.15) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:rgba(255,255,255,.15) linear-gradient(transparent,rgba(0,0,0,.05))}.ui.inverted.sortable.table>thead>tr>th:hover{color:#fff}.ui.inverted.sortable.table:not(.basic)>thead>tr>th:hover{background:rgba(255,255,255,.08) -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:rgba(255,255,255,.08) -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:rgba(255,255,255,.08) linear-gradient(transparent,rgba(0,0,0,.05))}.ui.inverted.sortable.table:not(.basic)>thead>tr>th{border-left-color:transparent;border-right-color:transparent}.ui.inverted.table{background:#333;color:rgba(255,255,255,.9);border:none}.ui.ui.inverted.table>tbody>tr>th,.ui.ui.inverted.table>tfoot>tr>td,.ui.ui.inverted.table>tfoot>tr>th,.ui.ui.inverted.table>thead>tr>th,.ui.ui.inverted.table>tr>th{background-color:rgba(0,0,0,.15);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}.ui.inverted.table>tbody>tr>td,.ui.inverted.table>tfoot>tr>td,.ui.inverted.table>tr>td{border-color:rgba(255,255,255,.1)}.ui.inverted.table tr td.disabled,.ui.inverted.table tr.disabled td,.ui.inverted.table tr.disabled:hover td,.ui.inverted.table tr:hover td.disabled{pointer-events:none;color:rgba(225,225,225,.3)}.ui.inverted.table tr td.disabled:not([class=disabled]),.ui.inverted.table tr.disabled td[class]:not(.disabled),.ui.inverted.table tr.disabled:not([class=disabled]) td,.ui.inverted.table tr:hover td.disabled:not([class=disabled]){color:rgba(40,40,40,.3)}.ui.inverted.definition.table>tfoot:not(.full-width)>tr>th:first-child,.ui.inverted.definition.table>thead:not(.full-width)>tr>th:first-child{background:#fff}.ui.inverted.definition.table>tbody>tr>td:first-child .ui.inverted.definition.table>tfoot>tr>td:first-child,.ui.inverted.definition.table>tr>td:first-child{background:rgba(255,255,255,.02);color:#fff}.ui.collapsing.table{width:auto}.ui.basic.table{background:0 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.table>tfoot,.ui.basic.table>thead{-webkit-box-shadow:none;box-shadow:none}.ui.basic.table>tbody>tr>th,.ui.basic.table>tfoot>tr>th,.ui.basic.table>thead>tr>th,.ui.basic.table>tr>th{background:0 0;border-left:none}.ui.basic.table>tbody>tr{border-bottom:1px solid rgba(0,0,0,.1)}.ui.basic.table>tbody>tr>td,.ui.basic.table>tfoot>tr>td,.ui.basic.table>tr>td{background:0 0}.ui.basic.striped.table>tbody>tr:nth-child(2n){background-color:rgba(0,0,0,.05)}.ui[class*="very basic"].table{border:none}.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>td,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>th,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tfoot>tr>th,.ui[class*="very basic"].table:not(.sortable):not(.striped)>thead>tr>th,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>td,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>th{padding:''}.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>td:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>th:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tfoot>tr>td:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tfoot>tr>th:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>thead>tr>th:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>td:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>th:first-child{padding-left:0}.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>td:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tbody>tr>th:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tfoot>tr>td:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tfoot>tr>th:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>thead>tr>th:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>td:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped)>tr>th:last-child{padding-right:0}.ui[class*="very basic"].table:not(.sortable):not(.striped)>thead>tr:first-child>th{padding-top:0}.ui.celled.table>tbody>tr>td,.ui.celled.table>tbody>tr>th,.ui.celled.table>tfoot>tr>td,.ui.celled.table>tfoot>tr>th,.ui.celled.table>thead>tr>th,.ui.celled.table>tr>td,.ui.celled.table>tr>th{border-left:1px solid rgba(34,36,38,.1)}.ui.inverted.celled.table>tbody>tr>td,.ui.inverted.celled.table>tr>td{border-left:1px solid rgba(255,255,255,.1)}.ui.celled.table>tbody>tr>td:first-child,.ui.celled.table>tbody>tr>th:first-child,.ui.celled.table>tfoot>tr>td:first-child,.ui.celled.table>tfoot>tr>th:first-child,.ui.celled.table>thead>tr>th:first-child,.ui.celled.table>tr>td:first-child,.ui.celled.table>tr>th:first-child{border-left:none}.ui.padded.table>tbody>tr>th,.ui.padded.table>tfoot>tr>th,.ui.padded.table>thead>tr>th,.ui.padded.table>tr>th{padding-left:1em;padding-right:1em}.ui.padded.table>tbody>tr>td,.ui.padded.table>tbody>tr>th,.ui.padded.table>tfoot>tr>td,.ui.padded.table>tfoot>tr>th,.ui.padded.table>thead>tr>th,.ui.padded.table>tr>td,.ui.padded.table>tr>th{padding:1em 1em}.ui[class*="very padded"].table>tbody>tr>th,.ui[class*="very padded"].table>tfoot>tr>th,.ui[class*="very padded"].table>thead>tr>th,.ui[class*="very padded"].table>tr>th{padding-left:1.5em;padding-right:1.5em}.ui[class*="very padded"].table>tbody>tr>td,.ui[class*="very padded"].table>tfoot>tr>td,.ui[class*="very padded"].table>tr>td{padding:1.5em 1.5em}.ui.compact.table>tbody>tr>th,.ui.compact.table>tfoot>tr>th,.ui.compact.table>thead>tr>th,.ui.compact.table>tr>th{padding-left:.7em;padding-right:.7em}.ui.compact.table>tbody>tr>td,.ui.compact.table>tfoot>tr>td,.ui.compact.table>tr>td{padding:.5em .7em}.ui[class*="very compact"].table>tbody>tr>th,.ui[class*="very compact"].table>tfoot>tr>th,.ui[class*="very compact"].table>thead>tr>th,.ui[class*="very compact"].table>tr>th{padding-left:.6em;padding-right:.6em}.ui[class*="very compact"].table>tbody>tr>td,.ui[class*="very compact"].table>tfoot>tr>td,.ui[class*="very compact"].table>tr>td{padding:.4em .6em}.ui.table{font-size:1em}.ui.mini.table{font-size:.8125rem}.ui.tiny.table{font-size:.875rem}.ui.small.table{font-size:.9em}.ui.large.table{font-size:1.1em}.ui.big.table{font-size:1.3125rem}.ui.huge.table{font-size:1.4375rem}.ui.massive.table{font-size:1.6875rem}
\ No newline at end of file
diff --git a/ui/dist/components/transition.css b/ui/dist/components/transition.css
index 2ed2cb73789..980b1b17244 100644
--- a/ui/dist/components/transition.css
+++ b/ui/dist/components/transition.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Transition
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Transition
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
diff --git a/ui/dist/components/transition.js b/ui/dist/components/transition.js
index e95f964b09f..45dfefee5a3 100644
--- a/ui/dist/components/transition.js
+++ b/ui/dist/components/transition.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Transition
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Transition
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -32,12 +36,6 @@ $.fn.transition = function() {
queryArguments = [].slice.call(arguments, 1),
methodInvoked = (typeof query === 'string'),
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
returnedValue
;
$allModules
@@ -54,9 +52,7 @@ $.fn.transition = function() {
className,
metadata,
animationEnd,
- animationName,
- namespace,
moduleNamespace,
eventNamespace,
module
@@ -219,6 +215,9 @@ $.fn.transition = function() {
},
complete: function (event) {
+ if(event && event.target === element) {
+ event.stopPropagation();
+ }
module.debug('Animation complete', settings.animation);
module.remove.completeCallback();
module.remove.failSafe();
@@ -245,21 +244,21 @@ $.fn.transition = function() {
visible: function() {
var
style = $module.attr('style'),
- userStyle = module.get.userStyle(),
+ userStyle = module.get.userStyle(style),
displayType = module.get.displayType(),
overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
- currentDisplay = $module.css('display'),
- emptyStyle = (style === undefined || style === '')
+ inlineDisplay = $module[0].style.display,
+ mustStayHidden = !displayType || (inlineDisplay === 'none' && settings.skipInlineHidden) || $module[0].tagName.match(/(script|link|style)/i)
;
- if(currentDisplay !== displayType) {
- module.verbose('Overriding default display to show element', displayType);
- $module
- .attr('style', overrideStyle)
- ;
- }
- else if(emptyStyle) {
- $module.removeAttr('style');
+ if (mustStayHidden){
+ module.remove.transition();
+ return false;
}
+ module.verbose('Overriding default display to show element', displayType);
+ $module
+ .attr('style', overrideStyle)
+ ;
+ return true;
},
hidden: function() {
var
@@ -301,34 +300,28 @@ $.fn.transition = function() {
var
style = $module.attr('style') || ''
;
- return $.isArray(style.match(/display.*?;/, ''));
+ return Array.isArray(style.match(/display.*?;/, ''));
}
},
set: {
animating: function(animation) {
- var
- animationClass,
- direction
- ;
// remove previous callbacks
module.remove.completeCallback();
// determine exact animation
- animation = animation || settings.animation;
- animationClass = module.get.animationClass(animation);
+ animation = animation || settings.animation;
+ var animationClass = module.get.animationClass(animation);
- // save animation class in cache to restore class names
+ // save animation class in cache to restore class names
module.save.animation(animationClass);
- // override display if necessary so animation appears visibly
- module.force.visible();
-
- module.remove.hidden();
- module.remove.direction();
-
- module.start.animation(animationClass);
+ if(module.force.visible()) {
+ module.remove.hidden();
+ module.remove.direction();
+ module.start.animation(animationClass);
+ }
},
duration: function(animationName, duration) {
duration = duration || settings.duration;
@@ -500,6 +493,7 @@ $.fn.transition = function() {
},
transition: function() {
$module
+ .removeClass(className.transition)
.removeClass(className.visible)
.removeClass(className.hidden)
;
@@ -621,8 +615,13 @@ $.fn.transition = function() {
return settings.displayType;
}
if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
+ var currentDisplay = $module.css('display');
+ if(currentDisplay === '' || currentDisplay === 'none'){
// create fake element to determine display state
- module.can.transition(true);
+ module.can.transition(true);
+ } else {
+ module.save.displayType(currentDisplay);
+ }
}
return $module.data(metadata.displayType);
},
@@ -779,21 +778,33 @@ $.fn.transition = function() {
element.blur(); // IE will trigger focus change if element is not blurred before hiding
module.remove.display();
module.remove.visible();
- module.set.hidden();
- module.force.hidden();
- settings.onHide.call(element);
- settings.onComplete.call(element);
- // module.repaint();
+ if($.isFunction(settings.onBeforeHide)){
+ settings.onBeforeHide.call(element,function(){
+ module.hideNow();
+ });
+ } else {
+ module.hideNow();
+ }
+
+ },
+
+ hideNow: function() {
+ module.set.hidden();
+ module.force.hidden();
+ settings.onHide.call(element);
+ settings.onComplete.call(element);
+ // module.repaint();
},
show: function(display) {
module.verbose('Showing element', display);
- module.remove.hidden();
- module.set.visible();
- module.force.visible();
- settings.onShow.call(element);
- settings.onComplete.call(element);
- // module.repaint();
+ if(module.force.visible()) {
+ module.remove.hidden();
+ module.set.visible();
+ settings.onShow.call(element);
+ settings.onComplete.call(element);
+ // module.repaint();
+ }
},
toggle: function() {
@@ -987,7 +998,7 @@ $.fn.transition = function() {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -1065,6 +1076,9 @@ $.fn.transition.settings = {
// new animations will occur after previous ones
queue : true,
+// whether initially inline hidden objects should be skipped for transition
+ skipInlineHidden: false,
+
metadata : {
displayType: 'display'
},
diff --git a/ui/dist/components/transition.min.css b/ui/dist/components/transition.min.css
index 3505540571f..c489028d2a5 100644
--- a/ui/dist/components/transition.min.css
+++ b/ui/dist/components/transition.min.css
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI 2.3.3 - Transition
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Transition
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
diff --git a/ui/dist/components/transition.min.js b/ui/dist/components/transition.min.js
index 5951cdd2dd4..2b52b0326a1 100644
--- a/ui/dist/components/transition.min.js
+++ b/ui/dist/components/transition.min.js
@@ -1 +1,11 @@
-!function(C,n,A,S){"use strict";n=void 0!==n&&n.Math==Math?n:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),C.fn.transition=function(){var u,r=C(this),p=r.selector||"",g=(new Date).getTime(),v=[],b=arguments,y=b[0],h=[].slice.call(arguments,1),w="string"==typeof y;n.requestAnimationFrame||n.mozRequestAnimationFrame||n.webkitRequestAnimationFrame||n.msRequestAnimationFrame;return r.each(function(t){var d,s,e,c,i,a,n,o,m,f=C(this),l=this;(m={initialize:function(){d=m.get.settings.apply(l,b),c=d.className,e=d.error,i=d.metadata,o="."+d.namespace,n="module-"+d.namespace,s=f.data(n)||m,a=m.get.animationEndEvent(),w&&(w=m.invoke(y)),!1===w&&(m.verbose("Converted arguments into settings object",d),d.interval?m.delay(d.animate):m.animate(),m.instantiate())},instantiate:function(){m.verbose("Storing instance of module",m),s=m,f.data(n,s)},destroy:function(){m.verbose("Destroying previous module for",l),f.removeData(n)},refresh:function(){m.verbose("Refreshing display type on next animation"),delete m.displayType},forceRepaint:function(){m.verbose("Forcing element repaint");var n=f.parent(),e=f.next();0===e.length?f.detach().appendTo(n):f.detach().insertBefore(e)},repaint:function(){m.verbose("Repainting element");l.offsetWidth},delay:function(n){var e,i=m.get.animationDirection();i||(i=m.can.transition()?m.get.direction():"static"),n=n!==S?n:d.interval,e="auto"==d.reverse&&i==c.outward||1==d.reverse?(r.length-t)*d.interval:t*d.interval,m.debug("Delaying animation by",e),setTimeout(m.animate,e)},animate:function(n){if(d=n||d,!m.is.supported())return m.error(e.support),!1;if(m.debug("Preparing animation",d.animation),m.is.animating()){if(d.queue)return!d.allowRepeats&&m.has.direction()&&m.is.occurring()&&!0!==m.queuing?m.debug("Animation is currently occurring, preventing queueing same animation",d.animation):m.queue(d.animation),!1;if(!d.allowRepeats&&m.is.occurring())return m.debug("Animation is already occurring, will not execute repeated animation",d.animation),!1;m.debug("New animation started, completing previous early",d.animation),s.complete()}m.can.animate()?m.set.animating(d.animation):m.error(e.noAnimation,d.animation,l)},reset:function(){m.debug("Resetting animation to beginning conditions"),m.remove.animationCallbacks(),m.restore.conditions(),m.remove.animating()},queue:function(n){m.debug("Queueing animation of",n),m.queuing=!0,f.one(a+".queue"+o,function(){m.queuing=!1,m.repaint(),m.animate.apply(this,d)})},complete:function(n){m.debug("Animation complete",d.animation),m.remove.completeCallback(),m.remove.failSafe(),m.is.looping()||(m.is.outward()?(m.verbose("Animation is outward, hiding element"),m.restore.conditions(),m.hide()):m.is.inward()?(m.verbose("Animation is outward, showing element"),m.restore.conditions(),m.show()):(m.verbose("Static animation completed"),m.restore.conditions(),d.onComplete.call(l)))},force:{visible:function(){var n=f.attr("style"),e=m.get.userStyle(),i=m.get.displayType(),t=e+"display: "+i+" !important;",a=f.css("display"),o=n===S||""===n;a!==i?(m.verbose("Overriding default display to show element",i),f.attr("style",t)):o&&f.removeAttr("style")},hidden:function(){var n=f.attr("style"),e=f.css("display"),i=n===S||""===n;"none"===e||m.is.hidden()?i&&f.removeAttr("style"):(m.verbose("Overriding default display to hide element"),f.css("display","none"))}},has:{direction:function(n){var i=!1;return"string"==typeof(n=n||d.animation)&&(n=n.split(" "),C.each(n,function(n,e){e!==c.inward&&e!==c.outward||(i=!0)})),i},inlineDisplay:function(){var n=f.attr("style")||"";return C.isArray(n.match(/display.*?;/,""))}},set:{animating:function(n){var e;m.remove.completeCallback(),n=n||d.animation,e=m.get.animationClass(n),m.save.animation(e),m.force.visible(),m.remove.hidden(),m.remove.direction(),m.start.animation(e)},duration:function(n,e){((e="number"==typeof(e=e||d.duration)?e+"ms":e)||0===e)&&(m.verbose("Setting animation duration",e),f.css({"animation-duration":e}))},direction:function(n){(n=n||m.get.direction())==c.inward?m.set.inward():m.set.outward()},looping:function(){m.debug("Transition set to loop"),f.addClass(c.looping)},hidden:function(){f.addClass(c.transition).addClass(c.hidden)},inward:function(){m.debug("Setting direction to inward"),f.removeClass(c.outward).addClass(c.inward)},outward:function(){m.debug("Setting direction to outward"),f.removeClass(c.inward).addClass(c.outward)},visible:function(){f.addClass(c.transition).addClass(c.visible)}},start:{animation:function(n){n=n||m.get.animationClass(),m.debug("Starting tween",n),f.addClass(n).one(a+".complete"+o,m.complete),d.useFailSafe&&m.add.failSafe(),m.set.duration(d.duration),d.onStart.call(l)}},save:{animation:function(n){m.cache||(m.cache={}),m.cache.animation=n},displayType:function(n){"none"!==n&&f.data(i.displayType,n)},transitionExists:function(n,e){C.fn.transition.exists[n]=e,m.verbose("Saving existence of transition",n,e)}},restore:{conditions:function(){var n=m.get.currentAnimation();n&&(f.removeClass(n),m.verbose("Removing animation class",m.cache)),m.remove.duration()}},add:{failSafe:function(){var n=m.get.duration();m.timer=setTimeout(function(){f.triggerHandler(a)},n+d.failSafeDelay),m.verbose("Adding fail safe timer",m.timer)}},remove:{animating:function(){f.removeClass(c.animating)},animationCallbacks:function(){m.remove.queueCallback(),m.remove.completeCallback()},queueCallback:function(){f.off(".queue"+o)},completeCallback:function(){f.off(".complete"+o)},display:function(){f.css("display","")},direction:function(){f.removeClass(c.inward).removeClass(c.outward)},duration:function(){f.css("animation-duration","")},failSafe:function(){m.verbose("Removing fail safe timer",m.timer),m.timer&&clearTimeout(m.timer)},hidden:function(){f.removeClass(c.hidden)},visible:function(){f.removeClass(c.visible)},looping:function(){m.debug("Transitions are no longer looping"),m.is.looping()&&(m.reset(),f.removeClass(c.looping))},transition:function(){f.removeClass(c.visible).removeClass(c.hidden)}},get:{settings:function(n,e,i){return"object"==typeof n?C.extend(!0,{},C.fn.transition.settings,n):"function"==typeof i?C.extend({},C.fn.transition.settings,{animation:n,onComplete:i,duration:e}):"string"==typeof e||"number"==typeof e?C.extend({},C.fn.transition.settings,{animation:n,duration:e}):"object"==typeof e?C.extend({},C.fn.transition.settings,e,{animation:n}):"function"==typeof e?C.extend({},C.fn.transition.settings,{animation:n,onComplete:e}):C.extend({},C.fn.transition.settings,{animation:n})},animationClass:function(n){var e=n||d.animation,i=m.can.transition()&&!m.has.direction()?m.get.direction()+" ":"";return c.animating+" "+c.transition+" "+i+e},currentAnimation:function(){return!(!m.cache||m.cache.animation===S)&&m.cache.animation},currentDirection:function(){return m.is.inward()?c.inward:c.outward},direction:function(){return m.is.hidden()||!m.is.visible()?c.inward:c.outward},animationDirection:function(n){var i;return"string"==typeof(n=n||d.animation)&&(n=n.split(" "),C.each(n,function(n,e){e===c.inward?i=c.inward:e===c.outward&&(i=c.outward)})),i||!1},duration:function(n){return!1===(n=n||d.duration)&&(n=f.css("animation-duration")||0),"string"==typeof n?-1 ").addClass(e).insertAfter(f)).addClass(s).removeClass(c.inward).removeClass(c.outward).addClass(c.animating).addClass(c.transition).css("animationName"),o=t.addClass(c.inward).css("animationName"),u||(u=t.attr("class",e).removeAttr("style").removeClass(c.hidden).removeClass(c.visible).show().css("display"),m.verbose("Determining final display state",u),m.save.displayType(u)),t.remove(),a!=o)m.debug("Direction exists for animation",s),r=!0;else{if("none"==a||!a)return void m.debug("No animation defined in css",s);m.debug("Static animation found",s,u),r=!1}m.save.transitionExists(s,r)}return l!==S?l:r},animate:function(){return m.can.transition()!==S}},is:{animating:function(){return f.hasClass(c.animating)},inward:function(){return f.hasClass(c.inward)},outward:function(){return f.hasClass(c.outward)},looping:function(){return f.hasClass(c.looping)},occurring:function(n){return n="."+(n=n||d.animation).replace(" ","."),0 ").addClass(e).insertAfter(m)).addClass(s).removeClass(u.inward).removeClass(u.outward).addClass(u.animating).addClass(u.transition).css("animationName"),o=t.addClass(u.inward).css("animationName"),d||(d=t.attr("class",e).removeAttr("style").removeClass(u.hidden).removeClass(u.visible).show().css("display"),f.verbose("Determining final display state",d),f.save.displayType(d)),t.remove(),a!=o)f.debug("Direction exists for animation",s),r=!0;else{if("none"==a||!a)return void f.debug("No animation defined in css",s);f.debug("Static animation found",s,d),r=!1}f.save.transitionExists(s,r)}return l!==T?l:r},animate:function(){return f.can.transition()!==T}},is:{animating:function(){return m.hasClass(u.animating)},inward:function(){return m.hasClass(u.inward)},outward:function(){return m.hasClass(u.outward)},looping:function(){return m.hasClass(u.looping)},occurring:function(n){return n="."+(n=n||c.animation).replace(" ","."),0=e.length&&O.isFunction(o)&&o()};n--;)(s=A.createElement("img")).onload=c,s.onerror=c,s.src=e[n],i.push(s)},enableCallbacks:function(){r.debug("Allowing callbacks to occur"),v=!1},disableCallbacks:function(){r.debug("Disabling all callbacks temporarily"),v=!0},should:{trackChanges:function(){return R?(r.debug("One time query, no need to bind events"),!1):(r.debug("Callbacks being attached"),!0)}},setup:{cache:function(){r.cache={occurred:{},screen:{},element:{}}},image:function(){var e=f.data(c.src);e&&(r.verbose("Lazy loading image",e),i.once=!0,i.observeChanges=!1,i.onOnScreen=function(){r.debug("Image on screen",p),r.precache(e,function(){r.set.image(e,function(){++T==k&&i.onAllLoaded.call(this),i.onLoad.call(this)})})})},fixed:function(){r.debug("Setting up fixed"),i.once=!1,i.observeChanges=!1,i.initialCheck=!0,i.refreshOnLoad=!0,h.transition||(i.transition=!1),r.create.placeholder(),r.debug("Added placeholder",e),i.onTopPassed=function(){r.debug("Element passed, adding fixed position",f),r.show.placeholder(),r.set.fixed(),i.transition&&O.fn.transition!==w&&f.transition(i.transition,i.duration)},i.onTopPassedReverse=function(){r.debug("Element returned to position, removing fixed",f),r.hide.placeholder(),r.remove.fixed()}}},create:{placeholder:function(){r.verbose("Creating fixed position placeholder"),e=f.clone(!1).css("display","none").addClass(t.placeholder).insertAfter(f)}},show:{placeholder:function(){r.verbose("Showing placeholder"),e.css("display","block").css("visibility","hidden")}},hide:{placeholder:function(){r.verbose("Hiding placeholder"),e.css("display","none").css("visibility","")}},set:{fixed:function(){r.verbose("Setting element to fixed position"),f.addClass(t.fixed).css({position:"fixed",top:i.offset+"px",left:"auto",zIndex:i.zIndex}),i.onFixed.call(p)},image:function(e,o){if(f.attr("src",e),i.transition)if(O.fn.transition!==w){if(f.hasClass(t.visible))return void r.debug("Transition already occurred on this image, skipping animation");f.transition(i.transition,i.duration,o)}else f.fadeIn(i.duration,o);else f.show()}},is:{onScreen:function(){return r.get.elementCalculations().onScreen},offScreen:function(){return r.get.elementCalculations().offScreen},visible:function(){return!(!r.cache||!r.cache.element)&&!(0===r.cache.element.width&&0===r.cache.element.offset.top)},verticallyScrollableContext:function(){var e=b.get(0)!==z&&b.css("overflow-y");return"auto"==e||"scroll"==e},horizontallyScrollableContext:function(){var e=b.get(0)!==z&&b.css("overflow-x");return"auto"==e||"scroll"==e}},refresh:function(){r.debug("Refreshing constants (width/height)"),"fixed"==i.type&&r.resetFixed(),r.reset(),r.save.position(),i.checkOnRefresh&&r.checkVisibility(),i.onRefresh.call(p)},resetFixed:function(){r.remove.fixed(),r.remove.occurred()},reset:function(){r.verbose("Resetting all cached values"),O.isPlainObject(r.cache)&&(r.cache.screen={},r.cache.element={})},checkVisibility:function(e){r.verbose("Checking visibility of element",r.cache.element),!v&&r.is.visible()&&(r.save.scroll(e),r.save.calculations(),r.passed(),r.passingReverse(),r.topVisibleReverse(),r.bottomVisibleReverse(),r.topPassedReverse(),r.bottomPassedReverse(),r.onScreen(),r.offScreen(),r.passing(),r.topVisible(),r.bottomVisible(),r.topPassed(),r.bottomPassed(),i.onUpdate&&i.onUpdate.call(p,r.get.elementCalculations()))},passed:function(e,o){var n=r.get.elementCalculations();if(e&&o)i.onPassed[e]=o;else{if(e!==w)return r.get.pixelsPassed(e)>n.pixelsPassed;n.passing&&O.each(i.onPassed,function(e,o){n.bottomVisible||n.pixelsPassed>r.get.pixelsPassed(e)?r.execute(o,e):i.once||r.remove.occurred(o)})}},onScreen:function(e){var o=r.get.elementCalculations(),n=e||i.onOnScreen,t="onScreen";if(e&&(r.debug("Adding callback for onScreen",e),i.onOnScreen=e),o.onScreen?r.execute(n,t):i.once||r.remove.occurred(t),e!==w)return o.onOnScreen},offScreen:function(e){var o=r.get.elementCalculations(),n=e||i.onOffScreen,t="offScreen";if(e&&(r.debug("Adding callback for offScreen",e),i.onOffScreen=e),o.offScreen?r.execute(n,t):i.once||r.remove.occurred(t),e!==w)return o.onOffScreen},passing:function(e){var o=r.get.elementCalculations(),n=e||i.onPassing,t="passing";if(e&&(r.debug("Adding callback for passing",e),i.onPassing=e),o.passing?r.execute(n,t):i.once||r.remove.occurred(t),e!==w)return o.passing},topVisible:function(e){var o=r.get.elementCalculations(),n=e||i.onTopVisible,t="topVisible";if(e&&(r.debug("Adding callback for top visible",e),i.onTopVisible=e),o.topVisible?r.execute(n,t):i.once||r.remove.occurred(t),e===w)return o.topVisible},bottomVisible:function(e){var o=r.get.elementCalculations(),n=e||i.onBottomVisible,t="bottomVisible";if(e&&(r.debug("Adding callback for bottom visible",e),i.onBottomVisible=e),o.bottomVisible?r.execute(n,t):i.once||r.remove.occurred(t),e===w)return o.bottomVisible},topPassed:function(e){var o=r.get.elementCalculations(),n=e||i.onTopPassed,t="topPassed";if(e&&(r.debug("Adding callback for top passed",e),i.onTopPassed=e),o.topPassed?r.execute(n,t):i.once||r.remove.occurred(t),e===w)return o.topPassed},bottomPassed:function(e){var o=r.get.elementCalculations(),n=e||i.onBottomPassed,t="bottomPassed";if(e&&(r.debug("Adding callback for bottom passed",e),i.onBottomPassed=e),o.bottomPassed?r.execute(n,t):i.once||r.remove.occurred(t),e===w)return o.bottomPassed},passingReverse:function(e){var o=r.get.elementCalculations(),n=e||i.onPassingReverse,t="passingReverse";if(e&&(r.debug("Adding callback for passing reverse",e),i.onPassingReverse=e),o.passing?i.once||r.remove.occurred(t):r.get.occurred("passing")&&r.execute(n,t),e!==w)return!o.passing},topVisibleReverse:function(e){var o=r.get.elementCalculations(),n=e||i.onTopVisibleReverse,t="topVisibleReverse";if(e&&(r.debug("Adding callback for top visible reverse",e),i.onTopVisibleReverse=e),o.topVisible?i.once||r.remove.occurred(t):r.get.occurred("topVisible")&&r.execute(n,t),e===w)return!o.topVisible},bottomVisibleReverse:function(e){var o=r.get.elementCalculations(),n=e||i.onBottomVisibleReverse,t="bottomVisibleReverse";if(e&&(r.debug("Adding callback for bottom visible reverse",e),i.onBottomVisibleReverse=e),o.bottomVisible?i.once||r.remove.occurred(t):r.get.occurred("bottomVisible")&&r.execute(n,t),e===w)return!o.bottomVisible},topPassedReverse:function(e){var o=r.get.elementCalculations(),n=e||i.onTopPassedReverse,t="topPassedReverse";if(e&&(r.debug("Adding callback for top passed reverse",e),i.onTopPassedReverse=e),o.topPassed?i.once||r.remove.occurred(t):r.get.occurred("topPassed")&&r.execute(n,t),e===w)return!o.onTopPassed},bottomPassedReverse:function(e){var o=r.get.elementCalculations(),n=e||i.onBottomPassedReverse,t="bottomPassedReverse";if(e&&(r.debug("Adding callback for bottom passed reverse",e),i.onBottomPassedReverse=e),o.bottomPassed?i.once||r.remove.occurred(t):r.get.occurred("bottomPassed")&&r.execute(n,t),e===w)return!o.bottomPassed},execute:function(e,o){var n=r.get.elementCalculations(),t=r.get.screenCalculations();(e=e||!1)&&(i.continuous?(r.debug("Callback being called continuously",o,n),e.call(p,n,t)):r.get.occurred(o)||(r.debug("Conditions met",o,n),e.call(p,n,t))),r.save.occurred(o)},remove:{fixed:function(){r.debug("Removing fixed position"),f.removeClass(t.fixed).css({position:"",top:"",left:"",zIndex:""}),i.onUnfixed.call(p)},placeholder:function(){r.debug("Removing placeholder content"),e&&e.remove()},occurred:function(e){if(e){var o=r.cache.occurred;o[e]!==w&&!0===o[e]&&(r.debug("Callback can now be called again",e),r.cache.occurred[e]=!1)}else r.cache.occurred={}}},save:{calculations:function(){r.verbose("Saving all calculations necessary to determine positioning"),r.save.direction(),r.save.screenCalculations(),r.save.elementCalculations()},occurred:function(e){e&&(r.cache.occurred[e]!==w&&!0===r.cache.occurred[e]||(r.verbose("Saving callback occurred",e),r.cache.occurred[e]=!0))},scroll:function(e){e=e+i.offset||b.scrollTop()+i.offset,r.cache.scroll=e},direction:function(){var e,o=r.get.scroll(),n=r.get.lastScroll();return e=n=o.top,o.bottomPassed=e.top>=o.bottom,o.topVisible=e.bottom>=o.top&&!o.topPassed,o.bottomVisible=e.bottom>=o.bottom&&!o.bottomPassed,o.pixelsPassed=0,o.percentagePassed=0,o.onScreen=(o.topVisible||o.passing)&&!o.bottomPassed,o.passing=o.topPassed&&!o.bottomPassed,o.offScreen=!o.onScreen,o.passing&&(o.pixelsPassed=e.top-o.top,o.percentagePassed=(e.top-o.top)/o.height),r.cache.element=o,r.verbose("Updated element calculations",o),o},screenCalculations:function(){var e=r.get.scroll();return r.save.direction(),r.cache.screen.top=e,r.cache.screen.bottom=e+r.cache.screen.height,r.cache.screen},screenSize:function(){r.verbose("Saving window position"),r.cache.screen={height:b.height()}},position:function(){r.save.screenSize(),r.save.elementPosition()}},get:{pixelsPassed:function(e){var o=r.get.elementCalculations();return-1=e.length&&O.isFunction(o)&&o()};n--;)(s=A.createElement("img")).onload=c,s.onerror=c,s.src=e[n],i.push(s)},enableCallbacks:function(){v.debug("Allowing callbacks to occur"),p=!1},disableCallbacks:function(){v.debug("Disabling all callbacks temporarily"),p=!0},should:{trackChanges:function(){return R?(v.debug("One time query, no need to bind events"),!1):(v.debug("Callbacks being attached"),!0)}},setup:{cache:function(){v.cache={occurred:{},screen:{},element:{}}},image:function(){var e=u.data(c.src);e&&(v.verbose("Lazy loading image",e),i.once=!0,i.observeChanges=!1,i.onOnScreen=function(){v.debug("Image on screen",m),v.precache(e,function(){v.set.image(e,function(){++T==k&&i.onAllLoaded.call(this),i.onLoad.call(this)})})})},fixed:function(){v.debug("Setting up fixed"),i.once=!1,i.observeChanges=!1,i.initialCheck=!0,i.refreshOnLoad=!0,h.transition||(i.transition=!1),v.create.placeholder(),v.debug("Added placeholder",e),i.onTopPassed=function(){v.debug("Element passed, adding fixed position",u),v.show.placeholder(),v.set.fixed(),i.transition&&O.fn.transition!==w&&u.transition(i.transition,i.duration)},i.onTopPassedReverse=function(){v.debug("Element returned to position, removing fixed",u),v.hide.placeholder(),v.remove.fixed()}}},create:{placeholder:function(){v.verbose("Creating fixed position placeholder"),e=u.clone(!1).css("display","none").addClass(t.placeholder).insertAfter(u)}},show:{placeholder:function(){v.verbose("Showing placeholder"),e.css("display","block").css("visibility","hidden")}},hide:{placeholder:function(){v.verbose("Hiding placeholder"),e.css("display","none").css("visibility","")}},set:{fixed:function(){v.verbose("Setting element to fixed position"),u.addClass(t.fixed).css({position:"fixed",top:i.offset+"px",left:"auto",zIndex:i.zIndex}),i.onFixed.call(m)},image:function(e,o){if(u.attr("src",e),i.transition)if(O.fn.transition!==w){if(u.hasClass(t.visible))return void v.debug("Transition already occurred on this image, skipping animation");u.transition(i.transition,i.duration,o)}else u.fadeIn(i.duration,o);else u.show()}},is:{onScreen:function(){return v.get.elementCalculations().onScreen},offScreen:function(){return v.get.elementCalculations().offScreen},visible:function(){return!(!v.cache||!v.cache.element)&&!(0===v.cache.element.width&&0===v.cache.element.offset.top)},verticallyScrollableContext:function(){var e=f.get(0)!==z&&f.css("overflow-y");return"auto"==e||"scroll"==e},horizontallyScrollableContext:function(){var e=f.get(0)!==z&&f.css("overflow-x");return"auto"==e||"scroll"==e}},refresh:function(){v.debug("Refreshing constants (width/height)"),"fixed"==i.type&&v.resetFixed(),v.reset(),v.save.position(),i.checkOnRefresh&&v.checkVisibility(),i.onRefresh.call(m)},resetFixed:function(){v.remove.fixed(),v.remove.occurred()},reset:function(){v.verbose("Resetting all cached values"),O.isPlainObject(v.cache)&&(v.cache.screen={},v.cache.element={})},checkVisibility:function(e){v.verbose("Checking visibility of element",v.cache.element),!p&&v.is.visible()&&(v.save.scroll(e),v.save.calculations(),v.passed(),v.passingReverse(),v.topVisibleReverse(),v.bottomVisibleReverse(),v.topPassedReverse(),v.bottomPassedReverse(),v.onScreen(),v.offScreen(),v.passing(),v.topVisible(),v.bottomVisible(),v.topPassed(),v.bottomPassed(),i.onUpdate&&i.onUpdate.call(m,v.get.elementCalculations()))},passed:function(e,o){var n=v.get.elementCalculations();if(e&&o)i.onPassed[e]=o;else{if(e!==w)return v.get.pixelsPassed(e)>n.pixelsPassed;n.passing&&O.each(i.onPassed,function(e,o){n.bottomVisible||n.pixelsPassed>v.get.pixelsPassed(e)?v.execute(o,e):i.once||v.remove.occurred(o)})}},onScreen:function(e){var o=v.get.elementCalculations(),n=e||i.onOnScreen,t="onScreen";if(e&&(v.debug("Adding callback for onScreen",e),i.onOnScreen=e),o.onScreen?v.execute(n,t):i.once||v.remove.occurred(t),e!==w)return o.onOnScreen},offScreen:function(e){var o=v.get.elementCalculations(),n=e||i.onOffScreen,t="offScreen";if(e&&(v.debug("Adding callback for offScreen",e),i.onOffScreen=e),o.offScreen?v.execute(n,t):i.once||v.remove.occurred(t),e!==w)return o.onOffScreen},passing:function(e){var o=v.get.elementCalculations(),n=e||i.onPassing,t="passing";if(e&&(v.debug("Adding callback for passing",e),i.onPassing=e),o.passing?v.execute(n,t):i.once||v.remove.occurred(t),e!==w)return o.passing},topVisible:function(e){var o=v.get.elementCalculations(),n=e||i.onTopVisible,t="topVisible";if(e&&(v.debug("Adding callback for top visible",e),i.onTopVisible=e),o.topVisible?v.execute(n,t):i.once||v.remove.occurred(t),e===w)return o.topVisible},bottomVisible:function(e){var o=v.get.elementCalculations(),n=e||i.onBottomVisible,t="bottomVisible";if(e&&(v.debug("Adding callback for bottom visible",e),i.onBottomVisible=e),o.bottomVisible?v.execute(n,t):i.once||v.remove.occurred(t),e===w)return o.bottomVisible},topPassed:function(e){var o=v.get.elementCalculations(),n=e||i.onTopPassed,t="topPassed";if(e&&(v.debug("Adding callback for top passed",e),i.onTopPassed=e),o.topPassed?v.execute(n,t):i.once||v.remove.occurred(t),e===w)return o.topPassed},bottomPassed:function(e){var o=v.get.elementCalculations(),n=e||i.onBottomPassed,t="bottomPassed";if(e&&(v.debug("Adding callback for bottom passed",e),i.onBottomPassed=e),o.bottomPassed?v.execute(n,t):i.once||v.remove.occurred(t),e===w)return o.bottomPassed},passingReverse:function(e){var o=v.get.elementCalculations(),n=e||i.onPassingReverse,t="passingReverse";if(e&&(v.debug("Adding callback for passing reverse",e),i.onPassingReverse=e),o.passing?i.once||v.remove.occurred(t):v.get.occurred("passing")&&v.execute(n,t),e!==w)return!o.passing},topVisibleReverse:function(e){var o=v.get.elementCalculations(),n=e||i.onTopVisibleReverse,t="topVisibleReverse";if(e&&(v.debug("Adding callback for top visible reverse",e),i.onTopVisibleReverse=e),o.topVisible?i.once||v.remove.occurred(t):v.get.occurred("topVisible")&&v.execute(n,t),e===w)return!o.topVisible},bottomVisibleReverse:function(e){var o=v.get.elementCalculations(),n=e||i.onBottomVisibleReverse,t="bottomVisibleReverse";if(e&&(v.debug("Adding callback for bottom visible reverse",e),i.onBottomVisibleReverse=e),o.bottomVisible?i.once||v.remove.occurred(t):v.get.occurred("bottomVisible")&&v.execute(n,t),e===w)return!o.bottomVisible},topPassedReverse:function(e){var o=v.get.elementCalculations(),n=e||i.onTopPassedReverse,t="topPassedReverse";if(e&&(v.debug("Adding callback for top passed reverse",e),i.onTopPassedReverse=e),o.topPassed?i.once||v.remove.occurred(t):v.get.occurred("topPassed")&&v.execute(n,t),e===w)return!o.onTopPassed},bottomPassedReverse:function(e){var o=v.get.elementCalculations(),n=e||i.onBottomPassedReverse,t="bottomPassedReverse";if(e&&(v.debug("Adding callback for bottom passed reverse",e),i.onBottomPassedReverse=e),o.bottomPassed?i.once||v.remove.occurred(t):v.get.occurred("bottomPassed")&&v.execute(n,t),e===w)return!o.bottomPassed},execute:function(e,o){var n=v.get.elementCalculations(),t=v.get.screenCalculations();(e=e||!1)&&(i.continuous?(v.debug("Callback being called continuously",o,n),e.call(m,n,t)):v.get.occurred(o)||(v.debug("Conditions met",o,n),e.call(m,n,t))),v.save.occurred(o)},remove:{fixed:function(){v.debug("Removing fixed position"),u.removeClass(t.fixed).css({position:"",top:"",left:"",zIndex:""}),i.onUnfixed.call(m)},placeholder:function(){v.debug("Removing placeholder content"),e&&e.remove()},occurred:function(e){var o;e?(o=v.cache.occurred)[e]!==w&&!0===o[e]&&(v.debug("Callback can now be called again",e),v.cache.occurred[e]=!1):v.cache.occurred={}}},save:{calculations:function(){v.verbose("Saving all calculations necessary to determine positioning"),v.save.direction(),v.save.screenCalculations(),v.save.elementCalculations()},occurred:function(e){e&&(v.cache.occurred[e]!==w&&!0===v.cache.occurred[e]||(v.verbose("Saving callback occurred",e),v.cache.occurred[e]=!0))},scroll:function(e){e=e+i.offset||f.scrollTop()+i.offset,v.cache.scroll=e},direction:function(){var e=v.get.scroll(),o=v.get.lastScroll(),n=o=o.top,o.bottomPassed=e.top>=o.bottom,o.topVisible=e.bottom>=o.top&&!o.topPassed,o.bottomVisible=e.bottom>=o.bottom&&!o.bottomPassed,o.pixelsPassed=0,o.percentagePassed=0,o.onScreen=(o.topVisible||o.passing)&&!o.bottomPassed,o.passing=o.topPassed&&!o.bottomPassed,o.offScreen=!o.onScreen,o.passing&&(o.pixelsPassed=e.top-o.top,o.percentagePassed=(e.top-o.top)/o.height),v.cache.element=o,v.verbose("Updated element calculations",o),o},screenCalculations:function(){var e=v.get.scroll();return v.save.direction(),v.cache.screen.top=e,v.cache.screen.bottom=e+v.cache.screen.height,v.cache.screen},screenSize:function(){v.verbose("Saving window position"),v.cache.screen={height:f.height()}},position:function(){v.save.screenSize(),v.save.elementPosition()}},get:{pixelsPassed:function(e){var o=v.get.elementCalculations();return-1= 300) && httpMessage !== undefined && httpMessage !== '') {
module.error(error.statusMessage + httpMessage, ajaxSettings.url);
}
settings.onError.call(context, errorMessage, $module, xhr);
@@ -717,7 +724,7 @@ $.api = $.fn.api = function(parameters) {
var
runSettings
;
- runSettings = settings.beforeSend.call(context, settings);
+ runSettings = settings.beforeSend.call($module, settings);
if(runSettings) {
if(runSettings.success !== undefined) {
module.debug('Legacy success callback detected', runSettings);
@@ -990,7 +997,7 @@ $.api = $.fn.api = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -1097,6 +1104,9 @@ $.api.settings = {
response : false,
responseAsync : false,
+// whether onResponse should work with response value without force converting into an object
+ rawResponse : false,
+
// callbacks before request
beforeSend : function(settings) { return settings; },
beforeXHR : function(xhr) {},
diff --git a/ui/src/definitions/behaviors/form.js b/ui/src/definitions/behaviors/form.js
index 19d0945f2d9..cc76d6ec1a4 100644
--- a/ui/src/definitions/behaviors/form.js
+++ b/ui/src/definitions/behaviors/form.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Form Validation
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Form Validation
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -64,6 +68,10 @@ $.fn.form = function(parameters) {
moduleNamespace,
eventNamespace,
+ submitting = false,
+ dirty = false,
+ history = ['clean', 'clean'],
+
instance,
module
;
@@ -87,6 +95,9 @@ $.fn.form = function(parameters) {
module.verbose('Initializing form validation', $module, settings);
module.bindEvents();
module.set.defaults();
+ if (settings.autoCheckRequired) {
+ module.set.autoCheck();
+ }
module.instantiate();
}
},
@@ -121,19 +132,16 @@ $.fn.form = function(parameters) {
submit: function() {
module.verbose('Submitting form', $module);
- $module
- .submit()
- ;
+ submitting = true;
+ $module.submit();
},
attachEvents: function(selector, action) {
action = action || 'submit';
- $(selector)
- .on('click' + eventNamespace, function(event) {
- module[action]();
- event.preventDefault();
- })
- ;
+ $(selector).on('click' + eventNamespace, function(event) {
+ module[action]();
+ event.preventDefault();
+ });
},
bindEvents: function() {
@@ -146,92 +154,113 @@ $.fn.form = function(parameters) {
.on('click' + eventNamespace, selector.clear, module.clear)
;
if(settings.keyboardShortcuts) {
- $module
- .on('keydown' + eventNamespace, selector.field, module.event.field.keydown)
+ $module.on('keydown' + eventNamespace, selector.field, module.event.field.keydown);
+ }
+ $field.each(function(index, el) {
+ var
+ $input = $(el),
+ type = $input.prop('type'),
+ inputEvent = module.get.changeEvent(type, $input)
;
+ $input.on(inputEvent + eventNamespace, module.event.field.change);
+ });
+
+ // Dirty events
+ if (settings.preventLeaving) {
+ $(window).on('beforeunload' + eventNamespace, module.event.beforeUnload);
}
- $field
- .each(function() {
- var
- $input = $(this),
- type = $input.prop('type'),
- inputEvent = module.get.changeEvent(type, $input)
- ;
- $(this)
- .on(inputEvent + eventNamespace, module.event.field.change)
- ;
- })
- ;
+
+ $field.on('change click keyup keydown blur', function(e) {
+ $(this).triggerHandler(e.type + ".dirty");
+ });
+
+ $field.on('change.dirty click.dirty keyup.dirty keydown.dirty blur.dirty', module.determine.isDirty);
+
+ $module.on('dirty' + eventNamespace, function(e) {
+ settings.onDirty.call();
+ });
+
+ $module.on('clean' + eventNamespace, function(e) {
+ settings.onClean.call();
+ })
},
clear: function() {
- $field
- .each(function () {
- var
- $field = $(this),
- $element = $field.parent(),
- $fieldGroup = $field.closest($group),
- $prompt = $fieldGroup.find(selector.prompt),
- defaultValue = $field.data(metadata.defaultValue) || '',
- isCheckbox = $element.is(selector.uiCheckbox),
- isDropdown = $element.is(selector.uiDropdown),
- isErrored = $fieldGroup.hasClass(className.error)
- ;
- if(isErrored) {
- module.verbose('Resetting error on field', $fieldGroup);
- $fieldGroup.removeClass(className.error);
- $prompt.remove();
- }
- if(isDropdown) {
- module.verbose('Resetting dropdown value', $element, defaultValue);
- $element.dropdown('clear');
- }
- else if(isCheckbox) {
- $field.prop('checked', false);
- }
- else {
- module.verbose('Resetting field value', $field, defaultValue);
- $field.val('');
- }
- })
- ;
+ $field.each(function (index, el) {
+ var
+ $field = $(el),
+ $element = $field.parent(),
+ $fieldGroup = $field.closest($group),
+ $prompt = $fieldGroup.find(selector.prompt),
+ $calendar = $field.closest(selector.uiCalendar),
+ defaultValue = $field.data(metadata.defaultValue) || '',
+ isCheckbox = $element.is(selector.uiCheckbox),
+ isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
+ isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
+ isErrored = $fieldGroup.hasClass(className.error)
+ ;
+ if(isErrored) {
+ module.verbose('Resetting error on field', $fieldGroup);
+ $fieldGroup.removeClass(className.error);
+ $prompt.remove();
+ }
+ if(isDropdown) {
+ module.verbose('Resetting dropdown value', $element, defaultValue);
+ $element.dropdown('clear', true);
+ }
+ else if(isCheckbox) {
+ $field.prop('checked', false);
+ }
+ else if (isCalendar) {
+ $calendar.calendar('clear');
+ }
+ else {
+ module.verbose('Resetting field value', $field, defaultValue);
+ $field.val('');
+ }
+ });
},
reset: function() {
- $field
- .each(function () {
- var
- $field = $(this),
- $element = $field.parent(),
- $fieldGroup = $field.closest($group),
- $prompt = $fieldGroup.find(selector.prompt),
- defaultValue = $field.data(metadata.defaultValue),
- isCheckbox = $element.is(selector.uiCheckbox),
- isDropdown = $element.is(selector.uiDropdown),
- isErrored = $fieldGroup.hasClass(className.error)
- ;
- if(defaultValue === undefined) {
- return;
- }
- if(isErrored) {
- module.verbose('Resetting error on field', $fieldGroup);
- $fieldGroup.removeClass(className.error);
- $prompt.remove();
- }
- if(isDropdown) {
- module.verbose('Resetting dropdown value', $element, defaultValue);
- $element.dropdown('restore defaults');
- }
- else if(isCheckbox) {
- module.verbose('Resetting checkbox value', $element, defaultValue);
- $field.prop('checked', defaultValue);
- }
- else {
- module.verbose('Resetting field value', $field, defaultValue);
- $field.val(defaultValue);
- }
- })
- ;
+ $field.each(function (index, el) {
+ var
+ $field = $(el),
+ $element = $field.parent(),
+ $fieldGroup = $field.closest($group),
+ $calendar = $field.closest(selector.uiCalendar),
+ $prompt = $fieldGroup.find(selector.prompt),
+ defaultValue = $field.data(metadata.defaultValue),
+ isCheckbox = $element.is(selector.uiCheckbox),
+ isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
+ isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
+ isErrored = $fieldGroup.hasClass(className.error)
+ ;
+ if(defaultValue === undefined) {
+ return;
+ }
+ if(isErrored) {
+ module.verbose('Resetting error on field', $fieldGroup);
+ $fieldGroup.removeClass(className.error);
+ $prompt.remove();
+ }
+ if(isDropdown) {
+ module.verbose('Resetting dropdown value', $element, defaultValue);
+ $element.dropdown('restore defaults', true);
+ }
+ else if(isCheckbox) {
+ module.verbose('Resetting checkbox value', $element, defaultValue);
+ $field.prop('checked', defaultValue);
+ }
+ else if (isCalendar) {
+ $calendar.calendar('set date', defaultValue);
+ }
+ else {
+ module.verbose('Resetting field value', $field, defaultValue);
+ $field.val(defaultValue);
+ }
+ });
+
+ module.determine.isDirty();
},
determine: {
@@ -245,6 +274,38 @@ $.fn.form = function(parameters) {
}
});
return allValid;
+ },
+ isDirty: function(e) {
+ var formIsDirty = false;
+
+ $field.each(function(index, el) {
+ var
+ $el = $(el),
+ isCheckbox = ($el.filter(selector.checkbox).length > 0),
+ isDirty
+ ;
+
+ if (isCheckbox) {
+ isDirty = module.is.checkboxDirty($el);
+ } else {
+ isDirty = module.is.fieldDirty($el);
+ }
+
+ $el.data(settings.metadata.isDirty, isDirty);
+
+ formIsDirty |= isDirty;
+ });
+
+ if (formIsDirty) {
+ module.set.dirty();
+ } else {
+ module.set.clean();
+ }
+
+ if (e && e.namespace === 'dirty') {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ }
}
},
@@ -261,13 +322,13 @@ $.fn.form = function(parameters) {
},
// duck type rule test
shorthandRules: function(rules) {
- return (typeof rules == 'string' || $.isArray(rules));
+ return (typeof rules == 'string' || Array.isArray(rules));
},
empty: function($field) {
if(!$field || $field.length === 0) {
return true;
}
- else if($field.is('input[type="checkbox"]')) {
+ else if($field.is(selector.checkbox)) {
return !$field.is(':checked');
}
else {
@@ -294,22 +355,49 @@ $.fn.form = function(parameters) {
});
return allValid;
}
+ },
+ dirty: function() {
+ return dirty;
+ },
+ clean: function() {
+ return !dirty;
+ },
+ fieldDirty: function($el) {
+ var initialValue = $el.data(metadata.defaultValue);
+ // Explicitly check for null/undefined here as value may be `false`, so ($el.data(dataInitialValue) || '') would not work
+ if (initialValue == null) { initialValue = ''; }
+ var currentValue = $el.val();
+ if (currentValue == null) { currentValue = ''; }
+
+ // Boolean values can be encoded as "true/false" or "True/False" depending on underlying frameworks so we need a case insensitive comparison
+ var boolRegex = /^(true|false)$/i;
+ var isBoolValue = boolRegex.test(initialValue) && boolRegex.test(currentValue);
+ if (isBoolValue) {
+ var regex = new RegExp("^" + initialValue + "$", "i");
+ return !regex.test(currentValue);
+ }
+
+ return currentValue !== initialValue;
+ },
+ checkboxDirty: function($el) {
+ var initialValue = $el.data(metadata.defaultValue);
+ var currentValue = $el.is(":checked");
+
+ return initialValue !== currentValue;
+ },
+ justDirty: function() {
+ return (history[0] === 'dirty');
+ },
+ justClean: function() {
+ return (history[0] === 'clean');
}
},
removeEvents: function() {
- $module
- .off(eventNamespace)
- ;
- $field
- .off(eventNamespace)
- ;
- $submit
- .off(eventNamespace)
- ;
- $field
- .off(eventNamespace)
- ;
+ $module.off(eventNamespace);
+ $field.off(eventNamespace);
+ $submit.off(eventNamespace);
+ $field.off(eventNamespace);
},
event: {
@@ -334,9 +422,7 @@ $.fn.form = function(parameters) {
}
if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {
if(!keyHeldDown) {
- $field
- .one('keyup' + eventNamespace, module.event.field.keyup)
- ;
+ $field.one('keyup' + eventNamespace, module.event.field.keyup);
module.submit();
module.debug('Enter pressed on input submitting form');
}
@@ -378,6 +464,19 @@ $.fn.form = function(parameters) {
}, settings.delay);
}
}
+ },
+ beforeUnload: function(event) {
+ if (module.is.dirty() && !submitting) {
+ var event = event || window.event;
+
+ // For modern browsers
+ if (event) {
+ event.returnValue = settings.text.leavingMessage;
+ }
+
+ // For olders...
+ return settings.text.leavingMessage;
+ }
}
},
@@ -446,7 +545,7 @@ $.fn.form = function(parameters) {
name
;
if(requiresValue) {
- prompt = prompt.replace('{value}', $field.val());
+ prompt = prompt.replace(/\{value\}/g, $field.val());
}
if(requiresName) {
$label = $field.closest(selector.group).find('label').eq(0);
@@ -454,10 +553,10 @@ $.fn.form = function(parameters) {
? $label.text()
: $field.prop('placeholder') || settings.text.unspecifiedField
;
- prompt = prompt.replace('{name}', name);
+ prompt = prompt.replace(/\{name\}/g, name);
}
- prompt = prompt.replace('{identifier}', field.identifier);
- prompt = prompt.replace('{ruleValue}', ancillary);
+ prompt = prompt.replace(/\{identifier\}/g, field.identifier);
+ prompt = prompt.replace(/\{ruleValue\}/g, ancillary);
if(!rule.prompt) {
module.verbose('Using default validation prompt for type', prompt, ruleName);
}
@@ -469,8 +568,7 @@ $.fn.form = function(parameters) {
keys = Object.keys(parameters),
isLegacySettings = (keys.length > 0)
? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)
- : false,
- ruleKeys
+ : false
;
if(isLegacySettings) {
// 1.x (ducktyped)
@@ -514,17 +612,18 @@ $.fn.form = function(parameters) {
field: function(identifier) {
module.verbose('Finding field with identifier', identifier);
identifier = module.escape.string(identifier);
- if($field.filter('#' + identifier).length > 0 ) {
- return $field.filter('#' + identifier);
+ var t;
+ if((t=$field.filter('#' + identifier)).length > 0 ) {
+ return t;
}
- else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
- return $field.filter('[name="' + identifier +'"]');
+ if((t=$field.filter('[name="' + identifier +'"]')).length > 0 ) {
+ return t;
}
- else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) {
- return $field.filter('[name="' + identifier +'[]"]');
+ if((t=$field.filter('[name="' + identifier +'[]"]')).length > 0 ) {
+ return t;
}
- else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
- return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]');
+ if((t=$field.filter('[data-' + metadata.validate + '="'+ identifier +'"]')).length > 0 ) {
+ return t;
}
return $(' ');
},
@@ -547,10 +646,13 @@ $.fn.form = function(parameters) {
}
$.each(validation, function(fieldName, field) {
identifier = field.identifier || fieldName;
- if( module.get.field(identifier)[0] == $field[0] ) {
- field.identifier = identifier;
- fieldValidation = field;
- }
+ $.each(module.get.field(identifier), function(index, groupField) {
+ if(groupField == $field[0]) {
+ field.identifier = identifier;
+ fieldValidation = field;
+ return false;
+ }
+ });
});
return fieldValidation || false;
},
@@ -565,21 +667,22 @@ $.fn.form = function(parameters) {
},
values: function (fields) {
var
- $fields = $.isArray(fields)
+ $fields = Array.isArray(fields)
? module.get.fields(fields)
: $field,
values = {}
;
$fields.each(function(index, field) {
var
- $field = $(field),
- type = $field.prop('type'),
- name = $field.prop('name'),
- value = $field.val(),
- isCheckbox = $field.is(selector.checkbox),
- isRadio = $field.is(selector.radio),
- isMultiple = (name.indexOf('[]') !== -1),
- isChecked = (isCheckbox)
+ $field = $(field),
+ $calendar = $field.closest(selector.uiCalendar),
+ name = $field.prop('name'),
+ value = $field.val(),
+ isCheckbox = $field.is(selector.checkbox),
+ isRadio = $field.is(selector.radio),
+ isMultiple = (name.indexOf('[]') !== -1),
+ isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
+ isChecked = (isCheckbox)
? $field.is(':checked')
: false
;
@@ -603,7 +706,7 @@ $.fn.form = function(parameters) {
}
else {
if(isRadio) {
- if(values[name] === undefined || values[name] == false) {
+ if(values[name] === undefined || values[name] === false) {
values[name] = (isChecked)
? value || true
: false
@@ -618,13 +721,58 @@ $.fn.form = function(parameters) {
values[name] = false;
}
}
- else {
+ else if(isCalendar) {
+ var date = $calendar.calendar('get date');
+
+ if (date !== null) {
+ if (settings.dateHandling == 'date') {
+ values[name] = date;
+ } else if(settings.dateHandling == 'input') {
+ values[name] = $calendar.calendar('get input date')
+ } else if (settings.dateHandling == 'formatter') {
+ var type = $calendar.calendar('setting', 'type');
+
+ switch(type) {
+ case 'date':
+ values[name] = settings.formatter.date(date);
+ break;
+
+ case 'datetime':
+ values[name] = settings.formatter.datetime(date);
+ break;
+
+ case 'time':
+ values[name] = settings.formatter.time(date);
+ break;
+
+ case 'month':
+ values[name] = settings.formatter.month(date);
+ break;
+
+ case 'year':
+ values[name] = settings.formatter.year(date);
+ break;
+
+ default:
+ module.debug('Wrong calendar mode', $calendar, type);
+ values[name] = '';
+ }
+ }
+ } else {
+ values[name] = '';
+ }
+ } else {
values[name] = value;
}
}
}
});
return values;
+ },
+ dirtyFields: function() {
+ return $field.filter(function(index, e) {
+ return $(e).data(metadata.isDirty);
+ });
}
},
@@ -650,6 +798,16 @@ $.fn.form = function(parameters) {
},
+ can: {
+ useElement: function(element){
+ if ($.fn[element] !== undefined) {
+ return true;
+ }
+ module.error(error.noElement.replace('{element}',element));
+ return false;
+ }
+ },
+
escape: {
string: function(text) {
text = String(text);
@@ -663,26 +821,36 @@ $.fn.form = function(parameters) {
module.add.field(name, rules);
},
field: function(name, rules) {
+ // Validation should have at least a standard format
+ if(validation[name] === undefined || validation[name].rules === undefined) {
+ validation[name] = {
+ rules: []
+ };
+ }
var
- newValidation = {}
+ newValidation = {
+ rules: []
+ }
;
if(module.is.shorthandRules(rules)) {
- rules = $.isArray(rules)
+ rules = Array.isArray(rules)
? rules
: [rules]
;
- newValidation[name] = {
- rules: []
- };
- $.each(rules, function(index, rule) {
- newValidation[name].rules.push({ type: rule });
+ $.each(rules, function(_index, rule) {
+ newValidation.rules.push({ type: rule });
});
}
else {
- newValidation[name] = rules;
+ newValidation.rules = rules.rules;
}
- validation = $.extend({}, validation, newValidation);
- module.debug('Adding rules', newValidation, validation);
+ // For each new rule, check if there's not already one with the same type
+ $.each(newValidation.rules, function (_index, rule) {
+ if ($.grep(validation[name].rules, function(item){ return item.type == rule.type; }).length == 0) {
+ validation[name].rules.push(rule);
+ }
+ });
+ module.debug('Adding rules', newValidation.rules, validation);
},
fields: function(fields) {
var
@@ -696,7 +864,7 @@ $.fn.form = function(parameters) {
}
validation = $.extend({}, validation, newValidation);
},
- prompt: function(identifier, errors) {
+ prompt: function(identifier, errors, internal) {
var
$field = module.get.field(identifier),
$fieldGroup = $field.closest($group),
@@ -708,12 +876,14 @@ $.fn.form = function(parameters) {
: errors
;
module.verbose('Adding field error state', identifier);
- $fieldGroup
- .addClass(className.error)
- ;
+ if(!internal) {
+ $fieldGroup
+ .addClass(className.error)
+ ;
+ }
if(settings.inline) {
if(!promptExists) {
- $prompt = settings.templates.prompt(errors);
+ $prompt = settings.templates.prompt(errors, className.label);
$prompt
.appendTo($fieldGroup)
;
@@ -722,7 +892,7 @@ $.fn.form = function(parameters) {
.html(errors[0])
;
if(!promptExists) {
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
module.verbose('Displaying error with css transition', settings.transition);
$prompt.transition(settings.transition + ' in', settings.duration);
}
@@ -750,20 +920,20 @@ $.fn.form = function(parameters) {
remove: {
rule: function(field, rule) {
var
- rules = $.isArray(rule)
+ rules = Array.isArray(rule)
? rule
: [rule]
;
- if(rule == undefined) {
- module.debug('Removed all rules');
- validation[field].rules = [];
+ if(validation[field] === undefined || !Array.isArray(validation[field].rules)) {
return;
}
- if(validation[field] == undefined || !$.isArray(validation[field].rules)) {
+ if(rule === undefined) {
+ module.debug('Removed all rules');
+ validation[field].rules = [];
return;
}
$.each(validation[field].rules, function(index, rule) {
- if(rules.indexOf(rule.type) !== -1) {
+ if(rule && rules.indexOf(rule.type) !== -1) {
module.debug('Removed rule', rule.type);
validation[field].rules.splice(index, 1);
}
@@ -771,7 +941,7 @@ $.fn.form = function(parameters) {
},
field: function(field) {
var
- fields = $.isArray(field)
+ fields = Array.isArray(field)
? field
: [field]
;
@@ -781,8 +951,8 @@ $.fn.form = function(parameters) {
},
// alias
rules: function(field, rules) {
- if($.isArray(field)) {
- $.each(fields, function(index, field) {
+ if(Array.isArray(field)) {
+ $.each(field, function(index, field) {
module.remove.rule(field, rules);
});
}
@@ -804,7 +974,7 @@ $.fn.form = function(parameters) {
;
if(settings.inline && $prompt.is(':visible')) {
module.verbose('Removing prompt for field', identifier);
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
$prompt.transition(settings.transition + ' out', settings.duration, function() {
$prompt.remove();
});
@@ -828,18 +998,27 @@ $.fn.form = function(parameters) {
;
},
defaults: function () {
- $field
- .each(function () {
- var
- $field = $(this),
- isCheckbox = ($field.filter(selector.checkbox).length > 0),
- value = (isCheckbox)
- ? $field.is(':checked')
- : $field.val()
- ;
- $field.data(metadata.defaultValue, value);
- })
- ;
+ $field.each(function (index, el) {
+ var
+ $el = $(el),
+ $parent = $el.parent(),
+ isCheckbox = ($el.filter(selector.checkbox).length > 0),
+ isDropdown = $parent.is(selector.uiDropdown) && module.can.useElement('dropdown'),
+ $calendar = $el.closest(selector.uiCalendar),
+ isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
+ value = (isCheckbox)
+ ? $el.is(':checked')
+ : $el.val()
+ ;
+ if (isDropdown) {
+ $parent.dropdown('save defaults');
+ }
+ else if (isCalendar) {
+ $calendar.calendar('refresh');
+ }
+ $el.data(metadata.defaultValue, value);
+ $el.data(metadata.isDirty, false);
+ });
},
error: function() {
$module
@@ -862,10 +1041,12 @@ $.fn.form = function(parameters) {
var
$field = module.get.field(key),
$element = $field.parent(),
- isMultiple = $.isArray(value),
- isCheckbox = $element.is(selector.uiCheckbox),
- isDropdown = $element.is(selector.uiDropdown),
+ $calendar = $field.closest(selector.uiCalendar),
+ isMultiple = Array.isArray(value),
+ isCheckbox = $element.is(selector.uiCheckbox) && module.can.useElement('checkbox'),
+ isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
isRadio = ($field.is(selector.radio) && isCheckbox),
+ isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
fieldExists = ($field.length > 0),
$multipleField
;
@@ -890,7 +1071,7 @@ $.fn.form = function(parameters) {
}
else if(isCheckbox) {
module.verbose('Setting checkbox value', value, $element);
- if(value === true) {
+ if(value === true || value === 1) {
$element.checkbox('check');
}
else {
@@ -901,22 +1082,76 @@ $.fn.form = function(parameters) {
module.verbose('Setting dropdown value', value, $element);
$element.dropdown('set selected', value);
}
+ else if (isCalendar) {
+ $calendar.calendar('set date',value);
+ }
else {
module.verbose('Setting field value', value, $field);
$field.val(value);
}
}
});
+ },
+ dirty: function() {
+ module.verbose('Setting state dirty');
+ dirty = true;
+ history[0] = history[1];
+ history[1] = 'dirty';
+
+ if (module.is.justClean()) {
+ $module.trigger('dirty');
+ }
+ },
+ clean: function() {
+ module.verbose('Setting state clean');
+ dirty = false;
+ history[0] = history[1];
+ history[1] = 'clean';
+
+ if (module.is.justDirty()) {
+ $module.trigger('clean');
+ }
+ },
+ asClean: function() {
+ module.set.defaults();
+ module.set.clean();
+ },
+ asDirty: function() {
+ module.set.defaults();
+ module.set.dirty();
+ },
+ autoCheck: function() {
+ module.debug('Enabling auto check on required fields');
+ $field.each(function (_index, el) {
+ var
+ $el = $(el),
+ $elGroup = $(el).closest($group),
+ isCheckbox = ($el.filter(selector.checkbox).length > 0),
+ isRequired = $el.prop('required') || $elGroup.hasClass(className.required) || $elGroup.parent().hasClass(className.required),
+ isDisabled = $el.prop('disabled') || $elGroup.hasClass(className.disabled) || $elGroup.parent().hasClass(className.disabled),
+ validation = module.get.validation($el),
+ hasEmptyRule = validation
+ ? $.grep(validation.rules, function(rule) { return rule.type == "empty" }) !== 0
+ : false,
+ identifier = validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate)
+ ;
+ if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) {
+ if (isCheckbox) {
+ module.verbose("Adding 'checked' rule on field", identifier);
+ module.add.rule(identifier, "checked");
+ } else {
+ module.verbose("Adding 'empty' rule on field", identifier);
+ module.add.rule(identifier, "empty");
+ }
+ }
+ });
}
},
validate: {
form: function(event, ignoreCallbacks) {
- var
- values = module.get.values(),
- apiRequest
- ;
+ var values = module.get.values();
// input keydown event will fire submit repeatedly by browser default
if(keyHeldDown) {
@@ -939,7 +1174,7 @@ $.fn.form = function(parameters) {
module.add.errors(formErrors);
}
// prevent ajax submit
- if($module.data('moduleApi') !== undefined) {
+ if(event && $module.data('moduleApi') !== undefined) {
event.stopImmediatePropagation();
}
if(ignoreCallbacks !== true) {
@@ -972,24 +1207,35 @@ $.fn.form = function(parameters) {
module.debug('Using field name as identifier', identifier);
field.identifier = identifier;
}
- if($field.prop('disabled')) {
+ var isDisabled = true;
+ $.each($field, function(){
+ if(!$(this).prop('disabled')) {
+ isDisabled = false;
+ return false;
+ }
+ });
+ if(isDisabled) {
module.debug('Field is disabled. Skipping', identifier);
- fieldValid = true;
}
else if(field.optional && module.is.blank($field)){
module.debug('Field is optional and blank. Skipping', identifier);
- fieldValid = true;
}
else if(field.depends && module.is.empty($dependsField)) {
module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);
- fieldValid = true;
}
else if(field.rules !== undefined) {
+ $field.closest($group).removeClass(className.error);
$.each(field.rules, function(index, rule) {
- if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) {
- module.debug('Field is invalid', identifier, rule.type);
- fieldErrors.push(module.get.prompt(rule, field));
- fieldValid = false;
+ if( module.has.field(identifier)) {
+ var invalidFields = module.validate.rule(field, rule,true) || [];
+ if (invalidFields.length>0){
+ module.debug('Field is invalid', identifier, rule.type);
+ fieldErrors.push(module.get.prompt(rule, field));
+ fieldValid = false;
+ if(showErrors){
+ $(invalidFields).closest($group).addClass(className.error);
+ }
+ }
}
});
}
@@ -1002,7 +1248,7 @@ $.fn.form = function(parameters) {
else {
if(showErrors) {
formErrors = formErrors.concat(fieldErrors);
- module.add.prompt(identifier, fieldErrors);
+ module.add.prompt(identifier, fieldErrors, true);
settings.onInvalid.call($field, fieldErrors);
}
return false;
@@ -1011,26 +1257,40 @@ $.fn.form = function(parameters) {
},
// takes validation rule and returns whether field passes rule
- rule: function(field, rule) {
+ rule: function(field, rule, internal) {
var
$field = module.get.field(field.identifier),
- type = rule.type,
- value = $field.val(),
- isValid = true,
ancillary = module.get.ancillaryValue(rule),
ruleName = module.get.ruleName(rule),
- ruleFunction = settings.rules[ruleName]
+ ruleFunction = settings.rules[ruleName],
+ invalidFields = [],
+ isCheckbox = $field.is(selector.checkbox),
+ isValid = function(field){
+ var value = (isCheckbox ? $(field).filter(':checked').val() : $(field).val());
+ // cast to string avoiding encoding special values
+ value = (value === undefined || value === '' || value === null)
+ ? ''
+ : (settings.shouldTrim) ? $.trim(value + '') : String(value + '')
+ ;
+ return ruleFunction.call(field, value, ancillary, $module);
+ }
;
if( !$.isFunction(ruleFunction) ) {
module.error(error.noRule, ruleName);
return;
}
- // cast to string avoiding encoding special values
- value = (value === undefined || value === '' || value === null)
- ? ''
- : $.trim(value + '')
- ;
- return ruleFunction.call($field, value, ancillary);
+ if(isCheckbox) {
+ if (!isValid($field)) {
+ invalidFields = $field;
+ }
+ } else {
+ $.each($field, function (index, field) {
+ if (!isValid(field)) {
+ invalidFields.push(field);
+ }
+ });
+ }
+ return internal ? invalidFields : !(invalidFields.length>0);
}
},
@@ -1180,7 +1440,7 @@ $.fn.form = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -1219,18 +1479,26 @@ $.fn.form.settings = {
delay : 200,
revalidate : true,
+ shouldTrim : true,
transition : 'scale',
duration : 200,
+ autoCheckRequired : false,
+ preventLeaving : false,
+ dateHandling : 'date', // 'date', 'input', 'formatter'
+
onValid : function() {},
onInvalid : function() {},
onSuccess : function() { return true; },
onFailure : function() { return false; },
+ onDirty : function() {},
+ onClean : function() {},
metadata : {
defaultValue : 'default',
- validate : 'validate'
+ validate : 'validate',
+ isDirty : 'isDirty'
},
regExp: {
@@ -1238,7 +1506,7 @@ $.fn.form.settings = {
bracket : /\[(.*)\]/i,
decimal : /^\d+\.?\d*$/,
email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,
- escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
+ escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|:,=@]/g,
flags : /^\/(.*)\/(.*)?/,
integer : /^\-?\d+$/,
number : /^\-?\d*(\.\d+)?$/,
@@ -1247,7 +1515,8 @@ $.fn.form.settings = {
text: {
unspecifiedRule : 'Please enter a valid value',
- unspecifiedField : 'This field'
+ unspecifiedField : 'This field',
+ leavingMessage : 'There are unsaved changes on this page which will be discarded if you continue.'
},
prompt: {
@@ -1291,21 +1560,25 @@ $.fn.form.settings = {
reset : '.reset:not([type="reset"])',
submit : '.submit:not([type="submit"])',
uiCheckbox : '.ui.checkbox',
- uiDropdown : '.ui.dropdown'
+ uiDropdown : '.ui.dropdown',
+ uiCalendar : '.ui.calendar'
},
className : {
- error : 'error',
- label : 'ui prompt label',
- pressed : 'down',
- success : 'success'
+ error : 'error',
+ label : 'ui basic red pointing prompt label',
+ pressed : 'down',
+ success : 'success',
+ required : 'required',
+ disabled : 'disabled'
},
error: {
identifier : 'You must specify a string identifier for each field',
method : 'The method you called is not defined.',
noRule : 'There is no rule matching the one you specified',
- oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'
+ oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.',
+ noElement : 'This module requires ui {element}'
},
templates: {
@@ -1323,19 +1596,53 @@ $.fn.form.settings = {
},
// template that produces label
- prompt: function(errors) {
+ prompt: function(errors, labelClasses) {
return $('
')
- .addClass('ui basic red pointing prompt label')
+ .addClass(labelClasses)
.html(errors[0])
;
}
},
+ formatter: {
+ date: function(date) {
+ return Intl.DateTimeFormat('en-GB').format(date);
+ },
+ datetime: function(date) {
+ return Intl.DateTimeFormat('en-GB', {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ }).format(date);
+ },
+ time: function(date) {
+ return Intl.DateTimeFormat('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ }).format(date);
+ },
+ month: function(date) {
+ return Intl.DateTimeFormat('en-GB', {
+ month: '2-digit',
+ year: 'numeric'
+ }).format(date);
+ },
+ year: function(date) {
+ return Intl.DateTimeFormat('en-GB', {
+ year: 'numeric'
+ }).format(date);
+ }
+ },
+
rules: {
// is not empty or blank string
empty: function(value) {
- return !(value === undefined || '' === value || $.isArray(value) && value.length === 0);
+ return !(value === undefined || '' === value || Array.isArray(value) && value.length === 0);
},
// checkbox checked
@@ -1515,22 +1822,22 @@ $.fn.form.settings = {
},
// matches another field
- match: function(value, identifier) {
+ match: function(value, identifier, $module) {
var
- $form = $(this),
- matchingValue
+ matchingValue,
+ matchingElement
;
- if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
- matchingValue = $('[data-validate="'+ identifier +'"]').val();
+ if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) {
+ matchingValue = matchingElement.val();
}
- else if($('#' + identifier).length > 0) {
- matchingValue = $('#' + identifier).val();
+ else if((matchingElement = $module.find('#' + identifier)).length > 0) {
+ matchingValue = matchingElement.val();
}
- else if($('[name="' + identifier +'"]').length > 0) {
- matchingValue = $('[name="' + identifier + '"]').val();
+ else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) {
+ matchingValue = matchingElement.val();
}
- else if( $('[name="' + identifier +'[]"]').length > 0 ) {
- matchingValue = $('[name="' + identifier +'[]"]');
+ else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) {
+ matchingValue = matchingElement;
}
return (matchingValue !== undefined)
? ( value.toString() == matchingValue.toString() )
@@ -1539,23 +1846,23 @@ $.fn.form.settings = {
},
// different than another field
- different: function(value, identifier) {
+ different: function(value, identifier, $module) {
// use either id or name of field
var
- $form = $(this),
- matchingValue
+ matchingValue,
+ matchingElement
;
- if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
- matchingValue = $('[data-validate="'+ identifier +'"]').val();
+ if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) {
+ matchingValue = matchingElement.val();
}
- else if($('#' + identifier).length > 0) {
- matchingValue = $('#' + identifier).val();
+ else if((matchingElement = $module.find('#' + identifier)).length > 0) {
+ matchingValue = matchingElement.val();
}
- else if($('[name="' + identifier +'"]').length > 0) {
- matchingValue = $('[name="' + identifier + '"]').val();
+ else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) {
+ matchingValue = matchingElement.val();
}
- else if( $('[name="' + identifier +'[]"]').length > 0 ) {
- matchingValue = $('[name="' + identifier +'[]"]');
+ else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) {
+ matchingValue = matchingElement;
}
return (matchingValue !== undefined)
? ( value.toString() !== matchingValue.toString() )
diff --git a/ui/src/definitions/behaviors/state.js b/ui/src/definitions/behaviors/state.js
new file mode 100644
index 00000000000..149b4af74f4
--- /dev/null
+++ b/ui/src/definitions/behaviors/state.js
@@ -0,0 +1,711 @@
+/*!
+ * # Fomantic-UI - State
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.state = function(parameters) {
+ var
+ $allModules = $(this),
+
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+
+ returnedValue
+ ;
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.state.settings, parameters)
+ : $.extend({}, $.fn.state.settings),
+
+ error = settings.error,
+ metadata = settings.metadata,
+ className = settings.className,
+ namespace = settings.namespace,
+ states = settings.states,
+ text = settings.text,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = namespace + '-module',
+
+ $module = $(this),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
+
+ module
+ ;
+ module = {
+
+ initialize: function() {
+ module.verbose('Initializing module');
+
+ // allow module to guess desired state based on element
+ if(settings.automatic) {
+ module.add.defaults();
+ }
+
+ // bind events with delegated events
+ if(settings.context && moduleSelector !== '') {
+ $(settings.context)
+ .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
+ .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
+ .on(moduleSelector, 'click' + eventNamespace, module.toggle.state)
+ ;
+ }
+ else {
+ $module
+ .on('mouseenter' + eventNamespace, module.change.text)
+ .on('mouseleave' + eventNamespace, module.reset.text)
+ .on('click' + eventNamespace, module.toggle.state)
+ ;
+ }
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, module)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module', instance);
+ $module
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ refresh: function() {
+ module.verbose('Refreshing selector cache');
+ $module = $(element);
+ },
+
+ add: {
+ defaults: function() {
+ var
+ userStates = parameters && $.isPlainObject(parameters.states)
+ ? parameters.states
+ : {}
+ ;
+ $.each(settings.defaults, function(type, typeStates) {
+ if( module.is[type] !== undefined && module.is[type]() ) {
+ module.verbose('Adding default states', type, element);
+ $.extend(settings.states, typeStates, userStates);
+ }
+ });
+ }
+ },
+
+ is: {
+
+ active: function() {
+ return $module.hasClass(className.active);
+ },
+ loading: function() {
+ return $module.hasClass(className.loading);
+ },
+ inactive: function() {
+ return !( $module.hasClass(className.active) );
+ },
+ state: function(state) {
+ if(className[state] === undefined) {
+ return false;
+ }
+ return $module.hasClass( className[state] );
+ },
+
+ enabled: function() {
+ return !( $module.is(settings.filter.active) );
+ },
+ disabled: function() {
+ return ( $module.is(settings.filter.active) );
+ },
+ textEnabled: function() {
+ return !( $module.is(settings.filter.text) );
+ },
+
+ // definitions for automatic type detection
+ button: function() {
+ return $module.is('.button:not(a, .submit)');
+ },
+ input: function() {
+ return $module.is('input');
+ },
+ progress: function() {
+ return $module.is('.ui.progress');
+ }
+ },
+
+ allow: function(state) {
+ module.debug('Now allowing state', state);
+ states[state] = true;
+ },
+ disallow: function(state) {
+ module.debug('No longer allowing', state);
+ states[state] = false;
+ },
+
+ allows: function(state) {
+ return states[state] || false;
+ },
+
+ enable: function() {
+ $module.removeClass(className.disabled);
+ },
+
+ disable: function() {
+ $module.addClass(className.disabled);
+ },
+
+ setState: function(state) {
+ if(module.allows(state)) {
+ $module.addClass( className[state] );
+ }
+ },
+
+ removeState: function(state) {
+ if(module.allows(state)) {
+ $module.removeClass( className[state] );
+ }
+ },
+
+ toggle: {
+ state: function() {
+ var
+ apiRequest,
+ requestCancelled
+ ;
+ if( module.allows('active') && module.is.enabled() ) {
+ module.refresh();
+ if($.fn.api !== undefined) {
+ apiRequest = $module.api('get request');
+ requestCancelled = $module.api('was cancelled');
+ if( requestCancelled ) {
+ module.debug('API Request cancelled by beforesend');
+ settings.activateTest = function(){ return false; };
+ settings.deactivateTest = function(){ return false; };
+ }
+ else if(apiRequest) {
+ module.listenTo(apiRequest);
+ return;
+ }
+ }
+ module.change.state();
+ }
+ }
+ },
+
+ listenTo: function(apiRequest) {
+ module.debug('API request detected, waiting for state signal', apiRequest);
+ if(apiRequest) {
+ if(text.loading) {
+ module.update.text(text.loading);
+ }
+ $.when(apiRequest)
+ .then(function() {
+ if(apiRequest.state() == 'resolved') {
+ module.debug('API request succeeded');
+ settings.activateTest = function(){ return true; };
+ settings.deactivateTest = function(){ return true; };
+ }
+ else {
+ module.debug('API request failed');
+ settings.activateTest = function(){ return false; };
+ settings.deactivateTest = function(){ return false; };
+ }
+ module.change.state();
+ })
+ ;
+ }
+ },
+
+ // checks whether active/inactive state can be given
+ change: {
+
+ state: function() {
+ module.debug('Determining state change direction');
+ // inactive to active change
+ if( module.is.inactive() ) {
+ module.activate();
+ }
+ else {
+ module.deactivate();
+ }
+ if(settings.sync) {
+ module.sync();
+ }
+ settings.onChange.call(element);
+ },
+
+ text: function() {
+ if( module.is.textEnabled() ) {
+ if(module.is.disabled() ) {
+ module.verbose('Changing text to disabled text', text.hover);
+ module.update.text(text.disabled);
+ }
+ else if( module.is.active() ) {
+ if(text.hover) {
+ module.verbose('Changing text to hover text', text.hover);
+ module.update.text(text.hover);
+ }
+ else if(text.deactivate) {
+ module.verbose('Changing text to deactivating text', text.deactivate);
+ module.update.text(text.deactivate);
+ }
+ }
+ else {
+ if(text.hover) {
+ module.verbose('Changing text to hover text', text.hover);
+ module.update.text(text.hover);
+ }
+ else if(text.activate){
+ module.verbose('Changing text to activating text', text.activate);
+ module.update.text(text.activate);
+ }
+ }
+ }
+ }
+
+ },
+
+ activate: function() {
+ if( settings.activateTest.call(element) ) {
+ module.debug('Setting state to active');
+ $module
+ .addClass(className.active)
+ ;
+ module.update.text(text.active);
+ settings.onActivate.call(element);
+ }
+ },
+
+ deactivate: function() {
+ if( settings.deactivateTest.call(element) ) {
+ module.debug('Setting state to inactive');
+ $module
+ .removeClass(className.active)
+ ;
+ module.update.text(text.inactive);
+ settings.onDeactivate.call(element);
+ }
+ },
+
+ sync: function() {
+ module.verbose('Syncing other buttons to current state');
+ if( module.is.active() ) {
+ $allModules
+ .not($module)
+ .state('activate');
+ }
+ else {
+ $allModules
+ .not($module)
+ .state('deactivate')
+ ;
+ }
+ },
+
+ get: {
+ text: function() {
+ return (settings.selector.text)
+ ? $module.find(settings.selector.text).text()
+ : $module.html()
+ ;
+ },
+ textFor: function(state) {
+ return text[state] || false;
+ }
+ },
+
+ flash: {
+ text: function(text, duration, callback) {
+ var
+ previousText = module.get.text()
+ ;
+ module.debug('Flashing text message', text, duration);
+ text = text || settings.text.flash;
+ duration = duration || settings.flashDuration;
+ callback = callback || function() {};
+ module.update.text(text);
+ setTimeout(function(){
+ module.update.text(previousText);
+ callback.call(element);
+ }, duration);
+ }
+ },
+
+ reset: {
+ // on mouseout sets text to previous value
+ text: function() {
+ var
+ activeText = text.active || $module.data(metadata.storedText),
+ inactiveText = text.inactive || $module.data(metadata.storedText)
+ ;
+ if( module.is.textEnabled() ) {
+ if( module.is.active() && activeText) {
+ module.verbose('Resetting active text', activeText);
+ module.update.text(activeText);
+ }
+ else if(inactiveText) {
+ module.verbose('Resetting inactive text', activeText);
+ module.update.text(inactiveText);
+ }
+ }
+ }
+ },
+
+ update: {
+ text: function(text) {
+ var
+ currentText = module.get.text()
+ ;
+ if(text && text !== currentText) {
+ module.debug('Updating text', text);
+ if(settings.selector.text) {
+ $module
+ .data(metadata.storedText, text)
+ .find(settings.selector.text)
+ .text(text)
+ ;
+ }
+ else {
+ $module
+ .data(metadata.storedText, text)
+ .html(text)
+ ;
+ }
+ }
+ else {
+ module.debug('Text is already set, ignoring update', text);
+ }
+ }
+ },
+
+ setting: function(name, value) {
+ module.debug('Changing setting', name, value);
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ if($.isPlainObject(settings[name])) {
+ $.extend(true, settings[name], value);
+ }
+ else {
+ settings[name] = value;
+ }
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if(Array.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.state.settings = {
+
+ // module info
+ name : 'State',
+
+ // debug output
+ debug : false,
+
+ // verbose debug output
+ verbose : false,
+
+ // namespace for events
+ namespace : 'state',
+
+ // debug data includes performance
+ performance : true,
+
+ // callback occurs on state change
+ onActivate : function() {},
+ onDeactivate : function() {},
+ onChange : function() {},
+
+ // state test functions
+ activateTest : function() { return true; },
+ deactivateTest : function() { return true; },
+
+ // whether to automatically map default states
+ automatic : true,
+
+ // activate / deactivate changes all elements instantiated at same time
+ sync : false,
+
+ // default flash text duration, used for temporarily changing text of an element
+ flashDuration : 1000,
+
+ // selector filter
+ filter : {
+ text : '.loading, .disabled',
+ active : '.disabled'
+ },
+
+ context : false,
+
+ // error
+ error: {
+ beforeSend : 'The before send function has cancelled state change',
+ method : 'The method you called is not defined.'
+ },
+
+ // metadata
+ metadata: {
+ promise : 'promise',
+ storedText : 'stored-text'
+ },
+
+ // change class on state
+ className: {
+ active : 'active',
+ disabled : 'disabled',
+ error : 'error',
+ loading : 'loading',
+ success : 'success',
+ warning : 'warning'
+ },
+
+ selector: {
+ // selector for text node
+ text: false
+ },
+
+ defaults : {
+ input: {
+ disabled : true,
+ loading : true,
+ active : true
+ },
+ button: {
+ disabled : true,
+ loading : true,
+ active : true,
+ },
+ progress: {
+ active : true,
+ success : true,
+ warning : true,
+ error : true
+ }
+ },
+
+ states : {
+ active : true,
+ disabled : true,
+ error : true,
+ loading : true,
+ success : true,
+ warning : true
+ },
+
+ text : {
+ disabled : false,
+ flash : false,
+ hover : false,
+ active : false,
+ inactive : false,
+ activate : false,
+ deactivate : false
+ }
+
+};
+
+
+
+})( jQuery, window, document );
diff --git a/ui/src/definitions/behaviors/visibility.js b/ui/src/definitions/behaviors/visibility.js
index 8ae572c7fe8..97a96e2a738 100644
--- a/ui/src/definitions/behaviors/visibility.js
+++ b/ui/src/definitions/behaviors/visibility.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Visibility
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Visibility
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -58,7 +62,6 @@ $.fn.visibility = function(parameters) {
$placeholder,
- selector = $module.selector || '',
instance = $module.data(moduleNamespace),
requestAnimationFrame = window.requestAnimationFrame
@@ -506,8 +509,7 @@ $.fn.visibility = function(parameters) {
passed: function(amount, newCallback) {
var
- calculations = module.get.elementCalculations(),
- amountInPixels
+ calculations = module.get.elementCalculations()
;
// assign callback
if(amount && newCallback) {
@@ -1172,7 +1174,7 @@ $.fn.visibility = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -1297,7 +1299,7 @@ $.fn.visibility.settings = {
className: {
fixed : 'fixed',
- placeholder : 'placeholder',
+ placeholder : 'constraint',
visible : 'visible'
},
diff --git a/ui/src/definitions/collections/breadcrumb.less b/ui/src/definitions/collections/breadcrumb.less
index 67a4e312748..df6f979fd31 100644
--- a/ui/src/definitions/collections/breadcrumb.less
+++ b/ui/src/definitions/collections/breadcrumb.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Breadcrumb
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Breadcrumb
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -23,16 +23,16 @@
*******************************/
.ui.breadcrumb {
- line-height: 1;
+ line-height: @lineHeight;
display: @display;
- margin: @verticalMargin 0em;
+ margin: @verticalMargin 0;
vertical-align: @verticalAlign;
}
.ui.breadcrumb:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.breadcrumb:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*******************************
@@ -43,7 +43,7 @@
.ui.breadcrumb .divider {
display: inline-block;
opacity: @dividerOpacity;
- margin: 0em @dividerSpacing 0em;
+ margin: 0 @dividerSpacing 0;
font-size: @dividerSize;
color: @dividerColor;
@@ -81,6 +81,19 @@
padding: @segmentPadding;
}
+& when (@variationBreadcrumbInverted) {
+ /* Inverted */
+ .ui.inverted.breadcrumb {
+ color: @invertedColor;
+ }
+ .ui.inverted.breadcrumb > .active.section {
+ color: @invertedActiveColor;
+ }
+ .ui.inverted.breadcrumb > .divider {
+ color: @invertedDividerColor;
+ }
+}
+
/*******************************
States
*******************************/
@@ -94,29 +107,16 @@
Variations
*******************************/
-.ui.mini.breadcrumb {
- font-size: @mini;
-}
-.ui.tiny.breadcrumb {
- font-size: @tiny;
-}
-.ui.small.breadcrumb {
- font-size: @small;
-}
.ui.breadcrumb {
font-size: @medium;
}
-.ui.large.breadcrumb {
- font-size: @large;
-}
-.ui.big.breadcrumb {
- font-size: @big;
-}
-.ui.huge.breadcrumb {
- font-size: @huge;
-}
-.ui.massive.breadcrumb {
- font-size: @massive;
+& when not (@variationBreadcrumbSizes = false) {
+ each(@variationBreadcrumbSizes, {
+ @s: @@value;
+ .ui.@{value}.breadcrumb {
+ font-size: @s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/collections/form.less b/ui/src/definitions/collections/form.less
index 6839e9a0832..ae8953bd99c 100644
--- a/ui/src/definitions/collections/form.less
+++ b/ui/src/definitions/collections/form.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Form
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Form
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -47,14 +47,15 @@
margin: @fieldMargin;
}
+.ui.form .fields .fields,
.ui.form .field:last-child,
.ui.form .fields:last-child .field {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.form .fields .field {
clear: both;
- margin: 0em;
+ margin: 0;
}
@@ -112,10 +113,10 @@
.ui.form input[type="file"],
.ui.form input[type="url"] {
font-family: @inputFont;
- margin: 0em;
+ margin: 0;
outline: none;
-webkit-appearance: none;
- tap-highlight-color: rgba(255, 255, 255, 0);
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
line-height: @inputLineHeight;
padding: @inputPadding;
@@ -130,13 +131,13 @@
}
/* Text Area */
+.ui.input textarea,
.ui.form textarea {
- margin: 0em;
+ margin: 0;
-webkit-appearance: none;
- tap-highlight-color: rgba(255, 255, 255, 0);
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
padding: @textAreaPadding;
- font-size: @textAreaFontSize;
background: @textAreaBackground;
border: @textAreaBorder;
outline: none;
@@ -145,6 +146,7 @@
box-shadow: @inputBoxShadow;
transition: @textAreaTransition;
font-size: @textAreaFontSize;
+ font-family: @inputFont;
line-height: @textAreaLineHeight;
resize: @textAreaResize;
}
@@ -159,6 +161,50 @@
vertical-align: @checkboxVerticalAlign;
}
+/*--------------------
+ Checkbox margin
+---------------------*/
+
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
+ margin-top: @checkboxLabelFieldTopMargin;
+}
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
+ margin-top: @inputLineHeight + @checkboxFieldTopMargin;
+}
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
+ margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin;
+}
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
+ margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin;
+}
+.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
+ margin-top: @checkboxFieldTopMargin / 2;
+}
+.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
+ margin-top: @checkboxToggleFieldTopMargin / 2;
+}
+.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
+ margin-top: @checkboxSliderFieldTopMargin / 2;
+}
+
+& when (@variationFormTransparent) {
+ /*--------------------
+ Transparent
+ ---------------------*/
+
+ .ui.form .field .transparent.input:not(.icon) input,
+ .ui.form .field input.transparent,
+ .ui.form .field textarea.transparent {
+ padding: @transparentPadding;
+ }
+
+ .ui.form .field input.transparent,
+ .ui.form .field textarea.transparent {
+ border-color: transparent !important;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ }
+}
/*--------------------------
Input w/ attached Button
---------------------------*/
@@ -191,20 +237,23 @@
/* Block */
.ui.form .field > .selection.dropdown {
+ min-width: auto;
width: 100%;
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
float: right;
}
-/* Inline */
-.ui.form .inline.fields .field > .selection.dropdown,
-.ui.form .inline.field > .selection.dropdown {
- width: auto;
-}
-.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
-.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
- float: none;
+& when (@variationFormInline) {
+ /* Inline */
+ .ui.form .inline.fields .field > .selection.dropdown,
+ .ui.form .inline.field > .selection.dropdown {
+ width: auto;
+ }
+ .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
+ .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
+ float: none;
+ }
}
/*--------------------
@@ -218,11 +267,13 @@
width: 100%;
}
-/* Inline */
-.ui.form .inline.fields .field:not(.wide) .ui.input,
-.ui.form .inline.field:not(.wide) .ui.input {
- width: auto;
- vertical-align: middle;
+& when (@variationFormInline) {
+ /* Inline */
+ .ui.form .inline.fields .field:not(.wide) .ui.input,
+ .ui.form .inline.field:not(.wide) .ui.input {
+ width: auto;
+ vertical-align: middle;
+ }
}
/* Auto Input */
@@ -243,23 +294,26 @@
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
flex: 1 0 auto;
- width: 0px;
+ width: 0;
}
/*--------------------
Types of Messages
---------------------*/
-
-.ui.form .success.message,
-.ui.form .warning.message,
-.ui.form .error.message {
- display: none;
+& when (@variationFormStates) {
+ each(@formStates, {
+ @state: replace(@key, '@', '');
+ .ui.form .@{state}.message,
+ .ui.form .@{state}.message:empty {
+ display: none;
+ }
+ })
}
/* Assumptions */
.ui.form .message:first-child {
- margin-top: 0px;
+ margin-top: 0;
}
/*--------------------
@@ -272,18 +326,20 @@
border: @promptBorder !important;
color: @promptTextColor !important;
}
-.ui.form .inline.fields .field .prompt,
-.ui.form .inline.field .prompt {
- vertical-align: top;
- margin: @inlinePromptMargin;
-}
-.ui.form .inline.fields .field .prompt:before,
-.ui.form .inline.field .prompt:before {
- border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
- bottom: auto;
- right: auto;
- top: 50%;
- left: 0em;
+& when (@variationFormInline) {
+ .ui.form .inline.fields .field .prompt,
+ .ui.form .inline.field .prompt {
+ vertical-align: top;
+ margin: @inlinePromptMargin;
+ }
+ .ui.form .inline.fields .field .prompt:before,
+ .ui.form .inline.field .prompt:before {
+ border-width: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth;
+ bottom: auto;
+ right: auto;
+ top: 50%;
+ left: 0;
+ }
}
@@ -296,22 +352,16 @@
---------------------*/
.ui.form .field.field input:-webkit-autofill {
- box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
+ box-shadow: 0 0 0 100px @inputAutoFillBackground inset !important;
border-color: @inputAutoFillBorder !important;
}
/* Focus */
.ui.form .field.field input:-webkit-autofill:focus {
- box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
+ box-shadow: 0 0 0 100px @inputAutoFillFocusBackground inset !important;
border-color: @inputAutoFillFocusBorder !important;
}
-/* Error */
-.ui.form .error.error input:-webkit-autofill {
- box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
- border-color: @inputAutoFillErrorBorder !important;
-}
-
/*--------------------
@@ -323,7 +373,7 @@
color: @inputPlaceholderColor;
}
.ui.form :-ms-input-placeholder {
- color: @inputPlaceholderColor;
+ color: @inputPlaceholderColor !important;
}
.ui.form ::-moz-placeholder {
color: @inputPlaceholderColor;
@@ -333,32 +383,12 @@
color: @inputPlaceholderFocusColor;
}
.ui.form :focus:-ms-input-placeholder {
- color: @inputPlaceholderFocusColor;
+ color: @inputPlaceholderFocusColor !important;
}
.ui.form :focus::-moz-placeholder {
color: @inputPlaceholderFocusColor;
}
-/* Error Placeholder */
-.ui.form .error ::-webkit-input-placeholder {
- color: @inputErrorPlaceholderColor;
-}
-.ui.form .error :-ms-input-placeholder {
- color: @inputErrorPlaceholderColor !important;
-}
-.ui.form .error ::-moz-placeholder {
- color: @inputErrorPlaceholderColor;
-}
-
-.ui.form .error :focus::-webkit-input-placeholder {
- color: @inputErrorPlaceholderFocusColor;
-}
-.ui.form .error :focus:-ms-input-placeholder {
- color: @inputErrorPlaceholderFocusColor !important;
-}
-.ui.form .error :focus::-moz-placeholder {
- color: @inputErrorPlaceholderFocusColor;
-}
/*--------------------
@@ -383,6 +413,39 @@
background: @inputFocusBackground;
box-shadow: @inputFocusBoxShadow;
}
+& when (@variationInputAction) {
+ .ui.form .ui.action.input:not(.left) input:not([type]):focus,
+ .ui.form .ui.action.input:not(.left) input[type="date"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="datetime-local"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="email"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="number"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="password"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="search"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="tel"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="time"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="text"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="file"]:focus,
+ .ui.form .ui.action.input:not(.left) input[type="url"]:focus {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .ui.form .ui.action.input.left input:not([type]),
+ .ui.form .ui.action.input.left input[type="date"],
+ .ui.form .ui.action.input.left input[type="datetime-local"],
+ .ui.form .ui.action.input.left input[type="email"],
+ .ui.form .ui.action.input.left input[type="number"],
+ .ui.form .ui.action.input.left input[type="password"],
+ .ui.form .ui.action.input.left input[type="search"],
+ .ui.form .ui.action.input.left input[type="tel"],
+ .ui.form .ui.action.input.left input[type="time"],
+ .ui.form .ui.action.input.left input[type="text"],
+ .ui.form .ui.action.input.left input[type="file"],
+ .ui.form .ui.action.input.left input[type="url"] {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+}
.ui.form textarea:focus {
color: @textAreaFocusColor;
border-color: @textAreaFocusBorderColor;
@@ -392,302 +455,326 @@
-webkit-appearance: none;
}
-
-/*--------------------
- Success
----------------------*/
-
-/* On Form */
-.ui.form.success .success.message:not(:empty) {
- display: block;
-}
-.ui.form.success .compact.success.message:not(:empty) {
- display: inline-block;
-}
-.ui.form.success .icon.success.message:not(:empty) {
- display: flex;
-}
-
-/*--------------------
- Warning
----------------------*/
-
-/* On Form */
-.ui.form.warning .warning.message:not(:empty) {
- display: block;
-}
-.ui.form.warning .compact.warning.message:not(:empty) {
- display: inline-block;
-}
-.ui.form.warning .icon.warning.message:not(:empty) {
- display: flex;
-}
-
-/*--------------------
- Error
----------------------*/
-
-/* On Form */
-.ui.form.error .error.message:not(:empty) {
- display: block;
-}
-.ui.form.error .compact.error.message:not(:empty) {
- display: inline-block;
-}
-.ui.form.error .icon.error.message:not(:empty) {
- display: flex;
-}
-
-/* On Field(s) */
-.ui.form .fields.error .field label,
-.ui.form .field.error label,
-.ui.form .fields.error .field .input,
-.ui.form .field.error .input {
- color: @formErrorColor;
-}
-
-.ui.form .fields.error .field .corner.label,
-.ui.form .field.error .corner.label {
- border-color: @formErrorColor;
- color: @white;
-}
-
-.ui.form .fields.error .field textarea,
-.ui.form .fields.error .field select,
-.ui.form .fields.error .field input:not([type]),
-.ui.form .fields.error .field input[type="date"],
-.ui.form .fields.error .field input[type="datetime-local"],
-.ui.form .fields.error .field input[type="email"],
-.ui.form .fields.error .field input[type="number"],
-.ui.form .fields.error .field input[type="password"],
-.ui.form .fields.error .field input[type="search"],
-.ui.form .fields.error .field input[type="tel"],
-.ui.form .fields.error .field input[type="time"],
-.ui.form .fields.error .field input[type="text"],
-.ui.form .fields.error .field input[type="file"],
-.ui.form .fields.error .field input[type="url"],
-.ui.form .field.error textarea,
-.ui.form .field.error select,
-.ui.form .field.error input:not([type]),
-.ui.form .field.error input[type="date"],
-.ui.form .field.error input[type="datetime-local"],
-.ui.form .field.error input[type="email"],
-.ui.form .field.error input[type="number"],
-.ui.form .field.error input[type="password"],
-.ui.form .field.error input[type="search"],
-.ui.form .field.error input[type="tel"],
-.ui.form .field.error input[type="time"],
-.ui.form .field.error input[type="text"],
-.ui.form .field.error input[type="file"],
-.ui.form .field.error input[type="url"] {
- background: @formErrorBackground;
- border-color: @formErrorBorder;
- color: @formErrorColor;
- border-radius: @inputErrorBorderRadius;
- box-shadow: @inputErrorBoxShadow;
-}
-.ui.form .field.error textarea:focus,
-.ui.form .field.error select:focus,
-.ui.form .field.error input:not([type]):focus,
-.ui.form .field.error input[type="date"]:focus,
-.ui.form .field.error input[type="datetime-local"]:focus,
-.ui.form .field.error input[type="email"]:focus,
-.ui.form .field.error input[type="number"]:focus,
-.ui.form .field.error input[type="password"]:focus,
-.ui.form .field.error input[type="search"]:focus,
-.ui.form .field.error input[type="tel"]:focus,
-.ui.form .field.error input[type="time"]:focus,
-.ui.form .field.error input[type="text"]:focus,
-.ui.form .field.error input[type="file"]:focus,
-.ui.form .field.error input[type="url"]:focus {
- background: @inputErrorFocusBackground;
- border-color: @inputErrorFocusBorder;
- color: @inputErrorFocusColor;
-
- -webkit-appearance: none;
- box-shadow: @inputErrorFocusBoxShadow;
-}
-
-/* Preserve Native Select Stylings */
-.ui.form .field.error select {
- -webkit-appearance: menulist-button;
-}
-
-/*------------------
- Dropdown Error
---------------------*/
-
-.ui.form .fields.error .field .ui.dropdown,
-.ui.form .fields.error .field .ui.dropdown .item,
-.ui.form .field.error .ui.dropdown,
-.ui.form .field.error .ui.dropdown .text,
-.ui.form .field.error .ui.dropdown .item {
- background: @formErrorBackground;
- color: @formErrorColor;
-}
-.ui.form .fields.error .field .ui.dropdown,
-.ui.form .field.error .ui.dropdown {
- border-color: @formErrorBorder !important;
-}
-.ui.form .fields.error .field .ui.dropdown:hover,
-.ui.form .field.error .ui.dropdown:hover {
- border-color: @formErrorBorder !important;
-}
-.ui.form .fields.error .field .ui.dropdown:hover .menu,
-.ui.form .field.error .ui.dropdown:hover .menu {
- border-color: @formErrorBorder;
-}
-.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
-.ui.form .field.error .ui.multiple.selection.dropdown > .label {
- background-color: @dropdownErrorLabelBackground;
- color: @dropdownErrorLabelColor;
-}
-
-/* Hover */
-.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
-.ui.form .field.error .ui.dropdown .menu .item:hover {
- background-color: @dropdownErrorHoverBackground;
-}
-
-/* Selected */
-.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
-.ui.form .field.error .ui.dropdown .menu .selected.item {
- background-color: @dropdownErrorSelectedBackground;
-}
-
-
-/* Active */
-.ui.form .fields.error .field .ui.dropdown .menu .active.item,
-.ui.form .field.error .ui.dropdown .menu .active.item {
- background-color: @dropdownErrorActiveBackground !important;
-}
-
-/*--------------------
- Checkbox Error
----------------------*/
-
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
- color: @formErrorColor;
-}
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
- background: @formErrorBackground;
- border-color: @formErrorBorder;
-}
-.ui.form .fields.error .field .checkbox label:after,
-.ui.form .field.error .checkbox label:after,
-.ui.form .fields.error .field .checkbox .box:after,
-.ui.form .field.error .checkbox .box:after {
- color: @formErrorColor;
-}
-
-/*--------------------
- Disabled
----------------------*/
-
-.ui.form .disabled.fields .field,
-.ui.form .disabled.field,
-.ui.form .field :disabled {
- pointer-events: none;
- opacity: @disabledOpacity;
-}
-.ui.form .field.disabled > label,
-.ui.form .fields.disabled > label {
- opacity: @disabledLabelOpacity;
-}
-.ui.form .field.disabled :disabled {
- opacity: 1;
+& when (@variationFormStates) {
+ /*--------------------
+ States
+ ---------------------*/
+ each(@formStates, {
+ @state: replace(@key, '@', '');
+ @c: @formStates[@@state][color];
+ @bg: @formStates[@@state][background];
+ @bdc: @formStates[@@state][borderColor];
+
+ /* On Form */
+ .ui.form.@{state} .@{state}.message:not(:empty) {
+ display: block;
+ }
+ .ui.form.@{state} .compact.@{state}.message:not(:empty) {
+ display: inline-block;
+ }
+ .ui.form.@{state} .icon.@{state}.message:not(:empty) {
+ display: flex;
+ }
+
+ /* On Field(s) */
+ .ui.form .fields.@{state} .@{state}.message:not(:empty),
+ .ui.form .field.@{state} .@{state}.message:not(:empty) {
+ display: block;
+ }
+ .ui.form .fields.@{state} .compact.@{state}.message:not(:empty),
+ .ui.form .field.@{state} .compact.@{state}.message:not(:empty) {
+ display: inline-block;
+ }
+ .ui.form .fields.@{state} .icon.@{state}.message:not(:empty),
+ .ui.form .field.@{state} .icon.@{state}.message:not(:empty) {
+ display: flex;
+ }
+
+ .ui.ui.form .fields.@{state} .field label,
+ .ui.ui.form .field.@{state} label,
+ .ui.ui.form .fields.@{state} .field .input,
+ .ui.ui.form .field.@{state} .input {
+ color: @c;
+ }
+
+ .ui.form .fields.@{state} .field .corner.label,
+ .ui.form .field.@{state} .corner.label {
+ border-color: @c;
+ color: @formStates[@@state][cornerLabelColor];
+ }
+
+ .ui.form .fields.@{state} .field textarea,
+ .ui.form .fields.@{state} .field select,
+ .ui.form .fields.@{state} .field input:not([type]),
+ .ui.form .fields.@{state} .field input[type="date"],
+ .ui.form .fields.@{state} .field input[type="datetime-local"],
+ .ui.form .fields.@{state} .field input[type="email"],
+ .ui.form .fields.@{state} .field input[type="number"],
+ .ui.form .fields.@{state} .field input[type="password"],
+ .ui.form .fields.@{state} .field input[type="search"],
+ .ui.form .fields.@{state} .field input[type="tel"],
+ .ui.form .fields.@{state} .field input[type="time"],
+ .ui.form .fields.@{state} .field input[type="text"],
+ .ui.form .fields.@{state} .field input[type="file"],
+ .ui.form .fields.@{state} .field input[type="url"],
+ .ui.form .field.@{state} textarea,
+ .ui.form .field.@{state} select,
+ .ui.form .field.@{state} input:not([type]),
+ .ui.form .field.@{state} input[type="date"],
+ .ui.form .field.@{state} input[type="datetime-local"],
+ .ui.form .field.@{state} input[type="email"],
+ .ui.form .field.@{state} input[type="number"],
+ .ui.form .field.@{state} input[type="password"],
+ .ui.form .field.@{state} input[type="search"],
+ .ui.form .field.@{state} input[type="tel"],
+ .ui.form .field.@{state} input[type="time"],
+ .ui.form .field.@{state} input[type="text"],
+ .ui.form .field.@{state} input[type="file"],
+ .ui.form .field.@{state} input[type="url"] {
+ color: @c;
+ background: @bg;
+ border-color: @formStates[@@state][borderColor];
+ border-radius: @formStates[@@state][borderRadius];
+ box-shadow: @formStates[@@state][boxShadow];
+ }
+
+ .ui.form .field.@{state} textarea:focus,
+ .ui.form .field.@{state} select:focus,
+ .ui.form .field.@{state} input:not([type]):focus,
+ .ui.form .field.@{state} input[type="date"]:focus,
+ .ui.form .field.@{state} input[type="datetime-local"]:focus,
+ .ui.form .field.@{state} input[type="email"]:focus,
+ .ui.form .field.@{state} input[type="number"]:focus,
+ .ui.form .field.@{state} input[type="password"]:focus,
+ .ui.form .field.@{state} input[type="search"]:focus,
+ .ui.form .field.@{state} input[type="tel"]:focus,
+ .ui.form .field.@{state} input[type="time"]:focus,
+ .ui.form .field.@{state} input[type="text"]:focus,
+ .ui.form .field.@{state} input[type="file"]:focus,
+ .ui.form .field.@{state} input[type="url"]:focus {
+ background: @formStates[@@state][inputFocusBackground];
+ border-color: @formStates[@@state][inputFocusBorderColor];
+ color: @formStates[@@state][inputFocusColor];
+
+ box-shadow: @formStates[@@state][inputFocusBoxShadow];
+ }
+
+ /* Preserve Native Select Stylings */
+ .ui.form .field.@{state} select {
+ -webkit-appearance: menulist-button;
+ }
+
+ /*------------------
+ Input State
+ --------------------*/
+ /* Transparent */
+ .ui.form .field.@{state} .transparent.input input,
+ .ui.form .field.@{state} .transparent.input textarea,
+ .ui.form .field.@{state} input.transparent,
+ .ui.form .field.@{state} textarea.transparent {
+ background-color: @formStates[@@state][transparentBackground] !important;
+ color: @formStates[@@state][transparentColor] !important;
+ }
+
+ /* Autofilled */
+ .ui.form .@{state}.@{state} input:-webkit-autofill {
+ box-shadow: 0 0 0 100px @formStates[@@state][inputAutoFillBackground] inset !important;
+ border-color: @formStates[@@state][inputAutoFillBorderColor] !important;
+ }
+
+ /* Placeholder */
+ .ui.form .@{state} ::-webkit-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor];
+ }
+ .ui.form .@{state} :-ms-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor] !important;
+ }
+ .ui.form .@{state} ::-moz-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor];
+ }
+
+ .ui.form .@{state} :focus::-webkit-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor];
+ }
+ .ui.form .@{state} :focus:-ms-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor] !important;
+ }
+ .ui.form .@{state} :focus::-moz-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor];
+ }
+
+ /*------------------
+ Dropdown State
+ --------------------*/
+
+ .ui.form .fields.@{state} .field .ui.dropdown,
+ .ui.form .fields.@{state} .field .ui.dropdown .item,
+ .ui.form .field.@{state} .ui.dropdown,
+ .ui.form .field.@{state} .ui.dropdown .text,
+ .ui.form .field.@{state} .ui.dropdown .item {
+ background: @bg;
+ color: @c;
+ }
+ .ui.form .fields.@{state} .field .ui.dropdown,
+ .ui.form .field.@{state} .ui.dropdown {
+ border-color: @bdc !important;
+ }
+ .ui.form .fields.@{state} .field .ui.dropdown:hover,
+ .ui.form .field.@{state} .ui.dropdown:hover {
+ border-color: @bdc !important;
+ }
+ .ui.form .fields.@{state} .field .ui.dropdown:hover .menu,
+ .ui.form .field.@{state} .ui.dropdown:hover .menu {
+ border-color: @bdc;
+ }
+ .ui.form .fields.@{state} .field .ui.multiple.selection.dropdown > .label,
+ .ui.form .field.@{state} .ui.multiple.selection.dropdown > .label {
+ background-color: @formStates[@@state][dropdownLabelBackground];
+ color: @formStates[@@state][dropdownLabelColor];
+ }
+
+ /* Hover */
+ .ui.form .fields.@{state} .field .ui.dropdown .menu .item:hover,
+ .ui.form .field.@{state} .ui.dropdown .menu .item:hover {
+ background-color: @formStates[@@state][dropdownHoverBackground];
+ }
+
+ /* Selected */
+ .ui.form .fields.@{state} .field .ui.dropdown .menu .selected.item,
+ .ui.form .field.@{state} .ui.dropdown .menu .selected.item {
+ background-color: @formStates[@@state][dropdownSelectedBackground];
+ }
+
+ /* Active */
+ .ui.form .fields.@{state} .field .ui.dropdown .menu .active.item,
+ .ui.form .field.@{state} .ui.dropdown .menu .active.item {
+ background-color: @formStates[@@state][dropdownActiveBackground] !important;
+ }
+
+ /*--------------------
+ Checkbox State
+ ---------------------*/
+ .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label,
+ .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label,
+ .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box,
+ .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box {
+ color: @c;
+ }
+ .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
+ .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before,
+ .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box:before,
+ .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box:before {
+ background: @bg;
+ border-color: @bdc;
+ }
+ .ui.form .fields.@{state} .field .checkbox label:after,
+ .ui.form .field.@{state} .checkbox label:after,
+ .ui.form .fields.@{state} .field .checkbox .box:after,
+ .ui.form .field.@{state} .checkbox .box:after {
+ color: @c;
+ }
+ })
+}
+
+& when (@variationFormDisabled) {
+ /*--------------------
+ Disabled
+ ---------------------*/
+
+ .ui.form .disabled.fields .field,
+ .ui.form .disabled.field,
+ .ui.form .field :disabled {
+ pointer-events: none;
+ opacity: @disabledOpacity;
+ }
+ .ui.form .field.disabled > label,
+ .ui.form .fields.disabled > label {
+ opacity: @disabledLabelOpacity;
+ }
+ .ui.form .field.disabled :disabled {
+ opacity: 1;
+ }
}
+& when (@variationFormLoading) {
+ /*--------------
+ Loading
+ ---------------*/
-/*--------------
- Loading
----------------*/
-
-.ui.loading.form {
- position: relative;
- cursor: default;
- pointer-events: none;
-}
-.ui.loading.form:before {
- position: absolute;
- content: '';
- top: 0%;
- left: 0%;
- background: @loaderDimmerColor;
- width: 100%;
- height: 100%;
- z-index: @loaderDimmerZIndex;
-}
-.ui.loading.form:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
+ .ui.loading.form {
+ position: relative;
+ cursor: default;
+ pointer-events: none;
+ }
+ .ui.loading.form:before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ background: @loaderDimmerColor;
+ width: 100%;
+ height: 100%;
+ z-index: @loaderDimmerZIndex;
+ }
- animation: form-spin @loaderSpeed linear;
- animation-iteration-count: infinite;
+ .ui.loading.form.segments:before {
+ border-radius: @defaultBorderRadius;
+ }
- border-radius: @circularRadius;
+ .ui.loading.form:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
- border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
- border-style: solid;
- border-width: @loaderLineWidth;
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
- box-shadow: 0px 0px 0px 1px transparent;
- visibility: visible;
- z-index: @loaderLineZIndex;
-}
+ animation: loader @loaderSpeed infinite linear;
+ border: @loaderLineWidth solid @loaderLineColor;
+ border-radius: @circularRadius;
-@keyframes form-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
+ box-shadow: 0 0 0 1px transparent;
+ visibility: visible;
+ z-index: @loaderLineZIndex;
}
}
-
/*******************************
Element Types
*******************************/
-/*--------------------
- Required Field
----------------------*/
-
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after,
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after {
- margin: @requiredMargin;
- content: @requiredContent;
- color: @requiredColor;
-}
+& when (@variationFormRequired) {
+ /*--------------------
+ Required Field
+ ---------------------*/
+
+ .ui.form .required.fields:not(.grouped) > .field > label:after,
+ .ui.form .required.fields.grouped > label:after,
+ .ui.form .required.field > label:after,
+ .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+ .ui.form .required.field > .checkbox:after,
+ .ui.form label.required:after {
+ margin: @requiredMargin;
+ content: @requiredContent;
+ color: @requiredColor;
+ }
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after {
- display: inline-block;
- vertical-align: top;
-}
+ .ui.form .required.fields:not(.grouped) > .field > label:after,
+ .ui.form .required.fields.grouped > label:after,
+ .ui.form .required.field > label:after,
+ .ui.form label.required:after {
+ display: inline-block;
+ vertical-align: top;
+ }
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after {
- position: absolute;
- top: 0%;
- left: 100%;
+ .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+ .ui.form .required.field > .checkbox:after {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ }
}
@@ -695,71 +782,80 @@
Variations
*******************************/
-
-/*--------------------
- Inverted Colors
----------------------*/
-
-.ui.inverted.form label,
-.ui.form .inverted.segment label,
-.ui.form .inverted.segment .ui.checkbox label,
-.ui.form .inverted.segment .ui.checkbox .box,
-.ui.inverted.form .ui.checkbox label,
-.ui.inverted.form .ui.checkbox .box,
-.ui.inverted.form .inline.fields > label,
-.ui.inverted.form .inline.fields .field > label,
-.ui.inverted.form .inline.fields .field > p,
-.ui.inverted.form .inline.field > label,
-.ui.inverted.form .inline.field > p {
- color: @invertedLabelColor;
-}
-
-/* Inverted Field */
-.ui.inverted.form input:not([type]),
-.ui.inverted.form input[type="date"],
-.ui.inverted.form input[type="datetime-local"],
-.ui.inverted.form input[type="email"],
-.ui.inverted.form input[type="number"],
-.ui.inverted.form input[type="password"],
-.ui.inverted.form input[type="search"],
-.ui.inverted.form input[type="tel"],
-.ui.inverted.form input[type="time"],
-.ui.inverted.form input[type="text"],
-.ui.inverted.form input[type="file"],
-.ui.inverted.form input[type="url"] {
- background: @invertedInputBackground;
- border-color: @invertedInputBorderColor;
- color: @invertedInputColor;
- box-shadow: @invertedInputBoxShadow;
+& when (@variationFormInverted) {
+ /*--------------------
+ Inverted Colors
+ ---------------------*/
+
+ .ui.inverted.form label,
+ .ui.form .inverted.segment label,
+ .ui.form .inverted.segment .ui.checkbox label,
+ .ui.form .inverted.segment .ui.checkbox .box,
+ .ui.inverted.form .ui.checkbox label,
+ .ui.inverted.form .ui.checkbox .box,
+ .ui.inverted.form .inline.fields > label,
+ .ui.inverted.form .inline.fields .field > label,
+ .ui.inverted.form .inline.fields .field > p,
+ .ui.inverted.form .inline.field > label,
+ .ui.inverted.form .inline.field > p {
+ color: @invertedLabelColor;
+ }
+ .ui.inverted.loading.form {
+ color: @invertedLoaderLineColor;
+ }
+ .ui.inverted.loading.form:before {
+ background: @loaderInvertedDimmerColor;
+ }
+ /* Inverted Field */
+ .ui.inverted.form input:not([type]),
+ .ui.inverted.form input[type="date"],
+ .ui.inverted.form input[type="datetime-local"],
+ .ui.inverted.form input[type="email"],
+ .ui.inverted.form input[type="number"],
+ .ui.inverted.form input[type="password"],
+ .ui.inverted.form input[type="search"],
+ .ui.inverted.form input[type="tel"],
+ .ui.inverted.form input[type="time"],
+ .ui.inverted.form input[type="text"],
+ .ui.inverted.form input[type="file"],
+ .ui.inverted.form input[type="url"] {
+ background: @invertedInputBackground;
+ border-color: @invertedInputBorderColor;
+ color: @invertedInputColor;
+ box-shadow: @invertedInputBoxShadow;
+ }
}
+& when (@variationFormGrouped) {
+ /*--------------------
+ Field Groups
+ ---------------------*/
-/*--------------------
- Field Groups
----------------------*/
+ /* Grouped Vertically */
-/* Grouped Vertically */
-.ui.form .grouped.fields {
- display: block;
- margin: @groupedMargin;
-}
-.ui.form .grouped.fields:last-child {
- margin-bottom: 0em;
-}
+ .ui.form .grouped.fields {
+ display: block;
+ margin: @groupedMargin;
+ }
-.ui.form .grouped.fields > label {
- margin: @groupedLabelMargin;
- color: @groupedLabelColor;
- font-size: @groupedLabelFontSize;
- font-weight: @groupedLabelFontWeight;
- text-transform: @groupedLabelTextTransform;
-}
+ .ui.form .grouped.fields:last-child {
+ margin-bottom: 0;
+ }
-.ui.form .grouped.fields .field,
-.ui.form .grouped.inline.fields .field {
- display: block;
- margin: @groupedFieldMargin;
- padding: 0em;
+ .ui.form .grouped.fields > label {
+ margin: @groupedLabelMargin;
+ color: @groupedLabelColor;
+ font-size: @groupedLabelFontSize;
+ font-weight: @groupedLabelFontWeight;
+ text-transform: @groupedLabelTextTransform;
+ }
+
+ .ui.form .grouped.fields .field,
+ .ui.form .grouped.inline.fields .field {
+ display: block;
+ margin: @groupedFieldMargin;
+ padding: 0;
+ }
}
/*--------------------
@@ -847,7 +943,7 @@
.ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,
.ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {
width: @oneColumn !important;
- margin: 0em 0em @rowDistance;
+ margin: 0 0 @rowDistance;
}
}
@@ -936,7 +1032,7 @@
width: @oneColumn !important;
}
.ui.form .fields {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
}
@@ -950,74 +1046,86 @@
flex: 1 1 auto;
}
-/*--------------------
- Inline Fields
----------------------*/
+& when (@variationFormInline) {
+ /*--------------------
+ Inline Fields
+ ---------------------*/
-.ui.form .inline.fields {
- margin: @fieldMargin;
- align-items: center;
-}
-.ui.form .inline.fields .field {
- margin: 0em;
- padding: @inlineFieldsMargin;
-}
+ .ui.form .inline.fields {
+ margin: @fieldMargin;
+ align-items: center;
+ }
+ .ui.form .inline.fields .field {
+ margin: 0;
+ padding: @inlineFieldsMargin;
+ }
-/* Inline Label */
-.ui.form .inline.fields > label,
-.ui.form .inline.fields .field > label,
-.ui.form .inline.fields .field > p,
-.ui.form .inline.field > label,
-.ui.form .inline.field > p {
- display: inline-block;
- width: auto;
- margin-top: 0em;
- margin-bottom: 0em;
- vertical-align: baseline;
- font-size: @inlineLabelFontSize;
- font-weight: @inlineLabelFontWeight;
- color: @inlineLabelColor;
- text-transform: @inlineLabelTextTransform;
-}
-
-/* Grouped Inline Label */
-.ui.form .inline.fields > label {
- margin: @groupedInlineLabelMargin;
-}
-
-/* Inline Input */
-.ui.form .inline.fields .field > input,
-.ui.form .inline.fields .field > select,
-.ui.form .inline.field > input,
-.ui.form .inline.field > select {
- display: inline-block;
- width: auto;
+ /* Inline Label */
+ .ui.form .inline.fields > label,
+ .ui.form .inline.fields .field > label,
+ .ui.form .inline.fields .field > p,
+ .ui.form .inline.field > label,
+ .ui.form .inline.field > p {
+ display: inline-block;
+ width: auto;
+ margin-top: 0;
+ margin-bottom: 0;
+ vertical-align: baseline;
+ font-size: @inlineLabelFontSize;
+ font-weight: @inlineLabelFontWeight;
+ color: @inlineLabelColor;
+ text-transform: @inlineLabelTextTransform;
+ }
- margin-top: 0em;
- margin-bottom: 0em;
+ /* Grouped Inline Label */
+ .ui.form .inline.fields > label {
+ margin: @groupedInlineLabelMargin;
+ }
- vertical-align: middle;
- font-size: @inlineInputSize;
-}
+ /* Inline Input */
+ .ui.form .inline.fields .field > input,
+ .ui.form .inline.fields .field > select,
+ .ui.form .inline.field > input,
+ .ui.form .inline.field > select {
+ display: inline-block;
+ width: auto;
-/* Label */
-.ui.form .inline.fields .field > :first-child,
-.ui.form .inline.field > :first-child {
- margin: 0em @inlineLabelDistance 0em 0em;
-}
-.ui.form .inline.fields .field > :only-child,
-.ui.form .inline.field > :only-child {
- margin: 0em;
-}
+ margin-top: 0;
+ margin-bottom: 0;
-/* Wide */
-.ui.form .inline.fields .wide.field {
- display: flex;
- align-items: center;
-}
-.ui.form .inline.fields .wide.field > input,
-.ui.form .inline.fields .wide.field > select {
- width: 100%;
+ vertical-align: middle;
+ font-size: @inlineInputSize;
+ }
+
+ .ui.form .inline.fields .field .calendar:not(.popup),
+ .ui.form .inline.field .calendar:not(.popup) {
+ display:inline-block;
+ }
+
+ .ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
+ .ui.form .inline.field .calendar:not(.popup) > .input > input {
+ width: @inlineCalendarWidth;
+ }
+
+ /* Label */
+ .ui.form .inline.fields .field > :first-child,
+ .ui.form .inline.field > :first-child {
+ margin: 0 @inlineLabelDistance 0 0;
+ }
+ .ui.form .inline.fields .field > :only-child,
+ .ui.form .inline.field > :only-child {
+ margin: 0;
+ }
+
+ /* Wide */
+ .ui.form .inline.fields .wide.field {
+ display: flex;
+ align-items: center;
+ }
+ .ui.form .inline.fields .wide.field > input,
+ .ui.form .inline.fields .wide.field > select {
+ width: 100%;
+ }
}
@@ -1025,29 +1133,21 @@
Sizes
---------------------*/
-.ui.mini.form {
- font-size: @mini;
-}
-.ui.tiny.form {
- font-size: @tiny;
-}
-.ui.small.form {
- font-size: @small;
-}
-.ui.form {
+.ui.form,
+.ui.form .field .dropdown,
+.ui.form .field .dropdown .menu > .item {
font-size: @medium;
}
-.ui.large.form {
- font-size: @large;
-}
-.ui.big.form {
- font-size: @big;
-}
-.ui.huge.form {
- font-size: @huge;
-}
-.ui.massive.form {
- font-size: @massive;
+& when not (@variationFormSizes = false) {
+ each(@variationFormSizes, {
+ @s: @@value;
+ .ui.@{value}.form,
+ .ui.@{value}.form .field .dropdown,
+ .ui.@{value}.form .field .dropdown .menu > .item {
+ font-size: @s;
+ }
+ })
}
+
.loadUIOverrides();
diff --git a/ui/src/definitions/collections/grid.less b/ui/src/definitions/collections/grid.less
index ba1b53572e3..0cbf3de07b3 100644
--- a/ui/src/definitions/collections/grid.less
+++ b/ui/src/definitions/collections/grid.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Grid
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Grid
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -26,7 +26,7 @@
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
- padding: 0em;
+ padding: 0;
}
/*----------------------
@@ -87,7 +87,7 @@
justify-content: inherit;
align-items: stretch;
width: 100% !important;
- padding: 0rem;
+ padding: 0;
padding-top: (@rowSpacing / 2);
padding-bottom: (@rowSpacing / 2);
}
@@ -102,8 +102,8 @@
padding-bottom: (@rowSpacing / 2);
}
.ui.grid > .row > .column {
- margin-top: 0em;
- margin-bottom: 0em;
+ margin-top: 0;
+ margin-bottom: 0;
}
/*-------------------
@@ -121,10 +121,10 @@
/* Collapse Margin on Consecutive Grid */
.ui.grid > .ui.grid:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.grid > .ui.grid:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/* Segment inside Aligned Grid */
@@ -139,7 +139,7 @@
margin: (@rowSpacing / 2) (@gutterWidth / 2);
}
.ui.grid .column + .ui.vertical.divider {
- height: ~"calc(50% - "(@rowSpacing/2)~")";
+ height: e(%("calc(50%% - %d)", @rowSpacing / 2));
}
/* Remove Border on Last Horizontal Segment */
@@ -152,54 +152,55 @@
Variations
*******************************/
-
-/*-----------------------
- Page Grid
--------------------------*/
-
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.page.grid {
- width: @mobileWidth;
- padding-left: @mobileGutter;
- padding-right: @mobileGutter;
- margin-left: 0em;
- margin-right: 0em;
- }
-}
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.page.grid {
- width: @tabletWidth;
- margin-left: @tabletMargin;
- margin-right: @tabletMargin;
- padding-left: @tabletGutter;
- padding-right: @tabletGutter;
- }
-}
-@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
- .ui.page.grid {
- width: @computerWidth;
- margin-left: @computerMargin;
- margin-right: @computerMargin;
- padding-left: @computerGutter;
- padding-right: @computerGutter;
- }
-}
-@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
- .ui.page.grid {
- width: @largeMonitorWidth;
- margin-left: @largeMonitorMargin;
- margin-right: @largeMonitorMargin;
- padding-left: @largeMonitorGutter;
- padding-right: @largeMonitorGutter;
- }
-}
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.page.grid {
- width: @widescreenMonitorWidth;
- margin-left: @widescreenMargin;
- margin-right: @widescreenMargin;
- padding-left: @widescreenMonitorGutter;
- padding-right: @widescreenMonitorGutter;
+& when (@variationGridPage) {
+ /*-----------------------
+ Page Grid
+ -------------------------*/
+
+ @media only screen and (max-width: @largestMobileScreen) {
+ .ui.page.grid {
+ width: @mobileWidth;
+ padding-left: @mobileGutter;
+ padding-right: @mobileGutter;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui.page.grid {
+ width: @tabletWidth;
+ margin-left: @tabletMargin;
+ margin-right: @tabletMargin;
+ padding-left: @tabletGutter;
+ padding-right: @tabletGutter;
+ }
+ }
+ @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+ .ui.page.grid {
+ width: @computerWidth;
+ margin-left: @computerMargin;
+ margin-right: @computerMargin;
+ padding-left: @computerGutter;
+ padding-right: @computerGutter;
+ }
+ }
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
+ .ui.page.grid {
+ width: @largeMonitorWidth;
+ margin-left: @largeMonitorMargin;
+ margin-right: @largeMonitorMargin;
+ padding-left: @largeMonitorGutter;
+ padding-right: @largeMonitorGutter;
+ }
+ }
+ @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+ .ui.page.grid {
+ width: @widescreenMonitorWidth;
+ margin-left: @widescreenMargin;
+ margin-right: @widescreenMargin;
+ padding-left: @widescreenMonitorGutter;
+ padding-right: @widescreenMonitorGutter;
+ }
}
}
@@ -330,9 +331,11 @@
width: @sixteenColumn !important;
}
-/* Celled Page */
-.ui.celled.page.grid {
- box-shadow: none;
+& when (@variationGridCelled) and (@variationGridPage){
+ /* Celled Page */
+ .ui.celled.page.grid {
+ box-shadow: none;
+ }
}
/*-------------------
@@ -941,849 +944,793 @@
}
}
-/*----------------------
- Centered
------------------------*/
-
-.ui.centered.grid,
-.ui.centered.grid > .row,
-.ui.grid > .centered.row {
- text-align: center;
- justify-content: center;
-}
-.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
-.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
-.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
- text-align: left;
-}
-
-.ui.grid > .centered.column,
-.ui.grid > .row > .centered.column {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-/*----------------------
- Relaxed
------------------------*/
-
-.ui.relaxed.grid > .column:not(.row),
-.ui.relaxed.grid > .row > .column,
-.ui.grid > .relaxed.row > .column {
- padding-left: (@relaxedGutterWidth / 2);
- padding-right: (@relaxedGutterWidth / 2);
-}
-
-.ui[class*="very relaxed"].grid > .column:not(.row),
-.ui[class*="very relaxed"].grid > .row > .column,
-.ui.grid > [class*="very relaxed"].row > .column {
- padding-left: (@veryRelaxedGutterWidth / 2);
- padding-right: (@veryRelaxedGutterWidth / 2);
-}
-
-/* Coupling with UI Divider */
-.ui.relaxed.grid .row + .ui.divider,
-.ui.grid .relaxed.row + .ui.divider {
- margin-left: (@relaxedGutterWidth / 2);
- margin-right: (@relaxedGutterWidth / 2);
-}
-.ui[class*="very relaxed"].grid .row + .ui.divider,
-.ui.grid [class*="very relaxed"].row + .ui.divider {
- margin-left: (@veryRelaxedGutterWidth / 2);
- margin-right: (@veryRelaxedGutterWidth / 2);
-}
-
-
-/*----------------------
- Padded
------------------------*/
-
-.ui.padded.grid:not(.vertically):not(.horizontally) {
- margin: 0em !important;
-}
-[class*="horizontally padded"].ui.grid {
- margin-left: 0em !important;
- margin-right: 0em !important;
-}
-[class*="vertically padded"].ui.grid {
- margin-top: 0em !important;
- margin-bottom: 0em !important;
-}
-
-/*----------------------
- "Floated"
------------------------*/
-
-.ui.grid [class*="left floated"].column {
- margin-right: auto;
-}
-.ui.grid [class*="right floated"].column {
- margin-left: auto;
-}
-
-
-/*----------------------
- Divided
------------------------*/
-
-.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
-.ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
- box-shadow: @dividedBorder;
-}
-
-/* Swap from padding to margin on columns to have dividers align */
-.ui[class*="vertically divided"].grid > .column:not(.row),
-.ui[class*="vertically divided"].grid > .row > .column {
- margin-top: (@rowSpacing / 2);
- margin-bottom: (@rowSpacing / 2);
- padding-top: 0rem;
- padding-bottom: 0rem;
-}
-.ui[class*="vertically divided"].grid > .row {
- margin-top: 0em;
- margin-bottom: 0em;
-}
-
-
-
-/* No divider on first column on row */
-.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
-.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: none;
-}
+& when (@variationGridCentered) {
+ /*----------------------
+ Centered
+ -----------------------*/
-/* No space on top of first row */
-.ui[class*="vertically divided"].grid > .row:first-child > .column {
- margin-top: 0em;
-}
-
-
-/* Divided Row */
-.ui.grid > .divided.row > .column {
- box-shadow: @dividedBorder;
-}
-.ui.grid > .divided.row > .column:first-child {
- box-shadow: none;
-}
-
-/* Vertically Divided */
-.ui[class*="vertically divided"].grid > .row {
- position: relative;
-}
-.ui[class*="vertically divided"].grid > .row:before {
- position: absolute;
- content: "";
- top: 0em;
- left: 0px;
-
- width: ~"calc(100% - "@gutterWidth~")";
- height: 1px;
-
- margin: 0% (@gutterWidth / 2);
- box-shadow: @verticallyDividedBorder;
-}
-
-/* Padded Horizontally Divided */
-[class*="horizontally padded"].ui.divided.grid,
-.ui.padded.divided.grid:not(.vertically):not(.horizontally) {
- width: 100%;
-}
-
-/* First Row Vertically Divided */
-.ui[class*="vertically divided"].grid > .row:first-child:before {
- box-shadow: none;
-}
-
-/* Inverted Divided */
-.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
-.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
- box-shadow: @dividedInvertedBorder;
-}
-.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
-.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: none;
-}
-.ui.inverted[class*="vertically divided"].grid > .row:before {
- box-shadow: @verticallyDividedInvertedBorder;
-}
+ .ui.centered.grid,
+ .ui.centered.grid > .row,
+ .ui.grid > .centered.row {
+ text-align: center;
+ justify-content: center;
+ }
+ .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
+ .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
+ .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
+ text-align: left;
+ }
-/* Relaxed */
-.ui.relaxed[class*="vertically divided"].grid > .row:before {
- margin-left: (@relaxedGutterWidth / 2);
- margin-right: (@relaxedGutterWidth / 2);
- width: ~"calc(100% - "@relaxedGutterWidth~")";
-}
-.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
- margin-left: @veryRelaxedGutterWidth;
- margin-right: @veryRelaxedGutterWidth;
- width: ~"calc(100% - "@veryRelaxedGutterWidth~")";
+ .ui.grid > .centered.column,
+ .ui.grid > .row > .centered.column {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
}
-/*----------------------
- Celled
------------------------*/
+& when (@variationGridRelaxed) {
+ /*----------------------
+ Relaxed
+ -----------------------*/
-.ui.celled.grid {
- width: 100%;
- margin: @celledMargin;
- box-shadow: @celledGridDivider;
-}
+ .ui.relaxed.grid > .column:not(.row),
+ .ui.relaxed.grid > .row > .column,
+ .ui.grid > .relaxed.row > .column {
+ padding-left: (@relaxedGutterWidth / 2);
+ padding-right: (@relaxedGutterWidth / 2);
+ }
-.ui.celled.grid > .row {
- width: 100% !important;
- margin: 0em;
- padding: 0em;
- box-shadow: @celledRowDivider;
-}
-.ui.celled.grid > .column:not(.row),
-.ui.celled.grid > .row > .column {
- box-shadow: @celledColumnDivider;
-}
+ .ui[class*="very relaxed"].grid > .column:not(.row),
+ .ui[class*="very relaxed"].grid > .row > .column,
+ .ui.grid > [class*="very relaxed"].row > .column {
+ padding-left: (@veryRelaxedGutterWidth / 2);
+ padding-right: (@veryRelaxedGutterWidth / 2);
+ }
-.ui.celled.grid > .column:first-child,
-.ui.celled.grid > .row > .column:first-child {
- box-shadow: none;
+ /* Coupling with UI Divider */
+ .ui.relaxed.grid .row + .ui.divider,
+ .ui.grid .relaxed.row + .ui.divider {
+ margin-left: (@relaxedGutterWidth / 2);
+ margin-right: (@relaxedGutterWidth / 2);
+ }
+ .ui[class*="very relaxed"].grid .row + .ui.divider,
+ .ui.grid [class*="very relaxed"].row + .ui.divider {
+ margin-left: (@veryRelaxedGutterWidth / 2);
+ margin-right: (@veryRelaxedGutterWidth / 2);
+ }
}
-.ui.celled.grid > .column:not(.row),
-.ui.celled.grid > .row > .column {
- padding: @celledPadding;
-}
-.ui.relaxed.celled.grid > .column:not(.row),
-.ui.relaxed.celled.grid > .row > .column {
- padding: @celledRelaxedPadding;
-}
-.ui[class*="very relaxed"].celled.grid > .column:not(.row),
-.ui[class*="very relaxed"].celled.grid > .row > .column {
- padding: @celledVeryRelaxedPadding;
-}
+& when (@variationGridPadded) {
+ /*----------------------
+ Padded
+ -----------------------*/
-/* Internally Celled */
-.ui[class*="internally celled"].grid {
- box-shadow: none;
- margin: 0em;
-}
-.ui[class*="internally celled"].grid > .row:first-child {
- box-shadow: none;
-}
-.ui[class*="internally celled"].grid > .row > .column:first-child {
- box-shadow: none;
+ .ui.padded.grid:not(.vertically):not(.horizontally) {
+ margin: 0 !important;
+ }
+ [class*="horizontally padded"].ui.grid {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ [class*="vertically padded"].ui.grid {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
}
-/*----------------------
- Vertically Aligned
------------------------*/
+& when (@variationGridFloated) {
+ /*----------------------
+ "Floated"
+ -----------------------*/
-/* Top Aligned */
-.ui[class*="top aligned"].grid > .column:not(.row),
-.ui[class*="top aligned"].grid > .row > .column,
-.ui.grid > [class*="top aligned"].row > .column,
-.ui.grid > [class*="top aligned"].column:not(.row),
-.ui.grid > .row > [class*="top aligned"].column {
- flex-direction: column;
- vertical-align: top;
- align-self: flex-start !important;
-}
-
-/* Middle Aligned */
-.ui[class*="middle aligned"].grid > .column:not(.row),
-.ui[class*="middle aligned"].grid > .row > .column,
-.ui.grid > [class*="middle aligned"].row > .column,
-.ui.grid > [class*="middle aligned"].column:not(.row),
-.ui.grid > .row > [class*="middle aligned"].column {
- flex-direction: column;
- vertical-align: middle;
- align-self: center !important;
-}
-
-/* Bottom Aligned */
-.ui[class*="bottom aligned"].grid > .column:not(.row),
-.ui[class*="bottom aligned"].grid > .row > .column,
-.ui.grid > [class*="bottom aligned"].row > .column,
-.ui.grid > [class*="bottom aligned"].column:not(.row),
-.ui.grid > .row > [class*="bottom aligned"].column {
- flex-direction: column;
- vertical-align: bottom;
- align-self: flex-end !important;
-}
-
-/* Stretched */
-.ui.stretched.grid > .row > .column,
-.ui.stretched.grid > .column,
-.ui.grid > .stretched.row > .column,
-.ui.grid > .stretched.column:not(.row),
-.ui.grid > .row > .stretched.column {
- display: inline-flex !important;
- align-self: stretch;
- flex-direction: column;
-}
-
-.ui.stretched.grid > .row > .column > *,
-.ui.stretched.grid > .column > *,
-.ui.grid > .stretched.row > .column > *,
-.ui.grid > .stretched.column:not(.row) > *,
-.ui.grid > .row > .stretched.column > * {
- flex-grow: 1;
+ .ui.grid [class*="left floated"].column {
+ margin-right: auto;
+ }
+ .ui.grid [class*="right floated"].column {
+ margin-left: auto;
+ }
}
-/*----------------------
- Horizontally Centered
------------------------*/
+& when (@variationGridDivided) {
+ /*----------------------
+ Divided
+ -----------------------*/
-/* Left Aligned */
-.ui[class*="left aligned"].grid > .column,
-.ui[class*="left aligned"].grid > .row > .column,
-.ui.grid > [class*="left aligned"].row > .column,
-.ui.grid > [class*="left aligned"].column.column,
-.ui.grid > .row > [class*="left aligned"].column.column {
- text-align: left;
- align-self: inherit;
-}
-
-/* Center Aligned */
-.ui[class*="center aligned"].grid > .column,
-.ui[class*="center aligned"].grid > .row > .column,
-.ui.grid > [class*="center aligned"].row > .column,
-.ui.grid > [class*="center aligned"].column.column,
-.ui.grid > .row > [class*="center aligned"].column.column {
- text-align: center;
- align-self: inherit;
-}
-.ui[class*="center aligned"].grid {
- justify-content: center;
-}
-
-/* Right Aligned */
-.ui[class*="right aligned"].grid > .column,
-.ui[class*="right aligned"].grid > .row > .column,
-.ui.grid > [class*="right aligned"].row > .column,
-.ui.grid > [class*="right aligned"].column.column,
-.ui.grid > .row > [class*="right aligned"].column.column {
- text-align: right;
- align-self: inherit;
-}
-
-/* Justified */
-.ui.justified.grid > .column,
-.ui.justified.grid > .row > .column,
-.ui.grid > .justified.row > .column,
-.ui.grid > .justified.column.column,
-.ui.grid > .row > .justified.column.column {
- text-align: justify;
- hyphens: auto;
-}
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
+ box-shadow: @dividedBorder;
+ }
-/*----------------------
- Colored
------------------------*/
+ /* Swap from padding to margin on columns to have dividers align */
+ .ui[class*="vertically divided"].grid > .column:not(.row),
+ .ui[class*="vertically divided"].grid > .row > .column {
+ margin-top: (@rowSpacing / 2);
+ margin-bottom: (@rowSpacing / 2);
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .ui[class*="vertically divided"].grid > .row {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
-.ui.grid > .row > .red.column,
-.ui.grid > .row > .orange.column,
-.ui.grid > .row > .yellow.column,
-.ui.grid > .row > .olive.column,
-.ui.grid > .row > .green.column,
-.ui.grid > .row > .teal.column,
-.ui.grid > .row > .blue.column,
-.ui.grid > .row > .violet.column,
-.ui.grid > .row > .purple.column,
-.ui.grid > .row > .pink.column,
-.ui.grid > .row > .brown.column,
-.ui.grid > .row > .grey.column,
-.ui.grid > .row > .black.column {
- margin-top: -(@rowSpacing / 2);
- margin-bottom: -(@rowSpacing / 2);
- padding-top: (@rowSpacing / 2);
- padding-bottom: (@rowSpacing / 2);
-}
-/* Red */
-.ui.grid > .red.row,
-.ui.grid > .red.column,
-.ui.grid > .row > .red.column {
- background-color: @red !important;
- color: @white;
-}
-/* Orange */
-.ui.grid > .orange.row,
-.ui.grid > .orange.column,
-.ui.grid > .row > .orange.column {
- background-color: @orange !important;
- color: @white;
-}
-/* Yellow */
-.ui.grid > .yellow.row,
-.ui.grid > .yellow.column,
-.ui.grid > .row > .yellow.column {
- background-color: @yellow !important;
- color: @white;
-}
-/* Olive */
-.ui.grid > .olive.row,
-.ui.grid > .olive.column,
-.ui.grid > .row > .olive.column {
- background-color: @olive !important;
- color: @white;
-}
-/* Green */
-.ui.grid > .green.row,
-.ui.grid > .green.column,
-.ui.grid > .row > .green.column {
- background-color: @green !important;
- color: @white;
-}
-/* Teal */
-.ui.grid > .teal.row,
-.ui.grid > .teal.column,
-.ui.grid > .row > .teal.column {
- background-color: @teal !important;
- color: @white;
-}
-/* Blue */
-.ui.grid > .blue.row,
-.ui.grid > .blue.column,
-.ui.grid > .row > .blue.column {
- background-color: @blue !important;
- color: @white;
-}
-/* Violet */
-.ui.grid > .violet.row,
-.ui.grid > .violet.column,
-.ui.grid > .row > .violet.column {
- background-color: @violet !important;
- color: @white;
-}
-/* Purple */
-.ui.grid > .purple.row,
-.ui.grid > .purple.column,
-.ui.grid > .row > .purple.column {
- background-color: @purple !important;
- color: @white;
-}
-/* Pink */
-.ui.grid > .pink.row,
-.ui.grid > .pink.column,
-.ui.grid > .row > .pink.column {
- background-color: @pink !important;
- color: @white;
-}
-/* Brown */
-.ui.grid > .brown.row,
-.ui.grid > .brown.column,
-.ui.grid > .row > .brown.column {
- background-color: @brown !important;
- color: @white;
-}
-/* Grey */
-.ui.grid > .grey.row,
-.ui.grid > .grey.column,
-.ui.grid > .row > .grey.column {
- background-color: @grey !important;
- color: @white;
-}
-/* Black */
-.ui.grid > .black.row,
-.ui.grid > .black.column,
-.ui.grid > .row > .black.column {
- background-color: @black !important;
- color: @white;
-}
+ /* No divider on first column on row */
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: none;
+ }
-/*----------------------
- Equal Width
------------------------*/
+ /* No space on top of first row */
+ .ui[class*="vertically divided"].grid > .row:first-child > .column {
+ margin-top: 0;
+ }
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
- display: inline-block;
- flex-grow: 1;
-}
-.ui[class*="equal width"].grid > .wide.column,
-.ui[class*="equal width"].grid > .row > .wide.column,
-.ui.grid > [class*="equal width"].row > .wide.column {
- flex-grow: 0;
-}
+ /* Divided Row */
+ .ui.grid > .divided.row > .column {
+ box-shadow: @dividedBorder;
+ }
+ .ui.grid > .divided.row > .column:first-child {
+ box-shadow: none;
+ }
-/*----------------------
- Reverse
------------------------*/
+ /* Vertically Divided */
+ .ui[class*="vertically divided"].grid > .row {
+ position: relative;
+ }
+ .ui[class*="vertically divided"].grid > .row:before {
+ position: absolute;
+ content: "";
+ top: 0;
+ left: 0;
+ width: e(%("calc(100%% - %d)", @gutterWidth));
+ height: 1px;
-/* Mobile */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui[class*="mobile reversed"].grid,
- .ui[class*="mobile reversed"].grid > .row,
- .ui.grid > [class*="mobile reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="mobile vertically reversed"].grid,
- .ui.stackable[class*="mobile reversed"] {
- flex-direction: column-reverse;
+ margin: 0 (@gutterWidth / 2);
+ box-shadow: @verticallyDividedBorder;
}
- /* Divided Reversed */
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
+ & when (@variationGridPadded) {
+ /* Padded Horizontally Divided */
+ [class*="horizontally padded"].ui.divided.grid,
+ .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
+ width: 100%;
+ }
}
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ /* First Row Vertically Divided */
+ .ui[class*="vertically divided"].grid > .row:first-child:before {
box-shadow: none;
}
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
- }
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
- box-shadow: none;
+ & when (@variationGridInverted) {
+ /* Inverted Divided */
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
+ box-shadow: @dividedInvertedBorder;
+ }
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: none;
+ }
+ .ui.inverted[class*="vertically divided"].grid > .row:before {
+ box-shadow: @verticallyDividedInvertedBorder;
+ }
+ }
+ & when (@variationGridRelaxed) {
+ /* Relaxed */
+ .ui.relaxed[class*="vertically divided"].grid > .row:before {
+ margin-left: (@relaxedGutterWidth / 2);
+ margin-right: (@relaxedGutterWidth / 2);
+ width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
+ }
+ .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+ margin-left: (@veryRelaxedGutterWidth / 2);
+ margin-right: (@veryRelaxedGutterWidth / 2);
+ width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
+ }
+ }
+}
+
+& when (@variationGridCelled) {
+ /*----------------------
+ Celled
+ -----------------------*/
+
+ .ui.celled.grid {
+ width: 100%;
+ margin: @celledMargin;
+ box-shadow: @celledGridDivider;
+ }
+
+ .ui.celled.grid > .row {
+ width: 100% !important;
+ margin: 0;
+ padding: 0;
+ box-shadow: @celledRowDivider;
}
- /* Celled Reversed */
- .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
+ .ui.celled.grid > .column:not(.row),
+ .ui.celled.grid > .row > .column {
box-shadow: @celledColumnDivider;
}
- .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
+
+ .ui.celled.grid > .column:first-child,
+ .ui.celled.grid > .row > .column:first-child {
box-shadow: none;
}
-}
-/* Tablet */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui[class*="tablet reversed"].grid,
- .ui[class*="tablet reversed"].grid > .row,
- .ui.grid > [class*="tablet reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="tablet vertically reversed"].grid {
- flex-direction: column-reverse;
+ .ui.celled.grid > .column:not(.row),
+ .ui.celled.grid > .row > .column {
+ padding: @celledPadding;
}
-
- /* Divided Reversed */
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
+ & when (@variationGridRelaxed) {
+ .ui.relaxed.celled.grid > .column:not(.row),
+ .ui.relaxed.celled.grid > .row > .column {
+ padding: @celledRelaxedPadding;
+ }
+ .ui[class*="very relaxed"].celled.grid > .column:not(.row),
+ .ui[class*="very relaxed"].celled.grid > .row > .column {
+ padding: @celledVeryRelaxedPadding;
+ }
}
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ /* Internally Celled */
+ .ui[class*="internally celled"].grid {
box-shadow: none;
+ margin: 0;
}
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
- }
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+ .ui[class*="internally celled"].grid > .row:first-child {
box-shadow: none;
}
- /* Celled Reversed */
- .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
- box-shadow: @celledColumnDivider;
- }
- .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
+ .ui[class*="internally celled"].grid > .row > .column:first-child {
box-shadow: none;
}
}
-/* Computer */
-@media only screen and (min-width: @computerBreakpoint) {
- .ui[class*="computer reversed"].grid,
- .ui[class*="computer reversed"].grid > .row,
- .ui.grid > [class*="computer reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="computer vertically reversed"].grid {
- flex-direction: column-reverse;
- }
+& when (@variationGridAligned) {
+ /*----------------------
+ Vertically Aligned
+ -----------------------*/
- /* Divided Reversed */
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
+ /* Top Aligned */
+ .ui[class*="top aligned"].grid > .column:not(.row),
+ .ui[class*="top aligned"].grid > .row > .column,
+ .ui.grid > [class*="top aligned"].row > .column,
+ .ui.grid > [class*="top aligned"].column:not(.row),
+ .ui.grid > .row > [class*="top aligned"].column {
+ flex-direction: column;
+ vertical-align: top;
+ align-self: flex-start !important;
}
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
- box-shadow: none;
- }
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
+
+ /* Middle Aligned */
+ .ui[class*="middle aligned"].grid > .column:not(.row),
+ .ui[class*="middle aligned"].grid > .row > .column,
+ .ui.grid > [class*="middle aligned"].row > .column,
+ .ui.grid > [class*="middle aligned"].column:not(.row),
+ .ui.grid > .row > [class*="middle aligned"].column {
+ flex-direction: column;
+ vertical-align: middle;
+ align-self: center !important;
}
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
- box-shadow: none;
+
+ /* Bottom Aligned */
+ .ui[class*="bottom aligned"].grid > .column:not(.row),
+ .ui[class*="bottom aligned"].grid > .row > .column,
+ .ui.grid > [class*="bottom aligned"].row > .column,
+ .ui.grid > [class*="bottom aligned"].column:not(.row),
+ .ui.grid > .row > [class*="bottom aligned"].column {
+ flex-direction: column;
+ vertical-align: bottom;
+ align-self: flex-end !important;
}
- /* Celled Reversed */
- .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
- box-shadow: @celledColumnDivider;
+}
+
+& when (@variationGridStretched) {
+ /* Stretched */
+ .ui.stretched.grid > .row > .column,
+ .ui.stretched.grid > .column,
+ .ui.grid > .stretched.row > .column,
+ .ui.grid > .stretched.column:not(.row),
+ .ui.grid > .row > .stretched.column {
+ display: inline-flex !important;
+ align-self: stretch;
+ flex-direction: column;
}
- .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
- box-shadow: none;
+
+ .ui.stretched.grid > .row > .column > *,
+ .ui.stretched.grid > .column > *,
+ .ui.grid > .stretched.row > .column > *,
+ .ui.grid > .stretched.column:not(.row) > *,
+ .ui.grid > .row > .stretched.column > * {
+ flex-grow: 1;
}
}
+& when (@variationGridAligned) {
+ /*----------------------
+ Horizontally Centered
+ -----------------------*/
-/*-------------------
- Doubling
---------------------*/
+ /* Left Aligned */
-/* Tablet Only */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.doubling.grid {
- width: auto;
- }
- .ui.grid > .doubling.row,
- .ui.doubling.grid > .row {
- margin: 0em !important;
- padding: 0em !important;
- }
- .ui.grid > .doubling.row > .column,
- .ui.doubling.grid > .row > .column {
- display: inline-block !important;
- padding-top: (@rowSpacing / 2) !important;
- padding-bottom: (@rowSpacing / 2) !important;
- box-shadow: none !important;
- margin: 0em;
- }
- .ui[class*="two column"].doubling.grid > .row > .column,
- .ui[class*="two column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="two column"].doubling.row.row > .column {
- width: @oneColumn !important;
- }
- .ui[class*="three column"].doubling.grid > .row > .column,
- .ui[class*="three column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="three column"].doubling.row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="four column"].doubling.grid > .row > .column,
- .ui[class*="four column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="four column"].doubling.row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="five column"].doubling.grid > .row > .column,
- .ui[class*="five column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="five column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="six column"].doubling.grid > .row > .column,
- .ui[class*="six column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="six column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="seven column"].doubling.grid > .row > .column,
- .ui[class*="seven column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="seven column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="eight column"].doubling.grid > .row > .column,
- .ui[class*="eight column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="eight column"].doubling.row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="nine column"].doubling.grid > .row > .column,
- .ui[class*="nine column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="nine column"].doubling.row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="ten column"].doubling.grid > .row > .column,
- .ui[class*="ten column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="ten column"].doubling.row.row > .column {
- width: @fiveColumn !important;
- }
- .ui[class*="eleven column"].doubling.grid > .row > .column,
- .ui[class*="eleven column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="eleven column"].doubling.row.row > .column {
- width: @fiveColumn !important;
- }
- .ui[class*="twelve column"].doubling.grid > .row > .column,
- .ui[class*="twelve column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="twelve column"].doubling.row.row > .column {
- width: @sixColumn !important;
- }
- .ui[class*="thirteen column"].doubling.grid > .row > .column,
- .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
- width: @sixColumn !important;
- }
- .ui[class*="fourteen column"].doubling.grid > .row > .column,
- .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
- width: @sevenColumn !important;
- }
- .ui[class*="fifteen column"].doubling.grid > .row > .column,
- .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
- width: @sevenColumn !important;
- }
- .ui[class*="sixteen column"].doubling.grid > .row > .column,
- .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
- width: @eightColumn !important;
- }
-}
-
-/* Mobile Only */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.grid > .doubling.row,
- .ui.doubling.grid > .row {
- margin: 0em !important;
- padding: 0em !important;
- }
- .ui.grid > .doubling.row > .column,
- .ui.doubling.grid > .row > .column {
- padding-top: (@rowSpacing / 2) !important;
- padding-bottom: (@rowSpacing / 2) !important;
- margin: 0em !important;
- box-shadow: none !important;
- }
- .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
- width: @oneColumn !important;
- }
- .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
+ .ui[class*="left aligned"].grid > .column,
+ .ui[class*="left aligned"].grid > .row > .column,
+ .ui.grid > [class*="left aligned"].row > .column,
+ .ui.grid > [class*="left aligned"].column.column,
+ .ui.grid > .row > [class*="left aligned"].column.column {
+ text-align: left;
+ align-self: inherit;
}
-}
-/*-------------------
- Stackable
---------------------*/
+ /* Center Aligned */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.stackable.grid {
- width: auto;
- margin-left: 0em !important;
- margin-right: 0em !important;
- }
- .ui.stackable.grid > .row > .wide.column,
- .ui.stackable.grid > .wide.column,
- .ui.stackable.grid > .column.grid > .column,
- .ui.stackable.grid > .column.row > .column,
- .ui.stackable.grid > .row > .column,
- .ui.stackable.grid > .column:not(.row),
- .ui.grid > .stackable.stackable.row > .column {
- width: 100% !important;
- margin: 0em 0em !important;
- box-shadow: none !important;
- padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
- }
- .ui.stackable.grid:not(.vertically) > .row {
- margin: 0em;
- padding: 0em;
+ .ui[class*="center aligned"].grid > .column,
+ .ui[class*="center aligned"].grid > .row > .column,
+ .ui.grid > [class*="center aligned"].row > .column,
+ .ui.grid > [class*="center aligned"].column.column,
+ .ui.grid > .row > [class*="center aligned"].column.column {
+ text-align: center;
+ align-self: inherit;
}
- /* Coupling */
- .ui.container > .ui.stackable.grid > .column,
- .ui.container > .ui.stackable.grid > .row > .column {
- padding-left: 0em !important;
- padding-right: 0em !important;
+ .ui[class*="center aligned"].grid {
+ justify-content: center;
}
- /* Don't pad inside segment or nested grid */
- .ui.grid .ui.stackable.grid,
- .ui.segment:not(.vertical) .ui.stackable.page.grid {
- margin-left: -(@stackableGutter / 2) !important;
- margin-right: -(@stackableGutter / 2) !important;
- }
+ /* Right Aligned */
- /* Divided Stackable */
- .ui.stackable.divided.grid > .row:first-child > .column:first-child,
- .ui.stackable.celled.grid > .row:first-child > .column:first-child,
- .ui.stackable.divided.grid > .column:not(.row):first-child,
- .ui.stackable.celled.grid > .column:not(.row):first-child {
- border-top: none !important;
- }
- .ui.inverted.stackable.celled.grid > .column:not(.row),
- .ui.inverted.stackable.divided.grid > .column:not(.row),
- .ui.inverted.stackable.celled.grid > .row > .column,
- .ui.inverted.stackable.divided.grid > .row > .column {
- border-top: @stackableInvertedMobileBorder;
+ .ui[class*="right aligned"].grid > .column,
+ .ui[class*="right aligned"].grid > .row > .column,
+ .ui.grid > [class*="right aligned"].row > .column,
+ .ui.grid > [class*="right aligned"].column.column,
+ .ui.grid > .row > [class*="right aligned"].column.column {
+ text-align: right;
+ align-self: inherit;
}
+}
- .ui.stackable.celled.grid > .column:not(.row),
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
- .ui.stackable.celled.grid > .row > .column,
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
- border-top: @stackableMobileBorder;
- box-shadow: none !important;
- padding-top: @stackableRowSpacing !important;
- padding-bottom: @stackableRowSpacing !important;
+& when (@variationGridJustified) {
+ /* Justified */
+ .ui.justified.grid > .column,
+ .ui.justified.grid > .row > .column,
+ .ui.grid > .justified.row > .column,
+ .ui.grid > .justified.column.column,
+ .ui.grid > .row > .justified.column.column {
+ text-align: justify;
+ hyphens: auto;
}
+}
+
+/*----------------------
+ Colored
+-----------------------*/
- .ui.stackable.celled.grid > .row {
- box-shadow: none !important;
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+
+ .ui.grid > .@{color}.row,
+ .ui.grid > .@{color}.column,
+ .ui.grid > .row > .@{color}.column {
+ background-color: @c;
+ color: @white;
}
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
- padding-left: 0em !important;
- padding-right: 0em !important;
+})
+
+
+/*----------------------
+ Equal Width
+-----------------------*/
+
+.ui[class*="equal width"].grid > .column:not(.row),
+.ui[class*="equal width"].grid > .row > .column,
+.ui.grid > [class*="equal width"].row > .column {
+ display: inline-block;
+ flex-grow: 1;
+}
+.ui[class*="equal width"].grid > .wide.column,
+.ui[class*="equal width"].grid > .row > .wide.column,
+.ui.grid > [class*="equal width"].row > .wide.column {
+ flex-grow: 0;
+}
+
+& when (@variationGridReversed) {
+ /*----------------------
+ Reverse
+ -----------------------*/
+
+
+ /* Mobile */
+ @media only screen and (max-width: @largestMobileScreen) {
+ .ui[class*="mobile reversed"].grid,
+ .ui[class*="mobile reversed"].grid > .row,
+ .ui.grid > [class*="mobile reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="mobile vertically reversed"].grid,
+ .ui.stackable[class*="mobile reversed"] {
+ flex-direction: column-reverse;
+ }
+ & when (@variationGridDivided) {
+ /* Divided Reversed */
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ }
+ & when (@variationGridCelled) {
+ /* Celled Reversed */
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+ }
+ }
+
+ /* Tablet */
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui[class*="tablet reversed"].grid,
+ .ui[class*="tablet reversed"].grid > .row,
+ .ui.grid > [class*="tablet reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="tablet vertically reversed"].grid {
+ flex-direction: column-reverse;
+ }
+ & when (@variationGridDivided) {
+ /* Divided Reversed */
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ }
+ & when (@variationGridCelled) {
+ /* Celled Reversed */
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+ }
+ }
+
+ /* Computer */
+ @media only screen and (min-width: @computerBreakpoint) {
+ .ui[class*="computer reversed"].grid,
+ .ui[class*="computer reversed"].grid > .row,
+ .ui.grid > [class*="computer reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="computer vertically reversed"].grid {
+ flex-direction: column-reverse;
+ }
+ & when (@variationGridDivided) {
+ /* Divided Reversed */
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ }
+ & when (@variationGridCelled) {
+ /* Celled Reversed */
+ .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+ }
+ }
+}
+
+& when (@variationGridDoubling) {
+ /*-------------------
+ Doubling
+ --------------------*/
+
+ /* Tablet Only */
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui.doubling.grid {
+ width: auto;
+ }
+ .ui.grid > .doubling.row,
+ .ui.doubling.grid > .row {
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+ .ui.grid > .doubling.row > .column,
+ .ui.doubling.grid > .row > .column {
+ display: inline-block !important;
+ padding-top: (@rowSpacing / 2) !important;
+ padding-bottom: (@rowSpacing / 2) !important;
+ box-shadow: none !important;
+ margin: 0;
+ }
+ .ui[class*="two column"].doubling.grid > .row > .column,
+ .ui[class*="two column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="two column"].doubling.row.row > .column {
+ width: @oneColumn !important;
+ }
+ .ui[class*="three column"].doubling.grid > .row > .column,
+ .ui[class*="three column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="three column"].doubling.row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="four column"].doubling.grid > .row > .column,
+ .ui[class*="four column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="four column"].doubling.row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="five column"].doubling.grid > .row > .column,
+ .ui[class*="five column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="five column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="six column"].doubling.grid > .row > .column,
+ .ui[class*="six column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="six column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="seven column"].doubling.grid > .row > .column,
+ .ui[class*="seven column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="seven column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="eight column"].doubling.grid > .row > .column,
+ .ui[class*="eight column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="eight column"].doubling.row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="nine column"].doubling.grid > .row > .column,
+ .ui[class*="nine column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="nine column"].doubling.row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="ten column"].doubling.grid > .row > .column,
+ .ui[class*="ten column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="ten column"].doubling.row.row > .column {
+ width: @fiveColumn !important;
+ }
+ .ui[class*="eleven column"].doubling.grid > .row > .column,
+ .ui[class*="eleven column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="eleven column"].doubling.row.row > .column {
+ width: @fiveColumn !important;
+ }
+ .ui[class*="twelve column"].doubling.grid > .row > .column,
+ .ui[class*="twelve column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="twelve column"].doubling.row.row > .column {
+ width: @sixColumn !important;
+ }
+ .ui[class*="thirteen column"].doubling.grid > .row > .column,
+ .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
+ width: @sixColumn !important;
+ }
+ .ui[class*="fourteen column"].doubling.grid > .row > .column,
+ .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
+ width: @sevenColumn !important;
+ }
+ .ui[class*="fifteen column"].doubling.grid > .row > .column,
+ .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
+ width: @sevenColumn !important;
+ }
+ .ui[class*="sixteen column"].doubling.grid > .row > .column,
+ .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
+ width: @eightColumn !important;
+ }
+ }
+
+ /* Mobile Only */
+ @media only screen and (max-width: @largestMobileScreen) {
+ .ui.grid > .doubling.row,
+ .ui.doubling.grid > .row {
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+ .ui.grid > .doubling.row > .column,
+ .ui.doubling.grid > .row > .column {
+ padding-top: (@rowSpacing / 2) !important;
+ padding-bottom: (@rowSpacing / 2) !important;
+ margin: 0 !important;
+ box-shadow: none !important;
+ }
+ .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
+ width: @oneColumn !important;
+ }
+ .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+ }
+}
+
+& when (@variationGridStackable) {
+ /*-------------------
+ Stackable
+ --------------------*/
+
+ @media only screen and (max-width: @largestMobileScreen) {
+ .ui.stackable.grid {
+ width: auto;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .ui.stackable.grid > .row > .wide.column,
+ .ui.stackable.grid > .wide.column,
+ .ui.stackable.grid > .column.grid > .column,
+ .ui.stackable.grid > .column.row > .column,
+ .ui.stackable.grid > .row > .column,
+ .ui.stackable.grid > .column:not(.row),
+ .ui.grid > .stackable.stackable.stackable.row > .column {
+ width: 100% !important;
+ margin: 0 0 !important;
+ box-shadow: none !important;
+ padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
+ }
+ .ui.stackable.grid:not(.vertically) > .row {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Coupling */
+ .ui.container > .ui.stackable.grid > .column,
+ .ui.container > .ui.stackable.grid > .row > .column {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ /* Don't pad inside segment or nested grid */
+ .ui.grid .ui.stackable.grid,
+ .ui.segment:not(.vertical) .ui.stackable.page.grid {
+ margin-left: -(@stackableGutter / 2) !important;
+ margin-right: -(@stackableGutter / 2) !important;
+ }
+
+ /* Divided Stackable */
+ .ui.stackable.divided.grid > .row:first-child > .column:first-child,
+ .ui.stackable.celled.grid > .row:first-child > .column:first-child,
+ .ui.stackable.divided.grid > .column:not(.row):first-child,
+ .ui.stackable.celled.grid > .column:not(.row):first-child {
+ border-top: none !important;
+ }
+ & when (@variationGridInverted) {
+ .ui.inverted.stackable.celled.grid > .column:not(.row),
+ .ui.inverted.stackable.divided.grid > .column:not(.row),
+ .ui.inverted.stackable.celled.grid > .row > .column,
+ .ui.inverted.stackable.divided.grid > .row > .column {
+ border-top: @stackableInvertedMobileBorder;
+ }
+ }
+ .ui.stackable.celled.grid > .column:not(.row),
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
+ .ui.stackable.celled.grid > .row > .column,
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
+ border-top: @stackableMobileBorder;
+ box-shadow: none !important;
+ padding-top: @stackableRowSpacing !important;
+ padding-bottom: @stackableRowSpacing !important;
+ }
+ & when (@variationGridCelled) {
+ .ui.stackable.celled.grid > .row {
+ box-shadow: none !important;
+ }
+ }
+ & when (@variationGridDivided) {
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ }
}
}
@@ -1916,5 +1863,83 @@
}
}
+& when (@variationGridCompact) {
+ /*-----------------
+ Compact
+ -----------------*/
+
+ .ui.ui.ui.compact.grid > .column:not(.row),
+ .ui.ui.ui.compact.grid > .row > .column {
+ padding-left: (@compactGutterWidth / 2);
+ padding-right: (@compactGutterWidth / 2);
+ }
+
+ .ui.ui.ui.compact.grid > * {
+ padding-left: (@compactGutterWidth / 2);
+ padding-right: (@compactGutterWidth / 2);
+ }
+
+ /* Row */
+ .ui.ui.ui.compact.grid > .row {
+ padding-top: (@compactRowSpacing / 2);
+ padding-bottom: (@compactRowSpacing / 2);
+ }
+
+ /* Columns */
+ .ui.ui.ui.compact.grid > .column:not(.row) {
+ padding-top: (@compactRowSpacing / 2);
+ padding-bottom: (@compactRowSpacing / 2);
+ }
+ & when (@variationGridRelaxed) and (@variationGridCelled) {
+ /* Relaxed + Celled */
+ .ui.compact.relaxed.celled.grid > .column:not(.row),
+ .ui.compact.relaxed.celled.grid > .row > .column {
+ padding: @compactCelledRelaxedPadding;
+ }
+ .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
+ .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
+ padding: @compactCelledVeryRelaxedPadding;
+ }
+ }
+
+ /*-----------------
+ Very compact
+ -----------------*/
+
+ .ui[class*="very compact"].grid > .column:not(.row),
+ .ui[class*="very compact"].grid > .row > .column {
+ padding-left: (@veryCompactGutterWidth / 2);
+ padding-right: (@compactGutterWidth / 2);
+ }
+
+ .ui[class*="very compact"].grid > * {
+ padding-left: (@veryCompactGutterWidth / 2);
+ padding-right: (@veryCompactGutterWidth / 2);
+ }
+
+ /* Row */
+ .ui[class*="very compact"].grid > .row {
+ padding-top: (@veryCompactRowSpacing / 2);
+ padding-bottom: (@veryCompactRowSpacing / 2);
+ }
+
+ /* Columns */
+ .ui[class*="very compact"].grid > .column:not(.row) {
+ padding-top: (@veryCompactRowSpacing / 2);
+ padding-bottom: (@veryCompactRowSpacing / 2);
+ }
+ & when (@variationGridRelaxed) and (@variationGridCelled) {
+ /* Relaxed + Celled */
+ .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
+ .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
+ padding: @veryCompactCelledRelaxedPadding;
+ }
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
+ padding: @veryCompactCelledVeryRelaxedPadding;
+ }
+ }
+}
+
.loadUIOverrides();
diff --git a/ui/src/definitions/collections/menu.less b/ui/src/definitions/collections/menu.less
index 10ae94fc862..a75befa0330 100644
--- a/ui/src/definitions/collections/menu.less
+++ b/ui/src/definitions/collections/menu.less
@@ -1,6 +1,6 @@
/*
- * # Semantic - Menu
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic - Menu
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Copyright 2015 Contributor
@@ -42,16 +42,16 @@
.ui.menu:after {
content: '';
display: block;
- height: 0px;
+ height: 0;
clear: both;
visibility: hidden;
}
.ui.menu:first-child {
- margin-top: 0rem;
+ margin-top: 0;
}
.ui.menu:last-child {
- margin-bottom: 0rem;
+ margin-bottom: 0;
}
@@ -60,7 +60,7 @@
---------------*/
.ui.menu .menu {
- margin: 0em;
+ margin: 0;
}
.ui.menu:not(.vertical) > .menu {
@@ -94,15 +94,15 @@
}
.ui.menu > .item:first-child {
- border-radius: @borderRadius 0px 0px @borderRadius;
+ border-radius: @borderRadius 0 0 @borderRadius;
}
/* Border */
.ui.menu .item:before {
position: absolute;
content: '';
- top: 0%;
- right: 0px;
+ top: 0;
+ right: 0;
height: 100%;
width: @dividerSize;
@@ -170,7 +170,7 @@
.ui.menu:not(.vertical) .item > .input {
position: relative;
top: @inputOffset;
- margin: @inputVerticalMargin 0em;
+ margin: @inputVerticalMargin 0;
}
.ui.menu .item > .input input {
font-size: @inputSize;
@@ -185,16 +185,18 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
- margin: 0em;
+ margin: 0;
background: @headerBackground;
text-transform: @headerTextTransform;
font-weight: @headerWeight;
}
-.ui.vertical.menu .item > .header:not(.ui) {
- margin: @verticalHeaderMargin;
- font-size: @verticalHeaderFontSize;
- font-weight: @verticalHeaderFontWeight;
+& when (@variationMenuVertical) {
+ .ui.vertical.menu .item > .header:not(.ui) {
+ margin: @verticalHeaderMargin;
+ font-size: @verticalHeaderFontSize;
+ font-weight: @verticalHeaderFontWeight;
+ }
}
/*--------------
@@ -204,17 +206,17 @@
/* Dropdown Icon */
.ui.menu .item > i.dropdown.icon {
- padding: 0em;
+ padding: 0;
float: @dropdownIconFloat;
- margin: 0em 0em 0em @dropdownIconDistance;
+ margin: 0 0 0 @dropdownIconDistance;
}
/* Menu */
.ui.menu .dropdown.item .menu {
- min-width: ~"calc(100% - 1px)";
- border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+ min-width: e("calc(100% - 1px)");
+ border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
background: @dropdownBackground;
- margin: @dropdownMenuDistance 0px 0px;
+ margin: @dropdownMenuDistance 0 0;
box-shadow: @dropdownMenuBoxShadow;
flex-direction: column !important;
}
@@ -254,15 +256,16 @@
display: inline-block;
font-size: @dropdownItemIconFontSize !important;
float: @dropdownItemIconFloat;
- margin: @dropdownItemIconMargin;
+ margin: @dropdownItemIconMargin !important;
}
-
-/* Secondary */
-.ui.secondary.menu .dropdown.item > .menu,
-.ui.text.menu .dropdown.item > .menu {
- border-radius: @dropdownMenuBorderRadius;
- margin-top: @secondaryDropdownMenuDistance;
+& when (@variationMenuSecondary) or (@variationMenuText) {
+ /* Secondary */
+ .ui.secondary.menu .dropdown.item > .menu,
+ .ui.text.menu .dropdown.item > .menu {
+ border-radius: @dropdownMenuBorderRadius;
+ margin-top: @secondaryDropdownMenuDistance;
+ }
}
/* Pointing */
@@ -270,37 +273,43 @@
margin-top: @pointingDropdownMenuDistance;
}
-/* Inverted */
-.ui.inverted.menu .search.dropdown.item > .search,
-.ui.inverted.menu .search.dropdown.item > .text {
- color: @invertedSelectionDropdownColor;
+& when (@variationMenuInverted) {
+ /* Inverted */
+ .ui.inverted.menu .search.dropdown.item > .search,
+ .ui.inverted.menu .search.dropdown.item > .text {
+ color: @invertedSelectionDropdownColor;
+ }
}
-/* Vertical */
-.ui.vertical.menu .dropdown.item > .icon {
- float: right;
- content: "\f0da";
- margin-left: 1em;
-}
-.ui.vertical.menu .dropdown.item .menu {
- left: 100%;
- min-width: 0;
- margin: 0em 0em 0em @dropdownMenuDistance;
- box-shadow: @dropdownVerticalMenuBoxShadow;
- border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
-}
-.ui.vertical.menu .dropdown.item.upward .menu {
- bottom: 0;
-}
-.ui.vertical.menu .dropdown.item:not(.upward) .menu {
- top: 0;
-}
-.ui.vertical.menu .active.dropdown.item {
- border-top-right-radius: 0em;
- border-bottom-right-radius: 0em;
-}
-.ui.vertical.menu .dropdown.active.item {
- box-shadow: none;
+& when (@variationMenuVertical) {
+ /* Vertical */
+ .ui.vertical.menu .dropdown.item > .icon {
+ float: right;
+ content: "\f0da";
+ margin-left: 1em;
+ }
+ .ui.vertical.menu .dropdown.item .menu {
+ left: 100%;
+ /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
+ min-width: 0;
+ min-width: max-content;
+ margin: 0 0 0 @dropdownMenuDistance;
+ box-shadow: @dropdownVerticalMenuBoxShadow;
+ border-radius: 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+ }
+ .ui.vertical.menu .dropdown.item.upward .menu {
+ bottom: 0;
+ }
+ .ui.vertical.menu .dropdown.item:not(.upward) .menu {
+ top: 0;
+ }
+ .ui.vertical.menu .active.dropdown.item {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.vertical.menu .dropdown.active.item {
+ box-shadow: none;
+ }
}
/* Evenly Divided */
@@ -312,23 +321,28 @@
Labels
---------------*/
-.ui.menu .item > .label {
- background: @labelBackground;
- color: @labelTextColor;
+.ui.menu .item > .label:not(.floating) {
margin-left: @labelTextMargin;
padding: @labelVerticalPadding @labelHorizontalPadding;
}
-.ui.vertical.menu .item > .label {
- background: @labelBackground;
- color: @labelTextColor;
- margin-top: @labelOffset;
- margin-bottom: @labelOffset;
- padding: @labelVerticalPadding @labelHorizontalPadding;
+& when (@variationMenuVertical) {
+ .ui.vertical.menu .item > .label {
+ margin-top: @labelOffset;
+ margin-bottom: @labelOffset;
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+ }
}
.ui.menu .item > .floating.label {
padding: @labelVerticalPadding @labelHorizontalPadding;
}
-
+.ui.menu .item > .label {
+ background: @labelBackground;
+ color: @labelTextColor;
+}
+.ui.menu .item > .image.label img {
+ margin: @imageLabelImageMargin;
+ height: @imageLabelHeight;
+}
/*--------------
Images
---------------*/
@@ -339,10 +353,12 @@
margin: @imageMargin;
width: @imageWidth;
}
-.ui.vertical.menu .item > img:not(.ui):only-child {
- display: block;
- max-width: 100%;
- width: @verticalImageWidth;
+& when (@variationMenuVertical) {
+ .ui.vertical.menu .item > img:not(.ui):only-child {
+ display: block;
+ max-width: 100%;
+ width: @verticalImageWidth;
+ }
}
/*******************************
@@ -358,18 +374,20 @@
background: none !important;
}
-/*--------------
- Sidebar
----------------*/
+& when (@variationMenuVertical) {
+ /*--------------
+ Sidebar
+ ---------------*/
-/* Show vertical dividers below last */
+ /* Show vertical dividers below last */
-.ui.vertical.sidebar.menu > .item:first-child:before {
- display: block !important;
-}
-.ui.vertical.sidebar.menu > .item::before {
- top: auto;
- bottom: 0px;
+ .ui.vertical.sidebar.menu > .item:first-child:before {
+ display: block !important;
+ }
+ .ui.vertical.sidebar.menu > .item::before {
+ top: auto;
+ bottom: 0;
+ }
}
/*--------------
@@ -379,14 +397,18 @@
@media only screen and (max-width: @largestMobileScreen) {
.ui.menu > .ui.container {
width: 100% !important;
- margin-left: 0em !important;
- margin-right: 0em !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
}
@media only screen and (min-width: @tabletBreakpoint) {
.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
border-left: @dividerSize solid @dividerBackground;
}
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
+ border-right: @dividerSize solid @dividerBackground;
+ }
}
@@ -450,11 +472,11 @@
Disabled
---------------*/
-.ui.menu .item.disabled,
-.ui.menu .item.disabled:hover {
- cursor: default !important;
- background-color: transparent !important;
- color: @disabledTextColor !important;
+.ui.ui.menu .item.disabled {
+ cursor: default;
+ background-color: transparent;
+ color: @disabledTextColor;
+ pointer-events: none;
}
@@ -479,6 +501,19 @@ Floated Menu / Item
margin-left: auto !important;
}
+.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
+.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
+ display: inherit;
+}
+
+/* Center */
+.ui.menu:not(.vertical) .center.item,
+.ui.menu:not(.vertical) .center.menu {
+ display: flex;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
/* Swapped Borders */
.ui.menu .right.item::before,
.ui.menu .right.menu > .item::before {
@@ -486,1165 +521,1073 @@ Floated Menu / Item
left: 0;
}
-
-/*--------------
- Vertical
----------------*/
-
-.ui.vertical.menu {
- display: block;
- flex-direction: column;
- background: @verticalBackground;
- box-shadow: @verticalBoxShadow;
-}
-
-/*--- Item ---*/
-.ui.vertical.menu .item {
- display: block;
- background: @verticalItemBackground;
- border-top: none;
- border-right: none;
-}
-.ui.vertical.menu > .item:first-child {
- border-radius: @borderRadius @borderRadius 0px 0px;
-}
-.ui.vertical.menu > .item:last-child {
- border-radius: 0px 0px @borderRadius @borderRadius;
+/* Remove Outer Borders */
+.ui.menu .center.item:last-child::before,
+.ui.menu .center.menu > .item:last-child::before {
+ display: none;
}
-/*--- Label ---*/
-.ui.vertical.menu .item > .label {
- float: right;
- text-align: center;
-}
+& when (@variationMenuVertical) {
+ /*--------------
+ Vertical
+ ---------------*/
-/*--- Icon ---*/
-.ui.vertical.menu .item > i.icon {
- width: @iconWidth;
- float: @verticalIconFloat;
- margin: @verticalIconMargin;
-}
-.ui.vertical.menu .item > .label + i.icon {
- float: @labelAndIconFloat;
- margin: @labelAndIconMargin;
-}
+ .ui.vertical.menu {
+ display: block;
+ flex-direction: column;
+ background: @verticalBackground;
+ box-shadow: @verticalBoxShadow;
+ }
+ /*--- Item ---*/
+ .ui.vertical.menu .item {
+ display: block;
+ background: @verticalItemBackground;
+ border-top: none;
+ border-right: none;
+ }
+ .ui.vertical.menu > .item:first-child {
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui.vertical.menu > .item:last-child {
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
-/*--- Border ---*/
-.ui.vertical.menu .item:before {
- position: absolute;
- content: '';
- top: 0%;
- left: 0px;
- width: 100%;
- height: @dividerSize;
- background: @verticalDividerBackground;
-}
+ /*--- Label ---*/
+ .ui.vertical.menu .item > .label {
+ float: right;
+ text-align: center;
+ }
-.ui.vertical.menu .item:first-child:before {
- display: none !important;
-}
+ /*--- Icon ---*/
+ .ui.vertical.menu .item > i.icon,
+ .ui.vertical.menu .item > i.icons {
+ width: @iconWidth;
+ float: @verticalIconFloat;
+ margin: @verticalIconMargin;
+ }
+ .ui.vertical.menu .item > .label + i.icon {
+ float: @labelAndIconFloat;
+ margin: @labelAndIconMargin;
+ }
-/*--- Sub Menu ---*/
-.ui.vertical.menu .item > .menu {
- margin: @subMenuMargin;
-}
-.ui.vertical.menu .menu .item {
- background: none;
- padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
- font-size: @subMenuFontSize;
- color: @subMenuTextColor;
-}
-.ui.vertical.menu .item .menu a.item:hover,
-.ui.vertical.menu .item .menu .link.item:hover {
- color: @darkTextColor;
-}
-.ui.vertical.menu .menu .item:before {
- display: none;
-}
+ /*--- Border ---*/
+ .ui.vertical.menu .item:before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+ }
-/* Vertical Active */
-.ui.vertical.menu .active.item {
- background: @activeItemBackground;
- border-radius: 0em;
- box-shadow: @verticalActiveBoxShadow;
-}
-.ui.vertical.menu > .active.item:first-child {
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui.vertical.menu > .active.item:last-child {
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-.ui.vertical.menu > .active.item:only-child {
- border-radius: @borderRadius;
-}
-.ui.vertical.menu .active.item .menu .active.item {
- border-left: none;
-}
-.ui.vertical.menu .item .menu .active.item {
- background-color: @subMenuActiveBackground;
- font-weight: @subMenuActiveFontWeight;
- color: @subMenuActiveTextColor;
-}
+ .ui.vertical.menu .item:first-child:before {
+ display: none !important;
+ }
-/*--------------
- Tabular
----------------*/
+ /*--- Sub Menu ---*/
+ .ui.vertical.menu .item > .menu {
+ margin: @subMenuMargin;
+ }
+ .ui.vertical.menu .menu .item {
+ background: none;
+ padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
+ font-size: @subMenuFontSize;
+ color: @subMenuTextColor;
+ }
+ .ui.vertical.menu .item .menu a.item:hover,
+ .ui.vertical.menu .item .menu .link.item:hover {
+ color: @darkTextColor;
+ }
+ .ui.vertical.menu .menu .item:before {
+ display: none;
+ }
-.ui.tabular.menu {
- border-radius: 0em;
- box-shadow: none !important;
- border: none;
- background: @tabularBackground;
- border-bottom: @tabularBorderWidth solid @tabularBorderColor;
-}
-.ui.tabular.fluid.menu {
- width: @tabularFluidWidth !important;
+ /* Vertical Active */
+ .ui.vertical.menu .active.item {
+ background: @activeItemBackground;
+ border-radius: 0;
+ box-shadow: @verticalActiveBoxShadow;
+ }
+ .ui.vertical.menu > .active.item:first-child {
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui.vertical.menu > .active.item:last-child {
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
+ .ui.vertical.menu > .active.item:only-child {
+ border-radius: @borderRadius;
+ }
+ .ui.vertical.menu .active.item .menu .active.item {
+ border-left: none;
+ }
+ .ui.vertical.menu .item .menu .active.item {
+ background-color: @subMenuActiveBackground;
+ font-weight: @subMenuActiveFontWeight;
+ color: @subMenuActiveTextColor;
+ }
}
-.ui.tabular.menu .item {
- background: transparent;
- border-bottom: none;
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-top: @tabularOppositeBorderWidth solid transparent;
- padding: @tabularVerticalPadding @tabularHorizontalPadding;
- color: @tabularTextColor;
-}
-.ui.tabular.menu .item:before {
- display: none;
-}
+& when (@variationMenuTabular) {
+ /*--------------
+ Tabular
+ ---------------*/
-/* Hover */
-.ui.tabular.menu .item:hover {
- background-color: transparent;
- color: @tabularHoveredTextColor;
-}
-
-/* Active */
-.ui.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-top-width: @tabularBorderWidth;
- border-color: @tabularBorderColor;
- font-weight: @tabularActiveWeight;
- margin-bottom: -@tabularBorderWidth;
- box-shadow: @tabularActiveBoxShadow;
- border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;
-}
-
-/* Coupling with segment for attachment */
-.ui.tabular.menu + .attached:not(.top).segment,
-.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
- border-top: none;
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
- width: 100%;
-}
-.top.attached.segment + .ui.bottom.tabular.menu {
- position: relative;
- width: @tabularFluidWidth;
- left: -@tabularFluidOffset;
-}
-
-/* Bottom Vertical Tabular */
-.ui.bottom.tabular.menu {
- background: @tabularBackground;
- border-radius: 0em;
- box-shadow: none !important;
- border-bottom: none;
- border-top: @tabularBorderWidth solid @tabularBorderColor;
-}
-.ui.bottom.tabular.menu .item {
- background: none;
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: none;
-}
-.ui.bottom.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: -@tabularBorderWidth 0px 0px 0px;
- border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
-}
-
-/* Vertical Tabular (Left) */
-.ui.vertical.tabular.menu {
- background: @tabularVerticalBackground;
- border-radius: 0em;
- box-shadow: none !important;
- border-bottom: none;
- border-right: @tabularBorderWidth solid @tabularBorderColor;
-}
-.ui.vertical.tabular.menu .item {
- background: none;
- border-left: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: @tabularBorderWidth solid transparent;
- border-right: none;
-}
-.ui.vertical.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: 0px -@tabularBorderWidth 0px 0px;
- border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
-}
-
-/* Vertical Right Tabular */
-.ui.vertical.right.tabular.menu {
- background: @tabularVerticalBackground;
- border-radius: 0em;
- box-shadow: none !important;
- border-bottom: none;
- border-right: none;
- border-left: @tabularBorderWidth solid @tabularBorderColor;
-}
-.ui.vertical.right.tabular.menu .item {
- background: none;
- border-right: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: @tabularBorderWidth solid transparent;
- border-left: none;
-}
-.ui.vertical.right.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: 0px 0px 0px -@tabularBorderWidth;
- border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
-}
-
-/* Dropdown */
-.ui.tabular.menu .active.dropdown.item {
- margin-bottom: 0px;
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-top: @tabularOppositeBorderWidth solid transparent;
- border-bottom: none;
-}
+ .ui.tabular.menu {
+ border-radius: 0;
+ box-shadow: none !important;
+ border: none;
+ background: @tabularBackground;
+ border-bottom: @tabularBorderWidth solid @tabularBorderColor;
+ }
+ .ui.tabular.fluid.menu {
+ width: @tabularFluidWidth !important;
+ }
+ .ui.tabular.menu .item {
+ background: transparent;
+ border-bottom: none;
+
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ padding: @tabularVerticalPadding @tabularHorizontalPadding;
+ color: @tabularTextColor;
+ }
+ .ui.tabular.menu .item:before {
+ display: none;
+ }
+ /* Hover */
+ .ui.tabular.menu .item:hover {
+ background-color: transparent;
+ color: @tabularHoveredTextColor;
+ }
+ /* Active */
+ .ui.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-top-width: @tabularBorderWidth;
+ border-color: @tabularBorderColor;
+ font-weight: @tabularActiveWeight;
+ margin-bottom: -@tabularBorderWidth;
+ box-shadow: @tabularActiveBoxShadow;
+ border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important;
+ }
-/*--------------
- Pagination
----------------*/
+ /* Coupling with segment for attachment */
+ .ui.tabular.menu + .attached:not(.top).segment,
+ .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+ border-top: none;
+ margin-left: 0;
+ margin-top: 0;
+ margin-right: 0;
+ width: 100%;
+ }
+ .top.attached.segment + .ui.bottom.tabular.menu {
+ position: relative;
+ width: @tabularFluidWidth;
+ left: -@tabularFluidOffset;
+ }
-.ui.pagination.menu {
- margin: 0em;
- display: inline-flex;
- vertical-align: middle;
-}
-.ui.pagination.menu .item:last-child {
- border-radius: 0em @borderRadius @borderRadius 0em;
-}
-.ui.compact.menu .item:last-child {
- border-radius: 0em @borderRadius @borderRadius 0em;
-}
-.ui.pagination.menu .item:last-child:before {
- display: none;
+ /* Bottom Vertical Tabular */
+ .ui.bottom.tabular.menu {
+ background: @tabularBackground;
+ border-radius: 0;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-top: @tabularBorderWidth solid @tabularBorderColor;
+ }
+ .ui.bottom.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: none;
+ }
+ .ui.bottom.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: -@tabularBorderWidth 0 0 0;
+ border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important;
+ }
+ & when (@variationMenuVertical) {
+ /* Vertical Tabular (Left) */
+ .ui.vertical.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: @tabularBorderWidth solid @tabularBorderColor;
+ }
+ .ui.vertical.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-right: none;
+ }
+ .ui.vertical.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0 -@tabularBorderWidth 0 0;
+ border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important;
+ }
+
+ /* Vertical Right Tabular */
+ .ui.vertical.right.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: none;
+ border-left: @tabularBorderWidth solid @tabularBorderColor;
+ }
+ .ui.vertical.right.tabular.menu .item {
+ background: none;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-left: none;
+ }
+ .ui.vertical.right.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0 0 0 -@tabularBorderWidth;
+ border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important;
+ }
+ }
+ /* Dropdown */
+ .ui.tabular.menu .active.dropdown.item {
+ margin-bottom: 0;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ border-bottom: none;
+ }
}
-.ui.pagination.menu .item {
- min-width: @paginationMinWidth;
- text-align: center;
-}
-.ui.pagination.menu .icon.item i.icon {
- vertical-align: top;
-}
-/* Active */
-.ui.pagination.menu .active.item {
- border-top: none;
- padding-top: @itemVerticalPadding;
- background-color: @paginationActiveBackground;
- color: @paginationActiveTextColor;
- box-shadow: none;
-}
+& when (@variationMenuPagination) {
+ /*--------------
+ Pagination
+ ---------------*/
-/*--------------
- Secondary
----------------*/
+ .ui.pagination.menu {
+ margin: 0;
+ display: inline-flex;
+ vertical-align: middle;
+ }
+ .ui.pagination.menu .item:last-child {
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
+ .ui.compact.menu .item:last-child {
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
+ .ui.pagination.menu .item:last-child:before {
+ display: none;
+ }
-.ui.secondary.menu {
- background: @secondaryBackground;
- margin-left: -@secondaryItemSpacing;
- margin-right: -@secondaryItemSpacing;
- border-radius: 0em;
- border: none;
- box-shadow: none;
-}
+ .ui.pagination.menu .item {
+ min-width: @paginationMinWidth;
+ text-align: center;
+ }
+ .ui.pagination.menu .icon.item i.icon {
+ vertical-align: top;
+ }
-/* Item */
-.ui.secondary.menu .item {
- align-self: center;
- box-shadow: none;
- border: none;
- padding: @secondaryItemPadding;
- margin: @secondaryItemMargin;
- background: @secondaryItemBackground;
- transition: @secondaryItemTransition;
- border-radius: @secondaryItemBorderRadius;
+ /* Active */
+ .ui.pagination.menu .active.item {
+ border-top: none;
+ padding-top: @itemVerticalPadding;
+ background-color: @paginationActiveBackground;
+ color: @paginationActiveTextColor;
+ box-shadow: none;
+ }
}
-/* No Divider */
-.ui.secondary.menu .item:before {
- display: none !important;
-}
+& when (@variationMenuSecondary) {
+ /*--------------
+ Secondary
+ ---------------*/
-/* Header */
-.ui.secondary.menu .header.item {
- border-radius: 0em;
- border-right: @secondaryHeaderBorder;
- background: @secondaryHeaderBackground;
-}
+ .ui.secondary.menu {
+ background: @secondaryBackground;
+ margin-left: -@secondaryItemSpacing;
+ margin-right: -@secondaryItemSpacing;
+ border-radius: 0;
+ border: none;
+ box-shadow: none;
+ }
-/* Image */
-.ui.secondary.menu .item > img:not(.ui) {
- margin: 0em;
-}
+ /* Item */
+ .ui.secondary.menu .item {
+ align-self: center;
+ box-shadow: none;
+ border: none;
+ padding: @secondaryItemPadding;
+ margin: @secondaryItemMargin;
+ background: @secondaryItemBackground;
+ transition: @secondaryItemTransition;
+ border-radius: @secondaryItemBorderRadius;
+ }
-/* Hover */
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu .link.item:hover,
-.ui.secondary.menu a.item:hover {
- background: @secondaryHoverItemBackground;
- color: @secondaryHoverItemColor;
-}
+ /* No Divider */
+ .ui.secondary.menu .item:before {
+ display: none !important;
+ }
-/* Active */
-.ui.secondary.menu .active.item {
- box-shadow: none;
- background: @secondaryActiveItemBackground;
- color: @secondaryActiveItemColor;
- border-radius: @secondaryItemBorderRadius;
-}
+ /* Header */
+ .ui.secondary.menu .header.item {
+ border-radius: 0;
+ border-right: @secondaryHeaderBorder;
+ background: @secondaryHeaderBackground;
+ }
-/* Active Hover */
-.ui.secondary.menu .active.item:hover {
- box-shadow: none;
- background: @secondaryActiveHoverItemBackground;
- color: @secondaryActiveHoverItemColor;
-}
+ /* Image */
+ .ui.secondary.menu .item > img:not(.ui) {
+ margin: 0;
+ }
+ /* Hover */
+ .ui.secondary.menu .dropdown.item:hover,
+ .ui.secondary.menu .link.item:hover,
+ .ui.secondary.menu a.item:hover {
+ background: @secondaryHoverItemBackground;
+ color: @secondaryHoverItemColor;
+ }
-/* Inverted */
-.ui.secondary.inverted.menu .link.item,
-.ui.secondary.inverted.menu a.item {
- color: @secondaryInvertedColor !important;
-}
-.ui.secondary.inverted.menu .dropdown.item:hover,
-.ui.secondary.inverted.menu .link.item:hover,
-.ui.secondary.inverted.menu a.item:hover {
- background: @secondaryInvertedHoverBackground;
- color: @secondaryInvertedHoverColor !important;
-}
-.ui.secondary.inverted.menu .active.item {
- background: @secondaryInvertedActiveBackground;
- color: @secondaryInvertedActiveColor !important;
-}
+ /* Active */
+ .ui.secondary.menu .active.item {
+ box-shadow: none;
+ background: @secondaryActiveItemBackground;
+ color: @secondaryActiveItemColor;
+ border-radius: @secondaryItemBorderRadius;
+ }
-/* Fix item margins */
-.ui.secondary.item.menu {
- margin-left: 0em;
- margin-right: 0em;
-}
-.ui.secondary.item.menu .item:last-child {
- margin-right: 0em;
-}
-.ui.secondary.attached.menu {
- box-shadow: none;
-}
+ /* Active Hover */
+ .ui.secondary.menu .active.item:hover {
+ box-shadow: none;
+ background: @secondaryActiveHoverItemBackground;
+ color: @secondaryActiveHoverItemColor;
+ }
-/* Sub Menu */
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
- margin: @secondaryMenuSubMenuMargin;
-}
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
- margin: @secondaryMenuSubMenuItemMargin;
- padding: @secondaryMenuSubMenuItemPadding;
-}
+ & when (@variationMenuInverted) {
+ /* Inverted */
+ .ui.secondary.inverted.menu .link.item:not(.disabled),
+ .ui.secondary.inverted.menu a.item:not(.disabled) {
+ color: @secondaryInvertedColor;
+ }
+ .ui.secondary.inverted.menu .dropdown.item:hover,
+ .ui.secondary.inverted.menu .link.item:hover,
+ .ui.secondary.inverted.menu a.item:hover {
+ background: @secondaryInvertedHoverBackground;
+ color: @secondaryInvertedHoverColor;
+ }
+ .ui.secondary.inverted.menu .active.item {
+ background: @secondaryInvertedActiveBackground;
+ color: @secondaryInvertedActiveColor;
+ }
+ }
+ /* Fix item margins */
+ .ui.secondary.item.menu {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .ui.secondary.item.menu .item:last-child {
+ margin-right: 0;
+ }
+ & when (@variationMenuAttached) {
+ .ui.secondary.attached.menu {
+ box-shadow: none;
+ }
+ }
+ & when (@variationMenuVertical) {
+ /*---------------------
+ Secondary Vertical
+ -----------------------*/
+
+ /* Sub Menu */
+ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+ margin: @secondaryMenuSubMenuMargin;
+ }
+ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+ margin: @secondaryMenuSubMenuItemMargin;
+ padding: @secondaryMenuSubMenuItemPadding;
+ }
+
+
+ .ui.secondary.vertical.menu > .item {
+ border: none;
+ margin: @secondaryVerticalItemMargin;
+ border-radius: @secondaryVerticalItemBorderRadius !important;
+ }
+ .ui.secondary.vertical.menu > .header.item {
+ border-radius: 0;
+ }
+
+ /* Sub Menu */
+ .ui.vertical.secondary.menu .item > .menu .item {
+ background-color: transparent;
+ }
+
+ /* Inverted */
+ .ui.secondary.inverted.menu {
+ background-color: transparent;
+ }
+ }
+ & when (@variationMenuPointing) {
+ /*---------------------
+ Secondary Pointing
+ -----------------------*/
+
+ .ui.secondary.pointing.menu {
+ margin-left: 0;
+ margin-right: 0;
+ border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
+ }
+
+ .ui.secondary.pointing.menu .item {
+ border-bottom-color: transparent;
+ border-bottom-style: solid;
+ border-radius: 0;
+ align-self: flex-end;
+
+ margin: 0 0 -@secondaryPointingBorderWidth;
+ padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+ border-bottom-width: @secondaryPointingBorderWidth;
+ transition: @secondaryItemTransition;
+ }
+ .ui.secondary.pointing.menu .ui.dropdown .menu .item {
+ border-bottom-width: 0;
+ }
+
+ .ui.secondary.pointing.menu .item > .label:not(.floating) {
+ margin-top: -@labelVerticalPadding;
+ margin-bottom: -@labelVerticalPadding;
+ }
+ .ui.secondary.pointing.menu .item > .circular.label {
+ margin-top: -@circularLabelVerticalPadding;
+ margin-bottom: -@circularLabelVerticalPadding;
+ }
+
+ /* Item Types */
+ .ui.secondary.pointing.menu .header.item {
+ color: @secondaryPointingHeaderColor !important;
+ }
+ .ui.secondary.pointing.menu .text.item {
+ box-shadow: none !important;
+ }
+ .ui.secondary.pointing.menu .item:after {
+ display: none;
+ }
+
+ /* Hover */
+ .ui.secondary.pointing.menu .dropdown.item:hover,
+ .ui.secondary.pointing.menu .link.item:hover,
+ .ui.secondary.pointing.menu a.item:hover {
+ background-color: transparent;
+ color: @secondaryPointingHoverTextColor;
+ }
+
+ /* Pressed */
+ .ui.secondary.pointing.menu .dropdown.item:active,
+ .ui.secondary.pointing.menu .link.item:active,
+ .ui.secondary.pointing.menu a.item:active {
+ background-color: transparent;
+ border-color: @secondaryPointingBorderColor;
+ }
+
+ /* Active */
+ .ui.secondary.pointing.menu .active.item {
+ background-color: transparent;
+ box-shadow: none;
+ border-color: @secondaryPointingActiveBorderColor;
+ font-weight: @secondaryPointingActiveFontWeight;
+ color: @secondaryPointingActiveTextColor;
+ }
+
+ /* Active Hover */
+ .ui.secondary.pointing.menu .active.item:hover {
+ border-color: @secondaryPointingActiveHoverBorderColor;
+ color: @secondaryPointingActiveHoverTextColor;
+ }
+
+ /* Active Dropdown */
+ .ui.secondary.pointing.menu .active.dropdown.item {
+ border-color: @secondaryPointingActiveDropdownBorderColor;
+ }
+ & when (@variationMenuVertical) {
+ /* Vertical Pointing */
+ .ui.secondary.vertical.pointing.menu {
+ border-bottom-width: 0;
+ border-right-width: @secondaryPointingBorderWidth;
+ border-right-style: solid;
+ border-right-color: @secondaryPointingBorderColor;
+ }
+ .ui.secondary.vertical.pointing.menu .item {
+ border-bottom: none;
+ border-right-style: solid;
+ border-right-color: transparent;
+ border-radius: 0 !important;
+ margin: @secondaryVerticalPointingItemMargin;
+ border-right-width: @secondaryPointingBorderWidth;
+ }
+
+ /* Vertical Active */
+ .ui.secondary.vertical.pointing.menu .active.item {
+ border-color: @secondaryPointingActiveBorderColor;
+ }
+ }
+ & when (@variationMenuInverted) {
+ /* Inverted */
+ .ui.secondary.inverted.pointing.menu {
+ border-color: @secondaryPointingInvertedBorderColor;
+ }
+
+ .ui.secondary.inverted.pointing.menu .item:not(.disabled) {
+ color: @secondaryPointingInvertedItemTextColor;
+ }
+ .ui.secondary.inverted.pointing.menu .header.item {
+ color: @secondaryPointingInvertedItemHeaderColor !important;
+ }
+
+ /* Hover */
+ .ui.secondary.inverted.pointing.menu .link.item:hover,
+ .ui.secondary.inverted.pointing.menu a.item:hover {
+ color: @secondaryPointingInvertedItemHoverTextColor;
+ }
+
+
+ /* Active */
+ .ui.ui.secondary.inverted.pointing.menu .active.item {
+ border-color: @secondaryPointingInvertedActiveBorderColor;
+ color: @secondaryPointingInvertedActiveColor;
+ background-color: transparent;
+ }
+ }
+ }
+}
-/*---------------------
- Secondary Vertical
------------------------*/
+& when (@variationMenuText) {
+ /*--------------
+ Text Menu
+ ---------------*/
-.ui.secondary.vertical.menu > .item {
- border: none;
- margin: @secondaryVerticalItemMargin;
- border-radius: @secondaryVerticalItemBorderRadius !important;
-}
-.ui.secondary.vertical.menu > .header.item {
- border-radius: 0em;
-}
+ .ui.text.menu {
+ background: none transparent;
+ border-radius: 0;
+ box-shadow: none;
+ border: none;
-/* Sub Menu */
-.ui.vertical.secondary.menu .item > .menu .item {
- background-color: transparent;
-}
+ margin: @textMenuMargin;
+ }
+ .ui.text.menu .item {
+ border-radius: 0;
+ box-shadow: none;
+ align-self: center;
+ margin: @textMenuItemMargin;
+ padding: @textMenuItemPadding;
+ font-weight: @textMenuItemFontWeight;
+ color: @textMenuItemColor;
+ transition: @textMenuItemTransition;
+ }
-/* Inverted */
-.ui.secondary.inverted.menu {
- background-color: transparent;
-}
+ /* Border */
+ .ui.text.menu .item:before,
+ .ui.text.menu .menu .item:before {
+ display: none !important;
+ }
-/*---------------------
- Secondary Pointing
------------------------*/
+ /* Header */
+ .ui.text.menu .header.item {
+ background-color: transparent;
+ opacity: 1;
+ color: @textMenuHeaderColor;
+ font-size: @textMenuHeaderSize;
+ text-transform: @textMenuHeaderTextTransform;
+ font-weight: @textMenuHeaderFontWeight;
+ }
-.ui.secondary.pointing.menu {
- margin-left: 0em;
- margin-right: 0em;
- border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
-}
+ /* Image */
+ .ui.text.menu .item > img:not(.ui) {
+ margin: 0;
+ }
-.ui.secondary.pointing.menu .item {
- border-bottom-color: transparent;
- border-bottom-style: solid;
- border-radius: 0em;
- align-self: flex-end;
+ /*--- fluid text ---*/
+ .ui.text.item.menu .item {
+ margin: 0;
+ }
+ & when (@variationMenuVertical) {
+ /*--- vertical text ---*/
+ .ui.vertical.text.menu {
+ margin: @textVerticalMenuMargin;
+ }
+ .ui.vertical.text.menu:first-child {
+ margin-top: 0;
+ }
+ .ui.vertical.text.menu:last-child {
+ margin-bottom: 0;
+ }
+ .ui.vertical.text.menu .item {
+ margin: @textVerticalMenuItemMargin;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ui.vertical.text.menu .item > i.icon {
+ float: @textVerticalMenuIconFloat;
+ margin: @iconMargin;
+ }
+ .ui.vertical.text.menu .header.item {
+ margin: @textVerticalMenuHeaderMargin;
+ }
+
+ /* Vertical Sub Menu */
+ .ui.vertical.text.menu .item:not(.dropdown) > .menu {
+ margin: @textMenuSubMenuMargin;
+ }
+ .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
+ margin: @textMenuSubMenuItemMargin;
+ padding: @textMenuSubMenuItemPadding;
+ }
+ }
+ /*--- hover ---*/
+ .ui.text.menu .item:hover {
+ opacity: 1;
+ background-color: transparent;
+ }
- margin: 0em 0em -@secondaryPointingBorderWidth;
- padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
- border-bottom-width: @secondaryPointingBorderWidth;
- transition: @secondaryItemTransition;
-}
+ /*--- active ---*/
+ .ui.text.menu .active.item {
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+ font-weight: @textMenuActiveItemFontWeight;
+ color: @textMenuActiveItemColor;
+ }
-/* Item Types */
-.ui.secondary.pointing.menu .header.item {
- color: @secondaryPointingHeaderColor !important;
-}
-.ui.secondary.pointing.menu .text.item {
- box-shadow: none !important;
-}
-.ui.secondary.pointing.menu .item:after {
- display: none;
+ /*--- active hover ---*/
+ .ui.text.menu .active.item:hover {
+ background-color: transparent;
+ }
+ & when (@variationMenuPointing) {
+ /* Disable Bariations */
+ .ui.text.pointing.menu .active.item:after {
+ box-shadow: none;
+ }
+ }
+ & when (@variationMenuAttached) {
+ .ui.text.attached.menu {
+ box-shadow: none;
+ }
+ }
+ & when (@variationMenuInverted) {
+ /* Inverted */
+ .ui.inverted.text.menu,
+ .ui.inverted.text.menu .item,
+ .ui.inverted.text.menu .item:hover,
+ .ui.inverted.text.menu .active.item {
+ background-color: transparent;
+ }
+ }
+ & when (@variationMenuFluid) {
+ /* Fluid */
+ .ui.fluid.text.menu {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
}
-/* Hover */
-.ui.secondary.pointing.menu .dropdown.item:hover,
-.ui.secondary.pointing.menu .link.item:hover,
-.ui.secondary.pointing.menu a.item:hover {
- background-color: transparent;
- color: @secondaryPointingHoverTextColor;
-}
+/*--------------
+ Icon Only
+---------------*/
-/* Pressed */
-.ui.secondary.pointing.menu .dropdown.item:active,
-.ui.secondary.pointing.menu .link.item:active,
-.ui.secondary.pointing.menu a.item:active {
- background-color: transparent;
- border-color: @secondaryPointingBorderColor;
+/* Vertical Menu */
+.ui.vertical.icon.menu {
+ display: inline-block;
+ width: auto;
}
-/* Active */
-.ui.secondary.pointing.menu .active.item {
- background-color: transparent;
- box-shadow: none;
- border-color: @secondaryPointingActiveBorderColor;
- font-weight: @secondaryPointingActiveFontWeight;
- color: @secondaryPointingActiveTextColor;
+/* Item */
+.ui.icon.menu .item {
+ height: auto;
+ text-align: @iconMenuTextAlign;
+ color: @iconMenuItemColor;
}
-/* Active Hover */
-.ui.secondary.pointing.menu .active.item:hover {
- border-color: @secondaryPointingActiveHoverBorderColor;
- color: @secondaryPointingActiveHoverTextColor;
+/* Icon */
+.ui.icon.menu .item > .icon:not(.dropdown) {
+ margin: 0;
+ opacity: 1;
}
-/* Active Dropdown */
-.ui.secondary.pointing.menu .active.dropdown.item {
- border-color: @secondaryPointingActiveDropdownBorderColor;
+/* Icon Gylph */
+.ui.icon.menu .icon:before {
+ opacity: 1;
}
-/* Vertical Pointing */
-.ui.secondary.vertical.pointing.menu {
- border-bottom-width: 0px;
- border-right-width: @secondaryPointingBorderWidth;
- border-right-style: solid;
- border-right-color: @secondaryPointingBorderColor;
-}
-.ui.secondary.vertical.pointing.menu .item {
- border-bottom: none;
- border-right-style: solid;
- border-right-color: transparent;
- border-radius: 0em !important;
- margin: @secondaryVerticalPointingItemMargin;
- border-right-width: @secondaryPointingBorderWidth;
+/* (x) Item Icon */
+.ui.menu .icon.item > .icon {
+ width: auto;
+ margin: 0 auto;
}
-/* Vertical Active */
-.ui.secondary.vertical.pointing.menu .active.item {
- border-color: @secondaryPointingActiveBorderColor;
+/* Vertical Icon */
+.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
+ display: block;
+ opacity: 1;
+ margin: 0 auto;
+ float: none;
}
/* Inverted */
-.ui.secondary.inverted.pointing.menu {
- border-color: @secondaryPointingInvertedBorderColor;
-}
-
-.ui.secondary.inverted.pointing.menu {
- border-width: @secondaryPointingBorderWidth;
- border-color: @secondaryPointingBorderColor;
-}
-.ui.secondary.inverted.pointing.menu .item {
- color: @secondaryPointingInvertedItemTextColor;
-}
-.ui.secondary.inverted.pointing.menu .header.item {
- color: @secondaryPointingInvertedItemHeaderColor !important;
+.ui.inverted.icon.menu .item {
+ color: @iconMenuInvertedItemColor;
}
-/* Hover */
-.ui.secondary.inverted.pointing.menu .link.item:hover,
-.ui.secondary.inverted.pointing.menu a.item:hover {
- color: @secondaryPointingInvertedItemHoverTextColor;
-}
+& when (@variationMenuLabeled) {
+ /*--------------
+ Labeled Icon
+ ---------------*/
+ /* Menu */
+ .ui.labeled.icon.menu {
+ text-align: center;
+ }
-/* Active */
-.ui.secondary.inverted.pointing.menu .active.item {
- border-color: @secondaryPointingInvertedActiveBorderColor;
- color: @secondaryPointingInvertedActiveColor;
-}
-
-/*--------------
- Text Menu
----------------*/
-
-.ui.text.menu {
- background: none transparent;
- border-radius: 0px;
- box-shadow: none;
- border: none;
-
- margin: @textMenuMargin;
-}
-.ui.text.menu .item {
- border-radius: 0px;
- box-shadow: none;
- align-self: center;
- margin: @textMenuItemMargin;
- padding: @textMenuItemPadding;
- font-weight: @textMenuItemFontWeight;
- color: @textMenuItemColor;
- transition: @textMenuItemTransition;
-}
-
-/* Border */
-.ui.text.menu .item:before,
-.ui.text.menu .menu .item:before {
- display: none !important;
-}
-
-/* Header */
-.ui.text.menu .header.item {
- background-color: transparent;
- opacity: 1;
- color: @textMenuHeaderColor;
- font-size: @textMenuHeaderSize;
- text-transform: @textMenuHeaderTextTransform;
- font-weight: @textMenuHeaderFontWeight;
-}
-
-/* Image */
-.ui.text.menu .item > img:not(.ui) {
- margin: 0em;
-}
-
-/*--- fluid text ---*/
-.ui.text.item.menu .item {
- margin: 0em;
-}
-
-/*--- vertical text ---*/
-.ui.vertical.text.menu {
- margin: @textVerticalMenuMargin;
-}
-.ui.vertical.text.menu:first-child {
- margin-top: 0rem;
-}
-.ui.vertical.text.menu:last-child {
- margin-bottom: 0rem;
-}
-.ui.vertical.text.menu .item {
- margin: @textVerticalMenuItemMargin;
- padding-left: 0em;
- padding-right: 0em;
-}
-.ui.vertical.text.menu .item > i.icon {
- float: @textVerticalMenuIconFloat;
- margin: @iconMargin;
-}
-.ui.vertical.text.menu .header.item {
- margin: @textVerticalMenuHeaderMargin;
-}
-
-/* Vertical Sub Menu */
-.ui.vertical.text.menu .item:not(.dropdown) > .menu {
- margin: @textMenuSubMenuMargin;
-}
-.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
- margin: @textMenuSubMenuItemMargin;
- padding: @textMenuSubMenuItemPadding;
-}
-
-/*--- hover ---*/
-.ui.text.menu .item:hover {
- opacity: 1;
- background-color: transparent;
-}
-
-/*--- active ---*/
-.ui.text.menu .active.item {
- background-color: transparent;
- border: none;
- box-shadow: none;
- font-weight: @textMenuActiveItemFontWeight;
- color: @textMenuActiveItemColor;
-}
-
-/*--- active hover ---*/
-.ui.text.menu .active.item:hover {
- background-color: transparent;
-}
-
-/* Disable Bariations */
-.ui.text.pointing.menu .active.item:after {
- box-shadow: none;
-}
-.ui.text.attached.menu {
- box-shadow: none;
-}
-
-/* Inverted */
-.ui.inverted.text.menu,
-.ui.inverted.text.menu .item,
-.ui.inverted.text.menu .item:hover,
-.ui.inverted.text.menu .active.item {
- background-color: transparent !important;
-}
-
-/* Fluid */
-.ui.fluid.text.menu {
- margin-left: 0em;
- margin-right: 0em;
-}
-
-/*--------------
- Icon Only
----------------*/
-
-/* Vertical Menu */
-.ui.vertical.icon.menu {
- display: inline-block;
- width: auto;
-}
-
-/* Item */
-.ui.icon.menu .item {
- height: auto;
- text-align: @iconMenuTextAlign;
- color: @iconMenuItemColor;
-}
-
-/* Icon */
-.ui.icon.menu .item > .icon:not(.dropdown) {
- margin: 0;
- opacity: 1;
-}
+ /* Item */
+ .ui.labeled.icon.menu .item {
+ min-width: @labeledIconMinWidth;
+ flex-direction: column;
+ }
-/* Icon Gylph */
-.ui.icon.menu .icon:before {
- opacity: 1;
+ /* Icon */
+ .ui.labeled.icon.menu > .item > .icon:not(.dropdown) {
+ height: 1em;
+ display: block;
+ font-size: @labeledIconSize !important;
+ margin: 0 auto @labeledIconTextMargin !important;
+ }
+ & when (@variationMenuFluid) {
+ /* Fluid */
+ .ui.fluid.labeled.icon.menu > .item {
+ min-width: 0;
+ }
+ }
}
-/* (x) Item Icon */
-.ui.menu .icon.item > .icon {
- width: auto;
- margin: 0em auto;
-}
-/* Vertical Icon */
-.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
- display: block;
- opacity: 1;
- margin: 0em auto;
- float: none;
-}
+/*******************************
+ Variations
+*******************************/
-/* Inverted */
-.ui.inverted.icon.menu .item {
- color: @iconMenuInvertedItemColor;
+& when (@variationMenuStackable) {
+ /*--------------
+ Stackable
+ ---------------*/
+
+ @media only screen and (max-width: @largestMobileScreen) {
+ .ui.stackable.menu {
+ flex-direction: column;
+ }
+ .ui.stackable.menu .item {
+ width: 100% !important;
+ }
+ .ui.stackable.menu .item:before {
+ position: absolute;
+ content: '';
+ top: auto;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+ }
+
+ .ui.stackable.menu .left.menu,
+ .ui.stackable.menu .left.item {
+ margin-right: 0 !important;
+ }
+ .ui.stackable.menu .right.menu,
+ .ui.stackable.menu .right.item {
+ margin-left: 0 !important;
+ }
+ .ui.stackable.menu .center.menu,
+ .ui.stackable.menu .center.item {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .ui.stackable.menu .right.menu,
+ .ui.stackable.menu .center.menu,
+ .ui.stackable.menu .left.menu {
+ flex-direction: column;
+ }
+ }
}
/*--------------
- Labeled Icon
+ Colors
---------------*/
-/* Menu */
-.ui.labeled.icon.menu {
- text-align: center;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+
+ & when not (@color=secondary) {
+ .ui.ui.ui.menu .@{color}.active.item,
+ .ui.ui.@{color}.menu .active.item:hover,
+ .ui.ui.@{color}.menu .active.item {
+ & when not (@secondaryPointingActiveBorderColor = currentColor) {
+ border-color: @c;
+ }
+ color: @c;
+ }
+ }
+})
-/* Item */
-.ui.labeled.icon.menu .item {
- min-width: @labeledIconMinWidth;
- flex-direction: column;
-}
+& when (@variationMenuInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
-/* Icon */
-.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
- height: 1em;
- display: block;
- font-size: @labeledIconSize !important;
- margin: 0em auto @labeledIconTextMargin !important;
-}
-
-/* Fluid */
-.ui.fluid.labeled.icon.menu > .item {
- min-width: 0em;
-}
+ .ui.inverted.menu {
+ border: @invertedBorder;
+ background: @invertedBackground;
+ box-shadow: @invertedBoxShadow;
+ }
+ /* Menu Item */
+ .ui.inverted.menu .item,
+ .ui.inverted.menu .item > a:not(.ui) {
+ background: @invertedItemBackground;
+ color: @invertedItemTextColor;
+ }
+ .ui.inverted.menu .item.menu {
+ background: @invertedSubMenuBackground;
+ }
-/*******************************
- Variations
-*******************************/
+ /*--- Border ---*/
+ .ui.inverted.menu .item:before {
+ background: @invertedDividerBackground;
+ }
+ & when (@variationMenuVertical) {
+ .ui.vertical.inverted.menu .item:before {
+ background: @invertedVerticalDividerBackground;
+ }
+ /* Sub Menu */
+ .ui.vertical.inverted.menu .menu .item,
+ .ui.vertical.inverted.menu .menu .item a:not(.ui) {
+ color: @invertedSubMenuColor;
+ }
+ }
+ /* Header */
+ .ui.inverted.menu .header.item {
+ margin: 0;
+ background: @invertedHeaderBackground;
+ box-shadow: none;
+ }
-/*--------------
- Stackable
----------------*/
+ /* Disabled */
+ .ui.ui.inverted.menu .item.disabled {
+ color: @invertedDisabledTextColor;
+ }
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.stackable.menu {
- flex-direction: column;
+ /*--- Hover ---*/
+ .ui.link.inverted.menu .item:hover,
+ .ui.inverted.menu .dropdown.item:hover,
+ .ui.inverted.menu .link.item:hover,
+ .ui.inverted.menu a.item:hover {
+ background: @invertedHoverBackground;
+ color: @invertedHoverColor;
}
- .ui.stackable.menu .item {
- width: 100% !important;
+ & when (@variationMenuVertical) {
+ .ui.vertical.inverted.menu .item .menu a.item:hover,
+ .ui.vertical.inverted.menu .item .menu .link.item:hover {
+ background: @invertedSubMenuBackground;
+ color: @invertedSubMenuHoverColor;
+ }
}
- .ui.stackable.menu .item:before {
- position: absolute;
- content: '';
- top: auto;
- bottom: 0px;
- left: 0px;
- width: 100%;
- height: @dividerSize;
- background: @verticalDividerBackground;
+ /*--- Pressed ---*/
+ .ui.inverted.menu a.item:active,
+ .ui.inverted.menu .link.item:active{
+ background: @invertedMenuPressedBackground;
+ color: @invertedMenuPressedColor;
}
- .ui.stackable.menu .left.menu,
- .ui.stackable.menu .left.item {
- margin-right: 0 !important;
+ /*--- Active ---*/
+ .ui.inverted.menu .active.item {
+ background: @invertedActiveBackground;
+ color: @invertedActiveColor !important;
}
- .ui.stackable.menu .right.menu,
- .ui.stackable.menu .right.item {
- margin-left: 0 !important;
+ & when (@variationMenuVertical) {
+ .ui.inverted.vertical.menu .item .menu .active.item {
+ background: @invertedSubMenuActiveBackground;
+ color: @invertedSubMenuActiveColor;
+ }
}
-
- .ui.stackable.menu .right.menu,
- .ui.stackable.menu .left.menu {
- flex-direction: column;
+ & when (@variationMenuPointing) {
+ .ui.inverted.pointing.menu .active.item:after {
+ background: @invertedArrowActiveColor;
+ margin: 0 !important;
+ box-shadow: none !important;
+ border: none !important;
+ }
}
-}
-
-/*--------------
- Colors
----------------*/
-
-/*--- Standard Colors ---*/
-.ui.menu .red.active.item,
-.ui.red.menu .active.item {
- border-color: @red !important;
- color: @red !important;
-}
-.ui.menu .orange.active.item,
-.ui.orange.menu .active.item {
- border-color: @orange !important;
- color: @orange !important;
-}
-.ui.menu .yellow.active.item,
-.ui.yellow.menu .active.item {
- border-color: @yellow !important;
- color: @yellow !important;
-}
-.ui.menu .olive.active.item,
-.ui.olive.menu .active.item {
- border-color: @olive !important;
- color: @olive !important;
-}
-.ui.menu .green.active.item,
-.ui.green.menu .active.item {
- border-color: @green !important;
- color: @green !important;
-}
-.ui.menu .teal.active.item,
-.ui.teal.menu .active.item {
- border-color: @teal !important;
- color: @teal !important;
-}
-.ui.menu .blue.active.item,
-.ui.blue.menu .active.item {
- border-color: @blue !important;
- color: @blue !important;
-}
-.ui.menu .violet.active.item,
-.ui.violet.menu .active.item {
- border-color: @violet !important;
- color: @violet !important;
-}
-.ui.menu .purple.active.item,
-.ui.purple.menu .active.item {
- border-color: @purple !important;
- color: @purple !important;
-}
-.ui.menu .pink.active.item,
-.ui.pink.menu .active.item {
- border-color: @pink !important;
- color: @pink !important;
-}
-.ui.menu .brown.active.item,
-.ui.brown.menu .active.item {
- border-color: @brown !important;
- color: @brown !important;
-}
-.ui.menu .grey.active.item,
-.ui.grey.menu .active.item {
- border-color: @grey !important;
- color: @grey !important;
-}
-
-
-/*--------------
- Inverted
----------------*/
-
-.ui.inverted.menu {
- border: @invertedBorder;
- background: @invertedBackground;
- box-shadow: @invertedBoxShadow;
-}
-
-/* Menu Item */
-.ui.inverted.menu .item,
-.ui.inverted.menu .item > a:not(.ui) {
- background: @invertedItemBackground;
- color: @invertedItemTextColor;
-}
-.ui.inverted.menu .item.menu {
- background: @invertedSubMenuBackground;
-}
-
-/*--- Border ---*/
-.ui.inverted.menu .item:before {
- background: @invertedDividerBackground;
-}
-.ui.vertical.inverted.menu .item:before {
- background: @invertedVerticalDividerBackground;
-}
-
-/* Sub Menu */
-.ui.vertical.inverted.menu .menu .item,
-.ui.vertical.inverted.menu .menu .item a:not(.ui) {
- color: @invertedSubMenuColor;
-}
-
-/* Header */
-.ui.inverted.menu .header.item {
- margin: 0em;
- background: @invertedHeaderBackground;
- box-shadow: none;
-}
-
-/* Disabled */
-.ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover {
- color: @invertedDisabledTextColor;
-}
-
-/*--- Hover ---*/
-.ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .dropdown.item:hover,
-.ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover {
- background: @invertedHoverBackground;
- color: @invertedHoverColor;
-}
-.ui.vertical.inverted.menu .item .menu a.item:hover,
-.ui.vertical.inverted.menu .item .menu .link.item:hover {
- background: @invertedSubMenuBackground;
- color: @invertedSubMenuHoverColor;
-}
-
-/*--- Pressed ---*/
-.ui.inverted.menu a.item:active,
-.ui.inverted.menu .link.item:active{
- background: @invertedMenuPressedBackground;
- color: @invertedMenuPressedColor;
-}
-
-/*--- Active ---*/
-.ui.inverted.menu .active.item {
- background: @invertedActiveBackground;
- color: @invertedActiveColor !important;
-}
-.ui.inverted.vertical.menu .item .menu .active.item {
- background: @invertedSubMenuActiveBackground;
- color: @invertedSubMenuActiveColor;
-}
-.ui.inverted.pointing.menu .active.item:after {
- background: @invertedArrowActiveColor !important;
- margin: 0em !important;
- box-shadow: none !important;
- border: none !important;
-}
-
-/*--- Active Hover ---*/
-.ui.inverted.menu .active.item:hover {
- background: @invertedActiveHoverBackground;
- color: @invertedActiveHoverColor !important;
-}
-.ui.inverted.pointing.menu .active.item:hover:after {
- background: @invertedArrowActiveHoverColor !important;
-}
-
-
-/*--------------
- Floated
----------------*/
-
-.ui.floated.menu {
- float: left;
- margin: 0rem @floatedDistance 0rem 0rem;
-}
-.ui.floated.menu .item:last-child:before {
- display: none;
-}
-
-.ui.right.floated.menu {
- float: right;
- margin: 0rem 0rem 0rem @floatedDistance;
-}
-
-
-/*--------------
- Inverted
----------------*/
-
-/* Red */
-.ui.inverted.menu .red.active.item,
-.ui.inverted.red.menu {
- background-color: @red;
-}
-.ui.inverted.red.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.red.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Orange */
-.ui.inverted.menu .orange.active.item,
-.ui.inverted.orange.menu {
- background-color: @orange;
-}
-.ui.inverted.orange.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.orange.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Yellow */
-.ui.inverted.menu .yellow.active.item,
-.ui.inverted.yellow.menu {
- background-color: @yellow;
-}
-.ui.inverted.yellow.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.yellow.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Olive */
-.ui.inverted.menu .olive.active.item,
-.ui.inverted.olive.menu {
- background-color: @olive;
-}
-.ui.inverted.olive.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.olive.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Green */
-.ui.inverted.menu .green.active.item,
-.ui.inverted.green.menu {
- background-color: @green;
-}
-.ui.inverted.green.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.green.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Teal */
-.ui.inverted.menu .teal.active.item,
-.ui.inverted.teal.menu {
- background-color: @teal;
-}
-.ui.inverted.teal.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.teal.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-/* Blue */
-.ui.inverted.menu .blue.active.item,
-.ui.inverted.blue.menu {
- background-color: @blue;
-}
-.ui.inverted.blue.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.blue.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
+ /*--- Active Hover ---*/
+ .ui.inverted.menu .active.item:hover {
+ background: @invertedActiveHoverBackground;
+ color: @invertedActiveHoverColor !important;
+ }
+ & when (@variationMenuPointing) {
+ .ui.inverted.pointing.menu .active.item:hover:after {
+ background: @invertedArrowActiveHoverColor;
+ }
+ }
}
-/* Violet */
-.ui.inverted.menu .violet.active.item,
-.ui.inverted.violet.menu {
- background-color: @violet;
-}
-.ui.inverted.violet.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.violet.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
+& when (@variationMenuFloated) {
+ /*--------------
+ Floated
+ ---------------*/
-/* Purple */
-.ui.inverted.menu .purple.active.item,
-.ui.inverted.purple.menu {
- background-color: @purple;
-}
-.ui.inverted.purple.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.purple.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
-
-/* Pink */
-.ui.inverted.menu .pink.active.item,
-.ui.inverted.pink.menu {
- background-color: @pink;
-}
-.ui.inverted.pink.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.pink.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
-}
+ .ui.floated.menu {
+ float: left;
+ margin: 0 @floatedDistance 0 0;
+ }
+ .ui.floated.menu .item:last-child:before {
+ display: none;
+ }
-/* Brown */
-.ui.inverted.menu .brown.active.item,
-.ui.inverted.brown.menu {
- background-color: @brown;
-}
-.ui.inverted.brown.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.brown.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
+ .ui.right.floated.menu {
+ float: right;
+ margin: 0 0 0 @floatedDistance;
+ }
}
-/* Grey */
-.ui.inverted.menu .grey.active.item,
-.ui.inverted.grey.menu {
- background-color: @grey;
-}
-.ui.inverted.grey.menu .item:before {
- background-color: @invertedColoredDividerBackground;
-}
-.ui.inverted.grey.menu .active.item {
- background-color: @invertedColoredActiveBackground !important;
+& when (@variationMenuInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
+
+ each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @h: @colors[@@color][hover];
+
+ & when not (@color=secondary) {
+ .ui.ui.ui.inverted.menu .@{color}.active.item,
+ .ui.ui.inverted.@{color}.menu {
+ background-color: @c;
+ }
+ .ui.inverted.@{color}.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+ }
+ .ui.ui.inverted.@{color}.menu .active.item {
+ background-color: @invertedColoredActiveBackground;
+ }
+ & when (@variationMenuPointing) {
+ .ui.inverted.pointing.@{color}.menu .active.item {
+ background-color: @h;
+ }
+ }
+ }
+ })
+
+ & when (@variationMenuPointing) {
+ .ui.ui.ui.inverted.pointing.menu .active.item:after {
+ background-color: inherit;
+ }
+ }
}
+& when (@variationMenuFitted) {
+ /*--------------
+ Fitted
+ ---------------*/
-/*--------------
- Fitted
----------------*/
-
-.ui.fitted.menu .item,
-.ui.fitted.menu .item .menu .item,
-.ui.menu .fitted.item {
- padding: 0em;
-}
-.ui.horizontally.fitted.menu .item,
-.ui.horizontally.fitted.menu .item .menu .item,
-.ui.menu .horizontally.fitted.item {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
-}
-.ui.vertically.fitted.menu .item,
-.ui.vertically.fitted.menu .item .menu .item,
-.ui.menu .vertically.fitted.item {
- padding-left: @itemHorizontalPadding;
- padding-right: @itemHorizontalPadding;
+ .ui.fitted.menu .item,
+ .ui.fitted.menu .item .menu .item,
+ .ui.menu .fitted.item {
+ padding: 0;
+ }
+ .ui.horizontally.fitted.menu .item,
+ .ui.horizontally.fitted.menu .item .menu .item,
+ .ui.menu .horizontally.fitted.item {
+ padding-top: @itemVerticalPadding;
+ padding-bottom: @itemVerticalPadding;
+ }
+ .ui.vertically.fitted.menu .item,
+ .ui.vertically.fitted.menu .item .menu .item,
+ .ui.menu .vertically.fitted.item {
+ padding-left: @itemHorizontalPadding;
+ padding-right: @itemHorizontalPadding;
+ }
}
-/*--------------
- Borderless
----------------*/
+& when (@variationMenuBorderless) {
+ /*--------------
+ Borderless
+ ---------------*/
-.ui.borderless.menu .item:before,
-.ui.borderless.menu .item .menu .item:before,
-.ui.menu .borderless.item:before {
- background: none !important;
+ .ui.borderless.menu .item:before,
+ .ui.borderless.menu .item .menu .item:before,
+ .ui.menu .borderless.item:before {
+ background: none !important;
+ }
}
-/*-------------------
- Compact
---------------------*/
+& when (@variationMenuCompact) {
+ /*-------------------
+ Compact
+ --------------------*/
-.ui.compact.menu {
- display: inline-flex;
- margin: 0em;
- vertical-align: middle;
-}
-.ui.compact.vertical.menu {
- display: inline-block;
-}
-.ui.compact.menu .item:last-child {
- border-radius: 0em @borderRadius @borderRadius 0em;
-}
-.ui.compact.menu .item:last-child:before {
- display: none;
-}
-.ui.compact.vertical.menu {
- width: auto !important;
-}
-.ui.compact.vertical.menu .item:last-child::before {
- display: block;
+ .ui.compact.menu {
+ display: inline-flex;
+ margin: 0;
+ vertical-align: middle;
+ }
+ & when (@variationMenuVertical) {
+ .ui.compact.vertical.menu {
+ /* IE hack to make dropdown icons appear inline */
+ display: -ms-inline-flexbox !important;
+ display: inline-block;
+ }
+ }
+ .ui.compact.menu:not(.secondary) .item:last-child {
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
+ .ui.compact.menu .item:last-child:before {
+ display: none;
+ }
+ & when (@variationMenuVertical) {
+ .ui.compact.vertical.menu {
+ width: auto !important;
+ }
+ .ui.compact.vertical.menu .item:last-child::before {
+ display: block;
+ }
+ }
}
-/*-------------------
- Fluid
---------------------*/
+& when (@variationMenuFluid) {
+ /*-------------------
+ Fluid
+ --------------------*/
-.ui.menu.fluid,
-.ui.vertical.menu.fluid {
- width: 100% !important;
+ .ui.menu.fluid,
+ .ui.vertical.menu.fluid {
+ width: 100% !important;
+ }
}
@@ -1655,15 +1598,15 @@ Floated Menu / Item
.ui.item.menu,
.ui.item.menu .item {
width: 100%;
- padding-left: 0em !important;
- padding-right: 0em !important;
- margin-left: 0em !important;
- margin-right: 0em !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
text-align: center;
justify-content: center;
}
-.ui.attached.item.menu {
- margin: 0em @attachedHorizontalOffset !important;
+.ui.attached.item.menu:not(.tabular) {
+ margin: 0 @attachedHorizontalOffset !important;
}
.ui.item.menu .item:last-child:before {
@@ -1704,278 +1647,292 @@ Floated Menu / Item
width: 8.333%;
}
-/*--------------
- Fixed
----------------*/
+& when (@variationMenuFixed) {
+ /*--------------
+ Fixed
+ ---------------*/
-.ui.menu.fixed {
- position: fixed;
- z-index: 101;
- margin: 0em;
- width: 100%;
-}
-.ui.menu.fixed,
-.ui.menu.fixed .item:first-child,
-.ui.menu.fixed .item:last-child {
- border-radius: 0px !important;
-}
+ .ui.menu.fixed {
+ position: fixed;
+ z-index: 101;
+ margin: 0;
+ width: 100%;
+ }
+ .ui.menu.fixed,
+ .ui.menu.fixed .item:first-child,
+ .ui.menu.fixed .item:last-child {
+ border-radius: 0 !important;
+ }
-.ui.fixed.menu,
-.ui[class*="top fixed"].menu {
- top: 0px;
- left: 0px;
- right: auto;
- bottom: auto;
-}
-.ui[class*="top fixed"].menu {
- border-top: none;
- border-left: none;
- border-right: none;
-}
-.ui[class*="right fixed"].menu {
- border-top: none;
- border-bottom: none;
- border-right: none;
- top: 0px;
- right: 0px;
- left: auto;
- bottom: auto;
- width: auto;
- height: 100%;
-}
-.ui[class*="bottom fixed"].menu {
- border-bottom: none;
- border-left: none;
- border-right: none;
- bottom: 0px;
- left: 0px;
- top: auto;
- right: auto;
-}
-.ui[class*="left fixed"].menu {
- border-top: none;
- border-bottom: none;
- border-left: none;
- top: 0px;
- left: 0px;
- right: auto;
- bottom: auto;
- width: auto;
- height: 100%;
-}
+ .ui.fixed.menu,
+ .ui[class*="top fixed"].menu {
+ top: 0;
+ left: 0;
+ right: auto;
+ bottom: auto;
+ }
+ .ui[class*="top fixed"].menu {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ }
+ .ui[class*="right fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-right: none;
+ top: 0;
+ right: 0;
+ left: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+ }
+ .ui[class*="bottom fixed"].menu {
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
+ bottom: 0;
+ left: 0;
+ top: auto;
+ right: auto;
+ }
+ .ui[class*="left fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-left: none;
+ top: 0;
+ left: 0;
+ right: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+ }
-/* Coupling with Grid */
-.ui.fixed.menu + .ui.grid {
- padding-top: @fixedPrecedingGridMargin;
+ /* Coupling with Grid */
+ .ui.fixed.menu + .ui.grid {
+ padding-top: @fixedPrecedingGridMargin;
+ }
}
+& when (@variationMenuPointing) {
+ /*-------------------
+ Pointing
+ --------------------*/
-/*-------------------
- Pointing
---------------------*/
-
-.ui.pointing.menu .item:after {
- visibility: hidden;
- position: absolute;
- content: '';
- top: 100%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- background: none;
-
- margin: (@arrowBorderWidth / 2) 0em 0em;
- width: @arrowSize;
- height: @arrowSize;
-
- border: none;
- border-bottom: @arrowBorder;
- border-right: @arrowBorder;
-
- z-index: @arrowZIndex;
- transition: @arrowTransition;
-}
-.ui.vertical.pointing.menu .item:after {
- position: absolute;
- top: 50%;
- right: 0%;
- bottom: auto;
- left: auto;
+ .ui.pointing.menu .item:after {
+ visibility: hidden;
+ position: absolute;
+ content: '';
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ background: none;
- transform: translateX(50%) translateY(-50%) rotate(45deg);
- margin: 0em -(@arrowBorderWidth / 2) 0em 0em;
+ margin: (@arrowBorderWidth / 2) 0 0;
+ width: @arrowSize;
+ height: @arrowSize;
- border: none;
- border-top: @arrowBorder;
- border-right: @arrowBorder;
-}
+ border: none;
+ border-bottom: @arrowBorder;
+ border-right: @arrowBorder;
-/* Active */
-.ui.pointing.menu .active.item:after {
- visibility: visible;
-}
-.ui.pointing.menu .active.dropdown.item:after {
- visibility: hidden;
-}
+ z-index: @arrowZIndex;
+ transition: @arrowTransition;
+ }
+ & when (@variationMenuVertical) {
+ .ui.vertical.pointing.menu .item:after {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ bottom: auto;
+ left: auto;
+
+ transform: translateX(50%) translateY(-50%) rotate(45deg);
+ margin: 0 -(@arrowBorderWidth / 2) 0 0;
+
+ border: none;
+ border-top: @arrowBorder;
+ border-right: @arrowBorder;
+ }
+ }
+ .ui.pointing.menu .ui.dropdown .menu .item:after,
+ .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
+ display: none;
+ }
-/* Don't double up pointers */
-.ui.pointing.menu .dropdown.active.item:after,
-.ui.pointing.menu .active.item .menu .active.item:after {
- display: none;
-}
+ /* Active */
+ .ui.pointing.menu .active.item:after {
+ visibility: visible;
+ }
+ .ui.pointing.menu .active.dropdown.item:after {
+ visibility: hidden;
+ }
-/* Colors */
-.ui.pointing.menu .active.item:hover:after {
- background-color: @arrowHoverColor;
-}
-.ui.pointing.menu .active.item:after {
- background-color: @arrowActiveColor;
-}
-.ui.pointing.menu .active.item:hover:after {
- background-color: @arrowActiveHoverColor;
-}
+ /* Don't double up pointers */
+ .ui.pointing.menu .dropdown.active.item:after,
+ .ui.pointing.menu .active.item .menu .active.item:after {
+ display: none;
+ }
-.ui.vertical.pointing.menu .active.item:hover:after {
- background-color: @arrowVerticalHoverColor;
-}
-.ui.vertical.pointing.menu .active.item:after {
- background-color: @arrowVerticalActiveColor;
-}
-.ui.vertical.pointing.menu .menu .active.item:after {
- background-color: @arrowVerticalSubMenuColor;
+ /* Colors */
+ .ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowHoverColor;
+ }
+ .ui.pointing.menu .active.item:after {
+ background-color: @arrowActiveColor;
+ }
+ .ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowActiveHoverColor;
+ }
+ & when (@variationMenuVertical) {
+ .ui.vertical.pointing.menu .active.item:hover:after {
+ background-color: @arrowVerticalHoverColor;
+ }
+ .ui.vertical.pointing.menu .active.item:after {
+ background-color: @arrowVerticalActiveColor;
+ }
+ .ui.vertical.pointing.menu .menu .active.item:after {
+ background-color: @arrowVerticalSubMenuColor;
+ }
+ }
}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ .ui.inverted.pointing.menu .@{color}.active.item:after {
+ background-color: @c;
+ }
+})
+
+& when (@variationMenuAttached) {
+ /*--------------
+ Attached
+ ---------------*/
+
+ /* Middle */
+ .ui.attached.menu {
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+ }
+ .ui.attached + .ui.attached.menu:not(.top) {
+ border-top: none;
+ }
-/*--------------
- Attached
----------------*/
-
-/* Middle */
-.ui.attached.menu {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
-}
-.ui.attached + .ui.attached.menu:not(.top) {
- border-top: none;
-}
-
-/* Top */
-.ui[class*="top attached"].menu {
- bottom: 0px;
- margin-bottom: 0em;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui.menu[class*="top attached"]:first-child {
- margin-top: 0em;
-}
+ /* Top */
+ .ui[class*="top attached"].menu {
+ bottom: 0;
+ margin-bottom: 0;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui.menu[class*="top attached"]:first-child {
+ margin-top: 0;
+ }
-/* Bottom */
-.ui[class*="bottom attached"].menu {
- bottom: 0px;
- margin-top: 0em;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-.ui[class*="bottom attached"].menu:last-child {
- margin-bottom: 0em;
-}
+ /* Bottom */
+ .ui[class*="bottom attached"].menu {
+ bottom: 0;
+ margin-top: 0;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
+ .ui[class*="bottom attached"].menu:last-child {
+ margin-bottom: 0;
+ }
-/* Attached Menu Item */
-.ui.top.attached.menu > .item:first-child {
- border-radius: @borderRadius 0em 0em 0em;
-}
-.ui.bottom.attached.menu > .item:first-child {
- border-radius: 0em 0em 0em @borderRadius;
-}
+ /* Attached Menu Item */
+ .ui.top.attached.menu > .item:first-child {
+ border-radius: @borderRadius 0 0 0;
+ }
+ .ui.bottom.attached.menu > .item:first-child {
+ border-radius: 0 0 0 @borderRadius;
+ }
-/* Tabular Attached */
-.ui.attached.menu:not(.tabular) {
- border: @attachedBorder;
-}
-.ui.attached.inverted.menu {
- border: none;
-}
-.ui.attached.tabular.menu {
- margin-left: 0;
- margin-right: 0;
- width: 100%;
+ /* Tabular Attached */
+ .ui.attached.menu:not(.tabular) {
+ border: @attachedBorder;
+ }
+ & when (@variationMenuInverted) {
+ .ui.attached.inverted.menu {
+ border: none;
+ }
+ }
+ & when (@variationMenuTabular) {
+ .ui.attached.tabular.menu {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ }
+ }
}
/*--------------
Sizes
---------------*/
-/* Mini */
-.ui.mini.menu {
- font-size: @mini;
-}
-.ui.mini.vertical.menu {
- width: @miniWidth;
-}
-
-/* Tiny */
-.ui.tiny.menu {
- font-size: @tiny;
-}
-.ui.tiny.vertical.menu {
- width: @tinyWidth;
-}
-
-/* Small */
-.ui.small.menu {
- font-size: @small;
-}
-.ui.small.vertical.menu {
- width: @smallWidth;
-}
-
-/* Medium */
.ui.menu {
font-size: @medium;
}
.ui.vertical.menu {
width: @mediumWidth;
}
-
-/* Large */
-.ui.large.menu {
- font-size: @large;
-}
-.ui.large.vertical.menu {
- width: @largeWidth;
+& when not (@variationMenuSizes = false) {
+ each(@variationMenuSizes, {
+ @w: @{value}Width;
+ @s: @@value;
+ .ui.@{value}.menu,
+ .ui.@{value}.menu .dropdown,
+ .ui.@{value}.menu .dropdown .menu > .item {
+ font-size: @s;
+ }
+ .ui.@{value}.vertical.menu:not(.icon) {
+ width: @@w;
+ }
+ })
}
-/* Huge */
-.ui.huge.menu {
- font-size: @huge;
+/*-------------------
+ Inverted dropdowns
+--------------------*/
+.ui.menu .ui.inverted.inverted.dropdown.item .menu {
+ background: @invertedDropdownBackground;
+ box-shadow: @invertedDropdownMenuBoxShadow;
}
-.ui.huge.vertical.menu {
- width: @hugeWidth;
+
+.ui.menu .ui.inverted.dropdown .menu > .item {
+ color: @invertedDropdownItemColor !important;
}
-/* Big */
-.ui.big.menu {
- font-size: @big;
+.ui.menu .ui.inverted.dropdown .menu > .active.item {
+ background: @invertedDropdownActiveItemBackground !important;
+ color: @invertedDropdownActiveItemColor !important;
}
-.ui.big.vertical.menu {
- width: @bigWidth;
+
+.ui.menu .ui.inverted.dropdown .menu > .item:hover {
+ background: @invertedDropdownHoveredItemBackground !important;
+ color: @invertedDropdownHoveredItemColor !important;
}
-/* Massive */
-.ui.massive.menu {
- font-size: @massive;
+.ui.menu .ui.inverted.dropdown .menu > .selected.item {
+ background: @invertedDropdownSelectedItemBackground !important;
+ color: @invertedDropdownSelectedItemColor !important;
}
-.ui.massive.vertical.menu {
- width: @massiveWidth;
+
+& when (@variationMenuVertical) {
+ /* Vertical */
+ .ui.vertical.menu .inverted.dropdown.item .menu {
+ box-shadow: @invertedDropdownMenuBoxShadow;
+ }
}
.loadUIOverrides();
diff --git a/ui/src/definitions/collections/message.less b/ui/src/definitions/collections/message.less
index 8712679ebe9..5526367ad14 100644
--- a/ui/src/definitions/collections/message.less
+++ b/ui/src/definitions/collections/message.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Message
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Message
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -24,7 +24,7 @@
.ui.message {
position: relative;
min-height: 1em;
- margin: @verticalMargin 0em;
+ margin: @verticalMargin 0;
background: @background;
padding: @padding;
line-height: @lineHeight;
@@ -35,10 +35,10 @@
}
.ui.message:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -62,13 +62,13 @@
/* Paragraph */
.ui.message p {
opacity: @messageTextOpacity;
- margin: @messageParagraphMargin 0em;
+ margin: @messageParagraphMargin 0;
}
.ui.message p:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.message .header + p {
margin-top: @headerParagraphDistance;
@@ -77,22 +77,22 @@
/* List */
.ui.message .list:not(.ui) {
text-align: left;
- padding: 0em;
+ padding: 0;
opacity: @listOpacity;
list-style-position: @listStylePosition;
- margin: @listMargin 0em 0em;
+ margin: @listMargin 0 0;
}
.ui.message .list:not(.ui):first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message .list:not(.ui):last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
.ui.message .list:not(.ui) li {
position: relative;
list-style-type: none;
- margin: 0em 0em @listItemMargin @listItemIndent;
- padding: 0em;
+ margin: 0 0 @listItemMargin @listItemIndent;
+ padding: 0;
}
.ui.message .list:not(.ui) li:before {
position: absolute;
@@ -102,7 +102,7 @@
vertical-align: baseline;
}
.ui.message .list:not(.ui) li:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -115,7 +115,7 @@
.ui.message > .close.icon {
cursor: pointer;
position: absolute;
- margin: 0em;
+ margin: 0;
top: @closeTopDistance;
right: @closeRightDistance;
opacity: @closeOpacity;
@@ -127,10 +127,10 @@
/* First / Last Element */
.ui.message > :first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.message > :last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*******************************
@@ -138,7 +138,7 @@
*******************************/
.ui.dropdown .menu > .message {
- margin: 0px -@borderWidth;
+ margin: 0 -@borderWidth;
}
/*******************************
@@ -170,84 +170,93 @@
Variations
*******************************/
-/*--------------
- Compact
----------------*/
-
-.ui.compact.message {
- display: inline-block;
-}
-.ui.compact.icon.message {
- display: inline-flex;
-}
-
-
-/*--------------
- Attached
----------------*/
-
-.ui.attached.message {
- margin-bottom: @attachedYOffset;
- border-radius: @borderRadius @borderRadius 0em 0em;
- box-shadow: @attachedBoxShadow;
- margin-left: @attachedXOffset;
- margin-right: @attachedXOffset;
-}
-.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
- margin-top: @attachedYOffset;
- border-radius: 0em;
-}
-.ui.bottom.attached.message {
- margin-top: @attachedYOffset;
- border-radius: 0em 0em @borderRadius @borderRadius;
- box-shadow: @attachedBottomBoxShadow;
-}
-.ui.bottom.attached.message:not(:last-child) {
- margin-bottom: @verticalMargin;
-}
-.ui.attached.icon.message {
- width: auto;
-}
-
-
-/*--------------
- Icon
----------------*/
-
-.ui.icon.message {
- display: flex;
- width: 100%;
- align-items: center;
-}
-.ui.icon.message > .icon:not(.close) {
- display: block;
- flex: 0 0 auto;
- width: auto;
- line-height: 1;
- vertical-align: @iconVerticalAlign;
- font-size: @iconSize;
- opacity: @iconOpacity;
-}
-.ui.icon.message > .content {
- display: block;
- flex: 1 1 auto;
- vertical-align: @iconVerticalAlign;
-}
-
-
-.ui.icon.message .icon:not(.close) + .content {
- padding-left: @iconContentDistance;
-}
-.ui.icon.message .circular.icon {
- width: 1em;
-}
-
-/*--------------
- Floating
----------------*/
-
-.ui.floating.message {
- box-shadow: @floatingBoxShadow;
+& when (@variationMessageCompact) {
+ /*--------------
+ Compact
+ ---------------*/
+
+ .ui.compact.message {
+ display: inline-block;
+ }
+ .ui.compact.icon.message {
+ display: inline-flex;
+ width: auto;
+ }
+}
+
+& when (@variationMessageAttached) {
+ /*--------------
+ Attached
+ ---------------*/
+
+ .ui.attached.message {
+ margin-bottom: @attachedYOffset;
+ border-radius: @borderRadius @borderRadius 0 0;
+ box-shadow: @attachedBoxShadow;
+ margin-left: @attachedXOffset;
+ margin-right: @attachedXOffset;
+ }
+ .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
+ margin-top: @attachedYOffset;
+ border-radius: 0;
+ }
+ .ui.bottom.attached.message {
+ margin-top: @attachedYOffset;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ box-shadow: @attachedBottomBoxShadow;
+ }
+ .ui.bottom.attached.message:not(:last-child) {
+ margin-bottom: @verticalMargin;
+ }
+ & when (@variationMessageIcon) {
+ .ui.attached.icon.message {
+ width: auto;
+ }
+ }
+}
+
+& when (@variationMessageIcon) {
+ /*--------------
+ Icon
+ ---------------*/
+
+ .ui.icon.message {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ }
+ .ui.icon.message > .icon:not(.close) {
+ display: block;
+ flex: 0 0 auto;
+ width: auto;
+ line-height: 1;
+ vertical-align: @iconVerticalAlign;
+ font-size: @iconSize;
+ opacity: @iconOpacity;
+ }
+ .ui.icon.message > .content {
+ display: block;
+ flex: 1 1 auto;
+ vertical-align: @iconVerticalAlign;
+ }
+
+
+ .ui.icon.message .icon:not(.close) + .content {
+ padding-left: @iconContentDistance;
+ }
+ .ui.icon.message .circular.icon {
+ width: 1em;
+ }
+}
+
+& when (@variationMessageFloating) {
+ /*--------------
+ Floating
+ ---------------*/
+
+ .ui.floating.message {
+ box-shadow: @floatingBoxShadow;
+ }
}
@@ -255,227 +264,151 @@
Colors
---------------*/
-.ui.black.message {
- background-color: @black;
- color: @invertedTextColor;
-}
-
/*--------------
Types
---------------*/
-
-/* Positive */
-.ui.positive.message {
- background-color: @positiveBackgroundColor;
- color: @positiveTextColor;
-}
-.ui.positive.message,
-.ui.attached.positive.message {
- box-shadow: @positiveBoxShadow;
-}
-.ui.positive.message .header {
- color: @positiveHeaderColor;
-}
-
-/* Negative */
-.ui.negative.message {
- background-color: @negativeBackgroundColor;
- color: @negativeTextColor;
-}
-.ui.negative.message,
-.ui.attached.negative.message {
- box-shadow: @negativeBoxShadow;
-}
-.ui.negative.message .header {
- color: @negativeHeaderColor;
-}
-
-/* Info */
-.ui.info.message {
- background-color: @infoBackgroundColor;
- color: @infoTextColor;
-}
-.ui.info.message,
-.ui.attached.info.message {
- box-shadow: @infoBoxShadow;
-}
-.ui.info.message .header {
- color: @infoHeaderColor;
-}
-
-/* Warning */
-.ui.warning.message {
- background-color: @warningBackgroundColor;
- color: @warningTextColor;
-}
-.ui.warning.message,
-.ui.attached.warning.message {
- box-shadow: @warningBoxShadow;
-}
-.ui.warning.message .header {
- color: @warningHeaderColor;
-}
-
-/* Error */
-.ui.error.message {
- background-color: @errorBackgroundColor;
- color: @errorTextColor;
-}
-.ui.error.message,
-.ui.attached.error.message {
- box-shadow: @errorBoxShadow;
-}
-.ui.error.message .header {
- color: @errorHeaderColor;
-}
-
-/* Success */
-.ui.success.message {
- background-color: @successBackgroundColor;
- color: @successTextColor;
-}
-.ui.success.message,
-.ui.attached.success.message {
- box-shadow: @successBoxShadow;
-}
-.ui.success.message .header {
- color: @successHeaderColor;
-}
-
-
-/* Colors */
-.ui.inverted.message,
-.ui.black.message {
- background-color: @black;
- color: @invertedTextColor;
-}
-
-.ui.red.message {
- background-color: @redBackground;
- color: @redTextColor;
- box-shadow: @redBoxShadow;
-}
-.ui.red.message .header {
- color: @redHeaderColor;
-}
-
-.ui.orange.message {
- background-color: @orangeBackground;
- color: @orangeTextColor;
- box-shadow: @orangeBoxShadow;
-}
-.ui.orange.message .header {
- color: @orangeHeaderColor;
-}
-
-.ui.yellow.message {
- background-color: @yellowBackground;
- color: @yellowTextColor;
- box-shadow: @yellowBoxShadow;
-}
-.ui.yellow.message .header {
- color: @yellowHeaderColor;
-}
-
-.ui.olive.message {
- background-color: @oliveBackground;
- color: @oliveTextColor;
- box-shadow: @oliveBoxShadow;
-}
-.ui.olive.message .header {
- color: @oliveHeaderColor;
-}
-
-.ui.green.message {
- background-color: @greenBackground;
- color: @greenTextColor;
- box-shadow: @greenBoxShadow;
-}
-.ui.green.message .header {
- color: @greenHeaderColor;
-}
-
-.ui.teal.message {
- background-color: @tealBackground;
- color: @tealTextColor;
- box-shadow: @tealBoxShadow;
-}
-.ui.teal.message .header {
- color: @tealHeaderColor;
-}
-
-.ui.blue.message {
- background-color: @blueBackground;
- color: @blueTextColor;
- box-shadow: @blueBoxShadow;
-}
-.ui.blue.message .header {
- color: @blueHeaderColor;
-}
-
-.ui.violet.message {
- background-color: @violetBackground;
- color: @violetTextColor;
- box-shadow: @violetBoxShadow;
-}
-.ui.violet.message .header {
- color: @violetHeaderColor;
-}
-
-.ui.purple.message {
- background-color: @purpleBackground;
- color: @purpleTextColor;
- box-shadow: @purpleBoxShadow;
-}
-.ui.purple.message .header {
- color: @purpleHeaderColor;
-}
-
-.ui.pink.message {
- background-color: @pinkBackground;
- color: @pinkTextColor;
- box-shadow: @pinkBoxShadow;
-}
-.ui.pink.message .header {
- color: @pinkHeaderColor;
-}
-
-.ui.brown.message {
- background-color: @brownBackground;
- color: @brownTextColor;
- box-shadow: @brownBoxShadow;
-}
-.ui.brown.message .header {
- color: @brownHeaderColor;
+& when (@variationMessageConsequences) {
+
+ @consequences: {
+ @positive: {
+ background : @positiveBackgroundColor;
+ header : @positiveHeaderColor;
+ boxShadow : @positiveBoxShadow;
+ boxFloatShadow : @positiveBoxFloatingShadow;
+ text : @positiveTextColor;
+ };
+ @negative: {
+ background : @negativeBackgroundColor;
+ header : @negativeHeaderColor;
+ boxShadow : @negativeBoxShadow;
+ boxFloatShadow : @negativeBoxFloatingShadow;
+ text : @negativeTextColor;
+ };
+ @info: {
+ background : @infoBackgroundColor;
+ header : @infoHeaderColor;
+ boxShadow : @infoBoxShadow;
+ boxFloatShadow : @infoBoxFloatingShadow;
+ text : @infoTextColor;
+ };
+ @warning: {
+ background : @warningBackgroundColor;
+ header : @warningHeaderColor;
+ boxShadow : @warningBoxShadow;
+ boxFloatShadow : @warningBoxFloatingShadow;
+ text : @warningTextColor;
+ };
+ @error: {
+ background : @errorBackgroundColor;
+ header : @errorHeaderColor;
+ boxShadow : @errorBoxShadow;
+ boxFloatShadow : @errorBoxFloatingShadow;
+ text : @errorTextColor;
+ };
+ @success: {
+ background : @successBackgroundColor;
+ header : @successHeaderColor;
+ boxShadow : @successBoxShadow;
+ boxFloatShadow : @successBoxFloatingShadow;
+ text : @successTextColor;
+ };
+ }
+
+ /* Colors */
+
+ each(@consequences, {
+ @color: replace(@key, '@', '');
+ @bg: @consequences[@@color][background];
+ @hd: @consequences[@@color][header];
+ @bs: @consequences[@@color][boxShadow];
+ @bfs: @consequences[@@color][boxFloatShadow];
+ @t: @consequences[@@color][text];
+
+ .ui.@{color}.message {
+ background-color: @bg;
+ color: @t;
+ }
+
+ .ui.@{color}.message,
+ .ui.attached.@{color}.message {
+ box-shadow: @bs;
+ }
+ & when (@variationMessageFloating) {
+ .ui.floating.@{color}.message {
+ box-shadow: @bfs;
+ }
+ }
+ .ui.@{color}.message .header {
+ color: @hd;
+ }
+ })
+}
+
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @bg: @colors[@@color][background];
+ @hd: @colors[@@color][header];
+ @bs: @colors[@@color][boxShadow];
+ @bfs: @colors[@@color][boxFloatShadow];
+ @t: @colors[@@color][text];
+ @isVeryDark: @colors[@@color][isVeryDark];
+
+ .ui.@{color}.message {
+ & when not (@isVeryDark) {
+ background-color: @bg;
+ color: @t;
+ }
+ & when (@isVeryDark) {
+ background-color: @black;
+ color: @invertedTextColor;
+ }
+ }
+
+ .ui.@{color}.message,
+ .ui.attached.@{color}.message {
+ & when not (@isVeryDark) {
+ box-shadow: @bs;
+ }
+ }
+ & when (@variationMessageFloating) {
+ .ui.floating.@{color}.message {
+ & when not (@isVeryDark) {
+ box-shadow: @bfs;
+ }
+ }
+ }
+
+ .ui.@{color}.message .header {
+ & when not (@isVeryDark) {
+ color: @hd;
+ }
+ & when (@isVeryDark) {
+ color: @invertedTextColor;
+ }
+ }
+})
+
+& when (@variationMessageInverted) {
+ .ui.inverted.message {
+ background-color: @black;
+ color: @invertedTextColor;
+ }
}
/*--------------
Sizes
---------------*/
-.ui.mini.message {
- font-size: @relativeMini;
-}
-.ui.tiny.message {
- font-size: @relativeTiny;
-}
-.ui.small.message {
- font-size: @relativeSmall;
-}
.ui.message {
font-size: @relativeMedium;
}
-.ui.large.message {
- font-size: @relativeLarge;
-}
-.ui.big.message {
- font-size: @relativeBig;
-}
-.ui.huge.message {
- font-size: @relativeHuge;
-}
-.ui.massive.message {
- font-size: @relativeMassive;
+& when not (@variationMessageSizes = false) {
+ each(@variationMessageSizes, {
+ @s: @{value}MessageSize;
+ .ui.@{value}.message {
+ font-size: @@s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/collections/table.less b/ui/src/definitions/collections/table.less
index 240e830bdfb..526ce321b15 100644
--- a/ui/src/definitions/collections/table.less
+++ b/ui/src/definitions/collections/table.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Table
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Table
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -31,16 +31,22 @@
box-shadow: @boxShadow;
border-radius: @borderRadius;
text-align: @textAlign;
+ vertical-align: @verticalAlign;
color: @color;
border-collapse: @borderCollapse;
border-spacing: @borderSpacing;
}
.ui.table:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.table:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
+}
+.ui.table > thead,
+.ui.table > tbody {
+ text-align: inherit;
+ vertical-align: inherit;
}
/*******************************
@@ -53,11 +59,17 @@
transition: @transition;
}
+/* Rowspan helper class */
+.ui.table th.rowspanned,
+.ui.table td.rowspanned {
+ display:none;
+}
+
/* Headers */
-.ui.table thead {
+.ui.table > thead {
box-shadow: @headerBoxShadow;
}
-.ui.table thead th {
+.ui.table > thead > tr > th {
cursor: auto;
background: @headerBackground;
text-align: @headerAlign;
@@ -71,25 +83,26 @@
border-left: @headerDivider;
}
-.ui.table thead tr > th:first-child {
+.ui.table > thead > tr > th:first-child {
border-left: none;
}
-.ui.table thead tr:first-child > th:first-child {
- border-radius: @borderRadius 0em 0em 0em;
+.ui.table > thead > tr:first-child > th:first-child {
+ border-radius: @borderRadius 0 0 0;
}
-.ui.table thead tr:first-child > th:last-child {
- border-radius: 0em @borderRadius 0em 0em;
+.ui.table > thead > tr:first-child > th:last-child {
+ border-radius: 0 @borderRadius 0 0;
}
-.ui.table thead tr:first-child > th:only-child {
- border-radius: @borderRadius @borderRadius 0em 0em;
+.ui.table > thead > tr:first-child > th:only-child {
+ border-radius: @borderRadius @borderRadius 0 0;
}
/* Footer */
-.ui.table tfoot {
+.ui.table > tfoot {
box-shadow: @footerBoxShadow;
}
-.ui.table tfoot th {
+.ui.table > tfoot > tr > th,
+.ui.table > tfoot > tr > td {
cursor: auto;
border-top: @footerBorder;
background: @footerBackground;
@@ -101,34 +114,41 @@
font-weight: @footerFontWeight;
text-transform: @footerTextTransform;
}
-.ui.table tfoot tr > th:first-child {
+.ui.table > tfoot > tr > th:first-child,
+.ui.table > tfoot > tr > td:first-child {
border-left: none;
}
-.ui.table tfoot tr:first-child > th:first-child {
- border-radius: 0em 0em 0em @borderRadius;
+.ui.table > tfoot > tr:first-child > th:first-child,
+.ui.table > tfoot > tr:first-child > td:first-child {
+ border-radius: 0 0 0 @borderRadius;
}
-.ui.table tfoot tr:first-child > th:last-child {
- border-radius: 0em 0em @borderRadius 0em;
+.ui.table > tfoot > tr:first-child > th:last-child,
+.ui.table > tfoot > tr:first-child > td:last-child {
+ border-radius: 0 0 @borderRadius 0;
}
-.ui.table tfoot tr:first-child > th:only-child {
- border-radius: 0em 0em @borderRadius @borderRadius;
+.ui.table > tfoot > tr:first-child > th:only-child,
+.ui.table > tfoot > tr:first-child > td:only-child {
+ border-radius: 0 0 @borderRadius @borderRadius;
}
/* Table Row */
-.ui.table tr td {
+.ui.table > tr > td,
+.ui.table > tbody > tr > td {
border-top: @rowBorder;
}
-.ui.table tr:first-child td {
+.ui.table > tr:first-child > td,
+.ui.table > tbody > tr:first-child > td {
border-top: none;
}
/* Repeated tbody */
-.ui.table tbody + tbody tr:first-child td {
+.ui.table > tbody + tbody tr:first-child > td {
border-top: @rowBorder;
}
/* Table Cells */
-.ui.table td {
+.ui.table > tbody > tr > td,
+.ui.table > tr > td {
padding: @cellVerticalPadding @cellHorizontalPadding;
text-align: @cellTextAlign;
}
@@ -138,12 +158,12 @@
vertical-align: @iconVerticalAlign;
}
.ui.table > .icon:only-child {
- margin: 0em;
+ margin: 0;
}
/* Table Segment */
.ui.table.segment {
- padding: 0em;
+ padding: 0;
}
.ui.table.segment:after {
display: none;
@@ -157,47 +177,92 @@
@media only screen and (max-width : @largestMobileScreen) {
.ui.table:not(.unstackable) {
width: 100%;
+ padding: 0;
}
- .ui.table:not(.unstackable) tbody,
- .ui.table:not(.unstackable) tr,
- .ui.table:not(.unstackable) tr > th,
- .ui.table:not(.unstackable) tr > td {
+ .ui.table:not(.unstackable) > thead,
+ .ui.table:not(.unstackable) > thead > tr,
+ .ui.table:not(.unstackable) > tfoot,
+ .ui.table:not(.unstackable) > tfoot > tr,
+ .ui.table:not(.unstackable) > tbody,
+ .ui.table:not(.unstackable) > tr,
+ .ui.table:not(.unstackable) > tbody > tr,
+ .ui.table:not(.unstackable) > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
+ .ui.table:not(.unstackable) > tr > td:not(.rowspanned),
+ .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
+ .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
display: block !important;
width: auto !important;
- display: block !important;
}
- .ui.table:not(.unstackable) {
- padding: 0em;
- }
- .ui.table:not(.unstackable) thead {
+ .ui.table:not(.unstackable) > thead {
display: @responsiveHeaderDisplay;
}
- .ui.table:not(.unstackable) tfoot {
+ .ui.table:not(.unstackable) > tfoot {
display: @responsiveFooterDisplay;
}
- .ui.table:not(.unstackable) tr {
+ .ui.ui.ui.ui.table:not(.unstackable) > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
padding-top: @responsiveRowVerticalPadding;
padding-bottom: @responsiveRowVerticalPadding;
box-shadow: @responsiveRowBoxShadow;
}
- .ui.table:not(.unstackable) tr > th,
- .ui.table:not(.unstackable) tr > td {
+ .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
+ .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
+ .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
+ .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
background: none;
- border: none !important;
- padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;
+ border: none;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
box-shadow: @responsiveCellBoxShadow;
}
- .ui.table:not(.unstackable) th:first-child,
- .ui.table:not(.unstackable) td:first-child {
+ .ui.table:not(.unstackable) > tr > th:first-child,
+ .ui.table:not(.unstackable) > thead > tr > th:first-child,
+ .ui.table:not(.unstackable) > tbody > tr > th:first-child,
+ .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
+ .ui.table:not(.unstackable) > tr > td:first-child,
+ .ui.table:not(.unstackable) > tbody > tr > td:first-child,
+ .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
font-weight: @responsiveCellHeaderFontWeight;
}
/* Definition Table */
- .ui.definition.table:not(.unstackable) thead th:first-child {
+ .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
box-shadow: none !important;
}
+ & when (@variationTableMarked) {
+ each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+ .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
+ &.left {
+ box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
+ }
+ &.right {
+ box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
+ }
+ }
+ & when (@variationTableInverted) {
+ .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} {
+ &.left {
+ box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
+ }
+ &.right {
+ box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
+ }
+ }
+ }
+ })
+ }
}
@@ -206,10 +271,8 @@
*******************************/
/* UI Image */
-.ui.table th .image,
-.ui.table th .image img,
-.ui.table td .image,
-.ui.table td .image img {
+.ui.table .collapsing .image,
+.ui.table .collapsing .image img {
max-width: none;
}
@@ -221,410 +284,488 @@
/*--------------
Complex
---------------*/
-
-.ui.structured.table {
- border-collapse: collapse;
-}
-.ui.structured.table thead th {
- border-left: @headerDivider;
- border-right: @headerDivider;
-}
-.ui.structured.sortable.table thead th {
- border-left: @sortableBorder;
- border-right: @sortableBorder;
-}
-.ui.structured.basic.table th {
- border-left: @basicTableHeaderDivider;
- border-right: @basicTableHeaderDivider;
-}
-.ui.structured.celled.table tr th,
-.ui.structured.celled.table tr td {
- border-left: @cellBorder;
- border-right: @cellBorder;
+& when (@variationTableStructured) {
+ .ui.structured.table {
+ border-collapse: collapse;
+ }
+ .ui.structured.table > thead > tr > th {
+ border-left: @headerDivider;
+ border-right: @headerDivider;
+ }
+ & when (@variationTableSortable) {
+ .ui.structured.sortable.table > thead > tr > th {
+ border-left: @sortableBorder;
+ border-right: @sortableBorder;
+ }
+ }
+ & when (@variationTableBasic) {
+ .ui.structured.basic.table > tr > th,
+ .ui.structured.basic.table > thead > tr > th,
+ .ui.structured.basic.table > tbody > tr > th,
+ .ui.structured.basic.table > tfoot > tr > th {
+ border-left: @basicTableHeaderDivider;
+ border-right: @basicTableHeaderDivider;
+ }
+ }
+ & when (@variationTableCelled) {
+ .ui.structured.celled.table > tr > th,
+ .ui.structured.celled.table > thead > tr > th,
+ .ui.structured.celled.table > tbody > tr > th,
+ .ui.structured.celled.table > tfoot > tr > th,
+ .ui.structured.celled.table > tr > td,
+ .ui.structured.celled.table > tbody > tr > td ,
+ .ui.structured.celled.table > tfoot > tr > td { border-left: @cellBorder;
+ border-right: @cellBorder;
+ }
+ }
}
-/*--------------
- Definition
----------------*/
+& when (@variationTableDefinition) {
+ /*--------------
+ Definition
+ ---------------*/
-.ui.definition.table thead:not(.full-width) th:first-child {
- pointer-events: none;
- background: @definitionHeaderBackground;
- font-weight: @definitionHeaderFontWeight;
- color: @definitionHeaderColor;
- box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;
-}
-
-.ui.definition.table tfoot:not(.full-width) th:first-child {
- pointer-events: none;
- background: @definitionFooterBackground;
- font-weight: @definitionFooterColor;
- color: @definitionFooterFontWeight;
- box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;
-}
+ .ui.definition.table > thead:not(.full-width) > tr > th:first-child {
+ pointer-events: none;
+ background: @definitionHeaderBackground;
+ font-weight: @definitionHeaderFontWeight;
+ color: @definitionHeaderColor;
+ box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+ -moz-transform: scale(1);
+ }
-/* Remove Border */
-.ui.celled.definition.table thead:not(.full-width) th:first-child {
- box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;
-}
-.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
- box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;
-}
+ .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child {
+ pointer-events: none;
+ background: @definitionFooterBackground;
+ font-weight: @definitionFooterFontWeight;
+ color: @definitionFooterColor;
+ box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+ -moz-transform: scale(1);
+ }
-/* Highlight Defining Column */
-.ui.definition.table tr td:first-child:not(.ignored),
-.ui.definition.table tr td.definition {
- background: @definitionColumnBackground;
- font-weight: @definitionColumnFontWeight;
- color: @definitionColumnColor;
- text-transform: @definitionColumnTextTransform;
- box-shadow: @definitionColumnBoxShadow;
- text-align: @definitionColumnTextAlign;
- font-size: @definitionColumnFontSize;
- padding-left: @definitionColumnHorizontalPadding;
- padding-right: @definitionColumnHorizontalPadding;
-}
+ /* Highlight Defining Column */
+ .ui.definition.table > tr > td:first-child:not(.ignored),
+ .ui.definition.table > tbody > tr > td:first-child:not(.ignored),
+ .ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
+ .ui.definition.table tr td.definition {
+ background: @definitionColumnBackground;
+ font-weight: @definitionColumnFontWeight;
+ color: @definitionColumnColor;
+ text-transform: @definitionColumnTextTransform;
+ box-shadow: @definitionColumnBoxShadow;
+ text-align: @definitionColumnTextAlign;
+ font-size: @definitionColumnFontSize;
+ padding-left: @definitionColumnHorizontalPadding;
+ padding-right: @definitionColumnHorizontalPadding;
+ }
-/* Fix 2nd Column */
-.ui.definition.table thead:not(.full-width) th:nth-child(2) {
- border-left: @borderWidth solid @borderColor;
-}
-.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
- border-left: @borderWidth solid @borderColor;
-}
-.ui.definition.table td:nth-child(2) {
- border-left: @borderWidth solid @borderColor;
+ /* Fix 2nd Column */
+ .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+ }
+ .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2) ,
+ .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { border-left: @borderWidth solid @borderColor;
+ }
+ .ui.definition.table > tr > td:nth-child(2),
+ .ui.definition.table > tbody > tr > td:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+ }
}
-
/*******************************
States
*******************************/
-/*--------------
- Positive
----------------*/
+& when (@variationTablePositive) {
+ /*--------------
+ Positive
+ ---------------*/
-.ui.table tr.positive,
-.ui.table td.positive {
- box-shadow: @positiveBoxShadow;
-}
-.ui.table tr.positive,
-.ui.table td.positive {
- background: @positiveBackgroundColor !important;
- color: @positiveColor !important;
+ .ui.ui.ui.ui.table tr.positive,
+ .ui.ui.table td.positive {
+ box-shadow: @positiveBoxShadow;
+ background: @positiveBackgroundColor;
+ color: @positiveColor;
+ }
}
-/*--------------
- Negative
----------------*/
+& when (@variationTableNegative) {
+ /*--------------
+ Negative
+ ---------------*/
-.ui.table tr.negative,
-.ui.table td.negative {
- box-shadow: @negativeBoxShadow;
-}
-.ui.table tr.negative,
-.ui.table td.negative {
- background: @negativeBackgroundColor !important;
- color: @negativeColor !important;
+ .ui.ui.ui.ui.table tr.negative,
+ .ui.ui.table td.negative {
+ box-shadow: @negativeBoxShadow;
+ background: @negativeBackgroundColor;
+ color: @negativeColor;
+ }
}
-/*--------------
- Error
----------------*/
+& when (@variationTableError) {
+ /*--------------
+ Error
+ ---------------*/
-.ui.table tr.error,
-.ui.table td.error {
- box-shadow: @errorBoxShadow;
-}
-.ui.table tr.error,
-.ui.table td.error {
- background: @errorBackgroundColor !important;
- color: @errorColor !important;
+ .ui.ui.ui.ui.table tr.error,
+ .ui.ui.table td.error {
+ box-shadow: @errorBoxShadow;
+ background: @errorBackgroundColor;
+ color: @errorColor;
+ }
}
-/*--------------
- Warning
----------------*/
-.ui.table tr.warning,
-.ui.table td.warning {
- box-shadow: @warningBoxShadow;
-}
-.ui.table tr.warning,
-.ui.table td.warning {
- background: @warningBackgroundColor !important;
- color: @warningColor !important;
+& when (@variationTableWarning) {
+ /*--------------
+ Warning
+ ---------------*/
+
+ .ui.ui.ui.ui.table tr.warning,
+ .ui.ui.table td.warning {
+ box-shadow: @warningBoxShadow;
+ background: @warningBackgroundColor;
+ color: @warningColor;
+ }
}
-/*--------------
- Active
----------------*/
+& when (@variationTableActive) {
+ /*--------------
+ Active
+ ---------------*/
-.ui.table tr.active,
-.ui.table td.active {
- box-shadow: @activeBoxShadow;
-}
-.ui.table tr.active,
-.ui.table td.active {
- background: @activeBackgroundColor !important;
- color: @activeColor !important;
+ .ui.ui.ui.ui.table tr.active,
+ .ui.ui.table td.active {
+ box-shadow: @activeBoxShadow;
+ background: @activeBackgroundColor;
+ color: @activeColor;
+ }
}
+& when (@variationTableDisabled) {
+ /*--------------
+ Disabled
+ ---------------*/
-/*--------------
- Disabled
----------------*/
-
-.ui.table tr.disabled td,
-.ui.table tr td.disabled,
-.ui.table tr.disabled:hover,
-.ui.table tr:hover td.disabled {
- pointer-events: none;
- color: @disabledTextColor;
+ .ui.table tr.disabled td,
+ .ui.table tr td.disabled,
+ .ui.table tr.disabled:hover,
+ .ui.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @disabledTextColor;
+ }
}
/*******************************
Variations
*******************************/
-
-/*--------------
- Stackable
----------------*/
-
-@media only screen and (max-width : @largestTabletScreen) {
-
- .ui[class*="tablet stackable"].table,
- .ui[class*="tablet stackable"].table tbody,
- .ui[class*="tablet stackable"].table tr,
- .ui[class*="tablet stackable"].table tr > th,
- .ui[class*="tablet stackable"].table tr > td {
- display: block !important;
- width: 100% !important;
- display: block !important;
+& when (@variationTableStackable) {
+ /*--------------
+ Stackable
+ ---------------*/
+
+ @media only screen and (max-width : @largestTabletScreen) {
+
+ .ui[class*="tablet stackable"].table,
+ .ui[class*="tablet stackable"].table > thead,
+ .ui[class*="tablet stackable"].table > thead > tr,
+ .ui[class*="tablet stackable"].table > tfoot,
+ .ui[class*="tablet stackable"].table > tfoot > tr,
+ .ui[class*="tablet stackable"].table > tbody,
+ .ui[class*="tablet stackable"].table > tbody > tr,
+ .ui[class*="tablet stackable"].table > tr,
+ .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
+ .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
+ display: block !important;
+ width: 100% !important;
+ }
+
+ .ui[class*="tablet stackable"].table {
+ padding: 0;
+ }
+ .ui[class*="tablet stackable"].table > thead {
+ display: @responsiveHeaderDisplay;
+ }
+ .ui[class*="tablet stackable"].table > tfoot {
+ display: @responsiveFooterDisplay;
+ }
+ .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
+ .ui.ui.ui.ui[class*="tablet stackable"].table > tr {
+ padding-top: @responsiveRowVerticalPadding;
+ padding-bottom: @responsiveRowVerticalPadding;
+ box-shadow: @responsiveRowBoxShadow;
+ }
+ .ui[class*="tablet stackable"].table > thead > tr > th,
+ .ui[class*="tablet stackable"].table > tbody > tr > th,
+ .ui[class*="tablet stackable"].table > tfoot > tr > th,
+ .ui[class*="tablet stackable"].table > tr > th,
+ .ui[class*="tablet stackable"].table > tbody > tr > td,
+ .ui[class*="tablet stackable"].table > tfoot > tr > td,
+ .ui[class*="tablet stackable"].table > tr > td {
+ background: none;
+ border: none !important;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
+ box-shadow: @responsiveCellBoxShadow;
+ }
+ & when (@variationTableDefinition) {
+ /* Definition Table */
+ .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
+ box-shadow: none !important;
+ }
+ }
+ }
+ & when (@variationTableMarked) {
+ each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+ .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
+ &.left {
+ box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
+ }
+ &.right {
+ box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
+ }
+ }
+ & when (@variationTableInverted) {
+ .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} {
+ &.left {
+ box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
+ }
+ &.right {
+ box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
+ }
+ }
+ }
+ })
}
+}
- .ui[class*="tablet stackable"].table {
- padding: 0em;
+& when (@variationTableAligned) {
+ /*--------------
+ Text Alignment
+ ---------------*/
+
+ .ui.table[class*="left aligned"],
+ .ui.table [class*="left aligned"] {
+ text-align: left;
}
- .ui[class*="tablet stackable"].table thead {
- display: @responsiveHeaderDisplay;
+ .ui.table[class*="center aligned"],
+ .ui.table [class*="center aligned"] {
+ text-align: center;
}
- .ui[class*="tablet stackable"].table tfoot {
- display: @responsiveFooterDisplay;
+ .ui.table[class*="right aligned"],
+ .ui.table [class*="right aligned"] {
+ text-align: right;
}
- .ui[class*="tablet stackable"].table tr {
- padding-top: @responsiveRowVerticalPadding;
- padding-bottom: @responsiveRowVerticalPadding;
- box-shadow: @responsiveRowBoxShadow;
+
+ /*------------------
+ Vertical Alignment
+ ------------------*/
+
+ .ui.table[class*="top aligned"],
+ .ui.table [class*="top aligned"] {
+ vertical-align: top;
}
- .ui[class*="tablet stackable"].table tr > th,
- .ui[class*="tablet stackable"].table tr > td {
- background: none;
- border: none !important;
- padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
- box-shadow: @responsiveCellBoxShadow;
+ .ui.table[class*="middle aligned"],
+ .ui.table [class*="middle aligned"] {
+ vertical-align: middle;
}
-
- /* Definition Table */
- .ui.definition[class*="tablet stackable"].table thead th:first-child {
- box-shadow: none !important;
+ .ui.table[class*="bottom aligned"],
+ .ui.table [class*="bottom aligned"] {
+ vertical-align: bottom;
}
}
-/*--------------
- Text Alignment
----------------*/
-
-.ui.table[class*="left aligned"],
-.ui.table [class*="left aligned"] {
- text-align: left;
-}
-.ui.table[class*="center aligned"],
-.ui.table [class*="center aligned"] {
- text-align: center;
-}
-.ui.table[class*="right aligned"],
-.ui.table [class*="right aligned"] {
- text-align: right;
-}
-
-/*------------------
- Vertical Alignment
-------------------*/
-
-.ui.table[class*="top aligned"],
-.ui.table [class*="top aligned"] {
- vertical-align: top;
-}
-.ui.table[class*="middle aligned"],
-.ui.table [class*="middle aligned"] {
- vertical-align: middle;
-}
-.ui.table[class*="bottom aligned"],
-.ui.table [class*="bottom aligned"] {
- vertical-align: bottom;
-}
-
-/*--------------
- Collapsing
----------------*/
+& when (@variationTableCollapsing) {
+ /*--------------
+ Collapsing
+ ---------------*/
-.ui.table th.collapsing,
-.ui.table td.collapsing {
- width: 1px;
- white-space: nowrap;
+ .ui.table th.collapsing,
+ .ui.table td.collapsing {
+ width: 1px;
+ white-space: nowrap;
+ }
}
-/*--------------
- Fixed
----------------*/
+& when (@variationTableFixed) {
+ /*--------------
+ Fixed
+ ---------------*/
-.ui.fixed.table {
- table-layout: fixed;
-}
+ .ui.fixed.table {
+ table-layout: fixed;
+ }
-.ui.fixed.table th,
-.ui.fixed.table td {
- overflow: hidden;
- text-overflow: ellipsis;
+ .ui.fixed.table th,
+ .ui.fixed.table td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
-/*--------------
- Selectable
----------------*/
-
-.ui.selectable.table tbody tr:hover,
-.ui.table tbody tr td.selectable:hover {
- background: @selectableBackground !important;
- color: @selectableTextColor !important;
-}
-.ui.selectable.inverted.table tbody tr:hover,
-.ui.inverted.table tbody tr td.selectable:hover {
- background: @selectableInvertedBackground !important;
- color: @selectableInvertedTextColor !important;
-}
-
-/* Selectable Cell Link */
-.ui.table tbody tr td.selectable {
- padding: 0em;
-}
-.ui.table tbody tr td.selectable > a:not(.ui) {
- display: block;
- color: inherit;
- padding: @cellVerticalPadding @cellHorizontalPadding;
-}
+& when (@variationTableSelectable) {
+ /*--------------
+ Selectable
+ ---------------*/
-/* Other States */
-.ui.selectable.table tr.error:hover,
-.ui.table tr td.selectable.error:hover,
-.ui.selectable.table tr:hover td.error {
- background: @errorBackgroundHover !important;
- color: @errorColorHover !important;
-}
-.ui.selectable.table tr.warning:hover,
-.ui.table tr td.selectable.warning:hover,
-.ui.selectable.table tr:hover td.warning {
- background: @warningBackgroundHover !important;
- color: @warningColorHover !important;
-}
-.ui.selectable.table tr.active:hover,
-.ui.table tr td.selectable.active:hover,
-.ui.selectable.table tr:hover td.active {
- background: @activeBackgroundColor !important;
- color: @activeColor !important;
-}
-.ui.selectable.table tr.positive:hover,
-.ui.table tr td.selectable.positive:hover,
-.ui.selectable.table tr:hover td.positive {
- background: @positiveBackgroundHover !important;
- color: @positiveColorHover !important;
-}
-.ui.selectable.table tr.negative:hover,
-.ui.table tr td.selectable.negative:hover,
-.ui.selectable.table tr:hover td.negative {
- background: @negativeBackgroundHover !important;
- color: @negativeColorHover !important;
+ .ui.ui.selectable.table > tbody > tr:hover,
+ .ui.table tbody tr td.selectable:hover {
+ background: @selectableBackground;
+ color: @selectableTextColor;
+ }
+ & when (@variationTableInverted) {
+ .ui.ui.selectable.inverted.table > tbody > tr:hover,
+ .ui.inverted.table tbody tr td.selectable:hover {
+ background: @selectableInvertedBackground;
+ color: @selectableInvertedTextColor;
+ }
+ }
+ /* Selectable Cell Link */
+ .ui.table tbody tr td.selectable {
+ padding: 0;
+ }
+ .ui.table tbody tr td.selectable > a:not(.ui) {
+ display: block;
+ color: inherit;
+ padding: @cellVerticalPadding @cellHorizontalPadding;
+ }
+ .ui.table > tr > td.selectable,
+ .ui.table > tbody > tr > td.selectable,
+ .ui.selectable.table > tbody > tr,
+ .ui.selectable.table > tr {
+ cursor:pointer;
+ }
+ & when (@variationTableError) {
+ /* Other States */
+ .ui.ui.selectable.table tr.error:hover,
+ .ui.table tr td.selectable.error:hover,
+ .ui.selectable.table tr:hover td.error {
+ background: @errorBackgroundHover;
+ color: @errorColorHover;
+ }
+ }
+ & when (@variationTableWarning) {
+ .ui.ui.selectable.table tr.warning:hover,
+ .ui.table tr td.selectable.warning:hover,
+ .ui.selectable.table tr:hover td.warning {
+ background: @warningBackgroundHover;
+ color: @warningColorHover;
+ }
+ }
+ & when (@variationTableActive) {
+ .ui.ui.selectable.table tr.active:hover,
+ .ui.table tr td.selectable.active:hover,
+ .ui.selectable.table tr:hover td.active {
+ background: @activeBackgroundColor;
+ color: @activeColor;
+ }
+ }
+ & when (@variationTablePositive) {
+ .ui.ui.selectable.table tr.positive:hover,
+ .ui.table tr td.selectable.positive:hover,
+ .ui.selectable.table tr:hover td.positive {
+ background: @positiveBackgroundHover;
+ color: @positiveColorHover;
+ }
+ }
+ & when (@variationTableNegative) {
+ .ui.ui.selectable.table tr.negative:hover,
+ .ui.table tr td.selectable.negative:hover,
+ .ui.selectable.table tr:hover td.negative {
+ background: @negativeBackgroundHover;
+ color: @negativeColorHover;
+ }
+ }
}
+& when (@variationTableAttached) {
+ /*-------------------
+ Attached
+ --------------------*/
-/*-------------------
- Attached
---------------------*/
-
-/* Middle */
-.ui.attached.table {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
-}
-.ui.attached + .ui.attached.table:not(.top) {
- border-top: none;
-}
-
-/* Top */
-.ui[class*="top attached"].table {
- bottom: 0px;
- margin-bottom: 0em;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui.table[class*="top attached"]:first-child {
- margin-top: 0em;
-}
-
-/* Bottom */
-.ui[class*="bottom attached"].table {
- bottom: 0px;
- margin-top: 0em;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-.ui[class*="bottom attached"].table:last-child {
- margin-bottom: 0em;
-}
+ /* Middle */
+ .ui.attached.table {
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+ border: @attachedBorder;
+ }
+ .ui.attached + .ui.attached.table:not(.top) {
+ border-top: none;
+ }
-/*--------------
- Striped
----------------*/
+ /* Top */
+ .ui[class*="top attached"].table {
+ bottom: 0;
+ margin-bottom: 0;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui.table[class*="top attached"]:first-child {
+ margin-top: 0;
+ }
-/* Table Striping */
-.ui.striped.table > tr:nth-child(2n),
-.ui.striped.table tbody tr:nth-child(2n) {
- background-color: @stripedBackground;
+ /* Bottom */
+ .ui[class*="bottom attached"].table {
+ bottom: 0;
+ margin-top: 0;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
+ .ui[class*="bottom attached"].table:last-child {
+ margin-bottom: 0;
+ }
}
-/* Stripes */
-.ui.inverted.striped.table > tr:nth-child(2n),
-.ui.inverted.striped.table tbody tr:nth-child(2n) {
- background-color: @invertedStripedBackground;
-}
+& when (@variationTableStriped) {
+ /*--------------
+ Striped
+ ---------------*/
-/* Allow striped active hover */
-.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
- background: @activeBackgroundHover !important;
- color: @activeColorHover !important;
+ /* Table Striping */
+ .ui.striped.table > tr:nth-child(2n),
+ .ui.striped.table > tbody > tr:nth-child(2n) {
+ background-color: @stripedBackground;
+ }
+ & when (@variationTableInverted) {
+ /* Stripes */
+ .ui.inverted.striped.table > tr:nth-child(2n),
+ .ui.inverted.striped.table > tbody > tr:nth-child(2n) {
+ background-color: @invertedStripedBackground;
+ }
+ }
+ & when (@variationTableSelectable) {
+ /* Allow striped active hover */
+ .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
+ background: @activeBackgroundHover;
+ color: @activeColorHover;
+ }
+ }
}
/*--------------
Single Line
---------------*/
-.ui.table[class*="single line"],
-.ui.table [class*="single line"] {
- white-space: nowrap;
-}
.ui.table[class*="single line"],
.ui.table [class*="single line"] {
white-space: nowrap;
@@ -634,123 +775,88 @@
Colors
--------------------*/
-/* Red */
-.ui.red.table {
- border-top: @coloredBorderSize solid @red;
-}
-.ui.inverted.red.table {
- background-color: @red !important;
- color: @white !important;
-}
-
-/* Orange */
-.ui.orange.table {
- border-top: @coloredBorderSize solid @orange;
-}
-.ui.inverted.orange.table {
- background-color: @orange !important;
- color: @white !important;
-}
-
-/* Yellow */
-.ui.yellow.table {
- border-top: @coloredBorderSize solid @yellow;
-}
-.ui.inverted.yellow.table {
- background-color: @yellow !important;
- color: @white !important;
-}
-
-/* Olive */
-.ui.olive.table {
- border-top: @coloredBorderSize solid @olive;
-}
-.ui.inverted.olive.table {
- background-color: @olive !important;
- color: @white !important;
-}
-
-/* Green */
-.ui.green.table {
- border-top: @coloredBorderSize solid @green;
-}
-.ui.inverted.green.table {
- background-color: @green !important;
- color: @white !important;
-}
-
-/* Teal */
-.ui.teal.table {
- border-top: @coloredBorderSize solid @teal;
-}
-.ui.inverted.teal.table {
- background-color: @teal !important;
- color: @white !important;
-}
-
-/* Blue */
-.ui.blue.table {
- border-top: @coloredBorderSize solid @blue;
-}
-.ui.inverted.blue.table {
- background-color: @blue !important;
- color: @white !important;
-}
-
-/* Violet */
-.ui.violet.table {
- border-top: @coloredBorderSize solid @violet;
-}
-.ui.inverted.violet.table {
- background-color: @violet !important;
- color: @white !important;
-}
-
-/* Purple */
-.ui.purple.table {
- border-top: @coloredBorderSize solid @purple;
-}
-.ui.inverted.purple.table {
- background-color: @purple !important;
- color: @white !important;
-}
-
-/* Pink */
-.ui.pink.table {
- border-top: @coloredBorderSize solid @pink;
-}
-.ui.inverted.pink.table {
- background-color: @pink !important;
- color: @white !important;
-}
-
-/* Brown */
-.ui.brown.table {
- border-top: @coloredBorderSize solid @brown;
-}
-.ui.inverted.brown.table {
- background-color: @brown !important;
- color: @white !important;
-}
-
-/* Grey */
-.ui.grey.table {
- border-top: @coloredBorderSize solid @grey;
-}
-.ui.inverted.grey.table {
- background-color: @grey !important;
- color: @white !important;
-}
-
-/* Black */
-.ui.black.table {
- border-top: @coloredBorderSize solid @black;
-}
-.ui.inverted.black.table {
- background-color: @black !important;
- color: @white !important;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @t: @colors[@@color][text];
+ @ht: @colors[@@color][hoverText];
+ @l: @colors[@@color][light];
+ @lh: @colors[@@color][lightHover];
+ @r: @colors[@@color][ribbon];
+ @b: @colors[@@color][bright];
+ @bh: @colors[@@color][brightHover];
+ @isDark: @colors[@@color][isDark];
+ @isVeryDark: @colors[@@color][isVeryDark];
+
+ .ui.@{color}.table {
+ border-top: @coloredBorderSize solid @c;
+ }
+ & when (@variationTableInverted) {
+ .ui.inverted.@{color}.table {
+ background-color: @c;
+ color: @white;
+ }
+ }
+ .ui.ui.ui.ui.table tr.@{color}:not(.marked),
+ .ui.ui.table td.@{color}:not(.marked) {
+ & when (@stateMarkerWidth > 0) {
+ box-shadow: @stateMarkerWidth 0 0 @r inset;
+ }
+ & when (@isDark) {
+ background: @l;
+ }
+ & when not (@isDark) {
+ background: @b;
+ }
+ & when (@isVeryDark) {
+ color: @white;
+ }
+ & when not (@isVeryDark) {
+ color: @t;
+ }
+ }
+ & when (@variationTableSelectable) {
+ .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
+ .ui.table tr td.selectable.@{color}:not(.marked):hover,
+ .ui.selectable.table tr:hover td.@{color}:not(.marked) {
+ & when (@isDark) {
+ background: @lh;
+ }
+ & when not (@isDark) {
+ background: @bh;
+ }
+ & when (@isVeryDark) {
+ color: @white;
+ }
+ & when not (@isVeryDark) {
+ color: @ht;
+ }
+ }
+ }
+ & when (@variationTableMarked) {
+ .ui.table td.marked.@{color},
+ .ui.table tr.marked.@{color} {
+ &.left {
+ box-shadow: @coloredBorderSize 0 0 0 @c inset;
+ }
+ &.right {
+ box-shadow: -@coloredBorderSize 0 0 0 @c inset;
+ }
+ }
+ & when (@variationTableInverted) {
+ .ui.inverted.table td.marked.@{color},
+ .ui.inverted.table tr.marked.@{color} {
+ &.left {
+ box-shadow: @coloredBorderSize 0 0 0 @l inset;
+ }
+ &.right {
+ box-shadow: -@coloredBorderSize 0 0 0 @l inset;
+ }
+ }
+ }
+ }
+})
/*--------------
Column Count
@@ -872,248 +978,345 @@
width: @sixteenWide;
}
-/*--------------
- Sortable
----------------*/
+& when (@variationTableSortable) {
+ /*--------------
+ Sortable
+ ---------------*/
-.ui.sortable.table thead th {
- cursor: pointer;
- white-space: nowrap;
- border-left: @sortableBorder;
- color: @sortableColor;
-}
-.ui.sortable.table thead th:first-child {
- border-left: none;
-}
-.ui.sortable.table thead th.sorted,
-.ui.sortable.table thead th.sorted:hover {
- user-select: none;
-}
-
-.ui.sortable.table thead th:after {
- display: none;
- font-style: normal;
- font-weight: @normal;
- text-decoration: inherit;
- content: '';
- height: 1em;
- width: @sortableIconWidth;
- opacity: @sortableIconOpacity;
- margin: 0em 0em 0em @sortableIconDistance;
- font-family: @sortableIconFont;
-}
-.ui.sortable.table thead th.ascending:after {
- content: @sortableIconAscending;
-}
-.ui.sortable.table thead th.descending:after {
- content: @sortableIconDescending;
-}
+ .ui.sortable.table > thead > tr > th {
+ cursor: pointer;
+ white-space: nowrap;
+ border-left: @sortableBorder;
+ color: @sortableColor;
+ }
+ .ui.sortable.table > thead > tr > th:first-child {
+ border-left: none;
+ }
+ .ui.sortable.table thead th.sorted,
+ .ui.sortable.table thead th.sorted:hover {
+ user-select: none;
+ }
-/* Hover */
-.ui.sortable.table th.disabled:hover {
- cursor: auto;
- color: @sortableDisabledColor;
-}
-.ui.sortable.table thead th:hover {
- background: @sortableHoverBackground;
- color: @sortableHoverColor;
-}
+ .ui.sortable.table > thead > tr > th:after {
+ display: none;
+ font-style: normal;
+ font-weight: @normal;
+ text-decoration: inherit;
+ content: '';
+ height: 1em;
+ width: @sortableIconWidth;
+ opacity: @sortableIconOpacity;
+ margin: 0 0 0 @sortableIconDistance;
+ font-family: @sortableIconFont;
+ }
+ .ui.sortable.table thead th.ascending:after {
+ content: @sortableIconAscending;
+ }
+ .ui.sortable.table thead th.descending:after {
+ content: @sortableIconDescending;
+ }
-/* Sorted */
-.ui.sortable.table thead th.sorted {
- background: @sortableActiveBackground;
- color: @sortableActiveColor;
-}
-.ui.sortable.table thead th.sorted:after {
- display: inline-block;
-}
+ /* Hover */
+ .ui.sortable.table th.disabled:hover {
+ cursor: auto;
+ color: @sortableDisabledColor;
+ }
+ .ui.sortable.table > thead > tr > th:hover {
+ color: @sortableHoverColor;
+ }
+ .ui.sortable.table:not(.basic) > thead > tr > th:hover {
+ background: @sortableHoverBackground;
+ }
-/* Sorted Hover */
-.ui.sortable.table thead th.sorted:hover {
- background: @sortableActiveHoverBackground;
- color: @sortableActiveHoverColor;
-}
+ /* Sorted */
+ .ui.sortable.table thead th.sorted {
+ color: @sortableActiveColor;
+ }
+ .ui.sortable.table:not(.basic) thead th.sorted {
+ background: @sortableActiveBackground;
+ }
+ .ui.sortable.table thead th.sorted:after {
+ display: inline-block;
+ }
-/* Inverted */
-.ui.inverted.sortable.table thead th.sorted {
- background: @sortableInvertedActiveBackground;
- color: @sortableInvertedActiveColor;
-}
-.ui.inverted.sortable.table thead th:hover {
- background: @sortableInvertedHoverBackground;
- color: @sortableInvertedHoverColor;
-}
-.ui.inverted.sortable.table thead th {
- border-left-color: @sortableInvertedBorderColor;
- border-right-color: @sortableInvertedBorderColor;
+ /* Sorted Hover */
+ .ui.sortable.table thead th.sorted:hover {
+ color: @sortableActiveHoverColor;
+ }
+ .ui.sortable.table:not(.basic) thead th.sorted:hover {
+ background: @sortableActiveHoverBackground;
+ }
+ & when (@variationTableInverted) {
+ /* Inverted */
+ .ui.inverted.sortable.table thead th.sorted {
+ color: @sortableInvertedActiveColor;
+ }
+ .ui.inverted.sortable.table:not(.basic) thead th.sorted {
+ background: @sortableInvertedActiveBackground;
+ }
+ .ui.inverted.sortable.table > thead > tr > th:hover {
+ color: @sortableInvertedHoverColor;
+ }
+ .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover {
+ background: @sortableInvertedHoverBackground;
+ }
+ .ui.inverted.sortable.table:not(.basic) > thead > tr > th {
+ border-left-color: @sortableInvertedBorderColor;
+ border-right-color: @sortableInvertedBorderColor;
+ }
+ }
}
+& when (@variationTableInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
-/*--------------
- Inverted
----------------*/
-
-/* Text Color */
-.ui.inverted.table {
- background: @invertedBackground;
- color: @invertedCellColor;
- border: @invertedBorder;
-}
-.ui.inverted.table th {
- background-color: @invertedHeaderBackground;
- border-color: @invertedHeaderBorderColor !important;
- color: @invertedHeaderColor !important;
-}
-.ui.inverted.table tr td {
- border-color: @invertedCellBorderColor !important;
-}
-
-.ui.inverted.table tr.disabled td,
-.ui.inverted.table tr td.disabled,
-.ui.inverted.table tr.disabled:hover td,
-.ui.inverted.table tr:hover td.disabled {
- pointer-events: none;
- color: @invertedDisabledTextColor;
-}
+ /* Text Color */
+ .ui.inverted.table {
+ background: @invertedBackground;
+ color: @invertedCellColor;
+ border: @invertedBorder;
+ }
+ .ui.ui.inverted.table > thead > tr > th,
+ .ui.ui.inverted.table > tbody > tr > th,
+ .ui.ui.inverted.table > tfoot > tr > th,
+ .ui.ui.inverted.table > tfoot > tr > td,
+ .ui.ui.inverted.table > tr > th {
+ background-color: @invertedHeaderBackground;
+ border-color: @invertedHeaderBorderColor;
+ color: @invertedHeaderColor;
+ }
+ .ui.inverted.table > tbody > tr > td,
+ .ui.inverted.table > tfoot > tr > td,
+ .ui.inverted.table > tr > td {
+ border-color: @invertedCellBorderColor;
+ }
-/* Definition */
-.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
-.ui.inverted.definition.table thead:not(.full-width) th:first-child {
- background: @definitionPageBackground;
-}
-.ui.inverted.definition.table tr td:first-child {
- background: @invertedDefinitionColumnBackground;
- color: @invertedDefinitionColumnColor;
+ .ui.inverted.table tr.disabled td,
+ .ui.inverted.table tr td.disabled,
+ .ui.inverted.table tr.disabled:hover td,
+ .ui.inverted.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @invertedDisabledTextColor;
+ }
+ .ui.inverted.table tr td.disabled:not([class="disabled"]),
+ .ui.inverted.table tr.disabled:not([class="disabled"]) td,
+ .ui.inverted.table tr.disabled td[class]:not(.disabled),
+ .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) {
+ color: @disabledTextColor;
+ }
+ & when (@variationTableDefinition) {
+ /* Definition */
+ .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child,
+ .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child {
+ background: @definitionPageBackground;
+ }
+ .ui.inverted.definition.table > tbody > tr > td:first-child
+ .ui.inverted.definition.table > tfoot > tr > td:first-child,
+ .ui.inverted.definition.table > tr > td:first-child {
+ background: @invertedDefinitionColumnBackground;
+ color: @invertedDefinitionColumnColor;
+ }
+ }
}
-/*--------------
- Collapsing
----------------*/
+& when (@variationTableCollapsing) {
+ /*--------------
+ Collapsing
+ ---------------*/
-.ui.collapsing.table {
- width: auto;
+ .ui.collapsing.table {
+ width: auto;
+ }
}
-/*--------------
- Basic
----------------*/
+& when (@variationTableBasic) {
+ /*--------------
+ Basic
+ ---------------*/
-.ui.basic.table {
- background: @basicTableBackground;
- border: @basicTableBorder;
- box-shadow: @basicBoxShadow;
-}
-.ui.basic.table thead,
-.ui.basic.table tfoot {
- box-shadow: none;
-}
-.ui.basic.table th {
- background: @basicTableHeaderBackground;
- border-left: @basicTableHeaderDivider;
-}
-.ui.basic.table tbody tr {
- border-bottom: @basicTableCellBorder;
-}
-.ui.basic.table td {
- background: @basicTableCellBackground;
-}
-.ui.basic.striped.table tbody tr:nth-child(2n) {
- background-color: @basicTableStripedBackground !important;
-}
-
-/* Very Basic */
-.ui[class*="very basic"].table {
- border: none;
-}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
- padding: @basicTableCellPadding;
-}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
- padding-left: 0em;
-}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
-.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
- padding-right: 0em;
-}
-.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
- padding-top: 0em;
+ .ui.basic.table {
+ background: @basicTableBackground;
+ border: @basicTableBorder;
+ box-shadow: @basicBoxShadow;
+ }
+ .ui.basic.table > thead,
+ .ui.basic.table > tfoot {
+ box-shadow: none;
+ }
+ .ui.basic.table > thead > tr > th,
+ .ui.basic.table > tbody > tr > th,
+ .ui.basic.table > tfoot > tr > th,
+ .ui.basic.table > tr > th {
+ background: @basicTableHeaderBackground;
+ border-left: @basicTableHeaderDivider;
+ }
+ .ui.basic.table > tbody > tr {
+ border-bottom: @basicTableCellBorder;
+ }
+ .ui.basic.table > tbody > tr > td,
+ .ui.basic.table > tfoot > tr > td,
+ .ui.basic.table >tr > td {
+ background: @basicTableCellBackground;
+ }
+ & when (@variationTableStriped) {
+ .ui.basic.striped.table > tbody > tr:nth-child(2n) {
+ background-color: @basicTableStripedBackground;
+ }
+ }
+ /* Very Basic */
+ .ui[class*="very basic"].table {
+ border: none;
+ }
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
+ padding: @basicTableCellPadding;
+ }
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child ,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
+ padding-left: 0;
+ }
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot >tr > td:last-child {
+ padding-right: 0;
+ }
+ .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
+ padding-top: 0;
+ }
}
-/*--------------
- Celled
----------------*/
+& when (@variationTableCelled) {
+ /*--------------
+ Celled
+ ---------------*/
-.ui.celled.table tr th,
-.ui.celled.table tr td {
- border-left: @cellBorder;
-}
-.ui.celled.table tr th:first-child,
-.ui.celled.table tr td:first-child {
- border-left: none;
+ .ui.celled.table > tr > th,
+ .ui.celled.table > thead > tr > th,
+ .ui.celled.table > tbody > tr > th,
+ .ui.celled.table > tfoot > tr > th,
+ .ui.celled.table > tr > td,
+ .ui.celled.table > tbody > tr > td ,
+ .ui.celled.table > tfoot > tr > td {
+ border-left: @cellBorder;
+ }
+ & when (@variationTableInverted) {
+ .ui.inverted.celled.table > tbody > tr > td,
+ .ui.inverted.celled.table > tr > td {
+ border-left: @invertedCellBorder;
+ }
+ }
+ .ui.celled.table > tr > th:first-child,
+ .ui.celled.table > thead > tr > th:first-child,
+ .ui.celled.table > tbody > tr > th:first-child,
+ .ui.celled.table > tfoot > tr > th:first-child,
+ .ui.celled.table > tr > td:first-child,
+ .ui.celled.table > tbody > tr > td:first-child,
+ .ui.celled.table > tfoot >tr > td:first-child {
+ border-left: none;
+ }
}
-/*--------------
- Padded
----------------*/
+& when (@variationTablePadded) {
+ /*--------------
+ Padded
+ ---------------*/
-.ui.padded.table th {
- padding-left: @paddedHorizontalPadding;
- padding-right: @paddedHorizontalPadding;
-}
-.ui.padded.table th,
-.ui.padded.table td {
- padding: @paddedVerticalPadding @paddedHorizontalPadding;
-}
+ .ui.padded.table > tr > th,
+ .ui.padded.table > thead > tr > th,
+ .ui.padded.table > tbody > tr > th,
+ .ui.padded.table > tfoot > tr > th {
+ padding-left: @paddedHorizontalPadding;
+ padding-right: @paddedHorizontalPadding;
+ }
+ .ui.padded.table > tr > th,
+ .ui.padded.table > thead > tr > th,
+ .ui.padded.table > tbody > tr > th,
+ .ui.padded.table > tfoot > tr > th,
+ .ui.padded.table > tr > td,
+ .ui.padded.table > tbody > tr > td ,
+ .ui.padded.table > tfoot > tr > td {
+ padding: @paddedVerticalPadding @paddedHorizontalPadding;
+ }
-/* Very */
-.ui[class*="very padded"].table th {
- padding-left: @veryPaddedHorizontalPadding;
- padding-right: @veryPaddedHorizontalPadding;
-}
-.ui[class*="very padded"].table td {
- padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+ /* Very */
+ .ui[class*="very padded"].table > tr > th,
+ .ui[class*="very padded"].table > thead > tr > th,
+ .ui[class*="very padded"].table > tbody > tr > th,
+ .ui[class*="very padded"].table > tfoot > tr > th {
+ padding-left: @veryPaddedHorizontalPadding;
+ padding-right: @veryPaddedHorizontalPadding;
+ }
+ .ui[class*="very padded"].table > tr > td,
+ .ui[class*="very padded"].table > tbody > tr > td ,
+ .ui[class*="very padded"].table > tfoot > tr > td {
+ padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+ }
}
-/*--------------
- Compact
----------------*/
+& when (@variationTableCompact) {
+ /*--------------
+ Compact
+ ---------------*/
-.ui.compact.table th {
- padding-left: @compactHorizontalPadding;
- padding-right: @compactHorizontalPadding;
-}
-.ui.compact.table td {
- padding: @compactVerticalPadding @compactHorizontalPadding;
-}
+ .ui.compact.table > tr > th,
+ .ui.compact.table > thead > tr > th,
+ .ui.compact.table > tbody > tr > th,
+ .ui.compact.table > tfoot > tr > th {
+ padding-left: @compactHorizontalPadding;
+ padding-right: @compactHorizontalPadding;
+ }
+ .ui.compact.table > tr > td,
+ .ui.compact.table > tbody > tr > td ,
+ .ui.compact.table > tfoot > tr > td {
+ padding: @compactVerticalPadding @compactHorizontalPadding;
+ }
-/* Very */
-.ui[class*="very compact"].table th {
- padding-left: @veryCompactHorizontalPadding;
- padding-right: @veryCompactHorizontalPadding;
-}
-.ui[class*="very compact"].table td {
- padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+ /* Very */
+ .ui[class*="very compact"].table > tr > th,
+ .ui[class*="very compact"].table > thead > tr > th,
+ .ui[class*="very compact"].table > tbody > tr > th,
+ .ui[class*="very compact"].table > tfoot > tr > th {
+ padding-left: @veryCompactHorizontalPadding;
+ padding-right: @veryCompactHorizontalPadding;
+ }
+ .ui[class*="very compact"].table > tr > td,
+ .ui[class*="very compact"].table > tbody > tr > td ,
+ .ui[class*="very compact"].table > tfoot > tr > td {
+ padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+ }
}
/*--------------
Sizes
---------------*/
-/* Small */
-.ui.small.table {
- font-size: @small;
-}
-
/* Standard */
.ui.table {
font-size: @medium;
}
-
-/* Large */
-.ui.large.table {
- font-size: @large;
+& when not (@variationTableSizes = false) {
+ each(@variationTableSizes, {
+ @s: @@value;
+ .ui.@{value}.table {
+ font-size: @s;
+ }
+ })
}
+
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/button.less b/ui/src/definitions/elements/button.less
index ebe3d7d29b9..ab280074c55 100644
--- a/ui/src/definitions/elements/button.less
+++ b/ui/src/definitions/elements/button.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Button
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Button
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -35,7 +35,7 @@
font-family: @fontFamily;
- margin: 0em @horizontalMargin @verticalMargin 0em;
+ margin: 0 @horizontalMargin @verticalMargin 0;
padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
text-transform: @textTransform;
@@ -83,8 +83,8 @@
.ui.button:focus {
background-color: @focusBackgroundColor;
color: @focusColor;
- background-image: @focusBackgroundImage !important;
- box-shadow: @focusBoxShadow !important;
+ background-image: @focusBackgroundImage;
+ box-shadow: @focusBoxShadow;
}
.ui.button:focus .icon {
@@ -133,7 +133,7 @@
position: relative;
cursor: default;
text-shadow: none !important;
- color: transparent !important;
+ color: transparent;
opacity: @loadingOpacity;
pointer-events: @loadingPointerEvents;
transition: @loadingTransition;
@@ -161,421 +161,451 @@
width: @loaderSize;
height: @loaderSize;
- animation: button-spin @loaderSpeed linear;
- animation-iteration-count: infinite;
-
border-radius: @circularRadius;
- border-color: @invertedLoaderLineColor transparent transparent;
- border-style: solid;
- border-width: @loaderLineWidth;
+ animation: loader @loaderSpeed infinite linear;
+ border: @loaderLineWidth solid currentColor;
+ color: @invertedLoaderLineColor;
- box-shadow: 0px 0px 0px 1px transparent;
+ box-shadow: 0 0 0 1px transparent;
}
-.ui.labeled.icon.loading.button .icon {
- background-color: transparent;
- box-shadow: none;
+& when (@variationButtonLabeledIcon){
+ .ui.labeled.icon.loading.button .icon {
+ background-color: transparent;
+ box-shadow: none;
+ }
}
-
-@keyframes button-spin {
- from {
- transform: rotate(0deg);
+& when (@variationButtonBasic){
+ .ui.basic.loading.button:not(.inverted):before {
+ border-color: @loaderFillColor;
}
- to {
- transform: rotate(360deg);
+ .ui.basic.loading.button:not(.inverted):after {
+ border-color: @loaderLineColor;
}
}
-
-.ui.basic.loading.button:not(.inverted):before {
- border-color: @loaderFillColor;
-}
-.ui.basic.loading.button:not(.inverted):after {
- border-top-color: @loaderLineColor;
-}
-
-/*-------------------
- Disabled
---------------------*/
-
-.ui.buttons .disabled.button,
-.ui.disabled.button,
-.ui.button:disabled,
-.ui.disabled.button:hover,
-.ui.disabled.active.button {
- cursor: default;
- opacity: @disabledOpacity !important;
- background-image: none !important;
- box-shadow: none !important;
- pointer-events: none !important;
-}
-
-/* Basic Group With Disabled */
-.ui.basic.buttons .ui.disabled.button {
- border-color: @disabledBorderColor;
+& when (@variationButtonDisabled){
+ /*-------------------
+ Disabled
+ --------------------*/
+
+ .ui.buttons .disabled.button:not(.basic),
+ .ui.disabled.button,
+ .ui.button:disabled,
+ .ui.disabled.button:hover,
+ .ui.disabled.active.button {
+ cursor: default;
+ opacity: @disabledOpacity !important;
+ background-image: none;
+ box-shadow: none;
+ pointer-events: none !important;
+ }
+ & when (@variationButtonBasic){
+ /* Basic Group With Disabled */
+ .ui.basic.buttons .ui.disabled.button {
+ border-color: @disabledBorderColor;
+ }
+ }
}
/*******************************
Types
*******************************/
+& when (@variationButtonAnimated){
+ /*-------------------
+ Animated
+ --------------------*/
+
+ .ui.animated.button {
+ position: relative;
+ overflow: hidden;
+ padding-right: 0 !important;
+ vertical-align: @animatedVerticalAlign;
+ z-index: @animatedZIndex;
+ }
-/*-------------------
- Animated
---------------------*/
-
-.ui.animated.button {
- position: relative;
- overflow: hidden;
- padding-right: 0em !important;
- vertical-align: @animatedVerticalAlign;
- z-index: @animatedZIndex;
-}
+ .ui.animated.button .content {
+ will-change: transform, opacity;
+ }
+ .ui.animated.button .visible.content {
+ position: relative;
+ margin-right: @horizontalPadding;
+ }
+ .ui.animated.button .hidden.content {
+ position: absolute;
+ width: 100%;
+ }
-.ui.animated.button .content {
- will-change: transform, opacity;
-}
-.ui.animated.button .visible.content {
- position: relative;
- margin-right: @horizontalPadding;
-}
-.ui.animated.button .hidden.content {
- position: absolute;
- width: 100%;
-}
+ /* Horizontal */
+ .ui.animated.button .visible.content,
+ .ui.animated.button .hidden.content {
+ transition: right @animationDuration @animationEasing 0s;
+ }
+ .ui.animated.button .visible.content {
+ left: auto;
+ right: 0;
+ }
+ .ui.animated.button .hidden.content {
+ top: 50%;
+ left: auto;
+ right: -100%;
+ margin-top: -(@lineHeight / 2);
+ }
+ .ui.animated.button:focus .visible.content,
+ .ui.animated.button:hover .visible.content {
+ left: auto;
+ right: 200%;
+ }
+ .ui.animated.button:focus .hidden.content,
+ .ui.animated.button:hover .hidden.content {
+ left: auto;
+ right: 0;
+ }
-/* Horizontal */
-.ui.animated.button .visible.content,
-.ui.animated.button .hidden.content {
- transition: right @animationDuration @animationEasing 0s;
-}
-.ui.animated.button .visible.content {
- left: auto;
- right: 0%;
-}
-.ui.animated.button .hidden.content {
- top: 50%;
- left: auto;
- right: -100%;
- margin-top: -(@lineHeight / 2);
-}
-.ui.animated.button:focus .visible.content,
-.ui.animated.button:hover .visible.content {
- left: auto;
- right: 200%;
-}
-.ui.animated.button:focus .hidden.content,
-.ui.animated.button:hover .hidden.content {
- left: auto;
- right: 0%;
-}
+ /* Vertical */
+ .ui.vertical.animated.button .visible.content,
+ .ui.vertical.animated.button .hidden.content {
+ transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+ }
+ .ui.vertical.animated.button .visible.content {
+ transform: translateY(0%);
+ right: auto;
+ }
+ .ui.vertical.animated.button .hidden.content {
+ top: -50%;
+ left: 0;
+ right: auto;
+ }
+ .ui.vertical.animated.button:focus .visible.content,
+ .ui.vertical.animated.button:hover .visible.content {
+ transform: translateY(200%);
+ right: auto;
+ }
+ .ui.vertical.animated.button:focus .hidden.content,
+ .ui.vertical.animated.button:hover .hidden.content {
+ top: 50%;
+ right: auto;
+ }
-/* Vertical */
-.ui.vertical.animated.button .visible.content,
-.ui.vertical.animated.button .hidden.content {
- transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-}
-.ui.vertical.animated.button .visible.content {
- transform: translateY(0%);
- right: auto;
-}
-.ui.vertical.animated.button .hidden.content {
- top: -50%;
- left: 0%;
- right: auto;
-}
-.ui.vertical.animated.button:focus .visible.content,
-.ui.vertical.animated.button:hover .visible.content {
- transform: translateY(200%);
- right: auto;
-}
-.ui.vertical.animated.button:focus .hidden.content,
-.ui.vertical.animated.button:hover .hidden.content {
- top: 50%;
- right: auto;
+ /* Fade */
+ .ui.fade.animated.button .visible.content,
+ .ui.fade.animated.button .hidden.content {
+ transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+ }
+ .ui.fade.animated.button .visible.content {
+ left: auto;
+ right: auto;
+ opacity: 1;
+ transform: scale(1);
+ }
+ .ui.fade.animated.button .hidden.content {
+ opacity: 0;
+ left: 0;
+ right: auto;
+ transform: scale(@fadeScaleHigh);
+ }
+ .ui.fade.animated.button:focus .visible.content,
+ .ui.fade.animated.button:hover .visible.content {
+ left: auto;
+ right: auto;
+ opacity: 0;
+ transform: scale(@fadeScaleLow);
+ }
+ .ui.fade.animated.button:focus .hidden.content,
+ .ui.fade.animated.button:hover .hidden.content {
+ left: 0;
+ right: auto;
+ opacity: 1;
+ transform: scale(1);
+ }
}
-/* Fade */
-.ui.fade.animated.button .visible.content,
-.ui.fade.animated.button .hidden.content {
- transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-}
-.ui.fade.animated.button .visible.content {
- left: auto;
- right: auto;
- opacity: 1;
- transform: scale(1);
-}
-.ui.fade.animated.button .hidden.content {
- opacity: 0;
- left: 0%;
- right: auto;
- transform: scale(@fadeScaleHigh);
-}
-.ui.fade.animated.button:focus .visible.content,
-.ui.fade.animated.button:hover .visible.content {
- left: auto;
- right: auto;
- opacity: 0;
- transform: scale(@fadeScaleLow);
-}
-.ui.fade.animated.button:focus .hidden.content,
-.ui.fade.animated.button:hover .hidden.content {
- left: 0%;
- right: auto;
- opacity: 1;
- transform: scale(1);
-}
+& when (@variationButtonInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
-/*-------------------
- Inverted
---------------------*/
+ .ui.inverted.button {
+ box-shadow: 0 0 0 @invertedBorderSize @white inset;
+ background: transparent none;
+ color: @white;
+ text-shadow: none !important;
+ }
-.ui.inverted.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
- background: transparent none;
- color: @white;
- text-shadow: none !important;
-}
+ /* Group */
+ .ui.inverted.buttons .button {
+ margin: @invertedGroupButtonOffset;
+ }
+ .ui.inverted.buttons .button:first-child {
+ margin-left: 0;
+ }
+ .ui.inverted.vertical.buttons .button {
+ margin: @invertedVerticalGroupButtonOffset;
+ }
+ .ui.inverted.vertical.buttons .button:first-child {
+ margin-top: 0;
+ }
-/* Group */
-.ui.inverted.buttons .button {
- margin: @invertedGroupButtonOffset;
-}
-.ui.inverted.buttons .button:first-child {
- margin-left: 0em;
-}
-.ui.inverted.vertical.buttons .button {
- margin: @invertedVerticalGroupButtonOffset;
-}
-.ui.inverted.vertical.buttons .button:first-child {
- margin-top: 0em;
-}
+ /* States */
-/* States */
+ /* Hover */
+ .ui.inverted.button:hover {
+ background: @white;
+ box-shadow: 0 0 0 @invertedBorderSize @white inset;
+ color: @hoverColor;
+ }
-/* Hover */
-.ui.inverted.button:hover {
- background: @white;
- box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
- color: @hoverColor;
-}
+ /* Active / Focus */
+ .ui.inverted.button:focus,
+ .ui.inverted.button.active {
+ background: @white;
+ box-shadow: 0 0 0 @invertedBorderSize @white inset;
+ color: @focusColor;
+ }
-/* Active / Focus */
-.ui.inverted.button:focus,
-.ui.inverted.button.active {
- background: @white;
- box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
- color: @focusColor;
+ /* Active Focus */
+ .ui.inverted.button.active:focus {
+ background: @midWhite;
+ box-shadow: 0 0 0 @invertedBorderSize @midWhite inset;
+ color: @focusColor;
+ }
}
-/* Active Focus */
-.ui.inverted.button.active:focus {
- background: @midWhite;
- box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;
- color: @focusColor;
-}
+& when (@variationButtonLabeled) or (@variationButtonLabeledIcon){
+ /*-------------------
+ Labeled Button
+ --------------------*/
+ .ui.labeled.button:not(.icon) {
+ display: inline-flex;
+ flex-direction: row;
+ background: none;
+ padding: 0 !important;
+ border: none;
+ box-shadow: none;
+ }
-/*-------------------
- Labeled Button
---------------------*/
+ .ui.labeled.button > .button {
+ margin: 0;
+ }
+ .ui.labeled.button > .label {
+ display: flex;
+ align-items: @labeledLabelAlign;
+ margin: 0 0 0 @labeledLabelBorderOffset !important;
+ font-size: @labeledLabelFontSize;
+ padding: @labeledLabelPadding;
+ border-color: @labeledLabelBorderColor;
+ }
-.ui.labeled.button:not(.icon) {
- display: inline-flex;
- flex-direction: row;
- background: none !important;
- padding: 0px !important;
- border: none !important;
- box-shadow: none !important;
-}
+ /* Tag */
+ .ui.labeled.button > .tag.label:before {
+ width: @labeledTagLabelSize;
+ height: @labeledTagLabelSize;
+ }
-.ui.labeled.button > .button {
- margin: 0px;
-}
-.ui.labeled.button > .label {
- display: flex;
- align-items: @labeledLabelAlign;
- margin: 0px 0px 0px @labeledLabelBorderOffset !important;
- font-size: @labeledLabelFontSize;
- padding: @labeledLabelPadding;
- font-size: @labeledLabelFontSize;
- border-color: @labeledLabelBorderColor;
-}
+ /* Right */
+ .ui.labeled.button:not([class*="left labeled"]) > .button {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.labeled.button:not([class*="left labeled"]) > .label {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
-/* Tag */
-.ui.labeled.button > .tag.label:before {
- width: @labeledTagLabelSize;
- height: @labeledTagLabelSize;
+ /* Left Side */
+ .ui[class*="left labeled"].button > .button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .ui[class*="left labeled"].button > .label {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
}
-/* Right */
-.ui.labeled.button:not([class*="left labeled"]) > .button {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
-}
-.ui.labeled.button:not([class*="left labeled"]) > .label {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
-}
+& when (@variationButtonSocial) {
+ /*-------------------
+ Social
+ --------------------*/
-/* Left Side */
-.ui[class*="left labeled"].button > .button {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
-}
-.ui[class*="left labeled"].button > .label {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
-}
+ /* Facebook */
+ .ui.facebook.button {
+ background-color: @facebookColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.facebook.button:hover {
+ background-color: @facebookHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.facebook.button:active {
+ background-color: @facebookDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/*-------------------
- Social
---------------------*/
+ /* Twitter */
+ .ui.twitter.button {
+ background-color: @twitterColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.twitter.button:hover {
+ background-color: @twitterHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.twitter.button:active {
+ background-color: @twitterDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* Facebook */
-.ui.facebook.button {
- background-color: @facebookColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.facebook.button:hover {
- background-color: @facebookHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.facebook.button:active {
- background-color: @facebookDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* Google Plus */
+ .ui.google.plus.button {
+ background-color: @googlePlusColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.google.plus.button:hover {
+ background-color: @googlePlusHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.google.plus.button:active {
+ background-color: @googlePlusDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* Twitter */
-.ui.twitter.button {
- background-color: @twitterColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.twitter.button:hover {
- background-color: @twitterHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.twitter.button:active {
- background-color: @twitterDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* Linked In */
+ .ui.linkedin.button {
+ background-color: @linkedInColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.linkedin.button:hover {
+ background-color: @linkedInHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.linkedin.button:active {
+ background-color: @linkedInDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* Google Plus */
-.ui.google.plus.button {
- background-color: @googlePlusColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.google.plus.button:hover {
- background-color: @googlePlusHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.google.plus.button:active {
- background-color: @googlePlusDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* YouTube */
+ .ui.youtube.button {
+ background-color: @youtubeColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.youtube.button:hover {
+ background-color: @youtubeHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.youtube.button:active {
+ background-color: @youtubeDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* Linked In */
-.ui.linkedin.button {
- background-color: @linkedInColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.linkedin.button:hover {
- background-color: @linkedInHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.linkedin.button:active {
- background-color: @linkedInDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* Instagram */
+ .ui.instagram.button {
+ background-color: @instagramColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.instagram.button:hover {
+ background-color: @instagramHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.instagram.button:active {
+ background-color: @instagramDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* YouTube */
-.ui.youtube.button {
- background-color: @youtubeColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.youtube.button:hover {
- background-color: @youtubeHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.youtube.button:active {
- background-color: @youtubeDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* Pinterest */
+ .ui.pinterest.button {
+ background-color: @pinterestColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.pinterest.button:hover {
+ background-color: @pinterestHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
+ .ui.pinterest.button:active {
+ background-color: @pinterestDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ }
-/* Instagram */
-.ui.instagram.button {
- background-color: @instagramColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.instagram.button:hover {
- background-color: @instagramHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.instagram.button:active {
- background-color: @instagramDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* VK */
+ .ui.vk.button {
+ background-color: @vkColor;
+ color: @white;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.vk.button:hover {
+ background-color: @vkHoverColor;
+ color: @white;
+ }
+ .ui.vk.button:active {
+ background-color: @vkDownColor;
+ color: @white;
+ }
-/* Pinterest */
-.ui.pinterest.button {
- background-color: @pinterestColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.pinterest.button:hover {
- background-color: @pinterestHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
-.ui.pinterest.button:active {
- background-color: @pinterestDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
-}
+ /* WhatsApp */
+ .ui.whatsapp.button {
+ background-color: @whatsAppColor;
+ color: @white;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.whatsapp.button:hover {
+ background-color: @whatsAppHoverColor;
+ color: @white;
+ }
+ .ui.whatsapp.button:active {
+ background-color: @whatsAppDownColor;
+ color: @white;
+ }
-/* VK */
-.ui.vk.button {
- background-color: #4D7198;
- color: @white;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
-}
-.ui.vk.button:hover {
- background-color: @vkHoverColor;
- color: @white;
-}
-.ui.vk.button:active {
- background-color: @vkDownColor;
- color: @white;
+ /* Telegram */
+ .ui.telegram.button {
+ background-color: @telegramColor;
+ color: @white;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.telegram.button:hover {
+ background-color: @telegramHoverColor;
+ color: @white;
+ }
+ .ui.telegram.button:active {
+ background-color: @telegramDownColor;
+ color: @white;
+ }
}
/*--------------
@@ -591,7 +621,8 @@
color: @iconColor;
}
-.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
margin: @iconMargin;
}
.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
@@ -602,84 +633,72 @@
Variations
*******************************/
+& when (@variationButtonFloated) {
+ /*-------------------
+ Floated
+ --------------------*/
-/*-------------------
- Floated
---------------------*/
+ .ui[class*="left floated"].buttons,
+ .ui[class*="left floated"].button {
+ float: left;
+ margin-left: 0;
+ margin-right: @floatedMargin;
+ }
-.ui[class*="left floated"].buttons,
-.ui[class*="left floated"].button {
- float: left;
- margin-left: 0em;
- margin-right: @floatedMargin;
-}
-.ui[class*="right floated"].buttons,
-.ui[class*="right floated"].button {
- float: right;
- margin-right: 0em;
- margin-left: @floatedMargin;
+ .ui[class*="right floated"].buttons,
+ .ui[class*="right floated"].button {
+ float: right;
+ margin-right: 0;
+ margin-left: @floatedMargin;
+ }
}
-/*-------------------
- Compact
---------------------*/
+& when (@variationButtonCompact) {
+ /*-------------------
+ Compact
+ --------------------*/
-.ui.compact.buttons .button,
-.ui.compact.button {
- padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
-}
-.ui.compact.icon.buttons .button,
-.ui.compact.icon.button {
- padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
-}
-.ui.compact.labeled.icon.buttons .button,
-.ui.compact.labeled.icon.button {
- padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
-}
+ .ui.compact.buttons .button,
+ .ui.compact.button {
+ padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
+ }
+
+ .ui.compact.icon.buttons .button,
+ .ui.compact.icon.button {
+ padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
+ }
+
+ .ui.compact.labeled.icon.buttons .button,
+ .ui.compact.labeled.icon.button {
+ padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
+ }
+ .ui.compact.labeled.icon.buttons .button > .icon,
+ .ui.compact.labeled.icon.button > .icon {
+ padding: @compactVerticalPadding 0 @compactVerticalPadding 0;
+ }
+}
/*-------------------
Sizes
--------------------*/
-.ui.mini.buttons .button,
-.ui.mini.buttons .or,
-.ui.mini.button {
- font-size: @mini;
-}
-.ui.tiny.buttons .button,
-.ui.tiny.buttons .or,
-.ui.tiny.button {
- font-size: @tiny;
-}
-.ui.small.buttons .button,
-.ui.small.buttons .or,
-.ui.small.button {
- font-size: @small;
-}
.ui.buttons .button,
.ui.buttons .or,
.ui.button {
font-size: @medium;
}
-.ui.large.buttons .button,
-.ui.large.buttons .or,
-.ui.large.button {
- font-size: @large;
-}
-.ui.big.buttons .button,
-.ui.big.buttons .or,
-.ui.big.button {
- font-size: @big;
-}
-.ui.huge.buttons .button,
-.ui.huge.buttons .or,
-.ui.huge.button {
- font-size: @huge;
-}
-.ui.massive.buttons .button,
-.ui.massive.buttons .or,
-.ui.massive.button {
- font-size: @massive;
+
+& when not (@variationButtonSizes = false) {
+ each(@variationButtonSizes, {
+ @s: @@value;
+ .ui.@{value}.buttons .dropdown,
+ .ui.@{value}.buttons .dropdown .menu > .item,
+ .ui.@{value}.buttons .button,
+ .ui.@{value}.buttons .or,
+ .ui.ui.ui.ui.@{value}.button {
+ font-size: @s;
+ }
+ })
}
/*--------------
@@ -693,2869 +712,1164 @@
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
opacity: @iconButtonOpacity;
- margin: 0em !important;
+ margin: 0 !important;
vertical-align: top;
}
+& when (@variationButtonBasic) {
+ /*-------------------
+ Basic
+ --------------------*/
+
+ .ui.basic.buttons .button,
+ .ui.basic.button {
+ background: @basicBackground;
+ color: @basicTextColor;
+ font-weight: @basicFontWeight;
+ border-radius: @basicBorderRadius;
+ text-transform: @basicTextTransform;
+ text-shadow: none !important;
+ box-shadow: @basicBoxShadow;
+ }
-/*-------------------
- Basic
---------------------*/
+ .ui.basic.buttons {
+ box-shadow: @basicGroupBoxShadow;
+ border: @basicGroupBorder;
+ border-radius: @borderRadius;
+ }
-.ui.basic.buttons .button,
-.ui.basic.button {
- background: @basicBackground !important;
- color: @basicTextColor !important;
- font-weight: @basicFontWeight;
- border-radius: @basicBorderRadius;
- text-transform: @basicTextTransform;
- text-shadow: none !important;
- box-shadow: @basicBoxShadow;
-}
-.ui.basic.buttons {
- box-shadow: @basicGroupBoxShadow;
- border: @basicGroupBorder;
- border-radius: @borderRadius;
-}
-.ui.basic.buttons .button {
- border-radius: 0em;
-}
+ .ui.basic.buttons .button {
+ border-radius: 0;
+ }
-.ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
- background: @basicHoverBackground !important;
- color: @basicHoverTextColor !important;
- box-shadow: @basicHoverBoxShadow;
-}
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
- background: @basicFocusBackground !important;
- color: @basicFocusTextColor !important;
- box-shadow: @basicFocusBoxShadow;
-}
-.ui.basic.buttons .button:active,
-.ui.basic.button:active {
- background: @basicDownBackground !important;
- color: @basicDownTextColor !important;
- box-shadow: @basicDownBoxShadow;
-}
-.ui.basic.buttons .active.button,
-.ui.basic.active.button {
- background: @basicActiveBackground !important;
- box-shadow: @basicActiveBoxShadow !important;
- color: @basicActiveTextColor !important;
-}
-.ui.basic.buttons .active.button:hover,
-.ui.basic.active.button:hover {
- background-color: @transparentBlack;
-}
+ .ui.basic.buttons .button:hover,
+ .ui.basic.button:hover {
+ background: @basicHoverBackground;
+ color: @basicHoverTextColor;
+ box-shadow: @basicHoverBoxShadow;
+ }
-/* Vertical */
-.ui.basic.buttons .button:hover {
- box-shadow: @basicHoverBoxShadow inset;
-}
-.ui.basic.buttons .button:active {
- box-shadow: @basicDownBoxShadow inset;
-}
-.ui.basic.buttons .active.button {
- box-shadow: @basicActiveBoxShadow !important;
-}
+ .ui.basic.buttons .button:focus,
+ .ui.basic.button:focus {
+ background: @basicFocusBackground;
+ color: @basicFocusTextColor;
+ box-shadow: @basicFocusBoxShadow;
+ }
-/* Standard Basic Inverted */
-.ui.basic.inverted.buttons .button,
-.ui.basic.inverted.button {
- background-color: transparent !important;
- color: @offWhite !important;
- box-shadow: @basicInvertedBoxShadow !important;
-}
-.ui.basic.inverted.buttons .button:hover,
-.ui.basic.inverted.button:hover {
- color: @white !important;
- box-shadow: @basicInvertedHoverBoxShadow !important;
-}
-.ui.basic.inverted.buttons .button:focus,
-.ui.basic.inverted.button:focus {
- color: @white !important;
- box-shadow: @basicInvertedFocusBoxShadow !important;
-}
-.ui.basic.inverted.buttons .button:active,
-.ui.basic.inverted.button:active {
- background-color: @transparentWhite !important;
- color: @white !important;
- box-shadow: @basicInvertedDownBoxShadow !important;
-}
-.ui.basic.inverted.buttons .active.button,
-.ui.basic.inverted.active.button {
- background-color: @transparentWhite;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- box-shadow: @basicInvertedActiveBoxShadow;
-}
-.ui.basic.inverted.buttons .active.button:hover,
-.ui.basic.inverted.active.button:hover {
- background-color: @strongTransparentWhite;
- box-shadow: @basicInvertedHoverBoxShadow !important;
-}
+ .ui.basic.buttons .button:active,
+ .ui.basic.button:active {
+ background: @basicDownBackground;
+ color: @basicDownTextColor;
+ box-shadow: @basicDownBoxShadow;
+ }
+ .ui.basic.buttons .active.button,
+ .ui.basic.active.button {
+ background: @basicActiveBackground;
+ box-shadow: @basicActiveBoxShadow;
+ color: @basicActiveTextColor;
+ }
-/* Basic Group */
-.ui.basic.buttons .button {
- border-left: @basicGroupBorder;
- box-shadow: none;
-}
-.ui.basic.vertical.buttons .button {
- border-left: none;
-}
-.ui.basic.vertical.buttons .button {
- border-left-width: 0px;
- border-top: @basicGroupBorder;
-}
-.ui.basic.vertical.buttons .button:first-child {
- border-top-width: 0px;
-}
+ .ui.basic.buttons .active.button:hover,
+ .ui.basic.active.button:hover {
+ background-color: @transparentBlack;
+ }
+ /* Vertical */
+ .ui.basic.buttons .button:hover {
+ box-shadow: @basicHoverBoxShadow inset;
+ }
+ .ui.basic.buttons .button:active {
+ box-shadow: @basicDownBoxShadow inset;
+ }
-/*--------------
- Labeled Icon
----------------*/
+ .ui.basic.buttons .active.button {
+ box-shadow: @basicActiveBoxShadow;
+ }
+ & when (@variationButtonInverted) {
+ /* Standard Basic Inverted */
+
+ .ui.basic.inverted.buttons .button,
+ .ui.basic.inverted.button {
+ background-color: transparent;
+ color: @offWhite;
+ box-shadow: @basicInvertedBoxShadow;
+ }
+
+ .ui.basic.inverted.buttons .button:hover,
+ .ui.basic.inverted.button:hover {
+ color: @white;
+ box-shadow: @basicInvertedHoverBoxShadow;
+ }
+
+ .ui.basic.inverted.buttons .button:focus,
+ .ui.basic.inverted.button:focus {
+ color: @white;
+ box-shadow: @basicInvertedFocusBoxShadow;
+ }
+
+ .ui.basic.inverted.buttons .button:active,
+ .ui.basic.inverted.button:active {
+ background-color: @transparentWhite;
+ color: @white;
+ box-shadow: @basicInvertedDownBoxShadow;
+ }
+
+ .ui.basic.inverted.buttons .active.button,
+ .ui.basic.inverted.active.button {
+ background-color: @transparentWhite;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ box-shadow: @basicInvertedActiveBoxShadow;
+ }
+
+ .ui.basic.inverted.buttons .active.button:hover,
+ .ui.basic.inverted.active.button:hover {
+ background-color: @strongTransparentWhite;
+ box-shadow: @basicInvertedHoverBoxShadow;
+ }
+ }
-.ui.labeled.icon.buttons .button,
-.ui.labeled.icon.button {
- position: relative;
- padding-left: @labeledIconPadding !important;
- padding-right: @horizontalPadding !important;
+ & when (@variationButtonBasic) {
+ /* Basic Group */
+ .ui.basic.buttons .button {
+ border-left: @basicGroupBorder;
+ box-shadow: none;
+ }
+
+ .ui.basic.vertical.buttons .button {
+ border-left: none;
+ border-left-width: 0;
+ border-top: @basicGroupBorder;
+ }
+
+ .ui.basic.vertical.buttons .button:first-child {
+ border-top-width: 0;
+ }
+ }
}
-/* Left Labeled */
-.ui.labeled.icon.buttons > .button > .icon,
-.ui.labeled.icon.button > .icon {
- position: absolute;
- height: 100%;
- line-height: 1;
- border-radius: 0px;
- border-top-left-radius: inherit;
- border-bottom-left-radius: inherit;
- text-align: center;
+& when (@variationButtonTertiary) {
+ /*-------------------
+ Tertiary
+ --------------------*/
- margin: @labeledIconMargin;
- width: @labeledIconWidth;
- background-color: @labeledIconBackgroundColor;
- color: @labeledIconColor;
- box-shadow: @labeledIconLeftShadow;
-}
+ /* Overline Mixin */
+ .ui.tertiary.button {
+ transition: color @defaultDuration @defaultEasing !important;
+ border-radius: 0;
+ margin: (@verticalPadding - @tertiaryLinePadding)
+ (@horizontalMargin)
+ (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryLinePadding)
+ 0 !important;
+ padding: @tertiaryLinePadding !important;
-/* Left Labeled */
-.ui.labeled.icon.buttons > .button > .icon,
-.ui.labeled.icon.button > .icon {
- top: 0em;
- left: 0em;
-}
+ & when (@tertiaryWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor;
+ }
-/* Right Labeled */
-.ui[class*="right labeled"].icon.button {
- padding-right: @labeledIconPadding !important;
- padding-left: @horizontalPadding !important;
-}
-.ui[class*="right labeled"].icon.button > .icon {
- left: auto;
- right: 0em;
- border-radius: 0px;
- border-top-right-radius: inherit;
- border-bottom-right-radius: inherit;
- box-shadow: @labeledIconRightShadow;
-}
+ & when (@tertiaryWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor;
+ }
+ & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){
+ box-shadow: none;
+ }
-.ui.labeled.icon.buttons > .button > .icon:before,
-.ui.labeled.icon.button > .icon:before,
-.ui.labeled.icon.buttons > .button > .icon:after,
-.ui.labeled.icon.button > .icon:after {
- display: block;
- position: absolute;
- width: 100%;
- top: 50%;
- text-align: center;
- transform: translateY(-50%);
-}
+ color: @tertiaryTextColor;
+ background: @tertiaryBackgroundColor;
+ }
-.ui.labeled.icon.buttons .button > .icon {
- border-radius: 0em;
-}
-.ui.labeled.icon.buttons .button:first-child > .icon {
- border-top-left-radius: @borderRadius;
- border-bottom-left-radius: @borderRadius;
-}
-.ui.labeled.icon.buttons .button:last-child > .icon {
- border-top-right-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
-}
-.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
- border-radius: 0em;
- border-top-left-radius: @borderRadius;
-}
-.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
- border-radius: 0em;
- border-bottom-left-radius: @borderRadius;
-}
+ .ui.tertiary.button:hover {
-/* Fluid Labeled */
-.ui.fluid[class*="left labeled"].icon.button,
-.ui.fluid[class*="right labeled"].icon.button {
- padding-left: @horizontalPadding !important;
- padding-right: @horizontalPadding !important;
-}
+ & when (@tertiaryHoverWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor;
+ }
+ & when (@tertiaryHoverWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor;
+ }
+ & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) {
+ box-shadow: none;
+ }
+ color: @tertiaryHoverColor;
+ background: @tertiaryHoverBackgroundColor;
+ }
-/*--------------
- Toggle
----------------*/
+ .ui.tertiary.button:focus {
+ & when (@tertiaryFocusWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor;
+ }
-/* Toggle (Modifies active state to give affordances) */
-.ui.toggle.buttons .active.button,
-.ui.buttons .button.toggle.active,
-.ui.button.toggle.active {
- background-color: @positiveColor !important;
- box-shadow: none !important;
- text-shadow: @invertedTextShadow;
- color: @invertedTextColor !important;
-}
-.ui.button.toggle.active:hover {
- background-color: @positiveColorHover !important;
- text-shadow: @invertedTextShadow;
- color: @invertedTextColor !important;
-}
+ & when (@tertiaryFocusWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor;
+ }
-/*--------------
- Circular
----------------*/
+ & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){
+ box-shadow: none;
+ }
-.ui.circular.button {
- border-radius: 10em;
-}
-.ui.circular.button > .icon {
- width: 1em;
- vertical-align: baseline;
-}
+ color: @tertiaryFocusColor;
+ background: @tertiaryFocusBackgroundColor;
+ }
+ .ui.tertiary.button:active {
+ & when (@tertiaryActiveWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
-/*-------------------
- Or Buttons
---------------------*/
+ & when (@tertiaryActiveWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
-.ui.buttons .or {
- position: relative;
- width: @orGap;
- height: @orHeight;
- z-index: @orZIndex;
+ & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){
+ box-shadow: none;
+ border-radius: 0;
+ }
+
+ color: @tertiaryActiveColor;
+ background: @tertiaryActiveBackgroundColor;
+ }
}
-.ui.buttons .or:before {
- position: absolute;
- text-align: center;
- border-radius: @circularRadius;
- content: @orText;
- top: 50%;
- left: 50%;
- background-color: @orBackgroundColor;
- text-shadow: @orTextShadow;
+& when (@variationButtonLabeledIcon) {
+ /*--------------
+ Labeled Icon
+ ---------------*/
- margin-top: @orVerticalOffset;
- margin-left: @orHorizontalOffset;
+ .ui.labeled.icon.buttons .button,
+ .ui.labeled.icon.button {
+ position: relative;
+ padding-left: @labeledIconPadding !important;
+ padding-right: @horizontalPadding !important;
+ }
- width: @orCircleSize;
- height: @orCircleSize;
+ /* Left Labeled */
+ .ui.labeled.icon.buttons > .button > .icon,
+ .ui.labeled.icon.button > .icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ line-height: 1;
+ border-radius: 0;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ text-align: center;
+ animation: none;
+ padding: @verticalPadding 0 @verticalPadding 0;
+
+ margin: @labeledIconMargin;
+ width: @labeledIconWidth;
+ background-color: @labeledIconBackgroundColor;
+ color: @labeledIconColor;
+ box-shadow: @labeledIconLeftShadow;
+ }
- line-height: @orLineHeight;
- color: @orTextColor;
+ /* Right Labeled */
+ .ui[class*="right labeled"].icon.button {
+ padding-right: @labeledIconPadding !important;
+ padding-left: @horizontalPadding !important;
+ }
- font-style: @orTextStyle;
- font-weight: @orTextWeight;
+ .ui[class*="right labeled"].icon.button > .icon {
+ left: auto;
+ right: 0;
+ border-radius: 0;
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+ box-shadow: @labeledIconRightShadow;
+ }
- box-shadow: @orBoxShadow;
-}
-.ui.buttons .or[data-text]:before {
- content: attr(data-text);
-}
-/* Fluid Or */
-.ui.fluid.buttons .or {
- width: 0em !important;
-}
-.ui.fluid.buttons .or:after {
- display: none;
-}
+ .ui.labeled.icon.buttons > .button > .icon:before,
+ .ui.labeled.icon.button > .icon:before,
+ .ui.labeled.icon.buttons > .button > .icon:after,
+ .ui.labeled.icon.button > .icon:after {
+ display: block;
+ position: relative;
+ width: 100%;
+ top: 0;
+ text-align: center;
+ }
+ .ui.labeled.icon.buttons .button > .icon {
+ border-radius: 0;
+ }
-/*-------------------
- Attached
---------------------*/
+ .ui.labeled.icon.buttons .button:first-child > .icon {
+ border-top-left-radius: @borderRadius;
+ border-bottom-left-radius: @borderRadius;
+ }
+ .ui.labeled.icon.buttons .button:last-child > .icon {
+ border-top-right-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+ }
-/* Singular */
-.ui.attached.button {
- position: relative;
- display: block;
- margin: 0em;
- border-radius: 0em;
- box-shadow: @attachedBoxShadow !important;
-}
+ .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
+ border-radius: 0;
+ border-top-left-radius: @borderRadius;
+ }
-/* Top / Bottom */
-.ui.attached.top.button {
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui.attached.bottom.button {
- border-radius: 0em 0em @borderRadius @borderRadius;
+ .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
+ border-radius: 0;
+ border-bottom-left-radius: @borderRadius;
+ }
+
+ /* Loading Icon in Labeled Button */
+ .ui.labeled.icon.button > .loading.icon:before {
+ animation: loader 2s linear infinite;
+ }
}
-/* Left / Right */
-.ui.left.attached.button {
- display: inline-block;
- border-left: none;
- text-align: right;
+& when (@variationButtonToggle) {
+ /*--------------
+ Toggle
+ ---------------*/
- padding-right: @attachedHorizontalPadding;
- border-radius: @borderRadius 0em 0em @borderRadius;
-}
-.ui.right.attached.button {
- display: inline-block;
- text-align: left;
- padding-left: @attachedHorizontalPadding;
- border-radius: 0em @borderRadius @borderRadius 0em;
-}
+ /* Toggle (Modifies active state to give affordances) */
+ .ui.toggle.buttons .active.button,
+ .ui.buttons .button.toggle.active,
+ .ui.button.toggle.active {
+ background-color: @positiveColor;
+ box-shadow: none;
+ text-shadow: @invertedTextShadow;
+ color: @invertedTextColor;
+ }
-/* Plural */
-.ui.attached.buttons {
- position: relative;
- display: flex;
- border-radius: 0em;
- width: auto !important;
- z-index: @attachedZIndex;
- margin-left: @attachedOffset;
- margin-right: @attachedOffset;
-}
-.ui.attached.buttons .button {
- margin: 0em;
-}
-.ui.attached.buttons .button:first-child {
- border-radius: 0em;
-}
-.ui.attached.buttons .button:last-child {
- border-radius: 0em;
+ .ui.button.toggle.active:hover {
+ background-color: @positiveColorHover;
+ text-shadow: @invertedTextShadow;
+ color: @invertedTextColor;
+ }
}
-/* Top / Bottom */
-.ui[class*="top attached"].buttons {
- margin-bottom: @attachedOffset;
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui[class*="top attached"].buttons .button:first-child {
- border-radius: @borderRadius 0em 0em 0em;
-}
-.ui[class*="top attached"].buttons .button:last-child {
- border-radius: 0em @borderRadius 0em 0em;
-}
+& when (@variationButtonCircular) {
+ /*--------------
+ Circular
+ ---------------*/
-.ui[class*="bottom attached"].buttons {
- margin-top: @attachedOffset;
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-.ui[class*="bottom attached"].buttons .button:first-child {
- border-radius: 0em 0em 0em @borderRadius;
-}
-.ui[class*="bottom attached"].buttons .button:last-child {
- border-radius: 0em 0em @borderRadius 0em;
-}
+ .ui.circular.button {
+ border-radius: 10em;
+ }
-/* Left / Right */
-.ui[class*="left attached"].buttons {
- display: inline-flex;
- margin-right: 0em;
- margin-left: @attachedOffset;
- border-radius: 0em @borderRadius @borderRadius 0em;
-}
-.ui[class*="left attached"].buttons .button:first-child {
- margin-left: @attachedOffset;
- border-radius: 0em @borderRadius 0em 0em;
-}
-.ui[class*="left attached"].buttons .button:last-child {
- margin-left: @attachedOffset;
- border-radius: 0em 0em @borderRadius 0em;
+ .ui.circular.button > .icon {
+ width: 1em;
+ vertical-align: baseline;
+ }
}
-.ui[class*="right attached"].buttons {
- display: inline-flex;
- margin-left: 0em;
- margin-right: @attachedOffset;
- border-radius: @borderRadius 0em 0em @borderRadius;
-}
-.ui[class*="right attached"].buttons .button:first-child {
- margin-left: @attachedOffset;
- border-radius: @borderRadius 0em 0em 0em;
-}
-.ui[class*="right attached"].buttons .button:last-child {
- margin-left: @attachedOffset;
- border-radius: 0em 0em 0em @borderRadius;
-}
+& when (@variationButtonOr) {
+ /*-------------------
+ Or Buttons
+ --------------------*/
-/*-------------------
- Fluid
---------------------*/
+ .ui.buttons .or {
+ position: relative;
+ width: @orGap;
+ height: @orHeight;
+ z-index: @orZIndex;
+ }
-.ui.fluid.buttons,
-.ui.fluid.button {
- width: 100%;
-}
-.ui.fluid.button {
- display: block;
-}
+ .ui.buttons .or:before {
+ position: absolute;
+ text-align: center;
+ border-radius: @circularRadius;
-.ui.two.buttons {
- width: 100%;
-}
-.ui.two.buttons > .button {
- width: 50%;
-}
+ content: @orText;
+ top: 50%;
+ left: 50%;
+ background-color: @orBackgroundColor;
+ text-shadow: @orTextShadow;
-.ui.three.buttons {
- width: 100%;
-}
-.ui.three.buttons > .button {
- width: 33.333%;
-}
+ margin-top: @orVerticalOffset;
+ margin-left: @orHorizontalOffset;
-.ui.four.buttons {
- width: 100%;
-}
-.ui.four.buttons > .button {
- width: 25%;
-}
+ width: @orCircleSize;
+ height: @orCircleSize;
-.ui.five.buttons {
- width: 100%;
-}
-.ui.five.buttons > .button {
- width: 20%;
-}
+ line-height: @orLineHeight;
+ color: @orTextColor;
-.ui.six.buttons {
- width: 100%;
-}
-.ui.six.buttons > .button {
- width: 16.666%;
-}
+ font-style: @orTextStyle;
+ font-weight: @orTextWeight;
-.ui.seven.buttons {
- width: 100%;
-}
-.ui.seven.buttons > .button {
- width: 14.285%;
-}
+ box-shadow: @orBoxShadow;
+ }
-.ui.eight.buttons {
- width: 100%;
-}
-.ui.eight.buttons > .button {
- width: 12.500%;
-}
+ .ui.buttons .or[data-text]:before {
+ content: attr(data-text);
+ }
-.ui.nine.buttons {
- width: 100%;
-}
-.ui.nine.buttons > .button {
- width: 11.11%;
-}
+ /* Fluid Or */
+ .ui.fluid.buttons .or {
+ width: 0 !important;
+ }
-.ui.ten.buttons {
- width: 100%;
-}
-.ui.ten.buttons > .button {
- width: 10%;
-}
+ .ui.fluid.buttons .or:after {
+ display: none;
+ }
-.ui.eleven.buttons {
- width: 100%;
-}
-.ui.eleven.buttons > .button {
- width: 9.09%;
}
-.ui.twelve.buttons {
- width: 100%;
-}
-.ui.twelve.buttons > .button {
- width: 8.3333%;
-}
+& when (@variationButtonAttached) {
+ /*-------------------
+ Attached
+ --------------------*/
-/* Fluid Vertical Buttons */
-.ui.fluid.vertical.buttons,
-.ui.fluid.vertical.buttons > .button {
- display: flex;
- width: auto;
-}
-.ui.two.vertical.buttons > .button {
- height: 50%;
-}
-.ui.three.vertical.buttons > .button {
- height: 33.333%;
-}
-.ui.four.vertical.buttons > .button {
- height: 25%;
-}
-.ui.five.vertical.buttons > .button {
- height: 20%;
-}
-.ui.six.vertical.buttons > .button {
- height: 16.666%;
-}
-.ui.seven.vertical.buttons > .button {
- height: 14.285%;
-}
-.ui.eight.vertical.buttons > .button {
- height: 12.500%;
-}
-.ui.nine.vertical.buttons > .button {
- height: 11.11%;
-}
-.ui.ten.vertical.buttons > .button {
- height: 10%;
-}
-.ui.eleven.vertical.buttons > .button {
- height: 9.09%;
-}
-.ui.twelve.vertical.buttons > .button {
- height: 8.3333%;
-}
+ /* Singular */
+ .ui.attached.button {
+ position: relative;
+ display: block;
+ margin: 0;
+ border-radius: 0;
+ box-shadow: @attachedBoxShadow;
+ }
+ /* Top / Bottom */
+ .ui.attached.top.button {
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
-/*-------------------
- Colors
---------------------*/
+ .ui.attached.bottom.button {
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
-/*--- Black ---*/
-.ui.black.buttons .button,
-.ui.black.button {
- background-color: @black;
- color: @blackTextColor;
- text-shadow: @blackTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.black.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
- background-color: @blackHover;
- color: @blackTextColor;
- text-shadow: @blackTextShadow;
-}
-.ui.black.buttons .button:focus,
-.ui.black.button:focus {
- background-color: @blackFocus;
- color: @blackTextColor;
- text-shadow: @blackTextShadow;
-}
-.ui.black.buttons .button:active,
-.ui.black.button:active {
- background-color: @blackDown;
- color: @blackTextColor;
- text-shadow: @blackTextShadow;
-}
-.ui.black.buttons .active.button,
-.ui.black.buttons .active.button:active,
-.ui.black.active.button,
-.ui.black.button .active.button:active {
- background-color: @blackActive;
- color: @blackTextColor;
- text-shadow: @blackTextShadow;
-}
+ /* Left / Right */
+ .ui.left.attached.button {
+ display: inline-block;
+ border-left: none;
+ text-align: right;
-/* Basic */
-.ui.basic.black.buttons .button,
-.ui.basic.black.button {
- box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;
- color: @black !important;
-}
-.ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
- color: @blackHover !important;
-}
-.ui.basic.black.buttons .button:focus,
-.ui.basic.black.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;
- color: @blackHover !important;
-}
-.ui.basic.black.buttons .active.button,
-.ui.basic.black.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important;
- color: @blackDown !important;
-}
-.ui.basic.black.buttons .button:active,
-.ui.basic.black.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
- color: @blackDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ padding-right: @attachedHorizontalPadding;
+ border-radius: @borderRadius 0 0 @borderRadius;
+ }
-/* Inverted */
-.ui.inverted.black.buttons .button,
-.ui.inverted.black.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;
- color: @invertedTextColor;
-}
-.ui.inverted.black.buttons .button:hover,
-.ui.inverted.black.button:hover,
-.ui.inverted.black.buttons .button:focus,
-.ui.inverted.black.button:focus,
-.ui.inverted.black.buttons .button.active,
-.ui.inverted.black.button.active,
-.ui.inverted.black.buttons .button:active,
-.ui.inverted.black.button:active {
- box-shadow: none !important;
- color: @lightBlackTextColor;
-}
-.ui.inverted.black.buttons .button:hover,
-.ui.inverted.black.button:hover {
- background-color: @lightBlackHover;
-}
-.ui.inverted.black.buttons .button:focus,
-.ui.inverted.black.button:focus {
- background-color: @lightBlackFocus;
-}
-.ui.inverted.black.buttons .active.button,
-.ui.inverted.black.active.button {
- background-color: @lightBlackActive;
-}
-.ui.inverted.black.buttons .button:active,
-.ui.inverted.black.button:active {
- background-color: @lightBlackDown;
-}
+ .ui.right.attached.button {
+ display: inline-block;
+ text-align: left;
+ padding-left: @attachedHorizontalPadding;
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
-/* Inverted Basic */
-.ui.inverted.black.basic.buttons .button,
-.ui.inverted.black.buttons .basic.button,
-.ui.inverted.black.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.black.basic.buttons .button:hover,
-.ui.inverted.black.buttons .basic.button:hover,
-.ui.inverted.black.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important;
- color: @white !important;
-}
-.ui.inverted.black.basic.buttons .button:focus,
-.ui.inverted.black.basic.buttons .button:focus,
-.ui.inverted.black.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important;
- color: @lightBlack !important;
-}
-.ui.inverted.black.basic.buttons .active.button,
-.ui.inverted.black.buttons .basic.active.button,
-.ui.inverted.black.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important;
- color: @white !important;
-}
-.ui.inverted.black.basic.buttons .button:active,
-.ui.inverted.black.buttons .basic.button:active,
-.ui.inverted.black.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
- color: @white !important;
-}
+ /* Plural */
+ .ui.attached.buttons {
+ position: relative;
+ display: flex;
+ border-radius: 0;
+ width: auto !important;
+ z-index: @attachedZIndex;
+ margin-left: @attachedOffset;
+ margin-right: @attachedOffset;
+ }
-/*--- Grey ---*/
-.ui.grey.buttons .button,
-.ui.grey.button {
- background-color: @grey;
- color: @greyTextColor;
- text-shadow: @greyTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.grey.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.grey.buttons .button:hover,
-.ui.grey.button:hover {
- background-color: @greyHover;
- color: @greyTextColor;
- text-shadow: @greyTextShadow;
-}
-.ui.grey.buttons .button:focus,
-.ui.grey.button:focus {
- background-color: @greyFocus;
- color: @greyTextColor;
- text-shadow: @greyTextShadow;
-}
-.ui.grey.buttons .button:active,
-.ui.grey.button:active {
- background-color: @greyDown;
- color: @greyTextColor;
- text-shadow: @greyTextShadow;
-}
-.ui.grey.buttons .active.button,
-.ui.grey.buttons .active.button:active,
-.ui.grey.active.button,
-.ui.grey.button .active.button:active {
- background-color: @greyActive;
- color: @greyTextColor;
- text-shadow: @greyTextShadow;
-}
+ .ui.attached.buttons .button {
+ margin: 0;
+ }
-/* Basic */
-.ui.basic.grey.buttons .button,
-.ui.basic.grey.button {
- box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;
- color: @grey !important;
-}
-.ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important;
- color: @greyHover !important;
-}
-.ui.basic.grey.buttons .button:focus,
-.ui.basic.grey.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;
- color: @greyHover !important;
-}
-.ui.basic.grey.buttons .active.button,
-.ui.basic.grey.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important;
- color: @greyDown !important;
-}
-.ui.basic.grey.buttons .button:active,
-.ui.basic.grey.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important;
- color: @greyDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.attached.buttons .button:first-child {
+ border-radius: 0;
+ }
-/* Inverted */
-.ui.inverted.grey.buttons .button,
-.ui.inverted.grey.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;
- color: @invertedTextColor;
-}
-.ui.inverted.grey.buttons .button:hover,
-.ui.inverted.grey.button:hover,
-.ui.inverted.grey.buttons .button:focus,
-.ui.inverted.grey.button:focus,
-.ui.inverted.grey.buttons .button.active,
-.ui.inverted.grey.button.active,
-.ui.inverted.grey.buttons .button:active,
-.ui.inverted.grey.button:active {
- box-shadow: none !important;
- color: @lightGreyTextColor;
-}
-.ui.inverted.grey.buttons .button:hover,
-.ui.inverted.grey.button:hover {
- background-color: @lightGreyHover;
-}
-.ui.inverted.grey.buttons .button:focus,
-.ui.inverted.grey.button:focus {
- background-color: @lightGreyFocus;
-}
-.ui.inverted.grey.buttons .active.button,
-.ui.inverted.grey.active.button {
- background-color: @lightGreyActive;
-}
-.ui.inverted.grey.buttons .button:active,
-.ui.inverted.grey.button:active {
- background-color: @lightGreyDown;
-}
+ .ui.attached.buttons .button:last-child {
+ border-radius: 0;
+ }
-/* Inverted Basic */
-.ui.inverted.grey.basic.buttons .button,
-.ui.inverted.grey.buttons .basic.button,
-.ui.inverted.grey.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.grey.basic.buttons .button:hover,
-.ui.inverted.grey.buttons .basic.button:hover,
-.ui.inverted.grey.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important;
- color: @white !important;
-}
-.ui.inverted.grey.basic.buttons .button:focus,
-.ui.inverted.grey.basic.buttons .button:focus,
-.ui.inverted.grey.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important;
- color: @lightGrey !important;
-}
-.ui.inverted.grey.basic.buttons .active.button,
-.ui.inverted.grey.buttons .basic.active.button,
-.ui.inverted.grey.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important;
- color: @white !important;
-}
-.ui.inverted.grey.basic.buttons .button:active,
-.ui.inverted.grey.buttons .basic.button:active,
-.ui.inverted.grey.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important;
- color: @white !important;
-}
+ /* Top / Bottom */
+ .ui[class*="top attached"].buttons {
+ margin-bottom: @attachedOffset;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui[class*="top attached"].buttons .button:first-child {
+ border-radius: @borderRadius 0 0 0;
+ }
-/*--- Brown ---*/
-.ui.brown.buttons .button,
-.ui.brown.button {
- background-color: @brown;
- color: @brownTextColor;
- text-shadow: @brownTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.brown.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.brown.buttons .button:hover,
-.ui.brown.button:hover {
- background-color: @brownHover;
- color: @brownTextColor;
- text-shadow: @brownTextShadow;
-}
-.ui.brown.buttons .button:focus,
-.ui.brown.button:focus {
- background-color: @brownFocus;
- color: @brownTextColor;
- text-shadow: @brownTextShadow;
-}
-.ui.brown.buttons .button:active,
-.ui.brown.button:active {
- background-color: @brownDown;
- color: @brownTextColor;
- text-shadow: @brownTextShadow;
-}
-.ui.brown.buttons .active.button,
-.ui.brown.buttons .active.button:active,
-.ui.brown.active.button,
-.ui.brown.button .active.button:active {
- background-color: @brownActive;
- color: @brownTextColor;
- text-shadow: @brownTextShadow;
-}
+ .ui[class*="top attached"].buttons .button:last-child {
+ border-radius: 0 @borderRadius 0 0;
+ }
-/* Basic */
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button {
- box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;
- color: @brown !important;
-}
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important;
- color: @brownHover !important;
-}
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;
- color: @brownHover !important;
-}
-.ui.basic.brown.buttons .active.button,
-.ui.basic.brown.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important;
- color: @brownDown !important;
-}
-.ui.basic.brown.buttons .button:active,
-.ui.basic.brown.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important;
- color: @brownDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui[class*="bottom attached"].buttons {
+ margin-top: @attachedOffset;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
-/* Inverted */
-.ui.inverted.brown.buttons .button,
-.ui.inverted.brown.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important;
- color: @lightBrown;
-}
-.ui.inverted.brown.buttons .button:hover,
-.ui.inverted.brown.button:hover,
-.ui.inverted.brown.buttons .button:focus,
-.ui.inverted.brown.button:focus,
-.ui.inverted.brown.buttons .button.active,
-.ui.inverted.brown.button.active,
-.ui.inverted.brown.buttons .button:active,
-.ui.inverted.brown.button:active {
- box-shadow: none !important;
- color: @lightBrownTextColor;
-}
-.ui.inverted.brown.buttons .button:hover,
-.ui.inverted.brown.button:hover {
- background-color: @lightBrownHover;
-}
-.ui.inverted.brown.buttons .button:focus,
-.ui.inverted.brown.button:focus {
- background-color: @lightBrownFocus;
-}
-.ui.inverted.brown.buttons .active.button,
-.ui.inverted.brown.active.button {
- background-color: @lightBrownActive;
-}
-.ui.inverted.brown.buttons .button:active,
-.ui.inverted.brown.button:active {
- background-color: @lightBrownDown;
-}
+ .ui[class*="bottom attached"].buttons .button:first-child {
+ border-radius: 0 0 0 @borderRadius;
+ }
-/* Inverted Basic */
-.ui.inverted.brown.basic.buttons .button,
-.ui.inverted.brown.buttons .basic.button,
-.ui.inverted.brown.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.brown.basic.buttons .button:hover,
-.ui.inverted.brown.buttons .basic.button:hover,
-.ui.inverted.brown.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important;
- color: @lightBrown !important;
-}
-.ui.inverted.brown.basic.buttons .button:focus,
-.ui.inverted.brown.basic.buttons .button:focus,
-.ui.inverted.brown.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important;
- color: @lightBrown !important;
-}
-.ui.inverted.brown.basic.buttons .active.button,
-.ui.inverted.brown.buttons .basic.active.button,
-.ui.inverted.brown.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important;
- color: @lightBrown !important;
-}
-.ui.inverted.brown.basic.buttons .button:active,
-.ui.inverted.brown.buttons .basic.button:active,
-.ui.inverted.brown.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important;
- color: @lightBrown !important;
-}
+ .ui[class*="bottom attached"].buttons .button:last-child {
+ border-radius: 0 0 @borderRadius 0;
+ }
-/*--- Blue ---*/
-.ui.blue.buttons .button,
-.ui.blue.button {
- background-color: @blue;
- color: @blueTextColor;
- text-shadow: @blueTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.blue.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover {
- background-color: @blueHover;
- color: @blueTextColor;
- text-shadow: @blueTextShadow;
-}
-.ui.blue.buttons .button:focus,
-.ui.blue.button:focus {
- background-color: @blueFocus;
- color: @blueTextColor;
- text-shadow: @blueTextShadow;
-}
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
- background-color: @blueDown;
- color: @blueTextColor;
- text-shadow: @blueTextShadow;
-}
-.ui.blue.buttons .active.button,
-.ui.blue.buttons .active.button:active,
-.ui.blue.active.button,
-.ui.blue.button .active.button:active {
- background-color: @blueActive;
- color: @blueTextColor;
- text-shadow: @blueTextShadow;
-}
+ /* Left / Right */
+ .ui[class*="left attached"].buttons {
+ display: inline-flex;
+ margin-right: 0;
+ margin-left: @attachedOffset;
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
-/* Basic */
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button {
- box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;
- color: @blue !important;
-}
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
- color: @blueHover !important;
-}
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;
- color: @blueHover !important;
-}
-.ui.basic.blue.buttons .active.button,
-.ui.basic.blue.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important;
- color: @blueDown !important;
-}
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
- color: @blueDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui[class*="left attached"].buttons .button:first-child {
+ margin-left: @attachedOffset;
+ border-radius: 0 @borderRadius 0 0;
+ }
-/* Inverted */
-.ui.inverted.blue.buttons .button,
-.ui.inverted.blue.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
- color: @lightBlue;
-}
-.ui.inverted.blue.buttons .button:hover,
-.ui.inverted.blue.button:hover,
-.ui.inverted.blue.buttons .button:focus,
-.ui.inverted.blue.button:focus,
-.ui.inverted.blue.buttons .button.active,
-.ui.inverted.blue.button.active,
-.ui.inverted.blue.buttons .button:active,
-.ui.inverted.blue.button:active {
- box-shadow: none !important;
- color: @lightBlueTextColor;
-}
-.ui.inverted.blue.buttons .button:hover,
-.ui.inverted.blue.button:hover {
- background-color: @lightBlueHover;
-}
-.ui.inverted.blue.buttons .button:focus,
-.ui.inverted.blue.button:focus {
- background-color: @lightBlueFocus;
-}
-.ui.inverted.blue.buttons .active.button,
-.ui.inverted.blue.active.button {
- background-color: @lightBlueActive;
-}
-.ui.inverted.blue.buttons .button:active,
-.ui.inverted.blue.button:active {
- background-color: @lightBlueDown;
-}
+ .ui[class*="left attached"].buttons .button:last-child {
+ margin-left: @attachedOffset;
+ border-radius: 0 0 @borderRadius 0;
+ }
-/* Inverted Basic */
-.ui.inverted.blue.basic.buttons .button,
-.ui.inverted.blue.buttons .basic.button,
-.ui.inverted.blue.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.blue.basic.buttons .button:hover,
-.ui.inverted.blue.buttons .basic.button:hover,
-.ui.inverted.blue.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important;
- color: @lightBlue !important;
-}
-.ui.inverted.blue.basic.buttons .button:focus,
-.ui.inverted.blue.basic.buttons .button:focus,
-.ui.inverted.blue.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important;
- color: @lightBlue !important;
-}
-.ui.inverted.blue.basic.buttons .active.button,
-.ui.inverted.blue.buttons .basic.active.button,
-.ui.inverted.blue.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important;
- color: @lightBlue !important;
-}
-.ui.inverted.blue.basic.buttons .button:active,
-.ui.inverted.blue.buttons .basic.button:active,
-.ui.inverted.blue.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;
- color: @lightBlue !important;
-}
+ .ui[class*="right attached"].buttons {
+ display: inline-flex;
+ margin-left: 0;
+ margin-right: @attachedOffset;
+ border-radius: @borderRadius 0 0 @borderRadius;
+ }
-/*--- Green ---*/
-.ui.green.buttons .button,
-.ui.green.button {
- background-color: @green;
- color: @greenTextColor;
- text-shadow: @greenTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.green.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.green.buttons .button:hover,
-.ui.green.button:hover {
- background-color: @greenHover;
- color: @greenTextColor;
- text-shadow: @greenTextShadow;
-}
-.ui.green.buttons .button:focus,
-.ui.green.button:focus {
- background-color: @greenFocus;
- color: @greenTextColor;
- text-shadow: @greenTextShadow;
-}
-.ui.green.buttons .button:active,
-.ui.green.button:active {
- background-color: @greenDown;
- color: @greenTextColor;
- text-shadow: @greenTextShadow;
-}
-.ui.green.buttons .active.button,
-.ui.green.buttons .active.button:active,
-.ui.green.active.button,
-.ui.green.button .active.button:active {
- background-color: @greenActive;
- color: @greenTextColor;
- text-shadow: @greenTextShadow;
+ .ui[class*="right attached"].buttons .button:first-child {
+ margin-left: @attachedOffset;
+ border-radius: @borderRadius 0 0 0;
+ }
+
+ .ui[class*="right attached"].buttons .button:last-child {
+ margin-left: @attachedOffset;
+ border-radius: 0 0 0 @borderRadius;
+ }
}
+& when (@variationButtonFluid) {
+ /*-------------------
+ Fluid
+ --------------------*/
-/* Basic */
-.ui.basic.green.buttons .button,
-.ui.basic.green.button {
- box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;
- color: @green !important;
-}
-.ui.basic.green.buttons .button:hover,
-.ui.basic.green.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
- color: @greenHover !important;
-}
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;
- color: @greenHover !important;
-}
-.ui.basic.green.buttons .active.button,
-.ui.basic.green.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important;
- color: @greenDown !important;
-}
-.ui.basic.green.buttons .button:active,
-.ui.basic.green.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
- color: @greenDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.fluid.buttons,
+ .ui.fluid.button {
+ width: 100%;
+ }
-/* Inverted */
-.ui.inverted.green.buttons .button,
-.ui.inverted.green.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
- color: @lightGreen;
-}
-.ui.inverted.green.buttons .button:hover,
-.ui.inverted.green.button:hover,
-.ui.inverted.green.buttons .button:focus,
-.ui.inverted.green.button:focus,
-.ui.inverted.green.buttons .button.active,
-.ui.inverted.green.button.active,
-.ui.inverted.green.buttons .button:active,
-.ui.inverted.green.button:active {
- box-shadow: none !important;
- color: @greenTextColor;
-}
-.ui.inverted.green.buttons .button:hover,
-.ui.inverted.green.button:hover {
- background-color: @lightGreenHover;
-}
-.ui.inverted.green.buttons .button:focus,
-.ui.inverted.green.button:focus {
- background-color: @lightGreenFocus;
-}
-.ui.inverted.green.buttons .active.button,
-.ui.inverted.green.active.button {
- background-color: @lightGreenActive;
-}
-.ui.inverted.green.buttons .button:active,
-.ui.inverted.green.button:active {
- background-color: @lightGreenDown;
-}
+ .ui.fluid.button {
+ display: block;
+ }
-/* Inverted Basic */
-.ui.inverted.green.basic.buttons .button,
-.ui.inverted.green.buttons .basic.button,
-.ui.inverted.green.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.green.basic.buttons .button:hover,
-.ui.inverted.green.buttons .basic.button:hover,
-.ui.inverted.green.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important;
- color: @lightGreen !important;
-}
-.ui.inverted.green.basic.buttons .button:focus,
-.ui.inverted.green.basic.buttons .button:focus,
-.ui.inverted.green.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important;
- color: @lightGreen !important;
-}
-.ui.inverted.green.basic.buttons .active.button,
-.ui.inverted.green.buttons .basic.active.button,
-.ui.inverted.green.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important;
- color: @lightGreen !important;
-}
-.ui.inverted.green.basic.buttons .button:active,
-.ui.inverted.green.buttons .basic.button:active,
-.ui.inverted.green.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;
- color: @lightGreen !important;
-}
+ .ui.two.buttons {
+ width: 100%;
+ }
-/*--- Orange ---*/
-.ui.orange.buttons .button,
-.ui.orange.button {
- background-color: @orange;
- color: @orangeTextColor;
- text-shadow: @orangeTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.orange.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.orange.buttons .button:hover,
-.ui.orange.button:hover {
- background-color: @orangeHover;
- color: @orangeTextColor;
- text-shadow: @orangeTextShadow;
-}
-.ui.orange.buttons .button:focus,
-.ui.orange.button:focus {
- background-color: @orangeFocus;
- color: @orangeTextColor;
- text-shadow: @orangeTextShadow;
-}
-.ui.orange.buttons .button:active,
-.ui.orange.button:active {
- background-color: @orangeDown;
- color: @orangeTextColor;
- text-shadow: @orangeTextShadow;
-}
-.ui.orange.buttons .active.button,
-.ui.orange.buttons .active.button:active,
-.ui.orange.active.button,
-.ui.orange.button .active.button:active {
- background-color: @orangeActive;
- color: @orangeTextColor;
- text-shadow: @orangeTextShadow;
-}
+ .ui.two.buttons > .button {
+ width: 50%;
+ }
-/* Basic */
-.ui.basic.orange.buttons .button,
-.ui.basic.orange.button {
- box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;
- color: @orange !important;
-}
-.ui.basic.orange.buttons .button:hover,
-.ui.basic.orange.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
- color: @orangeHover !important;
-}
-.ui.basic.orange.buttons .button:focus,
-.ui.basic.orange.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;
- color: @orangeHover !important;
-}
-.ui.basic.orange.buttons .active.button,
-.ui.basic.orange.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important;
- color: @orangeDown !important;
-}
-.ui.basic.orange.buttons .button:active,
-.ui.basic.orange.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
- color: @orangeDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.three.buttons {
+ width: 100%;
+ }
-/* Inverted */
-.ui.inverted.orange.buttons .button,
-.ui.inverted.orange.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
- color: @lightOrange;
-}
-.ui.inverted.orange.buttons .button:hover,
-.ui.inverted.orange.button:hover,
-.ui.inverted.orange.buttons .button:focus,
-.ui.inverted.orange.button:focus,
-.ui.inverted.orange.buttons .button.active,
-.ui.inverted.orange.button.active,
-.ui.inverted.orange.buttons .button:active,
-.ui.inverted.orange.button:active {
- box-shadow: none !important;
- color: @lightOrangeTextColor;
-}
-.ui.inverted.orange.buttons .button:hover,
-.ui.inverted.orange.button:hover {
- background-color: @lightOrangeHover;
-}
-.ui.inverted.orange.buttons .button:focus,
-.ui.inverted.orange.button:focus {
- background-color: @lightOrangeFocus;
-}
-.ui.inverted.orange.buttons .active.button,
-.ui.inverted.orange.active.button {
- background-color: @lightOrangeActive;
-}
-.ui.inverted.orange.buttons .button:active,
-.ui.inverted.orange.button:active {
- background-color: @lightOrangeDown;
-}
+ .ui.three.buttons > .button {
+ width: 33.333%;
+ }
-/* Inverted Basic */
-.ui.inverted.orange.basic.buttons .button,
-.ui.inverted.orange.buttons .basic.button,
-.ui.inverted.orange.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.orange.basic.buttons .button:hover,
-.ui.inverted.orange.buttons .basic.button:hover,
-.ui.inverted.orange.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important;
- color: @lightOrange !important;
-}
-.ui.inverted.orange.basic.buttons .button:focus,
-.ui.inverted.orange.basic.buttons .button:focus,
-.ui.inverted.orange.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important;
- color: @lightOrange !important;
-}
-.ui.inverted.orange.basic.buttons .active.button,
-.ui.inverted.orange.buttons .basic.active.button,
-.ui.inverted.orange.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important;
- color: @lightOrange !important;
-}
-.ui.inverted.orange.basic.buttons .button:active,
-.ui.inverted.orange.buttons .basic.button:active,
-.ui.inverted.orange.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;
- color: @lightOrange !important;
-}
+ .ui.four.buttons {
+ width: 100%;
+ }
-/*--- Pink ---*/
-.ui.pink.buttons .button,
-.ui.pink.button {
- background-color: @pink;
- color: @pinkTextColor;
- text-shadow: @pinkTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.pink.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.pink.buttons .button:hover,
-.ui.pink.button:hover {
- background-color: @pinkHover;
- color: @pinkTextColor;
- text-shadow: @pinkTextShadow;
-}
-.ui.pink.buttons .button:focus,
-.ui.pink.button:focus {
- background-color: @pinkFocus;
- color: @pinkTextColor;
- text-shadow: @pinkTextShadow;
-}
-.ui.pink.buttons .button:active,
-.ui.pink.button:active {
- background-color: @pinkDown;
- color: @pinkTextColor;
- text-shadow: @pinkTextShadow;
-}
-.ui.pink.buttons .active.button,
-.ui.pink.buttons .active.button:active,
-.ui.pink.active.button,
-.ui.pink.button .active.button:active {
- background-color: @pinkActive;
- color: @pinkTextColor;
- text-shadow: @pinkTextShadow;
-}
+ .ui.four.buttons > .button {
+ width: 25%;
+ }
-/* Basic */
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button {
- box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;
- color: @pink !important;
-}
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
- color: @pinkHover !important;
-}
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;
- color: @pinkHover !important;
-}
-.ui.basic.pink.buttons .active.button,
-.ui.basic.pink.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important;
- color: @pinkDown !important;
-}
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
- color: @pinkDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.five.buttons {
+ width: 100%;
+ }
-/* Inverted */
-.ui.inverted.pink.buttons .button,
-.ui.inverted.pink.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
- color: @lightPink;
-}
-.ui.inverted.pink.buttons .button:hover,
-.ui.inverted.pink.button:hover,
-.ui.inverted.pink.buttons .button:focus,
-.ui.inverted.pink.button:focus,
-.ui.inverted.pink.buttons .button.active,
-.ui.inverted.pink.button.active,
-.ui.inverted.pink.buttons .button:active,
-.ui.inverted.pink.button:active {
- box-shadow: none !important;
- color: @lightPinkTextColor;
-}
-.ui.inverted.pink.buttons .button:hover,
-.ui.inverted.pink.button:hover {
- background-color: @lightPinkHover;
-}
-.ui.inverted.pink.buttons .button:focus,
-.ui.inverted.pink.button:focus {
- background-color: @lightPinkFocus;
-}
-.ui.inverted.pink.buttons .active.button,
-.ui.inverted.pink.active.button {
- background-color: @lightPinkActive;
-}
-.ui.inverted.pink.buttons .button:active,
-.ui.inverted.pink.button:active {
- background-color: @lightPinkDown;
-}
+ .ui.five.buttons > .button {
+ width: 20%;
+ }
-/* Inverted Basic */
-.ui.inverted.pink.basic.buttons .button,
-.ui.inverted.pink.buttons .basic.button,
-.ui.inverted.pink.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.pink.basic.buttons .button:hover,
-.ui.inverted.pink.buttons .basic.button:hover,
-.ui.inverted.pink.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important;
- color: @lightPink !important;
-}
-.ui.inverted.pink.basic.buttons .button:focus,
-.ui.inverted.pink.basic.buttons .button:focus,
-.ui.inverted.pink.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important;
- color: @lightPink !important;
-}
-.ui.inverted.pink.basic.buttons .active.button,
-.ui.inverted.pink.buttons .basic.active.button,
-.ui.inverted.pink.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important;
- color: @lightPink !important;
-}
-.ui.inverted.pink.basic.buttons .button:active,
-.ui.inverted.pink.buttons .basic.button:active,
-.ui.inverted.pink.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;
- color: @lightPink !important;
-}
+ .ui.six.buttons {
+ width: 100%;
+ }
+ .ui.six.buttons > .button {
+ width: 16.666%;
+ }
-/*--- Violet ---*/
-.ui.violet.buttons .button,
-.ui.violet.button {
- background-color: @violet;
- color: @violetTextColor;
- text-shadow: @violetTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.violet.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.violet.buttons .button:hover,
-.ui.violet.button:hover {
- background-color: @violetHover;
- color: @violetTextColor;
- text-shadow: @violetTextShadow;
-}
-.ui.violet.buttons .button:focus,
-.ui.violet.button:focus {
- background-color: @violetFocus;
- color: @violetTextColor;
- text-shadow: @violetTextShadow;
-}
-.ui.violet.buttons .button:active,
-.ui.violet.button:active {
- background-color: @violetDown;
- color: @violetTextColor;
- text-shadow: @violetTextShadow;
-}
-.ui.violet.buttons .active.button,
-.ui.violet.buttons .active.button:active,
-.ui.violet.active.button,
-.ui.violet.button .active.button:active {
- background-color: @violetActive;
- color: @violetTextColor;
- text-shadow: @violetTextShadow;
-}
+ .ui.seven.buttons {
+ width: 100%;
+ }
-/* Basic */
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button {
- box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;
- color: @violet !important;
-}
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important;
- color: @violetHover !important;
-}
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;
- color: @violetHover !important;
-}
-.ui.basic.violet.buttons .active.button,
-.ui.basic.violet.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important;
- color: @violetDown !important;
-}
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important;
- color: @violetDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.seven.buttons > .button {
+ width: 14.285%;
+ }
-/* Inverted */
-.ui.inverted.violet.buttons .button,
-.ui.inverted.violet.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important;
- color: @lightViolet;
-}
-.ui.inverted.violet.buttons .button:hover,
-.ui.inverted.violet.button:hover,
-.ui.inverted.violet.buttons .button:focus,
-.ui.inverted.violet.button:focus,
-.ui.inverted.violet.buttons .button.active,
-.ui.inverted.violet.button.active,
-.ui.inverted.violet.buttons .button:active,
-.ui.inverted.violet.button:active {
- box-shadow: none !important;
- color: @lightVioletTextColor;
-}
-.ui.inverted.violet.buttons .button:hover,
-.ui.inverted.violet.button:hover {
- background-color: @lightVioletHover;
-}
-.ui.inverted.violet.buttons .button:focus,
-.ui.inverted.violet.button:focus {
- background-color: @lightVioletFocus;
-}
-.ui.inverted.violet.buttons .active.button,
-.ui.inverted.violet.active.button {
- background-color: @lightVioletActive;
-}
-.ui.inverted.violet.buttons .button:active,
-.ui.inverted.violet.button:active {
- background-color: @lightVioletDown;
-}
+ .ui.eight.buttons {
+ width: 100%;
+ }
-/* Inverted Basic */
-.ui.inverted.violet.basic.buttons .button,
-.ui.inverted.violet.buttons .basic.button,
-.ui.inverted.violet.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.violet.basic.buttons .button:hover,
-.ui.inverted.violet.buttons .basic.button:hover,
-.ui.inverted.violet.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important;
- color: @lightViolet !important;
-}
-.ui.inverted.violet.basic.buttons .button:focus,
-.ui.inverted.violet.basic.buttons .button:focus,
-.ui.inverted.violet.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important;
- color: @lightViolet !important;
-}
-.ui.inverted.violet.basic.buttons .active.button,
-.ui.inverted.violet.buttons .basic.active.button,
-.ui.inverted.violet.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important;
- color: @lightViolet !important;
-}
-.ui.inverted.violet.basic.buttons .button:active,
-.ui.inverted.violet.buttons .basic.button:active,
-.ui.inverted.violet.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important;
- color: @lightViolet !important;
-}
+ .ui.eight.buttons > .button {
+ width: 12.500%;
+ }
-/*--- Purple ---*/
-.ui.purple.buttons .button,
-.ui.purple.button {
- background-color: @purple;
- color: @purpleTextColor;
- text-shadow: @purpleTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.purple.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover {
- background-color: @purpleHover;
- color: @purpleTextColor;
- text-shadow: @purpleTextShadow;
-}
-.ui.purple.buttons .button:focus,
-.ui.purple.button:focus {
- background-color: @purpleFocus;
- color: @purpleTextColor;
- text-shadow: @purpleTextShadow;
-}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
- background-color: @purpleDown;
- color: @purpleTextColor;
- text-shadow: @purpleTextShadow;
-}
-.ui.purple.buttons .active.button,
-.ui.purple.buttons .active.button:active,
-.ui.purple.active.button,
-.ui.purple.button .active.button:active {
- background-color: @purpleActive;
- color: @purpleTextColor;
- text-shadow: @purpleTextShadow;
-}
+ .ui.nine.buttons {
+ width: 100%;
+ }
-/* Basic */
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button {
- box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;
- color: @purple !important;
-}
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
- color: @purpleHover !important;
-}
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;
- color: @purpleHover !important;
-}
-.ui.basic.purple.buttons .active.button,
-.ui.basic.purple.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important;
- color: @purpleDown !important;
-}
-.ui.basic.purple.buttons .button:active,
-.ui.basic.purple.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
- color: @purpleDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.nine.buttons > .button {
+ width: 11.11%;
+ }
-/* Inverted */
-.ui.inverted.purple.buttons .button,
-.ui.inverted.purple.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
- color: @lightPurple;
-}
-.ui.inverted.purple.buttons .button:hover,
-.ui.inverted.purple.button:hover,
-.ui.inverted.purple.buttons .button:focus,
-.ui.inverted.purple.button:focus,
-.ui.inverted.purple.buttons .button.active,
-.ui.inverted.purple.button.active,
-.ui.inverted.purple.buttons .button:active,
-.ui.inverted.purple.button:active {
- box-shadow: none !important;
- color: @lightPurpleTextColor;
-}
-.ui.inverted.purple.buttons .button:hover,
-.ui.inverted.purple.button:hover {
- background-color: @lightPurpleHover;
-}
-.ui.inverted.purple.buttons .button:focus,
-.ui.inverted.purple.button:focus {
- background-color: @lightPurpleFocus;
-}
-.ui.inverted.purple.buttons .active.button,
-.ui.inverted.purple.active.button {
- background-color: @lightPurpleActive;
-}
-.ui.inverted.purple.buttons .button:active,
-.ui.inverted.purple.button:active {
- background-color: @lightPurpleDown;
-}
+ .ui.ten.buttons {
+ width: 100%;
+ }
-/* Inverted Basic */
-.ui.inverted.purple.basic.buttons .button,
-.ui.inverted.purple.buttons .basic.button,
-.ui.inverted.purple.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.purple.basic.buttons .button:hover,
-.ui.inverted.purple.buttons .basic.button:hover,
-.ui.inverted.purple.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important;
- color: @lightPurple !important;
-}
-.ui.inverted.purple.basic.buttons .button:focus,
-.ui.inverted.purple.basic.buttons .button:focus,
-.ui.inverted.purple.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important;
- color: @lightPurple !important;
-}
-.ui.inverted.purple.basic.buttons .active.button,
-.ui.inverted.purple.buttons .basic.active.button,
-.ui.inverted.purple.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important;
- color: @lightPurple !important;
-}
-.ui.inverted.purple.basic.buttons .button:active,
-.ui.inverted.purple.buttons .basic.button:active,
-.ui.inverted.purple.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;
- color: @lightPurple !important;
-}
+ .ui.ten.buttons > .button {
+ width: 10%;
+ }
-/*--- Red ---*/
-.ui.red.buttons .button,
-.ui.red.button {
- background-color: @red;
- color: @redTextColor;
- text-shadow: @redTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.red.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover {
- background-color: @redHover;
- color: @redTextColor;
- text-shadow: @redTextShadow;
-}
-.ui.red.buttons .button:focus,
-.ui.red.button:focus {
- background-color: @redFocus;
- color: @redTextColor;
- text-shadow: @redTextShadow;
-}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
- background-color: @redDown;
- color: @redTextColor;
- text-shadow: @redTextShadow;
-}
-.ui.red.buttons .active.button,
-.ui.red.buttons .active.button:active,
-.ui.red.active.button,
-.ui.red.button .active.button:active {
- background-color: @redActive;
- color: @redTextColor;
- text-shadow: @redTextShadow;
-}
+ .ui.eleven.buttons {
+ width: 100%;
+ }
-/* Basic */
-.ui.basic.red.buttons .button,
-.ui.basic.red.button {
- box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;
- color: @red !important;
-}
-.ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
- color: @redHover !important;
-}
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;
- color: @redHover !important;
-}
-.ui.basic.red.buttons .active.button,
-.ui.basic.red.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important;
- color: @redDown !important;
-}
-.ui.basic.red.buttons .button:active,
-.ui.basic.red.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
- color: @redDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.eleven.buttons > .button {
+ width: 9.09%;
+ }
-/* Inverted */
-.ui.inverted.red.buttons .button,
-.ui.inverted.red.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
- color: @lightRed;
-}
-.ui.inverted.red.buttons .button:hover,
-.ui.inverted.red.button:hover,
-.ui.inverted.red.buttons .button:focus,
-.ui.inverted.red.button:focus,
-.ui.inverted.red.buttons .button.active,
-.ui.inverted.red.button.active,
-.ui.inverted.red.buttons .button:active,
-.ui.inverted.red.button:active {
- box-shadow: none !important;
- color: @lightRedTextColor;
-}
-.ui.inverted.red.buttons .button:hover,
-.ui.inverted.red.button:hover {
- background-color: @lightRedHover;
-}
-.ui.inverted.red.buttons .button:focus,
-.ui.inverted.red.button:focus {
- background-color: @lightRedFocus;
-}
-.ui.inverted.red.buttons .active.button,
-.ui.inverted.red.active.button {
- background-color: @lightRedActive;
-}
-.ui.inverted.red.buttons .button:active,
-.ui.inverted.red.button:active {
- background-color: @lightRedDown;
-}
+ .ui.twelve.buttons {
+ width: 100%;
+ }
-/* Inverted Basic */
-.ui.inverted.red.basic.buttons .button,
-.ui.inverted.red.buttons .basic.button,
-.ui.inverted.red.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.red.basic.buttons .button:hover,
-.ui.inverted.red.buttons .basic.button:hover,
-.ui.inverted.red.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important;
- color: @lightRed !important;
-}
-.ui.inverted.red.basic.buttons .button:focus,
-.ui.inverted.red.basic.buttons .button:focus,
-.ui.inverted.red.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important;
- color: @lightRed !important;
-}
-.ui.inverted.red.basic.buttons .active.button,
-.ui.inverted.red.buttons .basic.active.button,
-.ui.inverted.red.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important;
- color: @lightRed !important;
-}
-.ui.inverted.red.basic.buttons .button:active,
-.ui.inverted.red.buttons .basic.button:active,
-.ui.inverted.red.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;
- color: @lightRed !important;
-}
+ .ui.twelve.buttons > .button {
+ width: 8.3333%;
+ }
+ /* Fluid Vertical Buttons */
+ .ui.fluid.vertical.buttons,
+ .ui.fluid.vertical.buttons > .button {
+ display: flex;
+ width: auto;
+ justify-content: center;
+ }
-/*--- Teal ---*/
-.ui.teal.buttons .button,
-.ui.teal.button {
- background-color: @teal;
- color: @tealTextColor;
- text-shadow: @tealTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.teal.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover {
- background-color: @tealHover;
- color: @tealTextColor;
- text-shadow: @tealTextShadow;
-}
-.ui.teal.buttons .button:focus,
-.ui.teal.button:focus {
- background-color: @tealFocus;
- color: @tealTextColor;
- text-shadow: @tealTextShadow;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
- background-color: @tealDown;
- color: @tealTextColor;
- text-shadow: @tealTextShadow;
-}
-.ui.teal.buttons .active.button,
-.ui.teal.buttons .active.button:active,
-.ui.teal.active.button,
-.ui.teal.button .active.button:active {
- background-color: @tealActive;
- color: @tealTextColor;
- text-shadow: @tealTextShadow;
-}
+ .ui.two.vertical.buttons > .button {
+ height: 50%;
+ }
-/* Basic */
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button {
- box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;
- color: @teal !important;
-}
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
- color: @tealHover !important;
-}
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;
- color: @tealHover !important;
-}
-.ui.basic.teal.buttons .active.button,
-.ui.basic.teal.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important;
- color: @tealDown !important;
-}
-.ui.basic.teal.buttons .button:active,
-.ui.basic.teal.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
- color: @tealDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.three.vertical.buttons > .button {
+ height: 33.333%;
+ }
-/* Inverted */
-.ui.inverted.teal.buttons .button,
-.ui.inverted.teal.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
- color: @lightTeal;
-}
-.ui.inverted.teal.buttons .button:hover,
-.ui.inverted.teal.button:hover,
-.ui.inverted.teal.buttons .button:focus,
-.ui.inverted.teal.button:focus,
-.ui.inverted.teal.buttons .button.active,
-.ui.inverted.teal.button.active,
-.ui.inverted.teal.buttons .button:active,
-.ui.inverted.teal.button:active {
- box-shadow: none !important;
- color: @lightTealTextColor;
-}
-.ui.inverted.teal.buttons .button:hover,
-.ui.inverted.teal.button:hover {
- background-color: @lightTealHover;
-}
-.ui.inverted.teal.buttons .button:focus,
-.ui.inverted.teal.button:focus {
- background-color: @lightTealFocus;
-}
-.ui.inverted.teal.buttons .active.button,
-.ui.inverted.teal.active.button {
- background-color: @lightTealActive;
-}
-.ui.inverted.teal.buttons .button:active,
-.ui.inverted.teal.button:active {
- background-color: @lightTealDown;
-}
+ .ui.four.vertical.buttons > .button {
+ height: 25%;
+ }
-/* Inverted Basic */
-.ui.inverted.teal.basic.buttons .button,
-.ui.inverted.teal.buttons .basic.button,
-.ui.inverted.teal.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.teal.basic.buttons .button:hover,
-.ui.inverted.teal.buttons .basic.button:hover,
-.ui.inverted.teal.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important;
- color: @lightTeal !important;
-}
-.ui.inverted.teal.basic.buttons .button:focus,
-.ui.inverted.teal.basic.buttons .button:focus,
-.ui.inverted.teal.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important;
- color: @lightTeal !important;
-}
-.ui.inverted.teal.basic.buttons .active.button,
-.ui.inverted.teal.buttons .basic.active.button,
-.ui.inverted.teal.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important;
- color: @lightTeal !important;
-}
-.ui.inverted.teal.basic.buttons .button:active,
-.ui.inverted.teal.buttons .basic.button:active,
-.ui.inverted.teal.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;
- color: @lightTeal !important;
-}
+ .ui.five.vertical.buttons > .button {
+ height: 20%;
+ }
+ .ui.six.vertical.buttons > .button {
+ height: 16.666%;
+ }
-/*--- Olive ---*/
-.ui.olive.buttons .button,
-.ui.olive.button {
- background-color: @olive;
- color: @oliveTextColor;
- text-shadow: @oliveTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.olive.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.olive.buttons .button:hover,
-.ui.olive.button:hover {
- background-color: @oliveHover;
- color: @oliveTextColor;
- text-shadow: @oliveTextShadow;
-}
-.ui.olive.buttons .button:focus,
-.ui.olive.button:focus {
- background-color: @oliveFocus;
- color: @oliveTextColor;
- text-shadow: @oliveTextShadow;
-}
-.ui.olive.buttons .button:active,
-.ui.olive.button:active {
- background-color: @oliveDown;
- color: @oliveTextColor;
- text-shadow: @oliveTextShadow;
-}
-.ui.olive.buttons .active.button,
-.ui.olive.buttons .active.button:active,
-.ui.olive.active.button,
-.ui.olive.button .active.button:active {
- background-color: @oliveActive;
- color: @oliveTextColor;
- text-shadow: @oliveTextShadow;
-}
+ .ui.seven.vertical.buttons > .button {
+ height: 14.285%;
+ }
-/* Basic */
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button {
- box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;
- color: @olive !important;
-}
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important;
- color: @oliveHover !important;
-}
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;
- color: @oliveHover !important;
-}
-.ui.basic.olive.buttons .active.button,
-.ui.basic.olive.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important;
- color: @oliveDown !important;
-}
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important;
- color: @oliveDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ .ui.eight.vertical.buttons > .button {
+ height: 12.500%;
+ }
-/* Inverted */
-.ui.inverted.olive.buttons .button,
-.ui.inverted.olive.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important;
- color: @lightOlive;
-}
-.ui.inverted.olive.buttons .button:hover,
-.ui.inverted.olive.button:hover,
-.ui.inverted.olive.buttons .button:focus,
-.ui.inverted.olive.button:focus,
-.ui.inverted.olive.buttons .button.active,
-.ui.inverted.olive.button.active,
-.ui.inverted.olive.buttons .button:active,
-.ui.inverted.olive.button:active {
- box-shadow: none !important;
- color: @lightOliveTextColor;
-}
-.ui.inverted.olive.buttons .button:hover,
-.ui.inverted.olive.button:hover {
- background-color: @lightOliveHover;
-}
-.ui.inverted.olive.buttons .button:focus,
-.ui.inverted.olive.button:focus {
- background-color: @lightOliveFocus;
-}
-.ui.inverted.olive.buttons .active.button,
-.ui.inverted.olive.active.button {
- background-color: @lightOliveActive;
-}
-.ui.inverted.olive.buttons .button:active,
-.ui.inverted.olive.button:active {
- background-color: @lightOliveDown;
-}
+ .ui.nine.vertical.buttons > .button {
+ height: 11.11%;
+ }
-/* Inverted Basic */
-.ui.inverted.olive.basic.buttons .button,
-.ui.inverted.olive.buttons .basic.button,
-.ui.inverted.olive.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.olive.basic.buttons .button:hover,
-.ui.inverted.olive.buttons .basic.button:hover,
-.ui.inverted.olive.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important;
- color: @lightOlive !important;
-}
-.ui.inverted.olive.basic.buttons .button:focus,
-.ui.inverted.olive.basic.buttons .button:focus,
-.ui.inverted.olive.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important;
- color: @lightOlive !important;
-}
-.ui.inverted.olive.basic.buttons .active.button,
-.ui.inverted.olive.buttons .basic.active.button,
-.ui.inverted.olive.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important;
- color: @lightOlive !important;
-}
-.ui.inverted.olive.basic.buttons .button:active,
-.ui.inverted.olive.buttons .basic.button:active,
-.ui.inverted.olive.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important;
- color: @lightOlive !important;
-}
+ .ui.ten.vertical.buttons > .button {
+ height: 10%;
+ }
-/*--- Yellow ---*/
-.ui.yellow.buttons .button,
-.ui.yellow.button {
- background-color: @yellow;
- color: @yellowTextColor;
- text-shadow: @yellowTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.yellow.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.yellow.buttons .button:hover,
-.ui.yellow.button:hover {
- background-color: @yellowHover;
- color: @yellowTextColor;
- text-shadow: @yellowTextShadow;
-}
-.ui.yellow.buttons .button:focus,
-.ui.yellow.button:focus {
- background-color: @yellowFocus;
- color: @yellowTextColor;
- text-shadow: @yellowTextShadow;
-}
-.ui.yellow.buttons .button:active,
-.ui.yellow.button:active {
- background-color: @yellowDown;
- color: @yellowTextColor;
- text-shadow: @yellowTextShadow;
-}
-.ui.yellow.buttons .active.button,
-.ui.yellow.buttons .active.button:active,
-.ui.yellow.active.button,
-.ui.yellow.button .active.button:active {
- background-color: @yellowActive;
- color: @yellowTextColor;
- text-shadow: @yellowTextShadow;
-}
+ .ui.eleven.vertical.buttons > .button {
+ height: 9.09%;
+ }
-/* Basic */
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button {
- box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;
- color: @yellow !important;
-}
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
- color: @yellowHover !important;
-}
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;
- color: @yellowHover !important;
-}
-.ui.basic.yellow.buttons .active.button,
-.ui.basic.yellow.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important;
- color: @yellowDown !important;
-}
-.ui.basic.yellow.buttons .button:active,
-.ui.basic.yellow.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
- color: @yellowDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
+ .ui.twelve.vertical.buttons > .button {
+ height: 8.3333%;
+ }
}
-/* Inverted */
-.ui.inverted.yellow.buttons .button,
-.ui.inverted.yellow.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
- color: @lightYellow;
-}
-.ui.inverted.yellow.buttons .button:hover,
-.ui.inverted.yellow.button:hover,
-.ui.inverted.yellow.buttons .button:focus,
-.ui.inverted.yellow.button:focus,
-.ui.inverted.yellow.buttons .button.active,
-.ui.inverted.yellow.button.active,
-.ui.inverted.yellow.buttons .button:active,
-.ui.inverted.yellow.button:active {
- box-shadow: none !important;
- color: @lightYellowTextColor;
-}
-.ui.inverted.yellow.buttons .button:hover,
-.ui.inverted.yellow.button:hover {
- background-color: @lightYellowHover;
-}
-.ui.inverted.yellow.buttons .button:focus,
-.ui.inverted.yellow.button:focus {
- background-color: @lightYellowFocus;
-}
-.ui.inverted.yellow.buttons .active.button,
-.ui.inverted.yellow.active.button {
- background-color: @lightYellowActive;
-}
-.ui.inverted.yellow.buttons .button:active,
-.ui.inverted.yellow.button:active {
- background-color: @lightYellowDown;
-}
+/*-------------------
+ Colors
+--------------------*/
-/* Inverted Basic */
-.ui.inverted.yellow.basic.buttons .button,
-.ui.inverted.yellow.buttons .basic.button,
-.ui.inverted.yellow.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.yellow.basic.buttons .button:hover,
-.ui.inverted.yellow.buttons .basic.button:hover,
-.ui.inverted.yellow.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important;
- color: @lightYellow !important;
-}
-.ui.inverted.yellow.basic.buttons .button:focus,
-.ui.inverted.yellow.basic.buttons .button:focus,
-.ui.inverted.yellow.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important;
- color: @lightYellow !important;
-}
-.ui.inverted.yellow.basic.buttons .active.button,
-.ui.inverted.yellow.buttons .basic.active.button,
-.ui.inverted.yellow.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important;
- color: @lightYellow !important;
-}
-.ui.inverted.yellow.basic.buttons .button:active,
-.ui.inverted.yellow.buttons .basic.button:active,
-.ui.inverted.yellow.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;
- color: @lightYellow !important;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @h: @colors[@@color][hover];
+ @f: @colors[@@color][focus];
+ @d: @colors[@@color][down];
+ @a: @colors[@@color][active];
+ @t: @colors[@@color][text];
+ @s: @colors[@@color][shadow];
+ @l: @colors[@@color][light];
+ @lh: @colors[@@color][lightHover];
+ @lf: @colors[@@color][lightFocus];
+ @ld: @colors[@@color][lightDown];
+ @la: @colors[@@color][lightActive];
+ @lt: @colors[@@color][lightText];
+ @ls: @colors[@@color][lightShadow];
+ @ty: @colors[@@color][tertiary];
+ @tyh: @colors[@@color][tertiaryHover];
+ @tyf: @colors[@@color][tertiaryFocus];
+ @tya: @colors[@@color][tertiaryActive];
+ @isDark: @colors[@@color][isDark];
+ @isVeryDark: @colors[@@color][isVeryDark];
+
+ .ui.@{color}.buttons .button,
+ .ui.@{color}.button {
+ background-color: @c;
+ color: @t;
+ text-shadow: @s;
+ background-image: @coloredBackgroundImage;
+ }
+ .ui.@{color}.button {
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.@{color}.buttons .button:hover,
+ .ui.@{color}.button:hover {
+ background-color: @h;
+ color: @t;
+ text-shadow: @s;
+ }
+ .ui.@{color}.buttons .button:focus,
+ .ui.@{color}.button:focus {
+ background-color: @f;
+ color: @t;
+ text-shadow: @s;
+ }
+ .ui.@{color}.buttons .button:active,
+ .ui.@{color}.button:active {
+ background-color: @d;
+ color: @t;
+ text-shadow: @s;
+ }
+ .ui.@{color}.buttons .active.button,
+ .ui.@{color}.buttons .active.button:active,
+ .ui.@{color}.active.button,
+ .ui.@{color}.button .active.button:active {
+ background-color: @a;
+ color: @t;
+ text-shadow: @s;
+ }
+ & when (@variationButtonBasic) {
+ /* Basic */
+ .ui.basic.@{color}.buttons .button,
+ .ui.basic.@{color}.button {
+ background: transparent;
+ box-shadow: 0 0 0 @basicBorderSize @c inset ;
+ color: @c ;
+ }
+ .ui.basic.@{color}.buttons .button:hover,
+ .ui.basic.@{color}.button:hover {
+ background: transparent ;
+ box-shadow: 0 0 0 @basicColoredBorderSize @h inset ;
+ color: @h ;
+ }
+ .ui.basic.@{color}.buttons .button:focus,
+ .ui.basic.@{color}.button:focus {
+ background: transparent ;
+ box-shadow: 0 0 0 @basicColoredBorderSize @f inset ;
+ color: @h ;
+ }
+ .ui.basic.@{color}.buttons .active.button,
+ .ui.basic.@{color}.active.button {
+ background: transparent ;
+ box-shadow: 0 0 0 @basicColoredBorderSize @a inset ;
+ color: @d ;
+ }
+ .ui.basic.@{color}.buttons .button:active,
+ .ui.basic.@{color}.button:active {
+ box-shadow: 0 0 0 @basicColoredBorderSize @d inset ;
+ color: @d ;
+ }
+
+ .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+ }
+ }
+ & when (@variationButtonInverted) {
+ /* Inverted */
+ .ui.inverted.@{color}.buttons .button,
+ .ui.inverted.@{color}.button {
+ background-color: transparent;
+
+ & when (@isDark) {
+ box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ;
+ color: @invertedTextColor;
+ }
+
+ & when not (@isDark) {
+ box-shadow: 0 0 0 @invertedBorderSize @l inset ;
+ color: @l;
+ }
+ }
+ .ui.inverted.@{color}.buttons .button:hover,
+ .ui.inverted.@{color}.button:hover,
+ .ui.inverted.@{color}.buttons .button:focus,
+ .ui.inverted.@{color}.button:focus,
+ .ui.inverted.@{color}.buttons .button.active,
+ .ui.inverted.@{color}.button.active,
+ .ui.inverted.@{color}.buttons .button:active,
+ .ui.inverted.@{color}.button:active {
+ box-shadow: none ;
+ color: @lt;
+ }
+ .ui.inverted.@{color}.buttons .button:hover,
+ .ui.inverted.@{color}.button:hover {
+ background-color: @lh;
+ }
+ .ui.inverted.@{color}.buttons .button:focus,
+ .ui.inverted.@{color}.button:focus {
+ background-color: @lf;
+ }
+ .ui.inverted.@{color}.buttons .active.button,
+ .ui.inverted.@{color}.active.button {
+ background-color: @la;
+ }
+ .ui.inverted.@{color}.buttons .button:active,
+ .ui.inverted.@{color}.button:active {
+ background-color: @ld;
+ }
+
+ /* Inverted Basic */
+ .ui.inverted.@{color}.basic.buttons .button,
+ .ui.inverted.@{color}.buttons .basic.button,
+ .ui.inverted.@{color}.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow ;
+ color: @white ;
+ }
+ .ui.inverted.@{color}.basic.buttons .button:hover,
+ .ui.inverted.@{color}.buttons .basic.button:hover,
+ .ui.inverted.@{color}.basic.button:hover {
+ box-shadow: 0 0 0 @invertedBorderSize @lh inset ;
+
+ & when (@isDark) {
+ color: @white ;
+ }
+
+ & when not (@isDark) {
+ color: @l ;
+ }
+ }
+ .ui.inverted.@{color}.basic.buttons .button:focus,
+ .ui.inverted.@{color}.basic.buttons .button:focus,
+ .ui.inverted.@{color}.basic.button:focus {
+ box-shadow: 0 0 0 @invertedBorderSize @lf inset ;
+ color: @l ;
+ }
+ .ui.inverted.@{color}.basic.buttons .active.button,
+ .ui.inverted.@{color}.buttons .basic.active.button,
+ .ui.inverted.@{color}.basic.active.button {
+ box-shadow: 0 0 0 @invertedBorderSize @la inset ;
+
+ & when (@isDark) {
+ color: @white ;
+ }
+
+ & when not (@isDark) {
+ color: @l ;
+ }
+ }
+ & when (@variationButtonBasic) {
+ .ui.inverted.@{color}.basic.buttons .button:active,
+ .ui.inverted.@{color}.buttons .basic.button:active,
+ .ui.inverted.@{color}.basic.button:active {
+ box-shadow: 0 0 0 @invertedBorderSize @ld inset;
+
+ & when (@isDark) {
+ color: @white;
+ }
+
+ & when not (@isDark) {
+ color: @l;
+ }
+ }
+ }
+ }
-/*-------------------
- Primary
---------------------*/
+ & when (@variationButtonTertiary) {
+ /* Tertiary */
-/*--- Standard ---*/
-.ui.primary.buttons .button,
-.ui.primary.button {
- background-color: @primaryColor;
- color: @primaryTextColor;
- text-shadow: @primaryTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.primary.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.primary.buttons .button:hover,
-.ui.primary.button:hover {
- background-color: @primaryColorHover;
- color: @primaryTextColor;
- text-shadow: @primaryTextShadow;
-}
-.ui.primary.buttons .button:focus,
-.ui.primary.button:focus {
- background-color: @primaryColorFocus;
- color: @primaryTextColor;
- text-shadow: @primaryTextShadow;
-}
-.ui.primary.buttons .button:active,
-.ui.primary.button:active {
- background-color: @primaryColorDown;
- color: @primaryTextColor;
- text-shadow: @primaryTextShadow;
-}
-.ui.primary.buttons .active.button,
-.ui.primary.buttons .active.button:active,
-.ui.primary.active.button,
-.ui.primary.button .active.button:active {
- background-color: @primaryColorActive;
- color: @primaryTextColor;
- text-shadow: @primaryTextShadow;
-}
+ .ui.tertiary.@{color}.buttons .button,
+ .ui.tertiary.@{color}.buttons .tertiary.button,
+ .ui.tertiary.@{color}.button {
+ background: transparent;
-/* Basic */
-.ui.basic.primary.buttons .button,
-.ui.basic.primary.button {
- box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important;
- color: @primaryColor !important;
-}
-.ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important;
- color: @primaryColorHover !important;
-}
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important;
- color: @primaryColorHover !important;
-}
-.ui.basic.primary.buttons .active.button,
-.ui.basic.primary.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important;
- color: @primaryColorDown !important;
-}
-.ui.basic.primary.buttons .button:active,
-.ui.basic.primary.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important;
- color: @primaryColorDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
-/* Inverted */
-.ui.inverted.primary.buttons .button,
-.ui.inverted.primary.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColor inset !important;
- color: @lightPrimaryColor;
-}
-.ui.inverted.primary.buttons .button:hover,
-.ui.inverted.primary.button:hover,
-.ui.inverted.primary.buttons .button:focus,
-.ui.inverted.primary.button:focus,
-.ui.inverted.primary.buttons .button.active,
-.ui.inverted.primary.button.active,
-.ui.inverted.primary.buttons .button:active,
-.ui.inverted.primary.button:active {
- box-shadow: none !important;
- color: @lightPrimaryTextColor;
-}
-.ui.inverted.primary.buttons .button:hover,
-.ui.inverted.primary.button:hover {
- background-color: @lightPrimaryColorHover;
-}
-.ui.inverted.primary.buttons .button:focus,
-.ui.inverted.primary.button:focus {
- background-color: @lightPrimaryColorFocus;
-}
-.ui.inverted.primary.buttons .active.button,
-.ui.inverted.primary.active.button {
- background-color: @lightPrimaryColorActive;
-}
-.ui.inverted.primary.buttons .button:active,
-.ui.inverted.primary.button:active {
- background-color: @lightPrimaryColorDown;
-}
-/* Inverted Basic */
-.ui.inverted.primary.basic.buttons .button,
-.ui.inverted.primary.buttons .basic.button,
-.ui.inverted.primary.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.primary.basic.buttons .button:hover,
-.ui.inverted.primary.buttons .basic.button:hover,
-.ui.inverted.primary.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorHover inset !important;
- color: @lightPrimaryColor !important;
-}
-.ui.inverted.primary.basic.buttons .button:focus,
-.ui.inverted.primary.basic.buttons .button:focus,
-.ui.inverted.primary.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorFocus inset !important;
- color: @lightPrimaryColor !important;
-}
-.ui.inverted.primary.basic.buttons .active.button,
-.ui.inverted.primary.buttons .basic.active.button,
-.ui.inverted.primary.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorActive inset !important;
- color: @lightPrimaryColor !important;
-}
-.ui.inverted.primary.basic.buttons .button:active,
-.ui.inverted.primary.buttons .basic.button:active,
-.ui.inverted.primary.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorDown inset !important;
- color: @lightPrimaryColor !important;
-}
+ & when (@tertiaryWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @ty;
+ }
-/*-------------------
- Secondary
---------------------*/
+ & when (@tertiaryWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @ty;
+ }
-/* Standard */
-.ui.secondary.buttons .button,
-.ui.secondary.button {
- background-color: @secondaryColor;
- color: @secondaryTextColor;
- text-shadow: @secondaryTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.secondary.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.secondary.buttons .button:hover,
-.ui.secondary.button:hover {
- background-color: @secondaryColorHover;
- color: @secondaryTextColor;
- text-shadow: @secondaryTextShadow;
-}
-.ui.secondary.buttons .button:focus,
-.ui.secondary.button:focus {
- background-color: @secondaryColorFocus;
- color: @secondaryTextColor;
- text-shadow: @secondaryTextShadow;
-}
-.ui.secondary.buttons .button:active,
-.ui.secondary.button:active {
- background-color: @secondaryColorDown;
- color: @secondaryTextColor;
- text-shadow: @secondaryTextShadow;
-}
-.ui.secondary.buttons .active.button,
-.ui.secondary.buttons .active.button:active,
-.ui.secondary.active.button,
-.ui.secondary.button .active.button:active {
- background-color: @secondaryColorActive;
- color: @secondaryTextColor;
- text-shadow: @secondaryTextShadow;
-}
+ & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){
+ box-shadow: none;
+ }
-/* Basic */
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button {
- box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important;
- color: @secondaryColor !important;
-}
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important;
- color: @secondaryColorHover !important;
-}
-.ui.basic.secondary.buttons .button:focus,
-.ui.basic.secondary.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important;
- color: @secondaryColorHover !important;
-}
-.ui.basic.secondary.buttons .active.button,
-.ui.basic.secondary.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important;
- color: @secondaryColorDown !important;
-}
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important;
- color: @secondaryColorDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+ color: @c;
+ }
-/* Inverted */
-.ui.inverted.secondary.buttons .button,
-.ui.inverted.secondary.button {
- background-color: transparent;
- box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColor inset !important;
- color: @lightSecondaryColor;
-}
-.ui.inverted.secondary.buttons .button:hover,
-.ui.inverted.secondary.button:hover,
-.ui.inverted.secondary.buttons .button:focus,
-.ui.inverted.secondary.button:focus,
-.ui.inverted.secondary.buttons .button.active,
-.ui.inverted.secondary.button.active,
-.ui.inverted.secondary.buttons .button:active,
-.ui.inverted.secondary.button:active {
- box-shadow: none !important;
- color: @lightSecondaryTextColor;
-}
-.ui.inverted.secondary.buttons .button:hover,
-.ui.inverted.secondary.button:hover {
- background-color: @lightSecondaryColorHover;
-}
-.ui.inverted.secondary.buttons .button:focus,
-.ui.inverted.secondary.button:focus {
- background-color: @lightSecondaryColorFocus;
-}
-.ui.inverted.secondary.buttons .active.button,
-.ui.inverted.secondary.active.button {
- background-color: @lightSecondaryColorActive;
-}
-.ui.inverted.secondary.buttons .button:active,
-.ui.inverted.secondary.button:active {
- background-color: @lightSecondaryColorDown;
-}
+ .ui.tertiary.@{color}.buttons .button:hover,
+ .ui.tertiary.@{color}.buttons button:hover,
+ .ui.tertiary.@{color}.button:hover {
-/* Inverted Basic */
-.ui.inverted.secondary.basic.buttons .button,
-.ui.inverted.secondary.buttons .basic.button,
-.ui.inverted.secondary.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow !important;
- color: @white !important;
-}
-.ui.inverted.secondary.basic.buttons .button:hover,
-.ui.inverted.secondary.buttons .basic.button:hover,
-.ui.inverted.secondary.basic.button:hover {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorHover inset !important;
- color: @lightSecondaryColor !important;
-}
-.ui.inverted.secondary.basic.buttons .button:focus,
-.ui.inverted.secondary.basic.buttons .button:focus,
-.ui.inverted.secondary.basic.button:focus {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorFocus inset !important;
- color: @lightSecondaryColor !important;
-}
-.ui.inverted.secondary.basic.buttons .active.button,
-.ui.inverted.secondary.buttons .basic.active.button,
-.ui.inverted.secondary.basic.active.button {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorActive inset !important;
- color: @lightSecondaryColor !important;
-}
-.ui.inverted.secondary.basic.buttons .button:active,
-.ui.inverted.secondary.buttons .basic.button:active,
-.ui.inverted.secondary.basic.button:active {
- box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorDown inset !important;
- color: @lightSecondaryColor !important;
+
+
+ & when (@tertiaryHoverWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh;
+ }
+
+ & when (@tertiaryHoverWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tyh;
+ }
+
+ & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) {
+ box-shadow: none;
+ }
+
+
+ color: @tyh;
+ }
+
+ .ui.tertiary.@{color}.buttons .button:focus,
+ .ui.tertiary.@{color}.buttons .tertiary.button:focus,
+ .ui.tertiary.@{color}.button:focus {
+
+
+
+
+ & when (@tertiaryFocusWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf;
+ }
+
+ & when (@tertiaryFocusWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tyf;
+ }
+
+ & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) {
+ box-shadow: none;
+ }
+
+
+ color: @tyf;
+ }
+
+ .ui.tertiary.@{color}.buttons .active.button,
+ .ui.tertiary.@{color}.buttons .tertiary.active.button,
+ .ui.tertiary.@{color}.active.button,
+ .ui.tertiary.@{color}.buttons .button:active,
+ .ui.tertiary.@{color}.buttons .tertiary.button:active,
+ .ui.tertiary.@{color}.button:active {
+
+
+
+ & when (@tertiaryActiveWithUnderline = true) {
+ box-shadow: inset 0 -@tertiaryLineHeight 0 @tya;
+ }
+
+ & when (@tertiaryActiveWithOverline = true) {
+ box-shadow: inset 0 @tertiaryLineHeight 0 @tya;
+ }
+
+ & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) {
+ box-shadow: none;
+ }
+
+ color: @a;
+ }
+ }
+})
+
+.addConsequence(@consequence) {
+
+ @_backgroundColor: "@{consequence}Color";
+ @_backgroundColorHover: "@{consequence}ColorHover";
+ @_backgroundColorFocus: "@{consequence}ColorFocus";
+ @_backgroundColorDown: "@{consequence}ColorDown";
+ @_backgroundColorActive: "@{consequence}ColorActive";
+ @_textColor: "@{consequence}TextColor";
+ @_textShadow: "@{consequence}TextShadow";
+
+ /* Standard */
+ .ui.@{consequence}.buttons .button,
+ .ui.@{consequence}.button {
+ background-color: @@_backgroundColor;
+ color: @@_textColor;
+ text-shadow: @@_textShadow;
+ background-image: @coloredBackgroundImage;
+ }
+ .ui.@{consequence}.button {
+ box-shadow: @coloredBoxShadow;
+ }
+ .ui.@{consequence}.buttons .button:hover,
+ .ui.@{consequence}.button:hover {
+ background-color: @@_backgroundColorHover;
+ color: @@_textColor;
+ text-shadow: @@_textShadow;
+ }
+ .ui.@{consequence}.buttons .button:focus,
+ .ui.@{consequence}.button:focus {
+ background-color: @@_backgroundColorFocus;
+ color: @@_textColor;
+ text-shadow: @@_textShadow;
+ }
+ .ui.@{consequence}.buttons .button:active,
+ .ui.@{consequence}.button:active {
+ background-color: @@_backgroundColorDown;
+ color: @@_textColor;
+ text-shadow: @@_textShadow;
+ }
+ .ui.@{consequence}.buttons .active.button,
+ .ui.@{consequence}.buttons .active.button:active,
+ .ui.@{consequence}.active.button,
+ .ui.@{consequence}.button .active.button:active {
+ background-color: @@_backgroundColorActive;
+ color: @@_textColor;
+ text-shadow: @@_textShadow;
+ }
+ & when (@variationButtonBasic) {
+ /* Basic */
+ .ui.basic.@{consequence}.buttons .button,
+ .ui.basic.@{consequence}.button {
+ background: transparent;
+ box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
+ color: @@_backgroundColor;
+ }
+ .ui.basic.@{consequence}.buttons .button:hover,
+ .ui.basic.@{consequence}.button:hover {
+ background: transparent;
+ box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
+ color: @@_backgroundColorHover;
+ }
+ .ui.basic.@{consequence}.buttons .button:focus,
+ .ui.basic.@{consequence}.button:focus {
+ background: transparent;
+ box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
+ color: @@_backgroundColorHover;
+ }
+ .ui.basic.@{consequence}.buttons .active.button,
+ .ui.basic.@{consequence}.active.button {
+ background: transparent;
+ box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
+ color: @@_backgroundColorDown;
+ }
+ .ui.basic.@{consequence}.buttons .button:active,
+ .ui.basic.@{consequence}.button:active {
+ box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
+ color: @@_backgroundColorDown;
+ }
+ .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+ }
+ }
}
/*---------------
Positive
----------------*/
-/* Standard */
-.ui.positive.buttons .button,
-.ui.positive.button {
- background-color: @positiveColor;
- color: @positiveTextColor;
- text-shadow: @positiveTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.positive.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
- background-color: @positiveColorHover;
- color: @positiveTextColor;
- text-shadow: @positiveTextShadow;
-}
-.ui.positive.buttons .button:focus,
-.ui.positive.button:focus {
- background-color: @positiveColorFocus;
- color: @positiveTextColor;
- text-shadow: @positiveTextShadow;
-}
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
- background-color: @positiveColorDown;
- color: @positiveTextColor;
- text-shadow: @positiveTextShadow;
-}
-.ui.positive.buttons .active.button,
-.ui.positive.buttons .active.button:active,
-.ui.positive.active.button,
-.ui.positive.button .active.button:active {
- background-color: @positiveColorActive;
- color: @positiveTextColor;
- text-shadow: @positiveTextShadow;
-}
-
-/* Basic */
-.ui.basic.positive.buttons .button,
-.ui.basic.positive.button {
- box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important;
- color: @positiveColor !important;
-}
-.ui.basic.positive.buttons .button:hover,
-.ui.basic.positive.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important;
- color: @positiveColorHover !important;
-}
-.ui.basic.positive.buttons .button:focus,
-.ui.basic.positive.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important;
- color: @positiveColorHover !important;
-}
-.ui.basic.positive.buttons .active.button,
-.ui.basic.positive.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important;
- color: @positiveColorDown !important;
-}
-.ui.basic.positive.buttons .button:active,
-.ui.basic.positive.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important;
- color: @positiveColorDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+.addConsequence(positive);
/*---------------
Negative
----------------*/
-/* Standard */
-.ui.negative.buttons .button,
-.ui.negative.button {
- background-color: @negativeColor;
- color: @negativeTextColor;
- text-shadow: @negativeTextShadow;
- background-image: @coloredBackgroundImage;
-}
-.ui.negative.button {
- box-shadow: @coloredBoxShadow;
-}
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
- background-color: @negativeColorHover;
- color: @negativeTextColor;
- text-shadow: @negativeTextShadow;
-}
-.ui.negative.buttons .button:focus,
-.ui.negative.button:focus {
- background-color: @negativeColorFocus;
- color: @negativeTextColor;
- text-shadow: @negativeTextShadow;
-}
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
- background-color: @negativeColorDown;
- color: @negativeTextColor;
- text-shadow: @negativeTextShadow;
-}
-.ui.negative.buttons .active.button,
-.ui.negative.buttons .active.button:active,
-.ui.negative.active.button,
-.ui.negative.button .active.button:active {
- background-color: @negativeColorActive;
- color: @negativeTextColor;
- text-shadow: @negativeTextShadow;
-}
+.addConsequence(negative);
-/* Basic */
-.ui.basic.negative.buttons .button,
-.ui.basic.negative.button {
- box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important;
- color: @negativeColor !important;
-}
-.ui.basic.negative.buttons .button:hover,
-.ui.basic.negative.button:hover {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important;
- color: @negativeColorHover !important;
-}
-.ui.basic.negative.buttons .button:focus,
-.ui.basic.negative.button:focus {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important;
- color: @negativeColorHover !important;
-}
-.ui.basic.negative.buttons .active.button,
-.ui.basic.negative.active.button {
- background: transparent !important;
- box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important;
- color: @negativeColorDown !important;
-}
-.ui.basic.negative.buttons .button:active,
-.ui.basic.negative.button:active {
- box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important;
- color: @negativeColorDown !important;
-}
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
-}
+& when (@variationButtonGroups) {
+ /*******************************
+ Groups
+ *******************************/
-/*******************************
- Groups
-*******************************/
+ .ui.buttons {
+ display: inline-flex;
+ flex-direction: row;
+ font-size: 0;
+ vertical-align: baseline;
+ margin: @verticalMargin @horizontalMargin 0 0;
+ }
-.ui.buttons {
- display: inline-flex;
- flex-direction: row;
- font-size: 0em;
- vertical-align: baseline;
- margin: @verticalMargin @horizontalMargin 0em 0em;
-}
-.ui.buttons:not(.basic):not(.inverted) {
- box-shadow: @groupBoxShadow;
-}
+ .ui.buttons:not(.basic):not(.inverted) {
+ box-shadow: @groupBoxShadow;
+ }
-/* Clearfix */
-.ui.buttons:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
-}
+ /* Clearfix */
+ .ui.buttons:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
-/* Standard Group */
-.ui.buttons .button {
- flex: 1 0 auto;
- margin: 0em;
- border-radius: 0em;
- margin: @groupButtonOffset;
-}
-.ui.buttons > .ui.button:not(.basic):not(.inverted),
-.ui.buttons:not(.basic):not(.inverted) > .button {
- box-shadow: @groupButtonBoxShadow;
-}
+ /* Standard Group */
+ .ui.buttons .button {
+ flex: 1 0 auto;
+ border-radius: 0;
+ margin: @groupButtonOffset;
+ }
-.ui.buttons .button:first-child {
- border-left: none;
- margin-left: 0em;
- border-top-left-radius: @borderRadius;
- border-bottom-left-radius: @borderRadius;
-}
-.ui.buttons .button:last-child {
- border-top-right-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
-}
+ .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
+ box-shadow: @groupButtonBoxShadow;
+ }
-/* Vertical Style */
-.ui.vertical.buttons {
- display: inline-flex;
- flex-direction: column;
-}
-.ui.vertical.buttons .button {
- display: block;
- float: none;
- width: 100%;
- margin: @verticalGroupOffset;
- box-shadow: @verticalBoxShadow;
- border-radius: 0em;
-}
-.ui.vertical.buttons .button:first-child {
- border-top-left-radius: @borderRadius;
- border-top-right-radius: @borderRadius;
-}
-.ui.vertical.buttons .button:last-child {
- margin-bottom: 0px;
- border-bottom-left-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
-}
-.ui.vertical.buttons .button:only-child {
- border-radius: @borderRadius;
-}
+ .ui.buttons .button:first-child {
+ border-left: none;
+ margin-left: 0;
+ border-top-left-radius: @borderRadius;
+ border-bottom-left-radius: @borderRadius;
+ }
+
+ .ui.buttons .button:last-child {
+ border-top-right-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+ }
+ /* Vertical Style */
+ .ui.vertical.buttons {
+ display: inline-flex;
+ flex-direction: column;
+ }
+
+ .ui.vertical.buttons .button {
+ display: block;
+ float: none;
+ width: 100%;
+ margin: @verticalGroupOffset;
+ box-shadow: @verticalBoxShadow;
+ border-radius: 0;
+ }
+
+ .ui.vertical.buttons .button:first-child {
+ border-top-left-radius: @borderRadius;
+ border-top-right-radius: @borderRadius;
+ }
+
+ .ui.vertical.buttons .button:last-child {
+ margin-bottom: 0;
+ border-bottom-left-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+ }
+
+ .ui.vertical.buttons .button:only-child {
+ border-radius: @borderRadius;
+ }
+}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/container.less b/ui/src/definitions/elements/container.less
index 14b32f20ee8..26f1858358e 100644
--- a/ui/src/definitions/elements/container.less
+++ b/ui/src/definitions/elements/container.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Container
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Container
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -24,78 +24,94 @@
/* All Sizes */
.ui.container {
display: block;
- max-width: @maxWidth !important;
+ max-width: @maxWidth;
}
/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
- .ui.container {
- width: @mobileWidth !important;
- margin-left: @mobileGutter !important;
- margin-right: @mobileGutter !important;
- }
- .ui.grid.container {
- width: @mobileGridWidth !important;
- }
- .ui.relaxed.grid.container {
- width: @mobileRelaxedGridWidth !important;
- }
- .ui.very.relaxed.grid.container {
- width: @mobileVeryRelaxedGridWidth !important;
+ .ui.ui.ui.container:not(.fluid) {
+ width: @mobileWidth;
+ margin-left: @mobileGutter;
+ margin-right: @mobileGutter;
+ }
+ & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+ .ui.ui.ui.grid.container {
+ width: @mobileGridWidth;
+ }
+ & when (@variationContainerRelaxed) {
+ .ui.ui.ui.relaxed.grid.container {
+ width: @mobileRelaxedGridWidth;
+ }
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: @mobileVeryRelaxedGridWidth;
+ }
+ }
}
}
/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.container {
+ .ui.ui.ui.container:not(.fluid) {
width: @tabletWidth;
- margin-left: @tabletGutter !important;
- margin-right: @tabletGutter !important;
- }
- .ui.grid.container {
- width: @tabletGridWidth !important;
- }
- .ui.relaxed.grid.container {
- width: @tabletRelaxedGridWidth !important;
- }
- .ui.very.relaxed.grid.container {
- width: @tabletVeryRelaxedGridWidth !important;
+ margin-left: @tabletGutter;
+ margin-right: @tabletGutter;
+ }
+ & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+ .ui.ui.ui.grid.container {
+ width: @tabletGridWidth;
+ }
+ & when (@variationContainerRelaxed) {
+ .ui.ui.ui.relaxed.grid.container {
+ width: @tabletRelaxedGridWidth;
+ }
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: @tabletVeryRelaxedGridWidth;
+ }
+ }
}
}
/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
- .ui.container {
+ .ui.ui.ui.container:not(.fluid) {
width: @computerWidth;
- margin-left: @computerGutter !important;
- margin-right: @computerGutter !important;
- }
- .ui.grid.container {
- width: @computerGridWidth !important;
- }
- .ui.relaxed.grid.container {
- width: @computerRelaxedGridWidth !important;
- }
- .ui.very.relaxed.grid.container {
- width: @computerVeryRelaxedGridWidth !important;
+ margin-left: @computerGutter;
+ margin-right: @computerGutter;
+ }
+ & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+ .ui.ui.ui.grid.container {
+ width: @computerGridWidth;
+ }
+ & when (@variationContainerRelaxed) {
+ .ui.ui.ui.relaxed.grid.container {
+ width: @computerRelaxedGridWidth;
+ }
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: @computerVeryRelaxedGridWidth;
+ }
+ }
}
}
/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
- .ui.container {
+ .ui.ui.ui.container:not(.fluid) {
width: @largeMonitorWidth;
- margin-left: @largeMonitorGutter !important;
- margin-right: @largeMonitorGutter !important;
- }
- .ui.grid.container {
- width: @largeMonitorGridWidth !important;
- }
- .ui.relaxed.grid.container {
- width: @largeMonitorRelaxedGridWidth !important;
- }
- .ui.very.relaxed.grid.container {
- width: @largeMonitorVeryRelaxedGridWidth !important;
+ margin-left: @largeMonitorGutter;
+ margin-right: @largeMonitorGutter;
+ }
+ & when (@variationContainerGrid) or (@variationContainerRelaxed) {
+ .ui.ui.ui.grid.container {
+ width: @largeMonitorGridWidth;
+ }
+ & when (@variationContainerRelaxed) {
+ .ui.ui.ui.relaxed.grid.container {
+ width: @largeMonitorRelaxedGridWidth;
+ }
+ .ui.ui.ui.very.relaxed.grid.container {
+ width: @largeMonitorVeryRelaxedGridWidth;
+ }
+ }
}
}
@@ -103,41 +119,42 @@
Types
*******************************/
-
-/* Text Container */
-.ui.text.container {
- font-family: @textFontFamily;
- max-width: @textWidth !important;
- line-height: @textLineHeight;
-}
-
-.ui.text.container {
- font-size: @textSize;
+& when (@variationContainerText) {
+ /* Text Container */
+ .ui.text.container {
+ font-family: @textFontFamily;
+ max-width: @textWidth;
+ line-height: @textLineHeight;
+ font-size: @textSize;
+ }
}
-/* Fluid */
-.ui.fluid.container {
- width: 100%;
+& when (@variationContainerFluid) {
+ /* Fluid */
+ .ui.fluid.container {
+ width: 100%;
+ }
}
-
/*******************************
Variations
*******************************/
-
-.ui[class*="left aligned"].container {
- text-align: left;
-}
-.ui[class*="center aligned"].container {
- text-align: center;
-}
-.ui[class*="right aligned"].container {
- text-align: right;
+& when (@variationContainerAligned) {
+ .ui[class*="left aligned"].container {
+ text-align: left;
+ }
+ .ui[class*="center aligned"].container {
+ text-align: center;
+ }
+ .ui[class*="right aligned"].container {
+ text-align: right;
+ }
}
-.ui.justified.container {
- text-align: justify;
- hyphens: auto;
+& when (@variationContainerJustified) {
+ .ui.justified.container {
+ text-align: justify;
+ hyphens: auto;
+ }
}
-
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/divider.less b/ui/src/definitions/elements/divider.less
index 28c0c689c70..197945796cd 100644
--- a/ui/src/definitions/elements/divider.less
+++ b/ui/src/definitions/elements/divider.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Divider
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Divider
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -26,7 +26,7 @@
margin: @margin;
line-height: 1;
- height: 0em;
+ height: 0;
font-weight: @fontWeight;
text-transform: @textTransform;
@@ -56,105 +56,23 @@
left: auto;
}
-/*--------------
- Horizontal
----------------*/
-
-.ui.horizontal.divider {
- display: table;
- white-space: nowrap;
-
- height: auto;
- margin: @horizontalMargin;
- line-height: 1;
- text-align: center;
-}
-
-.ui.horizontal.divider:before,
-.ui.horizontal.divider:after {
- content: '';
- display: table-cell;
- position: relative;
- top: 50%;
- width: 50%;
- background-repeat: no-repeat;
-}
-
-.ui.horizontal.divider:before {
- background-position: right @horizontalDividerMargin top 50%;
-}
-.ui.horizontal.divider:after {
- background-position: left @horizontalDividerMargin top 50%;
-}
-
-/*--------------
- Vertical
----------------*/
-
-.ui.vertical.divider {
- position: absolute;
- z-index: 2;
- top: 50%;
- left: 50%;
-
- margin: 0rem;
- padding: 0em;
- width: auto;
- height: 50%;
-
- line-height: 0em;
- text-align: center;
- transform: translateX(-50%);
-}
-
-.ui.vertical.divider:before,
-.ui.vertical.divider:after {
- position: absolute;
- left: 50%;
- content: '';
- z-index: 3;
+& when (@variationDividerHorizontal) {
+ /*--------------
+ Horizontal
+ ---------------*/
- border-left: @shadowWidth solid @shadowColor;
- border-right: @highlightWidth solid @highlightColor;
-
- width: 0%;
- height: @verticalDividerHeight;
-}
-
-.ui.vertical.divider:before {
- top: -100%;
-}
-.ui.vertical.divider:after {
- top: auto;
- bottom: 0px;
-}
-
-/* Inside grid */
-@media only screen and (max-width : @largestMobileScreen) {
-
- .ui.stackable.grid .ui.vertical.divider,
- .ui.grid .stackable.row .ui.vertical.divider {
+ .ui.horizontal.divider {
display: table;
white-space: nowrap;
+
height: auto;
margin: @horizontalMargin;
- overflow: hidden;
line-height: 1;
text-align: center;
- position: static;
- top: 0;
- left: 0;
- transform: none;
- }
-
- .ui.stackable.grid .ui.vertical.divider:before,
- .ui.grid .stackable.row .ui.vertical.divider:before,
- .ui.stackable.grid .ui.vertical.divider:after,
- .ui.grid .stackable.row .ui.vertical.divider:after {
- position: static;
- left: 0;
- border-left: none;
- border-right: none;
+ }
+
+ .ui.horizontal.divider:before,
+ .ui.horizontal.divider:after {
content: '';
display: table-cell;
position: relative;
@@ -163,84 +81,202 @@
background-repeat: no-repeat;
}
- .ui.stackable.grid .ui.vertical.divider:before,
- .ui.grid .stackable.row .ui.vertical.divider:before {
+ .ui.horizontal.divider:before {
background-position: right @horizontalDividerMargin top 50%;
}
- .ui.stackable.grid .ui.vertical.divider:after,
- .ui.grid .stackable.row .ui.vertical.divider:after {
+ .ui.horizontal.divider:after {
background-position: left @horizontalDividerMargin top 50%;
}
}
-/*--------------
- Icon
----------------*/
+& when (@variationDividerVertical) {
+ /*--------------
+ Vertical
+ ---------------*/
+
+ .ui.vertical.divider {
+ position: absolute;
+ z-index: 2;
+ top: 50%;
+ left: 50%;
+
+ margin: 0;
+ padding: 0;
+ width: auto;
+ height: 50%;
+
+ line-height: 0;
+ text-align: center;
+ transform: translateX(-50%);
+ }
-.ui.divider > .icon {
- margin: @dividerIconMargin;
- font-size: @dividerIconSize;
- height: 1em;
- vertical-align: middle;
+ .ui.vertical.divider:before,
+ .ui.vertical.divider:after {
+ position: absolute;
+ left: 50%;
+ content: '';
+ z-index: 3;
+
+ border-left: @shadowWidth solid @shadowColor;
+ border-right: @highlightWidth solid @highlightColor;
+
+ width: 0;
+ height: @verticalDividerHeight;
+ }
+
+ .ui.vertical.divider:before {
+ top: -100%;
+ }
+ .ui.vertical.divider:after {
+ top: auto;
+ bottom: 0;
+ }
+
+ /* Inside grid */
+ @media only screen and (max-width : @largestMobileScreen) {
+
+ .ui.stackable.grid .ui.vertical.divider,
+ .ui.grid .stackable.row .ui.vertical.divider {
+ display: table;
+ white-space: nowrap;
+ height: auto;
+ margin: @horizontalMargin;
+ overflow: hidden;
+ line-height: 1;
+ text-align: center;
+ position: static;
+ top: 0;
+ left: 0;
+ transform: none;
+ }
+
+ .ui.stackable.grid .ui.vertical.divider:before,
+ .ui.grid .stackable.row .ui.vertical.divider:before,
+ .ui.stackable.grid .ui.vertical.divider:after,
+ .ui.grid .stackable.row .ui.vertical.divider:after {
+ left: 0;
+ border-left: none;
+ border-right: none;
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 50%;
+ width: 50%;
+ background-repeat: no-repeat;
+ }
+
+ .ui.stackable.grid .ui.vertical.divider:before,
+ .ui.grid .stackable.row .ui.vertical.divider:before {
+ background-position: right @horizontalDividerMargin top 50%;
+ }
+ .ui.stackable.grid .ui.vertical.divider:after,
+ .ui.grid .stackable.row .ui.vertical.divider:after {
+ background-position: left @horizontalDividerMargin top 50%;
+ }
+ }
+}
+
+& when (@variationDividerIcon) {
+ /*--------------
+ Icon
+ ---------------*/
+
+ .ui.divider > .icon {
+ margin: @dividerIconMargin;
+ font-size: @dividerIconSize;
+ height: 1em;
+ vertical-align: middle;
+ }
+}
+
+& when (@variationDividerHorizontal) {
+ /*--------------
+ Header
+ ---------------*/
+ .ui.horizontal.divider[class*="left aligned"] {
+ &:before {
+ display: none;
+ }
+ &:after {
+ width: 100%;
+ }
+ }
+ .ui.horizontal.divider[class*="right aligned"] {
+ &:before {
+ width: 100%;
+ }
+ &:after {
+ display: none;
+ }
+ }
}
/*******************************
Variations
*******************************/
-/*--------------
- Hidden
----------------*/
+& when (@variationDividerHidden) {
+ /*--------------
+ Hidden
+ ---------------*/
-.ui.hidden.divider {
- border-color: transparent !important;
-}
-.ui.hidden.divider:before,
-.ui.hidden.divider:after {
- display: none;
+ .ui.hidden.divider {
+ border-color: transparent !important;
+ }
+
+ .ui.hidden.divider:before,
+ .ui.hidden.divider:after {
+ display: none;
+ }
}
/*--------------
Inverted
---------------*/
-
-.ui.divider.inverted,
-.ui.vertical.inverted.divider,
-.ui.horizontal.inverted.divider {
- color: @invertedTextColor;
-}
-.ui.divider.inverted,
-.ui.divider.inverted:after,
-.ui.divider.inverted:before {
- border-top-color: @invertedShadowColor !important;
- border-left-color: @invertedShadowColor !important;
- border-bottom-color: @invertedHighlightColor !important;
- border-right-color: @invertedHighlightColor !important;
+& when (@variationDividerInverted) {
+ .ui.divider.inverted,
+ .ui.vertical.inverted.divider,
+ .ui.horizontal.inverted.divider {
+ color: @invertedTextColor;
+ }
+ .ui.divider.inverted,
+ .ui.divider.inverted:after,
+ .ui.divider.inverted:before {
+ border-top-color: @invertedShadowColor !important;
+ border-left-color: @invertedShadowColor !important;
+ border-bottom-color: @invertedHighlightColor !important;
+ border-right-color: @invertedHighlightColor !important;
+ }
}
/*--------------
Fitted
---------------*/
-
-.ui.fitted.divider {
- margin: 0em;
+& when (@variationDividerFitted) {
+ .ui.fitted.divider {
+ margin: 0;
+ }
}
-/*--------------
- Clearing
----------------*/
+& when (@variationDividerClearing) {
+ /*--------------
+ Clearing
+ ---------------*/
-.ui.clearing.divider {
- clear: both;
+ .ui.clearing.divider {
+ clear: both;
+ }
}
-/*--------------
- Section
----------------*/
+& when (@variationDividerSection) {
+ /*--------------
+ Section
+ ---------------*/
-.ui.section.divider {
- margin-top: @sectionMargin;
- margin-bottom: @sectionMargin;
+ .ui.section.divider {
+ margin-top: @sectionMargin;
+ margin-bottom: @sectionMargin;
+ }
}
/*--------------
@@ -250,6 +286,13 @@
.ui.divider {
font-size: @medium;
}
-
+& when not (@variationDividerSizes = false) {
+ each(@variationDividerSizes, {
+ @s: @@value;
+ .ui.@{value}.divider {
+ font-size: @s;
+ }
+ })
+}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/emoji.less b/ui/src/definitions/elements/emoji.less
new file mode 100644
index 00000000000..6e80621a4b6
--- /dev/null
+++ b/ui/src/definitions/elements/emoji.less
@@ -0,0 +1,72 @@
+/*!
+ * # Fomantic UI - Emoji
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'element';
+@element : 'emoji';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+ Emoji
+*******************************/
+
+
+em[data-emoji] {
+ opacity: @opacity;
+
+ speak: none;
+ backface-visibility: hidden;
+}
+
+em[data-emoji]:before {
+ content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
+ display: inline-block;
+ line-height: @emojiLineHeight;
+ background-repeat: no-repeat;
+ background-position: center center;
+ & when not (@emojiFileType = 'svg') {
+ background-size: contain;
+ }
+}
+
+
+/*******************************
+ States
+*******************************/
+
+em[data-emoji].disabled {
+ opacity: @disabledOpacity;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+em[data-emoji].loading:before {
+ animation: loader @loadingDuration linear infinite;
+}
+
+
+/*-------------------
+ Link
+--------------------*/
+
+em[data-emoji].link:not(.disabled) {
+ cursor: pointer;
+}
+
+.loadUIOverrides();
diff --git a/ui/src/definitions/elements/flag.less b/ui/src/definitions/elements/flag.less
index 1f4145ebad9..b691d18d21a 100644
--- a/ui/src/definitions/elements/flag.less
+++ b/ui/src/definitions/elements/flag.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Flag
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Flag
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -31,12 +31,12 @@ i.flag:not(.icon) {
line-height: @height;
vertical-align: @verticalAlign;
- margin: 0em @margin 0em 0em;
+ margin: 0 @margin 0 0;
text-decoration: inherit;
speak: none;
- font-smoothing: antialiased;
+ -webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
diff --git a/ui/src/definitions/elements/header.less b/ui/src/definitions/elements/header.less
index 294d77a5c31..2c3634d24a3 100644
--- a/ui/src/definitions/elements/header.less
+++ b/ui/src/definitions/elements/header.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Header
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Header
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -42,18 +42,20 @@
margin-bottom: @lastMargin;
}
-/*--------------
- Sub Header
----------------*/
+& when (@variationHeaderSub) {
+ /*--------------
+ Sub Header
+ ---------------*/
-.ui.header .sub.header {
- display: block;
- font-weight: @normal;
- padding: 0em;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
+ .ui.header .sub.header {
+ display: block;
+ font-weight: @normal;
+ padding: 0;
+ margin: @subHeaderMargin;
+ font-size: @subHeaderFontSize;
+ line-height: @subHeaderLineHeight;
+ color: @subHeaderColor;
+ }
}
/*--------------
@@ -71,7 +73,7 @@
/* With Text Node */
.ui.header .icon:only-child {
display: inline-block;
- padding: 0em;
+ padding: 0;
margin-right: @iconMargin;
}
@@ -141,164 +143,126 @@
/*--------------
Page
---------------*/
-
-h1.ui.header {
- font-size: @h1;
-}
-h2.ui.header {
- font-size: @h2;
-}
-h3.ui.header {
- font-size: @h3;
-}
-h4.ui.header {
- font-size: @h4;
-}
-h5.ui.header {
- font-size: @h5;
-}
-
-
-/* Sub Header */
-h1.ui.header .sub.header {
- font-size: @h1SubHeaderFontSize;
-}
-h2.ui.header .sub.header {
- font-size: @h2SubHeaderFontSize;
-}
-h3.ui.header .sub.header {
- font-size: @h3SubHeaderFontSize;
+& when not (@variationHeaderTags = false) {
+ each(@variationHeaderTags, {
+ @sf: @{value}SubHeaderFontSize;
+ @s: @@value;
+ @{value}.ui.header {
+ font-size: @s;
+ }
+ & when (@variationHeaderSub) {
+ @{value}.ui.header .sub.header {
+ font-size: @@sf;
+ }
+ }
+ })
}
-h4.ui.header .sub.header {
- font-size: @h4SubHeaderFontSize;
-}
-h5.ui.header .sub.header {
- font-size: @h5SubHeaderFontSize;
-}
-
/*--------------
Content Heading
---------------*/
-.ui.huge.header {
- min-height: 1em;
- font-size: @hugeFontSize;
-}
-.ui.large.header {
- font-size: @largeFontSize;
-}
-.ui.medium.header {
- font-size: @mediumFontSize;
-}
-.ui.small.header {
- font-size: @smallFontSize;
-}
-.ui.tiny.header {
- font-size: @tinyFontSize;
-}
-
-/* Sub Header */
-.ui.huge.header .sub.header {
- font-size: @hugeSubHeaderFontSize;
-}
-.ui.large.header .sub.header {
- font-size: @hugeSubHeaderFontSize;
-}
-.ui.header .sub.header {
- font-size: @subHeaderFontSize;
-}
-.ui.small.header .sub.header {
- font-size: @smallSubHeaderFontSize;
-}
-.ui.tiny.header .sub.header {
- font-size: @tinySubHeaderFontSize;
-}
-
-/*--------------
- Sub Heading
----------------*/
-
-.ui.sub.header {
- padding: 0em;
- margin-bottom: @subHeadingDistance;
- font-weight: @subHeadingFontWeight;
- font-size: @subHeadingFontSize;
- text-transform: @subHeadingTextTransform;
- color: @subHeadingColor;
-}
-
-.ui.small.sub.header {
- font-size: @smallSubHeadingSize;
-}
-.ui.sub.header {
- font-size: @subHeadingFontSize;
-}
-.ui.large.sub.header {
- font-size: @largeSubHeadingSize;
-}
-.ui.huge.sub.header {
- font-size: @hugeSubHeadingSize;
-}
-
-
-
-/*-------------------
- Icon
---------------------*/
-
-.ui.icon.header {
- display: inline-block;
- text-align: center;
- margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;
-}
-.ui.icon.header:after {
- content: '';
- display: block;
- height: 0px;
- clear: both;
- visibility: hidden;
-}
-
-.ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
-}
-.ui.icon.header .icon {
- float: none;
- display: block;
- width: auto;
- height: auto;
- line-height: 1;
- padding: 0em;
- font-size: @iconHeaderSize;
- margin: 0em auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
-}
-.ui.icon.header .content {
- display: block;
- padding: 0em;
-}
-.ui.icon.header .circular.icon {
- font-size: @circularHeaderIconSize;
-}
-.ui.icon.header .square.icon {
- font-size: @squareHeaderIconSize;
-}
-.ui.block.icon.header .icon {
- margin-bottom: 0em;
-}
-.ui.icon.header.aligned {
- margin-left: auto;
- margin-right: auto;
- display: block;
+& when not (@variationHeaderSizes = false) {
+ each(@variationHeaderSizes, {
+ @sf: @{value}SubHeaderFontSize;
+ @shf: @{value}SubHeadingSize;
+ @s: @{value}FontSize;;
+ .ui.@{value}.header {
+ font-size: @@s;
+ & when (@@s >= 2) {
+ min-height: 1em;
+ }
+ }
+ & when (@variationHeaderSub) {
+ .ui.@{value}.header .sub.header {
+ font-size: @@sf;
+ }
+ .ui.@{value}.sub.header {
+ font-size: @@shf;
+ }
+ }
+ })
+}
+
+& when (@variationHeaderSub) {
+ /*--------------
+ Sub Heading
+ ---------------*/
+
+ .ui.sub.header {
+ padding: 0;
+ margin-bottom: @subHeadingDistance;
+ font-weight: @subHeadingFontWeight;
+ font-size: @subHeadingFontSize;
+ text-transform: @subHeadingTextTransform;
+ color: @subHeadingColor;
+ }
+}
+
+& when (@variationHeaderIcon) {
+ /*-------------------
+ Icon
+ --------------------*/
+
+ .ui.icon.header {
+ display: inline-block;
+ text-align: center;
+ margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
+ }
+ .ui.icon.header:after {
+ content: '';
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+
+ .ui.icon.header:first-child {
+ margin-top: @iconHeaderFirstMargin;
+ }
+ .ui.icon.header .icon {
+ float: none;
+ display: block;
+ width: auto;
+ height: auto;
+ line-height: 1;
+ padding: 0;
+ font-size: @iconHeaderSize;
+ margin: 0 auto @iconHeaderMargin;
+ opacity: @iconHeaderOpacity;
+ }
+ .ui.icon.header .corner.icon {
+ font-size: @cornerIconHeaderSize;
+ }
+ .ui.icon.header .content {
+ display: block;
+ padding: 0;
+ }
+ .ui.icon.header .circular.icon {
+ font-size: @circularHeaderIconSize;
+ }
+ .ui.icon.header .square.icon {
+ font-size: @squareHeaderIconSize;
+ }
+ & when (@variationHeaderBlock) {
+ .ui.block.icon.header .icon {
+ margin-bottom: 0;
+ }
+ }
+ .ui.icon.header.aligned {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
}
/*******************************
States
*******************************/
-
-.ui.disabled.header {
- opacity: @disabledOpacity;
+& when (@variationHeaderDisabled) {
+ .ui.disabled.header {
+ opacity: @disabledOpacity;
+ }
}
@@ -306,27 +270,31 @@ h5.ui.header .sub.header {
Variations
*******************************/
-/*-------------------
- Inverted
---------------------*/
-
-.ui.inverted.header {
- color: @invertedColor;
-}
-.ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
-}
-.ui.inverted.attached.header {
- background: @invertedAttachedBackground;
- box-shadow: none;
- border-color: transparent;
-}
-.ui.inverted.block.header {
- background: @invertedBlockBackground;
- box-shadow: none;
-}
-.ui.inverted.block.header {
- border-bottom: none;
+& when (@variationHeaderInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
+
+ .ui.inverted.header {
+ color: @invertedColor;
+ }
+ .ui.inverted.header .sub.header {
+ color: @invertedSubHeaderColor;
+ }
+ & when (@variationHeaderAttached) {
+ .ui.inverted.attached.header {
+ background: @invertedAttachedBackground;
+ box-shadow: none;
+ border-color: transparent;
+ }
+ }
+ & when (@variationHeaderBlock) {
+ .ui.inverted.block.header {
+ background: @invertedBlockBackground;
+ box-shadow: none;
+ border-bottom: none;
+ }
+ }
}
@@ -334,367 +302,178 @@ h5.ui.header .sub.header {
Colors
--------------------*/
-/*--- Red ---*/
-.ui.red.header {
- color: @red !important;
-}
-a.ui.red.header:hover {
- color: @redHover !important;
-}
-.ui.red.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @red;
-}
-
-/* Inverted */
-.ui.inverted.red.header {
- color: @lightRed !important;
-}
-a.ui.inverted.red.header:hover {
- color: @lightRedHover !important;
-}
-
-/*--- Orange ---*/
-.ui.orange.header {
- color: @orange !important;
-}
-a.ui.orange.header:hover {
- color: @orangeHover !important;
-}
-.ui.orange.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @orange;
-}
-/* Inverted */
-.ui.inverted.orange.header {
- color: @lightOrange !important;
-}
-a.ui.inverted.orange.header:hover {
- color: @lightOrangeHover !important;
-}
-
-/*--- Olive ---*/
-.ui.olive.header {
- color: @olive !important;
-}
-a.ui.olive.header:hover {
- color: @oliveHover !important;
-}
-.ui.olive.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @olive;
-}
-/* Inverted */
-.ui.inverted.olive.header {
- color: @lightOlive !important;
-}
-a.ui.inverted.olive.header:hover {
- color: @lightOliveHover !important;
-}
-
-/*--- Yellow ---*/
-.ui.yellow.header {
- color: @yellow !important;
-}
-a.ui.yellow.header:hover {
- color: @yellowHover !important;
-}
-.ui.yellow.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @yellow;
-}
-/* Inverted */
-.ui.inverted.yellow.header {
- color: @lightYellow !important;
-}
-a.ui.inverted.yellow.header:hover {
- color: @lightYellowHover !important;
-}
-
-/*--- Green ---*/
-.ui.green.header {
- color: @green !important;
-}
-a.ui.green.header:hover {
- color: @greenHover !important;
-}
-.ui.green.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @green;
-}
-/* Inverted */
-.ui.inverted.green.header {
- color: @lightGreen !important;
-}
-a.ui.inverted.green.header:hover {
- color: @lightGreenHover !important;
-}
-
-/*--- Teal ---*/
-.ui.teal.header {
- color: @teal !important;
-}
-a.ui.teal.header:hover {
- color: @tealHover !important;
-}
-.ui.teal.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @teal;
-}
-/* Inverted */
-.ui.inverted.teal.header {
- color: @lightTeal !important;
-}
-a.ui.inverted.teal.header:hover {
- color: @lightTealHover !important;
-}
-
-/*--- Blue ---*/
-.ui.blue.header {
- color: @blue !important;
-}
-a.ui.blue.header:hover {
- color: @blueHover !important;
-}
-.ui.blue.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @blue;
-}
-/* Inverted */
-.ui.inverted.blue.header {
- color: @lightBlue !important;
-}
-a.ui.inverted.blue.header:hover {
- color: @lightBlueHover !important;
-}
-
-/*--- Violet ---*/
-.ui.violet.header {
- color: @violet !important;
-}
-a.ui.violet.header:hover {
- color: @violetHover !important;
-}
-.ui.violet.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @violet;
-}
-/* Inverted */
-.ui.inverted.violet.header {
- color: @lightViolet !important;
-}
-a.ui.inverted.violet.header:hover {
- color: @lightVioletHover !important;
-}
-
-/*--- Purple ---*/
-.ui.purple.header {
- color: @purple !important;
-}
-a.ui.purple.header:hover {
- color: @purpleHover !important;
-}
-.ui.purple.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @purple;
-}
-/* Inverted */
-.ui.inverted.purple.header {
- color: @lightPurple !important;
-}
-a.ui.inverted.purple.header:hover {
- color: @lightPurpleHover !important;
-}
-
-/*--- Pink ---*/
-.ui.pink.header {
- color: @pink !important;
-}
-a.ui.pink.header:hover {
- color: @pinkHover !important;
-}
-.ui.pink.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @pink;
-}
-/* Inverted */
-.ui.inverted.pink.header {
- color: @lightPink !important;
-}
-a.ui.inverted.pink.header:hover {
- color: @lightPinkHover !important;
-}
-
-/*--- Brown ---*/
-.ui.brown.header {
- color: @brown !important;
-}
-a.ui.brown.header:hover {
- color: @brownHover !important;
-}
-.ui.brown.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @brown;
-}
-/* Inverted */
-.ui.inverted.brown.header {
- color: @lightBrown !important;
-}
-a.ui.inverted.brown.header:hover {
- color: @lightBrownHover !important;
-}
-
-/*--- Grey ---*/
-.ui.grey.header {
- color: @grey !important;
-}
-a.ui.grey.header:hover {
- color: @greyHover !important;
-}
-.ui.grey.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @grey;
-}
-/* Inverted */
-.ui.inverted.grey.header {
- color: @lightGrey !important;
-}
-a.ui.inverted.grey.header:hover {
- color: @lightGreyHover !important;
-}
-
-
-/*-------------------
- Aligned
---------------------*/
-
-.ui.left.aligned.header {
- text-align: left;
-}
-.ui.right.aligned.header {
- text-align: right;
-}
-.ui.centered.header,
-.ui.center.aligned.header {
- text-align: center;
-}
-.ui.justified.header {
- text-align: justify;
-}
-.ui.justified.header:after {
- display: inline-block;
- content: '';
- width: 100%;
-}
-
-/*-------------------
- Floated
---------------------*/
-
-.ui.floated.header,
-.ui[class*="left floated"].header {
- float: left;
- margin-top: 0em;
- margin-right: @floatedMargin;
-}
-.ui[class*="right floated"].header {
- float: right;
- margin-top: 0em;
- margin-left: @floatedMargin;
-}
-
-/*-------------------
- Fitted
---------------------*/
-
-.ui.fitted.header {
- padding: 0em;
-}
-
-
-/*-------------------
- Dividing
---------------------*/
-
-.ui.dividing.header {
- padding-bottom: @dividedBorderPadding;
- border-bottom: @dividedBorder;
-}
-.ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
-}
-.ui.dividing.header .icon {
- margin-bottom: @dividedIconPadding;
-}
-
-.ui.inverted.dividing.header {
- border-bottom-color: @invertedDividedBorderColor;
-}
-
-
-/*-------------------
- Block
---------------------*/
-
-.ui.block.header {
- background: @blockBackground;
- padding: @blockVerticalPadding @blockHorizontalPadding;
- box-shadow: @blockBoxShadow;
- border: @blockBorder;
- border-radius: @blockBorderRadius;
-}
-
-.ui.tiny.block.header {
- font-size: @tinyBlock;
-}
-.ui.small.block.header {
- font-size: @smallBlock;
-}
-.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: @mediumBlock;
-}
-.ui.large.block.header {
- font-size: @largeBlock;
-}
-.ui.huge.block.header {
- font-size: @hugeBlock;
-}
-
-/*-------------------
- Attached
---------------------*/
-
-.ui.attached.header {
- background: @attachedBackground;
- padding: @attachedVerticalPadding @attachedHorizontalPadding;
- margin-left: @attachedOffset;
- margin-right: @attachedOffset;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
-}
-.ui.attached.block.header {
- background: @blockBackground;
-}
-
-.ui.attached:not(.top):not(.bottom).header {
- margin-top: 0em;
- margin-bottom: 0em;
- border-top: none;
- border-radius: 0em;
-}
-.ui.top.attached.header {
- margin-bottom: 0em;
- border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
-}
-.ui.bottom.attached.header {
- margin-top: 0em;
- border-top: none;
- border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
-}
-
-/* Attached Sizes */
-.ui.tiny.attached.header {
- font-size: @tinyAttachedSize;
-}
-.ui.small.attached.header {
- font-size: @smallAttachedSize;
-}
-.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: @mediumAttachedSize;
-}
-.ui.large.attached.header {
- font-size: @largeAttachedSize;
-}
-.ui.huge.attached.header {
- font-size: @hugeAttachedSize;
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+ @h: @colors[@@color][hover];
+ @lh: @colors[@@color][lightHover];
+
+ .ui.@{color}.header {
+ color: @c;
+ }
+ a.ui.@{color}.header:hover {
+ color: @h;
+ }
+ & when (@variationHeaderDividing) {
+ .ui.@{color}.dividing.header {
+ border-bottom: @dividedColoredBorderWidth solid @c;
+ }
+ }
+ & when (@variationHeaderInverted) {
+ .ui.inverted.@{color}.header.header.header {
+ color: @l;
+ }
+ a.ui.inverted.@{color}.header.header.header:hover {
+ color: @lh;
+ }
+ .ui.inverted.@{color}.dividing.header {
+ border-bottom: @dividedColoredBorderWidth solid @l;
+ }
+ }
+})
+
+& when (@variationHeaderAligned) {
+ /*-------------------
+ Aligned
+ --------------------*/
+
+ .ui.left.aligned.header {
+ text-align: left;
+ }
+ .ui.right.aligned.header {
+ text-align: right;
+ }
+ .ui.centered.header,
+ .ui.center.aligned.header {
+ text-align: center;
+ }
+}
+
+& when (@variationHeaderJustified) {
+ .ui.justified.header {
+ text-align: justify;
+ }
+ .ui.justified.header:after {
+ display: inline-block;
+ content: '';
+ width: 100%;
+ }
+}
+
+& when (@variationHeaderFloated) {
+ /*-------------------
+ Floated
+ --------------------*/
+
+ .ui.floated.header,
+ .ui[class*="left floated"].header {
+ float: left;
+ margin-top: 0;
+ margin-right: @floatedMargin;
+ }
+ .ui[class*="right floated"].header {
+ float: right;
+ margin-top: 0;
+ margin-left: @floatedMargin;
+ }
+}
+
+& when (@variationHeaderFitted) {
+ /*-------------------
+ Fitted
+ --------------------*/
+
+ .ui.fitted.header {
+ padding: 0;
+ }
+}
+
+& when (@variationHeaderDividing) {
+ /*-------------------
+ Dividing
+ --------------------*/
+
+ .ui.dividing.header {
+ padding-bottom: @dividedBorderPadding;
+ border-bottom: @dividedBorder;
+ }
+ .ui.dividing.header .sub.header {
+ padding-bottom: @dividedSubHeaderPadding;
+ }
+ .ui.dividing.header .icon {
+ margin-bottom: @dividedIconPadding;
+ }
+ & when (@variationHeaderInverted) {
+ .ui.inverted.dividing.header {
+ border-bottom-color: @invertedDividedBorderColor;
+ }
+ }
+}
+
+& when (@variationHeaderBlock) {
+ /*-------------------
+ Block
+ --------------------*/
+
+ .ui.block.header {
+ background: @blockBackground;
+ padding: @blockVerticalPadding @blockHorizontalPadding;
+ box-shadow: @blockBoxShadow;
+ border: @blockBorder;
+ border-radius: @blockBorderRadius;
+ }
+ .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+ font-size: @mediumBlock;
+ }
+ & when not (@variationHeaderSizes = false) {
+ each(@variationHeaderSizes, {
+ @s: @{value}Block;
+ .ui.@{value}.block.header {
+ font-size: @@s;
+ }
+ })
+ }
+}
+
+& when (@variationHeaderAttached) {
+ /*-------------------
+ Attached
+ --------------------*/
+
+ .ui.attached.header {
+ background: @attachedBackground;
+ padding: @attachedVerticalPadding @attachedHorizontalPadding;
+ margin: 0 @attachedOffset 0 @attachedOffset;
+ box-shadow: @attachedBoxShadow;
+ border: @attachedBorder;
+ border-radius: 0;
+ }
+ .ui.attached.block.header {
+ background: @blockBackground;
+ }
+ .ui.attached:not(.top).header {
+ border-top: none;
+ }
+ .ui.top.attached.header {
+ border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
+ }
+ .ui.bottom.attached.header {
+ border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
+ }
+
+ /* Attached Sizes */
+ .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+ font-size: @mediumAttachedSize;
+ }
+ & when not (@variationHeaderSizes = false) {
+ each(@variationHeaderSizes, {
+ @s: @{value}AttachedSize;
+ .ui.@{value}.attached.header {
+ font-size: @@s;
+ }
+ })
+ }
}
/*-------------------
diff --git a/ui/src/definitions/elements/icon.less b/ui/src/definitions/elements/icon.less
index 88b870d3dc3..8f2f6ad5961 100644
--- a/ui/src/definitions/elements/icon.less
+++ b/ui/src/definitions/elements/icon.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Icon
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Icon
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -38,7 +38,7 @@ i.icon {
display: inline-block;
opacity: @opacity;
- margin: 0em @distanceFromText 0em 0em;
+ margin: 0 @distanceFromText 0 0;
width: @width;
height: @height;
@@ -50,7 +50,6 @@ i.icon {
text-align: center;
speak: none;
- font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
@@ -64,438 +63,312 @@ i.icon:before {
Types
*******************************/
-/*--------------
- Loading
----------------*/
+& when (@variationIconLoading) {
+ /*--------------
+ Loading
+ ---------------*/
-i.icon.loading {
- height: 1em;
- line-height: 1;
- animation: icon-loading @loadingDuration linear infinite;
-}
-@keyframes icon-loading {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+ i.icon.loading {
+ height: 1em;
+ line-height: 1;
+ animation: loader @loadingDuration linear infinite;
+ }
}
/*******************************
States
*******************************/
-i.icon.hover {
- opacity: 1 !important;
-}
-
-i.icon.active {
- opacity: 1 !important;
-}
-
-i.emphasized.icon {
- opacity: 1 !important;
+i.icon:hover, i.icons:hover,
+i.icon:active, i.icons:active,
+i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
+ opacity: 1;
}
-i.disabled.icon {
- opacity: @disabledOpacity !important;
+& when (@variationIconDisabled) {
+ i.disabled.icon, i.disabled.icons {
+ opacity: @disabledOpacity;
+ cursor: default;
+ pointer-events: none;
+ }
}
-
/*******************************
Variations
*******************************/
-
-/*-------------------
- Fitted
---------------------*/
-
-i.fitted.icon {
- width: auto;
- margin: 0em !important;
-}
-
-/*-------------------
- Link
---------------------*/
-
-i.link.icon, i.link.icons {
- cursor: pointer;
- opacity: @linkOpacity;
- transition: opacity @defaultDuration @defaultEasing;
-}
-i.link.icon:hover, i.link.icons:hover {
- opacity: 1 !important;
-}
-
-/*-------------------
- Circular
---------------------*/
-
-i.circular.icon {
- border-radius: 500em !important;
- line-height: 1 !important;
-
- padding: @circularPadding !important;
- box-shadow: @circularShadow;
-
- width: @circularSize !important;
- height: @circularSize !important;
-}
-i.circular.inverted.icon {
- border: none;
- box-shadow: none;
-}
-
-/*-------------------
- Flipped
---------------------*/
-
-i.flipped.icon,
-i.horizontally.flipped.icon {
- transform: scale(-1, 1);
-}
-i.vertically.flipped.icon {
- transform: scale(1, -1);
-}
-
-/*-------------------
- Rotated
---------------------*/
-
-i.rotated.icon,
-i.right.rotated.icon,
-i.clockwise.rotated.icon {
- transform: rotate(90deg);
-}
-
-i.left.rotated.icon,
-i.counterclockwise.rotated.icon {
- transform: rotate(-90deg);
-}
-
-/*-------------------
- Bordered
---------------------*/
-
-i.bordered.icon {
- line-height: 1;
- vertical-align: baseline;
-
- width: @borderedSize;
- height: @borderedSize;
- padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
- box-shadow: @borderedShadow;
-}
-i.bordered.inverted.icon {
- border: none;
- box-shadow: none;
-}
-
-/*-------------------
- Inverted
---------------------*/
-
-/* Inverted Shapes */
-i.inverted.bordered.icon,
-i.inverted.circular.icon {
- background-color: @black !important;
- color: @white !important;
-}
-
-i.inverted.icon {
- color: @white;
+& when (@variationIconFitted) {
+ /*-------------------
+ Fitted
+ --------------------*/
+
+ i.fitted.icon {
+ width: auto;
+ margin: 0 !important;
+ }
+}
+
+& when (@variationIconLink) {
+ /*-------------------
+ Link
+ --------------------*/
+
+ i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
+ cursor: pointer;
+ opacity: @linkOpacity;
+ transition: opacity @defaultDuration @defaultEasing;
+ }
+ i.link.icon:hover, i.link.icons:hover {
+ opacity: 1;
+ }
+}
+
+& when (@variationIconCircular) {
+ /*-------------------
+ Circular
+ --------------------*/
+
+ i.circular.icon {
+ border-radius: 500em !important;
+ line-height: 1 !important;
+
+ padding: @circularPadding !important;
+ box-shadow: @circularShadow;
+
+ width: @circularSize !important;
+ height: @circularSize !important;
+ }
+ & when (@variationIconInverted) {
+ i.circular.inverted.icon {
+ border: none;
+ box-shadow: none;
+ }
+ }
+}
+
+& when (@variationIconFlipped) {
+ /*-------------------
+ Flipped
+ --------------------*/
+
+ i.flipped.icon,
+ i.horizontally.flipped.icon {
+ transform: scale(-1, 1);
+ }
+ i.vertically.flipped.icon {
+ transform: scale(1, -1);
+ }
+}
+
+& when (@variationIconRotated) {
+ /*-------------------
+ Rotated
+ --------------------*/
+
+ i.rotated.icon,
+ i.right.rotated.icon,
+ i.clockwise.rotated.icon {
+ transform: rotate(90deg);
+ }
+
+ i.left.rotated.icon,
+ i.counterclockwise.rotated.icon {
+ transform: rotate(-90deg);
+ }
+
+ i.halfway.rotated.icon {
+ transform: rotate(180deg);
+ }
+}
+
+& when (@variationIconFlipped) and (@variationIconRotated) {
+ /*--------------------------
+ Flipped & Rotated
+ ---------------------------*/
+
+ i.rotated.flipped.icon,
+ i.right.rotated.flipped.icon,
+ i.clockwise.rotated.flipped.icon {
+ transform: scale(-1, 1) rotate(90deg);
+ }
+
+ i.left.rotated.flipped.icon,
+ i.counterclockwise.rotated.flipped.icon {
+ transform: scale(-1, 1) rotate(-90deg);
+ }
+
+ i.halfway.rotated.flipped.icon {
+ transform: scale(-1, 1) rotate(180deg);
+ }
+
+ i.rotated.vertically.flipped.icon,
+ i.right.rotated.vertically.flipped.icon,
+ i.clockwise.rotated.vertically.flipped.icon {
+ transform: scale(1, -1) rotate(90deg);
+ }
+
+ i.left.rotated.vertically.flipped.icon,
+ i.counterclockwise.rotated.vertically.flipped.icon {
+ transform: scale(1, -1) rotate(-90deg);
+ }
+
+ i.halfway.rotated.vertically.flipped.icon {
+ transform: scale(1, -1) rotate(180deg);
+ }
+}
+
+& when (@variationIconBordered) {
+ /*-------------------
+ Bordered
+ --------------------*/
+
+ i.bordered.icon {
+ line-height: 1;
+ vertical-align: baseline;
+
+ width: @borderedSize;
+ height: @borderedSize;
+ padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
+ box-shadow: @borderedShadow;
+ }
+ & when (@variationIconInverted) {
+ i.bordered.inverted.icon {
+ border: none;
+ box-shadow: none;
+ }
+ }
+}
+
+& when (@variationIconInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
+
+ /* Inverted Shapes */
+ i.inverted.bordered.icon,
+ i.inverted.circular.icon {
+ background-color: @black;
+ color: @white;
+ }
+
+ i.inverted.icon {
+ color: @white;
+ }
}
-
/*-------------------
Colors
--------------------*/
-/* Red */
-i.red.icon {
- color: @red !important;
-}
-i.inverted.red.icon {
- color: @lightRed !important;
-}
-i.inverted.bordered.red.icon,
-i.inverted.circular.red.icon {
- background-color: @red !important;
- color: @white !important;
-}
-
-/* Orange */
-i.orange.icon {
- color: @orange !important;
-}
-i.inverted.orange.icon {
- color: @lightOrange !important;
-}
-i.inverted.bordered.orange.icon,
-i.inverted.circular.orange.icon {
- background-color: @orange !important;
- color: @white !important;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+
+ i.@{color}.icon.icon.icon.icon {
+ color: @c;
+ }
+ & when (@variationIconInverted) {
+ i.inverted.@{color}.icon.icon.icon.icon {
+ color: @l;
+ }
+ i.inverted.bordered.@{color}.icon.icon.icon.icon,
+ i.inverted.circular.@{color}.icon.icon.icon.icon {
+ background-color: @c;
+ color: @white;
+ }
+ }
+})
-/* Yellow */
-i.yellow.icon {
- color: @yellow !important;
-}
-i.inverted.yellow.icon {
- color: @lightYellow !important;
-}
-i.inverted.bordered.yellow.icon,
-i.inverted.circular.yellow.icon {
- background-color: @yellow !important;
- color: @white !important;
-}
-
-/* Olive */
-i.olive.icon {
- color: @olive !important;
-}
-i.inverted.olive.icon {
- color: @lightOlive !important;
-}
-i.inverted.bordered.olive.icon,
-i.inverted.circular.olive.icon {
- background-color: @olive !important;
- color: @white !important;
-}
-
-/* Green */
-i.green.icon {
- color: @green !important;
-}
-i.inverted.green.icon {
- color: @lightGreen !important;
-}
-i.inverted.bordered.green.icon,
-i.inverted.circular.green.icon {
- background-color: @green !important;
- color: @white !important;
-}
-
-/* Teal */
-i.teal.icon {
- color: @teal !important;
-}
-i.inverted.teal.icon {
- color: @lightTeal !important;
-}
-i.inverted.bordered.teal.icon,
-i.inverted.circular.teal.icon {
- background-color: @teal !important;
- color: @white !important;
-}
-
-/* Blue */
-i.blue.icon {
- color: @blue !important;
-}
-i.inverted.blue.icon {
- color: @lightBlue !important;
-}
-i.inverted.bordered.blue.icon,
-i.inverted.circular.blue.icon {
- background-color: @blue !important;
- color: @white !important;
-}
-
-/* Violet */
-i.violet.icon {
- color: @violet !important;
-}
-i.inverted.violet.icon {
- color: @lightViolet !important;
-}
-i.inverted.bordered.violet.icon,
-i.inverted.circular.violet.icon {
- background-color: @violet !important;
- color: @white !important;
-}
-
-/* Purple */
-i.purple.icon {
- color: @purple !important;
-}
-i.inverted.purple.icon {
- color: @lightPurple !important;
-}
-i.inverted.bordered.purple.icon,
-i.inverted.circular.purple.icon {
- background-color: @purple !important;
- color: @white !important;
-}
-
-/* Pink */
-i.pink.icon {
- color: @pink !important;
-}
-i.inverted.pink.icon {
- color: @lightPink !important;
-}
-i.inverted.bordered.pink.icon,
-i.inverted.circular.pink.icon {
- background-color: @pink !important;
- color: @white !important;
-}
-
-/* Brown */
-i.brown.icon {
- color: @brown !important;
-}
-i.inverted.brown.icon {
- color: @lightBrown !important;
-}
-i.inverted.bordered.brown.icon,
-i.inverted.circular.brown.icon {
- background-color: @brown !important;
- color: @white !important;
-}
-
-/* Grey */
-i.grey.icon {
- color: @grey !important;
-}
-i.inverted.grey.icon {
- color: @lightGrey !important;
-}
-i.inverted.bordered.grey.icon,
-i.inverted.circular.grey.icon {
- background-color: @grey !important;
- color: @white !important;
-}
-
-/* Black */
-i.black.icon {
- color: @black !important;
-}
-i.inverted.black.icon {
- color: @lightBlack !important;
-}
-i.inverted.bordered.black.icon,
-i.inverted.circular.black.icon {
- background-color: @black !important;
- color: @white !important;
-}
/*-------------------
Sizes
--------------------*/
-i.mini.icon,
-i.mini.icons {
- line-height: 1;
- font-size: @mini;
-}
-i.tiny.icon,
-i.tiny.icons {
- line-height: 1;
- font-size: @tiny;
-}
-i.small.icon,
-i.small.icons {
- line-height: 1;
- font-size: @small;
-}
i.icon,
i.icons {
font-size: @medium;
}
-i.large.icon,
-i.large.icons {
- line-height: 1;
- vertical-align: middle;
- font-size: @large;
-}
-i.big.icon,
-i.big.icons {
- line-height: 1;
- vertical-align: middle;
- font-size: @big;
-}
-i.huge.icon,
-i.huge.icons {
- line-height: 1;
- vertical-align: middle;
- font-size: @huge;
-}
-i.massive.icon,
-i.massive.icons {
- line-height: 1;
- vertical-align: middle;
- font-size: @massive;
-}
-
-/*******************************
- Groups
-*******************************/
-
-i.icons {
- display: inline-block;
- position: relative;
- line-height: 1;
-}
-
-i.icons .icon {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
- margin: 0em;
- margin: 0;
-}
-
-i.icons .icon:first-child {
- position: static;
- width: auto;
- height: auto;
- vertical-align: top;
- transform: none;
- margin-right: @distanceFromText;
-}
-
-/* Corner Icon */
-i.icons .corner.icon {
- top: auto;
- left: auto;
- right: 0;
- bottom: 0;
- transform: none;
- font-size: @cornerIconSize;
- text-shadow: @cornerIconShadow;
-}
-i.icons .top.right.corner.icon {
- top: 0;
- left: auto;
- right: 0;
- bottom: auto;
-}
-i.icons .top.left.corner.icon {
- top: 0;
- left: 0;
- right: auto;
- bottom: auto;
-}
-i.icons .bottom.left.corner.icon {
- top: auto;
- left: 0;
- right: auto;
- bottom: 0;
-}
-i.icons .bottom.right.corner.icon {
- top: auto;
- left: auto;
- right: 0;
- bottom: 0;
-}
-
-i.icons .inverted.corner.icon {
- text-shadow: @cornerIconInvertedShadow;
+& when not (@variationIconSizes = false) {
+ each(@variationIconSizes, {
+ @s: @@value;
+ i.@{value}.@{value}.@{value}.icon,
+ i.@{value}.@{value}.@{value}.icons {
+ line-height: 1;
+ vertical-align: middle;
+ font-size: @s;
+ }
+ })
+}
+
+& when (@variationIconGroups) or (@variationIconCorner) {
+ /*******************************
+ Groups
+ *******************************/
+
+ i.icons {
+ display: inline-block;
+ position: relative;
+ line-height: 1;
+ }
+
+ i.icons .icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ margin: 0;
+ }
+
+ i.icons .icon:first-child {
+ position: static;
+ width: auto;
+ height: auto;
+ vertical-align: top;
+ transform: none;
+ }
+
+ & when (@variationIconCorner) {
+ /* Corner Icon */
+ i.icons .corner.icon {
+ top: auto;
+ left: auto;
+ right: 0;
+ bottom: 0;
+ transform: none;
+ font-size: @cornerIconSize;
+ text-shadow: @cornerIconShadow;
+ }
+ i.icons .icon.corner[class*="top right"] {
+ top: 0;
+ left: auto;
+ right: 0;
+ bottom: auto;
+ }
+ i.icons .icon.corner[class*="top left"] {
+ top: 0;
+ left: 0;
+ right: auto;
+ bottom: auto;
+ }
+ i.icons .icon.corner[class*="bottom left"] {
+ top: auto;
+ left: 0;
+ right: auto;
+ bottom: 0;
+ }
+ i.icons .icon.corner[class*="bottom right"] {
+ top: auto;
+ left: auto;
+ right: 0;
+ bottom: 0;
+ }
+ & when (@variationIconInverted) {
+ i.icons .inverted.corner.icon {
+ text-shadow: @cornerIconInvertedShadow;
+ }
+ }
+ }
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/image.less b/ui/src/definitions/elements/image.less
index 03db0f2b7b6..2e3c269b5e3 100644
--- a/ui/src/definitions/elements/image.less
+++ b/ui/src/definitions/elements/image.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Image
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Image
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -48,7 +48,7 @@ img.ui.image {
*******************************/
.ui.hidden.images,
-.ui.hidden.image {
+.ui.ui.hidden.image {
display: none;
}
.ui.hidden.transition.images,
@@ -61,11 +61,12 @@ img.ui.image {
visibility: hidden;
}
-
-.ui.disabled.images,
-.ui.disabled.image {
- cursor: default;
- opacity: @disabledOpacity;
+& when (@variationImageDisabled) {
+ .ui.disabled.images,
+ .ui.disabled.image {
+ cursor: default;
+ opacity: @disabledOpacity;
+ }
}
@@ -73,200 +74,193 @@ img.ui.image {
Variations
*******************************/
-
-/*--------------
- Inline
----------------*/
-
-.ui.inline.image,
-.ui.inline.image svg,
-.ui.inline.image img {
- display: inline-block;
-}
-
-/*------------------
- Vertical Aligned
--------------------*/
-
-.ui.top.aligned.images .image,
-.ui.top.aligned.image,
-.ui.top.aligned.image svg,
-.ui.top.aligned.image img {
- display: inline-block;
- vertical-align: top;
-}
-.ui.middle.aligned.images .image,
-.ui.middle.aligned.image,
-.ui.middle.aligned.image svg,
-.ui.middle.aligned.image img {
- display: inline-block;
- vertical-align: middle;
-}
-.ui.bottom.aligned.images .image,
-.ui.bottom.aligned.image,
-.ui.bottom.aligned.image svg,
-.ui.bottom.aligned.image img {
- display: inline-block;
- vertical-align: bottom;
-}
-
-/*--------------
- Rounded
----------------*/
-
-.ui.rounded.images .image,
-.ui.rounded.image,
-.ui.rounded.images .image > *,
-.ui.rounded.image > * {
- border-radius: @roundedBorderRadius;
-}
-
-/*--------------
- Bordered
----------------*/
-
-.ui.bordered.images .image,
-.ui.bordered.images img,
-.ui.bordered.images svg,
-.ui.bordered.image img,
-.ui.bordered.image svg,
-img.ui.bordered.image {
- border: @imageBorder;
-}
-
-/*--------------
- Circular
----------------*/
-
-.ui.circular.images,
-.ui.circular.image {
- overflow: hidden;
-}
-
-.ui.circular.images .image,
-.ui.circular.image,
-.ui.circular.images .image > *,
-.ui.circular.image > * {
- -webkit-border-radius: @circularRadius;
- -moz-border-radius: @circularRadius;
- border-radius: @circularRadius;
-}
-
-/*--------------
- Fluid
----------------*/
-
-.ui.fluid.images,
-.ui.fluid.image,
-.ui.fluid.images img,
-.ui.fluid.images svg,
-.ui.fluid.image svg,
-.ui.fluid.image img {
- display: block;
- width: 100%;
- height: auto;
-}
-
-
-/*--------------
- Avatar
----------------*/
-
-.ui.avatar.images .image,
-.ui.avatar.images img,
-.ui.avatar.images svg,
-.ui.avatar.image img,
-.ui.avatar.image svg,
-.ui.avatar.image {
- margin-right: @avatarMargin;
-
- display: inline-block;
- width: @avatarSize;
- height: @avatarSize;
-
- -webkit-border-radius: @circularRadius;
- -moz-border-radius: @circularRadius;
- border-radius: @circularRadius;
-}
-
-/*-------------------
- Spaced
---------------------*/
-
-.ui.spaced.image {
- display: inline-block !important;
- margin-left: @spacedDistance;
- margin-right: @spacedDistance;
-}
-
-.ui[class*="left spaced"].image {
- margin-left: @spacedDistance;
- margin-right: 0em;
-}
-
-.ui[class*="right spaced"].image {
- margin-left: 0em;
- margin-right: @spacedDistance;
-}
-
-/*-------------------
- Floated
---------------------*/
-
-.ui.floated.image,
-.ui.floated.images {
- float: left;
- margin-right: @floatedHorizontalMargin;
- margin-bottom: @floatedVerticalMargin;
-}
-.ui.right.floated.images,
-.ui.right.floated.image {
- float: right;
- margin-right: 0em;
- margin-bottom: @floatedVerticalMargin;
- margin-left: @floatedHorizontalMargin;
-}
-
-.ui.floated.images:last-child,
-.ui.floated.image:last-child {
- margin-bottom: 0em;
-}
-
-
-.ui.centered.images,
-.ui.centered.image {
- margin-left: auto;
- margin-right: auto;
+& when (@variationImageInline) {
+ /*--------------
+ Inline
+ ---------------*/
+
+ .ui.inline.image,
+ .ui.inline.image svg,
+ .ui.inline.image img {
+ display: inline-block;
+ }
+}
+
+& when (@variationImageAligned) {
+ /*------------------
+ Vertical Aligned
+ -------------------*/
+
+ .ui.top.aligned.images .image,
+ .ui.top.aligned.image,
+ .ui.top.aligned.image svg,
+ .ui.top.aligned.image img {
+ display: inline-block;
+ vertical-align: top;
+ }
+ .ui.middle.aligned.images .image,
+ .ui.middle.aligned.image,
+ .ui.middle.aligned.image svg,
+ .ui.middle.aligned.image img {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .ui.bottom.aligned.images .image,
+ .ui.bottom.aligned.image,
+ .ui.bottom.aligned.image svg,
+ .ui.bottom.aligned.image img {
+ display: inline-block;
+ vertical-align: bottom;
+ }
+}
+
+& when (@variationImageRounded) {
+ /*--------------
+ Rounded
+ ---------------*/
+
+ .ui.rounded.images .image,
+ .ui.rounded.image,
+ .ui.rounded.images .image > *,
+ .ui.rounded.image > * {
+ border-radius: @roundedBorderRadius;
+ }
+}
+
+& when (@variationImageBordered) {
+ /*--------------
+ Bordered
+ ---------------*/
+
+ .ui.bordered.images .image,
+ .ui.bordered.images img,
+ .ui.bordered.images svg,
+ .ui.bordered.image img,
+ .ui.bordered.image svg,
+ img.ui.bordered.image {
+ border: @imageBorder;
+ }
+}
+
+& when (@variationImageCircular) {
+ /*--------------
+ Circular
+ ---------------*/
+
+ .ui.circular.images,
+ .ui.circular.image {
+ overflow: hidden;
+ }
+
+ .ui.circular.images .image,
+ .ui.circular.image,
+ .ui.circular.images .image > *,
+ .ui.circular.image > * {
+ -webkit-border-radius: @circularRadius;
+ -moz-border-radius: @circularRadius;
+ border-radius: @circularRadius;
+ }
+}
+
+& when (@variationImageFluid) {
+ /*--------------
+ Fluid
+ ---------------*/
+
+ .ui.fluid.images,
+ .ui.fluid.image,
+ .ui.fluid.images img,
+ .ui.fluid.images svg,
+ .ui.fluid.image svg,
+ .ui.fluid.image img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+}
+
+& when (@variationImageAvatar) {
+ /*--------------
+ Avatar
+ ---------------*/
+
+ .ui.avatar.images .image,
+ .ui.avatar.images img,
+ .ui.avatar.images svg,
+ .ui.avatar.image img,
+ .ui.avatar.image svg,
+ .ui.avatar.image {
+ margin-right: @avatarMargin;
+
+ display: inline-block;
+ width: @avatarSize;
+ height: @avatarSize;
+
+ -webkit-border-radius: @circularRadius;
+ -moz-border-radius: @circularRadius;
+ border-radius: @circularRadius;
+ }
+}
+
+& when (@variationImageSpaced) {
+ /*-------------------
+ Spaced
+ --------------------*/
+
+ .ui.spaced.image {
+ display: inline-block !important;
+ margin-left: @spacedDistance;
+ margin-right: @spacedDistance;
+ }
+
+ .ui[class*="left spaced"].image {
+ margin-left: @spacedDistance;
+ margin-right: 0;
+ }
+
+ .ui[class*="right spaced"].image {
+ margin-left: 0;
+ margin-right: @spacedDistance;
+ }
+}
+
+& when (@variationImageFloated) {
+ /*-------------------
+ Floated
+ --------------------*/
+
+ .ui.floated.image,
+ .ui.floated.images {
+ float: left;
+ margin-right: @floatedHorizontalMargin;
+ margin-bottom: @floatedVerticalMargin;
+ }
+ .ui.right.floated.images,
+ .ui.right.floated.image {
+ float: right;
+ margin-right: 0;
+ margin-bottom: @floatedVerticalMargin;
+ margin-left: @floatedHorizontalMargin;
+ }
+
+ .ui.floated.images:last-child,
+ .ui.floated.image:last-child {
+ margin-bottom: 0;
+ }
+}
+
+& when (@variationImageCentered) {
+ .ui.centered.images,
+ .ui.centered.image {
+ margin-left: auto;
+ margin-right: auto;
+ }
}
/*--------------
Sizes
---------------*/
-.ui.mini.images .image,
-.ui.mini.images img,
-.ui.mini.images svg,
-.ui.mini.image {
- width: @miniWidth;
- height: auto;
- font-size: @mini;
-}
-.ui.tiny.images .image,
-.ui.tiny.images img,
-.ui.tiny.images svg,
-.ui.tiny.image {
- width: @tinyWidth;
- height: auto;
- font-size: @tiny;
-}
-.ui.small.images .image,
-.ui.small.images img,
-.ui.small.images svg,
-.ui.small.image {
- width: @smallWidth;
- height: auto;
- font-size: @small;
-}
.ui.medium.images .image,
.ui.medium.images img,
.ui.medium.images svg,
@@ -275,54 +269,37 @@ img.ui.bordered.image {
height: auto;
font-size: @medium;
}
-.ui.large.images .image,
-.ui.large.images img,
-.ui.large.images svg,
-.ui.large.image {
- width: @largeWidth;
- height: auto;
- font-size: @large;
-}
-.ui.big.images .image,
-.ui.big.images img,
-.ui.big.images svg,
-.ui.big.image {
- width: @bigWidth;
- height: auto;
- font-size: @big;
-}
-.ui.huge.images .image,
-.ui.huge.images img,
-.ui.huge.images svg,
-.ui.huge.image {
- width: @hugeWidth;
- height: auto;
- font-size: @huge;
-}
-.ui.massive.images .image,
-.ui.massive.images img,
-.ui.massive.images svg,
-.ui.massive.image {
- width: @massiveWidth;
- height: auto;
- font-size: @massive;
-}
-
-
-/*******************************
- Groups
-*******************************/
-
-.ui.images {
- font-size: 0em;
- margin: 0em -@imageHorizontalMargin 0rem;
-}
-
-.ui.images .image,
-.ui.images > img,
-.ui.images > svg {
- display: inline-block;
- margin: 0em @imageHorizontalMargin @imageVerticalMargin;
+& when not (@variationImageSizes = false) {
+ each(@variationImageSizes, {
+ @w: @{value}Width;
+ @s: @@value;
+ .ui.@{value}.images .image,
+ .ui.@{value}.images img,
+ .ui.@{value}.images svg,
+ .ui.@{value}.image {
+ width: @@w;
+ height: auto;
+ font-size: @s;
+ }
+ })
+}
+
+& when (@variationImageGroups) {
+ /*******************************
+ Groups
+ *******************************/
+
+ .ui.images {
+ font-size: 0;
+ margin: 0 -@imageHorizontalMargin 0;
+ }
+
+ .ui.images .image,
+ .ui.images > img,
+ .ui.images > svg {
+ display: inline-block;
+ margin: 0 @imageHorizontalMargin @imageVerticalMargin;
+ }
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/input.less b/ui/src/definitions/elements/input.less
index 22d439f1200..3eb87367eb5 100644
--- a/ui/src/definitions/elements/input.less
+++ b/ui/src/definitions/elements/input.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Input
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Input
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -35,7 +35,7 @@
color: @inputColor;
}
.ui.input > input {
- margin: 0em;
+ margin: 0;
max-width: 100%;
flex: 1 0 auto;
outline: none;
@@ -76,19 +76,20 @@
/*******************************
States
*******************************/
+& when (@variationInputDisabled) {
+ /*--------------------
+ Disabled
+ ---------------------*/
-/*--------------------
- Disabled
----------------------*/
-
-.ui.disabled.input,
-.ui.input:not(.disabled) input[disabled] {
- opacity: @disabledOpacity;
-}
+ .ui.disabled.input,
+ .ui.input:not(.disabled) input[disabled] {
+ opacity: @disabledOpacity;
+ }
-.ui.disabled.input > input,
-.ui.input:not(.disabled) input[disabled] {
- pointer-events: none;
+ .ui.disabled.input > input,
+ .ui.input:not(.disabled) input[disabled] {
+ pointer-events: none;
+ }
}
/*--------------------
@@ -103,43 +104,41 @@
box-shadow: @downBoxShadow;
}
-/*--------------------
- Loading
----------------------*/
+& when (@variationInputLoading) {
+ /*--------------------
+ Loading
+ ---------------------*/
-.ui.loading.loading.input > i.icon:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
+ .ui.loading.loading.input > i.icon:before {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
-}
-.ui.loading.loading.input > i.icon:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
+ border-radius: @circularRadius;
+ border: @loaderLineWidth solid @loaderFillColor;
+ }
+ .ui.loading.loading.input > i.icon:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
- animation: button-spin @loaderSpeed linear;
- animation-iteration-count: infinite;
+ animation: loader @loaderSpeed infinite linear;
- border-radius: @circularRadius;
+ border: @loaderLineWidth solid @loaderLineColor;
+ border-radius: @circularRadius;
- border-color: @loaderLineColor transparent transparent;
- border-style: solid;
- border-width: @loaderLineWidth;
-
- box-shadow: 0px 0px 0px 1px transparent;
+ box-shadow: 0 0 0 1px transparent;
+ }
}
@@ -168,341 +167,399 @@
}
-
-/*--------------------
- Error
----------------------*/
-
-.ui.input.error > input {
- background-color: @errorBackground;
- border-color: @errorBorder;
- color: @errorColor;
- box-shadow: @errorBoxShadow;
-}
-
-/* Error Placeholder */
-.ui.input.error > input::-webkit-input-placeholder {
- color: @placeholderErrorColor;
-}
-.ui.input.error > input::-moz-placeholder {
- color: @placeholderErrorColor;
-}
-.ui.input.error > input:-ms-input-placeholder {
- color: @placeholderErrorColor !important;
-}
-
-/* Focused Error Placeholder */
-.ui.input.error > input:focus::-webkit-input-placeholder {
- color: @placeholderErrorFocusColor;
+& when (@variationInputStates) {
+ /*--------------------
+ States
+ ---------------------*/
+ each(@formStates, {
+ @state: replace(@key, '@', '');
+
+ .ui.input.@{state} > input {
+ background-color: @formStates[@@state][background];
+ border-color: @formStates[@@state][borderColor];
+ color: @formStates[@@state][color];
+ box-shadow: @formStates[@@state][boxShadow];
+ }
+
+ /* Placeholder */
+ .ui.input.@{state} > input::-webkit-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor];
+ }
+ .ui.input.@{state} > input::-moz-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor];
+ }
+ .ui.input.@{state} > input:-ms-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderColor] !important;
+ }
+
+ /* Focused Placeholder */
+ .ui.input.@{state} > input:focus::-webkit-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor];
+ }
+ .ui.input.@{state} > input:focus::-moz-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor];
+ }
+ .ui.input.@{state} > input:focus:-ms-input-placeholder {
+ color: @formStates[@@state][inputPlaceholderFocusColor] !important;
+ }
+ })
}
-.ui.input.error > input:focus::-moz-placeholder {
- color: @placeholderErrorFocusColor;
-}
-.ui.input.error > input:focus:-ms-input-placeholder {
- color: @placeholderErrorFocusColor !important;
-}
-
/*******************************
Variations
*******************************/
-/*--------------------
- Transparent
----------------------*/
-
-
-.ui.transparent.input > input {
- border-color: transparent !important;
- background-color: transparent !important;
- padding: 0em !important;
- box-shadow: none !important;
- border-radius: 0px !important;
-}
-
-/* Transparent Icon */
-.ui.transparent.icon.input > i.icon {
- width: @transparentIconWidth;
-}
-.ui.transparent.icon.input > input {
- padding-left: 0em !important;
- padding-right: @transparentIconMargin !important;
-}
-.ui.transparent[class*="left icon"].input > input {
- padding-left: @transparentIconMargin !important;
- padding-right: 0em !important;
-}
-
-/* Transparent Inverted */
-.ui.transparent.inverted.input {
- color: @transparentInvertedColor;
-}
-.ui.transparent.inverted.input > input {
- color: inherit;
-}
-
-.ui.transparent.inverted.input > input::-webkit-input-placeholder {
- color: @transparentInvertedPlaceholderColor;
-}
-.ui.transparent.inverted.input > input::-moz-placeholder {
- color: @transparentInvertedPlaceholderColor;
-}
-.ui.transparent.inverted.input > input:-ms-input-placeholder {
- color: @transparentInvertedPlaceholderColor;
-}
-
-
-/*--------------------
- Icon
----------------------*/
-
-.ui.icon.input > i.icon {
- cursor: default;
- position: absolute;
- line-height: 1;
- text-align: center;
- top: 0px;
- right: 0px;
- margin: 0em;
- height: 100%;
-
- width: @iconWidth;
- opacity: @iconOpacity;
- border-radius: 0em @borderRadius @borderRadius 0em;
- transition: @iconTransition;
-}
-.ui.icon.input > i.icon:not(.link) {
- pointer-events: none;
-}
-.ui.icon.input > input {
- padding-right: @iconMargin !important;
-}
-
-.ui.icon.input > i.icon:before,
-.ui.icon.input > i.icon:after {
- left: 0;
- position: absolute;
- text-align: center;
- top: 50%;
- width: 100%;
- margin-top: @iconOffset;
-}
-.ui.icon.input > i.link.icon {
- cursor: pointer;
-}
-.ui.icon.input > i.circular.icon {
- top: @circularIconVerticalOffset;
- right: @circularIconHorizontalOffset;
-}
-
-/* Left Icon Input */
-.ui[class*="left icon"].input > i.icon {
- right: auto;
- left: @borderWidth;
- border-radius: @borderRadius 0em 0em @borderRadius;
-}
-.ui[class*="left icon"].input > i.circular.icon {
- right: auto;
- left: @circularIconHorizontalOffset;
-}
-.ui[class*="left icon"].input > input {
- padding-left: @iconMargin !important;
- padding-right: @horizontalPadding !important;
-}
-
-/* Focus */
-.ui.icon.input > input:focus ~ i.icon {
- opacity: 1;
-}
-
-/*--------------------
- Labeled
----------------------*/
-
-/* Adjacent Label */
-.ui.labeled.input > .label {
- flex: 0 0 auto;
- margin: 0;
- font-size: @relativeMedium;
-}
-.ui.labeled.input > .label:not(.corner) {
- padding-top: @verticalPadding;
- padding-bottom: @verticalPadding;
-}
-
-/* Regular Label on Left */
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
-}
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-left-color: transparent;
-}
-.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
- border-left-color: @focusBorderColor;
-}
-
-/* Regular Label on Right */
-.ui[class*="right labeled"].input > input {
- border-top-right-radius: 0px !important;
- border-bottom-right-radius: 0px !important;
- border-right-color: transparent !important;
-}
-.ui[class*="right labeled"].input > input + .label {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
-}
-
-.ui[class*="right labeled"].input > input:focus {
- border-right-color: @focusBorderColor !important;
-}
-
-/* Corner Label */
-.ui.labeled.input .corner.label {
- top: @labelCornerTop;
- right: @labelCornerRight;
- font-size: @labelCornerSize;
- border-radius: 0em @borderRadius 0em 0em;
-}
-
-/* Spacing with corner label */
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
- padding-right: @labeledMargin !important;
-}
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
- padding-right: @labeledIconInputMargin !important;
-}
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
- margin-right: @labeledIconMargin;
-}
-
-/* Left Labeled */
-.ui[class*="left corner labeled"].labeled.input > input {
- padding-left: @labeledMargin !important;
-}
-.ui[class*="left corner labeled"].icon.input > input {
- padding-left: @labeledIconInputMargin !important;
-}
-.ui[class*="left corner labeled"].icon.input > .icon {
- margin-left: @labeledIconMargin;
-}
-
-/* Corner Label Position */
-.ui.input > .ui.corner.label {
- top: @borderWidth;
- right: @borderWidth;
-}
-.ui.input > .ui.left.corner.label {
- right: auto;
- left: @borderWidth;
-}
-
-
-/*--------------------
- Action
----------------------*/
-
-.ui.action.input > .button,
-.ui.action.input > .buttons {
- display: flex;
- align-items: center;
- flex: 0 0 auto;
-}
-.ui.action.input > .button,
-.ui.action.input > .buttons > .button {
- padding-top: @verticalPadding;
- padding-bottom: @verticalPadding;
- margin: 0;
-}
-
-/* Button on Right */
-.ui.action.input:not([class*="left action"]) > input {
- border-top-right-radius: 0px !important;
- border-bottom-right-radius: 0px !important;
- border-right-color: transparent !important;
-}
-.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child),
-.ui.action.input:not([class*="left action"]) > .button:not(:first-child),
-.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button {
- border-radius: 0px;
-}
-.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
-.ui.action.input:not([class*="left action"]) > .button:last-child,
-.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
- border-radius: 0px @borderRadius @borderRadius 0px;
-}
-
-/* Input Focus */
-.ui.action.input:not([class*="left action"]) > input:focus {
- border-right-color: @focusBorderColor !important;
-}
-
-/* Button on Left */
-.ui[class*="left action"].input > input {
- border-top-left-radius: 0px !important;
- border-bottom-left-radius: 0px !important;
- border-left-color: transparent !important;
-}
-.ui[class*="left action"].input > .dropdown,
-.ui[class*="left action"].input > .button,
-.ui[class*="left action"].input > .buttons > .button {
- border-radius: 0px;
-}
-.ui[class*="left action"].input > .dropdown:first-child,
-.ui[class*="left action"].input > .button:first-child,
-.ui[class*="left action"].input > .buttons:first-child > .button {
- border-radius: @borderRadius 0px 0px @borderRadius;
-}
-/* Input Focus */
-.ui[class*="left action"].input > input:focus {
- border-left-color: @focusBorderColor !important;
-}
-
-/*--------------------
- Inverted
----------------------*/
-
-/* Standard */
-.ui.inverted.input > input {
- border: none;
-}
-
-/*--------------------
- Fluid
----------------------*/
-
-.ui.fluid.input {
- display: flex;
-}
-.ui.fluid.input > input {
- width: 0px !important;
+& when (@variationInputTransparent) {
+ /*--------------------
+ Transparent
+ ---------------------*/
+
+
+ .ui.transparent.input > textarea,
+ .ui.transparent.input > input {
+ border-color: transparent !important;
+ background-color: transparent !important;
+ padding: 0;
+ box-shadow: none !important;
+ border-radius: 0 !important;
+ }
+ .field .ui.transparent.input > textarea {
+ padding: @padding;
+ }
+
+ /* Transparent Icon */
+ :not(.field) > .ui.transparent.icon.input > i.icon {
+ width: @transparentIconWidth;
+ }
+ :not(.field) > .ui.ui.ui.transparent.icon.input > input {
+ padding-left: 0;
+ padding-right: @transparentIconMargin;
+ }
+ :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
+ padding-left: @transparentIconMargin;
+ padding-right: 0;
+ }
+ & when (@variationInputInverted) {
+ /* Transparent Inverted */
+ .ui.transparent.inverted.input {
+ color: @transparentInvertedColor;
+ }
+ .ui.ui.transparent.inverted.input > textarea,
+ .ui.ui.transparent.inverted.input > input {
+ color: inherit;
+ }
+
+ .ui.transparent.inverted.input > input::-webkit-input-placeholder {
+ color: @transparentInvertedPlaceholderColor;
+ }
+ .ui.transparent.inverted.input > input::-moz-placeholder {
+ color: @transparentInvertedPlaceholderColor;
+ }
+ .ui.transparent.inverted.input > input:-ms-input-placeholder {
+ color: @transparentInvertedPlaceholderColor;
+ }
+ }
+}
+
+& when (@variationInputIcon) {
+ /*--------------------
+ Icon
+ ---------------------*/
+
+ .ui.icon.input > i.icon {
+ cursor: default;
+ position: absolute;
+ line-height: 1;
+ text-align: center;
+ top: 0;
+ right: 0;
+ margin: 0;
+ height: 100%;
+
+ width: @iconWidth;
+ opacity: @iconOpacity;
+ border-radius: 0 @borderRadius @borderRadius 0;
+ transition: @iconTransition;
+ }
+ .ui.icon.input > i.icon:not(.link) {
+ pointer-events: none;
+ }
+ .ui.ui.ui.ui.icon.input > textarea,
+ .ui.ui.ui.ui.icon.input > input {
+ padding-right: @iconMargin;
+ }
+
+ .ui.icon.input > i.icon:before,
+ .ui.icon.input > i.icon:after {
+ left: 0;
+ position: absolute;
+ text-align: center;
+ top: 50%;
+ width: 100%;
+ margin-top: @iconOffset;
+ }
+ .ui.icon.input > i.link.icon {
+ cursor: pointer;
+ }
+ .ui.icon.input > i.circular.icon {
+ top: @circularIconVerticalOffset;
+ right: @circularIconHorizontalOffset;
+ }
+
+ /* Left Icon Input */
+ .ui[class*="left icon"].input > i.icon {
+ right: auto;
+ left: @borderWidth;
+ border-radius: @borderRadius 0 0 @borderRadius;
+ }
+ .ui[class*="left icon"].input > i.circular.icon {
+ right: auto;
+ left: @circularIconHorizontalOffset;
+ }
+ .ui.ui.ui.ui[class*="left icon"].input > textarea,
+ .ui.ui.ui.ui[class*="left icon"].input > input {
+ padding-left: @iconMargin;
+ padding-right: @horizontalPadding;
+ }
+
+ /* Focus */
+ .ui.icon.input > textarea:focus ~ i.icon,
+ .ui.icon.input > input:focus ~ i.icon {
+ opacity: 1;
+ }
+}
+
+& when (@variationInputLabeled) {
+ /*--------------------
+ Labeled
+ ---------------------*/
+
+ /* Adjacent Label */
+ .ui.labeled.input > .label {
+ flex: 0 0 auto;
+ margin: 0;
+ font-size: @relativeMedium;
+ }
+ .ui.labeled.input > .label:not(.corner) {
+ padding-top: @verticalPadding;
+ padding-bottom: @verticalPadding;
+ }
+
+ /* Regular Label on Left */
+ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-color: transparent;
+ }
+ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
+ border-left-color: @focusBorderColor;
+ }
+
+ /* Regular Label on Right */
+ .ui[class*="right labeled"].input > input {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ border-right-color: transparent !important;
+ }
+ .ui[class*="right labeled"].input > input + .label {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ .ui[class*="right labeled"].input > input:focus {
+ border-right-color: @focusBorderColor !important;
+ }
+}
+
+& when (@variationInputCorner) {
+ /* Corner Label */
+ .ui.labeled.input .corner.label {
+ top: @labelCornerTop;
+ right: @labelCornerRight;
+ font-size: @labelCornerSize;
+ border-radius: 0 @borderRadius 0 0;
+ }
+
+ /* Spacing with corner label */
+ .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
+ .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
+ padding-right: @labeledMargin !important;
+ }
+ .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
+ .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
+ padding-right: @labeledIconInputMargin !important;
+ }
+ .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
+ margin-right: @labeledIconMargin;
+ }
+
+ /* Left Labeled */
+ .ui[class*="left corner labeled"].labeled.input > textarea,
+ .ui[class*="left corner labeled"].labeled.input > input {
+ padding-left: @labeledMargin !important;
+ }
+ & when (@variationInputIcon) {
+ .ui[class*="left corner labeled"].icon.input > textarea,
+ .ui[class*="left corner labeled"].icon.input > input {
+ padding-left: @labeledIconInputMargin !important;
+ }
+ .ui[class*="left corner labeled"].icon.input > .icon {
+ margin-left: @labeledIconMargin;
+ }
+ }
+}
+& when (@variationInputIcon) {
+ .ui.icon.input > textarea ~ .icon {
+ height: @textareaIconHeight;
+ }
+ :not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
+ height: @transparentTextareaIconHeight;
+ }
+}
+& when (@variationInputCorner) {
+ /* Corner Label Position */
+ .ui.input > .ui.corner.label {
+ top: @borderWidth;
+ right: @borderWidth;
+ }
+ .ui.input > .ui.left.corner.label {
+ right: auto;
+ left: @borderWidth;
+ }
+}
+
+& when (@variationInputLabeled) or (@variationInputAction) {
+ /* Labeled and action input states */
+ each(@formStates, {
+ @state: replace(@key, '@', '');
+ @borderColor: @formStates[@@state][borderColor];
+
+ .ui.form > .field.@{state} > .ui.action.input > .ui.button,
+ .ui.form > .field.@{state} > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
+ .ui.action.input.@{state} > .ui.button,
+ .ui.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label {
+ border-top: @borderWidth solid @borderColor;
+ border-bottom: @borderWidth solid @borderColor;
+ }
+ .ui.form > .field.@{state} > .ui.left.action.input > .ui.button,
+ .ui.form > .field.@{state} > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
+ .ui.left.action.input.@{state} > .ui.button,
+ .ui.labeled.input.@{state}:not(.right):not([class*="corner labeled"]) > .ui.label {
+ border-left: @borderWidth solid @borderColor;
+ }
+ .ui.form > .field.@{state} > .ui.action.input:not(.left) > input + .ui.button,
+ .ui.form > .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
+ .ui.action.input.@{state}:not(.left) > input + .ui.button,
+ .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
+ border-right: @borderWidth solid @borderColor;
+ }
+ .ui.form > .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
+ .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label:first-child {
+ border-left: @borderWidth solid @borderColor;
+ }
+ })
+}
+
+& when (@variationInputAction) {
+ /*--------------------
+ Action
+ ---------------------*/
+
+ .ui.action.input > .button,
+ .ui.action.input > .buttons {
+ display: flex;
+ align-items: center;
+ flex: 0 0 auto;
+ }
+ .ui.action.input > .button,
+ .ui.action.input > .buttons > .button {
+ padding-top: @verticalPadding;
+ padding-bottom: @verticalPadding;
+ margin: 0;
+ }
+
+ /* Input when ui Left*/
+ .ui[class*="left action"].input > input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-color: transparent;
+ }
+
+ /* Input when ui Right*/
+ .ui.action.input:not([class*="left action"]) > input {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-color: transparent;
+ }
+
+ /* Button and Dropdown */
+ .ui.action.input > .dropdown:first-child,
+ .ui.action.input > .button:first-child,
+ .ui.action.input > .buttons:first-child > .button {
+ border-radius: @borderRadius 0 0 @borderRadius;
+ }
+ .ui.action.input > .dropdown:not(:first-child),
+ .ui.action.input > .button:not(:first-child),
+ .ui.action.input > .buttons:not(:first-child) > .button {
+ border-radius: 0;
+ }
+ .ui.action.input > .dropdown:last-child,
+ .ui.action.input > .button:last-child,
+ .ui.action.input > .buttons:last-child > .button {
+ border-radius: 0 @borderRadius @borderRadius 0;
+ }
+
+ /* Input Focus */
+ .ui.action.input:not([class*="left action"]) > input:focus {
+ border-right-color: @focusBorderColor;
+ }
+
+ .ui.ui[class*="left action"].input > input:focus {
+ border-left-color: @focusBorderColor;
+ }
+}
+
+& when (@variationInputInverted) {
+ /*--------------------
+ Inverted
+ ---------------------*/
+
+ /* Standard */
+ .ui.inverted.input > input {
+ border: none;
+ }
+}
+
+& when (@variationInputFluid) {
+ /*--------------------
+ Fluid
+ ---------------------*/
+
+ .ui.fluid.input {
+ display: flex;
+ }
+ .ui.fluid.input > input {
+ width: 0 !important;
+ }
}
/*--------------------
Size
---------------------*/
-.ui.mini.input {
- font-size: @relativeMini;
-}
-.ui.small.input {
- font-size: @relativeSmall;
-}
.ui.input {
font-size: @relativeMedium;
}
-.ui.large.input {
- font-size: @relativeLarge;
-}
-.ui.big.input {
- font-size: @relativeBig;
-}
-.ui.huge.input {
- font-size: @relativeHuge;
-}
-.ui.massive.input {
- font-size: @relativeMassive;
+& when not (@variationInputSizes = false) {
+ each(@variationInputSizes, {
+ @s: @{value}InputSize;
+ .ui.@{value}.input {
+ font-size: @@s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/label.less b/ui/src/definitions/elements/label.less
index fcd066a1d7b..ee17fdbc5bb 100644
--- a/ui/src/definitions/elements/label.less
+++ b/ui/src/definitions/elements/label.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Label
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Label
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -43,10 +43,10 @@
}
.ui.label:first-child {
- margin-left: 0em;
+ margin-left: 0;
}
.ui.label:last-child {
- margin-right: 0em;
+ margin-right: 0;
}
/* Link */
@@ -69,13 +69,14 @@ a.ui.label {
.ui.label > img {
width: auto !important;
vertical-align: middle;
- height: @imageHeight !important;
+ height: @imageHeight;
}
/* Icon */
+.ui.left.icon.label > .icon,
.ui.label > .icon {
width: auto;
- margin: 0em @iconDistance 0em 0em;
+ margin: 0 @iconDistance 0 0;
}
/* Detail */
@@ -87,30 +88,48 @@ a.ui.label {
opacity: @detailOpacity;
}
.ui.label > .detail .icon {
- margin: 0em @detailIconDistance 0em 0em;
+ margin: 0 @detailIconDistance 0 0;
}
-
/* Removable label */
.ui.label > .close.icon,
.ui.label > .delete.icon {
cursor: pointer;
- margin-right: 0em;
- margin-left: @deleteMargin;
font-size: @deleteSize;
opacity: @deleteOpacity;
transition: @deleteTransition;
}
+.ui.label > .close.icon:hover,
.ui.label > .delete.icon:hover {
opacity: 1;
}
+/* Backward compatible positioning */
+.ui.label.left.icon > .close.icon,
+.ui.label.left.icon > .delete.icon {
+ margin: 0 @deleteMargin 0 0;
+}
+.ui.label:not(.icon) > .close.icon,
+.ui.label:not(.icon) > .delete.icon {
+ margin: 0 0 0 @deleteMargin;
+}
+
+/* Label for only an icon */
+.ui.icon.label > .icon {
+ margin: 0 auto;
+}
+
+/* Right Side Icon */
+.ui.right.icon.label > .icon {
+ margin: 0 0 0 @iconDistance;
+}
+
/*-------------------
Group
--------------------*/
.ui.labels > .label {
- margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em;
+ margin: 0 @groupHorizontalMargin @groupVerticalMargin 0;
}
@@ -140,12 +159,12 @@ a.ui.label {
}
/* Padding on next content after a label */
-.ui.top.attached.label:first-child + :not(.attached),
-.ui.top.attached.label + [class*="right floated"] + * {
+.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
+.ui.top.attached.label + :not(.attached) {
margin-top: @attachedSegmentPadding !important;
}
-.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {
- margin-top: 0em;
+.ui.bottom.attached.label ~ :last-child:not(.attached) {
+ margin-top:0;
margin-bottom: @attachedSegmentPadding !important;
}
@@ -153,300 +172,343 @@ a.ui.label {
/*******************************
Types
*******************************/
-
-.ui.image.label {
- width: auto !important;
- margin-top: 0em;
- margin-bottom: 0em;
- max-width: 9999px;
- vertical-align: baseline;
- text-transform: none;
-
- background: @imageLabelBackground;
- padding: @imageLabelPadding;
- border-radius: @imageLabelBorderRadius;
- box-shadow: @imageLabelBoxShadow;
-}
-
-.ui.image.label img {
- display: inline-block;
- vertical-align: top;
-
- height: @imageLabelImageHeight;
- margin: @imageLabelImageMargin;
- border-radius: @imageLabelImageBorderRadius;
-}
-
-.ui.image.label .detail {
- background: @imageLabelDetailBackground;
- margin: @imageLabelDetailMargin;
- padding: @imageLabelDetailPadding;
- border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em;
-}
-
+& when (@variationLabelImage) {
+ .ui.image.label {
+ width: auto !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ max-width: 9999px;
+ vertical-align: baseline;
+ text-transform: none;
+
+ background: @imageLabelBackground;
+ padding: @imageLabelPadding;
+ border-radius: @imageLabelBorderRadius;
+ box-shadow: @imageLabelBoxShadow;
+ }
+
+ .ui.image.label img {
+ display: inline-block;
+ vertical-align: top;
+
+ height: @imageLabelImageHeight;
+ margin: @imageLabelImageMargin;
+ border-radius: @imageLabelImageBorderRadius;
+ }
+
+ .ui.image.label .detail {
+ background: @imageLabelDetailBackground;
+ margin: @imageLabelDetailMargin;
+ padding: @imageLabelDetailPadding;
+ border-radius: 0 @imageLabelBorderRadius @imageLabelBorderRadius 0;
+ }
+}
+
+& when (@variationLabelTag) {
/*-------------------
Tag
--------------------*/
-.ui.tag.labels .label,
-.ui.tag.label {
- margin-left: 1em;
- position: relative;
- padding-left: @tagHorizontalPadding;
- padding-right: @tagHorizontalPadding;
-
- border-radius: 0em @borderRadius @borderRadius 0em;
- transition: @tagTransition;
-}
-.ui.tag.labels .label:before,
-.ui.tag.label:before {
- position: absolute;
- transform: translateY(-50%) translateX(50%) rotate(-45deg);
-
- top: @tagTriangleTopOffset;
- right: @tagTriangleRightOffset;
- content: '';
-
- background-color: inherit;
- background-image: @tagTriangleBackgroundImage;
+ .ui.tag.labels .label,
+ .ui.tag.label {
+ margin-left: 1em;
+ position: relative;
+ padding-left: @tagHorizontalPadding;
+ padding-right: @tagHorizontalPadding;
- width: @tagTriangleSize;
- height: @tagTriangleSize;
+ border-radius: 0 @borderRadius @borderRadius 0;
transition: @tagTransition;
-}
+ }
+ .ui.tag.labels .label:before,
+ .ui.tag.label:before {
+ position: absolute;
+ transform: translateY(-50%) translateX(50%) rotate(-45deg);
+ top: @tagTriangleTopOffset;
+ right: @tagTriangleRightOffset;
+ content: '';
-.ui.tag.labels .label:after,
-.ui.tag.label:after {
- position: absolute;
- content: '';
- top: 50%;
- left: -(@tagCircleSize / 2);
+ background-color: inherit;
+ background-image: @tagTriangleBackgroundImage;
- margin-top: -(@tagCircleSize / 2);
- background-color: @tagCircleColor !important;
- width: @tagCircleSize;
- height: @tagCircleSize;
-
- box-shadow: @tagCircleBoxShadow;
- border-radius: @circularRadius;
-}
+ width: @tagTriangleSize;
+ height: @tagTriangleSize;
+ transition: @tagTransition;
+ }
+ .ui.tag.labels .label:after,
+ .ui.tag.label:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: -(@tagCircleSize / 2);
+
+ margin-top: -(@tagCircleSize / 2);
+ background-color: @tagCircleColor;
+ width: @tagCircleSize;
+ height: @tagCircleSize;
+
+ box-shadow: @tagCircleBoxShadow;
+ border-radius: @circularRadius;
+ }
+ & when (@variationLabelBasic) {
+ .ui.basic.tag.labels .label:before,
+ .ui.basic.tag.label:before {
+ border-color: inherit;
+ border-width: @basicBorderWidth 0 0 @basicBorderWidth;
+ border-style: inherit;
+ right: @basicBorderFullWidthOffset;
+ }
+ .ui.basic.tag.labels .label:after,
+ .ui.basic.tag.label:after {
+ box-shadow: @basicTagCircleBoxShadow;
+ }
+ }
+}
+
+& when (@variationLabelCorner) {
/*-------------------
Corner Label
--------------------*/
-.ui.corner.label {
- position: absolute;
- top: 0em;
- right: 0em;
- margin: 0em;
- padding: 0em;
- text-align: center;
-
- border-color: @backgroundColor;
-
- width: @cornerTriangleSize;
- height: @cornerTriangleSize;
- z-index: @cornerTriangleZIndex;
- transition: @cornerTriangleTransition;
-}
-
-/* Icon Label */
-.ui.corner.label{
- background-color: transparent !important;
-}
-.ui.corner.label:after {
- position: absolute;
- content: "";
- right: 0em;
- top: 0em;
- z-index: -1;
-
- width: 0em;
- height: 0em;
- background-color: transparent !important;
-
- border-top: 0em solid transparent;
- border-right: @cornerTriangleSize solid transparent;
- border-bottom: @cornerTriangleSize solid transparent;
- border-left: 0em solid transparent;
-
- border-right-color: inherit;
- transition: @cornerTriangleTransition;
-}
-
-.ui.corner.label .icon {
- cursor: default;
- position: relative;
- top: @cornerIconTopOffset;
- left: @cornerIconLeftOffset;
- font-size: @cornerIconSize;
- margin: 0em;
-}
-
-/* Left Corner */
-.ui.left.corner.label,
-.ui.left.corner.label:after {
- right: auto;
- left: 0em;
-}
-.ui.left.corner.label:after {
- border-top: @cornerTriangleSize solid transparent;
- border-right: @cornerTriangleSize solid transparent;
- border-bottom: 0em solid transparent;
- border-left: 0em solid transparent;
-
- border-top-color: inherit;
-}
-.ui.left.corner.label .icon {
- left: -@cornerIconLeftOffset;
-}
-
-/* Segment */
-.ui.segment > .ui.corner.label {
- top: -1px;
- right: -1px;
-}
-.ui.segment > .ui.left.corner.label {
- right: auto;
- left: -1px;
-}
-
-/*-------------------
- Ribbon
---------------------*/
-
-.ui.ribbon.label {
- position: relative;
- margin: 0em;
- min-width: max-content;
- border-radius: 0em @borderRadius @borderRadius 0em;
- border-color: @ribbonShadowColor;
-}
-
-.ui.ribbon.label:after {
- position: absolute;
- content: '';
-
- top: 100%;
- left: 0%;
- background-color: transparent !important;
-
- border-style: solid;
- border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em;
- border-color: transparent;
- border-right-color: inherit;
-
- width: 0em;
- height: 0em;
-}
-/* Positioning */
-.ui.ribbon.label {
- left: @ribbonOffset;
- margin-right: -@ribbonTriangleSize;
- padding-left: @ribbonDistance;
- padding-right: @ribbonTriangleSize;
-}
-.ui[class*="right ribbon"].label {
- left: @rightRibbonOffset;
- padding-left: @ribbonTriangleSize;
- padding-right: @ribbonDistance;
-}
-
-/* Right Ribbon */
-.ui[class*="right ribbon"].label {
- text-align: left;
- transform: translateX(-100%);
- border-radius: @borderRadius 0em 0em @borderRadius;
-}
-.ui[class*="right ribbon"].label:after {
- left: auto;
- right: 0%;
-
- border-style: solid;
- border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em;
- border-color: transparent;
- border-top-color: inherit;
-}
-
-/* Inside Table */
-.ui.image > .ribbon.label,
-.ui.card .image > .ribbon.label {
- position: absolute;
- top: @ribbonImageTopDistance;
-}
-.ui.card .image > .ui.ribbon.label,
-.ui.image > .ui.ribbon.label {
- left: @ribbonImageOffset;
-}
-.ui.card .image > .ui[class*="right ribbon"].label,
-.ui.image > .ui[class*="right ribbon"].label {
- left: @rightRibbonImageOffset;
- padding-left: @horizontalPadding;
-}
-
-/* Inside Table */
-.ui.table td > .ui.ribbon.label {
- left: @ribbonTableOffset;
-}
-.ui.table td > .ui[class*="right ribbon"].label {
- left: @rightRibbonTableOffset;
- padding-left: @horizontalPadding;
-}
-
-
-/*-------------------
- Attached
---------------------*/
-
-.ui[class*="top attached"].label,
-.ui.attached.label {
- width: 100%;
- position: absolute;
- margin: 0em;
- top: 0em;
- left: 0em;
-
- padding: @attachedVerticalPadding @attachedHorizontalPadding;
-
- border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em;
-}
-.ui[class*="bottom attached"].label {
- top: auto;
- bottom: 0em;
- border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius;
-}
-
-.ui[class*="top left attached"].label {
- width: auto;
- margin-top: 0em !important;
- border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em;
-}
+ .ui.corner.label {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+
+ border-color: @backgroundColor;
+
+ width: @cornerTriangleSize;
+ height: @cornerTriangleSize;
+ z-index: @cornerTriangleZIndex;
+ transition: @cornerTriangleTransition;
+ }
+
+ /* Icon Label */
+ .ui.corner.label{
+ background-color: transparent !important;
+ }
+ .ui.corner.label:after {
+ position: absolute;
+ content: "";
+ right: 0;
+ top: 0;
+ z-index: -1;
+
+ width: 0;
+ height: 0;
+ background-color: transparent;
+
+ border-top: 0 solid transparent;
+ border-right: @cornerTriangleSize solid transparent;
+ border-bottom: @cornerTriangleSize solid transparent;
+ border-left: 0 solid transparent;
+
+ border-right-color: inherit;
+ transition: @cornerTriangleTransition;
+ }
+
+ .ui.corner.label .icon {
+ cursor: inherit;
+ position: absolute;
+ top: @cornerIconTopOffset;
+ left: auto;
+ right: @cornerIconRightOffset;
+ font-size: @cornerIconSize;
+ margin: 0;
+ }
+
+ /* Left Corner */
+ .ui.left.corner.label,
+ .ui.left.corner.label:after {
+ right: auto;
+ left: 0;
+ }
+ .ui.left.corner.label:after {
+ border-top: @cornerTriangleSize solid transparent;
+ border-right: @cornerTriangleSize solid transparent;
+ border-bottom: 0 solid transparent;
+ border-left: 0 solid transparent;
+
+ border-top-color: inherit;
+ }
+ .ui.left.corner.label .icon {
+ left: @cornerIconLeftOffset;
+ right: auto;
+ }
+
+ /* Segment */
+ .ui.segment > .ui.corner.label {
+ top: -1px;
+ right: -1px;
+ }
+ .ui.segment > .ui.left.corner.label {
+ right: auto;
+ left: -1px;
+ }
+}
+
+& when (@variationLabelRibbon) {
+ /*-------------------
+ Ribbon
+ --------------------*/
+
+ .ui.ribbon.label {
+ position: relative;
+ margin: 0;
+ min-width: max-content;
+ border-radius: 0 @borderRadius @borderRadius 0;
+ border-color: @ribbonShadowColor;
+ }
+
+ .ui.ribbon.label:after {
+ position: absolute;
+ content: '';
-.ui[class*="top right attached"].label {
- width: auto;
- left: auto;
- right: 0em;
- border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius;
-}
-.ui[class*="bottom left attached"].label {
- width: auto;
- top: auto;
- bottom: 0em;
- border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius;
-}
-.ui[class*="bottom right attached"].label {
- top: auto;
- bottom: 0em;
- left: auto;
- right: 0em;
- width: auto;
- border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em;
+ top: 100%;
+ left: 0;
+ background-color: transparent;
+
+ border-style: solid;
+ border-width: 0 @ribbonTriangleSize @ribbonTriangleSize 0;
+ border-color: transparent;
+ border-right-color: inherit;
+
+ width: 0;
+ height: 0;
+ }
+ /* Positioning */
+ .ui.ribbon.label {
+ left: @ribbonOffset;
+ margin-right: -@ribbonTriangleSize;
+ padding-left: @ribbonDistance;
+ padding-right: @ribbonTriangleSize;
+ }
+ .ui[class*="right ribbon"].label {
+ left: @rightRibbonOffset;
+ padding-left: @ribbonTriangleSize;
+ padding-right: @ribbonDistance;
+ }
+ & when (@variationLabelBasic) {
+ .ui.basic.ribbon.label {
+ padding-top: @basicRibbonOffset;
+ padding-bottom: @basicRibbonOffset;
+ }
+ .ui.basic.ribbon.label:not([class*="right ribbon"]) {
+ padding-left: @basicRibbonTriangleSizeOffset;
+ padding-right: @basicRibbonTriangleSize;
+ }
+ .ui.basic[class*="right ribbon"].label {
+ padding-left: @basicRibbonTriangleSize;
+ padding-right: @basicRibbonTriangleSizeOffset;
+ }
+ .ui.basic.ribbon.label::after {
+ top: @basicBorderFullWidthOffset;
+ }
+ .ui.basic.ribbon.label:not([class*="right ribbon"])::after {
+ left: @basicBorderWidthOffset;
+ }
+ .ui.basic[class*="right ribbon"].label::after {
+ right: @basicBorderWidthOffset;
+ }
+ }
+ /* Right Ribbon */
+ .ui[class*="right ribbon"].label {
+ text-align: left;
+ transform: translateX(-100%);
+ border-radius: @borderRadius 0 0 @borderRadius;
+ }
+ .ui[class*="right ribbon"].label:after {
+ left: auto;
+ right: 0;
+
+ border-style: solid;
+ border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;
+ border-color: transparent;
+ border-top-color: inherit;
+ }
+
+ /* Inside Table */
+ .ui.image > .ribbon.label,
+ .ui.card .image > .ribbon.label {
+ position: absolute;
+ top: @ribbonImageTopDistance;
+ }
+ .ui.card .image > .ui.ribbon.label,
+ .ui.image > .ui.ribbon.label {
+ left: @ribbonImageOffset;
+ }
+ .ui.card .image > .ui[class*="right ribbon"].label,
+ .ui.image > .ui[class*="right ribbon"].label {
+ left: @rightRibbonImageOffset;
+ padding-left: @horizontalPadding;
+ }
+
+ /* Inside Table */
+ .ui.table td > .ui.ribbon.label {
+ left: @ribbonTableOffset;
+ }
+ .ui.table td > .ui[class*="right ribbon"].label {
+ left: @rightRibbonTableOffset;
+ padding-left: @horizontalPadding;
+ }
+}
+
+& when (@variationLabelAttached) {
+ /*-------------------
+ Attached
+ --------------------*/
+
+ .ui[class*="top attached"].label,
+ .ui.attached.label {
+ width: 100%;
+ position: absolute;
+ margin: 0;
+ top: 0;
+ left: 0;
+
+ padding: @attachedVerticalPadding @attachedHorizontalPadding;
+
+ border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0 0;
+ }
+ .ui[class*="bottom attached"].label {
+ top: auto;
+ bottom: 0;
+ border-radius: 0 0 @attachedCornerBorderRadius @attachedCornerBorderRadius;
+ }
+
+ .ui[class*="top left attached"].label {
+ width: auto;
+ margin-top: 0 !important;
+ border-radius: @attachedCornerBorderRadius 0 @attachedBorderRadius 0;
+ }
+
+ .ui[class*="top right attached"].label {
+ width: auto;
+ left: auto;
+ right: 0;
+ border-radius: 0 @attachedCornerBorderRadius 0 @attachedBorderRadius;
+ }
+ .ui[class*="bottom left attached"].label {
+ width: auto;
+ top: auto;
+ bottom: 0;
+ border-radius: 0 @attachedBorderRadius 0 @attachedCornerBorderRadius;
+ }
+ .ui[class*="bottom right attached"].label {
+ top: auto;
+ bottom: 0;
+ left: auto;
+ right: 0;
+ width: auto;
+ border-radius: @attachedBorderRadius 0 @attachedCornerBorderRadius 0;
+ }
}
-
/*******************************
States
*******************************/
@@ -454,16 +516,16 @@ a.ui.label {
/*-------------------
Disabled
--------------------*/
-
-.ui.label.disabled {
- opacity: 0.5;
+& when (@variationLabelDisabled) {
+ .ui.label.disabled {
+ opacity: 0.5;
+ }
}
-
/*-------------------
Hover
--------------------*/
-a.ui.labels .label:hover,
+.ui.labels a.label:hover,
a.ui.label:hover {
background-color: @labelHoverBackgroundColor;
border-color: @labelHoverBackgroundColor;
@@ -497,7 +559,7 @@ a.ui.label:hover:before {
Active Hover
--------------------*/
-a.ui.labels .active.label:hover,
+.ui.labels a.active.label:hover,
a.ui.active.label:hover {
background-color: @labelActiveHoverBackgroundColor;
border-color: @labelActiveHoverBackgroundColor;
@@ -505,8 +567,8 @@ a.ui.active.label:hover {
background-image: @labelActiveHoverBackgroundImage;
color: @labelActiveHoverTextColor;
}
-.ui.labels a.active.label:ActiveHover:before,
-a.ui.active.label:ActiveHover:before {
+.ui.labels a.active.label:hover:before,
+a.ui.active.label:hover:before {
background-color: @labelActiveHoverBackgroundColor;
background-image: @labelActiveHoverBackgroundImage;
color: @labelActiveHoverTextColor;
@@ -537,523 +599,190 @@ a.ui.active.label:ActiveHover:before {
*******************************/
-/*-------------------
- Colors
---------------------*/
-
-/*--- Red ---*/
-.ui.red.labels .label,
-.ui.red.label {
- background-color: @red !important;
- border-color: @red !important;
- color: @redTextColor !important;
-}
-/* Link */
-.ui.red.labels .label:hover,
-a.ui.red.label:hover{
- background-color: @redHover !important;
- border-color: @redHover !important;
- color: @redHoverTextColor !important;
-}
-/* Corner */
-.ui.red.corner.label,
-.ui.red.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.red.ribbon.label {
- border-color: @redRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.red.label {
- background-color: @basicBackground !important;
- color: @red !important;
- border-color: @red !important;
-}
-.ui.basic.red.labels a.label:hover,
-a.ui.basic.red.label:hover {
- background-color: @white !important;
- color: @redHover !important;
- border-color: @redHover !important;
-}
-
-/*--- Orange ---*/
-.ui.orange.labels .label,
-.ui.orange.label {
- background-color: @orange !important;
- border-color: @orange !important;
- color: @orangeTextColor !important;
-}
-/* Link */
-.ui.orange.labels .label:hover,
-a.ui.orange.label:hover{
- background-color: @orangeHover !important;
- border-color: @orangeHover !important;
- color: @orangeHoverTextColor !important;
-}
-/* Corner */
-.ui.orange.corner.label,
-.ui.orange.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.orange.ribbon.label {
- border-color: @orangeRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.orange.label {
- background-color: @basicBackground !important;
- color: @orange !important;
- border-color: @orange !important;
-}
-.ui.basic.orange.labels a.label:hover,
-a.ui.basic.orange.label:hover {
- background-color: @white !important;
- color: @orangeHover !important;
- border-color: @orangeHover !important;
-}
-
-/*--- Yellow ---*/
-.ui.yellow.labels .label,
-.ui.yellow.label {
- background-color: @yellow !important;
- border-color: @yellow !important;
- color: @yellowTextColor !important;
-}
-/* Link */
-.ui.yellow.labels .label:hover,
-a.ui.yellow.label:hover{
- background-color: @yellowHover !important;
- border-color: @yellowHover !important;
- color: @yellowHoverTextColor !important;
-}
-/* Corner */
-.ui.yellow.corner.label,
-.ui.yellow.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.yellow.ribbon.label {
- border-color: @yellowRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.yellow.label {
- background-color: @basicBackground !important;
- color: @yellow !important;
- border-color: @yellow !important;
-}
-.ui.basic.yellow.labels a.label:hover,
-a.ui.basic.yellow.label:hover {
- background-color: @white !important;
- color: @yellowHover !important;
- border-color: @yellowHover !important;
-}
-
-/*--- Olive ---*/
-.ui.olive.labels .label,
-.ui.olive.label {
- background-color: @olive !important;
- border-color: @olive !important;
- color: @oliveTextColor !important;
-}
-/* Link */
-.ui.olive.labels .label:hover,
-a.ui.olive.label:hover{
- background-color: @oliveHover !important;
- border-color: @oliveHover !important;
- color: @oliveHoverTextColor !important;
-}
-/* Corner */
-.ui.olive.corner.label,
-.ui.olive.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.olive.ribbon.label {
- border-color: @greenRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.olive.label {
- background-color: @basicBackground !important;
- color: @olive !important;
- border-color: @olive !important;
-}
-.ui.basic.olive.labels a.label:hover,
-a.ui.basic.olive.label:hover {
- background-color: @white !important;
- color: @oliveHover !important;
- border-color: @oliveHover !important;
-}
-
-/*--- Green ---*/
-.ui.green.labels .label,
-.ui.green.label {
- background-color: @green !important;
- border-color: @green !important;
- color: @greenTextColor !important;
-}
-/* Link */
-.ui.green.labels .label:hover,
-a.ui.green.label:hover{
- background-color: @greenHover !important;
- border-color: @greenHover !important;
- color: @greenHoverTextColor !important;
-}
-/* Corner */
-.ui.green.corner.label,
-.ui.green.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.green.ribbon.label {
- border-color: @greenRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.green.label {
- background-color: @basicBackground !important;
- color: @green !important;
- border-color: @green !important;
-}
-.ui.basic.green.labels a.label:hover,
-a.ui.basic.green.label:hover {
- background-color: @white !important;
- color: @greenHover !important;
- border-color: @greenHover !important;
-}
-
-/*--- Teal ---*/
-.ui.teal.labels .label,
-.ui.teal.label {
- background-color: @teal !important;
- border-color: @teal !important;
- color: @tealTextColor !important;
-}
-/* Link */
-.ui.teal.labels .label:hover,
-a.ui.teal.label:hover{
- background-color: @tealHover !important;
- border-color: @tealHover !important;
- color: @tealHoverTextColor !important;
-}
-/* Corner */
-.ui.teal.corner.label,
-.ui.teal.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.teal.ribbon.label {
- border-color: @tealRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.teal.label {
- background-color: @basicBackground !important;
- color: @teal !important;
- border-color: @teal !important;
-}
-.ui.basic.teal.labels a.label:hover,
-a.ui.basic.teal.label:hover {
- background-color: @white !important;
- color: @tealHover !important;
- border-color: @tealHover !important;
-}
-
-/*--- Blue ---*/
-.ui.blue.labels .label,
-.ui.blue.label {
- background-color: @blue !important;
- border-color: @blue !important;
- color: @blueTextColor !important;
-}
-/* Link */
-.ui.blue.labels .label:hover,
-a.ui.blue.label:hover{
- background-color: @blueHover !important;
- border-color: @blueHover !important;
- color: @blueHoverTextColor !important;
-}
-/* Corner */
-.ui.blue.corner.label,
-.ui.blue.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.blue.ribbon.label {
- border-color: @blueRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.blue.label {
- background-color: @basicBackground !important;
- color: @blue !important;
- border-color: @blue !important;
-}
-.ui.basic.blue.labels a.label:hover,
-a.ui.basic.blue.label:hover {
- background-color: @white !important;
- color: @blueHover !important;
- border-color: @blueHover !important;
-}
-
-/*--- Violet ---*/
-.ui.violet.labels .label,
-.ui.violet.label {
- background-color: @violet !important;
- border-color: @violet !important;
- color: @violetTextColor !important;
-}
-/* Link */
-.ui.violet.labels .label:hover,
-a.ui.violet.label:hover{
- background-color: @violetHover !important;
- border-color: @violetHover !important;
- color: @violetHoverTextColor !important;
-}
-/* Corner */
-.ui.violet.corner.label,
-.ui.violet.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.violet.ribbon.label {
- border-color: @violetRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.violet.label {
- background-color: @basicBackground !important;
- color: @violet !important;
- border-color: @violet !important;
-}
-.ui.basic.violet.labels a.label:hover,
-a.ui.basic.violet.label:hover {
- background-color: @white !important;
- color: @violetHover !important;
- border-color: @violetHover !important;
-}
-
-/*--- Purple ---*/
-.ui.purple.labels .label,
-.ui.purple.label {
- background-color: @purple !important;
- border-color: @purple !important;
- color: @purpleTextColor !important;
-}
-/* Link */
-.ui.purple.labels .label:hover,
-a.ui.purple.label:hover{
- background-color: @purpleHover !important;
- border-color: @purpleHover !important;
- color: @purpleHoverTextColor !important;
-}
-/* Corner */
-.ui.purple.corner.label,
-.ui.purple.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.purple.ribbon.label {
- border-color: @purpleRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.purple.label {
- background-color: @basicBackground !important;
- color: @purple !important;
- border-color: @purple !important;
-}
-.ui.basic.purple.labels a.label:hover,
-a.ui.basic.purple.label:hover {
- background-color: @white !important;
- color: @purpleHover !important;
- border-color: @purpleHover !important;
-}
-
-/*--- Pink ---*/
-.ui.pink.labels .label,
-.ui.pink.label {
- background-color: @pink !important;
- border-color: @pink !important;
- color: @pinkTextColor !important;
-}
-/* Link */
-.ui.pink.labels .label:hover,
-a.ui.pink.label:hover{
- background-color: @pinkHover !important;
- border-color: @pinkHover !important;
- color: @pinkHoverTextColor !important;
-}
-/* Corner */
-.ui.pink.corner.label,
-.ui.pink.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.pink.ribbon.label {
- border-color: @pinkRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.pink.label {
- background-color: @basicBackground !important;
- color: @pink !important;
- border-color: @pink !important;
-}
-.ui.basic.pink.labels a.label:hover,
-a.ui.basic.pink.label:hover {
- background-color: @white !important;
- color: @pinkHover !important;
- border-color: @pinkHover !important;
+& when (@variationLabelBasic) {
+ /*-------------------
+ Basic
+ --------------------*/
+
+ .ui.basic.labels .label,
+ .ui.basic.label {
+ background: @basicBackground;
+ border: @basicBorder;
+ color: @basicColor;
+ box-shadow: @basicBoxShadow;
+ }
+
+ /* Link */
+ .ui.basic.labels a.label:hover,
+ a.ui.basic.label:hover {
+ text-decoration: none;
+ background: @basicHoverBackground;
+ color: @basicHoverColor;
+ box-shadow: @basicHoverBoxShadow;
+ }
+ & when (@variationLabelPointing) {
+ /* Pointing */
+ .ui.basic.pointing.label:before {
+ border-color: inherit;
+ }
+ }
+}
+
+& when (@variationLabelFluid) {
+ /*-------------------
+ Fluid
+ --------------------*/
+
+ .ui.label.fluid,
+ .ui.fluid.labels > .label {
+ width: 100%;
+ box-sizing: border-box;
+ }
+}
+
+& when (@variationLabelInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
+
+ .ui.inverted.labels .label,
+ .ui.inverted.label {
+ color: @invertedTextColor;
+ background-color: @invertedBackgroundColor;
+ }
+ .ui.inverted.corner.label {
+ border-color: @invertedBackgroundColor;
+ }
+ .ui.inverted.corner.label:hover {
+ border-color: @backgroundColor;
+ transition: none;
+ }
+ .ui.inverted.basic.labels .label,
+ .ui.inverted.basic.label,
+ .ui.inverted.basic.label:hover {
+ border-color: @basicInvertedBorderColor;
+ background: @black;
+ }
+ .ui.inverted.basic.label:hover {
+ color: @linkColor;
+ }
}
-/*--- Brown ---*/
-.ui.brown.labels .label,
-.ui.brown.label {
- background-color: @brown !important;
- border-color: @brown !important;
- color: @brownTextColor !important;
-}
-/* Link */
-.ui.brown.labels .label:hover,
-a.ui.brown.label:hover{
- background-color: @brownHover !important;
- border-color: @brownHover !important;
- color: @brownHoverTextColor !important;
-}
-/* Corner */
-.ui.brown.corner.label,
-.ui.brown.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.brown.ribbon.label {
- border-color: @brownRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.brown.label {
- background-color: @basicBackground !important;
- color: @brown !important;
- border-color: @brown !important;
-}
-.ui.basic.brown.labels a.label:hover,
-a.ui.basic.brown.label:hover {
- background-color: @white !important;
- color: @brownHover !important;
- border-color: @brownHover !important;
-}
-
-/*--- Grey ---*/
-.ui.grey.labels .label,
-.ui.grey.label {
- background-color: @grey !important;
- border-color: @grey !important;
- color: @greyTextColor !important;
-}
-/* Link */
-.ui.grey.labels .label:hover,
-a.ui.grey.label:hover{
- background-color: @greyHover !important;
- border-color: @greyHover !important;
- color: @greyHoverTextColor !important;
-}
-/* Corner */
-.ui.grey.corner.label,
-.ui.grey.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.grey.ribbon.label {
- border-color: @brownRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.grey.label {
- background-color: @basicBackground !important;
- color: @grey !important;
- border-color: @grey !important;
-}
-.ui.basic.grey.labels a.label:hover,
-a.ui.basic.grey.label:hover {
- background-color: @white !important;
- color: @greyHover !important;
- border-color: @greyHover !important;
-}
-
-/*--- Black ---*/
-.ui.black.labels .label,
-.ui.black.label {
- background-color: @black !important;
- border-color: @black !important;
- color: @blackTextColor !important;
-}
-/* Link */
-.ui.black.labels .label:hover,
-a.ui.black.label:hover{
- background-color: @blackHover !important;
- border-color: @blackHover !important;
- color: @blackHoverTextColor !important;
-}
-/* Corner */
-.ui.black.corner.label,
-.ui.black.corner.label:hover {
- background-color: transparent !important;
-}
-/* Ribbon */
-.ui.black.ribbon.label {
- border-color: @brownRibbonShadow !important;
-}
-/* Basic */
-.ui.basic.black.label {
- background-color: @basicBackground !important;
- color: @black !important;
- border-color: @black !important;
-}
-.ui.basic.black.labels a.label:hover,
-a.ui.basic.black.label:hover {
- background-color: @white !important;
- color: @blackHover !important;
- border-color: @blackHover !important;
-}
-
-
/*-------------------
- Basic
---------------------*/
-
-.ui.basic.label {
- background: @basicBackground;
- border: @basicBorder;
- color: @basicColor;
- box-shadow: @basicBoxShadow;
-}
-
-/* Link */
-a.ui.basic.label:hover {
- text-decoration: none;
- background: @basicHoverBackground;
- color: @basicHoverColor;
- box-shadow: @basicHoverBorder;
- box-shadow: @basicHoverBoxShadow;
-}
-
-/* Pointing */
-.ui.basic.pointing.label:before {
- border-color: inherit;
-}
-
-
-/*-------------------
- Fluid
---------------------*/
-
-.ui.label.fluid,
-.ui.fluid.labels > .label {
- width: 100%;
- box-sizing: border-box;
-}
-
-/*-------------------
- Inverted
+ Colors
--------------------*/
-.ui.inverted.labels .label,
-.ui.inverted.label {
- color: @invertedTextColor !important;
-}
+each(@colors,{
+ @color : replace(@key,'@','');
+ @isDark : @colors[@@color][isDark];
+ @_labelColor : @colors[@@color][color];
+ @_labelInvertedColor : @colors[@@color][light];
+ @_labelTextColor : @colors[@@color][text];
+ @_labelHover : @colors[@@color][hover];
+ @_labelInvertedHover : @colors[@@color][lightHover];
+ @_labelHoverTextColor : @colors[@@color][hoverText];
+ @_labelRibbonShadow : @colors[@@color][ribbon];
+ @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon];
+
+ .ui.@{color}.labels .label,
+ .ui.ui.ui.@{color}.label {
+ background-color: @_labelColor;
+ border-color: @_labelColor;
+ color: @_labelTextColor;
+ }
+ /* Link */
+ .ui.@{color}.labels a.label:hover,
+ a.ui.ui.ui.@{color}.label:hover{
+ background-color: @_labelHover;
+ border-color: @_labelHover;
+ color: @_labelHoverTextColor;
+ }
+ & when (@variationLabelRibbon) {
+ /* Ribbon */
+ .ui.ui.ui.@{color}.ribbon.label {
+ border-color: @_labelRibbonShadow;
+ }
+ }
+ & when (@variationLabelBasic) {
+ /* Basic */
+ .ui.basic.labels .@{color}.label,
+ .ui.ui.ui.basic.@{color}.label {
+ background: @basicBackground;
+ border-color: @_labelColor;
+ color: @_labelColor;
+ }
+ .ui.basic.labels a.@{color}.label:hover,
+ a.ui.ui.ui.basic.@{color}.label:hover {
+ background: @basicBackground;
+ border-color: @_labelHover;
+ color: @_labelHover;
+ }
+ }
+ & when (@variationLabelInverted) {
+ /* Inverted */
+ .ui.inverted.labels .@{color}.label,
+ .ui.ui.ui.inverted.@{color}.label {
+ background-color: @_labelInvertedColor;
+ border-color: @_labelInvertedColor;
+ color: @black;
+ }
+ /* Inverted Link */
+ .ui.inverted.labels a.@{color}.label:hover,
+ a.ui.ui.ui.inverted.@{color}.label:hover{
+ background-color: @_labelInvertedHover;
+ border-color: @_labelInvertedHover;
+ & when not (@isDark) {
+ color: @black;
+ }
+ & when (@isDark) {
+ color: @_labelTextColor;
+ }
+ }
+ & when (@variationLabelRibbon) {
+ /* Inverted Ribbon */
+ .ui.ui.ui.inverted.@{color}.ribbon.label {
+ border-color: @_labelInvertedRibbonShadow;
+ }
+ }
+ & when (@variationLabelBasic) {
+ /* Inverted Basic */
+ .ui.inverted.basic.labels .@{color}.label,
+ .ui.ui.ui.inverted.basic.@{color}.label {
+ background-color: @invertedBackground;
+ border-color: @_labelInvertedColor;
+ & when not (@isDark) {
+ color: @_labelInvertedColor;
+ }
+ & when (@isDark) {
+ color: @invertedTextColor;
+ }
+ }
+ .ui.inverted.basic.labels a.@{color}.label:hover,
+ a.ui.ui.ui.inverted.basic.@{color}.label:hover {
+ border-color: @_labelInvertedHover;
+ background-color: @invertedBackground;
+ & when not (@isDark) {
+ color: @_labelInvertedHover;
+ }
+ }
+ & when (@variationLabelTag) {
+ /* Inverted Basic Tags */
+ .ui.inverted.basic.tag.labels .@{color}.label,
+ .ui.ui.ui.inverted.@{color}.basic.tag.label {
+ border: @invertedBorderSize solid @_labelInvertedColor;
+ }
+ .ui.inverted.basic.tag.labels .@{color}.label:before,
+ .ui.ui.ui.inverted.@{color}.basic.tag.label:before {
+ border-color: inherit;
+ border-width: @invertedBorderSize 0 0 @invertedBorderSize;
+ border-style: inherit;
+ background-color: @invertedBackground;
+ right: e(%("calc(100%% + %d)", @invertedBorderSize));
+ }
+ }
+ }
+ }
+})
/*-------------------
Horizontal
@@ -1061,198 +790,200 @@ a.ui.basic.label:hover {
.ui.horizontal.labels .label,
.ui.horizontal.label {
- margin: 0em @horizontalLabelMargin 0em 0em;
+ margin: 0 @horizontalLabelMargin 0 0;
padding: @horizontalLabelVerticalPadding @horizontalPadding;
min-width: @horizontalLabelMinWidth;
text-align: center;
}
+& when (@variationLabelCircular) {
+ /*-------------------
+ Circular
+ --------------------*/
-/*-------------------
- Circular
---------------------*/
+ .ui.circular.labels .label,
+ .ui.circular.label {
+ min-width: @circularMinSize;
+ min-height: @circularMinSize;
-.ui.circular.labels .label,
-.ui.circular.label {
- min-width: @circularMinSize;
- min-height: @circularMinSize;
+ padding: @circularPadding !important;
- padding: @circularPadding !important;
-
- line-height: 1em;
- text-align: center;
- border-radius: @circularRadius;
-}
-.ui.empty.circular.labels .label,
-.ui.empty.circular.label {
- min-width: 0em;
- min-height: 0em;
- overflow: hidden;
- width: @emptyCircleSize;
- height: @emptyCircleSize;
- vertical-align: baseline;
+ line-height: 1em;
+ text-align: center;
+ border-radius: @circularRadius;
+ }
+ .ui.empty.circular.labels .label,
+ .ui.empty.circular.label {
+ min-width: 0;
+ min-height: 0;
+ overflow: hidden;
+ width: @emptyCircleSize;
+ height: @emptyCircleSize;
+ vertical-align: baseline;
+ }
}
-/*-------------------
- Pointing
---------------------*/
+& when (@variationLabelPointing) {
+ /*-------------------
+ Pointing
+ --------------------*/
-.ui.pointing.label {
- position: relative;
-}
+ .ui.pointing.label {
+ position: relative;
+ }
-.ui.attached.pointing.label {
- position: absolute;
-}
-
-.ui.pointing.label:before {
- background-color: inherit;
- background-image: inherit;
- border-width: none;
- border-style: solid;
- border-color: @pointingBorderColor;
-}
-/* Arrow */
-.ui.pointing.label:before {
- position: absolute;
- content: '';
- transform: rotate(45deg);
- background-image: none;
-
- z-index: @pointingTriangleZIndex;
- width: @pointingTriangleSize;
- height: @pointingTriangleSize;
- transition: @pointingTriangleTransition;
-}
-
-/*--- Above ---*/
-.ui.pointing.label,
-.ui[class*="pointing above"].label {
- margin-top: @pointingVerticalDistance;
-}
-.ui.pointing.label:before,
-.ui[class*="pointing above"].label:before {
- border-width: @borderWidth 0px 0px @borderWidth;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- top: 0%;
- left: 50%;
-}
-/*--- Below ---*/
-.ui[class*="bottom pointing"].label,
-.ui[class*="pointing below"].label {
- margin-top: 0em;
- margin-bottom: @pointingVerticalDistance;
-}
-.ui[class*="bottom pointing"].label:before,
-.ui[class*="pointing below"].label:before {
- border-width: 0px @borderWidth @borderWidth 0px;
- top: auto;
- right: auto;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- top: 100%;
- left: 50%;
-}
-/*--- Left ---*/
-.ui[class*="left pointing"].label {
- margin-top: 0em;
- margin-left: @pointingHorizontalDistance;
-}
-.ui[class*="left pointing"].label:before {
- border-width: 0px 0px @borderWidth @borderWidth;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- bottom: auto;
- right: auto;
- top: 50%;
- left: 0em;
-}
-/*--- Right ---*/
-.ui[class*="right pointing"].label {
- margin-top: 0em;
- margin-right: @pointingHorizontalDistance;
-}
-.ui[class*="right pointing"].label:before {
- border-width: @borderWidth @borderWidth 0px 0px;
- transform: translateX(50%) translateY(-50%) rotate(45deg);
- top: 50%;
- right: 0%;
- bottom: auto;
- left: auto;
-}
-
-/* Basic Pointing */
-
-/*--- Above ---*/
-.ui.basic.pointing.label:before,
-.ui.basic[class*="pointing above"].label:before {
- margin-top: @basicPointingTriangleOffset;
-}
-/*--- Below ---*/
-.ui.basic[class*="bottom pointing"].label:before,
-.ui.basic[class*="pointing below"].label:before {
- bottom: auto;
- top: 100%;
- margin-top: -@basicPointingTriangleOffset;
-}
-/*--- Left ---*/
-.ui.basic[class*="left pointing"].label:before {
- top: 50%;
- left: @basicPointingTriangleOffset;
-}
-/*--- Right ---*/
-.ui.basic[class*="right pointing"].label:before {
- top: 50%;
- right: @basicPointingTriangleOffset;
-}
-
-
-/*------------------
- Floating Label
--------------------*/
+ .ui.attached.pointing.label {
+ position: absolute;
+ }
-.ui.floating.label {
- position: absolute;
- z-index: @floatingZIndex;
- top: @floatingTopOffset;
- left: 100%;
- margin: 0em 0em 0em @floatingLeftOffset !important;
+ .ui.pointing.label:before {
+ background-color: inherit;
+ background-image: inherit;
+ border-width: 0;
+ border-style: solid;
+ border-color: @pointingBorderColor;
+ }
+ /* Arrow */
+ .ui.pointing.label:before {
+ position: absolute;
+ content: '';
+ transform: rotate(45deg);
+ background-image: none;
+
+ z-index: @pointingTriangleZIndex;
+ width: @pointingTriangleSize;
+ height: @pointingTriangleSize;
+ transition: @pointingTriangleTransition;
+ }
+
+ /*--- Above ---*/
+ .ui.pointing.label,
+ .ui[class*="pointing above"].label {
+ margin-top: @pointingVerticalDistance;
+ }
+ .ui.pointing.label:before,
+ .ui[class*="pointing above"].label:before {
+ border-width: @borderWidth 0 0 @borderWidth;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ top: 0;
+ left: 50%;
+ }
+ /*--- Below ---*/
+ .ui[class*="bottom pointing"].label,
+ .ui[class*="pointing below"].label {
+ margin-top: 0;
+ margin-bottom: @pointingVerticalDistance;
+ }
+ .ui[class*="bottom pointing"].label:before,
+ .ui[class*="pointing below"].label:before {
+ border-width: 0 @borderWidth @borderWidth 0;
+ top: auto;
+ right: auto;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ top: 100%;
+ left: 50%;
+ }
+ /*--- Left ---*/
+ .ui[class*="left pointing"].label {
+ margin-top: 0;
+ margin-left: @pointingHorizontalDistance;
+ }
+ .ui[class*="left pointing"].label:before {
+ border-width: 0 0 @borderWidth @borderWidth;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ bottom: auto;
+ right: auto;
+ top: 50%;
+ left: 0;
+ }
+ /*--- Right ---*/
+ .ui[class*="right pointing"].label {
+ margin-top: 0;
+ margin-right: @pointingHorizontalDistance;
+ }
+ .ui[class*="right pointing"].label:before {
+ border-width: @borderWidth @borderWidth 0 0;
+ transform: translateX(50%) translateY(-50%) rotate(45deg);
+ top: 50%;
+ right: 0;
+ bottom: auto;
+ left: auto;
+ }
+ & when (@variationLabelBasic) {
+ /* Basic Pointing */
+
+ /*--- Above ---*/
+ .ui.basic.pointing.label:before,
+ .ui.basic[class*="pointing above"].label:before {
+ margin-top: @basicPointingTriangleOffset;
+ }
+ /*--- Below ---*/
+ .ui.basic[class*="bottom pointing"].label:before,
+ .ui.basic[class*="pointing below"].label:before {
+ bottom: auto;
+ top: 100%;
+ margin-top: -@basicPointingTriangleOffset;
+ }
+ /*--- Left ---*/
+ .ui.basic[class*="left pointing"].label:before {
+ top: 50%;
+ left: @basicPointingTriangleOffset;
+ }
+ /*--- Right ---*/
+ .ui.basic[class*="right pointing"].label:before {
+ top: 50%;
+ right: @basicPointingTriangleOffset;
+ }
+ }
+}
+
+& when (@variationLabelFloating) {
+ /*------------------
+ Floating Label
+ -------------------*/
+
+ .ui.floating.label {
+ position: absolute;
+ z-index: @floatingZIndex;
+ top: @floatingTopOffset;
+ right: 0;
+ white-space: nowrap;
+ transform: translateX(50%);
+ }
+ .ui.right.aligned.floating.label {
+ transform: translateX(@floatingAlignOffset);
+ }
+ .ui.left.floating.label {
+ left:0;
+ right:auto;
+ transform: translateX(-50%);
+ }
+ .ui.left.aligned.floating.label {
+ transform: translateX(-@floatingAlignOffset);
+ }
+ .ui.bottom.floating.label {
+ top: auto;
+ bottom: @floatingBottomOffset;
+ }
}
/*-------------------
Sizes
--------------------*/
-.ui.mini.labels .label,
-.ui.mini.label {
- font-size: @mini;
-}
-.ui.tiny.labels .label,
-.ui.tiny.label {
- font-size: @tiny;
-}
-.ui.small.labels .label,
-.ui.small.label {
- font-size: @small;
-}
.ui.labels .label,
.ui.label {
font-size: @medium;
}
-.ui.large.labels .label,
-.ui.large.label {
- font-size: @large;
-}
-.ui.big.labels .label,
-.ui.big.label {
- font-size: @big;
-}
-.ui.huge.labels .label,
-.ui.huge.label {
- font-size: @huge;
-}
-.ui.massive.labels .label,
-.ui.massive.label {
- font-size: @massive;
+& when not (@variationLabelSizes = false) {
+ each(@variationLabelSizes, {
+ @s: @@value;
+ .ui.@{value}.labels .label,
+ .ui.@{value}.label {
+ font-size: @s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/list.less b/ui/src/definitions/elements/list.less
index f1eda4bbc9c..d70ab2e06cf 100644
--- a/ui/src/definitions/elements/list.less
+++ b/ui/src/definitions/elements/list.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - List
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - List
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -32,15 +32,15 @@ ol.ui.list,
ul.ui.list:first-child,
ol.ui.list:first-child,
.ui.list:first-child {
- margin-top: 0em;
- padding-top: 0em;
+ margin-top: 0;
+ padding-top: 0;
}
ul.ui.list:last-child,
ol.ui.list:last-child,
.ui.list:last-child {
- margin-bottom: 0em;
- padding-bottom: 0em;
+ margin-bottom: 0;
+ padding-bottom: 0;
}
/*******************************
@@ -63,7 +63,7 @@ ol.ui.list li,
ul.ui.list > li:first-child:after,
ol.ui.list > li:first-child:after,
-.ui.list > .list > .item,
+.ui.list > .list > .item:after,
.ui.list > .item:after {
content: '';
display: block;
@@ -76,21 +76,21 @@ ul.ui.list li:first-child,
ol.ui.list li:first-child,
.ui.list .list > .item:first-child,
.ui.list > .item:first-child {
- padding-top: 0em;
+ padding-top: 0;
}
ul.ui.list li:last-child,
ol.ui.list li:last-child,
.ui.list .list > .item:last-child,
.ui.list > .item:last-child {
- padding-bottom: 0em;
+ padding-bottom: 0;
}
/* Child List */
ul.ui.list ul,
ol.ui.list ol,
-.ui.list .list {
+.ui.list .list:not(.icon) {
clear: both;
- margin: 0em;
+ margin: 0;
padding: @childListPadding;
}
@@ -102,76 +102,95 @@ ol.ui.list ol li,
line-height: @childItemLineHeight;
}
-
-/* Icon */
-.ui.list .list > .item > i.icon,
-.ui.list > .item > i.icon {
- display: table-cell;
- margin: 0em;
- padding-top: @iconOffset;
- padding-right: @iconDistance;
- vertical-align: @iconContentVerticalAlign;
- transition: @iconTransition;
-}
-.ui.list .list > .item > i.icon:only-child,
-.ui.list > .item > i.icon:only-child {
- display: inline-block;
- vertical-align: @iconVerticalAlign;
-}
-
-
-/* Image */
-.ui.list .list > .item > .image,
-.ui.list > .item > .image {
- display: table-cell;
- background-color: transparent;
- margin: 0em;
- vertical-align: @imageAlign;
-}
-.ui.list .list > .item > .image:not(:only-child):not(img),
-.ui.list > .item > .image:not(:only-child):not(img) {
- padding-right: @imageDistance;
-}
-.ui.list .list > .item > .image img,
-.ui.list > .item > .image img {
- vertical-align: @imageAlign;
-}
-
-.ui.list .list > .item > img.image,
-.ui.list .list > .item > .image:only-child,
-.ui.list > .item > img.image,
-.ui.list > .item > .image:only-child {
- display: inline-block;
+& when (@variationListIcon) {
+ /* Icon */
+ .ui.list .list > .item > i.icon,
+ .ui.list > .item > i.icon {
+ display: table-cell;
+ min-width: 1.55em;
+ margin: 0;
+ padding-top: @iconOffset;
+ transition: @iconTransition;
+ &:not(.loading) {
+ padding-right: @iconDistance;
+ vertical-align: @iconContentVerticalAlign;
+ }
+ }
+ .ui.list .list > .item > i.icon:only-child,
+ .ui.list > .item > i.icon:only-child {
+ display: inline-block;
+ min-width: auto;
+ vertical-align: @iconVerticalAlign;
+ }
+}
+
+& when (@variationListImage) {
+ /* Image */
+ .ui.list .list > .item > .image,
+ .ui.list > .item > .image {
+ display: table-cell;
+ background-color: transparent;
+ margin: 0;
+ vertical-align: @imageAlign;
+ }
+ .ui.list .list > .item > .image:not(:only-child):not(img),
+ .ui.list > .item > .image:not(:only-child):not(img) {
+ padding-right: @imageDistance;
+ }
+ .ui.list .list > .item > .image img,
+ .ui.list > .item > .image img {
+ vertical-align: @imageAlign;
+ }
+
+ .ui.list .list > .item > img.image,
+ .ui.list .list > .item > .image:only-child,
+ .ui.list > .item > img.image,
+ .ui.list > .item > .image:only-child {
+ display: inline-block;
+ }
}
/* Content */
.ui.list .list > .item > .content,
.ui.list > .item > .content {
line-height: @contentLineHeight;
-}
-.ui.list .list > .item > .image + .content,
-.ui.list .list > .item > .icon + .content,
-.ui.list > .item > .image + .content,
-.ui.list > .item > .icon + .content {
- display: table-cell;
- padding: 0em 0em 0em @contentDistance;
- vertical-align: @contentVerticalAlign;
-}
-.ui.list .list > .item > img.image + .content,
-.ui.list > .item > img.image + .content {
- display: inline-block;
+ color: @contentColor;
+}
+& when (@variationListImage) or (@variationListIcon) {
+ .ui.list .list > .item > .image + .content,
+ .ui.list .list > .item > .icon + .content,
+ .ui.list > .item > .image + .content,
+ .ui.list > .item > .icon + .content {
+ display: table-cell;
+ width: 100%;
+ padding: 0 0 0 @contentDistance;
+ vertical-align: @contentVerticalAlign;
+ }
+}
+& when (@variationListIcon) {
+ .ui.list .list > .item > .loading.icon + .content,
+ .ui.list > .item > .loading.icon + .content {
+ padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance));
+ }
+}
+& when (@variationListImage) {
+ .ui.list .list > .item > img.image + .content,
+ .ui.list > .item > img.image + .content {
+ display: inline-block;
+ width: auto;
+ }
}
.ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list {
- margin-left: 0em;
- padding-left: 0em;
+ margin-left: 0;
+ padding-left: 0;
}
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
- margin: 0em;
+ margin: 0;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;
@@ -201,10 +220,14 @@ ol.ui.list ol li,
color: @itemLinkHoverColor;
}
-/* Linked Item Icons */
-.ui.list .list > a.item i.icon,
-.ui.list > a.item i.icon {
- color: @itemLinkIconColor;
+& when (@variationListIcon) {
+ /* Linked Item Icons */
+ .ui.list .list > a.item > i.icons,
+ .ui.list > a.item > i.icons,
+ .ui.list .list > a.item > i.icon,
+ .ui.list > a.item > i.icon {
+ color: @itemLinkIconColor;
+ }
}
/* Header Link */
@@ -213,28 +236,30 @@ ol.ui.list ol li,
cursor: pointer;
color: @itemHeaderLinkColor !important;
}
-.ui.list .list > .item a.header:hover,
-.ui.list > .item a.header:hover {
+.ui.list .list > .item > a.header:hover,
+.ui.list > .item > a.header:hover {
color: @itemHeaderLinkHoverColor !important;
}
-/* Floated Content */
-.ui[class*="left floated"].list {
- float: left;
-}
-.ui[class*="right floated"].list {
- float: right;
-}
+& when (@variationListFloated) {
+ /* Floated Content */
+ .ui[class*="left floated"].list {
+ float: left;
+ }
+ .ui[class*="right floated"].list {
+ float: right;
+ }
-.ui.list .list > .item [class*="left floated"],
-.ui.list > .item [class*="left floated"] {
- float: left;
- margin: @leftFloatMargin;
-}
-.ui.list .list > .item [class*="right floated"],
-.ui.list > .item [class*="right floated"] {
- float: right;
- margin: @rightFloatMargin;
+ .ui.list .list > .item [class*="left floated"],
+ .ui.list > .item [class*="left floated"] {
+ float: left;
+ margin: @leftFloatMargin;
+ }
+ .ui.list .list > .item [class*="right floated"],
+ .ui.list > .item [class*="right floated"] {
+ float: right;
+ margin: @rightFloatMargin;
+ }
}
/*******************************
@@ -260,11 +285,11 @@ ol.ui.list ol li,
}
.ui.menu .ui.list .list > .item:first-child,
.ui.menu .ui.list > .item:first-child {
- padding-top: 0em;
+ padding-top: 0;
}
.ui.menu .ui.list .list > .item:last-child,
.ui.menu .ui.list > .item:last-child {
- padding-bottom: 0em;
+ padding-bottom: 0;
}
@@ -272,679 +297,724 @@ ol.ui.list ol li,
Types
*******************************/
-/*-------------------
- Horizontal
---------------------*/
-
-.ui.horizontal.list {
- display: inline-block;
- font-size: 0em;
-}
-.ui.horizontal.list > .item {
- display: inline-block;
- margin-left: @horizontalSpacing;
- font-size: 1rem;
-}
-.ui.horizontal.list:not(.celled) > .item:first-child {
- margin-left: 0em !important;
- padding-left: 0em !important;
-}
-.ui.horizontal.list .list {
- padding-left: 0em;
- padding-bottom: 0em;
-}
-
-.ui.horizontal.list > .item > .image,
-.ui.horizontal.list .list > .item > .image,
-.ui.horizontal.list > .item > .icon,
-.ui.horizontal.list .list > .item > .icon,
-.ui.horizontal.list > .item > .content,
-.ui.horizontal.list .list > .item > .content {
- vertical-align: @horizontalVerticalAlign;
-}
-
-/* Padding on all elements */
-.ui.horizontal.list > .item:first-child,
-.ui.horizontal.list > .item:last-child {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
+& when (@variationListHorizontal) {
+ /*-------------------
+ Horizontal
+ --------------------*/
+
+ .ui.horizontal.list {
+ display: inline-block;
+ font-size: 0;
+ }
+ .ui.horizontal.list > .item {
+ display: inline-block;
+ margin-right: @horizontalSpacing;
+ font-size: 1rem;
+ }
+ .ui.horizontal.list:not(.celled) > .item:last-child {
+ margin-right: 0;
+ padding-right: 0;
+ }
+ .ui.horizontal.list .list:not(.icon) {
+ padding-left: 0;
+ padding-bottom: 0;
+ }
+ .ui.horizontal.list > .item > .image,
+ .ui.horizontal.list .list > .item > .image,
+ .ui.horizontal.list > .item > .icon,
+ .ui.horizontal.list .list > .item > .icon,
+ .ui.horizontal.list > .item > .content,
+ .ui.horizontal.list .list > .item > .content {
+ vertical-align: @horizontalVerticalAlign;
+ }
+
+ /* Padding on all elements */
+ .ui.horizontal.list > .item:first-child,
+ .ui.horizontal.list > .item:last-child {
+ padding-top: @itemVerticalPadding;
+ padding-bottom: @itemVerticalPadding;
+ }
+ & when (@variationListIcon) {
+ /* Horizontal List */
+ .ui.horizontal.list > .item > i.icon ,
+ .ui.horizontal.list .item > i.icons > i.icon {
+ margin: 0;
+ padding: 0 @horizontalIconDistance 0 0;
+ }
+ }
+ & when (@variationListImage) or (@variationListIcon) {
+ .ui.horizontal.list > .item > .image + .content,
+ .ui.horizontal.list > .item > .icon,
+ .ui.horizontal.list > .item > .icon + .content {
+ float: none;
+ display: inline-block;
+ width: auto;
+ }
+ }
+ & when (@variationListImage) {
+ .ui.horizontal.list > .item > .image {
+ display: inline-block;
+ }
+ }
}
-/* Horizontal List */
-.ui.horizontal.list > .item > i.icon {
- margin: 0em;
- padding: 0em @horizontalIconDistance 0em 0em;
-}
-.ui.horizontal.list > .item > .icon,
-.ui.horizontal.list > .item > .icon + .content {
- float: none;
- display: inline-block;
-}
-
-
/*******************************
States
*******************************/
-/*-------------------
- Disabled
---------------------*/
+& when (@variationListDisabled) {
+ /*-------------------
+ Disabled
+ --------------------*/
-.ui.list .list > .disabled.item,
-.ui.list > .disabled.item {
- pointer-events: none;
- color: @disabledColor !important;
-}
-.ui.inverted.list .list > .disabled.item,
-.ui.inverted.list > .disabled.item {
- color: @invertedDisabledColor !important;
+ .ui.list .list > .disabled.item,
+ .ui.list > .disabled.item {
+ pointer-events: none;
+ color: @disabledColor !important;
+ }
+ & when (@variationListInverted) {
+ .ui.inverted.list .list > .disabled.item,
+ .ui.inverted.list > .disabled.item {
+ color: @invertedDisabledColor !important;
+ }
+ }
}
/*-------------------
Hover
--------------------*/
-
-.ui.list .list > a.item:hover .icon,
-.ui.list > a.item:hover .icon {
- color: @itemLinkIconHoverColor;
+& when (@variationListIcon) {
+ .ui.list .list > a.item:hover > .icons,
+ .ui.list > a.item:hover > .icons,
+ .ui.list .list > a.item:hover > .icon,
+ .ui.list > a.item:hover > .icon {
+ color: @itemLinkIconHoverColor;
+ }
}
-
/*******************************
Variations
*******************************/
-/*-------------------
- Inverted
---------------------*/
-
-.ui.inverted.list .list > a.item > .icon,
-.ui.inverted.list > a.item > .icon {
- color: @invertedIconLinkColor;
-}
-.ui.inverted.list .list > .item .header,
-.ui.inverted.list > .item .header {
- color: @invertedHeaderColor;
-}
-.ui.inverted.list .list > .item .description,
-.ui.inverted.list > .item .description {
- color: @invertedDescriptionColor;
-}
-
-/* Item Link */
-.ui.inverted.list .list > a.item,
-.ui.inverted.list > a.item {
- cursor: pointer;
- color: @invertedItemLinkColor;
-}
-.ui.inverted.list .list > a.item:hover,
-.ui.inverted.list > a.item:hover {
- color: @invertedItemLinkHoverColor;
-}
-
-
-/* Linking Content */
-.ui.inverted.list .item a:not(.ui) {
- color: @invertedItemLinkColor !important;
-}
-.ui.inverted.list .item a:not(.ui):hover {
- color: @invertedItemLinkHoverColor !important;
-}
-
-/*-------------------
- Aligned
---------------------*/
-
-.ui.list[class*="top aligned"] .image,
-.ui.list[class*="top aligned"] .content,
-.ui.list [class*="top aligned"] {
- vertical-align: top !important;
-}
-.ui.list[class*="middle aligned"] .image,
-.ui.list[class*="middle aligned"] .content,
-.ui.list [class*="middle aligned"] {
- vertical-align: middle !important;
-}
-.ui.list[class*="bottom aligned"] .image,
-.ui.list[class*="bottom aligned"] .content,
-.ui.list [class*="bottom aligned"] {
- vertical-align: bottom !important;
-}
-
-/*-------------------
- Link
---------------------*/
-
-.ui.link.list .item,
-.ui.link.list a.item,
-.ui.link.list .item a:not(.ui) {
- color: @linkListItemColor;
- transition: @linkListTransition;
-}
-.ui.link.list.list a.item:hover,
-.ui.link.list.list .item a:not(.ui):hover {
- color: @linkListItemHoverColor;
-}
-.ui.link.list.list a.item:active,
-.ui.link.list.list .item a:not(.ui):active {
- color: @linkListItemDownColor;
-}
-.ui.link.list.list .active.item,
-.ui.link.list.list .active.item a:not(.ui) {
- color: @linkListItemActiveColor;
-}
-
-/* Inverted */
-.ui.inverted.link.list .item,
-.ui.inverted.link.list a.item,
-.ui.inverted.link.list .item a:not(.ui) {
- color: @invertedLinkListItemColor;
-}
-.ui.inverted.link.list.list a.item:hover,
-.ui.inverted.link.list.list .item a:not(.ui):hover {
- color: @invertedLinkListItemHoverColor;
-}
-.ui.inverted.link.list.list a.item:active,
-.ui.inverted.link.list.list .item a:not(.ui):active {
- color: @invertedLinkListItemDownColor;
-}
-.ui.inverted.link.list.list a.active.item,
-.ui.inverted.link.list.list .active.item a:not(.ui) {
- color: @invertedLinkListItemActiveColor;
-}
-
-/*-------------------
- Selection
---------------------*/
-
-.ui.selection.list .list > .item,
-.ui.selection.list > .item {
- cursor: pointer;
- background: @selectionListBackground;
- padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
- margin: @selectionListItemMargin;
- color: @selectionListColor;
- border-radius: @selectionListItemBorderRadius;
- transition: @selectionListTransition;
-}
-.ui.selection.list .list > .item:last-child,
-.ui.selection.list > .item:last-child {
- margin-bottom: 0em;
-}
-.ui.selection.list.list > .item:hover,
-.ui.selection.list > .item:hover {
- background: @selectionListHoverBackground;
- color: @selectionListHoverColor;
-}
-.ui.selection.list .list > .item:active,
-.ui.selection.list > .item:active {
- background: @selectionListDownBackground;
- color: @selectionListDownColor;
-}
-.ui.selection.list .list > .item.active,
-.ui.selection.list > .item.active {
- background: @selectionListActiveBackground;
- color: @selectionListActiveColor;
-}
-
-/* Inverted */
-.ui.inverted.selection.list > .item,
-.ui.inverted.selection.list > .item {
- background: @invertedSelectionListBackground;
- color: @invertedSelectionListColor;
-}
-.ui.inverted.selection.list > .item:hover,
-.ui.inverted.selection.list > .item:hover {
- background: @invertedSelectionListHoverBackground;
- color: @invertedSelectionListHoverColor;
-}
-.ui.inverted.selection.list > .item:active,
-.ui.inverted.selection.list > .item:active {
- background: @invertedSelectionListDownBackground;
- color: @invertedSelectionListDownColor;
-}
-.ui.inverted.selection.list > .item.active,
-.ui.inverted.selection.list > .item.active {
- background: @invertedSelectionListActiveBackground;
- color: @invertedSelectionListActiveColor;
-}
-
-/* Celled / Divided Selection List */
-.ui.celled.selection.list .list > .item,
-.ui.divided.selection.list .list > .item,
-.ui.celled.selection.list > .item,
-.ui.divided.selection.list > .item {
- border-radius: 0em;
-}
-
-/*-------------------
- Animated
---------------------*/
-
-.ui.animated.list > .item {
- transition: @animatedListTransition;
-}
-.ui.animated.list:not(.horizontal) > .item:hover {
- padding-left: @animatedListIndent;
+& when (@variationListInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
+ & when (@variationListIcon) {
+ .ui.inverted.list .list > a.item > .icon,
+ .ui.inverted.list > a.item > .icon {
+ color: @invertedIconLinkColor;
+ }
+ }
+ .ui.inverted.list .list > .item .header,
+ .ui.inverted.list > .item .header {
+ color: @invertedHeaderColor;
+ }
+ .ui.inverted.list .list > .item .description,
+ .ui.inverted.list > .item .description {
+ color: @invertedDescriptionColor;
+ }
+ .ui.inverted.list .list > .item > .content,
+ .ui.inverted.list > .item > .content {
+ color: @invertedContentColor;
+ }
+ /* Item Link */
+ .ui.inverted.list .list > a.item,
+ .ui.inverted.list > a.item {
+ cursor: pointer;
+ color: @invertedItemLinkColor;
+ }
+ .ui.inverted.list .list > a.item:hover,
+ .ui.inverted.list > a.item:hover {
+ color: @invertedItemLinkHoverColor;
+ }
+
+
+ /* Linking Content */
+ .ui.inverted.list .item a:not(.ui) {
+ color: @invertedItemLinkColor !important;
+ }
+ .ui.inverted.list .item a:not(.ui):hover {
+ color: @invertedItemLinkHoverColor !important;
+ }
+}
+
+& when (@variationListAligned) {
+ /*-------------------
+ Aligned
+ --------------------*/
+
+ .ui.list[class*="top aligned"] .image,
+ .ui.list[class*="top aligned"] .content,
+ .ui.list [class*="top aligned"] {
+ vertical-align: top !important;
+ }
+ .ui.list[class*="middle aligned"] .image,
+ .ui.list[class*="middle aligned"] .content,
+ .ui.list [class*="middle aligned"] {
+ vertical-align: middle !important;
+ }
+ .ui.list[class*="bottom aligned"] .image,
+ .ui.list[class*="bottom aligned"] .content,
+ .ui.list [class*="bottom aligned"] {
+ vertical-align: bottom !important;
+ }
+}
+
+& when (@variationListLink) {
+ /*-------------------
+ Link
+ --------------------*/
+
+ .ui.link.list .item,
+ .ui.link.list a.item,
+ .ui.link.list .item a:not(.ui) {
+ color: @linkListItemColor;
+ transition: @linkListTransition;
+ }
+ .ui.link.list.list a.item:hover,
+ .ui.link.list.list .item a:not(.ui):hover {
+ color: @linkListItemHoverColor;
+ }
+ .ui.link.list.list a.item:active,
+ .ui.link.list.list .item a:not(.ui):active {
+ color: @linkListItemDownColor;
+ }
+ .ui.link.list.list .active.item,
+ .ui.link.list.list .active.item a:not(.ui) {
+ color: @linkListItemActiveColor;
+ }
+ & when (@variationListInverted) {
+ /* Inverted */
+ .ui.inverted.link.list .item,
+ .ui.inverted.link.list a.item,
+ .ui.inverted.link.list .item a:not(.ui) {
+ color: @invertedLinkListItemColor;
+ }
+ .ui.inverted.link.list.list a.item:hover,
+ .ui.inverted.link.list.list .item a:not(.ui):hover {
+ color: @invertedLinkListItemHoverColor;
+ }
+ .ui.inverted.link.list.list a.item:active,
+ .ui.inverted.link.list.list .item a:not(.ui):active {
+ color: @invertedLinkListItemDownColor;
+ }
+ .ui.inverted.link.list.list a.active.item,
+ .ui.inverted.link.list.list .active.item a:not(.ui) {
+ color: @invertedLinkListItemActiveColor;
+ }
+ }
+}
+
+& when (@variationListSelection) {
+ /*-------------------
+ Selection
+ --------------------*/
+
+ .ui.selection.list .list > .item,
+ .ui.selection.list > .item {
+ cursor: pointer;
+ background: @selectionListBackground;
+ padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
+ margin: @selectionListItemMargin;
+ color: @selectionListColor;
+ border-radius: @selectionListItemBorderRadius;
+ transition: @selectionListTransition;
+ }
+ .ui.selection.list .list > .item:last-child,
+ .ui.selection.list > .item:last-child {
+ margin-bottom: 0;
+ }
+ .ui.selection.list .list > .item:hover,
+ .ui.selection.list > .item:hover {
+ background: @selectionListHoverBackground;
+ color: @selectionListHoverColor;
+ }
+ .ui.selection.list .list > .item:active,
+ .ui.selection.list > .item:active {
+ background: @selectionListDownBackground;
+ color: @selectionListDownColor;
+ }
+ .ui.selection.list .list > .item.active,
+ .ui.selection.list > .item.active {
+ background: @selectionListActiveBackground;
+ color: @selectionListActiveColor;
+ }
+
+ & when (@variationListInverted) {
+ /* Inverted */
+ .ui.inverted.selection.list > .item {
+ background: @invertedSelectionListBackground;
+ color: @invertedSelectionListColor;
+ }
+ .ui.inverted.selection.list > .item:hover {
+ background: @invertedSelectionListHoverBackground;
+ color: @invertedSelectionListHoverColor;
+ }
+ .ui.inverted.selection.list > .item:active {
+ background: @invertedSelectionListDownBackground;
+ color: @invertedSelectionListDownColor;
+ }
+ .ui.inverted.selection.list > .item.active {
+ background: @invertedSelectionListActiveBackground;
+ color: @invertedSelectionListActiveColor;
+ }
+ }
+
+ & when (@variationListCelled) or (@variationListDivided) {
+ /* Celled / Divided Selection List */
+ .ui.celled.selection.list .list > .item,
+ .ui.divided.selection.list .list > .item,
+ .ui.celled.selection.list > .item,
+ .ui.divided.selection.list > .item {
+ border-radius: 0;
+ }
+ }
+}
+
+& when (@variationListAnimated) {
+ /*-------------------
+ Animated
+ --------------------*/
+
+ .ui.animated.list > .item {
+ transition: @animatedListTransition;
+ }
+ .ui.animated.list:not(.horizontal) > .item:hover {
+ padding-left: @animatedListIndent;
+ }
+}
+
+& when (@variationListFitted) {
+ /*-------------------
+ Fitted
+ --------------------*/
+ .ui.fitted.list:not(.selection) .list > .item,
+ .ui.fitted.list:not(.selection) > .item {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ui.fitted.selection.list .list > .item,
+ .ui.fitted.selection.list > .item {
+ margin-left: -@selectionListItemHorizontalPadding;
+ margin-right: -@selectionListItemHorizontalPadding;
+ }
+}
+
+& when (@variationListBulleted) {
+ /*-------------------
+ Bulleted
+ --------------------*/
+
+ ul.ui.list,
+ .ui.bulleted.list {
+ margin-left: @bulletDistance;
+ }
+ ul.ui.list li,
+ .ui.bulleted.list .list > .item,
+ .ui.bulleted.list > .item {
+ position: relative;
+ }
+ ul.ui.list li:before,
+ .ui.bulleted.list .list > .item:before,
+ .ui.bulleted.list > .item:before {
+ user-select: none;
+ pointer-events: none;
+ position: absolute;
+ top: auto;
+ left: auto;
+ font-weight: @normal;
+ margin-left: @bulletOffset;
+ content: @bulletCharacter;
+ opacity: @bulletOpacity;
+ color: @bulletColor;
+ vertical-align: @bulletVerticalAlign;
+ }
+
+ ul.ui.list li:before,
+ .ui.bulleted.list .list > a.item:before,
+ .ui.bulleted.list > a.item:before {
+ color: @bulletLinkColor;
+ }
+
+ ul.ui.list ul,
+ .ui.bulleted.list .list:not(.icon) {
+ padding-left: @bulletChildDistance;
+ }
+
+ & when (@variationListHorizontal) {
+ /* Horizontal Bulleted */
+ ul.ui.horizontal.bulleted.list,
+ .ui.horizontal.bulleted.list {
+ margin-left: 0;
+ }
+ ul.ui.horizontal.bulleted.list li,
+ .ui.horizontal.bulleted.list > .item {
+ margin-left: @horizontalBulletSpacing;
+ }
+ ul.ui.horizontal.bulleted.list li:first-child,
+ .ui.horizontal.bulleted.list > .item:first-child {
+ margin-left: 0;
+ }
+ ul.ui.horizontal.bulleted.list li::before,
+ .ui.horizontal.bulleted.list > .item::before {
+ color: @horizontalBulletColor;
+ }
+ ul.ui.horizontal.bulleted.list li:first-child::before,
+ .ui.horizontal.bulleted.list > .item:first-child::before {
+ display: none;
+ }
+ }
+}
+
+& when (@variationListOrdered) {
+ /*-------------------
+ Ordered
+ --------------------*/
+
+ ol.ui.list,
+ .ui.ordered.list,
+ .ui.ordered.list .list:not(.icon),
+ ol.ui.list ol {
+ counter-reset: ordered;
+ margin-left: @orderedCountDistance;
+ list-style-type: none;
+ }
+ ol.ui.list li,
+ .ui.ordered.list .list > .item,
+ .ui.ordered.list > .item {
+ list-style-type: none;
+ position: relative;
+ }
+ ol.ui.list li:before,
+ .ui.ordered.list .list > .item:before,
+ .ui.ordered.list > .item:before {
+ position: absolute;
+ top: auto;
+ left: auto;
+ user-select: none;
+ pointer-events: none;
+ margin-left: -(@orderedCountDistance);
+ counter-increment: @orderedCountName;
+ content: @orderedCountContent;
+ text-align: @orderedCountTextAlign;
+ color: @orderedCountColor;
+ vertical-align: @orderedCountVerticalAlign;
+ opacity: @orderedCountOpacity;
+ }
+
+ & when (@variationListInverted) {
+ ol.ui.inverted.list li:before,
+ .ui.ordered.inverted.list .list > .item:before,
+ .ui.ordered.inverted.list > .item:before {
+ color: @orderedInvertedCountColor;
+ }
+ }
+
+ /* Value */
+ .ui.ordered.list .list > .item[data-value]:before,
+ .ui.ordered.list > .item[data-value]:before {
+ content: attr(data-value);
+ }
+ ol.ui.list li[value]:before {
+ content: attr(value);
+ }
+
+ /* Child Lists */
+ ol.ui.list ol,
+ .ui.ordered.list .list:not(.icon) {
+ margin-left: @orderedChildCountDistance;
+ }
+ ol.ui.list ol li:before,
+ .ui.ordered.list .list > .item:before {
+ margin-left: @orderedChildCountOffset;
+ }
+
+ & when (@variationListHorizontal) {
+ /* Horizontal Ordered */
+ ol.ui.horizontal.list,
+ .ui.ordered.horizontal.list {
+ margin-left: 0;
+ }
+ ol.ui.horizontal.list li:before,
+ .ui.ordered.horizontal.list .list > .item:before,
+ .ui.ordered.horizontal.list > .item:before {
+ position: static;
+ margin: 0 @horizontalOrderedCountDistance 0 0;
+ }
+ }
+}
+
+& when (@variationListSuffixed) {
+ /* Suffixed Ordered */
+ ol.ui.suffixed.list li:before,
+ .ui.suffixed.ordered.list .list > .item:before,
+ .ui.suffixed.ordered.list > .item:before {
+ content: @orderedCountContentSuffixed;
+ }
+}
+
+& when (@variationListDivided) {
+ /*-------------------
+ Divided
+ --------------------*/
+
+ .ui.divided.list > .item {
+ border-top: @dividedBorder;
+ }
+ .ui.divided.list .list > .item {
+ border-top: @dividedChildListBorder;
+ }
+ .ui.divided.list .item .list > .item {
+ border-top: @dividedChildItemBorder;
+ }
+ .ui.divided.list .list > .item:first-child,
+ .ui.divided.list > .item:first-child {
+ border-top: none;
+ }
+
+ /* Sub Menu */
+ .ui.divided.list:not(.horizontal) .list > .item:first-child {
+ border-top-width: @dividedBorderWidth;
+ }
+
+ & when (@variationListBulleted) {
+ /* Divided bulleted */
+ .ui.divided.bulleted.list:not(.horizontal),
+ .ui.divided.bulleted.list .list:not(.icon) {
+ margin-left: 0;
+ padding-left: 0;
+ }
+ .ui.divided.bulleted.list > .item:not(.horizontal) {
+ padding-left: @bulletDistance;
+ }
+ }
+
+ & when (@variationListOrdered) {
+ /* Divided Ordered */
+ .ui.divided.ordered.list {
+ margin-left: 0;
+ }
+ .ui.divided.ordered.list .list > .item,
+ .ui.divided.ordered.list > .item {
+ padding-left: @orderedCountDistance;
+ }
+ .ui.divided.ordered.list .item .list:not(.icon) {
+ margin-left: 0;
+ margin-right: 0;
+ padding-bottom: @itemVerticalPadding;
+ }
+ .ui.divided.ordered.list .item .list > .item {
+ padding-left: @orderedChildCountDistance;
+ }
+ }
+
+ & when (@variationListSelection) {
+ /* Divided Selection */
+
+ .ui.divided.selection.list .list > .item,
+ .ui.divided.selection.list > .item {
+ margin: 0;
+ border-radius: 0;
+ }
+ }
+
+ & when (@variationListHorizontal) {
+ /* Divided horizontal */
+ .ui.divided.horizontal.list {
+ margin-left: 0;
+ }
+ .ui.divided.horizontal.list > .item {
+ padding-left: @horizontalDividedSpacing;
+ }
+ .ui.divided.horizontal.list > .item:not(:last-child) {
+ padding-right: @horizontalDividedSpacing;
+ }
+ .ui.divided.horizontal.list > .item {
+ border-top: none;
+ border-right: @dividedBorder;
+ margin: 0;
+ line-height: @horizontalDividedLineHeight;
+ }
+ .ui.horizontal.divided.list > .item:last-child {
+ border-right: none;
+ }
+ }
+
+ & when (@variationListInverted) {
+ /* Inverted */
+
+ .ui.divided.inverted.list > .item,
+ .ui.divided.inverted.list > .list,
+ .ui.divided.inverted.horizontal.list > .item {
+ border-color: @dividedInvertedBorderColor;
+ }
+ }
+}
+
+& when (@variationListCelled) {
+ /*-------------------
+ Celled
+ --------------------*/
+
+ .ui.celled.list > .item,
+ .ui.celled.list > .list {
+ border-top: @celledBorder;
+ padding-left: @celledHorizontalPadding;
+ padding-right: @celledHorizontalPadding;
+ }
+ .ui.celled.list > .item:last-child {
+ border-bottom: @celledBorder;
+ }
+
+ /* Padding on all elements */
+ .ui.celled.list > .item:first-child,
+ .ui.celled.list > .item:last-child {
+ padding-top: @itemVerticalPadding;
+ padding-bottom: @itemVerticalPadding;
+ }
+
+ /* Sub Menu */
+ .ui.celled.list .item .list > .item {
+ border-width: 0;
+ }
+ .ui.celled.list .list > .item:first-child {
+ border-top-width: 0;
+ }
+
+ & when (@variationListBulleted) {
+ /* Celled Bulleted */
+ .ui.celled.bulleted.list {
+ margin-left: 0;
+ }
+ .ui.celled.bulleted.list .list > .item,
+ .ui.celled.bulleted.list > .item {
+ padding-left: (@bulletDistance);
+ }
+ .ui.celled.bulleted.list .item .list:not(.icon) {
+ margin-left: -(@bulletDistance);
+ margin-right: -(@bulletDistance);
+ padding-bottom: @itemVerticalPadding;
+ }
+ }
+
+ & when (@variationListOrdered) {
+ /* Celled Ordered */
+ .ui.celled.ordered.list {
+ margin-left: 0;
+ }
+ .ui.celled.ordered.list .list > .item,
+ .ui.celled.ordered.list > .item {
+ padding-left: @orderedCountDistance;
+ }
+ .ui.celled.ordered.list .item .list:not(.icon) {
+ margin-left: 0;
+ margin-right: 0;
+ padding-bottom: @itemVerticalPadding;
+ }
+ .ui.celled.ordered.list .list > .item {
+ padding-left: @orderedChildCountDistance;
+ }
+ }
+
+ & when (@variationListHorizontal) {
+ /* Celled Horizontal */
+ .ui.horizontal.celled.list {
+ margin-left: 0;
+ }
+ .ui.horizontal.celled.list .list > .item,
+ .ui.horizontal.celled.list > .item {
+ border-top: none;
+ border-left: @celledBorder;
+ margin: 0;
+ padding-left: @horizontalCelledSpacing;
+ padding-right: @horizontalCelledSpacing;
+
+ line-height: @horizontalCelledLineHeight;
+ }
+ .ui.horizontal.celled.list .list > .item:last-child,
+ .ui.horizontal.celled.list > .item:last-child {
+ border-bottom: none;
+ border-right: @celledBorder;
+ }
+ }
+
+ & when (@variationListInverted) {
+ /* Inverted */
+ .ui.celled.inverted.list > .item,
+ .ui.celled.inverted.list > .list {
+ border-color: @celledInvertedBorder;
+ }
+ .ui.celled.inverted.horizontal.list .list > .item,
+ .ui.celled.inverted.horizontal.list > .item {
+ border-color: @celledInvertedBorder;
+ }
+ }
+}
+
+& when (@variationListRelaxed) {
+ /*-------------------
+ Relaxed
+ --------------------*/
+
+ .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
+ padding-top: @relaxedItemVerticalPadding;
+ }
+ .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
+ padding-bottom: @relaxedItemVerticalPadding;
+ }
+
+ & when (@variationListHorizontal) {
+ .ui.horizontal.relaxed.list .list > .item:not(:first-child),
+ .ui.horizontal.relaxed.list > .item:not(:first-child) {
+ padding-left: @relaxedHorizontalPadding;
+ }
+ .ui.horizontal.relaxed.list .list > .item:not(:last-child),
+ .ui.horizontal.relaxed.list > .item:not(:last-child) {
+ padding-right: @relaxedHorizontalPadding;
+ }
+ }
+
+ /* Very Relaxed */
+ .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
+ padding-top: @veryRelaxedItemVerticalPadding;
+ }
+ .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+ padding-bottom: @veryRelaxedItemVerticalPadding;
+ }
+
+ & when (@variationListHorizontal) {
+ .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
+ .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
+ padding-left: @veryRelaxedHorizontalPadding;
+ }
+ .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
+ .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
+ padding-right: @veryRelaxedHorizontalPadding;
+ }
+ }
}
-
-/*-------------------
- Fitted
---------------------*/
-.ui.fitted.list:not(.selection) .list > .item,
-.ui.fitted.list:not(.selection) > .item {
- padding-left: 0em;
- padding-right: 0em;
-}
-.ui.fitted.selection.list .list > .item,
-.ui.fitted.selection.list > .item {
- margin-left: -@selectionListItemHorizontalPadding;
- margin-right: -@selectionListItemHorizontalPadding;
-}
-
-/*-------------------
- Bulleted
---------------------*/
-
-ul.ui.list,
-.ui.bulleted.list {
- margin-left: @bulletDistance;
-}
-ul.ui.list li,
-.ui.bulleted.list .list > .item,
-.ui.bulleted.list > .item {
- position: relative;
-}
-ul.ui.list li:before,
-.ui.bulleted.list .list > .item:before,
-.ui.bulleted.list > .item:before {
- user-select: none;
- pointer-events: none;
- position: absolute;
- top: auto;
- left: auto;
- font-weight: @normal;
- margin-left: @bulletOffset;
- content: @bulletCharacter;
- opacity: @bulletOpacity;
- color: @bulletColor;
- vertical-align: @bulletVerticalAlign;
-}
-
-ul.ui.list li:before,
-.ui.bulleted.list .list > a.item:before,
-.ui.bulleted.list > a.item:before {
- color: @bulletLinkColor;
-}
-
-ul.ui.list ul,
-.ui.bulleted.list .list {
- padding-left: @bulletChildDistance;
-}
-
-/* Horizontal Bulleted */
-ul.ui.horizontal.bulleted.list,
-.ui.horizontal.bulleted.list {
- margin-left: 0em;
-}
-ul.ui.horizontal.bulleted.list li,
-.ui.horizontal.bulleted.list > .item {
- margin-left: @horizontalBulletSpacing;
-}
-ul.ui.horizontal.bulleted.list li:first-child,
-.ui.horizontal.bulleted.list > .item:first-child {
- margin-left: 0em;
-}
-ul.ui.horizontal.bulleted.list li::before,
-.ui.horizontal.bulleted.list > .item::before {
- color: @horizontalBulletColor;
-}
-ul.ui.horizontal.bulleted.list li:first-child::before,
-.ui.horizontal.bulleted.list > .item:first-child::before {
- display: none;
-}
-
-/*-------------------
- Ordered
---------------------*/
-
-ol.ui.list,
-.ui.ordered.list,
-.ui.ordered.list .list,
-ol.ui.list ol {
- counter-reset: ordered;
- margin-left: @orderedCountDistance;
- list-style-type: none;
-}
-ol.ui.list li,
-.ui.ordered.list .list > .item,
-.ui.ordered.list > .item {
- list-style-type: none;
- position: relative;
-}
-ol.ui.list li:before,
-.ui.ordered.list .list > .item:before,
-.ui.ordered.list > .item:before {
- position: absolute;
- top: auto;
- left: auto;
- user-select: none;
- pointer-events: none;
- margin-left: -(@orderedCountDistance);
- counter-increment: @orderedCountName;
- content: @orderedCountContent;
- text-align: @orderedCountTextAlign;
- color: @orderedCountColor;
- vertical-align: @orderedCountVerticalAlign;
- opacity: @orderedCountOpacity;
-}
-
-ol.ui.inverted.list li:before,
-.ui.ordered.inverted.list .list > .item:before,
-.ui.ordered.inverted.list > .item:before {
- color: @orderedInvertedCountColor;
-}
-
-/* Value */
-.ui.ordered.list > .list > .item[data-value],
-.ui.ordered.list > .item[data-value] {
- content: attr(data-value);
-}
-ol.ui.list li[value]:before {
- content: attr(value);
-}
-
-/* Child Lists */
-ol.ui.list ol,
-.ui.ordered.list .list {
- margin-left: @orderedChildCountDistance;
-}
-ol.ui.list ol li:before,
-.ui.ordered.list .list > .item:before {
- margin-left: @orderedChildCountOffset;
-}
-
-/* Horizontal Ordered */
-ol.ui.horizontal.list,
-.ui.ordered.horizontal.list {
- margin-left: 0em;
-}
-ol.ui.horizontal.list li:before,
-.ui.ordered.horizontal.list .list > .item:before,
-.ui.ordered.horizontal.list > .item:before {
- position: static;
- margin: 0em @horizontalOrderedCountDistance 0em 0em;
-}
-
-/*-------------------
- Divided
---------------------*/
-
-.ui.divided.list > .item {
- border-top: @dividedBorder;
-}
-.ui.divided.list .list > .item {
- border-top: @dividedChildListBorder;
-}
-.ui.divided.list .item .list > .item {
- border-top: @dividedChildItemBorder;
-}
-.ui.divided.list .list > .item:first-child,
-.ui.divided.list > .item:first-child {
- border-top: none;
-}
-
-/* Sub Menu */
-.ui.divided.list:not(.horizontal) .list > .item:first-child {
- border-top-width: @dividedBorderWidth;
-}
-
-/* Divided bulleted */
-.ui.divided.bulleted.list:not(.horizontal),
-.ui.divided.bulleted.list .list {
- margin-left: 0em;
- padding-left: 0em;
-}
-.ui.divided.bulleted.list > .item:not(.horizontal) {
- padding-left: @bulletDistance;
-}
-
-/* Divided Ordered */
-.ui.divided.ordered.list {
- margin-left: 0em;
-}
-.ui.divided.ordered.list .list > .item,
-.ui.divided.ordered.list > .item {
- padding-left: @orderedCountDistance;
-}
-.ui.divided.ordered.list .item .list {
- margin-left: 0em;
- margin-right: 0em;
- padding-bottom: @itemVerticalPadding;
-}
-.ui.divided.ordered.list .item .list > .item {
- padding-left: @orderedChildCountDistance;
-}
-
-/* Divided Selection */
-.ui.divided.selection.list .list > .item,
-.ui.divided.selection.list > .item {
- margin: 0em;
- border-radius: 0em;
-}
-
-/* Divided horizontal */
-.ui.divided.horizontal.list {
- margin-left: 0em;
-}
-.ui.divided.horizontal.list > .item:not(:first-child) {
- padding-left: @horizontalDividedSpacing;
-}
-.ui.divided.horizontal.list > .item:not(:last-child) {
- padding-right: @horizontalDividedSpacing;
-}
-.ui.divided.horizontal.list > .item {
- border-top: none;
- border-left: @dividedBorder;
- margin: 0em;
- line-height: @horizontalDividedLineHeight;
-}
-.ui.horizontal.divided.list > .item:first-child {
- border-left: none;
-}
-/* Inverted */
-.ui.divided.inverted.list > .item,
-.ui.divided.inverted.list > .list,
-.ui.divided.inverted.horizontal.list > .item {
- border-color: @dividedInvertedBorderColor;
-}
-
-
-/*-------------------
- Celled
---------------------*/
-
-.ui.celled.list > .item,
-.ui.celled.list > .list {
- border-top: @celledBorder;
- padding-left: @celledHorizontalPadding;
- padding-right: @celledHorizontalPadding;
-}
-.ui.celled.list > .item:last-child {
- border-bottom: @celledBorder;
-}
-
-/* Padding on all elements */
-.ui.celled.list > .item:first-child,
-.ui.celled.list > .item:last-child {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
-}
-
-/* Sub Menu */
-.ui.celled.list .item .list > .item {
- border-width: 0px;
-}
-.ui.celled.list .list > .item:first-child {
- border-top-width: 0px;
-}
-
-/* Celled Bulleted */
-.ui.celled.bulleted.list {
- margin-left: 0em;
-}
-.ui.celled.bulleted.list .list > .item,
-.ui.celled.bulleted.list > .item {
- padding-left: (@bulletDistance);
-}
-.ui.celled.bulleted.list .item .list {
- margin-left: -(@bulletDistance);
- margin-right: -(@bulletDistance);
- padding-bottom: @itemVerticalPadding;
-}
-
-/* Celled Ordered */
-.ui.celled.ordered.list {
- margin-left: 0em;
-}
-.ui.celled.ordered.list .list > .item,
-.ui.celled.ordered.list > .item {
- padding-left: @orderedCountDistance;
-}
-.ui.celled.ordered.list .item .list {
- margin-left: 0em;
- margin-right: 0em;
- padding-bottom: @itemVerticalPadding;
-}
-.ui.celled.ordered.list .list > .item {
- padding-left: @orderedChildCountDistance;
-}
-
-/* Celled Horizontal */
-.ui.horizontal.celled.list {
- margin-left: 0em;
-}
-.ui.horizontal.celled.list .list > .item,
-.ui.horizontal.celled.list > .item {
- border-top: none;
- border-left: @celledBorder;
- margin: 0em;
- padding-left: @horizontalCelledSpacing;
- padding-right: @horizontalCelledSpacing;
-
- line-height: @horizontalCelledLineHeight;
-}
-.ui.horizontal.celled.list .list > .item:last-child,
-.ui.horizontal.celled.list > .item:last-child {
- border-bottom: none;
- border-right: @celledBorder;
-}
-
-/* Inverted */
-.ui.celled.inverted.list > .item,
-.ui.celled.inverted.list > .list {
- border-color: @celledInvertedBorder;
-}
-.ui.celled.inverted.horizontal.list .list > .item,
-.ui.celled.inverted.horizontal.list > .item {
- border-color: @celledInvertedBorder;
-}
-
-/*-------------------
- Relaxed
---------------------*/
-
-.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
- padding-top: @relaxedItemVerticalPadding;
-}
-.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
- padding-bottom: @relaxedItemVerticalPadding;
-}
-.ui.horizontal.relaxed.list .list > .item:not(:first-child),
-.ui.horizontal.relaxed.list > .item:not(:first-child) {
- padding-left: @relaxedHorizontalPadding;
-}
-.ui.horizontal.relaxed.list .list > .item:not(:last-child),
-.ui.horizontal.relaxed.list > .item:not(:last-child) {
- padding-right: @relaxedHorizontalPadding;
-}
-
-/* Very Relaxed */
-.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
- padding-top: @veryRelaxedItemVerticalPadding;
-}
-.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
- padding-bottom: @veryRelaxedItemVerticalPadding;
-}
-.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
-.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
- padding-left: @veryRelaxedHorizontalPadding;
-}
-.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
-.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
- padding-right: @veryRelaxedHorizontalPadding;
-}
-
/*-------------------
Sizes
--------------------*/
-.ui.mini.list {
- font-size: @relativeMini;
-}
-.ui.tiny.list {
- font-size: @relativeTiny;
-}
-.ui.small.list {
- font-size: @relativeSmall;
-}
.ui.list {
font-size: @relativeMedium;
}
-.ui.large.list {
- font-size: @relativeLarge;
-}
-.ui.big.list {
- font-size: @relativeBig;
-}
-.ui.huge.list {
- font-size: @relativeHuge;
-}
-.ui.massive.list {
- font-size: @relativeMassive;
-}
-
-.ui.mini.horizontal.list .list > .item,
-.ui.mini.horizontal.list > .item {
- font-size: @mini;
-}
-.ui.tiny.horizontal.list .list > .item,
-.ui.tiny.horizontal.list > .item {
- font-size: @tiny;
-}
-.ui.small.horizontal.list .list > .item,
-.ui.small.horizontal.list > .item {
- font-size: @small;
-}
-.ui.horizontal.list .list > .item,
-.ui.horizontal.list > .item {
- font-size: @medium;
-}
-.ui.large.horizontal.list .list > .item,
-.ui.large.horizontal.list > .item {
- font-size: @large;
-}
-.ui.big.horizontal.list .list > .item,
-.ui.big.horizontal.list > .item {
- font-size: @big;
-}
-.ui.huge.horizontal.list .list > .item,
-.ui.huge.horizontal.list > .item {
- font-size: @huge;
-}
-.ui.massive.horizontal.list .list > .item,
-.ui.massive.horizontal.list > .item {
- font-size: @massive;
+& when not (@variationListSizes = false) {
+ each(@variationListSizes, {
+ @rs: @{value}ListSize;
+ @s: @@value;
+ .ui.@{value}.list {
+ font-size: @@rs;
+ }
+ & when (@variationListHorizontal) {
+ .ui.@{value}.horizontal.list .list > .item,
+ .ui.@{value}.horizontal.list > .item {
+ font-size: @s;
+ }
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/loader.less b/ui/src/definitions/elements/loader.less
index 40d5de67b35..0b64a84c743 100644
--- a/ui/src/definitions/elements/loader.less
+++ b/ui/src/definitions/elements/loader.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Loader
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Loader
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -27,7 +27,7 @@
position: absolute;
top: @loaderTopOffset;
left: @loaderLeftOffset;
- margin: 0px;
+ margin: 0;
text-align: center;
z-index: 1000;
transform: translateX(-50%) translateY(-50%);
@@ -37,7 +37,7 @@
.ui.loader:before {
position: absolute;
content: '';
- top: 0%;
+ top: 0;
left: 50%;
width: 100%;
height: 100%;
@@ -50,138 +50,94 @@
.ui.loader:after {
position: absolute;
content: '';
- top: 0%;
+ top: 0;
left: 50%;
width: 100%;
height: 100%;
- animation: loader @loaderSpeed linear;
- animation-iteration-count: infinite;
-
+ animation: loader @loaderSpeed infinite linear;
+ border: @loaderLineWidth solid @shapeBorderColor;
border-radius: @circularRadius;
- border-color: @shapeBorderColor;
- border-style: solid;
- border-width: @loaderLineWidth;
+ box-shadow: 0 0 0 1px transparent;
+}
+
+& when (@variationLoaderSpeeds) {
+ /* Speeds */
+
+ .ui.fast.loading.loading:after,
+ .ui.fast.loading.loading .input > i.icon:after,
+ .ui.fast.loading.loading > i.icon:after,
+ .ui.fast.loader:after {
+ animation-duration: @loaderSpeedFast;
+ }
- box-shadow: 0px 0px 0px 1px transparent;
+ .ui.slow.loading.loading:after,
+ .ui.slow.loading.loading .input > i.icon:after,
+ .ui.slow.loading.loading > i.icon:after,
+ .ui.slow.loader:after {
+ animation-duration: @loaderSpeedSlow;
+ }
}
/* Active Animation */
@keyframes loader {
- from {
- transform: rotate(0deg);
- }
- to {
+ 100% {
transform: rotate(360deg);
}
}
-/* Sizes */
-.ui.mini.loader:before,
-.ui.mini.loader:after {
- width: @mini;
- height: @mini;
- margin: @miniOffset;
-}
-.ui.tiny.loader:before,
-.ui.tiny.loader:after {
- width: @tiny;
- height: @tiny;
- margin: @tinyOffset;
-}
-.ui.small.loader:before,
-.ui.small.loader:after {
- width: @small;
- height: @small;
- margin: @smallOffset;
-}
-.ui.loader:before,
-.ui.loader:after {
- width: @medium;
- height: @medium;
- margin: @mediumOffset;
-}
-.ui.large.loader:before,
-.ui.large.loader:after {
- width: @large;
- height: @large;
- margin: @largeOffset;
-}
-.ui.big.loader:before,
-.ui.big.loader:after {
- width: @big;
- height: @big;
- margin: @bigOffset;
-}
-.ui.huge.loader:before,
-.ui.huge.loader:after {
- width: @huge;
- height: @huge;
- margin: @hugeOffset;
-}
-.ui.massive.loader:before,
-.ui.massive.loader:after {
- width: @massive;
- height: @massive;
- margin: @massiveOffset;
-}
-
/*-------------------
Coupling
--------------------*/
/* Show inside active dimmer */
-.ui.dimmer .loader {
+.ui.dimmer > .loader {
display: block;
}
/* Black Dimmer */
-.ui.dimmer .ui.loader {
+.ui.dimmer > .ui.loader {
color: @invertedLoaderTextColor;
}
-.ui.dimmer .ui.loader:before {
+.ui.dimmer > .ui.loader:not(.elastic):before {
border-color: @invertedLoaderFillColor;
}
-.ui.dimmer .ui.loader:after {
- border-color: @invertedShapeBorderColor;
-}
/* White Dimmer (Inverted) */
-.ui.inverted.dimmer .ui.loader {
+.ui.inverted.dimmer > .ui.loader {
color: @loaderTextColor;
}
-.ui.inverted.dimmer .ui.loader:before {
+.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
border-color: @loaderFillColor;
}
-.ui.inverted.dimmer .ui.loader:after {
- border-color: @shapeBorderColor;
-}
/*******************************
Types
*******************************/
+& when (@variationLoaderText) {
+ /*-------------------
+ Text
+ --------------------*/
-/*-------------------
- Text
---------------------*/
-
-.ui.text.loader {
- width: auto !important;
- height: auto !important;
- text-align: center;
- font-style: normal;
+ .ui.ui.ui.ui.text.loader {
+ width: auto;
+ height: auto;
+ text-align: center;
+ font-style: normal;
+ }
}
/*******************************
States
*******************************/
-
-.ui.indeterminate.loader:after {
- animation-direction: @indeterminateDirection;
- animation-duration: @indeterminateSpeed;
+& when (@variationLoaderIndeterminate) {
+ .ui.indeterminate.loader:after {
+ animation-direction: @indeterminateDirection;
+ animation-duration: @indeterminateSpeed;
+ }
}
.ui.loader.active,
@@ -202,131 +158,259 @@
Sizes
--------------------*/
-
-/* Loader */
-.ui.inverted.dimmer .ui.mini.loader,
-.ui.mini.loader {
- width: @mini;
- height: @mini;
- font-size: @miniFontSize;
-}
-.ui.inverted.dimmer .ui.tiny.loader,
-.ui.tiny.loader {
- width: @tiny;
- height: @tiny;
- font-size: @tinyFontSize;
-}
-.ui.inverted.dimmer .ui.small.loader,
-.ui.small.loader {
- width: @small;
- height: @small;
- font-size: @smallFontSize;
-}
-.ui.inverted.dimmer .ui.loader,
.ui.loader {
width: @medium;
height: @medium;
font-size: @mediumFontSize;
}
-.ui.inverted.dimmer .ui.large.loader,
-.ui.large.loader {
- width: @large;
- height: @large;
- font-size: @largeFontSize;
-}
-.ui.inverted.dimmer .ui.big.loader,
-.ui.big.loader {
- width: @big;
- height: @big;
- font-size: @bigFontSize;
-}
-.ui.inverted.dimmer .ui.huge.loader,
-.ui.huge.loader {
- width: @huge;
- height: @huge;
- font-size: @hugeFontSize;
-}
-.ui.inverted.dimmer .ui.massive.loader,
-.ui.massive.loader {
- width: @massive;
- height: @massive;
- font-size: @massiveFontSize;
-}
-
-/* Text Loader */
-.ui.mini.text.loader {
- min-width: @mini;
- padding-top: (@mini + @textDistance);
-}
-.ui.tiny.text.loader {
- min-width: @tiny;
- padding-top: (@tiny + @textDistance);
-}
-.ui.small.text.loader {
- min-width: @small;
- padding-top: (@small + @textDistance);
-}
-.ui.text.loader {
- min-width: @medium;
- padding-top: (@medium + @textDistance);
-}
-.ui.large.text.loader {
- min-width: @large;
- padding-top: (@large + @textDistance);
-}
-.ui.big.text.loader {
- min-width: @big;
- padding-top: (@big + @textDistance);
+.ui.loader:before,
+.ui.loader:after {
+ width: @medium;
+ height: @medium;
+ margin: @mediumOffset;
}
-.ui.huge.text.loader {
- min-width: @huge;
- padding-top: (@huge + @textDistance);
+& when (@variationLoaderText) {
+ .ui.text.loader {
+ min-width: @medium;
+ padding-top: (@medium + @textDistance);
+ }
}
-.ui.massive.text.loader {
- min-width: @massive;
- padding-top: (@massive + @textDistance);
+& when not (@variationLoaderSizes = false) {
+ each(@variationLoaderSizes, {
+ @o: @{value}Offset;
+ @f: @{value}FontSize;
+ @s: @@value;
+ .ui.@{value}.loader {
+ width: @s;
+ height: @s;
+ font-size: @@f;
+ }
+ .ui.@{value}.loader:before,
+ .ui.@{value}.loader:after {
+ width: @s;
+ height: @s;
+ margin: @@o;
+ }
+ & when (@variationLoaderText) {
+ .ui.@{value}.text.loader {
+ min-width: @s;
+ padding-top: (@s + @textDistance);
+ }
+ }
+ })
}
-
/*-------------------
- Inverted
+ Colors
--------------------*/
-.ui.inverted.loader {
- color: @invertedLoaderTextColor
-}
-.ui.inverted.loader:before {
- border-color: @invertedLoaderFillColor;
-}
-.ui.inverted.loader:after {
- border-top-color: @invertedLoaderLineColor;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+
+ .ui.@{color}.elastic.loader.loader:before,
+ .ui.@{color}.basic.elastic.loading.button:before,
+ .ui.@{color}.basic.elastic.loading.button:after,
+ .ui.@{color}.elastic.loading.loading.loading:not(.segment):before,
+ .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+ .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
+ .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
+ .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
+ .ui.@{color}.loading.loading.loading.loading > i.icon:after,
+ .ui.@{color}.loader.loader.loader:after {
+ color: @c;
+ }
+ .ui.inverted.@{color}.elastic.loader:before,
+ .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before,
+ .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+ .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
+ .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
+ .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
+ .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
+ .ui.inverted.@{color}.loader.loader.loader:after {
+ color: @l;
+ }
+})
+
+.ui.elastic.loader.loader:before,
+.ui.elastic.loading.loading.loading:before,
+.ui.elastic.loading.loading.loading .input > i.icon:before,
+.ui.elastic.loading.loading.loading > i.icon:before,
+.ui.loading.loading.loading.loading:not(.usual):after,
+.ui.loading.loading.loading.loading .input > i.icon:after,
+.ui.loading.loading.loading.loading > i.icon:after,
+.ui.loader.loader.loader:after {
+ border-color: currentColor;
+}
+.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
+ color: @invertedLoaderLineColor;
+}
+.ui.elastic.basic.loading.button:before,
+.ui.elastic.basic.loading.button:after {
+ color: @loaderLineColor;
+}
+.ui.double.loading.loading.loading.loading.button:after {
+ border-bottom-color: currentColor;
+}
+
+& when (@variationLoaderInline) {
+ /*-------------------
+ Inline
+ --------------------*/
+
+ .ui.inline.loader {
+ position: relative;
+ vertical-align: @inlineVerticalAlign;
+ margin: @inlineMargin;
+ left: 0;
+ top: 0;
+ transform: none;
+ }
-/*-------------------
- Inline
---------------------*/
+ .ui.inline.loader.active,
+ .ui.inline.loader.visible {
+ display: inline-block;
+ }
-.ui.inline.loader {
- position: relative;
- vertical-align: @inlineVerticalAlign;
- margin: @inlineMargin;
- left: 0em;
- top: 0em;
- transform: none;
+ /* Centered Inline */
+ .ui.centered.inline.loader.active,
+ .ui.centered.inline.loader.visible {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
}
-.ui.inline.loader.active,
-.ui.inline.loader.visible {
- display: inline-block;
+.ui.loading.loading.loading.loading.loading.loading:after,
+.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
+.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
+.ui.loader.loader.loader.loader.loader:after {
+ border-left-color:transparent;
+ border-right-color:transparent;
}
-
-/* Centered Inline */
-.ui.centered.inline.loader.active,
-.ui.centered.inline.loader.visible {
- display: block;
- margin-left: auto;
- margin-right: auto;
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
+.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
+ border-bottom-color: transparent;
+}
+.ui.loading.loading.loading.loading.loading.loading.segment:after,
+.ui.loading.loading.loading.loading.loading.loading.form:after {
+ border-left-color:@loaderFillColor;
+ border-right-color:@loaderFillColor;
+}
+.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
+.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
+ border-bottom-color: @loaderFillColor;
}
+& when (@variationLoaderElastic) {
+ /*-------------------
+ Elastic
+ --------------------*/
+
+ .ui.dimmer > .ui.elastic.loader {
+ color: @invertedLoaderLineColor;
+ }
+ .ui.inverted.dimmer > .ui.elastic.loader {
+ color: @loaderLineColor;
+ }
+ .ui.elastic.loading.loading:not(.form):not(.segment):after,
+ .ui.elastic.loading.loading .input > i.icon:after,
+ .ui.elastic.loading.loading > i.icon:after,
+ .ui.elastic.loader.loader:after {
+ animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+ animation-delay: 0.3s;
+ }
+ .ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
+ .ui.elastic.loading.loading.loading .input > i.icon:before,
+ .ui.elastic.loading.loading.loading > i.icon:before,
+ .ui.elastic.loader.loader:before {
+ animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+ -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+ border-right-color: transparent;
+ }
+ & when (@variationLoaderInline) {
+ .ui.elastic.inline.loader:empty {
+ animation: loader 8s infinite linear;
+ }
+ }
+ & when (@variationLoaderSpeeds) {
+ .ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
+ .ui.slow.elastic.loading.loading .input > i.icon:after,
+ .ui.slow.elastic.loading.loading > i.icon:after,
+ .ui.slow.elastic.loader.loader:after {
+ animation-duration: 1.5s;
+ animation-delay: 0.45s;
+ }
+ .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
+ .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
+ .ui.slow.elastic.loading.loading.loading > i.icon:before,
+ .ui.slow.elastic.loader.loader:before {
+ animation-duration: 1.5s;
+ }
+ .ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
+ .ui.fast.elastic.loading.loading .input > i.icon:after,
+ .ui.fast.elastic.loading.loading > i.icon:after,
+ .ui.fast.elastic.loader.loader:after {
+ animation-duration: 0.66s;
+ animation-delay: 0.20s;
+ }
+ .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
+ .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
+ .ui.fast.elastic.loading.loading.loading > i.icon:before,
+ .ui.fast.elastic.loader.loader:before {
+ animation-duration: 0.66s;
+ }
+ }
+ @keyframes elastic-loader {
+ 0%, 1% {
+ border-left-color: transparent;
+ border-bottom-color: transparent
+ }
+ 1.1%, 50% {
+ border-left-color: inherit;
+ }
+ 10%, 35.1%{
+ border-bottom-color: transparent;
+ }
+ 10.1%, 35%{
+ border-bottom-color: inherit;
+ }
+ 50.1%{
+ border-left-color: transparent;
+ }
+ 100% {
+ border-left-color: transparent;
+ border-bottom-color: transparent;
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes currentcolor-elastic-loader {
+ 0%, 1% {
+ border-left-color: transparent;
+ border-bottom-color: transparent
+ }
+ 1.1%, 50% {
+ border-left-color: currentColor;
+ }
+ 10%, 35.1%{
+ border-bottom-color: transparent;
+ }
+ 10.1%, 35%{
+ border-bottom-color: currentColor;
+ }
+ 50.1%{
+ border-left-color: transparent;
+ }
+ 100% {
+ border-left-color: transparent;
+ border-bottom-color: transparent;
+ transform: rotate(360deg);
+ }
+ }
+}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/placeholder.less b/ui/src/definitions/elements/placeholder.less
new file mode 100644
index 00000000000..54406121580
--- /dev/null
+++ b/ui/src/definitions/elements/placeholder.less
@@ -0,0 +1,248 @@
+/*!
+ * # Fomantic-UI - Loader
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+/*******************************
+ Theme
+*******************************/
+
+@type : 'element';
+@element : 'placeholder';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+ Content
+--------------------*/
+
+.ui.placeholder {
+ position: static;
+ overflow: hidden;
+ animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
+ animation-iteration-count: infinite;
+ background-color: @white;
+ background-image: @placeholderLoadingGradient;
+ background-size: @placeholderLoadingGradientWidth 100%;
+ max-width: @placeholderMaxWidth;
+}
+
+@keyframes placeholderShimmer{
+ 0% {
+ background-position: -@placeholderLoadingGradientWidth 0
+ }
+ 100% {
+ background-position: @placeholderLoadingGradientWidth 0
+ }
+}
+
+.ui.placeholder + .ui.placeholder {
+ margin-top: @consecutivePlaceholderSpacing;
+}
+.ui.placeholder + .ui.placeholder {
+ animation-delay: @placeholderAnimationInterval;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder {
+ animation-delay: (@placeholderAnimationInterval * 2);
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+ animation-delay: (@placeholderAnimationInterval * 3);
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+ animation-delay: (@placeholderAnimationInterval * 4);
+}
+
+.ui.placeholder,
+.ui.placeholder > :before,
+.ui.placeholder .image.header:after,
+.ui.placeholder .line,
+.ui.placeholder .line:after {
+ background-color: @white;
+}
+
+.ui.placeholder.hidden {
+ display:none;
+}
+
+& when (@variationPlaceholderImage) {
+ /* Image */
+ .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
+ height: @placeholderImageHeight;
+ }
+ .ui.placeholder .square.image:not(.header) {
+ height: 0;
+ overflow: hidden;
+ /* 1/1 aspect ratio */
+ padding-top: 100%;
+ }
+ .ui.placeholder .rectangular.image:not(.header) {
+ height: 0;
+ overflow: hidden;
+ /* 4/3 aspect ratio */
+ padding-top: 75%;
+ }
+}
+
+& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) {
+ /* Lines */
+ .ui.placeholder .line {
+ position: relative;
+ height: @placeholderLineMargin;
+ }
+ .ui.placeholder .line:before,
+ .ui.placeholder .line:after {
+ top: 100%;
+ position: absolute;
+ content: '';
+ background-color: inherit;
+ }
+ .ui.placeholder .line:before {
+ left: 0;
+ }
+ .ui.placeholder .line:after {
+ right: 0;
+ }
+
+ /* Any Lines */
+ .ui.placeholder .line {
+ margin-bottom: @placeholderLineHeight;
+ }
+ .ui.placeholder .line:before,
+ .ui.placeholder .line:after {
+ height: @placeholderLineHeight;
+ }
+ .ui.placeholder .line:not(:first-child) {
+ margin-top: @placeholderLineHeight;
+ }
+
+ /* Line Outdent */
+ .ui.placeholder .line:nth-child(1):after {
+ width: @placeholderLineOneOutdent;
+ }
+ .ui.placeholder .line:nth-child(2):after {
+ width: @placeholderLineTwoOutdent;
+ }
+ .ui.placeholder .line:nth-child(3):after {
+ width: @placeholderLineThreeOutdent;
+ }
+ .ui.placeholder .line:nth-child(4):after {
+ width: @placeholderLineFourOutdent;
+ }
+ .ui.placeholder .line:nth-child(5):after {
+ width: @placeholderLineFiveOutdent;
+ }
+}
+
+& when (@variationPlaceholderHeader) {
+ /* Header Image + 2 Lines */
+ .ui.placeholder .header {
+ position: relative;
+ overflow: hidden;
+ }
+ /* Header Line 1 & 2*/
+ .ui.placeholder .header .line {
+ margin-bottom: @placeholderHeaderLineHeight;
+ }
+ .ui.placeholder .header .line:before,
+ .ui.placeholder .header .line:after {
+ height: @placeholderHeaderLineHeight;
+ }
+ .ui.placeholder .header .line:not(:first-child) {
+ margin-top: @placeholderHeaderLineHeight;
+ }
+ .ui.placeholder .header .line:after {
+ width: @placeholderHeaderLineOneOutdent;
+ }
+ .ui.placeholder .header .line:nth-child(2):after {
+ width: @placeholderHeaderLineTwoOutdent;
+ }
+
+ & when (@variationPlaceholderImage) {
+ /* Image Header */
+ .ui.placeholder .image.header .line {
+ margin-left: @placeholderImageWidth;
+ }
+ .ui.placeholder .image.header .line:before {
+ width: @placeholderImageTextIndent;
+ }
+ .ui.placeholder .image.header:after {
+ display: block;
+ height: @placeholderLineMargin;
+ content: '';
+ margin-left: @placeholderImageWidth;
+ }
+ }
+}
+
+/* Spacing */
+.ui.placeholder .image .line:first-child,
+.ui.placeholder .paragraph .line:first-child,
+.ui.placeholder .header .line:first-child {
+ height: 0.01px;
+}
+.ui.placeholder .image:not(:first-child):before,
+.ui.placeholder .paragraph:not(:first-child):before,
+.ui.placeholder .header:not(:first-child):before {
+ height: @placeholderSpacing;
+ content: '';
+ display: block;
+}
+
+& when (@variationPlaceholderInverted) {
+ /* Inverted Content Loader */
+ .ui.inverted.placeholder {
+ background-image: @placeholderInvertedLoadingGradient;
+ }
+ .ui.inverted.placeholder,
+ .ui.inverted.placeholder > :before,
+ .ui.inverted.placeholder .image.header:after,
+ .ui.inverted.placeholder .line,
+ .ui.inverted.placeholder .line:after {
+ background-color: @black;
+ }
+}
+
+/*******************************
+ Variations
+*******************************/
+
+
+/*-------------------
+ Sizes
+--------------------*/
+& when (@variationPlaceholderLengths) {
+ .ui.placeholder .full.line.line.line:after {
+ width: @placeholderFullLineOutdent;
+ }
+ .ui.placeholder .very.long.line.line.line:after {
+ width: @placeholderVeryLongLineOutdent;
+ }
+ .ui.placeholder .long.line.line.line:after {
+ width: @placeholderLongLineOutdent;
+ }
+ .ui.placeholder .medium.line.line.line:after {
+ width: @placeholderMediumLineOutdent;
+ }
+ .ui.placeholder .short.line.line.line:after {
+ width: @placeholderShortLineOutdent;
+ }
+ .ui.placeholder .very.short.line.line.line:after {
+ width: @placeholderVeryShortLineOutdent;
+ }
+}
+
+& when (@variationPlaceholderFluid) {
+ /*-------------------
+ Fluid
+ --------------------*/
+
+ .ui.fluid.placeholder {
+ max-width: none;
+ }
+}
+
+.loadUIOverrides();
diff --git a/ui/src/definitions/elements/rail.less b/ui/src/definitions/elements/rail.less
index 7eacee74da4..d7ffc5105cb 100644
--- a/ui/src/definitions/elements/rail.less
+++ b/ui/src/definitions/elements/rail.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Rail
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Rail
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -23,7 +23,7 @@
.ui.rail {
position: absolute;
- top: 0%;
+ top: 0;
width: @width;
height: @height;
}
@@ -31,124 +31,117 @@
.ui.left.rail {
left: auto;
right: 100%;
- padding: 0em @splitDistance 0em 0em;
- margin: 0em @splitDistance 0em 0em;
+ padding: 0 @splitDistance 0 0;
+ margin: 0 @splitDistance 0 0;
}
.ui.right.rail {
left: 100%;
right: auto;
- padding: 0em 0em 0em @splitDistance;
- margin: 0em 0em 0em @splitDistance;
+ padding: 0 0 0 @splitDistance;
+ margin: 0 0 0 @splitDistance;
}
/*******************************
Variations
*******************************/
-/*--------------
- Internal
----------------*/
-
-.ui.left.internal.rail {
- left: 0%;
- right: auto;
- padding: 0em 0em 0em @splitDistance;
- margin: 0em 0em 0em @splitDistance;
-}
-
-.ui.right.internal.rail {
- left: auto;
- right: 0%;
- padding: 0em @splitDistance 0em 0em;
- margin: 0em @splitDistance 0em 0em;
-}
-
-
-/*--------------
- Dividing
----------------*/
-
-.ui.dividing.rail {
- width: @dividingWidth;
-}
-.ui.left.dividing.rail {
- padding: 0em @splitDividingDistance 0em 0em;
- margin: 0em @splitDividingDistance 0em 0em;
- border-right: @dividingBorder;
-}
-.ui.right.dividing.rail {
- border-left: @dividingBorder;
- padding: 0em 0em 0em @splitDividingDistance;
- margin: 0em 0em 0em @splitDividingDistance;
-}
-
-/*--------------
- Distance
----------------*/
-
-.ui.close.rail {
- width: @closeWidth;
-}
-.ui.close.left.rail {
- padding: 0em @splitCloseDistance 0em 0em;
- margin: 0em @splitCloseDistance 0em 0em;
-}
-.ui.close.right.rail {
- padding: 0em 0em 0em @splitCloseDistance;
- margin: 0em 0em 0em @splitCloseDistance;
-}
-
-.ui.very.close.rail {
- width: @veryCloseWidth;
-}
-.ui.very.close.left.rail {
- padding: 0em @splitVeryCloseDistance 0em 0em;
- margin: 0em @splitVeryCloseDistance 0em 0em;
-}
-.ui.very.close.right.rail {
- padding: 0em 0em 0em @splitVeryCloseDistance;
- margin: 0em 0em 0em @splitVeryCloseDistance;
-}
-
-/*--------------
- Attached
----------------*/
-
-.ui.attached.left.rail,
-.ui.attached.right.rail {
- padding: 0em;
- margin: 0em;
+& when (@variationRailInternal) {
+ /*--------------
+ Internal
+ ---------------*/
+
+ .ui.left.internal.rail {
+ left: 0;
+ right: auto;
+ padding: 0 0 0 @splitDistance;
+ margin: 0 0 0 @splitDistance;
+ }
+
+ .ui.right.internal.rail {
+ left: auto;
+ right: 0;
+ padding: 0 @splitDistance 0 0;
+ margin: 0 @splitDistance 0 0;
+ }
+}
+
+& when (@variationRailDividing) {
+ /*--------------
+ Dividing
+ ---------------*/
+
+ .ui.dividing.rail {
+ width: @dividingWidth;
+ }
+ .ui.left.dividing.rail {
+ padding: 0 @splitDividingDistance 0 0;
+ margin: 0 @splitDividingDistance 0 0;
+ border-right: @dividingBorder;
+ }
+ .ui.right.dividing.rail {
+ border-left: @dividingBorder;
+ padding: 0 0 0 @splitDividingDistance;
+ margin: 0 0 0 @splitDividingDistance;
+ }
+}
+
+& when (@variationRailDistance) {
+ /*--------------
+ Distance
+ ---------------*/
+
+ .ui.close.rail {
+ width: @closeWidth;
+ }
+ .ui.close.left.rail {
+ padding: 0 @splitCloseDistance 0 0;
+ margin: 0 @splitCloseDistance 0 0;
+ }
+ .ui.close.right.rail {
+ padding: 0 0 0 @splitCloseDistance;
+ margin: 0 0 0 @splitCloseDistance;
+ }
+
+ .ui.very.close.rail {
+ width: @veryCloseWidth;
+ }
+ .ui.very.close.left.rail {
+ padding: 0 @splitVeryCloseDistance 0 0;
+ margin: 0 @splitVeryCloseDistance 0 0;
+ }
+ .ui.very.close.right.rail {
+ padding: 0 0 0 @splitVeryCloseDistance;
+ margin: 0 0 0 @splitVeryCloseDistance;
+ }
+}
+
+& when (@variationRailAttached) {
+ /*--------------
+ Attached
+ ---------------*/
+
+ .ui.attached.left.rail,
+ .ui.attached.right.rail {
+ padding: 0;
+ margin: 0;
+ }
}
/*--------------
Sizing
---------------*/
-.ui.mini.rail {
- font-size: @mini;
-}
-.ui.tiny.rail {
- font-size: @tiny;
-}
-.ui.small.rail {
- font-size: @small;
-}
.ui.rail {
font-size: @medium;
}
-.ui.large.rail {
- font-size: @large;
+& when not (@variationRailSizes = false) {
+ each(@variationRailSizes, {
+ @s: @@value;
+ .ui.@{value}.rail {
+ font-size: @s;
+ }
+ })
}
-.ui.big.rail {
- font-size: @big;
-}
-.ui.huge.rail {
- font-size: @huge;
-}
-.ui.massive.rail {
- font-size: @massive;
-}
-
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/reveal.less b/ui/src/definitions/elements/reveal.less
index 41b3764718c..839668ef499 100644
--- a/ui/src/definitions/elements/reveal.less
+++ b/ui/src/definitions/elements/reveal.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Reveal
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Reveal
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -24,13 +24,13 @@
.ui.reveal {
display: inherit;
position: relative !important;
- font-size: 0em !important;
+ font-size: 0;
}
.ui.reveal > .visible.content {
position: absolute !important;
- top: 0em !important;
- left: 0em !important;
+ top: 0 !important;
+ left: 0 !important;
z-index: @topZIndex !important;
transition: @transition;
}
@@ -50,188 +50,194 @@
Types
*******************************/
-
-/*--------------
- Slide
----------------*/
-
-.ui.slide.reveal {
- position: relative !important;
- overflow: hidden !important;
- white-space: nowrap;
-}
-
-.ui.slide.reveal > .content {
- display: block;
- width: 100%;
- white-space: normal;
- float: left;
-
- margin: 0em;
- transition: @slideTransition;
-}
-
-.ui.slide.reveal > .visible.content {
- position: relative !important;
-}
-.ui.slide.reveal > .hidden.content {
- position: absolute !important;
- left: 0% !important;
- width: 100% !important;
- transform: translateX(100%) !important;
-}
-.ui.slide.active.reveal > .visible.content,
-.ui.slide.reveal:hover > .visible.content {
- transform: translateX(-100%) !important;
-}
-.ui.slide.active.reveal > .hidden.content,
-.ui.slide.reveal:hover > .hidden.content {
- transform: translateX(0%) !important;
-}
-
-.ui.slide.right.reveal > .visible.content {
- transform: translateX(0%) !important;
-}
-.ui.slide.right.reveal > .hidden.content {
- transform: translateX(-100%) !important;
-}
-.ui.slide.right.active.reveal > .visible.content,
-.ui.slide.right.reveal:hover > .visible.content {
- transform: translateX(100%) !important;
-}
-.ui.slide.right.active.reveal > .hidden.content,
-.ui.slide.right.reveal:hover > .hidden.content {
- transform: translateX(0%) !important;
-}
-
-.ui.slide.up.reveal > .hidden.content {
- transform: translateY(100%) !important;
-}
-.ui.slide.up.active.reveal > .visible.content,
-.ui.slide.up.reveal:hover > .visible.content {
- transform: translateY(-100%) !important;
-}
-.ui.slide.up.active.reveal > .hidden.content,
-.ui.slide.up.reveal:hover > .hidden.content {
- transform: translateY(0%) !important;
-}
-
-.ui.slide.down.reveal > .hidden.content {
- transform: translateY(-100%) !important;
-}
-.ui.slide.down.active.reveal > .visible.content,
-.ui.slide.down.reveal:hover > .visible.content {
- transform: translateY(100%) !important;
-}
-.ui.slide.down.active.reveal > .hidden.content,
-.ui.slide.down.reveal:hover > .hidden.content {
- transform: translateY(0%) !important;
-}
-
-
-/*--------------
- Fade
----------------*/
-
-.ui.fade.reveal > .visible.content {
- opacity: 1;
-}
-.ui.fade.active.reveal > .visible.content,
-.ui.fade.reveal:hover > .visible.content {
- opacity: 0;
-}
-
-
-/*--------------
- Move
----------------*/
-
-.ui.move.reveal {
- position: relative !important;
- overflow: hidden !important;
- white-space: nowrap;
-}
-
-.ui.move.reveal > .content {
- display: block;
- float: left;
- white-space: normal;
-
- margin: 0em;
- transition: @moveTransition;
-}
-
-.ui.move.reveal > .visible.content {
- position: relative !important;
-}
-.ui.move.reveal > .hidden.content {
- position: absolute !important;
- left: 0% !important;
- width: 100% !important;
-}
-.ui.move.active.reveal > .visible.content,
-.ui.move.reveal:hover > .visible.content {
- transform: translateX(-100%) !important;
-}
-.ui.move.right.active.reveal > .visible.content,
-.ui.move.right.reveal:hover > .visible.content {
- transform: translateX(100%) !important;
-}
-.ui.move.up.active.reveal > .visible.content,
-.ui.move.up.reveal:hover > .visible.content {
- transform: translateY(-100%) !important;
-}
-.ui.move.down.active.reveal > .visible.content,
-.ui.move.down.reveal:hover > .visible.content {
- transform: translateY(100%) !important;
-}
-
-
-
-/*--------------
- Rotate
----------------*/
-
-.ui.rotate.reveal > .visible.content {
- transition-duration: @transitionDuration;
- transform: rotate(0deg);
-}
-
-.ui.rotate.reveal > .visible.content,
-.ui.rotate.right.reveal > .visible.content {
- transform-origin: bottom right;
-}
-.ui.rotate.active.reveal > .visible.content,
-.ui.rotate.reveal:hover > .visible.content,
-.ui.rotate.right.active.reveal > .visible.content,
-.ui.rotate.right.reveal:hover > .visible.content {
- transform: rotate(@rotateDegrees);
-}
-
-.ui.rotate.left.reveal > .visible.content {
- transform-origin: bottom left;
-}
-.ui.rotate.left.active.reveal > .visible.content,
-.ui.rotate.left.reveal:hover > .visible.content {
- transform: rotate(-@rotateDegrees);
+& when (@variationRevealSlide) {
+ /*--------------
+ Slide
+ ---------------*/
+
+ .ui.slide.reveal {
+ position: relative !important;
+ overflow: hidden !important;
+ white-space: nowrap;
+ }
+
+ .ui.slide.reveal > .content {
+ display: block;
+ width: 100%;
+ white-space: normal;
+ float: left;
+
+ margin: 0;
+ transition: @slideTransition;
+ }
+
+ .ui.slide.reveal > .visible.content {
+ position: relative !important;
+ }
+ .ui.slide.reveal > .hidden.content {
+ position: absolute !important;
+ left: 0 !important;
+ width: 100% !important;
+ transform: translateX(100%) !important;
+ }
+ .ui.slide.active.reveal > .visible.content,
+ .ui.slide.reveal:hover > .visible.content {
+ transform: translateX(-100%) !important;
+ }
+ .ui.slide.active.reveal > .hidden.content,
+ .ui.slide.reveal:hover > .hidden.content {
+ transform: translateX(0%) !important;
+ }
+
+ .ui.slide.right.reveal > .visible.content {
+ transform: translateX(0%) !important;
+ }
+ .ui.slide.right.reveal > .hidden.content {
+ transform: translateX(-100%) !important;
+ }
+ .ui.slide.right.active.reveal > .visible.content,
+ .ui.slide.right.reveal:hover > .visible.content {
+ transform: translateX(100%) !important;
+ }
+ .ui.slide.right.active.reveal > .hidden.content,
+ .ui.slide.right.reveal:hover > .hidden.content {
+ transform: translateX(0%) !important;
+ }
+
+ .ui.slide.up.reveal > .hidden.content {
+ transform: translateY(100%) !important;
+ }
+ .ui.slide.up.active.reveal > .visible.content,
+ .ui.slide.up.reveal:hover > .visible.content {
+ transform: translateY(-100%) !important;
+ }
+ .ui.slide.up.active.reveal > .hidden.content,
+ .ui.slide.up.reveal:hover > .hidden.content {
+ transform: translateY(0%) !important;
+ }
+
+ .ui.slide.down.reveal > .hidden.content {
+ transform: translateY(-100%) !important;
+ }
+ .ui.slide.down.active.reveal > .visible.content,
+ .ui.slide.down.reveal:hover > .visible.content {
+ transform: translateY(100%) !important;
+ }
+ .ui.slide.down.active.reveal > .hidden.content,
+ .ui.slide.down.reveal:hover > .hidden.content {
+ transform: translateY(0%) !important;
+ }
+}
+
+& when (@variationRevealFade) {
+ /*--------------
+ Fade
+ ---------------*/
+
+ .ui.fade.reveal > .visible.content {
+ opacity: 1;
+ }
+ .ui.fade.active.reveal > .visible.content,
+ .ui.fade.reveal:hover > .visible.content {
+ opacity: 0;
+ }
+}
+
+& when (@variationRevealMove) {
+ /*--------------
+ Move
+ ---------------*/
+
+ .ui.move.reveal {
+ position: relative !important;
+ overflow: hidden !important;
+ white-space: nowrap;
+ }
+
+ .ui.move.reveal > .content {
+ display: block;
+ float: left;
+ white-space: normal;
+
+ margin: 0;
+ transition: @moveTransition;
+ }
+
+ .ui.move.reveal > .visible.content {
+ position: relative !important;
+ }
+ .ui.move.reveal > .hidden.content {
+ position: absolute !important;
+ left: 0 !important;
+ width: 100% !important;
+ }
+ .ui.move.active.reveal > .visible.content,
+ .ui.move.reveal:hover > .visible.content {
+ transform: translateX(-100%) !important;
+ }
+ .ui.move.right.active.reveal > .visible.content,
+ .ui.move.right.reveal:hover > .visible.content {
+ transform: translateX(100%) !important;
+ }
+ .ui.move.up.active.reveal > .visible.content,
+ .ui.move.up.reveal:hover > .visible.content {
+ transform: translateY(-100%) !important;
+ }
+ .ui.move.down.active.reveal > .visible.content,
+ .ui.move.down.reveal:hover > .visible.content {
+ transform: translateY(100%) !important;
+ }
+}
+
+
+& when (@variationRevealRotate) {
+ /*--------------
+ Rotate
+ ---------------*/
+
+ .ui.rotate.reveal > .visible.content {
+ transition-duration: @transitionDuration;
+ transform: rotate(0deg);
+ }
+
+ .ui.rotate.reveal > .visible.content,
+ .ui.rotate.right.reveal > .visible.content {
+ transform-origin: bottom right;
+ }
+ .ui.rotate.active.reveal > .visible.content,
+ .ui.rotate.reveal:hover > .visible.content,
+ .ui.rotate.right.active.reveal > .visible.content,
+ .ui.rotate.right.reveal:hover > .visible.content {
+ transform: rotate(@rotateDegrees);
+ }
+
+ .ui.rotate.left.reveal > .visible.content {
+ transform-origin: bottom left;
+ }
+ .ui.rotate.left.active.reveal > .visible.content,
+ .ui.rotate.left.reveal:hover > .visible.content {
+ transform: rotate(-@rotateDegrees);
+ }
}
/*******************************
States
*******************************/
-.ui.disabled.reveal:hover > .visible.visible.content {
- position: static !important;
- display: block !important;
- opacity: 1 !important;
- top: 0 !important;
- left: 0 !important;
- right: auto !important;
- bottom: auto !important;
- transform: none !important;
-}
-.ui.disabled.reveal:hover > .hidden.hidden.content {
- display: none !important;
+& when (@variationRevealDisabled) {
+ .ui.disabled.reveal:hover > .visible.visible.content {
+ position: static !important;
+ display: block !important;
+ opacity: 1 !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: auto !important;
+ bottom: auto !important;
+ transform: none !important;
+ }
+ .ui.disabled.reveal:hover > .hidden.hidden.content {
+ display: none !important;
+ }
}
@@ -269,7 +275,15 @@
---------------*/
.ui.reveal > .content {
- font-size: @medium !important;
+ font-size: @medium;
+}
+& when not (@variationRevealSizes = false) {
+ each(@variationRevealSizes, {
+ @s: @@value;
+ .ui.@{value}.reveal > .content {
+ font-size: @s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/segment.less b/ui/src/definitions/elements/segment.less
index 0294551da3f..fb81e9a72a0 100644
--- a/ui/src/definitions/elements/segment.less
+++ b/ui/src/definitions/elements/segment.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Segment
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Segment
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -32,55 +32,60 @@
}
.ui.segment:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
.ui.segment:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
+& when (@variationSegmentVertical) {
+ /* Vertical */
+ .ui.vertical.segment {
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
-/* Vertical */
-.ui.vertical.segment {
- margin: 0em;
- padding-left: 0em;
- padding-right: 0em;
-
- background: none transparent;
- border-radius: 0px;
- box-shadow: none;
- border: none;
- border-bottom: @borderWidth solid @borderColor;
-}
-.ui.vertical.segment:last-child {
- border-bottom: none;
+ background: none transparent;
+ border-radius: 0;
+ box-shadow: none;
+ border: none;
+ border-bottom: @borderWidth solid @borderColor;
+ }
+ .ui.vertical.segment:last-child {
+ border-bottom: none;
+ }
}
/*-------------------
Loose Coupling
--------------------*/
-
-/* Header */
-.ui.inverted.segment > .ui.header {
- color: @white;
+& when (@variationSegmentInverted) {
+ /* Header */
+ .ui.inverted.segment > .ui.header .sub.header,
+ .ui.inverted.segment > .ui.header {
+ color: @white;
+ }
}
-/* Label */
-.ui[class*="bottom attached"].segment > [class*="top attached"].label {
- border-top-left-radius: 0em;
- border-top-right-radius: 0em;
-}
-.ui[class*="top attached"].segment > [class*="bottom attached"].label {
- border-bottom-left-radius: 0em;
- border-bottom-right-radius: 0em;
-}
-.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
- border-top-left-radius: 0em;
- border-top-right-radius: 0em;
-}
-.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
- border-bottom-left-radius: 0em;
- border-bottom-right-radius: 0em;
+& when (@variationSegmentAttached) {
+ /* Label */
+ .ui[class*="bottom attached"].segment > [class*="top attached"].label {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .ui[class*="top attached"].segment > [class*="bottom attached"].label {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
}
/* Grid */
@@ -105,289 +110,366 @@
padding: @padding;
}
+/* Tab */
+.ui.segment.tab:last-child {
+ margin-bottom: @verticalMargin;
+}
/*******************************
Types
*******************************/
-/*-------------------
- Piled
---------------------*/
+& when (@variationSegmentPlaceholder) {
+ /*-------------------
+ Placeholder
+ --------------------*/
+
+ .ui.placeholder.segment {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: stretch;
+ max-width: initial;
+ animation: none;
+ overflow: visible;
+ padding: @placeholderPadding;
+ min-height: @placeholderMinHeight;
+ background: @placeholderBackground;
+ border-color: @placeholderBorderColor;
+ box-shadow: @placeholderBoxShadow;
+ }
-.ui.piled.segments,
-.ui.piled.segment {
- margin: @piledMargin 0em;
- box-shadow: @piledBoxShadow;
- z-index: @piledZIndex;
-}
-.ui.piled.segment:first-child {
- margin-top: 0em;
-}
-.ui.piled.segment:last-child {
- margin-bottom: 0em;
-}
-.ui.piled.segments:after,
-.ui.piled.segments:before,
-.ui.piled.segment:after,
-.ui.piled.segment:before {
- background-color: @white;
- visibility: visible;
- content: '';
- display: block;
- height: 100%;
- left: 0px;
- position: absolute;
- width: 100%;
- border: @piledBorder;
- box-shadow: @piledBoxShadow;
-}
-.ui.piled.segments:before,
-.ui.piled.segment:before {
- transform: rotate(-@piledDegrees);
- top: 0;
- z-index: -2;
-}
-.ui.piled.segments:after,
-.ui.piled.segment:after {
- transform: rotate(@piledDegrees);
- top: 0;
- z-index: -1;
-}
-
-/* Piled Attached */
-.ui[class*="top attached"].piled.segment {
- margin-top: @piledMargin;
- margin-bottom: 0em;
-}
-.ui.piled.segment[class*="top attached"]:first-child {
- margin-top: 0em;
-}
-.ui.piled.segment[class*="bottom attached"] {
- margin-top: 0em;
- margin-bottom: @piledMargin;
-}
-.ui.piled.segment[class*="bottom attached"]:last-child {
- margin-bottom: 0em;
+ .ui.placeholder.segment .button,
+ .ui.placeholder.segment textarea {
+ display: block;
+ }
+ .ui.placeholder.segment .field,
+ .ui.placeholder.segment textarea,
+ .ui.placeholder.segment > .ui.input,
+ .ui.placeholder.segment .button {
+ max-width: @placeholderContentMaxWidth;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .ui.placeholder.segment .column .button,
+ .ui.placeholder.segment .column .field,
+ .ui.placeholder.segment .column textarea,
+ .ui.placeholder.segment .column > .ui.input {
+ max-width: @placeholderContentMaxWidth;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .ui.placeholder.segment > .inline {
+ align-self: center;
+ }
+ .ui.placeholder.segment > .inline > .button {
+ display: inline-block;
+ width: auto;
+ margin: @placeholderContentInlineButtonMargin;
+ }
+ .ui.placeholder.segment > .inline > .button:last-child {
+ margin-right: 0;
+ }
}
-/*-------------------
- Stacked
---------------------*/
+& when (@variationSegmentPiled) {
+ /*-------------------
+ Piled
+ --------------------*/
-.ui.stacked.segment {
- padding-bottom: @stackedPadding;
+ .ui.piled.segments,
+ .ui.piled.segment {
+ margin: @piledMargin 0;
+ box-shadow: @piledBoxShadow;
+ z-index: @piledZIndex;
+ }
+ .ui.piled.segment:first-child {
+ margin-top: 0;
+ }
+ .ui.piled.segment:last-child {
+ margin-bottom: 0;
+ }
+ .ui.piled.segments:after,
+ .ui.piled.segments:before,
+ .ui.piled.segment:after,
+ .ui.piled.segment:before {
+ background-color: @white;
+ visibility: visible;
+ content: '';
+ display: block;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ border: @piledBorder;
+ box-shadow: @piledBoxShadow;
+ }
+ .ui.piled.segments:before,
+ .ui.piled.segment:before {
+ transform: rotate(-@piledDegrees);
+ top: 0;
+ z-index: -2;
+ }
+ .ui.piled.segments:after,
+ .ui.piled.segment:after {
+ transform: rotate(@piledDegrees);
+ top: 0;
+ z-index: -1;
+ }
+ & when (@variationSegmentAttached) {
+ /* Piled Attached */
+ .ui[class*="top attached"].piled.segment {
+ margin-top: @piledMargin;
+ margin-bottom: 0;
+ }
+ .ui.piled.segment[class*="top attached"]:first-child {
+ margin-top: 0;
+ }
+ .ui.piled.segment[class*="bottom attached"] {
+ margin-top: 0;
+ margin-bottom: @piledMargin;
+ }
+ .ui.piled.segment[class*="bottom attached"]:last-child {
+ margin-bottom: 0;
+ }
+ }
}
-.ui.stacked.segments:before,
-.ui.stacked.segments:after,
-.ui.stacked.segment:before,
-.ui.stacked.segment:after {
- content: '';
- position: absolute;
- bottom: -(@stackedHeight / 2);
- left: 0%;
- border-top: 1px solid @borderColor;
- background: @stackedPageBackground;
+& when (@variationSegmentStacked) {
+ /*-------------------
+ Stacked
+ --------------------*/
- width: 100%;
- height: @stackedHeight;
- visibility: visible;
-}
-.ui.stacked.segments:before,
-.ui.stacked.segment:before {
- display: none;
-}
+ .ui.stacked.segment {
+ padding-bottom: @stackedPadding;
+ }
+ .ui.stacked.segments:before,
+ .ui.stacked.segments:after,
+ .ui.stacked.segment:before,
+ .ui.stacked.segment:after {
+ content: '';
+ position: absolute;
+ bottom: -(@stackedHeight / 2);
+ left: 0;
+
+ border-top: 1px solid @borderColor;
+ background: @stackedPageBackground;
+
+ width: 100%;
+ height: @stackedHeight;
+ visibility: visible;
+ }
+ .ui.stacked.segments:before,
+ .ui.stacked.segment:before {
+ display: none;
+ }
-/* Add additional page */
-.ui.tall.stacked.segments:before,
-.ui.tall.stacked.segment:before {
- display: block;
- bottom: 0px;
+ /* Add additional page */
+ .ui.tall.stacked.segments:before,
+ .ui.tall.stacked.segment:before {
+ display: block;
+ bottom: 0;
+ }
+ & when (@variationSegmentInverted) {
+ /* Inverted */
+ .ui.stacked.inverted.segments:before,
+ .ui.stacked.inverted.segments:after,
+ .ui.stacked.inverted.segment:before,
+ .ui.stacked.inverted.segment:after {
+ background-color: @subtleTransparentBlack;
+ border-top: 1px solid @selectedBorderColor;
+ }
+ }
}
-/* Inverted */
-.ui.stacked.inverted.segments:before,
-.ui.stacked.inverted.segments:after,
-.ui.stacked.inverted.segment:before,
-.ui.stacked.inverted.segment:after {
- background-color: @subtleTransparentBlack;
- border-top: 1px solid @selectedBorderColor;
-}
+& when (@variationSegmentPadded) {
+ /*-------------------
+ Padded
+ --------------------*/
-/*-------------------
- Padded
---------------------*/
+ .ui.padded.segment {
+ padding: @paddedSegmentPadding;
+ }
-.ui.padded.segment {
- padding: @paddedSegmentPadding;
-}
+ .ui[class*="very padded"].segment {
+ padding: @veryPaddedSegmentPadding;
+ }
-.ui[class*="very padded"].segment {
- padding: @veryPaddedSegmentPadding;
+ & when (@variationSegmentVertical) {
+ /* Padded vertical */
+ .ui.padded.segment.vertical.segment,
+ .ui[class*="very padded"].vertical.segment {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
}
-/* Padded vertical */
-.ui.padded.segment.vertical.segment,
-.ui[class*="very padded"].vertical.segment {
- padding-left: 0px;
- padding-right: 0px;
-}
+& when (@variationSegmentCompact) {
+ /*-------------------
+ Compact
+ --------------------*/
-/*-------------------
- Compact
---------------------*/
+ .ui.compact.segment {
+ display: table;
+ }
-.ui.compact.segment {
- display: table;
+ /* Compact Group */
+ .ui.compact.segments {
+ display: inline-flex;
+ }
+ .ui.compact.segments .segment,
+ .ui.segments .compact.segment {
+ display: block;
+ flex: 0 1 auto;
+ }
}
-/* Compact Group */
-.ui.compact.segments {
- display: inline-flex;
-}
-.ui.compact.segments .segment,
-.ui.segments .compact.segment {
- display: block;
- flex: 0 1 auto;
-}
+& when (@variationSegmentCircular) {
+ /*-------------------
+ Circular
+ --------------------*/
-/*-------------------
- Circular
---------------------*/
-
-.ui.circular.segment {
- display: table-cell;
- padding: @circularPadding;
- text-align: center;
- vertical-align: middle;
- border-radius: 500em;
+ .ui.circular.segment {
+ display: table-cell;
+ padding: @circularPadding;
+ text-align: center;
+ vertical-align: middle;
+ border-radius: 500em;
+ }
}
-/*-------------------
- Raised
---------------------*/
+& when (@variationSegmentRaised) {
+ /*-------------------
+ Raised
+ --------------------*/
-.ui.raised.segments,
-.ui.raised.segment {
- box-shadow: @raisedBoxShadow;
+ .ui.raised.raised.segments,
+ .ui.raised.raised.segment {
+ box-shadow: @raisedBoxShadow;
+ }
}
+& when (@variationSegmentGroups) {
+ /*******************************
+ Groups
+ *******************************/
-/*******************************
- Groups
-*******************************/
+ /* Group */
+ .ui.segments {
+ flex-direction: column;
+ position: relative;
+ margin: @groupedMargin;
+ border: @groupedBorder;
+ box-shadow: @groupedBoxShadow;
+ border-radius: @groupedBorderRadius;
+ }
+ .ui.segments:first-child {
+ margin-top: 0;
+ }
+ .ui.segments:last-child {
+ margin-bottom: 0;
+ }
-/* Group */
-.ui.segments {
- flex-direction: column;
- position: relative;
- margin: @groupedMargin;
- border: @groupedBorder;
- box-shadow: @groupedBoxShadow;
- border-radius: @groupedBorderRadius;
-}
-.ui.segments:first-child {
- margin-top: 0em;
-}
-.ui.segments:last-child {
- margin-bottom: 0em;
-}
-
-
-/* Nested Segment */
-.ui.segments > .segment {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: @groupedSegmentMargin;
- width: @groupedSegmentWidth;
- box-shadow: @groupedSegmentBoxShadow;
- border: @groupedSegmentBorder;
- border-top: @groupedSegmentDivider;
-}
-
-.ui.segments:not(.horizontal) > .segment:first-child {
- top: @attachedTopOffset;
- bottom: 0px;
- border-top: none;
- margin-top: 0em;
- bottom: 0px;
- margin-bottom: 0em;
- top: @attachedTopOffset;
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-
-/* Bottom */
-.ui.segments:not(.horizontal) > .segment:last-child {
- top: @attachedBottomOffset;
- bottom: 0px;
- margin-top: 0em;
- margin-bottom: 0em;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-
-/* Only */
-.ui.segments:not(.horizontal) > .segment:only-child {
- border-radius: @borderRadius;
-}
+ /* Nested Segment */
+ .ui.segments > .segment {
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: @groupedSegmentMargin;
+ width: @groupedSegmentWidth;
+ box-shadow: @groupedSegmentBoxShadow;
+ border: @groupedSegmentBorder;
+ border-top: @groupedSegmentDivider;
+ }
-/* Nested Group */
-.ui.segments > .ui.segments {
- border-top: @groupedSegmentDivider;
- margin: @nestedGroupMargin;
-}
-.ui.segments > .segments:first-child {
- border-top: none;
-}
-.ui.segments > .segment + .segments:not(.horizontal) {
- margin-top: 0em;
-}
+ .ui.segments:not(.horizontal) > .segment:first-child {
+ top: @attachedTopOffset;
+ bottom: 0;
+ border-top: none;
+ margin-top: 0;
+ margin-bottom: 0;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
-/* Horizontal Group */
-.ui.horizontal.segments {
- display: flex;
- flex-direction: row;
- background-color: transparent;
- border-radius: 0px;
- padding: 0em;
- background-color: @background;
- box-shadow: @boxShadow;
- margin: @margin;
- border-radius: @borderRadius;
- border: @border;
-}
+ /* Bottom */
+ .ui.segments:not(.horizontal) > .segment:last-child {
+ top: @attachedBottomOffset;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
-/* Nested Horizontal Group */
-.ui.segments > .horizontal.segments {
- margin: 0em;
- background-color: transparent;
- border-radius: 0px;
- border: none;
- box-shadow: none;
- border-top: @groupedSegmentDivider;
-}
+ /* Only */
+ .ui.segments:not(.horizontal) > .segment:only-child {
+ border-radius: @borderRadius;
+ }
-/* Horizontal Segment */
-.ui.horizontal.segments > .segment {
- flex: 1 1 auto;
- -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
- margin: 0em;
- min-width: 0px;
- background-color: transparent;
- border-radius: 0px;
- border: none;
- box-shadow: none;
- border-left: @borderWidth solid @borderColor;
-}
-/* Border Fixes */
-.ui.segments > .horizontal.segments:first-child {
- border-top: none;
-}
-.ui.horizontal.segments > .segment:first-child {
- border-left: none;
+ /* Nested Group */
+ .ui.segments > .ui.segments {
+ border-top: @groupedSegmentDivider;
+ margin: @nestedGroupMargin;
+ }
+ .ui.segments > .segments:first-child {
+ border-top: none;
+ }
+ .ui.segments > .segment + .segments:not(.horizontal) {
+ margin-top: 0;
+ }
+
+ & when (@variationSegmentHorizontal) {
+ /* Horizontal Group */
+ .ui.horizontal.segments {
+ display: flex;
+ flex-direction: row;
+ background-color: transparent;
+ padding: 0;
+ box-shadow: @boxShadow;
+ margin: @margin;
+ border-radius: @borderRadius;
+ border: @border;
+ }
+ .ui.stackable.horizontal.segments {
+ flex-wrap: wrap;
+ }
+
+ /* Nested Horizontal Group */
+ .ui.segments > .horizontal.segments {
+ margin: 0;
+ background-color: transparent;
+ border-radius: 0;
+ border: none;
+ box-shadow: none;
+ border-top: @groupedSegmentDivider;
+ }
+
+ /* Horizontal Segment */
+ .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
+ flex: 1 1 auto;
+ -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+ }
+ .ui.horizontal.segments > .segment {
+ margin: 0;
+ min-width: 0;
+ border-radius: 0;
+ border: none;
+ box-shadow: none;
+ border-left: @borderWidth solid @borderColor;
+ }
+
+ /* Border Fixes */
+ .ui.segments > .horizontal.segments:first-child {
+ border-top: none;
+ }
+ .ui.horizontal.segments:not(.stackable) > .segment:first-child {
+ border-left: none;
+ }
+ }
}
@@ -395,381 +477,292 @@
States
*******************************/
-/*--------------
- Disabled
----------------*/
-
-.ui.disabled.segment {
- opacity: @disabledOpacity;
- color: @disabledTextColor;
-}
-
-/*--------------
- Loading
----------------*/
+& when (@variationSegmentDisabled) {
+ /*--------------
+ Disabled
+ ---------------*/
-.ui.loading.segment {
- position: relative;
- cursor: default;
- pointer-events: none;
- text-shadow: none !important;
- color: transparent !important;
- transition: all 0s linear;
-}
-.ui.loading.segment:before {
- position: absolute;
- content: '';
- top: 0%;
- left: 0%;
- background: @loaderDimmerColor;
- width: 100%;
- height: 100%;
- border-radius: @borderRadius;
- z-index: @loaderDimmerZIndex;
+ .ui.disabled.segment {
+ opacity: @disabledOpacity;
+ color: @disabledTextColor;
+ }
}
-.ui.loading.segment:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
- animation: segment-spin @loaderSpeed linear;
- animation-iteration-count: infinite;
+& when (@variationSegmentLoading) {
+ /*--------------
+ Loading
+ ---------------*/
- border-radius: @circularRadius;
-
- border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
- border-style: solid;
- border-width: @loaderLineWidth;
-
- box-shadow: 0px 0px 0px 1px transparent;
- visibility: visible;
- z-index: @loaderLineZIndex;
-}
-
-@keyframes segment-spin {
- from {
- transform: rotate(0deg);
+ .ui.loading.segment {
+ position: relative;
+ cursor: default;
+ pointer-events: none;
+ text-shadow: none !important;
+ transition: all 0s linear;
+ }
+ .ui.loading.segment:before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ background: @loaderDimmerColor;
+ width: 100%;
+ height: 100%;
+ border-radius: @borderRadius;
+ z-index: @loaderDimmerZIndex;
}
- to {
- transform: rotate(360deg);
+ .ui.loading.segment:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
+
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
+
+ animation: loader @loaderSpeed infinite linear;
+ border: @loaderLineWidth solid @loaderLineColor;
+ border-radius: @circularRadius;
+
+ box-shadow: 0 0 0 1px transparent;
+ visibility: visible;
+ z-index: @loaderLineZIndex;
}
}
+
/*******************************
Variations
*******************************/
-
-/*-------------------
- Basic
---------------------*/
-
-.ui.basic.segment {
- background: @basicBackground;
- box-shadow: @basicBoxShadow;
- border: @basicBorder;
- border-radius: @basicBorderRadius;
+& when (@variationSegmentBasic) {
+ /*-------------------
+ Basic
+ --------------------*/
+
+ .ui.basic.segment,
+ .ui.segments .ui.basic.segment,
+ .ui.basic.segments {
+ background: @basicBackground;
+ box-shadow: @basicBoxShadow;
+ border: @basicBorder;
+ border-radius: @basicBorderRadius;
+ }
}
-/*-------------------
- Clearing
---------------------*/
+& when (@variationSegmentClearing) {
+ /*-------------------
+ Clearing
+ --------------------*/
-.ui.clearing.segment:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
+ .ui.clearing.segment:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
}
/*-------------------
Colors
--------------------*/
-/* Red */
-.ui.red.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @red !important;
-}
-.ui.inverted.red.segment {
- background-color: @red !important;
- color: @white !important;
-}
-
-/* Orange */
-.ui.orange.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @orange !important;
-}
-.ui.inverted.orange.segment {
- background-color: @orange !important;
- color: @white !important;
-}
-
-/* Yellow */
-.ui.yellow.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @yellow !important;
-}
-.ui.inverted.yellow.segment {
- background-color: @yellow !important;
- color: @white !important;
-}
-
-/* Olive */
-.ui.olive.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @olive !important;
-}
-.ui.inverted.olive.segment {
- background-color: @olive !important;
- color: @white !important;
-}
-
-/* Green */
-.ui.green.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @green !important;
-}
-.ui.inverted.green.segment {
- background-color: @green !important;
- color: @white !important;
-}
-
-/* Teal */
-.ui.teal.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @teal !important;
-}
-.ui.inverted.teal.segment {
- background-color: @teal !important;
- color: @white !important;
-}
-
-/* Blue */
-.ui.blue.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @blue !important;
-}
-.ui.inverted.blue.segment {
- background-color: @blue !important;
- color: @white !important;
-}
-
-/* Violet */
-.ui.violet.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @violet !important;
-}
-.ui.inverted.violet.segment {
- background-color: @violet !important;
- color: @white !important;
-}
+each(@colors,{
+ @color: replace(@key,'@','');
+ @c: @colors[@@color][color];
+ & when not (@color=primary) and not (@color=secondary) {
+ .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
+ border-top: @coloredBorderSize solid @c;
+ }
+ & when (@variationSegmentInverted) {
+ .ui.inverted.@{color}.segment.segment.segment.segment.segment {
+ background-color: @c;
+ color: @white;
+ }
+ }
+ }
+})
-/* Purple */
-.ui.purple.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @purple !important;
-}
-.ui.inverted.purple.segment {
- background-color: @purple !important;
- color: @white !important;
-}
+& when (@variationSegmentAligned) {
+ /*-------------------
+ Aligned
+ --------------------*/
-/* Pink */
-.ui.pink.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @pink !important;
-}
-.ui.inverted.pink.segment {
- background-color: @pink !important;
- color: @white !important;
-}
-
-/* Brown */
-.ui.brown.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @brown !important;
-}
-.ui.inverted.brown.segment {
- background-color: @brown !important;
- color: @white !important;
+ .ui[class*="left aligned"].segment {
+ text-align: left;
+ }
+ .ui[class*="right aligned"].segment {
+ text-align: right;
+ }
+ .ui[class*="center aligned"].segment {
+ text-align: center;
+ }
}
-/* Grey */
-.ui.grey.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @grey !important;
-}
-.ui.inverted.grey.segment {
- background-color: @grey !important;
- color: @white !important;
-}
+& when (@variationSegmentFloating) {
+ /*-------------------
+ Floated
+ --------------------*/
-/* Black */
-.ui.black.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @black !important;
-}
-.ui.inverted.black.segment {
- background-color: @black !important;
- color: @white !important;
+ .ui.floated.segment,
+ .ui[class*="left floated"].segment {
+ float: left;
+ margin-right: @floatedDistance;
+ }
+ .ui[class*="right floated"].segment {
+ float: right;
+ margin-left: @floatedDistance;
+ }
}
-/*-------------------
- Aligned
---------------------*/
-
-.ui[class*="left aligned"].segment {
- text-align: left;
-}
-.ui[class*="right aligned"].segment {
- text-align: right;
-}
-.ui[class*="center aligned"].segment {
- text-align: center;
-}
+& when (@variationSegmentInverted) {
+ /*-------------------
+ Inverted
+ --------------------*/
-/*-------------------
- Floated
---------------------*/
+ .ui.inverted.segment {
+ border: none;
+ box-shadow: none;
+ }
+ .ui.inverted.segment,
+ .ui.primary.inverted.segment {
+ background: @invertedBackground;
+ color: @invertedTextColor;
+ }
-.ui.floated.segment,
-.ui[class*="left floated"].segment {
- float: left;
- margin-right: @floatedDistance;
-}
-.ui[class*="right floated"].segment {
- float: right;
- margin-left: @floatedDistance;
+ /* Nested */
+ .ui.inverted.segment .segment {
+ color: @textColor;
+ }
+ .ui.inverted.segment .inverted.segment {
+ color: @invertedTextColor;
+ }
+ & when (@variationSegmentAttached) {
+ /* Attached */
+ .ui.inverted.attached.segment {
+ border-color: @solidWhiteBorderColor;
+ }
+ }
+ & when (@variationSegmentLoading) {
+ /* Loading */
+ .ui.inverted.loading.segment {
+ color: @invertedLoaderLineColor;
+ }
+ .ui.inverted.loading.segment:before {
+ background: @loaderInvertedDimmerColor;
+ }
+ }
}
-
/*-------------------
- Inverted
+ Emphasis
--------------------*/
-
-.ui.inverted.segment {
- border: none;
- box-shadow: none;
-}
-.ui.inverted.segment,
-.ui.primary.inverted.segment {
- background: @invertedBackground;
- color: @invertedTextColor;
-}
-
-/* Nested */
-.ui.inverted.segment .segment {
- color: @textColor;
-}
-.ui.inverted.segment .inverted.segment {
- color: @invertedTextColor;
+& when (@variationSegmentSecondary) {
+ /* Secondary */
+ .ui.secondary.segment {
+ background: @secondaryBackground;
+ color: @secondaryColor;
+ }
+ & when (@variationSegmentInverted) {
+ .ui.secondary.inverted.segment {
+ background: @secondaryInvertedBackground;
+ color: @secondaryInvertedColor;
+ }
+ }
}
-/* Attached */
-.ui.inverted.attached.segment {
- border-color: @solidWhiteBorderColor;
+& when (@variationSegmentTertiary) {
+ /* Tertiary */
+ .ui.tertiary.segment {
+ background: @tertiaryBackground;
+ color: @tertiaryColor;
+ }
+ & when (@variationSegmentInverted) {
+ .ui.tertiary.inverted.segment {
+ background: @tertiaryInvertedBackground;
+ color: @tertiaryInvertedColor;
+ }
+ }
}
-/*-------------------
- Emphasis
---------------------*/
+& when (@variationSegmentAttached) {
+ /*-------------------
+ Attached
+ --------------------*/
+
+ /* Middle */
+ .ui.attached.segment {
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ margin: 0 @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+ border: @attachedBorder;
+ }
+ .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+ border-top: none;
+ }
-/* Secondary */
-.ui.secondary.segment {
- background: @secondaryBackground;
- color: @secondaryColor;
-}
-.ui.secondary.inverted.segment {
- background: @secondaryInvertedBackground;
- color: @secondaryInvertedColor;
-}
+ /* Top */
+ .ui[class*="top attached"].segment {
+ bottom: 0;
+ margin-bottom: 0;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0 0;
+ }
+ .ui.segment[class*="top attached"]:first-child {
+ margin-top: 0;
+ }
-/* Tertiary */
-.ui.tertiary.segment {
- background: @tertiaryBackground;
- color: @tertiaryColor;
-}
-.ui.tertiary.inverted.segment {
- background: @tertiaryInvertedBackground;
- color: @tertiaryInvertedColor;
+ /* Bottom */
+ .ui.segment[class*="bottom attached"] {
+ bottom: 0;
+ margin-top: 0;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0 0 @borderRadius @borderRadius;
+ }
+ .ui.segment[class*="bottom attached"]:last-child {
+ margin-bottom: @verticalMargin;
+ }
}
+& when (@variationSegmentFitted) {
+ /*--------------
+ Fitted
+ ---------------*/
-/*-------------------
- Attached
---------------------*/
-
-/* Middle */
-.ui.attached.segment {
- top: 0px;
- bottom: 0px;
- border-radius: 0px;
- margin: 0em @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
-}
-.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
- border-top: none;
-}
-
-/* Top */
-.ui[class*="top attached"].segment {
- bottom: 0px;
- margin-bottom: 0em;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0em 0em;
-}
-.ui.segment[class*="top attached"]:first-child {
- margin-top: 0em;
-}
-
-/* Bottom */
-.ui.segment[class*="bottom attached"] {
- bottom: 0px;
- margin-top: 0em;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0em 0em @borderRadius @borderRadius;
-}
-.ui.segment[class*="bottom attached"]:last-child {
- margin-bottom: 0em;
+ .ui.fitted.segment:not(.horizontally) {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .ui.fitted.segment:not(.vertically) {
+ padding-left: 0;
+ padding-right: 0;
+ }
}
/*-------------------
Size
--------------------*/
-.ui.mini.segments .segment,
-.ui.mini.segment {
- font-size: @mini;
-}
-.ui.tiny.segments .segment,
-.ui.tiny.segment {
- font-size: @tiny;
-}
-.ui.small.segments .segment,
-.ui.small.segment {
- font-size: @small;
-}
.ui.segments .segment,
.ui.segment {
font-size: @medium;
}
-.ui.large.segments .segment,
-.ui.large.segment {
- font-size: @large;
-}
-.ui.big.segments .segment,
-.ui.big.segment {
- font-size: @big;
-}
-.ui.huge.segments .segment,
-.ui.huge.segment {
- font-size: @huge;
-}
-.ui.massive.segments .segment,
-.ui.massive.segment {
- font-size: @massive;
+& when not (@variationSegmentSizes = false) {
+ each(@variationSegmentSizes, {
+ @s: @@value;
+ .ui.@{value}.segments .segment,
+ .ui.@{value}.segment {
+ font-size: @s;
+ }
+ })
}
.loadUIOverrides();
diff --git a/ui/src/definitions/elements/step.less b/ui/src/definitions/elements/step.less
index 5c4aff2a6ce..4f72c20c937 100644
--- a/ui/src/definitions/elements/step.less
+++ b/ui/src/definitions/elements/step.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Step
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Step
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -37,15 +37,18 @@
border-radius: @stepsBorderRadius;
border: @stepsBorder;
}
+.ui.steps:not(.unstackable) {
+ flex-wrap: wrap;
+}
/* First Steps */
.ui.steps:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
/* Last Steps */
.ui.steps:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -82,7 +85,6 @@
content: '';
top: @arrowTopOffset;
right: @arrowRightOffset;
- border: medium none;
background-color: @arrowBackgroundColor;
width: @arrowSize;
height: @arrowSize;
@@ -98,16 +100,14 @@
/* First Step */
.ui.steps .step:first-child {
padding-left: @horizontalPadding;
- border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
+ border-radius: @stepsBorderRadius 0 0 @stepsBorderRadius;
}
/* Last Step */
.ui.steps .step:last-child {
- border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
-}
-.ui.steps .step:last-child {
+ border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0;
border-right: none;
- margin-right: 0em;
+ margin-right: 0;
}
/* Only Step */
@@ -147,7 +147,7 @@
.ui.steps .step > .icon {
line-height: 1;
font-size: @iconSize;
- margin: 0em @iconDistance 0em 0em;
+ margin: 0 @iconDistance 0 0;
}
.ui.steps .step > .icon,
.ui.steps .step > .icon ~ .content {
@@ -155,9 +155,6 @@
flex: 0 1 auto;
align-self: @iconAlign;
}
-.ui.steps .step > .icon ~ .content {
- flex-grow: 1 0 auto;
-}
/* Horizontal Icon */
.ui.steps:not(.vertical) .step > .icon {
@@ -174,82 +171,80 @@
Types
*******************************/
-/*--------------
- Ordered
----------------*/
+& when (@variationStepOrdered) {
+ /*--------------
+ Ordered
+ ---------------*/
-.ui.ordered.steps {
- counter-reset: ordered;
-}
-.ui.ordered.steps .step:before {
- display: block;
- position: static;
- text-align: center;
- content: counters(ordered, ".");
- align-self: @iconAlign;
- margin-right: @iconDistance;
- font-size: @iconSize;
- counter-increment: ordered;
- font-family: @orderedFontFamily;
- font-weight: @orderedFontWeight;
-}
+ .ui.ordered.steps {
+ counter-reset: ordered;
+ }
+ .ui.ordered.steps .step:before {
+ display: block;
+ position: static;
+ text-align: center;
+ content: counter(ordered);
+ align-self: @iconAlign;
+ margin-right: @iconDistance;
+ font-size: @iconSize;
+ counter-increment: ordered;
+ font-family: @orderedFontFamily;
+ font-weight: @orderedFontWeight;
+ }
-.ui.ordered.steps .step > * {
- display: block;
- align-self: @iconAlign;
+ .ui.ordered.steps .step > * {
+ display: block;
+ align-self: @iconAlign;
+ }
}
+& when (@variationStepVertical) {
+ /*--------------
+ Vertical
+ ---------------*/
-/*--------------
- Vertical
----------------*/
-
-.ui.vertical.steps {
- display: inline-flex;
- flex-direction: column;
- overflow: visible;
-}
-.ui.vertical.steps .step {
- justify-content: flex-start;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @verticalDivider;
-}
-.ui.vertical.steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
-}
-.ui.vertical.steps .step:last-child {
- border-bottom: none;
- border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
-}
-.ui.vertical.steps .step:only-child {
- border-radius: @stepsBorderRadius;
-}
+ .ui.vertical.steps {
+ display: inline-flex;
+ flex-direction: column;
+ overflow: visible;
+ }
+ .ui.vertical.steps .step {
+ justify-content: flex-start;
+ border-radius: @borderRadius;
+ padding: @verticalPadding @horizontalPadding;
+ border-right: none;
+ border-bottom: @verticalDivider;
+ }
+ .ui.vertical.steps .step:first-child {
+ padding: @verticalPadding @horizontalPadding;
+ border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
+ }
+ .ui.vertical.steps .step:last-child {
+ border-bottom: none;
+ border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
+ }
+ .ui.vertical.steps .step:only-child {
+ border-radius: @stepsBorderRadius;
+ }
-/* Arrow */
-.ui.vertical.steps .step:after {
- display: none;
-}
-.ui.vertical.steps .step:after {
- top: @verticalArrowTopOffset;
- right: @verticalArrowRightOffset;
- border-width: @verticalArrowBorderWidth;
-}
+ /* Arrow */
+ .ui.vertical.steps .step:after {
+ top: @verticalArrowTopOffset;
+ right: @verticalArrowRightOffset;
+ border-width: @verticalArrowBorderWidth;
+ display: @verticalArrowDisplay;
+ }
-.ui.vertical.steps .step:after {
- display: @verticalArrowDisplay;
-}
-.ui.vertical.steps .active.step:after {
- display: @verticalActiveArrowDisplay;
-}
-.ui.vertical.steps .step:last-child:after {
- display: @verticalLastArrowDisplay;
-}
-.ui.vertical.steps .active.step:last-child:after {
- display: @verticalActiveLastArrowDisplay;
+ .ui.vertical.steps .active.step:after {
+ display: @verticalActiveArrowDisplay;
+ }
+ .ui.vertical.steps .step:last-child:after {
+ display: @verticalLastArrowDisplay;
+ }
+ .ui.vertical.steps .active.step:last-child:after {
+ display: @verticalActiveLastArrowDisplay;
+ }
}
@@ -270,20 +265,28 @@
flex-direction: column;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;
+ border-right: none;
+ border-bottom: @stepsBorder;
}
.ui.steps:not(.unstackable) .step:first-child {
padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+ border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
}
.ui.steps:not(.unstackable) .step:last-child {
- border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+ border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
+ border-bottom: none;
}
/* Arrow */
.ui.steps:not(.unstackable) .step:after {
- display: none !important;
+ top: unset;
+ bottom: -@arrowSize;
+ right: 50%;
+ transform: translateY(-50%) translateX(50%) rotate(45deg);
+ }
+ .ui.vertical.steps .active.step:last-child:after {
+ display: none;
}
-
/* Content */
.ui.steps:not(.unstackable) .step .content {
text-align: center;
@@ -292,7 +295,7 @@
/* Icon */
.ui.steps:not(.unstackable) .step > .icon,
.ui.ordered.steps:not(.unstackable) .step:before {
- margin: 0em 0em @mobileIconDistance 0em;
+ margin: 0 0 @mobileIconDistance 0;
}
}
@@ -365,19 +368,21 @@
color: @completedColor;
}
-/* Disabled */
-.ui.steps .disabled.step {
- cursor: auto;
- background: @disabledBackground;
- pointer-events: none;
-}
-.ui.steps .disabled.step,
-.ui.steps .disabled.step .title,
-.ui.steps .disabled.step .description {
- color: @disabledColor;
-}
-.ui.steps .disabled.step:after {
- background: @disabledBackground;
+& when (@variationStepDisabled) {
+ /* Disabled */
+ .ui.steps .disabled.step {
+ cursor: auto;
+ background: @disabledBackground;
+ pointer-events: none;
+ }
+ .ui.steps .disabled.step,
+ .ui.steps .disabled.step .title,
+ .ui.steps .disabled.step .description {
+ color: @disabledColor;
+ }
+ .ui.steps .disabled.step:after {
+ background: @disabledBackground;
+ }
}
@@ -385,90 +390,101 @@
Variations
*******************************/
+& when (@variationStepStackable) {
+ /*--------------
+ Stackable
+ ---------------*/
+
+ /* Tablet Or Below */
+ @media only screen and (max-width: @largestTabletScreen) {
+
+ .ui[class*="tablet stackable"].steps {
+ display: inline-flex;
+ overflow: visible;
+ flex-direction: column;
+ }
+
+ /* Steps */
+ .ui[class*="tablet stackable"].steps .step {
+ flex-direction: column;
+ border-radius: @borderRadius;
+ padding: @verticalPadding @horizontalPadding;
+ border-right: none;
+ border-bottom: @stepsBorder;
+ }
+ .ui[class*="tablet stackable"].steps .step:first-child {
+ padding: @verticalPadding @horizontalPadding;
+ border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
+ }
+ .ui[class*="tablet stackable"].steps .step:last-child {
+ border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
+ border-bottom: none;
+ }
+
+ /* Arrow */
+ .ui[class*="tablet stackable"].steps .step:after {
+ top: unset;
+ bottom: -@arrowSize;
+ right: 50%;
+ transform: translateY(-50%) translateX(50%) rotate(45deg);
+ }
+
+ /* Content */
+ .ui[class*="tablet stackable"].steps .step .content {
+ text-align: center;
+ }
+
+ /* Icon */
+ .ui[class*="tablet stackable"].steps .step > .icon,
+ .ui[class*="tablet stackable"].ordered.steps .step:before {
+ margin: 0 0 @mobileIconDistance 0;
+ }
-/*--------------
- Stackable
----------------*/
-
-/* Tablet Or Below */
-@media only screen and (max-width: @largestTabletScreen) {
-
-.ui[class*="tablet stackable"].steps {
- display: inline-flex;
- overflow: visible;
- flex-direction: column;
-}
-
-/* Steps */
-.ui[class*="tablet stackable"].steps .step {
- flex-direction: column;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
-}
-.ui[class*="tablet stackable"].steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
-}
-.ui[class*="tablet stackable"].steps .step:last-child {
- border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
-}
-
-/* Arrow */
-.ui[class*="tablet stackable"].steps .step:after {
- display: none !important;
-}
-
-/* Content */
-.ui[class*="tablet stackable"].steps .step .content {
- text-align: center;
-}
-
-/* Icon */
-.ui[class*="tablet stackable"].steps .step > .icon,
-.ui[class*="tablet stackable"].ordered.steps .step:before {
- margin: 0em 0em @mobileIconDistance 0em;
-}
-
+ }
}
-/*--------------
- Fluid
----------------*/
+& when (@variationStepFluid) {
+ /*--------------
+ Fluid
+ ---------------*/
-/* Fluid */
-.ui.fluid.steps {
- display: flex;
- width: 100%;
+ /* Fluid */
+ .ui.fluid.steps {
+ display: flex;
+ width: 100%;
+ }
}
-/*--------------
- Attached
----------------*/
+& when (@variationStepAttached) {
+ /*--------------
+ Attached
+ ---------------*/
-/* Top */
-.ui.attached.steps {
- width: @attachedWidth !important;
- margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
- max-width: @attachedWidth;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
-}
-.ui.attached.steps .step:first-child {
- border-radius: @stepsBorderRadius 0em 0em 0em;
-}
-.ui.attached.steps .step:last-child {
- border-radius: 0em @stepsBorderRadius 0em 0em;
-}
+ /* Top */
+ .ui.attached.steps {
+ width: @attachedWidth !important;
+ margin: 0 @attachedHorizontalOffset @attachedVerticalOffset;
+ max-width: @attachedWidth;
+ border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
+ }
+ .ui.attached.steps .step:first-child {
+ border-radius: @stepsBorderRadius 0 0 0;
+ }
+ .ui.attached.steps .step:last-child {
+ border-radius: 0 @stepsBorderRadius 0 0;
+ }
-/* Bottom */
-.ui.bottom.attached.steps {
- margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
- border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
-}
-.ui.bottom.attached.steps .step:first-child {
- border-radius: 0em 0em 0em @stepsBorderRadius;
-}
-.ui.bottom.attached.steps .step:last-child {
- border-radius: 0em 0em @stepsBorderRadius 0em;
+ /* Bottom */
+ .ui.bottom.attached.steps {
+ margin: @attachedVerticalOffset @attachedHorizontalOffset 0;
+ border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
+ }
+ .ui.bottom.attached.steps .step:first-child {
+ border-radius: 0 0 0 @stepsBorderRadius;
+ }
+ .ui.bottom.attached.steps .step:last-child {
+ border-radius: 0 0 @stepsBorderRadius 0;
+ }
}
/*-------------------
@@ -524,38 +540,84 @@
Sizes
--------------------*/
-
-.ui.mini.steps .step,
-.ui.mini.step {
- font-size: @mini;
-}
-.ui.tiny.steps .step,
-.ui.tiny.step {
- font-size: @tiny;
-}
-.ui.small.steps .step,
-.ui.small.step {
- font-size: @small;
-}
.ui.steps .step,
.ui.step {
font-size: @medium;
}
-.ui.large.steps .step,
-.ui.large.step {
- font-size: @large;
+& when not (@variationStepSizes = false) {
+ each(@variationStepSizes, {
+ @s: @@value;
+ .ui.@{value}.steps .step,
+ .ui.@{value}.step {
+ font-size: @s;
+ }
+ })
}
-.ui.big.steps .step,
-.ui.big.step {
- font-size: @big;
-}
-.ui.huge.steps .step,
-.ui.huge.step {
- font-size: @huge;
-}
-.ui.massive.steps .step,
-.ui.massive.step {
- font-size: @massive;
+
+& when (@variationStepInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
+
+ .ui.inverted.steps {
+ border: 1px solid @solidWhiteBorderColor;
+ }
+
+ .ui.inverted.steps .step {
+ color: @invertedTextColor;
+ background: @black;
+ border-color: @solidWhiteBorderColor;
+ }
+
+ .ui.inverted.steps .step:after {
+ background-color: @black;
+ border-color: @solidWhiteBorderColor;
+ }
+
+ .ui.inverted.steps .step .description {
+ color: @invertedTextColor;
+ }
+
+ /* Active */
+ .ui.inverted.steps .step.active,
+ .ui.inverted.steps .step.active:after {
+ background: @invertedActiveBackground;
+ }
+ .ui.inverted.ordered.steps .step.active:before,
+ .ui.inverted.steps .active.step .icon {
+ color: @invertedSelectedTextColor;
+ }
+
+ & when (@variationStepDisabled) {
+ /* Disabled */
+ .ui.inverted.steps .disabled.step,
+ .ui.inverted.steps .disabled.step:after {
+ background: @invertedDisabledBackground;
+ }
+ .ui.inverted.steps .disabled.step,
+ .ui.inverted.steps .disabled.step .title,
+ .ui.inverted.steps .disabled.step .description {
+ color: @invertedDisabledTextColor;
+ }
+ }
+
+ /* Link Hover */
+ .ui.inverted.steps .link.step:hover::after,
+ .ui.inverted.steps .link.step:hover,
+ .ui.inverted.steps a.step:hover::after,
+ .ui.inverted.steps a.step:hover {
+ background: @invertedHoverBackground;
+ color: @invertedHoveredTextColor;
+ }
+
+ /* Link Down */
+ .ui.inverted.steps .link.step:active::after,
+ .ui.inverted.steps .link.step:active,
+ .ui.inverted.steps a.step:active::after,
+ .ui.inverted.steps a.step:active {
+ background: @invertedActiveHoverBackground;
+ color: @invertedPressedTextColor;
+ }
}
diff --git a/ui/src/definitions/elements/text.less b/ui/src/definitions/elements/text.less
new file mode 100644
index 00000000000..1cc70cc2af0
--- /dev/null
+++ b/ui/src/definitions/elements/text.less
@@ -0,0 +1,60 @@
+/*!
+ * # Fomantic-UI - Text
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'element';
+@element : 'text';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+ Text
+*******************************/
+
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+
+ span.ui.@{color}.text {
+ color: @c;
+ }
+ & when (@variationTextInverted) {
+ span.ui.inverted.@{color}.text {
+ color: @l;
+ }
+ }
+})
+
+& when (@variationTextDisabled) {
+ span.ui.disabled.text {
+ opacity: @disabledOpacity;
+ }
+}
+
+/* Sizes */
+span.ui.medium.text {
+ font-size: @medium;
+}
+& when not (@variationTextSizes = false) {
+ each(@variationTextSizes, {
+ @s: @@value;
+ span.ui.@{value}.text {
+ font-size: @s;
+ }
+ })
+}
+
+.loadUIOverrides();
diff --git a/ui/src/definitions/globals/reset.less b/ui/src/definitions/globals/reset.less
index 7514d94a697..1ebcf6b5809 100644
--- a/ui/src/definitions/globals/reset.less
+++ b/ui/src/definitions/globals/reset.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Reset
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Reset
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
diff --git a/ui/src/definitions/globals/site.js b/ui/src/definitions/globals/site.js
index 63cbd9dbfdf..bc53e9f6798 100644
--- a/ui/src/definitions/globals/site.js
+++ b/ui/src/definitions/globals/site.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Site
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Site
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -10,6 +10,10 @@
;(function ($, window, document, undefined) {
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
$.site = $.fn.site = function(parameters) {
var
time = new Date().getTime(),
@@ -26,7 +30,6 @@ $.site = $.fn.site = function(parameters) {
namespace = settings.namespace,
error = settings.error,
- eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$document = $(document),
@@ -391,7 +394,7 @@ $.site = $.fn.site = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -439,6 +442,7 @@ $.site.settings = {
modules: [
'accordion',
'api',
+ 'calendar',
'checkbox',
'dimmer',
'dropdown',
@@ -447,15 +451,17 @@ $.site.settings = {
'modal',
'nag',
'popup',
+ 'slider',
'rating',
'shape',
'sidebar',
'state',
'sticky',
'tab',
+ 'toast',
'transition',
- 'visit',
- 'visibility'
+ 'visibility',
+ 'visit'
],
siteNamespace : 'site',
diff --git a/ui/src/definitions/globals/site.less b/ui/src/definitions/globals/site.less
index ffe558b4a31..876deb35e81 100644
--- a/ui/src/definitions/globals/site.less
+++ b/ui/src/definitions/globals/site.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Site
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Site
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -34,8 +34,8 @@ html {
}
body {
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
overflow-x: @pageOverflowX;
min-width: @pageMinWidth;
background: @pageBackground;
@@ -43,7 +43,6 @@ body {
font-size: @fontSize;
line-height: @lineHeight;
color: @textColor;
- font-smoothing: @fontSmoothing;
}
/*******************************
@@ -59,7 +58,7 @@ h5 {
line-height: @headerLineHeight;
margin: @headerMargin;
font-weight: @headerFontWeight;
- padding: 0em;
+ padding: 0;
}
h1 {
@@ -84,7 +83,7 @@ h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
h1:last-child,
@@ -92,7 +91,7 @@ h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
@@ -105,10 +104,10 @@ p {
line-height: @paragraphLineHeight;
}
p:first-child {
- margin-top: 0em;
+ margin-top: 0;
}
p:last-child {
- margin-bottom: 0em;
+ margin-bottom: 0;
}
/*-------------------
@@ -155,16 +154,16 @@ a:hover {
}
/* Inverted UI */
- body .ui.inverted::-webkit-scrollbar-track {
+ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
background: @trackInvertedBackground;
}
- body .ui.inverted::-webkit-scrollbar-thumb {
+ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb {
background: @thumbInvertedBackground;
}
- body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
+ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
background: @thumbInvertedInactiveBackground;
}
- body .ui.inverted::-webkit-scrollbar-thumb:hover {
+ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
background: @thumbInvertedHoverBackground;
}
}
diff --git a/ui/src/definitions/modules/accordion.js b/ui/src/definitions/modules/accordion.js
index 818e3d62d9c..392d498a643 100644
--- a/ui/src/definitions/modules/accordion.js
+++ b/ui/src/definitions/modules/accordion.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Accordion
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Accordion
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -30,12 +34,6 @@ $.fn.accordion = function(parameters) {
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
returnedValue
;
$allModules
@@ -185,12 +183,16 @@ $.fn.accordion = function(parameters) {
$activeContent
.children()
.transition({
- animation : 'fade in',
- queue : false,
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration
+ animation : 'fade in',
+ queue : false,
+ useFailSafe : true,
+ debug : settings.debug,
+ verbose : settings.verbose,
+ duration : settings.duration,
+ skipInlineHidden : true,
+ onComplete: function() {
+ $activeContent.children().removeClass(className.transition);
+ }
})
;
}
@@ -246,12 +248,13 @@ $.fn.accordion = function(parameters) {
$activeContent
.children()
.transition({
- animation : 'fade out',
- queue : false,
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration
+ animation : 'fade out',
+ queue : false,
+ useFailSafe : true,
+ debug : settings.debug,
+ verbose : settings.verbose,
+ duration : settings.duration,
+ skipInlineHidden : true
})
;
}
@@ -316,11 +319,12 @@ $.fn.accordion = function(parameters) {
$openContents
.children()
.transition({
- animation : 'fade out',
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration
+ animation : 'fade out',
+ useFailSafe : true,
+ debug : settings.debug,
+ verbose : settings.verbose,
+ duration : settings.duration,
+ skipInlineHidden : true
})
;
}
@@ -522,7 +526,7 @@ $.fn.accordion = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -590,7 +594,8 @@ $.fn.accordion.settings = {
className : {
active : 'active',
- animating : 'animating'
+ animating : 'animating',
+ transition: 'transition'
},
selector : {
diff --git a/ui/src/definitions/modules/accordion.less b/ui/src/definitions/modules/accordion.less
index eaf07769263..7fe052fb00c 100644
--- a/ui/src/definitions/modules/accordion.less
+++ b/ui/src/definitions/modules/accordion.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Accordion
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Accordion
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -44,12 +44,6 @@
color: @titleColor;
}
-/* Content */
-.ui.accordion .title ~ .content,
-.ui.accordion .accordion .title ~ .content {
- display: none;
-}
-
/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
@@ -57,7 +51,7 @@
padding: @contentPadding;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
- padding-bottom: 0em;
+ padding-bottom: 0;
}
/* Arrow */
@@ -114,70 +108,72 @@
Types
*******************************/
-/*--------------
- Styled
----------------*/
-
-.ui.styled.accordion {
- width: @styledWidth;
-}
-
-.ui.styled.accordion,
-.ui.styled.accordion .accordion {
- border-radius: @styledBorderRadius;
- background: @styledBackground;
- box-shadow: @styledBoxShadow;
-}
-.ui.styled.accordion .title,
-.ui.styled.accordion .accordion .title {
- margin: @styledTitleMargin;
- padding: @styledTitlePadding;
- color: @styledTitleColor;
- font-weight: @styledTitleFontWeight;
- border-top: @styledTitleBorder;
- transition: @styledTitleTransition;
-}
-.ui.styled.accordion > .title:first-child,
-.ui.styled.accordion .accordion .title:first-child {
- border-top: none;
-}
-
-
-/* Content */
-.ui.styled.accordion .content,
-.ui.styled.accordion .accordion .content {
- margin: @styledContentMargin;
- padding: @styledContentPadding;
-}
-.ui.styled.accordion .accordion .content {
- padding: @styledChildContentMargin;
- padding: @styledChildContentPadding;
-}
-
-
-/* Hover */
-.ui.styled.accordion .title:hover,
-.ui.styled.accordion .active.title,
-.ui.styled.accordion .accordion .title:hover,
-.ui.styled.accordion .accordion .active.title {
- background: @styledTitleHoverBackground;
- color: @styledTitleHoverColor;
-}
-.ui.styled.accordion .accordion .title:hover,
-.ui.styled.accordion .accordion .active.title {
- background: @styledHoverChildTitleBackground;
- color: @styledHoverChildTitleColor;
-}
-
-
-/* Active */
-.ui.styled.accordion .active.title {
- background: @styledActiveTitleBackground;
- color: @styledActiveTitleColor;
-}
-.ui.styled.accordion .accordion .active.title {
- background: @styledActiveChildTitleBackground;
- color: @styledActiveChildTitleColor;
+& when (@variationAccordionStyled) {
+ /*--------------
+ Styled
+ ---------------*/
+
+ .ui.styled.accordion {
+ width: @styledWidth;
+ }
+
+ .ui.styled.accordion,
+ .ui.styled.accordion .accordion {
+ border-radius: @styledBorderRadius;
+ background: @styledBackground;
+ box-shadow: @styledBoxShadow;
+ }
+ .ui.styled.accordion .title,
+ .ui.styled.accordion .accordion .title {
+ margin: @styledTitleMargin;
+ padding: @styledTitlePadding;
+ color: @styledTitleColor;
+ font-weight: @styledTitleFontWeight;
+ border-top: @styledTitleBorder;
+ transition: @styledTitleTransition;
+ }
+ .ui.styled.accordion > .title:first-child,
+ .ui.styled.accordion .accordion .title:first-child {
+ border-top: none;
+ }
+
+
+ /* Content */
+ .ui.styled.accordion .content,
+ .ui.styled.accordion .accordion .content {
+ margin: @styledContentMargin;
+ padding: @styledContentPadding;
+ }
+ .ui.styled.accordion .accordion .content {
+ margin: @styledChildContentMargin;
+ padding: @styledChildContentPadding;
+ }
+
+
+ /* Hover */
+ .ui.styled.accordion .title:hover,
+ .ui.styled.accordion .active.title,
+ .ui.styled.accordion .accordion .title:hover,
+ .ui.styled.accordion .accordion .active.title {
+ background: @styledTitleHoverBackground;
+ color: @styledTitleHoverColor;
+ }
+ .ui.styled.accordion .accordion .title:hover,
+ .ui.styled.accordion .accordion .active.title {
+ background: @styledHoverChildTitleBackground;
+ color: @styledHoverChildTitleColor;
+ }
+
+
+ /* Active */
+ .ui.styled.accordion .active.title {
+ background: @styledActiveTitleBackground;
+ color: @styledActiveTitleColor;
+ }
+ .ui.styled.accordion .accordion .active.title {
+ background: @styledActiveChildTitleBackground;
+ color: @styledActiveChildTitleColor;
+ }
}
@@ -186,33 +182,37 @@
*******************************/
/*--------------
- Active
+ Not Active
---------------*/
-.ui.accordion .active.content,
-.ui.accordion .accordion .active.content {
- display: block;
+.ui.accordion .title ~ .content:not(.active),
+.ui.accordion .accordion .title ~ .content:not(.active) {
+ display: none;
}
/*******************************
Variations
*******************************/
-/*--------------
- Fluid
----------------*/
+& when (@variationAccordionFluid) {
+ /*--------------
+ Fluid
+ ---------------*/
-.ui.fluid.accordion,
-.ui.fluid.accordion .accordion {
- width: 100%;
+ .ui.fluid.accordion,
+ .ui.fluid.accordion .accordion {
+ width: 100%;
+ }
}
-/*--------------
- Inverted
----------------*/
+& when (@variationAccordionInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
-.ui.inverted.accordion .title:not(.ui) {
- color: @invertedTitleColor;
+ .ui.inverted.accordion .title:not(.ui) {
+ color: @invertedTitleColor;
+ }
}
.loadUIOverrides();
diff --git a/ui/src/definitions/modules/calendar.js b/ui/src/definitions/modules/calendar.js
new file mode 100644
index 00000000000..a74868157db
--- /dev/null
+++ b/ui/src/definitions/modules/calendar.js
@@ -0,0 +1,1638 @@
+/*!
+ * # Fomantic-UI - Calendar
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+'use strict';
+
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.calendar = function(parameters) {
+ var
+ $allModules = $(this),
+
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue,
+ timeGapTable = {
+ '5': {'row': 4, 'column': 3 },
+ '10': {'row': 3, 'column': 2 },
+ '15': {'row': 2, 'column': 2 },
+ '20': {'row': 3, 'column': 1 },
+ '30': {'row': 2, 'column': 1 }
+ }
+ ;
+
+ $allModules
+ .each(function () {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.calendar.settings, parameters)
+ : $.extend({}, $.fn.calendar.settings),
+
+ className = settings.className,
+ namespace = settings.namespace,
+ selector = settings.selector,
+ formatter = settings.formatter,
+ parser = settings.parser,
+ metadata = settings.metadata,
+ timeGap = timeGapTable[settings.minTimeGap],
+ error = settings.error,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = 'module-' + namespace,
+
+ $module = $(this),
+ $input = $module.find(selector.input),
+ $container = $module.find(selector.popup),
+ $activator = $module.find(selector.activator),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
+
+ isTouch,
+ isTouchDown = false,
+ focusDateUsedForRange = false,
+ module
+ ;
+
+ module = {
+
+ initialize: function () {
+ module.debug('Initializing calendar for', element, $module);
+
+ isTouch = module.get.isTouch();
+ module.setup.config();
+ module.setup.popup();
+ module.setup.inline();
+ module.setup.input();
+ module.setup.date();
+ module.create.calendar();
+
+ module.bind.events();
+ module.instantiate();
+ },
+
+ instantiate: function () {
+ module.verbose('Storing instance of calendar');
+ instance = module;
+ $module.data(moduleNamespace, instance);
+ },
+
+ destroy: function () {
+ module.verbose('Destroying previous calendar for', element);
+ $module.removeData(moduleNamespace);
+ module.unbind.events();
+ },
+
+ setup: {
+ config: function () {
+ if (module.get.minDate() !== null) {
+ module.set.minDate($module.data(metadata.minDate));
+ }
+ if (module.get.maxDate() !== null) {
+ module.set.maxDate($module.data(metadata.maxDate));
+ }
+ module.setting('type', module.get.type());
+ },
+ popup: function () {
+ if (settings.inline) {
+ return;
+ }
+ if (!$activator.length) {
+ $activator = $module.children().first();
+ if (!$activator.length) {
+ return;
+ }
+ }
+ if ($.fn.popup === undefined) {
+ module.error(error.popup);
+ return;
+ }
+ if (!$container.length) {
+ //prepend the popup element to the activator's parent so that it has less chance of messing with
+ //the styling (eg input action button needs to be the last child to have correct border radius)
+ var $activatorParent = $activator.parent(),
+ domPositionFunction = $activatorParent.closest(selector.append).length !== 0 ? 'appendTo' : 'prependTo';
+ $container = $('
').addClass(className.popup)[domPositionFunction]($activatorParent);
+ }
+ $container.addClass(className.calendar);
+ var onVisible = settings.onVisible;
+ var onHidden = settings.onHidden;
+ if (!$input.length) {
+ //no input, $container has to handle focus/blur
+ $container.attr('tabindex', '0');
+ onVisible = function () {
+ module.focus();
+ return settings.onVisible.apply($container, arguments);
+ };
+ onHidden = function () {
+ module.blur();
+ return settings.onHidden.apply($container, arguments);
+ };
+ }
+ var onShow = function () {
+ //reset the focus date onShow
+ module.set.focusDate(module.get.date());
+ module.set.mode(settings.startMode);
+ return settings.onShow.apply($container, arguments);
+ };
+ var on = settings.on || ($input.length ? 'focus' : 'click');
+ var options = $.extend({}, settings.popupOptions, {
+ popup: $container,
+ on: on,
+ hoverable: on === 'hover',
+ onShow: onShow,
+ onVisible: onVisible,
+ onHide: settings.onHide,
+ onHidden: onHidden
+ });
+ module.popup(options);
+ },
+ inline: function () {
+ if ($activator.length && !settings.inline) {
+ return;
+ }
+ $container = $('
').addClass(className.calendar).appendTo($module);
+ if (!$input.length) {
+ $container.attr('tabindex', '0');
+ }
+ },
+ input: function () {
+ if (settings.touchReadonly && $input.length && isTouch) {
+ $input.prop('readonly', true);
+ }
+ },
+ date: function () {
+ var date;
+ if (settings.initialDate) {
+ date = parser.date(settings.initialDate, settings);
+ } else if ($module.data(metadata.date) !== undefined) {
+ date = parser.date($module.data(metadata.date), settings);
+ } else if ($input.length) {
+ date = parser.date($input.val(), settings);
+ }
+ module.set.date(date, settings.formatInput, false);
+ }
+ },
+
+ create: {
+ calendar: function () {
+ var i, r, c, p, row, cell, pageGrid;
+
+ var mode = module.get.mode();
+ var today = new Date();
+ var date = module.get.date();
+ var focusDate = module.get.focusDate();
+ var display = focusDate || date || settings.initialDate || today;
+ display = module.helper.dateInRange(display);
+
+ if (!focusDate) {
+ focusDate = display;
+ module.set.focusDate(focusDate, false, false);
+ }
+
+ var isYear = mode === 'year';
+ var isMonth = mode === 'month';
+ var isDay = mode === 'day';
+ var isHour = mode === 'hour';
+ var isMinute = mode === 'minute';
+ var isTimeOnly = settings.type === 'time';
+
+ var multiMonth = Math.max(settings.multiMonth, 1);
+ var monthOffset = !isDay ? 0 : module.get.monthOffset();
+
+ var minute = display.getMinutes();
+ var hour = display.getHours();
+ var day = display.getDate();
+ var startMonth = display.getMonth() + monthOffset;
+ var year = display.getFullYear();
+
+ var columns = isDay ? settings.showWeekNumbers ? 8 : 7 : isHour ? 4 : timeGap['column'];
+ var rows = isDay || isHour ? 6 : timeGap['row'];
+ var pages = isDay ? multiMonth : 1;
+
+ var container = $container;
+ var tooltipPosition = container.hasClass("left") ? "right center" : "left center";
+ container.empty();
+ if (pages > 1) {
+ pageGrid = $('
').addClass(className.grid).appendTo(container);
+ }
+
+ for (p = 0; p < pages; p++) {
+ if (pages > 1) {
+ var pageColumn = $('
').addClass(className.column).appendTo(pageGrid);
+ container = pageColumn;
+ }
+
+ var month = startMonth + p;
+ var firstMonthDayColumn = (new Date(year, month, 1).getDay() - settings.firstDayOfWeek % 7 + 7) % 7;
+ if (!settings.constantHeight && isDay) {
+ var requiredCells = new Date(year, month + 1, 0).getDate() + firstMonthDayColumn;
+ rows = Math.ceil(requiredCells / 7);
+ }
+
+ var yearChange = isYear ? 10 : isMonth ? 1 : 0;
+ var monthChange = isDay ? 1 : 0;
+ var dayChange = isHour || isMinute ? 1 : 0;
+ var prevNextDay = isHour || isMinute ? day : 1;
+ var prevDate = new Date(year - yearChange, month - monthChange, prevNextDay - dayChange, hour);
+ var nextDate = new Date(year + yearChange, month + monthChange, prevNextDay + dayChange, hour);
+
+ var prevLast = isYear ? new Date(Math.ceil(year / 10) * 10 - 9, 0, 0) :
+ isMonth ? new Date(year, 0, 0) : isDay ? new Date(year, month, 0) : new Date(year, month, day, -1);
+ var nextFirst = isYear ? new Date(Math.ceil(year / 10) * 10 + 1, 0, 1) :
+ isMonth ? new Date(year + 1, 0, 1) : isDay ? new Date(year, month + 1, 1) : new Date(year, month, day + 1);
+
+ var tempMode = mode;
+ if (isDay && settings.showWeekNumbers){
+ tempMode += ' andweek';
+ }
+ var table = $('').addClass(className.table).addClass(tempMode).appendTo(container);
+ var textColumns = columns;
+ //no header for time-only mode
+ if (!isTimeOnly) {
+ var thead = $(' ').appendTo(table);
+
+ row = $(' ').appendTo(thead);
+ cell = $(' ').attr('colspan', '' + columns).appendTo(row);
+
+ var headerDate = isYear || isMonth ? new Date(year, 0, 1) :
+ isDay ? new Date(year, month, 1) : new Date(year, month, day, hour, minute);
+ var headerText = $(' ').addClass(className.link).appendTo(cell);
+ headerText.text(formatter.header(headerDate, mode, settings));
+ var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') :
+ isDay ? (settings.disableMonth ? 'year' : 'month') : 'day';
+ headerText.data(metadata.mode, newMode);
+
+ if (p === 0) {
+ var prev = $(' ').addClass(className.prev).appendTo(cell);
+ prev.data(metadata.focusDate, prevDate);
+ prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode));
+ $(' ').addClass(className.prevIcon).appendTo(prev);
+ }
+
+ if (p === pages - 1) {
+ var next = $(' ').addClass(className.next).appendTo(cell);
+ next.data(metadata.focusDate, nextDate);
+ next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode));
+ $(' ').addClass(className.nextIcon).appendTo(next);
+ }
+ if (isDay) {
+ row = $(' ').appendTo(thead);
+ if(settings.showWeekNumbers) {
+ cell = $(' ').appendTo(row);
+ cell.text(settings.text.weekNo);
+ cell.addClass(className.weekCell);
+ textColumns--;
+ }
+ for (i = 0; i < textColumns; i++) {
+ cell = $(' ').appendTo(row);
+ cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings));
+ }
+ }
+ }
+
+ var tbody = $(' ').appendTo(table);
+ i = isYear ? Math.ceil(year / 10) * 10 - 9 : isDay ? 1 - firstMonthDayColumn : 0;
+ for (r = 0; r < rows; r++) {
+ row = $(' ').appendTo(tbody);
+ if(isDay && settings.showWeekNumbers){
+ cell = $(' ').appendTo(row);
+ cell.text(module.get.weekOfYear(year,month,i+1-settings.firstDayOfWeek));
+ cell.addClass(className.weekCell);
+ }
+ for (c = 0; c < textColumns; c++, i++) {
+ var cellDate = isYear ? new Date(i, month, 1, hour, minute) :
+ isMonth ? new Date(year, i, 1, hour, minute) : isDay ? new Date(year, month, i, hour, minute) :
+ isHour ? new Date(year, month, day, i) : new Date(year, month, day, hour, i * settings.minTimeGap);
+ var cellText = isYear ? i :
+ isMonth ? settings.text.monthsShort[i] : isDay ? cellDate.getDate() :
+ formatter.time(cellDate, settings, true);
+ cell = $(' ').addClass(className.cell).appendTo(row);
+ cell.text(cellText);
+ cell.data(metadata.date, cellDate);
+ var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12);
+ var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode);
+ if (disabled) {
+ var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates);
+ if (disabledDate !== null && disabledDate[metadata.message]) {
+ cell.attr("data-tooltip", disabledDate[metadata.message]);
+ cell.attr("data-position", tooltipPosition);
+ }
+ } else {
+ var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
+ if (eventDate !== null) {
+ cell.addClass(eventDate[metadata.class] || settings.eventClass);
+ if (eventDate[metadata.message]) {
+ cell.attr("data-tooltip", eventDate[metadata.message]);
+ cell.attr("data-position", tooltipPosition);
+ }
+ }
+ }
+ var active = module.helper.dateEqual(cellDate, date, mode);
+ var isToday = module.helper.dateEqual(cellDate, today, mode);
+ cell.toggleClass(className.adjacentCell, adjacent);
+ cell.toggleClass(className.disabledCell, disabled);
+ cell.toggleClass(className.activeCell, active && !adjacent);
+ if (!isHour && !isMinute) {
+ cell.toggleClass(className.todayCell, !adjacent && isToday);
+ }
+
+ // Allow for external modifications of each cell
+ var cellOptions = {
+ mode: mode,
+ adjacent: adjacent,
+ disabled: disabled,
+ active: active,
+ today: isToday
+ };
+ formatter.cell(cell, cellDate, cellOptions);
+
+ if (module.helper.dateEqual(cellDate, focusDate, mode)) {
+ //ensure that the focus date is exactly equal to the cell date
+ //so that, if selected, the correct value is set
+ module.set.focusDate(cellDate, false, false);
+ }
+ }
+ }
+
+ if (settings.today) {
+ var todayRow = $(' ').appendTo(tbody);
+ var todayButton = $(' ').attr('colspan', '' + columns).addClass(className.today).appendTo(todayRow);
+ todayButton.text(formatter.today(settings));
+ todayButton.data(metadata.date, today);
+ }
+
+ module.update.focus(false, table);
+ }
+ }
+ },
+
+ update: {
+ focus: function (updateRange, container) {
+ container = container || $container;
+ var mode = module.get.mode();
+ var date = module.get.date();
+ var focusDate = module.get.focusDate();
+ var startDate = module.get.startDate();
+ var endDate = module.get.endDate();
+ var rangeDate = (updateRange ? focusDate : null) || date || (!isTouch ? focusDate : null);
+
+ container.find('td').each(function () {
+ var cell = $(this);
+ var cellDate = cell.data(metadata.date);
+ if (!cellDate) {
+ return;
+ }
+ var disabled = cell.hasClass(className.disabledCell);
+ var active = cell.hasClass(className.activeCell);
+ var adjacent = cell.hasClass(className.adjacentCell);
+ var focused = module.helper.dateEqual(cellDate, focusDate, mode);
+ var inRange = !rangeDate ? false :
+ ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) ||
+ (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate)));
+ cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && (!adjacent || (settings.selectAdjacentDays && adjacent)) && !disabled);
+
+ if (module.helper.isTodayButton(cell)) {
+ return;
+ }
+ cell.toggleClass(className.rangeCell, inRange && !active && !disabled);
+ });
+ }
+ },
+
+ refresh: function () {
+ module.create.calendar();
+ },
+
+ bind: {
+ events: function () {
+ module.debug('Binding events');
+ $container.on('mousedown' + eventNamespace, module.event.mousedown);
+ $container.on('touchstart' + eventNamespace, module.event.mousedown);
+ $container.on('mouseup' + eventNamespace, module.event.mouseup);
+ $container.on('touchend' + eventNamespace, module.event.mouseup);
+ $container.on('mouseover' + eventNamespace, module.event.mouseover);
+ if ($input.length) {
+ $input.on('input' + eventNamespace, module.event.inputChange);
+ $input.on('focus' + eventNamespace, module.event.inputFocus);
+ $input.on('blur' + eventNamespace, module.event.inputBlur);
+ $input.on('click' + eventNamespace, module.event.inputClick);
+ $input.on('keydown' + eventNamespace, module.event.keydown);
+ } else {
+ $container.on('keydown' + eventNamespace, module.event.keydown);
+ }
+ }
+ },
+
+ unbind: {
+ events: function () {
+ module.debug('Unbinding events');
+ $container.off(eventNamespace);
+ if ($input.length) {
+ $input.off(eventNamespace);
+ }
+ }
+ },
+
+ event: {
+ mouseover: function (event) {
+ var target = $(event.target);
+ var date = target.data(metadata.date);
+ var mousedown = event.buttons === 1;
+ if (date) {
+ module.set.focusDate(date, false, true, mousedown);
+ }
+ },
+ mousedown: function (event) {
+ if ($input.length) {
+ //prevent the mousedown on the calendar causing the input to lose focus
+ event.preventDefault();
+ }
+ isTouchDown = event.type.indexOf('touch') >= 0;
+ var target = $(event.target);
+ var date = target.data(metadata.date);
+ if (date) {
+ module.set.focusDate(date, false, true, true);
+ }
+ },
+ mouseup: function (event) {
+ //ensure input has focus so that it receives keydown events for calendar navigation
+ module.focus();
+ event.preventDefault();
+ event.stopPropagation();
+ isTouchDown = false;
+ var target = $(event.target);
+ if (target.hasClass("disabled")) {
+ return;
+ }
+ var parent = target.parent();
+ if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) {
+ //clicked on a child element, switch to parent (used when clicking directly on prev/next icon element)
+ target = parent;
+ }
+ var date = target.data(metadata.date);
+ var focusDate = target.data(metadata.focusDate);
+ var mode = target.data(metadata.mode);
+ if (date && settings.onSelect.call(element, date, module.get.mode()) !== false) {
+ var forceSet = target.hasClass(className.today);
+ module.selectDate(date, forceSet);
+ }
+ else if (focusDate) {
+ module.set.focusDate(focusDate);
+ }
+ else if (mode) {
+ module.set.mode(mode);
+ }
+ },
+ keydown: function (event) {
+ var keyCode = event.which;
+ if (keyCode === 27 || keyCode === 9) {
+ //esc || tab
+ module.popup('hide');
+ }
+
+ if (module.popup('is visible')) {
+ if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
+ //arrow keys
+ var mode = module.get.mode();
+ var bigIncrement = mode === 'day' ? 7 : mode === 'hour' ? 4 : mode === 'minute' ? timeGap['column'] : 3;
+ var increment = keyCode === 37 ? -1 : keyCode === 38 ? -bigIncrement : keyCode == 39 ? 1 : bigIncrement;
+ increment *= mode === 'minute' ? settings.minTimeGap : 1;
+ var focusDate = module.get.focusDate() || module.get.date() || new Date();
+ var year = focusDate.getFullYear() + (mode === 'year' ? increment : 0);
+ var month = focusDate.getMonth() + (mode === 'month' ? increment : 0);
+ var day = focusDate.getDate() + (mode === 'day' ? increment : 0);
+ var hour = focusDate.getHours() + (mode === 'hour' ? increment : 0);
+ var minute = focusDate.getMinutes() + (mode === 'minute' ? increment : 0);
+ var newFocusDate = new Date(year, month, day, hour, minute);
+ if (settings.type === 'time') {
+ newFocusDate = module.helper.mergeDateTime(focusDate, newFocusDate);
+ }
+ if (module.helper.isDateInRange(newFocusDate, mode)) {
+ module.set.focusDate(newFocusDate);
+ }
+ } else if (keyCode === 13) {
+ //enter
+ var mode = module.get.mode();
+ var date = module.get.focusDate();
+ if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) {
+ module.selectDate(date);
+ }
+ //disable form submission:
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ if (keyCode === 38 || keyCode === 40) {
+ //arrow-up || arrow-down
+ event.preventDefault(); //don't scroll
+ module.popup('show');
+ }
+ },
+ inputChange: function () {
+ var val = $input.val();
+ var date = parser.date(val, settings);
+ module.set.date(date, false);
+ },
+ inputFocus: function () {
+ $container.addClass(className.active);
+ },
+ inputBlur: function () {
+ $container.removeClass(className.active);
+ if (settings.formatInput) {
+ var date = module.get.date();
+ var text = formatter.datetime(date, settings);
+ $input.val(text);
+ }
+ },
+ inputClick: function () {
+ module.popup('show');
+ }
+ },
+
+ get: {
+ weekOfYear: function(weekYear,weekMonth,weekDay) {
+ // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
+ var ms1d = 864e5, // milliseconds in a day
+ ms7d = 7 * ms1d; // milliseconds in a week
+
+ return function() { // return a closure so constants get calculated only once
+ var DC3 = Date.UTC(weekYear, weekMonth, weekDay + 3) / ms1d, // an Absolute Day Number
+ AWN = Math.floor(DC3 / 7), // an Absolute Week Number
+ Wyr = new Date(AWN * ms7d).getUTCFullYear();
+
+ return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
+ }();
+ },
+ date: function () {
+ return module.helper.sanitiseDate($module.data(metadata.date)) || null;
+ },
+ inputDate: function() {
+ return $input.val();
+ },
+ focusDate: function () {
+ return $module.data(metadata.focusDate) || null;
+ },
+ startDate: function () {
+ var startModule = module.get.calendarModule(settings.startCalendar);
+ return (startModule ? startModule.get.date() : $module.data(metadata.startDate)) || null;
+ },
+ endDate: function () {
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ return (endModule ? endModule.get.date() : $module.data(metadata.endDate)) || null;
+ },
+ minDate: function() {
+ return $module.data(metadata.minDate) || null;
+ },
+ maxDate: function() {
+ return $module.data(metadata.maxDate) || null;
+ },
+ monthOffset: function () {
+ return $module.data(metadata.monthOffset) || 0;
+ },
+ mode: function () {
+ //only returns valid modes for the current settings
+ var mode = $module.data(metadata.mode) || settings.startMode;
+ var validModes = module.get.validModes();
+ if ($.inArray(mode, validModes) >= 0) {
+ return mode;
+ }
+ return settings.type === 'time' ? 'hour' :
+ settings.type === 'month' ? 'month' :
+ settings.type === 'year' ? 'year' : 'day';
+ },
+ type: function() {
+ return $module.data(metadata.type) || settings.type;
+ },
+ validModes: function () {
+ var validModes = [];
+ if (settings.type !== 'time') {
+ if (!settings.disableYear || settings.type === 'year') {
+ validModes.push('year');
+ }
+ if (!(settings.disableMonth || settings.type === 'year') || settings.type === 'month') {
+ validModes.push('month');
+ }
+ if (settings.type.indexOf('date') >= 0) {
+ validModes.push('day');
+ }
+ }
+ if (settings.type.indexOf('time') >= 0) {
+ validModes.push('hour');
+ if (!settings.disableMinute) {
+ validModes.push('minute');
+ }
+ }
+ return validModes;
+ },
+ isTouch: function () {
+ try {
+ document.createEvent('TouchEvent');
+ return true;
+ }
+ catch (e) {
+ return false;
+ }
+ },
+ calendarModule: function (selector) {
+ if (!selector) {
+ return null;
+ }
+ if (!(selector instanceof $)) {
+ selector = $(selector).first();
+ }
+ //assume range related calendars are using the same namespace
+ return selector.data(moduleNamespace);
+ }
+ },
+
+ set: {
+ date: function (date, updateInput, fireChange) {
+ updateInput = updateInput !== false;
+ fireChange = fireChange !== false;
+ date = module.helper.sanitiseDate(date);
+ date = module.helper.dateInRange(date);
+
+ var mode = module.get.mode();
+ var text = formatter.datetime(date, settings);
+
+ if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) {
+ return false;
+ }
+
+ module.set.focusDate(date);
+
+ if (settings.isDisabled(date, mode)) {
+ return false;
+ }
+
+ var endDate = module.get.endDate();
+ if (!!endDate && !!date && date > endDate) {
+ //selected date is greater than end date in range, so clear end date
+ module.set.endDate(undefined);
+ }
+ module.set.dataKeyValue(metadata.date, date);
+
+ if (updateInput && $input.length) {
+ $input.val(text);
+ }
+
+ if (fireChange) {
+ settings.onChange.call(element, date, text, mode);
+ }
+ },
+ startDate: function (date, refreshCalendar) {
+ date = module.helper.sanitiseDate(date);
+ var startModule = module.get.calendarModule(settings.startCalendar);
+ if (startModule) {
+ startModule.set.date(date);
+ }
+ module.set.dataKeyValue(metadata.startDate, date, refreshCalendar);
+ },
+ endDate: function (date, refreshCalendar) {
+ date = module.helper.sanitiseDate(date);
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ if (endModule) {
+ endModule.set.date(date);
+ }
+ module.set.dataKeyValue(metadata.endDate, date, refreshCalendar);
+ },
+ focusDate: function (date, refreshCalendar, updateFocus, updateRange) {
+ date = module.helper.sanitiseDate(date);
+ date = module.helper.dateInRange(date);
+ var isDay = module.get.mode() === 'day';
+ var oldFocusDate = module.get.focusDate();
+ if (isDay && date && oldFocusDate) {
+ var yearDelta = date.getFullYear() - oldFocusDate.getFullYear();
+ var monthDelta = yearDelta * 12 + date.getMonth() - oldFocusDate.getMonth();
+ if (monthDelta) {
+ var monthOffset = module.get.monthOffset() - monthDelta;
+ module.set.monthOffset(monthOffset, false);
+ }
+ }
+ var changed = module.set.dataKeyValue(metadata.focusDate, date, refreshCalendar);
+ updateFocus = (updateFocus !== false && changed && refreshCalendar === false) || focusDateUsedForRange != updateRange;
+ focusDateUsedForRange = updateRange;
+ if (updateFocus) {
+ module.update.focus(updateRange);
+ }
+ },
+ minDate: function (date) {
+ date = module.helper.sanitiseDate(date);
+ if (settings.maxDate !== null && settings.maxDate <= date) {
+ module.verbose('Unable to set minDate variable bigger that maxDate variable', date, settings.maxDate);
+ } else {
+ module.setting('minDate', date);
+ module.set.dataKeyValue(metadata.minDate, date);
+ }
+ },
+ maxDate: function (date) {
+ date = module.helper.sanitiseDate(date);
+ if (settings.minDate !== null && settings.minDate >= date) {
+ module.verbose('Unable to set maxDate variable lower that minDate variable', date, settings.minDate);
+ } else {
+ module.setting('maxDate', date);
+ module.set.dataKeyValue(metadata.maxDate, date);
+ }
+ },
+ monthOffset: function (monthOffset, refreshCalendar) {
+ var multiMonth = Math.max(settings.multiMonth, 1);
+ monthOffset = Math.max(1 - multiMonth, Math.min(0, monthOffset));
+ module.set.dataKeyValue(metadata.monthOffset, monthOffset, refreshCalendar);
+ },
+ mode: function (mode, refreshCalendar) {
+ module.set.dataKeyValue(metadata.mode, mode, refreshCalendar);
+ },
+ dataKeyValue: function (key, value, refreshCalendar) {
+ var oldValue = $module.data(key);
+ var equal = oldValue === value || (oldValue <= value && oldValue >= value); //equality test for dates and string objects
+ if (value) {
+ $module.data(key, value);
+ } else {
+ $module.removeData(key);
+ }
+ refreshCalendar = refreshCalendar !== false && !equal;
+ if (refreshCalendar) {
+ module.refresh();
+ }
+ return !equal;
+ }
+ },
+
+ selectDate: function (date, forceSet) {
+ module.verbose('New date selection', date);
+ var mode = module.get.mode();
+ var complete = forceSet || mode === 'minute' ||
+ (settings.disableMinute && mode === 'hour') ||
+ (settings.type === 'date' && mode === 'day') ||
+ (settings.type === 'month' && mode === 'month') ||
+ (settings.type === 'year' && mode === 'year');
+ if (complete) {
+ var canceled = module.set.date(date) === false;
+ if (!canceled && settings.closable) {
+ module.popup('hide');
+ //if this is a range calendar, show the end date calendar popup and focus the input
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ if (endModule) {
+ endModule.popup('show');
+ endModule.focus();
+ }
+ }
+ } else {
+ var newMode = mode === 'year' ? (!settings.disableMonth ? 'month' : 'day') :
+ mode === 'month' ? 'day' : mode === 'day' ? 'hour' : 'minute';
+ module.set.mode(newMode);
+ if (mode === 'hour' || (mode === 'day' && module.get.date())) {
+ //the user has chosen enough to consider a valid date/time has been chosen
+ module.set.date(date);
+ } else {
+ module.set.focusDate(date);
+ }
+ }
+ },
+
+ changeDate: function (date) {
+ module.set.date(date);
+ },
+
+ clear: function () {
+ module.set.date(undefined);
+ },
+
+ popup: function () {
+ return $activator.popup.apply($activator, arguments);
+ },
+
+ focus: function () {
+ if ($input.length) {
+ $input.focus();
+ } else {
+ $container.focus();
+ }
+ },
+ blur: function () {
+ if ($input.length) {
+ $input.blur();
+ } else {
+ $container.blur();
+ }
+ },
+
+ helper: {
+ isDisabled: function(date, mode) {
+ return (mode === 'day' || mode === 'month' || mode === 'year') && ((settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date) {
+ return module.helper.dateEqual(date, d, mode);
+ }
+ if (d !== null && typeof d === 'object') {
+ if (d[metadata.year]) {
+ if (typeof d[metadata.year] === 'number') {
+ return date.getFullYear() == d[metadata.year];
+ } else if (Array.isArray(d[metadata.year])) {
+ return d[metadata.year].indexOf(date.getFullYear()) > -1;
+ }
+ } else if (d[metadata.month]) {
+ if (typeof d[metadata.month] === 'number') {
+ return date.getMonth() == d[metadata.month];
+ } else if (Array.isArray(d[metadata.month])) {
+ return d[metadata.month].indexOf(date.getMonth()) > -1;
+ } else if (d[metadata.month] instanceof Date) {
+ var sdate = module.helper.sanitiseDate(d[metadata.month]);
+ return (date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())
+ }
+ } else if (d[metadata.date] && mode === 'day') {
+ if (d[metadata.date] instanceof Date) {
+ return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
+ } else if (Array.isArray(d[metadata.date])) {
+ return d[metadata.date].some(function(idate) {
+ return module.helper.dateEqual(date, idate, mode);
+ });
+ }
+ }
+ }
+ }));
+ },
+ isEnabled: function(date, mode) {
+ if (mode === 'day') {
+ return settings.enabledDates.length === 0 || settings.enabledDates.some(function(d){
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date) {
+ return module.helper.dateEqual(date, d, mode);
+ }
+ if (d !== null && typeof d === 'object' && d[metadata.date]) {
+ return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
+ }
+ });
+ } else {
+ return true;
+ }
+ },
+ findDayAsObject: function(date, mode, dates) {
+ if (mode === 'day' || mode === 'month' || mode === 'year') {
+ var d;
+ for (var i = 0; i < dates.length; i++) {
+ d = dates[i];
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date && module.helper.dateEqual(date, d, mode)) {
+ var dateObject = {};
+ dateObject[metadata.date] = d;
+ return dateObject;
+ }
+ else if (d !== null && typeof d === 'object') {
+ if (d[metadata.year]) {
+ if (typeof d[metadata.year] === 'number' && date.getFullYear() == d[metadata.year]) {
+ return d;
+ } else if (Array.isArray(d[metadata.year])) {
+ if (d[metadata.year].indexOf(date.getFullYear()) > -1) {
+ return d;
+ }
+ }
+ } else if (d[metadata.month]) {
+ if (typeof d[metadata.month] === 'number' && date.getMonth() == d[metadata.month]) {
+ return d;
+ } else if (Array.isArray(d[metadata.month])) {
+ if (d[metadata.month].indexOf(date.getMonth()) > -1) {
+ return d;
+ }
+ } else if (d[metadata.month] instanceof Date) {
+ var sdate = module.helper.sanitiseDate(d[metadata.month]);
+ if ((date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())) {
+ return d;
+ }
+ }
+ } else if (d[metadata.date] && mode === 'day') {
+ if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode)) {
+ return d;
+ } else if (Array.isArray(d[metadata.date])) {
+ if(d[metadata.date].some(function(idate) { return module.helper.dateEqual(date, idate, mode); })) {
+ return d;
+ }
+ }
+ }
+ }
+ }
+ }
+ return null;
+ },
+ sanitiseDate: function (date) {
+ if (!date) {
+ return undefined;
+ }
+ if (!(date instanceof Date)) {
+ date = parser.date('' + date, settings);
+ }
+ if (!date || date === null || isNaN(date.getTime())) {
+ return undefined;
+ }
+ return date;
+ },
+ dateDiff: function (date1, date2, mode) {
+ mode = mode || 'day';
+ var isTimeOnly = settings.type === 'time';
+ var isYear = mode === 'year';
+ var isYearOrMonth = isYear || mode === 'month';
+ var isMinute = mode === 'minute';
+ var isHourOrMinute = isMinute || mode === 'hour';
+ //only care about a minute accuracy of settings.minTimeGap
+ date1 = new Date(
+ isTimeOnly ? 2000 : date1.getFullYear(),
+ isTimeOnly ? 0 : isYear ? 0 : date1.getMonth(),
+ isTimeOnly ? 1 : isYearOrMonth ? 1 : date1.getDate(),
+ !isHourOrMinute ? 0 : date1.getHours(),
+ !isMinute ? 0 : settings.minTimeGap * Math.floor(date1.getMinutes() / settings.minTimeGap));
+ date2 = new Date(
+ isTimeOnly ? 2000 : date2.getFullYear(),
+ isTimeOnly ? 0 : isYear ? 0 : date2.getMonth(),
+ isTimeOnly ? 1 : isYearOrMonth ? 1 : date2.getDate(),
+ !isHourOrMinute ? 0 : date2.getHours(),
+ !isMinute ? 0 : settings.minTimeGap * Math.floor(date2.getMinutes() / settings.minTimeGap));
+ return date2.getTime() - date1.getTime();
+ },
+ dateEqual: function (date1, date2, mode) {
+ return !!date1 && !!date2 && module.helper.dateDiff(date1, date2, mode) === 0;
+ },
+ isDateInRange: function (date, mode, minDate, maxDate) {
+ if (!minDate && !maxDate) {
+ var startDate = module.get.startDate();
+ minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
+ maxDate = settings.maxDate;
+ }
+ minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
+ return !(!date ||
+ (minDate && module.helper.dateDiff(date, minDate, mode) > 0) ||
+ (maxDate && module.helper.dateDiff(maxDate, date, mode) > 0));
+ },
+ dateInRange: function (date, minDate, maxDate) {
+ if (!minDate && !maxDate) {
+ var startDate = module.get.startDate();
+ minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
+ maxDate = settings.maxDate;
+ }
+ minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
+ var isTimeOnly = settings.type === 'time';
+ return !date ? date :
+ (minDate && module.helper.dateDiff(date, minDate, 'minute') > 0) ?
+ (isTimeOnly ? module.helper.mergeDateTime(date, minDate) : minDate) :
+ (maxDate && module.helper.dateDiff(maxDate, date, 'minute') > 0) ?
+ (isTimeOnly ? module.helper.mergeDateTime(date, maxDate) : maxDate) :
+ date;
+ },
+ mergeDateTime: function (date, time) {
+ return (!date || !time) ? time :
+ new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes());
+ },
+ isTodayButton: function(element) {
+ return element.text() === settings.text.today;
+ }
+ },
+
+ setting: function (name, value) {
+ module.debug('Changing setting', name, value);
+ if ($.isPlainObject(name)) {
+ $.extend(true, settings, name);
+ }
+ else if (value !== undefined) {
+ if ($.isPlainObject(settings[name])) {
+ $.extend(true, settings[name], value);
+ }
+ else {
+ settings[name] = value;
+ }
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function (name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function () {
+ if (!settings.silent && settings.debug) {
+ if (settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function () {
+ if (!settings.silent && settings.verbose && settings.debug) {
+ if (settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function () {
+ if (!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function (message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if (settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name': message[0],
+ 'Arguments': [].slice.call(message, 1) || '',
+ 'Element': element,
+ 'Execution Time': executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function () {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function (index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if (moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if (console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function (index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time'] + 'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function (query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if (typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function (depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if ($.isPlainObject(object[camelCaseValue]) && (depth != maxDepth)) {
+ object = object[camelCaseValue];
+ }
+ else if (object[camelCaseValue] !== undefined) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if ($.isPlainObject(object[value]) && (depth != maxDepth)) {
+ object = object[value];
+ }
+ else if (object[value] !== undefined) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ($.isFunction(found)) {
+ response = found.apply(context, passedArguments);
+ }
+ else if (found !== undefined) {
+ response = found;
+ }
+ if (Array.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if (returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if (response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if (methodInvoked) {
+ if (instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if (instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.calendar.settings = {
+
+ name : 'Calendar',
+ namespace : 'calendar',
+
+ silent: false,
+ debug: false,
+ verbose: false,
+ performance: false,
+
+ type : 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
+ firstDayOfWeek : 0, // day for first day column (0 = Sunday)
+ constantHeight : true, // add rows to shorter months to keep day calendar height consistent (6 rows)
+ today : false, // show a 'today/now' button at the bottom of the calendar
+ closable : true, // close the popup after selecting a date/time
+ monthFirst : true, // month before day when parsing/converting date from/to text
+ touchReadonly : true, // set input to readonly on touch devices
+ inline : false, // create the calendar inline instead of inside a popup
+ on : null, // when to show the popup (defaults to 'focus' for input, 'click' for others)
+ initialDate : null, // date to display initially when no date is selected (null = now)
+ startMode : false, // display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day')
+ minDate : null, // minimum date/time that can be selected, dates/times before are disabled
+ maxDate : null, // maximum date/time that can be selected, dates/times after are disabled
+ ampm : true, // show am/pm in time mode
+ disableYear : false, // disable year selection mode
+ disableMonth : false, // disable month selection mode
+ disableMinute : false, // disable minute selection mode
+ formatInput : true, // format the input text upon input blur and module creation
+ startCalendar : null, // jquery object or selector for another calendar that represents the start date of a date range
+ endCalendar : null, // jquery object or selector for another calendar that represents the end date of a date range
+ multiMonth : 1, // show multiple months when in 'day' mode
+ minTimeGap : 5,
+ showWeekNumbers : null, // show Number of Week at the very first column of a dayView
+ disabledDates : [], // specific day(s) which won't be selectable and contain additional information.
+ disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday)
+ enabledDates : [], // specific day(s) which will be selectable, all other days will be disabled
+ eventDates : [], // specific day(s) which will be shown in a different color and using tooltips
+ centuryBreak : 60, // starting short year until 99 where it will be assumed to belong to the last century
+ currentCentury : 2000, // century to be added to 2-digit years (00 to {centuryBreak}-1)
+ selectAdjacentDays : false, // The calendar can show dates from adjacent month. These adjacent month dates can also be made selectable.
+ // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden)
+ popupOptions: {
+ position: 'bottom left',
+ lastResort: 'bottom left',
+ prefer: 'opposite',
+ hideOnScroll: false
+ },
+
+ text: {
+ days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+ months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+ monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ today: 'Today',
+ now: 'Now',
+ am: 'AM',
+ pm: 'PM',
+ weekNo: 'Week'
+ },
+
+ formatter: {
+ header: function (date, mode, settings) {
+ return mode === 'year' ? settings.formatter.yearHeader(date, settings) :
+ mode === 'month' ? settings.formatter.monthHeader(date, settings) :
+ mode === 'day' ? settings.formatter.dayHeader(date, settings) :
+ mode === 'hour' ? settings.formatter.hourHeader(date, settings) :
+ settings.formatter.minuteHeader(date, settings);
+ },
+ yearHeader: function (date, settings) {
+ var decadeYear = Math.ceil(date.getFullYear() / 10) * 10;
+ return (decadeYear - 9) + ' - ' + (decadeYear + 2);
+ },
+ monthHeader: function (date, settings) {
+ return date.getFullYear();
+ },
+ dayHeader: function (date, settings) {
+ var month = settings.text.months[date.getMonth()];
+ var year = date.getFullYear();
+ return month + ' ' + year;
+ },
+ hourHeader: function (date, settings) {
+ return settings.formatter.date(date, settings);
+ },
+ minuteHeader: function (date, settings) {
+ return settings.formatter.date(date, settings);
+ },
+ dayColumnHeader: function (day, settings) {
+ return settings.text.days[day];
+ },
+ datetime: function (date, settings) {
+ if (!date) {
+ return '';
+ }
+ var day = settings.type === 'time' ? '' : settings.formatter.date(date, settings);
+ var time = settings.type.indexOf('time') < 0 ? '' : settings.formatter.time(date, settings, false);
+ var separator = settings.type === 'datetime' ? ' ' : '';
+ return day + separator + time;
+ },
+ date: function (date, settings) {
+ if (!date) {
+ return '';
+ }
+ var day = date.getDate();
+ var month = settings.text.months[date.getMonth()];
+ var year = date.getFullYear();
+ return settings.type === 'year' ? year :
+ settings.type === 'month' ? month + ' ' + year :
+ (settings.monthFirst ? month + ' ' + day : day + ' ' + month) + ', ' + year;
+ },
+ time: function (date, settings, forCalendar) {
+ if (!date) {
+ return '';
+ }
+ var hour = date.getHours();
+ var minute = date.getMinutes();
+ var ampm = '';
+ if (settings.ampm) {
+ ampm = ' ' + (hour < 12 ? settings.text.am : settings.text.pm);
+ hour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+ }
+ return hour + ':' + (minute < 10 ? '0' : '') + minute + ampm;
+ },
+ today: function (settings) {
+ return settings.type === 'date' ? settings.text.today : settings.text.now;
+ },
+ cell: function (cell, date, cellOptions) {
+ }
+ },
+
+ parser: {
+ date: function (text, settings) {
+ if (text instanceof Date) {
+ return text;
+ }
+ if (!text) {
+ return null;
+ }
+ text = ('' + text).trim().toLowerCase();
+ if (text.length === 0) {
+ return null;
+ }
+ // Reverse date and month in some cases
+ text = settings.monthFirst ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1');
+ var textDate = new Date(text);
+ if(!isNaN(textDate.getDate())) {
+ return textDate;
+ }
+
+ var i, j, k;
+ var minute = -1, hour = -1, day = -1, month = -1, year = -1;
+ var isAm = undefined;
+
+ var isTimeOnly = settings.type === 'time';
+ var isDateOnly = settings.type.indexOf('time') < 0;
+
+ var words = text.split(settings.regExp.dateWords), word;
+ var numbers = text.split(settings.regExp.dateNumbers), number;
+
+ var parts;
+ var monthString;
+
+ if (!isDateOnly) {
+ //am/pm
+ isAm = $.inArray(settings.text.am.toLowerCase(), words) >= 0 ? true :
+ $.inArray(settings.text.pm.toLowerCase(), words) >= 0 ? false : undefined;
+
+ //time with ':'
+ for (i = 0; i < numbers.length; i++) {
+ number = numbers[i];
+ if (number.indexOf(':') >= 0) {
+ if (hour < 0 || minute < 0) {
+ parts = number.split(':');
+ for (k = 0; k < Math.min(2, parts.length); k++) {
+ j = parseInt(parts[k]);
+ if (isNaN(j)) {
+ j = 0;
+ }
+ if (k === 0) {
+ hour = j % 24;
+ } else {
+ minute = j % 60;
+ }
+ }
+ }
+ numbers.splice(i, 1);
+ }
+ }
+ }
+
+ if (!isTimeOnly) {
+ //textual month
+ for (i = 0; i < words.length; i++) {
+ word = words[i];
+ if (word.length <= 0) {
+ continue;
+ }
+ for (j = 0; j < settings.text.months.length; j++) {
+ monthString = settings.text.months[j];
+ monthString = monthString.substring(0, word.length).toLowerCase();
+ if (monthString === word) {
+ month = j + 1;
+ break;
+ }
+ }
+ if (month >= 0) {
+ break;
+ }
+ }
+
+ //year > settings.centuryBreak
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (j >= settings.centuryBreak && i === numbers.length-1) {
+ if (j <= 99) {
+ j += settings.currentCentury - 100;
+ }
+ year = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+
+ //numeric month
+ if (month < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ k = i > 1 || settings.monthFirst ? i : i === 1 ? 0 : 1;
+ j = parseInt(numbers[k]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (1 <= j && j <= 12) {
+ month = j;
+ numbers.splice(k, 1);
+ break;
+ }
+ }
+ }
+
+ //day
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (1 <= j && j <= 31) {
+ day = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+
+ //year <= settings.centuryBreak
+ if (year < 0) {
+ for (i = numbers.length - 1; i >= 0; i--) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (j <= 99) {
+ j += settings.currentCentury;
+ }
+ year = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+
+ if (!isDateOnly) {
+ //hour
+ if (hour < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (0 <= j && j <= 23) {
+ hour = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+
+ //minute
+ if (minute < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (0 <= j && j <= 59) {
+ minute = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+ }
+
+ if (minute < 0 && hour < 0 && day < 0 && month < 0 && year < 0) {
+ return null;
+ }
+
+ if (minute < 0) {
+ minute = 0;
+ }
+ if (hour < 0) {
+ hour = 0;
+ }
+ if (day < 0) {
+ day = 1;
+ }
+ if (month < 0) {
+ month = 1;
+ }
+ if (year < 0) {
+ year = new Date().getFullYear();
+ }
+
+ if (isAm !== undefined) {
+ if (isAm) {
+ if (hour === 12) {
+ hour = 0;
+ }
+ } else if (hour < 12) {
+ hour += 12;
+ }
+ }
+
+ var date = new Date(year, month - 1, day, hour, minute);
+ if (date.getMonth() !== month - 1 || date.getFullYear() !== year) {
+ //month or year don't match up, switch to last day of the month
+ date = new Date(year, month, 0, hour, minute);
+ }
+ return isNaN(date.getTime()) ? null : date;
+ }
+ },
+
+ // callback before date is changed, return false to cancel the change
+ onBeforeChange: function (date, text, mode) {
+ return true;
+ },
+
+ // callback when date changes
+ onChange: function (date, text, mode) {
+ },
+
+ // callback before show animation, return false to prevent show
+ onShow: function () {
+ },
+
+ // callback after show animation
+ onVisible: function () {
+ },
+
+ // callback before hide animation, return false to prevent hide
+ onHide: function () {
+ },
+
+ // callback after hide animation
+ onHidden: function () {
+ },
+
+ // callback before item is selected, return false to prevent selection
+ onSelect: function (date, mode) {
+ },
+
+ // is the given date disabled?
+ isDisabled: function (date, mode) {
+ return false;
+ },
+
+ selector: {
+ popup: '.ui.popup',
+ input: 'input',
+ activator: 'input',
+ append: '.inline.field,.inline.fields'
+ },
+
+ regExp: {
+ dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
+ dateNumbers: /[^\d:]+/g
+ },
+
+ error: {
+ popup: 'UI Popup, a required component is not included in this page',
+ method: 'The method you called is not defined.'
+ },
+
+ className: {
+ calendar: 'calendar',
+ active: 'active',
+ popup: 'ui popup',
+ grid: 'ui equal width grid',
+ column: 'column',
+ table: 'ui celled center aligned unstackable table',
+ prev: 'prev link',
+ next: 'next link',
+ prevIcon: 'chevron left icon',
+ nextIcon: 'chevron right icon',
+ link: 'link',
+ cell: 'link',
+ disabledCell: 'disabled',
+ weekCell: 'disabled',
+ adjacentCell: 'adjacent',
+ activeCell: 'active',
+ rangeCell: 'range',
+ focusCell: 'focus',
+ todayCell: 'today',
+ today: 'today link'
+ },
+
+ metadata: {
+ date: 'date',
+ focusDate: 'focusDate',
+ startDate: 'startDate',
+ endDate: 'endDate',
+ minDate: 'minDate',
+ maxDate: 'maxDate',
+ mode: 'mode',
+ type: 'type',
+ monthOffset: 'monthOffset',
+ message: 'message',
+ class: 'class',
+ month: 'month',
+ year: 'year'
+ },
+
+ eventClass: 'blue'
+};
+
+})(jQuery, window, document);
diff --git a/ui/src/definitions/modules/calendar.less b/ui/src/definitions/modules/calendar.less
new file mode 100644
index 00000000000..bfbf894553b
--- /dev/null
+++ b/ui/src/definitions/modules/calendar.less
@@ -0,0 +1,186 @@
+/*!
+ * # Fomantic-UI - Calendar
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'module';
+@element : 'calendar';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Popup
+*******************************/
+
+.ui.calendar .ui.popup {
+ max-width: none;
+ padding: 0;
+ border: none;
+ user-select: none;
+}
+
+/*******************************
+ Calendar
+*******************************/
+
+.ui.calendar .calendar:focus {
+ outline: 0;
+}
+
+/*******************************
+ Grid
+*******************************/
+
+.ui.calendar .ui.popup .ui.grid {
+ display: block;
+ white-space: nowrap;
+}
+
+.ui.calendar .ui.popup .ui.grid > .column {
+ width: auto;
+}
+
+/*******************************
+ Table
+*******************************/
+
+.ui.calendar .ui.table.year,
+.ui.calendar .ui.table.month,
+.ui.calendar .ui.table.minute {
+ min-width: 15em;
+}
+
+.ui.calendar .ui.table.day {
+ min-width: 18em;
+}
+
+.ui.calendar .ui.table.day.andweek {
+ min-width: 22em;
+}
+
+.ui.calendar .ui.table.hour {
+ min-width: 20em;
+}
+
+.ui.calendar .ui.table tr th,
+.ui.calendar .ui.table tr td {
+ padding: 0.5em;
+ white-space: nowrap;
+}
+
+.ui.calendar .ui.table tr th {
+ border-left: none;
+}
+
+.ui.calendar .ui.table tr th .icon {
+ margin: 0;
+}
+
+.ui.calendar .ui.table tr:first-child th {
+ position: relative;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.ui.calendar .ui.table.day tr:first-child th {
+ border: none;
+}
+
+.ui.calendar .ui.table.day tr:nth-child(2) th {
+ padding-top: 0.2em;
+ padding-bottom: 0.3em;
+}
+
+.ui.calendar .ui.table tr td {
+ padding-left: 0.1em;
+ padding-right: 0.1em;
+}
+
+.ui.calendar .ui.table tr .link {
+ cursor: pointer;
+}
+
+.ui.calendar .ui.table tr .prev.link {
+ width: 14.28571429%;
+ position: absolute;
+ left: 0;
+}
+
+.ui.calendar .ui.table tr .next.link {
+ width: 14.28571429%;
+ position: absolute;
+ right: 0;
+}
+
+.ui.calendar .ui.table tr .disabled {
+ pointer-events: auto;
+ cursor: default;
+ color: @disabledTextColor;
+}
+
+.ui.calendar .ui.table tr .adjacent:not(.disabled) {
+ color: @adjacentTextColor;
+ background: @adjacentBackground;
+}
+
+/*--------------
+ States
+---------------*/
+
+.ui.calendar .ui.table tr td.today {
+ font-weight: @todayFontWeight;
+}
+
+.ui.calendar .ui.table tr td.range {
+ background: @rangeBackground;
+ color: @rangeTextColor;
+ box-shadow: @rangeBoxShadow;
+}
+
+.ui.calendar .ui.table.inverted tr td.range {
+ background: @rangeInvertedBackground;
+ color: @rangeInvertedTextColor;
+ box-shadow: @rangeInvertedBoxShadow;
+}
+
+.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
+.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
+ box-shadow: @focusBoxShadow;
+}
+
+.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
+ box-shadow: @focusInvertedBoxShadow;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+& when (@variationCalendarDisabled) {
+ /*--------------------
+ Disabled
+ ---------------------*/
+
+ .ui.disabled.calendar {
+ opacity: @disabledOpacity;
+ }
+
+ .ui.disabled.calendar > .input,
+ .ui.disabled.calendar .ui.table tr .link {
+ pointer-events: none;
+ }
+}
+
+
+.loadUIOverrides();
diff --git a/ui/src/definitions/modules/checkbox.js b/ui/src/definitions/modules/checkbox.js
index f88c4d09b88..9222bfbf6e2 100644
--- a/ui/src/definitions/modules/checkbox.js
+++ b/ui/src/definitions/modules/checkbox.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Checkbox
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Checkbox
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -170,7 +174,19 @@ $.fn.checkbox = function(parameters) {
}
},
+ preventDefaultOnInputTarget: function() {
+ if(typeof event !== 'undefined' && event !== null && $(event.target).is(selector.input)) {
+ module.verbose('Preventing default check action after manual check action');
+ event.preventDefault();
+ }
+ },
+
event: {
+ change: function(event) {
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onChange.call(input);
+ }
+ },
click: function(event) {
var
$target = $(event.target)
@@ -193,15 +209,42 @@ $.fn.checkbox = function(parameters) {
keyCode = {
enter : 13,
space : 32,
- escape : 27
+ escape : 27,
+ left : 37,
+ up : 38,
+ right : 39,
+ down : 40
}
;
+
+ var r = module.get.radios(),
+ rIndex = r.index($module),
+ rLen = r.length,
+ checkIndex = false;
+
+ if(key == keyCode.left || key == keyCode.up) {
+ checkIndex = (rIndex === 0 ? rLen : rIndex) - 1;
+ } else if(key == keyCode.right || key == keyCode.down) {
+ checkIndex = rIndex === rLen-1 ? 0 : rIndex+1;
+ }
+
+ if (!module.should.ignoreCallbacks() && checkIndex !== false) {
+ if(settings.beforeUnchecked.apply(input)===false) {
+ module.verbose('Option not allowed to be unchecked, cancelling key navigation');
+ return false;
+ }
+ if (settings.beforeChecked.apply($(r[checkIndex]).children(selector.input)[0])===false) {
+ module.verbose('Next option should not allow check, cancelling key navigation');
+ return false;
+ }
+ }
+
if(key == keyCode.escape) {
module.verbose('Escape key pressed blurring field');
$input.blur();
shortcutPressed = true;
}
- else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
+ else if(!event.ctrlKey && ( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey)) ) {
module.verbose('Enter/space key pressed, toggling checkbox');
module.toggle();
shortcutPressed = true;
@@ -225,8 +268,9 @@ $.fn.checkbox = function(parameters) {
module.set.checked();
if( !module.should.ignoreCallbacks() ) {
settings.onChecked.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
+ module.preventDefaultOnInputTarget();
},
uncheck: function() {
@@ -237,8 +281,9 @@ $.fn.checkbox = function(parameters) {
module.set.unchecked();
if( !module.should.ignoreCallbacks() ) {
settings.onUnchecked.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
+ module.preventDefaultOnInputTarget();
},
indeterminate: function() {
@@ -250,7 +295,7 @@ $.fn.checkbox = function(parameters) {
module.set.indeterminate();
if( !module.should.ignoreCallbacks() ) {
settings.onIndeterminate.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
},
@@ -263,7 +308,7 @@ $.fn.checkbox = function(parameters) {
module.set.determinate();
if( !module.should.ignoreCallbacks() ) {
settings.onDeterminate.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
},
@@ -274,9 +319,12 @@ $.fn.checkbox = function(parameters) {
}
module.debug('Enabling checkbox');
module.set.enabled();
- settings.onEnable.call(input);
- // preserve legacy callbacks
- settings.onEnabled.call(input);
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onEnable.call(input);
+ // preserve legacy callbacks
+ settings.onEnabled.call(input);
+ module.trigger.change();
+ }
},
disable: function() {
@@ -286,9 +334,12 @@ $.fn.checkbox = function(parameters) {
}
module.debug('Disabling checkbox');
module.set.disabled();
- settings.onDisable.call(input);
- // preserve legacy callbacks
- settings.onDisabled.call(input);
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onDisable.call(input);
+ // preserve legacy callbacks
+ settings.onDisabled.call(input);
+ module.trigger.change();
+ }
},
get: {
@@ -335,52 +386,49 @@ $.fn.checkbox = function(parameters) {
should: {
allowCheck: function() {
- if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && module.is.checked() && !module.is.initialLoad() ) {
module.debug('Should not allow check, checkbox is already checked');
return false;
}
- if(settings.beforeChecked.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeChecked.apply(input) === false) {
module.debug('Should not allow check, beforeChecked cancelled');
return false;
}
return true;
},
allowUncheck: function() {
- if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && module.is.unchecked() && !module.is.initialLoad() ) {
module.debug('Should not allow uncheck, checkbox is already unchecked');
return false;
}
- if(settings.beforeUnchecked.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeUnchecked.apply(input) === false) {
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
return false;
}
return true;
},
allowIndeterminate: function() {
- if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
+ if(module.is.indeterminate() && !module.is.initialLoad() ) {
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
return false;
}
- if(settings.beforeIndeterminate.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeIndeterminate.apply(input) === false) {
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
return false;
}
return true;
},
allowDeterminate: function() {
- if(module.is.determinate() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && !module.is.initialLoad() ) {
module.debug('Should not allow determinate, checkbox is already determinate');
return false;
}
- if(settings.beforeDeterminate.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeDeterminate.apply(input) === false) {
module.debug('Should not allow determinate, beforeDeterminate cancelled');
return false;
}
return true;
},
- forceCallbacks: function() {
- return (module.is.initialLoad() && settings.fireOnInit);
- },
ignoreCallbacks: function() {
return (initialLoad && !settings.fireOnInit);
}
@@ -420,7 +468,6 @@ $.fn.checkbox = function(parameters) {
.prop('indeterminate', false)
.prop('checked', true)
;
- module.trigger.change();
},
unchecked: function() {
module.verbose('Removing checked class');
@@ -437,7 +484,6 @@ $.fn.checkbox = function(parameters) {
.prop('indeterminate', false)
.prop('checked', false)
;
- module.trigger.change();
},
indeterminate: function() {
module.verbose('Setting class to indeterminate');
@@ -452,7 +498,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('indeterminate', true)
;
- module.trigger.change();
},
determinate: function() {
module.verbose('Removing indeterminate class');
@@ -481,7 +526,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('disabled', 'disabled')
;
- module.trigger.change();
},
enabled: function() {
module.verbose('Removing disabled class');
@@ -494,7 +538,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('disabled', false)
;
- module.trigger.change();
},
tabbable: function() {
module.verbose('Adding tabindex to checkbox');
@@ -549,6 +592,7 @@ $.fn.checkbox = function(parameters) {
module.verbose('Attaching checkbox events');
$module
.on('click' + eventNamespace, module.event.click)
+ .on('change' + eventNamespace, module.event.change)
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
;
@@ -738,7 +782,7 @@ $.fn.checkbox = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -785,6 +829,7 @@ $.fn.checkbox.settings = {
// delegated event context
uncheckable : 'auto',
fireOnInit : false,
+ enableEnterKey : true,
onChange : function(){},
diff --git a/ui/src/definitions/modules/checkbox.less b/ui/src/definitions/modules/checkbox.less
index 98f7746b6ed..32974deeef8 100644
--- a/ui/src/definitions/modules/checkbox.less
+++ b/ui/src/definitions/modules/checkbox.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Checkbox
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Checkbox
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -35,7 +35,7 @@
font-style: normal;
min-height: @checkboxSize;
- font-size: @medium;
+ font-size: @relativeMedium;
line-height: @checkboxLineHeight;
min-width: @checkboxSize;
}
@@ -45,8 +45,8 @@
.ui.checkbox input[type="radio"] {
cursor: pointer;
position: absolute;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
opacity: 0 !important;
outline: none;
z-index: 3;
@@ -55,12 +55,126 @@
}
-/*--------------
- Box
----------------*/
-
+& when (@variationCheckboxBox) {
+ /*--------------
+ Box
+ ---------------*/
+
+ /* .box selector is deprecated and will be removed in v3 */
+ .ui.checkbox .box {
+ &:extend(.ui.checkbox label all);
+ }
+ .ui.checkbox + .box {
+ &:extend(.ui.checkbox + label all);
+ }
+ .ui.checkbox input:focus ~ .box {
+ &:extend(.ui.checkbox input:focus ~ label all);
+ }
+ .ui.checkbox input:checked ~ .box {
+ &:extend(.ui.checkbox input:checked ~ label all);
+ }
+ & when (@variationCheckboxIndeterminate) {
+ .ui.checkbox input:not([type=radio]):indeterminate ~ .box {
+ &:extend(.ui.checkbox input:not([type=radio]):indeterminate ~ label all);
+ }
+ .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box {
+ &:extend(.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label all);
+ }
+ }
+ .ui.checkbox input:checked:focus ~ .box {
+ &:extend(.ui.checkbox input:checked:focus ~ label all);
+ }
+ & when (@variationCheckboxDisabled) {
+ .ui.disabled.checkbox .box {
+ &:extend(.ui.disabled.checkbox label all);
+ }
+
+ .ui.checkbox input[disabled] ~ .box {
+ &:extend(.ui.checkbox input[disabled] ~ label all);
+ }
+ }
+ & when (@variationCheckboxRadio) {
+ .ui.radio.checkbox .box {
+ &:extend(.ui.radio.checkbox label all);
+ }
+ .ui.radio.checkbox input:focus ~ .box {
+ &:extend(.ui.radio.checkbox input:focus ~ label all);
+ }
+ .ui.radio.checkbox input:indeterminate ~ .box {
+ &:extend(.ui.radio.checkbox input:indeterminate ~ label all);
+ }
+ .ui.radio.checkbox input:checked ~ .box {
+ &:extend(.ui.radio.checkbox input:checked ~ label all);
+ }
+ .ui.radio.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.radio.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxSlider) {
+ .ui.slider.checkbox .box {
+ &:extend(.ui.slider.checkbox label all);
+ }
+ .ui.slider.checkbox input:focus ~ .box {
+ &:extend(.ui.slider.checkbox input:focus ~ label all);
+ }
+ .ui.slider.checkbox input:checked ~ .box {
+ &:extend(.ui.slider.checkbox input:checked ~ label all);
+ }
+ .ui.slider.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.slider.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ .ui.toggle.checkbox .box {
+ &:extend(.ui.toggle.checkbox label all);
+ }
+ .ui.toggle.checkbox input ~ .box {
+ &:extend(.ui.toggle.checkbox input ~ label all);
+ }
+ .ui.toggle.checkbox input:focus ~ .box {
+ &:extend(.ui.toggle.checkbox input:focus ~ label all);
+ }
+ .ui.toggle.checkbox input:checked ~ .box {
+ &:extend(.ui.toggle.checkbox input:checked ~ label all);
+ }
+ .ui.toggle.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.toggle.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxFitted) {
+ .ui.fitted.checkbox .box {
+ &:extend(.ui.fitted.checkbox label all);
+ }
+ }
+ & when (@variationCheckboxInverted) {
+ .ui.inverted.checkbox .box {
+ &:extend(.ui.inverted.checkbox label all);
+ }
+ & when (@variationCheckboxSlider) {
+ .ui.inverted.slider.checkbox .box {
+ &:extend(.ui.inverted.slider.checkbox label all);
+ }
+ .ui.inverted.slider.checkbox input:checked ~ .box {
+ &:extend(.ui.inverted.slider.checkbox input:checked ~ label all);
+ }
+ .ui.inverted.slider.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.inverted.slider.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ .ui.inverted.toggle.checkbox .box {
+ &:extend(.ui.inverted.toggle.checkbox label all);
+ }
+ .ui.inverted.toggle.checkbox input:checked ~ .box {
+ &:extend(.ui.inverted.toggle.checkbox input:checked ~ label all);
+ }
+ .ui.inverted.toggle.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.inverted.toggle.checkbox input:focus:checked ~ label all);
+ }
+ }
+ }
+}
-.ui.checkbox .box,
.ui.checkbox label {
cursor: auto;
position: relative;
@@ -70,11 +184,10 @@
font-size: @labelFontSize;
}
-.ui.checkbox .box:before,
.ui.checkbox label:before {
position: absolute;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
width: @checkboxSize;
height: @checkboxSize;
@@ -91,7 +204,6 @@
Checkmark
---------------*/
-.ui.checkbox .box:after,
.ui.checkbox label:after {
position: absolute;
font-size: @checkboxCheckFontSize;
@@ -132,7 +244,6 @@
Hover
---------------*/
-.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
background: @checkboxHoverBackground;
border-color: @checkboxHoverBorderColor;
@@ -146,12 +257,10 @@
Down
---------------*/
-.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
background: @checkboxPressedBackground;
border-color: @checkboxPressedBorderColor;
}
-.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
color: @checkboxPressedColor;
}
@@ -163,12 +272,10 @@
Focus
---------------*/
-.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
background: @checkboxFocusBackground;
border-color: @checkboxFocusBorderColor;
}
-.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
color: @checkboxFocusCheckColor;
}
@@ -180,46 +287,48 @@
Active
---------------*/
-.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
background: @checkboxActiveBackground;
border-color: @checkboxActiveBorderColor;
}
-.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
opacity: @checkboxActiveCheckOpacity;
color: @checkboxActiveCheckColor;
}
-/*--------------
- Indeterminate
----------------*/
-
-.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before,
-.ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
- background: @checkboxIndeterminateBackground;
- border-color: @checkboxIndeterminateBorderColor;
-}
-.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after,
-.ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
- opacity: @checkboxIndeterminateCheckOpacity;
- color: @checkboxIndeterminateCheckColor;
+& when (@variationCheckboxIndeterminate){
+ /*--------------
+ Indeterminate
+ ---------------*/
+
+ .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
+ background: @checkboxIndeterminateBackground;
+ border-color: @checkboxIndeterminateBorderColor;
+ }
+ .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
+ opacity: @checkboxIndeterminateCheckOpacity;
+ color: @checkboxIndeterminateCheckColor;
+ }
+ .ui.indeterminate.toggle.checkbox {
+ & input:not([type=radio]):indeterminate ~ label:before {
+ background: @toggleCenterLaneBackground;
+ }
+ & input:not([type=radio]) ~ label:after {
+ left: @toggleCenterOffset;
+ }
+ }
}
/*--------------
Active Focus
---------------*/
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before,
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
-.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before {
background: @checkboxActiveFocusBackground;
border-color: @checkboxActiveFocusBorderColor;
}
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after,
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
-.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
color: @checkboxActiveFocusCheckColor;
}
@@ -234,18 +343,18 @@
cursor: default;
}
+& when (@variationCheckboxDisabled) {
+ /*--------------
+ Disabled
+ ---------------*/
-/*--------------
- Disabled
----------------*/
-
-.ui.disabled.checkbox .box:after,
-.ui.disabled.checkbox label,
-.ui.checkbox input[disabled] ~ .box:after,
-.ui.checkbox input[disabled] ~ label {
- cursor: default !important;
- opacity: @disabledCheckboxOpacity;
- color: @disabledCheckboxLabelColor;
+ .ui.disabled.checkbox label,
+ .ui.checkbox input[disabled] ~ label {
+ cursor: default !important;
+ opacity: @disabledCheckboxOpacity;
+ color: @disabledCheckboxLabelColor;
+ pointer-events: none;
+ }
}
/*--------------
@@ -269,330 +378,437 @@
Types
*******************************/
-
-/*--------------
- Radio
----------------*/
-
-.ui.radio.checkbox {
- min-height: @radioSize;
-}
-
-.ui.radio.checkbox .box,
-.ui.radio.checkbox label {
- padding-left: @radioLabelDistance;
-}
-
-/* Box */
-.ui.radio.checkbox .box:before,
-.ui.radio.checkbox label:before {
- content: '';
- transform: none;
-
- width: @radioSize;
- height: @radioSize;
- border-radius: @circularRadius;
- top: @radioTop;
- left: @radioLeft;
-}
-
-/* Bullet */
-.ui.radio.checkbox .box:after,
-.ui.radio.checkbox label:after {
- border: none;
- content: '' !important;
- width: @radioSize;
- height: @radioSize;
- line-height: @radioSize;
-}
-
-/* Radio Checkbox */
-.ui.radio.checkbox .box:after,
-.ui.radio.checkbox label:after {
- top: @bulletTop;
- left: @bulletLeft;
- width: @radioSize;
- height: @radioSize;
- border-radius: @bulletRadius;
- transform: scale(@bulletScale);
- background-color: @bulletColor;
-}
-
-/* Focus */
-.ui.radio.checkbox input:focus ~ .box:before,
-.ui.radio.checkbox input:focus ~ label:before {
- background-color: @radioFocusBackground;
-}
-.ui.radio.checkbox input:focus ~ .box:after,
-.ui.radio.checkbox input:focus ~ label:after {
- background-color: @radioFocusBulletColor;
-}
-
-/* Indeterminate */
-.ui.radio.checkbox input:indeterminate ~ .box:after,
-.ui.radio.checkbox input:indeterminate ~ label:after {
- opacity: 0;
-}
-
-/* Active */
-.ui.radio.checkbox input:checked ~ .box:before,
-.ui.radio.checkbox input:checked ~ label:before {
- background-color: @radioActiveBackground;
-}
-.ui.radio.checkbox input:checked ~ .box:after,
-.ui.radio.checkbox input:checked ~ label:after {
- background-color: @radioActiveBulletColor;
-}
-
-/* Active Focus */
-.ui.radio.checkbox input:focus:checked ~ .box:before,
-.ui.radio.checkbox input:focus:checked ~ label:before {
- background-color: @radioActiveFocusBackground;
-}
-.ui.radio.checkbox input:focus:checked ~ .box:after,
-.ui.radio.checkbox input:focus:checked ~ label:after {
- background-color: @radioActiveFocusBulletColor;
-}
-
-/*--------------
- Slider
----------------*/
-
-.ui.slider.checkbox {
- min-height: @sliderHeight;
-}
-
-/* Input */
-.ui.slider.checkbox input {
- width: @sliderWidth;
- height: @sliderHeight;
-}
-
-/* Label */
-.ui.slider.checkbox .box,
-.ui.slider.checkbox label {
- padding-left: @sliderLabelDistance;
- line-height: @sliderLabelLineHeight;
- color: @sliderOffLabelColor;
-}
-
-/* Line */
-.ui.slider.checkbox .box:before,
-.ui.slider.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- transform: none;
- border: none !important;
- left: 0em;
- z-index: 1;
-
- top: @sliderLineVerticalOffset;
-
- background-color: @sliderLineColor;
- width: @sliderLineWidth;
- height: @sliderLineHeight;
-
- transform: none;
- border-radius: @sliderLineRadius;
- transition: @sliderLineTransition;
-
-}
-
-/* Handle */
-.ui.slider.checkbox .box:after,
-.ui.slider.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @sliderHandleSize;
- height: @sliderHandleSize;
- top: @sliderHandleOffset;
- left: 0em;
- transform: none;
-
- border-radius: @circularRadius;
- transition: @sliderHandleTransition;
-}
-
-/* Focus */
-.ui.slider.checkbox input:focus ~ .box:before,
-.ui.slider.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
-}
-
-/* Hover */
-.ui.slider.checkbox .box:hover,
-.ui.slider.checkbox label:hover {
- color: @sliderHoverLabelColor;
-}
-.ui.slider.checkbox .box:hover::before,
-.ui.slider.checkbox label:hover::before {
- background: @sliderHoverLaneBackground;
-}
-
-/* Active */
-.ui.slider.checkbox input:checked ~ .box,
-.ui.slider.checkbox input:checked ~ label {
- color: @sliderOnLabelColor !important;
-}
-.ui.slider.checkbox input:checked ~ .box:before,
-.ui.slider.checkbox input:checked ~ label:before {
- background-color: @sliderOnLineColor !important;
-}
-.ui.slider.checkbox input:checked ~ .box:after,
-.ui.slider.checkbox input:checked ~ label:after {
- left: @sliderTravelDistance;
-}
-
-/* Active Focus */
-.ui.slider.checkbox input:focus:checked ~ .box,
-.ui.slider.checkbox input:focus:checked ~ label {
- color: @sliderOnFocusLabelColor !important;
-}
-.ui.slider.checkbox input:focus:checked ~ .box:before,
-.ui.slider.checkbox input:focus:checked ~ label:before {
- background-color: @sliderOnFocusLineColor !important;
-}
-
-
-/*--------------
- Toggle
----------------*/
-
-.ui.toggle.checkbox {
- min-height: @toggleHeight;
-}
-
-/* Input */
-.ui.toggle.checkbox input {
- width: @toggleWidth;
- height: @toggleHeight;
-}
-
-/* Label */
-.ui.toggle.checkbox .box,
-.ui.toggle.checkbox label {
- min-height: @toggleHandleSize;
- padding-left: @toggleLabelDistance;
- color: @toggleOffLabelColor;
-}
-.ui.toggle.checkbox label {
- padding-top: @toggleLabelOffset;
-}
-
-/* Switch */
-.ui.toggle.checkbox .box:before,
-.ui.toggle.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- z-index: 1;
- transform: none;
- border: none;
-
- top: @toggleLaneVerticalOffset;
-
- background: @toggleLaneBackground;
- box-shadow: @toggleLaneBoxShadow;
- width: @toggleLaneWidth;
- height: @toggleLaneHeight;
- border-radius: @toggleHandleRadius;
-}
-
-/* Handle */
-.ui.toggle.checkbox .box:after,
-.ui.toggle.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @toggleHandleSize;
- height: @toggleHandleSize;
- top: @toggleHandleOffset;
- left: 0em;
-
- border-radius: @circularRadius;
- transition: @toggleHandleTransition;
-}
-
-.ui.toggle.checkbox input ~ .box:after,
-.ui.toggle.checkbox input ~ label:after {
- left: @toggleOffOffset;
- box-shadow: @toggleOffHandleBoxShadow;
-}
-
-/* Focus */
-.ui.toggle.checkbox input:focus ~ .box:before,
-.ui.toggle.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
-}
-
-/* Hover */
-.ui.toggle.checkbox .box:hover::before,
-.ui.toggle.checkbox label:hover::before {
- background-color: @toggleHoverColor;
- border: none;
-}
-
-/* Active */
-.ui.toggle.checkbox input:checked ~ .box,
-.ui.toggle.checkbox input:checked ~ label {
- color: @toggleOnLabelColor !important;
-}
-.ui.toggle.checkbox input:checked ~ .box:before,
-.ui.toggle.checkbox input:checked ~ label:before {
- background-color: @toggleOnLaneColor !important;
-}
-.ui.toggle.checkbox input:checked ~ .box:after,
-.ui.toggle.checkbox input:checked ~ label:after {
- left: @toggleOnOffset;
- box-shadow: @toggleOnHandleBoxShadow;
-}
-
-
-/* Active Focus */
-.ui.toggle.checkbox input:focus:checked ~ .box,
-.ui.toggle.checkbox input:focus:checked ~ label {
- color: @toggleOnFocusLabelColor !important;
-}
-.ui.toggle.checkbox input:focus:checked ~ .box:before,
-.ui.toggle.checkbox input:focus:checked ~ label:before {
- background-color: @toggleOnFocusLaneColor !important;
+& when (@variationCheckboxRadio) {
+ /*--------------
+ Radio
+ ---------------*/
+
+ .ui.radio.checkbox {
+ min-height: @radioSize;
+ }
+
+ .ui.radio.checkbox label {
+ padding-left: @radioLabelDistance;
+ }
+
+ /* Box */
+ .ui.radio.checkbox label:before {
+ content: '';
+ transform: none;
+
+ width: @radioSize;
+ height: @radioSize;
+ border-radius: @circularRadius;
+ top: @radioTop;
+ left: @radioLeft;
+ }
+
+ /* Bullet */
+ .ui.radio.checkbox label:after {
+ border: none;
+ content: '' !important;
+ line-height: @radioSize;
+ top: @bulletTop;
+ left: @bulletLeft;
+ width: @radioSize;
+ height: @radioSize;
+ border-radius: @bulletRadius;
+ transform: scale(@bulletScale);
+ background-color: @bulletColor;
+ }
+
+ /* Focus */
+ .ui.radio.checkbox input:focus ~ label:before {
+ background-color: @radioFocusBackground;
+ }
+ .ui.radio.checkbox input:focus ~ label:after {
+ background-color: @radioFocusBulletColor;
+ }
+
+ /* Indeterminate */
+ .ui.radio.checkbox input:indeterminate ~ label:after {
+ opacity: 0;
+ }
+
+ /* Active */
+ .ui.radio.checkbox input:checked ~ label:before {
+ background-color: @radioActiveBackground;
+ }
+ .ui.radio.checkbox input:checked ~ label:after {
+ background-color: @radioActiveBulletColor;
+ }
+
+ /* Active Focus */
+ .ui.radio.checkbox input:focus:checked ~ label:before {
+ background-color: @radioActiveFocusBackground;
+ }
+ .ui.radio.checkbox input:focus:checked ~ label:after {
+ background-color: @radioActiveFocusBulletColor;
+ }
+}
+
+& when (@variationCheckboxSlider) {
+ /*--------------
+ Slider
+ ---------------*/
+
+ .ui.slider.checkbox {
+ min-height: @sliderHeight;
+ }
+
+ /* Input */
+ .ui.slider.checkbox input {
+ width: @sliderWidth;
+ height: @sliderHeight;
+ }
+
+ /* Label */
+ .ui.slider.checkbox label {
+ padding-left: @sliderLabelDistance;
+ line-height: @sliderLabelLineHeight;
+ color: @sliderOffLabelColor;
+ }
+
+ /* Line */
+ .ui.slider.checkbox label:before {
+ display: block;
+ position: absolute;
+ content: '';
+ transform: none;
+ border: none !important;
+ left: 0;
+ z-index: 1;
+
+ top: @sliderLineVerticalOffset;
+
+ background-color: @sliderLineColor;
+ width: @sliderLineWidth;
+ height: @sliderLineHeight;
+
+ border-radius: @sliderLineRadius;
+ transition: @sliderLineTransition;
+
+ }
+
+ /* Handle */
+ .ui.slider.checkbox label:after {
+ background: @handleBackground;
+ position: absolute;
+ content: '' !important;
+ opacity: 1;
+ z-index: 2;
+
+ border: none;
+ box-shadow: @handleBoxShadow;
+ width: @sliderHandleSize;
+ height: @sliderHandleSize;
+ top: @sliderHandleOffset;
+ left: 0;
+ transform: none;
+
+ border-radius: @circularRadius;
+ transition: @sliderHandleTransition;
+ }
+
+ /* Focus */
+ .ui.slider.checkbox input:focus ~ label:before {
+ background-color: @toggleFocusColor;
+ border: none;
+ }
+
+ /* Hover */
+ .ui.slider.checkbox label:hover {
+ color: @sliderHoverLabelColor;
+ }
+ .ui.slider.checkbox label:hover::before {
+ background: @sliderHoverLaneBackground;
+ }
+
+ /* Active */
+ .ui.slider.checkbox input:checked ~ label {
+ color: @sliderOnLabelColor !important;
+ }
+ .ui.slider.checkbox input:checked ~ label:before {
+ background-color: @sliderOnLineColor !important;
+ }
+ .ui.slider.checkbox input:checked ~ label:after {
+ left: @sliderTravelDistance;
+ }
+
+ /* Active Focus */
+ .ui.slider.checkbox input:focus:checked ~ label {
+ color: @sliderOnFocusLabelColor !important;
+ }
+ .ui.slider.checkbox input:focus:checked ~ label:before {
+ background-color: @sliderOnFocusLineColor !important;
+ }
+}
+
+& when (@variationCheckboxToggle) {
+ /*--------------
+ Toggle
+ ---------------*/
+
+ .ui.toggle.checkbox {
+ min-height: @toggleHeight;
+ }
+
+ /* Input */
+ .ui.toggle.checkbox input {
+ width: @toggleWidth;
+ height: @toggleHeight;
+ }
+
+ /* Label */
+ .ui.toggle.checkbox label {
+ min-height: @toggleHandleSize;
+ padding-left: @toggleLabelDistance;
+ color: @toggleOffLabelColor;
+ }
+ .ui.toggle.checkbox label {
+ padding-top: @toggleLabelOffset;
+ }
+
+ /* Switch */
+ .ui.toggle.checkbox label:before {
+ display: block;
+ position: absolute;
+ content: '';
+ z-index: 1;
+ transform: none;
+ border: none;
+
+ top: @toggleLaneVerticalOffset;
+
+ background: @toggleLaneBackground;
+ box-shadow: @toggleLaneBoxShadow;
+ width: @toggleLaneWidth;
+ height: @toggleLaneHeight;
+ border-radius: @toggleHandleRadius;
+ }
+
+ /* Handle */
+ .ui.toggle.checkbox label:after {
+ background: @handleBackground;
+ position: absolute;
+ content: '' !important;
+ opacity: 1;
+ z-index: 2;
+
+ border: none;
+ box-shadow: @handleBoxShadow;
+ width: @toggleHandleSize;
+ height: @toggleHandleSize;
+ top: @toggleHandleOffset;
+ left: 0;
+
+ border-radius: @circularRadius;
+ transition: @toggleHandleTransition;
+ }
+
+ .ui.toggle.checkbox input ~ label:after {
+ left: @toggleOffOffset;
+ box-shadow: @toggleOffHandleBoxShadow;
+ }
+
+ /* Focus */
+ .ui.toggle.checkbox input:focus ~ label:before {
+ background-color: @toggleFocusColor;
+ border: none;
+ }
+
+ /* Hover */
+ .ui.toggle.checkbox label:hover::before {
+ background-color: @toggleHoverColor;
+ border: none;
+ }
+
+ /* Active */
+ .ui.toggle.checkbox input:checked ~ label {
+ color: @toggleOnLabelColor !important;
+ }
+ .ui.toggle.checkbox input:checked ~ label:before {
+ background-color: @toggleOnLaneColor !important;
+ }
+ .ui.toggle.checkbox input:checked ~ label:after {
+ left: @toggleOnOffset;
+ box-shadow: @toggleOnHandleBoxShadow;
+ }
+
+
+ /* Active Focus */
+ .ui.toggle.checkbox input:focus:checked ~ label {
+ color: @toggleOnFocusLabelColor !important;
+ }
+ .ui.toggle.checkbox input:focus:checked ~ label:before {
+ background-color: @toggleOnFocusLaneColor !important;
+ }
}
/*******************************
Variations
*******************************/
-
-/*--------------
- Fitted
----------------*/
-
-.ui.fitted.checkbox .box,
-.ui.fitted.checkbox label {
- padding-left: 0em !important;
-}
-
-.ui.fitted.toggle.checkbox,
-.ui.fitted.toggle.checkbox {
- width: @toggleWidth;
-}
-
-.ui.fitted.slider.checkbox,
-.ui.fitted.slider.checkbox {
- width: @sliderWidth;
-}
+& when (@variationCheckboxFitted) {
+ /*--------------
+ Fitted
+ ---------------*/
+
+ .ui.fitted.checkbox label {
+ padding-left: 0 !important;
+ }
+
+ .ui.fitted.toggle.checkbox {
+ width: @toggleWidth;
+ }
+
+ .ui.fitted.slider.checkbox {
+ width: @sliderWidth;
+ }
+}
+
+& when (@variationCheckboxInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
+ .ui.inverted.checkbox label,
+ .ui.inverted.checkbox + label {
+ color: @invertedTextColor !important;
+ }
+
+ /* Hover */
+ .ui.inverted.checkbox label:hover {
+ color: @invertedHoveredTextColor !important;
+ }
+ .ui.inverted.checkbox label:hover::before {
+ border-color: @strongSelectedBorderColor;
+ }
+ & when (@variationCheckboxSlider) {
+ /*Slider Label */
+ .ui.inverted.slider.checkbox label {
+ color: @invertedUnselectedTextColor;
+ }
+
+ /* Slider Line */
+ .ui.inverted.slider.checkbox label:before {
+ background-color: @invertedUnselectedTextColor !important;
+ }
+
+ /* Slider Hover */
+ .ui.inverted.slider.checkbox label:hover::before {
+ background: @invertedLightTextColor !important;
+ }
+
+ /* Slider Active */
+ .ui.inverted.slider.checkbox input:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.slider.checkbox input:checked ~ label:before {
+ background-color: @selectedWhiteBorderColor !important;
+ }
+
+ /* Slider Active Focus */
+ .ui.inverted.slider.checkbox input:focus:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
+ background-color: @selectedWhiteBorderColor !important;
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ /* Toggle Switch */
+ .ui.inverted.toggle.checkbox label:before {
+ background-color: @invertedTextColor !important;
+ }
+
+ /* Toggle Hover */
+ .ui.inverted.toggle.checkbox label:hover::before {
+ background: @invertedHoveredTextColor !important;
+ }
+
+ /* Toggle Active */
+ .ui.inverted.toggle.checkbox input:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.toggle.checkbox input:checked ~ label:before {
+ background-color: @toggleOnLaneColor !important;
+ }
+
+ /* Toggle Active Focus */
+ .ui.inverted.toggle.checkbox input:focus:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
+ background-color: @toggleOnFocusLaneColor !important;
+ }
+ }
+}
+
+/*--------------------
+ Size
+---------------------*/
+
+each(@variationCheckboxSizes, {
+ @raw: @{value}Raw;
+ @size: @{value}CheckboxSize;
+ @circleScale: @{value}CheckboxCircleScale;
+ @circleLeft: @{value}CheckboxCircleLeft;
+
+ .ui.@{value}.checkbox {
+ font-size: @@size;
+ }
+
+ & when (@@raw > 1) {
+ .ui.@{value}.form .checkbox,
+ .ui.@{value}.checkbox {
+ &:not(.slider):not(.toggle):not(.radio) {
+ &
+ label:after,
+ label:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ }
+ &.radio when (@variationCheckboxRadio) {
+ &
+ label:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ &
+ label:after {
+ transform:scale(@@circleScale);
+ transform-origin:left;
+ left: @@circleLeft;
+ }
+ }
+ }
+ }
+ & when (@@raw > 1) and (@variationCheckboxBox) {
+ .ui.@{value}.form .checkbox,
+ .ui.@{value}.checkbox {
+ &:not(.slider):not(.toggle):not(.radio) {
+ &
+ .box:after,
+ .box:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ }
+ &.radio when (@variationCheckboxRadio) {
+ &
+ .box:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ &
+ .box:after {
+ transform:scale(@@circleScale);
+ transform-origin:left;
+ left: @@circleLeft;
+ }
+ }
+ }
+ }
+})
.loadUIOverrides();
diff --git a/ui/src/definitions/modules/dimmer.js b/ui/src/definitions/modules/dimmer.js
index bdfc39abb2e..408105aad29 100644
--- a/ui/src/definitions/modules/dimmer.js
+++ b/ui/src/definitions/modules/dimmer.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Dimmer
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Dimmer
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -83,7 +87,6 @@ $.fn.dimmer = function(parameters) {
else {
$dimmer = module.create();
}
- module.set.variation();
}
},
@@ -114,10 +117,6 @@ $.fn.dimmer = function(parameters) {
bind: {
events: function() {
- if(module.is.page()) {
- // touch events default to passive, due to changes in chrome to optimize mobile perf
- $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
- }
if(settings.on == 'hover') {
$dimmable
.on('mouseenter' + eventNamespace, module.show)
@@ -145,9 +144,6 @@ $.fn.dimmer = function(parameters) {
unbind: {
events: function() {
- if(module.is.page()) {
- $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
- }
$module
.removeData(moduleNamespace)
;
@@ -164,9 +160,6 @@ $.fn.dimmer = function(parameters) {
module.hide();
event.stopImmediatePropagation();
}
- },
- preventScroll: function(event) {
- event.preventDefault();
}
},
@@ -182,7 +175,7 @@ $.fn.dimmer = function(parameters) {
create: function() {
var
- $element = $( settings.template.dimmer() )
+ $element = $( settings.template.dimmer(settings) )
;
if(settings.dimmerName) {
module.debug('Creating named dimmer', settings.dimmerName);
@@ -200,6 +193,7 @@ $.fn.dimmer = function(parameters) {
: function(){}
;
module.debug('Showing dimmer', $dimmer, settings);
+ module.set.variation();
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
module.animate.show(callback);
settings.onShow.call(element);
@@ -232,7 +226,9 @@ $.fn.dimmer = function(parameters) {
module.show();
}
else {
- module.hide();
+ if ( module.is.closable() ) {
+ module.hide();
+ }
}
},
@@ -243,12 +239,22 @@ $.fn.dimmer = function(parameters) {
: function(){}
;
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+ if(settings.useFlex) {
+ module.debug('Using flex dimmer');
+ module.remove.legacy();
+ }
+ else {
+ module.debug('Using legacy non-flex dimmer');
+ module.set.legacy();
+ }
if(settings.opacity !== 'auto') {
module.set.opacity();
}
$dimmer
.transition({
- displayType : 'flex',
+ displayType : settings.useFlex
+ ? 'flex'
+ : 'block',
animation : settings.transition + ' in',
queue : false,
duration : module.get.duration(),
@@ -293,15 +299,16 @@ $.fn.dimmer = function(parameters) {
module.verbose('Hiding dimmer with css');
$dimmer
.transition({
- displayType : 'flex',
+ displayType : settings.useFlex
+ ? 'flex'
+ : 'block',
animation : settings.transition + ' out',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
- onStart : function() {
- module.remove.dimmed();
- },
onComplete : function() {
+ module.remove.dimmed();
+ module.remove.variation();
module.remove.active();
callback();
}
@@ -310,10 +317,10 @@ $.fn.dimmer = function(parameters) {
}
else {
module.verbose('Hiding dimmer with javascript');
- module.remove.dimmed();
$dimmer
.stop()
.fadeOut(module.get.duration(), function() {
+ module.remove.dimmed();
module.remove.active();
$dimmer.removeAttr('style');
callback();
@@ -415,6 +422,9 @@ $.fn.dimmer = function(parameters) {
module.debug('Setting opacity to', opacity);
$dimmer.css('background-color', color);
},
+ legacy: function() {
+ $dimmer.addClass(className.legacy);
+ },
active: function() {
$dimmer.addClass(className.active);
},
@@ -444,6 +454,9 @@ $.fn.dimmer = function(parameters) {
.removeClass(className.active)
;
},
+ legacy: function() {
+ $dimmer.removeClass(className.legacy);
+ },
dimmed: function() {
$dimmable.removeClass(className.dimmed);
},
@@ -611,7 +624,7 @@ $.fn.dimmer = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -657,6 +670,9 @@ $.fn.dimmer.settings = {
verbose : false,
performance : true,
+ // whether should use flex layout
+ useFlex : true,
+
// name to distinguish between multiple dimmers in context
dimmerName : false,
@@ -683,6 +699,10 @@ $.fn.dimmer.settings = {
show : 500,
hide : 500
},
+// whether the dynamically created dimmer should have a loader
+ displayLoader: false,
+ loaderText : false,
+ loaderVariation : '',
onChange : function(){},
onShow : function(){},
@@ -700,8 +720,10 @@ $.fn.dimmer.settings = {
dimmer : 'dimmer',
disabled : 'disabled',
hide : 'hide',
+ legacy : 'legacy',
pageDimmer : 'page',
- show : 'show'
+ show : 'show',
+ loader : 'ui loader'
},
selector: {
@@ -710,8 +732,19 @@ $.fn.dimmer.settings = {
},
template: {
- dimmer: function() {
- return $('
').attr('class', 'ui dimmer');
+ dimmer: function(settings) {
+ var d = $('
').addClass('ui dimmer'),l;
+ if(settings.displayLoader) {
+ l = $('
')
+ .addClass(settings.className.loader)
+ .addClass(settings.loaderVariation);
+ if(!!settings.loaderText){
+ l.text(settings.loaderText);
+ l.addClass('text');
+ }
+ d.append(l);
+ }
+ return d;
}
}
diff --git a/ui/src/definitions/modules/dimmer.less b/ui/src/definitions/modules/dimmer.less
index 3e534bc282a..6f4a907db47 100644
--- a/ui/src/definitions/modules/dimmer.less
+++ b/ui/src/definitions/modules/dimmer.less
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Dimmer
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Dimmer
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -28,8 +28,8 @@
.ui.dimmer {
display: none;
position: @dimmerPosition;
- top: 0em !important;
- left: 0em !important;
+ top: 0 !important;
+ left: 0 !important;
width: 100%;
height: 100%;
@@ -63,8 +63,8 @@
/* Loose Coupling */
-.ui.segment > .ui.dimmer {
- border-radius: inherit !important;
+.ui.segment > .ui.dimmer:not(.page) {
+ border-radius: inherit;
}
/* Scrollbars */
@@ -102,10 +102,12 @@
opacity: @visibleOpacity;
}
-/* Disabled */
-.ui.disabled.dimmer {
- width: 0 !important;
- height: 0 !important;
+& when (@variationDimmerDisabled) {
+ /* Disabled */
+ .ui.disabled.dimmer {
+ width: 0 !important;
+ height: 0 !important;
+ }
}
@@ -113,26 +115,43 @@
Variations
*******************************/
-/*--------------
- Alignment
----------------*/
+& when (@variationDimmerLegacy) {
+ /*--------------
+ Legacy
+ ---------------*/
-.ui[class*="top aligned"].dimmer {
- justify-content: flex-start;
+ /* Animating / Active / Visible */
+ .dimmed.dimmable > .ui.animating.legacy.dimmer,
+ .dimmed.dimmable > .ui.visible.legacy.dimmer,
+ .ui.active.legacy.dimmer {
+ display: block;
+ }
}
-.ui[class*="bottom aligned"].dimmer {
- justify-content: flex-end;
+
+& when (@variationDimmerAligned) {
+ /*--------------
+ Alignment
+ ---------------*/
+
+ .ui[class*="top aligned"].dimmer {
+ justify-content: flex-start;
+ }
+ .ui[class*="bottom aligned"].dimmer {
+ justify-content: flex-end;
+ }
}
-/*--------------
- Page
----------------*/
+& when (@variationDimmerPage) {
+ /*--------------
+ Page
+ ---------------*/
-.ui.page.dimmer {
- position: @pageDimmerPosition;
- transform-style: @transformStyle;
- perspective: @perspective;
- transform-origin: center center;
+ .ui.page.dimmer {
+ position: @pageDimmerPosition;
+ transform-style: @transformStyle;
+ perspective: @perspective;
+ transform-origin: center center;
+ }
}
body.animating.in.dimmable,
@@ -144,76 +163,225 @@ body.dimmable > .dimmer {
position: fixed;
}
-/*--------------
- Blurring
----------------*/
+& when (@variationDimmerBlurring) {
+ /*--------------
+ Blurring
+ ---------------*/
-.blurring.dimmable > :not(.dimmer) {
- filter: @blurredStartFilter;
- transition: @blurredTransition;
-}
-.blurring.dimmed.dimmable > :not(.dimmer) {
- filter: @blurredEndFilter;
-}
+ .blurring.dimmable > :not(.dimmer) {
+ filter: @blurredStartFilter;
+ transition: @blurredTransition;
+ }
+ .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+ filter: @blurredEndFilter;
+ }
-/* Dimmer Color */
-.blurring.dimmable > .dimmer {
- background-color: @blurredBackgroundColor;
+ /* Dimmer Color */
+ .blurring.dimmable > .dimmer {
+ background-color: @blurredBackgroundColor;
+ }
+ .blurring.dimmable > .inverted.dimmer {
+ background-color: @blurredInvertedBackgroundColor;
+ }
}
-.blurring.dimmable > .inverted.dimmer {
- background-color: @blurredInvertedBackgroundColor;
+& when (@variationDimmerAligned) {
+ /*--------------
+ Aligned
+ ---------------*/
+
+ .ui.dimmer > .top.aligned.content > * {
+ vertical-align: top;
+ }
+ .ui.dimmer > .bottom.aligned.content > * {
+ vertical-align: bottom;
+ }
}
-/*--------------
- Aligned
----------------*/
+& when (@variationDimmerShades) {
+ /*--------------
+ Shades
+ ---------------*/
-.ui.dimmer > .top.aligned.content > * {
- vertical-align: top;
-}
-.ui.dimmer > .bottom.aligned.content > * {
- vertical-align: bottom;
+ .medium.medium.medium.medium.medium.dimmer {
+ background-color: @mediumBackgroundColor;
+ }
+ .light.light.light.light.light.dimmer {
+ background-color: @lightBackgroundColor;
+ }
+ .very.light.light.light.light.dimmer {
+ background-color: @veryLightBackgroundColor;
+ }
}
-/*--------------
- Inverted
----------------*/
+& when (@variationDimmerInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
-.ui.inverted.dimmer {
- background-color: @invertedBackgroundColor;
-}
-.ui.inverted.dimmer > .content > * {
- color: @invertedTextColor;
+ .ui.inverted.dimmer {
+ background-color: @invertedBackgroundColor;
+ }
+ .ui.inverted.dimmer > .content,
+ .ui.inverted.dimmer > .content > * {
+ color: @invertedTextColor;
+ }
+
+ & when (@variationDimmerShades) {
+ /*--------------
+ Inverted Shades
+ ---------------*/
+
+ .medium.medium.medium.medium.medium.inverted.dimmer {
+ background-color: @mediumInvertedBackgroundColor;
+ }
+ .light.light.light.light.light.inverted.dimmer {
+ background-color: @lightInvertedBackgroundColor;
+ }
+ .very.light.light.light.light.inverted.dimmer {
+ background-color: @veryLightInvertedBackgroundColor;
+ }
+ }
}
-/*--------------
- Simple
----------------*/
+& when (@variationDimmerSimple) {
+ /*--------------
+ Simple
+ ---------------*/
+
+ /* Displays without javascript */
+ .ui.simple.dimmer {
+ display: block;
+ overflow: hidden;
+ opacity: 0;
+ width: 0;
+ height: 0;
+ z-index: -100;
+ background-color: @simpleStartBackgroundColor;
+ }
+ .dimmed.dimmable > .ui.simple.dimmer {
+ overflow: visible;
+ opacity: 1;
+ width: 100%;
+ height: 100%;
+ background-color: @simpleEndBackgroundColor;
+ z-index: @simpleZIndex;
+ }
-/* Displays without javascript */
-.ui.simple.dimmer {
- display: block;
- overflow: hidden;
- opacity: 1;
- width: 0%;
- height: 0%;
- z-index: -100;
- background-color: @simpleStartBackgroundColor;
-}
-.dimmed.dimmable > .ui.simple.dimmer {
- overflow: visible;
- opacity: 1;
- width: 100%;
- height: 100%;
- background-color: @simpleEndBackgroundColor;
- z-index: @simpleZIndex;
+ .ui.simple.inverted.dimmer {
+ background-color: @simpleInvertedStartBackgroundColor;
+ }
+ .dimmed.dimmable > .ui.simple.inverted.dimmer {
+ background-color: @simpleInvertedEndBackgroundColor;
+ }
}
-.ui.simple.inverted.dimmer {
- background-color: @simpleInvertedStartBackgroundColor;
-}
-.dimmed.dimmable > .ui.simple.inverted.dimmer {
- background-color: @simpleInvertedEndBackgroundColor;
+& when (@variationDimmerPartially) {
+ /*--------------
+ Partially
+ ----------------*/
+
+ .ui[class*="top dimmer"],
+ .ui[class*="center dimmer"],
+ .ui[class*="bottom dimmer"] {
+ height: auto;
+ }
+ .ui[class*="bottom dimmer"] {
+ top: auto !important;
+ bottom: 0;
+ }
+ .ui[class*="center dimmer"] {
+ top:50% !important;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+
+ .ui.segment > .ui.ui[class*="top dimmer"] {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.segment > .ui.ui[class*="center dimmer"] {
+ border-radius: 0;
+ }
+ .ui.segment > .ui.ui[class*="bottom dimmer"] {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ .ui[class*="center dimmer"].transition[class*="fade up"].in {
+ animation-name: fadeInUpCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade down"].in {
+ animation-name: fadeInDownCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade up"].out {
+ animation-name: fadeOutUpCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade down"].out {
+ animation-name: fadeOutDownCenter;
+ }
+ .ui[class*="center dimmer"].bounce.transition {
+ animation-name: bounceCenter;
+ }
+ @keyframes fadeInUpCenter {
+ 0% {
+ opacity: 0;
+ transform: translateY(-40%);
+ -webkit-transform: translateY(calc(-40% - .5px));
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ }
+ @keyframes fadeInDownCenter {
+ 0% {
+ opacity: 0;
+ transform: translateY(-60%);
+ -webkit-transform: translateY(calc(-60% - .5px));
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ }
+ @keyframes fadeOutUpCenter {
+ 0% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-45%);
+ -webkit-transform: translateY(calc(-45% - .5px));
+ }
+ }
+ @keyframes fadeOutDownCenter {
+ 0% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-55%);
+ -webkit-transform: translateY(calc(-55% - .5px));
+ }
+ }
+ @keyframes bounceCenter {
+ 0%, 20%, 50%, 80%, 100% {
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 40% {
+ transform: translateY(calc(-50% - 30px));
+ }
+ 60% {
+ transform: translateY(calc(-50% - 15px));
+ }
+ }
}
.loadUIOverrides();
diff --git a/ui/src/definitions/modules/dropdown.js b/ui/src/definitions/modules/dropdown.js
index 13652cc1004..a418a9b620d 100644
--- a/ui/src/definitions/modules/dropdown.js
+++ b/ui/src/definitions/modules/dropdown.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Dropdown
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Dropdown
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -27,6 +31,10 @@ $.fn.dropdown = function(parameters) {
moduleSelector = $allModules.selector || '',
hasTouch = ('ontouchstart' in document.documentElement),
+ clickEvent = hasTouch
+ ? 'touchstart'
+ : 'click',
+
time = new Date().getTime(),
performance = [],
@@ -64,6 +72,7 @@ $.fn.dropdown = function(parameters) {
$sizer = $module.find(selector.sizer),
$input = $module.find(selector.input),
$icon = $module.find(selector.icon),
+ $clear = $module.find(selector.clearIcon),
$combo = ($module.prev().find(selector.text).length > 0)
? $module.prev().find(selector.text)
@@ -71,13 +80,16 @@ $.fn.dropdown = function(parameters) {
$menu = $module.children(selector.menu),
$item = $menu.find(selector.item),
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $(),
activated = false,
itemActivated = false,
internalChange = false,
+ iconClicked = false,
element = this,
instance = $module.data(moduleNamespace),
+ selectActionActive,
initialLoad,
pageLostFocus,
willRefocus,
@@ -97,6 +109,10 @@ $.fn.dropdown = function(parameters) {
module.setup.reference();
}
else {
+ if (settings.ignoreDiacritics && !String.prototype.normalize) {
+ settings.ignoreDiacritics = false;
+ module.error(error.noNormalize, element);
+ }
module.setup.layout();
@@ -129,6 +145,9 @@ $.fn.dropdown = function(parameters) {
destroy: function() {
module.verbose('Destroying previous dropdown', $module);
module.remove.tabbable();
+ module.remove.active();
+ $menu.transition('stop all');
+ $menu.removeClass(className.visible).addClass(className.hidden);
$module
.off(eventNamespace)
.removeData(moduleNamespace)
@@ -167,7 +186,7 @@ $.fn.dropdown = function(parameters) {
},
observe: {
select: function() {
- if(module.has.input()) {
+ if(module.has.input() && selectObserver) {
selectObserver.observe($module[0], {
childList : true,
subtree : true
@@ -175,7 +194,7 @@ $.fn.dropdown = function(parameters) {
}
},
menu: function() {
- if(module.has.menu()) {
+ if(module.has.menu() && menuObserver) {
menuObserver.observe($menu[0], {
childList : true,
subtree : true
@@ -201,7 +220,7 @@ $.fn.dropdown = function(parameters) {
if(!values) {
return false;
}
- values = $.isArray(values)
+ values = Array.isArray(values)
? values
: [values]
;
@@ -263,7 +282,7 @@ $.fn.dropdown = function(parameters) {
module.filter(query);
}
else {
- module.hide();
+ module.hide(null,true);
}
},
@@ -321,6 +340,13 @@ $.fn.dropdown = function(parameters) {
if( !module.has.menu() ) {
module.create.menu();
}
+ if ( module.is.selection() && module.is.clearable() && !module.has.clearItem() ) {
+ module.verbose('Adding clear icon');
+ $clear = $(' ')
+ .addClass('remove icon')
+ .insertBefore($text)
+ ;
+ }
if( module.is.search() && !module.has.search() ) {
module.verbose('Adding search input');
$search = $(' ')
@@ -360,7 +386,7 @@ $.fn.dropdown = function(parameters) {
.attr('class', $input.attr('class') )
.addClass(className.selection)
.addClass(className.dropdown)
- .html( templates.dropdown(selectValues) )
+ .html( templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className) )
.insertBefore($input)
;
if($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
@@ -375,6 +401,7 @@ $.fn.dropdown = function(parameters) {
$module.addClass(className.disabled);
}
$input
+ .removeAttr('required')
.removeAttr('class')
.detach()
.prependTo($module)
@@ -383,8 +410,9 @@ $.fn.dropdown = function(parameters) {
module.refresh();
},
menu: function(values) {
- $menu.html( templates.menu(values, fields));
- $item = $menu.find(selector.item);
+ $menu.html( templates.menu(values, fields,settings.preserveHTML,settings.className));
+ $item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
reference: function() {
module.debug('Dropdown behavior was called on select, replacing with closest dropdown');
@@ -411,7 +439,8 @@ $.fn.dropdown = function(parameters) {
},
refreshItems: function() {
- $item = $menu.find(selector.item);
+ $item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
refreshSelectors: function() {
@@ -426,6 +455,7 @@ $.fn.dropdown = function(parameters) {
;
$menu = $module.children(selector.menu);
$item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
refreshData: function() {
@@ -459,7 +489,7 @@ $.fn.dropdown = function(parameters) {
}
},
- show: function(callback) {
+ show: function(callback, preventFocus) {
callback = $.isFunction(callback)
? callback
: function(){}
@@ -481,7 +511,7 @@ $.fn.dropdown = function(parameters) {
if( module.can.click() ) {
module.bind.intent();
}
- if(module.has.menuSearch()) {
+ if(module.has.search() && !preventFocus) {
module.focusSearch();
}
module.set.visible();
@@ -491,7 +521,7 @@ $.fn.dropdown = function(parameters) {
}
},
- hide: function(callback) {
+ hide: function(callback, preventBlur) {
callback = $.isFunction(callback)
? callback
: function(){}
@@ -501,9 +531,15 @@ $.fn.dropdown = function(parameters) {
if(settings.onHide.call(element) !== false) {
module.animate.hide(function() {
module.remove.visible();
+ // hidding search focus
+ if ( module.is.focusedOnSearch() && preventBlur !== true ) {
+ $search.blur();
+ }
callback.call(element);
});
}
+ } else if( module.can.click() ) {
+ module.unbind.intent();
}
},
@@ -533,27 +569,10 @@ $.fn.dropdown = function(parameters) {
bind: {
events: function() {
- if(hasTouch) {
- module.bind.touchEvents();
- }
module.bind.keyboardEvents();
module.bind.inputEvents();
module.bind.mouseEvents();
},
- touchEvents: function() {
- module.debug('Touch device detected binding additional touch events');
- if( module.is.searchSelection() ) {
- // do nothing special yet
- }
- else if( module.is.single() ) {
- $module
- .on('touchstart' + eventNamespace, module.event.test.toggle)
- ;
- }
- $menu
- .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
- ;
- },
keyboardEvents: function() {
module.verbose('Binding keyboard events');
$module
@@ -580,8 +599,8 @@ $.fn.dropdown = function(parameters) {
module.verbose('Binding mouse events');
if(module.is.multiple()) {
$module
- .on('click' + eventNamespace, selector.label, module.event.label.click)
- .on('click' + eventNamespace, selector.remove, module.event.remove.click)
+ .on(clickEvent + eventNamespace, selector.label, module.event.label.click)
+ .on(clickEvent + eventNamespace, selector.remove, module.event.remove.click)
;
}
if( module.is.searchSelection() ) {
@@ -590,23 +609,24 @@ $.fn.dropdown = function(parameters) {
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
- .on('click' + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
.on('focus' + eventNamespace, selector.search, module.event.search.focus)
- .on('click' + eventNamespace, selector.search, module.event.search.focus)
+ .on(clickEvent + eventNamespace, selector.search, module.event.search.focus)
.on('blur' + eventNamespace, selector.search, module.event.search.blur)
- .on('click' + eventNamespace, selector.text, module.event.text.focus)
+ .on(clickEvent + eventNamespace, selector.text, module.event.text.focus)
;
if(module.is.multiple()) {
$module
- .on('click' + eventNamespace, module.event.click)
+ .on(clickEvent + eventNamespace, module.event.click)
;
}
}
else {
if(settings.on == 'click') {
$module
- .on('click' + eventNamespace, selector.icon, module.event.icon.click)
- .on('click' + eventNamespace, module.event.test.toggle)
+ .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, module.event.test.toggle)
;
}
else if(settings.on == 'hover') {
@@ -624,6 +644,7 @@ $.fn.dropdown = function(parameters) {
.on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('focus' + eventNamespace, module.event.focus)
+ .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
;
if(module.has.menuSearch() ) {
$module
@@ -637,7 +658,7 @@ $.fn.dropdown = function(parameters) {
}
}
$menu
- .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
+ .on((hasTouch ? 'touchstart' : 'mouseenter') + eventNamespace, selector.item, module.event.item.mouseenter)
.on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
.on('click' + eventNamespace, selector.item, module.event.item.click)
;
@@ -651,7 +672,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
- .on('click' + elementNamespace, module.event.test.hide)
+ .on(clickEvent + elementNamespace, module.event.test.hide)
;
}
},
@@ -666,7 +687,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
- .off('click' + elementNamespace)
+ .off(clickEvent + elementNamespace)
;
}
},
@@ -707,7 +728,7 @@ $.fn.dropdown = function(parameters) {
module.remove.message();
}
if(settings.allowAdditions) {
- module.add.userSuggestion(query);
+ module.add.userSuggestion(module.escape.htmlEntities(query));
}
if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) {
module.show();
@@ -723,6 +744,15 @@ $.fn.dropdown = function(parameters) {
if(settings.filterRemoteData) {
module.filterItems(searchTerm);
}
+ var preSelected = $input.val();
+ if(!Array.isArray(preSelected)) {
+ preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : [];
+ }
+ $.each(preSelected,function(index,value){
+ $item.filter('[data-value="'+value+'"]')
+ .addClass(className.filtered)
+ ;
+ });
afterFiltered();
});
}
@@ -755,16 +785,17 @@ $.fn.dropdown = function(parameters) {
},
onSuccess : function(response) {
var
- values = response[fields.remoteValues],
- hasRemoteValues = ($.isArray(values) && values.length > 0)
+ values = response[fields.remoteValues]
;
- if(hasRemoteValues) {
- module.remove.message();
- module.setup.menu({
- values: response[fields.remoteValues]
- });
+ if (!Array.isArray(values)){
+ values = [];
}
- else {
+ module.remove.message();
+ module.setup.menu({
+ values: values
+ });
+
+ if(values.length===0 && !settings.allowAdditions) {
module.add.message(message.noResults);
}
callback();
@@ -783,12 +814,14 @@ $.fn.dropdown = function(parameters) {
filterItems: function(query) {
var
- searchTerm = (query !== undefined)
+ searchTerm = module.remove.diacritics(query !== undefined
? query
- : module.get.query(),
+ : module.get.query()
+ ),
results = null,
escapedTerm = module.escape.string(searchTerm),
- beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm')
+ regExpFlags = (settings.ignoreSearchCase ? 'i' : '') + 'gm',
+ beginsWithRegExp = new RegExp('^' + escapedTerm, regExpFlags)
;
// avoid loop if we're matching nothing
if( module.has.query() ) {
@@ -802,8 +835,12 @@ $.fn.dropdown = function(parameters) {
text,
value
;
- if(settings.match == 'both' || settings.match == 'text') {
- text = String(module.get.choiceText($choice, false));
+ if($choice.hasClass(className.unfilterable)) {
+ results.push(this);
+ return true;
+ }
+ if(settings.match === 'both' || settings.match === 'text') {
+ text = module.remove.diacritics(String(module.get.choiceText($choice, false)));
if(text.search(beginsWithRegExp) !== -1) {
results.push(this);
return true;
@@ -817,8 +854,8 @@ $.fn.dropdown = function(parameters) {
return true;
}
}
- if(settings.match == 'both' || settings.match == 'value') {
- value = String(module.get.choiceValue($choice, text));
+ if(settings.match === 'both' || settings.match === 'value') {
+ value = module.remove.diacritics(String(module.get.choiceValue($choice, text)));
if(value.search(beginsWithRegExp) !== -1) {
results.push(this);
return true;
@@ -843,6 +880,30 @@ $.fn.dropdown = function(parameters) {
.addClass(className.filtered)
;
}
+
+ if(!module.has.query()) {
+ $divider
+ .removeClass(className.hidden);
+ } else if(settings.hideDividers === true) {
+ $divider
+ .addClass(className.hidden);
+ } else if(settings.hideDividers === 'empty') {
+ $divider
+ .removeClass(className.hidden)
+ .filter(function() {
+ // First find the last divider in this divider group
+ // Dividers which are direct siblings are considered a group
+ var lastDivider = $(this).nextUntil(selector.item);
+
+ return (lastDivider.length ? lastDivider : $(this))
+ // Count all non-filtered items until the next divider (or end of the dropdown)
+ .nextUntil(selector.divider)
+ .filter(selector.item + ":not(." + className.filtered + ")")
+ // Hide divider if no items are found
+ .length === 0;
+ })
+ .addClass(className.hidden);
+ }
},
fuzzySearch: function(query, term) {
@@ -850,8 +911,8 @@ $.fn.dropdown = function(parameters) {
termLength = term.length,
queryLength = query.length
;
- query = query.toLowerCase();
- term = term.toLowerCase();
+ query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
+ term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
if(queryLength > termLength) {
return false;
}
@@ -872,12 +933,10 @@ $.fn.dropdown = function(parameters) {
return true;
},
exactSearch: function (query, term) {
- query = query.toLowerCase();
- term = term.toLowerCase();
- if(term.indexOf(query) > -1) {
- return true;
- }
- return false;
+ query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
+ term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
+ return term.indexOf(query) > -1;
+
},
filterActive: function() {
if(settings.useLabels) {
@@ -900,6 +959,12 @@ $.fn.dropdown = function(parameters) {
}
},
+ blurSearch: function() {
+ if( module.has.search() ) {
+ $search.blur();
+ }
+ },
+
forceSelection: function() {
var
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
@@ -909,19 +974,12 @@ $.fn.dropdown = function(parameters) {
: $activeItem,
hasSelected = ($selectedItem.length > 0)
;
- if(hasSelected && !module.is.multiple()) {
+ if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
module.debug('Forcing partial selection to selected item', $selectedItem);
module.event.item.click.call($selectedItem, {}, true);
- return;
}
else {
- if(settings.allowAdditions) {
- module.set.selected(module.get.query());
- module.remove.searchTerm();
- }
- else {
- module.remove.searchTerm();
- }
+ module.remove.searchTerm();
}
},
@@ -934,11 +992,30 @@ $.fn.dropdown = function(parameters) {
module.setup.menu({values: values});
$.each(values, function(index, item) {
if(item.selected == true) {
- module.debug('Setting initial selection to', item.value);
- module.set.selected(item.value);
- return true;
+ module.debug('Setting initial selection to', item[fields.value]);
+ module.set.selected(item[fields.value]);
+ if(!module.is.multiple()) {
+ return false;
+ }
}
});
+
+ if(module.has.selectInput()) {
+ module.disconnect.selectObserver();
+ $input.html('');
+ $input.append(' ');
+ $.each(values, function(index, item) {
+ var
+ value = settings.templates.deQuote(item[fields.value]),
+ name = settings.templates.escape(
+ item[fields.name] || '',
+ settings.preserveHTML
+ )
+ ;
+ $input.append('' + name + ' ');
+ });
+ module.observe.select();
+ }
}
},
@@ -995,12 +1072,12 @@ $.fn.dropdown = function(parameters) {
}
},
search: {
- focus: function() {
+ focus: function(event) {
activated = true;
if(module.is.multiple()) {
module.remove.activeLabel();
}
- if(settings.showOnFocus) {
+ if(settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) {
module.search();
}
},
@@ -1010,6 +1087,8 @@ $.fn.dropdown = function(parameters) {
if(!itemActivated && !pageLostFocus) {
if(settings.forceSelection) {
module.forceSelection();
+ } else if(!settings.allowAdditions){
+ module.remove.searchTerm();
}
module.hide();
}
@@ -1017,9 +1096,32 @@ $.fn.dropdown = function(parameters) {
willRefocus = false;
}
},
+ clearIcon: {
+ click: function(event) {
+ module.clear();
+ if(module.is.searchSelection()) {
+ module.remove.searchTerm();
+ }
+ module.hide();
+ event.stopPropagation();
+ }
+ },
icon: {
click: function(event) {
- module.toggle();
+ iconClicked=true;
+ if(module.has.search()) {
+ if(!module.is.active()) {
+ if(settings.showOnFocus){
+ module.focusSearch();
+ } else {
+ module.toggle();
+ }
+ } else {
+ module.blurSearch();
+ }
+ } else {
+ module.toggle();
+ }
}
},
text: {
@@ -1104,22 +1206,17 @@ $.fn.dropdown = function(parameters) {
event.stopPropagation();
},
hide: function(event) {
- module.determine.eventInModule(event, module.hide);
+ if(module.determine.eventInModule(event, module.hide)){
+ if(element.id && $(event.target).attr('for') === element.id){
+ event.preventDefault();
+ }
+ }
}
},
select: {
mutation: function(mutations) {
module.debug(' modified, recreating menu');
- var
- isSelectMutation = false
- ;
- $.each(mutations, function(index, mutation) {
- if($(mutation.target).is('select') || $(mutation.addedNodes).is('select')) {
- isSelectMutation = true;
- return true;
- }
- });
- if(isSelectMutation) {
+ if(module.is.selectMutation(mutations)) {
module.disconnect.selectObserver();
module.refresh();
module.setup.select();
@@ -1205,7 +1302,7 @@ $.fn.dropdown = function(parameters) {
isBubbledEvent = ($subMenu.find($target).length > 0)
;
// prevents IE11 bug where menu receives focus even though `tabindex=-1`
- if(module.has.menuSearch()) {
+ if (document.activeElement.tagName.toLowerCase() !== 'input') {
$(document.activeElement).blur();
}
if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) {
@@ -1248,7 +1345,8 @@ $.fn.dropdown = function(parameters) {
isSearch = module.is.searchSelection(),
isFocusedOnSearch = module.is.focusedOnSearch(),
isFocused = module.is.focused(),
- caretAtStart = (isFocusedOnSearch && module.get.caretPosition() === 0),
+ caretAtStart = (isFocusedOnSearch && module.get.caretPosition(false) === 0),
+ isSelectedSearch = (caretAtStart && module.get.caretPosition(true) !== 0),
$nextLabel
;
if(isSearch && !hasActiveLabel && !isFocusedOnSearch) {
@@ -1329,7 +1427,7 @@ $.fn.dropdown = function(parameters) {
module.remove.activeLabels($activeLabel);
event.preventDefault();
}
- else if(caretAtStart && !hasActiveLabel && pressedKey == keys.backspace) {
+ else if(caretAtStart && !isSelectedSearch && !hasActiveLabel && pressedKey == keys.backspace) {
module.verbose('Removing last label on input backspace');
$activeLabel = $label.last().addClass(className.active);
module.remove.activeLabels($activeLabel);
@@ -1376,6 +1474,9 @@ $.fn.dropdown = function(parameters) {
if(module.is.searchSelection()) {
module.remove.searchTerm();
}
+ if(module.is.multiple()){
+ event.preventDefault();
+ }
}
// visible menu keyboard shortcuts
@@ -1392,6 +1493,9 @@ $.fn.dropdown = function(parameters) {
module.event.item.click.call($selectedItem, event);
if(module.is.searchSelection()) {
module.remove.searchTerm();
+ if(module.is.multiple()) {
+ $search.focus();
+ }
}
}
event.preventDefault();
@@ -1543,6 +1647,7 @@ $.fn.dropdown = function(parameters) {
determine: {
selectAction: function(text, value) {
+ selectActionActive = true;
module.verbose('Determining action', settings.action);
if( $.isFunction( module.action[settings.action] ) ) {
module.verbose('Triggering preset action', settings.action, text, value);
@@ -1555,6 +1660,7 @@ $.fn.dropdown = function(parameters) {
else {
module.error(error.action, settings.action);
}
+ selectActionActive = false;
},
eventInModule: function(event, callback) {
var
@@ -1581,7 +1687,7 @@ $.fn.dropdown = function(parameters) {
$target = $(event.target),
$label = $target.closest(selector.siblingLabel),
inVisibleDOM = document.body.contains(event.target),
- notOnLabel = ($module.find($label).length === 0),
+ notOnLabel = ($module.find($label).length === 0 || !(module.is.multiple() && settings.useLabels)),
notInMenu = ($target.closest($menu).length === 0)
;
callback = $.isFunction(callback)
@@ -1611,10 +1717,7 @@ $.fn.dropdown = function(parameters) {
;
if( module.can.activate( $(element) ) ) {
module.set.selected(value, $(element));
- if(module.is.multiple() && !module.is.allFiltered()) {
- return;
- }
- else {
+ if(!module.is.multiple()) {
module.hideAndClear();
}
}
@@ -1627,10 +1730,7 @@ $.fn.dropdown = function(parameters) {
;
if( module.can.activate( $(element) ) ) {
module.set.value(value, text, $(element));
- if(module.is.multiple() && !module.is.allFiltered()) {
- return;
- }
- else {
+ if(!module.is.multiple()) {
module.hideAndClear();
}
}
@@ -1646,7 +1746,7 @@ $.fn.dropdown = function(parameters) {
},
hide: function(text, value, element) {
- module.set.value(value, text);
+ module.set.value(value, text, $(element));
module.hideAndClear();
}
@@ -1689,7 +1789,7 @@ $.fn.dropdown = function(parameters) {
count
;
count = ( module.is.multiple() )
- ? $.isArray(values)
+ ? Array.isArray(values)
? values.length
: 0
: (module.get.value() !== '')
@@ -1713,7 +1813,7 @@ $.fn.dropdown = function(parameters) {
if(!values) {
return false;
}
- values = $.isArray(values)
+ values = Array.isArray(values)
? values
: [values]
;
@@ -1726,19 +1826,25 @@ $.fn.dropdown = function(parameters) {
return $.inArray(value, array) === index;
});
},
- caretPosition: function() {
+ caretPosition: function(returnEndPos) {
var
input = $search.get(0),
range,
rangeLength
;
- if('selectionStart' in input) {
+ if(returnEndPos && 'selectionEnd' in input){
+ return input.selectionEnd;
+ }
+ else if(!returnEndPos && 'selectionStart' in input) {
return input.selectionStart;
}
- else if (document.selection) {
+ if (document.selection) {
input.focus();
range = document.selection.createRange();
rangeLength = range.text.length;
+ if(returnEndPos) {
+ return rangeLength;
+ }
range.moveStart('character', -input.value.length);
return range.text.length - rangeLength;
}
@@ -1748,7 +1854,7 @@ $.fn.dropdown = function(parameters) {
value = ($input.length > 0)
? $input.val()
: $module.data(metadata.value),
- isEmptyMultiselect = ($.isArray(value) && value.length === 1 && value[0] === '')
+ isEmptyMultiselect = (Array.isArray(value) && value.length === 1 && value[0] === '')
;
// prevents placeholder element from being selected when multiple
return (value === undefined || isEmptyMultiselect)
@@ -1765,7 +1871,7 @@ $.fn.dropdown = function(parameters) {
}
return ( !module.has.selectInput() && module.is.multiple() )
? (typeof value == 'string') // delimited string
- ? value.split(settings.delimiter)
+ ? module.escape.htmlEntities(value).split(settings.delimiter)
: ''
: value
;
@@ -1822,7 +1928,11 @@ $.fn.dropdown = function(parameters) {
return ($choice.data(metadata.value) !== undefined)
? String( $choice.data(metadata.value) )
: (typeof choiceText === 'string')
- ? $.trim(choiceText.toLowerCase())
+ ? $.trim(
+ settings.ignoreSearchCase
+ ? choiceText.toLowerCase()
+ : choiceText
+ )
: String(choiceText)
;
},
@@ -1842,7 +1952,8 @@ $.fn.dropdown = function(parameters) {
},
selectValues: function() {
var
- select = {}
+ select = {},
+ oldGroup = []
;
select.values = [];
$module
@@ -1854,15 +1965,28 @@ $.fn.dropdown = function(parameters) {
disabled = $option.attr('disabled'),
value = ( $option.attr('value') !== undefined )
? $option.attr('value')
- : name
+ : name,
+ text = ( $option.data(metadata.text) !== undefined )
+ ? $option.data(metadata.text)
+ : name,
+ group = $option.parent('optgroup')
;
if(settings.placeholder === 'auto' && value === '') {
select.placeholder = name;
}
else {
+ if(group.length !== oldGroup.length || group[0] !== oldGroup[0]) {
+ select.values.push({
+ type: 'header',
+ divider: settings.headerDivider,
+ name: group.attr('label') || ''
+ });
+ oldGroup = group;
+ }
select.values.push({
name : name,
value : value,
+ text : text,
disabled : disabled
});
}
@@ -1873,12 +1997,17 @@ $.fn.dropdown = function(parameters) {
select.placeholder = settings.placeholder;
}
if(settings.sortSelect) {
- select.values.sort(function(a, b) {
- return (a.name > b.name)
- ? 1
- : -1
- ;
- });
+ if(settings.sortSelect === true) {
+ select.values.sort(function(a, b) {
+ return a.name.localeCompare(b.name);
+ });
+ } else if(settings.sortSelect === 'natural') {
+ select.values.sort(function(a, b) {
+ return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+ });
+ } else if($.isFunction(settings.sortSelect)) {
+ select.values.sort(settings.sortSelect);
+ }
module.debug('Retrieved and sorted values from select', select);
}
else {
@@ -1924,12 +2053,12 @@ $.fn.dropdown = function(parameters) {
? module.get.values()
: module.get.text()
;
+ isMultiple = (module.is.multiple() && Array.isArray(value));
shouldSearch = (isMultiple)
? (value.length > 0)
: (value !== undefined && value !== null)
;
- isMultiple = (module.is.multiple() && $.isArray(value));
- strict = (value === '' || value === 0)
+ strict = (value === '' || value === false || value === true)
? true
: strict || false
;
@@ -1946,7 +2075,7 @@ $.fn.dropdown = function(parameters) {
return;
}
if(isMultiple) {
- if($.inArray( String(optionValue), value) !== -1 || $.inArray(optionText, value) !== -1) {
+ if($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(function(v){return String(v);})) !== -1) {
$selectedItem = ($selectedItem)
? $selectedItem.add($choice)
: $choice
@@ -1955,13 +2084,17 @@ $.fn.dropdown = function(parameters) {
}
else if(strict) {
module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
- if( optionValue === value || optionText === value) {
+ if( optionValue === value) {
$selectedItem = $choice;
return true;
}
}
else {
- if( String(optionValue) == String(value) || optionText == value) {
+ if(settings.ignoreCase) {
+ optionValue = optionValue.toLowerCase();
+ value = value.toLowerCase();
+ }
+ if(module.escape.htmlEntities(String(optionValue)) === module.escape.htmlEntities(String(value))) {
module.verbose('Found select item by value', optionValue, value);
$selectedItem = $choice;
return true;
@@ -2004,8 +2137,8 @@ $.fn.dropdown = function(parameters) {
},
restore: {
- defaults: function() {
- module.clear();
+ defaults: function(preventChangeTrigger) {
+ module.clear(preventChangeTrigger);
module.restore.defaultText();
module.restore.defaultValue();
},
@@ -2072,6 +2205,12 @@ $.fn.dropdown = function(parameters) {
else {
module.set.selected();
}
+ var value = module.get.value();
+ if(value && value !== '' && !(Array.isArray(value) && value.length === 0)) {
+ $input.removeClass(className.noselection);
+ } else {
+ $input.addClass(className.noselection);
+ }
module.remove.initialLoad();
},
remoteValues: function() {
@@ -2151,20 +2290,21 @@ $.fn.dropdown = function(parameters) {
}
},
- clear: function() {
+ clear: function(preventChangeTrigger) {
if(module.is.multiple() && settings.useLabels) {
module.remove.labels();
}
else {
module.remove.activeItem();
module.remove.selectedItem();
+ module.remove.filteredItem();
}
module.set.placeholderText();
- module.clearValue();
+ module.clearValue(preventChangeTrigger);
},
- clearValue: function() {
- module.set.value('');
+ clearValue: function(preventChangeTrigger) {
+ module.set.value('', null, null, preventChangeTrigger);
},
scrollPage: function(direction, $selectedItem) {
@@ -2316,6 +2456,9 @@ $.fn.dropdown = function(parameters) {
? forceScroll
: false
;
+ if(module.get.activeItem().length === 0){
+ forceScroll = false;
+ }
if($item && $menu.length > 0 && hasActive) {
itemOffset = $item.position().top;
@@ -2337,30 +2480,28 @@ $.fn.dropdown = function(parameters) {
}
},
text: function(text) {
- if(settings.action !== 'select') {
- if(settings.action == 'combo') {
- module.debug('Changing combo button text', text, $combo);
- if(settings.preserveHTML) {
- $combo.html(text);
- }
- else {
- $combo.text(text);
- }
+ if(settings.action === 'combo') {
+ module.debug('Changing combo button text', text, $combo);
+ if(settings.preserveHTML) {
+ $combo.html(text);
}
else {
- if(text !== module.get.placeholderText()) {
- $text.removeClass(className.placeholder);
- }
- module.debug('Changing text', text, $text);
- $text
- .removeClass(className.filtered)
- ;
- if(settings.preserveHTML) {
- $text.html(text);
- }
- else {
- $text.text(text);
- }
+ $combo.text(text);
+ }
+ }
+ else if(settings.action === 'activate') {
+ if(text !== module.get.placeholderText()) {
+ $text.removeClass(className.placeholder);
+ }
+ module.debug('Changing text', text, $text);
+ $text
+ .removeClass(className.filtered)
+ ;
+ if(settings.preserveHTML) {
+ $text.html(text);
+ }
+ else {
+ $text.text(text);
}
}
},
@@ -2415,8 +2556,13 @@ $.fn.dropdown = function(parameters) {
},
direction: function($menu) {
if(settings.direction == 'auto') {
- // reset position
- module.remove.upward();
+ // reset position, remove upward if it's base menu
+ if (!$menu) {
+ module.remove.upward();
+ } else if (module.is.upward($menu)) {
+ //we need make sure when make assertion openDownward for $menu, $menu does not have upward class
+ module.remove.upward($menu);
+ }
if(module.can.openDownward($menu)) {
module.remove.upward($menu);
@@ -2440,7 +2586,12 @@ $.fn.dropdown = function(parameters) {
var $element = $currentMenu || $menu;
$element.addClass(className.leftward);
},
- value: function(value, text, $selected) {
+ value: function(value, text, $selected, preventChangeTrigger) {
+ if(value !== undefined && value !== '' && !(Array.isArray(value) && value.length === 0)) {
+ $input.removeClass(className.noselection);
+ } else {
+ $input.addClass(className.noselection);
+ }
var
escapedValue = module.escape.value(value),
hasInput = ($input.length > 0),
@@ -2470,7 +2621,7 @@ $.fn.dropdown = function(parameters) {
if(settings.fireOnInit === false && module.is.initialLoad()) {
module.debug('Input native change event ignored on initial load');
}
- else {
+ else if(preventChangeTrigger !== true) {
module.trigger.change();
}
internalChange = false;
@@ -2484,7 +2635,7 @@ $.fn.dropdown = function(parameters) {
if(settings.fireOnInit === false && module.is.initialLoad()) {
module.verbose('No callback on initial load', settings.onChange);
}
- else {
+ else if(preventChangeTrigger !== true) {
settings.onChange.call(element, value, text, $selected);
}
},
@@ -2506,8 +2657,7 @@ $.fn.dropdown = function(parameters) {
},
selected: function(value, $selectedItem) {
var
- isMultiple = module.is.multiple(),
- $userSelectedItem
+ isMultiple = module.is.multiple()
;
$selectedItem = (settings.allowAdditions)
? $selectedItem || module.get.itemWithAdditions(value)
@@ -2558,7 +2708,7 @@ $.fn.dropdown = function(parameters) {
module.set.activeItem($selected);
}
}
- else if(!isFiltered) {
+ else if(!isFiltered && (settings.useLabels || selectActionActive)) {
module.debug('Selected active value, removing label');
module.remove.selected(selectedValue);
}
@@ -2576,6 +2726,7 @@ $.fn.dropdown = function(parameters) {
}
})
;
+ module.remove.searchTerm();
}
},
@@ -2594,7 +2745,7 @@ $.fn.dropdown = function(parameters) {
$label = $(' ')
.addClass(className.label)
.attr('data-' + metadata.value, escapedValue)
- .html(templates.label(escapedValue, text))
+ .html(templates.label(escapedValue, text, settings.preserveHTML, settings.className))
;
$label = settings.onLabelCreate.call($label, escapedValue, text);
@@ -2610,7 +2761,12 @@ $.fn.dropdown = function(parameters) {
$label
.addClass(className.hidden)
.insertBefore($next)
- .transition(settings.label.transition, settings.label.duration)
+ .transition({
+ animation : settings.label.transition,
+ debug : settings.debug,
+ verbose : settings.verbose,
+ duration : settings.label.duration
+ })
;
}
else {
@@ -2714,7 +2870,6 @@ $.fn.dropdown = function(parameters) {
hasCount = (message.search('{count}') !== -1),
hasMaxCount = (message.search('{maxCount}') !== -1),
hasTerm = (message.search('{term}') !== -1),
- values,
count,
query
;
@@ -2747,7 +2902,7 @@ $.fn.dropdown = function(parameters) {
return;
}
// extend current array
- if($.isArray(currentValue)) {
+ if(Array.isArray(currentValue)) {
newValue = currentValue.concat([addedValue]);
newValue = module.get.uniqueArray(newValue);
}
@@ -2772,9 +2927,9 @@ $.fn.dropdown = function(parameters) {
else {
settings.onAdd.call(element, addedValue, addedText, $selectedItem);
}
- module.set.value(newValue, addedValue, addedText, $selectedItem);
+ module.set.value(newValue, addedText, $selectedItem);
module.check.maxSelections();
- }
+ },
},
remove: {
@@ -2817,6 +2972,9 @@ $.fn.dropdown = function(parameters) {
else {
$item.removeClass(className.filtered);
}
+ if(settings.hideDividers) {
+ $divider.removeClass(className.hidden);
+ }
module.remove.empty();
},
optionValue: function(value) {
@@ -2909,6 +3067,7 @@ $.fn.dropdown = function(parameters) {
values = module.get.values(),
newValue
;
+ removedValue = module.escape.htmlEntities(removedValue);
if( module.has.selectInput() ) {
module.verbose('Input is removing selected option', removedValue);
newValue = module.remove.arrayValue(removedValue, values);
@@ -2929,7 +3088,7 @@ $.fn.dropdown = function(parameters) {
module.check.maxSelections();
},
arrayValue: function(removedValue, values) {
- if( !$.isArray(values) ) {
+ if( !Array.isArray(values) ) {
values = [values];
}
values = $.grep(values, function(value){
@@ -2941,7 +3100,7 @@ $.fn.dropdown = function(parameters) {
label: function(value, shouldAnimate) {
var
$labels = $module.find(selector.label),
- $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(value) +'"]')
+ $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? value.toLowerCase() : value) +'"]')
;
module.verbose('Removing label', $removedLabel);
$removedLabel.remove();
@@ -2999,6 +3158,9 @@ $.fn.dropdown = function(parameters) {
.removeAttr('tabindex')
;
}
+ },
+ diacritics: function(text) {
+ return settings.ignoreDiacritics ? text.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : text;
}
},
@@ -3006,6 +3168,9 @@ $.fn.dropdown = function(parameters) {
menuSearch: function() {
return (module.has.search() && $search.closest($menu).length > 0);
},
+ clearItem: function() {
+ return ($clear.length > 0);
+ },
search: function() {
return ($search.length > 0);
},
@@ -3016,13 +3181,14 @@ $.fn.dropdown = function(parameters) {
return ( $input.is('select') );
},
minCharacters: function(searchTerm) {
- if(settings.minCharacters) {
+ if(settings.minCharacters && !iconClicked) {
searchTerm = (searchTerm !== undefined)
? String(searchTerm)
: String(module.get.query())
;
return (searchTerm.length >= settings.minCharacters);
}
+ iconClicked=false;
return true;
},
firstLetter: function($item, letter) {
@@ -3084,7 +3250,7 @@ $.fn.dropdown = function(parameters) {
valueMatchingCase: function(value) {
var
values = module.get.values(),
- hasValue = $.isArray(values)
+ hasValue = Array.isArray(values)
? values && ($.inArray(value, values) !== -1)
: (values == value)
;
@@ -3098,7 +3264,7 @@ $.fn.dropdown = function(parameters) {
values = module.get.values(),
hasValue = false
;
- if(!$.isArray(values)) {
+ if(!Array.isArray(values)) {
values = [values];
}
$.each(values, function(index, existingValue) {
@@ -3140,6 +3306,9 @@ $.fn.dropdown = function(parameters) {
var $selectedMenu = $subMenu || $menu;
return $selectedMenu.hasClass(className.leftward);
},
+ clearable: function() {
+ return ($module.hasClass(className.clearable) || settings.clearable);
+ },
disabled: function() {
return $module.hasClass(className.disabled);
},
@@ -3184,9 +3353,9 @@ $.fn.dropdown = function(parameters) {
selectChanged = false
;
$.each(mutations, function(index, mutation) {
- if(mutation.target && $(mutation.target).is('select')) {
+ if($(mutation.target).is('select') || $(mutation.addedNodes).is('select')) {
selectChanged = true;
- return true;
+ return false;
}
});
return selectChanged;
@@ -3389,9 +3558,6 @@ $.fn.dropdown = function(parameters) {
hide: function(callback, $subMenu) {
var
$currentMenu = $subMenu || $menu,
- duration = ($subMenu)
- ? (settings.duration * 0.9)
- : settings.duration,
start = ($subMenu)
? function() {}
: function() {
@@ -3467,7 +3633,7 @@ $.fn.dropdown = function(parameters) {
escape: {
value: function(value) {
var
- multipleValues = $.isArray(value),
+ multipleValues = Array.isArray(value),
stringValue = (typeof value === 'string'),
isUnparsable = (!stringValue && !multipleValues),
hasQuotes = (stringValue && value.search(regExp.quote) !== -1),
@@ -3488,6 +3654,27 @@ $.fn.dropdown = function(parameters) {
string: function(text) {
text = String(text);
return text.replace(regExp.escape, '\\$&');
+ },
+ htmlEntities: function(string) {
+ var
+ badChars = /[<>"'`]/g,
+ shouldEscape = /[&<>"'`]/,
+ escape = {
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ "`": "`"
+ },
+ escapedChar = function(chr) {
+ return escape[chr];
+ }
+ ;
+ if(shouldEscape.test(string)) {
+ string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&");
+ return string.replace(badChars, escapedChar);
+ }
+ return string;
}
},
@@ -3641,7 +3828,7 @@ $.fn.dropdown = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -3686,6 +3873,8 @@ $.fn.dropdown.settings = {
values : false, // specify values to use for dropdown
+ clearable : false, // whether the value of the dropdown can be cleared
+
apiSettings : false,
selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used
minCharacters : 0, // Minimum characters required to trigger API call
@@ -3701,6 +3890,8 @@ $.fn.dropdown.settings = {
match : 'both', // what to match against with search selection (both, text, or label)
fullTextSearch : false, // search anywhere in value (set to 'exact' to require exact matches)
+ ignoreDiacritics : false, // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à ", etc...)
+ hideDividers : false, // Whether to hide any divider elements (specified in selector.divider) that are sibling to any items when searched (set to true will hide all dividers, set to 'empty' will hide them when they are not followed by a visible item)
placeholder : 'auto', // whether to convert blank values to placeholder text
preserveHTML : true, // preserve html when selecting value
@@ -3709,7 +3900,8 @@ $.fn.dropdown.settings = {
forceSelection : true, // force a choice on blur with search selection
allowAdditions : false, // whether multiple select should allow user added values
- ignoreCase : false, // whether to consider values not matching in case to be the same
+ ignoreCase : false, // whether to consider case sensitivity when creating labels
+ ignoreSearchCase : true, // whether to consider case sensitivity when filtering items
hideAdditions : true, // whether or not to hide special message prompting a user they can enter a value
maxSelections : false, // When set to a number limits the number of selections to this count
@@ -3728,6 +3920,8 @@ $.fn.dropdown.settings = {
glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
+ headerDivider : true, // whether option headers should have an additional divider line underneath when converted from
+
// label settings on multi-select
label: {
transition : 'scale',
@@ -3775,11 +3969,12 @@ $.fn.dropdown.settings = {
method : 'The method you called is not defined.',
noAPI : 'The API module is required to load resources remotely',
noStorage : 'Saving remote data requires session storage',
- noTransition : 'This module requires ui transitions '
+ noTransition : 'This module requires ui transitions ',
+ noNormalize : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including as a polyfill.'
},
regExp : {
- escape : /[-[\]{}()*+?.,\\^$|#\s]/g,
+ escape : /[-[\]{}()*+?.,\\^$|#\s:=@]/g,
quote : /"/g
},
@@ -3798,7 +3993,14 @@ $.fn.dropdown.settings = {
disabled : 'disabled', // whether value should be disabled
name : 'name', // displayed dropdown text
value : 'value', // actual dropdown value
- text : 'text' // displayed text when selected
+ text : 'text', // displayed text when selected
+ type : 'type', // type of dropdown element
+ image : 'image', // optional image path
+ imageClass : 'imageClass', // optional individual class for image
+ icon : 'icon', // optional icon name
+ iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead)
+ class : 'class', // optional individual class for item/header
+ divider : 'divider' // optional divider append for group headers
},
keys : {
@@ -3817,6 +4019,7 @@ $.fn.dropdown.settings = {
selector : {
addition : '.addition',
+ divider : '.divider, .header',
dropdown : '.ui.dropdown',
hidden : '.hidden',
icon : '> .dropdown.icon',
@@ -3831,7 +4034,8 @@ $.fn.dropdown.settings = {
search : 'input.search, .menu > .search > input, .menu input.search',
sizer : '> input.sizer',
text : '> .text:not(.icon)',
- unselectable : '.disabled, .filtered'
+ unselectable : '.disabled, .filtered',
+ clearIcon : '> .remove.icon'
},
className : {
@@ -3843,6 +4047,8 @@ $.fn.dropdown.settings = {
dropdown : 'ui dropdown',
filtered : 'filtered',
hidden : 'hidden transition',
+ icon : 'icon',
+ image : 'image',
item : 'item',
label : 'ui label',
loading : 'loading',
@@ -3856,64 +4062,125 @@ $.fn.dropdown.settings = {
selection : 'selection',
upward : 'upward',
leftward : 'left',
- visible : 'visible'
+ visible : 'visible',
+ clearable : 'clearable',
+ noselection : 'noselection',
+ delete : 'delete',
+ header : 'header',
+ divider : 'divider',
+ groupIcon : '',
+ unfilterable : 'unfilterable'
}
};
/* Templates */
$.fn.dropdown.settings.templates = {
-
+ deQuote: function(string) {
+ return String(string).replace(/"/g,"");
+ },
+ escape: function(string, preserveHTML) {
+ if (preserveHTML){
+ return string;
+ }
+ var
+ badChars = /[<>"'`]/g,
+ shouldEscape = /[&<>"'`]/,
+ escape = {
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ "`": "`"
+ },
+ escapedChar = function(chr) {
+ return escape[chr];
+ }
+ ;
+ if(shouldEscape.test(string)) {
+ string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&");
+ return string.replace(badChars, escapedChar);
+ }
+ return string;
+ },
// generates dropdown from select values
- dropdown: function(select) {
+ dropdown: function(select, fields, preserveHTML, className) {
var
placeholder = select.placeholder || false,
- values = select.values || {},
- html = ''
+ html = '',
+ escape = $.fn.dropdown.settings.templates.escape
;
html += ' ';
- if(select.placeholder) {
- html += '' + placeholder + '
';
+ if(placeholder) {
+ html += '' + escape(placeholder,preserveHTML) + '
';
}
else {
html += '
';
}
- html += '