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 | 3x 3x 3x 3x 3x 6x 6x 3x 3x 3x 3x 3x | import { VariableSelectWrapper } from "components/forms/VariableSelect";
import styled, { css } from "styled-components";
import { InputGroupPrepend } from "ui/form/InputGroup";
import { StyledInput } from "ui/form/style";
export const VariableIndexBracket = styled.div<{ $type: "open" | "close" }>`
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5px;
box-sizing: border-box;
font-size: 12px;
font-weight: bold;
color: ${(props) => props.theme.colors.input.text};
&:after {
content: "";
width: 2px;
height: 100%;
${(props) =>
props.$type === "open"
? css`
border: 2px solid ${(props) => props.theme.colors.brackets.color};
border-right: 0;
`
: css`
border: 2px solid ${(props) => props.theme.colors.brackets.color};
border-left: 0;
`}
}
`;
export const VariableIndexInputGroup = styled.div`
display: flex;
width: auto;
min-width: min(160px, 100%);
flex: 1 1 160px;
> ${InputGroupPrepend} + * .CustomSelect__control,
> ${InputGroupPrepend} + * ${StyledInput} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
`;
export const VariableInputGroup = styled.div`
display: flex;
min-width: min(160px, 100%);
flex: 3 1 160px;
> ${InputGroupPrepend} + ${VariableSelectWrapper} .CustomSelect__control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
> ${VariableSelectWrapper} {
width: auto;
flex: 1 1 160px;
}
`;
export const IndexedVariableInputGroup = styled.div`
display: flex;
flex-wrap: wrap;
row-gap: 5px;
width: 100%;
min-width: 0;
> ${VariableIndexInputGroup} {
flex: 2 1 160px;
}
`;
|