web: common: Split CSS areas

This commit is contained in:
Alexey Safronov 2020-01-09 16:36:57 +03:00
parent 63c648a127
commit a73e149c0a
2 changed files with 22 additions and 22 deletions

View File

@ -368,7 +368,7 @@ const Selector = props => {
}
return (
<div style={style} className="row-block" {...tooltipProps}>
<div style={style} className="row-option" {...tooltipProps}>
{content}
</div>
);
@ -466,7 +466,7 @@ const Selector = props => {
return (
<div
style={style}
className={`row-block${isSelected ? " selected" : ""}`}
className={`row-group${isSelected ? " selected" : ""}`}
>
{isMultiSelect && allowGroupSelection && (
<Checkbox
@ -608,7 +608,7 @@ const Selector = props => {
</AutoSizer>
{!hasNextPage && itemCount === 0 && (
<div className="row-block">
<div className="row-option">
<Text>
{!searchValue ? emptyOptionsLabel : emptySearchOptionsLabel}
</Text>

View File

@ -49,12 +49,26 @@ const dropdownStyles = css`
margin-left: -8px;
/* background-color: white; */
.row-block {
.row-group {
box-sizing: border-box;
height: 32px;
cursor: pointer;
padding-top: 8px;
padding-left: 8px;
.group_checkbox {
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;
/* background-color: white; */
.row-block {
.row-option {
padding-left: 8px;
padding-top: 8px;
box-sizing: border-box;
height: 32px;
cursor: pointer;
.option-info {
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 {
grid-area: footer;
}