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

Github button theme

pull/636/head
jlukic 11 years ago
parent
e6a4e7d471
commit
5884a4b3e9
8 changed files with 242 additions and 120 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      server/documents/elements/button.html.eco
  2. 270
      src/elements/button.less
  3. 18
      src/semantic.config
  4. 6
      src/theme.include
  5. 7
      src/themes/default/elements/button.variables
  6. 2
      src/themes/default/global.variables
  7. 4
      src/themes/github/elements/button.overrides
  8. 53
      src/themes/github/elements/button.variables

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

@ -251,7 +251,7 @@ type : 'UI Element'
<h4 class="ui header">Colors</h4> <h4 class="ui header">Colors</h4>
<p>A button can have different colors:</p> <p>A button can have different colors:</p>
<a class="ui black button">Black Button</a> <a class="ui black button">Black Button</a>
<a class="ui yellow button">yellow Button</a>
<a class="ui yellow button">Yellow Button</a>
<a class="ui green button">Green Button</a> <a class="ui green button">Green Button</a>
<a class="ui blue button">Blue Button</a> <a class="ui blue button">Blue Button</a>
</div> </div>

270
src/elements/button.less
View File

@ -18,7 +18,6 @@
@import '../semantic.config'; @import '../semantic.config';
/******************************* /*******************************
Button Button
*******************************/ *******************************/
@ -40,6 +39,7 @@
padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
text-transform: @textTransform; text-transform: @textTransform;
text-shadow: @textShadow;
font-weight: @fontWeight; font-weight: @fontWeight;
line-height: 1; line-height: 1;
font-style: normal; font-style: normal;
@ -122,6 +122,7 @@
cursor: default; cursor: default;
background-color: #FFFFFF !important; background-color: #FFFFFF !important;
text-shadow: none !important;
color: transparent !important; color: transparent !important;
transition: all 0s linear; transition: all 0s linear;
} }
@ -259,23 +260,27 @@
.ui.primary.buttons .button, .ui.primary.buttons .button,
.ui.primary.button { .ui.primary.button {
background: @primaryColor;
color: #FFFFFF;
background-color: @primaryColor;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.primary.buttons .button:hover, .ui.primary.buttons .button:hover,
.ui.primary.button:hover { .ui.primary.button:hover {
background: @primaryColorHover;
color: #FFFFFF;
background-color: @primaryColorHover;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.primary.buttons .button:active, .ui.primary.buttons .button:active,
.ui.primary.button:active { .ui.primary.button:active {
background: @primaryColorDown;
color: #FFFFFF;
background-color: @primaryColorDown;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.primary.buttons .active.button, .ui.primary.buttons .active.button,
.ui.primary.button.active { .ui.primary.button.active {
background: @primaryColorActive;
color: #FFFFFF;
background-color: @primaryColorActive;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*------------------- /*-------------------
@ -284,23 +289,27 @@
.ui.secondary.buttons .button, .ui.secondary.buttons .button,
.ui.secondary.button { .ui.secondary.button {
background: @secondaryColor;
color: #FFFFFF;
background-color: @secondaryColor;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.secondary.buttons .button:hover, .ui.secondary.buttons .button:hover,
.ui.secondary.button:hover { .ui.secondary.button:hover {
background: @secondaryColorHover;
color: #FFFFFF;
background-color: @secondaryColorHover;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.secondary.buttons .button:active, .ui.secondary.buttons .button:active,
.ui.secondary.button:active { .ui.secondary.button:active {
background: @secondaryColorDown;
color: #FFFFFF;
background-color: @secondaryColorDown;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button,
.ui.secondary.button.active { .ui.secondary.button.active {
background: @secondaryColorActive;
color: #FFFFFF;
background-color: @secondaryColorActive;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*------------------- /*-------------------
@ -310,100 +319,121 @@
/* Facebook */ /* Facebook */
.ui.facebook.button { .ui.facebook.button {
background-color: @facebookColor; background-color: @facebookColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.facebook.button:hover { .ui.facebook.button:hover {
background-color: @facebookHoverColor; background-color: @facebookHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.facebook.button:active { .ui.facebook.button:active {
background-color: @facebookDownColor; background-color: @facebookDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* Twitter */ /* Twitter */
.ui.twitter.button { .ui.twitter.button {
background-color: @twitterColor; background-color: @twitterColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.twitter.button:hover { .ui.twitter.button:hover {
background-color: @twitterHoverColor; background-color: @twitterHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.twitter.button:active { .ui.twitter.button:active {
background-color: @twitterDownColor; background-color: @twitterDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* Google Plus */ /* Google Plus */
.ui.google.plus.button { .ui.google.plus.button {
background-color: @googlePlusColor; background-color: @googlePlusColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.google.plus.button:hover { .ui.google.plus.button:hover {
background-color: @googlePlusHoverColor; background-color: @googlePlusHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.google.plus.button:active { .ui.google.plus.button:active {
background-color: @googlePlusDownColor; background-color: @googlePlusDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* Linked In */ /* Linked In */
.ui.linkedin.button { .ui.linkedin.button {
background-color: @linkedInColor; background-color: @linkedInColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.linkedin.button:hover { .ui.linkedin.button:hover {
background-color: @linkedInHoverColor; background-color: @linkedInHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.linkedin.button:active { .ui.linkedin.button:active {
background-color: @linkedInDownColor; background-color: @linkedInDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* YouTube */ /* YouTube */
.ui.youtube.button { .ui.youtube.button {
background-color: @youtubeColor; background-color: @youtubeColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.youtube.button:hover { .ui.youtube.button:hover {
background-color: @youtubeHoverColor; background-color: @youtubeHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.youtube.button:active { .ui.youtube.button:active {
background-color: @youtubeDownColor; background-color: @youtubeDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* Instagram */ /* Instagram */
.ui.instagram.button { .ui.instagram.button {
background-color: @instagramColor; background-color: @instagramColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.instagram.button:hover { .ui.instagram.button:hover {
background-color: @instagramHoverColor; background-color: @instagramHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.instagram.button:active { .ui.instagram.button:active {
background-color: @instagramDownColor; background-color: @instagramDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/* Pinterest */ /* Pinterest */
.ui.pinterest.button { .ui.pinterest.button {
background-color: @pinterestColor; background-color: @pinterestColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.pinterest.button:hover { .ui.pinterest.button:hover {
background-color: @pinterestHoverColor; background-color: @pinterestHoverColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.pinterest.button:active { .ui.pinterest.button:active {
background-color: @pinterestDownColor; background-color: @pinterestDownColor;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*-------------- /*--------------
@ -458,11 +488,11 @@
.ui.compact.buttons .button, .ui.compact.buttons .button,
.ui.compact.button { .ui.compact.button {
padding: @compactVerticalPadding @compactHorizontalPadding @shadowOffset;
padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
} }
.ui.compact.icon.buttons .button, .ui.compact.icon.buttons .button,
.ui.compact.buttons .icon.button { .ui.compact.buttons .icon.button {
padding: @compactVerticalPadding @compactVerticalPadding @shadowOffset;
padding: @compactVerticalPadding @compactVerticalPadding ( @compactHorizontalPadding + @shadowOffset );
} }
@ -578,6 +608,7 @@
color: @textColor !important; color: @textColor !important;
font-weight: normal; font-weight: normal;
text-transform: none; text-transform: none;
text-shadow: none !important;
padding: @verticalPadding @horizontalPadding !important; padding: @verticalPadding @horizontalPadding !important;
box-shadow: 0px 0px 0px 1px @borderColor inset; box-shadow: 0px 0px 0px 1px @borderColor inset;
} }
@ -633,7 +664,8 @@
.ui.basic.inverted.buttons .button.active, .ui.basic.inverted.buttons .button.active,
.ui.basic.inverted.button.active { .ui.basic.inverted.button.active {
background-color: @transparentWhite; background-color: @transparentWhite;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
box-shadow: none; box-shadow: none;
} }
.ui.basic.inverted.buttons .button.active:hover, .ui.basic.inverted.buttons .button.active:hover,
@ -654,7 +686,7 @@
.ui.labeled.icon.buttons .button, .ui.labeled.icon.buttons .button,
.ui.labeled.icon.button { .ui.labeled.icon.button {
position: relative; position: relative;
padding-left: (@horizontalPadding + @labeledIconWidth) !important;
padding-left: @labeledIconPadding !important;
padding-right: @horizontalPadding !important; padding-right: @horizontalPadding !important;
} }
@ -673,7 +705,7 @@
border-radius: @borderRadius 0px 0px @borderRadius; border-radius: @borderRadius 0px 0px @borderRadius;
line-height: 1; line-height: 1;
box-shadow: @labeledIconBoxShadow;
box-shadow: -1px 0px 0px 0px @labeledIconBorder inset;
} }
.ui.labeled.icon.buttons .button > .icon { .ui.labeled.icon.buttons .button > .icon {
@ -697,21 +729,20 @@
} }
.ui.right.labeled.icon.button { .ui.right.labeled.icon.button {
padding-left: 1.4em !important;
padding-right: 4em !important;
padding-right: @labeledIconPadding !important;
padding-left: @horizontalPadding !important;
} }
.ui.left.fluid.labeled.icon.button, .ui.left.fluid.labeled.icon.button,
.ui.right.fluid.labeled.icon.button { .ui.right.fluid.labeled.icon.button {
padding-left: 1.4em !important;
padding-right: 1.4em !important;
padding-left: @horizontalPadding !important;
padding-right: @horizontalPadding !important;
} }
.ui.right.labeled.icon.button .icon { .ui.right.labeled.icon.button .icon {
left: auto; left: auto;
right: 0em; right: 0em;
border-radius: 0em @borderRadius @borderRadius 0em; border-radius: 0em @borderRadius @borderRadius 0em;
box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
box-shadow: 1px 0px 0px 0px @labeledIconBorder inset;
} }
@ -725,11 +756,13 @@
.ui.buttons .button.toggle.active, .ui.buttons .button.toggle.active,
.ui.button.toggle.active { .ui.button.toggle.active {
background-color: @positiveColor !important; background-color: @positiveColor !important;
color: #FFFFFF !important;
text-shadow: @invertedTextShadow;
color: @invertedTextColor !important;
} }
.ui.button.toggle.active:hover { .ui.button.toggle.active:hover {
background-color: @positiveColorHover !important; background-color: @positiveColorHover !important;
color: #FFFFFF !important;
text-shadow: @invertedTextShadow;
color: @invertedTextColor !important;
} }
/*-------------- /*--------------
@ -789,6 +822,7 @@
left: 50%; left: 50%;
content: 'or'; content: 'or';
background-color: #FFFFFF; background-color: #FFFFFF;
text-shadow: @invertedTextShadow;
margin-top: -0.1em; margin-top: -0.1em;
margin-left: -0.9em; margin-left: -0.9em;
@ -1004,216 +1038,252 @@
.ui.black.buttons .button, .ui.black.buttons .button,
.ui.black.button { .ui.black.button {
background-color: @black; background-color: @black;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.black.buttons .button:hover, .ui.black.buttons .button:hover,
.ui.black.button:hover { .ui.black.button:hover {
background-color: @blackHover; background-color: @blackHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.black.buttons .button:active, .ui.black.buttons .button:active,
.ui.black.button:active { .ui.black.button:active {
background-color: @blackDown; background-color: @blackDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.black.buttons .button.active, .ui.black.buttons .button.active,
.ui.black.buttons .button.active:active, .ui.black.buttons .button.active:active,
.ui.black.button.active, .ui.black.button.active,
.ui.black.button .button.active:active { .ui.black.button .button.active:active {
background-color: @blackActive; background-color: @blackActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Blue ---*/ /*--- Blue ---*/
.ui.blue.buttons .button, .ui.blue.buttons .button,
.ui.blue.button { .ui.blue.button {
background-color: @blue; background-color: @blue;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.blue.buttons .button:hover, .ui.blue.buttons .button:hover,
.ui.blue.button:hover { .ui.blue.button:hover {
background-color: @blueHover; background-color: @blueHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.blue.buttons .button:active, .ui.blue.buttons .button:active,
.ui.blue.button:active { .ui.blue.button:active {
background-color: @blueDown; background-color: @blueDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.blue.buttons .button.active, .ui.blue.buttons .button.active,
.ui.blue.buttons .button.active:active, .ui.blue.buttons .button.active:active,
.ui.blue.button.active, .ui.blue.button.active,
.ui.blue.button .button.active:active { .ui.blue.button .button.active:active {
background-color: @blueActive; background-color: @blueActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Green ---*/ /*--- Green ---*/
.ui.green.buttons .button, .ui.green.buttons .button,
.ui.green.button { .ui.green.button {
background-color: @green; background-color: @green;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.green.buttons .button:hover, .ui.green.buttons .button:hover,
.ui.green.button:hover { .ui.green.button:hover {
background-color: @greenHover; background-color: @greenHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.green.buttons .button:active, .ui.green.buttons .button:active,
.ui.green.button:active { .ui.green.button:active {
background-color: @greenDown; background-color: @greenDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.green.buttons .button.active, .ui.green.buttons .button.active,
.ui.green.buttons .button.active:active, .ui.green.buttons .button.active:active,
.ui.green.button.active, .ui.green.button.active,
.ui.green.button .button.active:active { .ui.green.button .button.active:active {
background-color: @greenActive; background-color: @greenActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Orange ---*/ /*--- Orange ---*/
.ui.orange.buttons .button, .ui.orange.buttons .button,
.ui.orange.button { .ui.orange.button {
background-color: @orange; background-color: @orange;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.orange.buttons .button:hover, .ui.orange.buttons .button:hover,
.ui.orange.button:hover { .ui.orange.button:hover {
background-color: @orangeHover; background-color: @orangeHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.orange.buttons .button:active, .ui.orange.buttons .button:active,
.ui.orange.button:active { .ui.orange.button:active {
background-color: @orangeDown; background-color: @orangeDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.orange.buttons .button.active, .ui.orange.buttons .button.active,
.ui.orange.buttons .button.active:active, .ui.orange.buttons .button.active:active,
.ui.orange.button.active, .ui.orange.button.active,
.ui.orange.button .button.active:active { .ui.orange.button .button.active:active {
background-color: @blackActive; background-color: @blackActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Pink ---*/ /*--- Pink ---*/
.ui.pink.buttons .button, .ui.pink.buttons .button,
.ui.pink.button { .ui.pink.button {
background-color: @pink; background-color: @pink;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.pink.buttons .button:hover, .ui.pink.buttons .button:hover,
.ui.pink.button:hover { .ui.pink.button:hover {
background-color: @pinkHover; background-color: @pinkHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.pink.buttons .button:active, .ui.pink.buttons .button:active,
.ui.pink.button:active { .ui.pink.button:active {
background-color: @pinkDown; background-color: @pinkDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.pink.buttons .button.active, .ui.pink.buttons .button.active,
.ui.pink.buttons .button.active:active, .ui.pink.buttons .button.active:active,
.ui.pink.button.active, .ui.pink.button.active,
.ui.pink.button .button.active:active { .ui.pink.button .button.active:active {
background-color: @pinkActive; background-color: @pinkActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Purple ---*/ /*--- Purple ---*/
.ui.purple.buttons .button, .ui.purple.buttons .button,
.ui.purple.button { .ui.purple.button {
background-color: @purple; background-color: @purple;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.purple.buttons .button:hover, .ui.purple.buttons .button:hover,
.ui.purple.button:hover { .ui.purple.button:hover {
background-color: @purpleHover; background-color: @purpleHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.purple.buttons .button:active, .ui.purple.buttons .button:active,
.ui.purple.button:active { .ui.purple.button:active {
background-color: @purpleDown; background-color: @purpleDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.purple.buttons .button.active, .ui.purple.buttons .button.active,
.ui.purple.buttons .button.active:active, .ui.purple.buttons .button.active:active,
.ui.purple.button.active, .ui.purple.button.active,
.ui.purple.button .button.active:active { .ui.purple.button .button.active:active {
background-color: @purpleActive; background-color: @purpleActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Red ---*/ /*--- Red ---*/
.ui.red.buttons .button, .ui.red.buttons .button,
.ui.red.button { .ui.red.button {
background-color: @red; background-color: @red;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.red.buttons .button:hover, .ui.red.buttons .button:hover,
.ui.red.button:hover { .ui.red.button:hover {
background-color: @redHover; background-color: @redHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.red.buttons .button:active, .ui.red.buttons .button:active,
.ui.red.button:active { .ui.red.button:active {
background-color: @redDown; background-color: @redDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.red.buttons .button.active, .ui.red.buttons .button.active,
.ui.red.buttons .button.active:active, .ui.red.buttons .button.active:active,
.ui.red.button.active, .ui.red.button.active,
.ui.red.button .button.active:active { .ui.red.button .button.active:active {
background-color: @redActive; background-color: @redActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Teal ---*/ /*--- Teal ---*/
.ui.teal.buttons .button, .ui.teal.buttons .button,
.ui.teal.button { .ui.teal.button {
background-color: @teal; background-color: @teal;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.teal.buttons .button:hover, .ui.teal.buttons .button:hover,
.ui.teal.button:hover { .ui.teal.button:hover {
background-color: @tealHover; background-color: @tealHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.teal.buttons .button:active, .ui.teal.buttons .button:active,
.ui.teal.button:active { .ui.teal.button:active {
background-color: @tealDown; background-color: @tealDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.teal.buttons .button.active, .ui.teal.buttons .button.active,
.ui.teal.buttons .button.active:active, .ui.teal.buttons .button.active:active,
.ui.teal.button.active, .ui.teal.button.active,
.ui.teal.button .button.active:active { .ui.teal.button .button.active:active {
background-color: @tealActive; background-color: @tealActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--- Yellow ---*/ /*--- Yellow ---*/
.ui.yellow.buttons .button, .ui.yellow.buttons .button,
.ui.yellow.button { .ui.yellow.button {
background-color: @yellow; background-color: @yellow;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.yellow.buttons .button:hover, .ui.yellow.buttons .button:hover,
.ui.yellow.button:hover { .ui.yellow.button:hover {
background-color: @yellowHover; background-color: @yellowHover;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.yellow.buttons .button:active, .ui.yellow.buttons .button:active,
.ui.yellow.button:active { .ui.yellow.button:active {
background-color: @yellowDown; background-color: @yellowDown;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.yellow.buttons .button.active, .ui.yellow.buttons .button.active,
.ui.yellow.buttons .button.active:active, .ui.yellow.buttons .button.active:active,
.ui.yellow.button.active, .ui.yellow.button.active,
.ui.yellow.button .button.active:active { .ui.yellow.button .button.active:active {
background-color: @yellowActive; background-color: @yellowActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/*--------------- /*---------------
@ -1223,26 +1293,30 @@
.ui.positive.buttons .button, .ui.positive.buttons .button,
.ui.positive.button { .ui.positive.button {
background-color: @positiveColor !important; background-color: @positiveColor !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.positive.buttons .button:hover, .ui.positive.buttons .button:hover,
.ui.positive.button:hover, .ui.positive.button:hover,
.ui.positive.buttons .active.button, .ui.positive.buttons .active.button,
.ui.positive.button.active { .ui.positive.button.active {
background-color: @positiveColorHover !important; background-color: @positiveColorHover !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.positive.buttons .button:active, .ui.positive.buttons .button:active,
.ui.positive.button:active { .ui.positive.button:active {
background-color: @positiveColorDown !important; background-color: @positiveColorDown !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.positive.buttons .button.active, .ui.positive.buttons .button.active,
.ui.positive.buttons .button.active:active, .ui.positive.buttons .button.active:active,
.ui.positive.button.active, .ui.positive.button.active,
.ui.positive.button .button.active:active { .ui.positive.button .button.active:active {
background-color: @positiveColorActive; background-color: @positiveColorActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
@ -1252,26 +1326,30 @@
.ui.negative.buttons .button, .ui.negative.buttons .button,
.ui.negative.button { .ui.negative.button {
background-color: @negativeColor !important; background-color: @negativeColor !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.negative.buttons .button:hover, .ui.negative.buttons .button:hover,
.ui.negative.button:hover, .ui.negative.button:hover,
.ui.negative.buttons .active.button, .ui.negative.buttons .active.button,
.ui.negative.button.active { .ui.negative.button.active {
background-color: @negativeColorHover !important; background-color: @negativeColorHover !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.negative.buttons .button:active, .ui.negative.buttons .button:active,
.ui.negative.button:active { .ui.negative.button:active {
background-color: @negativeColorDown !important; background-color: @negativeColorDown !important;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
.ui.negative.buttons .button.active, .ui.negative.buttons .button.active,
.ui.negative.buttons .button.active:active, .ui.negative.buttons .button.active:active,
.ui.negative.button.active, .ui.negative.button.active,
.ui.negative.button .button.active:active { .ui.negative.button .button.active:active {
background-color: @negativeColorActive; background-color: @negativeColorActive;
color: #FFFFFF;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
} }
/******************************* /*******************************
@ -1335,3 +1413,5 @@
.ui.vertical.buttons .gigantic.button:last-child { .ui.vertical.buttons .gigantic.button:last-child {
border-radius: 0px 0px @borderRadius @borderRadius; border-radius: 0px 0px @borderRadius @borderRadius;
} }
.loadUIOverrides() !important;

18
src/semantic.config
View File

@ -12,10 +12,7 @@
/* Elements */ /* Elements */
@button : 'default';
// Example Uncomment Below
@button : 'github'; @button : 'github';
@icon : 'default'; @icon : 'default';
@divider : 'default'; @divider : 'default';
@header : 'default'; @header : 'default';
@ -67,4 +64,17 @@
/* Import */ /* Import */
@elementTheme : @@element; @elementTheme : @@element;
@import "theme.include";
@import "themes/default/global.variables";
@import "themes/default/@{type}s/@{element}.variables";
@import "themes/@{theme}/global.variables";
@import "themes/@{elementTheme}/@{type}s/@{element}.variables";
@import "themes/user/global.variables";
@import "themes/user/@{type}s/@{element}.variables";
.loadUIOverrides() {
@import "themes/@{elementTheme}/@{type}s/@{element}.overrides";
@import "themes/user/@{type}s/@{element}.overrides";
}

6
src/theme.include
View File

@ -11,8 +11,4 @@
.loadUIOverrides() { .loadUIOverrides() {
@import "themes/@{elementTheme}/@{type}s/@{element}.overrides"; @import "themes/@{elementTheme}/@{type}s/@{element}.overrides";
@import "themes/user/@{type}s/@{element}.overrides"; @import "themes/user/@{type}s/@{element}.overrides";
}
.loadGlobal();
.loadUIVariables();
.loadUIOverrides() !important;
}

7
src/themes/default/elements/button.variables
View File

@ -8,6 +8,7 @@
// @transitionEasing // @transitionEasing
// @iconWidth // @iconWidth
// @borderColor // @borderColor
// @textColor, @invertedTextColor
/*------------------- /*-------------------
Button Variables Button Variables
@ -18,6 +19,9 @@
@fontWeight: bold; @fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6); @textColor: rgba(0, 0, 0, 0.6);
@textShadow: none;
@invertedTextShadow: none;
@borderRadius: 0.25em; @borderRadius: 0.25em;
@shadowDistance: 0em; @shadowDistance: 0em;
@ -55,7 +59,8 @@
@labeledIconWidth: @iconWidth + (@verticalPadding * 2); @labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
@labeledIconBorder: rgba(0, 0, 0, 0.05);
@floatedMargin: 0.25em; @floatedMargin: 0.25em;

2
src/themes/default/global.variables
View File

@ -94,6 +94,8 @@
@textColor : rgba(0, 0, 0, 0.7); @textColor : rgba(0, 0, 0, 0.7);
@lightTextColor : rgba(0, 0, 0, 0.4); @lightTextColor : rgba(0, 0, 0, 0.4);
@invertedTextColor : rgba(255, 255, 255, 1);
@selectedTextColor : rgba(0, 0, 0, 0.8); @selectedTextColor : rgba(0, 0, 0, 0.8);
@disabledTextColor : rgba(0, 0, 0, 0.2); @disabledTextColor : rgba(0, 0, 0, 0.2);

4
src/themes/github/elements/button.overrides
View File

@ -1,3 +1,7 @@
/******************************* /*******************************
Overrides Overrides
*******************************/ *******************************/
.ui.button {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

53
src/themes/github/elements/button.variables
View File

@ -3,35 +3,60 @@
--------------------*/ --------------------*/
/* Button Variables */ /* Button Variables */
@textTransform: normal;
@textTransform: none;
@fontWeight: bold; @fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);
@textColor: #333333;
@verticalPadding: 0.8em;
@horizontalPadding: 1.2em;
@textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
@invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
@compactVerticalPadding: @verticalPadding;
@compactHorizontalPadding: @horizontalPadding;
@borderRadius: 0.25em;
@verticalPadding: 0.75em;
@horizontalPadding: 1.15em;
@backgroundColor: #FAFAFA; @backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@backgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
@boxShadow:
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
0 0 0 1px rgba(0, 0, 0, 0.13) inset,
0 1px 3px rgba(0, 0, 0, 0.05)
;
@hoverBackgroundColor: ''; @hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
@hoverBoxShadow: ''; @hoverBoxShadow: '';
@downBackgroundColor: #F1F1F1;
@downBackgroundColor: '';
@downBackgroundImage: ''; @downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@activeBackgroundColor: #EAEAEA;
@downBoxShadow:
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
0 0 0 1px rgba(0, 0, 0, 0.13) inset,
0 3px 5px rgba(0, 0, 0, 0.15) inset
;
@activeBackgroundColor: #DFDFDF;
@activeBackgroundImage: none; @activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@activeBoxShadow:
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
0 0 0 1px rgba(0, 0, 0, 0.13) inset,
0 3px 5px rgba(0, 0, 0, 0.1) inset
;
@labeledIconBackgroundColor: transparent;
@labeledIconBorder: transparent;
@labeledIconPadding: (@horizontalPadding + 2.25em);
@blue: #3072B3;
@green: #60B044;
@black: #5D5D5D;
@primaryColor: @blue;
@secondaryColor: @black;
@mini: 0.6rem; @mini: 0.6rem;
@tiny: 0.7rem; @tiny: 0.7rem;
@small: 0.8rem;
@medium: 0.875rem;
@small: 0.85rem;
@medium: 0.92rem;
@large: 1rem; @large: 1rem;
@big: 1.125rem; @big: 1.125rem;
@huge: 1.25rem; @huge: 1.25rem;

Write Preview
Loading…
Cancel
Save