feat: Select Reskinning (#16173)
* update checkbox * fix margin in checkbox * fix color bug * fix border radius * fixes * remove unused imports * bug fixes * ui fixes * code review feedback fixes * css updates for toggle * fix bg bug in checkbox * fix disabled checkbox style * update styles for radio and switch * update label align * add hover interaction for switch * add wds css variables * add error state * add error state * fix css variable * fix css * fix checkbox group column height * move checkbox icons to assets * update input * fix input * fix input * fix input fix * fix disalbed icon color * empty commit to deploy again * address review feedbacks * fix font in dropdown * fix colors * fix search icon alignment * fix space in right cross icon * fix colors and label alignment * fix margin top in tooltip * replace red color with css variable * Json form field spec fix * wip * fix select styles * fix select styles * fix select styles * fix css * update focus color * fix error state * fix hover state Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
This commit is contained in:
Pawan Kumar
GitHub
parent
f2c6e1ed61
commit
8884345aee
|
|
@ -1,11 +1,16 @@
|
|||
:root {
|
||||
--wds-color-border: #E0DEDE;
|
||||
--wds-color-border-light: #FDDDDD;
|
||||
--wds-color-border-hover: #B3B3B3;
|
||||
--wds-color-border-disabled: #E0DEDE;
|
||||
--wds-color-border-danger: #D91921;
|
||||
--wds-color-border-danger-hover: #B90707;
|
||||
--wds-color-border-danger-focus-light: #EDDDDD;
|
||||
|
||||
--wds-color-bg: #FFFFFF;
|
||||
--wds-color-bg-hover: #EBEBEB;
|
||||
--wds-color-bg-focus: #e3e3e3;
|
||||
--wds-color-bg-light: #EBEBEB;
|
||||
--wds-color-bg-strong: #E0DEDE;
|
||||
--wds-color-bg-strong-hover: #B3B3B3;
|
||||
--wds-color-bg-disabled: #F3F3F3;
|
||||
|
|
@ -22,3 +27,4 @@
|
|||
--wds-color-text-disabled: #A9A7A7;
|
||||
--wds-color-text-disabled-light: #CAC7C7;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
multiSelectInputContainerStyles,
|
||||
} from "design-system";
|
||||
import { lightenColor } from "widgets/WidgetUtils";
|
||||
import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg";
|
||||
|
||||
export const StyledIcon = styled(Icon)<{ expanded: boolean }>`
|
||||
transform: rotate(${({ expanded }) => (expanded ? 0 : 270)}deg);
|
||||
|
|
@ -392,7 +393,7 @@ border: 1px solid #E8E8E8;
|
|||
|
||||
.rc-tree-select-tree-checkbox {
|
||||
box-sizing: border-box;
|
||||
margin: 0 2px 0 9px;
|
||||
margin: 0 0px 0 9px;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -405,7 +406,9 @@ border: 1px solid #E8E8E8;
|
|||
.rc-tree-select-tree-checkbox-checked .rc-tree-select-tree-checkbox-inner {
|
||||
border: none !important;
|
||||
background-color: ${({ accentColor }) => accentColor};
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' fill='transparent' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A");
|
||||
background-image: url(${CheckIcon}) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
}
|
||||
|
||||
.rc-tree-select-tree-checkbox-inner {
|
||||
|
|
@ -419,7 +422,7 @@ border: 1px solid #E8E8E8;
|
|||
border: 1px solid ${Colors.GREY_3};
|
||||
border-radius: 0px;
|
||||
border-collapse: separate;
|
||||
transition: all .1s;
|
||||
transition: none;
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
}
|
||||
.rc-tree-select-tree
|
||||
|
|
@ -443,7 +446,7 @@ border: 1px solid #E8E8E8;
|
|||
display: inline-block;
|
||||
width: 0px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
margin-right: 0px;
|
||||
line-height: 16px;
|
||||
vertical-align: -0.125em;
|
||||
background-color: transparent;
|
||||
|
|
@ -468,7 +471,7 @@ border: 1px solid #E8E8E8;
|
|||
.rc-tree-select-tree
|
||||
.rc-tree-select-tree-treenode
|
||||
span.rc-tree-select-tree-icon_loading {
|
||||
margin-right: 2px;
|
||||
margin-right: 0px;
|
||||
vertical-align: top;
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -526,34 +529,43 @@ border: 1px solid #E8E8E8;
|
|||
cursor: not-allowed;
|
||||
}
|
||||
.rc-tree-select-tree-treenode-active {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
background: var(--wds-color-bg-focus) !important;
|
||||
|
||||
:not(.rc-tree-select-tree-treenode-checkbox-checked) .rc-tree-select-tree-checkbox-inner {
|
||||
background: transparent;
|
||||
border-color: var(--wds-color-border-hover);
|
||||
}
|
||||
}
|
||||
.rc-tree-select-tree-treenode:hover {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
&.rc-tree-select-tree-treenode-checkbox-checked {
|
||||
background: ${({ accentColor }) =>
|
||||
lightenColor(accentColor, "0.90")} !important;
|
||||
}
|
||||
background: var(--wds-color-bg-hover);
|
||||
.rc-tree-select-tree-title {
|
||||
color: ${Colors.GREY_9};
|
||||
color: var(--wds-color-text);
|
||||
}
|
||||
.rc-tree-select-tree-checkbox-indeterminate .rc-tree-select-tree-checkbox-inner {
|
||||
background-color: ${({ accentColor }) => accentColor} !important;
|
||||
}
|
||||
:not(.rc-tree-select-tree-treenode-checkbox-checked) .rc-tree-select-tree-checkbox-inner {
|
||||
background-color: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
border-color: ${({ accentColor }) => accentColor};
|
||||
background: transparent;
|
||||
border-color: var(--wds-color-border-hover);
|
||||
}
|
||||
}
|
||||
.rc-tree-select-tree-treenode-checkbox-checked {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
.rc-tree-select-tree-title {
|
||||
color: ${Colors.GREY_10};
|
||||
color: var(--wds-color-text);
|
||||
}
|
||||
}
|
||||
.rc-tree-select-tree-icon__open {
|
||||
margin-right: 2px;
|
||||
margin-right: 0px;
|
||||
vertical-align: top;
|
||||
background-position: -110px -16px;
|
||||
}
|
||||
.rc-tree-select-tree-icon__close {
|
||||
margin-right: 2px;
|
||||
margin-right: 0px;
|
||||
vertical-align: top;
|
||||
background-position: -110px 0;
|
||||
}
|
||||
|
|
@ -563,14 +575,14 @@ border: 1px solid #E8E8E8;
|
|||
background-position: -110px -32px;
|
||||
}
|
||||
.rc-tree-select-tree-icon__customize {
|
||||
margin-right: 2px;
|
||||
margin-right: 0px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rc-tree-select-tree-title {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-size: 14px !important;
|
||||
color: ${Colors.GREY_8};
|
||||
color: var(--wds-color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -627,11 +639,12 @@ export const TreeSelectContainer = styled.div<{
|
|||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: ${Colors.GREY_6};
|
||||
color: var(--wds-color-text-light);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.rc-tree-select-selection-search-input {
|
||||
appearance: none;
|
||||
|
|
@ -649,13 +662,23 @@ export const TreeSelectContainer = styled.div<{
|
|||
cursor: not-allowed;
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
background-color: ${Colors.GREY_1} !important;
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
}
|
||||
.rc-tree-select-selector {
|
||||
border: 1.2px solid ${Colors.GREY_3} !important;
|
||||
background-color: ${Colors.GREY_1} !important;
|
||||
border: 1px solid var(--wds-color-border-disabled) !important;
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
.rc-tree-select-selection-item-content {
|
||||
color: ${Colors.GREY_7};
|
||||
color: var(--wds-color-text-disabled);
|
||||
}
|
||||
}
|
||||
.rc-tree-select-selection-placeholder {
|
||||
color: var(--wds-color-text-disabled-light);
|
||||
}
|
||||
.rc-tree-select-arrow .dropdown-icon
|
||||
svg {
|
||||
path {
|
||||
fill: var(--wds-color-icon-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -678,7 +701,7 @@ export const TreeSelectContainer = styled.div<{
|
|||
.rc-tree-select-single {
|
||||
&:hover {
|
||||
.rc-tree-select-selector {
|
||||
border: 1.2px solid ${Colors.GREY_5};
|
||||
border: 1px solid var(--wds-color-border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -689,12 +712,11 @@ export const TreeSelectContainer = styled.div<{
|
|||
background: ${Colors.WHITE};
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
border: 1px solid rgb(231, 231, 231);
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
border: 1px solid var(--wds-color-border);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
background-color: white;
|
||||
background-color: var(--wds-color-bg);
|
||||
height: 100%;
|
||||
.rc-tree-select-selection-search {
|
||||
width: 100%;
|
||||
|
|
@ -733,18 +755,18 @@ export const TreeSelectContainer = styled.div<{
|
|||
.rc-tree-select-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
.rc-tree-select-selection-item {
|
||||
background: none;
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
border-radius: 360px;
|
||||
border: 1px solid var(--wds-color-border);
|
||||
border-radius:${({ borderRadius }) => borderRadius};
|
||||
max-width: 273.926px;
|
||||
height: 20px;
|
||||
color: ${Colors.GREY_10};
|
||||
color: var(--wds-color-text);
|
||||
overflow-wrap: break-word;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -842,6 +864,8 @@ export const TreeSelectContainer = styled.div<{
|
|||
.rc-tree-select-clear-icon {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -850,7 +874,7 @@ export const TreeSelectContainer = styled.div<{
|
|||
.rc-tree-select-selector {
|
||||
padding-right: ${({ allowClear }) => (allowClear ? "40px" : "20px")};
|
||||
padding-left: 10px;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
height: inherit;
|
||||
|
|
@ -858,10 +882,16 @@ export const TreeSelectContainer = styled.div<{
|
|||
line-height: 30px;
|
||||
transition: none;
|
||||
border: 1px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border)"
|
||||
: "var(--wds-color-border-danger)"};
|
||||
&:hover {
|
||||
border: 1px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border-hover)"
|
||||
: "var(--wds-color-border-danger-hover)"};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -884,9 +914,16 @@ export const TreeSelectContainer = styled.div<{
|
|||
|
||||
& .clear-icon {
|
||||
width: 16px;
|
||||
margin-right: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: var(--wds-color-icon);
|
||||
|
||||
path {
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -905,8 +942,11 @@ export const TreeSelectContainer = styled.div<{
|
|||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
path {
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
fill: ${Colors.SLATE_GRAY};
|
||||
}
|
||||
.rc-tree-select-arrow-icon {
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
multiSelectInputContainerStyles,
|
||||
} from "design-system";
|
||||
import { lightenColor } from "widgets/WidgetUtils";
|
||||
import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg";
|
||||
|
||||
const Input = styled.input`
|
||||
height: 0;
|
||||
|
|
@ -31,10 +32,9 @@ export const CommonSelectFilterStyle = css<{
|
|||
padding-left: 42px;
|
||||
margin-bottom: 0;
|
||||
.${Classes.CONTROL_INDICATOR} {
|
||||
margin-right: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.all-options.selected {
|
||||
background: ${(props) => lightenColor(props.accentColor)};
|
||||
color: ${Colors.GREY_10} !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,33 +44,37 @@ export const CommonSelectFilterStyle = css<{
|
|||
box-shadow: none;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: ${Colors.GREY_3};
|
||||
border-color: var(--wds-color-border);
|
||||
border-radius: 0px;
|
||||
&::before {
|
||||
width: auto;
|
||||
height: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .${Classes.INPUT} {
|
||||
height: 32px !important;
|
||||
padding-left: 29px !important;
|
||||
height: 30px !important;
|
||||
padding-left: 34px !important;
|
||||
font-size: 14px;
|
||||
color: ${Colors.GREY_10};
|
||||
color: var(--wds-color-text);
|
||||
box-shadow: 0px 0px 0px 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .${Classes.INPUT}::placeholder {
|
||||
color: var(--wds-color-text-light);
|
||||
}
|
||||
|
||||
& .${Classes.INPUT_GROUP} {
|
||||
margin: 12px 12px 8px 12px;
|
||||
position: relative;
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
border: 1px solid var(--wds-color-border);
|
||||
border-radius: ${({ borderRadius }) =>
|
||||
borderRadius === "1.5rem" ? `0.375rem` : borderRadius};
|
||||
overflow: hidden;
|
||||
&:focus-within {
|
||||
border: 1px solid ${(props) => props.accentColor};
|
||||
box-shadow: 0px 0px 0px 3px ${(props) => lightenColor(props.accentColor)};
|
||||
box-shadow: 0px 0px 0px 2px ${(props) => lightenColor(props.accentColor)};
|
||||
}
|
||||
|
||||
& > .${Classes.ICON} {
|
||||
|
|
@ -78,8 +82,8 @@ export const CommonSelectFilterStyle = css<{
|
|||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: 9px;
|
||||
color: ${Colors.GREY_7};
|
||||
margin: 8px 10px;
|
||||
color: var(--wds-color-icon);
|
||||
|
||||
& > svg {
|
||||
width: 14px;
|
||||
|
|
@ -127,6 +131,10 @@ const Indicator = styled.div`
|
|||
&::disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 100% !important;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function MenuItemCheckBox({ checked }: { checked: boolean }) {
|
||||
|
|
@ -189,7 +197,7 @@ ${({ dropDownWidth, id }) => `
|
|||
|
||||
.rc-select-item-option-state {
|
||||
pointer-events: all;
|
||||
margin-right: 10px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.rc-select-item-option-grouped {
|
||||
|
|
@ -201,23 +209,31 @@ ${({ dropDownWidth, id }) => `
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: ${Colors.GREY_8};
|
||||
color: var(--wds-color-text);
|
||||
font-weight: 400;
|
||||
}
|
||||
.rc-select-item-option:hover {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
.rc-select-item-option-active {
|
||||
background: var(--wds-color-bg-focus) !important;
|
||||
color: var(--wds-color-text);
|
||||
|
||||
& .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
}
|
||||
.rc-select-item-option:hover {
|
||||
background: var(--wds-color-bg-hover);
|
||||
|
||||
& .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
|
||||
& .rc-select-item-option-content {
|
||||
color: ${Colors.GREY_9};
|
||||
color: var(--wds-color-text);
|
||||
}
|
||||
}
|
||||
.rc-select-item-option-selected {
|
||||
& .rc-select-item-option-content {
|
||||
color: ${Colors.GREY_10};
|
||||
color: var(--wds-color-text);
|
||||
}
|
||||
}
|
||||
.rc-select-item-option-disabled {
|
||||
|
|
@ -318,11 +334,10 @@ ${({ dropDownWidth, id }) => `
|
|||
padding-left: 42px;
|
||||
margin-bottom: 0;
|
||||
.${Classes.CONTROL_INDICATOR} {
|
||||
margin-right: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
&.all-options.selected {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
color: ${Colors.GREY_10} !important;
|
||||
color: var(--wds-color-text) !important;
|
||||
}
|
||||
}
|
||||
&&&& .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
|
||||
|
|
@ -344,6 +359,12 @@ ${({ dropDownWidth, id }) => `
|
|||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
|
||||
&::before {
|
||||
background-image: url(${CheckIcon}) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
}
|
||||
}
|
||||
${CommonSelectFilterStyle}
|
||||
.rc-select-item {
|
||||
|
|
@ -397,12 +418,12 @@ export const MultiSelectContainer = styled.div<{
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
left: 19px;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: ${Colors.GREY_6};
|
||||
color: var(--wds-color-text-light);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
|
|
@ -426,13 +447,23 @@ export const MultiSelectContainer = styled.div<{
|
|||
cursor: not-allowed;
|
||||
}
|
||||
& .rc-select-selector {
|
||||
background-color: ${Colors.GREY_1} !important;
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
border: 1px solid var(--wds-color-border-disabled) !important;
|
||||
|
||||
.rc-select-selection-item {
|
||||
border-color: var(--wds-color-border-disabled);
|
||||
}
|
||||
.rc-select-selection-item-content {
|
||||
color: ${Colors.GREY_7};
|
||||
color: var(--wds-color-text-disabled) !important;
|
||||
}
|
||||
}
|
||||
& .rc-select-arrow {
|
||||
|
||||
& .rc-select-selection-placeholder {
|
||||
color: var(--wds-color-text-disabled-light);
|
||||
}
|
||||
|
||||
& .rc-select-arrow svg path {
|
||||
fill: var(--wds-color-icon-disabled);
|
||||
}
|
||||
}
|
||||
.rc-select-show-arrow.rc-select-loading {
|
||||
|
|
@ -457,7 +488,7 @@ export const MultiSelectContainer = styled.div<{
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1px;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${({ borderRadius }) => borderRadius} !important;
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
width: 100%;
|
||||
|
|
@ -467,7 +498,7 @@ export const MultiSelectContainer = styled.div<{
|
|||
.rc-select-selection-item {
|
||||
background: none;
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
border-radius: 360px;
|
||||
border-radius: ${({ borderRadius }) => borderRadius} !important;
|
||||
max-width: 273.926px;
|
||||
height: 20px;
|
||||
color: ${Colors.GREY_10};
|
||||
|
|
@ -569,17 +600,23 @@ export const MultiSelectContainer = styled.div<{
|
|||
.rc-select-selector {
|
||||
padding-right: 36px;
|
||||
padding-left: 10px;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
border: 1px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border)"
|
||||
: "var(--wds-color-border-danger)"};
|
||||
&:hover {
|
||||
border: 1px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border-hover)"
|
||||
: "var(--wds-color-border-danger-hover)"};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -594,11 +631,16 @@ export const MultiSelectContainer = styled.div<{
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: ${Colors.SLATE_GRAY};
|
||||
fill: var(--wds-color-icon);
|
||||
|
||||
& svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--wds-color-icon);
|
||||
|
||||
path {
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -610,10 +652,10 @@ export const MultiSelectContainer = styled.div<{
|
|||
props.isValid
|
||||
? `
|
||||
border: 1px solid ${props.accentColor};
|
||||
box-shadow: 0px 0px 0px 3px ${lightenColor(
|
||||
box-shadow: 0px 0px 0px 2px ${lightenColor(
|
||||
props.accentColor,
|
||||
)} !important;`
|
||||
: `border: 1px solid ${Colors.DANGER_SOLID};`}
|
||||
: `border: 1px solid var(--wds-color-border-danger); box-shadow: 0px 0px 0px 2px var(--wds-color-border-danger-focus-light) !important;`}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -626,12 +668,25 @@ export const StyledCheckbox = styled(Checkbox)<{
|
|||
text-overflow: ellipsis;
|
||||
height: 38px;
|
||||
padding-bottom: 0 !important;
|
||||
color: ${Colors.GREY_8} !important;
|
||||
color: var(--wds-color-text) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px !important;
|
||||
& .${Classes.CONTROL_INDICATOR} {
|
||||
margin: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background: ${Colors.GREEN_SOLID_LIGHT_HOVER};
|
||||
color: ${Colors.GREY_9} !important;
|
||||
background: var(--wds-color-bg-hover);
|
||||
color: var(--wds-color-text) !important;
|
||||
|
||||
& .${Classes.CONTROL_INDICATOR} {
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& input:checked ~ .${Classes.CONTROL_INDICATOR} {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export const StyledDiv = styled.div`
|
|||
export const StyledControlGroup = styled(ControlGroup)<{
|
||||
compactMode: boolean;
|
||||
labelPosition?: LabelPosition;
|
||||
isDisabled?: boolean;
|
||||
}>`
|
||||
&&& > {
|
||||
span {
|
||||
|
|
@ -34,14 +35,34 @@ export const StyledControlGroup = styled(ControlGroup)<{
|
|||
svg {
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
fill: var(--wds-color-icon);
|
||||
|
||||
path {
|
||||
fill: ${({ isDisabled }) =>
|
||||
isDisabled
|
||||
? "var(--wds-color-icon-disabled)"
|
||||
: "var(--wds-color-icon)"};
|
||||
stroke: ${({ isDisabled }) =>
|
||||
isDisabled
|
||||
? "var(--wds-color-icon-disabled)"
|
||||
: "var(--wds-color-icon)"} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-icon {
|
||||
width: 20px;
|
||||
|
||||
svg {
|
||||
fill: var(--wds-color-icon);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
path {
|
||||
fill: ${({ isDisabled }) =>
|
||||
isDisabled
|
||||
? "var(--wds-color-icon-disabled)"
|
||||
: "var(--wds-color-icon)"};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,24 +102,24 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
|
|||
box-shadow: ${(props) => props.boxShadow} !important;
|
||||
border: 1px solid;
|
||||
border-color: ${(props) =>
|
||||
props.hasError ? Colors.DANGER_SOLID : Colors.GREY_3};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? `
|
||||
&:hover {
|
||||
border-color: ${Colors.GREY_5};
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color:
|
||||
${props.hasError ? Colors.DANGER_SOLID : props.accentColor};
|
||||
box-shadow:
|
||||
${`0px 0px 0px 3px ${lightenColor(
|
||||
props.hasError ? Colors.DANGER_SOLID : props.accentColor,
|
||||
)} !important;`};
|
||||
}
|
||||
`
|
||||
: ""};
|
||||
props.hasError
|
||||
? "var(--wds-color-border-danger)"
|
||||
: "var(--wds-color-border)"};
|
||||
&:hover {
|
||||
border-color: ${(props) =>
|
||||
props.hasError
|
||||
? "var(--wds-color-border-danger-hover)"
|
||||
: "var(--wds-color-border-hover)"};
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: ${(props) =>
|
||||
props.hasError ? "var(--wds-color-border-danger)" : props.accentColor};
|
||||
box-shadow: ${(props) =>
|
||||
`0px 0px 0px 2px ${lightenColor(
|
||||
props.hasError ? Colors.DANGER_SOLID : props.accentColor,
|
||||
)} !important;`};
|
||||
}
|
||||
}
|
||||
|
||||
&&&&& .${Classes.POPOVER_OPEN} .${Classes.BUTTON} {
|
||||
|
|
@ -107,19 +128,22 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
|
|||
!props.hasError
|
||||
? `
|
||||
border-color: ${
|
||||
props.hasError ? Colors.DANGER_SOLID : props.accentColor
|
||||
props.hasError ? "var(--wds-color-border-danger)" : props.accentColor
|
||||
};
|
||||
box-shadow: ${`0px 0px 0px 3px ${lightenColor(
|
||||
box-shadow: ${`0px 0px 0px 2px ${lightenColor(
|
||||
props.hasError ? Colors.DANGER_SOLID : props.accentColor,
|
||||
)} !important;`};
|
||||
`
|
||||
: `border: 1px solid ${Colors.DANGER_SOLID};`}
|
||||
: `border: 1px solid var(--wds-color-border-danger);`}
|
||||
}
|
||||
&&&&& .${Classes.DISABLED} {
|
||||
background-color: ${Colors.GREY_1};
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
background-color: var(--wds-color-bg-disabled);
|
||||
border: 1px solid var(--wds-color-border-disabled);
|
||||
.${Classes.BUTTON_TEXT} {
|
||||
color: ${Colors.GREY_7};
|
||||
color: ${(props) =>
|
||||
!isEmptyOrNill(props.value)
|
||||
? "var(--wds-color-text-disabled)"
|
||||
: "var(--wds-color-text-disabled-light)"};
|
||||
}
|
||||
}
|
||||
.${Classes.BUTTON_TEXT} {
|
||||
|
|
@ -131,12 +155,14 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
color: ${(props) =>
|
||||
!isEmptyOrNill(props.value) ? Colors.GREY_10 : Colors.GREY_6};
|
||||
!isEmptyOrNill(props.value)
|
||||
? "var(--wds-color-text)"
|
||||
: "var(--wds-color-text-light)"};
|
||||
}
|
||||
&& {
|
||||
.${Classes.ICON} {
|
||||
width: fit-content;
|
||||
color: ${Colors.SLATE_GRAY};
|
||||
color: var(--wds-color-icon-disabled);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -155,7 +181,7 @@ ${({ dropDownWidth, id }) => `
|
|||
.select-popover-wrapper {
|
||||
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
|
||||
border-radius: ${({ borderRadius }) =>
|
||||
borderRadius === "1.5rem" ? `0.375rem` : borderRadius} !important;
|
||||
`min(${borderRadius}, 0.375rem) !important`};
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
${CommonSelectFilterStyle}
|
||||
|
|
@ -171,10 +197,10 @@ ${({ dropDownWidth, id }) => `
|
|||
border-radius: 0;
|
||||
color: ${Colors.GREY_8};
|
||||
&:hover{
|
||||
background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
|
||||
background: var(--wds-color-bg-hover);
|
||||
}
|
||||
&.is-focused{
|
||||
background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
|
||||
background: var(--wds-color-bg-focus);
|
||||
}
|
||||
&.${Classes.ACTIVE} {
|
||||
background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
|
||||
|
|
@ -209,7 +235,6 @@ export const MenuItem = styled.div<{
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
border-radius: 2px;
|
||||
color: inherit;
|
||||
line-height: 20px;
|
||||
padding: 5px 7px;
|
||||
|
|
@ -220,24 +245,35 @@ export const MenuItem = styled.div<{
|
|||
|
||||
min-height: 38px;
|
||||
padding: 9px 12px;
|
||||
color: ${Colors.DOVE_GRAY2};
|
||||
color: var(--wds-color-text);
|
||||
outline: none !important;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
color: ${Colors.GREY_10};
|
||||
background-color: var(--wds-color-bg-hover);
|
||||
color: var(--wds-color-text);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
& .menu-item-active {
|
||||
background-color: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
background-color: ${({ accentColor }) =>
|
||||
lightenColor(accentColor)} !important;
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ accentColor }) =>
|
||||
lightenColor(accentColor, "0.90")} !important;
|
||||
}
|
||||
}
|
||||
|
||||
&& .has-focus {
|
||||
color: var(--wds-color-text);
|
||||
background-color: var(--wds-color-bg-focus) !important;
|
||||
}
|
||||
|
||||
&& .has-focus.menu-item-active {
|
||||
background-color: ${({ accentColor }) =>
|
||||
lightenColor(accentColor)} !important;
|
||||
lightenColor(accentColor, "0.90")} !important;
|
||||
}
|
||||
|
||||
& .menu-item-text {
|
||||
|
|
|
|||
|
|
@ -318,6 +318,7 @@ class SelectComponent extends React.Component<
|
|||
<StyledControlGroup
|
||||
compactMode={compactMode}
|
||||
fill
|
||||
isDisabled={disabled}
|
||||
labelPosition={labelPosition}
|
||||
>
|
||||
<StyledSingleDropDown
|
||||
|
|
|
|||
|
|
@ -192,10 +192,10 @@ ${({ dropDownWidth, id }) => `
|
|||
height: 14px;
|
||||
direction: ltr;
|
||||
background-color: transparent;
|
||||
border: 1px solid ${Colors.GREY_3};
|
||||
border: 1px solid var(--wds-color-border);
|
||||
border-radius: 100%;
|
||||
border-collapse: separate;
|
||||
transition: all .3s;
|
||||
transition: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -404,7 +404,7 @@ ${({ dropDownWidth, id }) => `
|
|||
|
||||
|
||||
.rc-tree-select-tree-checkbox-wrapper:hover .rc-tree-select-tree-checkbox-inner, .rc-tree-select-tree-checkbox:hover .rc-tree-select-tree-checkbox-inner, .rc-tree-select-tree-checkbox-input:focus+.rc-tree-select-tree-checkbox-inner {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
.rc-tree-select-tree-checkbox-checked .rc-tree-select-tree-checkbox-inner {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;
|
||||
|
|
@ -527,16 +527,29 @@ ${({ dropDownWidth, id }) => `
|
|||
color: #767676;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rc-tree-select-tree-treenode-active,
|
||||
.rc-tree-select-tree-treenode-selected
|
||||
{
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
|
||||
&:hover {
|
||||
background: ${({ accentColor }) =>
|
||||
lightenColor(accentColor, "0.90")} !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.rc-tree-select-tree-treenode-selected.rc-tree-select-tree-treenode-active {
|
||||
background: ${({ accentColor }) =>
|
||||
lightenColor(accentColor, "0.90")} !important;
|
||||
}
|
||||
.rc-tree-select-tree-treenode-active {
|
||||
background: var(--wds-color-bg-focus) !important;
|
||||
}
|
||||
.rc-tree-select-tree-treenode:hover {
|
||||
background: ${({ accentColor }) => lightenColor(accentColor)};
|
||||
background: var(--wds-color-bg-hover);
|
||||
|
||||
.rc-tree-select-tree-iconEle {
|
||||
border-color: ${({ accentColor }) => accentColor} !important;;
|
||||
border-color: var(--wds-color-border-hover) !important;
|
||||
}
|
||||
}
|
||||
.rc-tree-select-tree-node-selected {
|
||||
|
|
@ -545,7 +558,7 @@ ${({ dropDownWidth, id }) => `
|
|||
opacity: 1;
|
||||
|
||||
.rc-tree-select-tree-title {
|
||||
color: ${Colors.GREY_10};
|
||||
color: var(--wds-color-text);
|
||||
}
|
||||
|
||||
.rc-tree-select-tree-icon__customize {
|
||||
|
|
@ -582,7 +595,7 @@ ${({ dropDownWidth, id }) => `
|
|||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-size: 14px !important;
|
||||
color: ${Colors.GREY_8};
|
||||
color: var(--wds-color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -636,7 +649,7 @@ export const TreeSelectContainer = styled.div<{
|
|||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: ${Colors.GREY_6};
|
||||
color: var(--wds-color-text-light);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
|
|
@ -658,18 +671,28 @@ export const TreeSelectContainer = styled.div<{
|
|||
cursor: not-allowed;
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
background-color: ${Colors.GREY_1} !important;
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
}
|
||||
.rc-tree-select-selector {
|
||||
border: 1.2px solid ${Colors.GREY_3} !important;
|
||||
background-color: ${Colors.GREY_1} !important;
|
||||
border: 1px solid var(--wds-color-border-disabled) !important;
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
|
||||
.rc-tree-select-selection-search input {
|
||||
background-color: ${Colors.GREY_1}; // color fix for mozilla
|
||||
background-color: var(--wds-color-bg-disabled) // color fix for mozilla
|
||||
}
|
||||
.rc-tree-select-selection-item {
|
||||
color: ${Colors.GREY_7};
|
||||
background-color: ${Colors.GREY_1};
|
||||
color: var(--wds-color-text-disabled);
|
||||
background-color: var(--wds-color-bg-disabled) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-tree-select-selection-placeholder {
|
||||
color: var(--wds-color-text-disabled-light);
|
||||
}
|
||||
|
||||
& .dropdown-icon {
|
||||
svg path {
|
||||
fill: var(--wds-color-icon-disabled) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -693,7 +716,10 @@ export const TreeSelectContainer = styled.div<{
|
|||
&:hover {
|
||||
.rc-tree-select-selector {
|
||||
border: 1.2px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border-hover)"
|
||||
: "var(--wds-color-border-danger-hover)"};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -702,9 +728,12 @@ export const TreeSelectContainer = styled.div<{
|
|||
flex-wrap: wrap;
|
||||
padding-right: 42px;
|
||||
border: 1px solid
|
||||
${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
|
||||
${(props) =>
|
||||
props.isValid
|
||||
? "var(--wds-color-border)"
|
||||
: "var(--wds-color-border-danger)"};
|
||||
box-sizing: border-box;
|
||||
background: ${Colors.WHITE};
|
||||
background: var(--wds-color-bg);
|
||||
border-radius: ${({ borderRadius }) => borderRadius};
|
||||
box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
|
||||
overflow: hidden;
|
||||
|
|
@ -891,9 +920,17 @@ export const TreeSelectContainer = styled.div<{
|
|||
|
||||
& .clear-icon {
|
||||
width: 16px;
|
||||
margin-right: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
fill: var(--wds-color-icon);
|
||||
|
||||
path {
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -912,8 +949,11 @@ export const TreeSelectContainer = styled.div<{
|
|||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
path {
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
fill: ${Colors.SLATE_GRAY};
|
||||
fill: var(--wds-color-icon);
|
||||
}
|
||||
}
|
||||
.rc-tree-select-arrow-icon {
|
||||
|
|
|
|||
|
|
@ -234,10 +234,10 @@ export const getComplementaryGrayscaleColor = (color = "#fff") => {
|
|||
* @param borderRadius
|
||||
* @returns
|
||||
*/
|
||||
export const lightenColor = (color = "#fff") => {
|
||||
export const lightenColor = (color = "#fff", amount = "0.93") => {
|
||||
const { h, s } = tinycolor(color).toHsl();
|
||||
|
||||
const newColor = tinycolor(`hsl ${h} ${s} 0.93}`).toHex();
|
||||
const newColor = tinycolor(`hsl ${h} ${s} ${amount}}`).toHex();
|
||||
|
||||
return `#${newColor}`;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user