You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					271 lines
				
				7.1 KiB
			
		
		
			
		
	
	
					271 lines
				
				7.1 KiB
			| 
											3 years ago
										 | "use strict"; | ||
|  | var __importDefault = (this && this.__importDefault) || function (mod) { | ||
|  |     return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
|  | }; | ||
|  | Object.defineProperty(exports, "__esModule", { value: true }); | ||
|  | const styled_components_1 = require("styled-components"); | ||
|  | const theme_get_1 = __importDefault(require("./theme-get")); | ||
|  | /** | ||
|  |  * | ||
|  |  * Gives you the default styles for all "content" elements like: | ||
|  |  * ul, li, h1-h5 etc. | ||
|  |  * | ||
|  |  * ### Example | ||
|  |  * | ||
|  |  * ```typescript
 | ||
|  |  * import styled from 'styled-components' | ||
|  |  * import { contentCSS } from '@adminjs/design-system' | ||
|  |  * | ||
|  |  * const myComponent = styled`
 | ||
|  |  *   ${contentCSS}; | ||
|  |  * `
 | ||
|  |  * ```
 | ||
|  |  * | ||
|  |  * @memberof module:@adminjs/design-system | ||
|  |  */ | ||
|  | const contentCSS = styled_components_1.css `
 | ||
|  |   font-family: ${({ theme }) => theme.font}; | ||
|  |   font-size: ${theme_get_1.default('fontSizes', 'md')}; | ||
|  |   line-height: ${theme_get_1.default('lineHeights', 'lg')}; | ||
|  |   font-weight: ${theme_get_1.default('fontWeights', 'light')}; | ||
|  |   div, span, applet, object, iframe, | ||
|  |   h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
|  |   a, abbr, acronym, address, big, cite, code, | ||
|  |   del, dfn, em, img, ins, kbd, q, s, samp, | ||
|  |   small, strike, strong, sub, sup, tt, var, | ||
|  |   b, u, i, center, | ||
|  |   dl, dt, dd, ol, ul, li, | ||
|  |   fieldset, form, label, legend, | ||
|  |   table, caption, tbody, tfoot, thead, tr, th, td, | ||
|  |   article, aside, canvas, details, embed, | ||
|  |   figure, figcaption, footer, header, hgroup, | ||
|  |   main, menu, nav, output, ruby, section, summary, | ||
|  |   time, mark, audio, video { | ||
|  |     &:not([class*="adminjs_"]) { | ||
|  |       margin: 0; | ||
|  |       padding: 0; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   img { | ||
|  |     max-width: 100%; | ||
|  |   } | ||
|  | 
 | ||
|  |   p, div { | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'xl')}; | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'md')}; | ||
|  |     font-weight: ${theme_get_1.default('fontWeights', 'light')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   strong, b { | ||
|  |     font-weight: ${theme_get_1.default('fontWeights', 'bolder')} | ||
|  |   } | ||
|  | 
 | ||
|  |   li + li { | ||
|  |     margin-top: ${theme_get_1.default('space', 'md')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   p:not(:last-child), | ||
|  |   dl:not(:last-child), | ||
|  |   ol:not(:last-child), | ||
|  |   ul:not(:last-child), | ||
|  |   blockquote:not(:last-child), | ||
|  |   pre:not(:last-child), | ||
|  |   table:not(:last-child) { | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'xl')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   pre { | ||
|  |     background-color: ${theme_get_1.default('colors', 'grey20')}; | ||
|  |     border: 1px solid ${theme_get_1.default('colors', 'grey40')}; | ||
|  |     padding: ${theme_get_1.default('space', 'xl')}; | ||
|  |     margin: ${theme_get_1.default('space', 'xl')} 0 ${theme_get_1.default('space', 'xxl')}; | ||
|  |     white-space: pre; | ||
|  |     font-family: 'Courier New', Courier, monospace; | ||
|  |   } | ||
|  | 
 | ||
|  |   h1, | ||
|  |   h2, | ||
|  |   h3, | ||
|  |   h4, | ||
|  |   h5, | ||
|  |   h6 { | ||
|  |     font-weight: ${theme_get_1.default('fontWeights', 'light')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'xl')}; | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'h3')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'xxl')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'xl')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h1:first-child, | ||
|  |   h2:first-child, | ||
|  |   h3:first-child, | ||
|  |   h4:first-child, | ||
|  |   h5:first-child, | ||
|  |   h6:first-child { | ||
|  |     margin-top: ${theme_get_1.default('space', 'sm')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h1 { | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'h1')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'xxl')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'x4')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'x3')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h2 { | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'h2')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'xxl')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'x3')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'xxl')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h3 { | ||
|  | 
 | ||
|  |   } | ||
|  | 
 | ||
|  |   h4 { | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'h4')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'xl')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'xxl')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'xl')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h5 { | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'xl')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'lg')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'xl')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'lg')}; | ||
|  |     font-weight: ${theme_get_1.default('fontWeights', 'normal')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   h6 { | ||
|  |     font-size: ${theme_get_1.default('fontSizes', 'lg')}; | ||
|  |     line-height: ${theme_get_1.default('lineHeights', 'lg')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'lg')}; | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'default')}; | ||
|  |     font-weight: ${theme_get_1.default('fontWeights', 'normal')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   blockquote { | ||
|  |     background-color: ${theme_get_1.default('colors', 'grey20')}; | ||
|  |     border-left: ${theme_get_1.default('space', 'sm')} solid ${theme_get_1.default('colors', 'primary20')}; | ||
|  |     padding: ${theme_get_1.default('space', 'xl')}; | ||
|  |     margin: ${theme_get_1.default('space', 'xxl')} 0; | ||
|  |   } | ||
|  | 
 | ||
|  |   ol { | ||
|  |     list-style-position: outside; | ||
|  |     margin-top: ${theme_get_1.default('space', 'lg')}; | ||
|  |     margin-left: ${theme_get_1.default('space', 'xl')}; | ||
|  |   } | ||
|  |   ol:not([type]) { | ||
|  |     list-style-type: decimal; | ||
|  |   } | ||
|  |   ol:not([type]).is-lower-alpha { | ||
|  |     list-style-type: lower-alpha; | ||
|  |   } | ||
|  |   ol:not([type]).is-lower-roman { | ||
|  |     list-style-type: lower-roman; | ||
|  |   } | ||
|  |   ol:not([type]).is-upper-alpha { | ||
|  |     list-style-type: upper-alpha; | ||
|  |   } | ||
|  |   ol:not([type]).is-upper-roman { | ||
|  |     list-style-type: upper-roman; | ||
|  |   } | ||
|  | 
 | ||
|  |   ul { | ||
|  |     list-style: disc outside; | ||
|  |     margin-left: ${theme_get_1.default('space', 'xl')}; | ||
|  |     margin-top: ${theme_get_1.default('space', 'lg')}; | ||
|  |   } | ||
|  |   ul ul { | ||
|  |     list-style-type: circle; | ||
|  |     margin-top: ${theme_get_1.default('space', 'sm')}; | ||
|  |   } | ||
|  |   ul ul ul { | ||
|  |     list-style-type: square; | ||
|  |   } | ||
|  | 
 | ||
|  |   em { | ||
|  |     font-style: italic; | ||
|  |   } | ||
|  | 
 | ||
|  |   dd { | ||
|  |     margin-left: ${theme_get_1.default('space', 'xl')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   figure { | ||
|  |     margin-left: ${theme_get_1.default('space', 'md')}; | ||
|  |     margin-right: ${theme_get_1.default('space', 'md')}; | ||
|  |     text-align: center; | ||
|  |   } | ||
|  |   figure:not(:first-child) { | ||
|  |     margin-top: ${theme_get_1.default('space', 'md')}; | ||
|  |   } | ||
|  |   figure:not(:last-child) { | ||
|  |     margin-bottom: ${theme_get_1.default('space', 'md')}; | ||
|  |   } | ||
|  |   figure img { | ||
|  |     display: inline-block; | ||
|  |   } | ||
|  |   figure figcaption { | ||
|  |     font-style: italic; | ||
|  |   } | ||
|  | 
 | ||
|  |   sup, | ||
|  |   sub { | ||
|  |     font-size: 75%; | ||
|  |   } | ||
|  | 
 | ||
|  |   table { | ||
|  |     width: 100%; | ||
|  |     margin: ${theme_get_1.default('space', 'xl')} 0; | ||
|  |   } | ||
|  |   table td, | ||
|  |   table th { | ||
|  |     padding: ${theme_get_1.default('space', 'lg')}; | ||
|  |     vertical-align: top; | ||
|  |   } | ||
|  |   table th { | ||
|  |     color: ${theme_get_1.default('colors', 'grey60')}; | ||
|  |     border-bottom: 1px solid ${theme_get_1.default('colors', 'grey40')}; | ||
|  |   } | ||
|  | 
 | ||
|  |   table td { | ||
|  |     border-bottom: 1px solid ${theme_get_1.default('colors', 'grey20')}; | ||
|  |   } | ||
|  |   table th:not([align]) { | ||
|  |     text-align: inherit; | ||
|  |   } | ||
|  |   table thead td, | ||
|  |   table thead th { | ||
|  |     border-bottom: 1px solid ${theme_get_1.default('colors', 'grey40')}; | ||
|  |     color: ${theme_get_1.default('colors', 'grey60')}; | ||
|  |   } | ||
|  |   table tfoot td, | ||
|  |   table tfoot th { | ||
|  |     border-bottom: 1px solid ${theme_get_1.default('colors', 'grey40')}; | ||
|  |     color: ${theme_get_1.default('colors', 'grey60')}; | ||
|  |   } | ||
|  |   table tbody tr:last-child td, | ||
|  |   table tbody tr:last-child th { | ||
|  |     border-bottom-width: 0; | ||
|  |   } | ||
|  | 
 | ||
|  |   .tabs li + li { | ||
|  |     margin-top: 0; | ||
|  |   } | ||
|  | 
 | ||
|  |   *:not(pre) > code { | ||
|  |     color: red !important; | ||
|  |     padding: 0.2em 0.4em !important; | ||
|  |     margin: 0; | ||
|  |     font-size: 85%; | ||
|  |     background-color: #afb8c133; | ||
|  |     border-radius: 6px; | ||
|  |   } | ||
|  | `;
 | ||
|  | exports.default = contentCSS; |