silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

decrease tailwindcss compile time

This commit is contained in:
philipp lang 2021-07-03 23:52:44 +02:00
parent 75a14134ed
commit dfe968dfde
7 changed files with 139 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.ackrc Normal file
View File

@ -0,0 +1,12 @@
--ignore-dir=vendor/composer
--ignore-dir=public/js
--ignore-dir=public/vendor
--ignore-dir=vendor
--ignore-dir=public/css
--ignore-dir=storage/debugbar
--type-set=tags:is:tags
--type-set=log:ext:log
--type-set=packagelock:is:package-lock.json
--notags
--nolog
--nopackagelock

1
resources/css/app.css vendored
View File

@ -4,3 +4,4 @@
@import "base";
@import "switch";
@import "layout";
@import "buttons";

31
resources/css/base.css vendored
View File

@ -34,37 +34,6 @@
@apply form-control-font;
}
.btn {
@apply px-3 py-2 uppercase no-underline text-sm rounded text-white;
}
.btn-sm {
@apply text-xs !important;
}
.btnp-0 {
padding: 0 !important;
}
.btn-primary {
@apply bg-primary;
}
.btn-primary:hover {
@apply bg-primary-light;
}
.btn-danger {
@apply bg-danger;
}
.btn-danger:hover {
@apply bg-danger-light;
}
.btn-default {
@apply bg-gray-600;
}
.btn-primary-light {
@apply bg-primary-light;
}
.btn-default:hover {
@apply bg-gray-600;
}
.field-wrapper {
@apply flex flex-col;
}

25
resources/css/buttons.css vendored Normal file
View File

@ -0,0 +1,25 @@
.btn {
@apply px-3 py-2 uppercase no-underline text-sm rounded text-white;
svg {
}
&.btn-sm {
@apply text-xs !important;
svg {
}
}
&.btn-primary {
@apply bg-primary-700;
&:hover {
@apply bg-primary-500;
}
}
&.btn-danger {
@apply bg-red-700;
&:hover {
@apply bg-red-500;
}
}
}

4
resources/css/switch.css vendored
View File

@ -7,6 +7,10 @@
--xs-margin: 0.2rem;
}
.bg-switch {
@apply bg-primary-700;
}
.field-switch {
input:checked + span {
transition: background 0.3s;

2
resources/js/components/FSwitch.vue
View File

@ -6,7 +6,7 @@
}">{{ label }}</span>
<div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
<input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
<span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-700': v === false}">
<span class="relative cursor-pointer flex flex-grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
<var class="absolute overlay bg-gray-400 rounded top-0"></var>

120
tailwind.config.js vendored
View File

@ -1,34 +1,106 @@
var tailwind = require('agnoster/tailwind.js');
var modules = require('js-modules/tailwind/index.js');
const { colors } = require('tailwindcss/defaultTheme');
module.exports = {
purge: {
enabled: false,
content: [
"resources/js/views/**/*.vue",
"resources/js/layouts/**/*.vue",
]
},
theme: {
extend: {
...tailwind,
colors: {
...tailwind.colors,
'primary-lightest': 'hsl(181, 98%, 93%)',
'primary-ligher': 'hsl(181, 78%, 62%)',
'primary-light': 'hsl(181, 75%, 44%)',
'primary': 'hsl(181, 75%, 26%)',
'primary-dark': 'hsl(181, 86%, 16%)',
'primary-darker': 'hsl(181, 94%, 10%)',
'primary-darkest': 'hsl(181, 98%, 6%)',
'primary-100': 'hsl(181, 98%, 93%)',
'primary-200': 'hsl(181, 84%, 78%)',
'primary-300': 'hsl(181, 78%, 62%)',
'primary-400': 'hsl(181, 76%, 53%)',
'primary-500': 'hsl(181, 75%, 44%)',
'primary-600': 'hsl(181, 75%, 35%)',
'primary-700': 'hsl(181, 75%, 26%)', // locked
'primary-800': 'hsl(181, 86%, 16%)',
'primary-900': 'hsl(181, 94%, 10%)'
},
width: tailwind.width,
height: tailwind.height,
},
colors: {
teal: [],
primary: {
100: 'hsl(181, 98%, 93%)',
200: 'hsl(181, 84%, 78%)',
300: 'hsl(181, 78%, 62%)',
400: 'hsl(181, 76%, 53%)',
500: 'hsl(181, 75%, 44%)',
600: 'hsl(181, 75%, 35%)',
700: 'hsl(181, 75%, 26%)', // locked
800: 'hsl(181, 86%, 16%)',
900: 'hsl(181, 94%, 10%)'
},
gray: colors.gray,
white: colors.white,
red: colors.red,
}
},
corePlugins: {
clear: false,
float: false,
boxSizing: false,
accessibility: false,
animation: false,
backgroundPosition: false,
backgroundRepeat: false,
skew: false,
verticalAlign: false,
wordBreak: false,
ringWidth: false,
ringColor: false,
ringOffsetColor: false,
ringOffsetWidth: false,
ringOpacity: false,
ringWidth: false,
},
variants: {
alignContent: ['responsive'],
alignItems: [],
alignSelf: [],
appearance: [],
backgroundAttachment: ['responsive'],
backgroundColor: ['hover'],
backgroundPosition: [],
backgroundSize: [],
borderCollapse: [],
borderColor: [],
borderRadius: [],
borderStyle: [],
borderWidth: [],
boxShadow: ['hover'],
cursor: [],
display: ['responsive', 'group-hover'],
fill: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: [],
flexWrap: ['responsive'],
fontFamily: [],
fontSize: ['responsive'],
fontSmoothing: [],
fontStyle: ['responsive'],
fontWeight: ['hover'],
height: ['responsive'],
inset: [],
justifyContent: ['responsive'],
width: ['responsive'],
zIndex: [],
gap: ['responsive'],
gridAutoFlow: ['responsive'],
gridTemplateColumns: ['responsive'],
gridColumn: ['responsive'],
gridColumnStart: ['responsive'],
gridColumnEnd: ['responsive'],
gridTemplateRows: ['responsive'],
gridRow: ['responsive'],
gridRowStart: ['responsive'],
gridRowEnd: ['responsive'],
transform: [],
transformOrigin: [],
scale: [],
rotate: [],
translate: [],
skew: [],
transitionProperty: [],
transitionTimingFunction: [],
transitionDuration: [],
},
variants: {},
plugins: [
modules.checkbox({}),
modules.switch({})