@braineet/ui
Version:
Braineet design system
40 lines • 1.91 kB
JavaScript
import styled, { css } from 'styled-components';
import Box from '../box';
import Heading from '../heading';
import Text from '../text';
export var Inner = styled(Box).withConfig({
displayName: "styles__Inner",
componentId: "sc-rss84b-0"
})(["max-width:60%;"]);
export var Title = styled(Heading).attrs(function () {
return {
size: 'xl'
};
}).withConfig({
displayName: "styles__Title",
componentId: "sc-rss84b-1"
})(["color:", ";display:-webkit-box;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;overflow:hidden;-webkit-line-clamp:2;word-break:break-word;margin-bottom:8px;"], function (p) {
return p.theme.colors.black;
});
export var Description = styled(Text).attrs(function () {
return {
size: 'md'
};
}).withConfig({
displayName: "styles__Description",
componentId: "sc-rss84b-2"
})(["color:", ";margin-bottom:", ";display:-webkit-box;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;overflow:hidden;-webkit-line-clamp:2;word-break:break-word;"], function (p) {
return p.theme.colors.black;
}, function (p) {
return p.hasChildren ? '1.5rem' : '0';
});
export var Image = styled.img.withConfig({
displayName: "styles__Image",
componentId: "sc-rss84b-3"
})(["display:block;width:auto;height:180px;"]);
export var Container = styled(Box).withConfig({
displayName: "styles__Container",
componentId: "sc-rss84b-4"
})(["position:relative;display:flex;align-items:flex-start;padding:20px 32px;width:100%;border-radius:8px;", ""], function (p) {
return p.variant && p.variant === 'column' ? css(["flex-direction:column-reverse;align-items:center;", "{text-align:center;}", "{max-height:240px;width:auto;margin-bottom:2rem;}"], Inner, Image) : css(["background:", ";box-shadow:0px 8px 16px -8px rgba(71,82,133,0.32);max-height:200px;margin-top:3.5rem;", "{position:absolute;right:0.5rem;bottom:0.5rem;}"], p.theme.colors.white, Image);
});