grommet
Version:
focus on the essential experience
42 lines • 2.17 kB
JavaScript
import styled, { css } from 'styled-components';
import { genericStyles, styledComponentsConfig } from '../../utils';
var fillStyle = css(["", " ", " flex-grow:1;display:flex;"], function (props) {
return props.fillContainer === true || props.fillContainer === 'horizontal' ? "\n width: 100%;\n max-width: none;\n " : '';
}, function (props) {
return props.fillContainer === true || props.fillContainer === 'vertical' ? 'height: 100%;' : '';
});
var StyledStack = styled.div.withConfig(styledComponentsConfig).withConfig({
displayName: "StyledStack",
componentId: "sc-ajspsk-0"
})(["position:relative;", " ", " ", ""], genericStyles, function (props) {
return props.fillContainer && fillStyle;
}, function (props) {
return props.theme.stack && props.theme.stack.extend;
});
var styleMap = {
fill: "\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n ",
center: "\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n ",
left: "\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n ",
right: "\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n ",
top: "\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n ",
bottom: "\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n ",
'top-left': "\n top: 0;\n left: 0;\n ",
'bottom-left': "\n bottom: 0;\n left: 0;\n ",
'top-right': "\n top: 0;\n right: 0;\n ",
'bottom-right': "\n bottom: 0;\n right: 0;\n "
};
var StyledStackLayer = styled.div.withConfig(styledComponentsConfig).withConfig({
displayName: "StyledStack__StyledStackLayer",
componentId: "sc-ajspsk-1"
})(["position:", ";", " ", " ", " ", ""], function (props) {
return props.guiding ? 'relative' : 'absolute';
}, function (props) {
return props.guiding && 'display: block;';
}, function (props) {
return !props.guiding && styleMap[props.anchor || 'fill'] + ";";
}, function (props) {
return props.fillContainer && "\n width: 100%;\n height: 100%;\n ";
}, function (props) {
return !props.interactive && "pointer-events: none;";
});
export { StyledStack, StyledStackLayer };