base-preview-head.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <base target="_parent" />
  2. <style>
  3. /* While we aren't showing the main block yet, but still preparing, we want everything the user
  4. has rendered, which may or may not be in #storybook-root, to be display none */
  5. .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
  6. display: none;
  7. }
  8. .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
  9. display: none;
  10. }
  11. /* Hide our own blocks when we aren't supposed to be showing them */
  12. :not(.sb-show-preparing-story) > .sb-preparing-story,
  13. :not(.sb-show-preparing-docs) > .sb-preparing-docs,
  14. :not(.sb-show-nopreview) > .sb-nopreview,
  15. :not(.sb-show-errordisplay) > .sb-errordisplay {
  16. display: none;
  17. }
  18. .sb-show-main.sb-main-centered {
  19. margin: 0;
  20. display: flex;
  21. align-items: center;
  22. min-height: 100vh;
  23. }
  24. .sb-show-main.sb-main-centered #storybook-root {
  25. box-sizing: border-box;
  26. margin: auto;
  27. padding: 1rem;
  28. max-height: 100%; /* Hack for centering correctly in IE11 */
  29. }
  30. /* Vertical centering fix for IE11 */
  31. @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  32. .sb-show-main.sb-main-centered:after {
  33. content: '';
  34. min-height: inherit;
  35. font-size: 0;
  36. }
  37. }
  38. .sb-show-main.sb-main-fullscreen {
  39. margin: 0;
  40. padding: 0;
  41. display: block;
  42. }
  43. .sb-show-main.sb-main-padded {
  44. margin: 0;
  45. padding: 1rem;
  46. display: block;
  47. box-sizing: border-box;
  48. }
  49. .sb-wrapper {
  50. position: fixed;
  51. top: 0;
  52. bottom: 0;
  53. left: 0;
  54. right: 0;
  55. padding: 20px;
  56. font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
  57. BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  58. -webkit-font-smoothing: antialiased;
  59. overflow: auto;
  60. }
  61. .sb-heading {
  62. font-size: 14px;
  63. font-weight: 600;
  64. letter-spacing: 0.2px;
  65. margin: 10px 0;
  66. padding-right: 25px;
  67. }
  68. .sb-nopreview {
  69. display: flex;
  70. align-content: center;
  71. justify-content: center;
  72. }
  73. .sb-nopreview_main {
  74. margin: auto;
  75. padding: 30px;
  76. border-radius: 10px;
  77. background: rgba(0, 0, 0, 0.03);
  78. }
  79. .sb-nopreview_heading {
  80. text-align: center;
  81. }
  82. .sb-errordisplay {
  83. border: 20px solid rgb(187, 49, 49);
  84. background: #222;
  85. color: #fff;
  86. z-index: 999999;
  87. }
  88. .sb-errordisplay_code {
  89. padding: 10px;
  90. background: #000;
  91. color: #eee;
  92. font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
  93. 'Lucida Console', Consolas, Monaco, monospace;
  94. }
  95. .sb-errordisplay pre {
  96. white-space: pre-wrap;
  97. }
  98. @-webkit-keyframes sb-rotate360 {
  99. from {
  100. transform: rotate(0deg);
  101. }
  102. to {
  103. transform: rotate(360deg);
  104. }
  105. }
  106. @keyframes sb-rotate360 {
  107. from {
  108. transform: rotate(0deg);
  109. }
  110. to {
  111. transform: rotate(360deg);
  112. }
  113. }
  114. @-webkit-keyframes sb-glow {
  115. 0%,
  116. 100% {
  117. opacity: 1;
  118. }
  119. 50% {
  120. opacity: 0.4;
  121. }
  122. }
  123. @keyframes sb-glow {
  124. 0%,
  125. 100% {
  126. opacity: 1;
  127. }
  128. 50% {
  129. opacity: 0.4;
  130. }
  131. }
  132. /* We display the preparing loaders *over* the rendering story */
  133. .sb-preparing-story,
  134. .sb-preparing-docs {
  135. background-color: white;
  136. /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
  137. on top, but this isn't possible as it would require making CSS changes that could affect user code */
  138. z-index: 2147483647;
  139. }
  140. .sb-loader {
  141. -webkit-animation: sb-rotate360 0.7s linear infinite;
  142. animation: sb-rotate360 0.7s linear infinite;
  143. border-color: rgba(97, 97, 97, 0.29);
  144. border-radius: 50%;
  145. border-style: solid;
  146. border-top-color: #646464;
  147. border-width: 2px;
  148. display: inline-block;
  149. height: 32px;
  150. left: 50%;
  151. margin-left: -16px;
  152. margin-top: -16px;
  153. mix-blend-mode: difference;
  154. overflow: hidden;
  155. position: absolute;
  156. top: 50%;
  157. transition: all 200ms ease-out;
  158. vertical-align: top;
  159. width: 32px;
  160. z-index: 4;
  161. }
  162. .sb-previewBlock {
  163. background: #fff;
  164. border: 1px solid rgba(0, 0, 0, 0.1);
  165. border-radius: 4px;
  166. box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
  167. margin: 25px auto 40px;
  168. max-width: 600px;
  169. }
  170. .sb-previewBlock_header {
  171. align-items: center;
  172. box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
  173. display: flex;
  174. gap: 14px;
  175. height: 40px;
  176. padding: 0 12px;
  177. }
  178. .sb-previewBlock_icon {
  179. -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  180. animation: sb-glow 1.5s ease-in-out infinite;
  181. background: #e6e6e6;
  182. height: 14px;
  183. width: 14px;
  184. }
  185. .sb-previewBlock_icon:last-child {
  186. margin-left: auto;
  187. }
  188. .sb-previewBlock_body {
  189. -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  190. animation: sb-glow 1.5s ease-in-out infinite;
  191. height: 182px;
  192. position: relative;
  193. }
  194. .sb-argstableBlock {
  195. border-collapse: collapse;
  196. border-spacing: 0;
  197. font-size: 13px;
  198. line-height: 20px;
  199. margin: 25px auto 40px;
  200. max-width: 600px;
  201. text-align: left;
  202. width: 100%;
  203. }
  204. .sb-argstableBlock th:first-of-type,
  205. .sb-argstableBlock td:first-of-type {
  206. padding-left: 20px;
  207. }
  208. .sb-argstableBlock th:nth-of-type(2),
  209. .sb-argstableBlock td:nth-of-type(2) {
  210. width: 35%;
  211. }
  212. .sb-argstableBlock th:nth-of-type(3),
  213. .sb-argstableBlock td:nth-of-type(3) {
  214. width: 15%;
  215. }
  216. .sb-argstableBlock th:last-of-type,
  217. .sb-argstableBlock td:last-of-type {
  218. width: 25%;
  219. padding-right: 20px;
  220. }
  221. .sb-argstableBlock th span,
  222. .sb-argstableBlock td span {
  223. -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  224. animation: sb-glow 1.5s ease-in-out infinite;
  225. background-color: rgba(0, 0, 0, 0.1);
  226. border-radius: 0;
  227. box-shadow: none;
  228. color: transparent;
  229. }
  230. .sb-argstableBlock th {
  231. padding: 10px 15px;
  232. }
  233. .sb-argstableBlock-body {
  234. border-radius: 4px;
  235. box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
  236. }
  237. .sb-argstableBlock-body tr {
  238. background: transparent;
  239. overflow: hidden;
  240. }
  241. .sb-argstableBlock-body tr:not(:first-child) {
  242. border-top: 1px solid #e6e6e6;
  243. }
  244. .sb-argstableBlock-body tr:first-child td:first-child {
  245. border-top-left-radius: 4px;
  246. }
  247. .sb-argstableBlock-body tr:first-child td:last-child {
  248. border-top-right-radius: 4px;
  249. }
  250. .sb-argstableBlock-body tr:last-child td:first-child {
  251. border-bottom-left-radius: 4px;
  252. }
  253. .sb-argstableBlock-body tr:last-child td:last-child {
  254. border-bottom-right-radius: 4px;
  255. }
  256. .sb-argstableBlock-body td {
  257. background: #fff;
  258. padding-bottom: 10px;
  259. padding-top: 10px;
  260. vertical-align: top;
  261. }
  262. .sb-argstableBlock-body td:not(:first-of-type) {
  263. padding-left: 15px;
  264. padding-right: 15px;
  265. }
  266. .sb-argstableBlock-body button {
  267. -webkit-animation: sb-glow 1.5s ease-in-out infinite;
  268. animation: sb-glow 1.5s ease-in-out infinite;
  269. background-color: rgba(0, 0, 0, 0.1);
  270. border: 0;
  271. border-radius: 0;
  272. box-shadow: none;
  273. color: transparent;
  274. display: inline;
  275. font-size: 12px;
  276. line-height: 1;
  277. padding: 10px 16px;
  278. }
  279. .sb-argstableBlock-summary {
  280. margin-top: 4px;
  281. }
  282. .sb-argstableBlock-code {
  283. margin-right: 4px;
  284. margin-bottom: 4px;
  285. padding: 2px 5px;
  286. }
  287. </style>
  288. <script>
  289. /* globals window */
  290. /* eslint-disable no-underscore-dangle */
  291. try {
  292. if (window.top !== window) {
  293. window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  294. window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  295. window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
  296. }
  297. } catch (e) {
  298. // eslint-disable-next-line no-console
  299. console.warn('unable to connect to top frame for connecting dev tools');
  300. }
  301. </script>