@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
51 lines • 1.76 kB
JavaScript
import styled, { css } from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
export const NavigationCardStyled = styled.a.withConfig({
shouldForwardProp: () => true,
}) `
text-decoration: none;
${({ styles }) => getStyles(styles?.container)};
`;
export const NavigationCardInfoContentStyled = styled.div `
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
${({ theme: { MEDIA_QUERIES: { onlyMobile }, }, isExpanded, }) => css `
${onlyMobile} {
flex-direction: ${isExpanded ? 'column' : 'row'};
}
`}
`;
export const NavigationCardLeftContentStyled = styled.div `
display: flex;
align-items: center;
max-width: ${({ isExpanded }) => (isExpanded ? '90%' : '100%')};
width: auto;
text-align: left;
`;
export const NavigationCardContentStyled = styled.div `
${({ styles }) => getStyles(styles?.contentContainer)};
`;
export const NavigationCardRightContentStyled = styled.div `
${({ styles }) => getStyles(styles?.rightContentContainer)};
`;
export const NavigationCardDecorativeContainer = styled.div `
${({ styles }) => getStyles(styles?.decorativeElementContainer)};
margin-right: ${({ marginRight }) => marginRight};
`;
export const NavigationCardDescriptionContainerStyled = styled.div `
${({ styles }) => getStyles(styles?.descriptionContainer)};
`;
export const NavigationCardTagContainer = styled.div `
${({ styles }) => getStyles(styles?.tagContainer)};
`;
export const NavigationCardLinesTextStyled = styled.div `
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ${({ lines }) => lines};
overflow: hidden;
display: flex;
align-items: center;
`;
//# sourceMappingURL=navigationCard.styled.js.map