/* * # Semantic - Button * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘element’; @element : ‘button’;
@import ‘../../theme.config’;
/*******************************
Button
*******************************/
.ui.button {
cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: @verticalAlign; background-color: @backgroundColor; color: @textColor; font-family: @fontFamily; margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); 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; transition: @transition; will-change: @willChange; -webkit-tap-highlight-color: @tapColor;
}
/*******************************
States
*******************************/
/*————–
Hover
—————*/
.ui.button:hover {
background-color: @hoverBackgroundColor; background-image: @hoverBackgroundImage; box-shadow: @hoverBoxShadow; color: @hoverColor;
}
.ui.button:hover .icon {
opacity: @iconHoverOpacity;
}
/*————–
Focus
—————*/
.ui.button:focus {
background-color: @focusBackgroundColor; background-image: @focusBackgroundImage; box-shadow: @focusBoxShadow; color: @focusColor;
}
.ui.button:focus .icon {
opacity: @iconFocusOpacity;
}
/*————–
Down
—————*/
.ui.button:active, .ui.active.button:active {
background-color: @downBackgroundColor; background-image: @downBackgroundImage; color: @downColor; box-shadow: @downBoxShadow;
}
/*————–
Active
—————*/
.ui.active.button {
background-color: @activeBackgroundColor; background-image: @activeBackgroundImage; box-shadow: @activeBoxShadow; color: @activeColor;
} .ui.button.active:hover {
background-color: @activeHoverBackgroundColor; background-image: @activeHoverBackgroundImage; color: @activeHoverColor;
} .ui.button.active:active {
background-color: @activeBackgroundColor; background-image: @activeBackgroundImage;
}
/*————–
Loading
—————*/
/* Specificity hack */ .ui.loading.loading.loading.loading.loading.loading.button {
position: relative; cursor: default; point-events: none; text-shadow: none !important; color: transparent !important; transition: all 0s linear;
} .ui.loading.button:before {
position: absolute; content: ''; top: 50%; left: 50%; margin: @loaderMargin; width: @loaderSize; height: @loaderSize; border-radius: @circularRadius; border: @loaderLineWidth solid @invertedLoaderFillColor;
} .ui.loading.button:after {
position: absolute; content: ''; top: 50%; left: 50%; margin: @loaderMargin; width: @loaderSize; height: @loaderSize; animation: button-spin @loaderSpeed linear; animation-iteration-count: infinite; border-radius: @circularRadius; border-color: @invertedLoaderLineColor transparent transparent; border-style: solid; border-width: @loaderLineWidth; box-shadow: 0px 0px 0px 1px transparent;
} .ui.labeled.icon.loading.button .icon {
background-color: transparent; box-shadow: none;
}
@keyframes button-spin {
from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.ui.basic.loading.button:not(.inverted):before {
border-color: @loaderFillColor;
} .ui.basic.loading.button:not(.inverted):after {
border-top-color: @loaderLineColor;
}
/*——————-
Disabled
——————–*/
.ui.buttons .disabled.button, .ui.disabled.button, .ui.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; pointer-events: none;
}
/*******************************
Types
*******************************/
/*——————-
Animated
——————–*/
.ui.animated.button {
position: relative; overflow: hidden; vertical-align: @animatedVerticalAlign; padding-right: 0em !important;
}
.ui.animated.button .content {
will-change: transform, opacity;
} .ui.animated.button .visible.content {
position: relative; margin-right: @horizontalPadding;
} .ui.animated.button .hidden.content {
position: absolute; width: 100%;
}
/* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content {
transition: right @animationDuration @animationEasing 0s;
} .ui.animated.button .visible.content {
left: auto; right: 0%;
} .ui.animated.button .hidden.content {
top: 50%; left: auto; right: -100%; margin-top: -0.5em;
} .ui.animated.button:hover .visible.content {
left: auto; right: 200%;
} .ui.animated.button:hover .hidden.content {
left: auto; right: 0%;
}
/* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content {
transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
} .ui.vertical.animated.button .visible.content {
transform: translateY(0%); right: auto;
} .ui.vertical.animated.button .hidden.content {
top: -50%; left: 0%; right: auto;
} .ui.vertical.animated.button:hover .visible.content {
transform: translateY(200%); right: auto;
} .ui.vertical.animated.button:hover .hidden.content {
top: 50%; right: auto;
}
/* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content {
transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
} .ui.fade.animated.button .visible.content {
left: auto; right: auto; opacity: 1; transform: scale(1);
} .ui.fade.animated.button .hidden.content {
opacity: 0; left: 0%; right: auto; transform: scale(@fadeScaleHigh);
} .ui.fade.animated.button:hover .visible.content {
left: auto; right: auto; opacity: 0; transform: scale(@fadeScaleLow);
} .ui.fade.animated.button:hover .hidden.content {
left: 0%; right: auto; opacity: 1; transform: scale(1);
}
/*——————-
Inverted
——————–*/
.ui.inverted.button {
box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; background: transparent none; color: @white; text-shadow: none !important;
}
.ui.inverted.buttons .button {
margin: @invertedGroupButtonOffset;
} .ui.inverted.buttons .button:first-child {
margin-left: 0em;
} .ui.inverted.vertical.buttons .button {
margin: @invertedVerticalGroupButtonOffset;
} .ui.inverted.vertical.buttons .button:first-child {
margin-top: 0em;
} .ui.inverted.buttons .button:hover {
position: relative;
} .ui.inverted.button:hover {
background: @white; box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; color: @hoverColor;
}
/*——————-
Social
——————–*/
/* Facebook */ .ui.facebook.button {
background-color: @facebookColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.facebook.button:hover {
background-color: @facebookHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.facebook.button:active {
background-color: @facebookDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* Twitter */ .ui.twitter.button {
background-color: @twitterColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.twitter.button:hover {
background-color: @twitterHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.twitter.button:active {
background-color: @twitterDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* Google Plus */ .ui.google.plus.button {
background-color: @googlePlusColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.google.plus.button:hover {
background-color: @googlePlusHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.google.plus.button:active {
background-color: @googlePlusDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* 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; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.youtube.button:hover {
background-color: @youtubeHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.youtube.button:active {
background-color: @youtubeDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* Instagram */ .ui.instagram.button {
background-color: @instagramColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.instagram.button:hover {
background-color: @instagramHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.instagram.button:active {
background-color: @instagramDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* Pinterest */ .ui.pinterest.button {
background-color: @pinterestColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.pinterest.button:hover {
background-color: @pinterestHoverColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
} .ui.pinterest.button:active {
background-color: @pinterestDownColor; color: @invertedTextColor; text-shadow: @invertedTextShadow;
}
/* VK */ .ui.vk.button {
background-color: #4D7198; color: @white; background-image: @coloredBackgroundImage; box-shadow: @coloredBoxShadow;
} .ui.vk.button:hover {
background-color: @vkHoverColor; color: @white;
} .ui.vk.button:active {
background-color: @vkDownColor; color: @white;
}
/*————–
Icon
—————*/
.ui.button > .icon {
opacity: @iconOpacity; margin: @iconMargin; transition: @iconTransition; vertical-align: @iconVerticalAlign; color: @iconColor;
} .ui.button > .right.icon {
margin: @rightIconMargin;
}
/*******************************
Variations
*******************************/
/*——————-
Floated
——————–*/
.ui[class*=“left floated”].buttons, .ui[class*=“left floated”].button {
float: left; margin-left: 0em; margin-right: @floatedMargin;
} .ui[class*=“right floated”].buttons, .ui[class*=“right floated”].button {
float: right; margin-right: 0em; margin-left: @floatedMargin;
}
/*——————-
Compact
——————–*/
.ui.compact.buttons .button, .ui.compact.button {
padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
} .ui.compact.icon.buttons .button, .ui.compact.icon.button {
padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
} .ui.compact.labeled.icon.buttons .button, .ui.compact.labeled.icon.button {
padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
}
/*——————-
Sizes
——————–*/
.ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button {
font-size: @mini;
} .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button {
font-size: @tiny;
} .ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button {
font-size: @small;
} .ui.buttons .button, .ui.buttons .or, .ui.button {
font-size: @medium;
} .ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button {
font-size: @large;
} .ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button {
font-size: @big;
} .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button {
font-size: @huge;
} .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button {
font-size: @massive;
}
/*————–
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; vertical-align: top;
}
/*——————-
Basic
——————–*/
.ui.basic.buttons .button, .ui.basic.button {
background: @basicBackground !important; background-image: none; color: @basicTextColor !important; font-weight: @basicFontWeight; border-radius: @basicBorderRadius; text-transform: @basicTextTransform; text-shadow: none !important; box-shadow: @basicBoxShadow;
} .ui.basic.buttons {
box-shadow: @basicGroupBoxShadow; border-radius: @borderRadius;
} .ui.basic.buttons .button {
border-radius: 0em;
}
.ui.basic.buttons .button:hover, .ui.basic.button:hover {
background: @basicHoverBackground !important; color: @basicHoverTextColor !important; box-shadow: @basicHoverBoxShadow;
} .ui.basic.buttons .button:active, .ui.basic.button:active {
background: @basicDownBackground !important; color: @basicDownTextColor !important; box-shadow: @basicDownBoxShadow;
} .ui.basic.buttons .button.active, .ui.basic.button.active {
background: @basicActiveBackground !important; box-shadow: @basicActiveBoxShadow !important; color: @basicActiveTextColor; box-shadow: @selectedBorderColor;
} .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover {
background-color: @transparentBlack;
}
/* Vertical */ .ui.basic.buttons .button:hover {
box-shadow: @basicHoverBoxShadow inset;
} .ui.basic.buttons .button:active {
box-shadow: @basicDownBoxShadow inset;
} .ui.basic.buttons .button.active {
box-shadow: @selectedBorderColor inset;
}
/* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button {
background-color: transparent !important; color: @offWhite !important; box-shadow: @basicInvertedBoxShadow !important;
} .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover {
color: @white !important; box-shadow: @basicInvertedHoverBoxShadow !important;
} .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active {
background-color: @transparentWhite !important; color: @white !important; box-shadow: @basicInvertedDownBoxShadow !important;
} .ui.basic.inverted.buttons .button.active, .ui.basic.inverted.button.active {
background-color: @transparentWhite; color: @invertedTextColor; text-shadow: @invertedTextShadow; box-shadow: @basicInvertedActiveBoxShadow;
} .ui.basic.inverted.buttons .button.active:hover, .ui.basic.inverted.button.active:hover {
background-color: @strongTransparentWhite; box-shadow: @basicInvertedHoverBoxShadow !important;
}
/* Basic Group */ .ui.basic.buttons .button {
border-left: @basicGroupBorder; box-shadow: none;
} .ui.basic.vertical.buttons .button {
border-left: none;
}
/*————–
Labeled Icon
—————*/
.ui.labeled.icon.buttons .button, .ui.labeled.icon.button {
position: relative; padding-left: @labeledIconPadding !important; padding-right: @horizontalPadding !important;
}
/* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon {
position: absolute; width: @labeledIconWidth; height: 100%; background-color: @labeledIconBackgroundColor; text-align: center; color: @labeledIconColor; border-radius: @borderRadius 0px 0px @borderRadius; line-height: 1; box-shadow: @labeledIconLeftShadow;
}
/* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon {
top: 0em; left: 0em;
}
/* Right Labeled */ .ui[class*=“right labeled”].icon.button {
padding-right: @labeledIconPadding !important; padding-left: @horizontalPadding !important;
} .ui[class*=“right labeled”].icon.button > .icon {
left: auto; right: 0em; border-radius: 0em @borderRadius @borderRadius 0em; box-shadow: @labeledIconRightShadow;
}
.ui.labeled.icon.buttons > .button > .icon:before, .ui.labeled.icon.button > .icon:before, .ui.labeled.icon.buttons > .button > .icon:after, .ui.labeled.icon.button > .icon:after {
display: block; position: absolute; width: 100%; top: 50%; text-align: center; margin-top: -0.5em;
}
.ui.labeled.icon.buttons .button > .icon {
border-radius: 0em;
} .ui.labeled.icon.buttons .button:first-child > .icon {
border-top-left-radius: @borderRadius; border-bottom-left-radius: @borderRadius;
} .ui.labeled.icon.buttons .button:last-child > .icon {
border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius;
} .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
border-radius: 0em; border-top-left-radius: @borderRadius;
} .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
border-radius: 0em; border-bottom-left-radius: @borderRadius;
}
/* Fluid Labeled */ .ui.fluid[class*=“left labeled”].icon.button, .ui.fluid[class*=“right labeled”].icon.button {
padding-left: @horizontalPadding !important; padding-right: @horizontalPadding !important;
}
/*————–
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; box-shadow: none !important; text-shadow: @invertedTextShadow; color: @invertedTextColor !important;
} .ui.button.toggle.active:hover {
background-color: @positiveColorHover !important; text-shadow: @invertedTextShadow; color: @invertedTextColor !important;
}
/*————–
Circular
—————*/
.ui.circular.button {
border-radius: 10em;
} .ui.circular.button > .icon {
width: 1em; vertical-align: baseline;
}
/*————–
Attached
—————*/
.ui.attached.button {
display: block; margin: 0em; box-shadow: @attachedBoxShadow !important; border-radius: 0em;
} .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-left: none; padding-right: @attachedHorizontalPadding; text-align: right; border-radius: @borderRadius 0em 0em @borderRadius;
} .ui.attached.right.button {
display: inline-block; padding-left: @attachedHorizontalPadding; text-align: left; border-radius: 0em @borderRadius @borderRadius 0em;
}
/*——————-
Or Buttons
——————–*/
.ui.buttons .or {
position: relative; float: left; width: @orGap; height: @orHeight; z-index: 3;
} .ui.buttons .or:before {
position: absolute; text-align: center; border-radius: @circularRadius; content: @orText; top: 50%; left: 50%; background-color: @orBackgroundColor; text-shadow: @orTextShadow; margin-top: @orVerticalOffset; margin-left: @orHorizontalOffset; width: @orCircleSize; height: @orCircleSize; line-height: @orLineHeight; color: @orTextColor; font-style: @orTextStyle; font-weight: @orTextWeight; box-shadow: @orBoxShadow;
} .ui.buttons .or:before {
content: attr(data-text);
}
/* 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: 0em 0em 0em 0em;
} .attached.ui.buttons .button {
margin: 0em;
} .attached.ui.buttons .button:first-child {
border-radius: 0em 0em 0em 0em;
} .attached.ui.buttons .button:last-child {
border-radius: 0em 0em 0em 0em;
}
/* Top Side */ [class*=“top attached”].ui.buttons {
margin-bottom: @attachedOffset; border-radius: @borderRadius @borderRadius 0em 0em;
} [class*=“top attached”].ui.buttons .button:first-child {
border-radius: @borderRadius 0em 0em 0em;
} [class*=“top attached”].ui.buttons .button:last-child {
border-radius: 0em @borderRadius 0em 0em;
}
/* Bottom Side */ [class*=“bottom attached”].ui.buttons {
margin-top: @attachedOffset; border-radius: 0em 0em @borderRadius @borderRadius;
} [class*=“bottom attached”].ui.buttons .button:first-child {
border-radius: 0em 0em 0em @borderRadius;
} [class*=“bottom attached”].ui.buttons .button:last-child {
border-radius: 0em 0em @borderRadius 0em;
}
/* Left Side */ [class*=“left attached”].ui.buttons {
margin-left: @attachedOffset; border-radius: 0em @borderRadius @borderRadius 0em;
} [class*=“left attached”].ui.buttons .button:first-child {
margin-left: @attachedOffset; border-radius: 0em @borderRadius 0em 0em;
} [class*=“left attached”].ui.buttons .button:last-child {
margin-left: @attachedOffset; border-radius: 0em 0em @borderRadius 0em;
} /* Right Side */ [class*=“right attached”].ui.buttons, [class*=“right attached”].ui.buttons .button {
margin-right: @attachedOffset; border-radius: @borderRadius 0em 0em @borderRadius;
} [class*=“right attached”].ui.buttons .button:first-child {
margin-left: @attachedOffset; border-radius: @borderRadius 0em 0em 0em;
} [class*=“right attached”].ui.buttons .button:last-child {
margin-left: @attachedOffset; border-radius: 0em 0em 0em @borderRadius;
}
/* Fluid */ .ui.fluid.buttons, .ui.button.fluid, .ui.fluid.buttons > .button {
display: block; width: 100%;
}
.ui.32.buttons, .ui.two.buttons {
width: 100%;
} .ui.32.buttons > .button, .ui.two.buttons > .button {
width: 50%;
}
.ui.33.buttons, .ui.three.buttons {
width: 100%;
} .ui.33.buttons > .button, .ui.three.buttons > .button {
width: 33.333%;
}
.ui.34.buttons, .ui.four.buttons {
width: 100%;
} .ui.34.buttons > .button, .ui.four.buttons > .button {
width: 25%;
}
.ui.35.buttons, .ui.five.buttons {
width: 100%;
} .ui.35.buttons > .button, .ui.five.buttons > .button {
width: 20%;
}
.ui.36.buttons, .ui.six.buttons {
width: 100%;
} .ui.36.buttons > .button, .ui.six.buttons > .button {
width: 16.666%;
}
.ui.37.buttons, .ui.seven.buttons {
width: 100%;
} .ui.37.buttons > .button, .ui.seven.buttons > .button {
width: 14.285%;
}
.ui.38.buttons, .ui.eight.buttons {
width: 100%;
} .ui.38.buttons > .button, .ui.eight.buttons > .button {
width: 12.500%;
}
.ui.39.buttons, .ui.nine.buttons {
width: 100%;
} .ui.39.buttons > .button, .ui.nine.buttons > .button {
width: 11.11%;
}
.ui.3130.buttons, .ui.ten.buttons {
width: 100%;
} .ui.3130.buttons > .button, .ui.ten.buttons > .button {
width: 10%;
}
.ui.3131.buttons, .ui.eleven.buttons {
width: 100%;
} .ui.3131.buttons > .button, .ui.eleven.buttons > .button {
width: 9.09%;
}
.ui.3132.buttons, .ui.twelve.buttons {
width: 100%;
} .ui.3132.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;
}
.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.3130.vertical.buttons > .button, .ui.ten.vertical.buttons > .button {
height: 10%;
} .ui.3131.vertical.buttons > .button, .ui.eleven.vertical.buttons > .button {
height: 9.09%;
} .ui.3132.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; background-image: @coloredBackgroundImage;
} .ui.black.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.black.buttons .button, .ui.basic.black.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.black.buttons .button:hover, .ui.basic.black.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important; color: @blackHover !important;
} .ui.basic.black.buttons .button:active, .ui.basic.black.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important; color: @blackDown !important;
} .ui.basic.black.buttons .button.active, .ui.basic.black.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important; color: @blackDown !important;
} .ui.buttons > .basic.black.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.black.buttons .button, .ui.inverted.black.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; color: @invertedTextColor;
} .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; background-color: @lightBlack; color: @white;
} .ui.inverted.black.buttons .button.active, .ui.inverted.black.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; background-color: @lightBlack; color: @white;
} .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; background-color: @lightBlackDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.black.basic.buttons .button, .ui.inverted.black.buttons .basic.button, .ui.inverted.black.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.buttons .basic.button:hover, .ui.inverted.black.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; color: @white !important;
} .ui.inverted.black.basic.buttons .button.active, .ui.inverted.black.buttons .basic.button.active, .ui.inverted.black.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; color: @white !important;
} .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active, .ui.inverted.black.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; color: @white !important;
}
/*— Blue —*/ .ui.blue.buttons .button, .ui.blue.button {
background-color: @blue; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.blue.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.blue.buttons .button, .ui.basic.blue.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.blue.buttons .button:hover, .ui.basic.blue.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important; color: @blueHover !important;
} .ui.basic.blue.buttons .button:active, .ui.basic.blue.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important; color: @blueDown !important;
} .ui.basic.blue.buttons .button.active, .ui.basic.blue.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important; color: @blueDown !important;
} .ui.buttons > .basic.blue.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.blue.buttons .button, .ui.inverted.blue.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; color: @lightBlue;
} .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; background-color: @lightBlue; color: @white;
} .ui.inverted.blue.buttons .button.active, .ui.inverted.blue.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; background-color: @lightBlue; color: @white;
} .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; background-color: @lightBlueDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.blue.basic.buttons .button, .ui.inverted.blue.buttons .basic.button, .ui.inverted.blue.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.buttons .basic.button:hover, .ui.inverted.blue.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; color: @lightBlue !important;
} .ui.inverted.blue.basic.buttons .button.active, .ui.inverted.blue.buttons .basic.button.active, .ui.inverted.blue.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; color: @lightBlue !important;
} .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active, .ui.inverted.blue.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; color: @lightBlue !important;
}
/*— Green —*/ .ui.green.buttons .button, .ui.green.button {
background-color: @green; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.green.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.green.buttons .button, .ui.basic.green.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.green.buttons .button:hover, .ui.basic.green.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important; color: @greenHover !important;
} .ui.basic.green.buttons .button:active, .ui.basic.green.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important; color: @greenDown !important;
} .ui.basic.green.buttons .button.active, .ui.basic.green.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important; color: @greenDown !important;
} .ui.buttons > .basic.green.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.green.buttons .button, .ui.inverted.green.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; color: @lightGreen;
} .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; background-color: @lightGreen; color: @white;
} .ui.inverted.green.buttons .button.active, .ui.inverted.green.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; background-color: @lightGreen; color: @white;
} .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; background-color: @lightGreenDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.green.basic.buttons .button, .ui.inverted.green.buttons .basic.button, .ui.inverted.green.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.buttons .basic.button:hover, .ui.inverted.green.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; color: @lightGreen !important;
} .ui.inverted.green.basic.buttons .button.active, .ui.inverted.green.buttons .basic.button.active, .ui.inverted.green.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; color: @lightGreen !important;
} .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active, .ui.inverted.green.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; color: @lightGreen !important;
}
/*— Orange —*/ .ui.orange.buttons .button, .ui.orange.button {
background-color: @orange; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.orange.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.orange.buttons .button, .ui.basic.orange.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.orange.buttons .button:hover, .ui.basic.orange.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important; color: @orangeHover !important;
} .ui.basic.orange.buttons .button:active, .ui.basic.orange.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important; color: @orangeDown !important;
} .ui.basic.orange.buttons .button.active, .ui.basic.orange.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important; color: @orangeDown !important;
} .ui.buttons > .basic.orange.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.orange.buttons .button, .ui.inverted.orange.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; color: @lightOrange;
} .ui.inverted.orange.buttons .button:hover, .ui.inverted.orange.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; background-color: @lightOrange; color: @white;
} .ui.inverted.orange.buttons .button.active, .ui.inverted.orange.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; background-color: @lightOrange; color: @white;
} .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; background-color: @lightOrangeDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.orange.basic.buttons .button, .ui.inverted.orange.buttons .basic.button, .ui.inverted.orange.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.orange.basic.buttons .button:hover, .ui.inverted.orange.buttons .basic.button:hover, .ui.inverted.orange.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; color: @lightOrange !important;
} .ui.inverted.orange.basic.buttons .button.active, .ui.inverted.orange.buttons .basic.button.active, .ui.inverted.orange.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; color: @lightOrange !important;
} .ui.inverted.orange.basic.buttons .button:active, .ui.inverted.orange.buttons .basic.button:active, .ui.inverted.orange.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; color: @lightOrange !important;
}
/*— Pink —*/ .ui.pink.buttons .button, .ui.pink.button {
background-color: @pink; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.pink.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.pink.buttons .button, .ui.basic.pink.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.pink.buttons .button:hover, .ui.basic.pink.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important; color: @pinkHover !important;
} .ui.basic.pink.buttons .button:active, .ui.basic.pink.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important; color: @pinkDown !important;
} .ui.basic.pink.buttons .button.active, .ui.basic.pink.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important; color: @pinkDown !important;
} .ui.buttons > .basic.pink.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.pink.buttons .button, .ui.inverted.pink.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; color: @lightPink;
} .ui.inverted.pink.buttons .button:hover, .ui.inverted.pink.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; background-color: @lightPink; color: @white;
} .ui.inverted.pink.buttons .button.active, .ui.inverted.pink.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; background-color: @lightPink; color: @white;
} .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; background-color: @lightPinkDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.pink.basic.buttons .button, .ui.inverted.pink.buttons .basic.button, .ui.inverted.pink.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.pink.basic.buttons .button:hover, .ui.inverted.pink.buttons .basic.button:hover, .ui.inverted.pink.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; color: @lightPink !important;
} .ui.inverted.pink.basic.buttons .button.active, .ui.inverted.pink.buttons .basic.button.active, .ui.inverted.pink.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; color: @lightPink !important;
} .ui.inverted.pink.basic.buttons .button:active, .ui.inverted.pink.buttons .basic.button:active, .ui.inverted.pink.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; color: @lightPink !important;
}
/*— Purple —*/ .ui.purple.buttons .button, .ui.purple.button {
background-color: @purple; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.purple.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.purple.buttons .button, .ui.basic.purple.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.purple.buttons .button:hover, .ui.basic.purple.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important; color: @purpleHover !important;
} .ui.basic.purple.buttons .button:active, .ui.basic.purple.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important; color: @purpleDown !important;
} .ui.basic.purple.buttons .button.active, .ui.basic.purple.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important; color: @purpleDown !important;
} .ui.buttons > .basic.purple.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.purple.buttons .button, .ui.inverted.purple.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; color: @lightPurple;
} .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; background-color: @lightPurple; color: @black;
} .ui.inverted.purple.buttons .button.active, .ui.inverted.purple.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; background-color: @lightPurple; color: @black;
} .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; background-color: @lightPurpleDown; color: @black;
}
/* Inverted Basic */ .ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.buttons .basic.button, .ui.inverted.purple.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.buttons .basic.button:hover, .ui.inverted.purple.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; color: @lightPurple !important;
} .ui.inverted.purple.basic.buttons .button.active, .ui.inverted.purple.buttons .basic.button.active, .ui.inverted.purple.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; color: @lightPurple !important;
} .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active, .ui.inverted.purple.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; color: @lightPurple !important;
}
/*— Red —*/ .ui.red.buttons .button, .ui.red.button {
background-color: @red; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.red.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.red.buttons .button, .ui.basic.red.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important; color: @redHover !important;
} .ui.basic.red.buttons .button:active, .ui.basic.red.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important; color: @redDown !important;
} .ui.basic.red.buttons .button.active, .ui.basic.red.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important; color: @redDown !important;
} .ui.buttons > .basic.red.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.red.buttons .button, .ui.inverted.red.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; color: @lightRed;
} .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; background-color: @lightRed; color: @white;
} .ui.inverted.red.buttons .button.active, .ui.inverted.red.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; background-color: @lightRed; color: @white;
} .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; background-color: @lightRedDown; color: @white;
}
/* Inverted Basic */ .ui.inverted.red.basic.buttons .button, .ui.inverted.red.buttons .basic.button, .ui.inverted.red.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.buttons .basic.button:hover, .ui.inverted.red.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; color: @lightRed !important;
} .ui.inverted.red.basic.buttons .button.active, .ui.inverted.red.buttons .basic.button.active, .ui.inverted.red.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; color: @lightRed !important;
} .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active, .ui.inverted.red.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; color: @lightRed !important;
}
/*— Teal —*/ .ui.teal.buttons .button, .ui.teal.button {
background-color: @teal; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.teal.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.teal.buttons .button, .ui.basic.teal.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.teal.buttons .button:hover, .ui.basic.teal.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important; color: @tealHover !important;
} .ui.basic.teal.buttons .button:active, .ui.basic.teal.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important; color: @tealDown !important;
} .ui.basic.teal.buttons .button.active, .ui.basic.teal.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important; color: @tealDown !important;
} .ui.buttons > .basic.teal.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.teal.buttons .button, .ui.inverted.teal.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; color: @lightTeal;
} .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; background-color: @lightTeal; color: @black;
} .ui.inverted.teal.buttons .button.active, .ui.inverted.teal.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; background-color: @lightTeal; color: @black;
} .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; background-color: @lightTealDown; color: @black;
}
/* Inverted Basic */ .ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.buttons .basic.button, .ui.inverted.teal.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.buttons .basic.button:hover, .ui.inverted.teal.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; color: @lightTeal !important;
} .ui.inverted.teal.basic.buttons .button.active, .ui.inverted.teal.buttons .basic.button.active, .ui.inverted.teal.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; color: @lightTeal !important;
} .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active, .ui.inverted.teal.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; color: @lightTeal !important;
}
/*— Yellow —*/ .ui.yellow.buttons .button, .ui.yellow.button {
background-color: @yellow; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.yellow.button {
box-shadow: @coloredBoxShadow;
} .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;
}
/* Basic */ .ui.basic.yellow.buttons .button, .ui.basic.yellow.button {
box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important; color: @textColor !important;
} .ui.basic.yellow.buttons .button:hover, .ui.basic.yellow.button:hover {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important; color: @yellowHover !important;
} .ui.basic.yellow.buttons .button:active, .ui.basic.yellow.button:active {
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important; color: @yellowDown !important;
} .ui.basic.yellow.buttons .button.active, .ui.basic.yellow.button.active {
background: transparent !important; box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important; color: @yellowDown !important;
} .ui.buttons > .basic.yellow.button:not(:first-child) {
margin-left: -@basicColoredBorderSize;
}
/* Inverted */ .ui.inverted.yellow.buttons .button, .ui.inverted.yellow.button {
background-color: transparent; box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; color: @lightYellow;
} .ui.inverted.yellow.buttons .button:hover, .ui.inverted.yellow.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; background-color: @lightYellow; color: @black;
} .ui.inverted.yellow.buttons .button.active, .ui.inverted.yellow.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; background-color: @lightYellow; color: @black;
} .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; background-color: @lightYellowDown; color: @black;
}
/* Inverted Basic */ .ui.inverted.yellow.basic.buttons .button, .ui.inverted.yellow.buttons .basic.button, .ui.inverted.yellow.basic.button {
background-color: transparent; box-shadow: @basicInvertedBoxShadow !important; color: @white !important;
} .ui.inverted.yellow.basic.buttons .button:hover, .ui.inverted.yellow.buttons .basic.button:hover, .ui.inverted.yellow.basic.button:hover {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; color: @lightYellow !important;
} .ui.inverted.yellow.basic.buttons .button.active, .ui.inverted.yellow.buttons .basic.button.active, .ui.inverted.yellow.basic.button.active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; color: @lightYellow !important;
} .ui.inverted.yellow.basic.buttons .button:active, .ui.inverted.yellow.buttons .basic.button:active, .ui.inverted.yellow.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; color: @lightYellow !important;
}
/*——————-
Primary
——————–*/
.ui.primary.buttons .button, .ui.primary.button {
background-color: @primaryColor; color: @primaryTextColor; text-shadow: @primaryTextShadow; background-image: @primaryBackgroundImage;
} .ui.primary.button {
box-shadow: @primaryBoxShadow;
} .ui.primary.buttons .button:hover, .ui.primary.button:hover {
background-color: @primaryColorHover; color: @primaryTextColor; text-shadow: @primaryTextShadow;
} .ui.primary.buttons .button:active, .ui.primary.button:active {
background-color: @primaryColorDown; color: @primaryTextColor; text-shadow: @primaryTextShadow;
} .ui.primary.buttons .active.button, .ui.primary.button.active {
background-color: @primaryColorActive; color: @primaryTextColor; text-shadow: @primaryTextShadow;
}
/*——————-
Secondary
——————–*/
.ui.secondary.buttons .button, .ui.secondary.button {
background-color: @secondaryColor; color: @secondaryTextColor; text-shadow: @secondaryTextShadow; background-image: @secondaryBackgroundImage;
} .ui.secondary.button {
box-shadow: @secondaryBoxShadow;
} .ui.secondary.buttons .button:hover, .ui.secondary.button:hover {
background-color: @secondaryColorHover; color: @secondaryTextColor; text-shadow: @secondaryTextShadow;
} .ui.secondary.buttons .button:active, .ui.secondary.button:active {
background-color: @secondaryColorDown; color: @secondaryTextColor; text-shadow: @secondaryTextShadow;
} .ui.secondary.buttons .active.button, .ui.secondary.button.active {
background-color: @secondaryColorActive; color: @secondaryTextColor; text-shadow: @secondaryTextShadow;
}
/*—————
Positive
—————-*/
.ui.positive.buttons .button, .ui.positive.button {
background-color: @positiveColor !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; background-image: @coloredBackgroundImage;
} .ui.positive.button {
box-shadow: @coloredBoxShadow;
} .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; background-image: @coloredBackgroundImage;
} .ui.negative.button {
box-shadow: @coloredBoxShadow;
} .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; margin: @verticalMargin @horizontalMargin 0em 0em;
} .ui.buttons > .button:hover, .ui.buttons > .button.active {
position: relative;
} .ui.buttons:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden;
} .ui.buttons .button:first-child {
border-left: none;
}
.ui.buttons:not(.basic):not(.inverted) {
box-shadow: @groupBoxShadow;
} .ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {
box-shadow: @groupButtonBoxShadow;
}
.ui.buttons .button {
margin: 0em; float: left; border-radius: 0em; margin: @groupButtonOffset;
}
.ui.buttons .button:first-child {
margin-left: 0em; border-top-left-radius: @borderRadius; border-bottom-left-radius: @borderRadius;
} .ui.buttons .button:last-child {
border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius;
}
/* Vertical Style */ .ui.vertical.buttons {
display: inline-block;
} .ui.vertical.buttons .button {
display: block; float: none; margin: @verticalGroupOffset; box-shadow: @verticalBoxShadow;
} .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 {
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 {
margin-bottom: 0px; border-radius: 0px 0px @borderRadius @borderRadius;
}
.loadUIOverrides();