From df928d737800158fba3a0a8c1112395930e07361 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Tue, 19 Jan 2021 18:26:41 +0100 Subject: [PATCH] feat(segment): disabled, inverted and loading groups --- src/definitions/elements/loader.less | 18 ++++++++++-------- src/definitions/elements/segment.less | 12 +++++++++++- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index 383bf6c1cd..188bb1ba5e 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -212,7 +212,7 @@ each(@colors, { .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):not(.card):before, + .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):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, @@ -222,7 +222,7 @@ each(@colors, { color: @c; } .ui.inverted.@{color}.elastic.loader:before, - .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.card):before, + .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):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, @@ -296,12 +296,14 @@ each(@colors, { border-bottom-color: transparent; } .ui.loading.loading.loading.loading.loading.loading.card:after, +.ui.loading.loading.loading.loading.loading.loading.segments:after, .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.card:not(.double):after, +.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after, .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; @@ -318,14 +320,14 @@ each(@colors, { .ui.inverted.dimmer > .ui.elastic.loader { color: @loaderLineColor; } - .ui.elastic.loading.loading:not(.form):not(.segment):not(.card):after, + .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):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):not(.card):before, + .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before, .ui.elastic.loading.loading.loading .input > i.icon:before, .ui.elastic.loading.loading.loading > i.icon:before, .ui.elastic.loader.loader:before { @@ -339,27 +341,27 @@ each(@colors, { } } & when (@variationLoaderSpeeds) { - .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.card):after, + .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):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):not(.card):before, + .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):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):not(.card):after, + .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):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):not(.card):before, + .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):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 { diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 51a1691531..0b3c551fcd 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -62,6 +62,8 @@ --------------------*/ & when (@variationSegmentInverted) { /* Header */ + .ui.inverted.segments .segment > .ui.header .sub.header, + .ui.inverted.segments .segment > .ui.header, .ui.inverted.segment > .ui.header .sub.header, .ui.inverted.segment > .ui.header { color: @white; @@ -488,6 +490,7 @@ Disabled ---------------*/ + .ui.disabled.segments, .ui.disabled.segment { opacity: @disabledOpacity; color: @disabledTextColor; @@ -501,6 +504,7 @@ Loading ---------------*/ + .ui.loading.segments, .ui.loading.segment { position: relative; cursor: default; @@ -508,6 +512,7 @@ user-select: none; transition: all 0s linear; } + .ui.loading.segments:before, .ui.loading.segment:before { position: absolute; content: ''; @@ -519,6 +524,7 @@ border-radius: @borderRadius; z-index: @loaderDimmerZIndex; } + .ui.loading.segments:after, .ui.loading.segment:after { position: absolute; content: ''; @@ -628,11 +634,13 @@ each(@colors,{ /*------------------- Inverted --------------------*/ - + .ui.inverted.segments, + .ui.inverted.segments .segment, .ui.inverted.segment { border: none; box-shadow: none; } + .ui.inverted.segments .segment, .ui.inverted.segment, .ui.primary.inverted.segment { background: @invertedBackground; @@ -654,9 +662,11 @@ each(@colors,{ } & when (@variationSegmentLoading) { /* Loading */ + .ui.inverted.loading.segments, .ui.inverted.loading.segment { color: @invertedLoaderLineColor; } + .ui.inverted.loading.segments:before, .ui.inverted.loading.segment:before { background: @loaderInvertedDimmerColor; }