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 ( 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>

View File

@ -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;
} }