jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
1,774 lines (1,771 loc) • 52.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('./components/04-organisms/01-form/02-withImage/index.js');
/**
* @file theme.tsd
*
* @fileoverview Provides the overrideabble theme object to setup a theme.
* Properties that should be calculated from parents need
* to use getters so that they are not computed when imported. This makes it easier to override only certain properties
* and have other values automatically adjusted. @see themeDark.tsx
*/
function Theme() {
// tslint:disable-next-line
const self = this;
this.themeName = 'Default';
this.colors = {
primary: '#0E8E72',
primaryLight: '#4d8c7e',
primaryVeryLight: '#71e4cd',
secondary: '#ef6c00',
secondaryLight: '#ffb74d',
secondaryVeryLight: '#fff3e0',
default: '#57606f',
white: '#ffffff',
gray0: '#f1f2f6',
gray1: '#dfe4ea',
gray2: '#ced7e0',
gray3: '#a4b0be',
gray4: '#747d8c',
gray5: '#57606f',
gray6: '#7f8a93',
gray7: '#5f6e78',
gray8: '#374047',
gray9: '#2f3541',
black: '#000',
lightBlack: '#0d1321',
success: '#43A047',
successLight: '#A2F5BF',
successVeryLight: '#E8F5E9',
info: '#6990eb',
warning: '#FBC02D',
warningLight: '#FFF176',
warningVeryLight: '#FFFDE7',
danger: '#C62828',
dangerLight: '#EF5350',
dangerVeryLight: '#FFEBEE',
background: '#eff2f4',
facebook: '#3B5998',
twitter: '#1DA1F2',
google: '#DC4E41',
linkedin: '#0077B5',
xing: '#006567',
focusRingColor: '#ffb300'
};
this.space = [
0,
1,
2,
'0.25rem',
'0.5rem',
'0.75rem',
'1rem',
'1.5rem',
'2rem',
'2.5rem',
'2rem',
'3rem',
'8rem',
'16rem',
'32rem'
];
this.fontSizes = [
'0.7rem',
'0.8rem',
'0.9rem',
'1rem',
'1.25rem',
'1.5rem',
'2rem',
'2.5rem',
'3rem'
];
this.lineHeights = [
'1rem',
'1.2rem',
'1.4rem',
'1.5rem',
'1.7rem',
'1.8rem',
'2.5rem',
'3rem',
'4rem'
];
this.fonts = {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
headings: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
};
this.radii = {
inputs: '3px',
buttons: '3px',
radios: '50%',
boxes: '4px',
chips: '20px',
flags: '4px'
};
this.shadows = {
light: 'rgba(0,0,0,0.3) 0 0 3px',
medium: 'rgba(0,0,0,0.5) 0 0 6px',
hard: 'rgba(0,0,0,0.7) 0 0 9px',
boxes: 'rgba(0,0,0,0.1) 0px 3px 15px',
modals: 'rgba(0,0,0,0.1) 0px 3px 15px',
side: '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
down: 'rgba(0, 0, 0, 0.1) 0 12px 8px -2px'
};
this.breakpoints = ['700px', '1200px', '1500px'];
this.mediaQueries = {
get small() {
return `@media screen and (min-width: ${self.breakpoints[0]})`;
},
get smallRevert() {
return `@media screen and (max-width: ${self.breakpoints[0]})`;
},
get medium() {
return `@media screen and (min-width: ${self.breakpoints[1]})`;
},
get large() {
return `@media screen and (min-width: ${self.breakpoints[2]})`;
}
};
this.font = {
fontSize: '16px',
lineHeight: '1.5',
get body() {
return self.fonts.body;
},
heading: {
get font() {
return self.fonts.headings;
},
fontWeight: '600'
},
get color() {
return self.colors.gray8;
},
AchorTextDecoration: 'none'
};
this.alert = {
get padding() {
return `${self.space[6]} ${self.space[9]} ${self.space[6]} ${self.space[6]}`;
},
color: {
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
}
},
background: {
get success() {
return self.colors.successVeryLight;
},
get warning() {
return self.colors.warningVeryLight;
},
get danger() {
return self.colors.dangerVeryLight;
}
},
borderColor: {
get success() {
return self.colors.successVeryLight;
},
get warning() {
return self.colors.warningVeryLight;
},
get danger() {
return self.colors.dangerVeryLight;
}
},
borderStyle: 'solid',
borderWidth: '2px',
get borderRadius() {
return self.radii.boxes;
},
links: {
color: {
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
}
},
textDecoration: 'underline',
fontWeight: 'bold'
},
closeButton: {
position: 'absolute',
right: '1rem',
top: '1rem'
}
};
this.button = {
get fontSize() {
return self.fontSizes[3];
},
get borderRadius() {
return self.radii.buttons;
},
height: '3rem',
get padding() {
return `${self.space[4]} ${self.space[8]}`;
},
get paddingIconed() {
return `${self.space[4]} ${self.space[6]}`;
},
borderWidth: '2px',
borderStyle: 'solid',
hoverOpacity: '0.7',
textTransform: 'none',
letterSpacing: 'inherit',
borderColor: {
get primary() {
return self.colors.primary;
},
get secondary() {
return self.colors.secondary;
},
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
},
get default() {
return self.colors.gray3;
},
get facebook() {
return self.colors.facebook;
},
get twitter() {
return self.colors.twitter;
},
get google() {
return self.colors.google;
},
get linkedin() {
return self.colors.linkedin;
},
get xing() {
return self.colors.xing;
}
},
backgroundColor: {
get primary() {
return self.colors.primary;
},
get secondary() {
return self.colors.secondary;
},
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
},
get default() {
return self.colors.gray3;
},
get facebook() {
return self.colors.facebook;
},
get twitter() {
return self.colors.twitter;
},
get google() {
return self.colors.google;
},
get linkedin() {
return self.colors.linkedin;
},
get xing() {
return self.colors.xing;
}
},
color: {
get primary() {
return '#fff';
},
get secondary() {
return '#fff';
},
get success() {
return '#fff';
},
get warning() {
return '#fff';
},
get danger() {
return '#fff';
},
get default() {
return '#374047';
},
get facebook() {
return '#fff';
},
get twitter() {
return '#fff';
},
get google() {
return '#fff';
},
get linkedin() {
return self.colors.linkedin;
},
get xing() {
return self.colors.xing;
}
},
soft: {
backgroundColor: {
get primary() {
return self.colors.primaryVeryLight;
},
get secondary() {
return self.colors.secondaryVeryLight;
},
get success() {
return self.colors.successVeryLight;
},
get warning() {
return self.colors.warningVeryLight;
},
get danger() {
return self.colors.dangerVeryLight;
},
get default() {
return '#fff';
},
get facebook() {
return '#fff';
},
get twitter() {
return '#fff';
},
get google() {
return '#fff';
},
get linkedin() {
return '#fff';
},
get xing() {
return '#fff';
}
}
}
};
this.avatar = {
teaser: {
name: {
get color() {
return self.colors.gray6;
}
},
email: {
get color() {
return self.colors.gray3;
}
}
}
};
this.chip = {
get height() {
return self.space[8];
},
get lineHeight() {
return self.space[8];
},
get margin() {
return self.space[3];
},
get padding() {
return `0 ${self.space[5]}`;
},
get borderRadius() {
return self.radii.chips;
},
get fontSize() {
return self.fontSizes[1];
},
backgroundColor: {
get primary() {
return self.colors.primary;
},
get secondary() {
return self.colors.secondary;
},
get default() {
return self.colors.gray1;
}
},
icon: {
get border() {
return self.space[0];
},
borderRadius: '50%',
get height() {
return self.space[7];
},
get lineHeight() {
return self.space[7];
},
get width() {
return self.space[7];
},
get padding() {
return self.space[0];
},
margin: '0 -4px 0 4px',
get background() {
return self.colors.gray1;
},
get hoverBackground() {
return self.colors.gray6;
},
get hoverColor() {
return self.colors.white;
}
}
};
this.dataTable = {
get borderWidth() {
return self.box.borderWidth;
},
get borderStyle() {
return self.box.borderStyle;
},
get borderColor() {
return self.box.borderColor;
},
get boxShadow() {
return self.box.boxShadow;
},
head: {
get backgroundColor() {
return self.colors.white;
},
th: {
get padding() {
return self.space[6];
},
get fontSize() {
return self.fontSizes[3];
},
textAlign: 'left',
textTransform: 'none',
stickyBorderWidth: '1px',
stickyBorderStyle: 'solid',
get stickyBorderColor() {
return self.colors.gray1;
}
}
},
body: {
get backgroundColor() {
return self.colors.white;
},
td: {
get padding() {
return self.space[6];
},
get fontSize() {
return self.fontSizes[3];
},
textAlign: 'left',
textTransform: 'none',
stickyBorderWidth: '1px',
stickyBorderStyle: 'solid',
get stickyBorderColor() {
return self.colors.gray1;
}
}
}
};
this.formItem = {
get marginBottom() {
return self.space[4];
},
label: {
get fontSize() {
return self.fontSizes[3];
},
textTransform: 'none',
letterSpacing: 'auto',
get marginBottom() {
return self.space[4];
}
}
};
this.input = {
get background() {
return self.colors.white;
},
get fontSize() {
return self.fontSizes[3];
},
lineHeight: '1.3rem',
height: '1.3rem',
get borderRadius() {
return self.radii.inputs;
},
get padding() {
return self.space[5];
},
borderWidth: '2px',
borderTopWidth: 'auto',
borderLeftWidth: 'auto',
borderRightWidth: 'auto',
borderBottomWidth: 'auto',
get borderColor() {
return self.colors.gray2;
},
borderStyle: 'solid',
width: '100%',
focus: {
boxShadowType: 'inset 0 1px 3px rgba(0, 0, 0, 0.05)',
boxShadowVals: '0 0 4px'
}
};
this.autocomplete = {
input: {
get background() {
return self.input.background;
},
get fontSize() {
return self.input.fontSize;
},
get lineHeight() {
return self.input.lineHeight;
},
get height() {
return self.input.height;
},
get borderRadius() {
return self.input.borderRadius;
},
get padding() {
return self.input.padding;
},
get borderWidth() {
return self.input.borderWidth;
},
get borderColor() {
return self.input.borderColor;
},
get borderStyle() {
return self.input.borderStyle;
},
get width() {
return self.input.width;
}
},
dropMenu: {
get background() {
return self.input.background;
},
get borderWidth() {
return self.input.borderWidth;
},
get borderColor() {
return self.input.borderColor;
},
get borderStyle() {
return self.input.borderStyle;
},
maxHeight: '20rem',
maxWidth: '355px',
get boxShadow() {
return self.shadows.boxes;
}
},
option: {
get fontSize() {
return self.fontSizes[3];
},
get borderRadius() {
return self.input.borderRadius;
},
get padding() {
return self.input.padding;
},
get borderWidth() {
return self.input.borderWidth;
},
get borderColor() {
return self.input.borderColor;
},
get borderStyle() {
return self.input.borderStyle;
},
get backgroundHover() {
return self.colors.gray0;
}
},
userValue: {
get fontWeight() {
return '600';
},
get fontStyle() {
return 'normal';
},
get color() {
return self.colors.black;
}
}
};
this.datePopup = {
get selectedColor() {
return self.colors.primary;
},
get selectedColorRange() {
return self.colors.primaryLight;
},
get selectedColorTextRange() {
return self.colors.white;
}
};
this.radios = {
borderWidth: '2px',
borderStyle: 'solid',
get height() {
return self.space[7];
},
get width() {
return self.space[7];
},
get borderColor() {
return self.colors.primary;
},
get background() {
return self.colors.white;
},
get borderRadius() {
return self.radii.radios;
},
get marginBottom() {
return self.space[4];
},
inner: {
borderWidth: '7px',
get borderColor() {
return self.colors.primary;
},
get background() {
return self.colors.white;
}
}
};
this.checkbox = {
get paddingLeft() {
return self.space[9];
},
get lineHeight() {
return self.space[7];
},
get width() {
return self.space[7];
},
get height() {
return self.space[7];
},
arrow: {
inversedBackground: true,
get height() {
return self.space[3];
},
get width() {
return self.space[4];
},
get top() {
return self.space[4];
},
get left() {
return self.space[4];
},
get background() {
return self.colors.white;
}
}
};
this.toggle = {
height: '26px',
circleWidth: '26px',
circleHeight: '26px',
get borderRadius() {
return self.radii.chips;
},
switchBorderRadius: '50%',
get boxShadow() {
return self.shadows.light;
},
circleBackground: {
get primary() {
return '#fff';
},
get secondary() {
return '#fff';
},
get success() {
return '#fff';
},
get warning() {
return '#fff';
},
get danger() {
return '#fff';
}
},
backgroundColor: {
get primary() {
return self.colors.primary;
},
get secondary() {
return self.colors.secondary;
},
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
}
},
color: {
get primary() {
return '#fff';
},
get secondary() {
return '#fff';
},
get success() {
return '#fff';
},
get warning() {
return '#fff';
},
get danger() {
return '#fff';
}
}
};
this.select = {
get background() {
return self.colors.white;
},
get fontSize() {
return self.fontSizes[3];
},
get borderRadius() {
return self.input.borderRadius;
},
get padding() {
return self.input.padding;
},
get height() {
return self.input.height;
},
get borderWidth() {
return self.input.borderWidth;
},
get borderTopWidth() {
return self.input.borderTopWidth;
},
get borderLeftWidth() {
return self.input.borderLeftWidth;
},
get borderRightWidth() {
return self.input.borderRightWidth;
},
get borderBottomWidth() {
return self.input.borderBottomWidth;
},
get borderColor() {
return self.input.borderColor;
},
get borderStyle() {
return self.input.borderStyle;
},
focus: {
get boxShadowType() {
return self.input.focus.boxShadowType;
},
get boxShadowVals() {
return self.input.focus.boxShadowVals;
}
},
controlButton: {
position: {
get right() {
return self.space[7];
},
get top() {
return self.space[5];
}
}
},
wrapper: {},
item: {
get backgroundHover() {
return self.colors.gray0;
},
get colorHover() {
return self.colors.gray6;
}
},
dropMenu: {
get background() {
return self.input.background;
},
get borderWidth() {
return self.input.borderWidth;
},
get borderColor() {
return self.input.borderColor;
},
get borderStyle() {
return self.input.borderStyle;
},
maxHeight: '20rem',
get boxShadow() {
return self.shadows.boxes;
},
itemSelected: {
get color() {
return self.colors.white;
},
get background() {
return self.colors.primary;
},
get padding() {
return self.space[4];
},
get borderRadius() {
return self.button.borderRadius;
},
get fontSize() {
return self.fontSizes[0];
}
}
},
normal: {
get padding() {
return `${self.space[3]} ${self.space[9]} ${self.space[3]} ${self.space[6]}`;
},
height: '3rem'
},
multiple: {
get padding() {
return self.space[4];
},
input: {
get margin() {
return `${self.space[3]} ${self.space[4]}`;
},
width: '100%'
},
tags: {
get padding() {
return self.space[3];
},
get margin() {
return self.space[3];
},
get fontSize() {
return self.fontSizes[2];
}
}
}
};
this.tag = {
get fontSize() {
return self.fontSizes[1];
},
get borderRadius() {
return self.radii.buttons;
},
get padding() {
return `${self.space[3]} ${self.space[6]}`;
},
get color() {
return self.font.color;
},
borderWidth: '1px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray2;
},
get background() {
return self.colors.gray1;
}
};
this.navigation = {
maxWidth: 'xLarge',
get padding() {
return `${self.space[6]} ${self.space[8]}`;
},
get paddingMobile() {
return self.space[6];
},
borderWidth: '0',
get borderColor() {
return self.colors.gray1;
},
borderStyle: 'solid',
get boxShadow() {
return self.shadows.boxes;
},
get background() {
return self.colors.white;
},
logoMaxHeight: '60px',
links: {
get color() {
return self.colors.gray4;
},
get activeColor() {
return self.colors.primary;
},
textTransform: 'uppercase',
letterSpacing: 'inherit',
get fontSize() {
return self.fontSizes[1];
},
get marginRight() {
return self.space[4];
},
textDecoration: 'none'
},
fixed: {
get linksColor() {
return self.colors.white;
},
scrollingShowHeader: 100
},
mobile: {
sidenav: {
get boxShadow() {
return self.shadows.side;
},
get background() {
return self.colors.white;
},
maxWidth: '300px',
overlay: {
background: 'rgba(0,0,0,0.2)'
},
get iconsColor() {
return self.colors.gray4;
},
branding: {
get padding() {
return self.space[6];
},
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
get borderBottomColor() {
return self.colors.gray1;
},
logoMaxHeight: '35px'
}
},
links: {
get color() {
return self.colors.gray4;
},
get activeColor() {
return self.colors.primary;
},
textTransform: 'uppercase',
letterSpacing: 'inherit',
get fontSize() {
return self.fontSizes[1];
},
get marginRight() {
return self.space[4];
},
textDecoration: 'none',
get padding() {
return `0 ${self.space[6]}`;
},
get height() {
return self.space[9];
},
hover: {
get color() {
return self.colors.gray4;
},
get background() {
return self.colors.gray0;
}
}
}
}
};
this.pagination = {
list: {
get margin() {
return `${self.space[8]} 0`;
},
get separator() {
return self.space[4];
}
},
item: {
get color() {
return self.colors.primary;
},
get background() {
return self.colors.white;
},
get padding() {
return `${self.space[5]} ${self.space[6]}`;
},
borderWidth: '2px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
},
hover: {
get background() {
return self.colors.gray1;
},
get color() {
return self.colors.primary;
}
},
active: {
get background() {
return self.colors.primary;
},
get color() {
return self.colors.white;
},
get borderColor() {
return self.colors.primary;
}
}
}
};
this.layout = {
mobile: {
get padding() {
return self.space[6];
}
},
desktop: {
get padding() {
return self.space[8];
}
},
maxWidth: {
small: '800px',
medium: '960px',
large: '1140px',
xLarge: '1514px'
},
get background() {
return self.colors.background;
},
sidebar: {
width: '350px'
}
};
this.box = {
get p() {
return self.space[7];
},
get mt() {
return self.space[7];
},
get background() {
return self.colors.white;
},
borderWidth: '0px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
},
get borderRadius() {
return self.radii.boxes;
},
get boxShadow() {
return self.shadows.boxes;
},
label: {
marginTop: 0,
get marginBottom() {
return self.space[6];
},
get paddingBottom() {
return self.space[6];
},
get borderBottom() {
return `1px solid ${self.colors.gray1}`;
},
get fontSize() {
return self.fontSizes[2];
},
fontWeight: 'bold',
textTransform: 'uppercase'
}
};
this.modal = {
close: {
get top() {
return self.space[6];
},
get right() {
return self.space[6];
},
get left() {
return 'inherit';
},
get bottom() {
return 'inherit';
},
get color() {
return self.colors.gray4;
}
},
overlay: {
background: 'rgba(0,0,0,0.25)'
},
get boxShadow() {
return self.shadows.modals;
},
get background() {
return self.colors.white;
}
};
this.alertDialog = {
get maxWidth() {
return self.space[14];
},
label: {
get fontSize() {
return self.fontSizes[3];
},
fontWeight: 'bold',
letterSpacing: '1px',
textTransform: 'uppercase'
},
overlay: {
background: 'rgba(0,0,0,0.25)'
},
get boxShadow() {
return self.shadows.modals;
},
get background() {
return self.colors.white;
}
};
this.popover = {
get minWidth() {
return '250px';
},
get p() {
return self.box.p;
},
get background() {
return self.colors.white;
},
get borderColor() {
return self.box.borderColor;
},
get borderRadius() {
return self.box.borderRadius;
},
get boxShadow() {
return self.box.boxShadow;
},
get margin() {
return self.space[6];
}
};
this.job = {
teaser: {
title: {
get color() {
return self.colors.gray6;
},
get fontSize() {
return self.fontSizes[3];
},
get marginBottom() {
return 0;
},
hover: {
get color() {
return self.colors.primary;
}
}
},
company: {
get color() {
return self.colors.gray4;
}
},
location: {
get color() {
return self.colors.gray3;
}
},
date: {
get color() {
return self.colors.gray3;
},
get fontSize() {
return self.fontSizes[2];
}
},
occupation: {
get color() {
return self.colors.gray3;
}
},
description: {
get color() {
return self.colors.gray3;
}
},
get padding() {
return self.space[7];
},
borderWidth: '1px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray0;
},
get hoverBackground() {
return self.colors.background;
},
image: {
mobile: {
get maxWidth() {
return self.space[10];
}
},
get maxWidth() {
return self.space[12];
},
borderRadius: '4px'
}
},
detail: {
logo: {
get borderColor() {
return self.colors.gray1;
},
borderWidth: '0',
borderStyle: 'solid',
maxWidth: '100px'
},
info: {
title: {
get color() {
return self.colors.gray6;
},
get fontSize() {
return self.fontSizes[5];
}
},
get padding() {
return self.box.p;
},
borderWidth: ' 0 0 1px 0',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
},
company: {
get color() {
return self.colors.gray6;
}
},
occupations: {
get color() {
return self.colors.gray4;
},
get marginTop() {
return self.space[4];
}
}
},
shrinkedInfo: {
top: 0,
bottom: 'inherit',
left: 0,
right: 'inherit',
get background() {
return self.colors.white;
},
title: {
get color() {
return self.colors.gray6;
},
fontSize: '1rem'
},
company: {
get color() {
return self.colors.gray4;
},
fontSize: '1rem'
},
imageMaxWidth: '60px',
padding: '1rem',
get boxShadow() {
return self.shadows.down;
},
borderWidth: ' 0 0 1px 0',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
}
},
description: {
get padding() {
return self.box.p;
},
label: {
get fontSize() {
return self.fontSizes[1];
},
textTransform: 'uppercase'
}
}
}
};
this.emptyElement = {
maxWidth: '500px',
get padding() {
return self.space[8];
},
get textColor() {
return self.colors.gray4;
},
get iconColor() {
return self.colors.gray2;
}
};
this.searchBox = {
get background() {
return self.colors.gray0;
},
get padding() {
return self.space[6];
},
get boxShadow() {
return self.shadows.boxes;
},
form: {
get maxWidth() {
return self.layout.maxWidth.large;
}
},
button: {
get background() {
return self.button.backgroundColor.primary;
},
border: 'none',
get color() {
return self.button.color.primary;
},
get width() {
return self.space[10];
}
},
input: {
get height() {
return self.space[9];
},
borderColor: 'white',
widthMobile: '90%',
widthDesktop: '100%'
}
};
this.boxAction = {
get padding() {
return self.space[10];
},
get color() {
return self.font.color;
},
transition: 'all 0.3s ease',
hover: {
get background() {
return self.colors.gray0;
},
transform: 'translateY(-3px)'
}
};
this.boxSelectable = {
get padding() {
return self.space[9];
},
get borderRadius() {
return self.radii.boxes;
},
opacity: '0.7',
background: 'transparent',
borderWidth: '2px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
},
active: {
get background() {
return self.colors.white;
},
opacity: '1',
boxShadowVal: '0px 0px 4px',
fontWeight: '600',
get iconColor() {
return self.colors.white;
}
}
};
this.formGroup = {
get gap() {
return self.space[6];
},
get margin() {
return `${self.space[6]} 0 0 0 `;
},
get padding() {
return `${self.space[8]} 0 0 0 `;
},
borderWidth: '1px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
},
label: {
get color() {
return self.font.color;
},
get fontSize() {
return self.fontSizes[2];
},
textTransform: 'uppercase',
letterSpacing: 'auto',
fontWeight: '600'
},
description: {
get marginTop() {
return self.space[6];
},
get fontSize() {
return self.fontSizes[2];
},
get color() {
return self.colors.gray5;
}
}
};
this.fileInput = {
wrapper: {
get boxShadow() {
return self.shadows.down;
},
get borderRadius() {
return self.radii.boxes;
},
get color() {
return self.colors.gray5;
},
borderWidth: '1px',
borderStyle: 'solid',
get borderColor() {
return self.colors.gray1;
}
},
info: {
get padding() {
return self.space[6];
}
}
};
this.badge = {
get padding() {
return `${self.space[3]} ${self.space[4]}`;
},
get borderRadius() {
return self.radii.buttons;
},
get fontSize() {
return self.fontSizes[1];
},
backgroundColor: {
get primary() {
return self.colors.primary;
},
get primaryLight() {
return self.colors.primaryLight;
},
get primaryVeryLight() {
return self.colors.primaryVeryLight;
},
get secondaryLight() {
return self.colors.secondaryLight;
},
get secondaryVeryLight() {
return self.colors.secondaryVeryLight;
},
get secondary() {
return self.colors.secondary;
},
get default() {
return self.colors.gray5;
},
get success() {
return self.colors.success;
},
get successLight() {
return self.colors.successLight;
},
get successVeryLight() {
return self.colors.successVeryLight;
},
get warning() {
return self.colors.warning;
},
get warningLight() {
return self.colors.warningLight;
},
get warningVeryLight() {
return self.colors.warningVeryLight;
},
get danger() {
return self.colors.danger;
},
get dangerLight() {
return self.colors.dangerLight;
},
get dangerVeryLight() {
return self.colors.dangerVeryLight;
}
},
color: {
get primary() {
return '#fff';
},
get primaryLight() {
return self.colors.primaryVeryLight;
},
get primaryVeryLight() {
return self.colors.primary;
},
get secondary() {
return '#fff';
},
get secondaryLight() {
return self.colors.secondaryVeryLight;
},
get secondaryVeryLight() {
return self.colors.secondary;
},
get default() {
return '#fff';
},
get success() {
return '#fff';
},
get successLight() {
return self.colors.successVeryLight;
},
get successVeryLight() {
return self.colors.success;
},
get warning() {
return '#fff';
},
get warningLight() {
return self.colors.warningVeryLight;
},
get warningVeryLight() {
return self.colors.warning;
},
get danger() {
return '#fff';
},
get dangerLight() {
return self.colors.dangerVeryLight;
},
get dangerVeryLight() {
return self.colors.danger;
}
}
};
this.well = {
backgroundColor: {
get warningLight() {
return self.colors.warningLight;
},
get warning() {
return self.colors.warning;
},
get primary() {
return self.colors.primary;
},
get primaryLight() {
return self.colors.primaryLight;
},
get secondary() {
return self.colors.secondary;
},
get secondaryLight() {
return self.colors.secondaryLight;
},
default() {
return self.colors.gray2;
}
},
get padding() {
return self.space[7];
},
get borderRadius() {
return self.radii.boxes;
},
get fontSize() {
return self.fontSizes[3];
},
color: {
get warningLight() {
return '#fff';
},
get warning() {
return '#fff';
},
get primary() {
return '#fff';
},
get primaryLight() {
return '#fff';
},
get secondary() {
return '#fff';
},
get secondaryLight() {
return '#fff';
},
get default() {
return '#fff';
}
}
};
this.heroBanner = {
get padding() {
return self.space[8];
},
overlayBackground: 'rgba(0, 0, 0, 0.3)'
};
this.flatbanner = {
backgroundColor: {
get primary() {
return self.colors.primary;
},
get secondary() {
return self.colors.secondary;
},
get default() {
return self.colors.gray5;
}
},
get color() {
return self.colors.white;
},
get padding() {
return self.space[8];
}
};
this.landingSimpleTextRow = {
get padding() {
return self.space[8];
}
};
this.flag = {
get lineHeight() {
return self.space[7];
},
get margin() {
return self.space[4];
},
get padding() {
return self.space[6];
},
get borderRadius() {
return self.radii.flags;
},
get fontSize() {
return self.fontSizes[3];
},
backgroundColor: {
get default() {
return self.colors.default;
},
get secondary() {
return self.colors.secondary;
},
get success() {
return self.colors.success;
},
get warning() {
return self.colors.warning;
},
get danger() {
return self.colors.danger;
}
},
color: {
get primary() {
return '#fff';
},
get secondary() {
return '#fff';
},
get default() {
return '#fff';
},
get success() {
return '#fff';
},
get warning() {
return '#fff';
},
get danger() {
return '#fff';
}
},
closeButton: {
get margin() {
return self.space[6];
}
},
svg: {
get margin() {
return self.space[3];
},
get padding() {
return self.space[4];
}
}
};
this.resume = {
j