richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Iteration on buttons

pull/340/head
jlukic 11 years ago
parent
542d20651c
commit
d373f1c3e4
4 changed files with 350 additions and 252 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      server/documents/elements/button.html.eco
  2. 375
      src/elements/button.less
  3. 16
      src/elements/header.less
  4. 188
      src/global.variables

23
server/documents/elements/button.html.eco
View File

@ -119,7 +119,7 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Hover</h4>
<p>A button can change to show a user has hovered their mouse</p>
<div class="ui hover button">
<div class="ui button">
Follow
</div>
</div>
@ -127,7 +127,7 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Down</h4>
<p>A button can change when pressed using touch or mouse events</p>
<div class="ui down button">
<div class="ui button">
<i class="user icon"></i>
Follow
</div>
@ -247,14 +247,23 @@ type : 'UI Element'
<h4 class="ui header">Colors</h4>
<p>A button can have different colors:</p>
<a class="ui black button">Black Button</a>
<a class="ui green button">Green BUtton</a>
<a class="ui red button">Red Button</a>
<a class="ui yellow button">yellow Button</a>
<a class="ui green button">Green Button</a>
<a class="ui blue button">Blue Button</a>
</div>
<div class="another example">
<a class="ui orange button">Orange Button</a>
<a class="ui purple button">Purple Button</a>
<a class="ui red button">Red Button</a>
<a class="ui teal button">Teal Button</a>
<a class="ui orange button">Orange Button</a>
</div>
<div class="example">
<h4 class="ui header">Compact</h4>
<p>A button can reduce its padding to fit into tighter spaces</p>
<div class="compact ui button">
Hold
</div>
</div>
<div class="example">
@ -281,9 +290,9 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Circular</h4>
<p>A button can be circular:</p>
<div class="circular ui button">Rounded</div>
<div class="circular ui icon button">
<i class="icon settings"></i></div>
<i class="icon settings"></i>
</div>
</div>
<div class="example">

375
src/elements/button.less
View File

