@braineet/ui
Version:
Braineet design system
74 lines • 2.95 kB
JavaScript
import styled, { css } from 'styled-components';
import Box from '../box';
import Heading from '../heading';
import Text from '../text';
export var StyledBox = styled(Box).withConfig({
displayName: "styles__StyledBox",
componentId: "sc-rd3ygl-0"
})(["display:flex;justify-content:space-between;align-items:center;background-color:white;padding:", ";border-radius:", ";box-shadow:", ";transition:box-shadow 0.3s ease-in-out;overflow:auto;", ""], function (props) {
return props.theme.spaces.md;
}, function (props) {
return props.theme.borderRadius.sm;
}, function (props) {
return props.theme.elevations[1];
}, function (props) {
return props.hasClickCard && css(["&:hover{box-shadow:", ",0px 0px 0px 2px ", " inset;cursor:pointer;}"], props.theme.elevations[3], props.theme.utils.lighten('black', 0.1));
});
export var StyledBoxLeft = styled(Box).withConfig({
displayName: "styles__StyledBoxLeft",
componentId: "sc-rd3ygl-1"
})(["display:flex;", ""], function (p) {
return p.ellipsis && css(["flex:1 1 auto;min-width:0;"]);
});
export var StyledBoxRight = styled(Box).withConfig({
displayName: "styles__StyledBoxRight",
componentId: "sc-rd3ygl-2"
})(["display:flex;align-items:center;"]);
export var StyledBoxInfo = styled(Box).withConfig({
displayName: "styles__StyledBoxInfo",
componentId: "sc-rd3ygl-3"
})(["margin-left:", ";", ""], function (props) {
return props.theme.spaces.md;
}, function (p) {
return p.ellipsis && css(["overflow:hidden;"]);
});
export var StyledName = styled(Heading).withConfig({
displayName: "styles__StyledName",
componentId: "sc-rd3ygl-4"
})(["", ""], function (p) {
return p.ellipsis && css(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
});
export var TextInfo = styled(Text).withConfig({
displayName: "styles__TextInfo",
componentId: "sc-rd3ygl-5"
})(["", ""], function (p) {
return p.ellipsis && css(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
});
export var StyledInfoBox = styled(Box).withConfig({
displayName: "styles__StyledInfoBox",
componentId: "sc-rd3ygl-6"
})(["display:flex;", ""], function (p) {
return p.ellipsis && css(["overflow:hidden;"]);
});
export var StyledInfo = styled(Box).withConfig({
displayName: "styles__StyledInfo",
componentId: "sc-rd3ygl-7"
})(["display:flex;align-items:center;", ""], function (p) {
return p.ellipsis && css(["overflow:hidden;"]);
});
export var StyledDot = styled(Box).withConfig({
displayName: "styles__StyledDot",
componentId: "sc-rd3ygl-8"
})(["width:", ";height:", ";background-color:", ";margin:0 ", ";"], function (props) {
return props.theme.spaces.sm;
}, function (props) {
return props.theme.spaces.sm;
}, function (props) {
return props.theme.utils.lighten('black', 0.1);
}, function (props) {
return props.theme.spaces.lg;
});
export var StyledEmail = styled(Box).withConfig({
displayName: "styles__StyledEmail",
componentId: "sc-rd3ygl-9"
})([""]);