senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling and restructuring of components, config edit

Browse Source
This commit is contained in:
Moris Zen
2018-07-04 10:03:22 +02:00
parent 602e556a1c
commit c6cd4d19ad
8 changed files with 558 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
tailwind.config.js
View File

@@ -26,7 +26,6 @@ View the full documentation at https://tailwindcss.com.
// let defaultConfig = require('tailwindcss/defaultConfig')()
/*
|-------------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
@@ -44,22 +43,22 @@ View the full documentation at https://tailwindcss.com.
*/
let colors = {
'transparent': 'transparent',
transparent: 'transparent',
'black': '#212121',
black: '#212121',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
grey: '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff',
white: '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
'red': '#e3342f',
red: '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
@@ -67,7 +66,7 @@ let colors = {
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
'orange': '#f6993f',
orange: '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
@@ -75,7 +74,7 @@ let colors = {
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
'yellow': '#ffed4a',
yellow: '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
@@ -83,7 +82,7 @@ let colors = {
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
'green': '#38c172',
green: '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
@@ -91,7 +90,7 @@ let colors = {
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
'teal': '#4dc0b5',
teal: '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
@@ -99,7 +98,7 @@ let colors = {
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
'blue': '#3490dc',
blue: '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
@@ -107,7 +106,7 @@ let colors = {
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
'indigo': '#6574cd',
indigo: '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
@@ -115,7 +114,7 @@ let colors = {
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
'purple': '#9561e2',
purple: '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
@@ -123,14 +122,13 @@ let colors = {
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
'pink': '#f66d9b',
pink: '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
}
module.exports = {
/*
|-----------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
@@ -146,7 +144,6 @@ module.exports = {
colors: colors,
/*
|-----------------------------------------------------------------------------
| Screens https://tailwindcss.com/docs/responsive-design
@@ -167,13 +164,12 @@ module.exports = {
*/
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
/*
|-----------------------------------------------------------------------------
| Fonts https://tailwindcss.com/docs/fonts
@@ -193,7 +189,7 @@ module.exports = {
*/
fonts: {
'sans': [
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
@@ -207,7 +203,7 @@ module.exports = {
'Helvetica Neue',
'sans-serif',
],
'serif': [
serif: [
'Constantia',
'Lucida Bright',
'Lucidabright',
@@ -219,7 +215,7 @@ module.exports = {
'Georgia',
'serif',
],
'mono': [
mono: [
'Menlo',
'Monaco',
'Consolas',
@@ -227,10 +223,9 @@ module.exports = {
'Courier New',
'monospace',
],
'body': ['Open Sans']
body: ['Open Sans'],
},
/*
|-----------------------------------------------------------------------------
| Text sizes https://tailwindcss.com/docs/text-sizing
@@ -251,18 +246,17 @@ module.exports = {
*/
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
xs: '.75rem', // 12px
sm: '.875rem', // 14px
base: '1rem', // 16px
lg: '1.125rem', // 18px
xl: '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
},
/*
|-----------------------------------------------------------------------------
| Font weights https://tailwindcss.com/docs/font-weight
@@ -278,18 +272,17 @@ module.exports = {
*/
fontWeights: {
'hairline': 100,
'thin': 200,
'light': 300,
'normal': 400,
'medium': 500,
'semibold': 600,
'bold': 700,
'extrabold': 800,
'black': 900,
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
/*
|-----------------------------------------------------------------------------
| Leading (line height) https://tailwindcss.com/docs/line-height
@@ -303,13 +296,12 @@ module.exports = {
*/
leading: {
'none': 1,
'tight': 1.25,
'normal': 1.5,
'loose': 2,
none: 1,
tight: 1.25,
normal: 1.5,
loose: 2,
},
/*
|-----------------------------------------------------------------------------
| Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
@@ -323,12 +315,11 @@ module.exports = {
*/
tracking: {
'tight': '-0.05em',
'normal': '0',
'wide': '0.05em',
tight: '-0.05em',
normal: '0',
wide: '0.05em',
},
/*
|-----------------------------------------------------------------------------
| Text colors https://tailwindcss.com/docs/text-color
@@ -344,7 +335,6 @@ module.exports = {
textColors: colors,
/*
|-----------------------------------------------------------------------------
| Background colors https://tailwindcss.com/docs/background-color
@@ -360,7 +350,6 @@ module.exports = {
backgroundColors: colors,
/*
|-----------------------------------------------------------------------------
| Background sizes https://tailwindcss.com/docs/background-size
@@ -375,12 +364,11 @@ module.exports = {
*/
backgroundSize: {
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
/*
|-----------------------------------------------------------------------------
| Border widths https://tailwindcss.com/docs/border-width
@@ -402,7 +390,6 @@ module.exports = {
'8': '8px',
},
/*
|-----------------------------------------------------------------------------
| Border colors https://tailwindcss.com/docs/border-color
@@ -422,7 +409,6 @@ module.exports = {
borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
/*
|-----------------------------------------------------------------------------
| Border radius https://tailwindcss.com/docs/border-radius
@@ -440,14 +426,13 @@ module.exports = {
*/
borderRadius: {
'none': '0',
'sm': '.125rem',
none: '0',
sm: '.125rem',
default: '.25rem',
'lg': '.5rem',
'full': '9999px',
lg: '.5rem',
full: '9999px',
},
/*
|-----------------------------------------------------------------------------
| Width https://tailwindcss.com/docs/width
@@ -469,8 +454,8 @@ module.exports = {
*/
width: {
'auto': 'auto',
'px': '1px',
auto: 'auto',
px: '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
@@ -495,11 +480,10 @@ module.exports = {
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',
'full': '100%',
'screen': '100vw'
full: '100%',
screen: '100vw',
},
/*
|-----------------------------------------------------------------------------
| Height https://tailwindcss.com/docs/height
@@ -516,8 +500,8 @@ module.exports = {
*/
height: {
'auto': 'auto',
'px': '1px',
auto: 'auto',
px: '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
@@ -531,11 +515,10 @@ module.exports = {
'32': '8rem',
'48': '12rem',
'64': '16rem',
'full': '100%',
'screen': '100vh'
full: '100%',
screen: '100vh',
},
/*
|-----------------------------------------------------------------------------
| Minimum width https://tailwindcss.com/docs/min-width
@@ -552,10 +535,9 @@ module.exports = {
minWidth: {
'0': '0',
'full': '100%',
full: '100%',
},
/*
|-----------------------------------------------------------------------------
| Minimum height https://tailwindcss.com/docs/min-height
@@ -572,11 +554,10 @@ module.exports = {
minHeight: {
'0': '0',
'full': '100%',
'screen': '100vh'
full: '100%',
screen: '100vh',
},
/*
|-----------------------------------------------------------------------------
| Maximum width https://tailwindcss.com/docs/max-width
@@ -593,19 +574,18 @@ module.exports = {
*/
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
xs: '20rem',
sm: '30rem',
md: '40rem',
lg: '50rem',
xl: '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
'full': '100%',
full: '100%',
},
/*
|-----------------------------------------------------------------------------
| Maximum height https://tailwindcss.com/docs/max-height
@@ -621,11 +601,10 @@ module.exports = {
*/
maxHeight: {
'full': '100%',
'screen': '100vh',
full: '100%',
screen: '100vh',
},
/*
|-----------------------------------------------------------------------------
| Padding https://tailwindcss.com/docs/padding
@@ -642,7 +621,7 @@ module.exports = {
*/
padding: {
'px': '1px',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
@@ -650,9 +629,10 @@ module.exports = {
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'10': '3rem',
'16': '4rem',
},
/*
|-----------------------------------------------------------------------------
| Margin https://tailwindcss.com/docs/margin
@@ -669,8 +649,8 @@ module.exports = {
*/
margin: {
'auto': 'auto',
'px': '1px',
auto: 'auto',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
@@ -686,7 +666,6 @@ module.exports = {
'32': '8rem',
},
/*
|-----------------------------------------------------------------------------
| Negative margin https://tailwindcss.com/docs/negative-margin
@@ -703,7 +682,7 @@ module.exports = {
*/
negativeMargin: {
'px': '1px',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
@@ -713,7 +692,6 @@ module.exports = {
'8': '2rem',
},
/*
|-----------------------------------------------------------------------------
| Shadows https://tailwindcss.com/docs/shadows
@@ -732,13 +710,12 @@ module.exports = {
shadows: {
default: '0 2px 4px 0 rgba(0,0,0,0.10)',
'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
'none': 'none',
md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
none: 'none',
},
/*
|-----------------------------------------------------------------------------
| Z-index https://tailwindcss.com/docs/z-index
@@ -753,7 +730,7 @@ module.exports = {
*/
zIndex: {
'auto': 'auto',
auto: 'auto',
'0': 0,
'10': 10,
'20': 20,
@@ -762,7 +739,6 @@ module.exports = {
'50': 50,
},
/*
|-----------------------------------------------------------------------------
| Opacity https://tailwindcss.com/docs/opacity
@@ -784,7 +760,6 @@ module.exports = {
'100': '1',
},
/*
|-----------------------------------------------------------------------------
| SVG fill https://tailwindcss.com/docs/svg
@@ -800,10 +775,9 @@ module.exports = {
*/
svgFill: {
'current': 'currentColor',
current: 'currentColor',
},
/*
|-----------------------------------------------------------------------------
| SVG stroke https://tailwindcss.com/docs/svg
@@ -819,10 +793,9 @@ module.exports = {
*/
svgStroke: {
'current': 'currentColor',
current: 'currentColor',
},
/*
|-----------------------------------------------------------------------------
| Modules https://tailwindcss.com/docs/configuration#modules
@@ -890,7 +863,6 @@ module.exports = {
zIndex: ['responsive'],
},
/*
|-----------------------------------------------------------------------------
| Plugins https://tailwindcss.com/docs/plugins
@@ -912,7 +884,6 @@ module.exports = {
}),
],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options
@@ -928,5 +899,4 @@ module.exports = {
important: false,
separator: ':',
},
}