Fix spinner component to allow it to be positioned correctly

This commit is contained in:
Dane Everitt 2018-07-21 22:31:03 -07:00
parent b9368eca45
commit 71d2a648ca
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 32 additions and 11 deletions

View File

@ -2,18 +2,15 @@
color: transparent;
pointer-events: none;
position: relative;
@apply .h-16;
&:after {
@apply .border-2 .border-grey-light .absolute .block;
@apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
animation: spinners--spin 500ms infinite linear;
border-radius: 9999px;
border-top-color: transparent !important;
border-right-color: transparent !important;
content: '';
width: 1em;
height: 1em;
left: calc(50% - (1em / 2));
top: calc(50% - (1em / 2));
}
&.spinner-xl:after {

View File

@ -641,9 +641,15 @@ module.exports = {
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
@ -670,8 +676,15 @@ module.exports = {
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
@ -697,8 +710,15 @@ module.exports = {
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
@ -723,6 +743,7 @@ module.exports = {
'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)',
'outline': '0 0 0 3px rgba(52,144,220,0.5)',
'none': 'none',
},
@ -833,11 +854,12 @@ module.exports = {
modules: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColors: ['responsive', 'hover'],
backgroundColors: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderColors: ['responsive', 'hover'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidths: ['responsive'],
@ -846,7 +868,7 @@ module.exports = {
flexbox: ['responsive'],
float: ['responsive'],
fonts: ['responsive'],
fontWeights: ['responsive', 'hover'],
fontWeights: ['responsive', 'hover', 'focus'],
height: ['responsive'],
leading: ['responsive'],
lists: ['responsive'],
@ -857,18 +879,20 @@ module.exports = {
minWidth: ['responsive'],
negativeMargin: ['responsive'],
opacity: ['responsive'],
outline: ['focus'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
shadows: ['responsive'],
shadows: ['responsive', 'hover', 'focus'],
svgFill: [],
svgStroke: [],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColors: ['responsive', 'hover'],
textColors: ['responsive', 'hover', 'focus'],
textSizes: ['responsive'],
textStyle: ['responsive', 'hover'],
textStyle: ['responsive', 'hover', 'focus'],
tracking: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],