How to use @tds/core-responsive - 10 common examples
To help you get started, we’ve selected a few @tds/core-responsive examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
telus / tds-core / packages / FlexGrid / Row / Row.jsx View on Github 
'div&': {
margin: '0 auto',
flexShrink: 0,
...media.until('sm').css({
flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
}),
...media.from('sm').css({
flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
}),
...media.from('md').css({
flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
}),
...media.from('lg').css({
flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
}),
...media.from('xl').css({
flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
}),
},
})
)display: hiddenLevel[0] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[0],
}),
...media.from('sm').css({
display: hiddenLevel[1] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[1],
}),
...media.from('md').css({
display: hiddenLevel[2] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[2],
}),
...media.from('lg').css({
display: hiddenLevel[3] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[3],
}),
...media.from('xl').css({
display: hiddenLevel[4] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[4],
}),
}))({ reverseLevel }) => ({
width: '100%',
'div&': {
margin: '0 auto',
flexShrink: 0,
...media.until('sm').css({
flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
}),
...media.from('sm').css({
flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
}),
...media.from('md').css({
flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
}),
...media.from('lg').css({
flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
}),
...media.from('xl').css({
flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
}),
},
})
)paddingLeft: gutter ? '1rem' : 0,
paddingRight: gutter ? '1rem' : 0,
},
...media.until('sm').css({
display: hiddenLevel[0] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[0],
}),
...media.from('sm').css({
display: hiddenLevel[1] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[1],
}),
...media.from('md').css({
display: hiddenLevel[2] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[2],
}),
...media.from('lg').css({
display: hiddenLevel[3] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[3],
}),
...media.from('xl').css({
display: hiddenLevel[4] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[4],
}),
}))))(({ hiddenLevel, gutter, horizontalAlignLevel }) => ({
'div&': {
paddingLeft: gutter ? '1rem' : 0,
paddingRight: gutter ? '1rem' : 0,
},
...media.until('sm').css({
display: hiddenLevel[0] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[0],
}),
...media.from('sm').css({
display: hiddenLevel[1] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[1],
}),
...media.from('md').css({
display: hiddenLevel[2] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[2],
}),
...media.from('lg').css({
display: hiddenLevel[3] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[3],
}),
...media.from('xl').css({
display: hiddenLevel[4] === 0 ? 'none' : 'block',
textAlign: horizontalAlignLevel[4],
}),
}))text-decoration: underline;
transition: all 0.3s;
line-height: ${daySize}px;
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 1.9rem;
width: 1.9rem;
border-radius: 50%;
background: transparent;
transition: all 0.3s;
z-index: -1;
${media.from('md').css({
height: '2.25rem',
width: '2.25rem',
})}
}
}
.CalendarDay__default:hover,
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
background: none;
border: 1px solid ${colorGainsboro};
z-index: 0;
text-decoration: underline;
&:before {
background: ${colorGainsboro};import styled from 'styled-components'
import { sizeMedium, mediumFont } from '@tds/shared-typography'
import { media } from '@tds/core-responsive'
import { withStyledComponent } from '@tds/shared-hocs'
import List, { StyledList, StyledListItem } from '../List/List'
const StyledFootnoteListItem = styled(StyledListItem)({
'& > span': {
...mediumFont,
},
...media.from('md').css({
paddingLeft: '2rem',
}),
})
const StyledFootnoteList = styled(StyledList)({
...sizeMedium,
marginLeft: '1rem',
...media.from('md').css({
marginLeft: 0,
}),
})
const FootnoteList = withStyledComponent(StyledFootnoteList)(List)
const FootnoteListItem = withStyledComponent(StyledFootnoteListItem)(List.Item)
FootnoteList.Item = FootnoteListItemreturn props
}
const baseButton = {
margin: 0,
padding: '0 2rem',
cursor: 'pointer',
background: 'none',
transition: 'background 0.2s',
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
...media.from('md').css({
display: 'inline-flex',
width: 'auto',
minWidth: '180px',
}),
}
export const StyledButton = styled.button(
borders.none,
borders.rounded,
medium,
boldFont,
forms.buttonHeight,
forms.font,
baseButton,
({ variant }) => {
let backgroundColorimport { colorTelusPurple, colorWhite } from '@tds/core-colours'
import { safeRest } from '@tds/util-helpers'
import generateId from '../../../shared/utils/generateId/generateId'
const baseButton = {
margin: 0,
padding: '0 2rem',
cursor: 'pointer',
background: 'none',
transition: 'background 0.2s',
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
...media.from('md').css({
display: 'inline-flex',
width: 'auto',
minWidth: '136px',
}),
}
const StyledButtonGroupItem = styled.div({
margin: '0.5rem 0',
})
const StyledInput = styled.input({
position: 'fixed',
opacity: '0',
'&:checked ~ label': {
backgroundColor: colorTelusPurple,
boxShadow: `0px 0px 0px 0px ${colorTelusPurple}`,
color: colorWhite,Object.keys(responsiveProps).forEach(breakpoint => {
responsiveProps[breakpoint].forEach(responsiveProp => {
newProps = Object.assign({}, newProps, {
[responsiveProp]: props[responsiveProp][breakpoint],
})
})
const style = styleFunction(newProps, breakpoint)
if (breakpoint === 'xs') {
styles = Object.assign({}, styles, style)
} else {
styles = Object.assign({}, styles, media.from(breakpoint).css(style))
}
})@tds/core-responsive
Respond to device features, most commonly the browser viewport size