@ -25,7 +25,11 @@
// @transitionEasing
// @offWhite
// @white
// @iconWidth
/*-------------------
Button Variables
--------------------*/
/* Button Variables */
@textTransform: uppercase;
@ -35,14 +39,8 @@
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;
@padding: 0.8em 1.5em 0.8665em;
@iconPadding: 0.8em 0.8em 0.8665em;
@compactVerticalPadding: 0.6em;
@compactHorizontalPadding: 0.8em;
@compactPadding: 0.6em 0.8em 0.6665em;
@compactIconPadding: 0.6em 0.6em 0.73em;
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
@borderRadius: 0.25em;
@ -71,11 +69,15 @@
@iconHoverOpacity: 0.85;
@iconButtonOpacity: 0.9;
@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
@animationDuration: 0.3s;
@animationEasing: ease;
@mini: 0.8rem;
@tiny: 0.875rem;
@mini: 0.7rem;
@tiny: 0.8rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@ -138,7 +140,7 @@
Hover
---------------*/
.ui.button:not(.loading):hover {
.ui.button:hover {
background-color: @hoverBackgroundColor;
background-image: @hoverBackgroundImage;
color: @selectedTextColor;
@ -153,8 +155,8 @@
Down
---------------*/
.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active {
.ui.button:active,
.ui.active.button:active {
background-color: @downBackgroundColor;
background-image: @downBackgroundImage;
color: @selectedTextColor;
@ -178,8 +180,8 @@
background-image: @activeBackgroundImage;
}
.ui.button.active:active {
background-color: @activeBackgroundColor !important;
background-image: @activeBackgroundImage !important;
background-color: @activeBackgroundColor;
background-image: @activeBackgroundImage;
}
@ -329,22 +331,22 @@
.ui.primary.buttons .button,
.ui.primary.button {
background-color: @primaryColor;
background: @primaryColor;
color: #FFFFFF;
}
.ui.primary.buttons .button:hover,
.ui.primary.button:hover {
background-color: @primaryColorHover;
background: @primaryColorHover;
color: #FFFFFF;
}
.ui.primary.buttons .button:active,
.ui.primary.button:active {
background-color: @primaryColorDown;
background: @primaryColorDown;
color: #FFFFFF;
}
.ui.primary.buttons .active.button,
.ui.primary.button.active {
background-color: @primaryColorActive;
background: @primaryColorActive;
color: #FFFFFF;
}
@ -354,22 +356,22 @@
.ui.secondary.buttons .button,
.ui.secondary.button {
background-color: @secondaryColor;
background: @secondaryColor;
color: #FFFFFF;
}
.ui.secondary.buttons .button:hover,
.ui.secondary.button:hover {
background-color: @secondaryColorHover;
background: @secondaryColorHover;
color: #FFFFFF;
}
.ui.secondary.buttons .button:active,
.ui.secondary.button:active {
background-color: @secondaryColorDown;
background: @secondaryColorDown;
color: #FFFFFF;
}
.ui.secondary.buttons .active.button,
.ui.secondary.button.active {
background-color: @secondaryColorActive;
background: @secondaryColorActive;
color: #FFFFFF;
}
@ -523,6 +525,18 @@
margin-left: 0.25em;
}
/*-------------------
Compact
--------------------*/
.ui.compact.buttons .button,
.ui.compact.button {
padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
}
.ui.compact.icon.buttons .button,
.ui.compact.buttons .icon.button {
padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
}
/*-------------------
@ -534,28 +548,11 @@
.ui.mini.button {
font-size: @mini;
}
.ui.mini.buttons .button,
.ui.mini.button {
padding: @compactPadding;
}
.ui.mini.icon.buttons .button,
.ui.mini.buttons .icon.button {
padding: @compactIconPadding;
}
.ui.tiny.buttons .button,
.ui.tiny.buttons .or,
.ui.tiny.button {
font-size: @tiny;
}
.ui.tiny.buttons .button,
.ui.tiny.buttons .button,
.ui.tiny.button {
padding: @compactPadding;
}
.ui.tiny.icon.buttons .button,
.ui.tiny.buttons .icon.button {
padding: @compactIconPadding;
}
.ui.small.buttons .button,
.ui.small.buttons .or,
.ui.small.button {
@ -659,25 +656,25 @@
}
.ui.basic.buttons {
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
border-radius: 0.25em;
border-radius: @borderRadius;
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
background-image: none;
color: #7F7F7F !important;
color: @selectedTextColor !important;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
}
.ui.basic.buttons .button:active,
.ui.basic.button:active {
background-color: rgba(0, 0, 0, 0.02) !important;
color: #7F7F7F !important;
color: @selectedTextColor !important;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.basic.buttons .button.active,
.ui.basic.button.active {
background-color: rgba(0, 0, 0, 0.05);
color: #7F7F7F;
color: @selectedTextColor;
box-shadow: 0px 0px 0px 1px #BDBDBD inset;
}
.ui.basic.buttons .button.active:hover,
@ -708,8 +705,8 @@
.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
position: relative;
padding-left: 4em !important;
padding-right: 1.4em !important;
padding-left: (@horizontalPadding + @labeledIconWidth) !important;
padding-right: @horizontalPadding !important;
}
.ui.labeled.icon.buttons > .button > .icon,
@ -719,35 +716,35 @@
left: 0em;
box-sizing: border-box;
width: 2.75em;
width: @labeledIconWidth;
height: 100%;
padding-top: 0.85em;
background-color: rgba(0, 0, 0, 0.05);
padding-top: (@verticalPadding + 0.05em);
background-color: @labeledIconBackgroundColor;
text-align: center;
border-radius: 0.25em 0px 0px 0.25em;
border-radius: @borderRadius 0px 0px @borderRadius;
line-height: 1;
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
box-shadow: @labeledIconBoxShadow;
}
.ui.labeled.icon.buttons .button > .icon {
border-radius: 0em;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
border-top-left-radius: @borderRadius;
border-bottom-left-radius: @borderRadius;
}
.ui.labeled.icon.buttons .button:last-child > .icon {
border-top-right-radius: 0.25em;
border-bottom-right-radius: 0.25em;
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: 0.25em;
border-top-left-radius: @borderRadius;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
border-radius: 0em;
border-bottom-left-radius: 0.25em;
border-bottom-left-radius: @borderRadius;
}
.ui.right.labeled.icon.button {
@ -764,7 +761,7 @@
left: auto;
right: 0em;
border-radius: 0em 0.25em 0.25em 0em;
border-radius: 0em @borderRadius @borderRadius 0em;
box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}
@ -777,12 +774,12 @@
.ui.toggle.buttons .active.button,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
background-color: #5BBD72 !important;
background-color: @positiveColor !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
.ui.button.toggle.active:hover {
background-color: #58CB73 !important;
background-color: @positiveColorHover !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
@ -805,10 +802,10 @@
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
}
.ui.attached.top.button {
border-radius: 0.25em 0.25em 0em 0em;
border-radius: @borderRadius @borderRadius 0em 0em;
}
.ui.attached.bottom.button {
border-radius: 0em 0em 0.25em 0.25em;
border-radius: 0em 0em @borderRadius @borderRadius;
}
.ui.attached.left.button {
display: inline-block;
@ -816,13 +813,13 @@
padding-right: 0.75em;
text-align: right;
border-radius: 0.25em 0em 0em 0.25em;
border-radius: @borderRadius 0em 0em @borderRadius;
}
.ui.attached.right.button {
display: inline-block;
padding-left: 0.75em;
text-align: left;
border-radius: 0em 0.25em 0.25em 0em;
border-radius: 0em @borderRadius @borderRadius 0em;
}
@ -852,12 +849,12 @@
height: 1.8em;
line-height: 1.55;
color: #AAAAAA;
color: @lightTextColor;
font-style: normal;
font-weight: normal;
text-align: center;
border-radius: 500px;
border-radius: 500em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@ -894,53 +891,53 @@
/* Plural Attached */
.attached.ui.buttons {
margin: 0px;
border-radius: 4px 4px 0px 0px;
border-radius: @borderRadius @borderRadius 0em 0em;
}
.attached.ui.buttons .button:first-child {
border-radius: 4px 0px 0px 0px;
border-radius: @borderRadius 0em 0em 0em;
}
.attached.ui.buttons .button:last-child {
border-radius: 0px 4px 0px 0px;
border-radius: 0em @borderRadius 0em 0em;
}
/* Bottom Side */
.bottom.attached.ui.buttons {
margin-top: -1px;
border-radius: 0px 0px 4px 4px;
border-radius: 0em 0em @borderRadius @borderRadius;
}
.bottom.attached.ui.buttons .button:first-child {
border-radius: 0px 0px 0px 4px;
border-radius: 0em 0em 0em @borderRadius;
}
.bottom.attached.ui.buttons .button:last-child {
border-radius: 0px 0px 4px 0px;
border-radius: 0em 0em @borderRadius 0em;
}
/* Left Side */
.left.attached.ui.buttons {
margin-left: -1px;
border-radius: 0px 4px 4px 0px;
border-radius: 0em @borderRadius @borderRadius 0em;
}
.left.attached.ui.buttons .button:first-child {
margin-left: -1px;
border-radius: 0px 4px 0px 0px;
border-radius: 0em @borderRadius 0em 0em;
}
.left.attached.ui.buttons .button:last-child {
margin-left: -1px;
border-radius: 0px 0px 4px 0px;
border-radius: 0em 0em @borderRadius 0em;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
margin-right: -1px;
border-radius: 4px 0px 0px 4px;
border-radius: @borderRadius 0em 0em @borderRadius;
}
.right.attached.ui.buttons .button:first-child {
margin-left: -1px;
border-radius: 4px 0px 0px 0px;
border-radius: @borderRadius 0em 0em 0em;
}
.right.attached.ui.buttons .button:last-child {
margin-left: -1px;
border-radius: 0px 0px 0px 4px;
border-radius: 0em 0em 0em @borderRadius;
}
@ -1055,135 +1052,219 @@
Colors
--------------------*/
/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
background-color: #5C6166;
background-color: @black;
color: #FFFFFF;
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
background-color: #4C4C4C;
background: @blackHover;
color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
background-color: #333333;
background: @blackDown;
color: #FFFFFF;
}
.ui.black.buttons .button.active,
.ui.black.buttons .button.active:active,
.ui.black.button.active,
.ui.black.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background: @blue;
color: #FFFFFF;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover {
background: @blueHover;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background: @blueDown;
color: #FFFFFF;
}
.ui.blue.buttons .button.active,
.ui.blue.buttons .button.active:active,
.ui.blue.button.active,
.ui.blue.button .button.active:active {
background: @blueActive;
color: #FFFFFF;
}
/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
background-color: #5BBD72;
background: @green;
color: #FFFFFF;
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
background-color: #58cb73;
.ui.green.button:hover {
background: @greenHover;
color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
background-color: #4CB164;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background-color: #D95C5C;
color: #FFFFFF;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
background-color: #E75859;
background: @greenDown;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background-color: #D24B4C;
.ui.green.buttons .button.active,
.ui.green.buttons .button.active:active,
.ui.green.button.active,
.ui.green.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Orange ---*/
.ui.orange.buttons .button,
.ui.orange.button {
background-color: #E96633;
background: @orange;
color: #FFFFFF;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover,
.ui.orange.buttons .active.button,
.ui.orange.button.active {
background-color: #FF7038;
.ui.orange.button:hover {
background: @orangeHover;
color: #FFFFFF;
}
.ui.orange.buttons .button:active,
.ui.orange.button:active {
background-color: #DA683B;
background: @orangeDown;
color: #FFFFFF;
}
.ui.orange.buttons .button.active,
.ui.orange.buttons .button.active:active,
.ui.orange.button.active,
.ui.orange.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background-color: #6ECFF5;
/*--- Pink ---*/
.ui.pink.buttons .button,
.ui.pink.button {
background: @pink;
color: #FFFFFF;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
background-color: #1AB8F3;
.ui.pink.buttons .button:hover,
.ui.pink.button:hover {
background: @pinkHover;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background-color: #0AA5DF;
.ui.pink.buttons .button:active,
.ui.pink.button:active {
background: @pinkDown;
color: #FFFFFF;
}
.ui.pink.buttons .button.active,
.ui.pink.buttons .button.active:active,
.ui.pink.button.active,
.ui.pink.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
background-color: #564F8A;
background: @purple;
color: #FFFFFF;
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
background-color: #3E3773;
.ui.purple.button:hover {
background: @purpleHover;
color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
background-color: #2E2860;
background: @purpleDown;
color: #FFFFFF;
}
.ui.purple.buttons .button.active,
.ui.purple.buttons .button.active:active,
.ui.purple.button.active,
.ui.purple.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background: @red;
color: #FFFFFF;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover {
background: @redHover;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background: @redDown;
color: #FFFFFF;
}
.ui.red.buttons .button.active,
.ui.red.buttons .button.active:active,
.ui.red.button.active,
.ui.red.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
background-color: #00B5AD;
background: @teal;
color: #FFFFFF;
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
background-color: #009A93;
.ui.teal.button:hover {
background: @tealHover;
color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
background-color: #00847E;
background: @tealDown;
color: #FFFFFF;
}
.ui.teal.buttons .button.active,
.ui.teal.buttons .button.active:active,
.ui.teal.button.active,
.ui.teal.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
/*--- Yellow ---*/
.ui.yellow.buttons .button,
.ui.yellow.button {
background: @yellow;
color: #FFFFFF;
}
.ui.yellow.buttons .button:hover,
.ui.yellow.button:hover {
background: @yellowHover;
color: #FFFFFF;
}
.ui.yellow.buttons .button:active,
.ui.yellow.button:active {
background: @yellowDown;
color: #FFFFFF;
}
.ui.yellow.buttons .button.active,
.ui.yellow.buttons .button.active:active,
.ui.yellow.button.active,
.ui.yellow.button .button.active:active {
background: @blackActive;
color: #FFFFFF;
}
@ -1193,19 +1274,19 @@
.ui.positive.buttons .button,
.ui.positive.button {
background-color: #5BBD72 !important;
background: @positiveColor !important;
color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active {
background-color: #58CB73 !important;
background: #58CB73 !important;
color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active {
background-color: #4CB164 !important;
background: #4CB164 !important;
color: #FFFFFF;
}
@ -1215,19 +1296,19 @@
----------------*/
.ui.negative.buttons .button,
.ui.negative.button {
background-color: #D95C5C !important;
background: #D95C5C !important;
color: #FFFFFF;
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover,
.ui.negative.buttons .active.button,
.ui.negative.button.active {
background-color: #E75859 !important;
background: #E75859 !important;
color: #FFFFFF;
}
.ui.negative.buttons .button:active,
.ui.negative.button:active {
background-color: #D24B4C !important;
background: #D24B4C !important;
color: #FFFFFF;
}
@ -1257,12 +1338,12 @@
}
.ui.buttons .button:first-child {
margin-left: 0em;
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
border-top-left-radius: @borderRadius;
border-bottom-left-radius: @borderRadius;
}
.ui.buttons .button:last-child {
border-top-right-radius: 0.25em;
border-bottom-right-radius: 0.25em;
border-top-right-radius: @borderRadius;
border-bottom-right-radius: @borderRadius;
}
/* Vertical Style */
@ -1281,7 +1362,7 @@
.ui.vertical.buttons .massive.button:first-child,
.ui.vertical.buttons .huge.button:first-child {
margin-top: 0px;
border-radius: 0.25em 0.25em 0px 0px;
border-radius: @borderRadius @borderRadius 0px 0px;
}
.ui.vertical.buttons .button:last-child,
.ui.vertical.buttons .mini.button:last-child,
@ -1290,5 +1371,5 @@
.ui.vertical.buttons .massive.button:last-child,
.ui.vertical.buttons .huge.button:last-child,
.ui.vertical.buttons .gigantic.button:last-child {
border-radius: 0px 0px 0.25em 0.25em;
border-radius: 0px 0px @borderRadius @borderRadius;
}

16
src/elements/header.less
View File

@ -25,12 +25,18 @@
// @green
// @purple
// @teal
// @midGrey
// @black
/*-------------------
Modified Globals
--------------------*/
@tiny: 1em;
@small: 1.1em;
@medium: 1.33em;
@large: 1.75em;
@huge: 2em;
/*-------------------
Header Variables
--------------------*/
@ -180,7 +186,7 @@ h5.ui.header {
*******************************/
.ui.disabled.header {
opacity: 0.5;
opacity: @disabledOpacity;
}
@ -197,7 +203,7 @@ h5.ui.header {
color: @blue !important;
}
.ui.black.header {
color: @midGrey !important;
color: @black !important;
}
.ui.green.header {
color: @green !important;
@ -216,7 +222,7 @@ h5.ui.header {
border-bottom: 3px solid @blue;
}
.ui.black.dividing.header {
border-bottom: 3px solid @midGrey;
border-bottom: 3px solid @black;
}
.ui.green.dividing.header {
border-bottom: 3px solid @green;
@ -248,7 +254,7 @@ h5.ui.header {
--------------------*/
.ui.inverted.black.header {
background-color: @midGrey !important;
background-color: @black !important;
color: @white !important;
}
.ui.inverted.blue.header {

188
src/global.variables
View File

@ -23,6 +23,13 @@
@headerFont : 'Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;';
@pageFont : 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;';
/*-------------------
Icons
--------------------*/
/* Width of largest icon */
@iconWidth : 1.23em;
/*******************************
Colors
@ -34,36 +41,35 @@
--------------------*/
/*--- Colors ---*/
@primaryColor : #D95C5C;
@secondaryColor : #00B5AD;
@tertiaryColor : #00B5AD;
@blue : #6ECFF5;
@gold : #FFCB08;
@green : #5BBD72;
@orange : #E96633;
@pink : #D9499A;
@purple : #564F8A;
@red : #D95C5C;
@teal : #00B5AD;
@white : #FFFFFF;
@yellow : #F6F3D5;
@yellow : #FFCB08;
@primaryColor : @teal;
@secondaryColor : @black;
@tertiaryColor : @orange;
/*--- Emotive ---*/
@positiveColor : @green;
@negativeColor : @red;
@positiveColor : @green;
@negativeColor : @red;
@infoColor : #E6F4F9;
@warningColor : #96904D;
@errorColor : #D95C5C;
@infoColor : #E6F4F9;
@warningColor : #96904D;
@errorColor : #D95C5C;
/*--- Neutrals ---*/
@darkGrey : #231F20;
@midGrey : #5C6166;
@grey : #9DA6AB;
@lightGrey : #DCDDDE;
@darkBlack : #232323;
@black : #555555;
@lightBlack : #999999;
@neutral : #CCCCCC;
@darkGrey : #AAAAAA;
@grey : #CCCCCC;
@lightGrey : #DCDDDE;
@white : #FFFFFF;
@offWhite : #FAFAFA;
@ -93,7 +99,6 @@
@instagramColor : #49769C;
@pinterestColor : #00ACED;
/*-------------------
Borders
--------------------*/
@ -139,48 +144,47 @@
--------------------*/
/*--- Colors ---*/
@primaryColorHover : darken( saturate(@primaryColor, 10), 10);
@secondaryColorHover : darken( saturate(@secondaryColor, 10), 10);
@tertiaryColorHover : darken( saturate(@tertiaryColor, 10), 10);
@blueHover : darken( saturate(@blue, 10), 10);
@goldHover : darken( saturate(@gold, 10), 10);
@greenHover : darken( saturate(@green, 10), 10);
@orangeHover : darken( saturate(@orange, 10), 10);
@pinkHover : darken( saturate(@pink, 10), 10);
@purpleHover : darken( saturate(@purple, 10), 10);
@redHover : darken( saturate(@red, 10), 10);
@tealHover : darken( saturate(@teal, 10), 10);
@whiteHover : darken( saturate(@white, 10), 10);
@yellowHover : darken( saturate(@yellow, 10), 10);
@primaryColorHover : darken( saturate(@primaryColor, 10), 5);
@secondaryColorHover : darken( saturate(@secondaryColor, 10), 5);
@tertiaryColorHover : darken( saturate(@tertiaryColor, 10), 5);
@blueHover : darken( saturate(@blue, 10), 5);
@greenHover : darken( saturate(@green, 10), 5);
@orangeHover : darken( saturate(@orange, 10), 5);
@pinkHover : darken( saturate(@pink, 10), 5);
@purpleHover : darken( saturate(@purple, 10), 5);
@redHover : darken( saturate(@red, 10), 5);
@tealHover : darken( saturate(@teal, 10), 5);
@yellowHover : darken( saturate(@yellow, 10), 5);
/*--- Emotive ---*/
@positiveColorHover : darken( saturate(@positiveColor, 10), 10);
@negativeColorHover : darken( saturate(@negativeColor, 10), 10);
@positiveColorHover : darken( saturate(@positiveColor, 10), 5);
@negativeColorHover : darken( saturate(@negativeColor, 10), 5);
@infoColorHover : darken( saturate(@infoColor, 10), 10);
@warningColorHover : darken( saturate(@warningColor, 10), 10);
@errorColorHover : darken( saturate(@errorColor, 10), 10);
@infoColorHover : darken( saturate(@infoColor, 10), 5);
@warningColorHover : darken( saturate(@warningColor, 10), 5);
@errorColorHover : darken( saturate(@errorColor, 10), 5);
/*--- Neutrals ---*/
@darkGreyHover : darken( saturate(@darkGrey, 10), 10);
@midGreyHover : darken( saturate(@midGrey, 10), 10);
@greyHover : darken( saturate(@grey, 10), 10);
@lightGreyHover : darken( saturate(@lightGrey, 10), 10);
@darkBlackHover : darken( saturate(@darkBlack, 10), 5);
@blackHover : darken( saturate(@black, 10), 5);
@lightBlackHover : darken( saturate(@lightBlack, 10), 5);
@neutralHover : darken( saturate(@neutral, 10), 10);
@lightGreyHover : darken( saturate(@lightGrey, 10), 5);
@greyHover : darken( saturate(@grey, 10), 5);
@darkGreyHover : darken( saturate(@darkGrey, 10), 5);
@whiteHover : darken( saturate(@white, 10), 10);
@offWhiteHover : darken( saturate(@offWhite, 10), 10);
@darkWhiteHover : darken( saturate(@darkWhite, 10), 10);
@whiteHover : darken( saturate(@white, 10), 5);
@offWhiteHover : darken( saturate(@offWhite, 10), 5);
@darkWhiteHover : darken( saturate(@darkWhite, 10), 5);
@facebookHoverColor : darken( saturate(@facebookColor, 10), 10);
@twitterHoverColor : darken( saturate(@twitterColor, 10), 10);
@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 10);
@linkedInHoverColor : darken( saturate(@linkedInColor, 10), 10);
@youtubeHoverColor : darken( saturate(@youtubeColor, 10), 10);
@instagramHoverColor : darken( saturate(@instagramColor, 10), 10);
@pinterestHoverColor : darken( saturate(@pinterestColor, 10), 10);
@facebookHoverColor : darken( saturate(@facebookColor, 10), 5);
@twitterHoverColor : darken( saturate(@twitterColor, 10), 5);
@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 5);
@linkedInHoverColor : darken( saturate(@linkedInColor, 10), 5);
@youtubeHoverColor : darken( saturate(@youtubeColor, 10), 5);
@instagramHoverColor : darken( saturate(@instagramColor, 10), 5);
@pinterestHoverColor : darken( saturate(@pinterestColor, 10), 5);
/*-------------------
@ -189,48 +193,47 @@
/*--- Colors ---*/
@primaryColorDown : darken(@primaryColor, 10);
@secondaryColorDown : darken(@secondaryColor, 10);
@tertiaryColorDown : darken(@tertiaryColor, 10);
@blueDown : darken(@blue, 10);
@goldDown : darken(@gold, 10);
@greenDown : darken(@green, 10);
@orangeDown : darken(@orange, 10);
@pinkDown : darken(@pink, 10);
@purpleDown : darken(@purple, 10);
@redDown : darken(@red, 10);
@tealDown : darken(@teal, 10);
@whiteDown : darken(@white, 10);
@yellowDown : darken(@yellow, 10);
@primaryColorDown : darken(@primaryColor, 15);
@secondaryColorDown : darken(@secondaryColor, 15);
@tertiaryColorDown : darken(@tertiaryColor, 15);
@blueDown : darken(@blue, 15);
@greenDown : darken(@green, 15);
@orangeDown : darken(@orange, 15);
@pinkDown : darken(@pink, 15);
@purpleDown : darken(@purple, 15);
@redDown : darken(@red, 15);
@tealDown : darken(@teal, 15);
@yellowDown : darken(@yellow, 15);
/*--- Emotive ---*/
@positiveColorDown : darken(@positiveColor, 10);
@negativeColorDown : darken(@negativeColor, 10);
@positiveColorDown : darken(@positiveColor, 15);
@negativeColorDown : darken(@negativeColor, 15);
@infoColorDown : darken(@infoColor, 10);
@warningColorDown : darken(@warningColor, 10);
@errorColorDown : darken(@errorColor, 10);
@infoColorDown : darken(@infoColor, 15);
@warningColorDown : darken(@warningColor, 15);
@errorColorDown : darken(@errorColor, 15);
/*--- Neutrals ---*/
@darkGreyDown : darken(@darkGrey, 10);
@midGreyDown : darken(@midGrey, 10);
@greyDown : darken(@grey, 10);
@lightGreyDown : darken(@lightGrey, 10);
@darkBlackDown : darken(@darkBlack, 15);
@blackDown : darken(@black, 15);
@lightBlackDown : darken(@lightBlack, 15);
@neutralDown : darken(@neutral, 10);
@lightGreyDown : darken(@lightGrey, 15);
@greyDown : darken(@grey, 15);
@darkGreyDown : darken(@darkGrey, 15);
@whiteDown : darken(@white, 10);
@offWhiteDown : darken(@offWhite, 10);
@darkWhiteDown : darken(@darkWhite, 10);
@whiteDown : darken(@white, 15);
@offWhiteDown : darken(@offWhite, 15);
@darkWhiteDown : darken(@darkWhite, 15);
@facebookDownColor : darken(@facebookColor, 10);
@twitterDownColor : darken(@twitterColor, 10);
@googlePlusDownColor : darken(@googlePlusColor, 10);
@linkedInDownColor : darken(@linkedInColor, 10);
@youtubeDownColor : darken(@youtubeColor, 10);
@instagramDownColor : darken(@instagramColor, 10);
@pinterestDownColor : darken(@pinterestColor, 10);
@facebookDownColor : darken(@facebookColor, 15);
@twitterDownColor : darken(@twitterColor, 15);
@googlePlusDownColor : darken(@googlePlusColor, 15);
@linkedInDownColor : darken(@linkedInColor, 15);
@youtubeDownColor : darken(@youtubeColor, 15);
@instagramDownColor : darken(@instagramColor, 15);
@pinterestDownColor : darken(@pinterestColor, 15);
/*-------------------
@ -243,14 +246,12 @@
@tertiaryColorActive : lighten(@tertiaryColor, 10);
@blueActive : lighten(@blue, 10);
@goldActive : lighten(@gold, 10);
@greenActive : lighten(@green, 10);
@orangeActive : lighten(@orange, 10);
@pinkActive : lighten(@pink, 10);
@purpleActive : lighten(@purple, 10);
@redActive : lighten(@red, 10);
@tealActive : lighten(@teal, 10);
@whiteActive : lighten(@white, 10);
@yellowActive : lighten(@yellow, 10);
/*--- Emotive ---*/
@ -262,12 +263,13 @@
@errorColorActive : lighten(@errorColor, 10);
/*--- Neutrals ---*/
@darkGreyActive : lighten(@darkGrey, 10);
@midGreyActive : lighten(@midGrey, 10);
@greyActive : lighten(@grey, 10);
@lightGreyActive : lighten(@lightGrey, 10);
@darkBlackActive : lighten(@darkBlack, 10);
@blackActive : lighten(@black, 10);
@lightBlackActive : lighten(@lightBlack, 10);
@neutralActive : lighten(@neutral, 10);
@lightGreyActive : lighten(@lightGrey, 10);
@greyActive : lighten(@grey, 10);
@darkGreyActive : lighten(@darkGrey, 10);
@whiteActive : lighten(@white, 10);
@offWhiteActive : lighten(@offWhite, 10);

Write Preview
Loading…
Cancel
Save