added hover effects for RoomType ListItem and DropdownButton components
This commit is contained in:
parent
9af68dbd94
commit
99b7339a83
@ -98,10 +98,21 @@ const StyledRoomType = styled.div`
|
||||
const StyledListItem = styled(StyledRoomType)`
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.background};
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.hoverBackground};
|
||||
}
|
||||
|
||||
border: 1px solid
|
||||
${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
|
||||
border-radius: 6px;
|
||||
|
||||
&:active {
|
||||
border-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.activeBorderColor};
|
||||
}
|
||||
|
||||
.choose_room-description {
|
||||
color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
|
||||
@ -112,6 +123,17 @@ const StyledDropdownButton = styled(StyledRoomType)`
|
||||
border-radius: 6px;
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.dropdownButton.background};
|
||||
|
||||
${({ isOpen }) =>
|
||||
!isOpen &&
|
||||
css`
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.roomType.dropdownButton
|
||||
.hoverBackground};
|
||||
}
|
||||
`}
|
||||
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.isOpen
|
||||
|
@ -2467,11 +2467,14 @@ export const getBaseTheme = () => {
|
||||
roomType: {
|
||||
listItem: {
|
||||
background: "none",
|
||||
hoverBackground: "#F8F9F9",
|
||||
borderColor: "#ECEEF1",
|
||||
activeBorderColor: "#5299E0",
|
||||
descriptionText: "#A3A9AE",
|
||||
},
|
||||
dropdownButton: {
|
||||
background: "none",
|
||||
hoverBackground: "#f3f4f4",
|
||||
borderColor: "#ECEEF1",
|
||||
isOpenBorderColor: "#2DA7DB",
|
||||
descriptionText: "#A3A9AE",
|
||||
|
Loading…
Reference in New Issue
Block a user