diff options
Diffstat (limited to 'semantic/src/definitions/elements')
18 files changed, 0 insertions, 8841 deletions
diff --git a/semantic/src/definitions/elements/button.less b/semantic/src/definitions/elements/button.less deleted file mode 100644 index 3e648a5..0000000 --- a/semantic/src/definitions/elements/button.less +++ /dev/null @@ -1,1881 +0,0 @@ -/*! - * # Fomantic-UI - Button - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'button'; - -@import (multiple) '../../theme.config'; - -/******************************* - Button -*******************************/ - -.ui.button { - cursor: pointer; - display: inline-block; - - min-height: 1em; - - outline: none; - border: none; - vertical-align: @verticalAlign; - background: @background; - color: @textColor; - - font-family: @fontFamily; - - margin: 0 @horizontalMargin @verticalMargin 0; - padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); - - text-transform: @textTransform; - text-shadow: @textShadow; - font-weight: @fontWeight; - line-height: @lineHeight; - font-style: normal; - text-align: center; - text-decoration: none; - - 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; - color: @focusColor; - background-image: @focusBackgroundImage; - box-shadow: @focusBoxShadow; -} - -.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.active.button:hover { - background-color: @activeHoverBackgroundColor; - background-image: @activeHoverBackgroundImage; - color: @activeHoverColor; -} -.ui.active.button:active { - background-color: @activeBackgroundColor; - background-image: @activeBackgroundImage; -} - - -/*-------------- - Loading ----------------*/ - -/* Specificity hack */ -.ui.loading.loading.loading.loading.loading.loading.button { - position: relative; - cursor: default; - text-shadow: none !important; - color: transparent; - opacity: @loadingOpacity; - pointer-events: @loadingPointerEvents; - transition: @loadingTransition; -} -.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; - - border-radius: @circularRadius; - - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid currentColor; - color: @invertedLoaderLineColor; - - box-shadow: 0 0 0 1px transparent; -} -& when (@variationButtonLabeledIcon){ - .ui.labeled.icon.loading.button .icon { - background-color: transparent; - box-shadow: none; - } -} -& when (@variationButtonBasic){ - .ui.basic.loading.button:not(.inverted):before { - border-color: @loaderFillColor; - } - .ui.basic.loading.button:not(.inverted):after { - border-color: @loaderLineColor; - } -} -& when (@variationButtonDisabled){ - /*------------------- - Disabled - --------------------*/ - - .ui.buttons .disabled.button:not(.basic), - .ui.disabled.button, - .ui.button:disabled, - .ui.disabled.button:hover, - .ui.disabled.active.button { - cursor: default; - opacity: @disabledOpacity !important; - background-image: none; - box-shadow: none; - pointer-events: none !important; - } - & when (@variationButtonBasic){ - /* Basic Group With Disabled */ - .ui.basic.buttons .ui.disabled.button { - border-color: @disabledBorderColor; - } - } -} - -/******************************* - Types -*******************************/ -& when (@variationButtonAnimated){ - /*------------------- - Animated - --------------------*/ - - .ui.animated.button { - position: relative; - overflow: hidden; - padding-right: 0 !important; - vertical-align: @animatedVerticalAlign; - z-index: @animatedZIndex; - } - - .ui.animated.button .content { - will-change: transform, opacity; - } - .ui.animated.button .visible.content { - position: relative; - margin-right: @horizontalPadding; - } - .ui.animated.button .hidden.content { - position: absolute; - width: 100%; - } - - /* Horizontal */ - .ui.animated.button .visible.content, - .ui.animated.button .hidden.content { - transition: right @animationDuration @animationEasing 0s; - } - .ui.animated.button .visible.content { - left: auto; - right: 0; - } - .ui.animated.button .hidden.content { - top: 50%; - left: auto; - right: -100%; - margin-top: -(@lineHeight / 2); - } - .ui.animated.button:focus .visible.content, - .ui.animated.button:hover .visible.content { - left: auto; - right: 200%; - } - .ui.animated.button:focus .hidden.content, - .ui.animated.button:hover .hidden.content { - left: auto; - right: 0; - } - - /* Vertical */ - .ui.vertical.animated.button .visible.content, - .ui.vertical.animated.button .hidden.content { - transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing; - } - .ui.vertical.animated.button .visible.content { - transform: translateY(0%); - right: auto; - } - .ui.vertical.animated.button .hidden.content { - top: -50%; - left: 0; - right: auto; - } - .ui.vertical.animated.button:focus .visible.content, - .ui.vertical.animated.button:hover .visible.content { - transform: translateY(200%); - right: auto; - } - .ui.vertical.animated.button:focus .hidden.content, - .ui.vertical.animated.button:hover .hidden.content { - top: 50%; - right: auto; - } - - /* Fade */ - .ui.fade.animated.button .visible.content, - .ui.fade.animated.button .hidden.content { - transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing; - } - .ui.fade.animated.button .visible.content { - left: auto; - right: auto; - opacity: 1; - transform: scale(1); - } - .ui.fade.animated.button .hidden.content { - opacity: 0; - left: 0; - right: auto; - transform: scale(@fadeScaleHigh); - } - .ui.fade.animated.button:focus .visible.content, - .ui.fade.animated.button:hover .visible.content { - left: auto; - right: auto; - opacity: 0; - transform: scale(@fadeScaleLow); - } - .ui.fade.animated.button:focus .hidden.content, - .ui.fade.animated.button:hover .hidden.content { - left: 0; - right: auto; - opacity: 1; - transform: scale(1); - } -} - -& when (@variationButtonInverted) { - /*------------------- - Inverted - --------------------*/ - - .ui.inverted.button { - box-shadow: 0 0 0 @invertedBorderSize @white inset; - background: transparent none; - color: @white; - text-shadow: none !important; - } - - /* Group */ - .ui.inverted.buttons .button { - margin: @invertedGroupButtonOffset; - } - .ui.inverted.buttons .button:first-child { - margin-left: 0; - } - .ui.inverted.vertical.buttons .button { - margin: @invertedVerticalGroupButtonOffset; - } - .ui.inverted.vertical.buttons .button:first-child { - margin-top: 0; - } - - /* States */ - - /* Hover */ - .ui.inverted.button:hover { - background: @white; - box-shadow: 0 0 0 @invertedBorderSize @white inset; - color: @hoverColor; - } - - /* Active / Focus */ - .ui.inverted.button:focus, - .ui.inverted.button.active { - background: @white; - box-shadow: 0 0 0 @invertedBorderSize @white inset; - color: @focusColor; - } - - /* Active Focus */ - .ui.inverted.button.active:focus { - background: @midWhite; - box-shadow: 0 0 0 @invertedBorderSize @midWhite inset; - color: @focusColor; - } -} - -& when (@variationButtonLabeled) or (@variationButtonLabeledIcon){ - /*------------------- - Labeled Button - --------------------*/ - - .ui.labeled.button:not(.icon) { - display: inline-flex; - flex-direction: row; - background: none; - padding: 0 !important; - border: none; - box-shadow: none; - } - - .ui.labeled.button > .button { - margin: 0; - } - .ui.labeled.button > .label { - display: flex; - align-items: @labeledLabelAlign; - margin: 0 0 0 @labeledLabelBorderOffset !important; - font-size: @labeledLabelFontSize; - padding: @labeledLabelPadding; - border-color: @labeledLabelBorderColor; - } - - /* Tag */ - .ui.labeled.button > .tag.label:before { - width: @labeledTagLabelSize; - height: @labeledTagLabelSize; - } - - /* Right */ - .ui.labeled.button:not([class*="left labeled"]) > .button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .ui.labeled.button:not([class*="left labeled"]) > .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - /* Left Side */ - .ui[class*="left labeled"].button > .button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .ui[class*="left labeled"].button > .label { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } -} - -& when (@variationButtonSocial) { - /*------------------- - 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: @vkColor; - color: @white; - background-image: @coloredBackgroundImage; - box-shadow: @coloredBoxShadow; - } - .ui.vk.button:hover { - background-color: @vkHoverColor; - color: @white; - } - .ui.vk.button:active { - background-color: @vkDownColor; - color: @white; - } - - /* WhatsApp */ - .ui.whatsapp.button { - background-color: @whatsAppColor; - color: @white; - background-image: @coloredBackgroundImage; - box-shadow: @coloredBoxShadow; - } - .ui.whatsapp.button:hover { - background-color: @whatsAppHoverColor; - color: @white; - } - .ui.whatsapp.button:active { - background-color: @whatsAppDownColor; - color: @white; - } - - /* Telegram */ - .ui.telegram.button { - background-color: @telegramColor; - color: @white; - background-image: @coloredBackgroundImage; - box-shadow: @coloredBoxShadow; - } - .ui.telegram.button:hover { - background-color: @telegramHoverColor; - color: @white; - } - .ui.telegram.button:active { - background-color: @telegramDownColor; - color: @white; - } -} - -/*-------------- - Icon ----------------*/ - -.ui.button > .icon:not(.button) { - height: @iconHeight; - opacity: @iconOpacity; - transition: @iconTransition; - color: @iconColor; -} - -.ui.button:not(.icon) > .icon:not(.button):not(.dropdown), -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { - margin: @iconMargin; - vertical-align: @iconVerticalAlign; -} -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { - vertical-align: @iconVerticalAlign; -} -.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { - margin: @rightIconMargin; -} - -/******************************* - Variations -*******************************/ - -& when (@variationButtonFloated) { - /*------------------- - Floated - --------------------*/ - - .ui[class*="left floated"].buttons, - .ui[class*="left floated"].button { - float: left; - margin-left: 0; - margin-right: @floatedMargin; - } - - .ui[class*="right floated"].buttons, - .ui[class*="right floated"].button { - float: right; - margin-right: 0; - margin-left: @floatedMargin; - } -} - -& when (@variationButtonCompact) { - /*------------------- - Compact - --------------------*/ - - .ui.compact.buttons .button, - .ui.compact.button { - padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset ); - } - - .ui.compact.icon.buttons .button, - .ui.compact.icon.button { - padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset ); - } - - .ui.compact.labeled.icon.buttons .button, - .ui.compact.labeled.icon.button { - padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset ); - } - - .ui.compact.labeled.icon.buttons .button > .icon, - .ui.compact.labeled.icon.button > .icon { - padding: @compactVerticalPadding 0 @compactVerticalPadding 0; - } -} -/*------------------- - Sizes ---------------------*/ - -.ui.buttons .button, -.ui.buttons .or, -.ui.button { - font-size: @medium; -} - -& when not (@variationButtonSizes = false) { - each(@variationButtonSizes, { - @s: @@value; - .ui.@{value}.buttons .dropdown, - .ui.@{value}.buttons .dropdown .menu > .item, - .ui.@{value}.buttons .button, - .ui.@{value}.buttons .or, - .ui.ui.ui.ui.@{value}.button { - font-size: @s; - } - }) -} - -/*-------------- - Icon Only ----------------*/ - -.ui.icon.buttons .button, -.ui.icon.button:not(.animated):not(.compact) { - padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); -} -.ui.animated.icon.button > .content > .icon, -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { - opacity: @iconButtonOpacity; - margin: 0 !important; - vertical-align: top; -} -.ui.animated.button > .content > .icon { - vertical-align: top; -} - -& when (@variationButtonBasic) { - /*------------------- - Basic - --------------------*/ - - .ui.basic.buttons .button, - .ui.basic.button { - background: @basicBackground; - color: @basicTextColor; - font-weight: @basicFontWeight; - border-radius: @basicBorderRadius; - text-transform: @basicTextTransform; - text-shadow: none !important; - box-shadow: @basicBoxShadow; - } - - .ui.basic.buttons { - box-shadow: @basicGroupBoxShadow; - border: @basicGroupBorder; - border-radius: @borderRadius; - } - - .ui.basic.buttons .button { - border-radius: 0; - } - - .ui.basic.buttons .button:hover, - .ui.basic.button:hover { - background: @basicHoverBackground; - color: @basicHoverTextColor; - box-shadow: @basicHoverBoxShadow; - } - - .ui.basic.buttons .button:focus, - .ui.basic.button:focus { - background: @basicFocusBackground; - color: @basicFocusTextColor; - box-shadow: @basicFocusBoxShadow; - } - - .ui.basic.buttons .button:active, - .ui.basic.button:active { - background: @basicDownBackground; - color: @basicDownTextColor; - box-shadow: @basicDownBoxShadow; - } - - .ui.basic.buttons .active.button, - .ui.basic.active.button { - background: @basicActiveBackground; - box-shadow: @basicActiveBoxShadow; - color: @basicActiveTextColor; - } - - .ui.basic.buttons .active.button:hover, - .ui.basic.active.button:hover { - background-color: @transparentBlack; - } - - /* Vertical */ - .ui.basic.buttons .button:hover { - box-shadow: @basicHoverBoxShadow inset; - } - - .ui.basic.buttons .button:active { - box-shadow: @basicDownBoxShadow inset; - } - - .ui.basic.buttons .active.button { - box-shadow: @basicActiveBoxShadow; - } - & when (@variationButtonInverted) { - /* Standard Basic Inverted */ - - .ui.basic.inverted.buttons .button, - .ui.basic.inverted.button { - background-color: transparent; - color: @offWhite; - box-shadow: @basicInvertedBoxShadow; - } - - .ui.basic.inverted.buttons .button:hover, - .ui.basic.inverted.button:hover { - color: @white; - box-shadow: @basicInvertedHoverBoxShadow; - } - - .ui.basic.inverted.buttons .button:focus, - .ui.basic.inverted.button:focus { - color: @white; - box-shadow: @basicInvertedFocusBoxShadow; - } - - .ui.basic.inverted.buttons .button:active, - .ui.basic.inverted.button:active { - background-color: @transparentWhite; - color: @white; - box-shadow: @basicInvertedDownBoxShadow; - } - - .ui.basic.inverted.buttons .active.button, - .ui.basic.inverted.active.button { - background-color: @transparentWhite; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; - box-shadow: @basicInvertedActiveBoxShadow; - } - - .ui.basic.inverted.buttons .active.button:hover, - .ui.basic.inverted.active.button:hover { - background-color: @strongTransparentWhite; - box-shadow: @basicInvertedHoverBoxShadow; - } - } - - & when (@variationButtonBasic) { - /* Basic Group */ - .ui.basic.buttons .button { - border-left: @basicGroupBorder; - box-shadow: none; - } - - .ui.basic.vertical.buttons .button { - border-left: none; - border-left-width: 0; - border-top: @basicGroupBorder; - } - - .ui.basic.vertical.buttons .button:first-child { - border-top-width: 0; - } - } -} - -& when (@variationButtonTertiary) { - /*------------------- - Tertiary - --------------------*/ - - /* Overline Mixin */ - .ui.tertiary.button { - transition: color @defaultDuration @defaultEasing !important; - border-radius: 0; - margin: (@verticalPadding - @tertiaryLinePadding) - (@horizontalMargin) - (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryLinePadding) - 0 !important; - padding: @tertiaryLinePadding !important; - - & when (@tertiaryWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; - } - - & when (@tertiaryWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; - } - - & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ - box-shadow: none; - } - - color: @tertiaryTextColor; - background: @tertiaryBackgroundColor; - } - - .ui.tertiary.button:hover { - - & when (@tertiaryHoverWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; - } - - & when (@tertiaryHoverWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; - } - - & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { - box-shadow: none; - } - - color: @tertiaryHoverColor; - background: @tertiaryHoverBackgroundColor; - } - - .ui.tertiary.button:focus { - & when (@tertiaryFocusWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; - } - - & when (@tertiaryFocusWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; - } - - & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){ - box-shadow: none; - } - - color: @tertiaryFocusColor; - background: @tertiaryFocusBackgroundColor; - } - - .ui.tertiary.button:active { - & when (@tertiaryActiveWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius: @borderRadius @borderRadius 0 0; - } - - & when (@tertiaryActiveWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius: 0 0 @borderRadius @borderRadius; - } - - & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){ - box-shadow: none; - border-radius: 0; - } - - color: @tertiaryActiveColor; - background: @tertiaryActiveBackgroundColor; - } -} - -& when (@variationButtonLabeledIcon) { - /*-------------- - 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; - top: 0; - left: 0; - height: 100%; - line-height: 1; - border-radius: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - text-align: center; - animation: none; - padding: @verticalPadding 0 @verticalPadding 0; - - margin: @labeledIconMargin; - width: @labeledIconWidth; - background-color: @labeledIconBackgroundColor; - color: @labeledIconColor; - box-shadow: @labeledIconLeftShadow; - } - - /* 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: 0; - border-radius: 0; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - 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: relative; - width: 100%; - top: 0; - text-align: center; - } - - .ui.labeled.icon.buttons .button > .icon { - border-radius: 0; - } - - .ui.labeled.icon.buttons .button:first-child > .icon { - border-top-left-radius: @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: 0; - border-top-left-radius: @borderRadius; - } - - .ui.vertical.labeled.icon.buttons .button:last-child > .icon { - border-radius: 0; - border-bottom-left-radius: @borderRadius; - } - - /* Loading Icon in Labeled Button */ - .ui.labeled.icon.button > .loading.icon:before { - animation: loader 2s linear infinite; - } -} - -& when (@variationButtonToggle) { - /*-------------- - Toggle - ---------------*/ - - /* Toggle (Modifies active state to give affordances) */ - .ui.toggle.buttons .active.button, - .ui.buttons .button.toggle.active, - .ui.button.toggle.active { - background-color: @toggleBackgroundColor; - box-shadow: none; - text-shadow: @toggleTextShadow; - color: @toggleColor; - } - - .ui.button.toggle.active:hover { - background-color: @toggleHoverBackgroundColor; - text-shadow: @toggleHoverTextShadow; - color: @toggleHoverColor; - } -} - -& when (@variationButtonCircular) { - /*-------------- - Circular - ---------------*/ - - .ui.circular.button { - border-radius: @circularBorderRadius; - } - - .ui.circular.button > .icon { - width: @circularIconWidth; - vertical-align: baseline; - } -} - -& when (@variationButtonOr) { - /*------------------- - Or Buttons - --------------------*/ - - .ui.buttons .or { - position: relative; - width: @orGap; - height: @orHeight; - z-index: @orZIndex; - } - - .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[data-text]:before { - content: attr(data-text); - } - - /* Fluid Or */ - .ui.fluid.buttons .or { - width: 0 !important; - } - - .ui.fluid.buttons .or:after { - display: none; - } - -} - -& when (@variationButtonAttached) { - /*------------------- - Attached - --------------------*/ - - - /* Singular */ - .ui.attached.button { - position: relative; - display: block; - margin: 0; - border-radius: 0; - box-shadow: @attachedBoxShadow; - } - - /* Top / Bottom */ - .ui.attached.top.button { - border-radius: @borderRadius @borderRadius 0 0; - } - - .ui.attached.bottom.button { - border-radius: 0 0 @borderRadius @borderRadius; - } - - /* Left / Right */ - .ui.left.attached.button { - display: inline-block; - border-left: none; - text-align: right; - - padding-right: @attachedHorizontalPadding; - border-radius: @borderRadius 0 0 @borderRadius; - } - - .ui.right.attached.button { - display: inline-block; - text-align: left; - padding-left: @attachedHorizontalPadding; - border-radius: 0 @borderRadius @borderRadius 0; - } - - /* Plural */ - .ui.attached.buttons { - position: relative; - display: flex; - border-radius: 0; - width: auto !important; - z-index: @attachedZIndex; - margin-left: @attachedOffset; - margin-right: @attachedOffset; - } - - .ui.attached.buttons .button { - margin: 0; - } - - .ui.attached.buttons .button:first-child { - border-radius: 0; - } - - .ui.attached.buttons .button:last-child { - border-radius: 0; - } - - /* Top / Bottom */ - .ui[class*="top attached"].buttons { - margin-bottom: @attachedOffset; - border-radius: @borderRadius @borderRadius 0 0; - } - - .ui[class*="top attached"].buttons .button:first-child { - border-radius: @borderRadius 0 0 0; - } - - .ui[class*="top attached"].buttons .button:last-child { - border-radius: 0 @borderRadius 0 0; - } - - .ui[class*="bottom attached"].buttons { - margin-top: @attachedOffset; - border-radius: 0 0 @borderRadius @borderRadius; - } - - .ui[class*="bottom attached"].buttons .button:first-child { - border-radius: 0 0 0 @borderRadius; - } - - .ui[class*="bottom attached"].buttons .button:last-child { - border-radius: 0 0 @borderRadius 0; - } - - /* Left / Right */ - .ui[class*="left attached"].buttons { - display: inline-flex; - margin-right: 0; - margin-left: @attachedOffset; - border-radius: 0 @borderRadius @borderRadius 0; - } - - .ui[class*="left attached"].buttons .button:first-child { - margin-left: @attachedOffset; - border-radius: 0 @borderRadius 0 0; - } - - .ui[class*="left attached"].buttons .button:last-child { - margin-left: @attachedOffset; - border-radius: 0 0 @borderRadius 0; - } - - .ui[class*="right attached"].buttons { - display: inline-flex; - margin-left: 0; - margin-right: @attachedOffset; - border-radius: @borderRadius 0 0 @borderRadius; - } - - .ui[class*="right attached"].buttons .button:first-child { - margin-left: @attachedOffset; - border-radius: @borderRadius 0 0 0; - } - - .ui[class*="right attached"].buttons .button:last-child { - margin-left: @attachedOffset; - border-radius: 0 0 0 @borderRadius; - } -} - -& when (@variationButtonFluid) { - /*------------------- - Fluid - --------------------*/ - - .ui.fluid.buttons, - .ui.fluid.button { - width: 100%; - } - - .ui.fluid.button { - display: block; - } - - .ui.two.buttons { - width: 100%; - } - - .ui.two.buttons > .button { - width: 50%; - } - - .ui.three.buttons { - width: 100%; - } - - .ui.three.buttons > .button { - width: 33.333%; - } - - .ui.four.buttons { - width: 100%; - } - - .ui.four.buttons > .button { - width: 25%; - } - - .ui.five.buttons { - width: 100%; - } - - .ui.five.buttons > .button { - width: 20%; - } - - .ui.six.buttons { - width: 100%; - } - - .ui.six.buttons > .button { - width: 16.666%; - } - - .ui.seven.buttons { - width: 100%; - } - - .ui.seven.buttons > .button { - width: 14.285%; - } - - .ui.eight.buttons { - width: 100%; - } - - .ui.eight.buttons > .button { - width: 12.500%; - } - - .ui.nine.buttons { - width: 100%; - } - - .ui.nine.buttons > .button { - width: 11.11%; - } - - .ui.ten.buttons { - width: 100%; - } - - .ui.ten.buttons > .button { - width: 10%; - } - - .ui.eleven.buttons { - width: 100%; - } - - .ui.eleven.buttons > .button { - width: 9.09%; - } - - .ui.twelve.buttons { - width: 100%; - } - - .ui.twelve.buttons > .button { - width: 8.3333%; - } - - /* Fluid Vertical Buttons */ - .ui.fluid.vertical.buttons, - .ui.fluid.vertical.buttons > .button { - display: flex; - width: auto; - justify-content: center; - } - - .ui.two.vertical.buttons > .button { - height: 50%; - } - - .ui.three.vertical.buttons > .button { - height: 33.333%; - } - - .ui.four.vertical.buttons > .button { - height: 25%; - } - - .ui.five.vertical.buttons > .button { - height: 20%; - } - - .ui.six.vertical.buttons > .button { - height: 16.666%; - } - - .ui.seven.vertical.buttons > .button { - height: 14.285%; - } - - .ui.eight.vertical.buttons > .button { - height: 12.500%; - } - - .ui.nine.vertical.buttons > .button { - height: 11.11%; - } - - .ui.ten.vertical.buttons > .button { - height: 10%; - } - - .ui.eleven.vertical.buttons > .button { - height: 9.09%; - } - - .ui.twelve.vertical.buttons > .button { - height: 8.3333%; - } -} - -/*------------------- - Colors ---------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @h: @colors[@@color][hover]; - @f: @colors[@@color][focus]; - @d: @colors[@@color][down]; - @a: @colors[@@color][active]; - @t: @colors[@@color][text]; - @s: @colors[@@color][shadow]; - @l: @colors[@@color][light]; - @lh: @colors[@@color][lightHover]; - @lf: @colors[@@color][lightFocus]; - @ld: @colors[@@color][lightDown]; - @la: @colors[@@color][lightActive]; - @lt: @colors[@@color][lightText]; - @ls: @colors[@@color][lightShadow]; - @ty: @colors[@@color][tertiary]; - @tyh: @colors[@@color][tertiaryHover]; - @tyf: @colors[@@color][tertiaryFocus]; - @tya: @colors[@@color][tertiaryActive]; - @isDark: @colors[@@color][isDark]; - @isVeryDark: @colors[@@color][isVeryDark]; - - .ui.@{color}.buttons .button, - .ui.@{color}.button { - background-color: @c; - color: @t; - text-shadow: @s; - background-image: @coloredBackgroundImage; - } - .ui.@{color}.button { - box-shadow: @coloredBoxShadow; - } - .ui.@{color}.buttons .button:hover, - .ui.@{color}.button:hover { - background-color: @h; - color: @t; - text-shadow: @s; - } - .ui.@{color}.buttons .button:focus, - .ui.@{color}.button:focus { - background-color: @f; - color: @t; - text-shadow: @s; - } - .ui.@{color}.buttons .button:active, - .ui.@{color}.button:active { - background-color: @d; - color: @t; - text-shadow: @s; - } - .ui.@{color}.buttons .active.button, - .ui.@{color}.buttons .active.button:active, - .ui.@{color}.active.button, - .ui.@{color}.button .active.button:active { - background-color: @a; - color: @t; - text-shadow: @s; - } - - & when (@variationButtonBasic) { - /* Basic */ - .ui.basic.@{color}.buttons .button, - .ui.basic.@{color}.button { - background: transparent; - box-shadow: 0 0 0 @basicBorderSize @c inset ; - color: @c ; - } - .ui.basic.@{color}.buttons .button:hover, - .ui.basic.@{color}.button:hover { - background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @h inset ; - color: @h ; - } - .ui.basic.@{color}.buttons .button:focus, - .ui.basic.@{color}.button:focus { - background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @f inset ; - color: @h ; - } - .ui.basic.@{color}.buttons .active.button, - .ui.basic.@{color}.active.button { - background: transparent ; - box-shadow: 0 0 0 @basicColoredBorderSize @a inset ; - color: @d ; - } - .ui.basic.@{color}.buttons .button:active, - .ui.basic.@{color}.button:active { - box-shadow: 0 0 0 @basicColoredBorderSize @d inset ; - color: @d ; - } - - .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) { - margin-left: -@basicColoredBorderSize; - } - } - & when (@variationButtonInverted) { - /* Inverted */ - .ui.inverted.@{color}.buttons .button, - .ui.inverted.@{color}.button { - background-color: transparent; - - & when (@isDark) { - box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ; - color: @invertedTextColor; - } - - & when not (@isDark) { - box-shadow: 0 0 0 @invertedBorderSize @l inset ; - color: @l; - } - } - .ui.inverted.@{color}.buttons .button:hover, - .ui.inverted.@{color}.button:hover, - .ui.inverted.@{color}.buttons .button:focus, - .ui.inverted.@{color}.button:focus, - .ui.inverted.@{color}.buttons .button.active, - .ui.inverted.@{color}.button.active, - .ui.inverted.@{color}.buttons .button:active, - .ui.inverted.@{color}.button:active { - box-shadow: none ; - color: @lt; - } - .ui.inverted.@{color}.buttons .button:hover, - .ui.inverted.@{color}.button:hover { - background-color: @lh; - } - .ui.inverted.@{color}.buttons .button:focus, - .ui.inverted.@{color}.button:focus { - background-color: @lf; - } - .ui.inverted.@{color}.buttons .active.button, - .ui.inverted.@{color}.active.button { - background-color: @la; - } - .ui.inverted.@{color}.buttons .button:active, - .ui.inverted.@{color}.button:active { - background-color: @ld; - } - - /* Inverted Basic */ - .ui.inverted.@{color}.basic.buttons .button, - .ui.inverted.@{color}.buttons .basic.button, - .ui.inverted.@{color}.basic.button { - background-color: transparent; - box-shadow: @basicInvertedBoxShadow ; - color: @white ; - } - .ui.inverted.@{color}.basic.buttons .button:hover, - .ui.inverted.@{color}.buttons .basic.button:hover, - .ui.inverted.@{color}.basic.button:hover { - box-shadow: 0 0 0 @invertedBorderSize @lh inset ; - - & when (@isDark) { - color: @white ; - } - - & when not (@isDark) { - color: @l ; - } - } - .ui.inverted.@{color}.basic.buttons .button:focus, - .ui.inverted.@{color}.basic.buttons .button:focus, - .ui.inverted.@{color}.basic.button:focus { - box-shadow: 0 0 0 @invertedBorderSize @lf inset ; - color: @l ; - } - .ui.inverted.@{color}.basic.buttons .active.button, - .ui.inverted.@{color}.buttons .basic.active.button, - .ui.inverted.@{color}.basic.active.button { - box-shadow: 0 0 0 @invertedBorderSize @la inset ; - - & when (@isDark) { - color: @white ; - } - - & when not (@isDark) { - color: @l ; - } - } - & when (@variationButtonBasic) { - .ui.inverted.@{color}.basic.buttons .button:active, - .ui.inverted.@{color}.buttons .basic.button:active, - .ui.inverted.@{color}.basic.button:active { - box-shadow: 0 0 0 @invertedBorderSize @ld inset; - - & when (@isDark) { - color: @white; - } - - & when not (@isDark) { - color: @l; - } - } - } - } - - & when (@variationButtonTertiary) { - /* Tertiary */ - - .ui.tertiary.@{color}.buttons .button, - .ui.tertiary.@{color}.buttons .tertiary.button, - .ui.tertiary.@{color}.button { - background: transparent; - - - - & when (@tertiaryWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @ty; - } - - & when (@tertiaryWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @ty; - } - - & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ - box-shadow: none; - } - - color: @c; - } - - .ui.tertiary.@{color}.buttons .button:hover, - .ui.tertiary.@{color}.buttons button:hover, - .ui.tertiary.@{color}.button:hover { - - - - & when (@tertiaryHoverWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh; - } - - & when (@tertiaryHoverWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tyh; - } - - & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { - box-shadow: none; - } - - - color: @tyh; - } - - .ui.tertiary.@{color}.buttons .button:focus, - .ui.tertiary.@{color}.buttons .tertiary.button:focus, - .ui.tertiary.@{color}.button:focus { - - - - - & when (@tertiaryFocusWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf; - } - - & when (@tertiaryFocusWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tyf; - } - - & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) { - box-shadow: none; - } - - - color: @tyf; - } - - .ui.tertiary.@{color}.buttons .active.button, - .ui.tertiary.@{color}.buttons .tertiary.active.button, - .ui.tertiary.@{color}.active.button, - .ui.tertiary.@{color}.buttons .button:active, - .ui.tertiary.@{color}.buttons .tertiary.button:active, - .ui.tertiary.@{color}.button:active { - - - - & when (@tertiaryActiveWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tya; - } - - & when (@tertiaryActiveWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tya; - } - - & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) { - box-shadow: none; - } - - color: @a; - } - } -}) - -.addConsequence(@consequence) { - - @_backgroundColor: "@{consequence}Color"; - @_backgroundColorHover: "@{consequence}ColorHover"; - @_backgroundColorFocus: "@{consequence}ColorFocus"; - @_backgroundColorDown: "@{consequence}ColorDown"; - @_backgroundColorActive: "@{consequence}ColorActive"; - @_textColor: "@{consequence}TextColor"; - @_textShadow: "@{consequence}TextShadow"; - - /* Standard */ - .ui.@{consequence}.buttons .button, - .ui.@{consequence}.button { - background-color: @@_backgroundColor; - color: @@_textColor; - text-shadow: @@_textShadow; - background-image: @coloredBackgroundImage; - } - .ui.@{consequence}.button { - box-shadow: @coloredBoxShadow; - } - .ui.@{consequence}.buttons .button:hover, - .ui.@{consequence}.button:hover { - background-color: @@_backgroundColorHover; - color: @@_textColor; - text-shadow: @@_textShadow; - } - .ui.@{consequence}.buttons .button:focus, - .ui.@{consequence}.button:focus { - background-color: @@_backgroundColorFocus; - color: @@_textColor; - text-shadow: @@_textShadow; - } - .ui.@{consequence}.buttons .button:active, - .ui.@{consequence}.button:active { - background-color: @@_backgroundColorDown; - color: @@_textColor; - text-shadow: @@_textShadow; - } - .ui.@{consequence}.buttons .active.button, - .ui.@{consequence}.buttons .active.button:active, - .ui.@{consequence}.active.button, - .ui.@{consequence}.button .active.button:active { - background-color: @@_backgroundColorActive; - color: @@_textColor; - text-shadow: @@_textShadow; - } - & when (@variationButtonBasic) { - /* Basic */ - .ui.basic.@{consequence}.buttons .button, - .ui.basic.@{consequence}.button { - background: transparent; - box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset; - color: @@_backgroundColor; - } - .ui.basic.@{consequence}.buttons .button:hover, - .ui.basic.@{consequence}.button:hover { - background: transparent; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset; - color: @@_backgroundColorHover; - } - .ui.basic.@{consequence}.buttons .button:focus, - .ui.basic.@{consequence}.button:focus { - background: transparent; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset; - color: @@_backgroundColorHover; - } - .ui.basic.@{consequence}.buttons .active.button, - .ui.basic.@{consequence}.active.button { - background: transparent; - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset; - color: @@_backgroundColorDown; - } - .ui.basic.@{consequence}.buttons .button:active, - .ui.basic.@{consequence}.button:active { - box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset; - color: @@_backgroundColorDown; - } - .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) { - margin-left: -@basicColoredBorderSize; - } - } -} - -/*--------------- - Positive -----------------*/ - -.addConsequence(positive); - -/*--------------- - Negative -----------------*/ - -.addConsequence(negative); - -& when (@variationButtonGroups) { - /******************************* - Groups - *******************************/ - - .ui.buttons { - display: inline-flex; - flex-direction: row; - font-size: 0; - vertical-align: baseline; - margin: @verticalMargin @horizontalMargin 0 0; - } - - .ui.buttons:not(.basic):not(.inverted) { - box-shadow: @groupBoxShadow; - } - - /* Clearfix */ - .ui.buttons:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } - - /* Standard Group */ - .ui.buttons .button { - flex: 1 0 auto; - border-radius: 0; - margin: @groupButtonOffset; - } - - .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { - box-shadow: @groupButtonBoxShadow; - } - - .ui.buttons .button:first-child { - border-left: none; - margin-left: 0; - border-top-left-radius: @borderRadius; - border-bottom-left-radius: @borderRadius; - } - - .ui.buttons .button:last-child { - border-top-right-radius: @borderRadius; - border-bottom-right-radius: @borderRadius; - } - - /* Vertical Style */ - .ui.vertical.buttons { - display: inline-flex; - flex-direction: column; - } - - .ui.vertical.buttons .button { - display: block; - float: none; - width: 100%; - margin: @verticalGroupOffset; - box-shadow: @verticalBoxShadow; - border-radius: 0; - } - - .ui.vertical.buttons .button:first-child { - border-top-left-radius: @borderRadius; - border-top-right-radius: @borderRadius; - } - - .ui.vertical.buttons .button:last-child { - margin-bottom: 0; - border-bottom-left-radius: @borderRadius; - border-bottom-right-radius: @borderRadius; - } - - .ui.vertical.buttons .button:only-child { - border-radius: @borderRadius; - } -} -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/container.less b/semantic/src/definitions/elements/container.less deleted file mode 100644 index 26f1858..0000000 --- a/semantic/src/definitions/elements/container.less +++ /dev/null @@ -1,160 +0,0 @@ -/*! - * # Fomantic-UI - Container - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'container'; - -@import (multiple) '../../theme.config'; - -/******************************* - Container -*******************************/ - -/* All Sizes */ -.ui.container { - display: block; - max-width: @maxWidth; -} - -/* Mobile */ -@media only screen and (max-width: @largestMobileScreen) { - .ui.ui.ui.container:not(.fluid) { - width: @mobileWidth; - margin-left: @mobileGutter; - margin-right: @mobileGutter; - } - & when (@variationContainerGrid) or (@variationContainerRelaxed) { - .ui.ui.ui.grid.container { - width: @mobileGridWidth; - } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @mobileRelaxedGridWidth; - } - .ui.ui.ui.very.relaxed.grid.container { - width: @mobileVeryRelaxedGridWidth; - } - } - } -} - -/* Tablet */ -@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui.ui.ui.container:not(.fluid) { - width: @tabletWidth; - margin-left: @tabletGutter; - margin-right: @tabletGutter; - } - & when (@variationContainerGrid) or (@variationContainerRelaxed) { - .ui.ui.ui.grid.container { - width: @tabletGridWidth; - } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @tabletRelaxedGridWidth; - } - .ui.ui.ui.very.relaxed.grid.container { - width: @tabletVeryRelaxedGridWidth; - } - } - } -} - -/* Small Monitor */ -@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { - .ui.ui.ui.container:not(.fluid) { - width: @computerWidth; - margin-left: @computerGutter; - margin-right: @computerGutter; - } - & when (@variationContainerGrid) or (@variationContainerRelaxed) { - .ui.ui.ui.grid.container { - width: @computerGridWidth; - } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @computerRelaxedGridWidth; - } - .ui.ui.ui.very.relaxed.grid.container { - width: @computerVeryRelaxedGridWidth; - } - } - } -} - -/* Large Monitor */ -@media only screen and (min-width: @largeMonitorBreakpoint) { - .ui.ui.ui.container:not(.fluid) { - width: @largeMonitorWidth; - margin-left: @largeMonitorGutter; - margin-right: @largeMonitorGutter; - } - & when (@variationContainerGrid) or (@variationContainerRelaxed) { - .ui.ui.ui.grid.container { - width: @largeMonitorGridWidth; - } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @largeMonitorRelaxedGridWidth; - } - .ui.ui.ui.very.relaxed.grid.container { - width: @largeMonitorVeryRelaxedGridWidth; - } - } - } -} - -/******************************* - Types -*******************************/ - -& when (@variationContainerText) { - /* Text Container */ - .ui.text.container { - font-family: @textFontFamily; - max-width: @textWidth; - line-height: @textLineHeight; - font-size: @textSize; - } -} - -& when (@variationContainerFluid) { - /* Fluid */ - .ui.fluid.container { - width: 100%; - } -} - -/******************************* - Variations -*******************************/ -& when (@variationContainerAligned) { - .ui[class*="left aligned"].container { - text-align: left; - } - .ui[class*="center aligned"].container { - text-align: center; - } - .ui[class*="right aligned"].container { - text-align: right; - } -} -& when (@variationContainerJustified) { - .ui.justified.container { - text-align: justify; - hyphens: auto; - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/divider.less b/semantic/src/definitions/elements/divider.less deleted file mode 100644 index d23167d..0000000 --- a/semantic/src/definitions/elements/divider.less +++ /dev/null @@ -1,298 +0,0 @@ -/*! - * # Fomantic-UI - Divider - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'divider'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Divider -*******************************/ - -.ui.divider { - margin: @margin; - - line-height: 1; - height: 0; - - font-weight: @fontWeight; - text-transform: @textTransform; - letter-spacing: @letterSpacing; - color: @color; - - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -/*-------------- - Basic ----------------*/ - -.ui.divider:not(.vertical):not(.horizontal) { - border-top: @shadowWidth @borderStyle @shadowColor; - border-bottom: @highlightWidth @borderStyle @highlightColor; -} - -/*-------------- - Coupling ----------------*/ - -/* Allow divider between each column row */ -.ui.grid > .column + .divider, -.ui.grid > .row > .column + .divider { - left: auto; -} - -& when (@variationDividerHorizontal) { - /*-------------- - Horizontal - ---------------*/ - - .ui.horizontal.divider { - display: table; - white-space: nowrap; - - height: auto; - margin: @horizontalMargin; - line-height: 1; - text-align: center; - } - - .ui.horizontal.divider:before, - .ui.horizontal.divider:after { - content: ''; - display: table-cell; - position: relative; - top: 50%; - width: 50%; - background-repeat: no-repeat; - } - - .ui.horizontal.divider:before { - background-position: right @horizontalDividerMargin top 50%; - } - .ui.horizontal.divider:after { - background-position: left @horizontalDividerMargin top 50%; - } -} - -& when (@variationDividerVertical) { - /*-------------- - Vertical - ---------------*/ - - .ui.vertical.divider { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - - margin: 0; - padding: 0; - width: auto; - height: 50%; - - line-height: 0; - text-align: center; - transform: translateX(-50%); - } - - .ui.vertical.divider:before, - .ui.vertical.divider:after { - position: absolute; - left: 50%; - content: ''; - z-index: 3; - - border-left: @shadowWidth @borderStyle @shadowColor; - border-right: @highlightWidth @borderStyle @highlightColor; - - width: 0; - height: @verticalDividerHeight; - } - - .ui.vertical.divider:before { - top: -100%; - } - .ui.vertical.divider:after { - top: auto; - bottom: 0; - } - - /* Inside grid */ - @media only screen and (max-width : @largestMobileScreen) { - - .ui.stackable.grid .ui.vertical.divider, - .ui.grid .stackable.row .ui.vertical.divider { - display: table; - white-space: nowrap; - height: auto; - margin: @horizontalMargin; - overflow: hidden; - line-height: 1; - text-align: center; - position: static; - top: 0; - left: 0; - transform: none; - } - - .ui.stackable.grid .ui.vertical.divider:before, - .ui.grid .stackable.row .ui.vertical.divider:before, - .ui.stackable.grid .ui.vertical.divider:after, - .ui.grid .stackable.row .ui.vertical.divider:after { - left: 0; - border-left: none; - border-right: none; - content: ''; - display: table-cell; - position: relative; - top: 50%; - width: 50%; - background-repeat: no-repeat; - } - - .ui.stackable.grid .ui.vertical.divider:before, - .ui.grid .stackable.row .ui.vertical.divider:before { - background-position: right @horizontalDividerMargin top 50%; - } - .ui.stackable.grid .ui.vertical.divider:after, - .ui.grid .stackable.row .ui.vertical.divider:after { - background-position: left @horizontalDividerMargin top 50%; - } - } -} - -& when (@variationDividerIcon) { - /*-------------- - Icon - ---------------*/ - - .ui.divider > .icon { - margin: @dividerIconMargin; - font-size: @dividerIconSize; - height: 1em; - vertical-align: middle; - } -} - -& when (@variationDividerHorizontal) { - /*-------------- - Header - ---------------*/ - .ui.horizontal.divider[class*="left aligned"] { - &:before { - display: none; - } - &:after { - width: 100%; - } - } - .ui.horizontal.divider[class*="right aligned"] { - &:before { - width: 100%; - } - &:after { - display: none; - } - } -} - -/******************************* - Variations -*******************************/ - -& when (@variationDividerHidden) { - /*-------------- - Hidden - ---------------*/ - - .ui.hidden.divider { - border-color: transparent !important; - } - - .ui.hidden.divider:before, - .ui.hidden.divider:after { - display: none; - } -} - -/*-------------- - Inverted ----------------*/ -& when (@variationDividerInverted) { - .ui.divider.inverted, - .ui.vertical.inverted.divider, - .ui.horizontal.inverted.divider { - color: @invertedTextColor; - } - .ui.divider.inverted, - .ui.divider.inverted:after, - .ui.divider.inverted:before { - border-top-color: @invertedShadowColor !important; - border-left-color: @invertedShadowColor !important; - border-bottom-color: @invertedHighlightColor !important; - border-right-color: @invertedHighlightColor !important; - } -} - -/*-------------- - Fitted ----------------*/ -& when (@variationDividerFitted) { - .ui.fitted.divider { - margin: 0; - } -} - -& when (@variationDividerClearing) { - /*-------------- - Clearing - ---------------*/ - - .ui.clearing.divider { - clear: both; - } -} - -& when (@variationDividerSection) { - /*-------------- - Section - ---------------*/ - - .ui.section.divider { - margin-top: @sectionMargin; - margin-bottom: @sectionMargin; - } -} - -/*-------------- - Sizes ----------------*/ - -.ui.divider { - font-size: @medium; -} -& when not (@variationDividerSizes = false) { - each(@variationDividerSizes, { - @s: @@value; - .ui.@{value}.divider { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/emoji.less b/semantic/src/definitions/elements/emoji.less deleted file mode 100644 index 6e80621..0000000 --- a/semantic/src/definitions/elements/emoji.less +++ /dev/null @@ -1,72 +0,0 @@ -/*! - * # Fomantic UI - Emoji - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'emoji'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Emoji -*******************************/ - - -em[data-emoji] { - opacity: @opacity; - - speak: none; - backface-visibility: hidden; -} - -em[data-emoji]:before { - content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0'; - display: inline-block; - line-height: @emojiLineHeight; - background-repeat: no-repeat; - background-position: center center; - & when not (@emojiFileType = 'svg') { - background-size: contain; - } -} - - -/******************************* - States -*******************************/ - -em[data-emoji].disabled { - opacity: @disabledOpacity; -} - - -/******************************* - Variations -*******************************/ - -em[data-emoji].loading:before { - animation: loader @loadingDuration linear infinite; -} - - -/*------------------- - Link ---------------------*/ - -em[data-emoji].link:not(.disabled) { - cursor: pointer; -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/flag.less b/semantic/src/definitions/elements/flag.less deleted file mode 100644 index b691d18..0000000 --- a/semantic/src/definitions/elements/flag.less +++ /dev/null @@ -1,52 +0,0 @@ -/*! - * # Fomantic-UI - Flag - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'flag'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Flag -*******************************/ - -i.flag:not(.icon) { - display: inline-block; - - width: @width; - height: @height; - - line-height: @height; - vertical-align: @verticalAlign; - margin: 0 @margin 0 0; - - text-decoration: inherit; - - speak: none; - -webkit-font-smoothing: antialiased; - backface-visibility: hidden; -} - -/* Sprite */ -i.flag:not(.icon):before { - display: inline-block; - content: ''; - background: url(@spritePath) no-repeat -108px -1976px; - width: @width; - height: @height; -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/header.less b/semantic/src/definitions/elements/header.less deleted file mode 100644 index 669f316..0000000 --- a/semantic/src/definitions/elements/header.less +++ /dev/null @@ -1,487 +0,0 @@ -/*! - * # Fomantic-UI - Header - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'header'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Header -*******************************/ - -/* Standard */ -.ui.header { - border: none; - margin: @margin; - padding: @verticalPadding @horizontalPadding; - font-family: @fontFamily; - font-weight: @fontWeight; - line-height: @lineHeight; - text-transform: @textTransform; - color: @textColor; -} - -.ui.header:first-child { - margin-top: @firstMargin; -} -.ui.header:last-child { - margin-bottom: @lastMargin; -} - -& when (@variationHeaderSub) { - /*-------------- - Sub Header - ---------------*/ - - .ui.header .sub.header { - display: block; - font-weight: @normal; - padding: 0; - margin: @subHeaderMargin; - font-size: @subHeaderFontSize; - line-height: @subHeaderLineHeight; - color: @subHeaderColor; - } -} - -/*-------------- - Icon ----------------*/ - -.ui.header > i.icon { - display: table-cell; - opacity: @iconOpacity; - font-size: @iconSize; - padding-top: @iconOffset; - vertical-align: @iconAlignment; -} - -/* With Text Node */ -.ui.header > i.icon:only-child { - display: inline-block; - padding: 0; - margin-right: @iconMargin; -} - -/*------------------- - Image ---------------------*/ - -.ui.header > .image:not(.icon), -.ui.header > img { - display: inline-block; - margin-top: @imageOffset; - width: @imageWidth; - height: @imageHeight; - vertical-align: @imageAlignment; -} -.ui.header > .image:not(.icon):only-child, -.ui.header > img:only-child { - margin-right: @imageMargin; -} - -/*-------------- - Content ----------------*/ - -.ui.header .content { - display: inline-block; - vertical-align: @contentAlignment; -} - -/* After Image */ -.ui.header > img + .content, -.ui.header > .image + .content { - padding-left: @imageMargin; - vertical-align: @contentImageAlignment; -} - -/* After Icon */ -.ui.header > i.icon + .content { - padding-left: @iconMargin; - display: table-cell; - vertical-align: @contentIconAlignment; -} - - -/*-------------- - Loose Coupling ----------------*/ - -.ui.header .ui.label { - font-size: @labelSize; - margin-left: @labelDistance; - vertical-align: @labelVerticalAlign; -} - -/* Positioning */ -.ui.header + p { - margin-top: @nextParagraphDistance; -} - - - -/******************************* - Types -*******************************/ - - -/*-------------- - Page ----------------*/ -& when not (@variationHeaderTags = false) { - each(@variationHeaderTags, { - @sf: @{value}SubHeaderFontSize; - @s: @@value; - @{value}.ui.header { - font-size: @s; - } - & when (@variationHeaderSub) { - @{value}.ui.header .sub.header { - font-size: @@sf; - } - } - }) -} - -/*-------------- - Content Heading ----------------*/ - -& when not (@variationHeaderSizes = false) { - each(@variationHeaderSizes, { - @sf: @{value}SubHeaderFontSize; - @shf: @{value}SubHeadingSize; - @s: @{value}FontSize;; - .ui.@{value}.header { - font-size: @@s; - & when (@@s >= 2) { - min-height: 1em; - } - } - & when (@variationHeaderSub) { - .ui.@{value}.header .sub.header { - font-size: @@sf; - } - .ui.@{value}.sub.header { - font-size: @@shf; - } - } - }) -} - -& when (@variationHeaderSub) { - /*-------------- - Sub Heading - ---------------*/ - - .ui.sub.header { - padding: 0; - margin-bottom: @subHeadingDistance; - font-weight: @subHeadingFontWeight; - font-size: @subHeadingFontSize; - text-transform: @subHeadingTextTransform; - color: @subHeadingColor; - } -} - -& when (@variationHeaderIcon) { - /*------------------- - Icon - --------------------*/ - - .ui.icon.header { - display: inline-block; - text-align: center; - margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin; - } - .ui.icon.header:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; - } - - .ui.icon.header:first-child { - margin-top: @iconHeaderFirstMargin; - } - .ui.icon.header > i.icon { - float: none; - display: block; - width: auto; - height: auto; - line-height: 1; - padding: 0; - font-size: @iconHeaderSize; - margin: 0 auto @iconHeaderMargin; - opacity: @iconHeaderOpacity; - } - .ui.icon.header .corner.icon { - font-size: @cornerIconHeaderSize; - } - .ui.icon.header .content { - display: block; - padding: 0; - } - .ui.icon.header > i.circular.icon { - font-size: @circularHeaderIconSize; - } - .ui.icon.header > i.square.icon { - font-size: @squareHeaderIconSize; - } - & when (@variationHeaderBlock) { - .ui.block.icon.header > i.icon { - margin-bottom: 0; - } - } - .ui.icon.header.aligned { - margin-left: auto; - margin-right: auto; - display: block; - } -} - -/******************************* - States -*******************************/ -& when (@variationHeaderDisabled) { - .ui.disabled.header { - opacity: @disabledOpacity; - } -} - - -/******************************* - Variations -*******************************/ - -& when (@variationHeaderInverted) { - /*------------------- - Inverted - --------------------*/ - - .ui.inverted.header { - color: @invertedColor; - } - .ui.inverted.header .sub.header { - color: @invertedSubHeaderColor; - } - & when (@variationHeaderAttached) { - .ui.inverted.attached.header { - background: @invertedAttachedBackground; - box-shadow: none; - border-color: transparent; - } - } - & when (@variationHeaderBlock) { - .ui.inverted.block.header { - background: @invertedBlockBackground; - box-shadow: none; - border-bottom: none; - } - } -} - - -/*------------------- - Colors ---------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - @h: @colors[@@color][hover]; - @lh: @colors[@@color][lightHover]; - - .ui.@{color}.header { - color: @c; - } - a.ui.@{color}.header:hover { - color: @h; - } - & when (@variationHeaderDividing) { - .ui.@{color}.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @c; - } - } - & when (@variationHeaderInverted) { - .ui.inverted.@{color}.header.header.header { - color: @l; - } - a.ui.inverted.@{color}.header.header.header:hover { - color: @lh; - } - .ui.inverted.@{color}.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @l; - } - } -}) - -& when (@variationHeaderAligned) { - /*------------------- - Aligned - --------------------*/ - - .ui.left.aligned.header { - text-align: left; - } - .ui.right.aligned.header { - text-align: right; - } - .ui.centered.header, - .ui.center.aligned.header { - text-align: center; - } -} - -& when (@variationHeaderJustified) { - .ui.justified.header { - text-align: justify; - } - .ui.justified.header:after { - display: inline-block; - content: ''; - width: 100%; - } -} - -& when (@variationHeaderFloated) { - /*------------------- - Floated - --------------------*/ - - .ui.floated.header, - .ui[class*="left floated"].header { - float: left; - margin-top: 0; - margin-right: @floatedMargin; - } - .ui[class*="right floated"].header { - float: right; - margin-top: 0; - margin-left: @floatedMargin; - } -} - -& when (@variationHeaderFitted) { - /*------------------- - Fitted - --------------------*/ - - .ui.fitted.header { - padding: 0; - } -} - -& when (@variationHeaderDividing) { - /*------------------- - Dividing - --------------------*/ - - .ui.dividing.header { - padding-bottom: @dividedBorderPadding; - border-bottom: @dividedBorder; - } - .ui.dividing.header .sub.header { - padding-bottom: @dividedSubHeaderPadding; - } - .ui.dividing.header i.icon { - margin-bottom: @dividedIconPadding; - } - & when (@variationHeaderInverted) { - .ui.inverted.dividing.header { - border-bottom-color: @invertedDividedBorderColor; - } - } -} - -& when (@variationHeaderBlock) { - /*------------------- - Block - --------------------*/ - - .ui.block.header { - background: @blockBackground; - padding: @blockVerticalPadding @blockHorizontalPadding; - box-shadow: @blockBoxShadow; - border: @blockBorder; - border-radius: @blockBorderRadius; - } - .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: @mediumBlock; - } - & when not (@variationHeaderSizes = false) { - each(@variationHeaderSizes, { - @s: @{value}Block; - .ui.@{value}.block.header { - font-size: @@s; - } - }) - } -} - -& when (@variationHeaderAttached) { - /*------------------- - Attached - --------------------*/ - - .ui.attached.header { - background: @attachedBackground; - padding: @attachedVerticalPadding @attachedHorizontalPadding; - margin: 0 @attachedOffset 0 @attachedOffset; - box-shadow: @attachedBoxShadow; - border: @attachedBorder; - border-radius: 0; - } - .ui.attached.block.header { - background: @blockBackground; - } - .ui.attached:not(.top).header { - border-top: none; - } - .ui.top.attached.header { - border-radius: @attachedBorderRadius @attachedBorderRadius 0 0; - } - .ui.bottom.attached.header { - border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius; - } - - /* Attached Sizes */ - .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: @mediumAttachedSize; - } - & when not (@variationHeaderSizes = false) { - each(@variationHeaderSizes, { - @s: @{value}AttachedSize; - .ui.@{value}.attached.header { - font-size: @@s; - } - }) - } -} - -/*------------------- - Sizing ---------------------*/ - -.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: @mediumFontSize; -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/icon.less b/semantic/src/definitions/elements/icon.less deleted file mode 100644 index e97ae46..0000000 --- a/semantic/src/definitions/elements/icon.less +++ /dev/null @@ -1,374 +0,0 @@ -/*! - * # Fomantic-UI - Icon - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'icon'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Icon -*******************************/ - -@font-face { - font-family: 'Icons'; - src: @fallbackSRC; - src: @src; - font-style: normal; - font-weight: @normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; -} - -i.icon { - display: inline-block; - opacity: @opacity; - - margin: 0 @distanceFromText 0 0; - - width: @width; - height: @height; - - font-family: 'Icons'; - font-style: normal; - font-weight: @normal; - text-decoration: inherit; - text-align: center; - - speak: none; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - backface-visibility: hidden; -} - -i.icon:before { - background: none !important; -} - -/******************************* - Types -*******************************/ - -& when (@variationIconLoading) { - /*-------------- - Loading - ---------------*/ - - i.icon.loading { - height: 1em; - line-height: 1; - animation: loader @loadingDuration linear infinite; - } -} - -/******************************* - States -*******************************/ - -i.icon:hover, i.icons:hover, -i.icon:active, i.icons:active, -i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { - opacity: 1; -} - -& when (@variationIconDisabled) { - i.disabled.icon, i.disabled.icons { - opacity: @disabledOpacity; - cursor: default; - pointer-events: none; - } -} - -/******************************* - Variations -*******************************/ - -& when (@variationIconFitted) { - /*------------------- - Fitted - --------------------*/ - - i.fitted.icon { - width: auto; - margin: 0 !important; - } -} - -& when (@variationIconLink) { - /*------------------- - Link - --------------------*/ - - i.link.icon:not(.disabled), i.link.icons:not(.disabled) { - cursor: pointer; - opacity: @linkOpacity; - transition: opacity @defaultDuration @defaultEasing; - } - i.link.icon:hover, i.link.icons:hover { - opacity: 1; - } -} - -& when (@variationIconCircular) { - /*------------------- - Circular - --------------------*/ - - i.circular.icon { - border-radius: 500em !important; - line-height: 1 !important; - - padding: @circularPadding !important; - box-shadow: @circularShadow; - - width: @circularSize !important; - height: @circularSize !important; - } - & when (@variationIconInverted) { - i.circular.inverted.icon { - border: none; - box-shadow: none; - } - } -} - -& when (@variationIconFlipped) { - /*------------------- - Flipped - --------------------*/ - - i.flipped.icon, - i.horizontally.flipped.icon { - transform: scale(-1, 1); - } - i.vertically.flipped.icon { - transform: scale(1, -1); - } -} - -& when (@variationIconRotated) { - /*------------------- - Rotated - --------------------*/ - - i.rotated.icon, - i.right.rotated.icon, - i.clockwise.rotated.icon { - transform: rotate(90deg); - } - - i.left.rotated.icon, - i.counterclockwise.rotated.icon { - transform: rotate(-90deg); - } - - i.halfway.rotated.icon { - transform: rotate(180deg); - } -} - -& when (@variationIconFlipped) and (@variationIconRotated) { - /*-------------------------- - Flipped & Rotated - ---------------------------*/ - - i.rotated.flipped.icon, - i.right.rotated.flipped.icon, - i.clockwise.rotated.flipped.icon { - transform: scale(-1, 1) rotate(90deg); - } - - i.left.rotated.flipped.icon, - i.counterclockwise.rotated.flipped.icon { - transform: scale(-1, 1) rotate(-90deg); - } - - i.halfway.rotated.flipped.icon { - transform: scale(-1, 1) rotate(180deg); - } - - i.rotated.vertically.flipped.icon, - i.right.rotated.vertically.flipped.icon, - i.clockwise.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(90deg); - } - - i.left.rotated.vertically.flipped.icon, - i.counterclockwise.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(-90deg); - } - - i.halfway.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(180deg); - } -} - -& when (@variationIconBordered) { - /*------------------- - Bordered - --------------------*/ - - i.bordered.icon { - line-height: 1; - vertical-align: baseline; - - width: @borderedSize; - height: @borderedSize; - padding: @borderedVerticalPadding @borderedHorizontalPadding !important; - box-shadow: @borderedShadow; - } - & when (@variationIconInverted) { - i.bordered.inverted.icon { - border: none; - box-shadow: none; - } - } -} - -& when (@variationIconInverted) { - /*------------------- - Inverted - --------------------*/ - - /* Inverted Shapes */ - i.inverted.bordered.icon, - i.inverted.circular.icon { - background-color: @black; - color: @white; - } - - i.inverted.icon { - color: @white; - } -} - -/*------------------- - Colors ---------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - - i.@{color}.icon.icon.icon.icon { - color: @c; - } - & when (@variationIconInverted) { - i.inverted.@{color}.icon.icon.icon.icon { - color: @l; - } - i.inverted.bordered.@{color}.icon.icon.icon.icon, - i.inverted.circular.@{color}.icon.icon.icon.icon { - background-color: @c; - color: @white; - } - } -}) - - -/*------------------- - Sizes ---------------------*/ - -i.icon, -i.icons { - font-size: @medium; - line-height: @lineHeight; -} -& when not (@variationIconSizes = false) { - each(@variationIconSizes, { - @s: @@value; - i.@{value}.@{value}.@{value}.icon, - i.@{value}.@{value}.@{value}.icons { - font-size: @s; - vertical-align: middle; - } - }) -} - -& when (@variationIconGroups) or (@variationIconCorner) { - /******************************* - Groups - *******************************/ - - i.icons { - display: inline-block; - position: relative; - line-height: 1; - } - - i.icons .icon { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - margin: 0; - } - - i.icons .icon:first-child { - position: static; - width: auto; - height: auto; - vertical-align: top; - transform: none; - } - - & when (@variationIconCorner) { - /* Corner Icon */ - i.icons .corner.icon { - top: auto; - left: auto; - right: 0; - bottom: 0; - transform: none; - font-size: @cornerIconSize; - text-shadow: @cornerIconShadow; - } - i.icons .icon.corner[class*="top right"] { - top: 0; - left: auto; - right: 0; - bottom: auto; - } - i.icons .icon.corner[class*="top left"] { - top: 0; - left: 0; - right: auto; - bottom: auto; - } - i.icons .icon.corner[class*="bottom left"] { - top: auto; - left: 0; - right: auto; - bottom: 0; - } - i.icons .icon.corner[class*="bottom right"] { - top: auto; - left: auto; - right: 0; - bottom: 0; - } - & when (@variationIconInverted) { - i.icons .inverted.corner.icon { - text-shadow: @cornerIconInvertedShadow; - } - } - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/image.less b/semantic/src/definitions/elements/image.less deleted file mode 100644 index 651b81e..0000000 --- a/semantic/src/definitions/elements/image.less +++ /dev/null @@ -1,321 +0,0 @@ -/*! - * # Fomantic-UI - Image - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'image'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Image -*******************************/ - -.ui.image { - position: relative; - display: inline-block; - vertical-align: middle; - max-width: 100%; - background-color: @placeholderColor; -} - -img.ui.image { - display: block; -} - -.ui.image svg, -.ui.image img { - display: block; - max-width: 100%; - height: auto; -} - - -/******************************* - States -*******************************/ - -.ui.hidden.images, -.ui.ui.hidden.image { - display: none; -} -.ui.hidden.transition.images, -.ui.hidden.transition.image { - display: block; - visibility: hidden; -} -.ui.images > .hidden.transition { - display: inline-block; - visibility: hidden; -} - -& when (@variationImageDisabled) { - .ui.disabled.images, - .ui.disabled.image { - cursor: default; - opacity: @disabledOpacity; - } -} - - -/******************************* - Variations -*******************************/ - -& when (@variationImageInline) { - /*-------------- - Inline - ---------------*/ - - .ui.inline.image, - .ui.inline.image svg, - .ui.inline.image img { - display: inline-block; - } -} - -& when (@variationImageAligned) { - /*------------------ - Vertical Aligned - -------------------*/ - - .ui.top.aligned.image, - .ui.top.aligned.image svg, - .ui.top.aligned.image img { - display: inline-block; - vertical-align: top; - } - .ui.middle.aligned.image, - .ui.middle.aligned.image svg, - .ui.middle.aligned.image img { - display: inline-block; - vertical-align: middle; - } - .ui.bottom.aligned.image, - .ui.bottom.aligned.image svg, - .ui.bottom.aligned.image img { - display: inline-block; - vertical-align: bottom; - } - .ui.top.aligned.images .image, - .ui.images .ui.top.aligned.image { - align-self: flex-start; - } - .ui.middle.aligned.images .image, - .ui.images .ui.middle.aligned.image { - align-self: center; - } - .ui.bottom.aligned.images .image, - .ui.images .ui.bottom.aligned.image { - align-self: flex-end; - } -} - -& when (@variationImageRounded) { - /*-------------- - Rounded - ---------------*/ - - .ui.rounded.images .image, - .ui.rounded.image, - .ui.rounded.images .image > *, - .ui.rounded.image > * { - border-radius: @roundedBorderRadius; - } -} - -& when (@variationImageBordered) { - /*-------------- - Bordered - ---------------*/ - - .ui.bordered.images .image, - .ui.bordered.images img, - .ui.bordered.images svg, - .ui.bordered.image img, - .ui.bordered.image svg, - img.ui.bordered.image { - border: @imageBorder; - } -} - -& when (@variationImageCircular) { - /*-------------- - Circular - ---------------*/ - - .ui.circular.images, - .ui.circular.image { - overflow: hidden; - } - - .ui.circular.images .image, - .ui.circular.image, - .ui.circular.images .image > *, - .ui.circular.image > * { - -webkit-border-radius: @circularRadius; - -moz-border-radius: @circularRadius; - border-radius: @circularRadius; - } -} - -& when (@variationImageFluid) { - /*-------------- - Fluid - ---------------*/ - - .ui.fluid.images, - .ui.fluid.image, - .ui.fluid.images img, - .ui.fluid.images svg, - .ui.fluid.image svg, - .ui.fluid.image img { - display: block; - width: 100%; - height: auto; - } -} - -& when (@variationImageAvatar) { - /*-------------- - Avatar - ---------------*/ - - .ui.avatar.images .image, - .ui.avatar.images img, - .ui.avatar.images svg, - .ui.avatar.image img, - .ui.avatar.image svg, - .ui.avatar.image { - margin-right: @avatarMargin; - - display: inline-block; - width: @avatarSize; - height: @avatarSize; - - -webkit-border-radius: @circularRadius; - -moz-border-radius: @circularRadius; - border-radius: @circularRadius; - } -} - -& when (@variationImageSpaced) { - /*------------------- - Spaced - --------------------*/ - - .ui.spaced.image { - display: inline-block !important; - margin-left: @spacedDistance; - margin-right: @spacedDistance; - } - - .ui[class*="left spaced"].image { - margin-left: @spacedDistance; - margin-right: 0; - } - - .ui[class*="right spaced"].image { - margin-left: 0; - margin-right: @spacedDistance; - } -} - -& when (@variationImageFloated) { - /*------------------- - Floated - --------------------*/ - - .ui.floated.image, - .ui.floated.images { - float: left; - margin-right: @floatedHorizontalMargin; - margin-bottom: @floatedVerticalMargin; - } - .ui.right.floated.images, - .ui.right.floated.image { - float: right; - margin-right: 0; - margin-bottom: @floatedVerticalMargin; - margin-left: @floatedHorizontalMargin; - } - - .ui.floated.images:last-child, - .ui.floated.image:last-child { - margin-bottom: 0; - } -} - -& when (@variationImageCentered) { - .ui.centered.image { - display: block; - margin-left: auto; - margin-right: auto; - } - .ui.centered.images { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - justify-content: center; - } -} - -/*-------------- - Sizes ----------------*/ - -.ui.medium.images .image, -.ui.medium.images img, -.ui.medium.images svg, -.ui.medium.image { - width: @mediumWidth; - height: auto; - font-size: @medium; -} -& when not (@variationImageSizes = false) { - each(@variationImageSizes, { - @w: @{value}Width; - @s: @@value; - .ui.@{value}.images .image, - .ui.@{value}.images img, - .ui.@{value}.images svg, - .ui.@{value}.image { - width: @@w; - height: auto; - font-size: @s; - } - }) -} - -& when (@variationImageGroups) { - /******************************* - Groups - *******************************/ - - .ui.images { - font-size: 0; - margin: 0 -@imageHorizontalMargin 0; - } - - .ui.images .image, - .ui.images > img, - .ui.images > svg { - display: inline-block; - margin: 0 @imageHorizontalMargin @imageVerticalMargin; - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/input.less b/semantic/src/definitions/elements/input.less deleted file mode 100644 index 7782ede..0000000 --- a/semantic/src/definitions/elements/input.less +++ /dev/null @@ -1,565 +0,0 @@ -/*! - * # Fomantic-UI - Input - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'input'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Standard -*******************************/ - - -/*-------------------- - Inputs ----------------------*/ - -.ui.input { - position: relative; - font-weight: @normal; - font-style: normal; - display: inline-flex; - color: @inputColor; -} -.ui.input > input { - margin: 0; - max-width: 100%; - flex: 1 0 auto; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - text-align: @textAlign; - line-height: @lineHeight; - - font-family: @inputFont; - padding: @padding; - - background: @background; - border: @border; - color: @inputColor; - border-radius: @borderRadius; - transition: @transition; - - box-shadow: @boxShadow; -} - - -/*-------------------- - Placeholder ----------------------*/ - -/* browsers require these rules separate */ - -.ui.input > input::-webkit-input-placeholder { - color: @placeholderColor; -} -.ui.input > input::-moz-placeholder { - color: @placeholderColor; -} -.ui.input > input:-ms-input-placeholder { - color: @placeholderColor; -} - - -/******************************* - States -*******************************/ -& when (@variationInputDisabled) { - /*-------------------- - Disabled - ---------------------*/ - - .ui.disabled.input, - .ui.input:not(.disabled) input[disabled] { - opacity: @disabledOpacity; - } - - .ui.disabled.input > input, - .ui.input:not(.disabled) input[disabled] { - pointer-events: none; - } -} - -/*-------------------- - Active ----------------------*/ - -.ui.input > input:active, -.ui.input.down input { - border-color: @downBorderColor; - background: @downBackground; - color: @downColor; - box-shadow: @downBoxShadow; -} - -& when (@variationInputLoading) { - /*-------------------- - Loading - ---------------------*/ - - .ui.loading.loading.input > i.icon:before { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - border-radius: @circularRadius; - border: @loaderLineWidth solid @loaderFillColor; - } - .ui.loading.loading.input > i.icon:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - animation: loader @loaderSpeed infinite linear; - - border: @loaderLineWidth solid @loaderLineColor; - border-radius: @circularRadius; - - box-shadow: 0 0 0 1px transparent; - } -} - - -/*-------------------- - Focus ----------------------*/ - -.ui.input.focus > input, -.ui.input > input:focus { - border-color: @focusBorderColor; - background: @focusBackground; - color: @focusColor; - box-shadow: @focusBoxShadow; -} -.ui.input.focus > input::-webkit-input-placeholder, -.ui.input > input:focus::-webkit-input-placeholder { - color: @placeholderFocusColor; -} -.ui.input.focus > input::-moz-placeholder, -.ui.input > input:focus::-moz-placeholder { - color: @placeholderFocusColor; -} -.ui.input.focus > input:-ms-input-placeholder, -.ui.input > input:focus:-ms-input-placeholder { - color: @placeholderFocusColor; -} - - -& when (@variationInputStates) { - /*-------------------- - States - ---------------------*/ - each(@formStates, { - @state: replace(@key, '@', ''); - - .ui.input.@{state} > input { - background-color: @formStates[@@state][background]; - border-color: @formStates[@@state][borderColor]; - color: @formStates[@@state][color]; - box-shadow: @formStates[@@state][boxShadow]; - } - - /* Placeholder */ - .ui.input.@{state} > input::-webkit-input-placeholder { - color: @formStates[@@state][inputPlaceholderColor]; - } - .ui.input.@{state} > input::-moz-placeholder { - color: @formStates[@@state][inputPlaceholderColor]; - } - .ui.input.@{state} > input:-ms-input-placeholder { - color: @formStates[@@state][inputPlaceholderColor] !important; - } - - /* Focused Placeholder */ - .ui.input.@{state} > input:focus::-webkit-input-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor]; - } - .ui.input.@{state} > input:focus::-moz-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor]; - } - .ui.input.@{state} > input:focus:-ms-input-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor] !important; - } - }) -} -/******************************* - Variations -*******************************/ - -& when (@variationInputTransparent) { - /*-------------------- - Transparent - ---------------------*/ - - - .ui.transparent.input > textarea, - .ui.transparent.input > input { - border-color: transparent !important; - background-color: transparent !important; - padding: 0; - box-shadow: none !important; - border-radius: 0 !important; - } - .field .ui.transparent.input > textarea { - padding: @padding; - } - - /* Transparent Icon */ - :not(.field) > .ui.transparent.icon.input > i.icon { - width: @transparentIconWidth; - } - :not(.field) > .ui.ui.ui.transparent.icon.input > input { - padding-left: 0; - padding-right: @transparentIconMargin; - } - :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { - padding-left: @transparentIconMargin; - padding-right: 0; - } - & when (@variationInputInverted) { - /* Transparent Inverted */ - .ui.transparent.inverted.input { - color: @transparentInvertedColor; - } - .ui.ui.transparent.inverted.input > textarea, - .ui.ui.transparent.inverted.input > input { - color: inherit; - } - - .ui.transparent.inverted.input > input::-webkit-input-placeholder { - color: @transparentInvertedPlaceholderColor; - } - .ui.transparent.inverted.input > input::-moz-placeholder { - color: @transparentInvertedPlaceholderColor; - } - .ui.transparent.inverted.input > input:-ms-input-placeholder { - color: @transparentInvertedPlaceholderColor; - } - } -} - -& when (@variationInputIcon) { - /*-------------------- - Icon - ---------------------*/ - - .ui.icon.input > i.icon { - cursor: default; - position: absolute; - line-height: 1; - text-align: center; - top: 0; - right: 0; - margin: 0; - height: 100%; - - width: @iconWidth; - opacity: @iconOpacity; - border-radius: 0 @borderRadius @borderRadius 0; - transition: @iconTransition; - } - .ui.icon.input > i.icon:not(.link) { - pointer-events: none; - } - .ui.ui.ui.ui.icon.input > textarea, - .ui.ui.ui.ui.icon.input > input { - padding-right: @iconMargin; - } - - .ui.icon.input > i.icon:before, - .ui.icon.input > i.icon:after { - left: 0; - position: absolute; - text-align: center; - top: 50%; - width: 100%; - margin-top: @iconOffset; - } - .ui.icon.input > i.link.icon { - cursor: pointer; - } - .ui.icon.input > i.circular.icon { - top: @circularIconVerticalOffset; - right: @circularIconHorizontalOffset; - } - - /* Left Icon Input */ - .ui[class*="left icon"].input > i.icon { - right: auto; - left: @borderWidth; - border-radius: @borderRadius 0 0 @borderRadius; - } - .ui[class*="left icon"].input > i.circular.icon { - right: auto; - left: @circularIconHorizontalOffset; - } - .ui.ui.ui.ui[class*="left icon"].input > textarea, - .ui.ui.ui.ui[class*="left icon"].input > input { - padding-left: @iconMargin; - padding-right: @horizontalPadding; - } - - /* Focus */ - .ui.icon.input > textarea:focus ~ i.icon, - .ui.icon.input > input:focus ~ i.icon { - opacity: 1; - } -} - -& when (@variationInputLabeled) { - /*-------------------- - Labeled - ---------------------*/ - - /* Adjacent Label */ - .ui.labeled.input > .label { - flex: 0 0 auto; - margin: 0; - font-size: @relativeMedium; - } - .ui.labeled.input > .label:not(.corner) { - padding-top: @verticalPadding; - padding-bottom: @verticalPadding; - } - - /* Regular Label on Left */ - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-color: transparent; - } - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { - border-left-color: @focusBorderColor; - } - - /* Regular Label on Right */ - .ui[class*="right labeled"].input > input { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right-color: transparent !important; - } - .ui[class*="right labeled"].input > input + .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .ui[class*="right labeled"].input > input:focus { - border-right-color: @focusBorderColor !important; - } -} - -& when (@variationInputCorner) { - /* Corner Label */ - .ui.labeled.input .corner.label { - top: @labelCornerTop; - right: @labelCornerRight; - font-size: @labelCornerSize; - border-radius: 0 @borderRadius 0 0; - } - - /* Spacing with corner label */ - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea, - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { - padding-right: @labeledMargin !important; - } - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea, - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { - padding-right: @labeledIconInputMargin !important; - } - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { - margin-right: @labeledIconMargin; - } - - /* Left Labeled */ - .ui[class*="left corner labeled"].labeled.input > textarea, - .ui[class*="left corner labeled"].labeled.input > input { - padding-left: @labeledMargin !important; - } - & when (@variationInputIcon) { - .ui[class*="left corner labeled"].icon.input > textarea, - .ui[class*="left corner labeled"].icon.input > input { - padding-left: @labeledIconInputMargin !important; - } - .ui[class*="left corner labeled"].icon.input > i.icon { - margin-left: @labeledIconMargin; - } - } -} -& when (@variationInputIcon) { - .ui.icon.input > textarea ~ i.icon { - height: @textareaIconHeight; - } - :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { - height: @transparentTextareaIconHeight; - } -} -& when (@variationInputCorner) { - /* Corner Label Position */ - .ui.input > .ui.corner.label { - top: @borderWidth; - right: @borderWidth; - } - .ui.input > .ui.left.corner.label { - right: auto; - left: @borderWidth; - } -} - -& when (@variationInputLabeled) or (@variationInputAction) { - /* Labeled and action input states */ - each(@formStates, { - @state: replace(@key, '@', ''); - @borderColor: @formStates[@@state][borderColor]; - - .ui.form .field.@{state} > .ui.action.input > .ui.button, - .ui.form .field.@{state} > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, - .ui.action.input.@{state} > .ui.button, - .ui.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label { - border-top: @borderWidth solid @borderColor; - border-bottom: @borderWidth solid @borderColor; - } - .ui.form .field.@{state} > .ui[class*="left action"].input > .ui.button, - .ui.form .field.@{state} > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, - .ui[class*="left action"].input.@{state} > .ui.button, - .ui.labeled.input.@{state}:not(.right):not([class*="corner labeled"]) > .ui.label { - border-left: @borderWidth solid @borderColor; - } - .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button, - .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, - .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button, - .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label { - border-right: @borderWidth solid @borderColor; - } - .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, - .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label:first-child { - border-left: @borderWidth solid @borderColor; - } - }) -} - -& when (@variationInputAction) { - /*-------------------- - Action - ---------------------*/ - - .ui.action.input > .button, - .ui.action.input > .buttons { - display: flex; - align-items: center; - flex: 0 0 auto; - } - .ui.action.input > .button, - .ui.action.input > .buttons > .button { - padding-top: @verticalPadding; - padding-bottom: @verticalPadding; - margin: 0; - } - - /* Input when ui Left*/ - .ui[class*="left action"].input > input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-color: transparent; - } - - /* Input when ui Right*/ - .ui.action.input:not([class*="left action"]) > input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-color: transparent; - } - - /* Button and Dropdown */ - .ui.action.input > .dropdown:first-child, - .ui.action.input > .button:first-child, - .ui.action.input > .buttons:first-child > .button { - border-radius: @borderRadius 0 0 @borderRadius; - } - .ui.action.input > .dropdown:not(:first-child), - .ui.action.input > .button:not(:first-child), - .ui.action.input > .buttons:not(:first-child) > .button { - border-radius: 0; - } - .ui.action.input > .dropdown:last-child, - .ui.action.input > .button:last-child, - .ui.action.input > .buttons:last-child > .button { - border-radius: 0 @borderRadius @borderRadius 0; - } - - /* Input Focus */ - .ui.action.input:not([class*="left action"]) > input:focus { - border-right-color: @focusBorderColor; - } - - .ui.ui[class*="left action"].input > input:focus { - border-left-color: @focusBorderColor; - } -} - -& when (@variationInputInverted) { - /*-------------------- - Inverted - ---------------------*/ - - /* Standard */ - .ui.inverted.input > input { - border: none; - } -} - -& when (@variationInputFluid) { - /*-------------------- - Fluid - ---------------------*/ - - .ui.fluid.input { - display: flex; - } - .ui.fluid.input > input { - width: 0 !important; - } -} - -/*-------------------- - Size ----------------------*/ - -.ui.input { - font-size: @relativeMedium; -} -& when not (@variationInputSizes = false) { - each(@variationInputSizes, { - @s: @{value}InputSize; - .ui.@{value}.input { - font-size: @@s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/label.less b/semantic/src/definitions/elements/label.less deleted file mode 100644 index 4517ed7..0000000 --- a/semantic/src/definitions/elements/label.less +++ /dev/null @@ -1,1032 +0,0 @@ -/*! - * # Fomantic-UI - Label - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'label'; - -@import (multiple) '../../theme.config'; - -/******************************* - Label -*******************************/ - -.ui.label { - display: inline-block; - line-height: 1; - vertical-align: @verticalAlign; - - margin: @verticalMargin @horizontalMargin; - - background-color: @backgroundColor; - background-image: @backgroundImage; - padding: @verticalPadding @horizontalPadding; - color: @color; - - text-transform: @textTransform; - font-weight: @fontWeight; - - border: @border; - border-radius: @borderRadius; - transition: @transition; -} - -.ui.label:first-child { - margin-left: 0; -} -.ui.label:last-child { - margin-right: 0; -} - -/* Link */ -a.ui.label { - cursor: pointer; -} - -/* Inside Link */ -.ui.label > a { - cursor: pointer; - color: inherit; - opacity: @linkOpacity; - transition: @linkTransition; -} -.ui.label > a:hover { - opacity: 1; -} - -/* Image */ -.ui.label > img { - width: auto !important; - vertical-align: middle; - height: @imageHeight; -} - -/* Icon */ -.ui.left.icon.label > .icon, -.ui.label > .icon { - width: auto; - margin: 0 @iconDistance 0 0; -} - -/* Detail */ -.ui.label > .detail { - display: inline-block; - vertical-align: top; - font-weight: @detailFontWeight; - margin-left: @detailMargin; - opacity: @detailOpacity; -} -.ui.label > .detail .icon { - margin: 0 @detailIconDistance 0 0; -} - -/* Removable label */ -.ui.label > .close.icon, -.ui.label > .delete.icon { - cursor: pointer; - font-size: @deleteSize; - opacity: @deleteOpacity; - transition: @deleteTransition; -} -.ui.label > .close.icon:hover, -.ui.label > .delete.icon:hover { - opacity: 1; -} - -/* Backward compatible positioning */ -.ui.label.left.icon > .close.icon, -.ui.label.left.icon > .delete.icon { - margin: 0 @deleteMargin 0 0; -} -.ui.label:not(.icon) > .close.icon, -.ui.label:not(.icon) > .delete.icon { - margin: 0 0 0 @deleteMargin; -} - -/* Label for only an icon */ -.ui.icon.label > .icon { - margin: 0 auto; -} - -/* Right Side Icon */ -.ui.right.icon.label > .icon { - margin: 0 0 0 @iconDistance; -} - -/*------------------- - Group ---------------------*/ - -.ui.labels > .label { - margin: 0 @groupHorizontalMargin @groupVerticalMargin 0; -} - - -/*------------------- - Coupling ---------------------*/ - -.ui.header > .ui.label { - margin-top: @lineHeightOffset; -} - - -/* Remove border radius on attached segment */ -.ui.attached.segment > .ui.top.left.attached.label, -.ui.bottom.attached.segment > .ui.top.left.attached.label { - border-top-left-radius: 0; -} -.ui.attached.segment > .ui.top.right.attached.label, -.ui.bottom.attached.segment > .ui.top.right.attached.label { - border-top-right-radius: 0; -} -.ui.top.attached.segment > .ui.bottom.left.attached.label { - border-bottom-left-radius: 0; -} -.ui.top.attached.segment > .ui.bottom.right.attached.label { - border-bottom-right-radius: 0; -} - -/* Padding on next content after a label */ -.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), -.ui.top.attached.label + :not(.attached) { - margin-top: @attachedSegmentPadding !important; -} -.ui.bottom.attached.label ~ :last-child:not(.attached) { - margin-top:0; - margin-bottom: @attachedSegmentPadding !important; -} - -.ui.segment:not(.basic) > .ui.top.attached.label { - margin-top: @attachedOffset; -} -.ui.segment:not(.basic) > .ui.bottom.attached.label { - margin-bottom: @attachedOffset; -} -.ui.segment:not(.basic) > .ui.attached.label:not(.right) { - margin-left: @attachedOffset; -} -.ui.segment:not(.basic) > .ui.right.attached.label { - margin-right: @attachedOffset; -} -.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { - width: @attachedWidthOffset; -} - - - -/******************************* - Types -*******************************/ -& when (@variationLabelImage) { - .ui.image.label { - width: auto; - margin-top: 0; - margin-bottom: 0; - max-width: 9999px; - vertical-align: baseline; - text-transform: none; - - background: @imageLabelBackground; - padding: @imageLabelPadding; - border-radius: @imageLabelBorderRadius; - box-shadow: @imageLabelBoxShadow; - &.attached:not(.basic) when (@variationLabelAttached) { - padding: @imageLabelPadding; - } - } - - .ui.image.label img { - display: inline-block; - vertical-align: top; - - height: @imageLabelImageHeight; - margin: @imageLabelImageMargin; - border-radius: @imageLabelImageBorderRadius; - } - - .ui.image.label .detail { - background: @imageLabelDetailBackground; - margin: @imageLabelDetailMargin; - padding: @imageLabelDetailPadding; - border-radius: 0 @imageLabelBorderRadius @imageLabelBorderRadius 0; - } - & when (@variationLabelAttached) { - .ui.bottom.attached.image.label:not(.right) > img, - .ui.top.right.attached.image.label > img { - border-top-left-radius: 0; - } - - .ui.top.attached.image.label:not(.right) > img, - .ui.bottom.right.attached.image.label > img { - border-bottom-left-radius: 0; - } - } -} - -& when (@variationLabelTag) { -/*------------------- - Tag ---------------------*/ - - .ui.tag.labels .label, - .ui.tag.label { - margin-left: 1em; - position: relative; - padding-left: @tagHorizontalPadding; - padding-right: @tagHorizontalPadding; - - border-radius: 0 @borderRadius @borderRadius 0; - transition: @tagTransition; - } - .ui.tag.labels .label:before, - .ui.tag.label:before { - position: absolute; - transform: translateY(-50%) translateX(50%) rotate(-45deg); - - top: @tagTriangleTopOffset; - right: @tagTriangleRightOffset; - content: ''; - - background-color: inherit; - background-image: @tagTriangleBackgroundImage; - - width: @tagTriangleSize; - height: @tagTriangleSize; - transition: @tagTransition; - } - - - .ui.tag.labels .label:after, - .ui.tag.label:after { - position: absolute; - content: ''; - top: 50%; - left: -(@tagCircleSize / 2); - - margin-top: -(@tagCircleSize / 2); - background-color: @tagCircleColor; - width: @tagCircleSize; - height: @tagCircleSize; - - box-shadow: @tagCircleBoxShadow; - border-radius: @circularRadius; - } - & when (@variationLabelBasic) { - .ui.basic.tag.labels .label:before, - .ui.basic.tag.label:before { - border-color: inherit; - border-width: @basicBorderWidth 0 0 @basicBorderWidth; - border-style: inherit; - right: @basicBorderFullWidthOffset; - } - .ui.basic.tag.labels .label:after, - .ui.basic.tag.label:after { - box-shadow: @basicTagCircleBoxShadow; - } - } -} - -& when (@variationLabelCorner) { -/*------------------- - Corner Label ---------------------*/ - - .ui.corner.label { - position: absolute; - top: 0; - right: 0; - margin: 0; - padding: 0; - text-align: center; - - border-color: @backgroundColor; - - width: @cornerTriangleSize; - height: @cornerTriangleSize; - z-index: @cornerTriangleZIndex; - transition: @cornerTriangleTransition; - } - - /* Icon Label */ - .ui.corner.label{ - background-color: transparent !important; - } - .ui.corner.label:after { - position: absolute; - content: ""; - right: 0; - top: 0; - z-index: -1; - - width: 0; - height: 0; - background-color: transparent; - - border-top: 0 solid transparent; - border-right: @cornerTriangleSize solid transparent; - border-bottom: @cornerTriangleSize solid transparent; - border-left: 0 solid transparent; - - border-right-color: inherit; - transition: @cornerTriangleTransition; - } - - .ui.corner.label .icon { - cursor: inherit; - position: absolute; - top: @cornerIconTopOffset; - left: auto; - right: @cornerIconRightOffset; - font-size: @cornerIconSize; - margin: 0; - } - - /* Left Corner */ - .ui.left.corner.label, - .ui.left.corner.label:after { - right: auto; - left: 0; - } - .ui.left.corner.label:after { - border-top: @cornerTriangleSize solid transparent; - border-right: @cornerTriangleSize solid transparent; - border-bottom: 0 solid transparent; - border-left: 0 solid transparent; - - border-top-color: inherit; - } - .ui.left.corner.label .icon { - left: @cornerIconLeftOffset; - right: auto; - } - - /* Segment */ - .ui.segment > .ui.corner.label { - top: -1px; - right: -1px; - } - .ui.segment > .ui.left.corner.label { - right: auto; - left: -1px; - } -} - -& when (@variationLabelRibbon) { - /*------------------- - Ribbon - --------------------*/ - - .ui.ribbon.label { - position: relative; - margin: 0; - min-width: max-content; - border-radius: 0 @borderRadius @borderRadius 0; - border-color: @ribbonShadowColor; - } - - .ui.ribbon.label:after { - position: absolute; - content: ''; - - top: 100%; - left: 0; - background-color: transparent; - - border-style: solid; - border-width: 0 @ribbonTriangleSize @ribbonTriangleSize 0; - border-color: transparent; - border-right-color: inherit; - - width: 0; - height: 0; - } - /* Positioning */ - .ui.ribbon.label { - left: @ribbonOffset; - margin-right: -@ribbonTriangleSize; - padding-left: @ribbonDistance; - padding-right: @ribbonTriangleSize; - } - .ui[class*="right ribbon"].label { - left: @rightRibbonOffset; - padding-left: @ribbonTriangleSize; - padding-right: @ribbonDistance; - } - & when (@variationLabelBasic) { - .ui.basic.ribbon.label { - padding-top: @basicRibbonOffset; - padding-bottom: @basicRibbonOffset; - } - .ui.basic.ribbon.label:not([class*="right ribbon"]) { - padding-left: @basicRibbonTriangleSizeOffset; - padding-right: @basicRibbonTriangleSize; - } - .ui.basic[class*="right ribbon"].label { - padding-left: @basicRibbonTriangleSize; - padding-right: @basicRibbonTriangleSizeOffset; - } - .ui.basic.ribbon.label::after { - top: @basicBorderFullWidthOffset; - } - .ui.basic.ribbon.label:not([class*="right ribbon"])::after { - left: @basicBorderWidthOffset; - } - .ui.basic[class*="right ribbon"].label::after { - right: @basicBorderWidthOffset; - } - } - /* Right Ribbon */ - .ui[class*="right ribbon"].label { - text-align: left; - transform: translateX(-100%); - border-radius: @borderRadius 0 0 @borderRadius; - } - .ui[class*="right ribbon"].label:after { - left: auto; - right: 0; - - border-style: solid; - border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0; - border-color: transparent; - border-top-color: inherit; - } - - /* Inside Table */ - .ui.image > .ribbon.label, - .ui.card .image > .ribbon.label { - position: absolute; - top: @ribbonImageTopDistance; - } - .ui.card .image > .ui.ribbon.label, - .ui.image > .ui.ribbon.label { - left: @ribbonImageOffset; - } - .ui.card .image > .ui[class*="right ribbon"].label, - .ui.image > .ui[class*="right ribbon"].label { - left: @rightRibbonImageOffset; - padding-left: @horizontalPadding; - } - - /* Inside Table */ - .ui.table td > .ui.ribbon.label { - left: @ribbonTableOffset; - } - .ui.table td > .ui[class*="right ribbon"].label { - left: @rightRibbonTableOffset; - padding-left: @horizontalPadding; - } -} - -& when (@variationLabelAttached) { - /*------------------- - Attached - --------------------*/ - - .ui[class*="top attached"].label, - .ui.attached.label { - width: 100%; - position: absolute; - margin: 0; - top: 0; - left: 0; - - padding: @attachedVerticalPadding @attachedHorizontalPadding; - - border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0 0; - } - .ui[class*="bottom attached"].label { - top: auto; - bottom: 0; - border-radius: 0 0 @attachedCornerBorderRadius @attachedCornerBorderRadius; - } - - .ui[class*="top left attached"].label { - width: auto; - margin-top: 0; - border-radius: @attachedCornerBorderRadius 0 @attachedBorderRadius 0; - } - - .ui[class*="top right attached"].label { - width: auto; - left: auto; - right: 0; - border-radius: 0 @attachedCornerBorderRadius 0 @attachedBorderRadius; - } - .ui[class*="bottom left attached"].label { - width: auto; - top: auto; - bottom: 0; - border-radius: 0 @attachedBorderRadius 0 @attachedCornerBorderRadius; - } - .ui[class*="bottom right attached"].label { - top: auto; - bottom: 0; - left: auto; - right: 0; - width: auto; - border-radius: @attachedBorderRadius 0 @attachedCornerBorderRadius 0; - } -} - -/******************************* - States -*******************************/ - -/*------------------- - Disabled ---------------------*/ -& when (@variationLabelDisabled) { - .ui.label.disabled { - opacity: 0.5; - } -} -/*------------------- - Hover ---------------------*/ - -.ui.labels a.label:hover, -a.ui.label:hover { - background-color: @labelHoverBackgroundColor; - border-color: @labelHoverBackgroundColor; - - background-image: @labelHoverBackgroundImage; - color: @labelHoverTextColor; -} -.ui.labels a.label:hover:before, -a.ui.label:hover:before { - color: @labelHoverTextColor; -} - -/*------------------- - Active ---------------------*/ - -.ui.active.label { - background-color: @labelActiveBackgroundColor; - border-color: @labelActiveBackgroundColor; - - background-image: @labelActiveBackgroundImage; - color: @labelActiveTextColor; -} -.ui.active.label:before { - background-color: @labelActiveBackgroundColor; - background-image: @labelActiveBackgroundImage; - color: @labelActiveTextColor; -} - -/*------------------- - Active Hover ---------------------*/ - -.ui.labels a.active.label:hover, -a.ui.active.label:hover { - background-color: @labelActiveHoverBackgroundColor; - border-color: @labelActiveHoverBackgroundColor; - - background-image: @labelActiveHoverBackgroundImage; - color: @labelActiveHoverTextColor; -} -.ui.labels a.active.label:hover:before, -a.ui.active.label:hover:before { - background-color: @labelActiveHoverBackgroundColor; - background-image: @labelActiveHoverBackgroundImage; - color: @labelActiveHoverTextColor; -} - - -/*------------------- - Visible ---------------------*/ - -.ui.labels.visible .label, -.ui.label.visible:not(.dropdown) { - display: inline-block !important; -} - -/*------------------- - Hidden ---------------------*/ - -.ui.labels.hidden .label, -.ui.label.hidden { - display: none !important; -} - - -/******************************* - Variations -*******************************/ - - -& when (@variationLabelBasic) { - /*------------------- - Basic - --------------------*/ - - .ui.basic.labels .label, - .ui.basic.label { - background: @basicBackground; - border: @basicBorder; - color: @basicColor; - box-shadow: @basicBoxShadow; - padding-top: @basicVerticalPadding; - padding-bottom: @basicVerticalPadding; - padding-right: @basicHorizontalPadding; - } - .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, - .ui.basic.label:not(.tag):not(.image):not(.ribbon) { - padding-left: @basicHorizontalPadding; - } - & when (@variationLabelImage) { - .ui.basic.image.label { - padding-left: @basicImageLabelPadding; - } - } - - /* Link */ - .ui.basic.labels a.label:hover, - a.ui.basic.label:hover { - text-decoration: none; - background: @basicHoverBackground; - color: @basicHoverColor; - box-shadow: @basicHoverBoxShadow; - } - & when (@variationLabelPointing) { - /* Pointing */ - .ui.basic.pointing.label:before { - border-color: inherit; - } - } -} - -& when (@variationLabelFluid) { - /*------------------- - Fluid - --------------------*/ - - .ui.label.fluid, - .ui.fluid.labels > .label { - width: 100%; - box-sizing: border-box; - } -} - -& when (@variationLabelInverted) { - /*------------------- - Inverted - --------------------*/ - - .ui.inverted.labels .label, - .ui.inverted.label { - color: @invertedTextColor; - background-color: @invertedBackgroundColor; - } - .ui.inverted.corner.label { - border-color: @invertedBackgroundColor; - } - .ui.inverted.corner.label:hover { - border-color: @backgroundColor; - transition: none; - } - .ui.inverted.basic.labels .label, - .ui.inverted.basic.label, - .ui.inverted.basic.label:hover { - border-color: @basicInvertedBorderColor; - background: @black; - } - .ui.inverted.basic.label:hover { - color: @linkColor; - } -} - -/*------------------- - Colors ---------------------*/ - -each(@colors,{ - @color : replace(@key,'@',''); - @isDark : @colors[@@color][isDark]; - @_labelColor : @colors[@@color][color]; - @_labelInvertedColor : @colors[@@color][light]; - @_labelTextColor : @colors[@@color][text]; - @_labelHover : @colors[@@color][hover]; - @_labelInvertedHover : @colors[@@color][lightHover]; - @_labelHoverTextColor : @colors[@@color][hoverText]; - @_labelRibbonShadow : @colors[@@color][ribbon]; - @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon]; - - .ui.@{color}.labels .label, - .ui.ui.ui.@{color}.label { - background-color: @_labelColor; - border-color: @_labelColor; - color: @_labelTextColor; - } - /* Link */ - .ui.@{color}.labels a.label:hover, - a.ui.ui.ui.@{color}.label:hover{ - background-color: @_labelHover; - border-color: @_labelHover; - color: @_labelHoverTextColor; - } - & when (@variationLabelRibbon) { - /* Ribbon */ - .ui.ui.ui.@{color}.ribbon.label { - border-color: @_labelRibbonShadow; - } - } - & when (@variationLabelBasic) { - /* Basic */ - .ui.basic.labels .@{color}.label, - .ui.ui.ui.basic.@{color}.label { - background: @basicBackground; - border-color: @_labelColor; - color: @_labelColor; - } - .ui.basic.labels a.@{color}.label:hover, - a.ui.ui.ui.basic.@{color}.label:hover { - background: @basicBackground; - border-color: @_labelHover; - color: @_labelHover; - } - } - & when (@variationLabelInverted) { - /* Inverted */ - .ui.inverted.labels .@{color}.label, - .ui.ui.ui.inverted.@{color}.label { - background-color: @_labelInvertedColor; - border-color: @_labelInvertedColor; - color: @black; - } - /* Inverted Link */ - .ui.inverted.labels a.@{color}.label:hover, - a.ui.ui.ui.inverted.@{color}.label:hover{ - background-color: @_labelInvertedHover; - border-color: @_labelInvertedHover; - & when not (@isDark) { - color: @black; - } - & when (@isDark) { - color: @_labelTextColor; - } - } - & when (@variationLabelRibbon) { - /* Inverted Ribbon */ - .ui.ui.ui.inverted.@{color}.ribbon.label { - border-color: @_labelInvertedRibbonShadow; - } - } - & when (@variationLabelBasic) { - /* Inverted Basic */ - .ui.inverted.basic.labels .@{color}.label, - .ui.ui.ui.inverted.basic.@{color}.label { - background-color: @invertedBackground; - border-color: @_labelInvertedColor; - & when not (@isDark) { - color: @_labelInvertedColor; - } - & when (@isDark) { - color: @invertedTextColor; - } - } - .ui.inverted.basic.labels a.@{color}.label:hover, - a.ui.ui.ui.inverted.basic.@{color}.label:hover { - border-color: @_labelInvertedHover; - background-color: @invertedBackground; - & when not (@isDark) { - color: @_labelInvertedHover; - } - } - & when (@variationLabelTag) { - /* Inverted Basic Tags */ - .ui.inverted.basic.tag.labels .@{color}.label, - .ui.ui.ui.inverted.@{color}.basic.tag.label { - border: @invertedBorderSize solid @_labelInvertedColor; - } - .ui.inverted.basic.tag.labels .@{color}.label:before, - .ui.ui.ui.inverted.@{color}.basic.tag.label:before { - border-color: inherit; - border-width: @invertedBorderSize 0 0 @invertedBorderSize; - border-style: inherit; - background-color: @invertedBackground; - right: e(%("calc(100%% + %d)", @invertedBorderSize)); - } - } - } - } -}) - -/*------------------- - Horizontal ---------------------*/ - -.ui.horizontal.labels .label, -.ui.horizontal.label { - margin: 0 @horizontalLabelMargin 0 0; - - padding: @horizontalLabelVerticalPadding @horizontalPadding; - min-width: @horizontalLabelMinWidth; - text-align: center; -} - -& when (@variationLabelCircular) { - /*------------------- - Circular - --------------------*/ - - .ui.circular.labels .label, - .ui.circular.label { - min-width: @circularMinSize; - min-height: @circularMinSize; - - padding: @circularPadding !important; - - line-height: 1em; - text-align: center; - border-radius: @circularRadius; - } - .ui.empty.circular.labels .label, - .ui.empty.circular.label { - min-width: 0; - min-height: 0; - overflow: hidden; - width: @emptyCircleSize; - height: @emptyCircleSize; - vertical-align: baseline; - } -} - -& when (@variationLabelPointing) { - /*------------------- - Pointing - --------------------*/ - - .ui.pointing.label { - position: relative; - } - - .ui.attached.pointing.label { - position: absolute; - } - - .ui.pointing.label:before { - background-color: inherit; - background-image: inherit; - border-width: 0; - border-style: solid; - border-color: @pointingBorderColor; - } - /* Arrow */ - .ui.pointing.label:before { - position: absolute; - content: ''; - transform: rotate(45deg); - background-image: none; - - z-index: @pointingTriangleZIndex; - width: @pointingTriangleSize; - height: @pointingTriangleSize; - transition: @pointingTriangleTransition; - } - - /*--- Above ---*/ - .ui.pointing.label, - .ui[class*="pointing above"].label { - margin-top: @pointingVerticalDistance; - } - .ui.pointing.label:before, - .ui[class*="pointing above"].label:before { - border-width: @borderWidth 0 0 @borderWidth; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - top: 0; - left: 50%; - } - /*--- Below ---*/ - .ui[class*="bottom pointing"].label, - .ui[class*="pointing below"].label { - margin-top: 0; - margin-bottom: @pointingVerticalDistance; - } - .ui[class*="bottom pointing"].label:before, - .ui[class*="pointing below"].label:before { - border-width: 0 @borderWidth @borderWidth 0; - top: auto; - right: auto; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - top: 100%; - left: 50%; - } - /*--- Left ---*/ - .ui[class*="left pointing"].label { - margin-top: 0; - margin-left: @pointingHorizontalDistance; - } - .ui[class*="left pointing"].label:before { - border-width: 0 0 @borderWidth @borderWidth; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - bottom: auto; - right: auto; - top: 50%; - left: 0; - } - /*--- Right ---*/ - .ui[class*="right pointing"].label { - margin-top: 0; - margin-right: @pointingHorizontalDistance; - } - .ui[class*="right pointing"].label:before { - border-width: @borderWidth @borderWidth 0 0; - transform: translateX(50%) translateY(-50%) rotate(45deg); - top: 50%; - right: 0; - bottom: auto; - left: auto; - } - & when (@variationLabelBasic) { - /* Basic Pointing */ - - /*--- Above ---*/ - .ui.basic.pointing.label:before, - .ui.basic[class*="pointing above"].label:before { - margin-top: @basicPointingTriangleOffset; - } - /*--- Below ---*/ - .ui.basic[class*="bottom pointing"].label:before, - .ui.basic[class*="pointing below"].label:before { - bottom: auto; - top: 100%; - margin-top: -@basicPointingTriangleOffset; - } - /*--- Left ---*/ - .ui.basic[class*="left pointing"].label:before { - top: 50%; - left: @basicPointingTriangleOffset; - } - /*--- Right ---*/ - .ui.basic[class*="right pointing"].label:before { - top: 50%; - right: @basicPointingTriangleOffset; - } - } -} - -& when (@variationLabelFloating) { - /*------------------ - Floating Label - -------------------*/ - - .ui.floating.label { - position: absolute; - z-index: @floatingZIndex; - top: @floatingTopOffset; - right: 0; - white-space: nowrap; - transform: translateX(50%); - } - .ui.right.aligned.floating.label { - transform: translateX(@floatingAlignOffset); - } - .ui.left.floating.label { - left:0; - right:auto; - transform: translateX(-50%); - } - .ui.left.aligned.floating.label { - transform: translateX(-@floatingAlignOffset); - } - .ui.bottom.floating.label { - top: auto; - bottom: @floatingBottomOffset; - } -} - -/*------------------- - Sizes ---------------------*/ - -.ui.labels .label, -.ui.label { - font-size: @medium; -} -& when not (@variationLabelSizes = false) { - each(@variationLabelSizes, { - @s: @@value; - .ui.@{value}.labels .label, - .ui.@{value}.label { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/list.less b/semantic/src/definitions/elements/list.less deleted file mode 100644 index ca1abdc..0000000 --- a/semantic/src/definitions/elements/list.less +++ /dev/null @@ -1,1021 +0,0 @@ -/*! - * # Fomantic-UI - List - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'list'; - -@import (multiple) '../../theme.config'; - -/******************************* - List -*******************************/ - -ul.ui.list, -ol.ui.list, -.ui.list { - list-style-type: @listStyleType; - margin: @margin; - padding: @verticalPadding @horizontalPadding; -} - -ul.ui.list:first-child, -ol.ui.list:first-child, -.ui.list:first-child { - margin-top: 0; - padding-top: 0; -} - -ul.ui.list:last-child, -ol.ui.list:last-child, -.ui.list:last-child { - margin-bottom: 0; - padding-bottom: 0; -} - -/******************************* - Content -*******************************/ - -/* List Item */ -ul.ui.list li, -ol.ui.list li, -.ui.list > .item, -.ui.list .list > .item { - display: list-item; - table-layout: fixed; - list-style-type: @listStyleType; - list-style-position: @listStylePosition; - - padding: @itemPadding; - line-height: @itemLineHeight; -} - -ul.ui.list > li:first-child:after, -ol.ui.list > li:first-child:after, -.ui.list > .list > .item:after, -.ui.list > .item:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -ul.ui.list li:first-child, -ol.ui.list li:first-child, -.ui.list .list > .item:first-child, -.ui.list > .item:first-child { - padding-top: 0; -} -ul.ui.list li:last-child, -ol.ui.list li:last-child, -.ui.list .list > .item:last-child, -.ui.list > .item:last-child { - padding-bottom: 0; -} - -/* Child List */ -ul.ui.list ul, -ol.ui.list ol, -.ui.list .list:not(.icon) { - clear: both; - margin: 0; - padding: @childListPadding; -} - -/* Child Item */ -ul.ui.list ul li, -ol.ui.list ol li, -.ui.list .list > .item { - padding: @childItemPadding; - line-height: @childItemLineHeight; -} - -& when (@variationListIcon) { - /* Icon */ - .ui.list .list > .item > i.icon, - .ui.list > .item > i.icon { - display: table-cell; - min-width: 1.55em; - margin: 0; - padding-top: @iconOffset; - transition: @iconTransition; - &:not(.loading) { - padding-right: @iconDistance; - vertical-align: @iconContentVerticalAlign; - } - } - .ui.list .list > .item > i.icon:only-child, - .ui.list > .item > i.icon:only-child { - display: inline-block; - min-width: auto; - vertical-align: @iconVerticalAlign; - } -} - -& when (@variationListImage) { - /* Image */ - .ui.list .list > .item > .image, - .ui.list > .item > .image { - display: table-cell; - background-color: transparent; - margin: 0; - vertical-align: @imageAlign; - } - .ui.list .list > .item > .image:not(:only-child):not(img), - .ui.list > .item > .image:not(:only-child):not(img) { - padding-right: @imageDistance; - } - .ui.list .list > .item > .image img, - .ui.list > .item > .image img { - vertical-align: @imageAlign; - } - - .ui.list .list > .item > img.image, - .ui.list .list > .item > .image:only-child, - .ui.list > .item > img.image, - .ui.list > .item > .image:only-child { - display: inline-block; - } -} - -/* Content */ -.ui.list .list > .item > .content, -.ui.list > .item > .content { - line-height: @contentLineHeight; - color: @contentColor; -} -& when (@variationListImage) or (@variationListIcon) { - .ui.list .list > .item > .image + .content, - .ui.list .list > .item > i.icon + .content, - .ui.list > .item > .image + .content, - .ui.list > .item > i.icon + .content { - display: table-cell; - width: 100%; - padding: 0 0 0 @contentDistance; - vertical-align: @contentVerticalAlign; - } -} -& when (@variationListIcon) { - .ui.list .list > .item > i.loading.icon + .content, - .ui.list > .item > i.loading.icon + .content { - padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance)); - } -} -& when (@variationListImage) { - .ui.list .list > .item > img.image + .content, - .ui.list > .item > img.image + .content { - display: inline-block; - width: auto; - } -} -.ui.list .list > .item > .content > .list, -.ui.list > .item > .content > .list { - margin-left: 0; - padding-left: 0; -} - -/* Header */ -.ui.list .list > .item .header, -.ui.list > .item .header { - display: block; - margin: 0; - font-family: @itemHeaderFontFamily; - font-weight: @itemHeaderFontWeight; - color: @itemHeaderColor; -} - -/* Description */ -.ui.list .list > .item .description, -.ui.list > .item .description { - display: block; - color: @itemDescriptionColor; -} - -/* Child Link */ -.ui.list > .item a, -.ui.list .list > .item a { - cursor: pointer; -} - -/* Linking Item */ -.ui.list .list > a.item, -.ui.list > a.item { - cursor: pointer; - color: @itemLinkColor; -} -.ui.list .list > a.item:hover, -.ui.list > a.item:hover { - color: @itemLinkHoverColor; -} - -& when (@variationListIcon) { - /* Linked Item Icons */ - .ui.list .list > a.item > i.icons, - .ui.list > a.item > i.icons, - .ui.list .list > a.item > i.icon, - .ui.list > a.item > i.icon { - color: @itemLinkIconColor; - } -} - -/* Header Link */ -.ui.list .list > .item a.header, -.ui.list > .item a.header { - cursor: pointer; - color: @itemHeaderLinkColor !important; -} -.ui.list .list > .item > a.header:hover, -.ui.list > .item > a.header:hover { - color: @itemHeaderLinkHoverColor !important; -} - -& when (@variationListFloated) { - /* Floated Content */ - .ui[class*="left floated"].list { - float: left; - } - .ui[class*="right floated"].list { - float: right; - } - - .ui.list .list > .item [class*="left floated"], - .ui.list > .item [class*="left floated"] { - float: left; - margin: @leftFloatMargin; - } - .ui.list .list > .item [class*="right floated"], - .ui.list > .item [class*="right floated"] { - float: right; - margin: @rightFloatMargin; - } -} - -/******************************* - Coupling -*******************************/ - -.ui.menu .ui.list > .item, -.ui.menu .ui.list .list > .item { - display: list-item; - table-layout: fixed; - background-color: transparent; - - list-style-type: @listStyleType; - list-style-position: @listStylePosition; - - padding: @itemVerticalPadding @itemHorizontalPadding; - line-height: @itemLineHeight; -} -.ui.menu .ui.list .list > .item:before, -.ui.menu .ui.list > .item:before { - border: none; - background: none; -} -.ui.menu .ui.list .list > .item:first-child, -.ui.menu .ui.list > .item:first-child { - padding-top: 0; -} -.ui.menu .ui.list .list > .item:last-child, -.ui.menu .ui.list > .item:last-child { - padding-bottom: 0; -} - - -/******************************* - Types -*******************************/ - -& when (@variationListHorizontal) { - /*------------------- - Horizontal - --------------------*/ - - .ui.horizontal.list { - display: inline-block; - font-size: 0; - } - .ui.horizontal.list > .item { - display: inline-block; - margin-right: @horizontalSpacing; - font-size: 1rem; - } - .ui.horizontal.list:not(.celled) > .item:last-child { - margin-right: 0; - padding-right: 0; - } - .ui.horizontal.list .list:not(.icon) { - padding-left: 0; - padding-bottom: 0; - } - .ui.horizontal.list > .item > .image, - .ui.horizontal.list .list > .item > .image, - .ui.horizontal.list > .item > i.icon, - .ui.horizontal.list .list > .item > i.icon, - .ui.horizontal.list > .item > .content, - .ui.horizontal.list .list > .item > .content { - vertical-align: @horizontalVerticalAlign; - } - - /* Padding on all elements */ - .ui.horizontal.list > .item:first-child, - .ui.horizontal.list > .item:last-child { - padding-top: @itemVerticalPadding; - padding-bottom: @itemVerticalPadding; - } - & when (@variationListIcon) { - /* Horizontal List */ - .ui.horizontal.list > .item > i.icon , - .ui.horizontal.list .item > i.icons > i.icon { - margin: 0; - padding: 0 @horizontalIconDistance 0 0; - } - } - & when (@variationListImage) or (@variationListIcon) { - .ui.horizontal.list > .item > .image + .content, - .ui.horizontal.list > .item > i.icon, - .ui.horizontal.list > .item > i.icon + .content { - float: none; - display: inline-block; - width: auto; - } - } - & when (@variationListImage) { - .ui.horizontal.list > .item > .image { - display: inline-block; - } - } -} - -/******************************* - States -*******************************/ - -& when (@variationListDisabled) { - /*------------------- - Disabled - --------------------*/ - - .ui.list .list > .disabled.item, - .ui.list > .disabled.item { - pointer-events: none; - color: @disabledColor !important; - } - & when (@variationListInverted) { - .ui.inverted.list .list > .disabled.item, - .ui.inverted.list > .disabled.item { - color: @invertedDisabledColor !important; - } - } -} - -/*------------------- - Hover ---------------------*/ -& when (@variationListIcon) { - .ui.list .list > a.item:hover > .icons, - .ui.list > a.item:hover > .icons, - .ui.list .list > a.item:hover > i.icon, - .ui.list > a.item:hover > i.icon { - color: @itemLinkIconHoverColor; - } -} - -/******************************* - Variations -*******************************/ - -& when (@variationListInverted) { - /*------------------- - Inverted - --------------------*/ - & when (@variationListIcon) { - .ui.inverted.list .list > a.item > i.icon, - .ui.inverted.list > a.item > i.icon { - color: @invertedIconLinkColor; - } - } - .ui.inverted.list .list > .item .header, - .ui.inverted.list > .item .header { - color: @invertedHeaderColor; - } - .ui.inverted.list .list > .item .description, - .ui.inverted.list > .item .description { - color: @invertedDescriptionColor; - } - .ui.inverted.list .list > .item > .content, - .ui.inverted.list > .item > .content { - color: @invertedContentColor; - } - /* Item Link */ - .ui.inverted.list .list > a.item, - .ui.inverted.list > a.item { - cursor: pointer; - color: @invertedItemLinkColor; - } - .ui.inverted.list .list > a.item:hover, - .ui.inverted.list > a.item:hover { - color: @invertedItemLinkHoverColor; - } - - - /* Linking Content */ - .ui.inverted.list .item a:not(.ui) { - color: @invertedItemLinkColor !important; - } - .ui.inverted.list .item a:not(.ui):hover { - color: @invertedItemLinkHoverColor !important; - } -} - -& when (@variationListAligned) { - /*------------------- - Aligned - --------------------*/ - - .ui.list[class*="top aligned"] .image, - .ui.list[class*="top aligned"] .content, - .ui.list [class*="top aligned"] { - vertical-align: top !important; - } - .ui.list[class*="middle aligned"] .image, - .ui.list[class*="middle aligned"] .content, - .ui.list [class*="middle aligned"] { - vertical-align: middle !important; - } - .ui.list[class*="bottom aligned"] .image, - .ui.list[class*="bottom aligned"] .content, - .ui.list [class*="bottom aligned"] { - vertical-align: bottom !important; - } -} - -& when (@variationListLink) { - /*------------------- - Link - --------------------*/ - - .ui.link.list .item, - .ui.link.list a.item, - .ui.link.list .item a:not(.ui) { - color: @linkListItemColor; - transition: @linkListTransition; - } - .ui.link.list.list a.item:hover, - .ui.link.list.list .item a:not(.ui):hover { - color: @linkListItemHoverColor; - } - .ui.link.list.list a.item:active, - .ui.link.list.list .item a:not(.ui):active { - color: @linkListItemDownColor; - } - .ui.link.list.list .active.item, - .ui.link.list.list .active.item a:not(.ui) { - color: @linkListItemActiveColor; - } - & when (@variationListInverted) { - /* Inverted */ - .ui.inverted.link.list .item, - .ui.inverted.link.list a.item, - .ui.inverted.link.list .item a:not(.ui) { - color: @invertedLinkListItemColor; - } - .ui.inverted.link.list.list a.item:hover, - .ui.inverted.link.list.list .item a:not(.ui):hover { - color: @invertedLinkListItemHoverColor; - } - .ui.inverted.link.list.list a.item:active, - .ui.inverted.link.list.list .item a:not(.ui):active { - color: @invertedLinkListItemDownColor; - } - .ui.inverted.link.list.list a.active.item, - .ui.inverted.link.list.list .active.item a:not(.ui) { - color: @invertedLinkListItemActiveColor; - } - } -} - -& when (@variationListSelection) { - /*------------------- - Selection - --------------------*/ - - .ui.selection.list .list > .item, - .ui.selection.list > .item { - cursor: pointer; - background: @selectionListBackground; - padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; - margin: @selectionListItemMargin; - color: @selectionListColor; - border-radius: @selectionListItemBorderRadius; - transition: @selectionListTransition; - } - .ui.selection.list .list > .item:last-child, - .ui.selection.list > .item:last-child { - margin-bottom: 0; - } - .ui.selection.list .list > .item:hover, - .ui.selection.list > .item:hover { - background: @selectionListHoverBackground; - color: @selectionListHoverColor; - } - .ui.selection.list .list > .item:active, - .ui.selection.list > .item:active { - background: @selectionListDownBackground; - color: @selectionListDownColor; - } - .ui.selection.list .list > .item.active, - .ui.selection.list > .item.active { - background: @selectionListActiveBackground; - color: @selectionListActiveColor; - } - - & when (@variationListInverted) { - /* Inverted */ - .ui.inverted.selection.list > .item { - background: @invertedSelectionListBackground; - color: @invertedSelectionListColor; - } - .ui.inverted.selection.list > .item:hover { - background: @invertedSelectionListHoverBackground; - color: @invertedSelectionListHoverColor; - } - .ui.inverted.selection.list > .item:active { - background: @invertedSelectionListDownBackground; - color: @invertedSelectionListDownColor; - } - .ui.inverted.selection.list > .item.active { - background: @invertedSelectionListActiveBackground; - color: @invertedSelectionListActiveColor; - } - } - - & when (@variationListCelled) or (@variationListDivided) { - /* Celled / Divided Selection List */ - .ui.celled.selection.list .list > .item, - .ui.divided.selection.list .list > .item, - .ui.celled.selection.list > .item, - .ui.divided.selection.list > .item { - border-radius: 0; - } - } -} - -& when (@variationListAnimated) { - /*------------------- - Animated - --------------------*/ - - .ui.animated.list > .item { - transition: @animatedListTransition; - } - .ui.animated.list:not(.horizontal) > .item:hover { - padding-left: @animatedListIndent; - } -} - -& when (@variationListFitted) { - /*------------------- - Fitted - --------------------*/ - .ui.fitted.list:not(.selection) .list > .item, - .ui.fitted.list:not(.selection) > .item { - padding-left: 0; - padding-right: 0; - } - .ui.fitted.selection.list .list > .item, - .ui.fitted.selection.list > .item { - margin-left: -@selectionListItemHorizontalPadding; - margin-right: -@selectionListItemHorizontalPadding; - } -} - -& when (@variationListBulleted) { - /*------------------- - Bulleted - --------------------*/ - - ul.ui.list, - .ui.bulleted.list { - margin-left: @bulletDistance; - } - ul.ui.list li, - .ui.bulleted.list .list > .item, - .ui.bulleted.list > .item { - position: relative; - } - ul.ui.list li:before, - .ui.bulleted.list .list > .item:before, - .ui.bulleted.list > .item:before { - user-select: none; - pointer-events: none; - position: absolute; - top: auto; - left: auto; - font-weight: @normal; - margin-left: @bulletOffset; - content: @bulletCharacter; - opacity: @bulletOpacity; - color: @bulletColor; - vertical-align: @bulletVerticalAlign; - } - - ul.ui.list li:before, - .ui.bulleted.list .list > a.item:before, - .ui.bulleted.list > a.item:before { - color: @bulletLinkColor; - } - - ul.ui.list ul, - .ui.bulleted.list .list:not(.icon) { - padding-left: @bulletChildDistance; - } - - & when (@variationListHorizontal) { - /* Horizontal Bulleted */ - ul.ui.horizontal.bulleted.list, - .ui.horizontal.bulleted.list { - margin-left: 0; - } - ul.ui.horizontal.bulleted.list li, - .ui.horizontal.bulleted.list > .item { - margin-left: @horizontalBulletSpacing; - } - ul.ui.horizontal.bulleted.list li:first-child, - .ui.horizontal.bulleted.list > .item:first-child { - margin-left: 0; - } - ul.ui.horizontal.bulleted.list li::before, - .ui.horizontal.bulleted.list > .item::before { - color: @horizontalBulletColor; - } - ul.ui.horizontal.bulleted.list li:first-child::before, - .ui.horizontal.bulleted.list > .item:first-child::before { - display: none; - } - } -} - -& when (@variationListOrdered) { - /*------------------- - Ordered - --------------------*/ - - ol.ui.list, - .ui.ordered.list, - .ui.ordered.list .list:not(.icon), - ol.ui.list ol { - counter-reset: ordered; - margin-left: @orderedCountDistance; - list-style-type: none; - } - ol.ui.list li, - .ui.ordered.list .list > .item, - .ui.ordered.list > .item { - list-style-type: none; - position: relative; - } - ol.ui.list li:before, - .ui.ordered.list .list > .item:before, - .ui.ordered.list > .item:before { - position: absolute; - top: auto; - left: auto; - user-select: none; - pointer-events: none; - margin-left: -(@orderedCountDistance); - counter-increment: @orderedCountName; - content: @orderedCountContent; - text-align: @orderedCountTextAlign; - color: @orderedCountColor; - vertical-align: @orderedCountVerticalAlign; - opacity: @orderedCountOpacity; - } - - & when (@variationListInverted) { - ol.ui.inverted.list li:before, - .ui.ordered.inverted.list .list > .item:before, - .ui.ordered.inverted.list > .item:before { - color: @orderedInvertedCountColor; - } - } - - /* Value */ - .ui.ordered.list .list > .item[data-value]:before, - .ui.ordered.list > .item[data-value]:before { - content: attr(data-value); - } - ol.ui.list li[value]:before { - content: attr(value); - } - - /* Child Lists */ - ol.ui.list ol, - .ui.ordered.list .list:not(.icon) { - margin-left: @orderedChildCountDistance; - } - ol.ui.list ol li:before, - .ui.ordered.list .list > .item:before { - margin-left: @orderedChildCountOffset; - } - - & when (@variationListHorizontal) { - /* Horizontal Ordered */ - ol.ui.horizontal.list, - .ui.ordered.horizontal.list { - margin-left: 0; - } - ol.ui.horizontal.list li:before, - .ui.ordered.horizontal.list .list > .item:before, - .ui.ordered.horizontal.list > .item:before { - position: static; - margin: 0 @horizontalOrderedCountDistance 0 0; - } - } -} - -& when (@variationListSuffixed) { - /* Suffixed Ordered */ - ol.ui.suffixed.list li:before, - .ui.suffixed.ordered.list .list > .item:before, - .ui.suffixed.ordered.list > .item:before { - content: @orderedCountContentSuffixed; - } -} - -& when (@variationListDivided) { - /*------------------- - Divided - --------------------*/ - - .ui.divided.list > .item { - border-top: @dividedBorder; - } - .ui.divided.list .list > .item { - border-top: @dividedChildListBorder; - } - .ui.divided.list .item .list > .item { - border-top: @dividedChildItemBorder; - } - .ui.divided.list .list > .item:first-child, - .ui.divided.list > .item:first-child { - border-top: none; - } - - /* Sub Menu */ - .ui.divided.list:not(.horizontal) .list > .item:first-child { - border-top-width: @dividedBorderWidth; - } - - & when (@variationListBulleted) { - /* Divided bulleted */ - .ui.divided.bulleted.list:not(.horizontal), - .ui.divided.bulleted.list .list:not(.icon) { - margin-left: 0; - padding-left: 0; - } - .ui.divided.bulleted.list > .item:not(.horizontal) { - padding-left: @bulletDistance; - } - } - - & when (@variationListOrdered) { - /* Divided Ordered */ - .ui.divided.ordered.list { - margin-left: 0; - } - .ui.divided.ordered.list .list > .item, - .ui.divided.ordered.list > .item { - padding-left: @orderedCountDistance; - } - .ui.divided.ordered.list .item .list:not(.icon) { - margin-left: 0; - margin-right: 0; - padding-bottom: @itemVerticalPadding; - } - .ui.divided.ordered.list .item .list > .item { - padding-left: @orderedChildCountDistance; - } - } - - & when (@variationListSelection) { - /* Divided Selection */ - - .ui.divided.selection.list .list > .item, - .ui.divided.selection.list > .item { - margin: 0; - border-radius: 0; - } - } - - & when (@variationListHorizontal) { - /* Divided horizontal */ - .ui.divided.horizontal.list { - margin-left: 0; - } - .ui.divided.horizontal.list > .item { - padding-left: @horizontalDividedSpacing; - } - .ui.divided.horizontal.list > .item:not(:last-child) { - padding-right: @horizontalDividedSpacing; - } - .ui.divided.horizontal.list > .item { - border-top: none; - border-right: @dividedBorder; - margin: 0; - line-height: @horizontalDividedLineHeight; - } - .ui.horizontal.divided.list > .item:last-child { - border-right: none; - } - } - - & when (@variationListInverted) { - /* Inverted */ - - .ui.divided.inverted.list > .item, - .ui.divided.inverted.list > .list, - .ui.divided.inverted.horizontal.list > .item { - border-color: @dividedInvertedBorderColor; - } - } -} - -& when (@variationListCelled) { - /*------------------- - Celled - --------------------*/ - - .ui.celled.list > .item, - .ui.celled.list > .list { - border-top: @celledBorder; - padding-left: @celledHorizontalPadding; - padding-right: @celledHorizontalPadding; - } - .ui.celled.list > .item:last-child { - border-bottom: @celledBorder; - } - - /* Padding on all elements */ - .ui.celled.list > .item:first-child, - .ui.celled.list > .item:last-child { - padding-top: @itemVerticalPadding; - padding-bottom: @itemVerticalPadding; - } - - /* Sub Menu */ - .ui.celled.list .item .list > .item { - border-width: 0; - } - .ui.celled.list .list > .item:first-child { - border-top-width: 0; - } - - & when (@variationListBulleted) { - /* Celled Bulleted */ - .ui.celled.bulleted.list { - margin-left: 0; - } - .ui.celled.bulleted.list .list > .item, - .ui.celled.bulleted.list > .item { - padding-left: (@bulletDistance); - } - .ui.celled.bulleted.list .item .list:not(.icon) { - margin-left: -(@bulletDistance); - margin-right: -(@bulletDistance); - padding-bottom: @itemVerticalPadding; - } - } - - & when (@variationListOrdered) { - /* Celled Ordered */ - .ui.celled.ordered.list { - margin-left: 0; - } - .ui.celled.ordered.list .list > .item, - .ui.celled.ordered.list > .item { - padding-left: @orderedCountDistance; - } - .ui.celled.ordered.list .item .list:not(.icon) { - margin-left: 0; - margin-right: 0; - padding-bottom: @itemVerticalPadding; - } - .ui.celled.ordered.list .list > .item { - padding-left: @orderedChildCountDistance; - } - } - - & when (@variationListHorizontal) { - /* Celled Horizontal */ - .ui.horizontal.celled.list { - margin-left: 0; - } - .ui.horizontal.celled.list .list > .item, - .ui.horizontal.celled.list > .item { - border-top: none; - border-left: @celledBorder; - margin: 0; - padding-left: @horizontalCelledSpacing; - padding-right: @horizontalCelledSpacing; - - line-height: @horizontalCelledLineHeight; - } - .ui.horizontal.celled.list .list > .item:last-child, - .ui.horizontal.celled.list > .item:last-child { - border-bottom: none; - border-right: @celledBorder; - } - } - - & when (@variationListInverted) { - /* Inverted */ - .ui.celled.inverted.list > .item, - .ui.celled.inverted.list > .list { - border-color: @celledInvertedBorder; - } - .ui.celled.inverted.horizontal.list .list > .item, - .ui.celled.inverted.horizontal.list > .item { - border-color: @celledInvertedBorder; - } - } -} - -& when (@variationListRelaxed) { - /*------------------- - Relaxed - --------------------*/ - - .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { - padding-top: @relaxedItemVerticalPadding; - } - .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: @relaxedItemVerticalPadding; - } - - & when (@variationListHorizontal) { - .ui.horizontal.relaxed.list .list > .item:not(:first-child), - .ui.horizontal.relaxed.list > .item:not(:first-child) { - padding-left: @relaxedHorizontalPadding; - } - .ui.horizontal.relaxed.list .list > .item:not(:last-child), - .ui.horizontal.relaxed.list > .item:not(:last-child) { - padding-right: @relaxedHorizontalPadding; - } - } - - /* Very Relaxed */ - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { - padding-top: @veryRelaxedItemVerticalPadding; - } - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: @veryRelaxedItemVerticalPadding; - } - - & when (@variationListHorizontal) { - .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), - .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { - padding-left: @veryRelaxedHorizontalPadding; - } - .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), - .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { - padding-right: @veryRelaxedHorizontalPadding; - } - } -} -/*------------------- - Sizes ---------------------*/ - -.ui.list { - font-size: @relativeMedium; -} -& when not (@variationListSizes = false) { - each(@variationListSizes, { - @rs: @{value}ListSize; - @s: @@value; - .ui.@{value}.list { - font-size: @@rs; - } - & when (@variationListHorizontal) { - .ui.@{value}.horizontal.list .list > .item, - .ui.@{value}.horizontal.list > .item { - font-size: @s; - } - } - }) -} - -.loadUIOverrides(); - diff --git a/semantic/src/definitions/elements/loader.less b/semantic/src/definitions/elements/loader.less deleted file mode 100644 index 0b64a84..0000000 --- a/semantic/src/definitions/elements/loader.less +++ /dev/null @@ -1,416 +0,0 @@ -/*! - * # Fomantic-UI - Loader - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'loader'; - -@import (multiple) '../../theme.config'; - -/******************************* - Loader -*******************************/ - - -/* Standard Size */ -.ui.loader { - display: none; - position: absolute; - top: @loaderTopOffset; - left: @loaderLeftOffset; - margin: 0; - text-align: center; - z-index: 1000; - transform: translateX(-50%) translateY(-50%); -} - -/* Static Shape */ -.ui.loader:before { - position: absolute; - content: ''; - top: 0; - left: 50%; - width: 100%; - height: 100%; - - border-radius: @circularRadius; - border: @loaderLineWidth solid @loaderFillColor; -} - -/* Active Shape */ -.ui.loader:after { - position: absolute; - content: ''; - top: 0; - left: 50%; - width: 100%; - height: 100%; - - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid @shapeBorderColor; - border-radius: @circularRadius; - - box-shadow: 0 0 0 1px transparent; -} - -& when (@variationLoaderSpeeds) { - /* Speeds */ - - .ui.fast.loading.loading:after, - .ui.fast.loading.loading .input > i.icon:after, - .ui.fast.loading.loading > i.icon:after, - .ui.fast.loader:after { - animation-duration: @loaderSpeedFast; - } - - .ui.slow.loading.loading:after, - .ui.slow.loading.loading .input > i.icon:after, - .ui.slow.loading.loading > i.icon:after, - .ui.slow.loader:after { - animation-duration: @loaderSpeedSlow; - } -} - -/* Active Animation */ -@keyframes loader { - 100% { - transform: rotate(360deg); - } -} - -/*------------------- - Coupling ---------------------*/ - -/* Show inside active dimmer */ -.ui.dimmer > .loader { - display: block; -} - -/* Black Dimmer */ -.ui.dimmer > .ui.loader { - color: @invertedLoaderTextColor; -} -.ui.dimmer > .ui.loader:not(.elastic):before { - border-color: @invertedLoaderFillColor; -} - -/* White Dimmer (Inverted) */ -.ui.inverted.dimmer > .ui.loader { - color: @loaderTextColor; -} -.ui.inverted.dimmer > .ui.loader:not(.elastic):before { - border-color: @loaderFillColor; -} - -/******************************* - Types -*******************************/ - -& when (@variationLoaderText) { - /*------------------- - Text - --------------------*/ - - .ui.ui.ui.ui.text.loader { - width: auto; - height: auto; - text-align: center; - font-style: normal; - } -} - - -/******************************* - States -*******************************/ -& when (@variationLoaderIndeterminate) { - .ui.indeterminate.loader:after { - animation-direction: @indeterminateDirection; - animation-duration: @indeterminateSpeed; - } -} - -.ui.loader.active, -.ui.loader.visible { - display: block; -} -.ui.loader.disabled, -.ui.loader.hidden { - display: none; -} - -/******************************* - Variations -*******************************/ - - -/*------------------- - Sizes ---------------------*/ - -.ui.loader { - width: @medium; - height: @medium; - font-size: @mediumFontSize; -} -.ui.loader:before, -.ui.loader:after { - width: @medium; - height: @medium; - margin: @mediumOffset; -} -& when (@variationLoaderText) { - .ui.text.loader { - min-width: @medium; - padding-top: (@medium + @textDistance); - } -} -& when not (@variationLoaderSizes = false) { - each(@variationLoaderSizes, { - @o: @{value}Offset; - @f: @{value}FontSize; - @s: @@value; - .ui.@{value}.loader { - width: @s; - height: @s; - font-size: @@f; - } - .ui.@{value}.loader:before, - .ui.@{value}.loader:after { - width: @s; - height: @s; - margin: @@o; - } - & when (@variationLoaderText) { - .ui.@{value}.text.loader { - min-width: @s; - padding-top: (@s + @textDistance); - } - } - }) -} - -/*------------------- - Colors ---------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - - .ui.@{color}.elastic.loader.loader:before, - .ui.@{color}.basic.elastic.loading.button:before, - .ui.@{color}.basic.elastic.loading.button:after, - .ui.@{color}.elastic.loading.loading.loading:not(.segment):before, - .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before, - .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before, - .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after, - .ui.@{color}.loading.loading.loading.loading .input > i.icon:after, - .ui.@{color}.loading.loading.loading.loading > i.icon:after, - .ui.@{color}.loader.loader.loader:after { - color: @c; - } - .ui.inverted.@{color}.elastic.loader:before, - .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before, - .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before, - .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before, - .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after, - .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after, - .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after, - .ui.inverted.@{color}.loader.loader.loader:after { - color: @l; - } -}) - -.ui.elastic.loader.loader:before, -.ui.elastic.loading.loading.loading:before, -.ui.elastic.loading.loading.loading .input > i.icon:before, -.ui.elastic.loading.loading.loading > i.icon:before, -.ui.loading.loading.loading.loading:not(.usual):after, -.ui.loading.loading.loading.loading .input > i.icon:after, -.ui.loading.loading.loading.loading > i.icon:after, -.ui.loader.loader.loader:after { - border-color: currentColor; -} -.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before { - color: @invertedLoaderLineColor; -} -.ui.elastic.basic.loading.button:before, -.ui.elastic.basic.loading.button:after { - color: @loaderLineColor; -} -.ui.double.loading.loading.loading.loading.button:after { - border-bottom-color: currentColor; -} - -& when (@variationLoaderInline) { - /*------------------- - Inline - --------------------*/ - - .ui.inline.loader { - position: relative; - vertical-align: @inlineVerticalAlign; - margin: @inlineMargin; - left: 0; - top: 0; - transform: none; - } - - .ui.inline.loader.active, - .ui.inline.loader.visible { - display: inline-block; - } - - /* Centered Inline */ - .ui.centered.inline.loader.active, - .ui.centered.inline.loader.visible { - display: block; - margin-left: auto; - margin-right: auto; - } -} - -.ui.loading.loading.loading.loading.loading.loading:after, -.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after, -.ui.loading.loading.loading.loading.loading.loading > i.icon:after, -.ui.loader.loader.loader.loader.loader:after { - border-left-color:transparent; - border-right-color:transparent; -} -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after, -.ui.loader.loader.loader.loader.loader.loader:not(.double):after { - border-bottom-color: transparent; -} -.ui.loading.loading.loading.loading.loading.loading.segment:after, -.ui.loading.loading.loading.loading.loading.loading.form:after { - border-left-color:@loaderFillColor; - border-right-color:@loaderFillColor; -} -.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, -.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { - border-bottom-color: @loaderFillColor; -} - -& when (@variationLoaderElastic) { - /*------------------- - Elastic - --------------------*/ - - .ui.dimmer > .ui.elastic.loader { - color: @invertedLoaderLineColor; - } - .ui.inverted.dimmer > .ui.elastic.loader { - color: @loaderLineColor; - } - .ui.elastic.loading.loading:not(.form):not(.segment):after, - .ui.elastic.loading.loading .input > i.icon:after, - .ui.elastic.loading.loading > i.icon:after, - .ui.elastic.loader.loader:after { - animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); - animation-delay: 0.3s; - } - .ui.elastic.loading.loading.loading:not(.form):not(.segment):before, - .ui.elastic.loading.loading.loading .input > i.icon:before, - .ui.elastic.loading.loading.loading > i.icon:before, - .ui.elastic.loader.loader:before { - animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); - -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); - border-right-color: transparent; - } - & when (@variationLoaderInline) { - .ui.elastic.inline.loader:empty { - animation: loader 8s infinite linear; - } - } - & when (@variationLoaderSpeeds) { - .ui.slow.elastic.loading.loading:not(.form):not(.segment):after, - .ui.slow.elastic.loading.loading .input > i.icon:after, - .ui.slow.elastic.loading.loading > i.icon:after, - .ui.slow.elastic.loader.loader:after { - animation-duration: 1.5s; - animation-delay: 0.45s; - } - .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before, - .ui.slow.elastic.loading.loading.loading .input > i.icon:before, - .ui.slow.elastic.loading.loading.loading > i.icon:before, - .ui.slow.elastic.loader.loader:before { - animation-duration: 1.5s; - } - .ui.fast.elastic.loading.loading:not(.form):not(.segment):after, - .ui.fast.elastic.loading.loading .input > i.icon:after, - .ui.fast.elastic.loading.loading > i.icon:after, - .ui.fast.elastic.loader.loader:after { - animation-duration: 0.66s; - animation-delay: 0.20s; - } - .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before, - .ui.fast.elastic.loading.loading.loading .input > i.icon:before, - .ui.fast.elastic.loading.loading.loading > i.icon:before, - .ui.fast.elastic.loader.loader:before { - animation-duration: 0.66s; - } - } - @keyframes elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent - } - 1.1%, 50% { - border-left-color: inherit; - } - 10%, 35.1%{ - border-bottom-color: transparent; - } - 10.1%, 35%{ - border-bottom-color: inherit; - } - 50.1%{ - border-left-color: transparent; - } - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } - } - - @keyframes currentcolor-elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent - } - 1.1%, 50% { - border-left-color: currentColor; - } - 10%, 35.1%{ - border-bottom-color: transparent; - } - 10.1%, 35%{ - border-bottom-color: currentColor; - } - 50.1%{ - border-left-color: transparent; - } - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/placeholder.less b/semantic/src/definitions/elements/placeholder.less deleted file mode 100644 index 5440612..0000000 --- a/semantic/src/definitions/elements/placeholder.less +++ /dev/null @@ -1,248 +0,0 @@ -/*! - * # Fomantic-UI - Loader - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'placeholder'; - -@import (multiple) '../../theme.config'; - -/*------------------- - Content ---------------------*/ - -.ui.placeholder { - position: static; - overflow: hidden; - animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; - animation-iteration-count: infinite; - background-color: @white; - background-image: @placeholderLoadingGradient; - background-size: @placeholderLoadingGradientWidth 100%; - max-width: @placeholderMaxWidth; -} - -@keyframes placeholderShimmer{ - 0% { - background-position: -@placeholderLoadingGradientWidth 0 - } - 100% { - background-position: @placeholderLoadingGradientWidth 0 - } -} - -.ui.placeholder + .ui.placeholder { - margin-top: @consecutivePlaceholderSpacing; -} -.ui.placeholder + .ui.placeholder { - animation-delay: @placeholderAnimationInterval; -} -.ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 2); -} -.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 3); -} -.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 4); -} - -.ui.placeholder, -.ui.placeholder > :before, -.ui.placeholder .image.header:after, -.ui.placeholder .line, -.ui.placeholder .line:after { - background-color: @white; -} - -.ui.placeholder.hidden { - display:none; -} - -& when (@variationPlaceholderImage) { - /* Image */ - .ui.placeholder .image:not(.header):not(.ui):not(.icon) { - height: @placeholderImageHeight; - } - .ui.placeholder .square.image:not(.header) { - height: 0; - overflow: hidden; - /* 1/1 aspect ratio */ - padding-top: 100%; - } - .ui.placeholder .rectangular.image:not(.header) { - height: 0; - overflow: hidden; - /* 4/3 aspect ratio */ - padding-top: 75%; - } -} - -& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) { - /* Lines */ - .ui.placeholder .line { - position: relative; - height: @placeholderLineMargin; - } - .ui.placeholder .line:before, - .ui.placeholder .line:after { - top: 100%; - position: absolute; - content: ''; - background-color: inherit; - } - .ui.placeholder .line:before { - left: 0; - } - .ui.placeholder .line:after { - right: 0; - } - - /* Any Lines */ - .ui.placeholder .line { - margin-bottom: @placeholderLineHeight; - } - .ui.placeholder .line:before, - .ui.placeholder .line:after { - height: @placeholderLineHeight; - } - .ui.placeholder .line:not(:first-child) { - margin-top: @placeholderLineHeight; - } - - /* Line Outdent */ - .ui.placeholder .line:nth-child(1):after { - width: @placeholderLineOneOutdent; - } - .ui.placeholder .line:nth-child(2):after { - width: @placeholderLineTwoOutdent; - } - .ui.placeholder .line:nth-child(3):after { - width: @placeholderLineThreeOutdent; - } - .ui.placeholder .line:nth-child(4):after { - width: @placeholderLineFourOutdent; - } - .ui.placeholder .line:nth-child(5):after { - width: @placeholderLineFiveOutdent; - } -} - -& when (@variationPlaceholderHeader) { - /* Header Image + 2 Lines */ - .ui.placeholder .header { - position: relative; - overflow: hidden; - } - /* Header Line 1 & 2*/ - .ui.placeholder .header .line { - margin-bottom: @placeholderHeaderLineHeight; - } - .ui.placeholder .header .line:before, - .ui.placeholder .header .line:after { - height: @placeholderHeaderLineHeight; - } - .ui.placeholder .header .line:not(:first-child) { - margin-top: @placeholderHeaderLineHeight; - } - .ui.placeholder .header .line:after { - width: @placeholderHeaderLineOneOutdent; - } - .ui.placeholder .header .line:nth-child(2):after { - width: @placeholderHeaderLineTwoOutdent; - } - - & when (@variationPlaceholderImage) { - /* Image Header */ - .ui.placeholder .image.header .line { - margin-left: @placeholderImageWidth; - } - .ui.placeholder .image.header .line:before { - width: @placeholderImageTextIndent; - } - .ui.placeholder .image.header:after { - display: block; - height: @placeholderLineMargin; - content: ''; - margin-left: @placeholderImageWidth; - } - } -} - -/* Spacing */ -.ui.placeholder .image .line:first-child, -.ui.placeholder .paragraph .line:first-child, -.ui.placeholder .header .line:first-child { - height: 0.01px; -} -.ui.placeholder .image:not(:first-child):before, -.ui.placeholder .paragraph:not(:first-child):before, -.ui.placeholder .header:not(:first-child):before { - height: @placeholderSpacing; - content: ''; - display: block; -} - -& when (@variationPlaceholderInverted) { - /* Inverted Content Loader */ - .ui.inverted.placeholder { - background-image: @placeholderInvertedLoadingGradient; - } - .ui.inverted.placeholder, - .ui.inverted.placeholder > :before, - .ui.inverted.placeholder .image.header:after, - .ui.inverted.placeholder .line, - .ui.inverted.placeholder .line:after { - background-color: @black; - } -} - -/******************************* - Variations -*******************************/ - - -/*------------------- - Sizes ---------------------*/ -& when (@variationPlaceholderLengths) { - .ui.placeholder .full.line.line.line:after { - width: @placeholderFullLineOutdent; - } - .ui.placeholder .very.long.line.line.line:after { - width: @placeholderVeryLongLineOutdent; - } - .ui.placeholder .long.line.line.line:after { - width: @placeholderLongLineOutdent; - } - .ui.placeholder .medium.line.line.line:after { - width: @placeholderMediumLineOutdent; - } - .ui.placeholder .short.line.line.line:after { - width: @placeholderShortLineOutdent; - } - .ui.placeholder .very.short.line.line.line:after { - width: @placeholderVeryShortLineOutdent; - } -} - -& when (@variationPlaceholderFluid) { - /*------------------- - Fluid - --------------------*/ - - .ui.fluid.placeholder { - max-width: none; - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/rail.less b/semantic/src/definitions/elements/rail.less deleted file mode 100644 index d7ffc51..0000000 --- a/semantic/src/definitions/elements/rail.less +++ /dev/null @@ -1,147 +0,0 @@ -/*! - * # Fomantic-UI - Rail - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'rail'; - -@import (multiple) '../../theme.config'; - -/******************************* - Rails -*******************************/ - -.ui.rail { - position: absolute; - top: 0; - width: @width; - height: @height; -} - -.ui.left.rail { - left: auto; - right: 100%; - padding: 0 @splitDistance 0 0; - margin: 0 @splitDistance 0 0; -} - -.ui.right.rail { - left: 100%; - right: auto; - padding: 0 0 0 @splitDistance; - margin: 0 0 0 @splitDistance; -} - -/******************************* - Variations -*******************************/ - -& when (@variationRailInternal) { - /*-------------- - Internal - ---------------*/ - - .ui.left.internal.rail { - left: 0; - right: auto; - padding: 0 0 0 @splitDistance; - margin: 0 0 0 @splitDistance; - } - - .ui.right.internal.rail { - left: auto; - right: 0; - padding: 0 @splitDistance 0 0; - margin: 0 @splitDistance 0 0; - } -} - -& when (@variationRailDividing) { - /*-------------- - Dividing - ---------------*/ - - .ui.dividing.rail { - width: @dividingWidth; - } - .ui.left.dividing.rail { - padding: 0 @splitDividingDistance 0 0; - margin: 0 @splitDividingDistance 0 0; - border-right: @dividingBorder; - } - .ui.right.dividing.rail { - border-left: @dividingBorder; - padding: 0 0 0 @splitDividingDistance; - margin: 0 0 0 @splitDividingDistance; - } -} - -& when (@variationRailDistance) { - /*-------------- - Distance - ---------------*/ - - .ui.close.rail { - width: @closeWidth; - } - .ui.close.left.rail { - padding: 0 @splitCloseDistance 0 0; - margin: 0 @splitCloseDistance 0 0; - } - .ui.close.right.rail { - padding: 0 0 0 @splitCloseDistance; - margin: 0 0 0 @splitCloseDistance; - } - - .ui.very.close.rail { - width: @veryCloseWidth; - } - .ui.very.close.left.rail { - padding: 0 @splitVeryCloseDistance 0 0; - margin: 0 @splitVeryCloseDistance 0 0; - } - .ui.very.close.right.rail { - padding: 0 0 0 @splitVeryCloseDistance; - margin: 0 0 0 @splitVeryCloseDistance; - } -} - -& when (@variationRailAttached) { - /*-------------- - Attached - ---------------*/ - - .ui.attached.left.rail, - .ui.attached.right.rail { - padding: 0; - margin: 0; - } -} - -/*-------------- - Sizing ----------------*/ - -.ui.rail { - font-size: @medium; -} -& when not (@variationRailSizes = false) { - each(@variationRailSizes, { - @s: @@value; - .ui.@{value}.rail { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/reveal.less b/semantic/src/definitions/elements/reveal.less deleted file mode 100644 index 839668e..0000000 --- a/semantic/src/definitions/elements/reveal.less +++ /dev/null @@ -1,289 +0,0 @@ -/*! - * # Fomantic-UI - Reveal - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'reveal'; - -@import (multiple) '../../theme.config'; - -/******************************* - Reveal -*******************************/ - -.ui.reveal { - display: inherit; - position: relative !important; - font-size: 0; -} - -.ui.reveal > .visible.content { - position: absolute !important; - top: 0 !important; - left: 0 !important; - z-index: @topZIndex !important; - transition: @transition; -} -.ui.reveal > .hidden.content { - position: relative !important; - z-index: @bottomZIndex !important; -} - -/* Make sure hovered element is on top of other reveal */ -.ui.active.reveal .visible.content, -.ui.reveal:hover .visible.content { - z-index: @activeZIndex !important; -} - - -/******************************* - Types -*******************************/ - -& when (@variationRevealSlide) { - /*-------------- - Slide - ---------------*/ - - .ui.slide.reveal { - position: relative !important; - overflow: hidden !important; - white-space: nowrap; - } - - .ui.slide.reveal > .content { - display: block; - width: 100%; - white-space: normal; - float: left; - - margin: 0; - transition: @slideTransition; - } - - .ui.slide.reveal > .visible.content { - position: relative !important; - } - .ui.slide.reveal > .hidden.content { - position: absolute !important; - left: 0 !important; - width: 100% !important; - transform: translateX(100%) !important; - } - .ui.slide.active.reveal > .visible.content, - .ui.slide.reveal:hover > .visible.content { - transform: translateX(-100%) !important; - } - .ui.slide.active.reveal > .hidden.content, - .ui.slide.reveal:hover > .hidden.content { - transform: translateX(0%) !important; - } - - .ui.slide.right.reveal > .visible.content { - transform: translateX(0%) !important; - } - .ui.slide.right.reveal > .hidden.content { - transform: translateX(-100%) !important; - } - .ui.slide.right.active.reveal > .visible.content, - .ui.slide.right.reveal:hover > .visible.content { - transform: translateX(100%) !important; - } - .ui.slide.right.active.reveal > .hidden.content, - .ui.slide.right.reveal:hover > .hidden.content { - transform: translateX(0%) !important; - } - - .ui.slide.up.reveal > .hidden.content { - transform: translateY(100%) !important; - } - .ui.slide.up.active.reveal > .visible.content, - .ui.slide.up.reveal:hover > .visible.content { - transform: translateY(-100%) !important; - } - .ui.slide.up.active.reveal > .hidden.content, - .ui.slide.up.reveal:hover > .hidden.content { - transform: translateY(0%) !important; - } - - .ui.slide.down.reveal > .hidden.content { - transform: translateY(-100%) !important; - } - .ui.slide.down.active.reveal > .visible.content, - .ui.slide.down.reveal:hover > .visible.content { - transform: translateY(100%) !important; - } - .ui.slide.down.active.reveal > .hidden.content, - .ui.slide.down.reveal:hover > .hidden.content { - transform: translateY(0%) !important; - } -} - -& when (@variationRevealFade) { - /*-------------- - Fade - ---------------*/ - - .ui.fade.reveal > .visible.content { - opacity: 1; - } - .ui.fade.active.reveal > .visible.content, - .ui.fade.reveal:hover > .visible.content { - opacity: 0; - } -} - -& when (@variationRevealMove) { - /*-------------- - Move - ---------------*/ - - .ui.move.reveal { - position: relative !important; - overflow: hidden !important; - white-space: nowrap; - } - - .ui.move.reveal > .content { - display: block; - float: left; - white-space: normal; - - margin: 0; - transition: @moveTransition; - } - - .ui.move.reveal > .visible.content { - position: relative !important; - } - .ui.move.reveal > .hidden.content { - position: absolute !important; - left: 0 !important; - width: 100% !important; - } - .ui.move.active.reveal > .visible.content, - .ui.move.reveal:hover > .visible.content { - transform: translateX(-100%) !important; - } - .ui.move.right.active.reveal > .visible.content, - .ui.move.right.reveal:hover > .visible.content { - transform: translateX(100%) !important; - } - .ui.move.up.active.reveal > .visible.content, - .ui.move.up.reveal:hover > .visible.content { - transform: translateY(-100%) !important; - } - .ui.move.down.active.reveal > .visible.content, - .ui.move.down.reveal:hover > .visible.content { - transform: translateY(100%) !important; - } -} - - -& when (@variationRevealRotate) { - /*-------------- - Rotate - ---------------*/ - - .ui.rotate.reveal > .visible.content { - transition-duration: @transitionDuration; - transform: rotate(0deg); - } - - .ui.rotate.reveal > .visible.content, - .ui.rotate.right.reveal > .visible.content { - transform-origin: bottom right; - } - .ui.rotate.active.reveal > .visible.content, - .ui.rotate.reveal:hover > .visible.content, - .ui.rotate.right.active.reveal > .visible.content, - .ui.rotate.right.reveal:hover > .visible.content { - transform: rotate(@rotateDegrees); - } - - .ui.rotate.left.reveal > .visible.content { - transform-origin: bottom left; - } - .ui.rotate.left.active.reveal > .visible.content, - .ui.rotate.left.reveal:hover > .visible.content { - transform: rotate(-@rotateDegrees); - } -} - -/******************************* - States -*******************************/ - -& when (@variationRevealDisabled) { - .ui.disabled.reveal:hover > .visible.visible.content { - position: static !important; - display: block !important; - opacity: 1 !important; - top: 0 !important; - left: 0 !important; - right: auto !important; - bottom: auto !important; - transform: none !important; - } - .ui.disabled.reveal:hover > .hidden.hidden.content { - display: none !important; - } -} - - -/******************************* - Coupling -*******************************/ - -.ui.reveal > .ui.ribbon.label { - z-index: @overlayZIndex; -} - -/******************************* - Variations -*******************************/ - -/*-------------- - Visible ----------------*/ - -.ui.visible.reveal { - overflow: visible; -} - -/*-------------- - Instant ----------------*/ - -.ui.instant.reveal > .content { - transition-delay: 0s !important; -} - - -/*-------------- - Sizing ----------------*/ - -.ui.reveal > .content { - font-size: @medium; -} -& when not (@variationRevealSizes = false) { - each(@variationRevealSizes, { - @s: @@value; - .ui.@{value}.reveal > .content { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/segment.less b/semantic/src/definitions/elements/segment.less deleted file mode 100644 index ec5e19b..0000000 --- a/semantic/src/definitions/elements/segment.less +++ /dev/null @@ -1,774 +0,0 @@ -/*! - * # Fomantic-UI - Segment - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'segment'; - -@import (multiple) '../../theme.config'; - -/******************************* - Segment -*******************************/ - -.ui.segment { - position: relative; - background: @background; - box-shadow: @boxShadow; - margin: @margin; - padding: @padding; - border-radius: @borderRadius; - border: @border; -} - -.ui.segment:first-child { - margin-top: 0; -} -.ui.segment:last-child { - margin-bottom: 0; -} - -& when (@variationSegmentVertical) { - /* Vertical */ - .ui.vertical.segment { - margin: 0; - padding-left: 0; - padding-right: 0; - - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - border-bottom: @borderWidth solid @borderColor; - } - .ui.vertical.segment:last-child { - border-bottom: none; - } -} - - -/*------------------- - Loose Coupling ---------------------*/ -& when (@variationSegmentInverted) { - /* Header */ - .ui.inverted.segment > .ui.header .sub.header, - .ui.inverted.segment > .ui.header { - color: @white; - } -} - -& when (@variationSegmentAttached) { - /* Label */ - .ui[class*="bottom attached"].segment > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .ui[class*="top attached"].segment > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } -} - -/* Grid */ -.ui.page.grid.segment, -.ui.grid > .row > .ui.segment.column, -.ui.grid > .ui.segment.column { - padding-top: @pageGridMargin; - padding-bottom: @pageGridMargin; -} -.ui.grid.segment { - margin: @margin; - border-radius: @borderRadius; -} - -/* Table */ -.ui.basic.table.segment { - background: @background; - border: @border; - box-shadow: @boxShadow; -} -.ui[class*="very basic"].table.segment { - padding: @padding; -} - -/* Tab */ -.ui.segment.tab:last-child { - margin-bottom: @verticalMargin; -} - -/******************************* - Types -*******************************/ - -& when (@variationSegmentPlaceholder) { - /*------------------- - Placeholder - --------------------*/ - - .ui.placeholder.segment { - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - max-width: initial; - animation: none; - overflow: visible; - padding: @placeholderPadding; - min-height: @placeholderMinHeight; - background: @placeholderBackground; - border-color: @placeholderBorderColor; - box-shadow: @placeholderBoxShadow; - } - - .ui.placeholder.segment .button, - .ui.placeholder.segment textarea { - display: block; - } - .ui.placeholder.segment .field, - .ui.placeholder.segment textarea, - .ui.placeholder.segment > .ui.input, - .ui.placeholder.segment .button { - max-width: @placeholderContentMaxWidth; - margin-left: auto; - margin-right: auto; - } - .ui.placeholder.segment .column .button, - .ui.placeholder.segment .column .field, - .ui.placeholder.segment .column textarea, - .ui.placeholder.segment .column > .ui.input { - max-width: @placeholderContentMaxWidth; - margin-left: auto; - margin-right: auto; - } - - .ui.placeholder.segment > .inline { - align-self: center; - } - .ui.placeholder.segment > .inline > .button { - display: inline-block; - width: auto; - margin: @placeholderContentInlineButtonMargin; - } - .ui.placeholder.segment > .inline > .button:last-child { - margin-right: 0; - } -} - -& when (@variationSegmentPiled) { - /*------------------- - Piled - --------------------*/ - - .ui.piled.segments, - .ui.piled.segment { - margin: @piledMargin 0; - box-shadow: @piledBoxShadow; - z-index: @piledZIndex; - } - .ui.piled.segment:first-child { - margin-top: 0; - } - .ui.piled.segment:last-child { - margin-bottom: 0; - } - .ui.piled.segments:after, - .ui.piled.segments:before, - .ui.piled.segment:after, - .ui.piled.segment:before { - background-color: @white; - visibility: visible; - content: ''; - display: block; - height: 100%; - left: 0; - position: absolute; - width: 100%; - border: @piledBorder; - box-shadow: @piledBoxShadow; - } - .ui.piled.segments:before, - .ui.piled.segment:before { - transform: rotate(-@piledDegrees); - top: 0; - z-index: -2; - } - .ui.piled.segments:after, - .ui.piled.segment:after { - transform: rotate(@piledDegrees); - top: 0; - z-index: -1; - } - & when (@variationSegmentAttached) { - /* Piled Attached */ - .ui[class*="top attached"].piled.segment { - margin-top: @piledMargin; - margin-bottom: 0; - } - .ui.piled.segment[class*="top attached"]:first-child { - margin-top: 0; - } - .ui.piled.segment[class*="bottom attached"] { - margin-top: 0; - margin-bottom: @piledMargin; - } - .ui.piled.segment[class*="bottom attached"]:last-child { - margin-bottom: 0; - } - } -} - -& when (@variationSegmentStacked) { - /*------------------- - Stacked - --------------------*/ - - .ui.stacked.segment { - padding-bottom: @stackedPadding; - } - .ui.stacked.segments:before, - .ui.stacked.segments:after, - .ui.stacked.segment:before, - .ui.stacked.segment:after { - content: ''; - position: absolute; - bottom: -(@stackedHeight / 2); - left: 0; - - border-top: 1px solid @borderColor; - background: @stackedPageBackground; - - width: 100%; - height: @stackedHeight; - visibility: visible; - } - .ui.stacked.segments:before, - .ui.stacked.segment:before { - display: none; - } - - /* Add additional page */ - .ui.tall.stacked.segments:before, - .ui.tall.stacked.segment:before { - display: block; - bottom: 0; - } - & when (@variationSegmentInverted) { - /* Inverted */ - .ui.stacked.inverted.segments:before, - .ui.stacked.inverted.segments:after, - .ui.stacked.inverted.segment:before, - .ui.stacked.inverted.segment:after { - background-color: @subtleTransparentBlack; - border-top: 1px solid @selectedBorderColor; - } - } -} - -& when (@variationSegmentPadded) { - /*------------------- - Padded - --------------------*/ - - .ui.padded.segment { - padding: @paddedSegmentPadding; - } - - .ui[class*="very padded"].segment { - padding: @veryPaddedSegmentPadding; - } - - & when (@variationSegmentVertical) { - /* Padded vertical */ - .ui.padded.segment.vertical.segment, - .ui[class*="very padded"].vertical.segment { - padding-left: 0; - padding-right: 0; - } - } -} - -& when (@variationSegmentCompact) { - /*------------------- - Compact - --------------------*/ - - .ui.compact.segment { - display: table; - } - - /* Compact Group */ - .ui.compact.segments { - display: inline-flex; - } - .ui.compact.segments .segment, - .ui.segments .compact.segment { - display: block; - flex: 0 1 auto; - } -} - -& when (@variationSegmentCircular) { - /*------------------- - Circular - --------------------*/ - - .ui.circular.segment { - display: table-cell; - padding: @circularPadding; - text-align: center; - vertical-align: middle; - border-radius: 500em; - } -} - -& when (@variationSegmentRaised) { - /*------------------- - Raised - --------------------*/ - - .ui.raised.raised.segments, - .ui.raised.raised.segment { - box-shadow: @raisedBoxShadow; - } -} - -& when (@variationSegmentGroups) { - /******************************* - Groups - *******************************/ - - /* Group */ - .ui.segments { - flex-direction: column; - position: relative; - margin: @groupedMargin; - border: @groupedBorder; - box-shadow: @groupedBoxShadow; - border-radius: @groupedBorderRadius; - } - .ui.segments:first-child { - margin-top: 0; - } - .ui.segments:last-child { - margin-bottom: 0; - } - - - /* Nested Segment */ - .ui.segments > .segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: @groupedSegmentMargin; - width: @groupedSegmentWidth; - box-shadow: @groupedSegmentBoxShadow; - border: @groupedSegmentBorder; - border-top: @groupedSegmentDivider; - } - - .ui.segments:not(.horizontal) > .segment:first-child { - top: @attachedTopOffset; - bottom: 0; - border-top: none; - margin-top: 0; - margin-bottom: 0; - border-radius: @borderRadius @borderRadius 0 0; - } - - /* Bottom */ - .ui.segments:not(.horizontal) > .segment:last-child { - top: @attachedBottomOffset; - bottom: 0; - margin-top: 0; - margin-bottom: 0; - box-shadow: @attachedBottomBoxShadow; - border-radius: 0 0 @borderRadius @borderRadius; - } - - /* Only */ - .ui.segments:not(.horizontal) > .segment:only-child { - border-radius: @borderRadius; - } - - - /* Nested Group */ - .ui.segments > .ui.segments { - border-top: @groupedSegmentDivider; - margin: @nestedGroupMargin; - } - .ui.segments > .segments:first-child { - border-top: none; - } - .ui.segments > .segment + .segments:not(.horizontal) { - margin-top: 0; - } - - & when (@variationSegmentHorizontal) { - /* Horizontal Group */ - .ui.horizontal.segments { - display: flex; - flex-direction: row; - background-color: transparent; - padding: 0; - box-shadow: @boxShadow; - margin: @margin; - border-radius: @borderRadius; - border: @border; - } - .ui.stackable.horizontal.segments { - flex-wrap: wrap; - } - - /* Nested Horizontal Group */ - .ui.segments > .horizontal.segments { - margin: 0; - background-color: transparent; - border-radius: 0; - border: none; - box-shadow: none; - border-top: @groupedSegmentDivider; - } - - /* Horizontal Segment */ - .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { - flex: 1 1 auto; - -ms-flex: 1 1 0; /* Solves #2550 MS Flex */ - } - .ui.horizontal.segments > .segment { - margin: 0; - min-width: 0; - border-radius: 0; - border: none; - box-shadow: none; - border-left: @borderWidth solid @borderColor; - } - - /* Border Fixes */ - .ui.segments > .horizontal.segments:first-child { - border-top: none; - } - .ui.horizontal.segments:not(.stackable) > .segment:first-child { - border-left: none; - } - .ui.horizontal.segments > .segment:first-child { - border-radius: @borderRadius 0 0 @borderRadius; - } - .ui.horizontal.segments > .segment:last-child { - border-radius: 0 @borderRadius @borderRadius 0; - } - } -} - - -/******************************* - States -*******************************/ - -& when (@variationSegmentDisabled) { - /*-------------- - Disabled - ---------------*/ - - .ui.disabled.segment { - opacity: @disabledOpacity; - color: @disabledTextColor; - } -} - -& when (@variationSegmentLoading) { - /*-------------- - Loading - ---------------*/ - - .ui.loading.segment { - position: relative; - cursor: default; - pointer-events: none; - text-shadow: none !important; - transition: all 0s linear; - } - .ui.loading.segment:before { - position: absolute; - content: ''; - top: 0; - left: 0; - background: @loaderDimmerColor; - width: 100%; - height: 100%; - border-radius: @borderRadius; - z-index: @loaderDimmerZIndex; - } - .ui.loading.segment:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid @loaderLineColor; - border-radius: @circularRadius; - - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: @loaderLineZIndex; - } -} - - - -/******************************* - Variations -*******************************/ - -& when (@variationSegmentBasic) { - /*------------------- - Basic - --------------------*/ - - .ui.basic.segment, - .ui.segments .ui.basic.segment, - .ui.basic.segments { - background: @basicBackground; - box-shadow: @basicBoxShadow; - border: @basicBorder; - border-radius: @basicBorderRadius; - } -} - -& when (@variationSegmentClearing) { - /*------------------- - Clearing - --------------------*/ - - .ui.clearing.segment:after { - content: ""; - display: block; - clear: both; - } -} - -/*------------------- - Colors ---------------------*/ - -each(@colors,{ - @color: replace(@key,'@',''); - @c: @colors[@@color][color]; - & when not (@color=primary) and not (@color=secondary) { - .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) { - border-top: @coloredBorderSize solid @c; - } - & when (@variationSegmentInverted) { - .ui.inverted.@{color}.segment.segment.segment.segment.segment { - background-color: @c; - color: @white; - } - } - } -}) - -& when (@variationSegmentAligned) { - /*------------------- - Aligned - --------------------*/ - - .ui[class*="left aligned"].segment { - text-align: left; - } - .ui[class*="right aligned"].segment { - text-align: right; - } - .ui[class*="center aligned"].segment { - text-align: center; - } -} - -& when (@variationSegmentFloating) { - /*------------------- - Floated - --------------------*/ - - .ui.floated.segment, - .ui[class*="left floated"].segment { - float: left; - margin-right: @floatedDistance; - } - .ui[class*="right floated"].segment { - float: right; - margin-left: @floatedDistance; - } -} - -& when (@variationSegmentInverted) { - /*------------------- - Inverted - --------------------*/ - - .ui.inverted.segment { - border: none; - box-shadow: none; - } - .ui.inverted.segment, - .ui.primary.inverted.segment { - background: @invertedBackground; - color: @invertedTextColor; - } - - /* Nested */ - .ui.inverted.segment .segment { - color: @textColor; - } - .ui.inverted.segment .inverted.segment { - color: @invertedTextColor; - } - & when (@variationSegmentAttached) { - /* Attached */ - .ui.inverted.attached.segment { - border-color: @solidWhiteBorderColor; - } - } - & when (@variationSegmentLoading) { - /* Loading */ - .ui.inverted.loading.segment { - color: @invertedLoaderLineColor; - } - .ui.inverted.loading.segment:before { - background: @loaderInvertedDimmerColor; - } - } -} - -/*------------------- - Emphasis ---------------------*/ -& when (@variationSegmentSecondary) { - /* Secondary */ - .ui.secondary.segment { - background: @secondaryBackground; - color: @secondaryColor; - } - & when (@variationSegmentInverted) { - .ui.secondary.inverted.segment { - background: @secondaryInvertedBackground; - color: @secondaryInvertedColor; - } - } -} - -& when (@variationSegmentTertiary) { - /* Tertiary */ - .ui.tertiary.segment { - background: @tertiaryBackground; - color: @tertiaryColor; - } - & when (@variationSegmentInverted) { - .ui.tertiary.inverted.segment { - background: @tertiaryInvertedBackground; - color: @tertiaryInvertedColor; - } - } -} - -& when (@variationSegmentAttached) { - /*------------------- - Attached - --------------------*/ - - /* Middle */ - .ui.attached.segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 @attachedHorizontalOffset; - width: @attachedWidth; - max-width: @attachedWidth; - box-shadow: @attachedBoxShadow; - border: @attachedBorder; - } - .ui.attached:not(.message) + .ui.attached.segment:not(.top) { - border-top: none; - } - - /* Top */ - .ui[class*="top attached"].segment { - bottom: 0; - margin-bottom: 0; - top: @attachedTopOffset; - margin-top: @verticalMargin; - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.segment[class*="top attached"]:first-child { - margin-top: 0; - } - - /* Bottom */ - .ui.segment[class*="bottom attached"] { - bottom: 0; - margin-top: 0; - top: @attachedBottomOffset; - margin-bottom: @verticalMargin; - box-shadow: @attachedBottomBoxShadow; - border-radius: 0 0 @borderRadius @borderRadius; - } - .ui.segment[class*="bottom attached"]:last-child { - margin-bottom: @verticalMargin; - } -} - -& when (@variationSegmentFitted) { - /*-------------- - Fitted - ---------------*/ - - .ui.fitted.segment:not(.horizontally) { - padding-top: 0; - padding-bottom: 0; - } - .ui.fitted.segment:not(.vertically) { - padding-left: 0; - padding-right: 0; - } -} - -/*------------------- - Size ---------------------*/ - -.ui.segments .segment, -.ui.segment { - font-size: @medium; -} -& when not (@variationSegmentSizes = false) { - each(@variationSegmentSizes, { - @s: @@value; - .ui.@{value}.segments .segment, - .ui.@{value}.segment { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/step.less b/semantic/src/definitions/elements/step.less deleted file mode 100644 index fa339e8..0000000 --- a/semantic/src/definitions/elements/step.less +++ /dev/null @@ -1,630 +0,0 @@ -/*! - * # Fomantic-UI - Step - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Step -*******************************/ - -/*-------------- - Load Theme ----------------*/ - -@type : 'element'; -@element : 'step'; - -@import (multiple) '../../theme.config'; - -/******************************* - Plural -*******************************/ - -.ui.steps { - display: inline-flex; - flex-direction: row; - align-items: stretch; - margin: @stepMargin; - background: @stepsBackground; - box-shadow: @stepsBoxShadow; - line-height: @lineHeight; - border-radius: @stepsBorderRadius; - border: @stepsBorder; -} -.ui.steps:not(.unstackable) { - flex-wrap: wrap; -} - -/* First Steps */ -.ui.steps:first-child { - margin-top: 0; -} - -/* Last Steps */ -.ui.steps:last-child { - margin-bottom: 0; -} - - -/******************************* - Singular -*******************************/ - -.ui.steps .step { - position: relative; - display: flex; - flex: 1 0 auto; - flex-wrap: wrap; - flex-direction: row; - vertical-align: middle; - align-items: center; - justify-content: @justifyContent; - - margin: @verticalMargin @horizontalMargin; - padding: @verticalPadding @horizontalPadding; - background: @background; - color: @textColor; - box-shadow: @boxShadow; - border-radius: @borderRadius; - border: @border; - border-right: @divider; - transition: @transition; -} - -/* Arrow */ -.ui.steps .step:after { - display: none; - position: absolute; - z-index: 2; - content: ''; - top: @arrowTopOffset; - right: @arrowRightOffset; - background-color: @arrowBackgroundColor; - width: @arrowSize; - height: @arrowSize; - - border-style: solid; - border-color: @borderColor; - border-width: @arrowBorderWidth; - - transition: @transition; - transform: translateY(-50%) translateX(50%) rotate(-45deg); -} - -/* First Step */ -.ui.steps .step:first-child { - padding-left: @horizontalPadding; - border-radius: @stepsBorderRadius 0 0 @stepsBorderRadius; -} - -/* Last Step */ -.ui.steps .step:last-child { - border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0; - border-right: none; - margin-right: 0; -} - -/* Only Step */ -.ui.steps .step:only-child { - border-radius: @stepsBorderRadius; -} - - -/******************************* - Content -*******************************/ - -/* Title */ -.ui.steps .step .title { - font-family: @titleFontFamily; - font-size: @titleFontSize; - font-weight: @titleFontWeight; -} -.ui.steps .step > .title { - width: 100%; -} - -/* Description */ -.ui.steps .step .description { - font-weight: @descriptionFontWeight; - font-size: @descriptionFontSize; - color: @descriptionColor; -} -.ui.steps .step > .description { - width: 100%; -} -.ui.steps .step .title ~ .description { - margin-top: @descriptionDistance; -} - -/* Icon */ -.ui.steps .step > i.icon { - line-height: 1; - font-size: @iconSize; - margin: 0 @iconDistance 0 0; -} -.ui.steps .step > i.icon, -.ui.steps .step > i.icon ~ .content { - display: block; - flex: 0 1 auto; - align-self: @iconAlign; -} - -/* Horizontal Icon */ -.ui.steps:not(.vertical) .step > i.icon { - width: auto; -} - -/* Link */ -.ui.steps .link.step, -.ui.steps a.step { - cursor: pointer; -} - -/******************************* - Types -*******************************/ - -& when (@variationStepOrdered) { - /*-------------- - Ordered - ---------------*/ - - .ui.ordered.steps { - counter-reset: ordered; - } - .ui.ordered.steps .step:before { - display: block; - position: static; - text-align: center; - content: counter(ordered); - align-self: @iconAlign; - margin-right: @iconDistance; - font-size: @iconSize; - counter-increment: ordered; - font-family: @orderedFontFamily; - font-weight: @orderedFontWeight; - } - - .ui.ordered.steps .step > * { - display: block; - align-self: @iconAlign; - } -} - -& when (@variationStepVertical) { - /*-------------- - Vertical - ---------------*/ - - .ui.vertical.steps { - display: inline-flex; - flex-direction: column; - overflow: visible; - } - .ui.vertical.steps .step { - justify-content: flex-start; - border-radius: @borderRadius; - padding: @verticalPadding @horizontalPadding; - border-right: none; - border-bottom: @verticalDivider; - } - .ui.vertical.steps .step:first-child { - padding: @verticalPadding @horizontalPadding; - border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; - } - .ui.vertical.steps .step:last-child { - border-bottom: none; - border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; - } - .ui.vertical.steps .step:only-child { - border-radius: @stepsBorderRadius; - } - - - /* Arrow */ - .ui.vertical.steps .step:after { - top: @verticalArrowTopOffset; - right: @verticalArrowRightOffset; - border-width: @verticalArrowBorderWidth; - display: @verticalArrowDisplay; - } - .ui.right.vertical.steps .step:after { - border-width: @verticalLeftArrowBorderWidth; - left: @verticalLeftArrowLeftOffset; - right: @verticalLeftArrowRightOffset; - transform: translateY(-50%) translateX(-50%) rotate(-45deg); - } - - .ui.vertical.steps .active.step:after { - display: @verticalActiveArrowDisplay; - } - .ui.vertical.steps .step:last-child:after { - display: @verticalLastArrowDisplay; - } - .ui.vertical.steps .active.step:last-child:after { - display: @verticalActiveLastArrowDisplay; - } -} - - -/*--------------- - Responsive -----------------*/ - -/* Mobile (Default) */ -@media only screen and (max-width: (@largestMobileScreen)) { - - .ui.steps:not(.unstackable) { - display: inline-flex; - overflow: visible; - flex-direction: column; - } - .ui.steps:not(.unstackable) .step { - width: 100% !important; - flex-direction: column; - border-radius: @borderRadius; - padding: @verticalPadding @horizontalPadding; - border-right: none; - border-bottom: @stepsBorder; - } - .ui.steps:not(.unstackable) .step:first-child { - padding: @verticalPadding @horizontalPadding; - border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; - } - .ui.steps:not(.unstackable) .step:last-child { - border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; - border-bottom: none; - } - - /* Arrow */ - .ui.steps:not(.unstackable) .step:after { - top: unset; - bottom: -@arrowSize; - right: 50%; - transform: translateY(-50%) translateX(50%) rotate(45deg); - } - .ui.vertical.steps .active.step:last-child:after { - display: none; - } - /* Content */ - .ui.steps:not(.unstackable) .step .content { - text-align: center; - } - - /* Icon */ - .ui.steps:not(.unstackable) .step > i.icon, - .ui.ordered.steps:not(.unstackable) .step:before { - margin: 0 0 @mobileIconDistance 0; - } - -} - -/******************************* - States -*******************************/ - -/* Link Hover */ -.ui.steps .link.step:hover::after, -.ui.steps .link.step:hover, -.ui.steps a.step:hover::after, -.ui.steps a.step:hover { - background: @hoverBackground; - color: @hoverColor; -} - -/* Link Down */ -.ui.steps .link.step:active::after, -.ui.steps .link.step:active, -.ui.steps a.step:active::after, -.ui.steps a.step:active { - background: @downBackground; - color: @downColor; -} - -/* Active */ -.ui.steps .step.active { - cursor: auto; - background: @activeBackground; -} -.ui.steps .step.active:after { - background: @activeBackground; -} -.ui.steps .step.active .title { - color: @activeColor; -} -.ui.ordered.steps .step.active:before, -.ui.steps .active.step i.icon { - color: @activeIconColor; -} - -/* Active Arrow */ -.ui.steps .step:after { - display: @arrowDisplay; -} -.ui.steps .active.step:after { - display: @activeArrowDisplay; -} -.ui.steps .step:last-child:after { - display: @lastArrowDisplay; -} -.ui.steps .active.step:last-child:after { - display: @activeLastArrowDisplay; -} - -/* Active Hover */ -.ui.steps .link.active.step:hover::after, -.ui.steps .link.active.step:hover, -.ui.steps a.active.step:hover::after, -.ui.steps a.active.step:hover { - cursor: pointer; - background: @activeHoverBackground; - color: @activeHoverColor; -} - -/* Completed */ -.ui.steps .step.completed > i.icon:before, -.ui.ordered.steps .step.completed:before { - color: @completedColor; -} - -& when (@variationStepDisabled) { - /* Disabled */ - .ui.steps .disabled.step { - cursor: auto; - background: @disabledBackground; - pointer-events: none; - } - .ui.steps .disabled.step, - .ui.steps .disabled.step .title, - .ui.steps .disabled.step .description { - color: @disabledColor; - } - .ui.steps .disabled.step:after { - background: @disabledBackground; - } -} - - -/******************************* - Variations -*******************************/ - -& when (@variationStepStackable) { - /*-------------- - Stackable - ---------------*/ - - /* Tablet Or Below */ - @media only screen and (max-width: @largestTabletScreen) { - - .ui[class*="tablet stackable"].steps { - display: inline-flex; - overflow: visible; - flex-direction: column; - } - - /* Steps */ - .ui[class*="tablet stackable"].steps .step { - flex-direction: column; - border-radius: @borderRadius; - padding: @verticalPadding @horizontalPadding; - border-right: none; - border-bottom: @stepsBorder; - } - .ui[class*="tablet stackable"].steps .step:first-child { - padding: @verticalPadding @horizontalPadding; - border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; - } - .ui[class*="tablet stackable"].steps .step:last-child { - border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; - border-bottom: none; - } - - /* Arrow */ - .ui[class*="tablet stackable"].steps .step:after { - top: unset; - bottom: -@arrowSize; - right: 50%; - transform: translateY(-50%) translateX(50%) rotate(45deg); - } - - /* Content */ - .ui[class*="tablet stackable"].steps .step .content { - text-align: center; - } - - /* Icon */ - .ui[class*="tablet stackable"].steps .step > i.icon, - .ui[class*="tablet stackable"].ordered.steps .step:before { - margin: 0 0 @mobileIconDistance 0; - } - - } -} - -& when (@variationStepFluid) { - /*-------------- - Fluid - ---------------*/ - - /* Fluid */ - .ui.fluid.steps { - display: flex; - width: 100%; - } -} - -& when (@variationStepAttached) { - /*-------------- - Attached - ---------------*/ - - /* Top */ - .ui.attached.steps { - width: @attachedWidth !important; - margin: 0 @attachedHorizontalOffset @attachedVerticalOffset; - max-width: @attachedWidth; - border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; - } - .ui.attached.steps .step:first-child { - border-radius: @stepsBorderRadius 0 0 0; - } - .ui.attached.steps .step:last-child { - border-radius: 0 @stepsBorderRadius 0 0; - } - - /* Bottom */ - .ui.bottom.attached.steps { - margin: @attachedVerticalOffset @attachedHorizontalOffset 0; - border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; - } - .ui.bottom.attached.steps .step:first-child { - border-radius: 0 0 0 @stepsBorderRadius; - } - .ui.bottom.attached.steps .step:last-child { - border-radius: 0 0 @stepsBorderRadius 0; - } -} - -/*------------------- - Evenly Divided ---------------------*/ - -.ui.one.steps, -.ui.two.steps, -.ui.three.steps, -.ui.four.steps, -.ui.five.steps, -.ui.six.steps, -.ui.seven.steps, -.ui.eight.steps { - width: 100%; -} -.ui.one.steps > .step, -.ui.two.steps > .step, -.ui.three.steps > .step, -.ui.four.steps > .step, -.ui.five.steps > .step, -.ui.six.steps > .step, -.ui.seven.steps > .step, -.ui.eight.steps > .step { - flex-wrap: nowrap; -} -.ui.one.steps > .step { - width: 100%; -} -.ui.two.steps > .step { - width: 50%; -} -.ui.three.steps > .step { - width: 33.333%; -} -.ui.four.steps > .step { - width: 25%; -} -.ui.five.steps > .step { - width: 20%; -} -.ui.six.steps > .step { - width: 16.666%; -} -.ui.seven.steps > .step { - width: 14.285%; -} -.ui.eight.steps > .step { - width: 12.500%; -} - -/*------------------- - Sizes ---------------------*/ - -.ui.steps .step, -.ui.step { - font-size: @medium; -} -& when not (@variationStepSizes = false) { - each(@variationStepSizes, { - @s: @@value; - .ui.@{value}.steps .step, - .ui.@{value}.step { - font-size: @s; - } - }) -} - -& when (@variationStepInverted) { - /*-------------- - Inverted - ---------------*/ - - .ui.inverted.steps { - border: 1px solid @solidWhiteBorderColor; - } - - .ui.inverted.steps .step { - color: @invertedTextColor; - background: @black; - border-color: @solidWhiteBorderColor; - } - - .ui.inverted.steps .step:after { - background-color: @black; - border-color: @solidWhiteBorderColor; - } - - .ui.inverted.steps .step .description { - color: @invertedTextColor; - } - - /* Active */ - .ui.inverted.steps .step.active, - .ui.inverted.steps .step.active:after { - background: @invertedActiveBackground; - } - .ui.inverted.ordered.steps .step.active:before, - .ui.inverted.steps .active.step i.icon { - color: @invertedSelectedTextColor; - } - - & when (@variationStepDisabled) { - /* Disabled */ - .ui.inverted.steps .disabled.step, - .ui.inverted.steps .disabled.step:after { - background: @invertedDisabledBackground; - } - .ui.inverted.steps .disabled.step, - .ui.inverted.steps .disabled.step .title, - .ui.inverted.steps .disabled.step .description { - color: @invertedDisabledTextColor; - } - } - - /* Link Hover */ - .ui.inverted.steps .link.step:hover::after, - .ui.inverted.steps .link.step:hover, - .ui.inverted.steps a.step:hover::after, - .ui.inverted.steps a.step:hover { - background: @invertedHoverBackground; - color: @invertedHoveredTextColor; - } - - /* Link Down */ - .ui.inverted.steps .link.step:active::after, - .ui.inverted.steps .link.step:active, - .ui.inverted.steps a.step:active::after, - .ui.inverted.steps a.step:active { - background: @invertedActiveHoverBackground; - color: @invertedPressedTextColor; - } -} - - -.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/text.less b/semantic/src/definitions/elements/text.less deleted file mode 100644 index f2256c5..0000000 --- a/semantic/src/definitions/elements/text.less +++ /dev/null @@ -1,74 +0,0 @@ -/*! - * # Fomantic-UI - Text - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'element'; -@element : 'text'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Text -*******************************/ -span.ui.text { - line-height: @lineHeight; -} - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - - span.ui.@{color}.text { - color: @c; - } - & when (@variationTextInverted) { - span.ui.inverted.@{color}.text { - color: @l; - } - } -}) - -& when (@variationTextStates) { - each(@textStates, { - @state: replace(@key, '@', ''); - @c: @textStates[@@state][color]; - - span.ui.@{state}.text { - color: @c; - } - }) -} - -& when (@variationTextDisabled) { - span.ui.disabled.text { - opacity: @disabledOpacity; - } -} - -/* Sizes */ -span.ui.medium.text { - font-size: @medium; -} -& when not (@variationTextSizes = false) { - each(@variationTextSizes, { - @s: @@value; - span.ui.@{value}.text { - font-size: @s; - } - }) -} - -.loadUIOverrides(); |