You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
1.8 KiB
102 lines
1.8 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { devices } from 'config'
|
|
|
|
import { Checkbox as BaseCheckbox } from 'features/Common'
|
|
import { Label } from 'features/Common/Checkbox/styled'
|
|
import { CheckboxSvg } from 'features/Common/Checkbox/Icon'
|
|
|
|
export const Wrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 56px;
|
|
padding-left: 35px;
|
|
|
|
@media ${devices.mobile} {
|
|
margin-top: 30px;
|
|
padding: 0 12px;
|
|
}
|
|
`
|
|
|
|
const scrollBarStyles = css`
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(196, 196, 196, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-corner {
|
|
border-radius: 3px;
|
|
background: rgba(103, 103, 103, 0.3);
|
|
}
|
|
`
|
|
|
|
export const List = styled.ul`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
height: 264px;
|
|
overflow-y: auto;
|
|
|
|
@media ${devices.mobile} {
|
|
height: 100%;
|
|
margin: 8px 0;
|
|
padding: 0 2px 100px 2px;
|
|
overflow-y: initial;
|
|
flex-direction: column;
|
|
}
|
|
|
|
${scrollBarStyles}
|
|
`
|
|
|
|
export const Item = styled.li`
|
|
width: calc(100% / 3);
|
|
|
|
:not(:last-child) {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
@media ${devices.mobile} {
|
|
width: 100%;
|
|
height: 44px;
|
|
|
|
:not(:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
`
|
|
|
|
export const Checkbox = styled(BaseCheckbox)`
|
|
height: 100%;
|
|
|
|
${Label} {
|
|
color: #ffffff;
|
|
font-weight: normal;
|
|
font-size: 20px;
|
|
line-height: 21px;
|
|
|
|
@media ${devices.mobile} {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
}
|
|
|
|
${CheckboxSvg} {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
@media ${devices.mobile} {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
`
|
|
|