margin-right: 0.25rem; | margin-right: 0.25rem; | ||||
margin-top: 0.75rem; | margin-top: 0.75rem; | ||||
margin-bottom: 0.75rem; | margin-bottom: 0.75rem; | ||||
padding: 0.75rem; | |||||
border-radius: 0.25rem; | |||||
padding-left: 0.75rem; | |||||
padding-right: 0.75rem; | |||||
width: 100%; | |||||
box-sizing: border-box; | |||||
padding-top: 0.75rem; | |||||
padding-bottom: 0.75rem; | |||||
font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; | font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; | ||||
font-size: 1rem; | font-size: 1rem; | ||||
line-height: 1.5rem; | line-height: 1.5rem; | ||||
font-weight: 600; | font-weight: 600; | ||||
border-radius: 0.25rem; | |||||
width: 100%; | |||||
box-sizing: border-box; | |||||
border: 1px solid rgb(253,162,155); | border: 1px solid rgb(253,162,155); | ||||
color: rgb(62,67,87); | color: rgb(62,67,87); | ||||
font-weight: 600; | |||||
word-break: break-word; | word-break: break-word; | ||||
background-color: rgb(255,255,255); | background-color: rgb(255,255,255); | ||||
} | } |
const LineFindingStyled = styled(BareButton)<{ selected: boolean }>` | const LineFindingStyled = styled(BareButton)<{ selected: boolean }>` | ||||
${tw`sw-flex sw-gap-2 sw-items-center`} | ${tw`sw-flex sw-gap-2 sw-items-center`} | ||||
${tw`sw-my-3 sw-mx-1`} | ${tw`sw-my-3 sw-mx-1`} | ||||
${tw`sw-p-3`} | |||||
${tw`sw-body-md-highlight`} | |||||
${tw`sw-rounded-1`} | ${tw`sw-rounded-1`} | ||||
${tw`sw-px-3`} | |||||
${tw`sw-w-full`} | ${tw`sw-w-full`} | ||||
${tw`sw-box-border`} | ${tw`sw-box-border`} | ||||
${(props) => (props.selected ? tw`sw-py-3` : tw`sw-py-2`)}; | |||||
${(props) => (props.selected ? tw`sw-body-md-highlight` : tw`sw-body-sm`)}; | |||||
border: ${(props) => | border: ${(props) => | ||||
props.selected | props.selected | ||||
? themeBorder('default', 'issueBoxSelectedBorder') | ? themeBorder('default', 'issueBoxSelectedBorder') | ||||
: themeBorder('default', 'issueBoxBorder')}; | : themeBorder('default', 'issueBoxBorder')}; | ||||
color: ${themeContrast('pageBlock')}; | color: ${themeContrast('pageBlock')}; | ||||
font-weight: ${(props) => (props.selected ? 600 : 400)}; | |||||
word-break: break-word; | word-break: break-word; | ||||
background-color: ${themeColor('pageBlock')}; | background-color: ${themeColor('pageBlock')}; | ||||