web: common: Split CSS areas
This commit is contained in:
parent
63c648a127
commit
a73e149c0a
@ -368,7 +368,7 @@ const Selector = props => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={style} className="row-block" {...tooltipProps}>
|
<div style={style} className="row-option" {...tooltipProps}>
|
||||||
{content}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -466,7 +466,7 @@ const Selector = props => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={style}
|
style={style}
|
||||||
className={`row-block${isSelected ? " selected" : ""}`}
|
className={`row-group${isSelected ? " selected" : ""}`}
|
||||||
>
|
>
|
||||||
{isMultiSelect && allowGroupSelection && (
|
{isMultiSelect && allowGroupSelection && (
|
||||||
<Checkbox
|
<Checkbox
|
||||||
@ -608,7 +608,7 @@ const Selector = props => {
|
|||||||
</AutoSizer>
|
</AutoSizer>
|
||||||
|
|
||||||
{!hasNextPage && itemCount === 0 && (
|
{!hasNextPage && itemCount === 0 && (
|
||||||
<div className="row-block">
|
<div className="row-option">
|
||||||
<Text>
|
<Text>
|
||||||
{!searchValue ? emptyOptionsLabel : emptySearchOptionsLabel}
|
{!searchValue ? emptyOptionsLabel : emptySearchOptionsLabel}
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -49,12 +49,26 @@ const dropdownStyles = css`
|
|||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
/* background-color: white; */
|
/* background-color: white; */
|
||||||
|
|
||||||
.row-block {
|
.row-group {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-top: 8px;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
|
||||||
.group_checkbox {
|
.group_checkbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9f9;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-group.selected {
|
||||||
|
background-color: #eceef1;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -154,9 +168,12 @@ const StyledSelector = styled(Container)`
|
|||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
/* background-color: white; */
|
/* background-color: white; */
|
||||||
|
|
||||||
.row-block {
|
.row-option {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.option-info {
|
.option-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -167,23 +184,6 @@ const StyledSelector = styled(Container)`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-block {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 32px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-top: 8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f8f9f9;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-block.selected {
|
|
||||||
background-color: #eceef1;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user