docs(styling): Fix positioning on Safari
This commit is contained in:
Pixelastic
parent
b44b982b76
commit
6af2dbd485
5 changed files with 79 additions and 99 deletions
|
|
@ -58,7 +58,7 @@
|
|||
.custom-search-wrapper.fln.h-60.w-100.rounded-auto.relative
|
||||
label.absolute.pin-left.z-1.w-1.h-100.ml-05.text-solstice.fill-current.cursor-pointer(for="docsearch")
|
||||
include ../assets/icons/magnifying-glass.svg
|
||||
input.custom-search-input.w-100.h-100.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-moon--1#docsearch(placeholder="Search the docs...")
|
||||
input.custom-search-input.w-100.h-2x.leading-h-2x.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-moon--1#docsearch(placeholder="Search the docs...")
|
||||
|
||||
//- Links
|
||||
block nav
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@
|
|||
.form-control {
|
||||
@apply rounded-auto;
|
||||
border: solid 1px #dbdbe7;
|
||||
@apply p-1;
|
||||
@apply h-2x leading-h-2x px-1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,19 +6,14 @@
|
|||
.custom-search-wrapper:focus-within {
|
||||
width: 100%;
|
||||
}
|
||||
/* Wrapper added by DocSearch */
|
||||
|
||||
/* purgecss start ignore */
|
||||
/* Wrapper added by DocSearch */
|
||||
.algolia-autocomplete {
|
||||
@apply w-100;
|
||||
}
|
||||
/* purgecss end ignore */
|
||||
/* Main search input */
|
||||
.custom-search-input {
|
||||
padding-top: calc(0.5rem + 2px);
|
||||
@apply .pb-05;
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
/* purgecss start ignore */
|
||||
.ds-dropdown-menu {
|
||||
@apply w-100;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,15 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/**
|
||||
* We're centering text in input by using a line-height equal to the height.
|
||||
* It's still a few px off when using the Hind font, so we compensate with some padding
|
||||
**/
|
||||
input {
|
||||
padding: 0.3rem 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Global styles */
|
||||
a,
|
||||
a:active {
|
||||
|
|
|
|||
|
|
@ -87,49 +87,15 @@ const colors = {
|
|||
'white-90': 'rgba(255, 255, 255, .90)',
|
||||
};
|
||||
|
||||
const dimensionScale = {
|
||||
auto: 'auto',
|
||||
'0': '0',
|
||||
'1': '1rem',
|
||||
'1x': '1.5rem',
|
||||
'2': '2rem',
|
||||
'2x': '3rem',
|
||||
'3': '4rem',
|
||||
'3x': '6rem',
|
||||
'4': '8rem',
|
||||
'4x': '12rem',
|
||||
'5': '16rem',
|
||||
'10': '10%',
|
||||
'20': '20%',
|
||||
'25': '25%',
|
||||
'30': '30%',
|
||||
'33': 'calc(100% / 3)',
|
||||
'40': '40%',
|
||||
'50': '50%',
|
||||
'60': '60%',
|
||||
'66': 'calc(100% / 1.5)',
|
||||
'70': '70%',
|
||||
'75': '75%',
|
||||
'80': '80%',
|
||||
'90': '90%',
|
||||
'100': '100%',
|
||||
full: '100%',
|
||||
const screenSizes = {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
};
|
||||
|
||||
const widthScale = {
|
||||
...dimensionScale,
|
||||
'100vw': '100vw',
|
||||
};
|
||||
const heightScale = {
|
||||
...dimensionScale,
|
||||
'100vh': '100vh',
|
||||
};
|
||||
|
||||
const spacingScale = {
|
||||
const dimensionScale = {
|
||||
auto: 'auto',
|
||||
'0': '0',
|
||||
'0x': '.25rem',
|
||||
'05': '.5rem',
|
||||
|
|
@ -157,10 +123,9 @@ const spacingScale = {
|
|||
'80': '80%',
|
||||
'90': '90%',
|
||||
'100': '100%',
|
||||
};
|
||||
const marginScale = {
|
||||
...spacingScale,
|
||||
auto: 'auto',
|
||||
'100vw': '100vw',
|
||||
'100vh': '100vh',
|
||||
...screenSizes,
|
||||
};
|
||||
|
||||
const fontScale = {
|
||||
|
|
@ -177,6 +142,24 @@ const fontScale = {
|
|||
'8': '3.5rem', // 56px
|
||||
};
|
||||
|
||||
// Leading (line-height) uses values proportional to the current font-size.
|
||||
// In addition, it also allows setting it to exact values found in the font and
|
||||
// dimension scales.
|
||||
// .leading-2 => Proportional to the current font size
|
||||
// .leading-text-2 => Using exact font size
|
||||
// .leading-h-2 => Using exact dimension size
|
||||
const leadingScale = {
|
||||
0: '1',
|
||||
1: '1.25',
|
||||
2: '1.5',
|
||||
};
|
||||
_.each(dimensionScale, (value, key) => {
|
||||
leadingScale[`h-${key}`] = value;
|
||||
});
|
||||
_.each(fontScale, (value, key) => {
|
||||
leadingScale[`text-${key}`] = value;
|
||||
});
|
||||
|
||||
const fontWeights = {
|
||||
hairline: 100,
|
||||
thin: 200,
|
||||
|
|
@ -219,6 +202,26 @@ const opacity = {
|
|||
'100': '1',
|
||||
};
|
||||
|
||||
const shadows = {
|
||||
button:
|
||||
'0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
|
||||
'button-up':
|
||||
'0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
|
||||
'button-down':
|
||||
'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #fff',
|
||||
|
||||
'button-primary':
|
||||
'0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
|
||||
'button-primary-up':
|
||||
'0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
|
||||
'button-primary-down':
|
||||
'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #5468ff;',
|
||||
|
||||
'1':
|
||||
'0 5px 15px 0 rgba(37, 44, 97, 0.15), 0 2px 4px 0 rgba(93, 100, 148, 0.2)',
|
||||
none: 'none',
|
||||
};
|
||||
|
||||
// Use font-weight without prefixes (.bold, .thin, etc)
|
||||
const customFontWeight = _.reduce(fontWeights, (result, value, key) =>
|
||||
_.assign(result, {
|
||||
|
|
@ -292,9 +295,9 @@ const customFlexbox = {
|
|||
justifyContent: 'space-between',
|
||||
},
|
||||
};
|
||||
// Use the spacing scale for top/right/bottom/let positioning
|
||||
// Use the dimension scale for top/right/bottom/left positioning
|
||||
const customPositions = _.reduce(
|
||||
spacingScale,
|
||||
dimensionScale,
|
||||
(result, value, key) =>
|
||||
_.assign(result, {
|
||||
[`top-${key}`]: { top: value },
|
||||
|
|
@ -338,36 +341,37 @@ const plugins = [
|
|||
];
|
||||
|
||||
module.exports = {
|
||||
width: dimensionScale,
|
||||
minWidth: dimensionScale,
|
||||
maxWidth: dimensionScale,
|
||||
height: dimensionScale,
|
||||
minHeight: dimensionScale,
|
||||
maxHeight: dimensionScale,
|
||||
padding: dimensionScale,
|
||||
margin: dimensionScale,
|
||||
negativeMargin: dimensionScale,
|
||||
|
||||
textSizes: fontScale,
|
||||
|
||||
leading: leadingScale,
|
||||
|
||||
fontWeights,
|
||||
width: widthScale,
|
||||
minWidth: widthScale,
|
||||
maxWidth: widthScale,
|
||||
|
||||
height: heightScale,
|
||||
minHeight: heightScale,
|
||||
maxHeight: heightScale,
|
||||
|
||||
padding: spacingScale,
|
||||
|
||||
margin: marginScale,
|
||||
negativeMargin: marginScale,
|
||||
|
||||
colors,
|
||||
textColors: colors,
|
||||
backgroundColors: colors,
|
||||
borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
|
||||
|
||||
zIndex,
|
||||
opacity,
|
||||
borderRadius,
|
||||
shadows,
|
||||
|
||||
plugins,
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
...screenSizes,
|
||||
print: { raw: 'print' },
|
||||
},
|
||||
textColors: colors,
|
||||
backgroundColors: colors,
|
||||
borderWidths: {
|
||||
default: '1px',
|
||||
'0': '0',
|
||||
|
|
@ -375,7 +379,6 @@ module.exports = {
|
|||
'2': '4px',
|
||||
'3': '8px',
|
||||
},
|
||||
borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
|
||||
fonts: {
|
||||
sans: [
|
||||
'system-ui',
|
||||
|
|
@ -412,14 +415,6 @@ module.exports = {
|
|||
'monospace',
|
||||
],
|
||||
},
|
||||
// Line-height
|
||||
leading: {
|
||||
'0': '0',
|
||||
'01': 1,
|
||||
'1': 1.25,
|
||||
'2': 1.5,
|
||||
'3': 2,
|
||||
},
|
||||
// Letter-spacing
|
||||
tracking: {
|
||||
tight: '-0.05em',
|
||||
|
|
@ -427,25 +422,6 @@ module.exports = {
|
|||
wide: '0.05em',
|
||||
poppins: '1.5px',
|
||||
},
|
||||
shadows: {
|
||||
button:
|
||||
'0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
|
||||
'button-up':
|
||||
'0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
|
||||
'button-down':
|
||||
'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #fff',
|
||||
|
||||
'button-primary':
|
||||
'0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
|
||||
'button-primary-up':
|
||||
'0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
|
||||
'button-primary-down':
|
||||
'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #5468ff;',
|
||||
|
||||
'1':
|
||||
'0 5px 15px 0 rgba(37, 44, 97, 0.15), 0 2px 4px 0 rgba(93, 100, 148, 0.2)',
|
||||
none: 'none',
|
||||
},
|
||||
svgFill: {
|
||||
current: 'currentColor',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue