Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 5x 5x 5x 5x 5x 5x 5x 5x 8x 8x 5x 26x 26x | import styled from "styled-components";
import { StyledInput } from "./style";
import { ToggleButtonGroupWrapper } from "ui/form/ToggleButtonGroup";
import { StyledButton } from "ui/buttons/style";
import API from "renderer/lib/api";
export const InputGroup = styled.div`
display: flex;
width: 100%;
&
> div:not(:first-child)
${StyledInput},
&
> ${StyledInput}:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& > ${ToggleButtonGroupWrapper}:not(:first-child),
& > ${ToggleButtonGroupWrapper}:not(:first-child) > :first-child > label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& > div:not(:first-child) .CustomSelect .CustomSelect__control,
& > .CustomSelect:not(:first-child) .CustomSelect__control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& > div:not(:first-child) .MentionsInput__control textarea {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& > div:not(:last-child) ${StyledInput}, & > ${StyledInput}:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& > ${ToggleButtonGroupWrapper}:not(:last-child),
& > ${ToggleButtonGroupWrapper}:not(:last-child) > :last-child > label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& > div:not(:last-child) .CustomSelect .CustomSelect__control,
& > .CustomSelect:not(:last-child) .CustomSelect__control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& > div:not(:last-child) .MentionsInput__control textarea {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
`;
export const InputGroupLabel = styled.label`
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
height: 100%;
padding: 5px;
box-sizing: border-box;
font-size: ${(props) => props.theme.typography.fontSize};
background: ${(props) => props.theme.colors.input.background};
color: ${(props) => props.theme.colors.input.text};
border: 1px solid ${(props) => props.theme.colors.input.border};
border-radius: ${(props) => props.theme.borderRadius}px;
`;
export const InputGroupPrepend = styled.div`
${StyledButton} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
height: 28px;
${() =>
API.env === "web" &&
`@media (max-width: 840px) {
height: 38px;
}`}
}
${InputGroupLabel} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
height: 28px;
${() =>
API.env === "web" &&
`@media (max-width: 840px) {
height: 38px;
}`}
}
`;
export const InputGroupAppend = styled.div`
${StyledButton} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
height: 28px;
${() =>
API.env === "web" &&
`@media (max-width: 840px) {
height: 38px;
}`}
}
${InputGroupLabel} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
height: 28px;
${() =>
API.env === "web" &&
`@media (max-width: 840px) {
height: 38px;
}`}
}
`;
|