mirror of
https://github.com/Redocly/redoc.git
synced 2025-09-25 13:36:40 +03:00
feat(): Add Sofico styling
This commit is contained in:
Sven Depickere
parent
87ab898096
commit
3560ed9b69
|
|
@ -1,25 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ReDoc - Sofico</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ReDoc</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
redoc {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<redoc id="example"></redoc>
|
||||
</body>
|
||||
redoc {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<redoc id="example"></redoc>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@ export const H1 = styled.h1`
|
|||
|
||||
export const H2 = styled.h2`
|
||||
${headerCommonMixin(2)};
|
||||
color: black;
|
||||
color: ${({ theme }) => theme.colors.secondary.main};
|
||||
|
||||
${extensionsHook('H2')};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { observer } from 'mobx-react';
|
||||
import * as React from 'react';
|
||||
import { OpenAPIInfo } from '../../types';
|
||||
import { MilesConstants, OpenAPIInfo } from '../../types';
|
||||
import { LinkWrap, LogoImgEl, LogoWrap } from './styled.elements';
|
||||
|
||||
@observer
|
||||
|
|
@ -17,11 +17,19 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
|
|||
// Use the english word logo if no alt text is provided
|
||||
const altText = logoInfo.altText ? logoInfo.altText : 'logo';
|
||||
|
||||
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
|
||||
return (
|
||||
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
|
||||
{logoHref ? LinkWrap(logoHref)(logo) : logo}
|
||||
</LogoWrap>
|
||||
);
|
||||
// When certain query param is set we want to hide the logo
|
||||
const hideLogo =
|
||||
new URLSearchParams(window.location.search).get(MilesConstants.HIDE_LOGO_QUERY_PARAM) ==
|
||||
'true';
|
||||
if (hideLogo) {
|
||||
return <div></div>;
|
||||
} else {
|
||||
const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
|
||||
return (
|
||||
<LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
|
||||
{logoHref ? LinkWrap(logoHref)(logo) : logo}
|
||||
</LogoWrap>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export const LogoImgEl = styled.img`
|
|||
padding: ${props => props.theme.logo.gutter};
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 150px;
|
||||
`;
|
||||
|
||||
export const LogoWrap = styled.div`
|
||||
|
|
|
|||
72
src/custom-styles/fonts.css
Normal file
72
src/custom-styles/fonts.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/411412/000000000000000000017540/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/411412/000000000000000000017540/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/411412/000000000000000000017540/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/5608e4/000000000000000000017541/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
}
|
||||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/792cd5/000000000000000000017543/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
|
||||
format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/1fd190/000000000000000000017544/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
|
||||
format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
}
|
||||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/3ed6f0/00000000000000000001753e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
@font-face {
|
||||
font-family: aller;
|
||||
src: url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3)
|
||||
format('woff2'),
|
||||
url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3)
|
||||
format('woff'),
|
||||
url(https://use.typekit.net/af/2f801d/00000000000000000001753f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3)
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
}
|
||||
|
|
@ -14,3 +14,5 @@ export * from './utils';
|
|||
|
||||
export * from './styled-components';
|
||||
export { default as styled } from './styled-components';
|
||||
|
||||
import './custom-styles/fonts.css';
|
||||
|
|
|
|||
13
src/theme.ts
13
src/theme.ts
|
|
@ -14,7 +14,13 @@ const defaultTheme: ThemeInterface = {
|
|||
colors: {
|
||||
tonalOffset: 0.2,
|
||||
primary: {
|
||||
main: '#32329f',
|
||||
main: '#003659',
|
||||
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
|
||||
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
|
||||
contrastText: ({ colors }) => readableColor(colors.primary.main),
|
||||
},
|
||||
secondary: {
|
||||
main: '#6BA4B8',
|
||||
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
|
||||
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
|
||||
contrastText: ({ colors }) => readableColor(colors.primary.main),
|
||||
|
|
@ -107,11 +113,11 @@ const defaultTheme: ThemeInterface = {
|
|||
fontWeightRegular: '400',
|
||||
fontWeightBold: '600',
|
||||
fontWeightLight: '300',
|
||||
fontFamily: 'Roboto, sans-serif',
|
||||
fontFamily: 'aller, sans-serif',
|
||||
smoothing: 'antialiased',
|
||||
optimizeSpeed: true,
|
||||
headings: {
|
||||
fontFamily: 'Montserrat, sans-serif',
|
||||
fontFamily: 'aller, sans-serif',
|
||||
fontWeight: '400',
|
||||
lineHeight: '1.6em',
|
||||
},
|
||||
|
|
@ -235,6 +241,7 @@ export interface ResolvedThemeInterface {
|
|||
colors: {
|
||||
tonalOffset: number;
|
||||
primary: ColorSetting;
|
||||
secondary: ColorSetting;
|
||||
success: ColorSetting;
|
||||
warning: ColorSetting;
|
||||
error: ColorSetting;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export const MilesConstants = {
|
||||
MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description',
|
||||
HIDE_LOGO_QUERY_PARAM: 'hideLogo',
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user