xref: /expo/docs/global-styles/extras.ts (revision 79f4e8ce) 
1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3
4export const globalExtras = css`
5  img.wide-image {
6    max-width: 900px;
7  }
8
9  img[src*="https://placehold.it/15"]
10  {
11    width: 15px !important;
12    height: 15px !important;
13  }
14
15  .react-player > video {
16    outline: none;
17  }
18
19  .strike {
20    text-decoration: line-through;
21  }
22
23  // TODO: investigate why some style is forcing nested ordered lists to have
24  // 1rem bottom margin!
25  ul ul,
26  ol ul {
27    margin-bottom: 0 !important;
28  }
29
30  // note(simek): we need to leave this styling for the Expo CLI
31  // autogenerated content (at least for now)
32
33  details summary {
34    cursor: pointer;
35
36    &:hover {
37      h4,
38      div {
39        color: ${theme.text.secondary};
40      }
41    }
42
43    ::marker {
44      color: ${theme.icon.default};
45      margin-right: 8px;
46    }
47
48    h4 {
49      display: inline-block;
50      padding-left: 4px;
51    }
52  }
53`;
54