From 823344c19094680e80e2b56449a243e183db8b06 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Mon, 14 Dec 2020 23:21:39 -0800 Subject: :star: --- semantic/src/definitions/elements/button.less | 1881 ++++++++++++++++++++ semantic/src/definitions/elements/container.less | 160 ++ semantic/src/definitions/elements/divider.less | 298 ++++ semantic/src/definitions/elements/emoji.less | 72 + semantic/src/definitions/elements/flag.less | 52 + semantic/src/definitions/elements/header.less | 487 +++++ semantic/src/definitions/elements/icon.less | 374 ++++ semantic/src/definitions/elements/image.less | 321 ++++ semantic/src/definitions/elements/input.less | 565 ++++++ semantic/src/definitions/elements/label.less | 1032 +++++++++++ semantic/src/definitions/elements/list.less | 1021 +++++++++++ semantic/src/definitions/elements/loader.less | 416 +++++ semantic/src/definitions/elements/placeholder.less | 248 +++ semantic/src/definitions/elements/rail.less | 147 ++ semantic/src/definitions/elements/reveal.less | 289 +++ semantic/src/definitions/elements/segment.less | 774 ++++++++ semantic/src/definitions/elements/step.less | 630 +++++++ semantic/src/definitions/elements/text.less | 74 + 18 files changed, 8841 insertions(+) create mode 100644 semantic/src/definitions/elements/button.less create mode 100644 semantic/src/definitions/elements/container.less create mode 100644 semantic/src/definitions/elements/divider.less create mode 100644 semantic/src/definitions/elements/emoji.less create mode 100644 semantic/src/definitions/elements/flag.less create mode 100644 semantic/src/definitions/elements/header.less create mode 100644 semantic/src/definitions/elements/icon.less create mode 100644 semantic/src/definitions/elements/image.less create mode 100644 semantic/src/definitions/elements/input.less create mode 100644 semantic/src/definitions/elements/label.less create mode 100644 semantic/src/definitions/elements/list.less create mode 100644 semantic/src/definitions/elements/loader.less create mode 100644 semantic/src/definitions/elements/placeholder.less create mode 100644 semantic/src/definitions/elements/rail.less create mode 100644 semantic/src/definitions/elements/reveal.less create mode 100644 semantic/src/definitions/elements/segment.less create mode 100644 semantic/src/definitions/elements/step.less create mode 100644 semantic/src/definitions/elements/text.less (limited to 'semantic/src/definitions/elements') diff --git a/semantic/src/definitions/elements/button.less b/semantic/src/definitions/elements/button.less new file mode 100644 index 0000000..3e648a5 --- /dev/null +++ b/semantic/src/definitions/elements/button.less @@ -0,0 +1,1881 @@ +/*! + * # 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 new file mode 100644 index 0000000..26f1858 --- /dev/null +++ b/semantic/src/definitions/elements/container.less @@ -0,0 +1,160 @@ +/*! + * # 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 new file mode 100644 index 0000000..d23167d --- /dev/null +++ b/semantic/src/definitions/elements/divider.less @@ -0,0 +1,298 @@ +/*! + * # 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 new file mode 100644 index 0000000..6e80621 --- /dev/null +++ b/semantic/src/definitions/elements/emoji.less @@ -0,0 +1,72 @@ +/*! + * # 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 new file mode 100644 index 0000000..b691d18 --- /dev/null +++ b/semantic/src/definitions/elements/flag.less @@ -0,0 +1,52 @@ +/*! + * # 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 new file mode 100644 index 0000000..669f316 --- /dev/null +++ b/semantic/src/definitions/elements/header.less @@ -0,0 +1,487 @@ +/*! + * # 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 new file mode 100644 index 0000000..e97ae46 --- /dev/null +++ b/semantic/src/definitions/elements/icon.less @@ -0,0 +1,374 @@ +/*! + * # 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 new file mode 100644 index 0000000..651b81e --- /dev/null +++ b/semantic/src/definitions/elements/image.less @@ -0,0 +1,321 @@ +/*! + * # 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 new file mode 100644 index 0000000..7782ede --- /dev/null +++ b/semantic/src/definitions/elements/input.less @@ -0,0 +1,565 @@ +/*! + * # 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 new file mode 100644 index 0000000..4517ed7 --- /dev/null +++ b/semantic/src/definitions/elements/label.less @@ -0,0 +1,1032 @@ +/*! + * # 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 new file mode 100644 index 0000000..ca1abdc --- /dev/null +++ b/semantic/src/definitions/elements/list.less @@ -0,0 +1,1021 @@ +/*! + * # 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 new file mode 100644 index 0000000..0b64a84 --- /dev/null +++ b/semantic/src/definitions/elements/loader.less @@ -0,0 +1,416 @@ +/*! + * # 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 new file mode 100644 index 0000000..5440612 --- /dev/null +++ b/semantic/src/definitions/elements/placeholder.less @@ -0,0 +1,248 @@ +/*! + * # 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 new file mode 100644 index 0000000..d7ffc51 --- /dev/null +++ b/semantic/src/definitions/elements/rail.less @@ -0,0 +1,147 @@ +/*! + * # 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 new file mode 100644 index 0000000..839668e --- /dev/null +++ b/semantic/src/definitions/elements/reveal.less @@ -0,0 +1,289 @@ +/*! + * # 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 new file mode 100644 index 0000000..ec5e19b --- /dev/null +++ b/semantic/src/definitions/elements/segment.less @@ -0,0 +1,774 @@ +/*! + * # 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 new file mode 100644 index 0000000..fa339e8 --- /dev/null +++ b/semantic/src/definitions/elements/step.less @@ -0,0 +1,630 @@ +/*! + * # 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 new file mode 100644 index 0000000..f2256c5 --- /dev/null +++ b/semantic/src/definitions/elements/text.less @@ -0,0 +1,74 @@ +/*! + * # 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(); -- cgit v1.2.3