From 28ee0e8f628e525e38280511cedb4481ad192f42 Mon Sep 17 00:00:00 2001 From: Alexey Zinoviev Date: Fri, 27 Oct 2023 09:06:03 +0100 Subject: [PATCH] EZQMS-333: Customizable RadioButton label (#3900) * ezqms-333: update RadioButton structure Signed-off-by: Alexey Zinoviev * ezqms-333: fix formatting Signed-off-by: Alexey Zinoviev * ezqms-333: fix formatting Signed-off-by: Alexey Zinoviev * ezqms-333: fix radio styles Signed-off-by: Alexey Zinoviev --------- Signed-off-by: Alexey Zinoviev --- packages/theme/styles/components.scss | 171 +++++++++++------- packages/ui/src/components/RadioButton.svelte | 14 +- 2 files changed, 113 insertions(+), 72 deletions(-) diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index e7009e7050..ec8a7c653d 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -293,7 +293,7 @@ min-height: 0.75rem; height: 0.75rem; } - } + } } .ac-column__list-item + .ac-column__list-item { margin-top: 0.75rem; @@ -302,7 +302,6 @@ /* Radio Button */ .antiRadio { - position: relative; display: inline-flex; align-items: center; height: min-content; @@ -325,90 +324,130 @@ &.gap-medium { margin-bottom: .5rem; } label { - padding-left: 1.375rem; - font-size: .8125rem; + flex: 1 1 auto; + padding-left: 0.375rem; + font-size: 0.8125rem; color: var(--theme-content-color); + } + + .marker { + flex: 0 0 auto; + position: relative; + width: 1rem; + height: 1rem; + border-radius: 50%; + background-color: var(--theme-button-default); + border: 1px solid var(--theme-divider-color); + + &::before { + position: absolute; + border-radius: 50%; + top: calc(-0.1875rem - 1px); + left: calc(-0.1875rem - 1px); + width: 1.375rem; + height: 1.375rem; + border: 1px solid var(--primary-button-default); + } &::after { position: absolute; - top: .25rem; - left: .25rem; - width: .5rem; - height: .5rem; + top: calc(0.25rem - 1px); + left: calc(0.25rem - 1px); + width: 0.5rem; + height: 0.5rem; background-color: var(--primary-button-color); border-radius: 50%; - opacity: .8; + opacity: 0.8; z-index: 1; } } - &::before, - &::after { - position: absolute; - border-radius: 50%; - } - &::before { - top: -.1875rem; - left: -.1875rem; - width: 1.375rem; - height: 1.375rem; - border: 1px solid var(--primary-button-default); - } - &::after { - content: ''; - top: 0rem; - left: 0rem; - width: 1rem; - height: 1rem; - background-color: var(--theme-button-default); - border: 1px solid var(--theme-divider-color); - } &:not(.disabled, .checked):hover { - &::after { background-color: var(--theme-button-hovered); } - label { color: var(--theme-caption-color); } - } - &.checked:not(.disabled):hover { - &::after { background-color: var(--primary-button-hovered); } + .marker { + background-color: var(--theme-button-hovered); + } + + label { + color: var(--theme-caption-color); + } + } + &.checked:not(.disabled):hover { + .marker { + background-color: var(--primary-button-hovered); + + &::after { + opacity: 1; + } + } + label { color: var(--theme-caption-color); - &::after { opacity: 1; } } } &:focus-within:not(.disabled) { - &::before { content: ''; } - label { color: var(--theme-caption-color); } + .marker { + &::before { + content: ''; + } + } + &.checked { - label::after { opacity: 1; } - &:active::after { background-color: var(--primary-button-pressed); } + &:active { + .marker { + background-color: var(--primary-button-pressed); + } + } + + .marker::after { + opacity: 1; + } + } + + label { + color: var(--theme-caption-color); } } &.checked:not(.disabled) { - &::after { background-color: var(--primary-button-default); } - label::after { content: ''; } + .marker { + background-color: var(--primary-button-default); + + &::after { + content: ''; + } + } } &.disabled { cursor: not-allowed; - &::after { + .marker { background-color: var(--primary-button-disabled); border-color: transparent; } + + &.checked { + marker::after { + content: ''; + opacity: 0.4; + } + } + label { color: var(--theme-darker-color); cursor: not-allowed; } - &.checked label::after { - content: ''; - opacity: .4; - } } &:not(.disabled), - &:not(.disabled) label { cursor: pointer; } + &:not(.disabled) label { + cursor: pointer; + } &:not(.disabled):active { - &::after { background-color: var(--primary-button-pressed); } - label::after { - content: ''; - opacity: 1; + .marker { + background-color: var(--primary-button-pressed); + + &::after { + content: ''; + opacity: 1; + } } } } @@ -425,7 +464,7 @@ &::-webkit-scrollbar-track { margin: 0.25rem; } &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); } - &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); } + &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); } &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); } &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); } &.mask-both { @@ -475,7 +514,7 @@ font-weight: 500; font-size: 0.8125rem; color: var(--theme-dark-color); - + &.disabled { pointer-events: none; } &.selected { @@ -598,7 +637,7 @@ border: 1px dashed var(--theme-divider-color); } } - + &.metaColumn { th, td { @@ -693,7 +732,7 @@ bottom: 0; height: 2.5rem; background-color: var(--theme-table-header-color); - + tr { height: 2.5rem; box-shadow: inset 0 1px 0 0 var(--theme-divider-color); @@ -794,7 +833,7 @@ &.circle { border-radius: 50%; } &.round-2 { border-radius: .5rem; } - + & > .icon { color: var(--dark-color); } &.selected { background-color: var(--button-bg-color); @@ -810,14 +849,14 @@ border-color: var(--button-border-hover); & > .icon { color: var(--caption-color); } } - + .label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; - min-width: 0; + min-width: 0; font-size: .75rem; font-weight: 500; color: var(--accent-color); @@ -845,9 +884,9 @@ border-radius: .375rem; outline: none; z-index: 1; - + .tools { opacity: 0; } - + &.leftPadding { padding-left: 0.625rem; } &::before { position: absolute; @@ -902,7 +941,7 @@ text-overflow: ellipsis; overflow: hidden; user-select: none; - min-width: 0; + min-width: 0; &.selected { color: var(--caption-color); } &.not-selected { color: var(--dark-color); } @@ -961,7 +1000,7 @@ &:not(.shrink) { padding: 1rem 0; } // &.read {} } - + .time { color: var(--theme-halfcontent-color); } .notify { position: absolute; @@ -971,7 +1010,7 @@ width: 0.5rem; background-color: var(--theme-inbox-notify); border-radius: 50%; - + &.people { top: 1.5rem; background-color: var(--theme-inbox-people-notify); @@ -1054,7 +1093,7 @@ } .list-container .category-container .categoryHeader.closed:not(.subLevel) { border-radius: 0 0 0.25rem 0.25rem; - + &::before, &::after { border-radius: 0.25rem; @@ -1075,7 +1114,7 @@ flex-grow: 1; border-radius: 1.625rem; transition: flex-shrink 0.25s cubic-bezier(0.38, 0.01, 0.33, 1) 0s; - + &:hover { flex-shrink: .5; min-width: initial; diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte index 3d8b10ff6f..0d2e62b627 100644 --- a/packages/ui/src/components/RadioButton.svelte +++ b/packages/ui/src/components/RadioButton.svelte @@ -49,12 +49,14 @@ if (!disabled && group !== value) action() }} /> +