mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 10:53:34 +03:00
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import {helper} from '@ember/component/helper';
|
|
|
|
export function kgStyle([style], options) {
|
|
let cssClass = '';
|
|
|
|
let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif';
|
|
let cardBorderStyle = 'pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-left-border kg-card-hover';
|
|
|
|
switch (style) {
|
|
// Card menu
|
|
case 'cardmenu':
|
|
cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
|
|
break;
|
|
|
|
case 'cardmenu-card':
|
|
cssClass = 'flex flex-shrink-0 items-center middarkgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pl4 pr4 pt2 pb2 anim-fast';
|
|
break;
|
|
|
|
case 'cardmenu-icon':
|
|
cssClass = 'flex items-center';
|
|
break;
|
|
|
|
case 'cardmenu-text':
|
|
cssClass = 'flex flex-column';
|
|
break;
|
|
|
|
case 'cardmenu-label':
|
|
cssClass = 'f8 lh-heading darkgrey tracked-1 fw4 ma0 ml4 flex-grow-1 truncate';
|
|
break;
|
|
|
|
case 'cardmenu-desc':
|
|
cssClass = 'f-small lh-heading tracked-1 fw4 ma0 ml4 flex-grow-1 midlightgrey truncate';
|
|
break;
|
|
|
|
// Container cards
|
|
case 'container-card':
|
|
cssClass = cardBorderStyle;
|
|
break;
|
|
|
|
// Generic media card
|
|
case 'media-card':
|
|
cssClass = `${pFontStyle} ma0 ba b--transparent kg-card-hover`;
|
|
break;
|
|
|
|
// Media styles & figure caption
|
|
case 'image-normal':
|
|
cssClass = 'center db';
|
|
break;
|
|
case 'image-wide':
|
|
cssClass = 'center mw-100 db';
|
|
break;
|
|
case 'image-full':
|
|
cssClass = 'center mw-100vw db';
|
|
if (options.sidebar) {
|
|
cssClass = `${cssClass} kg-image-full--sidebar`;
|
|
}
|
|
break;
|
|
case 'figcaption':
|
|
cssClass = 'db pa2 center lh-title sans-serif fw4 f7 middarkgrey tracked-2 tc';
|
|
break;
|
|
|
|
// Media breakout styles
|
|
case 'breakout':
|
|
if (options.size === 'wide') {
|
|
cssClass = `${cssClass} koenig-breakout-wide`;
|
|
}
|
|
if (options.size === 'full') {
|
|
cssClass = `${cssClass} koenig-breakout-full`;
|
|
}
|
|
break;
|
|
}
|
|
|
|
return cssClass;
|
|
}
|
|
|
|
export default helper(kgStyle);
|