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;
							 |