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.
62 lines
1.7 KiB
62 lines
1.7 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
||
|
|
const label_1 = require("../../atoms/label");
|
||
|
|
const button_1 = require("../../atoms/button");
|
||
|
|
const input_1 = require("../../atoms/input");
|
||
|
|
const link_1 = require("../../atoms/link");
|
||
|
|
/**
|
||
|
|
* @component
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
const InputGroup = styled_components_1.default.div `
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
${input_1.Input} {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
${input_1.Input}:not(:last-child) {
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
${label_1.Label}, & > ${button_1.Button}, & > ${link_1.Link}:last-child {
|
||
|
|
padding: ${({ theme }) => theme.space.sm};
|
||
|
|
border: solid ${({ theme }) => theme.colors.inputBorder};
|
||
|
|
border-width: 1px 1px 1px 0;
|
||
|
|
margin: 0;
|
||
|
|
color: ${({ theme }) => theme.colors.grey40};
|
||
|
|
}
|
||
|
|
|
||
|
|
${button_1.Button}:last-child:hover {
|
||
|
|
background: ${({ theme }) => theme.colors.hoverBg};
|
||
|
|
}
|
||
|
|
|
||
|
|
${label_1.Label}, ${button_1.Button}, ${link_1.Link} {
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-grow: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
${label_1.Label}, ${link_1.Link} {
|
||
|
|
line-height: ${({ theme }) => theme.lineHeights.lg};
|
||
|
|
}
|
||
|
|
|
||
|
|
${button_1.Button}:first-child, ${link_1.Link}:first-child {
|
||
|
|
border-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
${input_1.Input}:hover {
|
||
|
|
& + ${label_1.Label}, & + ${button_1.Button}, & + ${link_1.Link} {
|
||
|
|
border-color: ${({ theme }) => theme.colors.grey60};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
${input_1.Input}:focus {
|
||
|
|
& + ${label_1.Label}, & + ${button_1.Button}, & + ${link_1.Link} {
|
||
|
|
border-color: ${({ theme }) => theme.colors.primary100};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
exports.default = InputGroup;
|