|
|
/* * # Semantic - Button * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Theme *******************************/
@type : 'element'; @element : 'button';
@import '../semantic.config';
/******************************* Button *******************************/
/* Prototype */ .ui.button { cursor: pointer; display: inline-block; vertical-align: middle;
min-height: 1em;
outline: none; border: none; background-color: @backgroundColor; color: @textColor;
margin: 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
font-family: @fontFamily; text-transform: @textTransform; text-shadow: @textShadow; font-weight: @fontWeight; line-height: 1; font-style: normal; text-align: center; text-decoration: none;
background-image: @backgroundImage; border-radius: @borderRadius; box-shadow: @boxShadow;
user-select: none; box-sizing: border-box; transition: opacity @transitionDuration @transitionEasing, background-color @transitionDuration @transitionEasing, color @transitionDuration @transitionEasing, background @transitionDuration @transitionEasing, box-shadow @transitionDuration @transitionEasing ; }
/******************************* States *******************************/
/*-------------- Hover ---------------*/
.ui.button:hover { background-color: @hoverBackgroundColor; background-image: @hoverBackgroundImage; color: @selectedTextColor; }
.ui.button:hover .icon, .ui.button.hover .icon { opacity: @iconHoverOpacity; }
/*-------------- Down ---------------*/
.ui.button:active, .ui.active.button:active { background-color: @downBackgroundColor; background-image: @downBackgroundImage; color: @selectedTextColor; box-shadow: @downBoxShadow; }
/*-------------- Active ---------------*/
.ui.active.button { background-color: @activeBackgroundColor; background-image: @activeBackgroundImage; box-shadow: @activeBoxShadow; color: @textColor; } .ui.button.active:hover { background-color: @activeBackgroundColor; background-image: @activeBackgroundImage; } .ui.button.active:active { background-color: @activeBackgroundColor; background-image: @activeBackgroundImage; }
/*-------------- Loading ---------------*/
.ui.loading.button { position: relative; cursor: default;
background-color: #FFFFFF !important; text-shadow: none !important; color: transparent !important; transition: all 0s linear; } .ui.loading.button:after { position: absolute; top: 0em; right: 0em; width: 100%; height: 100%; content: ''; background: transparent url("@{imagePath}/loader-mini.gif") no-repeat 50% 50%; } .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none; }
/*------------------- Disabled --------------------*/
.ui.disabled.button, .ui.disabled.button:hover, .ui.disabled.button.active { cursor: default; background-color: @lightGrey !important; color: @lightTextColor !important; opacity: @disabledOpacity !important; background-image: none !important; box-shadow: none !important; }
/******************************* Types *******************************/
/*------------------- Animated --------------------*/
.ui.animated.button { position: relative; overflow: hidden; }
.ui.animated.button .visible.content { position: relative; } .ui.animated.button .hidden.content { position: absolute; width: 100%; }
/* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content { transition: left @animationDuration @animationEasing 0s; } .ui.animated.button .visible.content { right: auto; left: 0%; } .ui.animated.button .hidden.content { top: 50%; right: auto; left: -100%; margin-top: -0.5em; } .ui.animated.button:hover .visible.content { right: auto; left: 200%; } .ui.animated.button:hover .hidden.content { right: auto; left: 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%); left: auto; } .ui.vertical.animated.button .hidden.content { top: -100%; right: 0%; left: auto; } .ui.vertical.animated.button:hover .visible.content { transform: translateY(200%); left: auto; } .ui.vertical.animated.button:hover .hidden.content { top: 50%; left: 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 { right: auto; left: auto; opacity: 1; transform: scale(1); } .ui.fade.animated.button .hidden.content { opacity: 0; right: 0%; left: auto; transform: scale(@fadeScaleHigh); } .ui.fade.animated.button:hover .visible.content { right: auto; left: auto; opacity: 0; transform: scale(@fadeScaleLow); } .ui.fade.animated.button:hover .hidden.content { right: 0%; left: auto; opacity: 1; transform: scale(1); }
/*------------------- Primary --------------------*/
.ui.primary.buttons .button, .ui.primary.button { background-color: @primaryColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: @primaryColorHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: @primaryColorDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.primary.buttons .active.button, .ui.primary.button.active { background-color: @primaryColorActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*------------------- Secondary --------------------*/
.ui.secondary.buttons .button, .ui.secondary.button { background-color: @secondaryColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { background-color: @secondaryColorHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.secondary.buttons .button:active, .ui.secondary.button:active { background-color: @secondaryColorDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.secondary.buttons .active.button, .ui.secondary.button.active { background-color: @secondaryColorActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*------------------- Social --------------------*/
/* Facebook */ .ui.facebook.button { background-color: @facebookColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.facebook.button:hover { background-color: @facebookHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.facebook.button:active { background-color: @facebookDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/* Twitter */ .ui.twitter.button { background-color: @twitterColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.twitter.button:hover { background-color: @twitterHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.twitter.button:active { background-color: @twitterDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/* Google Plus */ .ui.google.plus.button { background-color: @googlePlusColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .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; }
/* 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; }
/* YouTube */ .ui.youtube.button { background-color: @youtubeColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.youtube.button:hover { background-color: @youtubeHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.youtube.button:active { background-color: @youtubeDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/* Instagram */ .ui.instagram.button { background-color: @instagramColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.instagram.button:hover { background-color: @instagramHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.instagram.button:active { background-color: @instagramDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/* Pinterest */ .ui.pinterest.button { background-color: @pinterestColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.pinterest.button:hover { background-color: @pinterestHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.pinterest.button:active { background-color: @pinterestDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*-------------- Icon ---------------*/
.ui.button > .icon { margin-left: @iconMargin;
line-height: 1;
-webkit-transition: opacity 0.1s @transitionEasing ; -moz-transition: opacity 0.1s @transitionEasing ; -o-transition: opacity 0.1s @transitionEasing ; -ms-transition: opacity 0.1s @transitionEasing ; transition: opacity 0.1s @transitionEasing ; }
/******************************* Variations *******************************/
/*------------------- Floated --------------------*/
.ui.left.floated.buttons, .ui.left.floated.button { float: right; margin-left: @floatedMargin; } .ui.right.floated.buttons, .ui.right.floated.button { float: left; margin-right: @floatedMargin; }
/*------------------- Compact --------------------*/
.ui.compact.buttons .button, .ui.compact.button { padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset ); } .ui.compact.icon.buttons .button, .ui.compact.buttons .icon.button { padding: @compactVerticalPadding @compactVerticalPadding ( @compactHorizontalPadding + @shadowOffset ); }
/*------------------- 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.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; }
/* Or resize */ .ui.tiny.buttons .or:before, .ui.mini.buttons .or:before { width: 1.45em; height: 1.55em; line-height: 1.4; margin-right: -0.725em; margin-top: -0.25em; } .ui.tiny.buttons .or:after, .ui.mini.buttons .or:after { height: 1.45em; }
/* loading */ .ui.huge.loading.button:after { background-image: url("@{imagePath}/loader-small.gif"); } .ui.massive.buttons .loading.button:after, .ui.gigantic.buttons .loading.button:after, .ui.massive.loading.button:after, .ui.gigantic.loading.button:after { background-image: url("@{imagePath}/loader-medium.gif"); }
.ui.huge.loading.button:after, .ui.huge.loading.button.active:after { background-image: url("@{imagePath}/loader-small.gif"); } .ui.massive.buttons .loading.button:after, .ui.gigantic.buttons .loading.button:after, .ui.massive.loading.button:after, .ui.gigantic.loading.button:after, .ui.massive.buttons .loading.button.active:after, .ui.gigantic.buttons .loading.button.active:after, .ui.massive.loading.button.active:after, .ui.gigantic.loading.button.active:after { background-image: url("@{imagePath}/loader-medium.gif"); }
/*-------------- Icon Only ---------------*/
.ui.icon.buttons .button, .ui.icon.button { padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: @iconButtonOpacity; margin: 0em; }
/*------------------- Basic --------------------*/
.ui.basic.buttons .button, .ui.basic.button { background-color: transparent !important; background-image: none; color: @textColor !important; font-weight: normal; text-transform: none; text-shadow: none !important; padding: @verticalPadding @horizontalPadding !important; box-shadow: 0px 0px 0px 1px @borderColor inset; } .ui.basic.labeled.icon.button > .icon { padding-top: (@verticalPadding + 0.05em) !important; } .ui.basic.buttons { box-shadow: 0px 0px 0px 1px @borderColor inset; border-radius: @borderRadius; }
.ui.basic.buttons .button:hover, .ui.basic.button:hover { background-image: none; color: @selectedTextColor !important; box-shadow: @selectedBorderColor inset; } .ui.basic.buttons .button:active, .ui.basic.button:active { background-color: rgba(0, 0, 0, 0.02) !important; color: @selectedTextColor !important; box-shadow: 0px 0px 0px 1px @borderColor inset; } .ui.basic.buttons .button.active, .ui.basic.button.active { background-color: @transparentBlack !important; color: @selectedTextColor; box-shadow: @selectedBorderColor inset; } .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover { background-color: @transparentBlack; }
/* Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button { color: @offWhite !important; box-shadow: @whiteBorderColor; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover { background-image: none; color: #FFFFFF !important; box-shadow: @whiteBorderColor; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active { background-color: @transparentWhite !important; color: #FFFFFF !important; box-shadow: @selectedWhiteBorderColor inset !important; } .ui.basic.inverted.buttons .button.active, .ui.basic.inverted.button.active { background-color: @transparentWhite; color: @invertedTextColor; text-shadow: @invertedTextShadow; box-shadow: none; } .ui.basic.inverted.buttons .button.active:hover, .ui.basic.inverted.button.active:hover { background-color: @strongTransparentWhite; }
/* Basic Group */ .ui.basic.buttons .button { border-right: 1px solid @borderColor; box-shadow: none; }
/*-------------- Labeled Icon ---------------*/
.ui.labeled.icon.buttons .button, .ui.labeled.icon.button { position: relative; padding-right: @labeledIconPadding !important; padding-left: @horizontalPadding !important; }
.ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { position: absolute; top: 0em; right: 0em; box-sizing: border-box;
width: @labeledIconWidth; height: 100%; padding-top: (@verticalPadding + 0.05em); background-color: @labeledIconBackgroundColor; text-align: center;
border-radius: 0px @borderRadius @borderRadius 0px; line-height: 1; box-shadow: -1px 0px 0px 0px @labeledIconBorder inset; }
.ui.labeled.icon.buttons .button > .icon { border-radius: 0em; } .ui.labeled.icon.buttons .button:first-child > .icon { border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius; } .ui.labeled.icon.buttons .button:last-child > .icon { border-top-left-radius: @borderRadius; border-bottom-left-radius: @borderRadius; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon { border-radius: 0em; border-top-right-radius: @borderRadius; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon { border-radius: 0em; border-bottom-right-radius: @borderRadius; }
.ui.right.labeled.icon.button { padding-left: @labeledIconPadding !important; padding-right: @horizontalPadding !important; } .ui.left.fluid.labeled.icon.button, .ui.right.fluid.labeled.icon.button { padding-right: @horizontalPadding !important; padding-left: @horizontalPadding !important; }
.ui.right.labeled.icon.button .icon { right: auto; left: 0em; border-radius: @borderRadius 0em 0em @borderRadius; box-shadow: 1px 0px 0px 0px @labeledIconBorder inset; }
/*-------------- Toggle ---------------*/
/* 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; text-shadow: @invertedTextShadow; color: @invertedTextColor !important; } .ui.button.toggle.active:hover { background-color: @positiveColorHover !important; text-shadow: @invertedTextShadow; color: @invertedTextColor !important; }
/*-------------- Circular ---------------*/
.ui.circular.button { border-radius: 10em; }
/*-------------- Attached ---------------*/
.ui.attached.button { display: block; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; } .ui.attached.top.button { border-radius: @borderRadius @borderRadius 0em 0em; } .ui.attached.bottom.button { border-radius: 0em 0em @borderRadius @borderRadius; } .ui.attached.left.button { display: inline-block; border-right: none;
padding-left: 0.75em; text-align: left; border-radius: 0em @borderRadius @borderRadius 0em; } .ui.attached.right.button { display: inline-block; padding-right: 0.75em; text-align: right; border-radius: @borderRadius 0em 0em @borderRadius; }
/*------------------- Or Buttons --------------------*/
.ui.buttons .or { position: relative; float: right; width: 0.3em; height: 1.1em; z-index: 3; } .ui.buttons .or:before { position: absolute; top: 50%; right: 50%; content: 'or'; background-color: #FFFFFF; text-shadow: @invertedTextShadow;
margin-top: -0.1em; margin-right: -0.9em;
width: 1.8em; height: 1.8em;
line-height: 1.55; color: @lightTextColor; font-style: normal; font-weight: normal; text-align: center;
border-radius: 500em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-sizing: border-box; } .ui.buttons .or:after { position: absolute; top: 0em; right: 0em; content: ' ';
width: 0.3em; height: 1.7em;
background-color: transparent; border-top: 0.5em solid #FFFFFF; border-bottom: 0.5em solid #FFFFFF;
}
/* Fluid Or */ .ui.fluid.buttons .or { width: 0em !important; } .ui.fluid.buttons .or:after{ display: none; }
/*------------------- Attached --------------------*/
/* Plural Attached */ .attached.ui.buttons { margin: 0px; border-radius: @borderRadius @borderRadius 0em 0em; } .attached.ui.buttons .button:first-child { border-radius: 0em @borderRadius 0em 0em; } .attached.ui.buttons .button:last-child { border-radius: @borderRadius 0em 0em 0em; }
/* Bottom Side */ .bottom.attached.ui.buttons { margin-top: -1px; border-radius: 0em 0em @borderRadius @borderRadius; } .bottom.attached.ui.buttons .button:first-child { border-radius: 0em 0em @borderRadius 0em; } .bottom.attached.ui.buttons .button:last-child { border-radius: 0em 0em 0em @borderRadius; }
/* Left Side */ .left.attached.ui.buttons { margin-right: -1px; border-radius: @borderRadius 0em 0em @borderRadius; } .left.attached.ui.buttons .button:first-child { margin-right: -1px; border-radius: @borderRadius 0em 0em 0em; } .left.attached.ui.buttons .button:last-child { margin-right: -1px; border-radius: 0em 0em 0em @borderRadius; } /* Right Side */ .right.attached.ui.buttons, .right.attached.ui.buttons .button { margin-left: -1px; border-radius: 0em @borderRadius @borderRadius 0em; } .right.attached.ui.buttons .button:first-child { margin-right: -1px; border-radius: 0em @borderRadius 0em 0em; } .right.attached.ui.buttons .button:last-child { margin-right: -1px; border-radius: 0em 0em @borderRadius 0em; }
/* Fluid */ .ui.fluid.buttons, .ui.button.fluid, .ui.fluid.buttons > .button { display: block; width: 100%; } .ui.\32.buttons > .button, .ui.two.buttons > .button { width: 50%; } .ui.\33.buttons > .button, .ui.three.buttons > .button { width: 33.333%; } .ui.\34.buttons > .button, .ui.four.buttons > .button { width: 25%; } .ui.\35.buttons > .button, .ui.five.buttons > .button { width: 20%; } .ui.\36.buttons > .button, .ui.six.buttons > .button { width: 16.666%; } .ui.\37.buttons > .button, .ui.seven.buttons > .button { width: 14.285%; } .ui.\38.buttons > .button, .ui.eight.buttons > .button { width: 12.500%; } .ui.\39.buttons > .button, .ui.nine.buttons > .button { width: 11.11%; } .ui.\31\30.buttons > .button, .ui.ten.buttons > .button { width: 10%; } .ui.\31\31.buttons > .button, .ui.eleven.buttons > .button { width: 9.09%; } .ui.\31\32.buttons > .button, .ui.twelve.buttons > .button { width: 8.3333%; }
/* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button { display: block; width: auto; box-sizing: border-box; }
.ui.\32.vertical.buttons > .button, .ui.two.vertical.buttons > .button { height: 50%; } .ui.\33.vertical.buttons > .button, .ui.three.vertical.buttons > .button { height: 33.333%; } .ui.\34.vertical.buttons > .button, .ui.four.vertical.buttons > .button { height: 25%; } .ui.\35.vertical.buttons > .button, .ui.five.vertical.buttons > .button { height: 20%; } .ui.\36.vertical.buttons > .button, .ui.six.vertical.buttons > .button { height: 16.666%; } .ui.\37.vertical.buttons > .button, .ui.seven.vertical.buttons > .button { height: 14.285%; } .ui.\38.vertical.buttons > .button, .ui.eight.vertical.buttons > .button { height: 12.500%; } .ui.\39.vertical.buttons > .button, .ui.nine.vertical.buttons > .button { height: 11.11%; } .ui.\31\30.vertical.buttons > .button, .ui.ten.vertical.buttons > .button { height: 10%; } .ui.\31\31.vertical.buttons > .button, .ui.eleven.vertical.buttons > .button { height: 9.09%; } .ui.\31\32.vertical.buttons > .button, .ui.twelve.vertical.buttons > .button { height: 8.3333%; }
/*------------------- Colors --------------------*/
/*--- Black ---*/ .ui.black.buttons .button, .ui.black.button { background-color: @black; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.black.buttons .button:hover, .ui.black.button:hover { background-color: @blackHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.black.buttons .button:active, .ui.black.button:active { background-color: @blackDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.black.buttons .button.active, .ui.black.buttons .button.active:active, .ui.black.button.active, .ui.black.button .button.active:active { background-color: @blackActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button { background-color: @blue; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.blue.buttons .button:hover, .ui.blue.button:hover { background-color: @blueHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.blue.buttons .button:active, .ui.blue.button:active { background-color: @blueDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.blue.buttons .button.active, .ui.blue.buttons .button.active:active, .ui.blue.button.active, .ui.blue.button .button.active:active { background-color: @blueActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Green ---*/ .ui.green.buttons .button, .ui.green.button { background-color: @green; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.green.buttons .button:hover, .ui.green.button:hover { background-color: @greenHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.green.buttons .button:active, .ui.green.button:active { background-color: @greenDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.green.buttons .button.active, .ui.green.buttons .button.active:active, .ui.green.button.active, .ui.green.button .button.active:active { background-color: @greenActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Orange ---*/ .ui.orange.buttons .button, .ui.orange.button { background-color: @orange; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.orange.buttons .button:hover, .ui.orange.button:hover { background-color: @orangeHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.orange.buttons .button:active, .ui.orange.button:active { background-color: @orangeDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.orange.buttons .button.active, .ui.orange.buttons .button.active:active, .ui.orange.button.active, .ui.orange.button .button.active:active { background-color: @blackActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Pink ---*/ .ui.pink.buttons .button, .ui.pink.button { background-color: @pink; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.pink.buttons .button:hover, .ui.pink.button:hover { background-color: @pinkHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.pink.buttons .button:active, .ui.pink.button:active { background-color: @pinkDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.pink.buttons .button.active, .ui.pink.buttons .button.active:active, .ui.pink.button.active, .ui.pink.button .button.active:active { background-color: @pinkActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Purple ---*/ .ui.purple.buttons .button, .ui.purple.button { background-color: @purple; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.purple.buttons .button:hover, .ui.purple.button:hover { background-color: @purpleHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.purple.buttons .button:active, .ui.purple.button:active { background-color: @purpleDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.purple.buttons .button.active, .ui.purple.buttons .button.active:active, .ui.purple.button.active, .ui.purple.button .button.active:active { background-color: @purpleActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Red ---*/ .ui.red.buttons .button, .ui.red.button { background-color: @red; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.red.buttons .button:hover, .ui.red.button:hover { background-color: @redHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.red.buttons .button:active, .ui.red.button:active { background-color: @redDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.red.buttons .button.active, .ui.red.buttons .button.active:active, .ui.red.button.active, .ui.red.button .button.active:active { background-color: @redActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Teal ---*/ .ui.teal.buttons .button, .ui.teal.button { background-color: @teal; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.teal.buttons .button:hover, .ui.teal.button:hover { background-color: @tealHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.teal.buttons .button:active, .ui.teal.button:active { background-color: @tealDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.teal.buttons .button.active, .ui.teal.buttons .button.active:active, .ui.teal.button.active, .ui.teal.button .button.active:active { background-color: @tealActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--- Yellow ---*/ .ui.yellow.buttons .button, .ui.yellow.button { background-color: @yellow; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.yellow.buttons .button:hover, .ui.yellow.button:hover { background-color: @yellowHover; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.yellow.buttons .button:active, .ui.yellow.button:active { background-color: @yellowDown; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.yellow.buttons .button.active, .ui.yellow.buttons .button.active:active, .ui.yellow.button.active, .ui.yellow.button .button.active:active { background-color: @yellowActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--------------- Positive ----------------*/
.ui.positive.buttons .button, .ui.positive.button { background-color: @positiveColor !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.positive.buttons .button:hover, .ui.positive.button:hover, .ui.positive.buttons .active.button, .ui.positive.button.active { background-color: @positiveColorHover !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.positive.buttons .button:active, .ui.positive.button:active { background-color: @positiveColorDown !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.positive.buttons .button.active, .ui.positive.buttons .button.active:active, .ui.positive.button.active, .ui.positive.button .button.active:active { background-color: @positiveColorActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/*--------------- Negative ----------------*/ .ui.negative.buttons .button, .ui.negative.button { background-color: @negativeColor !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.negative.buttons .button:hover, .ui.negative.button:hover, .ui.negative.buttons .active.button, .ui.negative.button.active { background-color: @negativeColorHover !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.negative.buttons .button:active, .ui.negative.button:active { background-color: @negativeColorDown !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; } .ui.negative.buttons .button.active, .ui.negative.buttons .button.active:active, .ui.negative.button.active, .ui.negative.button .button.active:active { background-color: @negativeColorActive; color: @invertedTextColor; text-shadow: @invertedTextShadow; }
/******************************* Groups *******************************/
.ui.buttons { display: inline-block; vertical-align: middle; } .ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ui.buttons .button:first-child { border-right: none; }
.ui.buttons .button { float: right; border-radius: 0em; } .ui.buttons .button:first-child { margin-right: 0em; border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius; } .ui.buttons .button:last-child { border-top-left-radius: @borderRadius; border-bottom-left-radius: @borderRadius; }
/* Vertical Style */ .ui.vertical.buttons { display: inline-block; } .ui.vertical.buttons .button { display: block; float: none; box-shadow: 0px 0px 0px 1px @borderColor inset; } .ui.vertical.buttons .button:first-child, .ui.vertical.buttons .mini.button:first-child, .ui.vertical.buttons .tiny.button:first-child, .ui.vertical.buttons .small.button:first-child, .ui.vertical.buttons .massive.button:first-child, .ui.vertical.buttons .huge.button:first-child { margin-top: 0px; border-radius: @borderRadius @borderRadius 0px 0px; } .ui.vertical.buttons .button:last-child, .ui.vertical.buttons .mini.button:last-child, .ui.vertical.buttons .tiny.button:last-child, .ui.vertical.buttons .small.button:last-child, .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 @borderRadius @borderRadius; }
.loadUIOverrides() !important;
|