Updated all long style names to be more compact

• Updated:
- all long style names to be more compact
This commit is contained in:
mgabdev
2020-08-18 15:43:06 -05:00
parent e5f4e12b7b
commit d5ad398d53
177 changed files with 1052 additions and 1052 deletions

View File

@@ -117,7 +117,7 @@ class StatusCard extends ImmutablePureComponent {
return (
<div
ref={this.setRef}
className={[_s.default, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
className={[_s._, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
dangerouslySetInnerHTML={content}
/>
)
@@ -139,7 +139,7 @@ class StatusCard extends ImmutablePureComponent {
const title = interactive ?
(
<a
className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}
className={[_s._, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}
href={card.get('url')}
title={cardTitle}
rel={DEFAULT_REL}
@@ -149,19 +149,19 @@ class StatusCard extends ImmutablePureComponent {
</a>
)
: (
<span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}>
<span className={[_s._, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}>
{cardTitle}
</span>
)
const description = (
<div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<div className={[_s._, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
{title}
<p className={[_s.default, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fs13PX, _s.fontWeightNormal].join(' ')}>
<p className={[_s._, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.cSecondary, _s.fs13PX, _s.fw400].join(' ')}>
{trim(card.get('description') || '', maxDescription)}
</p>
<span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
<Icon id='link' size='10px' className={[_s.colorSecondary, _s.mr5].join(' ')} fixedWidth />
<span className={[_s._, _s.mtAuto, _s.flexRow, _s.aiCenter, _s.cSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
<Icon id='link' size='10px' className={[_s.cSecondary, _s.mr5].join(' ')} fixedWidth />
{provider}
</span>
</div>
@@ -170,15 +170,15 @@ class StatusCard extends ImmutablePureComponent {
// : todo : use <Image />
let embed = ''
const thumbnail = interactive ?
<img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.posAbs, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
<img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.posAbs, _s.w100PC, _s.h100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
:
(
<ResponsiveClassesComponent
classNames={[_s.default, _s.height220PX, _s.width330PX].join(' ')}
classNamesSmall={[_s.default, _s.height260PX, _s.width100PC].join(' ')}
classNamesXS={[_s.default, _s.height200PX, _s.width100PC].join(' ')}
classNames={[_s._, _s.h220PX, _s.w330PX].join(' ')}
classNamesSmall={[_s._, _s.h260PX, _s.w100PC].join(' ')}
classNamesXS={[_s._, _s.h200PX, _s.w100PC].join(' ')}
>
<img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.width100PC, _s.height100PC].join(' ')} />
<img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.w100PC, _s.h100PC].join(' ')} />
</ResponsiveClassesComponent>
)
@@ -194,21 +194,21 @@ class StatusCard extends ImmutablePureComponent {
}
return (
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
<div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
<div className={[_s._, _s.overflowHidden, _s.w100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
{
!isReduced &&
<div className={[_s.default, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
<div className={[_s._, _s.w100PC].join(' ')}>
<div className={[_s._, _s.w100PC, _s.pt5625PC].join(' ')}>
{!!embed && embed}
{!embed && thumbnail}
{!embed &&
<div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<div className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.aiCenter, _s.jcCenter].join(' ')}>
<button
className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
className={[_s._, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
onClick={this.handleEmbedClick}
>
<Icon id={iconVariant} size='22px' className={[_s.colorWhite].join(' ')} />
<Icon id={iconVariant} size='22px' className={[_s.cWhite].join(' ')} />
</button>
</div>
}
@@ -221,30 +221,30 @@ class StatusCard extends ImmutablePureComponent {
)
} else if (cardImg) {
embed = (
<div className={[_s.default].join(' ')}>
<div className={[_s._].join(' ')}>
{thumbnail}
</div>
)
} else {
embed = (
<div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<Icon id='website' size='22px' className={_s.colorSecondary} />
<div className={[_s._, _s.py15, _s.px15, _s.w72PX, _s.aiCenter, _s.jcCenter].join(' ')}>
<Icon id='website' size='22px' className={_s.cSecondary} />
</div>
)
}
return (
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
<a
href={card.get('url')}
rel={DEFAULT_REL}
ref={this.setRef}
target='_blank'
className={[_s.default, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
className={[_s._, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.w100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
classNamesSmall={!cardImg ? undefined : [_s.default, _s.width100PC].join(' ')}
classNames={[_s._, _s.flexRow, _s.w100PC].join(' ')}
classNamesSmall={!cardImg ? undefined : [_s._, _s.w100PC].join(' ')}
>
{!isReduced && embed}
{description}