196 lines
6.9 KiB
TypeScript
196 lines
6.9 KiB
TypeScript
// Shell level
|
|
export const shellTheming = (ShellClass: string) =>
|
|
`pi-shell pi-shell__${ShellClass}`;
|
|
|
|
/**
|
|
* Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
|
|
* `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
|
|
*
|
|
* Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
|
|
* `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
|
|
*/
|
|
export const ShellClass = {
|
|
/** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
|
|
Default: shellTheming('default'),
|
|
/** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
|
|
Alternative: shellTheming('alternative'),
|
|
/** Esquinas casi rectas, borde fino en vez de sombra, sin degradados. */
|
|
Minimal: shellTheming('minimal'),
|
|
/** Como Default, pero con anillo en degradado al enfocar un campo. */
|
|
Gradient: shellTheming('gradient'),
|
|
};
|
|
|
|
// View component level
|
|
// Container Layout ~ Landings
|
|
export const ContainerLayout = 'pi-container-layout';
|
|
|
|
// Layouts
|
|
// Heights
|
|
export const enum Height {
|
|
Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
|
|
Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
|
|
Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
|
|
Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
|
|
}
|
|
|
|
export const height = (height: Height): string => `pi-layout__${height}`;
|
|
|
|
// Responsive
|
|
export const heights = (
|
|
mobileHeight: Height,
|
|
tabletHeight: Height,
|
|
desktopHeight: Height,
|
|
): string =>
|
|
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
|
|
|
|
// Not Responsive
|
|
export const LayoutHeight = {
|
|
Small: height(Height.Small), // 25
|
|
Medium: height(Height.Medium), // 50
|
|
Large: height(Height.Large), // 75
|
|
Full: height(Height.Full), // 100
|
|
};
|
|
|
|
// HostBinding layout class with or without background image ~ Landings
|
|
export const layoutBackground = (imageName: string) =>
|
|
`url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;
|
|
|
|
export const backgroundWaveClass = (waveRef: string) =>
|
|
`pi-background-wave pi-background-wave__${waveRef}`;
|
|
|
|
// Not Responsive
|
|
export const LayoutWave = {
|
|
// Grey
|
|
Grey1: backgroundWaveClass('01-grey'),
|
|
Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
|
|
Grey2: backgroundWaveClass('02-grey'),
|
|
Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
|
|
// Highlighted
|
|
Highlighted1: backgroundWaveClass('01-highlighted'),
|
|
Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
|
|
Highlighted2: backgroundWaveClass('02-highlighted'),
|
|
Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
|
|
// Primary
|
|
Primary1: backgroundWaveClass('01-primary'),
|
|
Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
|
|
Primary2: backgroundWaveClass('02-primary'),
|
|
Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
|
|
// PrimaryWhite
|
|
PrimaryWhite1: backgroundWaveClass('01-primary-white'),
|
|
PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
|
|
PrimaryWhite2: backgroundWaveClass('02-primary-white'),
|
|
PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
|
|
// Primary50
|
|
PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
|
|
Primary501: backgroundWaveClass('01-primary-50'),
|
|
PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
|
|
PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
|
|
Primary502: backgroundWaveClass('02-primary-50'),
|
|
PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
|
|
// White
|
|
White1: backgroundWaveClass('01-white'),
|
|
White1RGBA: backgroundWaveClass('01-white-rgba'),
|
|
White2: backgroundWaveClass('02-white'),
|
|
White2RGBA: backgroundWaveClass('02-white-rgba'),
|
|
};
|
|
|
|
// Layouts ~ SaaS & Landings
|
|
export const LayoutNoPadding = 'pi-layout__no-padding';
|
|
|
|
export const LayoutCollapsable = 'pi-layout__collapsable';
|
|
|
|
export const userType = (userType: string) => `is-${userType}`;
|
|
|
|
// User type class
|
|
export const UserTypeClass = {
|
|
// Company
|
|
Company: userType('company'),
|
|
// Investor
|
|
Investor: userType('investor'),
|
|
// Advisor
|
|
Advisor: userType('advisor'),
|
|
};
|
|
|
|
// Layouts (Add to any view)
|
|
export const LayoutTypeClass = {
|
|
// Specifics
|
|
//
|
|
// Authentication y Dashboard son composiciones de aplicación (estados del
|
|
// aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
|
|
// que los use. Ver la página «Layouts» del playground.
|
|
Authentication: 'pi-layout pi-layout__00-authentication',
|
|
Dashboard: 'pi-layout pi-layout__01-dashboard',
|
|
// TODO: Delete old dashboard layout when ready other users
|
|
DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
|
|
// Main Horizontally
|
|
// Full Width
|
|
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
|
|
// Full Width Centered
|
|
// El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
|
|
// `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
|
|
// no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
|
|
FullWidthAuto:
|
|
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
|
|
// Main Vertically Centered
|
|
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
|
|
// Main Space Between
|
|
SpaceBetween: 'pi-layout pi-layout__04-space-between',
|
|
// Splitted
|
|
Splitted: 'pi-layout pi-layout__05-splitted',
|
|
// SplittedPaywall
|
|
SplittedPaywall:
|
|
'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
|
|
// Edge to Edge
|
|
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
|
|
// List Left
|
|
List: 'pi-layout pi-layout__07-list',
|
|
// Infinite Scroll
|
|
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
|
|
// Form Layout
|
|
Form: 'pi-layout pi-layout__08-form',
|
|
// Pricing Layout
|
|
Pricing: 'pi-layout pi-layout__09-pricing',
|
|
};
|
|
|
|
// Wrappers
|
|
export const wrapperType = (wrapperClass: string) =>
|
|
`pi-wrapper pi-wrapper__${wrapperClass}`;
|
|
|
|
export const WrapperTypeClass = {
|
|
Action: wrapperType('action'),
|
|
Form: wrapperType('form'),
|
|
Header: wrapperType('header'),
|
|
List: wrapperType('list'),
|
|
Main: wrapperType('main'),
|
|
Steps: wrapperType('steps'),
|
|
};
|
|
|
|
// Components
|
|
export const componentFamily = (componentClass: string) =>
|
|
`pi-component pi-${componentClass}`;
|
|
|
|
export const ComponentFamilyClass = {
|
|
Button: componentFamily('button'),
|
|
Card: componentFamily('card'),
|
|
Carousel: componentFamily('carousel'),
|
|
DomainComponent: componentFamily('domain-component'),
|
|
Chip: componentFamily('chip'),
|
|
DynamicMenu: componentFamily('dynamic-menu'),
|
|
FileUpload: componentFamily('file-upload'),
|
|
Field: componentFamily('field'),
|
|
Icon: componentFamily('icon'),
|
|
Image: componentFamily('image'),
|
|
List: componentFamily('list'),
|
|
CustomModal: componentFamily('modal pi-modal__custom-template'),
|
|
Panel: componentFamily('panel'),
|
|
Table: componentFamily('table'),
|
|
Text: componentFamily('text'),
|
|
};
|
|
|
|
// Transition durations
|
|
export const enum DURATION {
|
|
Slow = 300,
|
|
Medium = 200,
|
|
Fast = 100,
|
|
}
|