Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • clickable-select-chevron
  • feat/new-image-formats
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
29 results
Show changes
const Color = require('color');
const screens = require("./screens");
const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();
module.exports = {
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
options: {
whitelistPatterns: [
/^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
/^((sm|md|lg|xl)\:)?w-\d\d?/,
/^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
/^((sm|md|lg|xl)\:)?h-\d\d?/,
/^((sm|md|lg|xl)\:)?h-screen/,
/^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
/^((sm|md|lg|xl)\:)?-?m.?-auto?/,
/^((sm|md|lg|xl)\:)?p.?-\d\d?/,
/^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
/^((sm|md|lg|xl)\:)?hidden/,
/^((sm|md|lg|xl)\:)?block/,
/^((sm|md|lg|xl)\:)?inline-block/,
/^((sm|md|lg|xl)\:)?flex/,
/^((sm|md|lg|xl)\:)?inline-flex/,
/^((sm|md|lg|xl)\:)?grid/,
/^((sm|md|lg|xl)\:)?gap-\d\d?/,
/^((sm|md|lg|xl)\:)?static/,
/^((sm|md|lg|xl)\:)?flex-row-*/,
/^((sm|md|lg|xl)\:)?flex-col-*/,
/^((sm|md|lg|xl)\:)?grid-cols-*/,
/^((sm|md|lg|xl)\:)?col-span-*/,
/^((sm|md|lg|xl)\:)?row-span-*/,
/^((sm|md|lg|xl)\:)?order-*/,
/^((sm|md|lg|xl)\:)?items-*/,
/^((sm|md|lg|xl)\:)?float-*/,
/^((sm|md|lg|xl|hover)\:)?text-*/,
/^((sm|md|lg|xl)\:)?grid-flow-*/,
/^((sm|md|lg|xl)\:)?head-*/,
/^((sm|md|lg|xl)\:)?clearfix/,
/^((sm|md|lg|xl|hover)\:)?elevation-*/,
/^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
/^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
/whitespace-*/,
/opacity-*/,
/^truncate/,
/^break-*/,
/^overflow-*/,
/^duration-*/,
/^max-w-*/,
/^max-h-*/,
/ico--*/,
],
},
theme: {
extend: {
maxWidth: {
'xxs': '16rem',
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
height: {
'120': '30rem',
},
opacity: {
'85': '0.85',
......@@ -21,21 +74,20 @@ module.exports = {
},
spacing: {
'0/5': '0.125rem',
'14': '3.5rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
'52': '13rem',
'80': '20rem'
}
'80': '20rem',
},
// Breakpoints
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
'2xl': '1366px',
// flip-x
scale: {
'-1': '-1',
},
},
// Breakpoints
screens,
fontFamily: {
alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
......@@ -53,7 +105,9 @@ module.exports = {
'4xl': '2.45rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5.6rem',
'7xl': '5.3rem',
'8xl': '6.5rem',
'9xl': '7.5rem',
},
fontWeight: {
light: 300,
......@@ -66,10 +120,10 @@ module.exports = {
'black': '#000000',
'white': '#ffffff',
'grey': {
'25': '#fafafa',
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
'150': '#00000012',
'200': '#adadad',
'300': '#4c4c4c',
'400': '#343434',
......@@ -78,21 +132,56 @@ module.exports = {
'700': '#202020',
'800': '#1f1f1f',
},
'red': {
'100': '#d6151b',
'200': darken('#d6151b', 0.1),
'olive': {
'100': '#d6e8b3'
},
'green': {
'100': '#29bc51',
'200': darken('#29bc51', 0.1),
'300': darken('#29bc51', 0.18),
'200': '#92c6ab',
'300': '#76cc9f',
'400': '#4ca971',
},
'yellow': {
'100': '#fff7bf',
'200': '#f7f38a',
'300': '#ffea5a',
'400': '#fde119',
},
'red': {
'600': '#d60d53'
},
'brands': {
'facebook': '#067ceb',
'twitter': '#00c9ff',
'gmail': '#ec230e',
'linkedin': '#0066a9',
}
},
'blue': {
'100': '#abcdef',
'200': '#76b4cf',
'300': '#027da8',
},
'cyan': {
'100': '#a7d4d1',
'200': '#57b3bd',
'300': '#3e8793',
'400': '#497280',
'500': '#004958',
},
'orange': {
'100': '#f2d29f',
'200': '#f1ae7b',
'300': '#ed9654',
},
'violet': {
'100': '#edc8bd',
'200': '#d28c94',
'300': '#8d415f',
'400': '#840048',
'500': '#670047',
},
'pirati': {
'yellow': '#fec934'
},
},
container: {
center: true,
......@@ -109,90 +198,12 @@ module.exports = {
},
variants: {
textDecorationColor: ['responsive', 'hover'],
background: ['responsive'],
appearance: ['responsive'],
space: ['responsive'],
text: ['responsive', 'hover'],
zIndex: ['responsive'],
},
// textStyles: theme => ({ // defaults to {}
// heading: {
// output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
// fontWeight: theme('fontWeight.bold'),
// lineHeight: theme('lineHeight.tight'),
// },
// h1: {
// extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
// fontSize: theme('fontSize.5xl'),
// '@screen sm': {
// fontSize: theme('fontSize.6xl'),
// },
// },
// h2: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// '@screen sm': {
// fontSize: theme('fontSize.5xl'),
// },
// },
// h3: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// },
// h4: {
// extends: 'heading',
// fontSize: theme('fontSize.3xl'),
// },
// h5: {
// extends: 'heading',
// fontSize: theme('fontSize.2xl'),
// },
// h6: {
// extends: 'heading',
// fontSize: theme('fontSize.xl'),
// },
// link: {
// '&:hover': {
// textDecoration: 'underline',
// },
// },
// richText: {
// fontWeight: theme('fontWeight.normal'),
// fontSize: theme('fontSize.base'),
// lineHeight: theme('lineHeight.relaxed'),
// '> * + *': {
// marginTop: '1em',
// },
// 'h1': {
// extends: 'h1',
// },
// 'h2': {
// extends: 'h2',
// },
// 'h3': {
// extends: 'h3',
// },
// 'h4': {
// extends: 'h4',
// },
// 'h5': {
// extends: 'h5',
// },
// 'h6': {
// extends: 'h6',
// },
// 'ul': {
// listStyleType: 'disc',
// },
// 'ol': {
// listStyleType: 'decimal',
// },
// 'a': {
// extends: 'link',
// },
// 'b, strong': {
// fontWeight: theme('fontWeight.bold'),
// },
// 'i, em': {
// fontStyle: 'italic',
// },
// },
// }),
plugins: [
require('tailwind-css-variables')(
{
......@@ -202,7 +213,7 @@ module.exports = {
// options
}
),
require('tailwindcss-typography')({
require('@tailwindcss/typography')({
// all these options default to the values specified here
ellipsis: false, // whether to generate ellipsis utilities
hyphens: false, // whether to generate hyphenation utilities
......@@ -214,5 +225,81 @@ module.exports = {
color: "#dddddd",
opacityBoost: '0.23',
}),
require("./tailwind-plugins/buttons")({
defaultColor: {
text: 'white',
background: 'black',
iconBorder: 'grey.300'
},
colors: {
'black': {
text: 'white',
background: 'black',
iconBorder: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-700': {
text: 'white',
background: 'grey.700',
iconBorder: 'grey.500',
hoverBackground: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-500': {
text: 'white',
background: 'grey.500',
iconBorder: 'grey.300',
hoverBackground: 'grey.300',
hoverIconBorder: 'grey.400',
},
'grey-125': {
text: 'black',
background: 'grey.125',
hoverText: 'black',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
hoverText: 'black',
},
'blue-300': {
text: 'white',
background: 'blue.300',
},
'cyan-200': {
text: 'white',
background: 'cyan.200',
},
'green-300': {
text: 'white',
background: 'green.300',
},
'green-400': {
text: 'white',
background: 'green.400',
},
'orange-300': {
text: 'white',
background: 'orange.300',
},
'violet-400': {
text: 'white',
background: 'violet.400',
},
'violet-500': {
text: 'white',
background: 'violet.500',
},
'red-600': {
text: 'white',
background: 'red.600',
},
'brands-facebook': {
text: 'white',
background: 'brands.facebook',
}
}
})
]
}