From d69ebf0c048d6079043668656d8f348a57a30ecc Mon Sep 17 00:00:00 2001 From: vagusx Date: Wed, 7 Aug 2024 17:03:33 +0800 Subject: [PATCH 1/2] feat: support segmented fallback less --- src/components/segmented/segmented.patch.less | 112 ++++++++++++++++++ src/global/css-vars-patch.less | 1 + 2 files changed, 113 insertions(+) create mode 100644 src/components/segmented/segmented.patch.less diff --git a/src/components/segmented/segmented.patch.less b/src/components/segmented/segmented.patch.less new file mode 100644 index 0000000000..5349f2e505 --- /dev/null +++ b/src/components/segmented/segmented.patch.less @@ -0,0 +1,112 @@ +@class-prefix-segmented: ~'adm-segmented'; + +.@{class-prefix-segmented} { + display: inline-block; + padding: 2px; + color: #666; + background-color: #f5f5f5; + border-radius: 2px; + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + + &-group { + position: relative; + display: flex; + align-items: stretch; + justify-items: flex-start; + width: 100%; + } + + // block styles + &&-block { + display: flex; + } + + &&-block &-item { + flex: 1; + min-width: 0; + } + + // item styles + &-item { + position: relative; + text-align: center; + cursor: pointer; + transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + + &-selected { + .segmented-item-selected(); + color: #333; + } + + &-label { + min-height: 10px; + padding: 0 11px; + line-height: 28px; + .segmented-text-ellipsis(); + } + + // syntactic sugar to add `icon` for Segmented Item + &-icon + * { + margin-left: 6px; + } + + &-input { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + opacity: 0; + pointer-events: none; + } + } + + // disabled styles + &-item-disabled { + .segmented-disabled-item(); + } + + // thumb styles + &-thumb { + .segmented-item-selected(); + + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + padding: 4px 0; + } + + // transition effect when `appear-active` + &-thumb-motion-appear-active { + transition: + transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), + width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + will-change: transform, width; + } +} + +/* ---- mixins part starts ---- */ +.segmented-disabled-item { + color: #999; + cursor: not-allowed; +} + +.segmented-item-selected { + background-color: #fff; + border-radius: 2px; + box-shadow: + 0 2px 8px -2px fade(#000, 5%), + 0 1px 4px -1px fade(#000, 7%), + 0 0 1px 0 fade(#000, 8%); +} + +.segmented-text-ellipsis { + overflow: hidden; + // handle text ellipsis + white-space: nowrap; + text-overflow: ellipsis; + word-break: keep-all; +} +/* ---- mixins part ends ---- */ diff --git a/src/global/css-vars-patch.less b/src/global/css-vars-patch.less index f3ca619a82..117f59e916 100644 --- a/src/global/css-vars-patch.less +++ b/src/global/css-vars-patch.less @@ -11,6 +11,7 @@ @import '../components/popover/popover.patch.less'; @import '../components/scroll-mask/scroll-mask.patch.less'; @import '../components/space/space.patch.less'; + @import '../components/segmented/segmented.patch.less'; @import '../components/spin-loading/spin-loading.patch.less'; @import '../components/swiper/swiper.patch.less'; @import '../components/tabs/tabs.patch.less'; From 4305ccb4ab0e1f3e30c97b8f7f39227b4af4b93f Mon Sep 17 00:00:00 2001 From: vagusx Date: Wed, 7 Aug 2024 17:34:57 +0800 Subject: [PATCH 2/2] chore: update --- src/components/segmented/segmented.patch.less | 64 ------------------- 1 file changed, 64 deletions(-) diff --git a/src/components/segmented/segmented.patch.less b/src/components/segmented/segmented.patch.less index 5349f2e505..f86575065e 100644 --- a/src/components/segmented/segmented.patch.less +++ b/src/components/segmented/segmented.patch.less @@ -1,64 +1,17 @@ @class-prefix-segmented: ~'adm-segmented'; .@{class-prefix-segmented} { - display: inline-block; - padding: 2px; color: #666; background-color: #f5f5f5; - border-radius: 2px; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - &-group { - position: relative; - display: flex; - align-items: stretch; - justify-items: flex-start; - width: 100%; - } - - // block styles - &&-block { - display: flex; - } - - &&-block &-item { - flex: 1; - min-width: 0; - } - - // item styles &-item { - position: relative; - text-align: center; - cursor: pointer; transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); &-selected { .segmented-item-selected(); color: #333; } - - &-label { - min-height: 10px; - padding: 0 11px; - line-height: 28px; - .segmented-text-ellipsis(); - } - - // syntactic sugar to add `icon` for Segmented Item - &-icon + * { - margin-left: 6px; - } - - &-input { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - opacity: 0; - pointer-events: none; - } } // disabled styles @@ -69,13 +22,6 @@ // thumb styles &-thumb { .segmented-item-selected(); - - position: absolute; - top: 0; - left: 0; - width: 0; - height: 100%; - padding: 4px 0; } // transition effect when `appear-active` @@ -83,30 +29,20 @@ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - will-change: transform, width; } } /* ---- mixins part starts ---- */ .segmented-disabled-item { color: #999; - cursor: not-allowed; } .segmented-item-selected { background-color: #fff; - border-radius: 2px; box-shadow: 0 2px 8px -2px fade(#000, 5%), 0 1px 4px -1px fade(#000, 7%), 0 0 1px 0 fade(#000, 8%); } -.segmented-text-ellipsis { - overflow: hidden; - // handle text ellipsis - white-space: nowrap; - text-overflow: ellipsis; - word-break: keep-all; -} /* ---- mixins part ends ---- */